feat(追溯码): 添加单位显示并支持华泰环境定制模板

src/views/traceability/traceabilityCode/index.vue

@@ -91,7 +91,7 @@
                 <div class="info-col">
                   <div class="info-item">
                     <span class="info-label">长度:</span>
-                    <span class="info-value">{{ detail.quantity }}</span>
+                    <span class="info-value">{{ detail.quantity }}{{ detail.unit }}</span>
                   </div>
                 </div>
               </div>
@@ -189,6 +189,7 @@ export default {
     return {
       traceId: '',
       industry: '0',  // 0: 通用行业  1: 生物医药行业  2: 电线电缆行业
+      clientEnvironmentId: '0',  // 0: 通用环境  8: 华泰
       detail: {},
       showMoreInfo: false,
       // 使用项目中已有的图标路径
@@ -236,7 +237,8 @@ export default {
       this.$router.push({
         path: '/traceability/quality',
         query: {
-          detail: JSON.stringify(this.detail)
+          detail: JSON.stringify(this.detail),
+          clientEnvironmentId: this.clientEnvironmentId
         }
       });
     },
@@ -254,12 +256,16 @@ export default {
       const industry = this.$route.query.industry;
       // 然后尝试从query中获取
       const queryId = this.$route.query.id;
+
+      const clientEnvironmentId = this.$route.query.clientEnvironmentId;
       console.log('queryId:', queryId);
       
       // 设置ID，优先使用params中的ID
       this.traceId = queryId || '';
 
       this.industry = industry || '0';
+
+      this.clientEnvironmentId = clientEnvironmentId || '0';
       
       // 如果获取到了ID，可以根据需要进行后续操作
       if (this.traceId) {

src/views/traceability/traceabilityCode/quality.vue

@@ -52,24 +52,24 @@
         </div>
         <div class="info-item">
           <span class="info-label">数量:</span>
-          <span class="info-value">{{ qualityInfo.total || '-' }}</span>
+          <span class="info-value">{{ qualityInfo.total || '-' }}{{ qualityInfo.unit || '-' }}</span>
         </div>
-        <div class="info-item">
+        <!-- <div class="info-item">
           <span class="info-label">请验日期:</span>
           <span class="info-value">{{ qualityInfo.pleaseVerifyDate || '-' }}</span>
         </div>
         <div class="info-item">
           <span class="info-label">请验部门:</span>
           <span class="info-value">{{ qualityInfo.pleaseVerifyDepartment || '-' }}</span>
-        </div>
+        </div> -->
         <div class="info-item">
           <span class="info-label">报告日期:</span>
           <span class="info-value">{{ qualityInfo.reportDate || '-' }}</span>
         </div>
-        <div class="info-item">
+        <!-- <div class="info-item">
           <span class="info-label">有效期:</span>
           <span class="info-value">{{ qualityInfo.expirationDate || '-' }}</span>
-        </div>
+        </div> -->
         <div class="info-item">
           <span class="info-label">检验依据:</span>
           <span class="info-value">{{ qualityInfo.inspectionBasis || '-' }}</span>
@@ -103,11 +103,15 @@
           <div class="images-grid">
             <!-- <img class="detail-image" :src="detailImageSrc" alt="质检报告单"> -->
              <div v-if="template">
-                <div v-html="template"> </div>
+                <div class="report-template-container">
+                  <div style="width: 800px;" v-html="template"></div>  
+                </div>
               </div>
               <!-- <browse v-else :url="fileUrl"></browse> -->
                <div v-else class="report-template-container">
-                 <reportTemplate :templateInfo="this.qualityInfo"></reportTemplate>
+                
+                 <!-- <reportTemplate :templateInfo="this.qualityInfo"></reportTemplate> -->
+                 <component :is="reportTemplateHtml" :templateInfo="this.qualityInfo"></component>
                </div>
           </div>
         </div>
@@ -128,11 +132,13 @@
 // import { getJmPrintViewUrl } from '@/components/jimureport//api.js';
 // import { getToken } from '@/utils/token-util';
 import reportTemplate from '@/views/traceability/traceabilityCode/reportTemplate.vue';
+import reportTemplateHt from '@/views/traceability/traceabilityCode/reportTemplate-ht.vue';
 export default {
   name: 'QualityTraceabilityPage',
   components: {
     // browse,
     reportTemplate,
+    reportTemplateHt
   },
   data() {
     return {
@@ -146,6 +152,14 @@ export default {
       template: '',
     };
   },
+  computed: {
+    clientEnvironmentId() {
+      return this.$route.query.clientEnvironmentId || '0';
+    },
+    reportTemplateHtml() {
+      return this.clientEnvironmentId === '8' ? reportTemplateHt : reportTemplate;
+    }
+  },
   async mounted() {
     console.log('路由参数:');
     console.log('路由参数:', this.$route.query);

src/views/traceability/traceabilityCode/reportTemplate-ht.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="report-container">
+    <div class="report-header">
+      <!-- <div class="company-logo">
+        <img src="@/assets/logo.png" alt="嘉实医药" />
+      </div> -->
+      <div class="report-title">检验报告书</div>
+    </div>
+    
+    <div class="report-info">
+      <div class="info-item">
+        <span class="label">编号:</span>
+        <span class="value">{{ templateInfo.code }}</span>
+      </div>
+      <div class="info-item">
+        <span class="label">报告单号:</span>
+        <span class="value">{{ templateInfo.reportNumber }}</span>
+      </div>
+    </div>
+    
+    <table class="report-table">
+      <tbody>
+        <tr>
+          <td class="td-label">产品名称</td>
+          <td class="td-value" colspan="2">{{ templateInfo.productName }}</td>
+
+          <td class="td-label">报告日期</td>
+          <td class="td-value" colspan="2">{{ templateInfo.reportDate }}</td>
+          
+        </tr>
+        <tr>
+          <td class="td-label">规格</td>
+          <td class="td-value" colspan="2">{{ templateInfo.specification }}</td>
+
+          <td class="td-label">型号</td>
+          <td class="td-value" colspan="2">{{ templateInfo.modelType }}</td>
+        </tr>
+        <tr>
+          <td class="td-label">电压等级</td>
+          <td class="td-value" colspan="2">{{ templateInfo.voltage }}</td>
+
+          <td class="td-label">电缆长度</td>
+          <td class="td-value" colspan="2">{{ templateInfo.total }}{{ templateInfo.unit }}</td>
+        </tr>
+        <tr>
+          <td class="td-label">试验类型</td>
+          <td class="td-value" colspan="2">S</td>
+          <td class="td-label">检测依据</td>
+          <td class="td-value" colspan="2">{{ templateInfo.inspectionBasis }}</td>
+        </tr>
+        <tr>
+          <td class="td-label" colspan="6">检测项目和检测结果</td>
+        </tr>
+        <tr>
+          <td class="td-value">检验项目</td>
+          <td class="td-value">单位</td>
+          <td class="td-value" colspan="2">标准要求</td>
+          <td class="td-value">检验结果</td>
+          <td class="td-value">单项评定</td>
+        </tr>
+        <tr v-for="(item, index) in templateInfo.list" :key="index">
+          <td class="td-value">{{ item.item }}</td>
+          <td class="td-value">{{ item.unitName }}</td>
+          <td class="td-value" colspan="2">{{ item.standardRegulations }}</td>
+          <td class="td-value">{{ item.results }}</td>
+          <td class="td-value">{{ item.resultsTwo }}</td>
+        </tr>
+        <tr>
+          <td class="td-label">检验结论</td>
+          <td class="td-value" colspan="5">{{ templateInfo.conclusionByHt }}</td>
+        </tr>
+      </tbody>
+    </table>
+    
+    <div class="report-footer">
+      <div class="footer-item">检验：{{ templateInfo.inspector }}</div>
+      <div class="footer-item">审核：赵旭东</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ReportTemplate',
+  props: {
+    templateInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+}
+</script>
+
+<style scoped>
+.report-container {
+  /* width: 500px; */
+  width: 800px;
+  margin: 0 auto;
+  /* padding: 20px; */
+  /* border: 1px solid #000; */
+  /* font-family: Arial, sans-serif; */
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.report-container::-webkit-scrollbar {
+  height: 8px;
+}
+
+.report-container::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+.report-container::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+.report-container::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+.report-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.company-logo {
+  width: 80px;
+  height: 80px;
+}
+
+.company-logo img {
+  width: 100%;
+  height: 100%;
+}
+
+.report-title {
+  font-size: 20px;
+  font-weight: bold;
+  text-align: center;
+  flex: 1;
+  margin-left: -80px;
+}
+
+.report-info {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.info-item {
+  display: flex;
+  margin-right: 20px;
+  align-items: center;
+}
+
+.info-item .label {
+  font-weight: bold;
+  margin-right: 10px;
+}
+
+.report-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 20px;
+}
+
+.report-table td {
+  border: 1px solid #000;
+  padding: 8px;
+}
+
+.td-label {
+  font-weight: bold;
+  background-color: #f5f5f5;
+  /* width: 90px; */
+  word-wrap: break-word;
+  white-space: normal;
+}
+
+.td-value {
+  word-wrap: break-word;
+  white-space: normal;
+  max-width: 250px;
+}
+
+.report-footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+
+.footer-item {
+  flex: 1;
+  text-align: center;
+  margin-right: 20px;
+}
+</style>

src/views/traceability/traceabilityCode/reportTemplate.vue

@@ -30,7 +30,7 @@
           <td class="td-label">规格型号</td>
           <td class="td-value" colspan="2">{{ templateInfo.specification }}/{{ templateInfo.modelType }}</td>
           <td class="td-label">数量</td>
-          <td class="td-value" colspan="2">{{ templateInfo.total }}</td>
+          <td class="td-value" colspan="2">{{ templateInfo.total }}{{ templateInfo.unit }}</td>
         </tr>
         <tr>
           <td class="td-label">请验日期</td>