关联查询结果

src/views/ManualOperation/QueryResults/index.vue

@@ -14,104 +14,93 @@
   <div id="centerDiv">
     <div class="scan-title">
       <p class="title-text">扫描日期范围：</p>
-      <p>{{time1}}</p>
+      <p>{{ time1 }}</p>
       <p class="range-separator">至</p>
-      <p>{{time2}}</p>
+      <p>{{ time2 }}</p>
     </div>
-    <div>
-      <van-tabs v-model:active="active">
+    
+
+    <van-skeleton v-if="!isLoaded" title row="3" />
+    
+    <div v-else>
+      <van-tabs 
+        v-model:active="active" 
+        @change="handleTabChange"
+        lazy-render 
+      >
         <van-tab title="件码列表" name="a">
           <div class="list-header">
-            <p>
-              <span>件码信息</span>
-            </p>
-            <p class="total-count">
-              共
-              {{ this.data.piece.length }}
-              条
-            </p>
+            <p><span>件码信息</span></p>
+            <p class="total-count">共 {{ (data.piece || []).length }} 条</p>
           </div>
           <div class="list-content">
             <div
-              v-for="(item, i) in this.data.piece"
+              v-for="(item, i) in (data.piece || [])"
+              :key="`piece-${i}`"
               class="list-item"
             >
               <p class="colors item-row item-header-row">
                 <span> 件码{{ i + 1 }} </span>
-                <span>
-                  {{ item.relationTime }}
-                </span>
+                <span>{{ item.relationTime || '-' }}</span>
               </p>
               <p class="item-row item-main-row">
-                <span class="Conts"> {{ item.parentCode }} </span>
+                <span class="Conts"> {{ formatParentCode(item.parentCode) }} </span>
                 <span class="colors">条码数：50 </span>
               </p>
               <p class="item-row item-footer-row">
-                <span class="colors">机台号：{{ item.barPieceProductLineDeviceCode }} </span>
+                <span class="colors">机台号：{{ item.barPieceProductLineDeviceCode || '-' }} </span>
               </p>
             </div>
           </div>
         </van-tab>
         <van-tab title="条码列表" name="b">
           <div class="list-header">
-            <p>
-              <span>条码信息</span>
-            </p>
-            <p class="total-count">
-              共
-              {{ this.data.piece.length }}
-              条
-            </p>
+            <p><span>条码信息</span></p>
+            <p class="total-count">共 {{ (data.bar || []).length }} 条</p>
           </div>
           <div class="list-content">
             <div
-              v-for="(item, i) in this.data.bar"
+              v-for="(item, i) in (data.bar || [])"
+              :key="`bar-${i}`" 
               class="list-item"
             >
               <p class="colors item-row item-header-row">
                 <span> 条码{{ i + 1 }} </span>
-                <span>
-                  {{ item.relationTime }}
-                </span>
+                <span>{{ item.relationTime || '-' }}</span>
               </p>
               <p class="item-row item-main-row">
-                <span class="Conts"> {{ item.qrCode }} </span>
+                <!-- 修改：使用formatParentCode处理条码 -->
+                <span class="Conts"> {{ formatParentCode(item.qrCode) }} </span>
                 <span class="colors">盒码数：10 </span>
               </p>
               <p class="item-row item-footer-row">
-                <span class="colors">机台号：{{ item.boxBarProductLineDeviceCode }} </span>
+                <span class="colors">机台号：{{ item.boxBarProductLineDeviceCode || '-' }} </span>
               </p>
             </div>
           </div>
         </van-tab>
         <van-tab title="盒码列表" name="c">
           <div class="list-header">
-            <p>
-              <span>盒码信息</span>
-            </p>
-            <p class="total-count">
-              共
-              {{ this.data.box.length }}
-              条
-            </p>
+            <p><span>盒码信息</span></p>
+            <p class="total-count">共 {{ (data.box || []).length }} 条</p>
           </div>
           <div class="list-content">
             <div
-              v-for="(item, i) in this.data.box"
+              v-for="(item, i) in (data.box || [])"
+              :key="`box-${i}`"  
               class="list-item"
             >
               <p class="colors item-row item-header-row">
                 <span> 盒码{{ i + 1 }} </span>
-                <span>
-                  {{ item.relationTime }}
-                </span>
+                <span>{{ item.relationTime || '-' }}</span>
               </p>
               <p class="item-row item-main-row">
-                <span class="Conts"> {{ item.qrCode }} </span>
+                <!-- 修改：使用formatParentCode处理盒码 -->
+                <span class="Conts"> {{ formatParentCode(item.qrCode) }} </span>
                 <span class="colors">盒码数：50 </span>
               </p>
               <p class="item-row item-footer-row">
-                <span class="colors">机台号：{{ item.boxBarProductLineDeviceCode }} </span>
+                <span class="colors">机台号：{{ item.boxBarProductLineDeviceCode || '-' }} </span>
               </p>
             </div>
           </div>
@@ -131,79 +120,98 @@
 <script>
 import {
   NavBar,
-  CellGroup,
-  Cell,
-  List,
   Button,
-  Dialog,
-  Sticky,
-  Col,
-  Row,
-  Notify,
   Icon,
-  Tab,
   Tabs,
+  Tab,
+  Skeleton  
 } from "vant";
-import {qrcodeMap} from "@/api/qrcode/scanCode/scanCode";
+import { qrcodeMap } from "@/api/qrcode/scanCode/scanCode";
+
 export default {
-  name: "",
+  name: "QueryResult",
   components: {
     [NavBar.name]: NavBar,
-    [CellGroup.name]: CellGroup,
-    [Cell.name]: Cell,
-    [List.name]: List,
     [Button.name]: Button,
-    [Dialog.Component.name]: Dialog.Component,
-    [Sticky.name]: Sticky,
-    [Col.name]: Col,
-    [Row.name]: Row,
     [Icon.name]: Icon,
-    [Notify.Component.name]: Notify.Component,
     [Tabs.name]: Tabs,
     [Tab.name]: Tab,
+    [Skeleton.name]: Skeleton  
   },
   created() {
-    if (this.$route.query) {
-      this.time1 = this.$route.query.time1;
-      this.time2 = this.$route.query.time2;
-      this.queryParams = {
-        one: this.$route.query.one,
-        two: this.$route.query.two,
-      };
-    }
+    // 初始化参数
+    const { time1, time2, one, two } = this.$route.query || {};
+    this.time1 = time1 || "";
+    this.time2 = time2 || "";
+    this.queryParams = { one, two };
+    
+    // 调用接口
     this.qrcodeMap();
   },
   mounted() {
+    // 延迟执行DOM相关操作，避免渲染未完成
+    this.$nextTick(() => {
       // this.$nativeQRCode.setStatusBarColor("#006953", "white");
-    // ScanOverlay.show('请扫描二维码')
+    });
   },
   data() {
     return {
-      data: {},
+      data: {  // 初始化数据结构，避免undefined
+        piece: [],
+        bar: [],
+        box: []
+      },
       active: "a",
-      time1:"",
-      time2:"",
+      time1: "",
+      time2: "",
       queryParams: {},
+      isLoaded: false 
     };
   },
-  computed: {},
   methods: {
-    qrcodeMap() {
-      qrcodeMap(this.queryParams).then(response => {
-        if (response.code === 200) {
-          this.data = response.data
+    // 处理件码显示的方法（扩展为通用的码值截取方法）
+    formatParentCode(code) {
+      if (!code || typeof code !== 'string') {
+        return code || '';
       }
-      });
+      if (code.length > 35) {
+        return '...' + code.slice(-20);
+      }
+      return code;
     },
-    deleteItem(index) {
-      this.data.splice(index, 1);
+    // 接口请求方法
+    async qrcodeMap() {  // 修改为async/await
+      try {
+        const response = await qrcodeMap(this.queryParams);
+        if (response.code === 200) {
+          // 确保数据结构完整
+          this.data = {
+            piece: response.data.piece || [],
+            bar: response.data.bar || [],
+            box: response.data.box || []
+          };
+        }
+      } catch (error) {
+        console.error("接口请求失败：", error);
+        // 异常时仍保证数据结构
+        this.data = { piece: [], bar: [], box: [] };
+      } finally {
+        // 无论成功失败，都标记为加载完成
+        this.isLoaded = true;
+      }
     },
-    gousearch() {
-      this.$router.push({
-        path: "/ScanBarcodes",
+    // tab切换处理
+    handleTabChange() {
+      // 切换tab时触发nextTick，确保DOM渲染完成
+      this.$nextTick(() => {
+        // 可以在这里处理tab切换后的DOM操作
       });
     },
-  },
+    // 跳转扫码页面
+    gousearch() {
+      this.$router.push({ path: "/ScanBarcodes" });
+    }
+  }
 };
 </script>
 
@@ -212,7 +220,11 @@ export default {
   font-size: 0.45rem;
   color: #ffffff;
 }
+#topDiv {
+  position: relative; 
+}
 #centerDiv {
+  /* min-height: calc(100vh - 44px);   */
     height: 94%;
   background: #ffffff;
 }
@@ -241,12 +253,10 @@ export default {
 }
 .scan-title {
   width: 100%;
-  height: 8%;
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  padding-left: 0.3rem;
-  font-size: 0.45rem;
+  padding: 0.3rem;
   font-size: 0.35rem;
   color: #979797;
 }
@@ -257,60 +267,18 @@ export default {
 .title-text {
   margin: 0;
 }
-.list-container {
-  width: 100%;
-  height: 70%;
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  overflow: auto;
-}
-.item-card {
-  width: 92%;
-  height: 38%;
-  border: 5px solid #009688;
-  border-radius: 3%;
-  margin-bottom: 0.2rem;
-  box-sizing: border-box;
-  padding: 0.35rem 0.3rem;
-  background: #ffffff;
-}
-.item-header {
-  display: flex;
-  align-items: center;
-  margin: 0;
-}
-.index-badge {
-  color: #ffffff;
-  background: #0e9b8e;
-  border-radius: 50%;
-  box-sizing: border-box;
-  font-size: 0.4rem;
-  display: inline-block;
-  width: 0.55rem;
-  height: 0.55rem;
-  text-align: center;
-  line-height: 0.55rem;
-}
-.item-num {
-  font-size: 0.45rem;
-  margin-left: 7%;
-}
-.info-row {
-  margin: 0;
-}
 .btn-container {
-  width: 100%;
-  height: 20%;
+width: 94%;
+    margin: auto;
     margin-top: 0.2rem;
 }
 .query-btn {
-  width: 92%;
+  width: 100%;
   margin: auto;
   display: block;
   border-radius: 0.1rem;
-  height: 40%;
+  height: 1.2rem; 
+  font-size: 0.4rem;
 }
 :deep(.van-tabs) {
   padding: 0 0.4rem;
@@ -340,47 +308,43 @@ export default {
 .colors {
   color: #979797;
 }
-
 .range-separator {
   margin: 0 0.15rem;
 }
-
 .list-header {
   display: flex;
   justify-content: space-between;
   font-size: 0.35rem;
   margin-top: 0.55rem;
 }
-
 .total-count {
   color: #979797;
+  margin: 0;  
 }
-
 .list-content {
   margin-top: 0.3rem;
-  height: 11rem;
+  max-height: 11rem; 
   width: 100%;
-  overflow: auto;
+  overflow-y: auto;  
 }
-
 .list-item {
   font-size: 0.35rem;
-  height: 2.5rem;
+  margin-bottom: 0.5rem;  
 }
-
 .item-row {
   display: flex;
   justify-content: space-between;
 }
-
 .item-header-row {
   margin-top: 0.2rem;
+  display: flex;
+  align-items: center;
 }
-
 .item-main-row {
   margin: 0.2rem 0;
+  display: flex;
+  align-items: center;
 }
-
 .qr-code-text {
   font-size: 0.4rem;
 }

src/views/ManualOperation/ScanBarcodes/index.vue

@@ -29,12 +29,9 @@
         </p>
         <p class="info-row">
           <span class="Titles">盒码值：</span>
-          <span class="Conts">{{ item.qrCode }}</span>
+          <span class="Conts">{{ formatQrCode(item.qrCode) }}</span>
         </p>
-<!--        <p class="info-row">-->
-<!--          <span class="Titles">件码值：</span>-->
-<!--          <span class="Conts">{{ item.parentCode }}</span>-->
-<!--        </p>-->
+
         <p class="info-row">
           <span class="Titles">机台号：</span>
           <span class="Conts">{{ item.boxBarProductLineDeviceCode }}</span>
@@ -104,6 +101,19 @@ export default {
   },
   computed: {},
   methods: {
+    // 新增方法：格式化盒码值
+    formatQrCode(qrCode) {
+      // 先判断是否为有效字符串
+      if (!qrCode || typeof qrCode !== 'string') {
+        return qrCode || '';
+      }
+      // 如果长度超过35位，截取最后10位并拼接...
+      if (qrCode.length > 35) {
+        return '...' + qrCode.slice(-25);
+      }
+      // 否则返回原字符串
+      return qrCode;
+    },
     queryQrCode(qrCode) {
       let query = {
         qrCode: qrCode
@@ -164,12 +174,12 @@ export default {
   color: #ffffff;
 }
 #centerDiv {
-  height: 94%;
+  height: 93%;
 }
 :deep(.erricon) {
   font-size: 0.35rem;
   background: #f3f4f6;
-  margin-left: 55%;
+  margin-left: 75%;
   box-sizing: border-box;
   width: 0.65rem;
   height: 0.65rem;