完成表格高亮和文件校验

src/styles/custom-component.scss

@@ -126,3 +126,8 @@ $message-box-content-padding--icon: 36px;
     left: 20px;
   }
 }
+
+.el-table .row--highlight {
+  color: $primary-color;
+  background: rgba($primary-color, 0.2);
+}

src/views/emergency/emergency-plan/PageApproval.vue

@@ -25,7 +25,7 @@
             <span>{{ getEmergencyEvent(scope.row.eventType) }}</span>
           </template>
           <template #approvalStatus="scope">
-            <span>{{ getEmergencyPlanApproStatusLabel(scope.row.status) }}</span>
+            <span>{{ getEmergencyPlanApproStatusLabel(scope.row.approvalStatus) }}</span>
           </template>
           <template #appendix="scope">
             <span class="appendix" v-if="scope.row.appendix" @click="handlePreviewScript(scope.row.appendix)">

src/views/emergency/emergency-plan/PageManagement.vue

@@ -128,9 +128,10 @@
     TABLE_MAX_HEIGHT_DEFAULT,
     TABLE_MAX_HEIGHT_PERMISSION,
     APPROVAL_PROCESS_TABLE_COLUMNS,
+    APPROVAL_PROCESS_TABLE_OPTIONS,
   } from './src/config';
   import { EMERGENCY_PERMISSIONS } from '@/views/emergency/src/constant';
-  import { EMERGENCY_PLAN_STATUS, APPROVAL_TYPE_MAP,APPROVAL_STATUS_MAP } from './src/constant';
+  import { EMERGENCY_PLAN_STATUS, APPROVAL_TYPE_MAP, APPROVAL_STATUS_MAP, APPROVAL_STATUS } from './src/constant';
 
   const router = useRouter();
   const planManagementPremissions = ref<boolean>(false);
@@ -138,7 +139,83 @@
     EMERGENCY_PLAN_MANAGEMENT_TABLE_COLUMNS,
     EMERGENCY_PLAN_MANAGEMENT_TABLE_OPTIONS,
   );
-  const { tableConfig: approvalProcessConfig } = useTableConfig(APPROVAL_PROCESS_TABLE_COLUMNS, {}, false);
+  // 添加合并单元格方法
+  const mergeApprovalProcess = ({ column, rowIndex }) => {
+    // 合并流程步骤列
+    if (column.label === '流程步骤' || column.label === '节点描述') {
+      if (
+        rowIndex > 0 &&
+        approvalProcessData.value[rowIndex].approvalOrder === approvalProcessData.value[rowIndex - 1].approvalOrder
+      ) {
+        return {
+          rowspan: 0,
+          colspan: 0,
+        };
+      } else {
+        let count = 1;
+        for (let i = rowIndex + 1; i < approvalProcessData.value.length; i++) {
+          if (approvalProcessData.value[i].approvalOrder === approvalProcessData.value[rowIndex].approvalOrder) {
+            count++;
+          } else {
+            break;
+          }
+        }
+        return {
+          rowspan: count,
+          colspan: 1,
+        };
+      }
+    }
+
+    // 其他列正常显示
+    return {
+      rowspan: 1,
+      colspan: 1,
+    };
+  };
+  // 高亮表格
+  const highlightCell = ({ rowIndex }) => {
+    // 找到应该高亮的行索引
+    const findHighlightRowIndex = () => {
+      // 遍历所有行，寻找符合条件的行
+      for (let i = 0; i < approvalProcessData.value.length; i++) {
+        const row = approvalProcessData.value[i];
+
+        // 如果没有审批时间，返回该行索引
+        if (!row.approvalTime) {
+          return i;
+        }
+
+        // 如果有审批时间且状态为退回(假设退回状态为2)，返回该行索引
+        if (row.approvalTime && row.approvalStatus === APPROVAL_STATUS.REJECTED) {
+          return i;
+        }
+      }
+
+      // 如果没有找到符合条件的行，返回最后一行索引
+      return approvalProcessData.value.length - 1;
+    };
+
+    // 获取应该高亮的行索引
+    const highlightRowIndex = findHighlightRowIndex();
+
+    // 如果当前行是应该高亮的行，则高亮
+    if (rowIndex === highlightRowIndex) {
+      return 'row--highlight';
+    }
+
+    return '';
+  };
+  const { tableConfig: approvalProcessConfig } = useTableConfig(
+    APPROVAL_PROCESS_TABLE_COLUMNS,
+    {
+      ...APPROVAL_PROCESS_TABLE_OPTIONS,
+      spanMethod: mergeApprovalProcess,
+      rowClassName: highlightCell,
+    },
+    false,
+  );
+
   const { emergencyEventDice, getEmergencyEventDict, getEmergencyEvent } = useEmergencyHook();
   const { planTypeDice, getPlanTypeDict, getPlanType, getEmergencyPlanStatusLabel } = useEmergencyPlanHook();
   const { permissions } = useUserInfoHook();
@@ -244,6 +321,7 @@
         });
       }
     });
+
     basicDialogRef.value?.openDialog();
   };
 

src/views/emergency/emergency-plan/src/components/AddManagementDetail.vue

@@ -39,7 +39,7 @@
           <el-option v-for="item in approvalList" :key="item.id" :label="item.templateName" :value="item.id" />
         </el-select>
       </template>
-      <template #appendix>
+      <template #uploadFile>
         <UploadFiles label="上传附件" :maxCount="1" @uploadSuccess="handleUploadSuccess" />
       </template>
     </BasicForm>
@@ -82,6 +82,7 @@
   };
   const handleUploadSuccess = (fileList: FileItem[]) => {
     ruleFormData.uploadFile = fileList;
+    formRef.value?.validateField('uploadFile');
   };
   const handleValidate = async () => {
     if (!formRef.value) return;

src/views/emergency/emergency-plan/src/components/EditManagementDetail.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="emergency-plan-container">
     <BasicForm ref="formRef" :formData="ruleFormData" :formConfig="ruleFormConfig" :formRules="formRules">
-      <template #appendix>
+      <template #uploadFile>
         <UploadFiles
           label="上传附件"
           :maxCount="1"
@@ -23,17 +23,22 @@
   import type { EditEmergencyPlaneForm } from '@/types/emergency-plan';
   import type { FileItem } from '@/views/disaster/types';
   import { queryEmergencyPlan } from '@/api/emergency-plan';
-  import { PLAN_MANAGEMENT_FORM_CONFIG_EDIT, PLAN_MANAGEMENT_FORM_DATA_EDIT,PLAN_MANAGEMENT_FORM_RULES_EDIT } from '../config';
+  import {
+    PLAN_MANAGEMENT_FORM_CONFIG_EDIT,
+    PLAN_MANAGEMENT_FORM_DATA_EDIT,
+    PLAN_MANAGEMENT_FORM_RULES_EDIT,
+  } from '../config';
 
   const formRef = ref();
   const props = defineProps<{
     id: number;
   }>();
-  const { ruleFormConfig, ruleFormData, formRules } = useFormConfigHook<EditEmergencyPlaneForm>(
-    PLAN_MANAGEMENT_FORM_CONFIG_EDIT,
-    PLAN_MANAGEMENT_FORM_DATA_EDIT,
-    PLAN_MANAGEMENT_FORM_RULES_EDIT
-  );
+  const { ruleFormConfig, ruleFormData, formRules, cloneRuleFormData, beforeRouteLeave } =
+    useFormConfigHook<EditEmergencyPlaneForm>(
+      PLAN_MANAGEMENT_FORM_CONFIG_EDIT,
+      PLAN_MANAGEMENT_FORM_DATA_EDIT,
+      PLAN_MANAGEMENT_FORM_RULES_EDIT,
+    );
 
   const { getEmergencyEventDict, getEmergencyEvent, getApprovalList, approvalList } = useEmergencyHook();
   const { getPlanTypeDict, getPlanType } = useEmergencyPlanHook();
@@ -47,6 +52,7 @@
         approvalList.value?.find((item) => item.id === res.approvalTemplateId)?.templateName || '';
       ruleFormData.uploadFile = JSON.parse(res.appendix);
     }
+    cloneRuleFormData();
   };
   const handleUploadSuccess = (fileList: FileItem[]) => {
     ruleFormData.uploadFile = fileList;
@@ -57,6 +63,7 @@
     return validateResult;
   };
   const getFormData = () => {
+    cloneRuleFormData();
     return ruleFormData;
   };
   onMounted(async () => {
@@ -64,6 +71,7 @@
     await getEmergencyEventDict();
     await getApprovalList();
     getPlanDetail();
+    beforeRouteLeave();
   });
   defineExpose({
     handleValidate,

src/views/emergency/emergency-plan/src/components/ViewManagementDetail.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="emergency-plan-container">
     <BasicForm ref="formRef" :formData="ruleFormData" :formConfig="ruleFormConfig">
-      <template #appendix>
+      <template #uploadFile>
         <div class="appendix-container" v-if="ruleFormData.uploadFile.length">
           <div class="appendix-item" v-for="item in ruleFormData.uploadFile" :key="item.fileId">
             <div class="appendix-item-name" @click="handlePreviewScript(item.fileUrl, item.fileType)">

src/views/emergency/emergency-plan/src/config/form.ts

@@ -5,8 +5,8 @@ import type { FormConfig } from '@/types/basic-form';
 const BASIC_FORM_CONFIG = {
   APPENDIX: {
     label: '预案文件：',
-    prop: 'appendix',
-    slot: 'appendix',
+    prop: 'uploadFile',
+    slot: 'uploadFile',
   },
 };
 // 盘点任务表单信息
@@ -113,7 +113,7 @@ export const PLAN_MANAGEMENT_FORM_DATA_EDIT = {
 };
 
 const BASIC_FORM_RULES = {
-  appendix: [{ required: true, message: '请上传预案文件', trigger: 'blur' }],
+  uploadFile: [{ required: true, message: '请上传预案文件', trigger: 'change' }],
 };
 
 // 盘点任务表单规则
@@ -121,8 +121,11 @@ export const PLAN_MANAGEMENT_FORM_RULES = {
   planName: [{ required: true, message: '请输入预案名称', trigger: 'blur' }],
   planType: [{ required: true, message: '请选择预案类型', trigger: 'change' }],
   eventType: [{ required: true, message: '请选择事件类型', trigger: 'change' }],
-  deptId: [{ required: true, message: '请选择制定部门', trigger: 'blur' }],
+  deptId: [{ required: true, message: '请选择制定部门', trigger: 'change' }],
   approvalTemplateId: [{ required: true, message: '请选择审批流程', trigger: 'change' }],
+  ...BASIC_FORM_RULES
 };
 
-export const PLAN_MANAGEMENT_FORM_RULES_EDIT = {};
+export const PLAN_MANAGEMENT_FORM_RULES_EDIT = {
+  ...BASIC_FORM_RULES,
+};

src/views/emergency/emergency-plan/src/config/index.ts

@@ -6,7 +6,8 @@ import {
   TABLE_MAX_HEIGHT_PERMISSION,
   EMERGENCY_PLAN_APPROVAL_TABLE_OPTIONS,
   EMERGENCY_PLAN_APPROVAL_TABLE_COLUMNS,
-  APPROVAL_PROCESS_TABLE_COLUMNS
+  APPROVAL_PROCESS_TABLE_COLUMNS,
+  APPROVAL_PROCESS_TABLE_OPTIONS,
 } from './table';
 import {
   PLAN_MANAGEMENT_FORM_CONFIG,
@@ -32,4 +33,5 @@ export {
   EMERGENCY_PLAN_APPROVAL_TABLE_COLUMNS,
   PLAN_MANAGEMENT_FORM_RULES_EDIT,
   APPROVAL_PROCESS_TABLE_COLUMNS,
+  APPROVAL_PROCESS_TABLE_OPTIONS,
 };

src/views/emergency/emergency-plan/src/config/table.ts

@@ -54,6 +54,10 @@ export const EMERGENCY_PLAN_APPROVAL_TABLE_OPTIONS = {
   maxHeight: 'calc(70vh - 50px)',
 };
 
+export const APPROVAL_PROCESS_TABLE_OPTIONS = {
+  maxHeight: '500px',
+};
+
 export const EMERGENCY_PLAN_MANAGEMENT_TABLE_COLUMNS: TableColumnProps[] = [
   BASIC_TABLE_COLUMNS.INDEX,
   BASIC_TABLE_COLUMNS.PLAN_NAME,
@@ -83,7 +87,7 @@ export const EMERGENCY_PLAN_APPROVAL_TABLE_COLUMNS: TableColumnProps[] = [
     label: '公示文件',
     slot: 'appendix',
     width: '120px',
-    align: 'center'
+    align: 'center',
   },
   {
     label: '预案审批描述',
@@ -98,7 +102,7 @@ export const EMERGENCY_PLAN_APPROVAL_TABLE_COLUMNS: TableColumnProps[] = [
   {
     label: '提交时间',
     prop: 'createdAt',
-    minWidth: '200px'
+    minWidth: '200px',
   },
   BASIC_TABLE_COLUMNS.ACTION,
 ];
@@ -107,6 +111,8 @@ export const APPROVAL_PROCESS_TABLE_COLUMNS: TableColumnProps[] = [
   {
     label: '流程步骤',
     prop: 'approvalOrder',
+    align: 'center',
+    width: '120px'
   },
   {
     label: '节点描述',
@@ -119,10 +125,14 @@ export const APPROVAL_PROCESS_TABLE_COLUMNS: TableColumnProps[] = [
   {
     label: '审批方式',
     slot: 'approvalType',
+    align: 'center',
+    width: '120px'
   },
   {
     label: '状态',
     slot: 'approvalStatus',
+    align: 'center',
+    width: '100px'
   },
   {
     label: '审批时间',
@@ -133,4 +143,4 @@ export const APPROVAL_PROCESS_TABLE_COLUMNS: TableColumnProps[] = [
     label: '审批内容',
     prop: 'approvalContent',
   },
-];
+];

src/views/emergency/emergency-plan/src/styles/info.scss

@@ -1,3 +1,5 @@
 .emergency-plan-container{
+    width: 100%;
+    height: 100%;
     overflow-y: auto;
 }