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

<template>
  <div class="box">
    <Prequalification />
    <div class="search-form">
      <QueryFormSimple
        :ai-options="aiMainOptions"
        :location-options="locationOptions"
        @on-search="handleSearch"
        @on-reset="handleReset"
      />
    </div>
    <div class="table-list">
      <div v-if="showActionBar" class="action-bar">
        <span class="num-text">已选{{ chooseNum }}项</span>
        <el-button :class="isActiveDelete ? 'btn-active' : 'btn-normal'" @click="handleDeleteAll"
          >删除</el-button
        >
        <span class="close-btn" @click="handleSelectNone"></span>
      </div>
      <AlertTableSimple
        ref="alertTableRef"
        class="table-bar"
        :table-data="tableData"
        :on-detail="handleDetail"
        :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 QueryFormSimple from '../common/QueryFormSimple.vue';
  import AlertTableSimple, { DataSourceItem } from '../common/AlertTableSimple.vue';
  import DetailDialog from '../common/DetailDialog.vue';
  import Pagination from '../common/Pagination.vue';
  import { useWorkLocation } from '../../hooks/useWorkLocation';
  import { useIssueMainType } from '../../hooks/useIssueMainType';
  import Prequalification from '../common/Prequalification.vue';
  import {
    TableQueryForm,
    getDefaultTableData,
    deleteDefaultTableData,
  } from '@/api/datamanagement/alert-default';

  const { locationOptions, getLocationOptions } = useWorkLocation();
  const { aiMainOptions, getAIMainOptions } = useIssueMainType();

  const alertTableRef = ref<typeof AlertTableSimple>();
  const tableData = ref<DataSourceItem[]>([]);
  const showActionBar = ref(false);
  const chooseNum = ref(0);
  const chooseRow = ref<DataSourceItem[]>([]); // 被选中的数据行
  const chooseId = ref<number[]>([]);
  const isActiveDelete = 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 handleChangeTimeSort = (curTimeSort) => {
    query.value.queryParam.order = curTimeSort;
    getTableData();
  };

  // 多选
  const handlePop = (selection) => {
    chooseRow.value = selection;
    chooseId.value = [];
    selection.forEach((item) => {
      if (chooseId.value.indexOf(item.id) === -1) chooseId.value.push(item.id);
    });
    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 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;
      });
  };

  // 详情
  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);
  };

  // 删除
  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;
    });
  };

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

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

<style scoped lang="scss">
  .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="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>