feat：风险管理相关

src/api/production-safety/responsibility-implementation/index.ts

@@ -6,9 +6,10 @@ import type { QueryPageRequest, QueryPageResponse } from '@/types/basic-query';
  * @param params - 分页查询参数，通常包含 username、pageNum、pageSize 等
  * @returns Promise<QueryPageResponse>
  */
-export function queryUserPageByUsername(params) {
+queryAvailableUserList
+export function queryAvailableUserList(params) {
   return http.request({
-    url: `/admin/user/queryUserPageByUsername`,
+    url: `/admin/user/queryAvailableUserList`,
     method: 'post',
     params
   });
@@ -486,3 +487,93 @@ export function safetyNoticeAdminIssuedNotice(params) {
     params
   });
 }
+
+/**
+ * 分页查询安全风险清单列表
+ * @param params - 分页及查询条件（如风险名称、等级、状态、区域、pageNum、pageSize 等）
+ * @returns Promise<QueryPageResponse> 安全风险数据的分页结果
+ */
+export function safetyRiskListQueryPage(params) {
+  return http.request({
+    url: '/safetyRisk/list/queryPage',
+    method: 'post',
+    params
+  });
+}
+
+/**
+ * 
+ * @param id 
+ * @returns 
+ */
+export function safetyRiskListDelete(id) {
+  return http.request({
+    url: `/safetyRisk/list/delete?id=${id}`,
+    method: 'delete',
+  });
+}
+
+/**
+ * 审批安全风险清单
+ * @param params - 审批参数，包含 id、approveStatus 等
+ * @returns Promise<void>
+ */
+export function safetyRiskListApprove(params) {
+  return http.request({
+    url: `/safetyRisk/list/approve`,
+    method: 'put',
+    params
+  });
+}
+
+/**
+ * 保存安全风险清单
+ * @param params - 安全风险清单数据
+ * @returns Promise<void>
+ */
+export function safetyRiskListSaveRiskList(params) {
+  return http.request({
+    url: `/safetyRisk/list/saveRiskList`,
+    method: 'post',
+    params
+  });
+}
+
+/**
+ * 更新安全风险清单
+ * @param params - 更新后的安全风险清单数据（需包含 ID）
+ * @returns Promise<void>
+ */
+export function safetyRiskListUpdateRiskList(params) {
+  return http.request({
+    url: `/safetyRisk/list/updateRiskList`,
+    method: 'put',
+    params
+  });
+}
+
+/**   
+ *  切换安全风险清单状态（启用/停用）
+ * @param params - 包含 id 和目标状态
+ * @returns Promise<void>
+ */
+export function safetyRiskListChange(params) {
+  return http.request({
+    url: `/safetyRisk/list/change`,
+    method: 'put',
+    params
+  });
+}
+
+
+/** 
+ * 查询安全风险清单详情           
+ *  @param id - 安全风险清单 ID
+ * @returns Promise<any> 安全风险清单详细信息
+ */       
+export function safetyRiskListQueryDetail(id) {
+  return http.request({
+    url: `/safetyRisk/list/queryDetail?id=${id}`,
+    method: 'get',
+  });
+}

src/router/routers/production-safety.ts

@@ -714,7 +714,647 @@ const productionSafetyRoutes = {
         },
       ],
     },
-  ],
+    {
+      id: 90001,
+      parentId: 9001,
+      name: 'createResponsibilityAgree',
+      path: 'create-responsibility-agree',
+      component: '/production-safety/implement-safety-duty/create-responsibility-agree',
+      meta: {
+        title: '创建安全责任书',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+      }
+    },
+
+    {
+      id: 90002,
+      parentId: 9001,
+      name: 'editResponsibilityAgree',
+      path: 'edit-responsibility-agree',
+      component: '/production-safety/implement-safety-duty/edit-responsibility-agree',
+      meta: {
+        title: '编辑安全责任书',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+      }
+    },
+    {
+      id: 90003,
+      parentId: 9001,
+      name: 'viewRecipients',
+      path: 'view-recipients',
+      component: '/production-safety/implement-safety-duty/view-recipients',
+      meta: {
+        title: '查看下发对象',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+      }
+    },
+    // {
+    //   id: 90004,
+    //   parentId: 9001,
+    //   name: 'reviewResponsibilityAgree',
+    //   path: 'review-responsibility-agree',
+    //   component: '/production-safety/implement-safety-duty/review-responsibility-agree',
+    //   meta: {
+    //     title: '审核安全责任书',
+    //     icon: 'OverviewIcon',
+    //     isRoot: false,
+    //     hidden: false,
+    //     noCache: false,
+    //   }
+    // },
+    {
+      id: 90005,
+      parentId: 9001,
+      name: 'agreeDocumentReview',
+      path: 'agree-document-review',
+      component: '/production-safety/implement-safety-duty/agree-document-review',
+      meta: {
+        title: '安全责任书材料审核',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+      }
+    },
+    {
+      id: 90006,
+      parentId: 9001,
+      name: 'responsibilityAgreeManageDept',
+      path: 'responsibility-agree-manage-dept',
+      component: '/production-safety/implement-safety-duty/responsibility-agree-manage-dept',
+      meta: {
+        title: '安全责任书管理(部门端)',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+      }
+
+    },
+    {
+      id: 90007,
+      parentId: 9001,
+      name: 'signAgreeDept',
+      path: 'sign-agree-dept',
+      component: '/production-safety/implement-safety-duty/sign-agree-dept',
+      meta: {
+        title: '责任书签署',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+      }
+
+    },
+    // 责任清单
+    {
+      id: 90008,
+      parentId: 9001,
+      name: 'listResponsibilities:nonPublic',
+      path: 'non-public-list-responsibilities',
+      component: '/production-safety/implement-safety-duty/non-public-list-responsibilities/list',
+      meta: {
+        title: '责任清单',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+
+      }
+    },
+
+    {
+      id: 90009,
+      parentId: 90008,
+      name: 'addResponsibilities:nonPublic',
+      path: 'non-public-add-responsibilities',
+      component: '/production-safety/implement-safety-duty/non-public-list-responsibilities/add',
+      meta: {
+        title: '新增非区域责任清单',
+        activeMenu: '/work-safety/responsibility-implementation/non-public-list-responsibilities',
+        // icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+      }
+    },
+    {
+
+      id: 90010,
+      parentId: 90008,
+      name: 'editResponsibilities:nonPublic',
+      path: 'non-public-edit-responsibilities',
+      component: '/production-safety/implement-safety-duty/non-public-list-responsibilities/edit',
+      meta: {
+        title: '编辑非区域责任清单',
+        activeMenu: '/work-safety/responsibility-implementation/non-public-list-responsibilities',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+
+      }
+    },
+    {
+
+      id: 90011,
+      parentId: 90008,
+      name: 'changeResponsibilities:nonPublic',
+      path: 'non-public-change-responsibilities',
+      component: '/production-safety/implement-safety-duty/non-public-list-responsibilities/change',
+      meta: {
+        title: '变更非区域责任清单',
+        activeMenu: '/work-safety/responsibility-implementation/non-public-list-responsibilities',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+
+      }
+    },
+    {
+
+      id: 90012,
+      parentId: 90008,
+      name: 'viewResponsibilities:nonPublic',
+      path: 'non-public-view-responsibilities',
+      component: '/production-safety/implement-safety-duty/non-public-list-responsibilities/view',
+      meta: {
+        title: '查看非区域责任清单',
+        activeMenu: '/work-safety/responsibility-implementation/non-public-list-responsibilities',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+
+      }
+    },
+    // 责任区域
+    {
+      id: 90013,
+      parentId: 9001,
+      name: 'areaResponsibilities:nonPublic',
+      path: 'non-public-area-responsibilities',
+      component: '/production-safety/implement-safety-duty/non-public-area-responsibilities/list',
+      meta: {
+        title: '责任区域',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+
+      }
+    },
+
+    {
+      id: 90014,
+      parentId: 90008,
+      name: 'areaAddResponsibilities:nonPublic',
+      path: 'non-public-area-add-responsibilities',
+      component: '/production-safety/implement-safety-duty/non-public-area-responsibilities/add',
+      meta: {
+        title: '新增非区域责任清单',
+        activeMenu: '/work-safety/responsibility-implementation/non-public-area-responsibilities',
+        // icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+      }
+    },
+    {
+
+      id: 90015,
+      parentId: 90014,
+      name: 'areaEditResponsibilities:nonPublic',
+      path: 'non-public-area-edit-responsibilities',
+      component: '/production-safety/implement-safety-duty/non-public-area-responsibilities/edit',
+      meta: {
+        title: '编辑非区域责任清单',
+        activeMenu: '/work-safety/responsibility-implementation/non-public-area-responsibilities',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+
+      }
+    },
+    {
+
+      id: 90016,
+      parentId: 90014,
+      name: 'areaChangeResponsibilities:nonPublic',
+      path: 'non-public-area-change-responsibilities',
+      component: '/production-safety/implement-safety-duty/non-public-area-responsibilities/change',
+      meta: {
+        title: '变更非区域责任清单',
+        activeMenu: '/work-safety/responsibility-implementation/non-public-area-responsibilities',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+
+      }
+    },
+    {
+
+      id: 90017,
+      parentId: 90014,
+      name: 'areaViewResponsibilities:nonPublic',
+      path: 'non-public-area-view-responsibilities',
+      component: '/production-safety/implement-safety-duty/non-public-area-responsibilities/view',
+      meta: {
+        title: '查看非区域责任清单',
+        activeMenu: '/work-safety/responsibility-implementation/non-public-area-responsibilities',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+
+      }
+    },
+    // 责任清单(公共区域)
+    {
+      id: 90020,
+      parentId: 9001,
+      name: 'listResponsibilities:public',
+      path: 'public-list-responsibilities',
+      component: '/production-safety/implement-safety-duty/public-list-responsibilities/list',
+      meta: {
+        title: '责任清单',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+
+      }
+    },
+
+    {
+      id: 90021,
+      parentId: 90008,
+      name: 'addResponsibilities:public',
+      path: 'public-add-responsibilities',
+      component: '/production-safety/implement-safety-duty/public-list-responsibilities/add',
+      meta: {
+        title: '新增区域责任清单',
+        activeMenu: '/work-safety/responsibility-implementation/public-list-responsibilities',
+        // icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+      }
+    },
+    {
+
+      id: 90022,
+      parentId: 90008,
+      name: 'editResponsibilities:public',
+      path: 'public-edit-responsibilities',
+      component: '/production-safety/implement-safety-duty/public-list-responsibilities/edit',
+      meta: {
+        title: '编辑区域责任清单',
+        activeMenu: '/work-safety/responsibility-implementation/public-list-responsibilities',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+
+      }
+    },
+    {
+
+      id: 90023,
+      parentId: 90008,
+      name: 'changeResponsibilities:public',
+      path: 'public-change-responsibilities',
+      component: '/production-safety/implement-safety-duty/public-list-responsibilities/change',
+      meta: {
+        title: '变更区域责任清单',
+        activeMenu: '/work-safety/responsibility-implementation/public-list-responsibilities',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+
+      }
+    },
+    {
+
+      id: 90024,
+      parentId: 90008,
+      name: 'viewResponsibilities:public',
+      path: 'public-view-responsibilities',
+      component: '/production-safety/implement-safety-duty/public-list-responsibilities/view',
+      meta: {
+        title: '查看区域责任清单',
+        activeMenu: '/work-safety/responsibility-implementation/public-list-responsibilities',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+
+      }
+    },
+    // 责任区域(公共区域)
+    {
+      id: 90030,
+      parentId: 9001,
+      name: 'areaResponsibilities:public',
+      path: 'public-area-responsibilities',
+      component: '/production-safety/implement-safety-duty/public-area-responsibilities/list',
+      meta: {
+        title: '责任区域',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+
+      }
+    },
+
+    {
+      id: 90031,
+      parentId: 90008,
+      name: 'areaAddResponsibilities:public',
+      path: 'public-area-add-responsibilities',
+      component: '/production-safety/implement-safety-duty/public-area-responsibilities/add',
+      meta: {
+        title: '新增区域责任清单',
+        activeMenu: '/work-safety/responsibility-implementation/public-area-responsibilities',
+        // icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+      }
+    },
+    {
+
+      id: 90032,
+      parentId: 90014,
+      name: 'areaEditResponsibilities:public',
+      path: 'public-area-edit-responsibilities',
+      component: '/production-safety/implement-safety-duty/public-area-responsibilities/edit',
+      meta: {
+        title: '编辑区域责任清单',
+        activeMenu: '/work-safety/responsibility-implementation/public-area-responsibilities',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+
+      }
+    },
+    {
+
+      id: 90033,
+      parentId: 90014,
+      name: 'areaChangeResponsibilities:public',
+      path: 'public-area-change-responsibilities',
+      component: '/production-safety/implement-safety-duty/public-area-responsibilities/change',
+      meta: {
+        title: '变更区域责任清单',
+        activeMenu: '/work-safety/responsibility-implementation/public-area-responsibilities',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+
+      }
+    },
+    {
+
+      id: 90034,
+      parentId: 90014,
+      name: 'areaViewResponsibilities:public',
+      path: 'public-area-view-responsibilities',
+      component: '/production-safety/implement-safety-duty/public-area-responsibilities/view',
+      meta: {
+        title: '查看区域责任清单',
+        activeMenu: '/work-safety/responsibility-implementation/public-area-responsibilities',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+
+      }
+    },
+    // 安全责任通知管理(部门侧)
+    {
+
+      id: 90040,
+      parentId: 90014,
+      name: 'responsibilityNoticeManage',
+      path: 'responsibility-notice-manage',
+      component: '/production-safety/implement-safety-duty/responsibility-notice-manage-dept/list',
+      meta: {
+        title: '安全责任通知管理(部门侧)',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+
+      }
+    },
+    {
+      id: 90041,
+      parentId: 90014,
+      name: 'responsibilityNoticeFeedback',
+      path: 'responsibility-notice-feedback',
+      component: '/production-safety/implement-safety-duty/responsibility-notice-manage-dept/feedback',
+      meta: {
+        title: '安全责任通知反馈(部门侧)',
+        activeMenu: '/work-safety/responsibility-implementation/responsibility-notice-manage',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+
+      }
+    },
+    {
+      id: 90042,
+      parentId: 90014,
+      name: 'responsibilityNoticeView',
+      path: 'responsibility-notice-view',
+      component: '/production-safety/implement-safety-duty/responsibility-notice-manage-dept/view',
+      meta: {
+        title: '查看安全责任通知(部门侧)',
+        activeMenu: '/work-safety/responsibility-implementation/responsibility-notice-manage',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+
+      }
+    },
+    // 全部安全责任通知管理(管理侧)
+    {
+      id: 91000,
+      parentId: 90014,
+      name: 'responsibilityNoticeManage:admin',
+      path: 'admin-responsibility-notice-manage',
+      component: '/production-safety/implement-safety-duty/responsibility-notice-manage-admin/list',
+      meta: {
+        title: '安全责任通知管理(管理侧全部)',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+
+      }
+    },
+    {
+      id: 91001,
+      parentId: 90014,
+      name: 'responsibilityNoticeAdd:admin',
+      path: 'admin-responsibility-notice-add',
+      component: '/production-safety/implement-safety-duty/responsibility-notice-manage-admin/add',
+      meta: {
+        title: '创建责任通知(管理侧全部)',
+        activeMenu: '/work-safety/responsibility-implementation/responsibility-notice-manage-admin',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+
+      }
+    },
+    {
+      id: 91002,
+      parentId: 90014,
+      name: 'responsibilityNoticeEdit:admin',
+      path: 'admin-responsibility-notice-edit',
+      component: '/production-safety/implement-safety-duty/responsibility-notice-manage-admin/edit',
+      meta: {
+        title: '编辑责任通知(管理侧全部)',
+        activeMenu: '/work-safety/responsibility-implementation/responsibility-notice-manage-admin',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+
+      }
+    },
+    {
+      id: 91003,
+      parentId: 90014,
+      name: 'responsibilityNoticeReview:admin',
+      path: 'admin-responsibility-notice-review',
+      component: '/production-safety/implement-safety-duty/responsibility-notice-manage-admin/review',
+      meta: {
+        title: '安全责任通知材料审核(管理侧全部)',
+        activeMenu: '/work-safety/responsibility-implementation/responsibility-notice-manage-admin',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+
+      }
+    },
+    {
+      id: 91004,
+      parentId: 90014,
+      name: 'responsibilityNoticeView:admin',
+      path: 'admin-responsibility-notice-view',
+      component: '/production-safety/implement-safety-duty/responsibility-notice-manage-admin/notice-view',
+      meta: {
+        title: '查看通知对象(管理侧全部)',
+        activeMenu: '/work-safety/responsibility-implementation/responsibility-notice-manage-admin',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+      }
+    },
+
+    // 风险清单管理
+    {
+      id: 92000,
+      parentId: 90014,
+      name: 'riskManage',
+      path: 'risk-manage',
+      component: '/production-safety/implement-safety-duty/risk-manage/list',
+      meta: {
+        title: '风险清单管理',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+      }
+    },
+    {
+      id: 92001,
+      parentId: 90014,
+      name: 'riskManageAdd',
+      path: 'risk-manage-add',
+      component: '/production-safety/implement-safety-duty/risk-manage/add',
+      meta: {
+        title: '新增风险清单',
+        activeMenu: '/work-safety/responsibility-implementation/risk-manage',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+      }
+    },
+    {
+      id: 92002,
+      parentId: 90014,
+      name: 'riskManageEdit',
+      path: 'risk-manage-edit',
+      component: '/production-safety/implement-safety-duty/risk-manage/edit',
+      meta: {
+        title: '编辑风险清单',
+        activeMenu: '/work-safety/responsibility-implementation/risk-manage',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+      }
+    },
+    {
+      id: 92003,
+      parentId: 90014,
+      name: 'riskManageView',
+      path: 'risk-manage-view',
+      component: '/production-safety/implement-safety-duty/risk-manage/view',
+      meta: {
+        title: '查看风险清单',
+        activeMenu: '/work-safety/responsibility-implementation/risk-manage',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+      }
+    },
+    {
+      id: 92004,
+      parentId: 90014,
+      name: 'riskManageChange',
+      path: 'risk-manage-change',
+      component: '/production-safety/implement-safety-duty/risk-manage/change',
+      meta: {
+        title: '变更风险清单',
+        activeMenu: '/work-safety/responsibility-implementation/risk-manage',
+        icon: 'OverviewIcon',
+        isRoot: false,
+        hidden: false,
+        noCache: false,
+      }
+    },
+
+
+  ]
+
 };
 
 export default productionSafetyRoutes;

src/views/production-safety/implement-safety-duty/non-public-area-responsibilities/add.vue

@@ -22,7 +22,7 @@
         </el-form-item>
 
         <el-form-item label="安全责任所/中心" prop="safetyResponsibleCenter">
-          <el-select
+          <!-- <el-select
             v-model="formValue.safetyResponsibleCenter"
             placeholder="请选择"
             size="large"
@@ -35,7 +35,18 @@
               :label="item.deptName"
               :value="item.deptName"
             />
-          </el-select>
+          </el-select> -->
+          <el-cascader
+            style="width: 50%"
+            size="large"
+            :ref="(el) => (cascaderRef['safetyResponsibleCenter'] = el)"
+            :options="firstLevelDepts"
+            :props="cascaderProp"
+            :show-all-levels="false"
+            placeholder="请选择安全责任部门"
+            filterable
+            @change="(val) => handleChangeDept(val, 'safetyResponsibleCenter')"
+          />
         </el-form-item>
 
         <el-form-item label="安全责任所/中心负责人" prop="safetyCenterManager">
@@ -45,9 +56,14 @@
             size="large"
             style="width: 50%"
             filterable
-            @change="(val) => syncUserName(val, 'safetyCenterManagerName')"
+            @change="(val) => syncUserName(val, safetyCenterManagerOptions, 'safetyCenterManagerName')"
           >
-            <el-option v-for="item in userOptions" :key="item.id" :label="item.name" :value="item.id" />
+            <el-option
+              v-for="item in safetyCenterManagerOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
           </el-select>
         </el-form-item>
 
@@ -69,15 +85,13 @@
           <el-cascader
             style="width: 50%"
             size="large"
-            ref="cascaderRef"
-            popper-class="cascader-popper--custom"
-            v-model="formValue.safetyResponsibleDepartment"
+            :ref="(el) => (cascaderRef['safetyResponsibleDepartment'] = el)"
             :options="firstLevelDepts"
             :props="cascaderProp"
             :show-all-levels="false"
             placeholder="请选择安全责任部门"
             filterable
-            @change="handleChangeDept('safetyResponsibleDepartment')"
+            @change="(val) => handleChangeDept(val, 'safetyResponsibleDepartment')"
           />
         </el-form-item>
 
@@ -88,11 +102,17 @@
             size="large"
             style="width: 50%"
             filterable
-            @change="(val) => syncUserName(val, 'safetyDepartmentManagerName')"
+            @change="(val) => syncUserName(val, safetyDepartmentUserOptions, 'safetyDepartmentManagerName')"
           >
-            <el-option v-for="item in userOptions" :key="item.id" :label="item.name" :value="item.id" />
+            <el-option
+              v-for="item in safetyDepartmentUserOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
           </el-select>
         </el-form-item>
+        <!-- @change="handleSpecificPersonChange" -->
 
         <el-form-item label="安全具体责任人" prop="safetySpecificPerson">
           <el-select
@@ -101,9 +121,14 @@
             size="large"
             style="width: 50%"
             filterable
-            @change="handleSpecificPersonChange"
+            @change="(val) => syncUserName(val, safetyDepartmentUserOptions, 'safetySpecificPersonName')"
           >
-            <el-option v-for="item in userOptions" :key="item.id" :label="item.name" :value="item.id" />
+            <el-option
+              v-for="item in safetyDepartmentUserOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
           </el-select>
         </el-form-item>
 
@@ -125,29 +150,26 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, onMounted } from 'vue';
+  import { ref, reactive, onMounted, nextTick } from 'vue';
   import { useRouter } from 'vue-router';
   import { ElMessage } from 'element-plus';
   import { getAllDepartments } from '@/api/auth/dept';
   import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';
-  import { getUserList } from '@/api/system/user-operate';
 
-  import {
-    queryUserPageByUsername,
-    areaCheckListSavaArea,
-  } from '@/api/production-safety/responsibility-implementation';
+  import { queryAvailableUserList, areaCheckListSavaArea } from '@/api/production-safety/responsibility-implementation';
 
   const router = useRouter();
   const formRef = ref<any>(null);
   const submiting = ref(false);
-  const cascaderRef = ref();
+  const cascaderRef = ref({});
 
-  const userOptions = ref<any[]>([]);
+  const safetyCenterManagerOptions = ref<any[]>([]);
+  const safetyDepartmentUserOptions = ref<any[]>([]);
   const firstLevelDepts = ref<any[]>([]);
   const cascaderProp = {
     expandTrigger: 'click',
     checkStrictly: true,
-    emitPath: false,
+    // emitPath: false,
     value: 'id',
     label: 'deptName',
   };
@@ -186,46 +208,84 @@
       { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码格式' },
     ],
   });
-
-  const handleChangeDept = (prop) => {
-    const deptInfo = cascaderRef.value?.getCheckedNodes();
-    formValue[prop] = deptInfo[0].label;
-    console.log(deptInfo);
+  const handleQueryAvailableUserList = (deptName, prop, realname = '') => {
+    queryAvailableUserList({
+      pageNumber: 1,
+      pageSize: 200,
+      queryParam: {
+        deptName,
+        realname,
+      },
+    }).then((res: any) => {
+      switch (prop) {
+        case 'safetyResponsibleCenter':
+          formValue.safetyCenterManager = null;
+          safetyCenterManagerOptions.value = (res.records || []).map((u: any) => ({
+            value: u.userId || u.id,
+            label: u.realname,
+          }));
+          break;
+        case 'safetyResponsibleDepartment':
+          alert('');
+          formValue.safetyDepartmentManager = null;
+          formValue.safetySpecificPerson = null;
+          safetyDepartmentUserOptions.value = (res.records || []).map((u: any) => ({
+            value: u.userId || u.id,
+            label: u.realname,
+          }));
+          break;
+        default:
+          break;
+      }
+    });
+  };
+  const handleChangeDept = (val, prop) => {
+    const cascader = cascaderRef.value?.[prop];
+    const deptInfo = cascader?.getCheckedNodes();
+    Object.assign(formValue, {
+      [prop]: deptInfo[0].label,
+    });
+    console.log('@val', val);
+    formRef.value.validateField(prop);
+    nextTick(() => {
+      handleQueryAvailableUserList(deptInfo[0].label, prop);
+    });
   };
 
-  // 获取部门数据
   const getDeptData = () => {
     getAllDepartments().then((res) => {
       firstLevelDepts.value = formatDeptTree(res);
-      console.log('@res:', firstLevelDepts.value);
     });
   };
 
-  const getUserData = () => {
-    getUserList({ pageNumber: 1, pageSize: 200, queryParam: {} }).then((res: any) => {
-      userOptions.value = (res.records || []).map((u: any) => ({
-        id: u.userId || u.id,
-        name: u.realName || u.username,
-      }));
-    });
-  };
+  // const getUserData = () => {
+  //   getUserList({ pageNumber: 1, pageSize: 200, queryParam: {} }).then((res: any) => {
+  //     userOptions.value = (res.records || []).map((u: any) => ({
+  //       id: u.userId || u.id,
+  //       name: u.realName || u.username,
+  //     }));
+  //   });
+  // };
 
-  const syncUserName = (id: number, nameField: string) => {
-    const user = userOptions.value.find((u) => u.id === id);
-    if (user) formValue[nameField] = user.name;
-  };
-
-  const handleSpecificPersonChange = (id: number) => {
-    const user = userOptions.value.find((u) => u.id === id);
+  const syncUserName = (id: number, options: any[], nameField: string) => {
+    const user = options.find((u) => u.value === id);
     if (user) {
-      formValue.safetySpecificPersonName = user.name;
-      formValue.safetyPersonContact = user.mobile;
+      formValue[nameField] = user.label;
+      console.log(formValue);
     }
   };
 
+  // const handleSpecificPersonChange = (id: number, options: any[], nameField) => {
+  //   const user = userOptions.value.find((u) => u.id === id);
+  //   if (user) {
+  //     formValue.safetySpecificPersonName = user.name;
+  //     formValue.safetyPersonContact = user.mobile;
+  //   }
+  // };
+
   onMounted(() => {
     getDeptData();
-    getUserData();
+    // getUserData();
   });
 
   const handleSubmit = () => {

src/views/production-safety/implement-safety-duty/non-public-area-responsibilities/edit.vue

@@ -22,20 +22,17 @@
         </el-form-item>
 
         <el-form-item label="安全责任所/中心" prop="safetyResponsibleCenter">
-          <el-select
-            v-model="formValue.safetyResponsibleCenter"
-            placeholder="请选择"
-            size="large"
+          <el-cascader
             style="width: 50%"
+            size="large"
+            :ref="(el) => (cascaderRef['safetyResponsibleCenter'] = el)"
+            :options="firstLevelDepts"
+            :props="cascaderProp"
+            :show-all-levels="false"
+            placeholder="请选择安全责任部门"
             filterable
-          >
-            <el-option
-              v-for="item in firstLevelDepts"
-              :key="item.hrIdtOrgId"
-              :label="item.deptName"
-              :value="item.deptName"
-            />
-          </el-select>
+            @change="handleChangeDept('safetyResponsibleCenter')"
+          />
         </el-form-item>
 
         <el-form-item label="安全责任所/中心负责人" prop="safetyCenterManager">
@@ -118,18 +115,18 @@
   import { getAllDepartments } from '@/api/auth/dept';
   import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';
   import {
-    queryUserPageByUsername,
-    areaCheckListSavaArea,
     areaCheckListQueryDetail,
+    queryAvailableUserList,
     areaCheckListUpdateArea,
   } from '@/api/production-safety/responsibility-implementation';
-  import { getUserList } from '@/api/system/user-operate';
 
   const router = useRouter();
   const route = useRoute();
   const formRef = ref<any>(null);
   const submiting = ref(false);
 
+  const cascaderRef = ref<any>({});
+
   const userOptions = ref<any[]>([]);
   const firstLevelDepts = ref<any[]>([]);
 
@@ -175,15 +172,6 @@
     });
   };
 
-  const getUserData = () => {
-    getUserList({ pageNumber: 1, pageSize: 200, queryParam: {} }).then((res: any) => {
-      userOptions.value = (res.records || []).map((u: any) => ({
-        id: u.userId || u.id,
-        name: u.realName || u.username,
-      }));
-    });
-  };
-
   const syncUserName = (id: number, nameField: string) => {
     const user = userOptions.value.find((u) => u.id === id);
     if (user) formValue[nameField] = user.name;
@@ -199,7 +187,6 @@
 
   onMounted(() => {
     getDeptData();
-    getUserData();
     handlAreaCheckListQueryDetail();
   });
 
@@ -207,7 +194,7 @@
     formRef.value?.validate((valid: boolean) => {
       if (valid) {
         submiting.value = true;
-        areaCheckListSavaArea({
+        areaCheckListUpdateArea({
           ...formValue,
           type: 2,
         })

src/views/production-safety/implement-safety-duty/responsibility-notice-manage-admin/components/NotifySend.vue

@@ -0,0 +1,262 @@
+<template>
+  <el-dialog
+    :model-value="props.modelValue"
+    @update:model-value="$emit('update:modelValue', $event)"
+    title="安全责任通知发送"
+    width="800"
+    @close="clearData"
+  >
+    <el-tabs v-model="activeTab">
+      <el-tab-pane :disabled="activeTab !== 1" label="公共区域" :name="1" />
+      <el-tab-pane :disabled="activeTab !== 2" label="非公共区域" :name="2" />
+    </el-tabs>
+    <div class="main">
+      <el-form ref="formRef" :rules="rules" :model="formValue">
+        <el-form-item label="计划开始日期" prop="planStartTime">
+          <el-date-picker v-model="formValue.planStartTime" placeholder="请选择日期" style="width: 200px" />
+        </el-form-item>
+
+        <el-form-item label="计划结束日期" prop="planEndTime">
+          <el-date-picker v-model="formValue.planEndTime" placeholder="请选择日期" style="width: 200px" />
+        </el-form-item>
+        <el-form-item label="通知区域" prop="safetyAreaData">
+          <el-button @click="handleAddArea" type="primary">添加</el-button>
+        </el-form-item>
+        <el-table :data="currentTableData" v-if="formValue.safetyAreaData.length" style="width: 100%; margin: 20px 0 0">
+          <!-- <el-table-column type="index" label="序号" width="80" /> -->
+          <el-table-column v-if="formValue.type === 2" label="楼号" prop="buildingCode" width="180" />
+          <el-table-column label="楼层" prop="buildingArea" width="100" />
+
+          <el-table-column label="楼宇/区域" prop="buildingCode" width="180" />
+          <el-table-column label="房间/区域" prop="floorRoomNo" width="180" />
+          <el-table-column label="功能名称" prop="nameFunction" width="120" />
+          <el-table-column label="安全责任所/中心" prop="safetyResponsibleCenter" width="200" />
+          <el-table-column label="安全责任所/中心负责人" prop="safetyCenterManagerName" width="200" />
+          <el-table-column label="安全责任部门" prop="safetyResponsibleDepartment" width="180" />
+          <el-table-column label="安全责任部门负责人" prop="safetyDepartmentManagerName" width="180" />
+          <el-table-column label="安全具体责任人" prop="safetySpecificPersonName" width="180" />
+          <el-table-column label="安全具体责任人联系方式" prop="safetyPersonContact;" width="230" />
+          <el-table-column label="状态" prop="statusName" width="100" />
+          <el-table-column label="操作" width="100" fixed="right">
+            <template #default="scope">
+              <el-button type="text" size="small" @click="handleDeleteArea(scope)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="pagination-container" v-if="formValue.safetyAreaData.length">
+          <el-pagination
+            background
+            :current-page="queryParams.pageNumber"
+            :page-size="queryParams.pageSize"
+            :total="formValue.safetyAreaData.length"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </div>
+      </el-form>
+    </div>
+    <SelectNotifyArea
+      v-if="selectNotifyAreaOpen"
+      v-model.visible="selectNotifyAreaOpen"
+      :type="activeTab"
+      :append-to-body="true"
+      @submit="handleSelectionTableData"
+    />
+
+    <template #footer>
+      <div>
+        <el-button type="primary" @click="submitForm" :loading="submitLoading"> 确定 </el-button>
+        <el-button @click="handleCancel">取消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+  import { ref, reactive, onMounted, watch } from 'vue';
+  import { ElButton } from 'element-plus';
+  import SelectNotifyArea from './SelectNotifyArea.vue';
+  import { uniqBy, omit } from 'lodash-es';
+  import dayjs from 'dayjs';
+  import { safetyNoticeAdminIssuedNotice } from '@/api/production-safety/responsibility-implementation';
+
+  const props = defineProps<{
+    type: number;
+    modelValue: boolean;
+  }>();
+
+  const formRef = ref<any>(null);
+  const emit = defineEmits(['close', 'submit', 'update:modelValue']);
+  const submitLoading = ref(false);
+  const activeTab = ref(props.type);
+  const selectionList = ref([]);
+  const selectNotifyAreaOpen = ref(false);
+  const currentTableData = ref([]);
+
+  const queryParams = reactive<any>({
+    pageNumber: 1,
+    pageSize: 3,
+    // queryParam: {
+    //   type: activeTab.value,
+    //   planStartTime: null,
+    //   planEndTime: null,
+    // },
+  });
+  const formValue = reactive({
+    type: props.type,
+    safetyAreaData: [], // 区域分组,多个用，分隔
+    planStartTime: null, // 计划开始日期
+    planEndTime: null, // 计划结束日期
+  });
+
+  const tableData = reactive<any>({
+    data: [],
+    total: 0,
+  });
+
+  const rules = reactive({
+    planStartTime: [
+      {
+        required: true,
+        message: '请选择计划开始时间',
+        trigger: 'change',
+      },
+      {
+        validator: (rule, value, callback) => {
+          if (value && formValue.planEndTime) {
+            if (dayjs(value).isAfter(formValue.planEndTime)) {
+              callback(new Error('开始日期不能大于结束日期'));
+              return;
+            }
+          }
+          callback();
+        },
+      },
+    ],
+    planEndTime: [
+      {
+        required: true,
+        message: '请选择计划结束时间',
+        trigger: 'change',
+      },
+      {
+        validator: (rule, value, callback) => {
+          if (value && formValue.planStartTime) {
+            if (dayjs(value).isBefore(formValue.planStartTime)) {
+              callback(new Error('结束日期不能小于开始日期'));
+              return;
+            }
+          }
+          callback();
+        },
+      },
+    ],
+    safetyAreaData: [
+      {
+        required: true,
+        message: '请选择区域',
+        trigger: 'change',
+      },
+      {
+        validator: (rule, value, callback) => {
+          if (value.length === 0) {
+            callback(new Error('区域不能为空'));
+          }
+          callback();
+        },
+      },
+    ],
+  });
+
+  function dialogShow() {}
+  function dialogHide() {
+    emit('close');
+  }
+  function clearData() {}
+
+  function submitForm() {
+    formRef.value.validate((valid) => {
+      if (!valid) {
+        return;
+      }
+      emit('submit', formValue, submitLoading);
+      // emit('update:modelValue', false);
+    });
+  }
+
+  const handleDeleteArea = (scope) => {
+    formValue.safetyAreaData = formValue.safetyAreaData.filter((item: any) => item.id !== scope.row.id);
+    const totalPages = Math.ceil(formValue.safetyAreaData.length / queryParams.pageSize);
+    if (queryParams.pageNumber > totalPages) {
+      queryParams.pageNumber = totalPages || 1;
+    }
+    displayData(queryParams.pageNumber);
+  };
+  const displayData = (page = 1) => {
+    const start = (page - 1) * queryParams.pageSize;
+    const end = start + queryParams.pageSize;
+    currentTableData.value = formValue.safetyAreaData.slice(start, end);
+  };
+  const handleCurrentChange = (page: number) => {
+    queryParams.pageNumber = page;
+    displayData(page);
+  };
+
+  const handleSizeChange = (size: number) => {
+    queryParams.pageSize = size;
+  };
+
+  const handleSelectionTableData = (data) => {
+    tableData.total = data.length;
+    tableData.data = [...tableData.data, ...data];
+    Object.assign(formValue, {
+      safetyAreaData: uniqBy(tableData.data, 'id'),
+    });
+    formRef.value?.validateField('safetyAreaData');
+    displayData();
+  };
+  const handleAddArea = () => {
+    selectNotifyAreaOpen.value = true;
+  };
+
+  const handleCloseAreaDialog = () => {
+    selectNotifyAreaOpen.value = false;
+  };
+
+  const handleCancel = () => {
+    selectionList.value = [];
+    emit('update:modelValue', false);
+  };
+
+  watch(
+    () => props.type,
+    (a, b) => {
+      activeTab.value = a;
+    },
+  );
+
+  defineExpose({
+    submitLoading,
+    dialogShow,
+    dialogHide,
+  });
+</script>
+
+<style scoped lang="scss">
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/page-main-layout.scss' as *;
+  @use '@/styles/basic-table-action.scss' as *;
+  .main {
+    display: flex;
+    flex-direction: column;
+    max-height: 400px;
+  }
+  .table-content {
+    flex: 1;
+    overflow: hidden;
+    overflow-y: auto;
+  }
+  .pagination-container {
+    margin-top: 20px;
+  }
+</style>

src/views/production-safety/implement-safety-duty/responsibility-notice-manage-admin/components/SelectNotifyArea.vue

@@ -1,6 +1,7 @@
 <template>
   <el-dialog
     :model-value="props.modelValue"
+    :append-to-body="appendToBody"
     @update:model-value="$emit('update:modelValue', $event)"
     title="安全责任通知区域选择"
     width="700"
@@ -101,6 +102,7 @@
   const props = defineProps<{
     type: number;
     modelValue: boolean;
+    appendToBody?: boolean;
   }>();
   const emit = defineEmits(['close', 'submit', 'update:modelValue']);
   const submitLoading = ref(false);

src/views/production-safety/implement-safety-duty/responsibility-notice-manage-admin/list.vue

@@ -114,7 +114,7 @@
                 "
                 >通知对象</el-button
               >
-              <el-button link type="primary">发送</el-button>
+              <el-button link type="primary" @click="handleSend(scope)">发送</el-button>
               <el-button
                 type="primary"
                 link
@@ -148,6 +148,12 @@
       </div>
     </main>
   </div>
+  <NotifySend
+    v-if="notifySendOpen"
+    :type="currentRow.type"
+    v-model.visible="notifySendOpen"
+    @submit="handleNotifySend"
+  />
 </template>
 <script lang="ts" setup>
   import { onMounted, ref, reactive, watch } from 'vue';
@@ -157,7 +163,7 @@
   import {
     safetyNoticeAdminQueryPage,
     safetyNoticeAdminDelete,
-    safetyNoticeAdminScrap,
+    safetyNoticeAdminIssuedNotice,
   } from '@/api/production-safety/responsibility-implementation';
   import { omit } from 'lodash-es';
   import { queryUserGroupPage } from '@/api/system/person-group';
@@ -165,9 +171,12 @@
   import { unformatAttachment } from '@/components/UploadFiles/utils';
   import { downloadFile } from '@/views/disaster/utils';
 
+  import NotifySend from './components/NotifySend.vue';
+
   const router = useRouter();
   const activeTab = ref<any>('');
   const groupList = ref<any[]>([]);
+  const currentRow = ref<any>(null);
   const queryParams = reactive<any>({
     pageNumber: 1,
     pageSize: 10,
@@ -178,6 +187,7 @@
       type: '',
     },
   });
+  const notifySendOpen = ref(false);
 
   const tableData = reactive({
     data: [],
@@ -197,11 +207,28 @@
     },
   );
 
-  const handleScrap = (scope) => {
-    safetyNoticeAdminScrap(scope.row.id).then(() => {
-      ElMessage.success('作废成功');
-      queryTableList();
-    });
+  const handleSend = (scope) => {
+    notifySendOpen.value = true;
+    currentRow.value = scope.row;
+  };
+
+  const handleNotifySend = (formValue, submitLoading) => {
+    submitLoading.value = true;
+    safetyNoticeAdminIssuedNotice({
+      id: currentRow.value.id,
+      safetyAreaId: formValue.safetyAreaData.map((item: any) => item.id).join(','),
+      planStartTime: dayjs(formValue.planStartTime).format('YYYY-MM-DD'),
+      planEndTime: dayjs(formValue.planEndTime).format('YYYY-MM-DD'),
+    })
+      .then(() => {
+        notifySendOpen.value = false;
+        currentRow.value = null;
+        ElMessage.success('发送成功');
+        queryTableList();
+      })
+      .finally(() => {
+        submitLoading.value = false;
+      });
   };
 
   const handleQueryUserGroupPage = () => {

src/views/production-safety/implement-safety-duty/responsibility-notice-manage-admin/notice-view.vue

@@ -21,7 +21,7 @@
     <main class="safety-platform-container__main">
       <div class="search-form">
         <el-form :inline="true">
-          <el-form-item label="状态" v-if="activeTab">
+          <!-- <el-form-item label="状态" v-if="activeTab">
             <el-select v-model="queryParams.queryParam.status" clearable placeholder="状态" style="width: 170px">
               <el-option :value="1" label="未下发" />
               <el-option :value="2" label="待签署" />
@@ -30,7 +30,7 @@
               <el-option :value="5" label="已完成" />
               <el-option :value="6" label="已作废" />
             </el-select>
-          </el-form-item>
+          </el-form-item> -->
           <el-form-item label="区域类型">
             <el-select v-model="queryParams.queryParam.type" clearable placeholder="选择区域类型" style="width: 170px">
               <el-option :value="1" label="公共区域" />

src/views/production-safety/implement-safety-duty/risk-manage/add.vue

@@ -0,0 +1,432 @@
+<template>
+  <div class="safety-platform-container">
+    <header class="safety-platform-container__header">
+      <div class="breadcrumb-title">
+        <BreadcrumbBack />
+        新增风险清单
+      </div>
+    </header>
+    <main class="safety-platform-container__main">
+      <el-form ref="formRef" :inline="true" label-width="auto" :model="formValue" :rules="rules">
+        <el-form-item label="楼号/区域" prop="buildingArea">
+          <el-input v-model="formValue.buildingArea" size="large" placeholder="例如：A栋、东区" style="width: 330px" />
+        </el-form-item>
+        <el-form-item label="楼宇名称" prop="buildingName">
+          <el-input
+            v-model="formValue.buildingName"
+            size="large"
+            placeholder="例如：科研楼、实验中心"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="安全责任人" prop="safetyResponsibleBuilding">
+          <el-select
+            v-model="formValue.safetyResponsibleBuilding"
+            placeholder="请选择"
+            size="large"
+            style="width: 330px"
+            filterable
+          >
+            <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="楼层/位置" prop="floorLocation">
+          <el-input
+            v-model="formValue.floorLocation"
+            size="large"
+            placeholder="例如：3层、地下一层、走廊东侧"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="安全责任人" prop="safetyResponsibleFloor">
+          <!-- <el-input
+            v-model="formValue.safetyResponsibleFloor"
+            size="large"
+            placeholder="请输入楼层/位置安全责任人姓名"
+            style="width: 330px"
+          /> -->
+          <el-select
+            v-model="formValue.safetyResponsibleFloor"
+            placeholder="请选择"
+            size="large"
+            style="width: 330px"
+            filterable
+          >
+            <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="房间号（名称）" prop="roomName">
+          <el-input
+            v-model="formValue.roomName"
+            size="large"
+            placeholder="例如：301、高压配电室"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="责任部门" prop="responsibleDepartment">
+          <el-cascader
+            style="width: 330px"
+            v-model="formValue.responsibleDepartmentId"
+            size="large"
+            ref="cascaderRef"
+            :options="firstLevelDepts"
+            :props="cascaderProp"
+            :show-all-levels="false"
+            placeholder="请选择责任部门"
+            filterable
+            @change="handleChangeDept('responsibleDepartment')"
+          />
+        </el-form-item>
+        <el-form-item label="安全责任人" prop="roomSafetyResponsible">
+          <!-- <el-input
+            v-model="formValue.roomSafetyResponsible"
+            size="large"
+            placeholder="请输入房间安全责任人姓名"
+            style="width: 330px"
+          /> -->
+          <el-select
+            v-model="formValue.roomSafetyResponsible"
+            placeholder="请选择"
+            size="large"
+            style="width: 330px"
+            filterable
+          >
+            <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="是否存在风险点" prop="hasRiskPoint">
+          <el-select
+            v-model="formValue.hasRiskPoint"
+            size="large"
+            placeholder="请选择是否存有风险点"
+            style="width: 330px"
+          >
+            <el-option label="是" :value="1" />
+            <el-option label="否" :value="0" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="风险点类别" prop="riskCategory">
+          <el-select v-model="formValue.riskCategory" size="large" placeholder="请选择风险点类别" style="width: 330px">
+            <el-option :value="1" label="III级危险点" />
+            <el-option :value="2" label="II级危险点" />
+            <el-option :value="3" label="I级危险点" />
+            <el-option :value="4" label="UPS" />
+            <el-option :value="5" label="电力设施（强电）" />
+            <el-option :value="6" label="高低温气体液体、高压气体" />
+            <el-option :value="7" label="试验设施设备" />
+            <el-option :value="8" label="特种设备" />
+            <el-option :value="9" label="危化品、易燃易爆固液气体" />
+            <el-option :value="10" label="有限空间" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="风险点名称" prop="riskPointName">
+          <el-input
+            v-model="formValue.riskPointName"
+            size="large"
+            placeholder="例如：液氮储罐、高压开关柜"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="风险点编号" prop="riskPointNumber">
+          <el-input
+            v-model="formValue.riskPointNumber"
+            size="large"
+            placeholder="请输入唯一风险点编号"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="风险点规格" prop="riskPointSpec">
+          <el-input
+            v-model="formValue.riskPointSpec"
+            size="large"
+            placeholder="例如：容量500L、电压10kV"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="培训要求" prop="trainingRequirement">
+          <el-input
+            v-model="formValue.trainingRequirement"
+            size="large"
+            placeholder="例如：持证上岗、年度复训"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="安全风险" prop="safetyRisk">
+          <el-input
+            v-model="formValue.safetyRisk"
+            size="large"
+            placeholder="描述该风险点可能引发的安全问题"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="可能造成伤害" prop="possibleHarm">
+          <el-input
+            v-model="formValue.possibleHarm"
+            size="large"
+            placeholder="例如：爆炸、中毒、触电、窒息等"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="主要管控措施" prop="mainControlMeasures">
+          <el-input
+            v-model="formValue.mainControlMeasures"
+            size="large"
+            placeholder="例如：定期巡检、设置警示标识、配备防护装备"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="目前是否存在安全隐患" prop="currentHazard">
+          <el-input
+            v-model="formValue.currentHazard"
+            size="large"
+            placeholder="例如：设备老化、线路裸露、通风不良"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="隐患内容" prop="hazardContent">
+          <el-input
+            v-model="formValue.hazardContent"
+            size="large"
+            placeholder="详细描述当前存在的隐患情况"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="应急预案名称" prop="emergencyPlanName">
+          <el-input
+            v-model="formValue.emergencyPlanName"
+            size="large"
+            placeholder="例如：《危化品泄漏应急处置预案》"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="应急预案编号" prop="emergencyPlanNumber">
+          <el-input
+            v-model="formValue.emergencyPlanNumber"
+            size="large"
+            placeholder="例如：YJYA-2024-001"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="演练计划及实施情况" prop="rectificationPlan">
+          <el-input
+            v-model="formValue.rectificationPlan"
+            size="large"
+            placeholder="例如：每季度演练一次，最近一次于2025年12月完成"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="风险等级" prop="riskLevel">
+          <el-select v-model="formValue.riskLevel" size="large" placeholder="请选择风险等级" style="width: 330px">
+            <el-option :value="1" label="高" />
+            <el-option :value="2" label="中" />
+            <el-option :value="3" label="低" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <div style="width: 330px"></div>
+        </el-form-item>
+        <el-form-item label="备注" prop="remarks" style="width: 87.2%">
+          <el-input
+            type="textarea"
+            v-model="formValue.remarks"
+            size="large"
+            :rows="7"
+            placeholder="可填写其他补充说明"
+          />
+        </el-form-item>
+      </el-form>
+    </main>
+    <footer class="safety-platform-container__footer">
+      <el-button @click="$router.push({ name: 'areaResponsibilities:public' })">返回</el-button>
+      <el-button type="primary" :loading="submiting" @click="handleSubmit">提交</el-button>
+    </footer>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive, onMounted, nextTick } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { ElMessage } from 'element-plus';
+  import { getAllDepartments } from '@/api/auth/dept';
+  import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';
+
+  import {
+    queryAvailableUserList,
+    safetyRiskListSaveRiskList,
+  } from '@/api/production-safety/responsibility-implementation';
+
+  const router = useRouter();
+  const formRef = ref<any>(null);
+  const submiting = ref(false);
+
+  const userOptions = ref<any[]>([]);
+  const firstLevelDepts = ref<any[]>([]);
+  const cascaderProp = {
+    expandTrigger: 'click',
+    checkStrictly: true,
+    value: 'id',
+    label: 'deptName',
+  };
+  const cascaderRef = ref<any>();
+
+  const formValue = reactive({
+    buildingArea: '',
+    buildingName: '',
+    safetyResponsibleBuilding: '',
+    floorLocation: '',
+    safetyResponsibleFloor: '',
+    roomName: '',
+    responsibleDepartment: '',
+    roomSafetyResponsible: '',
+    hasRiskPoint: '',
+    riskCategory: '',
+    riskPointName: '',
+    riskPointNumber: '',
+    riskPointSpec: '',
+    trainingRequirement: '',
+    safetyRisk: '',
+    possibleHarm: '',
+    mainControlMeasures: '',
+    currentHazard: '',
+    hazardContent: '',
+    emergencyPlanName: '',
+    emergencyPlanNumber: '',
+    rectificationPlan: '',
+    riskLevel: '',
+    remarks: '',
+    responsibleDepartmentId: [],
+  });
+
+  const rules = reactive({
+    buildingArea: [{ required: true, message: '请输入楼号', trigger: 'blur' }],
+    buildingName: [{ required: true, message: '请输入楼宇/区域', trigger: 'blur' }],
+    safetyResponsibleBuilding: [{ required: true, message: '请输入楼层/房号', trigger: 'blur' }],
+    floorLocation: [{ required: true, message: '请输入名称/功能', trigger: 'blur' }],
+    safetyResponsibleFloor: [{ required: true, message: '请选择安全责任所/中心', trigger: 'change' }],
+    roomName: [{ required: true, message: '请选择安全责任所/中心负责人', trigger: 'change' }],
+    responsibleDepartment: [{ required: true, message: '请选择安全责任部门', trigger: 'change' }],
+    roomSafetyResponsible: [{ required: true, message: '请输入房间安全责任人', trigger: 'blur' }],
+    hasRiskPoint: [{ required: true, message: '请选择是否有风险点', trigger: 'change' }],
+    riskCategory: [{ required: true, message: '请选择风险类别', trigger: 'change' }],
+    riskPointName: [{ required: true, message: '请输入风险点名称', trigger: 'blur' }],
+    riskPointNumber: [{ required: true, message: '请输入风险点编号', trigger: 'blur' }],
+    riskPointSpec: [{ required: true, message: '请输入风险点规格/参数', trigger: 'blur' }],
+    trainingRequirement: [{ required: true, message: '请输入培训要求', trigger: 'blur' }],
+    safetyRisk: [{ required: true, message: '请输入安全风险描述', trigger: 'blur' }],
+    possibleHarm: [{ required: true, message: '请输入可能造成的伤害', trigger: 'blur' }],
+    mainControlMeasures: [{ required: true, message: '请输入主要控制措施', trigger: 'blur' }],
+    currentHazard: [{ required: true, message: '请选择当前隐患状态', trigger: 'change' }],
+    hazardContent: [{ required: true, message: '请输入隐患内容', trigger: 'blur' }],
+    emergencyPlanName: [{ required: true, message: '请输入应急预案名称', trigger: 'blur' }],
+    emergencyPlanNumber: [{ required: true, message: '请输入应急预案编号', trigger: 'blur' }],
+    rectificationPlan: [{ required: true, message: '请输入整改方案', trigger: 'blur' }],
+    riskLevel: [{ required: true, message: '请选择风险等级', trigger: 'change' }],
+    remarks: [],
+  });
+
+  const handleChangeDept = (prop) => {
+    const cascader = cascaderRef.value;
+    const deptInfo = cascader?.getCheckedNodes();
+    formValue[prop] = deptInfo[0].label;
+    formRef.value.validateField(prop);
+    nextTick(() => {
+      handleQueryAvailableUserList(deptInfo[0].label, prop);
+    });
+  };
+
+  const getDeptData = () => {
+    getAllDepartments().then((res) => {
+      firstLevelDepts.value = formatDeptTree(res);
+    });
+  };
+
+  const handleQueryAvailableUserList = (deptName, realname = '') => {
+    queryAvailableUserList({
+      pageNumber: 1,
+      pageSize: 200,
+      queryParam: {
+        deptName,
+        realname,
+      },
+    }).then((res: any) => {
+      userOptions.value = (res.records || []).map((u: any) => ({
+        value: u.userId || u.id,
+        label: u.realname,
+      }));
+    });
+  };
+
+  // const getUserData = () => {
+  //   getUserList({ pageNumber: 1, pageSize: 200, queryParam: {} }).then((res: any) => {
+  //     userOptions.value = (res.records || []).map((u: any) => ({
+  //       id: u.userId || u.id,
+  //       name: u.realName || u.username,
+  //     }));
+  //   });
+  // };
+
+  onMounted(() => {
+    getDeptData();
+    handleQueryAvailableUserList('');
+    // getUserData();
+  });
+
+  const handleSubmit = () => {
+    formRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        submiting.value = true;
+        safetyRiskListSaveRiskList({
+          ...formValue,
+          responsibleDepartmentId: formValue.responsibleDepartmentId.join(','),
+        })
+          .then(() => {
+            ElMessage.success('创建成功!');
+            router.push({ name: 'riskManage' });
+          })
+          .finally(() => {
+            submiting.value = false;
+          });
+      }
+    });
+  };
+</script>
+<style lang="scss" scoped>
+  @use '@/styles/page-main-layout.scss' as *;
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/basic-table-action.scss' as *;
+  .editor-container {
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    margin-right: 20px;
+    overflow: hidden;
+
+    // :deep(.w-e-text-container) {
+    //   min-height: 400px;
+    //   overflow-y: auto;
+    // }
+  }
+  // :deep(.breadcrumb .title) {
+  //   margin-left: 0;
+  // }
+
+  // .main {
+  //   display: flex;
+  //   flex-direction: column;
+  //   padding: 20px;
+  //   flex: 1;
+  //   overflow: hidden;
+  //   background-color: #fff;
+  // }
+  // .button-content {
+  //   margin-bottom: 20px;
+  // }
+
+  // .page-content {
+  //   display: flex;
+  //   justify-content: flex-end;
+  // }
+  // // :deep(.el-form) {
+  // //   flex: 1;
+  // //   overflow: hidden;
+  // //   overflow-y: auto;
+  // // }
+</style>

src/views/production-safety/implement-safety-duty/risk-manage/change.vue

@@ -0,0 +1,533 @@
+<template>
+  <div class="safety-platform-container">
+    <header class="safety-platform-container__header">
+      <div class="breadcrumb-title">
+        <BreadcrumbBack />
+        变更风险清单
+      </div>
+    </header>
+    <main class="safety-platform-container__main">
+      <el-form ref="formRef" :inline="true" label-width="auto" :model="formValue" :rules="rules">
+        <el-form-item label="楼号/区域" prop="buildingArea">
+          <el-input
+            disabled
+            v-model="formValue.buildingArea"
+            size="large"
+            placeholder="例如：A栋、东区"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="楼宇名称" prop="buildingName">
+          <el-input
+            v-model="formValue.buildingName"
+            size="large"
+            disabled
+            placeholder="例如：科研楼、实验中心"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="安全责任人" prop="safetyResponsibleBuilding">
+          <el-select
+            disabled
+            v-model="formValue.safetyResponsibleBuilding"
+            placeholder="请选择"
+            size="large"
+            style="width: 330px"
+            filterable
+          >
+            <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="楼层/位置" prop="floorLocation">
+          <el-input
+            disabled
+            v-model="formValue.floorLocation"
+            size="large"
+            placeholder="例如：3层、地下一层、走廊东侧"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="安全责任人" prop="safetyResponsibleFloor">
+          <el-select
+            disabled
+            v-model="formValue.safetyResponsibleFloor"
+            placeholder="请选择"
+            size="large"
+            style="width: 330px"
+            filterable
+          >
+            <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="房间号（名称）" prop="roomName">
+          <el-input
+            disabled
+            v-model="formValue.roomName"
+            size="large"
+            placeholder="例如：301、高压配电室"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="责任部门" prop="responsibleDepartment">
+          <el-cascader
+            disabled
+            style="width: 330px"
+            v-model="formValue.responsibleDepartmentId"
+            size="large"
+            ref="cascaderRef"
+            :options="firstLevelDepts"
+            :props="cascaderProp"
+            :show-all-levels="false"
+            placeholder="请选择责任部门"
+            filterable
+            @change="handleChangeDept('responsibleDepartment')"
+          />
+        </el-form-item>
+        <el-form-item label="安全责任人" prop="roomSafetyResponsible">
+          <el-select
+            disabled
+            v-model="formValue.roomSafetyResponsible"
+            placeholder="请选择"
+            size="large"
+            style="width: 330px"
+            filterable
+          >
+            <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="是否存在风险点" prop="hasRiskPoint">
+          <el-select
+            disabled
+            v-model="formValue.hasRiskPoint"
+            size="large"
+            placeholder="请选择是否存有风险点"
+            style="width: 330px"
+          >
+            <el-option label="是" :value="1" />
+            <el-option label="否" :value="0" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="风险点类别" prop="riskCategory">
+          <el-select
+            disabled
+            v-model="formValue.riskCategory"
+            size="large"
+            placeholder="请选择风险点类别"
+            style="width: 330px"
+          >
+            <el-option :value="1" label="III级危险点" />
+            <el-option :value="2" label="II级危险点" />
+            <el-option :value="3" label="I级危险点" />
+            <el-option :value="4" label="UPS" />
+            <el-option :value="5" label="电力设施（强电）" />
+            <el-option :value="6" label="高低温气体液体、高压气体" />
+            <el-option :value="7" label="试验设施设备" />
+            <el-option :value="8" label="特种设备" />
+            <el-option :value="9" label="危化品、易燃易爆固液气体" />
+            <el-option :value="10" label="有限空间" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="风险点名称" prop="riskPointName">
+          <el-input
+            disabled
+            v-model="formValue.riskPointName"
+            size="large"
+            placeholder="例如：液氮储罐、高压开关柜"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="风险点编号" prop="riskPointNumber">
+          <el-input
+            disabled
+            v-model="formValue.riskPointNumber"
+            size="large"
+            placeholder="请输入唯一风险点编号"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="风险点规格" prop="riskPointSpec">
+          <el-input
+            disabled
+            v-model="formValue.riskPointSpec"
+            size="large"
+            placeholder="例如：容量500L、电压10kV"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="培训要求" prop="trainingRequirement">
+          <el-input
+            disabled
+            v-model="formValue.trainingRequirement"
+            size="large"
+            placeholder="例如：持证上岗、年度复训"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="安全风险" prop="safetyRisk">
+          <el-input
+            disabled
+            v-model="formValue.safetyRisk"
+            size="large"
+            placeholder="描述该风险点可能引发的安全问题"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="可能造成伤害" prop="possibleHarm">
+          <el-input
+            disabled
+            v-model="formValue.possibleHarm"
+            size="large"
+            placeholder="例如：爆炸、中毒、触电、窒息等"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="主要管控措施" prop="mainControlMeasures">
+          <el-input
+            disabled
+            v-model="formValue.mainControlMeasures"
+            size="large"
+            placeholder="例如：定期巡检、设置警示标识、配备防护装备"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="目前是否存在安全隐患" prop="currentHazard">
+          <el-input
+            disabled
+            v-model="formValue.currentHazard"
+            size="large"
+            placeholder="例如：设备老化、线路裸露、通风不良"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="隐患内容" prop="hazardContent">
+          <el-input
+            disabled
+            v-model="formValue.hazardContent"
+            size="large"
+            placeholder="详细描述当前存在的隐患情况"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="应急预案名称" prop="emergencyPlanName">
+          <el-input
+            disabled
+            v-model="formValue.emergencyPlanName"
+            size="large"
+            placeholder="例如：《危化品泄漏应急处置预案》"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="应急预案编号" prop="emergencyPlanNumber">
+          <el-input
+            disabled
+            v-model="formValue.emergencyPlanNumber"
+            size="large"
+            placeholder="例如：YJYA-2024-001"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="演练计划及实施情况" prop="rectificationPlan">
+          <el-input
+            disabled
+            v-model="formValue.rectificationPlan"
+            size="large"
+            placeholder="例如：每季度演练一次，最近一次于2025年12月完成"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="风险等级" prop="riskLevel">
+          <el-select
+            disabled
+            v-model="formValue.riskLevel"
+            size="large"
+            placeholder="请选择风险等级"
+            style="width: 330px"
+          >
+            <el-option :value="1" label="高" />
+            <el-option :value="2" label="中" />
+            <el-option :value="3" label="低" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <div style="width: 330px"></div>
+        </el-form-item>
+        <el-form-item label="备注" prop="remarks" style="width: 87.2%">
+          <el-input
+            disabled
+            type="textarea"
+            v-model="formValue.remarks"
+            size="large"
+            :rows="7"
+            placeholder="可填写其他补充说明"
+          />
+        </el-form-item>
+        <h4>信息变更</h4>
+        <el-form-item label="部门名称" prop="responsibleDepartmentTodo">
+          <el-cascader
+            style="width: 330px"
+            ref="cascaderTodoRef"
+            size="large"
+            :options="firstLevelDepts"
+            :props="cascaderProp"
+            :show-all-levels="false"
+            placeholder="请选择责任部门"
+            filterable
+            @change="() => handleChangeDept('responsibleDepartmentTodo')"
+          />
+        </el-form-item>
+        <el-form-item label="责任人姓名" prop="roomSafetyResponsibleTodo">
+          <el-select
+            v-model="formValue.roomSafetyResponsibleTodo"
+            placeholder="请选择"
+            size="large"
+            style="width: 330px"
+            filterable
+          >
+            <el-option
+              v-for="item in roomSafetyResponsibleTodoOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <div style="width: 330px"></div>
+        </el-form-item>
+        <el-form-item label="变更原因" prop="changeReason" style="width: 87.2%">
+          <el-input
+            type="textarea"
+            v-model="formValue.changeReason"
+            size="large"
+            :rows="7"
+            placeholder="请填写驳回审批原因"
+          />
+        </el-form-item>
+      </el-form>
+    </main>
+    <footer class="safety-platform-container__footer">
+      <el-button @click="$router.push({ name: 'areaResponsibilities:public' })">返回</el-button>
+      <el-button type="primary" :loading="submiting" @click="handleSubmit">提交</el-button>
+    </footer>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive, onMounted, nextTick } from 'vue';
+  import { useRouter, useRoute } from 'vue-router';
+  import { ElMessage } from 'element-plus';
+  import { getAllDepartments } from '@/api/auth/dept';
+  import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';
+
+  import {
+    queryAvailableUserList,
+    safetyRiskListChange,
+    safetyRiskListQueryDetail,
+  } from '@/api/production-safety/responsibility-implementation';
+
+  const router = useRouter();
+  const route = useRoute();
+  const formRef = ref<any>(null);
+  const submiting = ref(false);
+
+  const userOptions = ref<any[]>([]);
+  const firstLevelDepts = ref<any[]>([]);
+  const cascaderProp = {
+    expandTrigger: 'click',
+    checkStrictly: true,
+    value: 'id',
+    label: 'deptName',
+  };
+  const cascaderRef = ref<any>();
+  const cascaderTodoRef = ref<any>();
+  const roomSafetyResponsibleTodoOptions = ref<any[]>([]);
+  const formValue = reactive({
+    buildingArea: '',
+    buildingName: '',
+    safetyResponsibleBuilding: '',
+    floorLocation: '',
+    safetyResponsibleFloor: '',
+    roomName: '',
+    responsibleDepartment: '',
+    roomSafetyResponsible: '',
+    hasRiskPoint: '',
+    riskCategory: '',
+    riskPointName: '',
+    riskPointNumber: '',
+    riskPointSpec: '',
+    trainingRequirement: '',
+    safetyRisk: '',
+    possibleHarm: '',
+    mainControlMeasures: '',
+    currentHazard: '',
+    hazardContent: '',
+    emergencyPlanName: '',
+    emergencyPlanNumber: '',
+    rectificationPlan: '',
+    riskLevel: '',
+    remarks: '',
+    changeReason: '',
+    responsibleDepartmentTodo: '',
+    roomSafetyResponsibleTodo: '',
+    responsibleDepartmentId: [],
+  });
+
+  const rules = reactive({
+    buildingArea: [{ required: true, message: '请输入楼号', trigger: 'blur' }],
+    buildingName: [{ required: true, message: '请输入楼宇/区域', trigger: 'blur' }],
+    safetyResponsibleBuilding: [{ required: true, message: '请输入楼层/房号', trigger: 'blur' }],
+    floorLocation: [{ required: true, message: '请输入名称/功能', trigger: 'blur' }],
+    safetyResponsibleFloor: [{ required: true, message: '请选择安全责任所/中心', trigger: 'change' }],
+    roomName: [{ required: true, message: '请选择安全责任所/中心负责人', trigger: 'change' }],
+    responsibleDepartment: [{ required: true, message: '请选择安全责任部门', trigger: 'change' }],
+    roomSafetyResponsible: [{ required: true, message: '请输入房间安全责任人', trigger: 'blur' }],
+    hasRiskPoint: [{ required: true, message: '请选择是否有风险点', trigger: 'change' }],
+    riskCategory: [{ required: true, message: '请选择风险类别', trigger: 'change' }],
+    riskPointName: [{ required: true, message: '请输入风险点名称', trigger: 'blur' }],
+    riskPointNumber: [{ required: true, message: '请输入风险点编号', trigger: 'blur' }],
+    riskPointSpec: [{ required: true, message: '请输入风险点规格/参数', trigger: 'blur' }],
+    trainingRequirement: [{ required: true, message: '请输入培训要求', trigger: 'blur' }],
+    safetyRisk: [{ required: true, message: '请输入安全风险描述', trigger: 'blur' }],
+    possibleHarm: [{ required: true, message: '请输入可能造成的伤害', trigger: 'blur' }],
+    mainControlMeasures: [{ required: true, message: '请输入主要控制措施', trigger: 'blur' }],
+    currentHazard: [{ required: true, message: '请选择当前隐患状态', trigger: 'change' }],
+    hazardContent: [{ required: true, message: '请输入隐患内容', trigger: 'blur' }],
+    emergencyPlanName: [{ required: true, message: '请输入应急预案名称', trigger: 'blur' }],
+    emergencyPlanNumber: [{ required: true, message: '请输入应急预案编号', trigger: 'blur' }],
+    rectificationPlan: [{ required: true, message: '请输入整改方案', trigger: 'blur' }],
+    riskLevel: [{ required: true, message: '请选择风险等级', trigger: 'change' }],
+    responsibleDepartmentTodo: [{ required: true, message: '请选择变更后的责任部门', trigger: 'change' }],
+    roomSafetyResponsibleTodo: [{ required: true, message: '请选择变更后的责任人', trigger: 'change' }],
+    changeReason: [{ required: true, message: '请输入变更原因', trigger: 'blur' }],
+    remarks: [],
+  });
+
+  const handleChangeDept = (prop) => {
+    const cascader = cascaderTodoRef.value;
+    const deptInfo = cascader?.getCheckedNodes();
+    formValue[prop] = deptInfo[0].label;
+    formRef.value.validateField(prop);
+    nextTick(() => {
+      handleQueryAvailableUserList(deptInfo[0].label, prop);
+    });
+  };
+
+  const getDeptData = () => {
+    getAllDepartments().then((res) => {
+      firstLevelDepts.value = formatDeptTree(res);
+    });
+  };
+
+  const handleQueryAvailableUserList = (deptName = '', prop = '', realname = '') => {
+    queryAvailableUserList({
+      pageNumber: 1,
+      pageSize: 200,
+      queryParam: {
+        deptName,
+        realname,
+      },
+    }).then((res: any) => {
+      switch (prop) {
+        case 'responsibleDepartmentTodo':
+          formValue.roomSafetyResponsibleTodo = '';
+          roomSafetyResponsibleTodoOptions.value = (res.records || []).map((u: any) => ({
+            value: u.userId || u.id,
+            label: u.realname,
+          }));
+          break;
+
+        default:
+          break;
+      }
+    });
+  };
+
+  const loadDetailData = (id: number) => {
+    safetyRiskListQueryDetail(id).then((res: any) => {
+      Object.keys(formValue).forEach((key) => {
+        if (res[key] !== undefined) {
+          formValue[key] = res[key];
+          formValue['responsibleDepartmentId'] = res['responsibleDepartmentId']
+            ? res['responsibleDepartmentId'].split(',').map((item: string) => Number(item))
+            : [];
+        }
+      });
+    });
+  };
+
+  // const getUserData = () => {
+  //   getUserList({ pageNumber: 1, pageSize: 200, queryParam: {} }).then((res: any) => {
+  //     userOptions.value = (res.records || []).map((u: any) => ({
+  //       id: u.userId || u.id,
+  //       name: u.realName || u.username,
+  //     }));
+  //   });
+  // };
+
+  onMounted(() => {
+    getDeptData();
+    loadDetailData(Number(route.query.id));
+    handleQueryAvailableUserList('');
+  });
+
+  const handleSubmit = () => {
+    formRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        submiting.value = true;
+        safetyRiskListChange({
+          id: route.query.id,
+          responsibleDepartmentTodo: formValue.responsibleDepartmentTodo,
+          roomSafetyResponsibleTodo: formValue.roomSafetyResponsibleTodo,
+          changeReason: formValue.changeReason,
+        })
+          .then(() => {
+            ElMessage.success('变更成功!');
+            router.push({ name: 'riskManage' });
+          })
+          .finally(() => {
+            submiting.value = false;
+          });
+      }
+    });
+  };
+</script>
+<style lang="scss" scoped>
+  @use '@/styles/page-main-layout.scss' as *;
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/basic-table-action.scss' as *;
+  .editor-container {
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    margin-right: 20px;
+    overflow: hidden;
+
+    // :deep(.w-e-text-container) {
+    //   min-height: 400px;
+    //   overflow-y: auto;
+    // }
+  }
+  // :deep(.breadcrumb .title) {
+  //   margin-left: 0;
+  // }
+
+  // .main {
+  //   display: flex;
+  //   flex-direction: column;
+  //   padding: 20px;
+  //   flex: 1;
+  //   overflow: hidden;
+  //   background-color: #fff;
+  // }
+  // .button-content {
+  //   margin-bottom: 20px;
+  // }
+
+  // .page-content {
+  //   display: flex;
+  //   justify-content: flex-end;
+  // }
+  // // :deep(.el-form) {
+  // //   flex: 1;
+  // //   overflow: hidden;
+  // //   overflow-y: auto;
+  // // }
+</style>

src/views/production-safety/implement-safety-duty/risk-manage/edit.vue

@@ -0,0 +1,436 @@
+<template>
+  <div class="safety-platform-container">
+    <header class="safety-platform-container__header">
+      <div class="breadcrumb-title">
+        <BreadcrumbBack />
+        编辑风险清单
+      </div>
+    </header>
+    <main class="safety-platform-container__main">
+      <el-form ref="formRef" :inline="true" label-width="auto" :model="formValue" :rules="rules">
+        <el-form-item label="楼号/区域" prop="buildingArea">
+          <el-input v-model="formValue.buildingArea" size="large" placeholder="例如：A栋、东区" style="width: 330px" />
+        </el-form-item>
+        <el-form-item label="楼宇名称" prop="buildingName">
+          <el-input
+            v-model="formValue.buildingName"
+            size="large"
+            placeholder="例如：科研楼、实验中心"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="安全责任人" prop="safetyResponsibleBuilding">
+          <el-select
+            v-model="formValue.safetyResponsibleBuilding"
+            placeholder="请选择"
+            size="large"
+            style="width: 330px"
+            filterable
+          >
+            <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="楼层/位置" prop="floorLocation">
+          <el-input
+            v-model="formValue.floorLocation"
+            size="large"
+            placeholder="例如：3层、地下一层、走廊东侧"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="安全责任人" prop="safetyResponsibleFloor">
+          <el-select
+            v-model="formValue.safetyResponsibleFloor"
+            placeholder="请选择"
+            size="large"
+            style="width: 330px"
+            filterable
+          >
+            <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="房间号（名称）" prop="roomName">
+          <el-input
+            v-model="formValue.roomName"
+            size="large"
+            placeholder="例如：301、高压配电室"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="责任部门" prop="responsibleDepartment">
+          <el-cascader
+            style="width: 330px"
+            v-model="formValue.responsibleDepartmentId"
+            size="large"
+            ref="cascaderRef"
+            :options="firstLevelDepts"
+            :props="cascaderProp"
+            :show-all-levels="false"
+            placeholder="请选择责任部门"
+            filterable
+            @change="handleChangeDept('responsibleDepartment')"
+          />
+        </el-form-item>
+        <el-form-item label="安全责任人" prop="roomSafetyResponsible">
+          <el-select
+            v-model="formValue.roomSafetyResponsible"
+            placeholder="请选择"
+            size="large"
+            style="width: 330px"
+            filterable
+          >
+            <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="是否存在风险点" prop="hasRiskPoint">
+          <el-select
+            v-model="formValue.hasRiskPoint"
+            size="large"
+            placeholder="请选择是否存有风险点"
+            style="width: 330px"
+          >
+            <el-option label="是" :value="1" />
+            <el-option label="否" :value="0" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="风险点类别" prop="riskCategory">
+          <el-select v-model="formValue.riskCategory" size="large" placeholder="请选择风险点类别" style="width: 330px">
+            <el-option :value="1" label="III级危险点" />
+            <el-option :value="2" label="II级危险点" />
+            <el-option :value="3" label="I级危险点" />
+            <el-option :value="4" label="UPS" />
+            <el-option :value="5" label="电力设施（强电）" />
+            <el-option :value="6" label="高低温气体液体、高压气体" />
+            <el-option :value="7" label="试验设施设备" />
+            <el-option :value="8" label="特种设备" />
+            <el-option :value="9" label="危化品、易燃易爆固液气体" />
+            <el-option :value="10" label="有限空间" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="风险点名称" prop="riskPointName">
+          <el-input
+            v-model="formValue.riskPointName"
+            size="large"
+            placeholder="例如：液氮储罐、高压开关柜"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="风险点编号" prop="riskPointNumber">
+          <el-input
+            v-model="formValue.riskPointNumber"
+            size="large"
+            placeholder="请输入唯一风险点编号"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="风险点规格" prop="riskPointSpec">
+          <el-input
+            v-model="formValue.riskPointSpec"
+            size="large"
+            placeholder="例如：容量500L、电压10kV"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="培训要求" prop="trainingRequirement">
+          <el-input
+            v-model="formValue.trainingRequirement"
+            size="large"
+            placeholder="例如：持证上岗、年度复训"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="安全风险" prop="safetyRisk">
+          <el-input
+            v-model="formValue.safetyRisk"
+            size="large"
+            placeholder="描述该风险点可能引发的安全问题"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="可能造成伤害" prop="possibleHarm">
+          <el-input
+            v-model="formValue.possibleHarm"
+            size="large"
+            placeholder="例如：爆炸、中毒、触电、窒息等"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="主要管控措施" prop="mainControlMeasures">
+          <el-input
+            v-model="formValue.mainControlMeasures"
+            size="large"
+            placeholder="例如：定期巡检、设置警示标识、配备防护装备"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="目前是否存在安全隐患" prop="currentHazard">
+          <el-input
+            v-model="formValue.currentHazard"
+            size="large"
+            placeholder="例如：设备老化、线路裸露、通风不良"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="隐患内容" prop="hazardContent">
+          <el-input
+            v-model="formValue.hazardContent"
+            size="large"
+            placeholder="详细描述当前存在的隐患情况"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="应急预案名称" prop="emergencyPlanName">
+          <el-input
+            v-model="formValue.emergencyPlanName"
+            size="large"
+            placeholder="例如：《危化品泄漏应急处置预案》"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="应急预案编号" prop="emergencyPlanNumber">
+          <el-input
+            v-model="formValue.emergencyPlanNumber"
+            size="large"
+            placeholder="例如：YJYA-2024-001"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="演练计划及实施情况" prop="rectificationPlan">
+          <el-input
+            v-model="formValue.rectificationPlan"
+            size="large"
+            placeholder="例如：每季度演练一次，最近一次于2025年12月完成"
+            style="width: 330px"
+          />
+        </el-form-item>
+        <el-form-item label="风险等级" prop="riskLevel">
+          <el-select v-model="formValue.riskLevel" size="large" placeholder="请选择风险等级" style="width: 330px">
+            <el-option :value="1" label="高" />
+            <el-option :value="2" label="中" />
+            <el-option :value="3" label="低" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <div style="width: 330px"></div>
+        </el-form-item>
+        <el-form-item label="备注" prop="remarks" style="width: 87.2%">
+          <el-input
+            type="textarea"
+            v-model="formValue.remarks"
+            size="large"
+            :rows="7"
+            placeholder="可填写其他补充说明"
+          />
+        </el-form-item>
+      </el-form>
+    </main>
+    <footer class="safety-platform-container__footer">
+      <el-button @click="$router.push({ name: 'areaResponsibilities:public' })">返回</el-button>
+      <el-button type="primary" :loading="submiting" @click="handleSubmit">提交</el-button>
+    </footer>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive, onMounted, nextTick } from 'vue';
+  import { useRouter, useRoute } from 'vue-router';
+  import { ElMessage } from 'element-plus';
+  import { getAllDepartments } from '@/api/auth/dept';
+  import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';
+
+  import {
+    queryAvailableUserList,
+    safetyRiskListUpdateRiskList,
+    safetyRiskListQueryDetail,
+  } from '@/api/production-safety/responsibility-implementation';
+
+  const router = useRouter();
+  const route = useRoute();
+  const formRef = ref<any>(null);
+  const submiting = ref(false);
+
+  const userOptions = ref<any[]>([]);
+  const firstLevelDepts = ref<any[]>([]);
+  const cascaderProp = {
+    expandTrigger: 'click',
+    checkStrictly: true,
+    value: 'id',
+    label: 'deptName',
+  };
+  const cascaderRef = ref<any>();
+
+  const formValue = reactive({
+    buildingArea: '',
+    buildingName: '',
+    safetyResponsibleBuilding: '',
+    floorLocation: '',
+    safetyResponsibleFloor: '',
+    roomName: '',
+    responsibleDepartment: '',
+    roomSafetyResponsible: '',
+    hasRiskPoint: '',
+    riskCategory: '',
+    riskPointName: '',
+    riskPointNumber: '',
+    riskPointSpec: '',
+    trainingRequirement: '',
+    safetyRisk: '',
+    possibleHarm: '',
+    mainControlMeasures: '',
+    currentHazard: '',
+    hazardContent: '',
+    emergencyPlanName: '',
+    emergencyPlanNumber: '',
+    rectificationPlan: '',
+    riskLevel: '',
+    remarks: '',
+    responsibleDepartmentId: [],
+  });
+
+  const rules = reactive({
+    buildingArea: [{ required: true, message: '请输入楼号', trigger: 'blur' }],
+    buildingName: [{ required: true, message: '请输入楼宇/区域', trigger: 'blur' }],
+    safetyResponsibleBuilding: [{ required: true, message: '请输入楼层/房号', trigger: 'blur' }],
+    floorLocation: [{ required: true, message: '请输入名称/功能', trigger: 'blur' }],
+    safetyResponsibleFloor: [{ required: true, message: '请选择安全责任所/中心', trigger: 'change' }],
+    roomName: [{ required: true, message: '请选择安全责任所/中心负责人', trigger: 'change' }],
+    responsibleDepartment: [{ required: true, message: '请选择安全责任部门', trigger: 'change' }],
+    roomSafetyResponsible: [{ required: true, message: '请输入房间安全责任人', trigger: 'blur' }],
+    hasRiskPoint: [{ required: true, message: '请选择是否有风险点', trigger: 'change' }],
+    riskCategory: [{ required: true, message: '请选择风险类别', trigger: 'change' }],
+    riskPointName: [{ required: true, message: '请输入风险点名称', trigger: 'blur' }],
+    riskPointNumber: [{ required: true, message: '请输入风险点编号', trigger: 'blur' }],
+    riskPointSpec: [{ required: true, message: '请输入风险点规格/参数', trigger: 'blur' }],
+    trainingRequirement: [{ required: true, message: '请输入培训要求', trigger: 'blur' }],
+    safetyRisk: [{ required: true, message: '请输入安全风险描述', trigger: 'blur' }],
+    possibleHarm: [{ required: true, message: '请输入可能造成的伤害', trigger: 'blur' }],
+    mainControlMeasures: [{ required: true, message: '请输入主要控制措施', trigger: 'blur' }],
+    currentHazard: [{ required: true, message: '请选择当前隐患状态', trigger: 'change' }],
+    hazardContent: [{ required: true, message: '请输入隐患内容', trigger: 'blur' }],
+    emergencyPlanName: [{ required: true, message: '请输入应急预案名称', trigger: 'blur' }],
+    emergencyPlanNumber: [{ required: true, message: '请输入应急预案编号', trigger: 'blur' }],
+    rectificationPlan: [{ required: true, message: '请输入整改方案', trigger: 'blur' }],
+    riskLevel: [{ required: true, message: '请选择风险等级', trigger: 'change' }],
+    remarks: [],
+  });
+
+  const handleChangeDept = (prop) => {
+    const cascader = cascaderRef.value;
+    const deptInfo = cascader?.getCheckedNodes();
+    formValue[prop] = deptInfo[0].label;
+    formRef.value.validateField(prop);
+    nextTick(() => {
+      handleQueryAvailableUserList(deptInfo[0].label, prop);
+    });
+  };
+
+  const getDeptData = () => {
+    getAllDepartments().then((res) => {
+      firstLevelDepts.value = formatDeptTree(res);
+    });
+  };
+
+  const handleQueryAvailableUserList = (deptName, realname = '') => {
+    queryAvailableUserList({
+      pageNumber: 1,
+      pageSize: 200,
+      queryParam: {
+        deptName,
+        realname,
+      },
+    }).then((res: any) => {
+      userOptions.value = (res.records || []).map((u: any) => ({
+        value: u.userId || u.id,
+        label: u.realname,
+      }));
+    });
+  };
+
+  const loadDetailData = (id: number) => {
+    safetyRiskListQueryDetail(id).then((res: any) => {
+      Object.keys(formValue).forEach((key) => {
+        if (res[key] !== undefined) {
+          formValue[key] = res[key];
+          formValue['responsibleDepartmentId'] = res['responsibleDepartmentId']
+            ? res['responsibleDepartmentId'].split(',').map((item: string) => Number(item))
+            : [];
+        }
+      });
+    });
+  };
+
+  // const getUserData = () => {
+  //   getUserList({ pageNumber: 1, pageSize: 200, queryParam: {} }).then((res: any) => {
+  //     userOptions.value = (res.records || []).map((u: any) => ({
+  //       id: u.userId || u.id,
+  //       name: u.realName || u.username,
+  //     }));
+  //   });
+  // };
+
+  onMounted(() => {
+    getDeptData();
+    loadDetailData(Number(route.query.id));
+    handleQueryAvailableUserList('');
+  });
+
+  const handleSubmit = () => {
+    formRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        submiting.value = true;
+        safetyRiskListUpdateRiskList({
+          ...formValue,
+          id: route.query.id,
+          responsibleDepartmentId: formValue.responsibleDepartmentId.join(','),
+        })
+          .then(() => {
+            ElMessage.success('编辑成功!');
+            router.push({ name: 'riskManage' });
+          })
+          .finally(() => {
+            submiting.value = false;
+          });
+      }
+    });
+  };
+</script>
+<style lang="scss" scoped>
+  @use '@/styles/page-main-layout.scss' as *;
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/basic-table-action.scss' as *;
+  .editor-container {
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    margin-right: 20px;
+    overflow: hidden;
+
+    // :deep(.w-e-text-container) {
+    //   min-height: 400px;
+    //   overflow-y: auto;
+    // }
+  }
+  // :deep(.breadcrumb .title) {
+  //   margin-left: 0;
+  // }
+
+  // .main {
+  //   display: flex;
+  //   flex-direction: column;
+  //   padding: 20px;
+  //   flex: 1;
+  //   overflow: hidden;
+  //   background-color: #fff;
+  // }
+  // .button-content {
+  //   margin-bottom: 20px;
+  // }
+
+  // .page-content {
+  //   display: flex;
+  //   justify-content: flex-end;
+  // }
+  // // :deep(.el-form) {
+  // //   flex: 1;
+  // //   overflow: hidden;
+  // //   overflow-y: auto;
+  // // }
+</style>

src/views/production-safety/implement-safety-duty/risk-manage/list.vue

@@ -0,0 +1,291 @@
+<template>
+  <div class="safety-platform-container">
+    <header class="safety-platform-container__header">
+      <div class="breadcrumb-title"> 风险清单管理 </div>
+    </header>
+    <main class="safety-platform-container__main">
+      <div class="search-form">
+        <el-form :inline="true">
+          <el-form-item label="搜索">
+            <el-input
+              v-model="queryParams.queryParam.mergeFiled"
+              placeholder="搜索楼号/楼宇/楼层/房间"
+              style="width: 170px"
+            />
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-select v-model="queryParams.queryParam.status" clearable placeholder="状态" style="width: 170px">
+              <el-option :value="1" label="正常" />
+              <el-option :value="2" label="待确认" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="部门名称">
+            <el-cascader
+              v-model="queryParams.queryParam.responsibleDepartmentId"
+              style="width: 170px"
+              ref="cascaderRef"
+              :options="firstLevelDepts"
+              :props="cascaderProp"
+              :show-all-levels="false"
+              placeholder="部门名称"
+              filterable
+              @change="handleChangeDept"
+            />
+          </el-form-item>
+          <el-form-item label="风险类型">
+            <el-select
+              v-model="queryParams.queryParam.riskCategory"
+              clearable
+              placeholder="风险类型"
+              style="width: 170px"
+            >
+              <el-option :value="1" label="III级危险点" />
+              <el-option :value="2" label="II级危险点" />
+              <el-option :value="3" label="I级危险点" />
+              <el-option :value="4" label="UPS" />
+              <el-option :value="5" label="电力设施（强电）" />
+              <el-option :value="6" label="高低温气体液体、高压气体" />
+              <el-option :value="7" label="试验设施设备" />
+              <el-option :value="8" label="特种设备" />
+              <el-option :value="9" label="危化品、易燃易爆固液气体" />
+              <el-option :value="10" label="有限空间" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="风险级别">
+            <el-select v-model="queryParams.queryParam.riskLevel" clearable placeholder="风险类型" style="width: 170px">
+              <el-option :value="1" label="B" />
+              <el-option :value="2" label="C" />
+            </el-select>
+          </el-form-item>
+        </el-form>
+
+        <div>
+          <el-button type="primary" @click="$router.push({ name: 'riskManageAdd' })">添加 </el-button>
+          <el-button type="primary" @click="queryTableList">查询</el-button>
+          <el-button @click="handleRestParams">重置</el-button>
+        </div>
+      </div>
+
+      <div class="table-content">
+        <el-table :data="tableData.data">
+          <el-table-column type="index" label="序号" width="80" />
+          <el-table-column label="楼号/区域" prop="buildingArea" width="180" />
+          <el-table-column label="楼宇名称" prop="buildingName" width="180" />
+          <el-table-column label="楼层/位置" prop="floorLocation" width="180" />
+          <el-table-column label="房间号(名称)" prop="roomName" width="180" />
+          <el-table-column label="安全责任人" prop="roomSafetyResponsibleName" width="180" />
+          <el-table-column label="是否存在风险点" prop="hasRiskPointName" width="180" />
+          <el-table-column label="风险点类别" prop="riskCategoryName" width="180" />
+          <el-table-column label="变更原因" prop="changeReason" width="170" />
+          <el-table-column label="状态" prop="statusName" width="100" />
+          <el-table-column fixed="right" min-width="240" label="操作">
+            <template #default="scope">
+              <el-button
+                type="primary"
+                link
+                @click="$router.push({ name: 'riskManageEdit', query: { id: scope.row.id } })"
+                >编辑</el-button
+              >
+              <el-button type="primary" link @click="handleConfirmDeleteRow(scope)">删除</el-button>
+              <el-button type="primary" link>查看</el-button>
+              <el-button
+                type="primary"
+                link
+                @click="$router.push({ name: 'riskManageChange', query: { id: scope.row.id } })"
+                >变更</el-button
+              >
+              <el-button type="primary" link @click="handleApprove(scope, 1)">确认</el-button>
+              <el-button type="primary" link @click="handleApprove(scope, 0)">拒绝</el-button>
+              <el-button type="primary" link @click="handleApprove(scope, 0)">撤回</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="pagination-container" v-if="tableData.total > 0">
+        <el-pagination
+          background
+          :current-page="queryParams.pageNumber"
+          :page-size="queryParams.pageSize"
+          :total="tableData.total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </main>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, reactive, ref } from 'vue';
+  import dayjs from 'dayjs';
+  import { ElMessage } from 'element-plus';
+  import { useRouter } from 'vue-router';
+  import {
+    safetyRiskListQueryPage,
+    safetyRiskListDelete,
+    safetyRiskListApprove,
+  } from '@/api/production-safety/responsibility-implementation';
+  import { omit } from 'lodash-es';
+  import { useUserInfoHook } from '@/hooks/useUserInfoHook';
+  import { unformatAttachment } from '@/components/UploadFiles/utils';
+  import { downloadFile } from '@/views/disaster/utils';
+  import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';
+  import { getAllDepartments } from '@/api/auth/dept';
+
+  const router = useRouter();
+  const { id } = useUserInfoHook();
+  const firstLevelDepts = ref<any[]>([]);
+  const cascaderProp = {
+    expandTrigger: 'click',
+    checkStrictly: true,
+    // emitPath: false,
+    value: 'id',
+    label: 'deptName',
+  };
+  const queryParams = reactive<any>({
+    pageNumber: 1,
+    pageSize: 10,
+    queryParam: {
+      mergeFiled: '',
+      status: '',
+      responsibleDepartment: '',
+      riskCategory: '',
+      riskLevel: '',
+      userId: id,
+      responsibleDepartmentId: [],
+    },
+  });
+  const cascaderRef = ref();
+
+  const tableData = reactive({
+    data: [],
+    total: 0,
+  });
+
+  const handleSizeChange = (value) => {};
+  const handleCurrentChange = (value) => {
+    queryParams.pageNumber = value;
+    queryTableList();
+  };
+
+  const getDeptData = () => {
+    getAllDepartments().then((res) => {
+      firstLevelDepts.value = formatDeptTree(res);
+    });
+  };
+  const handleChangeDept = () => {
+    const deptInfo = cascaderRef.value?.getCheckedNodes();
+    if (deptInfo?.[0]) {
+      queryParams.queryParam.responsibleDepartment = deptInfo[0].label;
+    }
+  };
+
+  const handleApprove = (scope, approveType) => {
+    safetyRiskListApprove({
+      id: scope.row.id,
+      approveType,
+    }).then(() => {
+      ElMessage.success('操作成功!');
+      queryTableList();
+    });
+  };
+
+  const handleDownloadLink = (scope) => {
+    const attachment = unformatAttachment(scope.row.attachment);
+    attachment?.forEach((item: any) => {
+      downloadFile(item.fileUrl, item.fileName);
+    });
+  };
+  const handleConfirmDeleteRow = (scope) => {
+    safetyRiskListDelete(scope.row.id).then(() => {
+      ElMessage.success('删除成功!');
+      queryTableList();
+    });
+  };
+
+  const queryTableList = () => {
+    safetyRiskListQueryPage({
+      ...queryParams,
+      queryParam: {
+        ...omit(queryParams.queryParam, 'responsibleDepartmentId'),
+      },
+    }).then((res) => {
+      tableData.data = res.records;
+      tableData.total = res.totalRow;
+    });
+  };
+  const handleRestParams = () => {
+    Object.assign(queryParams, {
+      pageNumber: 1,
+      pageSize: 10,
+      queryParam: {
+        ...queryParams.queryParam,
+        mergeFiled: '',
+        status: '',
+        responsibleDepartment: '',
+        riskCategory: '',
+        riskLevel: '',
+        responsibleDepartmentId: [],
+      },
+    });
+    queryTableList();
+  };
+
+  onMounted(async () => {
+    await getDeptData();
+    queryTableList();
+  });
+</script>
+
+<style lang="scss" scoped>
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/page-main-layout.scss' as *;
+  @use '@/styles/basic-table-action.scss' as *;
+
+  :deep(.el-tabs__header) {
+    margin: 0;
+  }
+  :deep(.el-tabs__item) {
+    font-size: 14px !important;
+  }
+  :deep(.flexContent) {
+    display: flex;
+  }
+  :deep(.breadcrumb .title) {
+    margin-left: 0;
+  }
+
+  :deep(.el-form) {
+    flex: 1;
+    display: flex;
+    row-gap: 15px;
+    flex-wrap: wrap;
+  }
+  :deep(.el-form-item) {
+    margin-bottom: 0;
+  }
+  :deep(main) {
+    display: flex;
+    flex-direction: column;
+  }
+  .search-form {
+    min-width: 800px;
+    display: flex;
+
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+
+  .button-content {
+    margin-bottom: 20px;
+  }
+  .table-content {
+    flex: 1;
+    overflow: hidden;
+    overflow-y: auto;
+  }
+  .page-content {
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>

src/views/production-safety/implement-safety-duty/risk-manage/view.vue

@@ -0,0 +1,473 @@
+<template>
+  <div class="safety-platform-container">
+    <header class="safety-platform-container__header">
+      <div class="breadcrumb-title">
+        <BreadcrumbBack />
+        查看风险清单
+      </div>
+    </header>
+    <main class="safety-platform-container__main">
+      <el-form ref="formRef" :inline="true" label-width="auto" :model="formValue" :rules="rules">
+        <el-form-item label="楼号/区域" prop="buildingArea">
+          <el-input
+            v-model="formValue.buildingArea"
+            size="large"
+            placeholder="例如：A栋、东区"
+            style="width: 330px"
+            disabled
+          />
+        </el-form-item>
+        <el-form-item label="楼宇名称" prop="buildingName">
+          <el-input
+            v-model="formValue.buildingName"
+            size="large"
+            placeholder="例如：科研楼、实验中心"
+            style="width: 330px"
+            disabled
+          />
+        </el-form-item>
+        <el-form-item label="安全责任人" prop="safetyResponsibleBuilding">
+          <el-select
+            v-model="formValue.safetyResponsibleBuilding"
+            placeholder="请选择"
+            size="large"
+            style="width: 330px"
+            filterable
+            disabled
+          >
+            <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="楼层/位置" prop="floorLocation">
+          <el-input
+            v-model="formValue.floorLocation"
+            size="large"
+            placeholder="例如：3层、地下一层、走廊东侧"
+            style="width: 330px"
+            disabled
+          />
+        </el-form-item>
+        <el-form-item label="安全责任人" prop="safetyResponsibleFloor">
+          <el-select
+            v-model="formValue.safetyResponsibleFloor"
+            placeholder="请选择"
+            size="large"
+            style="width: 330px"
+            filterable
+            disabled
+          >
+            <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="房间号（名称）" prop="roomName">
+          <el-input
+            v-model="formValue.roomName"
+            size="large"
+            placeholder="例如：301、高压配电室"
+            style="width: 330px"
+            disabled
+          />
+        </el-form-item>
+        <el-form-item label="责任部门" prop="responsibleDepartment">
+          <el-cascader
+            style="width: 330px"
+            v-model="formValue.responsibleDepartmentId"
+            size="large"
+            ref="cascaderRef"
+            :options="firstLevelDepts"
+            :props="cascaderProp"
+            :show-all-levels="false"
+            placeholder="请选择责任部门"
+            filterable
+            disabled
+            @change="handleChangeDept('responsibleDepartment')"
+          />
+        </el-form-item>
+        <el-form-item label="安全责任人" prop="roomSafetyResponsible">
+          <el-select
+            v-model="formValue.roomSafetyResponsible"
+            placeholder="请选择"
+            size="large"
+            style="width: 330px"
+            filterable
+            disabled
+          >
+            <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="是否存在风险点" prop="hasRiskPoint">
+          <el-select
+            v-model="formValue.hasRiskPoint"
+            size="large"
+            placeholder="请选择是否存有风险点"
+            style="width: 330px"
+            disabled
+          >
+            <el-option label="是" :value="1" />
+            <el-option label="否" :value="0" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="风险点类别" prop="riskCategory">
+          <el-select
+            v-model="formValue.riskCategory"
+            size="large"
+            placeholder="请选择风险点类别"
+            style="width: 330px"
+            disabled
+          >
+            <el-option :value="1" label="III级危险点" />
+            <el-option :value="2" label="II级危险点" />
+            <el-option :value="3" label="I级危险点" />
+            <el-option :value="4" label="UPS" />
+            <el-option :value="5" label="电力设施（强电）" />
+            <el-option :value="6" label="高低温气体液体、高压气体" />
+            <el-option :value="7" label="试验设施设备" />
+            <el-option :value="8" label="特种设备" />
+            <el-option :value="9" label="危化品、易燃易爆固液气体" />
+            <el-option :value="10" label="有限空间" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="风险点名称" prop="riskPointName">
+          <el-input
+            v-model="formValue.riskPointName"
+            size="large"
+            placeholder="例如：液氮储罐、高压开关柜"
+            style="width: 330px"
+            disabled
+          />
+        </el-form-item>
+        <el-form-item label="风险点编号" prop="riskPointNumber">
+          <el-input
+            v-model="formValue.riskPointNumber"
+            size="large"
+            placeholder="请输入唯一风险点编号"
+            style="width: 330px"
+            disabled
+          />
+        </el-form-item>
+        <el-form-item label="风险点规格" prop="riskPointSpec">
+          <el-input
+            v-model="formValue.riskPointSpec"
+            size="large"
+            placeholder="例如：容量500L、电压10kV"
+            style="width: 330px"
+            disabled
+          />
+        </el-form-item>
+        <el-form-item label="培训要求" prop="trainingRequirement">
+          <el-input
+            v-model="formValue.trainingRequirement"
+            size="large"
+            placeholder="例如：持证上岗、年度复训"
+            style="width: 330px"
+            disabled
+          />
+        </el-form-item>
+        <el-form-item label="安全风险" prop="safetyRisk">
+          <el-input
+            v-model="formValue.safetyRisk"
+            size="large"
+            placeholder="描述该风险点可能引发的安全问题"
+            style="width: 330px"
+            disabled
+          />
+        </el-form-item>
+        <el-form-item label="可能造成伤害" prop="possibleHarm">
+          <el-input
+            v-model="formValue.possibleHarm"
+            size="large"
+            placeholder="例如：爆炸、中毒、触电、窒息等"
+            style="width: 330px"
+            disabled
+          />
+        </el-form-item>
+        <el-form-item label="主要管控措施" prop="mainControlMeasures">
+          <el-input
+            v-model="formValue.mainControlMeasures"
+            size="large"
+            placeholder="例如：定期巡检、设置警示标识、配备防护装备"
+            style="width: 330px"
+            disabled
+          />
+        </el-form-item>
+        <el-form-item label="目前是否存在安全隐患" prop="currentHazard">
+          <el-input
+            v-model="formValue.currentHazard"
+            size="large"
+            placeholder="例如：设备老化、线路裸露、通风不良"
+            style="width: 330px"
+            disabled
+          />
+        </el-form-item>
+        <el-form-item label="隐患内容" prop="hazardContent">
+          <el-input
+            v-model="formValue.hazardContent"
+            size="large"
+            placeholder="详细描述当前存在的隐患情况"
+            style="width: 330px"
+            disabled
+          />
+        </el-form-item>
+        <el-form-item label="应急预案名称" prop="emergencyPlanName">
+          <el-input
+            v-model="formValue.emergencyPlanName"
+            size="large"
+            placeholder="例如：《危化品泄漏应急处置预案》"
+            style="width: 330px"
+            disabled
+          />
+        </el-form-item>
+        <el-form-item label="应急预案编号" prop="emergencyPlanNumber">
+          <el-input
+            v-model="formValue.emergencyPlanNumber"
+            size="large"
+            placeholder="例如：YJYA-2024-001"
+            style="width: 330px"
+            disabled
+          />
+        </el-form-item>
+        <el-form-item label="演练计划及实施情况" prop="rectificationPlan">
+          <el-input
+            v-model="formValue.rectificationPlan"
+            size="large"
+            placeholder="例如：每季度演练一次，最近一次于2025年12月完成"
+            style="width: 330px"
+            disabled
+          />
+        </el-form-item>
+        <el-form-item label="风险等级" prop="riskLevel">
+          <el-select
+            v-model="formValue.riskLevel"
+            size="large"
+            placeholder="请选择风险等级"
+            style="width: 330px"
+            disabled
+          >
+            <el-option :value="1" label="高" />
+            <el-option :value="2" label="中" />
+            <el-option :value="3" label="低" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <div style="width: 330px"></div>
+        </el-form-item>
+        <el-form-item label="备注" prop="remarks" style="width: 87.2%">
+          <el-input
+            type="textarea"
+            v-model="formValue.remarks"
+            size="large"
+            :rows="7"
+            placeholder="可填写其他补充说明"
+            disabled
+          />
+        </el-form-item>
+      </el-form>
+    </main>
+    <footer class="safety-platform-container__footer">
+      <el-button @click="$router.push({ name: 'areaResponsibilities:public' })">返回</el-button>
+    </footer>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive, onMounted, nextTick } from 'vue';
+  import { useRouter, useRoute } from 'vue-router';
+  import { ElMessage } from 'element-plus';
+  import { getAllDepartments } from '@/api/auth/dept';
+  import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';
+
+  import {
+    queryAvailableUserList,
+    safetyRiskListSaveRiskList,
+    safetyRiskListQueryDetail,
+  } from '@/api/production-safety/responsibility-implementation';
+
+  const router = useRouter();
+  const route = useRoute();
+  const formRef = ref<any>(null);
+  const submiting = ref(false);
+
+  const userOptions = ref<any[]>([]);
+  const firstLevelDepts = ref<any[]>([]);
+  const cascaderProp = {
+    expandTrigger: 'click',
+    checkStrictly: true,
+    value: 'id',
+    label: 'deptName',
+  };
+  const cascaderRef = ref<any>();
+
+  const formValue = reactive({
+    buildingArea: '',
+    buildingName: '',
+    safetyResponsibleBuilding: '',
+    floorLocation: '',
+    safetyResponsibleFloor: '',
+    roomName: '',
+    responsibleDepartment: '',
+    roomSafetyResponsible: '',
+    hasRiskPoint: '',
+    riskCategory: '',
+    riskPointName: '',
+    riskPointNumber: '',
+    riskPointSpec: '',
+    trainingRequirement: '',
+    safetyRisk: '',
+    possibleHarm: '',
+    mainControlMeasures: '',
+    currentHazard: '',
+    hazardContent: '',
+    emergencyPlanName: '',
+    emergencyPlanNumber: '',
+    rectificationPlan: '',
+    riskLevel: '',
+    remarks: '',
+    responsibleDepartmentId: [],
+  });
+
+  const rules = reactive({
+    buildingArea: [{ required: true, message: '请输入楼号', trigger: 'blur' }],
+    buildingName: [{ required: true, message: '请输入楼宇/区域', trigger: 'blur' }],
+    safetyResponsibleBuilding: [{ required: true, message: '请输入楼层/房号', trigger: 'blur' }],
+    floorLocation: [{ required: true, message: '请输入名称/功能', trigger: 'blur' }],
+    safetyResponsibleFloor: [{ required: true, message: '请选择安全责任所/中心', trigger: 'change' }],
+    roomName: [{ required: true, message: '请选择安全责任所/中心负责人', trigger: 'change' }],
+    responsibleDepartment: [{ required: true, message: '请选择安全责任部门', trigger: 'change' }],
+    roomSafetyResponsible: [{ required: true, message: '请输入房间安全责任人', trigger: 'blur' }],
+    hasRiskPoint: [{ required: true, message: '请选择是否有风险点', trigger: 'change' }],
+    riskCategory: [{ required: true, message: '请选择风险类别', trigger: 'change' }],
+    riskPointName: [{ required: true, message: '请输入风险点名称', trigger: 'blur' }],
+    riskPointNumber: [{ required: true, message: '请输入风险点编号', trigger: 'blur' }],
+    riskPointSpec: [{ required: true, message: '请输入风险点规格/参数', trigger: 'blur' }],
+    trainingRequirement: [{ required: true, message: '请输入培训要求', trigger: 'blur' }],
+    safetyRisk: [{ required: true, message: '请输入安全风险描述', trigger: 'blur' }],
+    possibleHarm: [{ required: true, message: '请输入可能造成的伤害', trigger: 'blur' }],
+    mainControlMeasures: [{ required: true, message: '请输入主要控制措施', trigger: 'blur' }],
+    currentHazard: [{ required: true, message: '请选择当前隐患状态', trigger: 'change' }],
+    hazardContent: [{ required: true, message: '请输入隐患内容', trigger: 'blur' }],
+    emergencyPlanName: [{ required: true, message: '请输入应急预案名称', trigger: 'blur' }],
+    emergencyPlanNumber: [{ required: true, message: '请输入应急预案编号', trigger: 'blur' }],
+    rectificationPlan: [{ required: true, message: '请输入整改方案', trigger: 'blur' }],
+    riskLevel: [{ required: true, message: '请选择风险等级', trigger: 'change' }],
+    remarks: [],
+  });
+
+  const handleChangeDept = (prop) => {
+    const cascader = cascaderRef.value;
+    const deptInfo = cascader?.getCheckedNodes();
+    formValue[prop] = deptInfo[0].label;
+    formRef.value.validateField(prop);
+    nextTick(() => {
+      handleQueryAvailableUserList(deptInfo[0].label, prop);
+    });
+  };
+
+  const getDeptData = () => {
+    getAllDepartments().then((res) => {
+      firstLevelDepts.value = formatDeptTree(res);
+    });
+  };
+
+  const handleQueryAvailableUserList = (deptName, realname = '') => {
+    queryAvailableUserList({
+      pageNumber: 1,
+      pageSize: 200,
+      queryParam: {
+        deptName,
+        realname,
+      },
+    }).then((res: any) => {
+      userOptions.value = (res.records || []).map((u: any) => ({
+        value: u.userId || u.id,
+        label: u.realname,
+      }));
+    });
+  };
+
+  const loadDetailData = (id: number) => {
+    safetyRiskListQueryDetail(id).then((res: any) => {
+      Object.keys(formValue).forEach((key) => {
+        if (res[key] !== undefined) {
+          formValue[key] = res[key];
+          formValue['responsibleDepartmentId'] = res['responsibleDepartmentId']
+            ? res['responsibleDepartmentId'].split(',').map((item: string) => Number(item))
+            : [];
+        }
+      });
+    });
+  };
+
+  // const getUserData = () => {
+  //   getUserList({ pageNumber: 1, pageSize: 200, queryParam: {} }).then((res: any) => {
+  //     userOptions.value = (res.records || []).map((u: any) => ({
+  //       id: u.userId || u.id,
+  //       name: u.realName || u.username,
+  //     }));
+  //   });
+  // };
+
+  onMounted(() => {
+    getDeptData();
+    loadDetailData(Number(route.query.id));
+    handleQueryAvailableUserList('');
+    // getUserData();
+  });
+
+  const handleSubmit = () => {
+    formRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        submiting.value = true;
+        safetyRiskListSaveRiskList({
+          ...formValue,
+        })
+          .then(() => {
+            ElMessage.success('创建成功!');
+            router.push({ name: 'riskManage' });
+          })
+          .finally(() => {
+            submiting.value = false;
+          });
+      }
+    });
+  };
+</script>
+<style lang="scss" scoped>
+  @use '@/styles/page-main-layout.scss' as *;
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/basic-table-action.scss' as *;
+  .editor-container {
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    margin-right: 20px;
+    overflow: hidden;
+
+    // :deep(.w-e-text-container) {
+    //   min-height: 400px;
+    //   overflow-y: auto;
+    // }
+  }
+  // :deep(.breadcrumb .title) {
+  //   margin-left: 0;
+  // }
+
+  // .main {
+  //   display: flex;
+  //   flex-direction: column;
+  //   padding: 20px;
+  //   flex: 1;
+  //   overflow: hidden;
+  //   background-color: #fff;
+  // }
+  // .button-content {
+  //   margin-bottom: 20px;
+  // }
+
+  // .page-content {
+  //   display: flex;
+  //   justify-content: flex-end;
+  // }
+  // // :deep(.el-form) {
+  // //   flex: 1;
+  // //   overflow: hidden;
+  // //   overflow-y: auto;
+  // // }
+</style>