sl-sfy-safety/src/views/emergency/emergency-plan/PageApproval.vue

<template>
  <div class="safety-platform-container">
    <div class="safety-platform-container__header">
      <div class="breadcrumb-title">预案审批</div>
    </div>
    <div class="safety-platform-container__main">
      <div class="search-table-container">
        <header class="disaster-precaution__header">
          <BasicSearch
            :searchConfig="EMERGENCY_PLAN_APPROVAL_SEARCH_CONFIG"
            :searchData="searchData"
            @update:searchData="handleSearch"
          />
        </header>
        <BasicTable
          :tableData="tableData"
          :tableConfig="tableConfig"
          @update:pageSize="handleSizeChange"
          @update:pageNumber="handleCurrentChange"
        >
          <template #planType="scope">
            <span>{{ getPlanType(scope.row.planType) }}</span>
          </template>
          <template #eventType="scope">
            <span>{{ getEmergencyEvent(scope.row.eventType) }}</span>
          </template>
          <template #approvalStatus="scope">
            <span>{{ getEmergencyPlanApproStatusLabel(scope.row.status) }}</span>
          </template>
          <template #appendix="scope">
            <span class="appendix" v-if="scope.row.appendix" @click="handlePreviewScript(scope.row.appendix)">
              预览
            </span>
            <span v-else>--</span>
          </template>
          <template #action="scope">
            <div class="action-container--div">
              <ActionButton text="审批" @click="handleApproval(scope.row.id, scope.row.approvalOrder)" />
            </div>
          </template>
        </BasicTable>
      </div>
    </div>
    <PreviewOnline ref="previewOnlineRef" />
  </div>
  <BasicDialog ref="basicDialogRef" title="审批">
  </BasicDialog>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue';
  import { ElMessage } from 'element-plus';
  import BasicSearch from '@/components/BasicSearch.vue';
  import BasicTable from '@/components/BasicTable.vue';
  import BasicDialog from '@/components/BasicDialog.vue';
  import ActionButton from '@/components/ActionButton.vue';
  import PreviewOnline from '@/views/disaster/components/PreviewOnline.vue';
  import useTableConfig from '@/hooks/useTableConfigHook';
  import { useEmergencyHook } from '../src/hoos';
  import { useEmergencyPlanHook } from './src/hook';
  import type { QueryPageRequest } from '@/types/basic-query';
  import type { PlanApprovalListQuery, PlanApprovalListResponse } from '@/types/emergency-plan';
  import { getEmergencyApprovalList } from '@/api/emergency-plan';
  import {
    EMERGENCY_PLAN_APPROVAL_SEARCH_CONFIG,
    EMERGENCY_PLAN_APPROVAL_TABLE_OPTIONS,
    EMERGENCY_PLAN_APPROVAL_TABLE_COLUMNS,
  } from './src/config';
  import { FILE_TYPE_ICON } from '@/views/disaster/constant';

  const { tableConfig, pagination } = useTableConfig(
    EMERGENCY_PLAN_APPROVAL_TABLE_COLUMNS,
    EMERGENCY_PLAN_APPROVAL_TABLE_OPTIONS,
  );
  const { getEmergencyEventDict, getEmergencyEvent } = useEmergencyHook();
  const { getPlanTypeDict, getPlanType, getEmergencyPlanApproStatusLabel } = useEmergencyPlanHook();
  let planApprovalListQuery: QueryPageRequest<PlanApprovalListQuery> = {
    pageNumber: pagination.pageNumber,
    pageSize: pagination.pageSize,
    queryParam: {},
  };
  const tableData = ref<PlanApprovalListResponse[]>([]);
  const searchData = reactive({
    approvalStatus: null,
  });
  const previewOnlineRef = ref<InstanceType<typeof PreviewOnline>>();
  const basicDialogRef = ref<InstanceType<typeof BasicDialog>>();
  const handleSearch = () => {
    planApprovalListQuery.queryParam = {};
    if (searchData.approvalStatus) {
      planApprovalListQuery.queryParam.approvalStatus = searchData.approvalStatus;
    }
    getTableData();
  };
  const getTableData = async () => {
    tableConfig.loading = true;
    const res = await getEmergencyApprovalList(planApprovalListQuery);
    tableData.value = res.records;
    pagination.total = res.totalRow;
    tableConfig.loading = false;
  };
  const handleSizeChange = (value: number) => {
    pagination.pageSize = value;
    planApprovalListQuery.pageSize = value;
    getTableData();
  };
  const handleCurrentChange = (value: number) => {
    pagination.pageNumber = value;
    planApprovalListQuery.pageNumber = value;
    getTableData();
  };
  const handlePreviewScript = (appendix: string) => {
    const file = JSON.parse(appendix)[0];
    previewOnlineRef.value?.open(file.fileUrl, file.fileType as keyof typeof FILE_TYPE_ICON);
  };
  const currentId = ref<number>();
  const currentOrder = ref<number>();
  const handleApproval = (id: number, approvalOrder: number) => {
    currentId.value = id;
    currentOrder.value = approvalOrder;
    basicDialogRef.value?.openDialog();
  };
  onMounted(() => {
    getPlanTypeDict();
    getEmergencyEventDict();
    getTableData();
  });
</script>

<style scoped lang="scss">
  @use '@/styles/page-details-layout.scss' as *;
  @use '@/styles/page-main-layout.scss' as *;
  @use '@/styles/basic-table-action.scss' as *;
  .appendix {
    cursor: pointer;
    color: $primary-color;
  }
</style>