sl-sfy-safety/src/views/datamanager/alertformdata/components/default/Default.vue

<template>
  <div class="box">
    <div style="margin-bottom: 10px; display: flex" v-if="hasDevModePermisson()">
      <div style="line-height: 33px">预审后生效模式：</div>
      <el-switch :model-value="devMode" @change="switchDevMode" />
    </div>
    <div class="search-form">
      <QueryForm
        :is-show-tab="false"
        :ai-options="aiMainOptions"
        :manual-options="manualMainOptions"
        :location-options="locationOptions"
        @on-search="handleSearch"
        @on-reset="handleReset"
        @on-export="handleExport"
      />
    </div>
    <div class="table-list">
      <div v-if="showActionBar" class="action-bar">
        <span class="num-text">已选{{ chooseNum }}项</span>
        <el-button
          :class="isActiveCancelHide ? 'btn-active' : 'btn-normal'"
          @click="handleCancelHideAll"
          >全部生效</el-button
        >
        <el-button :class="isActiveHide ? 'btn-active' : 'btn-normal'" @click="handleHideAll"
          >全部失效</el-button
        >
        <el-button :class="isActiveDelete ? 'btn-active' : 'btn-normal'" @click="handleDeleteAll"
          >删除</el-button
        >
        <el-button
          v-if="!cancelUrgentFlag"
          :class="isActiveUrgent ? 'btn-active' : 'btn-normal'"
          @click="handleUrgentAll"
          >标记加急</el-button
        >
        <el-button
          v-if="cancelUrgentFlag"
          :class="isActiveCancelUrgent ? 'btn-active' : 'btn-normal'"
          @click="handleCancelUrgentAll"
          >取消加急</el-button
        >
        <el-button
          v-if="hasPermisson()"
          :class="isActiveCopy ? 'btn-active' : 'btn-normal'"
          @click="handleCopyToShow"
          >复制到展示数据</el-button
        >
        <span class="close-btn" @click="handleSelectNone"></span>
      </div>
      <AlertTable
        ref="alertTableRef"
        class="table-bar"
        :is-show-tab="false"
        :table-data="tableData"
        :on-detail="handleDetail"
        :on-urgent="handleUrgent"
        :on-show="handleShow"
        :on-delete="handleDelete"
        @update:selection="handlePop"
      />
    </div>
    <div class="pagination-box">
      <Pagination
        v-model:page="query.pageNumber"
        v-model:size="query.pageSize"
        :total="total"
        @update:page="handlePageChange"
        @update:size="handleSizeChange"
      />
    </div>
    <DetailDialog
      v-if="isDetailDialogShow"
      :description="detailDescription"
      :image-paths="detailPictures"
      :video-paths="detailVideos"
      @close="closeDetailDialog"
    />
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, onBeforeMount } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import axios, { AxiosRequestConfig } from 'axios';
  import QueryForm from '../common/QueryForm.vue';
  import AlertTable from '../common/AlertTable.vue';
  import DetailDialog from '../common/DetailDialog.vue';
  import Pagination from '../common/Pagination.vue';
  // import { useIssueType } from '../../hooks/useIssueType';
  import { useWorkLocation } from '../../hooks/useWorkLocation';
  import { useIssueMainType } from '../../hooks/useIssueMainType';
  import {
    getDefaultTableData,
    deleteDefaultTableData,
    copyToShowTableData,
    updateDefaultHide,
    updateDefaultHideAll,
    updateDefaultPriority,
    updateDefaultPriorityAll,
  } from '@/api/datamanagement/alert-default';
  import { getDevMode, switchDevMode as SDM } from '@/api/datamanagement/getDevMode';

  import { useUserStore } from '@/store/modules/user';
  import { useGlobSetting } from '@/hooks/setting';

  const userStore = useUserStore();
  // const { aiOptions, manualOptions, getAIOptions, getManualOptions } = useIssueType();
  const { locationOptions, getLocationOptions } = useWorkLocation();
  const { aiMainOptions, manualMainOptions, getAIMainOptions, getManualMainOptions } =
    useIssueMainType();

  const headers = {
    Satoken: userStore.getToken,
    Tenantid: userStore.getTenantId,
  };
  const { urlPrefix } = useGlobSetting();

  const alertTableRef = ref<typeof AlertTable>();
  const tableData = ref([]);
  const showActionBar = ref(false);
  const chooseNum = ref(0);
  const chooseId = ref<number[]>([]);
  // const cancelHideFlag = ref(true);   // true取消隐藏 / false全部隐藏
  const cancelUrgentFlag = ref(true); // true取消加急 / false全部加急
  const isActiveHide = ref(false);
  const isActiveCancelHide = ref(false);
  const isActiveDelete = ref(false);
  const isActiveUrgent = ref(false);
  const isActiveCancelUrgent = ref(false);
  const isActiveCopy = ref(false);
  // 详情
  const isDetailDialogShow = ref(false);
  const detailDescription = ref('');
  const detailPictures = ref<string[]>([]);
  const detailVideos = ref<string[]>([]);
  // 分页
  const total = ref(0);

  const query = ref({
    pageNumber: 1,
    pageSize: 10,
  });
  // 查询
  const handleSearch = (queryForm) => {
    query.value = queryForm;
    getTableData();
  };
  // 重置
  const handleReset = (queryForm) => {
    query.value = queryForm;
    getTableData();
  };
  // 导出
  const handleExport = async (queryForm, workShop) => {
    const tempWorkShopIds = ref<number[]>([]);
    if (workShop.length === 0) {
      locationOptions.value.forEach((item) => {
        tempWorkShopIds.value.push(item.value);
      });
    } else {
      tempWorkShopIds.value = workShop;
    }

    try {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const currentDate = `${year}${month}${day}`;

      const requestBody = {
        endTime: queryForm.endTime,
        fileName: '',
        isExportHidden: true,
        startTime: queryForm.startTime,
        workshopIds: tempWorkShopIds.value,
      };

      const config: AxiosRequestConfig = {
        headers,
        responseType: 'blob',
      };
      const response = await axios.post(urlPrefix + '/issue/export', requestBody, config);
      const blob = new Blob([response.data], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      });
      // 创建下载链接
      let downloadLink: HTMLAnchorElement | null = document.createElement('a');
      const url = window.URL.createObjectURL(blob);
      downloadLink.href = url;
      downloadLink.download = `安全违规问题数据统计表${currentDate}.xlsx`;
      downloadLink.click();
      // 移除下载链接
      window.URL.revokeObjectURL(url);
      downloadLink = null;
    } catch (error) {
      console.error('Error downloading file:', error);
    }
  };

  // 多选
  const handlePop = (selection) => {
    chooseId.value = [];
    // cancelHideFlag.value = true;
    cancelUrgentFlag.value = true;
    selection.forEach((item) => {
      if (chooseId.value.indexOf(item.id) === -1) chooseId.value.push(item.id);
      // 只要有一个item.isHide === false 说明多选的这些选项不是全都隐藏/失效，不用变成“取消隐藏”/全部生效
      // if (item.isHide === false) cancelHideFlag.value = false;
      // 只要有一个item.priority === 0 说明不是全都加急状态，不用变成“取消加急”
      if (item.priority === 0) cancelUrgentFlag.value = false;
    });
    chooseNum.value = selection.length;
    showActionBar.value = chooseNum.value > 0 ? true : false;
  };
  // 取消多选
  const handleSelectNone = () => {
    chooseId.value = [];
    chooseNum.value = 0;
    alertTableRef.value?.clearAll();
    showActionBar.value = false;
  };

  // 全部隐藏
  const handleHideAll = () => {
    if (showActionBar.value) isActiveHide.value = !isActiveHide.value;
    const updateList = {
      ids: chooseId.value,
      hide: true,
    };
    updateDefaultHideAll(updateList).then(() => {
      handleSelectNone();
      getTableData();
      ElMessage({
        message: '操作成功',
        type: 'success',
      });
      setTimeout(function () {
        isActiveHide.value = !isActiveHide.value;
      }, 1000);
    });
  };

  // 取消隐藏
  const handleCancelHideAll = () => {
    if (showActionBar.value) isActiveCancelHide.value = !isActiveCancelHide.value;
    const updateList = {
      ids: chooseId.value,
      hide: false,
    };
    updateDefaultHideAll(updateList).then(() => {
      handleSelectNone();
      getTableData();
      ElMessage({
        message: '操作成功',
        type: 'success',
      });
      setTimeout(function () {
        isActiveCancelHide.value = !isActiveCancelHide.value;
      }, 1000);
    });
  };

  // 批量删除
  const handleDeleteAll = () => {
    if (showActionBar.value) isActiveDelete.value = !isActiveDelete.value;
    ElMessageBox.confirm('删除之后，数据无法恢复', '请确认是否删除数据', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      customClass: 'deleteMessage',
      center: true,
    })
      .then(() => {
        deleteDefaultTableData(chooseId.value).then(() => {
          ElMessage({
            type: 'success',
            message: '删除成功',
          });
          getTableData();
          handleSelectNone();
          isActiveDelete.value = !isActiveDelete.value;
        });
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        });
        isActiveDelete.value = !isActiveDelete.value;
      });
  };

  // 标记加急，设置priority = 1
  const handleUrgentAll = () => {
    if (showActionBar.value) isActiveUrgent.value = !isActiveUrgent.value;
    const updateList = {
      ids: chooseId.value,
      priority: 1,
    };
    updateDefaultPriorityAll(updateList).then(() => {
      handleSelectNone();
      getTableData();
      ElMessage({
        message: '已加急',
        type: 'success',
      });
      setTimeout(function () {
        isActiveUrgent.value = !isActiveUrgent.value;
      }, 1000);
    });
  };

  // 取消加急
  const handleCancelUrgentAll = () => {
    if (showActionBar.value) isActiveCancelUrgent.value = !isActiveCancelUrgent.value;
    const updateList = {
      ids: chooseId.value,
      priority: 0,
    };
    updateDefaultPriorityAll(updateList).then(() => {
      handleSelectNone();
      getTableData();
      ElMessage({
        message: '已取消加急',
        type: 'success',
      });
      setTimeout(function () {
        isActiveCancelUrgent.value = !isActiveCancelUrgent.value;
      }, 1000);
    });
  };

  // 复制到展示数据
  const handleCopyToShow = () => {
    if (showActionBar.value) isActiveCopy.value = !isActiveCopy.value;
    copyToShowTableData(chooseId.value).then(() => {
      ElMessage({
        message: '复制成功',
        type: 'success',
      });
      setTimeout(function () {
        isActiveCopy.value = !isActiveCopy.value;
      }, 1000);
      handleSelectNone();
    });
  };

  // 详情
  const closeDetailDialog = () => {
    isDetailDialogShow.value = false;
  };
  const handleDetail = (row) => {
    isDetailDialogShow.value = true;
    detailDescription.value = row.description;
    detailPictures.value = row.pictures;
    detailVideos.value = row.videos;
  };

  // 单个加急priority=1/取消加急priority=0
  const handleUrgent = (row) => {
    const tempPriority = row.priority === 0 ? 1 : 0;
    const updateList = {
      id: row.id,
      priority: tempPriority,
    };
    updateDefaultPriority(updateList).then(() => {
      getTableData();
    });
  };

  // 单个显示hide=false/隐藏hide=true
  const handleShow = (row) => {
    const tempHide = row.isHide === false ? true : false;
    const updateList = {
      id: row.id,
      hide: tempHide,
    };
    updateDefaultHide(updateList).then(() => {
      getTableData();
    });
  };

  // 删除
  const handleDelete = (row) => {
    ElMessageBox.confirm('删除之后，数据无法恢复', '请确认是否删除数据', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      customClass: 'deleteMessage',
      center: true,
    })
      .then(() => {
        deleteDefaultTableData([row.id]).then(() => {
          ElMessage({
            type: 'success',
            message: '删除成功',
          });
          getTableData();
        });
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        });
      });
  };

  // 换页，重新获取表格
  const handlePageChange = (val) => {
    query.value.pageNumber = val;
    getTableData();
  };
  const handleSizeChange = (val) => {
    query.value.pageSize = val;
    getTableData();
  };

  const getTableData = () => {
    getDefaultTableData(query.value).then((res) => {
      console.log(res);
      tableData.value = res.records;
      total.value = res.totalRow;
    });
  };

  const hasPermisson = () => {
    return userStore.checkPermission('question_mock_edit_admin');
  };

  onMounted(() => {
    getTableData();
  });

  const devMode = ref(true);
  getDevMode().then((res) => {
    devMode.value = res;
  });

  const switchDevMode = () => {
    SDM();
    devMode.value = !devMode.value;
  };

  const hasDevModePermisson = () => {
    return userStore.checkPermission('control_activation');
  };

  onBeforeMount(() => {
    // getAIOptions();
    // getManualOptions();
    getLocationOptions();
    getAIMainOptions();
    getManualMainOptions();
  });
</script>

<style scoped lang="scss">
  .box {
    display: flex;
    flex-direction: column;
  }

  .table-list {
    flex: 1;
    // height: calc(100vh - 350px);
    // overflow-y: scroll;

    .action-bar {
      display: flex;
      align-items: center;
      position: absolute;
      min-width: calc(100vw - 266px);
      height: 50px;
      border-radius: 4px 4px 0px 0px;
      background-color: #ddefff;
      z-index: 10;

      .num-text {
        margin: 0 34px 0 25px;
        color: rgba(0, 0, 0, 0.85);
        font-weight: 500;
      }

      .btn-normal {
        color: #1890ff;
        background: transparent;
        border: 1px solid #1890ff;
        border-radius: 2px;
      }

      .btn-active {
        color: #ffffff;
        background-color: #1890ff;
      }

      .close-btn {
        margin-left: auto;
        margin-right: 20px;
      }

      .close-btn:before {
        content: '\2716';
        color: #000;
        cursor: pointer;
      }
    }

    .table-bar {
      position: relative;
    }
  }

  .pagination-box {
    height: 50px;
    margin-top: 10px;
  }
</style>
<style lang="scss">
  .deleteMessage {
    padding: 20px 24px;
    box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03), 0px 9px 28px 0px rgba(0, 0, 0, 0.05),
      0px 6px 16px -8px rgba(0, 0, 0, 0.08);
    border-radius: 8px;

    .el-message-box__headerbtn {
      margin-top: 12px;
      margin-right: 12px;
    }

    .el-message-box__title {
      justify-content: start;
      color: rgba(0, 0, 0, 0.88);
      font-size: 16px;
      font-weight: 500;
    }

    .el-message-box__container {
      justify-content: start;
      margin-left: 23px;
    }

    .el-message-box__btns {
      display: block;
      float: right;
    }
  }
</style>