|
|
@@ -6,8 +6,14 @@
|
|
|
<main class="disaster-precaution-container__main">
|
|
|
<div class="disaster-precaution">
|
|
|
<header class="disaster-precaution__header">
|
|
|
- <el-button type="primary" class="disaster-precaution__header--button" :icon="Plus">
|
|
|
- 创建灾害损失记录
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ class="disaster-precaution__header--button"
|
|
|
+ :icon="Plus"
|
|
|
+ v-if="disposalManagementPermissions"
|
|
|
+ @click="handleCreateDisposalManagement(FORM_OPERATE_TYPE.TASK_ITEM)"
|
|
|
+ >
|
|
|
+ 创建灾害处置任务
|
|
|
</el-button>
|
|
|
<Search
|
|
|
:searchConfig="DISPOSAL_MANAGEMENT_SEARCH_CONFIG"
|
|
|
@@ -15,13 +21,23 @@
|
|
|
@update:searchData="handleSearch"
|
|
|
>
|
|
|
<template #reportDeptIds>
|
|
|
- <el-select v-model="searchData.reportDeptIds" multiple placeholder="请选择上报单位" filterable class="custom-select">
|
|
|
+ <el-select
|
|
|
+ v-model="searchData.reportDeptIds"
|
|
|
+ multiple
|
|
|
+ placeholder="请选择上报单位"
|
|
|
+ filterable
|
|
|
+ class="custom-select"
|
|
|
+ >
|
|
|
<el-option v-for="item in firstLevelDepts" :key="item.id" :label="item.deptName" :value="item.id" />
|
|
|
</el-select>
|
|
|
</template>
|
|
|
</Search>
|
|
|
</header>
|
|
|
- <div class="collapse-container" v-loading="collapseLoading">
|
|
|
+ <div
|
|
|
+ class="collapse-container"
|
|
|
+ v-loading="collapseLoading"
|
|
|
+ :class="disposalManagementPermissions ? 'collapse-container--permission' : 'collapse-container--default'"
|
|
|
+ >
|
|
|
<div class="empty-container" v-if="collapseList.length === 0">
|
|
|
<img :src="Empty" />
|
|
|
<span>暂无数据</span>
|
|
|
@@ -33,8 +49,51 @@
|
|
|
:name="item.taskName"
|
|
|
:defaultOpen="item.id === 1"
|
|
|
>
|
|
|
+ <template #viewOperation>
|
|
|
+ <el-tooltip
|
|
|
+ :content="isViewTask(item.tableData[0].disasterReportTaskInfoList) ? '查看' : '任务尚未发布'"
|
|
|
+ placement="top"
|
|
|
+ effect="light"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="ViewDocument"
|
|
|
+ :class="[
|
|
|
+ 'collapse-item__icon',
|
|
|
+ { 'collapse-item__icon--disabled': !isViewTask(item.tableData[0].disasterReportTaskInfoList) },
|
|
|
+ ]"
|
|
|
+ @click.stop="isViewTask(item.tableData[0].disasterReportTaskInfoList) && handleViewTask(item.id)"
|
|
|
+ />
|
|
|
+ </el-tooltip>
|
|
|
+ </template>
|
|
|
+ <template #batchOperation v-if="disposalManagementPermissions">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ v-if="isBatchRelease(item.tableData[0].disasterReportTaskInfoList)"
|
|
|
+ @click.stop="handleBatchRelease(item.tableData[0].disasterReportTaskInfoList)"
|
|
|
+ >发布
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ v-if="isBatchWithdraw(item.tableData[0].disasterReportTaskInfoList)"
|
|
|
+ @click.stop="handleBatchWithdraw(item.tableData[0].disasterReportTaskInfoList)"
|
|
|
+ >撤回
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ v-if="isBatchDelete(item.tableData[0].disasterReportTaskInfoList)"
|
|
|
+ @click.stop="handleBatchDelete(item.id)"
|
|
|
+ >删除
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
<template #main-table>
|
|
|
- <BasicTable :tableData="item.tableData" :tableConfig="tableConfig">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ :icon="Plus"
|
|
|
+ class="main-table__button"
|
|
|
+ @click="handleCreateDisposalManagement(FORM_OPERATE_TYPE.TABLE_ITEM, item.taskName)"
|
|
|
+ >新增</el-button
|
|
|
+ >
|
|
|
+ <BasicTable :tableData="item.tableData[0].disasterReportTaskInfoList" :tableConfig="tableConfig">
|
|
|
<template #status="scope">
|
|
|
<div class="active-status--div">
|
|
|
<div
|
|
|
@@ -45,30 +104,42 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<template #taskStage="scope">
|
|
|
- <span>{{ formatTaskStage(scope.row.taskStage) }}</span>
|
|
|
+ <span>{{ getTaskStage(scope.row.taskStage) }}</span>
|
|
|
</template>
|
|
|
<template #reportPrincipals="scope">
|
|
|
- <p v-for="user in scope.row.reportPrincipals" :key="user.id">
|
|
|
+ <p v-for="user in scope.row.reportPrincipalInfoList" :key="user.id">
|
|
|
{{ user.realname }}({{ user.username }})
|
|
|
</p>
|
|
|
</template>
|
|
|
<template #action="scope">
|
|
|
- <ActionButton text="编辑" v-if="scope.row.status === ACTIVE_STATUS.NOT_EFFECTIVE" />
|
|
|
+ <ActionButton
|
|
|
+ text="编辑"
|
|
|
+ v-if="scope.row.status === ACTIVE_STATUS.NOT_EFFECTIVE && disposalManagementPermissions"
|
|
|
+ />
|
|
|
<ActionButton
|
|
|
text="发布"
|
|
|
:popconfirm="{
|
|
|
title: '确定发布吗?',
|
|
|
}"
|
|
|
- v-if="scope.row.status === ACTIVE_STATUS.NOT_EFFECTIVE"
|
|
|
+ v-if="scope.row.status === ACTIVE_STATUS.NOT_EFFECTIVE && disposalManagementPermissions"
|
|
|
/>
|
|
|
<ActionButton
|
|
|
text="撤回"
|
|
|
:popconfirm="{
|
|
|
title: '确定撤回吗?',
|
|
|
}"
|
|
|
- v-if="scope.row.taskStage === TASK_STAGE.TO_BE_REPORTED"
|
|
|
+ v-if="
|
|
|
+ scope.row.taskStage === TASK_STAGE.TO_BE_REPORTED ||
|
|
|
+ (TASK_STAGE.OVERDUE && disposalManagementPermissions)
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <ActionButton
|
|
|
+ text="删除"
|
|
|
+ :popconfirm="{
|
|
|
+ title: '确定删除吗?',
|
|
|
+ }"
|
|
|
+ v-if="scope.row.status === ACTIVE_STATUS.NOT_EFFECTIVE && disposalManagementPermissions"
|
|
|
/>
|
|
|
- <ActionButton text="删除" v-if="scope.row.status === ACTIVE_STATUS.NOT_EFFECTIVE" />
|
|
|
<ActionButton text="查看" v-if="scope.row.status === ACTIVE_STATUS.ACTIVE" />
|
|
|
</template>
|
|
|
</BasicTable>
|
|
|
@@ -98,20 +169,39 @@
|
|
|
import Search from '@/views/disaster/components/Search.vue';
|
|
|
import CollapseItem from './src/components/CollapseItem.vue';
|
|
|
import BasicTable from '@/components/BasicTable.vue';
|
|
|
- import { DISPOSAL_MANAGEMENT_SEARCH_CONFIG } from './src/config';
|
|
|
import { getAllDepartments } from '@/api/auth/dept';
|
|
|
import { onMounted, reactive, ref } from 'vue';
|
|
|
import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';
|
|
|
import type { DeptTree } from '@/types/dept/type';
|
|
|
- import { TASK_STAGE_OPTIONS, TASK_STAGE } from './src/constant';
|
|
|
+ import { TASK_STAGE } from './src/constant';
|
|
|
import { getDisasterControlCollapseData, getDisasterControlTableData } from '@/api/disaster-control';
|
|
|
+ import type { disasterReportTaskInfoListResponse } from '@/types/disaster-control';
|
|
|
import { DEFAULT_PAGE_SIZE, DISASTER_CONTROL_PAGE_SIZE_CONFIG } from './src/constant';
|
|
|
- import type { DisposalManagementListResponse } from '@/types/disaster-control';
|
|
|
+ import type {
|
|
|
+ DisposalManagementCollapseListResponse,
|
|
|
+ DisposalManagementTableResponse,
|
|
|
+ } from '@/types/disaster-control';
|
|
|
import useTableConfig from '@/hooks/useTableConfigHook';
|
|
|
- import { DISPOSAL_MANAGEMENT_TABLE_COLUMNS, TABLE_OPTIONS } from './src/config';
|
|
|
- import { ACTIVE_STATUS, ACTIVE_STATUS_COLOR, ACTIVE_STATUS_MAP } from '@/views/disaster/constant';
|
|
|
+ import {
|
|
|
+ DISPOSAL_MANAGEMENT_SEARCH_CONFIG,
|
|
|
+ DISPOSAL_MANAGEMENT_TABLE_COLUMNS,
|
|
|
+ DISPOSAL_MANAGEMENT_TABLE_OPTIONS,
|
|
|
+ } from './src/config';
|
|
|
+ import { getTaskStage } from './src/util';
|
|
|
+ import {
|
|
|
+ ACTIVE_STATUS,
|
|
|
+ ACTIVE_STATUS_COLOR,
|
|
|
+ ACTIVE_STATUS_MAP,
|
|
|
+ DISASTER_PERMISSIONS,
|
|
|
+ } 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';
|
|
|
+ import { FORM_OPERATE_TYPE } from './src/constant';
|
|
|
+ import { useUserInfoHook } from '@/views/disaster/hooks/userInfo';
|
|
|
+
|
|
|
+ const { permissions } = useUserInfoHook();
|
|
|
|
|
|
const firstLevelDepts = ref<DeptTree[]>([]);
|
|
|
const searchData = reactive({
|
|
|
@@ -125,27 +215,43 @@
|
|
|
const total = ref(0);
|
|
|
|
|
|
const collapseLoading = ref(false);
|
|
|
- const collapseList = ref<DisposalManagementListResponse[]>([]);
|
|
|
+ const collapseList = ref<DisposalManagementCollapseListResponse<DisposalManagementTableResponse>[]>([]);
|
|
|
+ const disposalManagementPermissions = ref(false);
|
|
|
|
|
|
- const { tableConfig } = useTableConfig(DISPOSAL_MANAGEMENT_TABLE_COLUMNS, TABLE_OPTIONS, false);
|
|
|
+ const { tableConfig } = useTableConfig(DISPOSAL_MANAGEMENT_TABLE_COLUMNS, DISPOSAL_MANAGEMENT_TABLE_OPTIONS, false);
|
|
|
|
|
|
- const formatTaskStage = (taskStage: number) => {
|
|
|
- return TASK_STAGE_OPTIONS.find((item) => item.value === taskStage)?.label;
|
|
|
- };
|
|
|
-
|
|
|
- const handleSizeChange = (size: number) => {
|
|
|
+ const handleSizeChange = async (size: number) => {
|
|
|
pageSize.value = size;
|
|
|
+ await getDisposalData();
|
|
|
+ await getDisposalTableData();
|
|
|
};
|
|
|
|
|
|
- const handleCurrentChange = (page: number) => {
|
|
|
+ const handleCurrentChange = async (page: number) => {
|
|
|
currentPage.value = page;
|
|
|
+ await getDisposalData();
|
|
|
+ await getDisposalTableData();
|
|
|
};
|
|
|
|
|
|
const handleSearch = () => {
|
|
|
- console.log(searchData);
|
|
|
+ getDisposalTableData();
|
|
|
};
|
|
|
|
|
|
const taskIds = ref<number[]>([]);
|
|
|
+ const router = useRouter();
|
|
|
+ const Task_RouterName = 'disaster-control-disposal-management-task-item';
|
|
|
+ const Table_RouterName = 'disaster-control-disposal-management-item';
|
|
|
+ const handleCreateDisposalManagement = (type: FORM_OPERATE_TYPE, taskName?: string) => {
|
|
|
+ console.log(type);
|
|
|
+ const routerName = type === FORM_OPERATE_TYPE.TASK_ITEM ? Task_RouterName : Table_RouterName;
|
|
|
+ router.push({
|
|
|
+ name: routerName,
|
|
|
+ query: {
|
|
|
+ operate: 'create',
|
|
|
+ taskName: taskName,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
const getDisposalData = async () => {
|
|
|
collapseLoading.value = true;
|
|
|
const res = await getDisasterControlCollapseData({
|
|
|
@@ -153,11 +259,16 @@
|
|
|
pageSize: pageSize.value,
|
|
|
queryParam: {},
|
|
|
});
|
|
|
- collapseList.value = res.records;
|
|
|
- collapseList.value.forEach((item) => {
|
|
|
- item.tableData = [];
|
|
|
- });
|
|
|
- taskIds.value = res.records.map((item) => item.id);
|
|
|
+ collapseList.value = res.records.map((item) => ({
|
|
|
+ ...item,
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ handleTaskId: item.id,
|
|
|
+ disasterReportTaskInfoList: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }));
|
|
|
+ taskIds.value = collapseList.value.map((item) => item.id);
|
|
|
total.value = res.totalRow;
|
|
|
collapseLoading.value = false;
|
|
|
};
|
|
|
@@ -169,21 +280,65 @@
|
|
|
...searchData,
|
|
|
});
|
|
|
collapseList.value.forEach((item) => {
|
|
|
- item.tableData = res;
|
|
|
+ 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 isBatchRelease = (disasterReportTaskInfoList: disasterReportTaskInfoListResponse[]) => {
|
|
|
+ return disasterReportTaskInfoList.some((item) => item.status === ACTIVE_STATUS.NOT_EFFECTIVE);
|
|
|
+ };
|
|
|
+
|
|
|
+ const isBatchWithdraw = (disasterReportTaskInfoList: disasterReportTaskInfoListResponse[]) => {
|
|
|
+ return disasterReportTaskInfoList.some((item) => item.status === ACTIVE_STATUS.ACTIVE);
|
|
|
+ };
|
|
|
+
|
|
|
+ const isBatchDelete = (disasterReportTaskInfoList: disasterReportTaskInfoListResponse[]) => {
|
|
|
+ return disasterReportTaskInfoList.every((item) => item.status === ACTIVE_STATUS.NOT_EFFECTIVE);
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleViewTask = (id: number) => {
|
|
|
+ console.log('查看任务ID' + id);
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleBatchRelease = (disasterReportTaskInfoList: disasterReportTaskInfoListResponse[]) => {
|
|
|
+ const batchReleaseIds = disasterReportTaskInfoList
|
|
|
+ .filter((item) => item.taskStage === TASK_STAGE.TO_BE_RELEASED)
|
|
|
+ .map((item) => item.id);
|
|
|
+ console.log(batchReleaseIds);
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleBatchWithdraw = (disasterReportTaskInfoList: disasterReportTaskInfoListResponse[]) => {
|
|
|
+ const batchWithdrawIds = disasterReportTaskInfoList
|
|
|
+ .filter((item) => item.taskStage === TASK_STAGE.TO_BE_REPORTED || item.taskStage === TASK_STAGE.OVERDUE)
|
|
|
+ .map((item) => item.id);
|
|
|
+ console.log(batchWithdrawIds);
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleBatchDelete = (id: number) => {
|
|
|
+ console.log('当前任务ID' + id);
|
|
|
+ };
|
|
|
+
|
|
|
onMounted(async () => {
|
|
|
const result = await getAllDepartments();
|
|
|
await getDisposalData();
|
|
|
await getDisposalTableData();
|
|
|
+ disposalManagementPermissions.value = Boolean(
|
|
|
+ permissions.find((item: { code: string }) => item.code === DISASTER_PERMISSIONS.DISPOSAL_MANAGEMENT),
|
|
|
+ );
|
|
|
firstLevelDepts.value = formatDeptTree(result);
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
@use '../style/disaster.scss' as *;
|
|
|
+ @use './src/style/collapse.scss' as *;
|
|
|
+ $collapse-container-height-default: calc(68vh - 13cpx);
|
|
|
+ $collapse-container-height-permission: calc(63vh - 15cpx);
|
|
|
.custom-select {
|
|
|
width: 200cpx;
|
|
|
:deep(.el-select__selection) {
|
|
|
@@ -193,23 +348,23 @@
|
|
|
}
|
|
|
}
|
|
|
.collapse-container {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 10cpx;
|
|
|
- width: 100%;
|
|
|
- height: calc(63vh - 15cpx);
|
|
|
- max-height: calc(63vh - 15cpx);
|
|
|
- overflow-y: auto;
|
|
|
+ &--permission {
|
|
|
+ height: $collapse-container-height-permission;
|
|
|
+ max-height: $collapse-container-height-permission;
|
|
|
+ }
|
|
|
+ &--default {
|
|
|
+ height: $collapse-container-height-default;
|
|
|
+ max-height: $collapse-container-height-default;
|
|
|
+ }
|
|
|
}
|
|
|
- .empty-container {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- @include flex-center;
|
|
|
- flex-direction: column;
|
|
|
- gap: 10cpx;
|
|
|
+ .collapse-item__icon {
|
|
|
+ width: 20cpx;
|
|
|
+ &--disabled {
|
|
|
+ cursor: not-allowed;
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
}
|
|
|
- .pagination-container {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
+ .main-table__button {
|
|
|
+ margin-bottom: 10cpx;
|
|
|
}
|
|
|
</style>
|