|
|
@@ -1,13 +1,220 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- this is disposal rectification
|
|
|
- </div>
|
|
|
+ <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 lang="ts" setup>
|
|
|
+<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';
|
|
|
|
|
|
-</script>
|
|
|
+ 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();
|
|
|
+ };
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
+ 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>
|
|
|
+<style scoped lang="scss">
|
|
|
+ @use '../style/disaster.scss' as *;
|
|
|
+ @use './src/style/collapse.scss' as *;
|
|
|
+ @use './src/style/common.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>
|