fix:修复安全体系计划管理(管理员、部门端) 部门显示问题

src/views/production-safety/productionSafetySystem/safetySystemConstructionWorkPlanManagement/components/safetySystemConstructionWorkPlanManagementDetail.vue

@@ -110,7 +110,7 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, onMounted, ref, reactive } from 'vue';
+  import { computed, onMounted, ref, reactive, watch } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   import { ElMessage } from 'element-plus';
   import type { FormInstance } from 'element-plus';
@@ -119,6 +119,7 @@
     saveWorkPlan,
     updateWorkPlan,
     queryWorkPlanDetail,
+    queryWorkPlanDepartmentDetail,
     reviewWorkPlan,
     type SaveWorkPlanRequest,
   } from '@/api/safety-system-construction-work-plan';
@@ -138,14 +139,14 @@
 
   const isCreateMode = computed(() => operate.value === 'work-plan-create');
   const isEditMode = computed(() => operate.value === 'work-plan-edit');
-  const isViewMode = computed(() => operate.value === 'work-plan-view');
-
+  const isViewMode = computed(() => operate.value === 'work-plan-view' || operate.value === 'view-work-content-of-sender');
+  const isViewWorkContentOfSender = computed(() => operate.value === 'view-work-content-of-sender');
   const form = reactive<SaveWorkPlanRequest>({
     workContent: '',
     categoryName: '',
     trainingPlanName: '',
-    responsibleDeptIds: '',
-    cooperateDeptIds: '',
+    responsibleDeptIds: [] as number[],
+    cooperateDeptIds: [] as number[],
     executGroupIds: '',
     plannedComplateTime: '',
     fileUrl: '',
@@ -219,42 +220,7 @@
 
   const attachmentFileList = computed(() => convertAttachmentJsonToFileItems(form.fileUrl || ''));
 
-  async function handleAttachmentUploadSuccess(files: FileItem[]) {
-    if (!files?.length) {
-      form.fileUrl = '';
-      return;
-    }
-    try {
-      const list = await formatAttachmentList(files);
-      const jsonArr = (list || [])
-        .map((r) => ({
-          file_name: r.fileName,
-          url: r.fileUrl || '',
-        }))
-        .filter((x) => x.url);
-      form.fileUrl = JSON.stringify(jsonArr);
-      handleSubmit();
-    } catch (e) {
-      console.error('附件上传失败:', e);
-      ElMessage.error('附件上传失败，请重试');
-    }
-  }
   const previewOnlineRef = ref<InstanceType<typeof PreviewOnline>>();
-  const handlePreview = (url: string) => {
-    if (url) {
-      // 根据文件扩展名判断文件类型
-      const extension = url.split('.').pop()?.toLowerCase() || '';
-      let fileType: 'pdf' | 'word' | 'excel' | 'ppt' = 'pdf';
-      if (extension === 'doc' || extension === 'docx') {
-        fileType = 'word';
-      } else if (extension === 'xls' || extension === 'xlsx') {
-        fileType = 'excel';
-      } else if (extension === 'ppt' || extension === 'pptx') {
-        fileType = 'ppt';
-      }
-      previewOnlineRef.value?.open(url, fileType);
-    }
-  };
   
   const previewOnline = (url: string | undefined, type) => {
     if (url) {
@@ -298,7 +264,26 @@
       return false;
     }
   };
-
+  const getDeptDetail = async () => {
+    if (!currentId.value) return;
+    try {
+      const res = await queryWorkPlanDepartmentDetail(currentId.value);
+      if (res) {
+        // 映射接口字段到表单字段
+        const cooperateDeptIdsArray = parseDeptIds(res.cooperateDeptIds);
+        const responsibleDeptIdsArray = parseDeptIds(res.responsibleDeptIds);
+        Object.assign(form, {
+          ...res,
+          cooperateDeptIds: cooperateDeptIdsArray,
+          responsibleDeptIds: responsibleDeptIdsArray,
+          fileUrl: JSON.parse(res.fileUrl || '[]'),
+        });
+      }
+    } catch (e) {
+      console.error('获取详情失败:', e);
+      ElMessage.error('获取详情失败');
+    }
+  };
   const getDetail = async () => {
     if (!currentId.value) return;
     try {
@@ -314,7 +299,6 @@
           fileUrl: JSON.parse(res.fileUrl || '[]'),
         });
       }
-      // cloneRuleFormData();
     } catch (e) {
       console.error('获取详情失败:', e);
       ElMessage.error('获取详情失败');
@@ -357,17 +341,32 @@
       ElMessage.error('保存失败，请重试');
     }
   };
+  // 强制触发组件重新匹配label, 解决视图无法匹配label问题
+watch(deptTree, () => {
+    if (isEditMode.value || isViewMode.value) {
+        form.cooperateDeptIds = [...parseDeptIds(form.cooperateDeptIds)];
+        form.responsibleDeptIds = [...parseDeptIds(form.responsibleDeptIds)];
+    }
+});
+  onMounted(async () => {
+   await loadDeptTreeData();
 
-  onMounted(() => {
-    loadDeptTreeData();
-    // cloneRuleFormData();
-    // beforeRouteLeave();
     if (isEditMode.value || isViewMode.value) {
-      getDetail();
+      if (isViewWorkContentOfSender.value) {
+        await getDeptDetail();
+      }else{
+       await getDetail();
+      }
     }
+    
   });
 </script>
 
 <style scoped lang="scss">
   @use '@/styles/page-details-layout.scss' as *;
+  .view-text {
+  padding: 8px 0;
+  color: #333;
+  line-height: 1.6;
+}
 </style>

src/views/production-safety/productionSafetySystem/safetySystemConstructionWorkPlanManagement/safetySystemConstructionWorkPlanManagementItem.vue

@@ -1,10 +1,3 @@
-<!--
- * @Author: liuJie
- * @Date: 2026-01-27 16:29:28
- * @LastEditors: liuJie
- * @LastEditTime: 2026-04-09 14:00:54
- * @Describe: file describe
--->
 <template>
   <div class="safety-platform-container">
     <header class="safety-platform-container__header">
@@ -37,6 +30,8 @@
         return '编辑安全体系建设工作计划';
       case 'work-plan-view':
         return '查看安全体系建设工作计划';
+      case 'view-work-content-of-sender':
+        return '查看安全体系建设工作计划';
       case 'work-plan-review':
         return '审核安全体系建设工作计划';
       default:

src/views/production-safety/productionSafetySystem/safetySystemConstructionWorkPlanManagement/safetySystemConstructionWorkPlanManagementViewSender.vue

@@ -281,11 +281,11 @@ import BreadcrumbBack from '@/components/BreadcrumbBack.vue';
   // 查看
   const handleView = (row) => {
     router.push({
-      name: 'SafetySystemConstructionWorkPlanManagementDeptItem',
+      name: 'SafetySystemConstructionWorkPlanManagementItem',
       query: {
         id: row.id,
         planId: row.planId,
-        operate: 'work-plan-dept-view',
+        operate: 'view-work-content-of-sender',
       },
     });
   };

src/views/production-safety/productionSafetySystem/safetySystemConstructionWorkPlanManagementDept/components/safetySystemConstructionWorkPlanManagementDeptDetail.vue

@@ -111,7 +111,7 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, onMounted, ref, reactive } from 'vue';
+  import { computed, onMounted, ref, reactive, watch } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   import { ElMessage } from 'element-plus';
   import type { FormInstance } from 'element-plus';
@@ -144,8 +144,8 @@
     workContent: '',
     categoryName: '',
     trainingPlanName: '',
-    responsibleDeptIds: '',
-    cooperateDeptIds: '',
+    responsibleDeptIds: [] as number[],
+    cooperateDeptIds: [] as number[],
     executGroupIds: '',
     plannedComplateTime: '',
     fileUrl: '',
@@ -207,13 +207,6 @@
     }
     try {
       const list = await formatAttachmentList(files);
-      // debugger
-      // const jsonArr = (list || [])
-      //   .map((r) => ({
-      //     fileName: r.fileName,
-      //     fileUrl: r.fileUrl || '',
-      //   }))
-      //   .filter((x) => x.fileName);
       form.fileUrl = JSON.stringify(list);
     } catch (e) {
       console.error('附件上传失败:', e);
@@ -312,11 +305,6 @@
     const res = await handleValidate();
     if (!res) return;
     try {
-      if (isViewMode && form.fileUrl) {
-        // 处理附件格式
-        // debugger
-        // form.fileUrl = JSON.parse(form.fileUrl)[0].url;
-      }
       if (isEditMode.value && currentId.value) {
         await issueWorkPlanDept({
           id: currentId.value,
@@ -331,12 +319,17 @@
       ElMessage.error('保存失败，请重试');
     }
   };
-
-  onMounted(() => {
-    loadDeptTreeData();
-    console.log(isEditMode.value, isViewMode.value);
+  // 强制触发组件重新匹配label, 解决视图无法匹配label问题
+watch(deptTree, () => {
+    if (isEditMode.value || isViewMode.value) {
+        form.cooperateDeptIds = [...parseDeptIds(form.cooperateDeptIds)];
+        form.responsibleDeptIds = [...parseDeptIds(form.responsibleDeptIds)];
+    }
+});
+  onMounted(async () => {
+    await loadDeptTreeData();
     if (isEditMode.value || isViewMode.value) {
-      getDetail();
+      await getDetail();
     }
   });
 </script>