sl-sfy-safety/src/views/disaster/disaster-control/src/components/ReportTask.vue

<template>
  <div class="disaster-precaution">
    <header class="disaster-precaution__header">
      <Search
        :searchConfig="LOSS_REPORT_REPORT_TASK_SEARCH_CONFIG"
        :searchData="searchData"
        @update:searchData="handleSearch"
      >
      </Search>
    </header>
    <BasicTable :tableConfig="tableConfig" :tableData="tableData" :pageSizeConfig="DISASTER_CONTROL_PAGE_SIZE_CONFIG">
      <template #taskStage="scope">
        <span>{{ getTaskStage(scope.row.taskStage) }}</span>
      </template>
    </BasicTable>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue';
  import Search from '@/views/disaster/components/Search.vue';
  import BasicTable from '@/components/BasicTable.vue';
  import {
    LOSS_REPORT_REPORT_TASK_SEARCH_CONFIG,
    LOSS_REPORT_REPORT_TASK_TABLE_OPTIONS,
    LOSS_REPORT_REPORT_TASK_TABLE_COLUMNS,
  } from '../config';
  import useTableConfig from '@/hooks/useTableConfigHook';
  import { DEFAULT_PAGE_SIZE, DISASTER_CONTROL_PAGE_SIZE_CONFIG } from '../constant';
  import { getLossReportReportTaskData } from '@/api/disaster-control';
  import type { LossReportReportTaskQuery, DisposalManagementTableResponse } from '@/types/disaster-control';
  import type { QueryPageRequest } from '@/types/disaster';
  import { getTaskStage } from '../util';

  const searchData = reactive({
    taskStage: '',
  });
  const tableData = ref<DisposalManagementTableResponse[]>([]);
  const { tableConfig, pagination } = useTableConfig(
    LOSS_REPORT_REPORT_TASK_TABLE_COLUMNS,
    LOSS_REPORT_REPORT_TASK_TABLE_OPTIONS,
  );
  pagination.pageSize = DEFAULT_PAGE_SIZE;
  let ReportTaskListQuery: QueryPageRequest<LossReportReportTaskQuery> = {
    pageNumber: pagination.pageNumber,
    pageSize: pagination.pageSize,
    queryParam: {},
  };
  const getTableData = async () => {
    tableConfig.loading = true;
    const res = await getLossReportReportTaskData(ReportTaskListQuery);
    tableData.value = res.records;
    pagination.total = res.totalRow;
    tableConfig.loading = false;
  };
  const handleSearch = () => {
    if (searchData.taskStage !== '') {
      ReportTaskListQuery.queryParam.taskStage = searchData.taskStage;
    }
    getTableData();
  };
  onMounted(() => {
    getTableData();
  });
</script>

<style lang="scss" scoped>
  @use '@/views/disaster/style/disaster.scss' as *;
</style>