Преглед изворни кода

feat: 添加面包屑导航和优化表格合并功能

sunqijun пре 2 месеци
родитељ
комит
5b1c51a6a1

+ 6 - 1
src/views/production-safety/implement-safety-duty/agree-document-review.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="safety-platform-container">
     <el-alert v-if="showAlertBar" :title="formData?.rejection" type="warning" />
+    <div class="breadcrumb-title">
+        <BreadcrumbBack />
+        {{ formData?.responsibilityName }}
+      </div>
     <header class="safety-platform-container__header">
       <div class="breadcrumb-title"> {{ formData?.responsibilityName }} </div>
       <div class="detail-content">
@@ -224,6 +228,7 @@
 <script lang="ts" setup>
   import { onMounted, ref, computed, reactive } from 'vue';
   import { ElMessage } from 'element-plus';
+// @ts-ignore: missing type declarations for CSS side-effect import
   import '@wangeditor/editor/dist/css/style.css';
   import { useRouter, useRoute } from 'vue-router';
   import { downloadFile } from '@/views/disaster/utils';
@@ -481,7 +486,7 @@
     display: flex;
     flex-direction: column;
     gap: 10px;
-
+    width: 50%;
     .file-item {
       display: flex;
       justify-content: space-between;

+ 1 - 0
src/views/production-safety/implement-safety-duty/create-responsibility-agree.vue

@@ -88,6 +88,7 @@
   import { onMounted, ref, nextTick, reactive, shallowRef } from 'vue';
   import dayjs from 'dayjs';
   import { ElMessage } from 'element-plus';
+// @ts-ignore: missing type declarations for CSS side-effect import
   import '@wangeditor/editor/dist/css/style.css';
   import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
   import { useRouter, useRoute } from 'vue-router';

+ 32 - 1
src/views/production-safety/implement-safety-duty/responsibility-feedback.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="safety-platform-container">
     <header class="safety-platform-container__header">
-      <div class="breadcrumb-title"> {{ formData?.responsibilityName }} </div>
+      <div class="breadcrumb-title"><BreadcrumbBack /> {{ formData?.responsibilityName }} </div>
       <div class="detail-content">
         <span>类别名称:{{ formData?.departmentName }} </span>
         <span>创建人:{{ formData?.createdByName }} </span>
@@ -225,6 +225,7 @@
 <script lang="ts" setup>
   import { onMounted, ref, computed, reactive } from 'vue';
   import { ElMessage } from 'element-plus';
+// @ts-ignore: missing type declarations for CSS side-effect import
   import '@wangeditor/editor/dist/css/style.css';
   import { useRouter, useRoute } from 'vue-router';
   import { downloadFile } from '@/views/disaster/utils';
@@ -470,6 +471,36 @@
     background-color: rgb(245, 247, 250);
   }
 
+  .file-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 50%;
+    .file-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px;
+      // border: 1px solid rgb(220, 223, 230);
+
+      .file-item--name {
+        font-size: 14px;
+        color: #606266;
+      }
+
+      .file-item--footer {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+
+        .info {
+          font-size: 12px;
+          color: #9099a4;
+        }
+      }
+    }
+  }
+
   // :deep(.breadcrumb .title) {
   //   margin-left: 0;
   // }

+ 1 - 0
src/views/production-safety/implement-safety-duty/responsibility-notice-manage-admin/review.vue

@@ -109,6 +109,7 @@
 <script lang="ts" setup>
   import { onMounted, ref, nextTick, reactive, shallowRef } from 'vue';
   import { ElMessage } from 'element-plus';
+// @ts-ignore: missing type declarations for CSS side-effect import
   import '@wangeditor/editor/dist/css/style.css';
   import { useRouter, useRoute } from 'vue-router';
   import { downloadFile } from '@/views/disaster/utils';

+ 1 - 0
src/views/production-safety/implement-safety-duty/responsibility-notice-manage-dept/feedback.vue

@@ -151,6 +151,7 @@
 <script lang="ts" setup>
   import { onMounted, ref, computed, reactive } from 'vue';
   import { ElMessage } from 'element-plus';
+// @ts-ignore: missing type declarations for CSS side-effect import
   import '@wangeditor/editor/dist/css/style.css';
   import { useRouter, useRoute } from 'vue-router';
   import { downloadFile } from '@/views/disaster/utils';

+ 32 - 2
src/views/production-safety/safetyAssessment/evaluationDepartment/components/EvaluationDepartmentFeedback.vue

@@ -36,7 +36,7 @@
         />
       </div>
       <div class="evaluation-items-table">
-        <el-table :data="evaluationItems" border show-summary :summary-method="getSummaries">
+        <el-table :data="evaluationItems" border show-summary :summary-method="getSummaries" :span-method="spanMethod">
           <el-table-column label="编号" type="index" width="80" align="center" />
           <el-table-column label="考核项目" prop="evaluationItem" min-width="150" />
           <el-table-column label="考核内容" prop="evaluationContent" min-width="200" />
@@ -185,7 +185,36 @@
       });
     });
   };
-
+let spanArr = ref<number[]>([]); // 存储每行的合并数,0表示被合并的行
+const generateSpanArr = (data) => {
+  spanArr.value = [];
+  let position = 0; // 记录当前考核项目的起始位置
+  
+  data.forEach((item, index) => {
+    if (index === 0) {
+      spanArr.value.push(1);
+      position = 0;
+    } else {
+      // 当前考核项目与前一项相同时合并
+      if (item.evaluationItem === data[index-1].evaluationItem) {
+        spanArr.value[position] += 1;   // 起始行合并数+1
+        spanArr.value.push(0);           // 当前行标记为合并
+      } else {
+        spanArr.value.push(1);           // 新考核项目组
+        position = index;                // 更新起始位置
+      }
+    }
+  });
+};
+const spanMethod = ({ row, column, rowIndex, columnIndex }) => {
+  // 仅对考核项目列(columnIndex=1)进行合并
+  if (columnIndex === 1) {
+    const _row = spanArr.value[rowIndex];
+    const _col = _row > 0 ? 1 : 0;
+    return [_row, _col];
+  }
+  return [1, 1]; // 其他列不合并
+};
   const handleUploadSuccess = (files: any[]) => {
     ruleFormData.value.attachmentDocument = files;
   };
@@ -315,6 +344,7 @@
           reviewRejectReson: score.reviewRejectReson || '', // 复核不通过原因
           attachmentFileList: parseAttachmentsToFileList(score.attachments || ''), // 对应的附件文件列表
         }));
+        generateSpanArr(evaluationItems.value);
       } else {
         evaluationItems.value = [];
       }

+ 33 - 7
src/views/production-safety/safetyAssessment/evaluationSystem/components/EvaluationSystemFeedback.vue

@@ -1,5 +1,4 @@
 <template>
-  <main class="safety-platform-container__main">
     <!-- 反馈审核不通过提示条:仅在 evaluationSystem-feedback 且 approveRejectReson 有值时显示 -->
     <el-alert
       v-if="isFeedbackOperate && approveRejectReson"
@@ -8,6 +7,7 @@
       show-icon
       class="reject-alert"
     />
+  <main class="safety-platform-container__main">
     <el-form ref="formRef" :model="ruleFormData" :rules="formRules" label-width="auto" class="evaluation-form">
       <el-form-item label="考核信息标题:" prop="evaluationTitle">
         <el-input v-model="ruleFormData.evaluationTitle" placeholder="请输入考核信息标题" disabled />
@@ -46,7 +46,7 @@
         />
       </div>
       <div class="evaluation-items-table">
-        <el-table :data="evaluationItems" border show-summary :summary-method="getSummaries">
+        <el-table :data="evaluationItems" border show-summary :summary-method="getSummaries" :span-method="spanMethod" >
           <el-table-column label="编号" type="index" width="80" align="center" />
           <el-table-column label="考核项目" prop="evaluationItem" min-width="150" />
           <el-table-column label="考核内容" prop="evaluationContent" min-width="200" />
@@ -493,6 +493,7 @@
           isReviewInput: score.isReviewInput, // 是否显示复核得分输入框
           // reviewRejectResonShow: detail.isSelfApproveButton || '', // 复核不通过原因
         }));
+        generateSpanArr(evaluationItems.value);
       } else {
         evaluationItems.value = [];
       }
@@ -501,7 +502,36 @@
       ElMessage.error(e?.message || e?.data || '获取详情失败,请重试');
     }
   };
-
+  let spanArr = ref<number[]>([]); // 存储每行的合并数,0表示被合并的行
+const generateSpanArr = (data) => {
+  spanArr.value = [];
+  let position = 0; // 记录当前考核项目的起始位置
+  
+  data.forEach((item, index) => {
+    if (index === 0) {
+      spanArr.value.push(1);
+      position = 0;
+    } else {
+      // 当前考核项目与前一项相同时合并
+      if (item.evaluationItem === data[index-1].evaluationItem) {
+        spanArr.value[position] += 1;   // 起始行合并数+1
+        spanArr.value.push(0);           // 当前行标记为合并
+      } else {
+        spanArr.value.push(1);           // 新考核项目组
+        position = index;                // 更新起始位置
+      }
+    }
+  });
+};
+const spanMethod = ({ row, column, rowIndex, columnIndex }) => {
+  // 仅对考核项目列(columnIndex=1)进行合并
+  if (columnIndex === 1) {
+    const _row = spanArr.value[rowIndex];
+    const _col = _row > 0 ? 1 : 0;
+    return [_row, _col];
+  }
+  return [1, 1]; // 其他列不合并
+};
   const handleSubmit = async () => {
     const res = await handleValidate();
     if (!res) return;
@@ -706,10 +736,6 @@
   @use '@/styles/page-details-layout.scss' as *;
   @use '@/styles/basic-table-file.scss' as *;
 
-  .reject-alert {
-    margin-bottom: 20px;
-  }
-
   .evaluation-form {
     display: flex;
     flex-direction: column;