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

<template>
  <div class="box">
    <div class="search-form">
      <QueryForm :is-show-tab="false" :ai-options="aiOptions" :manual-options="manualOptions"
        :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="isActiveHide ? 'btn-active' : 'btn-normal'" @click="handleHideAll">全部隐藏</el-button>
        <el-button :class="isActiveDelete ? 'btn-active' : 'btn-normal'" @click="handleDeleteAll">删除</el-button>
        <el-button :class="isActiveUrgent ? 'btn-active' : 'btn-normal'" @click="handleUrgentAll">标记加急</el-button>
        <el-button :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 :show-drawer="isDetailDialogShow" :description="detailDescription" :image-paths="detailPictures"
      @toggle-status="switchDetailDialog" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeMount } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
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 {
  getDefaultTableData,
  updateDefaultTableData,
  deleteDefaultTableData,
  copyToShowTableData
} from '@/api/datamanagement/alert-default';

const { aiOptions, manualOptions, getAIOptions, getManualOptions } = useIssueType();
const { locationOptions, getLocationOptions } = useWorkLocation();

const alertTableRef = ref<typeof AlertTable>();
const tableData = ref([]);
const showActionBar = ref(false);
const chooseNum = ref(0);
const chooseId = ref<number[]>([]);
const isActiveHide = ref(false);
const isActiveDelete = ref(false);
const isActiveUrgent = ref(false);
const isActiveCopy = ref(false);
// 详情
const isDetailDialogShow = ref(false);
const detailDescription = ref('');
const detailPictures = 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 handlePop = (selection) => {
  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 = () => {
  chooseNum.value = 0;
  alertTableRef.value?.clearAll();
  showActionBar.value = false;
};

// 全部隐藏
const handleHideAll = () => {
  if (showActionBar.value) isActiveHide.value = !isActiveHide.value;
  const updateList = {
    id: chooseId.value,
    hide: true,
  };
  updateDefaultTableData(updateList).then(() => {
    getTableData();
    ElMessage({
      message: '隐藏成功',
      type: 'success',
    });
    setTimeout(function () {
      isActiveHide.value = !isActiveHide.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();
        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 = {
    id: chooseId.value,
    priority: 1,
  };
  updateDefaultTableData(updateList).then(() => {
    getTableData();
    ElMessage({
      message: '已加急',
      type: 'success',
    });
    setTimeout(function () {
      isActiveUrgent.value = !isActiveUrgent.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);
  })
};

// 详情
const switchDetailDialog = (show: boolean) => {
  isDetailDialogShow.value = show;
};
const handleDetail = (row) => {
  isDetailDialogShow.value = true;
  detailDescription.value = row.description;
  detailPictures.value = row.pictures;
};

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

// 单个显示hide=false/隐藏hide=true
const handleShow = (row) => {
  const tempHide = row.isHide === false ? true : false;
  const updateList = {
    id: [row.id],
    hide: tempHide,
  };
  updateDefaultTableData(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;
  })
};

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

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

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

.table-list {
  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>