refactor(bpm): 重构质检报告详情对话框，使用动态模板替代硬编码表格

src/views/bpm/handleTask/components/qualityReportApproval/detailDialog.vue

@@ -1,119 +1,29 @@
 <template>
   <div class="quality-report-container">
-    <div v-if="reportData.reportNumber">
-      <div class="title">
-        质检报告
-      </div>
-      
-      <!-- 质检报告表格 -->
-      <div style="display: flex; align-items: center; justify-content: space-between; font-size: 14px; margin-bottom: 10px;">
-          <div>
-              <span class="label">编号：</span>
-              <span class="value">{{ reportData.code }}</span>
-            </div>
-            <div>
-              <span class="label">报告单号：</span>
-              <span class="value">{{ reportData.reportNumber }}</span>
-          </div>
-      </div>
-      <table class="quality-report-table">
-        <tbody>
-          <tr>
-            <td class="label">检品名称：</td>
-            <td class="value">{{ reportData.productName }}</td>
-            <td class="label">批号/序列号：</td>
-            <td class="value"></td>
-          </tr>
-          <tr>
-            <td class="label">规格型号：</td>
-            <td class="value">{{ reportData.specification }}</td>
-            <td class="label">数量：</td>
-            <td class="value">{{ reportData.total }}</td>
-          </tr>
-          <tr>
-            <td class="label">请验日期：</td>
-            <td class="value">{{ reportData.pleaseVerifyDate }}</td>
-            <td class="label">请验部门：</td>
-            <td class="value">{{ reportData.pleaseVerifyDepartment }}</td>
-          </tr>
-          <tr>
-            <td class="label">报告日期：</td>
-            <td class="value">{{ reportData.reportDate }}</td>
-            <td class="label">有效期：</td>
-            <td class="value">{{ reportData.expirationDate }}</td>
-          </tr>
-          <tr>
-            <td class="label">检品来源：</td>
-            <td class="value">{{ reportData.source }}</td>
-            <td class="label">储存条件：</td>
-            <td class="value">{{ reportData.storageCondition }}</td>
-          </tr>
-          <tr>
-            <td class="label">检验依据：</td>
-            <td class="value" colspan="3">{{ reportData.inspectionBasis }}</td>
-          </tr>
-        </tbody>
-      </table>
-
-      <!-- 检验项目表格 -->
-      <table class="quality-report-table">
-        <thead>
-          <tr>
-            <th class="label">检验项目</th>
-            <th class="label">标准规定</th>
-            <th class="label">检验结果</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="item in reportDetail">
-            <td class="value">{{ item.item }}</td>
-            <td class="value">{{ item.standardRegulations }}</td>
-            <td class="value">{{ item.results }}</td>
-          </tr>
-        </tbody>
-      </table>
-
-      <!-- 结论表格 -->
-      <table class="quality-report-table">
-        <tbody>
-          <tr>
-            <td class="label">结论：</td>
-            <td class="value" colspan="3">{{ reportData.conclusion }}</td>
-          </tr>
-          <tr>
-            <td class="label">备注：</td>
-            <td class="value" colspan="3">{{ reportData.remarks }}</td>
-          </tr>
-        </tbody>
-      </table>
-
-      <div style="display: flex; align-items: center; justify-content: space-between; font-size: 14px; margin-top: 10px;">
-        <div>
-          <span class="label">检验员/日期：</span>
-          <span class="value">{{ reportData.inspector }}/{{ reportData.inspectionTime }}</span>
-        </div>
-        <div>
-          <span class="label">复核人/日期：</span>
-          <span class="value">{{ reportData.reviewer }}/{{ reportData.reviewTime }}</span>
-        </div>
-        <div>
-          <span class="label">审核人/日期：</span>
-          <span class="value">{{ reportData.checker }}/{{ reportData.approvedDate }}</span>
-        </div>
-      </div>
+    <div v-if="template">
+      <!-- <component
+        :is="reportData.reportCode"
+        :key="reportData.reportCode"
+        :isView="true"
+        :basicInfoData="reportData"
+        :inspectionItems="reportDetail"
+      ></component> -->
+      <div v-html="template"> </div>
     </div>
-    <browse
-      v-else
-      :url="fileUrl"
-    ></browse>
+    <browse v-else :url="fileUrl"></browse>
   </div>
 </template>
 
 <script>
-import { getDetail, getListDetail, getDetailById } from '@/api/bpm/components/qualityReportApproval/qualityReportApproval';
-import browse from '@/components/jimureport/browse.vue'
-import { getJmPrintViewUrl } from '@/components/jimureport//api.js';
-import { getToken } from '@/utils/token-util';
+  import {
+    getDetail,
+    getListDetail,
+    getDetailById
+  } from '@/api/bpm/components/qualityReportApproval/qualityReportApproval';
+  import browse from '@/components/jimureport/browse.vue';
+  import { getJmPrintViewUrl } from '@/components/jimureport//api.js';
+  import { getToken } from '@/utils/token-util';
+
   export default {
     props: {
       taskDefinitionKey: {
@@ -128,7 +38,7 @@ import { getToken } from '@/utils/token-util';
       },
       businessCode: {
         default: ''
-      },
+      }
     },
     components: {
       browse
@@ -136,36 +46,20 @@ import { getToken } from '@/utils/token-util';
     data() {
       return {
         // 质检报告数据
-        reportData: {},
-        reportDetail: [],
-        fileUrl: '',
+        template: '',
+        fileUrl: ''
       };
     },
     mounted() {
-      this.open()
+      this.open();
     },
     methods: {
       async open() {
         const detail = await getDetailById(this.businessId);
         // this.reportData = detail;
         // this.showEditFlag = true;
-        console.log('detail~~~', detail);
-        if(detail.data.reportTemplateJson?.basicInfoData) {
-          this.reportData = detail.data.reportTemplateJson.basicInfoData;
-          this.reportDetail = detail.data.reportTemplateJson.inspectionItems;
-          
-          const reportApprovalTaskVos = detail.data.reportApprovalTaskVos || [];
-
-          const reviewTime = reportApprovalTaskVos?.[reportApprovalTaskVos.length - 2]?.endTime?.split(' ')[0] || '';
-          const approvedDate = reportApprovalTaskVos?.[reportApprovalTaskVos.length - 3]?.endTime?.split(' ')[0] || '';
-          const reviewer = reportApprovalTaskVos?.[reportApprovalTaskVos.length - 2]?.approvalUserName || '';
-          const checker = reportApprovalTaskVos?.[reportApprovalTaskVos.length - 3]?.approvalUserName || '';
-
-          this.$set(this.reportData, 'inspectionTime', this.reportData.inspectionTime?.split(' ')[0] || '');
-          this.$set(this.reportData, 'reviewTime', this.reportData.reviewTime?.split(' ')[0] || reviewTime || '');
-          this.$set(this.reportData, 'approvedDate', this.reportData.approvedDate?.split(' ')[0] || approvedDate || '');
-          this.$set(this.reportData, 'reviewer', this.reportData.reviewer || reviewer || '');
-          this.$set(this.reportData, 'checker', this.reportData.checker || checker || '');
+        if (detail.data.reportTemplateJson?.template) {
+          this.template = detail.data.reportTemplateJson.template;
         } else {
           // 组件挂载时加载数据
           // this.loadReportData();
@@ -175,18 +69,6 @@ import { getToken } from '@/utils/token-util';
           this.fileUrl = `${url}?token=${getToken()}&id=${this.businessId}`;
           console.log('fileUrl~~~', this.fileUrl);
         }
-        
-        
-      },
-      // 可以根据需要添加数据加载方法
-      async loadReportData() {
-      //   // 从API获取质检报告数据
-        const detail = await getDetail(this.businessId);
-        this.reportData = detail;
-      },
-      async loadListDetail() {
-        const detail = await getListDetail(this.businessId);
-        this.reportDetail = detail;
       }
     }
   };