处置管理表单Table页面

mock/disaster-control/table.ts

@@ -33,145 +33,189 @@ const disposalManagementList = {
 const disposalManagementItemList = [
   {
     handleTaskId: 1,
-    id: 1,
-    deptName: '广东省应急管理厅',
-    dueCompleteTime: '2025-05-23 10:00',
-    status: 1,
-    taskStage: 1,
-    reportPrincipals: [
+    disasterReportTaskInfoList: [
       {
         id: 1,
-        realname: '张三',
-        username: '321540',
+        deptName: '广东省应急管理厅',
+        dueCompleteTime: '2025-05-23 10:00',
+        status: 1,
+        taskStage: 1,
+        reportPrincipalInfoList: [
+          {
+            id: 1,
+            realname: '张三',
+            username: '321540',
+          },
+          {
+            id: 2,
+            realname: '李四',
+            username: '321541',
+          },
+        ],
       },
       {
         id: 2,
-        realname: '李四',
-        username: '321541',
+        deptName: '湖北省应急管理厅',
+        dueCompleteTime: '2025-05-23 10:00',
+        status: 2,
+        taskStage: 1,
+        reportPrincipalInfoList: [
+          {
+            id: 1,
+            realname: 'XXX',
+            username: '321540',
+          },
+        ],
       },
-    ],
-  },
-  {
-    handleTaskId: 1,
-    id: 2,
-    deptName: '湖北省应急管理厅',
-    dueCompleteTime: '2025-05-23 10:00',
-    status: 2,
-    taskStage: 1,
-    reportPrincipals: [
       {
-        id: 1,
-        realname: 'XXX',
-        username: '321540',
+        id: 3,
+        deptName: '海南省应急管理厅',
+        dueCompleteTime: '2025-05-23 10:00',
+        status: 1,
+        taskStage: 2,
+        reportPrincipalInfoList: [],
+      },
+      {
+        id: 4,
+        deptName: '湖南省应急管理厅',
+        dueCompleteTime: '2025-05-23 10:00',
+        status: 2,
+        taskStage: 3,
+        reportPrincipalInfoList: [
+          {
+            id: 2,
+            realname: '李四',
+            username: '321541',
+          },
+        ],
+      },
+      {
+        id: 5,
+        deptName: '黑龙江省应急管理厅',
+        dueCompleteTime: '2025-05-23 10:00',
+        status: 1,
+        taskStage: 3,
+        reportPrincipalInfoList: [
+          {
+            id: 1,
+            realname: '张三',
+            username: '321540',
+          },
+          {
+            id: 2,
+            realname: '李四',
+            username: '321541',
+          },
+        ],
+      },
+      {
+        id: 6,
+        deptName: '北京市应急管理厅',
+        dueCompleteTime: '2025-05-23 10:00',
+        status: 2,
+        taskStage: 2,
+        reportPrincipalInfoList: [],
       },
     ],
   },
   {
-    handleTaskId: 1,
-    id: 3,
-    deptName: '海南省应急管理厅',
-    dueCompleteTime: '2025-05-23 10:00',
-    status: 1,
-    taskStage: 2,
-    reportPrincipals: [],
-  },
-  {
-    handleTaskId: 1,
-    id: 4,
-    deptName: '湖南省应急管理厅',
-    dueCompleteTime: '2025-05-23 10:00',
-    status: 2,
-    taskStage: 3,
-    reportPrincipals: [
+    handleTaskId: 2,
+    disasterReportTaskInfoList: [
       {
-        id: 2,
-        realname: '李四',
-        username: '321541',
+        id: 7,
+        deptName: '天津市应急管理厅',
+        dueCompleteTime: '2025-05-23 10:00',
+        status: 1,
+        taskStage: 4,
+        reportPrincipalInfoList: [
+          {
+            id: 1,
+            realname: '张三',
+            username: '321540',
+          },
+        ],
+      },
+      {
+        id: 8,
+        deptName: '黑龙江省应急管理厅',
+        dueCompleteTime: '2025-05-23 10:00',
+        status: 2,
+        taskStage: 5,
+        reportPrincipalInfoList: [
+          {
+            id: 1,
+            realname: 'XXX',
+            username: '321540',
+          },
+        ],
       },
     ],
   },
   {
-    handleTaskId: 1,
-    id: 5,
-    deptName: '黑龙江省应急管理厅',
-    dueCompleteTime: '2025-05-23 10:00',
-    status: 1,
-    taskStage: 3,
-    reportPrincipals: [
+    handleTaskId: 3,
+    disasterReportTaskInfoList: [
       {
-        id: 1,
-        realname: '张三',
-        username: '321540',
+        id: 9,
+        deptName: '内蒙古应急管理厅',
+        dueCompleteTime: '2025-05-23 10:00',
+        status: 1,
+        taskStage: 5,
+        reportPrincipalInfoList: [
+          {
+            id: 1,
+            realname: 'XXX',
+            username: '321540',
+          },
+          {
+            id: 2,
+            realname: 'XXX2',
+            username: '321541',
+          },
+          {
+            id: 3,
+            realname: 'XXX3',
+            username: '321542',
+          },
+        ],
       },
       {
-        id: 2,
-        realname: '李四',
-        username: '321541',
+        id: 10,
+        deptName: '河北省应急管理厅',
+        dueCompleteTime: '2025-05-23 10:00',
+        status: 2,
+        taskStage: 5,
+        reportPrincipalInfoList: [],
+      },
+      {
+        id: 11,
+        deptName: '湖南省应急管理厅',
+        dueCompleteTime: '2025-05-23 10:00',
+        status: 2,
+        taskStage: 4,
+        reportPrincipalInfoList: [],
       },
     ],
   },
   {
-    handleTaskId: 1,
-    id: 6,
-    deptName: '北京市应急管理厅',
-    dueCompleteTime: '2025-05-23 10:00',
-    status: 2,
-    taskStage: 2,
-    reportPrincipals: [],
+    handleTaskId: 4,
+    disasterReportTaskInfoList: [],
   },
-];
-
-const lossReportReportTaskList = {
-  records: [
-    {
-      id: 1,
-      taskName: '台风“贝碧嘉”灾害损失上报1',
-      deptName: '广东省应急管理厅',
-      dueCompleteTime: '2025-05-23 10:00',
-      taskStage: 1,
-    },
-    {
-      id: 2,
-      taskName: '台风“贝碧嘉”灾害损失上报2',
-      deptName: '湖北省应急管理厅',
-      dueCompleteTime: '2025-05-23 10:00',
-      taskStage: 2,
-    },
-    {
-      id: 3,
-      taskName: '台风“贝碧嘉”灾害损失上报3',
-      deptName: '海南省应急管理厅',
-      dueCompleteTime: '2025-05-23 10:00',
-      taskStage: 3,
-    },
-  ],
-  totalRow: 3,
-};
-
-const lossRecordItemList = [
   {
-    affectedArea: '广东省应急管理厅',
-    affectedItems: '树木8棵',
-    reportTime: '2025-05-23 10:00',
-    department: '广东省应急管理厅',
-    priority: 1,
-    progress: 1,
-  },
-  {
-    affectedArea: '湖北省应急管理厅',
-    affectedItems: '房屋10间',
-    reportTime: '2025-05-23 10:00',
-    department: '湖北省应急管理厅',
-    priority: 2,
-    progress: 2,
+    handleTaskId: 5,
+    disasterReportTaskInfoList: [
+      {
+        id: 12,
+        deptName: 'XXX应急管理厅',
+        dueCompleteTime: '2025-05-23 10:00',
+        status: 1,
+        taskStage: 2,
+        reportPrincipalInfoList: [],
+      },
+    ],
   },
   {
-    affectedArea: '海南省应急管理厅',
-    affectedItems: '道路100米',
-    reportTime: '2025-05-23 10:00',
-    department: '海南省应急管理厅',
-    priority: 3,
-    progress: 3,
+    handleTaskId: 6,
+    disasterReportTaskInfoList: [],
   },
 ];
 export default [
@@ -191,20 +235,4 @@ export default [
       return resultSuccess(disposalManagementItemList);
     },
   },
-  {
-    url: '/safety_mock_api/disasterHandle/queryDisasterReportTask2',
-    timeout: 500,
-    method: 'post',
-    response: () => {
-      return resultSuccess(lossReportReportTaskList);
-    },
-  },
-  {
-    url: '/safety_mock_api/disasterHandle/queryDisasterHandleTaskPage2',
-    timeout: 500,
-    method: 'post',
-    response: () => {
-      return resultSuccess(lossRecordItemList);
-    },
-  },
 ];

src/api/disaster-control/index.ts

@@ -2,52 +2,25 @@ import { http } from '@/utils/http/axios/mock';
 import type {
   DisposalManagementListResponse,
   DisposalManagementListQuery,
-  DisposalManagementListItemQuery,
+  DisposalManagementTableQuery,
   DisposalManagementTableResponse,
-  LossReportReportTaskQuery,
-  LossRecordItemQuery,
-  LossRecordTableResponse,
 } from '@/types/disaster-control';
 import type { QueryPageResponse, QueryPageRequest } from '@/types/disaster';
 /**
  * 获取台风灾害管理表格数据
  */
 export const getDisasterControlCollapseData = (query: QueryPageRequest<DisposalManagementListQuery>) => {
-  return http.request<QueryPageResponse<DisposalManagementListResponse<DisposalManagementTableResponse>>>({
+  return http.request<QueryPageResponse<DisposalManagementListResponse>>({
     url: '/disasterHandle/queryDisasterHandleTaskPage',
     method: 'post',
     data: query,
   });
 };
 
-export const getDisasterControlTableData = (query: DisposalManagementListItemQuery) => {
+export const getDisasterControlTableData = (query: DisposalManagementTableQuery) => {
   return http.request<DisposalManagementTableResponse[]>({
     url: '/disasterHandle/queryDisasterReportTask',
     method: 'post',
     data: query,
   });
 };
-
-export const getLossReportReportTaskData = (query: QueryPageRequest<LossReportReportTaskQuery>) => {
-  return http.request<QueryPageResponse<DisposalManagementTableResponse>>({
-    url: '/disasterHandle/queryDisasterReportTask2',
-    method: 'post',
-    data: query,
-  });
-};
-
-export const getLossRecordCollapseData = (query: QueryPageRequest<DisposalManagementListQuery>) => {
-  return http.request<QueryPageResponse<DisposalManagementListResponse<LossRecordTableResponse>>>({
-    url: '/disasterHandle/queryDisasterHandleTaskPage',
-    method: 'post',
-    data: query,
-  });
-};
-
-export const getLossRecordTableData = (query: LossRecordItemQuery) => {
-  return http.request<LossRecordTableResponse[]>({
-    url: '/disasterHandle/queryDisasterHandleTaskPage2',
-    method: 'post',
-    data: query,
-  });
-};

src/main.scss

@@ -14,8 +14,9 @@
     background-color: transparent;
   }
 }
-html {
-  font-size: 16cpx;
+
+.el-button {
+  font-size: 14cpx !important;
 }
 
 body {
@@ -27,7 +28,6 @@ body {
   position: static !important;
 }
 
-
 .flex {
   display: flex;
 }

src/router/full-routes.ts

@@ -304,6 +304,46 @@ export const disasterPreventionRoute = {
           path: 'disposal-management',
           redirect: '',
         },
+        {
+          component: '/disaster/disaster-control/PageDisposalManagementTaskItem',
+          id: 1041,
+          meta: {
+            activeMenu: '/disaster-prevention/disaster-control/disposal-management',
+            alwaysShow: false,
+            frameSrc: '',
+            hidden: false,
+            icon: '',
+            isFrame: 0,
+            isRoot: false,
+            noCache: false,
+            query: '',
+            title: '处置管理详情（任务项）',
+          },
+          name: 'disaster-control-disposal-management-task-item',
+          parentId: 1027,
+          path: 'disposal-management-task-item',
+          redirect: '',
+        },
+        {
+          component: '/disaster/disaster-control/PageDisposalManagementItem',
+          id: 1042,
+          meta: {
+            activeMenu: '/disaster-prevention/disaster-control/disposal-management',
+            alwaysShow: false,
+            frameSrc: '',
+            hidden: false,
+            icon: '',
+            isFrame: 0,
+            isRoot: false,
+            noCache: false,
+            query: '',
+            title: '处置管理详情（列表项）',
+          },
+          name: 'disaster-control-disposal-management-item',
+          parentId: 1027,
+          path: 'disposal-management-item',
+          redirect: '',
+        },
         {
           component: '/disaster/disaster-control/PageLossReport',
           id: 1039,
@@ -385,160 +425,6 @@ export const disasterPreventionRoute = {
   redirect: '',
 };
 
-// export const userRoutesOld: AppRouteRecordRaw =
-//   /**
-//    * 用户管理
-//    */
-//   {
-//     path: '/user',
-//     name: 'User',
-//     component: 'LAYOUT',
-//     meta: {
-//       icon: 'UserOutlined',
-//       title: '用户管理',
-//     },
-//     children: [
-//       {
-//         // 账号管理
-//         path: 'account',
-//         name: 'UserAccount',
-//         component: '/system/user/user',
-//         meta: {
-//           icon: '',
-//           title: '账号管理',
-//         },
-//       },
-//       {
-//         // 角色管理
-//         path: 'role',
-//         name: 'UserRole',
-//         component: '/system/role/role',
-//         meta: {
-//           icon: '',
-//           title: '角色管理',
-//         },
-//       },
-//       {
-//         // 组织管理
-//         path: 'department',
-//         name: 'UserDepartment',
-//         component: '/auth/dept/dept',
-//         meta: {
-//           icon: '',
-//           title: '组织管理',
-//         },
-//       },
-//       {
-//         // 岗位管理 （目前不需要）
-//         path: 'post',
-//         name: 'UserPost',
-//         component: '/auth/post/post',
-//         meta: {
-//           icon: '',
-//           title: '岗位管理',
-//         },
-//       },
-//     ],
-//   };
-
-// export const systemRoutesOld =
-//   /**
-//    * 系统管理 （只有超管可见）
-//    */
-//   {
-//     path: '/system',
-//     name: 'System',
-//     component: 'MENU_LAYOUT',
-//     meta: {
-//       icon: 'OptionsSharp',
-//       title: '系统管理',
-//     },
-//     redirect: 'SystemMenu',
-//     children: [
-//       {
-//         // 租户管理
-//         path: 'tenant',
-//         name: 'SystemTenant',
-//         component: '/system/tenant/tenant',
-//         meta: {
-//           icon: '',
-//           title: '租户管理',
-//         },
-//       },
-//       {
-//         // 菜单管理
-//         path: 'menu',
-//         name: 'SystemMenu',
-//         component: '/system/menu/menu',
-//         meta: {
-//           icon: '',
-//           title: '菜单管理',
-//         },
-//       },
-//       {
-//         // 权限管理
-//         path: 'permission',
-//         name: 'SystemPermission',
-//         component: '/system/permssion/PagePermission',
-//         meta: {
-//           icon: '',
-//           title: '权限管理',
-//         },
-//       },
-//       {
-//         // 权限管理
-//         path: 'comments',
-//         name: 'SystemComments',
-//         component: '/system/comments/PageCommentsManage',
-//         meta: {
-//           icon: '',
-//           title: '评论管理',
-//         },
-//       },
-//       {
-//         // 意见反馈
-//         path: 'feedback',
-//         name: 'SystemFeedback',
-//         component: '/feedback/feedback',
-//         meta: {
-//           icon: '',
-//           title: '意见反馈',
-//         },
-//       },
-//       {
-//         // 反馈处理 。意见反馈的二级页面。菜单不可见！！！
-//         path: 'feedback-handle',
-//         name: 'SystemFeedbackHandle',
-//         component: '/feedback/handleFeedback',
-//         meta: {
-//           icon: '',
-//           title: '反馈处理',
-//           activeMenu: 'SystemFeedback',
-//         },
-//       },
-//       // {
-//       //   // 字典管理 （暂时用不到）
-//       //   path: 'dictionary',
-//       //   name: 'SystemDictionary',
-//       //   component: '/system/dictionary/dictionary',
-//       //   meta: {
-//       //     icon: '',
-//       //     title: '字典管理',
-//       //   },
-//       // },
-//       {
-//         // 日志管理
-//         path: 'log',
-//         name: 'SystemLog',
-//         component: '/system/log/log',
-//         meta: {
-//           icon: '',
-//           title: '日志管理',
-//         },
-//       },
-//     ],
-//   };
-
 /** 平台管理 */
 export const platformRoutes = {
   path: '/platform',

src/types/disaster-control/index.ts

@@ -1,4 +1,5 @@
-import type { UserInfo } from '@/types/push-object';
+import type { PersonGroupItem } from '@/types/person-group/type';
+
 export interface DisposalManagementListQuery {
   reporterId?: number;
 }
@@ -7,38 +8,41 @@ export interface LossReportReportTaskQuery {
   taskStage?: string;
 }
 
-export interface DisposalManagementListItemQuery extends DisposalManagementListQuery, LossReportReportTaskQuery {
+export interface DisposalManagementTableQuery extends DisposalManagementListQuery, LossReportReportTaskQuery {
   handleTaskIds: number[];
   reportDeptIds?: number[];
   status?: string;
 }
 
-export interface LossRecordItemQuery  {
-    handleTaskIds: number[];
-  department?: string;
-  progress?: string;
-}
-
-export interface DisposalManagementListResponse<T> {
+export interface DisposalManagementListResponse {
   id: number;
   taskName: string;
+}
+
+export interface DisposalManagementCollapseListResponse<T> extends DisposalManagementListResponse {
   tableData: T[];
 }
 
-export interface DisposalManagementTableResponse {
+export interface disasterReportTaskInfoListResponse {
   id: number;
   deptName: string;
   dueCompleteTime: string;
-  status: string;
-  taskStage: string;
-  reportPrincipals: UserInfo[];
-}
-
-export interface LossRecordTableResponse {
-  affectedArea: string;
-  affectedItems: string;
-  reportTime: string;
-  department: string;
-  priority: number;
-  progress: number;
+  status: number;
+  taskStage: number;
+  reportPrincipalInfoList: PersonGroupItem[];
+}
+
+export interface DisposalManagementTableResponse {
+  handleTaskId: number;
+  disasterReportTaskInfoList: disasterReportTaskInfoListResponse[];
+}
+
+export interface DisposalManagementRuleForm {
+  taskName: string;
+  deptIds: number[];
+  dueCompleteTime: string;
+  reportRequirement: string;
+  userGroupList: number[];
+  isPush: number | null;
+  realname: string;
 }

src/views/disaster/WorkRecord.md

@@ -1,42 +1,72 @@
 ### 25/5/13
+
 ##### 灾害防范模块
+
 - [x] 准备通用模块-树结构选择
+
 ##### 灾害预警-预警信息
+
 - [x] 不确定后端能否拿到数据 添加页面先不做
+
 ##### 灾害预警-防御通知
-- [x]  创建灾害防御通知页面
-- [x]  提取公共scss（新建页面）
-- [x]  文件上传组件（是否通用？提取公共组件）
-- [x]  文件在线预览组件、文件在线下载组件
+
+- [x] 创建灾害防御通知页面
+- [x] 提取公共 scss（新建页面）
+- [x] 文件上传组件（是否通用？提取公共组件）
+- [x] 文件在线预览组件、文件在线下载组件
 
 ### 25/5/14
+
 #### 灾害防范模块
-- [x] 准备通用hook-form表单
+
+- [x] 准备通用 hook-form 表单
+
 #### 灾害预警模块
+
 - [x] 完成所有静态页面开发
 
 ### 25/5/15
+
 ### 灾害预警模块
-- [x] search引用配置项来开发
-- [x] form引用配置来开发
+
+- [x] search 引用配置项来开发
+- [x] form 引用配置来开发
 - [x] 预警信息做添加页面，将表单数据进行拆分（通用项和定制项）
 - [x] 完成灾害预警模块
 
 ### 25/5/16
+
 ### 预防检查模块
+
 - [x] 任务管理静态页面完成
 - [x] 任务模板页面完成
 - [ ] 任务执行页面完成
 
 ### 25/5/20
+
 ### 完成灾害预警 准备提测
 
 ### 25/5/22
+
 ### 预防检查模块
+
 - [x] 任务管理模块开发完成
 - [ ] 任务执行做到看模板情况
 - [ ] 任务模板的接口、数据结构重构，组件重构
+
 ### 灾害防范模块
-- [x] 有许多公用逻辑可以抽成hook和util(后续优化)
+
+- [x] 有许多公用逻辑可以抽成 hook 和 util(后续优化)
 - [x] 有很多字段和后端不一样，时间来不及修改（后续优化）
-- [x] 有很多公共组件可以在进行二次封装，后续完成后再进行优化
+- [x] 有很多公共组件可以在进行二次封装，后续完成后再进行优化
+
+### 25/5/26
+
+### 灾害处置模块
+
+- [x] 完成基础任务 CollapseItem 组件
+
+### 灾害处置模块-处置管理
+
+- [x] 完成处置管理 Table 页面，接口对完
+- [ ] 完成处置管理表单页面，接口对完

src/views/disaster/disaster-control/PageDisposalManagement.vue

@@ -11,6 +11,7 @@
             class="disaster-precaution__header--button"
             :icon="Plus"
             v-if="disposalManagementPermissions"
+            @click="handleCreateDisposalManagement(FORM_OPERATE_TYPE.TASK_ITEM)"
           >
             创建灾害处置任务
           </el-button>
@@ -47,10 +48,52 @@
               :key="item.id"
               :name="item.taskName"
               :defaultOpen="item.id === 1"
-              :disposalManagementPermissions="disposalManagementPermissions"
             >
+              <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
@@ -64,7 +107,7 @@
                     <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>
@@ -85,10 +128,16 @@
                       :popconfirm="{
                         title: '确定撤回吗？',
                       }"
-                      v-if="scope.row.taskStage === TASK_STAGE.TO_BE_REPORTED && disposalManagementPermissions"
+                      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.ACTIVE" />
@@ -126,8 +175,12 @@
   import type { DeptTree } from '@/types/dept/type';
   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, DisposalManagementTableResponse } from '@/types/disaster-control';
+  import type {
+    DisposalManagementCollapseListResponse,
+    DisposalManagementTableResponse,
+  } from '@/types/disaster-control';
   import useTableConfig from '@/hooks/useTableConfigHook';
   import {
     DISPOSAL_MANAGEMENT_SEARCH_CONFIG,
@@ -142,7 +195,10 @@
     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();
@@ -159,24 +215,42 @@
   const total = ref(0);
 
   const collapseLoading = ref(false);
-  const collapseList = ref<DisposalManagementListResponse<DisposalManagementTableResponse>[]>([]);
+  const collapseList = ref<DisposalManagementCollapseListResponse<DisposalManagementTableResponse>[]>([]);
   const disposalManagementPermissions = ref(false);
 
   const { tableConfig } = useTableConfig(DISPOSAL_MANAGEMENT_TABLE_COLUMNS, DISPOSAL_MANAGEMENT_TABLE_OPTIONS, false);
 
-  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) => {
+    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({
@@ -184,11 +258,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;
   };
@@ -200,11 +279,49 @@
       ...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();
@@ -239,4 +356,14 @@
       max-height: $collapse-container-height-default;
     }
   }
+  .collapse-item__icon {
+    width: 20cpx;
+    &--disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+  .main-table__button {
+    margin-bottom: 10cpx;
+  }
 </style>

src/views/disaster/disaster-control/PageDisposalManagementItem.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="disaster-precaution-container">
+    <header class="disaster-precaution-container__header">
+      <img :src="BackIcon" alt="back" class="back-icon" @click="router.back()" />
+      <span class="disaster-precaution-container__title">{{ headerTitle }}</span>
+    </header>
+    <main class="disaster-precaution-container__main">
+      <component :is="dynamicComponent" :id="id" ref="dynamicComponentRef" />
+    </main>
+    <footer class="disaster-precaution-container__footer" v-if="operate">
+      <el-button @click="router.back()">取消</el-button>
+      <el-button type="primary" @click="submit">提交</el-button>
+    </footer>
+    <UploadLoading :form-loading="formLoading" v-if="formLoading" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, defineAsyncComponent } from 'vue';
+  import UploadLoading from '@/components/UploadLoading.vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import BackIcon from 'assets/svg/back.svg';
+  import { ElMessage } from 'element-plus';
+  const router = useRouter();
+  const route = useRoute();
+  const operate = route.query.operate;
+  const id = route.query.id;
+  const headerTitle = computed(() => {
+    const fixedTitle = '灾害处置任务';
+    if (operate === 'create') {
+      return `创建${fixedTitle}`;
+    } else if (operate === 'edit') {
+      return `编辑${fixedTitle}`;
+    }
+    return `查看${fixedTitle}`;
+  });
+  const dynamicComponent = computed(() => {
+    if (operate === 'create') {
+      return defineAsyncComponent(() => import('./src/components/CreateDisposalManagementItem.vue'));
+    } else if (operate === 'edit') {
+      return defineAsyncComponent(() => import('./src/components/EditDisposalManagementItem.vue'));
+    } else {
+      return defineAsyncComponent(() => import('./src/components/ViewDisposalManagementItem.vue'));
+    }
+  });
+  const dynamicComponentRef = ref();
+  const formLoading = ref(false);
+  const submit = async () => {
+  };
+</script>
+
+<style lang="scss" scoped>
+  @use '../style/disaster.scss' as *;
+  @use './src/style/common.scss' as *;
+</style>

src/views/disaster/disaster-control/PageDisposalManagementTaskItem.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="disaster-precaution-container">
+    <header class="disaster-precaution-container__header">
+      <img :src="BackIcon" alt="back" class="back-icon" @click="router.back()" />
+      <span class="disaster-precaution-container__title">{{ headerTitle }}</span>
+    </header>
+    <main class="disaster-precaution-container__main">
+      <component :is="dynamicComponent" :id="id" ref="dynamicComponentRef" />
+    </main>
+    <footer class="disaster-precaution-container__footer" v-if="operate">
+      <el-button @click="router.back()">取消</el-button>
+      <el-button type="primary" @click="submit">提交</el-button>
+    </footer>
+    <UploadLoading :form-loading="formLoading" v-if="formLoading" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, defineAsyncComponent } from 'vue';
+  import UploadLoading from '@/components/UploadLoading.vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import BackIcon from 'assets/svg/back.svg';
+  import { ElMessage } from 'element-plus';
+  const router = useRouter();
+  const route = useRoute();
+  const operate = route.query.operate;
+  const id = route.query.id;
+  const headerTitle = computed(() => {
+    const fixedTitle = '灾害处置任务';
+    if (operate === 'create') {
+      return `创建${fixedTitle}`;
+    }
+    return `查看${fixedTitle}`;
+  });
+  const dynamicComponent = computed(() => {
+    if (operate === 'create') {
+      return defineAsyncComponent(() => import('./src/components/CreateDisposalManagementTaskItem.vue'));
+    } else {
+      return defineAsyncComponent(() => import('./src/components/ViewDisposalManagementTaskItem.vue'));
+    }
+  });
+  const dynamicComponentRef = ref();
+  const formLoading = ref(false);
+  const submit = async () => {};
+</script>
+
+<style lang="scss" scoped>
+  @use '../style/disaster.scss' as *;
+  @use './src/style/common.scss' as *;
+</style>

src/views/disaster/disaster-control/PageLossReport.vue

@@ -35,6 +35,6 @@
     margin: 0;
   }
   :deep(.el-tabs__item) {
-    font-size: 14cpx;
+    font-size: 14cpx !important;
   }
 </style>

src/views/disaster/disaster-control/src/components/CollapseItem.vue

@@ -1,17 +1,15 @@
 <template>
   <div class="collapse-item">
-    <div class="collapse-item__header">
-      <div class="collapse-item__header--left" @click="toggle">
+    <div class="collapse-item__header" @click="toggle">
+      <div class="collapse-item__header--left">
         <el-icon class="collapse-item__icon">
           <component :is="isOpen ? ArrowUp : ArrowDown" />
         </el-icon>
         <span>{{ name }}</span>
-        <img :src="ViewDocument" alt="查看" class="collapse-item__icon" @click.stop="handleViewDocument" />
+        <slot name="viewOperation" />
       </div>
-      <div class="collapse-item__header--right" v-if="disposalManagementPermissions">
-        <el-button type="primary">发布</el-button>
-        <el-button type="primary">撤回</el-button>
-        <el-button type="primary">删除</el-button>
+      <div class="collapse-item__header--right">
+        <slot name="batchOperation" />
       </div>
     </div>
     <div v-show="isOpen" class="collapse-item__main">
@@ -23,8 +21,7 @@
 <script lang="ts" setup>
   import { ref, onMounted } from 'vue';
   import { ArrowUp, ArrowDown } from '@element-plus/icons-vue';
-  import ViewDocument from '../svg/view-document.svg';
-  const props = defineProps<{ name: string; defaultOpen?: boolean; disposalManagementPermissions?: boolean }>();
+  const props = defineProps<{ name: string; defaultOpen?: boolean }>();
   const isOpen = ref(false);
   const toggle = () => {
     isOpen.value = !isOpen.value;
@@ -33,9 +30,6 @@
     if (!props.defaultOpen) return;
     isOpen.value = true;
   };
-  const handleViewDocument = () => {
-    console.log('查看');
-  };
   onMounted(() => {
     openFirstCollapseItem();
   });
@@ -56,17 +50,14 @@
       font-size: 20cpx;
       font-weight: 550;
       color: rgba($text-color, 0.85);
+      cursor: pointer;
       &--left {
         @include flex-center;
         gap: 20cpx;
-        cursor: pointer;
       }
     }
     &__main {
       padding-top: 20cpx;
     }
-    &__icon {
-      width: 20cpx;
-    }
   }
 </style>

src/views/disaster/disaster-control/src/components/CreateDisposalManagementItem.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="info-container">
+    <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
+      <template #deptIds>
+        <el-select
+          v-model="ruleFormData.deptIds"
+          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>
+      <template #userGroupList>
+        <GroupSelect v-model="ruleFormData.userGroupList" :groupOptions="groupOptions" />
+      </template>
+      <template #isPush>
+        <el-radio-group v-model="ruleFormData.isPush">
+          <el-radio :label="true">是</el-radio>
+          <el-radio :label="false">否</el-radio>
+        </el-radio-group>
+      </template>
+    </BasicForm>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import BasicForm from '@/components/BasicForm.vue';
+  import GroupSelect from '@/views/disaster/components/GroupSelect.vue';
+  import { useFormConfigHook } from '@/hooks/useFormConfigHook';
+  import {
+    DISPOSAL_MANAGEMENT_TASK_FROM_CONFIG,
+    DISPOSAL_MANAGEMENT_TASK_FROM_DATA,
+    DISPOSAL_MANAGEMENT_TASK_FROM_RULES,
+  } from '../config';
+  import { onMounted, ref } from 'vue';
+  import { useUserInfoHook } from '@/views/disaster/hooks/userInfo';
+  import type { DisposalManagementRuleForm } from '@/types/disaster-control';
+  import type { DeptTree } from '@/types/dept/type';
+  import type { UserGroupOption } from '@/types/person-group/type';
+  import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';
+  import { getAllDepartments } from '@/api/auth/dept';
+  import { getAllUserGroup } from '@/api/system/person-group';
+
+  const { realname } = useUserInfoHook();
+
+  const basicFormRef = ref<InstanceType<typeof BasicForm>>();
+
+  const firstLevelDepts = ref<DeptTree[]>([]);
+  const groupOptions = ref<UserGroupOption[]>([]);
+
+  const { ruleFormConfig, ruleFormData, formRules, cloneRuleFormData, beforeRouteLeave } =
+    useFormConfigHook<DisposalManagementRuleForm>(
+      DISPOSAL_MANAGEMENT_TASK_FROM_CONFIG,
+      DISPOSAL_MANAGEMENT_TASK_FROM_DATA,
+      DISPOSAL_MANAGEMENT_TASK_FROM_RULES,
+    );
+
+  const handleValidate = async () => {
+    if (!basicFormRef.value) return;
+    const parentValidateResult = await basicFormRef.value.validateForm();
+    return parentValidateResult;
+  };
+  const getFormData = () => {
+    cloneRuleFormData();
+    return ruleFormData;
+  };
+  const getDeptList = async () => {
+    const res = await getAllDepartments();
+    firstLevelDepts.value = formatDeptTree(res);
+  };
+  const getUserGroupList = async () => {
+    const res = await getAllUserGroup();
+    groupOptions.value = res.groupVOList;
+  };
+  defineExpose({
+    handleValidate,
+    getFormData,
+  });
+  onMounted(() => {
+    ruleFormData.realname = realname;
+    getDeptList();
+    getUserGroupList();
+    cloneRuleFormData();
+    beforeRouteLeave();
+  });
+</script>
+
+<style scoped lang="scss">
+  @use '@/views/disaster/style/info-container.scss' as *;
+  @use '../style/item-common.scss' as *;
+</style>

src/views/disaster/disaster-control/src/components/CreateDisposalManagementTaskItem.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="info-container">
+    <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
+      <template #deptIds>
+        <el-select
+          v-model="ruleFormData.deptIds"
+          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>
+      <template #userGroupList>
+        <GroupSelect v-model="ruleFormData.userGroupList" :groupOptions="groupOptions" />
+      </template>
+      <template #isPush>
+        <el-radio-group v-model="ruleFormData.isPush">
+          <el-radio :label="true">是</el-radio>
+          <el-radio :label="false">否</el-radio>
+        </el-radio-group>
+      </template>
+    </BasicForm>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import BasicForm from '@/components/BasicForm.vue';
+  import GroupSelect from '@/views/disaster/components/GroupSelect.vue';
+  import { useFormConfigHook } from '@/hooks/useFormConfigHook';
+  import {
+    DISPOSAL_MANAGEMENT_ITEM_FROM_CONFIG_CREATE,
+    DISPOSAL_MANAGEMENT_TASK_FROM_DATA,
+    DISPOSAL_MANAGEMENT_ITEM_FROM_RULES_CREATE,
+  } from '../config';
+  import { onMounted, ref } from 'vue';
+  import { useUserInfoHook } from '@/views/disaster/hooks/userInfo';
+  import type { DisposalManagementRuleForm } from '@/types/disaster-control';
+  import type { DeptTree } from '@/types/dept/type';
+  import type { UserGroupOption } from '@/types/person-group/type';
+  import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';
+  import { getAllDepartments } from '@/api/auth/dept';
+  import { getAllUserGroup } from '@/api/system/person-group';
+  import { useRoute } from 'vue-router';
+
+  const { realname } = useUserInfoHook();
+  const route = useRoute();
+  const taskName = route.query.taskName as string;
+  const basicFormRef = ref<InstanceType<typeof BasicForm>>();
+
+  const firstLevelDepts = ref<DeptTree[]>([]);
+  const groupOptions = ref<UserGroupOption[]>([]);
+
+  const { ruleFormConfig, ruleFormData, formRules, cloneRuleFormData, beforeRouteLeave } =
+    useFormConfigHook<DisposalManagementRuleForm>(
+      DISPOSAL_MANAGEMENT_ITEM_FROM_CONFIG_CREATE,
+      DISPOSAL_MANAGEMENT_TASK_FROM_DATA,
+      DISPOSAL_MANAGEMENT_ITEM_FROM_RULES_CREATE,
+    );
+
+  const handleValidate = async () => {
+    if (!basicFormRef.value) return;
+    const parentValidateResult = await basicFormRef.value.validateForm();
+    return parentValidateResult;
+  };
+  const getFormData = () => {
+    cloneRuleFormData();
+    return ruleFormData;
+  };
+  const getDeptList = async () => {
+    const res = await getAllDepartments();
+    firstLevelDepts.value = formatDeptTree(res);
+  };
+  const getUserGroupList = async () => {
+    const res = await getAllUserGroup();
+    groupOptions.value = res.groupVOList;
+  };
+  defineExpose({
+    handleValidate,
+    getFormData,
+  });
+  onMounted(() => {
+    ruleFormData.realname = realname;
+    ruleFormData.taskName = taskName;
+    getDeptList();
+    getUserGroupList();
+    cloneRuleFormData();
+    beforeRouteLeave();
+  });
+</script>
+
+<style scoped lang="scss">
+  @use '@/views/disaster/style/info-container.scss' as *;
+  @use '../style/item-common.scss' as *;
+</style>

src/views/disaster/disaster-control/src/components/EditDisposalManagementItem.vue

@@ -0,0 +1,7 @@
+<template>
+  <div> this is createDisposalManagementItem page </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>

src/views/disaster/disaster-control/src/components/ViewDisposalManagementItem.vue

@@ -0,0 +1,7 @@
+<template>
+  <div> this is createDisposalManagementItem page </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>

src/views/disaster/disaster-control/src/components/ViewDisposalManagementTaskItem.vue

@@ -0,0 +1,7 @@
+<template>
+  <div> this is viewDisposalManagementTaskItem page </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>

src/views/disaster/disaster-control/src/config/form.ts

@@ -0,0 +1,127 @@
+/**
+ * 灾害预警信息表单配置
+ */
+import type { FormConfig } from '@/types/basic-form';
+// 通用表单信息
+const BASIC_FROM_CONFIG = {};
+
+// 通用处置管理表单信息
+const DISPOSAL_MANAGEMENT_BASIC_FROM_CONFIG: FormConfig[] = [
+  {
+    label: '应完成上报时间',
+    prop: 'dueCompleteTime',
+    component: 'ElDatePicker',
+    componentProps: {
+      placeholder: '请选择应完成上报时间',
+      type: 'datetime',
+      format: 'YYYY-MM-DD HH:mm:ss',
+      dateFormat: 'MMM DD, YYYY',
+      timeFormat: 'HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    label: '上报要求',
+    prop: 'reportRequirement',
+    component: 'ElInput',
+    componentProps: {
+      type: 'textarea',
+      rows: 5,
+      placeholder: '请输入上报要求',
+      maxlength: 1000,
+      showWordLimit: true,
+    },
+  },
+  {
+    label: '上报人员',
+    prop: 'userGroupList',
+    slot: 'userGroupList',
+  },
+  {
+    label: '是否推送',
+    prop: 'isPush',
+    slot: 'isPush',
+  },
+  {
+    label: '创建人',
+    prop: 'realname',
+    component: 'ElInput',
+    componentProps: {
+      disabled: true,
+    },
+  },
+];
+
+// 处置管理表单信息（任务项）
+export const DISPOSAL_MANAGEMENT_TASK_FROM_CONFIG: FormConfig[] = [
+  {
+    label: '任务名称',
+    prop: 'taskName',
+    component: 'ElInput',
+    componentProps: {
+      placeholder: '请输入任务名称',
+    },
+  },
+  {
+    label: '上报部门',
+    prop: 'deptIds',
+    slot: 'deptIds',
+  },
+  ...DISPOSAL_MANAGEMENT_BASIC_FROM_CONFIG,
+];
+
+// 处置管理表单信息（列表项）
+export const DISPOSAL_MANAGEMENT_ITEM_FROM_CONFIG_CREATE: FormConfig[] = [
+  {
+    label: '任务名称',
+    prop: 'taskName',
+    component: 'ElInput',
+    componentProps: {
+      placeholder: '请输入任务名称',
+      disabled: true,
+    },
+  },
+  {
+    label: '上报部门',
+    prop: 'deptIds',
+    slot: 'deptIds',
+  },
+  ...DISPOSAL_MANAGEMENT_BASIC_FROM_CONFIG,
+];
+
+// 通用表单数据
+const BASIC_FROM_DATA = {};
+const DISPOSAL_MANAGEMENT_BASIC_FROM_DATA = {
+  taskName: '',
+  deptIds: [],
+  dueCompleteTime: '',
+  reportRequirement: '',
+  userGroupList: [],
+  isPush: null,
+  realname: '',
+};
+export const DISPOSAL_MANAGEMENT_TASK_FROM_DATA = {
+  ...DISPOSAL_MANAGEMENT_BASIC_FROM_DATA,
+};
+
+// 通用表单规则
+const BASIC_FROM_RULES = {};
+
+// 处置管理通用表单规则
+const DISPOSAL_MANAGEMENT_BASIC_FROM_RULES = {
+  deptIds: [{ required: true, message: '请选择上报部门', trigger: 'change' }],
+  dueCompleteTime: [{ required: true, message: '请选择应完成上报时间', trigger: 'change' }],
+  userGroupList: [{ required: true, message: '请选择上报人员', trigger: 'change' }],
+  isPush: [{ required: true, message: '请选择是否推送', trigger: 'change' }],
+};
+
+// 处置管理任务项表单规则（任务项）
+export const DISPOSAL_MANAGEMENT_TASK_FROM_RULES = {
+  taskName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
+  ...DISPOSAL_MANAGEMENT_BASIC_FROM_RULES,
+};
+
+// 处置管理列表项表单规则（列表项）
+export const DISPOSAL_MANAGEMENT_ITEM_FROM_RULES_CREATE = {
+  ...DISPOSAL_MANAGEMENT_BASIC_FROM_RULES,
+};

src/views/disaster/disaster-control/src/config/index.ts

@@ -10,6 +10,13 @@ import {
   LOSS_REPORT_REPORT_TASK_TABLE_OPTIONS,
   LOSS_RECORD_TABLE_COLUMNS,
 } from './table';
+import {
+  DISPOSAL_MANAGEMENT_TASK_FROM_CONFIG,
+  DISPOSAL_MANAGEMENT_TASK_FROM_DATA,
+  DISPOSAL_MANAGEMENT_TASK_FROM_RULES,
+  DISPOSAL_MANAGEMENT_ITEM_FROM_CONFIG_CREATE,
+  DISPOSAL_MANAGEMENT_ITEM_FROM_RULES_CREATE,
+} from './form';
 
 export {
   DISPOSAL_MANAGEMENT_SEARCH_CONFIG,
@@ -20,4 +27,9 @@ export {
   DISPOSAL_MANAGEMENT_TABLE_OPTIONS,
   LOSS_REPORT_REPORT_TASK_TABLE_OPTIONS,
   LOSS_RECORD_TABLE_COLUMNS,
+  DISPOSAL_MANAGEMENT_TASK_FROM_CONFIG,
+  DISPOSAL_MANAGEMENT_TASK_FROM_DATA,
+  DISPOSAL_MANAGEMENT_TASK_FROM_RULES,
+  DISPOSAL_MANAGEMENT_ITEM_FROM_CONFIG_CREATE,
+  DISPOSAL_MANAGEMENT_ITEM_FROM_RULES_CREATE,
 };

src/views/disaster/disaster-control/src/constant.ts

@@ -6,7 +6,9 @@ import { PAGE_SIZE_CONFIG } from '@/constant/pagination';
 export enum TASK_STAGE {
   TO_BE_RELEASED = 1,
   TO_BE_REPORTED,
-  REPORTED,
+  REPORTED_LOSS,
+  REPORTED_NO_LOSS,
+  OVERDUE,
 }
 
 export const TASK_STAGE_OPTIONS = [
@@ -19,9 +21,17 @@ export const TASK_STAGE_OPTIONS = [
     value: TASK_STAGE.TO_BE_REPORTED,
   },
   {
-    label: '已上报',
-    value: TASK_STAGE.REPORTED,
+    label: '已上报，有损失',
+    value: TASK_STAGE.REPORTED_LOSS,
   },
+  {
+    label: '已上报，无损失',
+    value: TASK_STAGE.REPORTED_NO_LOSS,
+  },
+  {
+    label: '超期未上报',
+    value: TASK_STAGE.OVERDUE,
+  }
 ];
 
 export const DEFAULT_PAGE_SIZE = 10;
@@ -36,4 +46,11 @@ export const LOSS_REPORT_TABS = [
     label: '损失记录',
     value: 'lossRecord',
   },
-]; 
+]; 
+
+// 表单操作项
+export enum FORM_OPERATE_TYPE {
+  TABLE_ITEM = 'tableItem',
+  TASK_ITEM = 'taskItem',
+}
+

src/views/disaster/disaster-control/src/style/common.scss

@@ -0,0 +1,5 @@
+.disaster-precaution-container__header {
+  flex-direction: row !important;
+  justify-content: flex-start !important;
+  gap: 8cpx !important;
+}

src/views/disaster/disaster-control/src/style/item-common.scss

@@ -0,0 +1,3 @@
+:deep(.el-date-editor) {
+  --el-date-editor-width: 100%;
+}

src/views/disaster/disaster-precaution/src/config/form.ts

@@ -70,7 +70,7 @@ export const TASK_MANAGEMENT_FROM_CONFIG_CREATE: FormConfig[] = [
   BASIC_FORM_CONFIG.TASK_NAME,
   {
     label: '被检查（自查）单位',
-    prop: 'deptName',
+    prop: 'deptIdList',
     slot: 'deptName',
   },
   BASIC_FORM_CONFIG.INSPECT_TYPE,

src/views/disaster/disaster-warning/PageDefenseNotice.vue

@@ -207,10 +207,12 @@
   };
   const handleSizeChange = (value: number) => {
     pagination.pageSize = value;
+    defenseNoticeListQuery.pageSize = value;
     getTableData();
   };
   const handleCurrentChange = (value: number) => {
     pagination.pageNumber = value;
+    defenseNoticeListQuery.pageNumber = value;
     getTableData();
   };
   const getTableData = async () => {

src/views/disaster/disaster-warning/PageWarningInfo.vue

@@ -214,10 +214,12 @@
   };
   const handleSizeChange = (value: number) => {
     pagination.pageSize = value;
+    wanrningInfoListQuery.pageSize = value;
     getTableData();
   };
   const handleCurrentChange = (value: number) => {
     pagination.pageNumber = value;
+    wanrningInfoListQuery.pageNumber = value;
     getTableData();
   };
   const getTableData = async () => {

src/views/disaster/disaster-warning/src/config/form.ts

@@ -51,6 +51,8 @@ export const WARNING_INFO_FROM_CONFIG: FormConfig[] = [
     component: 'ElInput',
     componentProps: {
       placeholder: '请输入信息来源',
+      maxlength: 200,
+      showWordLimit: true,
     },
   },
   {

src/views/disaster/overview/PageOverview.vue

@@ -231,4 +231,10 @@
       gap: 5cpx;
     }
   }
+  :deep(.el-tabs__header) {
+    margin-bottom: 15cpx;
+  }
+  :deep(.el-tabs__item) {
+    font-size: 14cpx;
+  }
 </style>

src/views/disaster/overview/src/components/NotionList.vue

@@ -40,4 +40,7 @@
     font-weight: 600;
     color: rgba($text-color, 0.85);
   }
+  img{
+    width: 20cpx;
+  }
 </style>

src/views/disaster/style/disaster.scss

@@ -36,7 +36,6 @@
       flex-direction: column;
       gap: 20cpx;
       &__header--button {
-        font-size: 14cpx;
         margin-bottom: 20cpx;
       }
     }