fix:修复功能模块

src/api/drawLessons/index.ts

@@ -144,7 +144,8 @@ export interface IssueDrawLessonsRequest {
   associationOtObligationDeptUserName?: string;
   associationOneThree?: string;
   associationOtTimeLimit?: string;
-  attachments?: string;
+  attachments?: string; 
+  executGroupIds?: any; // 兼容批量下发传参
   /** 计划开始日期（下发弹窗） */
   planStartDate?: string;
   /** 计划结束时间（下发弹窗） */

src/router/routers/production-safety-router/responsibility-implementation.ts

@@ -220,7 +220,7 @@ const responsibilityImplementationRoutes: RouteComponent[] = [{
 
         }
       },
-      // 责任区域
+      // 责任区域(非区域执行人)
       {
         id: 90013,
         parentId: 9001,
@@ -228,7 +228,8 @@ const responsibilityImplementationRoutes: RouteComponent[] = [{
         path: 'non-public-area-responsibilities',
         component: '/production-safety/implement-safety-duty/non-public-area-responsibilities/list',
         meta: {
-          title: '责任区域',
+          title: '责任区域(非区域执行人)',
+          activeMenu: '/work-safety/responsibility-implementation/public-area-responsibilities',
           icon: 'OverviewIcon',
           isRoot: false,
           hidden: false,

src/views/production-safety/hiddenTroubleInvestigationAndGovernance/hiddenTroubleAccountManagement/components/hiddenTroubleAccountManagementDetail.vue

@@ -7,13 +7,82 @@
       show-icon
       class="detail-reject-alert"
     />
-    <BasicForm
-      ref="basicFormRef"
-      :formData="ruleFormData"
-      :formRules="isViewMode ? undefined : formRules"
-      :formConfig="computedFormConfig"
-    >
-      <template #reviewDepartmentId>
+    <el-form label-width="150px" :model="ruleFormData" :rules="isViewMode ? undefined : formRules" ref="basicFormRef">
+      <el-form-item label="隐患问题类别：" prop="typeId">
+        <el-select
+          v-model="ruleFormData.typeId"
+          placeholder="请选择隐患问题类别"
+          clearable
+          filterable
+          :disabled="isViewMode"
+          style="width: 450px"
+        >
+          <el-option
+            v-for="option in ruleFormConfig.find((c) => c.prop === 'typeId')?.selectOptions || []"
+            :key="option.value"
+            :label="option.label"
+            :value="option.value"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="隐患问题：" prop="dangerProblem">
+        <el-input
+          v-model="ruleFormData.dangerProblem"
+          placeholder="请输入隐患问题描述"
+          :disabled="isViewMode"
+          style="width: 450px"
+        />
+      </el-form-item>
+
+      <el-form-item label="问题主要原因：" prop="reasonId">
+        <el-select
+          v-model="ruleFormData.reasonId"
+          placeholder="请选择问题主要原因"
+          clearable
+          filterable
+          :disabled="isViewMode"
+          style="width: 450px"
+        >
+          <el-option
+            v-for="option in ruleFormConfig.find((c) => c.prop === 'reasonId')?.selectOptions || []"
+            :key="option.value"
+            :label="option.label"
+            :value="option.value"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="任务来源：" prop="taskSource">
+        <el-input
+          v-model="ruleFormData.taskSource"
+          placeholder="如：上级检查、院内自查"
+          :disabled="isViewMode"
+          style="width: 450px"
+        />
+      </el-form-item>
+
+      <el-form-item label="整改要求：" prop="rectificationRequirement">
+        <el-input
+          v-model="ruleFormData.rectificationRequirement"
+          placeholder="请输入整改要求"
+          :disabled="isViewMode"
+          style="width: 450px"
+        />
+      </el-form-item>
+
+      <el-form-item label="整改日期：" prop="rectificationDeadline">
+        <el-date-picker
+          v-model="ruleFormData.rectificationDeadline"
+          type="date"
+          value-format="YYYY-MM-DD"
+          placeholder="请选择整改日期"
+          :disabled="isViewMode"
+          style="width: 450px"
+        />
+      </el-form-item>
+
+      <el-form-item label="复查人员所属部门：" prop="reviewDepartmentId">
         <el-cascader
           ref="reviewDeptCascaderRef"
           v-model="ruleFormData.reviewDepartmentId"
@@ -24,96 +93,67 @@
           filterable
           clearable
           :disabled="isViewMode"
-          style="width: 100%"
+          style="width: 450px"
         />
-      </template>
-      <template #reviewPerson>
+      </el-form-item>
+
+      <el-form-item label="复查人员：" prop="reviewPersonId">
         <el-select
           v-model="ruleFormData.reviewPersonId"
           placeholder="请选择复查人员"
           clearable
           filterable
           :disabled="isViewMode"
-          style="width: 100%"
+          style="width: 450px"
           @change="onReviewPersonChange"
         >
-          <el-option
-            v-for="u in reviewUserList"
-            :key="u.id"
-            :label="u.realname || u.username"
-            :value="u.id"
-          />
+          <el-option v-for="u in reviewUserList" :key="u.id" :label="u.realname || u.username" :value="u.id" />
         </el-select>
-      </template>
-
-      <template #isDrawLessonsPush>
-        <el-radio-group v-model="ruleFormData.isDrawLessonsPush" :disabled="isViewMode">
+      </el-form-item>
+      <el-form-item label="举一反三是否推送：" prop="isDrawLessonsPush">
+        <el-radio-group v-model="ruleFormData.isDrawLessonsPush" :disabled="isViewMode" @change="changeDrawLessonsPush">
           <el-radio :value="0">否</el-radio>
           <el-radio :value="1">是</el-radio>
         </el-radio-group>
-      </template>
-      <template #attachments>
-        <UploadFiles
-          label="上传附件"
-          :file-list="attachmentsFileList"
-          :readonly="isViewMode && !isRectifyMode"
-          :disabled="isViewMode && !isRectifyMode"
-          @uploadSuccess="handleAttachmentsUploadSuccess"
-        />
-      </template>
-      <template #reviewComments>
-        <el-input
-          v-model="ruleFormData.reviewComments"
-          type="textarea"
-          :rows="3"
-          placeholder="请输入复查意见（选填），限300字"
-          maxlength="300"
-          show-word-limit
-          :disabled="isViewMode && !isReviewMode"
-        />
-      </template>
-    </BasicForm>
-    <el-form label-width="150px" v-if="ruleFormData.isDrawLessonsPush===1 && !isViewMode">
-        <el-form-item label="">
-            <el-input
-                v-model="ruleFormData.drawLessonsContent"
-                placeholder="请输入举一反三内容（选填）"
-                show-word-limit
-                style="width: 450px;"
-                :disabled="isViewMode"
-            />
+      </el-form-item>
+
+      <section v-if="ruleFormData.isDrawLessonsPush === 1">
+        <el-form-item label="" prop="drawLessonsContent">
+          <el-input
+            v-model="ruleFormData.drawLessonsContent"
+            placeholder="请输入举一反三内容（选填）"
+            show-word-limit
+            style="width: 450px"
+            :disabled="isViewMode"
+          />
         </el-form-item>
-        <el-form-item label="举一反三责任部门：">
-            <el-select
-                v-model="drawLessonsDeptIdsArray"
-                placeholder="请选择举一反三责任部门，可多选"
-                clearable
-                filterable
-                multiple
-                collapse-tags
-                collapse-tags-tooltip
-                :disabled="isViewMode"
-                style="width: 450px;"
-                @change="onDrawLessonsDeptsChange"
-                >
-                <el-option
-                    v-for="d in deptOptions"
-                    :key="d.id"
-                    :label="d.deptName"
-                    :value="d.id"
-                />
-            </el-select>
+        <el-form-item label="举一反三责任部门：" prop="drawLessonsDepartmentIds">
+          <el-select
+            v-model="drawLessonsDeptIdsArray"
+            placeholder="请选择举一反三责任部门，可多选"
+            clearable
+            filterable
+            multiple
+            collapse-tags
+            collapse-tags-tooltip
+            :disabled="isViewMode"
+            style="width: 450px"
+            @change="onDrawLessonsDeptsChange"
+          >
+            <el-option v-for="d in deptOptions" :key="d.id" :label="d.deptName" :value="d.id" />
+          </el-select>
         </el-form-item>
-        <el-form-item label="举一反三截止日期：">
-            <el-date-picker
-                v-model="ruleFormData.drawLessonsDeadline"
-                type="date"
-                value-format="YYYY-MM-DD"
-                placeholder="请选择举一反三截止日期（选填）"
-                style="width: 450px;"
-                :disabled="isViewMode"
-            />
+        <el-form-item label="举一反三截止日期：" prop="drawLessonsDeadline">
+          <el-date-picker
+            v-model="ruleFormData.drawLessonsDeadline"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="请选择举一反三截止日期（选填）"
+            style="width: 450px"
+            :disabled="isViewMode"
+          />
         </el-form-item>
+      </section>
     </el-form>
   </main>
   <footer class="safety-platform-container__footer">
@@ -133,101 +173,96 @@
     <!-- 纯查看时仅保留上面的返回，不显示其他按钮 -->
   </footer>
 
-    <!-- 复查弹窗 -->
-    <el-dialog v-model="showReviewDialog" title="复查隐患" width="520px" destroy-on-close @close="resetReviewForm">
-      <el-form ref="reviewFormRef" :model="reviewForm" :rules="reviewRules" label-width="120px">
-        <el-form-item label="复查结论" prop="reviewResult">
-          <el-radio-group v-model="reviewForm.reviewResult">
-            <el-radio :value="1">通过</el-radio>
-            <el-radio :value="0">不通过</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="复查意见" prop="reviewComments">
-          <el-input v-model="reviewForm.reviewComments" type="textarea" :rows="2" placeholder="选填" />
-        </el-form-item>
-        <el-form-item v-if="reviewForm.reviewResult === 0" label="不通过原因" prop="reviewReason">
-          <el-input v-model="reviewForm.reviewReason" type="textarea" :rows="2" placeholder="不通过时必填" />
-        </el-form-item>
-        <el-form-item label="复查时间" prop="reviewTime">
-          <el-date-picker
-            v-model="reviewForm.reviewTime"
-            type="datetime"
-            value-format="YYYY-MM-DDTHH:mm:ss"
-            placeholder="选填，默认当前时间"
-            style="width: 100%"
-          />
-        </el-form-item>
-        <el-form-item label="附件" prop="attachments">
-          <el-input v-model="reviewForm.attachments" placeholder="选填，多个用逗号分隔" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="showReviewDialog = false">取消</el-button>
-        <el-button type="primary" @click="handleReviewSubmit">提交复查</el-button>
-      </template>
-    </el-dialog>
-
-    <!-- 审查不通过原因弹窗（复查详情页使用） -->
-    <el-dialog
-      v-model="showReviewRejectDialog"
-      title="审核不通过原因"
-      width="560px"
-      :close-on-click-modal="false"
-      destroy-on-close
-      @close="reviewRejectReason = ''"
-    >
-      <el-input
-        v-model="reviewRejectReason"
-        type="textarea"
-        :rows="6"
-        maxlength="300"
-        show-word-limit
-        placeholder="请填写审核不通过原因（限300字）"
-      />
-      <template #footer>
-        <el-button @click="showReviewRejectDialog = false">取消</el-button>
-        <el-button type="primary" @click="handleReviewRejectSubmit">确定</el-button>
-      </template>
-    </el-dialog>
-
-    <!-- 扣分弹窗 -->
-    <el-dialog v-model="showDeductDialog" title="扣分记录" width="400px" destroy-on-close @close="resetDeductForm">
-      <el-form ref="deductFormRef" :model="deductForm" :rules="deductRules" label-width="100px">
-        <el-form-item label="扣分值" prop="deductionScore">
-          <el-input-number
-            v-model="deductForm.deductionScore"
-            :min="0"
-            :max="9999"
-            :precision="0"
-            placeholder="请输入扣分值（0-9999整数）"
-            style="width: 100%"
-          />
-        </el-form-item>
-        <el-form-item label="扣分部门">
-          <el-select
-            v-model="deductDeptIdsArray"
-            placeholder="请选择扣分部门，可多选（复用复查人员所属部门）"
-            clearable
-            filterable
-            multiple
-            collapse-tags
-            collapse-tags-tooltip
-            style="width: 100%"
-          >
-            <el-option
-              v-for="d in deptOptions"
-              :key="d.id"
-              :label="d.deptName"
-              :value="d.id"
-            />
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="showDeductDialog = false">取消</el-button>
-        <el-button type="primary" @click="handleDeductSubmit">确认扣分</el-button>
-      </template>
-    </el-dialog>
+  <!-- 复查弹窗 -->
+  <el-dialog v-model="showReviewDialog" title="复查隐患" width="520px" destroy-on-close @close="resetReviewForm">
+    <el-form ref="reviewFormRef" :model="reviewForm" :rules="reviewRules" label-width="120px">
+      <el-form-item label="复查结论" prop="reviewResult">
+        <el-radio-group v-model="reviewForm.reviewResult">
+          <el-radio :value="1">通过</el-radio>
+          <el-radio :value="0">不通过</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="复查意见" prop="reviewComments">
+        <el-input v-model="reviewForm.reviewComments" type="textarea" :rows="2" placeholder="选填" />
+      </el-form-item>
+      <el-form-item v-if="reviewForm.reviewResult === 0" label="不通过原因" prop="reviewReason">
+        <el-input v-model="reviewForm.reviewReason" type="textarea" :rows="2" placeholder="不通过时必填" />
+      </el-form-item>
+      <el-form-item label="复查时间" prop="reviewTime">
+        <el-date-picker
+          v-model="reviewForm.reviewTime"
+          type="datetime"
+          value-format="YYYY-MM-DDTHH:mm:ss"
+          placeholder="选填，默认当前时间"
+          style="width: 100%"
+        />
+      </el-form-item>
+      <el-form-item label="附件" prop="attachments">
+        <el-input v-model="reviewForm.attachments" placeholder="选填，多个用逗号分隔" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="showReviewDialog = false">取消</el-button>
+      <el-button type="primary" @click="handleReviewSubmit">提交复查</el-button>
+    </template>
+  </el-dialog>
+
+  <!-- 审查不通过原因弹窗（复查详情页使用） -->
+  <el-dialog
+    v-model="showReviewRejectDialog"
+    title="审核不通过原因"
+    width="560px"
+    :close-on-click-modal="false"
+    destroy-on-close
+    @close="reviewRejectReason = ''"
+  >
+    <el-input
+      v-model="reviewRejectReason"
+      type="textarea"
+      :rows="6"
+      maxlength="300"
+      show-word-limit
+      placeholder="请填写审核不通过原因（限300字）"
+    />
+    <template #footer>
+      <el-button @click="showReviewRejectDialog = false">取消</el-button>
+      <el-button type="primary" @click="handleReviewRejectSubmit">确定</el-button>
+    </template>
+  </el-dialog>
+
+  <!-- 扣分弹窗 -->
+  <el-dialog v-model="showDeductDialog" title="扣分记录" width="400px" destroy-on-close @close="resetDeductForm">
+    <el-form ref="deductFormRef" :model="deductForm" :rules="deductRules" label-width="100px">
+      <el-form-item label="扣分值" prop="deductionScore">
+        <el-input-number
+          v-model="deductForm.deductionScore"
+          :min="0"
+          :max="9999"
+          :precision="0"
+          placeholder="请输入扣分值（0-9999整数）"
+          style="width: 100%"
+        />
+      </el-form-item>
+      <el-form-item label="扣分部门">
+        <el-select
+          v-model="deductDeptIdsArray"
+          placeholder="请选择扣分部门，可多选（复用复查人员所属部门）"
+          clearable
+          filterable
+          multiple
+          collapse-tags
+          collapse-tags-tooltip
+          style="width: 100%"
+        >
+          <el-option v-for="d in deptOptions" :key="d.id" :label="d.deptName" :value="d.id" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="showDeductDialog = false">取消</el-button>
+      <el-button type="primary" @click="handleDeductSubmit">确认扣分</el-button>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
@@ -281,8 +316,11 @@
   const isRectifyMode = computed(() => operate.value === 'hidden-trouble-account-rectify');
   const isReviewMode = computed(() => operate.value === 'hidden-trouble-account-review');
 
-  const { ruleFormData, formRules, ruleFormConfig, cloneRuleFormData } =
-    useFormConfigHook(HIDDEN_DANGER_FORM_CONFIG, HIDDEN_DANGER_FORM_DATA, HIDDEN_DANGER_FORM_RULES);
+  const { ruleFormData, formRules, ruleFormConfig, cloneRuleFormData } = useFormConfigHook(
+    HIDDEN_DANGER_FORM_CONFIG,
+    HIDDEN_DANGER_FORM_DATA,
+    HIDDEN_DANGER_FORM_RULES,
+  );
 
   /** 查看详情：与复查时字段一致，全部为禁用状态 */
   const viewFormConfig = computed(() =>
@@ -300,9 +338,14 @@
   });
 
   /** 附件：逗号分隔 URL 转 FileItem 列表，供 UploadFiles 使用（复用新增安全考核上传附件） */
-  function convertAttachmentsToFileItems(attachmentsStr: string): Array<{ fileId: number; fileName: string; fileType: string; fileSize: string; fileUrl?: string }> {
+  function convertAttachmentsToFileItems(
+    attachmentsStr: string,
+  ): Array<{ fileId: number; fileName: string; fileType: string; fileSize: string; fileUrl?: string }> {
     if (!attachmentsStr || !String(attachmentsStr).trim()) return [];
-    const urls = String(attachmentsStr).split(',').map((u) => u.trim()).filter(Boolean);
+    const urls = String(attachmentsStr)
+      .split(',')
+      .map((u) => u.trim())
+      .filter(Boolean);
     return urls.map((url, index) => {
       const parts = url.split('/');
       const fileName = parts[parts.length - 1] || `附件${index + 1}`;
@@ -322,7 +365,10 @@
     }
     try {
       const list = await formatAttachmentList(files);
-      ruleFormData.attachments = (list || []).map((r) => r.fileUrl).filter(Boolean).join(',');
+      ruleFormData.attachments = (list || [])
+        .map((r) => r.fileUrl)
+        .filter(Boolean)
+        .join(',');
     } catch (e) {
       console.error('附件上传失败:', e);
       ElMessage.error(e?.message || e?.data || '附件上传失败，请重试');
@@ -376,13 +422,20 @@
 
   function onReviewPersonChange() {
     const u = reviewUserList.value.find((x) => x.id === ruleFormData.reviewPersonId);
-    ruleFormData.reviewPersonName = u ? (u.realname ?? u.username ?? '') : '';
+    ruleFormData.reviewPersonName = u ? u.realname ?? u.username ?? '' : '';
   }
 
   function onDrawLessonsDeptsChange() {
     ruleFormData.drawLessonsDepartmentIds = drawLessonsDeptIdsArray.value.join(',');
   }
-
+  function changeDrawLessonsPush() {
+    if (ruleFormData.isDrawLessonsPush === 1) {
+      ruleFormData.drawLessonsContent = '';
+      ruleFormData.drawLessonsDepartmentIds = '';
+      ruleFormData.drawLessonsDeadline = '';
+      drawLessonsDeptIdsArray.value = [];
+    }
+  }
   /** 状态：1待下发 2待整改 3待复查 4已完成 5待入账（用 statusId，兼容 statusOrder） */
   /** 整改页：详情接口返回的审查不通过原因，供 el-alert 展示 */
   const detailReviewRejectReason = ref('');
@@ -414,7 +467,10 @@
         ruleFormData.drawLessonsDepartmentIds = d.drawLessonsDepartmentIds ?? '';
         ruleFormData.drawLessonsDeadline = d.drawLessonsDeadline ?? '';
         drawLessonsDeptIdsArray.value = ruleFormData.drawLessonsDepartmentIds
-          ? ruleFormData.drawLessonsDepartmentIds.split(',').map((s) => Number(s.trim())).filter(Boolean)
+          ? ruleFormData.drawLessonsDepartmentIds
+              .split(',')
+              .map((s) => Number(s.trim()))
+              .filter(Boolean)
           : [];
         ruleFormData.rectificationCompletionStatus = d.rectificationCompletionStatus ?? '';
         ruleFormData.rectificationCompletionTime = d.rectificationCompletionTime ?? '';
@@ -438,20 +494,26 @@
 
   const handleValidate = async () => {
     if (!basicFormRef.value) return;
-    return await basicFormRef.value.validateForm();
+    console.log('basicFormRef.value:', basicFormRef.value);
+    return await basicFormRef.value.validate();
   };
 
   const handleSubmit = async () => {
     const ok = await handleValidate();
     if (!ok) return;
     try {
-
       let rectificationDeadline = ruleFormData.rectificationDeadline;
       if (rectificationDeadline) {
         if (rectificationDeadline.includes('T') || rectificationDeadline.includes(' ')) {
           rectificationDeadline = rectificationDeadline.split('T')[0].split(' ')[0];
         }
       }
+      let drawLessonsDeadline = ruleFormData.drawLessonsDeadline;
+      if (drawLessonsDeadline) {
+        if (drawLessonsDeadline.includes('T') || drawLessonsDeadline.includes(' ')) {
+          drawLessonsDeadline = drawLessonsDeadline.split('T')[0].split(' ')[0];
+        }
+      }
 
       const payload: SaveHiddenDangerRequest = {
         dangerProblem: ruleFormData.dangerProblem,
@@ -468,7 +530,7 @@
         isDrawLessonsPush: ruleFormData.isDrawLessonsPush ?? 0,
         drawLessonsContent: ruleFormData.drawLessonsContent || undefined,
         drawLessonsDepartmentIds: ruleFormData.drawLessonsDepartmentIds || undefined,
-        drawLessonsDeadline: ruleFormData.drawLessonsDeadline || undefined,
+        drawLessonsDeadline: drawLessonsDeadline || undefined,
         attachments: ruleFormData.attachments || undefined,
       };
       if (isCreateMode.value) {

src/views/production-safety/hiddenTroubleInvestigationAndGovernance/hiddenTroubleAccountManagement/configs/form.ts

@@ -94,34 +94,34 @@ export const HIDDEN_DANGER_FORM_CONFIG: FormConfig[] = [
     label: '举一反三是否推送：',
     slot: 'isDrawLessonsPush',
   },
-//   {
-//     prop: 'drawLessonsContent',
-//     label: '举一反三内容：',
-//     component: 'ElInput',
-//     componentProps: {
-//       placeholder: '选填，推送举一反三时建议填写',
-//     },
-//   },
-//   {
-//     prop: 'drawLessonsDepartmentIds',
-//     label: '举一反三责任部门：',
-//     slot: 'drawLessonsDepartmentIds',
-//     componentProps: {
-//       placeholder: '请选择举一反三责任部门，可多选',
-//       style: { width: '100%' },
-//     },
-//   },
-//   {
-//     prop: 'drawLessonsDeadline',
-//     label: '举一反三时限：',
-//     component: 'ElDatePicker',
-//     componentProps: {
-//       type: 'date',
-//       placeholder: '请选择举一反三时限',
-//       valueFormat: 'YYYY-MM-DD',
-//       style: { width: '100%' },
-//     },
-//   },
+  //   {
+  //     prop: 'drawLessonsContent',
+  //     label: '举一反三内容：',
+  //     component: 'ElInput',
+  //     componentProps: {
+  //       placeholder: '选填，推送举一反三时建议填写',
+  //     },
+  //   },
+  //   {
+  //     prop: 'drawLessonsDepartmentIds',
+  //     label: '举一反三责任部门：',
+  //     slot: 'drawLessonsDepartmentIds',
+  //     componentProps: {
+  //       placeholder: '请选择举一反三责任部门，可多选',
+  //       style: { width: '100%' },
+  //     },
+  //   },
+  //   {
+  //     prop: 'drawLessonsDeadline',
+  //     label: '举一反三时限：',
+  //     component: 'ElDatePicker',
+  //     componentProps: {
+  //       type: 'date',
+  //       placeholder: '请选择举一反三时限',
+  //       valueFormat: 'YYYY-MM-DD',
+  //       style: { width: '100%' },
+  //     },
+  //   },
 ];
 
 /**
@@ -216,38 +216,38 @@ export const HIDDEN_DANGER_RECTIFY_FORM_CONFIG: FormConfig[] = [
     slot: 'isDrawLessonsPush',
     componentProps: { disabled: true },
   },
-  {
-    prop: 'drawLessonsContent',
-    label: '举一反三内容：',
-    component: 'ElInput',
-    componentProps: {
-      placeholder: '选填，推送举一反三时建议填写',
-      disabled: true,
-    },
-  },
-  {
-    prop: 'drawLessonsDepartmentIds',
-    label: '举一反三责任部门：',
-    component: 'ElSelect',
-    // slot: 'drawLessonsDepartmentIds',
-    componentProps: {
-      placeholder: '请选择举一反三责任部门，可多选',
-      style: { width: '100%' },
-      disabled: true,
-    },
-  },
-  {
-    prop: 'drawLessonsDeadline',
-    label: '举一反三时限：',
-    component: 'ElDatePicker',
-    componentProps: {
-      type: 'date',
-      placeholder: '请选择举一反三时限',
-      valueFormat: 'YYYY-MM-DD',
-      style: { width: '100%' },
-      disabled: true,
-    },
-  },
+  //   {
+  //     prop: 'drawLessonsContent',
+  //     label: '举一反三内容：',
+  //     component: 'ElInput',
+  //     componentProps: {
+  //       placeholder: '选填，推送举一反三时建议填写',
+  //       disabled: true,
+  //     },
+  //   },
+  //   {
+  //     prop: 'drawLessonsDepartmentIds',
+  //     label: '举一反三责任部门：',
+  //     component: 'ElSelect',
+  //     // slot: 'drawLessonsDepartmentIds',
+  //     componentProps: {
+  //       placeholder: '请选择举一反三责任部门，可多选',
+  //       style: { width: '100%' },
+  //       disabled: true,
+  //     },
+  //   },
+  //   {
+  //     prop: 'drawLessonsDeadline',
+  //     label: '举一反三时限：',
+  //     component: 'ElDatePicker',
+  //     componentProps: {
+  //       type: 'date',
+  //       placeholder: '请选择举一反三时限',
+  //       valueFormat: 'YYYY-MM-DD',
+  //       style: { width: '100%' },
+  //       disabled: true,
+  //     },
+  //   },
   // 整改详情额外字段（可编辑，填写后点「整改」提交）
   {
     prop: 'rectificationCompletionStatus',
@@ -332,4 +332,25 @@ export const HIDDEN_DANGER_FORM_RULES = {
   reviewDepartmentId: [{ required: true, message: '请选择复查人员所属部门', trigger: 'change' }],
   reviewPersonId: [{ required: true, message: '请选择复查人员', trigger: 'change' }],
   isDrawLessonsPush: [{ required: true, message: '请选择举一反三是否推送', trigger: 'change' }],
+  drawLessonsContent: [
+    {
+      required: true,
+      message: '请输入举一反三内容',
+      trigger: 'blur',
+    },
+  ],
+  drawLessonsDepartmentIds: [
+    {
+      required: true,
+      message: '请选择举一反三责任部门',
+      trigger: 'change',
+    },
+  ],
+  drawLessonsDeadline: [
+    {
+      required: true,
+      message: '请选择举一反三截止日期',
+      trigger: 'change',
+    },
+  ],
 };

src/views/production-safety/hiddenTroubleInvestigationAndGovernance/oneByOneManagement/oneByOneManagement.vue

@@ -471,7 +471,7 @@
       await issueDrawLessons({
         associationOtId: currentIssueRow.value.id,
         dangerId: currentIssueRow.value.dangerId,
-        associationOtObligationDeptId: issueForm.value.groupDeptId,
+        executGroupIds: issueForm.value.groupDeptId,
         associationOtObligationDeptName: issueForm.value.groupDeptName,
         associationOneThree: currentIssueRow.value.associationOneThree,
         associationOtTimeLimit: issueForm.value.planEndTime || undefined,

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

@@ -11,14 +11,14 @@
         <el-form-item label="楼号" prop="buildingNo">
           <el-input v-model="formValue.buildingNo" size="large" placeholder="请输入楼号" style="width: 50%" />
         </el-form-item>
-        <el-form-item label="楼宇/区域" prop="buildingArea">
-          <el-input v-model="formValue.buildingArea" size="large" placeholder="请输入楼宇/区域" style="width: 50%" />
+        <el-form-item label="楼层" prop="buildingArea">
+          <el-input v-model="formValue.buildingArea" size="large" placeholder="请输入楼层" style="width: 50%" />
         </el-form-item>
-        <el-form-item label="楼层/房号" prop="floorRoomNo">
-          <el-input v-model="formValue.floorRoomNo" size="large" placeholder="请输入楼层/房号" style="width: 50%" />
+        <el-form-item label="房间/区域" prop="floorRoomNo">
+          <el-input v-model="formValue.floorRoomNo" size="large" placeholder="请输入房间/区域" style="width: 50%" />
         </el-form-item>
-        <el-form-item label="名称/功能" prop="nameFunction">
-          <el-input v-model="formValue.nameFunction" size="large" placeholder="请输入名称/功能" style="width: 50%" />
+        <el-form-item label="功能名称" prop="nameFunction">
+          <el-input v-model="formValue.nameFunction" size="large" placeholder="请输入功能名称" style="width: 50%" />
         </el-form-item>
 
         <el-form-item label="安全责任所/中心" prop="safetyResponsibleCenter">

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

@@ -11,13 +11,13 @@
         <el-form-item label="楼号">
           <el-input v-model="formValue.buildingNo" disabled size="large" style="width: 50%" />
         </el-form-item>
-        <el-form-item label="楼宇/区域">
+        <el-form-item label="楼层">
           <el-input v-model="formValue.buildingArea" disabled size="large" style="width: 50%" />
         </el-form-item>
-        <el-form-item label="楼层/房号">
+        <el-form-item label="房间/区域">
           <el-input v-model="formValue.floorRoomNo" disabled size="large" style="width: 50%" />
         </el-form-item>
-        <el-form-item label="名称/功能">
+        <el-form-item label="功能名称">
           <el-input v-model="formValue.nameFunction" disabled size="large" style="width: 50%" />
         </el-form-item>
 
@@ -37,7 +37,7 @@
         <el-form-item label="安全责任所/中心负责人">
           <el-select v-model="formValue.safetyCenterManager" disabled size="large" style="width: 50%">
             <el-option
-              v-for="item in oldCenterManagerOptions"
+              v-for="item in safetyCenterManagerOptions"
               :key="item.value"
               :label="item.label"
               :value="item.value"
@@ -45,6 +45,34 @@
           </el-select>
         </el-form-item>
 
+        <el-form-item label="安全责任部门">
+          <el-cascader
+            disabled
+            v-model="formValue.safetyResponsibleDepartmentId"
+            style="width: 50%"
+            size="large"
+            :options="firstLevelDepts"
+            :props="cascaderProp"
+            :show-all-levels="false"
+          />
+        </el-form-item>
+
+        <el-form-item label="安全责任部门负责人">
+          <el-select disabled v-model="formValue.safetyDepartmentManager" size="large" style="width: 50%">
+            <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="安全具体责任人">
+          <el-select disabled v-model="formValue.safetySpecificPerson" size="large" style="width: 50%">
+            <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="安全具体责任人联系方式">
+          <el-input disabled v-model="formValue.safetyPersonContact" size="large" style="width: 50%" />
+        </el-form-item>
+
         <h5 style="margin: 30px 0; font-weight: bold; color: #409eff">信息变更</h5>
 
         <el-form-item label="变更后的安全责任部门" prop="safetyResponsibleDepartmentTodo">
@@ -133,6 +161,11 @@
     safetyResponsibleCenter: '',
     safetyResponsibleCenterId: [],
     safetyCenterManager: null as number | null,
+    safetyResponsibleDepartment: '',
+    safetyResponsibleDepartmentId: [],
+    safetyDepartmentManager: null as number | null,
+    safetySpecificPerson: null as number | null,
+    safetyPersonContact: '',
     // 变更数据
     safetyResponsibleDepartmentTodo: '',
     safetyResponsibleDepartmentIdTodo: [],
@@ -184,6 +217,34 @@
   };
 
   // 详情回显
+  //   const handlAreaCheckListQueryDetail = async () => {
+  //     const id = route.query.id;
+  //     if (!id) return;
+
+  //     try {
+  //       const res: any = await areaCheckListQueryDetail({ id });
+  //       if (res) {
+  //         Object.assign(formValue, res);
+
+  //         // 1. 解析旧部门级联路径
+  //         if (typeof res.safetyResponsibleCenterId === 'string') {
+  //           formValue.safetyResponsibleCenterId = JSON.parse(res.safetyResponsibleCenterId);
+  //         }
+
+  //         // 2. 加载旧负责人列表以显示名称
+  //         if (formValue.safetyResponsibleCenter) {
+  //           getUserData(oldCenterManagerOptions, formValue.safetyResponsibleCenter);
+  //         }
+
+  //         // 3. 纠正 ID 类型
+  //         if (formValue.safetyCenterManager) formValue.safetyCenterManager = Number(formValue.safetyCenterManager);
+  //       }
+  //     } catch (err) {
+  //       ElMessage.error('加载详情失败');
+  //     }
+  //   };
+  const safetyCenterManagerOptions = ref<any[]>([]);
+  const userOptions = ref<any[]>([]);
   const handlAreaCheckListQueryDetail = async () => {
     const id = route.query.id;
     if (!id) return;
@@ -192,22 +253,36 @@
       const res: any = await areaCheckListQueryDetail({ id });
       if (res) {
         Object.assign(formValue, res);
-
-        // 1. 解析旧部门级联路径
-        if (typeof res.safetyResponsibleCenterId === 'string') {
-          formValue.safetyResponsibleCenterId = JSON.parse(res.safetyResponsibleCenterId);
+        formValue.changeReason = ''; // 确保变更原因初始为空
+        formValue.safetySpecificPersonTodo = null; // 确保变更具体
+        formValue.safetyResponsibleDepartmentIdTodo = []; // 确保变更部门初始为空
+        // 1. 解析级联 ID 数组
+        try {
+          if (typeof res.safetyResponsibleCenterId === 'string') {
+            formValue.safetyResponsibleCenterId = JSON.parse(res.safetyResponsibleCenterId);
+          }
+          if (typeof res.safetyResponsibleDepartmentId === 'string') {
+            formValue.safetyResponsibleDepartmentId = JSON.parse(res.safetyResponsibleDepartmentId);
+          }
+        } catch (e) {
+          console.error('解析部门ID路径失败', e);
         }
 
-        // 2. 加载旧负责人列表以显示名称
+        // 2. 类型转换
+        formValue.safetyCenterManager = res.safetyCenterManager ? Number(res.safetyCenterManager) : null;
+        formValue.safetyDepartmentManager = res.safetyDepartmentManager ? Number(res.safetyDepartmentManager) : null;
+        formValue.safetySpecificPerson = res.safetySpecificPerson ? Number(res.safetySpecificPerson) : null;
+
+        // 3. 补全人员名单以显示姓名
         if (formValue.safetyResponsibleCenter) {
-          getUserData(oldCenterManagerOptions, formValue.safetyResponsibleCenter);
+          getUserData(safetyCenterManagerOptions, formValue.safetyResponsibleCenter);
+        }
+        if (formValue.safetyResponsibleDepartment) {
+          getUserData(userOptions, formValue.safetyResponsibleDepartment);
         }
-
-        // 3. 纠正 ID 类型
-        if (formValue.safetyCenterManager) formValue.safetyCenterManager = Number(formValue.safetyCenterManager);
       }
     } catch (err) {
-      ElMessage.error('加载详情失败');
+      ElMessage.error('获取详情失败');
     }
   };
 

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

@@ -11,14 +11,14 @@
         <el-form-item label="楼号" prop="buildingNo">
           <el-input v-model="formValue.buildingNo" size="large" placeholder="请输入楼号" style="width: 50%" />
         </el-form-item>
-        <el-form-item label="楼宇/区域" prop="buildingArea">
-          <el-input v-model="formValue.buildingArea" size="large" placeholder="请输入楼宇/区域" style="width: 50%" />
+        <el-form-item label="楼层" prop="buildingArea">
+          <el-input v-model="formValue.buildingArea" size="large" placeholder="请输入楼层" style="width: 50%" />
         </el-form-item>
-        <el-form-item label="楼层/房号" prop="floorRoomNo">
-          <el-input v-model="formValue.floorRoomNo" size="large" placeholder="请输入楼层/房号" style="width: 50%" />
+        <el-form-item label="房间/区域" prop="floorRoomNo">
+          <el-input v-model="formValue.floorRoomNo" size="large" placeholder="请输入房间/区域" style="width: 50%" />
         </el-form-item>
-        <el-form-item label="名称/功能" prop="nameFunction">
-          <el-input v-model="formValue.nameFunction" size="large" placeholder="请输入名称/功能" style="width: 50%" />
+        <el-form-item label="功能名称" prop="nameFunction">
+          <el-input v-model="formValue.nameFunction" size="large" placeholder="请输入功能名称" style="width: 50%" />
         </el-form-item>
 
         <el-form-item label="安全责任所/中心" prop="safetyResponsibleCenter">

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

@@ -1,319 +1,348 @@
 <template>
-    <div class="safety-platform-container">
-        <header class="safety-platform-container__header">
-            <div class="breadcrumb-title">{{ $route.meta.title }}</div>
-            <el-tabs v-model="activeTab" @tab-change="handleTabChange">
-                <el-tab-pane label="公共区域" :name="1" />
-                <el-tab-pane label="非公共区域" :name="2" />
-            </el-tabs>
-        </header>
-        <main class="safety-platform-container__main">
-            <div style="margin-bottom: 20px">
-                <el-button type="primary" @click="
-                    $router.push({
-                        name: 'areaAddResponsibilities:nonPublic',
-                    })
-                    ">添加
-                </el-button>
-            </div>
-            <div class="search-form">
-                <el-form :inline="true">
-                    <el-form-item label="区域名称">
-                        <el-input v-model="queryParams.queryParam.nameFunction" 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>
+  <div class="safety-platform-container">
+    <header class="safety-platform-container__header">
+      <div class="breadcrumb-title">责任区域(非区域执行人)</div>
+      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
+        <el-tab-pane label="公共区域" :name="1" />
+        <el-tab-pane label="非公共区域" :name="2" />
+      </el-tabs>
+    </header>
+    <main class="safety-platform-container__main">
+      <div style="margin-bottom: 20px">
+        <el-button
+          type="primary"
+          @click="
+            $router.push({
+              name: 'areaAddResponsibilities:nonPublic',
+            })
+          "
+          >添加
+        </el-button>
+      </div>
+      <div class="search-form">
+        <el-form :inline="true">
+          <el-form-item label="区域名称">
+            <el-input v-model="queryParams.queryParam.nameFunction" 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>
 
-                <div>
-                    <!-- <el-button @click="batchImportVisible = true">导入</el-button>
+        <div>
+          <!-- <el-button @click="batchImportVisible = true">导入</el-button>
           <el-button type="primary" @click="handleDownload">导出</el-button> -->
 
-                    <el-button type="primary" @click="queryTableList">查询</el-button>
-                    <el-button @click="handleRestParams">重置</el-button>
-                </div>
-            </div>
+          <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="buildingNo" width="80" />
-                    <el-table-column label="楼层" prop="buildingArea" width="100" />
-                    <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="changeReason" width="170" />
-                    <el-table-column label="状态" prop="statusName" width="100" />
-                    <el-table-column fixed="right" min-width="240" label="操作">
-                        <template #default="scope">
-                            <template v-if="scope.row.status === 1">
-                                <el-button type="primary" link @click="
-                                    $router.push({
-                                        name: 'areaEditResponsibilities:nonPublic',
-                                        query: {
-                                            id: scope.row.id,
-                                        },
-                                    })
-                                    ">编辑
-                                </el-button>
-                                <el-popconfirm title="确定要删除吗?" @confirm="handleConfirmDeleteRow(scope)">
-                                    <template #reference>
-                                        <el-button type="primary" link>删除</el-button>
-                                    </template>
-                                </el-popconfirm>
+      <div class="table-content">
+        <el-table :data="tableData.data">
+          <el-table-column type="index" label="序号" width="80" />
+          <el-table-column label="楼号" prop="buildingNo" width="80" />
+          <el-table-column label="楼层" prop="buildingArea" width="100" />
+          <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="changeReason" width="170" />
+          <el-table-column label="状态" prop="statusName" width="100" />
+          <el-table-column fixed="right" min-width="240" label="操作">
+            <template #default="scope">
+              <template v-if="scope.row.status === 1">
+                <el-button
+                  type="primary"
+                  link
+                  @click="
+                    $router.push({
+                      name: 'areaEditResponsibilities:nonPublic',
+                      query: {
+                        id: scope.row.id,
+                      },
+                    })
+                  "
+                  >编辑
+                </el-button>
+                <el-popconfirm title="确定要删除吗?" @confirm="handleConfirmDeleteRow(scope)">
+                  <template #reference>
+                    <el-button type="primary" link>删除</el-button>
+                  </template>
+                </el-popconfirm>
 
-                                <el-button type="primary" link @click="
-                                    $router.push({
-                                        name: 'areaChangeResponsibilities:nonPublic',
-                                        query: {
-                                            id: scope.row.id,
-                                        },
-                                    })
-                                    ">变更</el-button>
-                            </template>
-                            <template v-if="scope.row.canChange === true">
-                                <el-button type="primary" link
-                                    @click="handleAreaCheckListApprove(scope, 1)">确认</el-button>
-                                <el-button type="primary" link
-                                    @click="handleAreaCheckListApprove(scope, 0)">拒绝</el-button>
-                            </template>
-                            <template v-if="scope.row.status === 3">
-                                <el-button type="primary" link>变更</el-button>
-                            </template>
-                            <el-button type="primary" link @click="
-                                $router.push({
-                                    name: 'areaViewResponsibilities:nonPublic',
-                                    query: {
-                                        id: scope.row.id,
-                                    },
-                                })
-                                ">查看</el-button>
-                            <el-button link type="primary" v-if="scope.row.creatBy === id && scope.row.status === 2"
-                                @click="handleAreaCheckListApprove(scope, 0)">
-                                撤回
-                            </el-button>
-                        </template>
-                    </el-table-column>
-                </el-table>
-            </div>
-            <div class="pagination-container" v-if="tableData.total > 0">
-                <el-pagination background layout="prev, pager, next, jumper,sizes, total"
-                    :current-page="queryParams.pageNumber" :page-size="queryParams.pageSize" :total="tableData.total"
-                    :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange"
-                    @current-change="handleCurrentChange" />
-            </div>
-        </main>
-    </div>
-    <BatchImport :visible="batchImportVisible" :importApiUrl="importApiUrl" :templateUrl="templateUrl"
-        :templateName="'责任清单-批量导入模版'" @close="() => (batchImportVisible = false)" @update="handleUpdate" />
+                <el-button
+                  type="primary"
+                  link
+                  @click="
+                    $router.push({
+                      name: 'areaChangeResponsibilities:nonPublic',
+                      query: {
+                        id: scope.row.id,
+                      },
+                    })
+                  "
+                  >变更</el-button
+                >
+              </template>
+              <template v-if="scope.row.canChange === true">
+                <el-button type="primary" link @click="handleAreaCheckListApprove(scope, 1)">确认</el-button>
+                <el-button type="primary" link @click="handleAreaCheckListApprove(scope, 0)">拒绝</el-button>
+              </template>
+              <template v-if="scope.row.status === 3">
+                <el-button type="primary" link>变更</el-button>
+              </template>
+              <el-button
+                type="primary"
+                link
+                @click="
+                  $router.push({
+                    name: 'areaViewResponsibilities:nonPublic',
+                    query: {
+                      id: scope.row.id,
+                    },
+                  })
+                "
+                >查看</el-button
+              >
+              <el-button
+                link
+                type="primary"
+                v-if="scope.row.creatBy === id && scope.row.status === 2"
+                @click="handleAreaCheckListApprove(scope, 0)"
+              >
+                撤回
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="pagination-container" v-if="tableData.total > 0">
+        <el-pagination
+          background
+          layout="prev, pager, next, jumper,sizes, total"
+          :current-page="queryParams.pageNumber"
+          :page-size="queryParams.pageSize"
+          :total="tableData.total"
+          :page-sizes="[10, 20, 50, 100]"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </main>
+  </div>
+  <BatchImport
+    :visible="batchImportVisible"
+    :importApiUrl="importApiUrl"
+    :templateUrl="templateUrl"
+    :templateName="'责任清单-批量导入模版'"
+    @close="() => (batchImportVisible = false)"
+    @update="handleUpdate"
+  />
 </template>
 <script lang="ts" setup>
-import { onMounted, ref, reactive } from 'vue';
-import { ElMessage } from 'element-plus';
-import { useRouter } from 'vue-router';
-import {
+  import { onMounted, ref, reactive } from 'vue';
+  import { ElMessage } from 'element-plus';
+  import { useRouter } from 'vue-router';
+  import {
     areaCheckListQueryPage,
     areaCheckListApprove,
     areaCheckListDelete,
     areaCheckListExportArea,
-} from '@/api/production-safety/responsibility-implementation';
-import urlJoin from 'url-join';
-import { BatchImport } from '@/components/batch-import';
+  } from '@/api/production-safety/responsibility-implementation';
+  import urlJoin from 'url-join';
+  import { BatchImport } from '@/components/batch-import';
 
-import { downloadFile } from '@/views/disaster/utils';
-import { useGlobSetting } from '@/hooks/setting';
-import { useUserInfoHook } from '@/views/disaster/hooks';
+  import { downloadFile } from '@/views/disaster/utils';
+  import { useGlobSetting } from '@/hooks/setting';
+  import { useUserInfoHook } from '@/views/disaster/hooks';
 
-const router = useRouter();
-const activeTab = ref(2);
-const { id } = useUserInfoHook();
+  const router = useRouter();
+  const activeTab = ref(2);
+  const { id } = useUserInfoHook();
 
-const queryParams = reactive<any>({
+  const queryParams = reactive<any>({
     pageNumber: 1,
     pageSize: 10,
     queryParam: {
-        type: 2,
-        nameFunction: '',
-        status: '',
-        responsibilityPersonId: id,
+      type: 2,
+      nameFunction: '',
+      status: '',
+      responsibilityPersonId: id,
     },
-});
+  });
 
-// 批量导入
-const batchImportVisible = ref(false);
-const { urlPrefix } = useGlobSetting();
-const importApiUrl = ref(urlJoin(urlPrefix, '/areaCheckList/importArea?type=2'));
-const templateUrl = ref('');
+  // 批量导入
+  const batchImportVisible = ref(false);
+  const { urlPrefix } = useGlobSetting();
+  const importApiUrl = ref(urlJoin(urlPrefix, '/areaCheckList/importArea?type=2'));
+  const templateUrl = ref('');
 
-const handleUpdate = () => {
+  const handleUpdate = () => {
     batchImportVisible.value = false;
     queryTableList();
-};
+  };
 
-const tableData = reactive({
+  const tableData = reactive({
     data: [],
     total: 0,
-});
-const handleTabChange = (tab) => {
+  });
+  const handleTabChange = (tab) => {
     if (tab === 1) {
-        router.push({
-            name: 'areaResponsibilities:public',
-        });
+      router.push({
+        name: 'areaResponsibilities:public',
+      });
     } else if (tab === 2) {
-        router.push({
-            name: 'areaResponsibilities:nonPublic',
-        });
+      router.push({
+        name: 'areaResponsibilities:nonPublic',
+      });
     }
-};
+  };
 
-async function handleDownload() {
+  async function handleDownload() {
     // getQuery();
     try {
-        const res = await areaCheckListExportArea(queryParams.queryParam);
-        if (res.size === 0) return;
-        const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
-        const url = window.URL.createObjectURL(blob);
-        downloadFile(url, '责任清单.xlsx');
+      const res = await areaCheckListExportArea(queryParams.queryParam);
+      if (res.size === 0) return;
+      const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+      const url = window.URL.createObjectURL(blob);
+      downloadFile(url, '责任清单.xlsx');
     } catch (e) {
-        ElMessage.error('下载失败');
-        console.log(e);
+      ElMessage.error('下载失败');
+      console.log(e);
     }
-}
+  }
 
-const handleAreaCheckListApprove = (scope, approveType) => {
+  const handleAreaCheckListApprove = (scope, approveType) => {
     areaCheckListApprove({
-        id: scope.row.id,
-        approveType,
-        refuseReason: null,
+      id: scope.row.id,
+      approveType,
+      refuseReason: null,
     }).then(() => {
-        if (approveType === 1) {
-            ElMessage.success('请尽快修改该责任清单的安全责任所/中心、安全责任部门及相关负责人信息');
-        } else {
-            ElMessage.success('操作成功!');
-        }
-        queryTableList();
+      if (approveType === 1) {
+        ElMessage.success('请尽快修改该责任清单的安全责任所/中心、安全责任部门及相关负责人信息');
+      } else {
+        ElMessage.success('操作成功!');
+      }
+      queryTableList();
     });
-};
+  };
 
-const handleSizeChange = (value) => {
+  const handleSizeChange = (value) => {
     queryParams.pageSize = value;
     queryTableList();
-};
-const handleCurrentChange = (value) => {
+  };
+  const handleCurrentChange = (value) => {
     queryParams.pageNumber = value;
     queryTableList();
-};
+  };
 
-const handleConfirmDeleteRow = (scope) => {
+  const handleConfirmDeleteRow = (scope) => {
     areaCheckListDelete(scope.row.id).then(() => {
-        ElMessage.success('删除成功!');
-        queryTableList();
+      ElMessage.success('删除成功!');
+      queryTableList();
     });
-};
-const queryTableList = () => {
+  };
+  const queryTableList = () => {
     areaCheckListQueryPage(queryParams).then((res) => {
-        tableData.data = res.records;
-        tableData.total = res.totalRow;
+      tableData.data = res.records;
+      tableData.total = res.totalRow;
     });
-};
-const handleRestParams = () => {
+  };
+  const handleRestParams = () => {
     Object.assign(queryParams, {
-        pageNumber: 1,
-        pageSize: 10,
-        queryParam: {
-            ...queryParams.queryParam,
-            status: '',
-            nameFunction: '',
-        },
+      pageNumber: 1,
+      pageSize: 10,
+      queryParam: {
+        ...queryParams.queryParam,
+        status: '',
+        nameFunction: '',
+      },
     });
     queryTableList();
-};
+  };
 
-onMounted(() => {
+  onMounted(() => {
     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 *;
+  @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) {
+  :deep(.el-tabs__header) {
     margin: 0;
-}
+  }
 
-:deep(.el-tabs__item) {
+  :deep(.el-tabs__item) {
     font-size: 14px !important;
-}
+  }
 
-:deep(.flexContent) {
+  :deep(.flexContent) {
     display: flex;
-}
+  }
 
-:deep(.breadcrumb .title) {
+  :deep(.breadcrumb .title) {
     margin-left: 0;
-}
+  }
 
-:deep(.el-form) {
+  :deep(.el-form) {
     flex: 1;
     display: flex;
     row-gap: 15px;
     flex-wrap: wrap;
-}
+  }
 
-:deep(.el-form-item) {
+  :deep(.el-form-item) {
     margin-bottom: 0;
-}
+  }
 
-:deep(main) {
+  :deep(main) {
     display: flex;
     flex-direction: column;
-}
+  }
 
-.search-form {
+  .search-form {
     min-width: 800px;
     display: flex;
 
     justify-content: space-between;
     align-items: flex-end;
     margin-bottom: 20px;
-}
+  }
 
-.button-content {
+  .button-content {
     margin-bottom: 20px;
-}
+  }
 
-.table-content {
+  .table-content {
     flex: 1;
     overflow: hidden;
     overflow-y: auto;
-}
+  }
 
-.page-content {
+  .page-content {
     display: flex;
     justify-content: flex-end;
-}
+  }
 
-.pagination-container {
+  .pagination-container {
     display: flex;
     justify-content: flex-end;
-}
+  }
 
-.pagination-container {
+  .pagination-container {
     margin-top: 20px;
     display: flex;
     justify-content: flex-end;
-}
+  }
 </style>

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

@@ -11,13 +11,13 @@
         <el-form-item label="楼号">
           <el-input disabled v-model="formValue.buildingNo" size="large" style="width: 50%" />
         </el-form-item>
-        <el-form-item label="楼宇/区域">
+        <el-form-item label="楼层">
           <el-input disabled v-model="formValue.buildingArea" size="large" style="width: 50%" />
         </el-form-item>
-        <el-form-item label="楼层/房号">
+        <el-form-item label="房间/区域">
           <el-input disabled v-model="formValue.floorRoomNo" size="large" style="width: 50%" />
         </el-form-item>
-        <el-form-item label="名称/功能">
+        <el-form-item label="功能名称">
           <el-input disabled v-model="formValue.nameFunction" size="large" style="width: 50%" />
         </el-form-item>
 
@@ -61,6 +61,7 @@
             <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="安全具体责任人">
           <el-select disabled v-model="formValue.safetySpecificPerson" size="large" style="width: 50%">
@@ -74,7 +75,7 @@
       </el-form>
     </main>
     <footer class="safety-platform-container__footer">
-      <el-button type="primary" @click="$router.push({ name: 'listResponsibilities:nonPublic' })">返回</el-button>
+      <el-button type="primary" @click="$router.push({ name: 'areaResponsibilities:nonPublic' })">返回</el-button>
     </footer>
   </div>
 </template>
@@ -155,7 +156,6 @@
         formValue.safetyCenterManager = res.safetyCenterManager ? Number(res.safetyCenterManager) : null;
         formValue.safetyDepartmentManager = res.safetyDepartmentManager ? Number(res.safetyDepartmentManager) : null;
         formValue.safetySpecificPerson = res.safetySpecificPerson ? Number(res.safetySpecificPerson) : null;
-
         // 3. 补全人员名单以显示姓名
         if (formValue.safetyResponsibleCenter) {
           getUserData(safetyCenterManagerOptions, formValue.safetyResponsibleCenter);

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

@@ -11,14 +11,14 @@
         <el-form-item label="楼号" prop="buildingNo">
           <el-input v-model="formValue.buildingNo" size="large" placeholder="请输入楼号" style="width: 50%" />
         </el-form-item>
-        <el-form-item label="楼宇/区域" prop="buildingArea">
-          <el-input v-model="formValue.buildingArea" size="large" placeholder="请输入楼宇/区域" style="width: 50%" />
+        <el-form-item label="楼层" prop="buildingArea">
+          <el-input v-model="formValue.buildingArea" size="large" placeholder="请输入楼层" style="width: 50%" />
         </el-form-item>
-        <el-form-item label="楼层/房号" prop="floorRoomNo">
-          <el-input v-model="formValue.floorRoomNo" size="large" placeholder="请输入楼层/房号" style="width: 50%" />
+        <el-form-item label="房间/区域" prop="floorRoomNo">
+          <el-input v-model="formValue.floorRoomNo" size="large" placeholder="请输入房间/区域" style="width: 50%" />
         </el-form-item>
-        <el-form-item label="名称/功能" prop="nameFunction">
-          <el-input v-model="formValue.nameFunction" size="large" placeholder="请输入名称/功能" style="width: 50%" />
+        <el-form-item label="功能名称" prop="nameFunction">
+          <el-input v-model="formValue.nameFunction" size="large" placeholder="请输入功能名称" style="width: 50%" />
         </el-form-item>
 
         <el-form-item label="安全责任所/中心" prop="safetyResponsibleCenter">

src/views/production-safety/implement-safety-duty/non-public-list-responsibilities/change.vue

@@ -11,13 +11,13 @@
         <el-form-item label="楼号">
           <el-input v-model="formValue.buildingNo" disabled size="large" style="width: 50%" />
         </el-form-item>
-        <el-form-item label="楼宇/区域">
+        <el-form-item label="楼层">
           <el-input v-model="formValue.buildingArea" disabled size="large" style="width: 50%" />
         </el-form-item>
-        <el-form-item label="楼层/房号">
+        <el-form-item label="房间/区域">
           <el-input v-model="formValue.floorRoomNo" disabled size="large" style="width: 50%" />
         </el-form-item>
-        <el-form-item label="名称/功能">
+        <el-form-item label="功能名称">
           <el-input v-model="formValue.nameFunction" disabled size="large" style="width: 50%" />
         </el-form-item>
 
@@ -37,7 +37,7 @@
         <el-form-item label="安全责任所/中心负责人">
           <el-select v-model="formValue.safetyCenterManager" disabled size="large" style="width: 50%">
             <el-option
-              v-for="item in oldCenterManagerOptions"
+              v-for="item in safetyCenterManagerOptions"
               :key="item.value"
               :label="item.label"
               :value="item.value"
@@ -45,6 +45,34 @@
           </el-select>
         </el-form-item>
 
+        <el-form-item label="安全责任部门">
+          <el-cascader
+            disabled
+            v-model="formValue.safetyResponsibleDepartmentId"
+            style="width: 50%"
+            size="large"
+            :options="firstLevelDepts"
+            :props="cascaderProp"
+            :show-all-levels="false"
+          />
+        </el-form-item>
+
+        <el-form-item label="安全责任部门负责人">
+          <el-select disabled v-model="formValue.safetyDepartmentManager" size="large" style="width: 50%">
+            <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="安全具体责任人">
+          <el-select disabled v-model="formValue.safetySpecificPerson" size="large" style="width: 50%">
+            <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="安全具体责任人联系方式">
+          <el-input disabled v-model="formValue.safetyPersonContact" size="large" style="width: 50%" />
+        </el-form-item>
+
         <h5 style="margin: 30px 0; font-weight: bold; color: #409eff">信息变更</h5>
 
         <el-form-item label="变更后的安全责任部门" prop="safetyResponsibleDepartmentTodo">
@@ -133,6 +161,11 @@
     safetyResponsibleCenter: '',
     safetyResponsibleCenterId: [],
     safetyCenterManager: null as number | null,
+    safetyResponsibleDepartment: '',
+    safetyResponsibleDepartmentId: [],
+    safetyDepartmentManager: null as number | null,
+    safetySpecificPerson: null as number | null,
+    safetyPersonContact: '',
     // 变更数据
     safetyResponsibleDepartmentTodo: '',
     safetyResponsibleDepartmentIdTodo: [],
@@ -185,6 +218,34 @@
   };
 
   // 详情回显
+  //   const handlAreaCheckListQueryDetail = async () => {
+  //     const id = route.query.id;
+  //     if (!id) return;
+
+  //     try {
+  //       const res: any = await areaCheckListQueryDetail({ id });
+  //       if (res) {
+  //         Object.assign(formValue, res);
+
+  //         // 1. 解析旧部门级联路径
+  //         if (typeof res.safetyResponsibleCenterId === 'string') {
+  //           formValue.safetyResponsibleCenterId = JSON.parse(res.safetyResponsibleCenterId);
+  //         }
+
+  //         // 2. 加载旧负责人列表以显示名称
+  //         if (formValue.safetyResponsibleCenter) {
+  //           getUserData(oldCenterManagerOptions, formValue.safetyResponsibleCenter);
+  //         }
+
+  //         // 3. 纠正 ID 类型
+  //         if (formValue.safetyCenterManager) formValue.safetyCenterManager = Number(formValue.safetyCenterManager);
+  //       }
+  //     } catch (err) {
+  //       ElMessage.error('加载详情失败');
+  //     }
+  //   };
+  const safetyCenterManagerOptions = ref<any[]>([]);
+  const userOptions = ref<any[]>([]);
   const handlAreaCheckListQueryDetail = async () => {
     const id = route.query.id;
     if (!id) return;
@@ -193,22 +254,36 @@
       const res: any = await areaCheckListQueryDetail({ id });
       if (res) {
         Object.assign(formValue, res);
-
-        // 1. 解析旧部门级联路径
-        if (typeof res.safetyResponsibleCenterId === 'string') {
-          formValue.safetyResponsibleCenterId = JSON.parse(res.safetyResponsibleCenterId);
+        formValue.changeReason = ''; // 确保变更原因初始为空
+        formValue.safetySpecificPersonTodo = null; // 确保变更具体
+        formValue.safetyResponsibleDepartmentIdTodo = []; // 确保变更部门初始为空
+        // 1. 解析级联 ID 数组
+        try {
+          if (typeof res.safetyResponsibleCenterId === 'string') {
+            formValue.safetyResponsibleCenterId = JSON.parse(res.safetyResponsibleCenterId);
+          }
+          if (typeof res.safetyResponsibleDepartmentId === 'string') {
+            formValue.safetyResponsibleDepartmentId = JSON.parse(res.safetyResponsibleDepartmentId);
+          }
+        } catch (e) {
+          console.error('解析部门ID路径失败', e);
         }
 
-        // 2. 加载旧负责人列表以显示名称
+        // 2. 类型转换
+        formValue.safetyCenterManager = res.safetyCenterManager ? Number(res.safetyCenterManager) : null;
+        formValue.safetyDepartmentManager = res.safetyDepartmentManager ? Number(res.safetyDepartmentManager) : null;
+        formValue.safetySpecificPerson = res.safetySpecificPerson ? Number(res.safetySpecificPerson) : null;
+
+        // 3. 补全人员名单以显示姓名
         if (formValue.safetyResponsibleCenter) {
-          getUserData(oldCenterManagerOptions, formValue.safetyResponsibleCenter);
+          getUserData(safetyCenterManagerOptions, formValue.safetyResponsibleCenter);
+        }
+        if (formValue.safetyResponsibleDepartment) {
+          getUserData(userOptions, formValue.safetyResponsibleDepartment);
         }
-
-        // 3. 纠正 ID 类型
-        if (formValue.safetyCenterManager) formValue.safetyCenterManager = Number(formValue.safetyCenterManager);
       }
     } catch (err) {
-      ElMessage.error('加载详情失败');
+      ElMessage.error('获取详情失败');
     }
   };
 

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

@@ -11,14 +11,14 @@
         <el-form-item label="楼号" prop="buildingNo">
           <el-input v-model="formValue.buildingNo" size="large" placeholder="请输入楼号" style="width: 50%" />
         </el-form-item>
-        <el-form-item label="楼宇/区域" prop="buildingArea">
-          <el-input v-model="formValue.buildingArea" size="large" placeholder="请输入楼宇/区域" style="width: 50%" />
+        <el-form-item label="楼层" prop="buildingArea">
+          <el-input v-model="formValue.buildingArea" size="large" placeholder="请输入楼层" style="width: 50%" />
         </el-form-item>
-        <el-form-item label="楼层/房号" prop="floorRoomNo">
-          <el-input v-model="formValue.floorRoomNo" size="large" placeholder="请输入楼层/房号" style="width: 50%" />
+        <el-form-item label="房间/区域" prop="floorRoomNo">
+          <el-input v-model="formValue.floorRoomNo" size="large" placeholder="请输入房间/区域" style="width: 50%" />
         </el-form-item>
-        <el-form-item label="名称/功能" prop="nameFunction">
-          <el-input v-model="formValue.nameFunction" size="large" placeholder="请输入名称/功能" style="width: 50%" />
+        <el-form-item label="功能名称" prop="nameFunction">
+          <el-input v-model="formValue.nameFunction" size="large" placeholder="请输入功能名称" style="width: 50%" />
         </el-form-item>
 
         <el-form-item label="安全责任所/中心" prop="safetyResponsibleCenter">

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

@@ -1,374 +1,414 @@
 <template>
-    <div class="safety-platform-container">
-        <header class="safety-platform-container__header">
-            <div class="breadcrumb-title">{{ $route.meta.title }}</div>
-            <el-tabs v-model="activeTab" @tab-change="handleTabChange">
-                <el-tab-pane label="公共区域" :name="1" />
-                <el-tab-pane label="非公共区域" :name="2" />
-            </el-tabs>
-        </header>
-        <main class="safety-platform-container__main">
-            <div style="margin-bottom: 20px">
-                <el-button type="primary" @click="
-                    $router.push({
-                        name: 'addResponsibilities:nonPublic',
-                    })
-                    ">添加
-                </el-button>
-            </div>
-            <div class="search-form">
-                <el-form :inline="true">
-                    <el-form-item label="区域名称">
-                        <el-input v-model="queryParams.queryParam.nameFunction" 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>
+  <div class="safety-platform-container">
+    <header class="safety-platform-container__header">
+      <div class="breadcrumb-title">{{ $route.meta.title }}</div>
+      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
+        <el-tab-pane label="公共区域" :name="1" />
+        <el-tab-pane label="非公共区域" :name="2" />
+      </el-tabs>
+    </header>
+    <main class="safety-platform-container__main">
+      <div style="margin-bottom: 20px">
+        <el-button
+          type="primary"
+          @click="
+            $router.push({
+              name: 'addResponsibilities:nonPublic',
+            })
+          "
+          >添加
+        </el-button>
+      </div>
+      <div class="search-form">
+        <el-form :inline="true">
+          <el-form-item label="区域名称">
+            <el-input v-model="queryParams.queryParam.nameFunction" 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.safetyResponsibleDepartmentId" style="width: 170px"
-                            ref="cascaderRef" :options="firstLevelDepts" :props="cascaderProp" :show-all-levels="false"
-                            placeholder="部门名称" filterable @change="handleChangeDept" />
-                    </el-form-item>
-                    <el-form-item label="安全具体责任人" prop="safetyResponsibleBuilding">
-                        <el-select v-model="queryParams.queryParam.safetySpecificPerson" placeholder="请选择"
-                            style="width: 170px" filterable>
-                            <el-option v-for="item in userOptions" :key="item.value" :label="item.label"
-                                :value="item.value" />
-                        </el-select>
-                    </el-form-item>
-                </el-form>
+          <el-form-item label="安全责任部门">
+            <el-cascader
+              v-model="queryParams.queryParam.safetyResponsibleDepartmentId"
+              style="width: 170px"
+              ref="cascaderRef"
+              :options="firstLevelDepts"
+              :props="cascaderProp"
+              :show-all-levels="false"
+              placeholder="部门名称"
+              filterable
+              @change="handleChangeDept"
+            />
+          </el-form-item>
+          <el-form-item label="安全具体责任人" prop="safetyResponsibleBuilding">
+            <el-select
+              v-model="queryParams.queryParam.safetySpecificPerson"
+              placeholder="请选择"
+              style="width: 170px"
+              filterable
+            >
+              <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-form>
 
-                <div>
-                    <!-- <el-button @click="batchImportVisible = true">导入</el-button>
+        <div>
+          <!-- <el-button @click="batchImportVisible = true">导入</el-button>
           <el-button type="primary" @click="handleDownload">导出</el-button> -->
 
-                    <el-button type="primary" @click="queryTableList">查询</el-button>
-                    <el-button @click="handleRestParams">重置</el-button>
-                </div>
-            </div>
+          <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="buildingNo" width="80" />
-                    <el-table-column label="楼层" prop="buildingArea" width="100" />
-                    <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="changeReason" width="170" />
-                    <el-table-column label="状态" prop="statusName" width="100" />
-                    <el-table-column fixed="right" min-width="240" label="操作">
-                        <template #default="scope">
-                            <template v-if="scope.row.status === 1">
-                                <el-button type="primary" link @click="
-                                    $router.push({
-                                        name: 'editResponsibilities:nonPublic',
-                                        query: {
-                                            id: scope.row.id,
-                                        },
-                                    })
-                                    ">编辑
-                                </el-button>
-                                <el-popconfirm title="确定要删除吗?" @confirm="handleConfirmDeleteRow(scope)">
-                                    <template #reference>
-                                        <el-button type="primary" link>删除</el-button>
-                                    </template>
-                                </el-popconfirm>
+      <div class="table-content">
+        <el-table :data="tableData.data">
+          <el-table-column type="index" label="序号" width="80" />
+          <el-table-column label="楼号" prop="buildingNo" width="80" />
+          <el-table-column label="楼层" prop="buildingArea" width="100" />
+          <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="changeReason" width="170" />
+          <el-table-column label="状态" prop="statusName" width="100" />
+          <el-table-column fixed="right" min-width="240" label="操作">
+            <template #default="scope">
+              <template v-if="scope.row.status === 1">
+                <el-button
+                  type="primary"
+                  link
+                  @click="
+                    $router.push({
+                      name: 'editResponsibilities:nonPublic',
+                      query: {
+                        id: scope.row.id,
+                      },
+                    })
+                  "
+                  >编辑
+                </el-button>
+                <el-popconfirm title="确定要删除吗?" @confirm="handleConfirmDeleteRow(scope)">
+                  <template #reference>
+                    <el-button type="primary" link>删除</el-button>
+                  </template>
+                </el-popconfirm>
 
-                                <el-button type="primary" link @click="
-                                    $router.push({
-                                        name: 'changeResponsibilities:nonPublic',
-                                        query: {
-                                            id: scope.row.id,
-                                        },
-                                    })
-                                    ">变更</el-button>
-                            </template>
-                            <template v-if="scope.row.canChange === true">
-                                <el-button type="primary" link
-                                    @click="handleAreaCheckListApprove(scope, 1)">确认</el-button>
-                                <el-button type="primary" link
-                                    @click="handleAreaCheckListApprove(scope, 0)">拒绝</el-button>
-                            </template>
-                            <!-- <template v-if="scope.row.status === 3">
+                <el-button
+                  type="primary"
+                  link
+                  @click="
+                    $router.push({
+                      name: 'changeResponsibilities:nonPublic',
+                      query: {
+                        id: scope.row.id,
+                      },
+                    })
+                  "
+                  >变更</el-button
+                >
+              </template>
+              <template v-if="scope.row.canChange === true">
+                <el-button type="primary" link @click="handleAreaCheckListApprove(scope, 1)">确认</el-button>
+                <el-button type="primary" link @click="handleAreaCheckListApprove(scope, 0)">拒绝</el-button>
+              </template>
+              <!-- <template v-if="scope.row.status === 3">
                                 <el-button type="primary" link>变更</el-button>
                             </template> -->
-                            <el-button type="primary" link @click="
-                                $router.push({
-                                    name: 'viewResponsibilities:nonPublic',
-                                    query: {
-                                        id: scope.row.id,
-                                    },
-                                })
-                                ">查看</el-button>
-                            <el-button link type="primary" v-if="scope.row.creatBy === id && scope.row.status === 2"
-                                @click="handleAreaCheckListApprove(scope, 0)">
-                                撤回
-                            </el-button>
-                        </template>
-                    </el-table-column>
-                </el-table>
-            </div>
-            <div class="pagination-container" v-if="tableData.total > 0">
-                <el-pagination background layout="prev, pager, next, jumper,sizes, total"
-                    :current-page="queryParams.pageNumber" :page-size="queryParams.pageSize" :total="tableData.total"
-                    :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange"
-                    @current-change="handleCurrentChange" />
-            </div>
-        </main>
-    </div>
-    <BatchImport :visible="batchImportVisible" :importApiUrl="importApiUrl" :templateUrl="templateUrl"
-        :templateName="'责任清单-批量导入模版'" @close="() => (batchImportVisible = false)" @update="handleUpdate" />
+              <el-button
+                type="primary"
+                link
+                @click="
+                  $router.push({
+                    name: 'viewResponsibilities:nonPublic',
+                    query: {
+                      id: scope.row.id,
+                    },
+                  })
+                "
+                >查看</el-button
+              >
+              <el-button
+                link
+                type="primary"
+                v-if="scope.row.creatBy === id && scope.row.status === 2"
+                @click="handleAreaCheckListApprove(scope, 0)"
+              >
+                撤回
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="pagination-container" v-if="tableData.total > 0">
+        <el-pagination
+          background
+          layout="prev, pager, next, jumper,sizes, total"
+          :current-page="queryParams.pageNumber"
+          :page-size="queryParams.pageSize"
+          :total="tableData.total"
+          :page-sizes="[10, 20, 50, 100]"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </main>
+  </div>
+  <BatchImport
+    :visible="batchImportVisible"
+    :importApiUrl="importApiUrl"
+    :templateUrl="templateUrl"
+    :templateName="'责任清单-批量导入模版'"
+    @close="() => (batchImportVisible = false)"
+    @update="handleUpdate"
+  />
 </template>
 <script lang="ts" setup>
-import { onMounted, ref, reactive } from 'vue';
-import { ElMessage } from 'element-plus';
-import { useRouter } from 'vue-router';
-import {
+  import { onMounted, ref, reactive } from 'vue';
+  import { ElMessage } from 'element-plus';
+  import { useRouter } from 'vue-router';
+  import {
     areaCheckListQueryPage,
     areaCheckListApprove,
     areaCheckListDelete,
     areaCheckListExportArea,
     queryAvailableUserList,
-} from '@/api/production-safety/responsibility-implementation';
-import urlJoin from 'url-join';
-import { BatchImport } from '@/components/batch-import';
+  } from '@/api/production-safety/responsibility-implementation';
+  import urlJoin from 'url-join';
+  import { BatchImport } from '@/components/batch-import';
 
-import { unformatAttachment } from '@/components/UploadFiles/utils';
-import { downloadFile } from '@/views/disaster/utils';
-import { useGlobSetting } from '@/hooks/setting';
-import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';
-import { getAllDepartments } from '@/api/auth/dept';
-import { useUserInfoHook } from '@/views/disaster/hooks';
+  import { unformatAttachment } from '@/components/UploadFiles/utils';
+  import { downloadFile } from '@/views/disaster/utils';
+  import { useGlobSetting } from '@/hooks/setting';
+  import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';
+  import { getAllDepartments } from '@/api/auth/dept';
+  import { useUserInfoHook } from '@/views/disaster/hooks';
 
-const { id } = useUserInfoHook();
-const router = useRouter();
-const activeTab = ref(2);
-const queryParams = reactive<any>({
+  const { id } = useUserInfoHook();
+  const router = useRouter();
+  const activeTab = ref(2);
+  const queryParams = reactive<any>({
     pageNumber: 1,
     pageSize: 10,
     queryParam: {
-        type: 2,
-        nameFunction: '',
-        status: '',
-        safetyResponsibleDepartmentId: [],
-        safetySpecificPerson: '',
+      type: 2,
+      nameFunction: '',
+      status: '',
+      safetyResponsibleDepartmentId: [],
+      safetySpecificPerson: '',
     },
-});
-const cascaderRef = ref<any>(null);
-const firstLevelDepts = ref<any[]>([]);
-const cascaderProp = {
+  });
+  const cascaderRef = ref<any>(null);
+  const firstLevelDepts = ref<any[]>([]);
+  const cascaderProp = {
     expandTrigger: 'click',
     checkStrictly: true,
     // emitPath: false,
     value: 'id',
     label: 'deptName',
-};
+  };
 
-// 批量导入
-const batchImportVisible = ref(false);
-const { urlPrefix } = useGlobSetting();
-const importApiUrl = ref(urlJoin(urlPrefix, '/areaCheckList/importArea?type=2'));
-const templateUrl = ref('');
+  // 批量导入
+  const batchImportVisible = ref(false);
+  const { urlPrefix } = useGlobSetting();
+  const importApiUrl = ref(urlJoin(urlPrefix, '/areaCheckList/importArea?type=2'));
+  const templateUrl = ref('');
 
-const handleUpdate = () => {
+  const handleUpdate = () => {
     batchImportVisible.value = false;
     queryTableList();
-};
+  };
 
-const tableData = reactive({
+  const tableData = reactive({
     data: [],
     total: 0,
-});
-const userOptions = ref<any[]>([]);
+  });
+  const userOptions = ref<any[]>([]);
 
-const handleChangeDept = () => {
+  const handleChangeDept = () => {
     const deptInfo = cascaderRef.value?.getCheckedNodes();
     if (deptInfo?.[0]) {
-        // queryParams.queryParam.department = deptInfo[0].label;
-        queryParams.queryParam.safetyResponsibleDepartmentId = deptInfo[0].pathValues;
+      // queryParams.queryParam.department = deptInfo[0].label;
+      queryParams.queryParam.safetyResponsibleDepartmentId = deptInfo[0].pathValues;
     }
-};
-const handleTabChange = (tab) => {
+  };
+  const handleTabChange = (tab) => {
     if (tab === 1) {
-        router.push({
-            name: 'listResponsibilities:public',
-        });
+      router.push({
+        name: 'listResponsibilities:public',
+      });
     } else if (tab === 2) {
-        router.push({
-            name: 'listResponsibilities:nonPublic',
-        });
+      router.push({
+        name: 'listResponsibilities:nonPublic',
+      });
     }
-};
+  };
 
-const getDeptData = () => {
+  const getDeptData = () => {
     getAllDepartments().then((res) => {
-        firstLevelDepts.value = formatDeptTree(res);
+      firstLevelDepts.value = formatDeptTree(res);
     });
-};
+  };
 
-async function handleDownload() {
+  async function handleDownload() {
     // getQuery();
     try {
-        const res = await areaCheckListExportArea(queryParams.queryParam);
-        if (res.size === 0) return;
-        const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
-        const url = window.URL.createObjectURL(blob);
-        downloadFile(url, '责任清单.xlsx');
+      const res = await areaCheckListExportArea(queryParams.queryParam);
+      if (res.size === 0) return;
+      const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+      const url = window.URL.createObjectURL(blob);
+      downloadFile(url, '责任清单.xlsx');
     } catch (e) {
-        ElMessage.error('下载失败');
-        console.log(e);
+      ElMessage.error('下载失败');
+      console.log(e);
     }
-}
+  }
 
-const handleAreaCheckListApprove = (scope, approveType) => {
+  const handleAreaCheckListApprove = (scope, approveType) => {
     areaCheckListApprove({
-        id: scope.row.id,
-        approveType,
-        refuseReason: null,
+      id: scope.row.id,
+      approveType,
+      refuseReason: null,
     }).then(() => {
-        if (approveType === 1) {
-            ElMessage.success('请尽快修改该责任清单的安全责任所/中心、安全责任部门及相关负责人信息');
-        } else {
-            ElMessage.success('操作成功!');
-        }
-        queryTableList();
+      if (approveType === 1) {
+        ElMessage.success('请尽快修改该责任清单的安全责任所/中心、安全责任部门及相关负责人信息');
+      } else {
+        ElMessage.success('操作成功!');
+      }
+      queryTableList();
     });
-};
-const handleQueryAvailableUserList = (deptName = '', realname = '') => {
+  };
+  const handleQueryAvailableUserList = (deptName = '', realname = '') => {
     queryAvailableUserList({
-        pageNumber: 1,
-        pageSize: 200,
-        queryParam: {
-            deptName,
-            realname,
-        },
+      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,
-        }));
+      userOptions.value = (res.records || []).map((u: any) => ({
+        value: u.userId || u.id,
+        label: u.realname,
+      }));
     });
-};
+  };
 
-const handleSizeChange = (value) => {
+  const handleSizeChange = (value) => {
     queryParams.pageSize = value;
     queryTableList();
-};
-const handleCurrentChange = (value) => {
+  };
+  const handleCurrentChange = (value) => {
     queryParams.pageNumber = value;
     queryTableList();
-};
+  };
 
-const handleConfirmDeleteRow = (scope) => {
+  const handleConfirmDeleteRow = (scope) => {
     areaCheckListDelete(scope.row.id).then(() => {
-        ElMessage.success('删除成功!');
-        queryTableList();
+      ElMessage.success('删除成功!');
+      queryTableList();
     });
-};
-const queryTableList = () => {
+  };
+  const queryTableList = () => {
     areaCheckListQueryPage(queryParams).then((res) => {
-        tableData.data = res.records;
-        tableData.total = res.totalRow;
+      tableData.data = res.records;
+      tableData.total = res.totalRow;
     });
-};
-const handleRestParams = () => {
+  };
+  const handleRestParams = () => {
     Object.assign(queryParams, {
-        pageNumber: 1,
-        pageSize: 10,
-        queryParam: {
-            ...queryParams.queryParam,
-            status: '',
-            nameFunction: '',
-            safetyResponsibleDepartmentId: [],
-            safetySpecificPerson: '',
-        },
+      pageNumber: 1,
+      pageSize: 10,
+      queryParam: {
+        ...queryParams.queryParam,
+        status: '',
+        nameFunction: '',
+        safetyResponsibleDepartmentId: [],
+        safetySpecificPerson: '',
+      },
     });
     queryTableList();
-};
+  };
 
-onMounted(async () => {
+  onMounted(async () => {
     await getDeptData();
     await handleQueryAvailableUserList();
     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 *;
+  @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) {
+  :deep(.el-tabs__header) {
     margin: 0;
-}
+  }
 
-:deep(.el-tabs__item) {
+  :deep(.el-tabs__item) {
     font-size: 14px !important;
-}
+  }
 
-:deep(.flexContent) {
+  :deep(.flexContent) {
     display: flex;
-}
+  }
 
-:deep(.breadcrumb .title) {
+  :deep(.breadcrumb .title) {
     margin-left: 0;
-}
+  }
 
-:deep(.el-form) {
+  :deep(.el-form) {
     flex: 1;
     display: flex;
     row-gap: 15px;
     flex-wrap: wrap;
-}
+  }
 
-:deep(.el-form-item) {
+  :deep(.el-form-item) {
     margin-bottom: 0;
-}
+  }
 
-:deep(main) {
+  :deep(main) {
     display: flex;
     flex-direction: column;
-}
+  }
 
-.search-form {
+  .search-form {
     min-width: 800px;
     display: flex;
 
     justify-content: space-between;
     align-items: flex-end;
     margin-bottom: 20px;
-}
+  }
 
-.button-content {
+  .button-content {
     margin-bottom: 20px;
-}
+  }
 
-.table-content {
+  .table-content {
     flex: 1;
     overflow: hidden;
     overflow-y: auto;
-}
+  }
 
-.page-content {
+  .page-content {
     display: flex;
     justify-content: flex-end;
-}
+  }
 
-.pagination-container {
+  .pagination-container {
     margin-top: 20px;
     display: flex;
     justify-content: flex-end;
-}
+  }
 </style>

src/views/production-safety/implement-safety-duty/non-public-list-responsibilities/view.vue

@@ -11,13 +11,13 @@
         <el-form-item label="楼号">
           <el-input disabled v-model="formValue.buildingNo" size="large" style="width: 50%" />
         </el-form-item>
-        <el-form-item label="楼宇/区域">
+        <el-form-item label="楼层">
           <el-input disabled v-model="formValue.buildingArea" size="large" style="width: 50%" />
         </el-form-item>
-        <el-form-item label="楼层/房号">
+        <el-form-item label="房间/区域">
           <el-input disabled v-model="formValue.floorRoomNo" size="large" style="width: 50%" />
         </el-form-item>
-        <el-form-item label="名称/功能">
+        <el-form-item label="功能名称">
           <el-input disabled v-model="formValue.nameFunction" size="large" style="width: 50%" />
         </el-form-item>
 

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

@@ -1,44 +1,62 @@
 <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" label-width="auto" :model="formValue" :rules="rules">
-                <!-- <el-form-item label="楼号" prop="buildingNo">
+  <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" label-width="auto" :model="formValue" :rules="rules">
+        <!-- <el-form-item label="楼号" prop="buildingNo">
                     <el-input v-model="formValue.buildingNo" size="large" placeholder="请输入楼号" style="width: 50%" />
                 </el-form-item> -->
-                <el-form-item label="楼宇/区域" prop="buildingArea">
-                    <el-input v-model="formValue.buildingArea" size="large" placeholder="请输入楼宇/区域" style="width: 50%" />
-                </el-form-item>
-                <el-form-item label="楼层/房号" prop="floorRoomNo">
-                    <el-input v-model="formValue.floorRoomNo" size="large" placeholder="请输入楼层/房号" style="width: 50%" />
-                </el-form-item>
-                <el-form-item label="名称/功能" prop="nameFunction">
-                    <el-input v-model="formValue.nameFunction" size="large" placeholder="请输入名称/功能" style="width: 50%" />
-                </el-form-item>
+        <el-form-item label="楼宇/区域" prop="buildingArea">
+          <el-input v-model="formValue.buildingArea" size="large" placeholder="请输入楼宇/区域" style="width: 50%" />
+        </el-form-item>
+        <el-form-item label="楼层/房号" prop="floorRoomNo">
+          <el-input v-model="formValue.floorRoomNo" size="large" placeholder="请输入楼层/房号" style="width: 50%" />
+        </el-form-item>
+        <el-form-item label="名称/功能" prop="nameFunction">
+          <el-input v-model="formValue.nameFunction" size="large" placeholder="请输入名称/功能" style="width: 50%" />
+        </el-form-item>
 
-                <el-form-item label="安全责任所/中心" prop="safetyResponsibleCenter">
-                    <el-cascader v-model="formValue.safetyResponsibleCenterId" style="width: 50%" size="large"
-                        :ref="(el) => (cascaderRef['safetyResponsibleCenter'] = el)" :options="firstLevelDepts"
-                        :props="cascaderProp" :show-all-levels="false" placeholder="请选择安全责任部门" filterable clearable
-                        @change="(val) => handleChangeDept(val, 'safetyResponsibleCenter')" />
-                </el-form-item>
+        <el-form-item label="安全责任所/中心" prop="safetyResponsibleCenter">
+          <el-cascader
+            v-model="formValue.safetyResponsibleCenterId"
+            style="width: 50%"
+            size="large"
+            :ref="(el) => (cascaderRef['safetyResponsibleCenter'] = el)"
+            :options="firstLevelDepts"
+            :props="cascaderProp"
+            :show-all-levels="false"
+            placeholder="请选择安全责任部门"
+            filterable
+            clearable
+            @change="(val) => handleChangeDept(val, 'safetyResponsibleCenter')"
+          />
+        </el-form-item>
 
-                <el-form-item label="安全责任所/中心负责人" prop="safetyCenterManager">
-                    <el-select v-model="formValue.safetyCenterManager" placeholder="请选择" size="large" style="width: 50%"
-                        filterable
-                        @change="(val) => syncUserName(safetyCenterManagerOptions, val, 'safetyCenterManagerName')">
-                        <el-option v-for="item in safetyCenterManagerOptions" :key="item.value" :label="item.label"
-                            :value="item.value" />
-                    </el-select>
-                </el-form-item>
+        <el-form-item label="安全责任所/中心负责人" prop="safetyCenterManager">
+          <el-select
+            v-model="formValue.safetyCenterManager"
+            placeholder="请选择"
+            size="large"
+            style="width: 50%"
+            filterable
+            @change="(val) => syncUserName(safetyCenterManagerOptions, val, 'safetyCenterManagerName')"
+          >
+            <el-option
+              v-for="item in safetyCenterManagerOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
 
-                <el-form-item label="安全责任部门" prop="safetyResponsibleDepartment">
-                    <!-- <el-select
+        <el-form-item label="安全责任部门" prop="safetyResponsibleDepartment">
+          <!-- <el-select
             v-model="formValue.safetyResponsibleDepartment"
             placeholder="请选择"
             size="large"
@@ -52,70 +70,91 @@
               :value="item.deptName"
             />
           </el-select> -->
-                    <el-cascader v-model="formValue.safetyResponsibleDepartmentId" style="width: 50%" size="large"
-                        :ref="(el) => (cascaderRef['safetyResponsibleDepartment'] = el)" :options="firstLevelDepts"
-                        :props="cascaderProp" :show-all-levels="false" placeholder="请选择安全责任部门" filterable clearable
-                        @change="(val) => handleChangeDept(val, 'safetyResponsibleDepartment')" />
-                </el-form-item>
+          <el-cascader
+            v-model="formValue.safetyResponsibleDepartmentId"
+            style="width: 50%"
+            size="large"
+            :ref="(el) => (cascaderRef['safetyResponsibleDepartment'] = el)"
+            :options="firstLevelDepts"
+            :props="cascaderProp"
+            :show-all-levels="false"
+            placeholder="请选择安全责任部门"
+            filterable
+            clearable
+            @change="(val) => handleChangeDept(val, 'safetyResponsibleDepartment')"
+          />
+        </el-form-item>
 
-                <el-form-item label="安全责任部门负责人" prop="safetyDepartmentManager">
-                    <el-select v-model="formValue.safetyDepartmentManager" placeholder="请选择" size="large"
-                        style="width: 50%" filterable
-                        @change="(val) => syncUserName(userOptions, val, 'safetyDepartmentManagerName')">
-                        <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="safetyDepartmentManager">
+          <el-select
+            v-model="formValue.safetyDepartmentManager"
+            placeholder="请选择"
+            size="large"
+            style="width: 50%"
+            filterable
+            @change="(val) => syncUserName(userOptions, val, 'safetyDepartmentManagerName')"
+          >
+            <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="safetySpecificPerson">
-                    <el-select v-model="formValue.safetySpecificPerson" placeholder="请选择" size="large"
-                        style="width: 50%" filterable
-                        @change="(val) => syncUserName(userOptions, val, 'safetySpecificPersonName')">
-                        <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="safetySpecificPerson">
+          <el-select
+            v-model="formValue.safetySpecificPerson"
+            placeholder="请选择"
+            size="large"
+            style="width: 50%"
+            filterable
+            @change="(val) => syncUserName(userOptions, val, 'safetySpecificPersonName')"
+          >
+            <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="safetyPersonContact">
-                    <el-input v-model="formValue.safetyPersonContact" size="large" placeholder="请输入联系方式"
-                        style="width: 50%" />
-                </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>
+        <el-form-item label="安全具体责任人联系方式" prop="safetyPersonContact">
+          <el-input
+            v-model="formValue.safetyPersonContact"
+            size="large"
+            placeholder="请输入联系方式"
+            style="width: 50%"
+          />
+        </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 { areaCheckListSavaArea, queryAvailableUserList } from '@/api/production-safety/responsibility-implementation';
+  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 { areaCheckListSavaArea, queryAvailableUserList } from '@/api/production-safety/responsibility-implementation';
 
-const router = useRouter();
-const formRef = ref<any>(null);
-const submiting = ref(false);
+  const router = useRouter();
+  const formRef = ref<any>(null);
+  const submiting = ref(false);
 
-const userOptions = ref<any[]>([]);
-const firstLevelDepts = ref<any[]>([]);
-const cascaderProp = {
+  const userOptions = ref<any[]>([]);
+  const firstLevelDepts = ref<any[]>([]);
+  const cascaderProp = {
     expandTrigger: 'click',
     checkStrictly: true,
     // emitPath: false,
     value: 'id',
     label: 'deptName',
-};
+  };
 
-const cascaderRef = ref({});
+  const cascaderRef = ref({});
 
-const safetyCenterManagerOptions = ref<any[]>([]);
+  const safetyCenterManagerOptions = ref<any[]>([]);
 
-const formValue = reactive({
+  const formValue = reactive({
     buildingNo: '',
     buildingArea: '',
     floorRoomNo: '',
@@ -131,9 +170,9 @@ const formValue = reactive({
     safetySpecificPerson: null as number | null,
     safetySpecificPersonName: '',
     safetyPersonContact: '',
-});
+  });
 
-const rules = reactive({
+  const rules = reactive({
     // buildingNo: [{ required: true, message: '请输入楼号' }],
     buildingArea: [{ required: true, message: '请输入楼宇/区域' }],
     floorRoomNo: [{ required: true, message: '请输入楼层/房号' }],
@@ -147,137 +186,138 @@ const rules = reactive({
 
     safetySpecificPerson: [{ required: true, message: '请选择安全具体责任人', trigger: 'change' }],
     safetyPersonContact: [
-        { required: true, message: '请输入安全具体责任人联系方式' },
-        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码格式' },
+      { required: true, message: '请输入安全具体责任人联系方式' },
+      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码格式' },
     ],
-});
+  });
 
-// 获取部门数据
-const getDeptData = () => {
+  // 获取部门数据
+  const getDeptData = () => {
     getAllDepartments().then((res) => {
-        firstLevelDepts.value = formatDeptTree(res);
+      firstLevelDepts.value = formatDeptTree(res);
     });
-};
+  };
 
-const handleChangeDept = (val, prop) => {
+  const handleChangeDept = (val, prop) => {
     const cascader = cascaderRef.value?.[prop];
     const deptInfo = cascader?.getCheckedNodes();
     formValue[prop] = deptInfo[0]?.label;
     formRef.value.validateField(prop);
     nextTick(() => {
-        handleQueryAvailableUserList(deptInfo[0]?.label, prop);
+      handleQueryAvailableUserList(deptInfo[0]?.label, prop);
     });
-};
+  };
 
-const handleQueryAvailableUserList = (value, prop) => {
+  const handleQueryAvailableUserList = (value, prop) => {
     switch (prop) {
-        case 'safetyResponsibleCenter':
-            formValue.safetyCenterManager = null;
-            getUserData(safetyCenterManagerOptions, value);
-            break;
-        case 'safetyResponsibleDepartment':
-            formValue.safetySpecificPerson = null;
-            formValue.safetyDepartmentManager = null;
-            getUserData(userOptions, value);
-            break;
-        default:
-            break;
+      case 'safetyResponsibleCenter':
+        formValue.safetyCenterManager = null;
+        getUserData(safetyCenterManagerOptions, value);
+        break;
+      case 'safetyResponsibleDepartment':
+        formValue.safetySpecificPerson = null;
+        formValue.safetyDepartmentManager = null;
+        getUserData(userOptions, value);
+        break;
+      default:
+        break;
     }
-};
+  };
 
-const getUserData = (optionList, deptName, realname = '') => {
+  const getUserData = (optionList, deptName, realname = '') => {
     queryAvailableUserList({
-        pageNumber: 1,
-        pageSize: 200,
-        queryParam: {
-            deptName,
-            realname,
-        },
+      pageNumber: 1,
+      pageSize: 200,
+      queryParam: {
+        deptName,
+        realname,
+      },
     }).then((res: any) => {
-        optionList['value'] = (res.records || []).map((u: any) => ({
-            value: u.id,
-            label: u.realname,
-        }));
+      optionList['value'] = (res.records || []).map((u: any) => ({
+        value: u.id,
+        label: u.realname,
+      }));
     });
-};
+  };
 
-const syncUserName = (optionList, id: number, nameField: string) => {
+  const syncUserName = (optionList, id: number, nameField: string) => {
     const user = optionList?.find((u) => u.value === id);
     if (user) {
-        formValue[nameField] = user.label;
-        console.log(formValue[nameField]);
+      formValue[nameField] = user.label;
+      console.log(formValue[nameField]);
     }
-};
+  };
 
-// const handleSpecificPersonChange = (id: number) => {
-//   const user = userOptions.value.find((u) => u.id === id);
-//   if (user) {
-//     formValue.safetySpecificPersonName = user.name;
-//     formValue.safetyPersonContact = user.mobile;
-//   }
-// };
+  // const handleSpecificPersonChange = (id: number) => {
+  //   const user = userOptions.value.find((u) => u.id === id);
+  //   if (user) {
+  //     formValue.safetySpecificPersonName = user.name;
+  //     formValue.safetyPersonContact = user.mobile;
+  //   }
+  // };
 
-onMounted(() => {
+  onMounted(() => {
     getDeptData();
     // getUserData();
-});
+  });
 
-const handleSubmit = () => {
+  const handleSubmit = () => {
     console.log(formValue);
     formRef.value?.validate((valid: boolean) => {
-        if (valid) {
-            submiting.value = true;
-            areaCheckListSavaArea({
-                ...formValue,
-                type: 1,
-                safetyResponsibleDepartmentId: JSON.stringify(formValue.safetyResponsibleDepartmentId),
-                safetyResponsibleCenterId: JSON.stringify(formValue.safetyResponsibleCenterId),
-            })
-                .then(() => {
-                    ElMessage.success('创建成功!');
-                    router.push({ name: 'areaResponsibilities:public' });
-                })
-                .finally(() => {
-                    submiting.value = false;
-                });
-        }
+      if (valid) {
+        submiting.value = true;
+        areaCheckListSavaArea({
+          ...formValue,
+          type: 1,
+          safetyResponsibleDepartmentId: JSON.stringify(formValue.safetyResponsibleDepartmentId),
+          safetyResponsibleCenterId: JSON.stringify(formValue.safetyResponsibleCenterId),
+        })
+          .then(() => {
+            ElMessage.success('创建成功!');
+            router.push({ name: 'areaResponsibilities:public' });
+          })
+          .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 *;
+  @use '@/styles/page-main-layout.scss' as *;
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/basic-table-action.scss' as *;
 
-.editor-container {
+  .editor-container {
     border: 1px solid #dcdfe6;
     border-radius: 4px;
     margin-right: 20px;
     overflow: hidden;
-}
+  }
 
-// :deep(.breadcrumb .title) {
-//   margin-left: 0;
-// }
+  // :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;
-// }
+  // .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>
+  // .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/public-area-responsibilities/change.vue

@@ -1,95 +1,157 @@
 <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" label-width="auto" :model="formValue" :rules="rules">
-                <!-- <el-form-item label="楼号">
+  <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" label-width="auto" :model="formValue" :rules="rules">
+        <!-- <el-form-item label="楼号">
                     <el-input v-model="formValue.buildingNo" disabled size="large" style="width: 50%" />
                 </el-form-item> -->
-                <el-form-item label="楼宇/区域">
-                    <el-input v-model="formValue.buildingArea" disabled size="large" style="width: 50%" />
-                </el-form-item>
-                <el-form-item label="楼层/房号">
-                    <el-input v-model="formValue.floorRoomNo" disabled size="large" style="width: 50%" />
-                </el-form-item>
-                <el-form-item label="名称/功能">
-                    <el-input v-model="formValue.nameFunction" disabled size="large" style="width: 50%" />
-                </el-form-item>
-
-                <el-form-item label="安全责任所/中心">
-                    <el-cascader v-model="formValue.safetyResponsibleCenterId" disabled style="width: 50%" size="large"
-                        :options="firstLevelDepts" :props="cascaderProp" :show-all-levels="false" clearable />
-                </el-form-item>
-
-                <el-form-item label="安全责任所/中心负责人">
-                    <el-select v-model="formValue.safetyCenterManager" disabled size="large" style="width: 50%">
-                        <el-option v-for="item in oldCenterManagerOptions" :key="item.value" :label="item.label"
-                            :value="item.value" />
-                    </el-select>
-                </el-form-item>
-
-                <h5 style="margin: 30px 0; font-weight: bold; color: #409eff">信息变更</h5>
-
-                <el-form-item label="变更后的安全责任部门" prop="safetyResponsibleDepartmentTodo">
-                    <el-cascader v-model="formValue.safetyResponsibleDepartmentIdTodo" style="width: 50%" size="large"
-                        :ref="(el) => (cascaderRef['safetyResponsibleDepartmentTodo'] = el)" :options="firstLevelDepts"
-                        :props="cascaderProp" :show-all-levels="false" placeholder="请选择新的责任部门" filterable clearable
-                        @change="(val) => handleChangeDept(val, 'safetyResponsibleDepartmentTodo')" />
-                </el-form-item>
-
-                <el-form-item label="变更后的安全具体责任人" prop="safetySpecificPersonTodo">
-                    <el-select :disabled="!todoUserOptions.length" v-model="formValue.safetySpecificPersonTodo"
-                        placeholder="请选择新的具体责任人" size="large" style="width: 50%" filterable clearable
-                        @change="(val) => syncUserName(todoUserOptions, val, 'safetySpecificPersonNameTodo')">
-                        <el-option v-for="item in todoUserOptions" :key="item.value" :label="item.label"
-                            :value="item.value" />
-                    </el-select>
-                </el-form-item>
-
-                <el-form-item label="变更原因" prop="changeReason">
-                    <el-input v-model="formValue.changeReason" type="textarea" :rows="5" placeholder="请详细描述变更原因"
-                        style="width: 70%" maxlength="200" show-word-limit />
-                </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>
+        <el-form-item label="楼宇/区域">
+          <el-input v-model="formValue.buildingArea" disabled size="large" style="width: 50%" />
+        </el-form-item>
+        <el-form-item label="楼层/房号">
+          <el-input v-model="formValue.floorRoomNo" disabled size="large" style="width: 50%" />
+        </el-form-item>
+        <el-form-item label="名称/功能">
+          <el-input v-model="formValue.nameFunction" disabled size="large" style="width: 50%" />
+        </el-form-item>
+
+        <el-form-item label="安全责任所/中心">
+          <el-cascader
+            v-model="formValue.safetyResponsibleCenterId"
+            disabled
+            style="width: 50%"
+            size="large"
+            :options="firstLevelDepts"
+            :props="cascaderProp"
+            :show-all-levels="false"
+            clearable
+          />
+        </el-form-item>
+
+        <el-form-item label="安全责任所/中心负责人">
+          <el-select v-model="formValue.safetyCenterManager" disabled size="large" style="width: 50%">
+            <el-option
+              v-for="item in safetyCenterManagerOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="安全责任部门">
+          <el-cascader
+            disabled
+            v-model="formValue.safetyResponsibleDepartmentId"
+            style="width: 50%"
+            size="large"
+            :options="firstLevelDepts"
+            :props="cascaderProp"
+            :show-all-levels="false"
+          />
+        </el-form-item>
+
+        <el-form-item label="安全责任部门负责人">
+          <el-select disabled v-model="formValue.safetyDepartmentManager" size="large" style="width: 50%">
+            <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="安全具体责任人">
+          <el-select disabled v-model="formValue.safetySpecificPerson" size="large" style="width: 50%">
+            <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="安全具体责任人联系方式">
+          <el-input disabled v-model="formValue.safetyPersonContact" size="large" style="width: 50%" />
+        </el-form-item>
+
+        <h5 style="margin: 30px 0; font-weight: bold; color: #409eff">信息变更</h5>
+
+        <el-form-item label="变更后的安全责任部门" prop="safetyResponsibleDepartmentTodo">
+          <el-cascader
+            v-model="formValue.safetyResponsibleDepartmentIdTodo"
+            style="width: 50%"
+            size="large"
+            :ref="(el) => (cascaderRef['safetyResponsibleDepartmentTodo'] = el)"
+            :options="firstLevelDepts"
+            :props="cascaderProp"
+            :show-all-levels="false"
+            placeholder="请选择新的责任部门"
+            filterable
+            clearable
+            @change="(val) => handleChangeDept(val, 'safetyResponsibleDepartmentTodo')"
+          />
+        </el-form-item>
+
+        <el-form-item label="变更后的安全具体责任人" prop="safetySpecificPersonTodo">
+          <el-select
+            :disabled="!todoUserOptions.length"
+            v-model="formValue.safetySpecificPersonTodo"
+            placeholder="请选择新的具体责任人"
+            size="large"
+            style="width: 50%"
+            filterable
+            clearable
+            @change="(val) => syncUserName(todoUserOptions, val, 'safetySpecificPersonNameTodo')"
+          >
+            <el-option v-for="item in todoUserOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="变更原因" prop="changeReason">
+          <el-input
+            v-model="formValue.changeReason"
+            type="textarea"
+            :rows="5"
+            placeholder="请详细描述变更原因"
+            style="width: 70%"
+            maxlength="200"
+            show-word-limit
+          />
+        </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 {
+  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 {
     areaCheckListQueryDetail,
     areaCheckListChange,
     queryAvailableUserList,
-} from '@/api/production-safety/responsibility-implementation';
+  } from '@/api/production-safety/responsibility-implementation';
 
-const router = useRouter();
-const route = useRoute();
-const formRef = ref<any>(null);
-const submiting = ref(false);
+  const router = useRouter();
+  const route = useRoute();
+  const formRef = ref<any>(null);
+  const submiting = ref(false);
 
-// 数据源
-const firstLevelDepts = ref<any[]>([]);
-const oldCenterManagerOptions = ref<any[]>([]); // 旧负责人数据源
-const todoUserOptions = ref<any[]>([]); // 新负责人下拉数据源
-const cascaderRef = ref({});
-const cascaderProp = { expandTrigger: 'click', checkStrictly: true, value: 'id', label: 'deptName' };
+  // 数据源
+  const firstLevelDepts = ref<any[]>([]);
+  const oldCenterManagerOptions = ref<any[]>([]); // 旧负责人数据源
+  const todoUserOptions = ref<any[]>([]); // 新负责人下拉数据源
+  const cascaderRef = ref({});
+  const cascaderProp = { expandTrigger: 'click', checkStrictly: true, value: 'id', label: 'deptName' };
 
-const formValue = reactive({
+  const formValue = reactive({
     id: undefined,
     buildingNo: '',
     buildingArea: '',
@@ -99,116 +161,163 @@ const formValue = reactive({
     safetyResponsibleCenter: '',
     safetyResponsibleCenterId: [],
     safetyCenterManager: null as number | null,
+    safetyResponsibleDepartment: '',
+    safetyResponsibleDepartmentId: [],
+    safetyDepartmentManager: null as number | null,
+    safetySpecificPerson: null as number | null,
+    safetyPersonContact: '',
     // 变更数据
     safetyResponsibleDepartmentTodo: '',
     safetyResponsibleDepartmentIdTodo: [],
     safetySpecificPersonTodo: null as number | null,
     safetySpecificPersonNameTodo: '',
     changeReason: '',
-});
+  });
 
-const rules = reactive({
+  const rules = reactive({
     safetyResponsibleDepartmentTodo: [{ required: true, message: '请选择变更后的责任部门', trigger: 'change' }],
     safetySpecificPersonTodo: [{ required: true, message: '请选择变更后的具体责任人', trigger: 'change' }],
     changeReason: [{ required: true, message: '请输入变更原因', trigger: 'blur' }],
-});
+  });
 
-// 获取部门树
-const getDeptData = async () => {
+  // 获取部门树
+  const getDeptData = async () => {
     const res = await getAllDepartments();
     firstLevelDepts.value = formatDeptTree(res);
-};
+  };
 
-// 获取用户列表封装
-const getUserData = (optionList, deptName) => {
+  // 获取用户列表封装
+  const getUserData = (optionList, deptName) => {
     return queryAvailableUserList({
-        pageNumber: 1,
-        pageSize: 200,
-        queryParam: { deptName },
+      pageNumber: 1,
+      pageSize: 200,
+      queryParam: { deptName },
     }).then((res: any) => {
-        optionList.value = (res.records || []).map((u: any) => ({
-            value: u.id,
-            label: u.realname,
-        }));
+      optionList.value = (res.records || []).map((u: any) => ({
+        value: u.id,
+        label: u.realname,
+      }));
     });
-};
+  };
 
-// 级联选择处理
-const handleChangeDept = (val, prop) => {
+  // 级联选择处理
+  const handleChangeDept = (val, prop) => {
     const cascader = cascaderRef.value?.[prop];
     const deptInfo = cascader?.getCheckedNodes();
     if (deptInfo?.length) {
-        formValue[prop] = deptInfo[0]?.label;
-        // 级联变更后清空已选人员并重新加载
-        formValue.safetySpecificPersonTodo = null;
-        getUserData(todoUserOptions, deptInfo[0]?.label);
+      formValue[prop] = deptInfo[0]?.label;
+      // 级联变更后清空已选人员并重新加载
+      formValue.safetySpecificPersonTodo = null;
+      getUserData(todoUserOptions, deptInfo[0]?.label);
     }
-};
+  };
 
-const syncUserName = (optionList, id: number, nameField: string) => {
+  const syncUserName = (optionList, id: number, nameField: string) => {
     const user = optionList.find((u) => u.value === id);
     if (user) formValue[nameField] = user.label;
-};
+  };
 
-// 详情回显
-const handlAreaCheckListQueryDetail = async () => {
+  // 详情回显
+  // const handlAreaCheckListQueryDetail = async () => {
+  //     const id = route.query.id;
+  //     if (!id) return;
+
+  //     try {
+  //         const res: any = await areaCheckListQueryDetail({ id });
+  //         if (res) {
+  //             Object.assign(formValue, res);
+
+  //             // 1. 解析旧部门级联路径
+  //             if (typeof res.safetyResponsibleCenterId === 'string') {
+  //                 formValue.safetyResponsibleCenterId = JSON.parse(res.safetyResponsibleCenterId);
+  //             }
+
+  //             // 2. 加载旧负责人列表以显示名称
+  //             if (formValue.safetyResponsibleCenter) {
+  //                 getUserData(oldCenterManagerOptions, formValue.safetyResponsibleCenter);
+  //             }
+
+  //             // 3. 纠正 ID 类型
+  //             if (formValue.safetyCenterManager) formValue.safetyCenterManager = Number(formValue.safetyCenterManager);
+  //         }
+  //     } catch (err) {
+  //         ElMessage.error('加载详情失败');
+  //     }
+  // };
+  const safetyCenterManagerOptions = ref<any[]>([]);
+  const userOptions = ref<any[]>([]);
+  const handlAreaCheckListQueryDetail = async () => {
     const id = route.query.id;
     if (!id) return;
 
     try {
-        const res: any = await areaCheckListQueryDetail({ id });
-        if (res) {
-            Object.assign(formValue, res);
-
-            // 1. 解析旧部门级联路径
-            if (typeof res.safetyResponsibleCenterId === 'string') {
-                formValue.safetyResponsibleCenterId = JSON.parse(res.safetyResponsibleCenterId);
-            }
-
-            // 2. 加载旧负责人列表以显示名称
-            if (formValue.safetyResponsibleCenter) {
-                getUserData(oldCenterManagerOptions, formValue.safetyResponsibleCenter);
-            }
-
-            // 3. 纠正 ID 类型
-            if (formValue.safetyCenterManager) formValue.safetyCenterManager = Number(formValue.safetyCenterManager);
+      const res: any = await areaCheckListQueryDetail({ id });
+      if (res) {
+        Object.assign(formValue, res);
+        formValue.changeReason = ''; // 确保变更原因初始为空
+        formValue.safetySpecificPersonTodo = null; // 确保变更具体
+        formValue.safetyResponsibleDepartmentIdTodo = []; // 确保变更部门初始为空
+        // 1. 解析级联 ID 数组
+        try {
+          if (typeof res.safetyResponsibleCenterId === 'string') {
+            formValue.safetyResponsibleCenterId = JSON.parse(res.safetyResponsibleCenterId);
+          }
+          if (typeof res.safetyResponsibleDepartmentId === 'string') {
+            formValue.safetyResponsibleDepartmentId = JSON.parse(res.safetyResponsibleDepartmentId);
+          }
+        } catch (e) {
+          console.error('解析部门ID路径失败', e);
+        }
+
+        // 2. 类型转换
+        formValue.safetyCenterManager = res.safetyCenterManager ? Number(res.safetyCenterManager) : null;
+        formValue.safetyDepartmentManager = res.safetyDepartmentManager ? Number(res.safetyDepartmentManager) : null;
+        formValue.safetySpecificPerson = res.safetySpecificPerson ? Number(res.safetySpecificPerson) : null;
+
+        // 3. 补全人员名单以显示姓名
+        if (formValue.safetyResponsibleCenter) {
+          getUserData(safetyCenterManagerOptions, formValue.safetyResponsibleCenter);
+        }
+        if (formValue.safetyResponsibleDepartment) {
+          getUserData(userOptions, formValue.safetyResponsibleDepartment);
         }
+      }
     } catch (err) {
-        ElMessage.error('加载详情失败');
+      ElMessage.error('获取详情失败');
     }
-};
+  };
 
-onMounted(async () => {
+  onMounted(async () => {
     await getDeptData();
     await handlAreaCheckListQueryDetail();
-});
+  });
 
-const handleSubmit = () => {
+  const handleSubmit = () => {
     formRef.value?.validate((valid: boolean) => {
-        if (valid) {
-            submiting.value = true;
-            const submitData = {
-                id: Number(route.query.id),
-                safetyResponsibleDepartmentTodo: formValue.safetyResponsibleDepartmentTodo,
-                safetyResponsibleDepartmentIdTodo: JSON.stringify(formValue.safetyResponsibleDepartmentIdTodo), // 根据接口需求决定是否 stringify
-                safetySpecificPersonTodo: formValue.safetySpecificPersonTodo,
-                safetySpecificPersonNameTodo: formValue.safetySpecificPersonNameTodo,
-                changeReason: formValue.changeReason,
-            };
-
-            areaCheckListChange(submitData)
-                .then(() => {
-                    ElMessage.success('变更申请提交成功!');
-                    router.push({ name: 'areaResponsibilities:public' });
-                })
-                .finally(() => (submiting.value = false));
-        }
+      if (valid) {
+        submiting.value = true;
+        const submitData = {
+          id: Number(route.query.id),
+          safetyResponsibleDepartmentTodo: formValue.safetyResponsibleDepartmentTodo,
+          safetyResponsibleDepartmentIdTodo: JSON.stringify(formValue.safetyResponsibleDepartmentIdTodo), // 根据接口需求决定是否 stringify
+          safetySpecificPersonTodo: formValue.safetySpecificPersonTodo,
+          safetySpecificPersonNameTodo: formValue.safetySpecificPersonNameTodo,
+          changeReason: formValue.changeReason,
+        };
+
+        areaCheckListChange(submitData)
+          .then(() => {
+            ElMessage.success('变更申请提交成功!');
+            router.push({ name: 'areaResponsibilities:public' });
+          })
+          .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 *;
+  @use '@/styles/page-main-layout.scss' as *;
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/basic-table-action.scss' as *;
 </style>

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

@@ -1,104 +1,143 @@
 <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" label-width="auto" :model="formValue" :rules="rules">
-                <!-- <el-form-item label="楼号" prop="buildingNo">
+  <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" label-width="auto" :model="formValue" :rules="rules">
+        <!-- <el-form-item label="楼号" prop="buildingNo">
                     <el-input v-model="formValue.buildingNo" size="large" placeholder="请输入楼号" style="width: 50%" />
                 </el-form-item> -->
-                <el-form-item label="楼宇/区域" prop="buildingArea">
-                    <el-input v-model="formValue.buildingArea" size="large" placeholder="请输入楼宇/区域" style="width: 50%" />
-                </el-form-item>
-                <el-form-item label="楼层/房号" prop="floorRoomNo">
-                    <el-input v-model="formValue.floorRoomNo" size="large" placeholder="请输入楼层/房号" style="width: 50%" />
-                </el-form-item>
-                <el-form-item label="名称/功能" prop="nameFunction">
-                    <el-input v-model="formValue.nameFunction" size="large" placeholder="请输入名称/功能" style="width: 50%" />
-                </el-form-item>
+        <el-form-item label="楼宇/区域" prop="buildingArea">
+          <el-input v-model="formValue.buildingArea" size="large" placeholder="请输入楼宇/区域" style="width: 50%" />
+        </el-form-item>
+        <el-form-item label="楼层/房号" prop="floorRoomNo">
+          <el-input v-model="formValue.floorRoomNo" size="large" placeholder="请输入楼层/房号" style="width: 50%" />
+        </el-form-item>
+        <el-form-item label="名称/功能" prop="nameFunction">
+          <el-input v-model="formValue.nameFunction" size="large" placeholder="请输入名称/功能" style="width: 50%" />
+        </el-form-item>
 
-                <el-form-item label="安全责任所/中心" prop="safetyResponsibleCenter">
-                    <el-cascader v-model="formValue.safetyResponsibleCenterId" style="width: 50%" size="large"
-                        :ref="(el) => (cascaderRef['safetyResponsibleCenter'] = el)" :options="firstLevelDepts"
-                        :props="cascaderProp" :show-all-levels="false" placeholder="请选择安全责任部门" filterable clearable
-                        @change="(val) => handleChangeDept(val, 'safetyResponsibleCenter')" />
-                </el-form-item>
+        <el-form-item label="安全责任所/中心" prop="safetyResponsibleCenter">
+          <el-cascader
+            v-model="formValue.safetyResponsibleCenterId"
+            style="width: 50%"
+            size="large"
+            :ref="(el) => (cascaderRef['safetyResponsibleCenter'] = el)"
+            :options="firstLevelDepts"
+            :props="cascaderProp"
+            :show-all-levels="false"
+            placeholder="请选择安全责任部门"
+            filterable
+            clearable
+            @change="(val) => handleChangeDept(val, 'safetyResponsibleCenter')"
+          />
+        </el-form-item>
 
-                <el-form-item label="安全责任所/中心负责人" prop="safetyCenterManager">
-                    <el-select v-model="formValue.safetyCenterManager" placeholder="请选择" size="large" style="width: 50%"
-                        filterable
-                        @change="(val) => syncUserName(safetyCenterManagerOptions, val, 'safetyCenterManagerName')">
-                        <el-option v-for="item in safetyCenterManagerOptions" :key="item.value" :label="item.label"
-                            :value="item.value" />
-                    </el-select>
-                </el-form-item>
+        <el-form-item label="安全责任所/中心负责人" prop="safetyCenterManager">
+          <el-select
+            v-model="formValue.safetyCenterManager"
+            placeholder="请选择"
+            size="large"
+            style="width: 50%"
+            filterable
+            @change="(val) => syncUserName(safetyCenterManagerOptions, val, 'safetyCenterManagerName')"
+          >
+            <el-option
+              v-for="item in safetyCenterManagerOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
 
-                <el-form-item label="安全责任部门" prop="safetyResponsibleDepartment">
-                    <el-cascader v-model="formValue.safetyResponsibleDepartmentId" style="width: 50%" size="large"
-                        :ref="(el) => (cascaderRef['safetyResponsibleDepartment'] = el)" :options="firstLevelDepts"
-                        :props="cascaderProp" :show-all-levels="false" placeholder="请选择安全责任部门" filterable clearable
-                        @change="(val) => handleChangeDept(val, 'safetyResponsibleDepartment')" />
-                </el-form-item>
+        <el-form-item label="安全责任部门" prop="safetyResponsibleDepartment">
+          <el-cascader
+            v-model="formValue.safetyResponsibleDepartmentId"
+            style="width: 50%"
+            size="large"
+            :ref="(el) => (cascaderRef['safetyResponsibleDepartment'] = el)"
+            :options="firstLevelDepts"
+            :props="cascaderProp"
+            :show-all-levels="false"
+            placeholder="请选择安全责任部门"
+            filterable
+            clearable
+            @change="(val) => handleChangeDept(val, 'safetyResponsibleDepartment')"
+          />
+        </el-form-item>
 
-                <el-form-item label="安全责任部门负责人" prop="safetyDepartmentManager">
-                    <el-select v-model="formValue.safetyDepartmentManager" placeholder="请选择" size="large"
-                        style="width: 50%" filterable
-                        @change="(val) => syncUserName(userOptions, val, 'safetyDepartmentManagerName')">
-                        <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="safetyDepartmentManager">
+          <el-select
+            v-model="formValue.safetyDepartmentManager"
+            placeholder="请选择"
+            size="large"
+            style="width: 50%"
+            filterable
+            @change="(val) => syncUserName(userOptions, val, 'safetyDepartmentManagerName')"
+          >
+            <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="safetySpecificPerson">
-                    <el-select v-model="formValue.safetySpecificPerson" placeholder="请选择" size="large"
-                        style="width: 50%" filterable
-                        @change="(val) => syncUserName(userOptions, val, 'safetySpecificPersonName')">
-                        <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="safetySpecificPerson">
+          <el-select
+            v-model="formValue.safetySpecificPerson"
+            placeholder="请选择"
+            size="large"
+            style="width: 50%"
+            filterable
+            @change="(val) => syncUserName(userOptions, val, 'safetySpecificPersonName')"
+          >
+            <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="safetyPersonContact">
-                    <el-input v-model="formValue.safetyPersonContact" size="large" placeholder="选择责任人后自动填充"
-                        style="width: 50%" />
-                </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>
+        <el-form-item label="安全具体责任人联系方式" prop="safetyPersonContact">
+          <el-input
+            v-model="formValue.safetyPersonContact"
+            size="large"
+            placeholder="选择责任人后自动填充"
+            style="width: 50%"
+          />
+        </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 {
+  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 {
     areaCheckListQueryDetail,
     areaCheckListUpdateArea,
     queryAvailableUserList,
-} from '@/api/production-safety/responsibility-implementation';
+  } from '@/api/production-safety/responsibility-implementation';
 
-const router = useRouter();
-const route = useRoute();
-const formRef = ref<any>(null);
-const submiting = ref(false);
+  const router = useRouter();
+  const route = useRoute();
+  const formRef = ref<any>(null);
+  const submiting = ref(false);
 
-const userOptions = ref<any[]>([]);
-const safetyCenterManagerOptions = ref<any[]>([]);
-const firstLevelDepts = ref<any[]>([]);
-const cascaderRef = ref({});
-const cascaderProp = { expandTrigger: 'click', checkStrictly: true, value: 'id', label: 'deptName' };
+  const userOptions = ref<any[]>([]);
+  const safetyCenterManagerOptions = ref<any[]>([]);
+  const firstLevelDepts = ref<any[]>([]);
+  const cascaderRef = ref({});
+  const cascaderProp = { expandTrigger: 'click', checkStrictly: true, value: 'id', label: 'deptName' };
 
-const formValue = reactive({
+  const formValue = reactive({
     id: undefined,
     buildingNo: '',
     buildingArea: '',
@@ -115,9 +154,9 @@ const formValue = reactive({
     safetySpecificPerson: null as number | null,
     safetySpecificPersonName: '',
     safetyPersonContact: '',
-});
+  });
 
-const rules = reactive({
+  const rules = reactive({
     // buildingNo: [{ required: true, message: '请输入楼号' }],
     buildingArea: [{ required: true, message: '请输入楼宇/区域' }],
     floorRoomNo: [{ required: true, message: '请输入楼层/房号' }],
@@ -128,125 +167,125 @@ const rules = reactive({
     safetyDepartmentManager: [{ required: true, message: '请选择负责人', trigger: 'change' }],
     safetySpecificPerson: [{ required: true, message: '请选择安全具体责任人', trigger: 'change' }],
     safetyPersonContact: [
-        { required: true, message: '请输入联系方式' },
-        { pattern: /^1[3-9]\d{9}$/, message: '格式不正确' },
+      { required: true, message: '请输入联系方式' },
+      { pattern: /^1[3-9]\d{9}$/, message: '格式不正确' },
     ],
-});
+  });
 
-const getDeptData = () => {
+  const getDeptData = () => {
     getAllDepartments().then((res) => {
-        firstLevelDepts.value = formatDeptTree(res);
+      firstLevelDepts.value = formatDeptTree(res);
     });
-};
+  };
 
-const getUserData = (optionList, deptName) => {
+  const getUserData = (optionList, deptName) => {
     return queryAvailableUserList({
-        pageNumber: 1,
-        pageSize: 200,
-        queryParam: { deptName },
+      pageNumber: 1,
+      pageSize: 200,
+      queryParam: { deptName },
     }).then((res: any) => {
-        optionList.value = (res.records || []).map((u: any) => ({
-            value: u.id,
-            label: u.realname,
-            mobile: u.mobile,
-        }));
+      optionList.value = (res.records || []).map((u: any) => ({
+        value: u.id,
+        label: u.realname,
+        mobile: u.mobile,
+      }));
     });
-};
+  };
 
-const handleChangeDept = (val, prop) => {
+  const handleChangeDept = (val, prop) => {
     const cascader = cascaderRef.value?.[prop];
     const deptInfo = cascader?.getCheckedNodes();
     if (deptInfo?.length) {
-        formValue[prop] = deptInfo[0]?.label;
-        handleQueryAvailableUserList(deptInfo[0]?.label, prop);
+      formValue[prop] = deptInfo[0]?.label;
+      handleQueryAvailableUserList(deptInfo[0]?.label, prop);
     }
-};
+  };
 
-const handleQueryAvailableUserList = (value, prop) => {
+  const handleQueryAvailableUserList = (value, prop) => {
     if (prop === 'safetyResponsibleCenter') {
-        formValue.safetyCenterManager = null;
-        getUserData(safetyCenterManagerOptions, value);
+      formValue.safetyCenterManager = null;
+      getUserData(safetyCenterManagerOptions, value);
     } else {
-        formValue.safetySpecificPerson = null;
-        formValue.safetyDepartmentManager = null;
-        getUserData(userOptions, value);
+      formValue.safetySpecificPerson = null;
+      formValue.safetyDepartmentManager = null;
+      getUserData(userOptions, value);
     }
-};
+  };
 
-const syncUserName = (optionList, id, nameField) => {
+  const syncUserName = (optionList, id, nameField) => {
     const user = optionList.find((u) => u.value === id);
     if (user) {
-        formValue[nameField] = user.label;
-        if (nameField === 'safetySpecificPersonName') formValue.safetyPersonContact = user.mobile;
+      formValue[nameField] = user.label;
+      if (nameField === 'safetySpecificPersonName') formValue.safetyPersonContact = user.mobile;
     }
-};
+  };
 
-const handlAreaCheckListQueryDetail = async () => {
+  const handlAreaCheckListQueryDetail = async () => {
     const id = route.query.id;
     if (!id) return;
 
     try {
-        const res: any = await areaCheckListQueryDetail({ id });
-        if (res) {
-            // 1. 基础赋值
-            Object.assign(formValue, res);
+      const res: any = await areaCheckListQueryDetail({ id });
+      if (res) {
+        // 1. 基础赋值
+        Object.assign(formValue, res);
 
-            // 2. 解析 JSON 字符串格式的 ID 数组
-            try {
-                if (typeof res.safetyResponsibleCenterId === 'string') {
-                    formValue.safetyResponsibleCenterId = JSON.parse(res.safetyResponsibleCenterId);
-                }
-                if (typeof res.safetyResponsibleDepartmentId === 'string') {
-                    formValue.safetyResponsibleDepartmentId = JSON.parse(res.safetyResponsibleDepartmentId);
-                }
-            } catch (e) {
-                console.error('ID数组解析失败', e);
-            }
+        // 2. 解析 JSON 字符串格式的 ID 数组
+        try {
+          if (typeof res.safetyResponsibleCenterId === 'string') {
+            formValue.safetyResponsibleCenterId = JSON.parse(res.safetyResponsibleCenterId);
+          }
+          if (typeof res.safetyResponsibleDepartmentId === 'string') {
+            formValue.safetyResponsibleDepartmentId = JSON.parse(res.safetyResponsibleDepartmentId);
+          }
+        } catch (e) {
+          console.error('ID数组解析失败', e);
+        }
 
-            // 3. ID 类型纠正 (String to Number)
-            formValue.safetyCenterManager = res.safetyCenterManager ? Number(res.safetyCenterManager) : null;
-            formValue.safetyDepartmentManager = res.safetyDepartmentManager ? Number(res.safetyDepartmentManager) : null;
-            formValue.safetySpecificPerson = res.safetySpecificPerson ? Number(res.safetySpecificPerson) : null;
+        // 3. ID 类型纠正 (String to Number)
+        formValue.safetyCenterManager = res.safetyCenterManager ? Number(res.safetyCenterManager) : null;
+        formValue.safetyDepartmentManager = res.safetyDepartmentManager ? Number(res.safetyDepartmentManager) : null;
+        formValue.safetySpecificPerson = res.safetySpecificPerson ? Number(res.safetySpecificPerson) : null;
 
-            // 4. 立即同步加载人员列表，防止页面初次显示 ID 数字
-            if (formValue.safetyResponsibleCenter) {
-                getUserData(safetyCenterManagerOptions, formValue.safetyResponsibleCenter);
-            }
-            if (formValue.safetyResponsibleDepartment) {
-                getUserData(userOptions, formValue.safetyResponsibleDepartment);
-            }
+        // 4. 立即同步加载人员列表，防止页面初次显示 ID 数字
+        if (formValue.safetyResponsibleCenter) {
+          getUserData(safetyCenterManagerOptions, formValue.safetyResponsibleCenter);
+        }
+        if (formValue.safetyResponsibleDepartment) {
+          getUserData(userOptions, formValue.safetyResponsibleDepartment);
         }
+      }
     } catch (err) {
-        ElMessage.error('详情获取失败');
+      ElMessage.error('详情获取失败');
     }
-};
+  };
 
-onMounted(() => {
+  onMounted(() => {
     getDeptData();
     handlAreaCheckListQueryDetail();
-});
+  });
 
-const handleSubmit = () => {
+  const handleSubmit = () => {
     formRef.value?.validate((valid) => {
-        if (valid) {
-            submiting.value = true;
-            // 提交时后端通常接受字符串形式，如果后端要数组，则直接传 formValue
-            areaCheckListUpdateArea({ ...formValue, type: 1 })
-                .then(() => {
-                    ElMessage.success('编辑成功!');
-                    router.push({ name: 'areaResponsibilities:public' });
-                })
-                .finally(() => (submiting.value = false));
-        }
+      if (valid) {
+        submiting.value = true;
+        // 提交时后端通常接受字符串形式，如果后端要数组，则直接传 formValue
+        areaCheckListUpdateArea({ ...formValue, type: 1 })
+          .then(() => {
+            ElMessage.success('编辑成功!');
+            router.push({ name: 'areaResponsibilities:public' });
+          })
+          .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 *;
+  @use '@/styles/page-main-layout.scss' as *;
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/basic-table-action.scss' as *;
 
-.editor-container {
+  .editor-container {
     border: 1px solid #dcdfe6;
     border-radius: 4px;
     margin-right: 20px;
@@ -256,30 +295,31 @@ const handleSubmit = () => {
     //   min-height: 400px;
     //   overflow-y: auto;
     // }
-}
+  }
 
-// :deep(.breadcrumb .title) {
-//   margin-left: 0;
-// }
+  // :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;
-// }
+  // .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>
+  // .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/public-area-responsibilities/list.vue

@@ -1,311 +1,340 @@
 <template>
-    <div class="safety-platform-container">
-        <header class="safety-platform-container__header">
-            <div class="breadcrumb-title">{{ $route.meta.title }}</div>
-            <el-tabs v-model="activeTab" @tab-change="handleTabChange">
-                <el-tab-pane label="公共区域" :name="1" />
-                <el-tab-pane label="非公共区域" :name="2" />
-            </el-tabs>
-        </header>
-        <main class="safety-platform-container__main">
-            <div style="margin-bottom: 20px">
-                <el-button type="primary" @click="
-                    $router.push({
-                        name: 'areaAddResponsibilities:public',
-                    })
-                    ">添加
-                </el-button>
-            </div>
-            <div class="search-form">
-                <el-form :inline="true">
-                    <el-form-item label="区域名称">
-                        <el-input v-model="queryParams.queryParam.nameFunction" 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>
+  <div class="safety-platform-container">
+    <header class="safety-platform-container__header">
+      <div class="breadcrumb-title">责任区域</div>
+      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
+        <el-tab-pane label="公共区域" :name="1" />
+        <el-tab-pane label="非公共区域" :name="2" />
+      </el-tabs>
+    </header>
+    <main class="safety-platform-container__main">
+      <div style="margin-bottom: 20px">
+        <el-button
+          type="primary"
+          @click="
+            $router.push({
+              name: 'areaAddResponsibilities:public',
+            })
+          "
+          >添加
+        </el-button>
+      </div>
+      <div class="search-form">
+        <el-form :inline="true">
+          <el-form-item label="区域名称">
+            <el-input v-model="queryParams.queryParam.nameFunction" 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>
 
-                <div>
-                    <!-- <el-button @click="batchImportVisible = true">导入</el-button>
+        <div>
+          <!-- <el-button @click="batchImportVisible = true">导入</el-button>
           <el-button type="primary" @click="handleDownload">导出</el-button> -->
 
-                    <el-button type="primary" @click="queryTableList">查询</el-button>
-                    <el-button @click="handleRestParams">重置</el-button>
-                </div>
-            </div>
+          <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="120" />
-                    <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="changeReason" width="170" />
-                    <el-table-column label="状态" prop="statusName" width="100" />
-                    <el-table-column fixed="right" min-width="240" label="操作">
-                        <template #default="scope">
-                            <template v-if="scope.row.status === 1">
-                                <el-button type="primary" link @click="
-                                    $router.push({
-                                        name: 'areaEditResponsibilities:public',
-                                        query: {
-                                            id: scope.row.id,
-                                        },
-                                    })
-                                    ">编辑
-                                </el-button>
-                                <el-popconfirm title="确定要删除吗?" @confirm="handleConfirmDeleteRow(scope)">
-                                    <template #reference>
-                                        <el-button type="primary" link>删除</el-button>
-                                    </template>
-                                </el-popconfirm>
-                            </template>
-                            <template v-if="scope.row.canChange === true">
-                                <el-button type="primary" link
-                                    @click="handleAreaCheckListApprove(scope, 1)">确认</el-button>
-                                <el-button type="primary" link
-                                    @click="handleAreaCheckListApprove(scope, 0)">拒绝</el-button>
-                            </template>
-                            <template v-if="scope.row.status === 1 && scope.row.safetySpecificPerson === id">
-                                <el-button type="primary" link @click="
-                                    $router.push({
-                                        name: 'areaChangeResponsibilities:public',
-                                        query: {
-                                            id: scope.row.id,
-                                        },
-                                    })
-                                    ">变更</el-button>
-                            </template>
-                            <el-button type="primary" link @click="
-                                $router.push({
-                                    name: 'areaViewResponsibilities:public',
-                                    query: {
-                                        id: scope.row.id,
-                                    },
-                                })
-                                ">查看</el-button>
-                            <el-button link type="primary" v-if="scope.row.creatBy === id && scope.row.status === 2"
-                                @click="handleAreaCheckListApprove(scope, 0)">
-                                撤回
-                            </el-button>
-                        </template>
-                    </el-table-column>
-                </el-table>
-            </div>
-            <div class="pagination-container" v-if="tableData.total > 0">
-                <el-pagination background layout="prev, pager, next, jumper,sizes, total"
-                    :current-page="queryParams.pageNumber" :page-size="queryParams.pageSize" :total="tableData.total"
-                    :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange"
-                    @current-change="handleCurrentChange" />
-            </div>
-        </main>
-    </div>
-    <BatchImport :visible="batchImportVisible" :importApiUrl="importApiUrl" :templateUrl="templateUrl"
-        :templateName="'责任清单-批量导入模版'" @close="() => (batchImportVisible = false)" @update="handleUpdate" />
+      <div class="table-content">
+        <el-table :data="tableData.data">
+          <el-table-column type="index" label="序号" width="80" />
+          <el-table-column label="楼宇/区域" prop="buildingArea" width="120" />
+          <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="changeReason" width="170" />
+          <el-table-column label="状态" prop="statusName" width="100" />
+          <el-table-column fixed="right" min-width="240" label="操作">
+            <template #default="scope">
+              <template v-if="scope.row.status === 1">
+                <el-button
+                  type="primary"
+                  link
+                  @click="
+                    $router.push({
+                      name: 'areaEditResponsibilities:public',
+                      query: {
+                        id: scope.row.id,
+                      },
+                    })
+                  "
+                  >编辑
+                </el-button>
+                <el-popconfirm title="确定要删除吗?" @confirm="handleConfirmDeleteRow(scope)">
+                  <template #reference>
+                    <el-button type="primary" link>删除</el-button>
+                  </template>
+                </el-popconfirm>
+              </template>
+              <template v-if="scope.row.canChange === true">
+                <el-button type="primary" link @click="handleAreaCheckListApprove(scope, 1)">确认</el-button>
+                <el-button type="primary" link @click="handleAreaCheckListApprove(scope, 0)">拒绝</el-button>
+              </template>
+              <template v-if="scope.row.status === 1 && scope.row.safetySpecificPerson === id">
+                <el-button
+                  type="primary"
+                  link
+                  @click="
+                    $router.push({
+                      name: 'areaChangeResponsibilities:public',
+                      query: {
+                        id: scope.row.id,
+                      },
+                    })
+                  "
+                  >变更</el-button
+                >
+              </template>
+              <el-button
+                type="primary"
+                link
+                @click="
+                  $router.push({
+                    name: 'areaViewResponsibilities:public',
+                    query: {
+                      id: scope.row.id,
+                    },
+                  })
+                "
+                >查看</el-button
+              >
+              <el-button
+                link
+                type="primary"
+                v-if="scope.row.creatBy === id && scope.row.status === 2"
+                @click="handleAreaCheckListApprove(scope, 0)"
+              >
+                撤回
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="pagination-container" v-if="tableData.total > 0">
+        <el-pagination
+          background
+          layout="prev, pager, next, jumper,sizes, total"
+          :current-page="queryParams.pageNumber"
+          :page-size="queryParams.pageSize"
+          :total="tableData.total"
+          :page-sizes="[10, 20, 50, 100]"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </main>
+  </div>
+  <BatchImport
+    :visible="batchImportVisible"
+    :importApiUrl="importApiUrl"
+    :templateUrl="templateUrl"
+    :templateName="'责任清单-批量导入模版'"
+    @close="() => (batchImportVisible = false)"
+    @update="handleUpdate"
+  />
 </template>
 <script lang="ts" setup>
-import { onMounted, ref, reactive } from 'vue';
-import { ElMessage } from 'element-plus';
-import { useRouter } from 'vue-router';
-import {
+  import { onMounted, ref, reactive } from 'vue';
+  import { ElMessage } from 'element-plus';
+  import { useRouter } from 'vue-router';
+  import {
     areaCheckListQueryPage,
     areaCheckListApprove,
     areaCheckListDelete,
     areaCheckListExportArea,
-} from '@/api/production-safety/responsibility-implementation';
-import urlJoin from 'url-join';
-import { BatchImport } from '@/components/batch-import';
+  } from '@/api/production-safety/responsibility-implementation';
+  import urlJoin from 'url-join';
+  import { BatchImport } from '@/components/batch-import';
 
-import { downloadFile } from '@/views/disaster/utils';
-import { useGlobSetting } from '@/hooks/setting';
-import { useUserInfoHook } from '@/views/disaster/hooks';
+  import { downloadFile } from '@/views/disaster/utils';
+  import { useGlobSetting } from '@/hooks/setting';
+  import { useUserInfoHook } from '@/views/disaster/hooks';
 
-const router = useRouter();
-const activeTab = ref(1);
-const { id } = useUserInfoHook();
+  const router = useRouter();
+  const activeTab = ref(1);
+  const { id } = useUserInfoHook();
 
-const queryParams = reactive<any>({
+  const queryParams = reactive<any>({
     pageNumber: 1,
     pageSize: 10,
     queryParam: {
-        type: 1,
-        nameFunction: '',
-        status: '',
-        responsibilityPersonId: id,
+      type: 1,
+      nameFunction: '',
+      status: '',
+      responsibilityPersonId: id,
     },
-});
+  });
 
-// 批量导入
-const batchImportVisible = ref(false);
-const { urlPrefix } = useGlobSetting();
-const importApiUrl = ref(urlJoin(urlPrefix, '/areaCheckList/importArea?type=2'));
-const templateUrl = ref('');
+  // 批量导入
+  const batchImportVisible = ref(false);
+  const { urlPrefix } = useGlobSetting();
+  const importApiUrl = ref(urlJoin(urlPrefix, '/areaCheckList/importArea?type=2'));
+  const templateUrl = ref('');
 
-const handleUpdate = () => {
+  const handleUpdate = () => {
     batchImportVisible.value = false;
     queryTableList();
-};
+  };
 
-const tableData = reactive({
+  const tableData = reactive({
     data: [],
     total: 0,
-});
-const handleTabChange = (tab) => {
+  });
+  const handleTabChange = (tab) => {
     if (tab === 1) {
-        router.push({
-            name: 'areaResponsibilities:public',
-        });
+      router.push({
+        name: 'areaResponsibilities:public',
+      });
     } else if (tab === 2) {
-        router.push({
-            name: 'areaResponsibilities:nonPublic',
-        });
+      router.push({
+        name: 'areaResponsibilities:nonPublic',
+      });
     }
-};
+  };
 
-async function handleDownload() {
+  async function handleDownload() {
     // getQuery();
     try {
-        const res = await areaCheckListExportArea(queryParams.queryParam);
-        if (res.size === 0) return;
-        const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
-        const url = window.URL.createObjectURL(blob);
-        downloadFile(url, '责任清单.xlsx');
+      const res = await areaCheckListExportArea(queryParams.queryParam);
+      if (res.size === 0) return;
+      const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+      const url = window.URL.createObjectURL(blob);
+      downloadFile(url, '责任清单.xlsx');
     } catch (e) {
-        ElMessage.error('下载失败');
-        console.log(e);
+      ElMessage.error('下载失败');
+      console.log(e);
     }
-}
+  }
 
-const handleAreaCheckListApprove = (scope, approveType) => {
+  const handleAreaCheckListApprove = (scope, approveType) => {
     areaCheckListApprove({
-        id: scope.row.id,
-        approveType,
-        refuseReason: null,
+      id: scope.row.id,
+      approveType,
+      refuseReason: null,
     }).then((res) => {
-        if (approveType === 1) {
-            ElMessage.success('请尽快修改该责任清单的安全责任所/中心、安全责任部门及相关负责人信息');
-        } else {
-            ElMessage.success('操作成功!');
-        }
-        queryTableList();
+      if (approveType === 1) {
+        ElMessage.success('请尽快修改该责任清单的安全责任所/中心、安全责任部门及相关负责人信息');
+      } else {
+        ElMessage.success('操作成功!');
+      }
+      queryTableList();
     });
-};
+  };
 
-const handleSizeChange = (value) => {
+  const handleSizeChange = (value) => {
     queryParams.pageSize = value;
     queryTableList();
-};
-const handleCurrentChange = (value) => {
+  };
+  const handleCurrentChange = (value) => {
     queryParams.pageNumber = value;
     queryTableList();
-};
+  };
 
-const handleConfirmDeleteRow = (scope) => {
+  const handleConfirmDeleteRow = (scope) => {
     areaCheckListDelete(scope.row.id).then(() => {
-        ElMessage.success('删除成功!');
-        queryTableList();
+      ElMessage.success('删除成功!');
+      queryTableList();
     });
-};
-const queryTableList = () => {
+  };
+  const queryTableList = () => {
     areaCheckListQueryPage(queryParams).then((res) => {
-        tableData.data = res.records;
-        tableData.total = res.totalRow;
+      tableData.data = res.records;
+      tableData.total = res.totalRow;
     });
-};
-const handleRestParams = () => {
+  };
+  const handleRestParams = () => {
     Object.assign(queryParams, {
-        pageNumber: 1,
-        pageSize: 10,
-        queryParam: {
-            ...queryParams.queryParam,
-            status: '',
-            nameFunction: '',
-        },
+      pageNumber: 1,
+      pageSize: 10,
+      queryParam: {
+        ...queryParams.queryParam,
+        status: '',
+        nameFunction: '',
+      },
     });
     queryTableList();
-};
+  };
 
-onMounted(() => {
+  onMounted(() => {
     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 *;
+  @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) {
+  :deep(.el-tabs__header) {
     margin: 0;
-}
+  }
 
-:deep(.el-tabs__item) {
+  :deep(.el-tabs__item) {
     font-size: 14px !important;
-}
+  }
 
-:deep(.flexContent) {
+  :deep(.flexContent) {
     display: flex;
-}
+  }
 
-:deep(.breadcrumb .title) {
+  :deep(.breadcrumb .title) {
     margin-left: 0;
-}
+  }
 
-:deep(.el-form) {
+  :deep(.el-form) {
     flex: 1;
     display: flex;
     row-gap: 15px;
     flex-wrap: wrap;
-}
+  }
 
-:deep(.el-form-item) {
+  :deep(.el-form-item) {
     margin-bottom: 0;
-}
+  }
 
-:deep(main) {
+  :deep(main) {
     display: flex;
     flex-direction: column;
-}
+  }
 
-.search-form {
+  .search-form {
     min-width: 800px;
     display: flex;
 
     justify-content: space-between;
     align-items: flex-end;
     margin-bottom: 20px;
-}
+  }
 
-.button-content {
+  .button-content {
     margin-bottom: 20px;
-}
+  }
 
-.table-content {
+  .table-content {
     flex: 1;
     overflow: hidden;
     overflow-y: auto;
-}
+  }
 
-.page-content {
+  .page-content {
     display: flex;
     justify-content: flex-end;
-}
+  }
 
-.pagination-container {
+  .pagination-container {
     margin-top: 20px;
     display: flex;
     justify-content: flex-end;
-}
+  }
 </style>

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

@@ -1,87 +1,103 @@
 <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" label-width="auto" :model="formValue">
-                <!-- <el-form-item label="楼号">
+  <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" label-width="auto" :model="formValue">
+        <!-- <el-form-item label="楼号">
                     <el-input disabled v-model="formValue.buildingNo" size="large" style="width: 50%" />
                 </el-form-item> -->
-                <el-form-item label="楼宇/区域">
-                    <el-input disabled v-model="formValue.buildingArea" size="large" style="width: 50%" />
-                </el-form-item>
-                <el-form-item label="楼层/房号">
-                    <el-input disabled v-model="formValue.floorRoomNo" size="large" style="width: 50%" />
-                </el-form-item>
-                <el-form-item label="名称/功能">
-                    <el-input disabled v-model="formValue.nameFunction" size="large" style="width: 50%" />
-                </el-form-item>
-
-                <el-form-item label="安全责任所/中心">
-                    <el-cascader disabled v-model="formValue.safetyResponsibleCenterId" style="width: 50%" size="large"
-                        :options="firstLevelDepts" :props="cascaderProp" :show-all-levels="false" />
-                </el-form-item>
-
-                <el-form-item label="安全责任所/中心负责人">
-                    <el-select disabled v-model="formValue.safetyCenterManager" size="large" style="width: 50%">
-                        <el-option v-for="item in safetyCenterManagerOptions" :key="item.value" :label="item.label"
-                            :value="item.value" />
-                    </el-select>
-                </el-form-item>
-
-                <el-form-item label="安全责任部门">
-                    <el-cascader disabled v-model="formValue.safetyResponsibleDepartmentId" style="width: 50%"
-                        size="large" :options="firstLevelDepts" :props="cascaderProp" :show-all-levels="false" />
-                </el-form-item>
-
-                <el-form-item label="安全责任部门负责人">
-                    <el-select disabled v-model="formValue.safetyDepartmentManager" size="large" style="width: 50%">
-                        <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="安全具体责任人">
-                    <el-select disabled v-model="formValue.safetySpecificPerson" size="large" style="width: 50%">
-                        <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="安全具体责任人联系方式">
-                    <el-input disabled v-model="formValue.safetyPersonContact" size="large" style="width: 50%" />
-                </el-form-item>
-            </el-form>
-        </main>
-        <footer class="safety-platform-container__footer">
-            <el-button type="primary" @click="$router.push({ name: 'areaResponsibilities:public' })">返回</el-button>
-        </footer>
-    </div>
+        <el-form-item label="楼宇/区域">
+          <el-input disabled v-model="formValue.buildingArea" size="large" style="width: 50%" />
+        </el-form-item>
+        <el-form-item label="楼层/房号">
+          <el-input disabled v-model="formValue.floorRoomNo" size="large" style="width: 50%" />
+        </el-form-item>
+        <el-form-item label="名称/功能">
+          <el-input disabled v-model="formValue.nameFunction" size="large" style="width: 50%" />
+        </el-form-item>
+
+        <el-form-item label="安全责任所/中心">
+          <el-cascader
+            disabled
+            v-model="formValue.safetyResponsibleCenterId"
+            style="width: 50%"
+            size="large"
+            :options="firstLevelDepts"
+            :props="cascaderProp"
+            :show-all-levels="false"
+          />
+        </el-form-item>
+
+        <el-form-item label="安全责任所/中心负责人">
+          <el-select disabled v-model="formValue.safetyCenterManager" size="large" style="width: 50%">
+            <el-option
+              v-for="item in safetyCenterManagerOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="安全责任部门">
+          <el-cascader
+            disabled
+            v-model="formValue.safetyResponsibleDepartmentId"
+            style="width: 50%"
+            size="large"
+            :options="firstLevelDepts"
+            :props="cascaderProp"
+            :show-all-levels="false"
+          />
+        </el-form-item>
+
+        <el-form-item label="安全责任部门负责人">
+          <el-select disabled v-model="formValue.safetyDepartmentManager" size="large" style="width: 50%">
+            <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="安全具体责任人">
+          <el-select disabled v-model="formValue.safetySpecificPerson" size="large" style="width: 50%">
+            <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="安全具体责任人联系方式">
+          <el-input disabled v-model="formValue.safetyPersonContact" size="large" style="width: 50%" />
+        </el-form-item>
+      </el-form>
+    </main>
+    <footer class="safety-platform-container__footer">
+      <el-button type="primary" @click="$router.push({ name: 'areaResponsibilities:public' })">返回</el-button>
+    </footer>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
-import { ElMessage } from 'element-plus';
-import { getAllDepartments } from '@/api/auth/dept';
-import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';
-import {
+  import { ref, reactive, onMounted } from 'vue';
+  import { useRoute } from 'vue-router';
+  import { ElMessage } from 'element-plus';
+  import { getAllDepartments } from '@/api/auth/dept';
+  import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';
+  import {
     areaCheckListQueryDetail,
     queryAvailableUserList,
-} from '@/api/production-safety/responsibility-implementation';
+  } from '@/api/production-safety/responsibility-implementation';
 
-const route = useRoute();
+  const route = useRoute();
 
-const userOptions = ref<any[]>([]);
-const safetyCenterManagerOptions = ref<any[]>([]);
-const firstLevelDepts = ref<any[]>([]);
-const cascaderProp = { value: 'id', label: 'deptName', checkStrictly: true };
+  const userOptions = ref<any[]>([]);
+  const safetyCenterManagerOptions = ref<any[]>([]);
+  const firstLevelDepts = ref<any[]>([]);
+  const cascaderProp = { value: 'id', label: 'deptName', checkStrictly: true };
 
-const formValue = reactive({
+  const formValue = reactive({
     buildingNo: '',
     buildingArea: '',
     floorRoomNo: '',
@@ -94,73 +110,73 @@ const formValue = reactive({
     safetyDepartmentManager: null as number | null,
     safetySpecificPerson: null as number | null,
     safetyPersonContact: '',
-});
+  });
 
-const getDeptData = async () => {
+  const getDeptData = async () => {
     const res = await getAllDepartments();
     firstLevelDepts.value = formatDeptTree(res);
-};
+  };
 
-const getUserData = (optionList: any, deptName: string) => {
+  const getUserData = (optionList: any, deptName: string) => {
     return queryAvailableUserList({
-        pageNumber: 1,
-        pageSize: 200,
-        queryParam: { deptName },
+      pageNumber: 1,
+      pageSize: 200,
+      queryParam: { deptName },
     }).then((res: any) => {
-        optionList.value = (res.records || []).map((u: any) => ({
-            value: u.id,
-            label: u.realname,
-        }));
+      optionList.value = (res.records || []).map((u: any) => ({
+        value: u.id,
+        label: u.realname,
+      }));
     });
-};
+  };
 
-const handlAreaCheckListQueryDetail = async () => {
+  const handlAreaCheckListQueryDetail = async () => {
     const id = route.query.id;
     if (!id) return;
 
     try {
-        const res: any = await areaCheckListQueryDetail({ id });
-        if (res) {
-            Object.assign(formValue, res);
-
-            // 1. 解析级联 ID 数组
-            try {
-                if (typeof res.safetyResponsibleCenterId === 'string') {
-                    formValue.safetyResponsibleCenterId = JSON.parse(res.safetyResponsibleCenterId);
-                }
-                if (typeof res.safetyResponsibleDepartmentId === 'string') {
-                    formValue.safetyResponsibleDepartmentId = JSON.parse(res.safetyResponsibleDepartmentId);
-                }
-            } catch (e) {
-                console.error('解析部门ID路径失败', e);
-            }
-
-            // 2. 类型转换
-            formValue.safetyCenterManager = res.safetyCenterManager ? Number(res.safetyCenterManager) : null;
-            formValue.safetyDepartmentManager = res.safetyDepartmentManager ? Number(res.safetyDepartmentManager) : null;
-            formValue.safetySpecificPerson = res.safetySpecificPerson ? Number(res.safetySpecificPerson) : null;
-
-            // 3. 补全人员名单以显示姓名
-            if (formValue.safetyResponsibleCenter) {
-                getUserData(safetyCenterManagerOptions, formValue.safetyResponsibleCenter);
-            }
-            if (formValue.safetyResponsibleDepartment) {
-                getUserData(userOptions, formValue.safetyResponsibleDepartment);
-            }
+      const res: any = await areaCheckListQueryDetail({ id });
+      if (res) {
+        Object.assign(formValue, res);
+
+        // 1. 解析级联 ID 数组
+        try {
+          if (typeof res.safetyResponsibleCenterId === 'string') {
+            formValue.safetyResponsibleCenterId = JSON.parse(res.safetyResponsibleCenterId);
+          }
+          if (typeof res.safetyResponsibleDepartmentId === 'string') {
+            formValue.safetyResponsibleDepartmentId = JSON.parse(res.safetyResponsibleDepartmentId);
+          }
+        } catch (e) {
+          console.error('解析部门ID路径失败', e);
         }
+
+        // 2. 类型转换
+        formValue.safetyCenterManager = res.safetyCenterManager ? Number(res.safetyCenterManager) : null;
+        formValue.safetyDepartmentManager = res.safetyDepartmentManager ? Number(res.safetyDepartmentManager) : null;
+        formValue.safetySpecificPerson = res.safetySpecificPerson ? Number(res.safetySpecificPerson) : null;
+
+        // 3. 补全人员名单以显示姓名
+        if (formValue.safetyResponsibleCenter) {
+          getUserData(safetyCenterManagerOptions, formValue.safetyResponsibleCenter);
+        }
+        if (formValue.safetyResponsibleDepartment) {
+          getUserData(userOptions, formValue.safetyResponsibleDepartment);
+        }
+      }
     } catch (err) {
-        ElMessage.error('获取详情失败');
+      ElMessage.error('获取详情失败');
     }
-};
+  };
 
-onMounted(async () => {
+  onMounted(async () => {
     await getDeptData();
     handlAreaCheckListQueryDetail();
-});
+  });
 </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 *;
+  @use '@/styles/page-main-layout.scss' as *;
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/basic-table-action.scss' as *;
 </style>

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

@@ -1,44 +1,62 @@
 <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" label-width="auto" :model="formValue" :rules="rules">
-                <!-- <el-form-item label="楼号" prop="buildingNo">
+  <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" label-width="auto" :model="formValue" :rules="rules">
+        <!-- <el-form-item label="楼号" prop="buildingNo">
                     <el-input v-model="formValue.buildingNo" size="large" placeholder="请输入楼号" style="width: 50%" />
                 </el-form-item> -->
-                <el-form-item label="楼宇/区域" prop="buildingArea">
-                    <el-input v-model="formValue.buildingArea" size="large" placeholder="请输入楼宇/区域" style="width: 50%" />
-                </el-form-item>
-                <el-form-item label="楼层/房号" prop="floorRoomNo">
-                    <el-input v-model="formValue.floorRoomNo" size="large" placeholder="请输入楼层/房号" style="width: 50%" />
-                </el-form-item>
-                <el-form-item label="名称/功能" prop="nameFunction">
-                    <el-input v-model="formValue.nameFunction" size="large" placeholder="请输入名称/功能" style="width: 50%" />
-                </el-form-item>
+        <el-form-item label="楼宇/区域" prop="buildingArea">
+          <el-input v-model="formValue.buildingArea" size="large" placeholder="请输入楼宇/区域" style="width: 50%" />
+        </el-form-item>
+        <el-form-item label="楼层/房号" prop="floorRoomNo">
+          <el-input v-model="formValue.floorRoomNo" size="large" placeholder="请输入楼层/房号" style="width: 50%" />
+        </el-form-item>
+        <el-form-item label="名称/功能" prop="nameFunction">
+          <el-input v-model="formValue.nameFunction" size="large" placeholder="请输入名称/功能" style="width: 50%" />
+        </el-form-item>
 
-                <el-form-item label="安全责任所/中心" prop="safetyResponsibleCenter">
-                    <el-cascader v-model="formValue.safetyResponsibleCenterId" style="width: 50%" size="large"
-                        :ref="(el) => (cascaderRef['safetyResponsibleCenter'] = el)" :options="firstLevelDepts"
-                        :props="cascaderProp" :show-all-levels="false" placeholder="请选择安全责任部门" filterable clearable
-                        @change="(val) => handleChangeDept(val, 'safetyResponsibleCenter')" />
-                </el-form-item>
+        <el-form-item label="安全责任所/中心" prop="safetyResponsibleCenter">
+          <el-cascader
+            v-model="formValue.safetyResponsibleCenterId"
+            style="width: 50%"
+            size="large"
+            :ref="(el) => (cascaderRef['safetyResponsibleCenter'] = el)"
+            :options="firstLevelDepts"
+            :props="cascaderProp"
+            :show-all-levels="false"
+            placeholder="请选择安全责任部门"
+            filterable
+            clearable
+            @change="(val) => handleChangeDept(val, 'safetyResponsibleCenter')"
+          />
+        </el-form-item>
 
-                <el-form-item label="安全责任所/中心负责人" prop="safetyCenterManager">
-                    <el-select v-model="formValue.safetyCenterManager" placeholder="请选择" size="large" style="width: 50%"
-                        filterable
-                        @change="(val) => syncUserName(safetyCenterManagerOptions, val, 'safetyCenterManagerName')">
-                        <el-option v-for="item in safetyCenterManagerOptions" :key="item.value" :label="item.label"
-                            :value="item.value" />
-                    </el-select>
-                </el-form-item>
+        <el-form-item label="安全责任所/中心负责人" prop="safetyCenterManager">
+          <el-select
+            v-model="formValue.safetyCenterManager"
+            placeholder="请选择"
+            size="large"
+            style="width: 50%"
+            filterable
+            @change="(val) => syncUserName(safetyCenterManagerOptions, val, 'safetyCenterManagerName')"
+          >
+            <el-option
+              v-for="item in safetyCenterManagerOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
 
-                <el-form-item label="安全责任部门" prop="safetyResponsibleDepartment">
-                    <!-- <el-select
+        <el-form-item label="安全责任部门" prop="safetyResponsibleDepartment">
+          <!-- <el-select
             v-model="formValue.safetyResponsibleDepartment"
             placeholder="请选择"
             size="large"
@@ -52,70 +70,91 @@
               :value="item.deptName"
             />
           </el-select> -->
-                    <el-cascader v-model="formValue.safetyResponsibleDepartmentId" style="width: 50%" size="large"
-                        :ref="(el) => (cascaderRef['safetyResponsibleDepartment'] = el)" :options="firstLevelDepts"
-                        :props="cascaderProp" :show-all-levels="false" placeholder="请选择安全责任部门" filterable clearable
-                        @change="(val) => handleChangeDept(val, 'safetyResponsibleDepartment')" />
-                </el-form-item>
+          <el-cascader
+            v-model="formValue.safetyResponsibleDepartmentId"
+            style="width: 50%"
+            size="large"
+            :ref="(el) => (cascaderRef['safetyResponsibleDepartment'] = el)"
+            :options="firstLevelDepts"
+            :props="cascaderProp"
+            :show-all-levels="false"
+            placeholder="请选择安全责任部门"
+            filterable
+            clearable
+            @change="(val) => handleChangeDept(val, 'safetyResponsibleDepartment')"
+          />
+        </el-form-item>
 
-                <el-form-item label="安全责任部门负责人" prop="safetyDepartmentManager">
-                    <el-select v-model="formValue.safetyDepartmentManager" placeholder="请选择" size="large"
-                        style="width: 50%" filterable
-                        @change="(val) => syncUserName(userOptions, val, 'safetyDepartmentManagerName')">
-                        <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="safetyDepartmentManager">
+          <el-select
+            v-model="formValue.safetyDepartmentManager"
+            placeholder="请选择"
+            size="large"
+            style="width: 50%"
+            filterable
+            @change="(val) => syncUserName(userOptions, val, 'safetyDepartmentManagerName')"
+          >
+            <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="safetySpecificPerson">
-                    <el-select v-model="formValue.safetySpecificPerson" placeholder="请选择" size="large"
-                        style="width: 50%" filterable
-                        @change="(val) => syncUserName(userOptions, val, 'safetySpecificPersonName')">
-                        <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="safetySpecificPerson">
+          <el-select
+            v-model="formValue.safetySpecificPerson"
+            placeholder="请选择"
+            size="large"
+            style="width: 50%"
+            filterable
+            @change="(val) => syncUserName(userOptions, val, 'safetySpecificPersonName')"
+          >
+            <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="safetyPersonContact">
-                    <el-input v-model="formValue.safetyPersonContact" size="large" placeholder="请输入联系方式"
-                        style="width: 50%" />
-                </el-form-item>
-            </el-form>
-        </main>
-        <footer class="safety-platform-container__footer">
-            <el-button @click="$router.push({ name: 'listResponsibilities:public' })">返回</el-button>
-            <el-button type="primary" :loading="submiting" @click="handleSubmit">提交</el-button>
-        </footer>
-    </div>
+        <el-form-item label="安全具体责任人联系方式" prop="safetyPersonContact">
+          <el-input
+            v-model="formValue.safetyPersonContact"
+            size="large"
+            placeholder="请输入联系方式"
+            style="width: 50%"
+          />
+        </el-form-item>
+      </el-form>
+    </main>
+    <footer class="safety-platform-container__footer">
+      <el-button @click="$router.push({ name: 'listResponsibilities: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 { areaCheckListSavaArea, queryAvailableUserList } from '@/api/production-safety/responsibility-implementation';
+  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 { areaCheckListSavaArea, queryAvailableUserList } from '@/api/production-safety/responsibility-implementation';
 
-const router = useRouter();
-const formRef = ref<any>(null);
-const submiting = ref(false);
+  const router = useRouter();
+  const formRef = ref<any>(null);
+  const submiting = ref(false);
 
-const userOptions = ref<any[]>([]);
-const firstLevelDepts = ref<any[]>([]);
-const cascaderProp = {
+  const userOptions = ref<any[]>([]);
+  const firstLevelDepts = ref<any[]>([]);
+  const cascaderProp = {
     expandTrigger: 'click',
     checkStrictly: true,
     // emitPath: false,
     value: 'id',
     label: 'deptName',
-};
+  };
 
-const cascaderRef = ref({});
+  const cascaderRef = ref({});
 
-const safetyCenterManagerOptions = ref<any[]>([]);
+  const safetyCenterManagerOptions = ref<any[]>([]);
 
-const formValue = reactive({
+  const formValue = reactive({
     buildingNo: '',
     buildingArea: '',
     floorRoomNo: '',
@@ -131,9 +170,9 @@ const formValue = reactive({
     safetySpecificPerson: null as number | null,
     safetySpecificPersonName: '',
     safetyPersonContact: '',
-});
+  });
 
-const rules = reactive({
+  const rules = reactive({
     // buildingNo: [{ required: true, message: '请输入楼号' }],
     buildingArea: [{ required: true, message: '请输入楼宇/区域' }],
     floorRoomNo: [{ required: true, message: '请输入楼层/房号' }],
@@ -147,137 +186,138 @@ const rules = reactive({
 
     safetySpecificPerson: [{ required: true, message: '请选择安全具体责任人', trigger: 'change' }],
     safetyPersonContact: [
-        { required: true, message: '请输入安全具体责任人联系方式' },
-        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码格式' },
+      { required: true, message: '请输入安全具体责任人联系方式' },
+      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码格式' },
     ],
-});
+  });
 
-// 获取部门数据
-const getDeptData = () => {
+  // 获取部门数据
+  const getDeptData = () => {
     getAllDepartments().then((res) => {
-        firstLevelDepts.value = formatDeptTree(res);
+      firstLevelDepts.value = formatDeptTree(res);
     });
-};
+  };
 
-const handleChangeDept = (val, prop) => {
+  const handleChangeDept = (val, prop) => {
     const cascader = cascaderRef.value?.[prop];
     const deptInfo = cascader?.getCheckedNodes();
     formValue[prop] = deptInfo[0]?.label;
     formRef.value.validateField(prop);
     nextTick(() => {
-        handleQueryAvailableUserList(deptInfo[0]?.label, prop);
+      handleQueryAvailableUserList(deptInfo[0]?.label, prop);
     });
-};
+  };
 
-const handleQueryAvailableUserList = (value, prop) => {
+  const handleQueryAvailableUserList = (value, prop) => {
     switch (prop) {
-        case 'safetyResponsibleCenter':
-            formValue.safetyCenterManager = null;
-            getUserData(safetyCenterManagerOptions, value);
-            break;
-        case 'safetyResponsibleDepartment':
-            formValue.safetySpecificPerson = null;
-            formValue.safetyDepartmentManager = null;
-            getUserData(userOptions, value);
-            break;
-        default:
-            break;
+      case 'safetyResponsibleCenter':
+        formValue.safetyCenterManager = null;
+        getUserData(safetyCenterManagerOptions, value);
+        break;
+      case 'safetyResponsibleDepartment':
+        formValue.safetySpecificPerson = null;
+        formValue.safetyDepartmentManager = null;
+        getUserData(userOptions, value);
+        break;
+      default:
+        break;
     }
-};
+  };
 
-const getUserData = (optionList, deptName, realname = '') => {
+  const getUserData = (optionList, deptName, realname = '') => {
     queryAvailableUserList({
-        pageNumber: 1,
-        pageSize: 200,
-        queryParam: {
-            deptName,
-            realname,
-        },
+      pageNumber: 1,
+      pageSize: 200,
+      queryParam: {
+        deptName,
+        realname,
+      },
     }).then((res: any) => {
-        optionList['value'] = (res.records || []).map((u: any) => ({
-            value: u.id,
-            label: u.realname,
-        }));
+      optionList['value'] = (res.records || []).map((u: any) => ({
+        value: u.id,
+        label: u.realname,
+      }));
     });
-};
+  };
 
-const syncUserName = (optionList, id: number, nameField: string) => {
+  const syncUserName = (optionList, id: number, nameField: string) => {
     const user = optionList?.find((u) => u.value === id);
     if (user) {
-        formValue[nameField] = user.label;
-        console.log(formValue[nameField]);
+      formValue[nameField] = user.label;
+      console.log(formValue[nameField]);
     }
-};
+  };
 
-// const handleSpecificPersonChange = (id: number) => {
-//   const user = userOptions.value.find((u) => u.id === id);
-//   if (user) {
-//     formValue.safetySpecificPersonName = user.name;
-//     formValue.safetyPersonContact = user.mobile;
-//   }
-// };
+  // const handleSpecificPersonChange = (id: number) => {
+  //   const user = userOptions.value.find((u) => u.id === id);
+  //   if (user) {
+  //     formValue.safetySpecificPersonName = user.name;
+  //     formValue.safetyPersonContact = user.mobile;
+  //   }
+  // };
 
-onMounted(() => {
+  onMounted(() => {
     getDeptData();
     // getUserData();
-});
+  });
 
-const handleSubmit = () => {
+  const handleSubmit = () => {
     console.log(formValue);
     formRef.value?.validate((valid: boolean) => {
-        if (valid) {
-            submiting.value = true;
-            areaCheckListSavaArea({
-                ...formValue,
-                type: 1,
-                safetyResponsibleDepartmentId: JSON.stringify(formValue.safetyResponsibleDepartmentId),
-                safetyResponsibleCenterId: JSON.stringify(formValue.safetyResponsibleCenterId),
-            })
-                .then(() => {
-                    ElMessage.success('创建成功!');
-                    router.push({ name: 'listResponsibilities:public' });
-                })
-                .finally(() => {
-                    submiting.value = false;
-                });
-        }
+      if (valid) {
+        submiting.value = true;
+        areaCheckListSavaArea({
+          ...formValue,
+          type: 1,
+          safetyResponsibleDepartmentId: JSON.stringify(formValue.safetyResponsibleDepartmentId),
+          safetyResponsibleCenterId: JSON.stringify(formValue.safetyResponsibleCenterId),
+        })
+          .then(() => {
+            ElMessage.success('创建成功!');
+            router.push({ name: 'listResponsibilities:public' });
+          })
+          .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 *;
+  @use '@/styles/page-main-layout.scss' as *;
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/basic-table-action.scss' as *;
 
-.editor-container {
+  .editor-container {
     border: 1px solid #dcdfe6;
     border-radius: 4px;
     margin-right: 20px;
     overflow: hidden;
-}
+  }
 
-// :deep(.breadcrumb .title) {
-//   margin-left: 0;
-// }
+  // :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;
-// }
+  // .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>
+  // .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/public-list-responsibilities/change.vue

@@ -1,95 +1,157 @@
 <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" label-width="auto" :model="formValue" :rules="rules">
-                <!-- <el-form-item label="楼号">
+  <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" label-width="auto" :model="formValue" :rules="rules">
+        <!-- <el-form-item label="楼号">
                     <el-input v-model="formValue.buildingNo" disabled size="large" style="width: 50%" />
                 </el-form-item> -->
-                <el-form-item label="楼宇/区域">
-                    <el-input v-model="formValue.buildingArea" disabled size="large" style="width: 50%" />
-                </el-form-item>
-                <el-form-item label="楼层/房号">
-                    <el-input v-model="formValue.floorRoomNo" disabled size="large" style="width: 50%" />
-                </el-form-item>
-                <el-form-item label="名称/功能">
-                    <el-input v-model="formValue.nameFunction" disabled size="large" style="width: 50%" />
-                </el-form-item>
-
-                <el-form-item label="安全责任所/中心">
-                    <el-cascader v-model="formValue.safetyResponsibleCenterId" disabled style="width: 50%" size="large"
-                        :options="firstLevelDepts" :props="cascaderProp" :show-all-levels="false" clearable />
-                </el-form-item>
-
-                <el-form-item label="安全责任所/中心负责人">
-                    <el-select v-model="formValue.safetyCenterManager" disabled size="large" style="width: 50%">
-                        <el-option v-for="item in oldCenterManagerOptions" :key="item.value" :label="item.label"
-                            :value="item.value" />
-                    </el-select>
-                </el-form-item>
-
-                <h5 style="margin: 30px 0; font-weight: bold; color: #409eff">信息变更</h5>
-
-                <el-form-item label="变更后的安全责任部门" prop="safetyResponsibleDepartmentTodo">
-                    <el-cascader v-model="formValue.safetyResponsibleDepartmentIdTodo" style="width: 50%" size="large"
-                        :ref="(el) => (cascaderRef['safetyResponsibleDepartmentTodo'] = el)" :options="firstLevelDepts"
-                        :props="cascaderProp" :show-all-levels="false" placeholder="请选择新的责任部门" filterable clearable
-                        @change="(val) => handleChangeDept(val, 'safetyResponsibleDepartmentTodo')" />
-                </el-form-item>
-
-                <el-form-item label="变更后的安全具体责任人" prop="safetySpecificPersonTodo">
-                    <el-select :disabled="!todoUserOptions.length" v-model="formValue.safetySpecificPersonTodo"
-                        placeholder="请选择新的具体责任人" size="large" style="width: 50%" filterable clearable
-                        @change="(val) => syncUserName(todoUserOptions, val, 'safetySpecificPersonNameTodo')">
-                        <el-option v-for="item in todoUserOptions" :key="item.value" :label="item.label"
-                            :value="item.value" />
-                    </el-select>
-                </el-form-item>
-
-                <el-form-item label="变更原因" prop="changeReason">
-                    <el-input v-model="formValue.changeReason" type="textarea" :rows="5" placeholder="请详细描述变更原因"
-                        style="width: 70%" maxlength="200" show-word-limit />
-                </el-form-item>
-            </el-form>
-        </main>
-
-        <footer class="safety-platform-container__footer">
-            <el-button @click="$router.push({ name: 'listResponsibilities:public' })">返回</el-button>
-            <el-button type="primary" :loading="submiting" @click="handleSubmit">提交变更</el-button>
-        </footer>
-    </div>
+        <el-form-item label="楼宇/区域">
+          <el-input v-model="formValue.buildingArea" disabled size="large" style="width: 50%" />
+        </el-form-item>
+        <el-form-item label="楼层/房号">
+          <el-input v-model="formValue.floorRoomNo" disabled size="large" style="width: 50%" />
+        </el-form-item>
+        <el-form-item label="名称/功能">
+          <el-input v-model="formValue.nameFunction" disabled size="large" style="width: 50%" />
+        </el-form-item>
+
+        <el-form-item label="安全责任所/中心">
+          <el-cascader
+            v-model="formValue.safetyResponsibleCenterId"
+            disabled
+            style="width: 50%"
+            size="large"
+            :options="firstLevelDepts"
+            :props="cascaderProp"
+            :show-all-levels="false"
+            clearable
+          />
+        </el-form-item>
+
+        <el-form-item label="安全责任所/中心负责人">
+          <el-select v-model="formValue.safetyCenterManager" disabled size="large" style="width: 50%">
+            <el-option
+              v-for="item in safetyCenterManagerOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="安全责任部门">
+          <el-cascader
+            disabled
+            v-model="formValue.safetyResponsibleDepartmentId"
+            style="width: 50%"
+            size="large"
+            :options="firstLevelDepts"
+            :props="cascaderProp"
+            :show-all-levels="false"
+          />
+        </el-form-item>
+
+        <el-form-item label="安全责任部门负责人">
+          <el-select disabled v-model="formValue.safetyDepartmentManager" size="large" style="width: 50%">
+            <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="安全具体责任人">
+          <el-select disabled v-model="formValue.safetySpecificPerson" size="large" style="width: 50%">
+            <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="安全具体责任人联系方式">
+          <el-input disabled v-model="formValue.safetyPersonContact" size="large" style="width: 50%" />
+        </el-form-item>
+
+        <h5 style="margin: 30px 0; font-weight: bold; color: #409eff">信息变更</h5>
+
+        <el-form-item label="变更后的安全责任部门" prop="safetyResponsibleDepartmentTodo">
+          <el-cascader
+            v-model="formValue.safetyResponsibleDepartmentIdTodo"
+            style="width: 50%"
+            size="large"
+            :ref="(el) => (cascaderRef['safetyResponsibleDepartmentTodo'] = el)"
+            :options="firstLevelDepts"
+            :props="cascaderProp"
+            :show-all-levels="false"
+            placeholder="请选择新的责任部门"
+            filterable
+            clearable
+            @change="(val) => handleChangeDept(val, 'safetyResponsibleDepartmentTodo')"
+          />
+        </el-form-item>
+
+        <el-form-item label="变更后的安全具体责任人" prop="safetySpecificPersonTodo">
+          <el-select
+            :disabled="!todoUserOptions.length"
+            v-model="formValue.safetySpecificPersonTodo"
+            placeholder="请选择新的具体责任人"
+            size="large"
+            style="width: 50%"
+            filterable
+            clearable
+            @change="(val) => syncUserName(todoUserOptions, val, 'safetySpecificPersonNameTodo')"
+          >
+            <el-option v-for="item in todoUserOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="变更原因" prop="changeReason">
+          <el-input
+            v-model="formValue.changeReason"
+            type="textarea"
+            :rows="5"
+            placeholder="请详细描述变更原因"
+            style="width: 70%"
+            maxlength="200"
+            show-word-limit
+          />
+        </el-form-item>
+      </el-form>
+    </main>
+
+    <footer class="safety-platform-container__footer">
+      <el-button @click="$router.push({ name: 'listResponsibilities: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 {
+  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 {
     areaCheckListQueryDetail,
     areaCheckListChange,
     queryAvailableUserList,
-} from '@/api/production-safety/responsibility-implementation';
+  } from '@/api/production-safety/responsibility-implementation';
 
-const router = useRouter();
-const route = useRoute();
-const formRef = ref<any>(null);
-const submiting = ref(false);
+  const router = useRouter();
+  const route = useRoute();
+  const formRef = ref<any>(null);
+  const submiting = ref(false);
 
-// 数据源
-const firstLevelDepts = ref<any[]>([]);
-const oldCenterManagerOptions = ref<any[]>([]); // 旧负责人数据源
-const todoUserOptions = ref<any[]>([]); // 新负责人下拉数据源
-const cascaderRef = ref({});
-const cascaderProp = { expandTrigger: 'click', checkStrictly: true, value: 'id', label: 'deptName' };
+  // 数据源
+  const firstLevelDepts = ref<any[]>([]);
+  const oldCenterManagerOptions = ref<any[]>([]); // 旧负责人数据源
+  const todoUserOptions = ref<any[]>([]); // 新负责人下拉数据源
+  const cascaderRef = ref({});
+  const cascaderProp = { expandTrigger: 'click', checkStrictly: true, value: 'id', label: 'deptName' };
 
-const formValue = reactive({
+  const formValue = reactive({
     id: undefined,
     buildingNo: '',
     buildingArea: '',
@@ -99,116 +161,163 @@ const formValue = reactive({
     safetyResponsibleCenter: '',
     safetyResponsibleCenterId: [],
     safetyCenterManager: null as number | null,
+    safetyResponsibleDepartment: '',
+    safetyResponsibleDepartmentId: [],
+    safetyDepartmentManager: null as number | null,
+    safetySpecificPerson: null as number | null,
+    safetyPersonContact: '',
     // 变更数据
     safetyResponsibleDepartmentTodo: '',
     safetyResponsibleDepartmentIdTodo: [],
     safetySpecificPersonTodo: null as number | null,
     safetySpecificPersonNameTodo: '',
     changeReason: '',
-});
+  });
 
-const rules = reactive({
+  const rules = reactive({
     safetyResponsibleDepartmentTodo: [{ required: true, message: '请选择变更后的责任部门', trigger: 'change' }],
     safetySpecificPersonTodo: [{ required: true, message: '请选择变更后的具体责任人', trigger: 'change' }],
     changeReason: [{ required: true, message: '请输入变更原因', trigger: 'blur' }],
-});
+  });
 
-// 获取部门树
-const getDeptData = async () => {
+  // 获取部门树
+  const getDeptData = async () => {
     const res = await getAllDepartments();
     firstLevelDepts.value = formatDeptTree(res);
-};
+  };
 
-// 获取用户列表封装
-const getUserData = (optionList, deptName) => {
+  // 获取用户列表封装
+  const getUserData = (optionList, deptName) => {
     return queryAvailableUserList({
-        pageNumber: 1,
-        pageSize: 200,
-        queryParam: { deptName },
+      pageNumber: 1,
+      pageSize: 200,
+      queryParam: { deptName },
     }).then((res: any) => {
-        optionList.value = (res.records || []).map((u: any) => ({
-            value: u.id,
-            label: u.realname,
-        }));
+      optionList.value = (res.records || []).map((u: any) => ({
+        value: u.id,
+        label: u.realname,
+      }));
     });
-};
+  };
 
-// 级联选择处理
-const handleChangeDept = (val, prop) => {
+  // 级联选择处理
+  const handleChangeDept = (val, prop) => {
     const cascader = cascaderRef.value?.[prop];
     const deptInfo = cascader?.getCheckedNodes();
     if (deptInfo?.length) {
-        formValue[prop] = deptInfo[0]?.label;
-        // 级联变更后清空已选人员并重新加载
-        formValue.safetySpecificPersonTodo = null;
-        getUserData(todoUserOptions, deptInfo[0]?.label);
+      formValue[prop] = deptInfo[0]?.label;
+      // 级联变更后清空已选人员并重新加载
+      formValue.safetySpecificPersonTodo = null;
+      getUserData(todoUserOptions, deptInfo[0]?.label);
     }
-};
+  };
 
-const syncUserName = (optionList, id: number, nameField: string) => {
+  const syncUserName = (optionList, id: number, nameField: string) => {
     const user = optionList.find((u) => u.value === id);
     if (user) formValue[nameField] = user.label;
-};
+  };
 
-// 详情回显
-const handlAreaCheckListQueryDetail = async () => {
+  // 详情回显
+  // const handlAreaCheckListQueryDetail = async () => {
+  //     const id = route.query.id;
+  //     if (!id) return;
+
+  //     try {
+  //         const res: any = await areaCheckListQueryDetail({ id });
+  //         if (res) {
+  //             Object.assign(formValue, res);
+
+  //             // 1. 解析旧部门级联路径
+  //             if (typeof res.safetyResponsibleCenterId === 'string') {
+  //                 formValue.safetyResponsibleCenterId = JSON.parse(res.safetyResponsibleCenterId);
+  //             }
+
+  //             // 2. 加载旧负责人列表以显示名称
+  //             if (formValue.safetyResponsibleCenter) {
+  //                 getUserData(oldCenterManagerOptions, formValue.safetyResponsibleCenter);
+  //             }
+
+  //             // 3. 纠正 ID 类型
+  //             if (formValue.safetyCenterManager) formValue.safetyCenterManager = Number(formValue.safetyCenterManager);
+  //         }
+  //     } catch (err) {
+  //         ElMessage.error('加载详情失败');
+  //     }
+  // };
+  const safetyCenterManagerOptions = ref<any[]>([]);
+  const userOptions = ref<any[]>([]);
+  const handlAreaCheckListQueryDetail = async () => {
     const id = route.query.id;
     if (!id) return;
 
     try {
-        const res: any = await areaCheckListQueryDetail({ id });
-        if (res) {
-            Object.assign(formValue, res);
-
-            // 1. 解析旧部门级联路径
-            if (typeof res.safetyResponsibleCenterId === 'string') {
-                formValue.safetyResponsibleCenterId = JSON.parse(res.safetyResponsibleCenterId);
-            }
-
-            // 2. 加载旧负责人列表以显示名称
-            if (formValue.safetyResponsibleCenter) {
-                getUserData(oldCenterManagerOptions, formValue.safetyResponsibleCenter);
-            }
-
-            // 3. 纠正 ID 类型
-            if (formValue.safetyCenterManager) formValue.safetyCenterManager = Number(formValue.safetyCenterManager);
+      const res: any = await areaCheckListQueryDetail({ id });
+      if (res) {
+        Object.assign(formValue, res);
+        formValue.changeReason = ''; // 确保变更原因初始为空
+        formValue.safetySpecificPersonTodo = null; // 确保变更具体
+        formValue.safetyResponsibleDepartmentIdTodo = []; // 确保变更部门初始为空
+        // 1. 解析级联 ID 数组
+        try {
+          if (typeof res.safetyResponsibleCenterId === 'string') {
+            formValue.safetyResponsibleCenterId = JSON.parse(res.safetyResponsibleCenterId);
+          }
+          if (typeof res.safetyResponsibleDepartmentId === 'string') {
+            formValue.safetyResponsibleDepartmentId = JSON.parse(res.safetyResponsibleDepartmentId);
+          }
+        } catch (e) {
+          console.error('解析部门ID路径失败', e);
+        }
+
+        // 2. 类型转换
+        formValue.safetyCenterManager = res.safetyCenterManager ? Number(res.safetyCenterManager) : null;
+        formValue.safetyDepartmentManager = res.safetyDepartmentManager ? Number(res.safetyDepartmentManager) : null;
+        formValue.safetySpecificPerson = res.safetySpecificPerson ? Number(res.safetySpecificPerson) : null;
+
+        // 3. 补全人员名单以显示姓名
+        if (formValue.safetyResponsibleCenter) {
+          getUserData(safetyCenterManagerOptions, formValue.safetyResponsibleCenter);
+        }
+        if (formValue.safetyResponsibleDepartment) {
+          getUserData(userOptions, formValue.safetyResponsibleDepartment);
         }
+      }
     } catch (err) {
-        ElMessage.error('加载详情失败');
+      ElMessage.error('获取详情失败');
     }
-};
+  };
 
-onMounted(async () => {
+  onMounted(async () => {
     await getDeptData();
     await handlAreaCheckListQueryDetail();
-});
+  });
 
-const handleSubmit = () => {
+  const handleSubmit = () => {
     formRef.value?.validate((valid: boolean) => {
-        if (valid) {
-            submiting.value = true;
-            const submitData = {
-                id: Number(route.query.id),
-                safetyResponsibleDepartmentTodo: formValue.safetyResponsibleDepartmentTodo,
-                safetyResponsibleDepartmentIdTodo: JSON.stringify(formValue.safetyResponsibleDepartmentIdTodo), // 根据接口需求决定是否 stringify
-                safetySpecificPersonTodo: formValue.safetySpecificPersonTodo,
-                safetySpecificPersonNameTodo: formValue.safetySpecificPersonNameTodo,
-                changeReason: formValue.changeReason,
-            };
-
-            areaCheckListChange(submitData)
-                .then(() => {
-                    ElMessage.success('变更申请提交成功!');
-                    router.push({ name: 'listResponsibilities:public' });
-                })
-                .finally(() => (submiting.value = false));
-        }
+      if (valid) {
+        submiting.value = true;
+        const submitData = {
+          id: Number(route.query.id),
+          safetyResponsibleDepartmentTodo: formValue.safetyResponsibleDepartmentTodo,
+          safetyResponsibleDepartmentIdTodo: JSON.stringify(formValue.safetyResponsibleDepartmentIdTodo), // 根据接口需求决定是否 stringify
+          safetySpecificPersonTodo: formValue.safetySpecificPersonTodo,
+          safetySpecificPersonNameTodo: formValue.safetySpecificPersonNameTodo,
+          changeReason: formValue.changeReason,
+        };
+
+        areaCheckListChange(submitData)
+          .then(() => {
+            ElMessage.success('变更申请提交成功!');
+            router.push({ name: 'listResponsibilities:public' });
+          })
+          .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 *;
+  @use '@/styles/page-main-layout.scss' as *;
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/basic-table-action.scss' as *;
 </style>

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

@@ -1,104 +1,143 @@
 <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" label-width="auto" :model="formValue" :rules="rules">
-                <!-- <el-form-item label="楼号" prop="buildingNo">
+  <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" label-width="auto" :model="formValue" :rules="rules">
+        <!-- <el-form-item label="楼号" prop="buildingNo">
                     <el-input v-model="formValue.buildingNo" size="large" placeholder="请输入楼号" style="width: 50%" />
                 </el-form-item> -->
-                <el-form-item label="楼宇/区域" prop="buildingArea">
-                    <el-input v-model="formValue.buildingArea" size="large" placeholder="请输入楼宇/区域" style="width: 50%" />
-                </el-form-item>
-                <el-form-item label="楼层/房号" prop="floorRoomNo">
-                    <el-input v-model="formValue.floorRoomNo" size="large" placeholder="请输入楼层/房号" style="width: 50%" />
-                </el-form-item>
-                <el-form-item label="名称/功能" prop="nameFunction">
-                    <el-input v-model="formValue.nameFunction" size="large" placeholder="请输入名称/功能" style="width: 50%" />
-                </el-form-item>
+        <el-form-item label="楼宇/区域" prop="buildingArea">
+          <el-input v-model="formValue.buildingArea" size="large" placeholder="请输入楼宇/区域" style="width: 50%" />
+        </el-form-item>
+        <el-form-item label="楼层/房号" prop="floorRoomNo">
+          <el-input v-model="formValue.floorRoomNo" size="large" placeholder="请输入楼层/房号" style="width: 50%" />
+        </el-form-item>
+        <el-form-item label="名称/功能" prop="nameFunction">
+          <el-input v-model="formValue.nameFunction" size="large" placeholder="请输入名称/功能" style="width: 50%" />
+        </el-form-item>
 
-                <el-form-item label="安全责任所/中心" prop="safetyResponsibleCenter">
-                    <el-cascader v-model="formValue.safetyResponsibleCenterId" style="width: 50%" size="large"
-                        :ref="(el) => (cascaderRef['safetyResponsibleCenter'] = el)" :options="firstLevelDepts"
-                        :props="cascaderProp" :show-all-levels="false" placeholder="请选择安全责任部门" clearable filterable
-                        @change="(val) => handleChangeDept(val, 'safetyResponsibleCenter')" />
-                </el-form-item>
+        <el-form-item label="安全责任所/中心" prop="safetyResponsibleCenter">
+          <el-cascader
+            v-model="formValue.safetyResponsibleCenterId"
+            style="width: 50%"
+            size="large"
+            :ref="(el) => (cascaderRef['safetyResponsibleCenter'] = el)"
+            :options="firstLevelDepts"
+            :props="cascaderProp"
+            :show-all-levels="false"
+            placeholder="请选择安全责任部门"
+            clearable
+            filterable
+            @change="(val) => handleChangeDept(val, 'safetyResponsibleCenter')"
+          />
+        </el-form-item>
 
-                <el-form-item label="安全责任所/中心负责人" prop="safetyCenterManager">
-                    <el-select v-model="formValue.safetyCenterManager" placeholder="请选择" size="large" style="width: 50%"
-                        filterable
-                        @change="(val) => syncUserName(safetyCenterManagerOptions, val, 'safetyCenterManagerName')">
-                        <el-option v-for="item in safetyCenterManagerOptions" :key="item.value" :label="item.label"
-                            :value="item.value" />
-                    </el-select>
-                </el-form-item>
+        <el-form-item label="安全责任所/中心负责人" prop="safetyCenterManager">
+          <el-select
+            v-model="formValue.safetyCenterManager"
+            placeholder="请选择"
+            size="large"
+            style="width: 50%"
+            filterable
+            @change="(val) => syncUserName(safetyCenterManagerOptions, val, 'safetyCenterManagerName')"
+          >
+            <el-option
+              v-for="item in safetyCenterManagerOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
 
-                <el-form-item label="安全责任部门" prop="safetyResponsibleDepartment">
-                    <el-cascader v-model="formValue.safetyResponsibleDepartmentId" style="width: 50%" size="large"
-                        :ref="(el) => (cascaderRef['safetyResponsibleDepartment'] = el)" :options="firstLevelDepts"
-                        :props="cascaderProp" :show-all-levels="false" placeholder="请选择安全责任部门" clearable filterable
-                        @change="(val) => handleChangeDept(val, 'safetyResponsibleDepartment')" />
-                </el-form-item>
+        <el-form-item label="安全责任部门" prop="safetyResponsibleDepartment">
+          <el-cascader
+            v-model="formValue.safetyResponsibleDepartmentId"
+            style="width: 50%"
+            size="large"
+            :ref="(el) => (cascaderRef['safetyResponsibleDepartment'] = el)"
+            :options="firstLevelDepts"
+            :props="cascaderProp"
+            :show-all-levels="false"
+            placeholder="请选择安全责任部门"
+            clearable
+            filterable
+            @change="(val) => handleChangeDept(val, 'safetyResponsibleDepartment')"
+          />
+        </el-form-item>
 
-                <el-form-item label="安全责任部门负责人" prop="safetyDepartmentManager">
-                    <el-select v-model="formValue.safetyDepartmentManager" placeholder="请选择" size="large"
-                        style="width: 50%" filterable
-                        @change="(val) => syncUserName(userOptions, val, 'safetyDepartmentManagerName')">
-                        <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="safetyDepartmentManager">
+          <el-select
+            v-model="formValue.safetyDepartmentManager"
+            placeholder="请选择"
+            size="large"
+            style="width: 50%"
+            filterable
+            @change="(val) => syncUserName(userOptions, val, 'safetyDepartmentManagerName')"
+          >
+            <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="safetySpecificPerson">
-                    <el-select v-model="formValue.safetySpecificPerson" placeholder="请选择" size="large"
-                        style="width: 50%" filterable
-                        @change="(val) => syncUserName(userOptions, val, 'safetySpecificPersonName')">
-                        <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="safetySpecificPerson">
+          <el-select
+            v-model="formValue.safetySpecificPerson"
+            placeholder="请选择"
+            size="large"
+            style="width: 50%"
+            filterable
+            @change="(val) => syncUserName(userOptions, val, 'safetySpecificPersonName')"
+          >
+            <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="safetyPersonContact">
-                    <el-input v-model="formValue.safetyPersonContact" size="large" placeholder="选择责任人后自动填充"
-                        style="width: 50%" />
-                </el-form-item>
-            </el-form>
-        </main>
-        <footer class="safety-platform-container__footer">
-            <el-button @click="$router.push({ name: 'listResponsibilities:public' })">返回</el-button>
-            <el-button type="primary" :loading="submiting" @click="handleSubmit">提交</el-button>
-        </footer>
-    </div>
+        <el-form-item label="安全具体责任人联系方式" prop="safetyPersonContact">
+          <el-input
+            v-model="formValue.safetyPersonContact"
+            size="large"
+            placeholder="选择责任人后自动填充"
+            style="width: 50%"
+          />
+        </el-form-item>
+      </el-form>
+    </main>
+    <footer class="safety-platform-container__footer">
+      <el-button @click="$router.push({ name: 'listResponsibilities: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 {
+  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 {
     areaCheckListQueryDetail,
     areaCheckListUpdateArea,
     queryAvailableUserList,
-} from '@/api/production-safety/responsibility-implementation';
+  } from '@/api/production-safety/responsibility-implementation';
 
-const router = useRouter();
-const route = useRoute();
-const formRef = ref<any>(null);
-const submiting = ref(false);
+  const router = useRouter();
+  const route = useRoute();
+  const formRef = ref<any>(null);
+  const submiting = ref(false);
 
-const userOptions = ref<any[]>([]);
-const safetyCenterManagerOptions = ref<any[]>([]);
-const firstLevelDepts = ref<any[]>([]);
-const cascaderRef = ref({});
-const cascaderProp = { expandTrigger: 'click', checkStrictly: true, value: 'id', label: 'deptName' };
+  const userOptions = ref<any[]>([]);
+  const safetyCenterManagerOptions = ref<any[]>([]);
+  const firstLevelDepts = ref<any[]>([]);
+  const cascaderRef = ref({});
+  const cascaderProp = { expandTrigger: 'click', checkStrictly: true, value: 'id', label: 'deptName' };
 
-const formValue = reactive({
+  const formValue = reactive({
     id: undefined,
     buildingNo: '',
     buildingArea: '',
@@ -115,9 +154,9 @@ const formValue = reactive({
     safetySpecificPerson: null as number | null,
     safetySpecificPersonName: '',
     safetyPersonContact: '',
-});
+  });
 
-const rules = reactive({
+  const rules = reactive({
     // buildingNo: [{ required: true, message: '请输入楼号' }],
     buildingArea: [{ required: true, message: '请输入楼宇/区域' }],
     floorRoomNo: [{ required: true, message: '请输入楼层/房号' }],
@@ -128,125 +167,125 @@ const rules = reactive({
     safetyDepartmentManager: [{ required: true, message: '请选择负责人', trigger: 'change' }],
     safetySpecificPerson: [{ required: true, message: '请选择安全具体责任人', trigger: 'change' }],
     safetyPersonContact: [
-        { required: true, message: '请输入联系方式' },
-        { pattern: /^1[3-9]\d{9}$/, message: '格式不正确' },
+      { required: true, message: '请输入联系方式' },
+      { pattern: /^1[3-9]\d{9}$/, message: '格式不正确' },
     ],
-});
+  });
 
-const getDeptData = () => {
+  const getDeptData = () => {
     getAllDepartments().then((res) => {
-        firstLevelDepts.value = formatDeptTree(res);
+      firstLevelDepts.value = formatDeptTree(res);
     });
-};
+  };
 
-const getUserData = (optionList, deptName) => {
+  const getUserData = (optionList, deptName) => {
     return queryAvailableUserList({
-        pageNumber: 1,
-        pageSize: 200,
-        queryParam: { deptName },
+      pageNumber: 1,
+      pageSize: 200,
+      queryParam: { deptName },
     }).then((res: any) => {
-        optionList.value = (res.records || []).map((u: any) => ({
-            value: u.id,
-            label: u.realname,
-            mobile: u.mobile,
-        }));
+      optionList.value = (res.records || []).map((u: any) => ({
+        value: u.id,
+        label: u.realname,
+        mobile: u.mobile,
+      }));
     });
-};
+  };
 
-const handleChangeDept = (val, prop) => {
+  const handleChangeDept = (val, prop) => {
     const cascader = cascaderRef.value?.[prop];
     const deptInfo = cascader?.getCheckedNodes();
     if (deptInfo?.length) {
-        formValue[prop] = deptInfo[0]?.label;
-        handleQueryAvailableUserList(deptInfo[0]?.label, prop);
+      formValue[prop] = deptInfo[0]?.label;
+      handleQueryAvailableUserList(deptInfo[0]?.label, prop);
     }
-};
+  };
 
-const handleQueryAvailableUserList = (value, prop) => {
+  const handleQueryAvailableUserList = (value, prop) => {
     if (prop === 'safetyResponsibleCenter') {
-        formValue.safetyCenterManager = null;
-        getUserData(safetyCenterManagerOptions, value);
+      formValue.safetyCenterManager = null;
+      getUserData(safetyCenterManagerOptions, value);
     } else {
-        formValue.safetySpecificPerson = null;
-        formValue.safetyDepartmentManager = null;
-        getUserData(userOptions, value);
+      formValue.safetySpecificPerson = null;
+      formValue.safetyDepartmentManager = null;
+      getUserData(userOptions, value);
     }
-};
+  };
 
-const syncUserName = (optionList, id, nameField) => {
+  const syncUserName = (optionList, id, nameField) => {
     const user = optionList.find((u) => u.value === id);
     if (user) {
-        formValue[nameField] = user.label;
-        if (nameField === 'safetySpecificPersonName') formValue.safetyPersonContact = user.mobile;
+      formValue[nameField] = user.label;
+      if (nameField === 'safetySpecificPersonName') formValue.safetyPersonContact = user.mobile;
     }
-};
+  };
 
-const handlAreaCheckListQueryDetail = async () => {
+  const handlAreaCheckListQueryDetail = async () => {
     const id = route.query.id;
     if (!id) return;
 
     try {
-        const res: any = await areaCheckListQueryDetail({ id });
-        if (res) {
-            // 1. 基础赋值
-            Object.assign(formValue, res);
+      const res: any = await areaCheckListQueryDetail({ id });
+      if (res) {
+        // 1. 基础赋值
+        Object.assign(formValue, res);
 
-            // 2. 解析 JSON 字符串格式的 ID 数组
-            try {
-                if (typeof res.safetyResponsibleCenterId === 'string') {
-                    formValue.safetyResponsibleCenterId = JSON.parse(res.safetyResponsibleCenterId);
-                }
-                if (typeof res.safetyResponsibleDepartmentId === 'string') {
-                    formValue.safetyResponsibleDepartmentId = JSON.parse(res.safetyResponsibleDepartmentId);
-                }
-            } catch (e) {
-                console.error('ID数组解析失败', e);
-            }
+        // 2. 解析 JSON 字符串格式的 ID 数组
+        try {
+          if (typeof res.safetyResponsibleCenterId === 'string') {
+            formValue.safetyResponsibleCenterId = JSON.parse(res.safetyResponsibleCenterId);
+          }
+          if (typeof res.safetyResponsibleDepartmentId === 'string') {
+            formValue.safetyResponsibleDepartmentId = JSON.parse(res.safetyResponsibleDepartmentId);
+          }
+        } catch (e) {
+          console.error('ID数组解析失败', e);
+        }
 
-            // 3. ID 类型纠正 (String to Number)
-            formValue.safetyCenterManager = res.safetyCenterManager ? Number(res.safetyCenterManager) : null;
-            formValue.safetyDepartmentManager = res.safetyDepartmentManager ? Number(res.safetyDepartmentManager) : null;
-            formValue.safetySpecificPerson = res.safetySpecificPerson ? Number(res.safetySpecificPerson) : null;
+        // 3. ID 类型纠正 (String to Number)
+        formValue.safetyCenterManager = res.safetyCenterManager ? Number(res.safetyCenterManager) : null;
+        formValue.safetyDepartmentManager = res.safetyDepartmentManager ? Number(res.safetyDepartmentManager) : null;
+        formValue.safetySpecificPerson = res.safetySpecificPerson ? Number(res.safetySpecificPerson) : null;
 
-            // 4. 立即同步加载人员列表，防止页面初次显示 ID 数字
-            if (formValue.safetyResponsibleCenter) {
-                getUserData(safetyCenterManagerOptions, formValue.safetyResponsibleCenter);
-            }
-            if (formValue.safetyResponsibleDepartment) {
-                getUserData(userOptions, formValue.safetyResponsibleDepartment);
-            }
+        // 4. 立即同步加载人员列表，防止页面初次显示 ID 数字
+        if (formValue.safetyResponsibleCenter) {
+          getUserData(safetyCenterManagerOptions, formValue.safetyResponsibleCenter);
+        }
+        if (formValue.safetyResponsibleDepartment) {
+          getUserData(userOptions, formValue.safetyResponsibleDepartment);
         }
+      }
     } catch (err) {
-        ElMessage.error('详情获取失败');
+      ElMessage.error('详情获取失败');
     }
-};
+  };
 
-onMounted(() => {
+  onMounted(() => {
     getDeptData();
     handlAreaCheckListQueryDetail();
-});
+  });
 
-const handleSubmit = () => {
+  const handleSubmit = () => {
     formRef.value?.validate((valid) => {
-        if (valid) {
-            submiting.value = true;
-            // 提交时后端通常接受字符串形式，如果后端要数组，则直接传 formValue
-            areaCheckListUpdateArea({ ...formValue, type: 1 })
-                .then(() => {
-                    ElMessage.success('编辑成功!');
-                    router.push({ name: 'listResponsibilities:public' });
-                })
-                .finally(() => (submiting.value = false));
-        }
+      if (valid) {
+        submiting.value = true;
+        // 提交时后端通常接受字符串形式，如果后端要数组，则直接传 formValue
+        areaCheckListUpdateArea({ ...formValue, type: 1 })
+          .then(() => {
+            ElMessage.success('编辑成功!');
+            router.push({ name: 'listResponsibilities:public' });
+          })
+          .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 *;
+  @use '@/styles/page-main-layout.scss' as *;
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/basic-table-action.scss' as *;
 
-.editor-container {
+  .editor-container {
     border: 1px solid #dcdfe6;
     border-radius: 4px;
     margin-right: 20px;
@@ -256,30 +295,31 @@ const handleSubmit = () => {
     //   min-height: 400px;
     //   overflow-y: auto;
     // }
-}
+  }
 
-// :deep(.breadcrumb .title) {
-//   margin-left: 0;
-// }
+  // :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;
-// }
+  // .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>
+  // .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/public-list-responsibilities/list.vue

@@ -1,375 +1,415 @@
 <template>
-    <div class="safety-platform-container">
-        <header class="safety-platform-container__header">
-            <div class="breadcrumb-title">{{ $route.meta.title }}</div>
-            <el-tabs v-model="activeTab" @tab-change="handleTabChange">
-                <el-tab-pane label="公共区域" :name="1" />
-                <el-tab-pane label="非公共区域" :name="2" />
-            </el-tabs>
-        </header>
-        <main class="safety-platform-container__main">
-            <div style="margin-bottom: 20px">
-                <el-button type="primary" @click="
+  <div class="safety-platform-container">
+    <header class="safety-platform-container__header">
+      <div class="breadcrumb-title">{{ $route.meta.title }}</div>
+      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
+        <el-tab-pane label="公共区域" :name="1" />
+        <el-tab-pane label="非公共区域" :name="2" />
+      </el-tabs>
+    </header>
+    <main class="safety-platform-container__main">
+      <div style="margin-bottom: 20px">
+        <el-button
+          type="primary"
+          @click="
+            $router.push({
+              name: 'addResponsibilities:public',
+            })
+          "
+          >添加
+        </el-button>
+      </div>
+      <div class="search-form">
+        <el-form :inline="true">
+          <el-form-item label="区域名称">
+            <el-input v-model="queryParams.queryParam.nameFunction" 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.safetyResponsibleDepartmentId"
+              style="width: 170px"
+              ref="cascaderRef"
+              :options="firstLevelDepts"
+              :props="cascaderProp"
+              :show-all-levels="false"
+              placeholder="部门名称"
+              filterable
+              @change="handleChangeDept"
+            />
+          </el-form-item>
+          <el-form-item label="安全具体责任人" prop="safetyResponsibleBuilding">
+            <el-select
+              v-model="queryParams.queryParam.safetySpecificPerson"
+              placeholder="请选择"
+              style="width: 170px"
+              filterable
+            >
+              <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-form>
+
+        <div>
+          <!-- <el-button @click="batchImportVisible = true">导入</el-button>
+          <el-button type="primary" @click="handleDownload">导出</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="buildingNo" width="80" /> -->
+          <el-table-column label="楼宇/区域" prop="buildingArea" width="120" />
+          <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="changeReason" width="170" />
+          <el-table-column label="状态" prop="statusName" width="100" />
+          <el-table-column fixed="right" min-width="240" label="操作">
+            <template #default="scope">
+              <template v-if="scope.row.status === 1">
+                <el-button
+                  type="primary"
+                  link
+                  @click="
                     $router.push({
-                        name: 'addResponsibilities:public',
+                      name: 'editResponsibilities:public',
+                      query: {
+                        id: scope.row.id,
+                      },
                     })
-                    ">添加
+                  "
+                  >编辑
                 </el-button>
-            </div>
-            <div class="search-form">
-                <el-form :inline="true">
-                    <el-form-item label="区域名称">
-                        <el-input v-model="queryParams.queryParam.nameFunction" 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.safetyResponsibleDepartmentId" style="width: 170px"
-                            ref="cascaderRef" :options="firstLevelDepts" :props="cascaderProp" :show-all-levels="false"
-                            placeholder="部门名称" filterable @change="handleChangeDept" />
-                    </el-form-item>
-                    <el-form-item label="安全具体责任人" prop="safetyResponsibleBuilding">
-                        <el-select v-model="queryParams.queryParam.safetySpecificPerson" placeholder="请选择"
-                            style="width: 170px" filterable>
-                            <el-option v-for="item in userOptions" :key="item.value" :label="item.label"
-                                :value="item.value" />
-                        </el-select>
-                    </el-form-item>
-                </el-form>
-
-                <div>
-                    <!-- <el-button @click="batchImportVisible = true">导入</el-button>
-          <el-button type="primary" @click="handleDownload">导出</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="buildingNo" width="80" /> -->
-                    <el-table-column label="楼宇/区域" prop="buildingArea" width="120" />
-                    <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="changeReason" width="170" />
-                    <el-table-column label="状态" prop="statusName" width="100" />
-                    <el-table-column fixed="right" min-width="240" label="操作">
-                        <template #default="scope">
-                            <template v-if="scope.row.status === 1">
-                                <el-button type="primary" link @click="
-                                    $router.push({
-                                        name: 'editResponsibilities:public',
-                                        query: {
-                                            id: scope.row.id,
-                                        },
-                                    })
-                                    ">编辑
-                                </el-button>
-                                <el-popconfirm title="确定要删除吗?" @confirm="handleConfirmDeleteRow(scope)">
-                                    <template #reference>
-                                        <el-button type="primary" link>删除</el-button>
-                                    </template>
-                                </el-popconfirm>
-
-                                <el-button type="primary" link @click="
-                                    $router.push({
-                                        name: 'changeResponsibilities:public',
-                                        query: {
-                                            id: scope.row.id,
-                                        },
-                                    })
-                                    ">变更</el-button>
-                            </template>
-                            <template v-if="scope.row.canChange === true">
-                                <el-button type="primary" link
-                                    @click="handleAreaCheckListApprove(scope, 1)">确认</el-button>
-                                <el-button type="primary" link
-                                    @click="handleAreaCheckListApprove(scope, 0)">拒绝</el-button>
-                            </template>
-                            <!-- <template v-if="scope.row.status === 3">
+                <el-popconfirm title="确定要删除吗?" @confirm="handleConfirmDeleteRow(scope)">
+                  <template #reference>
+                    <el-button type="primary" link>删除</el-button>
+                  </template>
+                </el-popconfirm>
+
+                <el-button
+                  type="primary"
+                  link
+                  @click="
+                    $router.push({
+                      name: 'changeResponsibilities:public',
+                      query: {
+                        id: scope.row.id,
+                      },
+                    })
+                  "
+                  >变更</el-button
+                >
+              </template>
+              <template v-if="scope.row.canChange === true">
+                <el-button type="primary" link @click="handleAreaCheckListApprove(scope, 1)">确认</el-button>
+                <el-button type="primary" link @click="handleAreaCheckListApprove(scope, 0)">拒绝</el-button>
+              </template>
+              <!-- <template v-if="scope.row.status === 3">
                                 <el-button type="primary" link>变更</el-button>
                             </template> -->
-                            <el-button type="primary" link @click="
-                                $router.push({
-                                    name: 'viewResponsibilities:public',
-                                    query: {
-                                        id: scope.row.id,
-                                    },
-                                })
-                                ">查看</el-button>
-                            <el-button link type="primary" v-if="scope.row.creatBy === id && scope.row.status === 2"
-                                @click="handleAreaCheckListApprove(scope, 0)">
-                                撤回
-                            </el-button>
-                        </template>
-                    </el-table-column>
-                </el-table>
-            </div>
-            <div class="pagination-container" v-if="tableData.total > 0">
-                <el-pagination background layout="prev, pager, next, jumper,sizes, total"
-                    :current-page="queryParams.pageNumber" :page-size="queryParams.pageSize" :total="tableData.total"
-                    :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange"
-                    @current-change="handleCurrentChange" />
-            </div>
-        </main>
-    </div>
-    <BatchImport :visible="batchImportVisible" :importApiUrl="importApiUrl" :templateUrl="templateUrl"
-        :templateName="'责任清单-批量导入模版'" @close="() => (batchImportVisible = false)" @update="handleUpdate" />
+              <el-button
+                type="primary"
+                link
+                @click="
+                  $router.push({
+                    name: 'viewResponsibilities:public',
+                    query: {
+                      id: scope.row.id,
+                    },
+                  })
+                "
+                >查看</el-button
+              >
+              <el-button
+                link
+                type="primary"
+                v-if="scope.row.creatBy === id && scope.row.status === 2"
+                @click="handleAreaCheckListApprove(scope, 0)"
+              >
+                撤回
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="pagination-container" v-if="tableData.total > 0">
+        <el-pagination
+          background
+          layout="prev, pager, next, jumper,sizes, total"
+          :current-page="queryParams.pageNumber"
+          :page-size="queryParams.pageSize"
+          :total="tableData.total"
+          :page-sizes="[10, 20, 50, 100]"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </main>
+  </div>
+  <BatchImport
+    :visible="batchImportVisible"
+    :importApiUrl="importApiUrl"
+    :templateUrl="templateUrl"
+    :templateName="'责任清单-批量导入模版'"
+    @close="() => (batchImportVisible = false)"
+    @update="handleUpdate"
+  />
 </template>
 <script lang="ts" setup>
-import { onMounted, ref, reactive } from 'vue';
-import { ElMessage } from 'element-plus';
-import { useRouter } from 'vue-router';
-import {
+  import { onMounted, ref, reactive } from 'vue';
+  import { ElMessage } from 'element-plus';
+  import { useRouter } from 'vue-router';
+  import {
     areaCheckListQueryPage,
     areaCheckListApprove,
     areaCheckListDelete,
     areaCheckListExportArea,
     queryAvailableUserList,
-} from '@/api/production-safety/responsibility-implementation';
-import urlJoin from 'url-join';
-import { BatchImport } from '@/components/batch-import';
-
-import { downloadFile } from '@/views/disaster/utils';
-import { useGlobSetting } from '@/hooks/setting';
-import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';
-import { getAllDepartments } from '@/api/auth/dept';
-import { useUserInfoHook } from '@/views/disaster/hooks';
-const { id } = useUserInfoHook();
-
-const router = useRouter();
-const activeTab = ref(1);
-const queryParams = reactive<any>({
+  } from '@/api/production-safety/responsibility-implementation';
+  import urlJoin from 'url-join';
+  import { BatchImport } from '@/components/batch-import';
+
+  import { downloadFile } from '@/views/disaster/utils';
+  import { useGlobSetting } from '@/hooks/setting';
+  import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';
+  import { getAllDepartments } from '@/api/auth/dept';
+  import { useUserInfoHook } from '@/views/disaster/hooks';
+  const { id } = useUserInfoHook();
+
+  const router = useRouter();
+  const activeTab = ref(1);
+  const queryParams = reactive<any>({
     pageNumber: 1,
     pageSize: 10,
     queryParam: {
-        type: 1,
-        nameFunction: '',
-        status: '',
-        safetyResponsibleDepartmentId: [],
-        safetySpecificPerson: '',
+      type: 1,
+      nameFunction: '',
+      status: '',
+      safetyResponsibleDepartmentId: [],
+      safetySpecificPerson: '',
     },
-});
+  });
 
-const cascaderRef = ref<any>(null);
-const firstLevelDepts = ref<any[]>([]);
-const cascaderProp = {
+  const cascaderRef = ref<any>(null);
+  const firstLevelDepts = ref<any[]>([]);
+  const cascaderProp = {
     expandTrigger: 'click',
     checkStrictly: true,
     // emitPath: false,
     value: 'id',
     label: 'deptName',
-};
+  };
 
-// 批量导入
-const batchImportVisible = ref(false);
-const { urlPrefix } = useGlobSetting();
-const importApiUrl = ref(urlJoin(urlPrefix, '/areaCheckList/importArea?type=1'));
-const templateUrl = ref('');
+  // 批量导入
+  const batchImportVisible = ref(false);
+  const { urlPrefix } = useGlobSetting();
+  const importApiUrl = ref(urlJoin(urlPrefix, '/areaCheckList/importArea?type=1'));
+  const templateUrl = ref('');
 
-const handleUpdate = () => {
+  const handleUpdate = () => {
     batchImportVisible.value = false;
     queryTableList();
-};
-const userOptions = ref<any[]>([]);
+  };
+  const userOptions = ref<any[]>([]);
 
-const tableData = reactive({
+  const tableData = reactive({
     data: [],
     total: 0,
-});
+  });
 
-const handleChangeDept = () => {
+  const handleChangeDept = () => {
     const deptInfo = cascaderRef.value?.getCheckedNodes();
     if (deptInfo?.[0]) {
-        // queryParams.queryParam.department = deptInfo[0].label;
-        queryParams.queryParam.safetyResponsibleDepartmentId = deptInfo[0].pathValues;
+      // queryParams.queryParam.department = deptInfo[0].label;
+      queryParams.queryParam.safetyResponsibleDepartmentId = deptInfo[0].pathValues;
     }
-};
+  };
 
-const handleTabChange = (tab) => {
+  const handleTabChange = (tab) => {
     if (tab === 1) {
-        router.push({
-            name: 'listResponsibilities:public',
-        });
+      router.push({
+        name: 'listResponsibilities:public',
+      });
     } else if (tab === 2) {
-        router.push({
-            name: 'listResponsibilities:nonPublic',
-        });
+      router.push({
+        name: 'listResponsibilities:nonPublic',
+      });
     }
-};
+  };
 
-async function handleDownload() {
+  async function handleDownload() {
     // getQuery();
     try {
-        const res = await areaCheckListExportArea(queryParams.queryParam);
-        if (res.size === 0) return;
-        const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
-        const url = window.URL.createObjectURL(blob);
-        downloadFile(url, '责任清单.xlsx');
+      const res = await areaCheckListExportArea(queryParams.queryParam);
+      if (res.size === 0) return;
+      const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+      const url = window.URL.createObjectURL(blob);
+      downloadFile(url, '责任清单.xlsx');
     } catch (e) {
-        ElMessage.error('下载失败');
-        console.log(e);
+      ElMessage.error('下载失败');
+      console.log(e);
     }
-}
+  }
 
-const handleQueryAvailableUserList = (deptName = '', realname = '') => {
+  const handleQueryAvailableUserList = (deptName = '', realname = '') => {
     queryAvailableUserList({
-        pageNumber: 1,
-        pageSize: 200,
-        queryParam: {
-            deptName,
-            realname,
-        },
+      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,
-        }));
+      userOptions.value = (res.records || []).map((u: any) => ({
+        value: u.userId || u.id,
+        label: u.realname,
+      }));
     });
-};
+  };
 
-const handleAreaCheckListApprove = (scope, approveType) => {
+  const handleAreaCheckListApprove = (scope, approveType) => {
     areaCheckListApprove({
-        id: scope.row.id,
-        approveType,
-        refuseReason: null,
+      id: scope.row.id,
+      approveType,
+      refuseReason: null,
     }).then(() => {
-        if (approveType === 1) {
-            ElMessage.success('请尽快修改该责任清单的安全责任所/中心、安全责任部门及相关负责人信息');
-        } else {
-            ElMessage.success('操作成功!');
-        }
+      if (approveType === 1) {
+        ElMessage.success('请尽快修改该责任清单的安全责任所/中心、安全责任部门及相关负责人信息');
+      } else {
+        ElMessage.success('操作成功!');
+      }
 
-        queryTableList();
+      queryTableList();
     });
-};
+  };
 
-const handleSizeChange = (value) => {
+  const handleSizeChange = (value) => {
     queryParams.pageSize = value;
     queryTableList();
-};
-const handleCurrentChange = (value) => {
+  };
+  const handleCurrentChange = (value) => {
     queryParams.pageNumber = value;
     queryTableList();
-};
+  };
 
-const handleConfirmDeleteRow = (scope) => {
+  const handleConfirmDeleteRow = (scope) => {
     areaCheckListDelete(scope.row.id).then(() => {
-        ElMessage.success('删除成功!');
-        queryTableList();
+      ElMessage.success('删除成功!');
+      queryTableList();
     });
-};
-const queryTableList = () => {
+  };
+  const queryTableList = () => {
     areaCheckListQueryPage(queryParams).then((res) => {
-        tableData.data = res.records;
-        tableData.total = res.totalRow;
+      tableData.data = res.records;
+      tableData.total = res.totalRow;
     });
-};
-const handleRestParams = () => {
+  };
+  const handleRestParams = () => {
     Object.assign(queryParams, {
-        pageNumber: 1,
-        pageSize: 10,
-        queryParam: {
-            ...queryParams.queryParam,
-            status: '',
-            nameFunction: '',
-            safetyResponsibleDepartmentId: [],
-            safetySpecificPerson: '',
-        },
+      pageNumber: 1,
+      pageSize: 10,
+      queryParam: {
+        ...queryParams.queryParam,
+        status: '',
+        nameFunction: '',
+        safetyResponsibleDepartmentId: [],
+        safetySpecificPerson: '',
+      },
     });
     queryTableList();
-};
+  };
 
-const getDeptData = () => {
+  const getDeptData = () => {
     getAllDepartments().then((res) => {
-        firstLevelDepts.value = formatDeptTree(res);
+      firstLevelDepts.value = formatDeptTree(res);
     });
-};
-onMounted(async () => {
+  };
+  onMounted(async () => {
     await getDeptData();
     await handleQueryAvailableUserList();
     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 *;
+  @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) {
+  :deep(.el-tabs__header) {
     margin: 0;
-}
+  }
 
-:deep(.el-tabs__item) {
+  :deep(.el-tabs__item) {
     font-size: 14px !important;
-}
+  }
 
-:deep(.flexContent) {
+  :deep(.flexContent) {
     display: flex;
-}
+  }
 
-:deep(.breadcrumb .title) {
+  :deep(.breadcrumb .title) {
     margin-left: 0;
-}
+  }
 
-:deep(.el-form) {
+  :deep(.el-form) {
     flex: 1;
     display: flex;
     row-gap: 15px;
     flex-wrap: wrap;
-}
+  }
 
-:deep(.el-form-item) {
+  :deep(.el-form-item) {
     margin-bottom: 0;
-}
+  }
 
-:deep(main) {
+  :deep(main) {
     display: flex;
     flex-direction: column;
-}
+  }
 
-.search-form {
+  .search-form {
     min-width: 800px;
     display: flex;
 
     justify-content: space-between;
     align-items: flex-end;
     margin-bottom: 20px;
-}
+  }
 
-.button-content {
+  .button-content {
     margin-bottom: 20px;
-}
+  }
 
-.table-content {
+  .table-content {
     flex: 1;
     overflow: hidden;
     overflow-y: auto;
-}
+  }
 
-.page-content {
+  .page-content {
     display: flex;
     justify-content: flex-end;
-}
+  }
 
-.pagination-container {
+  .pagination-container {
     margin-top: 20px;
     display: flex;
     justify-content: flex-end;
-}
+  }
 </style>

src/views/production-safety/implement-safety-duty/public-list-responsibilities/view.vue

@@ -1,87 +1,103 @@
 <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" label-width="auto" :model="formValue">
-                <!-- <el-form-item label="楼号">
+  <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" label-width="auto" :model="formValue">
+        <!-- <el-form-item label="楼号">
           <el-input disabled v-model="formValue.buildingNo" size="large" style="width: 50%" />
         </el-form-item> -->
-                <el-form-item label="楼宇/区域">
-                    <el-input disabled v-model="formValue.buildingArea" size="large" style="width: 50%" />
-                </el-form-item>
-                <el-form-item label="楼层/房号">
-                    <el-input disabled v-model="formValue.floorRoomNo" size="large" style="width: 50%" />
-                </el-form-item>
-                <el-form-item label="名称/功能">
-                    <el-input disabled v-model="formValue.nameFunction" size="large" style="width: 50%" />
-                </el-form-item>
-
-                <el-form-item label="安全责任所/中心">
-                    <el-cascader disabled v-model="formValue.safetyResponsibleCenterId" style="width: 50%" size="large"
-                        :options="firstLevelDepts" :props="cascaderProp" :show-all-levels="false" />
-                </el-form-item>
-
-                <el-form-item label="安全责任所/中心负责人">
-                    <el-select disabled v-model="formValue.safetyCenterManager" size="large" style="width: 50%">
-                        <el-option v-for="item in safetyCenterManagerOptions" :key="item.value" :label="item.label"
-                            :value="item.value" />
-                    </el-select>
-                </el-form-item>
-
-                <el-form-item label="安全责任部门">
-                    <el-cascader disabled v-model="formValue.safetyResponsibleDepartmentId" style="width: 50%"
-                        size="large" :options="firstLevelDepts" :props="cascaderProp" :show-all-levels="false" />
-                </el-form-item>
-
-                <el-form-item label="安全责任部门负责人">
-                    <el-select disabled v-model="formValue.safetyDepartmentManager" size="large" style="width: 50%">
-                        <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="安全具体责任人">
-                    <el-select disabled v-model="formValue.safetySpecificPerson" size="large" style="width: 50%">
-                        <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="安全具体责任人联系方式">
-                    <el-input disabled v-model="formValue.safetyPersonContact" size="large" style="width: 50%" />
-                </el-form-item>
-            </el-form>
-        </main>
-        <footer class="safety-platform-container__footer">
-            <el-button type="primary" @click="$router.push({ name: 'listResponsibilities:public' })">返回</el-button>
-        </footer>
-    </div>
+        <el-form-item label="楼宇/区域">
+          <el-input disabled v-model="formValue.buildingArea" size="large" style="width: 50%" />
+        </el-form-item>
+        <el-form-item label="楼层/房号">
+          <el-input disabled v-model="formValue.floorRoomNo" size="large" style="width: 50%" />
+        </el-form-item>
+        <el-form-item label="名称/功能">
+          <el-input disabled v-model="formValue.nameFunction" size="large" style="width: 50%" />
+        </el-form-item>
+
+        <el-form-item label="安全责任所/中心">
+          <el-cascader
+            disabled
+            v-model="formValue.safetyResponsibleCenterId"
+            style="width: 50%"
+            size="large"
+            :options="firstLevelDepts"
+            :props="cascaderProp"
+            :show-all-levels="false"
+          />
+        </el-form-item>
+
+        <el-form-item label="安全责任所/中心负责人">
+          <el-select disabled v-model="formValue.safetyCenterManager" size="large" style="width: 50%">
+            <el-option
+              v-for="item in safetyCenterManagerOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="安全责任部门">
+          <el-cascader
+            disabled
+            v-model="formValue.safetyResponsibleDepartmentId"
+            style="width: 50%"
+            size="large"
+            :options="firstLevelDepts"
+            :props="cascaderProp"
+            :show-all-levels="false"
+          />
+        </el-form-item>
+
+        <el-form-item label="安全责任部门负责人">
+          <el-select disabled v-model="formValue.safetyDepartmentManager" size="large" style="width: 50%">
+            <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="安全具体责任人">
+          <el-select disabled v-model="formValue.safetySpecificPerson" size="large" style="width: 50%">
+            <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="安全具体责任人联系方式">
+          <el-input disabled v-model="formValue.safetyPersonContact" size="large" style="width: 50%" />
+        </el-form-item>
+      </el-form>
+    </main>
+    <footer class="safety-platform-container__footer">
+      <el-button type="primary" @click="$router.push({ name: 'listResponsibilities:public' })">返回</el-button>
+    </footer>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
-import { ElMessage } from 'element-plus';
-import { getAllDepartments } from '@/api/auth/dept';
-import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';
-import {
+  import { ref, reactive, onMounted } from 'vue';
+  import { useRoute } from 'vue-router';
+  import { ElMessage } from 'element-plus';
+  import { getAllDepartments } from '@/api/auth/dept';
+  import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';
+  import {
     areaCheckListQueryDetail,
     queryAvailableUserList,
-} from '@/api/production-safety/responsibility-implementation';
+  } from '@/api/production-safety/responsibility-implementation';
 
-const route = useRoute();
+  const route = useRoute();
 
-const userOptions = ref<any[]>([]);
-const safetyCenterManagerOptions = ref<any[]>([]);
-const firstLevelDepts = ref<any[]>([]);
-const cascaderProp = { value: 'id', label: 'deptName', checkStrictly: true };
+  const userOptions = ref<any[]>([]);
+  const safetyCenterManagerOptions = ref<any[]>([]);
+  const firstLevelDepts = ref<any[]>([]);
+  const cascaderProp = { value: 'id', label: 'deptName', checkStrictly: true };
 
-const formValue = reactive({
+  const formValue = reactive({
     buildingNo: '',
     buildingArea: '',
     floorRoomNo: '',
@@ -94,73 +110,73 @@ const formValue = reactive({
     safetyDepartmentManager: null as number | null,
     safetySpecificPerson: null as number | null,
     safetyPersonContact: '',
-});
+  });
 
-const getDeptData = async () => {
+  const getDeptData = async () => {
     const res = await getAllDepartments();
     firstLevelDepts.value = formatDeptTree(res);
-};
+  };
 
-const getUserData = (optionList: any, deptName: string) => {
+  const getUserData = (optionList: any, deptName: string) => {
     return queryAvailableUserList({
-        pageNumber: 1,
-        pageSize: 200,
-        queryParam: { deptName },
+      pageNumber: 1,
+      pageSize: 200,
+      queryParam: { deptName },
     }).then((res: any) => {
-        optionList.value = (res.records || []).map((u: any) => ({
-            value: u.id,
-            label: u.realname,
-        }));
+      optionList.value = (res.records || []).map((u: any) => ({
+        value: u.id,
+        label: u.realname,
+      }));
     });
-};
+  };
 
-const handlAreaCheckListQueryDetail = async () => {
+  const handlAreaCheckListQueryDetail = async () => {
     const id = route.query.id;
     if (!id) return;
 
     try {
-        const res: any = await areaCheckListQueryDetail({ id });
-        if (res) {
-            Object.assign(formValue, res);
-
-            // 1. 解析级联 ID 数组
-            try {
-                if (typeof res.safetyResponsibleCenterId === 'string') {
-                    formValue.safetyResponsibleCenterId = JSON.parse(res.safetyResponsibleCenterId);
-                }
-                if (typeof res.safetyResponsibleDepartmentId === 'string') {
-                    formValue.safetyResponsibleDepartmentId = JSON.parse(res.safetyResponsibleDepartmentId);
-                }
-            } catch (e) {
-                console.error('解析部门ID路径失败', e);
-            }
-
-            // 2. 类型转换
-            formValue.safetyCenterManager = res.safetyCenterManager ? Number(res.safetyCenterManager) : null;
-            formValue.safetyDepartmentManager = res.safetyDepartmentManager ? Number(res.safetyDepartmentManager) : null;
-            formValue.safetySpecificPerson = res.safetySpecificPerson ? Number(res.safetySpecificPerson) : null;
-
-            // 3. 补全人员名单以显示姓名
-            if (formValue.safetyResponsibleCenter) {
-                getUserData(safetyCenterManagerOptions, formValue.safetyResponsibleCenter);
-            }
-            if (formValue.safetyResponsibleDepartment) {
-                getUserData(userOptions, formValue.safetyResponsibleDepartment);
-            }
+      const res: any = await areaCheckListQueryDetail({ id });
+      if (res) {
+        Object.assign(formValue, res);
+
+        // 1. 解析级联 ID 数组
+        try {
+          if (typeof res.safetyResponsibleCenterId === 'string') {
+            formValue.safetyResponsibleCenterId = JSON.parse(res.safetyResponsibleCenterId);
+          }
+          if (typeof res.safetyResponsibleDepartmentId === 'string') {
+            formValue.safetyResponsibleDepartmentId = JSON.parse(res.safetyResponsibleDepartmentId);
+          }
+        } catch (e) {
+          console.error('解析部门ID路径失败', e);
         }
+
+        // 2. 类型转换
+        formValue.safetyCenterManager = res.safetyCenterManager ? Number(res.safetyCenterManager) : null;
+        formValue.safetyDepartmentManager = res.safetyDepartmentManager ? Number(res.safetyDepartmentManager) : null;
+        formValue.safetySpecificPerson = res.safetySpecificPerson ? Number(res.safetySpecificPerson) : null;
+
+        // 3. 补全人员名单以显示姓名
+        if (formValue.safetyResponsibleCenter) {
+          getUserData(safetyCenterManagerOptions, formValue.safetyResponsibleCenter);
+        }
+        if (formValue.safetyResponsibleDepartment) {
+          getUserData(userOptions, formValue.safetyResponsibleDepartment);
+        }
+      }
     } catch (err) {
-        ElMessage.error('获取详情失败');
+      ElMessage.error('获取详情失败');
     }
-};
+  };
 
-onMounted(async () => {
+  onMounted(async () => {
     await getDeptData();
     handlAreaCheckListQueryDetail();
-});
+  });
 </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 *;
+  @use '@/styles/page-main-layout.scss' as *;
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/basic-table-action.scss' as *;
 </style>

src/views/production-safety/implement-safety-duty/sign-agree-dept.vue

@@ -1,5 +1,10 @@
 <template>
   <div class="safety-platform-container">
+    <el-alert
+      v-if="showAlertBar"
+      title="您提交的反馈材料审核不通过，请尽快查看并修改，再次提交进行审核，谢谢！"
+      type="warning"
+    />
     <header class="safety-platform-container__header">
       <div class="breadcrumb-title"> {{ formData?.responsibilityName }} </div>
       <div class="detail-content">
@@ -8,11 +13,7 @@
         <span>创建时间：{{ formData?.createdAt }} </span>
       </div>
     </header>
-    <el-alert
-      v-if="showAlertBar"
-      title="您提交的反馈材料审核不通过，请尽快查看并修改，再次提交进行审核，谢谢！"
-      type="warning"
-    />
+    
 
     <main class="safety-platform-container__main">
       <el-form ref="formRef" label-width="auto" :model="formData" :rules="rules">

src/views/production-safety/safetyAssessment/evaluationSystem/configs/status.ts

@@ -1,3 +1,4 @@
+
 // 安全考核管理状态配置（搜索条件使用数值状态码）
 // 0-未下发 / 2-待反馈 / 3-待复核 / 4-待审核 / 5-已作废 / 1-已完成
 export const EVALUATION_SYSTEM_STATUS_OPTIONS = [
@@ -18,5 +19,23 @@ export const EVALUATION_SYSTEM_STATUS_LABEL: Record<string, string> = {
   '1': '已完成',
 };
 
+
+export const TABLE_SYSTEM_STATUS_OPTIONS = [
+  { label: '未下发', value: 0 },
+  { label: '待反馈', value: 2 },
+  { label: '待复核', value: 3 },
+  { label: '待审核', value: 4 },
+  { label: '已作废', value: 5 },
+  { label: '已完成', value: 1 },
+];
+export const TABLE_SYSTEM_STATUS_LABEL: Record<string, string> = {
+  '0': '未下发',
+  '2': '待反馈',
+  '3': '待复核',
+  '4': '待审核',
+  '5': '已作废',
+  '1': '已完成',
+};
+
 // 所属部门由输入框搜索，不再使用下拉配置
 export const EVALUATION_SYSTEM_DEPARTMENT_OPTIONS: never[] = [];

src/views/production-safety/safetyAssessment/evaluationSystem/evaluationSystem.vue

@@ -24,7 +24,7 @@
                 <span>状态：</span>
                 <el-select v-model="tableQuery.queryParam.status" placeholder="请选择状态" clearable>
                   <el-option
-                    v-for="item in EVALUATION_SYSTEM_STATUS_OPTIONS"
+                    v-for="item in TABLE_SYSTEM_STATUS_OPTIONS"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
@@ -95,7 +95,7 @@
             </template>
             <template #status="scope">
               <span>
-                {{ EVALUATION_SYSTEM_STATUS_LABEL[String(scope.row.status)] || '-' }}
+                {{ TABLE_SYSTEM_STATUS_LABEL[String(scope.row.status)] || '-' }}
               </span>
             </template>
             <template #action="scope">
@@ -279,7 +279,7 @@
   import useTableConfig from '@/hooks/useTableConfigHook';
   import ActionButton from '@/components/ActionButton.vue';
   import { TABLE_OPTIONS, EVALUATION_SYSTEM_TABLE_COLUMNS } from './configs/tables';
-  import { EVALUATION_SYSTEM_STATUS_OPTIONS, EVALUATION_SYSTEM_STATUS_LABEL } from './configs/status';
+  import { TABLE_SYSTEM_STATUS_OPTIONS, TABLE_SYSTEM_STATUS_LABEL } from './configs/status';
   import { useRouter } from 'vue-router';
   import type { QueryPageRequest } from '@/types/basic-query';
   import {