sl-sfy-safety/src/views/disaster/disaster-control/PageDisposalRectification.vue

<template>
  <div class="disaster-precaution-container">
    <header class="disaster-precaution-container__header">
      <span class="disaster-precaution-container__title">灾害损失处置整改</span>
    </header>
    <main class="disaster-precaution-container__main">
      <div class="disaster-precaution">
        <header class="disaster-precaution__header">
          <Search
            :searchConfig="DISPOSAL_RECTIFICATION_SEARCH_CONFIG"
            :searchData="searchData"
            @update:searchData="handleSearch"
          />
        </header>
        <div class="collapse-container" v-loading="collapseLoading">
          <div class="empty-container" v-if="collapseList.length === 0">
            <img :src="Empty" />
            <span>暂无数据</span>
          </div>
          <template v-else>
            <CollapseItem
              v-for="item in collapseList"
              :key="item.id"
              :name="item.taskName"
              :defaultOpen="item.id === 1"
            >
              <template #viewOperation> <img :src="ViewDocument" class="collapse-item__icon" /> </template>
              <template #main-table>
                <BasicTable :tableData="item.tableData[0].disasterReportRecordDetailList" :tableConfig="tableConfig">
                  <template #affectedArea="scope">
                    <div class="affected-area-container">
                      <span>{{ scope.row.buildingNo + scope.row.floorNo + scope.row.roomNo }}</span>
                    </div>
                  </template>
                  <template #affectedItems="scope">
                    <el-tooltip :content="scope.row.affectedItems" placement="top-start" effect="light">
                      <div class="affected-items-container">
                        <span>{{ scope.row.affectedItems }}</span>
                      </div>
                    </el-tooltip>
                  </template>
                  <template #priority="scope">
                    <div
                      class="priority-container"
                      :class="
                        scope.row.priority === PRIORITY_STATUS.URGENT
                          ? 'priority-container--urgent'
                          : 'priority-container--normal'
                      "
                    >
                      <span>{{ getPriorityStatus(scope.row.priority) }}</span>
                    </div>
                  </template>
                  <template #fixStatus="scope">
                    <div class="fix-status-container">
                      <span>{{ getfixStatus(scope.row.fixStatus) }}</span>
                    </div>
                  </template>
                  <template #action="scope">
                    <div class="action-container" v-if="scope.row.fixStatus === FIX_STATUS.TO_BE_RECTIFIED">
                      <ActionButton text="查看" />
                      <ActionButton text="去整改" />
                      <ActionButton text="添加整改人" />
                    </div>
                    <div class="action-container" v-else>
                      <ActionButton text="查看" />
                      <ActionButton text="去整改" />
                    </div>
                  </template>
                </BasicTable>
              </template>
            </CollapseItem>
          </template>
        </div>
        <div class="pagination-container" v-if="collapseList.length > 0">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="DISASTER_CONTROL_PAGE_SIZE_CONFIG"
            layout="prev, pager, next, jumper, sizes, total"
            background
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
  import Search from '@/views/disaster/components/Search.vue';
  import CollapseItem from './src/components/CollapseItem.vue';
  import BasicTable from '@/components/BasicTable.vue';
  import { onMounted, reactive, ref } from 'vue';
  import { getDisasterControlCollapseData, getLossRecordTableData } from '@/api/disaster-control';
  import type { disasterReportTaskInfoListResponse } from '@/types/disaster-control';
  import { DEFAULT_PAGE_SIZE, DISASTER_CONTROL_PAGE_SIZE_CONFIG, PRIORITY_STATUS, FIX_STATUS } from './src/constant';
  import type { DisposalManagementCollapseListResponse, LossRecordTableResponse } from '@/types/disaster-control';
  import useTableConfig from '@/hooks/useTableConfigHook';
  import {
    DISPOSAL_RECTIFICATION_SEARCH_CONFIG,
    LOSS_RECORD_TABLE_COLUMNS,
    DISPOSAL_MANAGEMENT_TABLE_OPTIONS,
  } from './src/config';
  import { getPriorityStatus, getfixStatus } from './src/util';
  import { ACTIVE_STATUS } from '@/views/disaster/constant';
  import ActionButton from '@/components/ActionButton.vue';
  import { useRouter } from 'vue-router';
  import Empty from 'assets/images/empty@1X.png';
  import ViewDocument from './src/svg/view-document.svg';

  const searchData = reactive({
    priority: '',
    fixStatus: '',
  });

  const currentPage = ref(1);
  const pageSize = ref(DEFAULT_PAGE_SIZE);
  const total = ref(0);

  const collapseLoading = ref(false);
  const collapseList = ref<DisposalManagementCollapseListResponse<LossRecordTableResponse>[]>([]);

  const { tableConfig } = useTableConfig(LOSS_RECORD_TABLE_COLUMNS, DISPOSAL_MANAGEMENT_TABLE_OPTIONS, false);

  const handleSizeChange = async (size: number) => {
    pageSize.value = size;
    await getDisposalData();
    await getDisposalTableData();
  };

  const handleCurrentChange = async (page: number) => {
    currentPage.value = page;
    await getDisposalData();
    await getDisposalTableData();
  };

  const handleSearch = () => {
    getDisposalTableData();
  };

  const taskIds = ref<number[]>([]);
  const router = useRouter();
  const Table_RouterName = 'disaster-control-disposal-management-item';
  const handleEditDisposalManagement = (id: number) => {
    router.push({
      name: Table_RouterName,
      query: {
        id,
        operate: 'edit',
      },
    });
  };

  const getDisposalData = async () => {
    collapseLoading.value = true;
    const res = await getDisasterControlCollapseData({
      pageNumber: currentPage.value,
      pageSize: pageSize.value,
      queryParam: {},
    });
    collapseList.value = res.records.map((item) => ({
      ...item,
      tableData: [
        {
          handleTaskId: item.id,
          disasterReportRecordDetailList: [],
        },
      ],
    }));
    taskIds.value = collapseList.value.map((item) => item.id);
    total.value = res.totalRow;
    collapseLoading.value = false;
  };

  const getDisposalTableData = async () => {
    tableConfig.loading = true;
    const res = await getLossRecordTableData({
      handleTaskIds: taskIds.value,
      ...searchData,
    });
    collapseList.value.forEach((item) => {
      item.tableData = res.filter((tableItem) => tableItem.handleTaskId === item.id);
    });
    tableConfig.loading = false;
  };

  const isViewTask = (disasterReportTaskInfoList: disasterReportTaskInfoListResponse[]) => {
    return disasterReportTaskInfoList.some((item) => item.status === ACTIVE_STATUS.ACTIVE);
  };

  const handleViewTask = (id: number) => {
    console.log('查看任务ID' + id);
  };

  onMounted(async () => {
    await getDisposalData();
    await getDisposalTableData();
  });
</script>

<style scoped lang="scss">
  @use '../style/disaster.scss' as *;
  @use './src/style/collapse.scss' as *;
  @use './src/style/common.scss' as *;
  @use './src/style/pagination.scss' as *;
  $collapse-container-height-default: calc(68vh - 13cpx);
  .collapse-container {
    height: $collapse-container-height-default;
    max-height: $collapse-container-height-default;
  }
  .collapse-item__icon {
    width: 20cpx;
    &--disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }
</style>