feat(溯源页面): 优化页面布局并增加行业适配功能

src/views/traceability/traceabilityCode/index.vue

@@ -19,7 +19,7 @@
       <!-- 产品图片区域 -->
       <div class="product-image-section">
         <div class="image-container">
-          <img v-if="detail.purchaseInfo && detail.purchaseInfo.purchaseImgUrl" class="product-image" :src="detail.purchaseInfo.purchaseImgUrl" alt="产品图片">
+          <img v-if="detail.imgUrl && detail.imgUrl.length > 0" class="product-image" :src="detail.imgUrl[0].url" alt="产品图片">
           <div v-else>暂无图片</div>
         </div>
       </div>
@@ -31,7 +31,7 @@
           <div class="info-row">
             <div class="info-col">
               <div class="info-item">
-                <span class="info-label">品名:</span>
+                <span class="info-label">产品名称:</span>
                 <span class="info-value">{{ detail.productName }}</span>
               </div>
             </div>
@@ -39,24 +39,24 @@
           <div class="info-row">
             <div class="info-col">
               <div class="info-item">
-                <span class="info-label">产地:</span>
-                <span class="info-value">{{ detail.purchaseOrigins }}</span>
+                <span class="info-label">产品编码:</span>
+                <span class="info-value">{{ detail.productCode }}</span>
               </div>
             </div>
           </div>
           <div class="info-row">
             <div class="info-col">
               <div class="info-item">
-                <span class="info-label">商品编码:</span>
-                <span class="info-value">{{ detail.productCode }}</span>
+                <span class="info-label">批次号:</span>
+                <span class="info-value">{{ detail.batchNo }}</span>
               </div>
             </div>
           </div>
           <div class="info-row">
             <div class="info-col">
               <div class="info-item">
-                <span class="info-label">批号:</span>
-                <span class="info-value">{{ detail.batchNo }}</span>
+                <span class="info-label">规格:</span>
+                <span class="info-value">{{ detail.specification }}</span>
               </div>
             </div>
           </div>
@@ -64,67 +64,89 @@
             <div class="info-row">
               <div class="info-col">
                 <div class="info-item">
-                  <span class="info-label">规格:</span>
-                  <span class="info-value">{{ detail.specification }}</span>
+                  <span class="info-label">型号:</span>
+                  <span class="info-value">{{ detail.purchaseOrigins }}</span>
                 </div>
               </div>
             </div>
             <div class="info-row">
               <div class="info-col">
                 <div class="info-item">
-                  <span class="info-label">内控等级:</span>
-                  <span class="info-value">{{ detail.level }}</span>
+                  <span class="info-label">执行标准:</span>
+                  <span class="info-value">{{ detail.enforceStandards }}</span>
                 </div>
               </div>
             </div>
-            <div class="info-row">
-              <div class="info-col">
-                <div class="info-item">
-                  <span class="info-label">内控规格:</span>
-                  <span class="info-value"></span>
+
+            <div v-if="industry === '2'">
+              <div class="info-row">
+                <div class="info-col">
+                  <div class="info-item">
+                    <span class="info-label">电压标准:</span>
+                    <span class="info-value">{{ detail.enforceStandards }}</span>
+                  </div>
                 </div>
               </div>
-            </div>
-            <div class="info-row">
-              <div class="info-col">
-                <div class="info-item">
-                  <span class="info-label">执行标准:</span>
-                  <span class="info-value">{{ detail.enforceStandards }}</span>
+              <div class="info-row">
+                <div class="info-col">
+                  <div class="info-item">
+                    <span class="info-label">长度:</span>
+                    <span class="info-value">{{ detail.enforceStandards }}</span>
+                  </div>
                 </div>
               </div>
             </div>
-            <!-- <div class="info-row">
-              <div class="info-col">
-                <div class="info-item">
-                  <span class="info-label">性味与归经:</span>
-                  <span class="info-value"></span>
+
+            <div v-else>
+              <div class="info-row">
+                <div class="info-col">
+                  <div class="info-item">
+                    <span class="info-label">产地:</span>
+                    <span class="info-value">{{ detail.purchaseOrigins }}</span>
+                  </div>
                 </div>
               </div>
-            </div> -->
-            <!-- <div class="info-row">
-              <div class="info-col">
-                <div class="info-item">
-                  <span class="info-label">功能与主治:</span>
-                  <span class="info-value"></span>
+              <div class="info-row">
+                <div class="info-col">
+                  <div class="info-item">
+                    <span class="info-label">内控等级:</span>
+                    <span class="info-value">{{ detail.level }}</span>
+                  </div>
                 </div>
               </div>
-            </div> -->
-            <!-- <div class="info-row">
-              <div class="info-col">
-                <div class="info-item">
-                  <span class="info-label">用法与用量:</span>
-                  <span class="info-value"></span>
+              <div class="info-row">
+                <div class="info-col">
+                  <div class="info-item">
+                    <span class="info-label">性味与归经:</span>
+                    <span class="info-value">{{ detail.propertiesChannelTropism }}</span>
+                  </div>
                 </div>
               </div>
-            </div> -->
-            <!-- <div class="info-row">
-              <div class="info-col">
-                <div class="info-item">
-                  <span class="info-label">贮藏:</span>
-                  <span class="info-value">{{ detail.layBy }}</span>
+              <div class="info-row">
+                <div class="info-col">
+                  <div class="info-item">
+                    <span class="info-label">功能与主治:</span>
+                    <span class="info-value">{{ detail.actionsAndUses }}</span>
+                  </div>
+                </div>
+              </div>
+              <div class="info-row">
+                <div class="info-col">
+                  <div class="info-item">
+                    <span class="info-label">用法与用量:</span>
+                    <span class="info-value">{{ detail.usageAndDosage }}</span>
+                  </div>
                 </div>
               </div>
-            </div> -->
+              <div class="info-row">
+                <div class="info-col">
+                  <div class="info-item">
+                    <span class="info-label">贮藏:</span>
+                    <span class="info-value">{{ detail.layBy }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
         <!-- 查看更多信息按钮 -->
@@ -137,7 +159,7 @@
       <!-- 功能按钮区域 -->
       <div class="function-buttons">
         <div class="button-row">
-          <div class="function-btn" @click="navigateToPurchase">
+          <div v-if="industry != '2'" class="function-btn" @click="navigateToPurchase">
             <img class="btn-icon" :src="cartIconSrc" alt="采购溯源图标">
             <span class="btn-text">采购溯源</span>
           </div>
@@ -166,6 +188,7 @@ export default {
   data() {
     return {
       traceId: '',
+      industry: '0',  // 0: 通用行业  1: 生物医药行业  2: 电线电缆行业
       detail: {},
       showMoreInfo: false,
       // 使用项目中已有的图标路径
@@ -228,13 +251,15 @@ export default {
     },
     getTraceabilityId() {
       // 从路由参数中获取ID
-      // 首先尝试从params中获取
-      const paramsId = this.$route.params.id;
+      const industry = this.$route.query.industry;
       // 然后尝试从query中获取
       const queryId = this.$route.query.id;
+      console.log('queryId:', queryId);
       
       // 设置ID，优先使用params中的ID
-      this.traceId = paramsId || queryId || '';
+      this.traceId = queryId || '';
+
+      this.industry = industry || '0';
       
       // 如果获取到了ID，可以根据需要进行后续操作
       if (this.traceId) {

src/views/traceability/traceabilityCode/production.vue

@@ -20,7 +20,25 @@
           生产溯源
         </div>
         <div style="height: 200px;">
-          <img v-if="purchaseInfo && purchaseInfo.purchaseImgUrl" class="product-image" :src="purchaseInfo.purchaseImgUrl" alt="产品图片">
+          <div class="product-image-section-content">
+            <div class="product-image-section-content-item" v-for="(item, index) in taskList" :key="item">
+              <el-tag
+                size="mini"
+                effect="dark"
+                :type="index === taskList.length - 1 ? 'warning' : 'success'"
+              >
+                {{ item }}
+              </el-tag>
+
+              <!-- 箭头 -->
+              <span
+                v-if="index < taskList.length - 1"
+                class="task-arrow"
+              >
+                →
+              </span>
+            </div>
+          </div>
         </div>
       </div>
       
@@ -31,8 +49,8 @@
           生产详情
         </div>
         <div class="info-item">
-          <span class="info-label">生产日期:</span>
-          <span class="info-value">{{ detail.createDate }}</span>
+          <span class="info-label">批次号:</span>
+          <span class="info-value">{{ detail.batchNo }}</span>
         </div>
         <div class="info-item">
           <span class="info-label">批生产量:</span>
@@ -46,6 +64,18 @@
           <span class="info-label">加工工序:</span>
           <span class="info-value">{{ detail.printTaskCarDetailStr }}</span>
         </div>
+        <div class="info-item">
+          <span class="info-label">所属工厂:</span>
+          <span class="info-value">{{ detail.factoryName }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">生产日期:</span>
+          <span class="info-value">{{ detail.createDate }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">失效日期:</span>
+          <span class="info-value">{{ detail.loseDate }}</span>
+        </div>
       </div>
       
       <!-- 返回首页按钮 -->
@@ -66,7 +96,8 @@ export default {
       // 使用项目中已有的图标路径
       productImageSrc: require('@/assets/traceability/1.svg'),
       detail: {},
-      purchaseInfo: {}
+      purchaseInfo: {},
+      taskList: []
     };
   },
   mounted() {
@@ -79,10 +110,12 @@ export default {
         this.detail = JSON.parse(this.$route.query.detail);
         console.log('获取到的detail参数:', this.detail);
         this.purchaseInfo = this.detail.purchaseInfo || {};
+        this.taskList = this.detail.printTaskCarDetailStr.split(',') || [];
       } catch (error) {
         console.error('解析detail参数失败:', error);
         this.detail = {};
         this.purchaseInfo = {};
+        this.taskList = [];
       }
     }
   },
@@ -108,6 +141,20 @@ export default {
   background-position: center;
 }
 
+.product-image-section-content {
+  display: flex;
+  align-items: center;
+  // justify-content: center;
+  flex-wrap: wrap;
+  height: 100%;
+}
+
+.product-image-section-content-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .nav-bar {
   height: 56px;
   display: flex;
@@ -268,4 +315,10 @@ export default {
 .home-icon {
   fill: #fff;
 }
+
+.task-arrow {
+  margin: 0 6px;
+  color: #999;
+  font-weight: bold;
+}
 </style>

src/views/traceability/traceabilityCode/reportTemplate.vue

@@ -98,11 +98,31 @@ export default {
 <style scoped>
 .report-container {
   /* width: 500px; */
-  max-width: 800px;
+  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 {
@@ -161,11 +181,15 @@ export default {
 .td-label {
   font-weight: bold;
   background-color: #f5f5f5;
-  width: 90px;
+  /* width: 90px; */
+  word-wrap: break-word;
+  white-space: normal;
 }
 
 .td-value {
-  width: 100%;
+  word-wrap: break-word;
+  white-space: normal;
+  max-width: 250px;
 }
 
 .report-footer {