关联查询结果

src/views/ManualOperation/QueryResults/index.vue

@@ -235,7 +235,6 @@ export default {
 </script>
 
 <style scoped>
-/* 原有样式 */
 :deep(.van-nav-bar__right) {
   font-size: 0.45rem;
   color: #ffffff;
@@ -367,7 +366,6 @@ export default {
   color: #979797;
 }
 
-/* 提取的行内样式 */
 .range-separator {
   margin: 0 0.15rem;
 }
@@ -387,6 +385,7 @@ export default {
   margin-top: 0.3rem;
   height: 11rem;
   width: 100%;
+  overflow: auto;
 }
 
 .list-item {

src/views/ManualOperation/SearchResults/index.vue

+<template>
+  <div id="topDiv">
+    <van-nav-bar
+      title="关联查询结果"
+      left-text=""
+      left-arrow
+      @click-left="$router.go(-1)"
+      class="nav-bar"
+    >
+      <template #right> ？ </template>
+    </van-nav-bar>
+  </div>
+  
+  <div class="box-code-card">
+    <p class="box-code-label">盒码</p>
+    <p class="box-code-value">ABCD</p>
+    <div class="box-code-info">
+      <p class="info-item">
+        <span class="total-count">扫描时间：</span>
+        <span class="info-value">2023-10-15 14:35</span>
+      </p>
+      <p class="info-item">
+        <span class="total-count">关联状态：</span>
+        <span class="info-value success">已关联</span>
+      </p>
+    </div>
+  </div>
+  
+  <div class="related-code-container">
+    <p class="related-code-header">
+      <span>关联码信息</span>
+      <span class="total-count">共{{ data.length }}条</span>
+    </p>
+    <!-- 循环生成关联码卡片 -->
+    <div 
+      class="related-code-card" 
+      v-for="(item, index) in data" 
+      :key="index"
+    >
+      <p class="code-main">{{ item.qrCode }}</p>
+      <!-- 根据type值显示对应的码类型 -->
+      <p class="total-count code-type">
+        关联{{ getCodeTypeText(item.type) }}
+      </p>
+      <div class="code-info-row">
+        <p class="info-item">
+          <span class="total-count">生产时间：</span>
+          <span>{{ item.generateTime }}</span>
+        </p>
+        <p class="info-item">
+          <span class="total-count">机台号：</span>
+          <span>{{ item.boxBarProductLineDeviceCode }}</span>
+        </p>
+      </div>
+      <div class="code-info-row">
+        <p class="info-item">
+          <span class="total-count">{{ getQuantityLabel(item.type) }}：</span>
+          <span>{{ getQuantityValue(item.type) }}</span>
+        </p>
+        <p class="info-item">
+          <span class="total-count">关联状态：</span>
+          <!-- 根据关联状态值动态设置颜色 -->
+          <span :style="{ color: getStatusColor(item.status) }">
+            {{ getStatusText(item.status) }}
+          </span>
+        </p>
+      </div>
+    </div>
+  </div>
+      <div class="btn-container">
+      <van-button plain @click="gousearch()" style="background: #07C160;color: #ffffff;" class="query-btn" type="success">
+        <van-icon name="browsing-history-o" />
+        查看件码详情
+      </van-button>
+            <van-button plain @click="gousearch()" class="query-btn query-btns" type="success">
+       <van-icon name="revoke" />
+        返回扫码
+      </van-button>
+    </div>
+</template>
+
+<script>
+import { NavBar,  Icon, } from "vant";
+
+export default {
+  name: "RelationQueryResult",
+  components: {
+    [NavBar.name]: NavBar,
+        [Icon.name]: Icon,
+  },
+  mounted() {
+    // this.$nativeQRCode.setStatusBarColor("#006953", "white");
+    // ScanOverlay.show('请扫描二维码')
+  },
+  data() {
+    return {
+     
+      data: [
+        {
+          qrCode: "TM00123456789",
+          type: 20,          // 条码
+          status: 10,        // 正常
+          generateTime: "2024-08-29 ",
+          boxBarProductLineDeviceCode: "BXBSB001",
+          boxBarProductLineName: "盒条产线",
+          codingDateStr: "2024-08-29",
+          BrandId: 1,
+        },
+        {
+          qrCode: "HM987654321098",
+          type: 30,          // 盒码
+          status: 20,        // 异常
+          generateTime: "2024-08-29 ",
+          boxBarProductLineDeviceCode: "BXBSB002",
+          boxBarProductLineName: "盒条产线",
+          codingDateStr: "2024-08-29",
+          BrandId: 1,
+        },
+
+      ],
+    };
+  },
+  methods: {
+    // 根据type值返回对应的码类型文本
+    getCodeTypeText(type) {
+      switch (type) {
+        case 10:
+          return "盒码";
+        case 20:
+          return "条码";
+        case 30:
+          return "件码";
+        default:
+          return "未知类型";
+      }
+    },
+    // 根据码类型返回数量标签（盒烟数量/条码数量）
+    getQuantityLabel(type) {
+      switch (type) {
+        case 10:
+          return "盒烟数量";
+        case 20:
+          return "盒烟数量";  // 条码对应盒烟数量
+        case 30:
+          return "条烟数量";  // 件码对应条码数量
+        default:
+          return "数量";
+      }
+    },
+    // 根据码类型返回对应的数量值
+    getQuantityValue(type) {
+      switch (type) {
+        case 10:
+          return "1盒";       // 盒码默认1盒
+        case 20:
+          return "10盒";      // 条码对应10盒
+        case 30:
+          return "50条";      // 件码对应50条
+        default:
+          return "未知";
+      }
+    },
+    // 根据状态值返回状态文本
+    getStatusText(status) {
+      switch (status) {
+        case 10:
+          return "正常";
+        case 20:
+          return "异常";
+        case 30:
+          return "未知";
+        default:
+          return "未定义";
+      }
+    },
+    // 根据状态值返回对应的颜色
+    getStatusColor(status) {
+      switch (status) {
+        case 10:
+          return "#07C160";  // 正常-绿色
+        case 20:
+          return "red";      // 异常-红色
+        case 30:
+          return "yellow";   // 未知-黄色
+        default:
+          return "#333";     // 默认黑色
+      }
+    }
+  },
+};
+</script>
+
+<style scoped>
+
+.nav-bar {
+  background-color: rgba(0, 105, 83, 1);
+}
+
+:deep(.van-nav-bar__right) {
+  font-size: 0.45rem;
+  color: #ffffff;
+}
+
+
+.box-code-card {
+  width: 90%;
+  height: 17%;
+  margin: 0 auto;
+  margin-top: 0.3rem;
+  border-radius: 0.2rem;
+  background: #ffffff;
+  font-size: 0.4rem;
+  padding: 0.3rem;
+  box-sizing: border-box;
+}
+
+.box-code-label {
+  color: #ffffff;
+  background: #07c160;
+  width: 1.3rem;
+  text-align: center;
+  border-radius: 0.3rem;
+  font-size: 0.35rem;
+  margin: 0;
+}
+
+.box-code-value {
+  margin: 0.3rem 0;
+  font-size: 0.45rem;
+}
+
+.box-code-info {
+  font-size: 0.3rem;
+  display: flex;
+}
+
+
+.related-code-container {
+  width: 90%;
+  height: auto; 
+  margin: 0 auto;
+  margin-top: 0.5rem;
+  font-size: 0.4rem;
+}
+
+.related-code-header {
+  display: flex;
+  justify-content: space-between;
+  margin: 0;
+}
+
+.related-code-card {
+  width: 99%;
+  height: auto;
+  border: 5px solid #22c866;
+  border-radius: 0.3rem;
+  margin: 0 auto;
+  margin-top: 0.3rem;
+  box-sizing: border-box;
+  padding: 0.3rem 0.2rem;
+  background: #ffffff;
+}
+
+.code-main {
+  font-weight: bold;
+  margin: 0;
+}
+
+.code-type {
+  font-size: 0.35rem;
+  margin: 0;
+}
+
+.code-info-row {
+  display: flex;
+  font-size: 0.35rem;
+  margin: 0.2rem 0;
+}
+
+.info-item {
+  width: 50%;
+  margin: 0 0 0 0.2rem;
+  padding: 0;
+}
+
+.info-item:first-child {
+  margin-left: 0;
+}
+
+.info-value {
+  font-size: 0.32rem;
+}
+
+.info-value.success {
+  color: #07c160;
+}
+
+/* 通用样式 */
+.total-count {
+  color: #979797;
+}
+.btn-container {
+  width: 100%;
+  height: 20%;
+  margin-top: 0.2rem;
+}
+.query-btn {
+  width: 92%;
+  margin: auto;
+  display: block;
+  border-radius: 0.1rem;
+  height: 1.3rem;
+  position: fixed;
+  bottom: .3rem;
+  left: .4rem;
+  border: 1px solid #d7d4d8;
+  text-align: center;
+  line-height: 1.3rem;
+  background: #ffffff;
+  font-size: .45rem;
+}
+.query-btns{
+    bottom: 1.8rem;
+}
+</style>
\ No newline at end of file