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

<template>
  <div class="box">
    <Prequalification />
    <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"
        @update:time-sort="handleChangeTimeSort"
      />
    </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"
      :has-been-chosen="detailRowChosen"
      :description="detailDescription"
      :image-paths="detailPictures"
      :video-paths="detailVideos"
      :has-previous="hasPreviousRow"
      :has-next="hasNextRow"
      @close="closeDetailDialog"
      @update:previous="handleChangePrevious"
      @update:next="handleChangeNext"
      @update:choose="handleChangeChoose"
    />
  </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, { DataSourceItem } from '../common/AlertTable.vue';
  import DetailDialog from '../common/DetailDialog.vue';
  import Pagination from '../common/Pagination.vue';
  import { useWorkLocation } from '../../hooks/useWorkLocation';
  import { useIssueMainType } from '../../hooks/useIssueMainType';
  import {
    TableQueryForm,
    getDefaultTableData,
    deleteDefaultTableData,
    copyToShowTableData,
    updateDefaultHide,
    updateDefaultHideAll,
    updateDefaultPriority,
    updateDefaultPriorityAll,
  } from '@/api/datamanagement/alert-default';
  import Prequalification from '../common/Prequalification.vue';

  import { useUserStore } from '@/store/modules/user';
  import { useGlobSetting } from '@/hooks/setting';
  import urlJoin from 'url-join';
  import { getHeaders } from '@/utils/http/axios';

  import { PERM_DATA } from '@/types/permission/constants';

  const userStore = useUserStore();
  const { locationOptions, getLocationOptions } = useWorkLocation();
  const { aiMainOptions, manualMainOptions, getAIMainOptions, getManualMainOptions } =
    useIssueMainType();

  const { urlPrefix } = useGlobSetting();

  const alertTableRef = ref<typeof AlertTable>();
  const tableData = ref<DataSourceItem[]>([]);
  const showActionBar = ref(false);
  const chooseNum = ref(0);
  const chooseRow = ref<DataSourceItem[]>([]); // 被选中的数据行
  const chooseId = ref<number[]>([]);
  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 detailRowChosen = ref(false); // 当前行是否被选中
  const detailRow = ref(); // 当前行
  const detailCurRowIndex = ref(0); // 当前行index
  const detailPreviousRow = ref(); // 上一行
  const detailNextRow = ref(); // 下一行
  const hasPreviousRow = ref(false); // 是否有上一行
  const hasNextRow = ref(false); // 是否有下一行
  const detailDescription = ref('');
  const detailPictures = ref<string[]>([]);
  const detailVideos = ref<string[]>([]);
  // 分页
  const total = ref(0);

  const query = ref<TableQueryForm>({
    pageNumber: 1,
    pageSize: 10,
    queryParam: {},
  });
  // 查询
  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 currentUrl = urlJoin(window.location.origin, window.location.pathname);

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

      const config: AxiosRequestConfig = {
        headers: getHeaders(),
        responseType: 'blob',
      };
      const response = await axios.post(urlPrefix + '/issue/exportIssueList', 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 handleChangeTimeSort = (curTimeSort) => {
    query.value.queryParam.order = curTimeSort;
    getTableData();
  };

  // 多选
  const handlePop = (selection) => {
    chooseRow.value = selection;
    chooseId.value = [];
    cancelUrgentFlag.value = true;
    selection.forEach((item) => {
      if (chooseId.value.indexOf(item.id) === -1) chooseId.value.push(item.id);
      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 handleChangeChoose = (status) => {
    alertTableRef.value?.updateCurRowChosen(detailRow.value, !status);
    updateDetailDialog(detailRow.value);
  };

  // 全部隐藏
  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;
  };
  // 更新detailCurRowIndex、detailPreviousRow、detailNextRow、hasPreviousRow、hasNextRow
  const updateDetailDialog = (curRow) => {
    detailDescription.value = curRow.description;
    detailPictures.value = curRow.pictures;
    detailVideos.value = curRow.videos;
    detailCurRowIndex.value = tableData.value.findIndex((item) => item.id === curRow.id);
    detailPreviousRow.value = tableData.value[detailCurRowIndex.value - 1];
    detailNextRow.value = tableData.value[detailCurRowIndex.value + 1];
    if (detailPreviousRow.value) hasPreviousRow.value = true;
    else hasPreviousRow.value = false;
    if (detailNextRow.value) hasNextRow.value = true;
    else hasNextRow.value = false;
    if (chooseRow.value.findIndex((item) => item.id === curRow.id) !== -1)
      detailRowChosen.value = true;
    else detailRowChosen.value = false;
  };
  const handleDetail = (row) => {
    isDetailDialogShow.value = true;
    detailRow.value = row;
    updateDetailDialog(detailRow.value);
  };
  // 上一个
  const handleChangePrevious = () => {
    detailRow.value = detailPreviousRow.value;
    updateDetailDialog(detailRow.value);
  };
  // 下一个
  const handleChangeNext = () => {
    detailRow.value = detailNextRow.value;
    updateDetailDialog(detailRow.value);
  };

  // 单个加急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(PERM_DATA.VIOLATION_FAKE_ADD) ||
      userStore.checkPermission(PERM_DATA.VIOLATION_FAKE_DELETE)
    );
  };

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

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

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

  .table-list {
    flex: 1;

    .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="less">
  .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>