查询结果

src/views/ManualOperation/QueryResults/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 id="centerDiv">
+    <div class="scan-title">
+      <p class="title-text">扫描日期范围：</p>
+      <p>2023-10-10</p>
+      <p class="range-separator">至</p>
+      <p>2023-10-12</p>
+    </div>
+    <div>
+      <van-tabs v-model:active="active">
+        <van-tab title="件码列表" name="a">
+          <div class="list-header">
+            <p>
+              <span>件码信息</span>
+            </p>
+            <p class="total-count">
+              共
+              {{ this.data.piece.length }}
+              条
+            </p>
+          </div>
+          <div class="list-content">
+            <div
+              v-for="(item, i) in this.data.piece"
+              class="list-item"
+            >
+              <p class="colors item-row item-header-row">
+                <span> 件码{{ i + 1 }} </span>
+                <span>
+                  {{ item.codingDateStr }}
+                </span>
+              </p>
+              <p class="item-row item-main-row">
+                <span class="qr-code-text"> {{ item.qrCode }} </span>
+                <span class="colors">盒码数：50 </span>
+              </p>
+              <p class="item-row item-footer-row">
+                <span class="colors">机台号：{{ item.boxBarProductLineDeviceCode }} </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>
+          </div>
+          <div class="list-content">
+            <div
+              v-for="(item, i) in this.data.piece"
+              class="list-item"
+            >
+              <p class="colors item-row item-header-row">
+                <span> 条码{{ i + 1 }} </span>
+                <span>
+                  {{ item.codingDateStr }}
+                </span>
+              </p>
+              <p class="item-row item-main-row">
+                <span class="qr-code-text"> {{ item.qrCode }} </span>
+                <span class="colors">盒码数：50 </span>
+              </p>
+              <p class="item-row item-footer-row">
+                <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.piece.length }}
+              条
+            </p>
+          </div>
+          <div class="list-content">
+            <div
+              v-for="(item, i) in this.data.piece"
+              class="list-item"
+            >
+              <p class="colors item-row item-header-row">
+                <span> 盒码{{ i + 1 }} </span>
+                <span>
+                  {{ item.codingDateStr }}
+                </span>
+              </p>
+              <p class="item-row item-main-row">
+                <span class="qr-code-text"> {{ item.qrCode }} </span>
+                <span class="colors">盒码数：50 </span>
+              </p>
+              <p class="item-row item-footer-row">
+                <span class="colors">机台号：{{ item.boxBarProductLineDeviceCode }} </span>
+              </p>
+            </div>
+          </div>
+        </van-tab>
+      </van-tabs>
+    </div>
+
+    <div class="btn-container">
+      <van-button plain @click="gousearch()" class="query-btn" type="success">
+        <van-icon name="scan" />
+        继续扫码
+      </van-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  NavBar,
+  CellGroup,
+  Cell,
+  List,
+  Button,
+  Dialog,
+  Sticky,
+  Col,
+  Row,
+  Notify,
+  Icon,
+  Tab,
+  Tabs,
+} from "vant";
+export default {
+  name: "",
+  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,
+  },
+  mounted() {
+    // this.$nativeQRCode.setStatusBarColor("#006953", "white");
+    // ScanOverlay.show('请扫描二维码')
+  },
+  data() {
+    return {
+      data: {
+        piece: [
+          {
+            qrCode: "xxxx",
+            generateTime: "2024-08-29 15:00:00",
+            boxBarProductLineDeviceCode: "BXBSB001",
+            boxBarProductLineName: "盒条产线",
+            codingDateStr: "2024-08-29",
+          },
+          {
+            qrCode: "xxxx",
+            generateTime: "2024-08-29 15:00:00",
+            boxBarProductLineDeviceCode: "BXBSB001",
+            boxBarProductLineName: "盒条产线",
+            codingDateStr: "2024-08-29",
+          },
+        ],
+        bar: [
+          {
+            qrCode: "xxxx",
+            generateTime: "2024-08-29 15:00:00",
+            boxBarProductLineDeviceCode: "BXBSB001",
+            boxBarProductLineName: "盒条产线",
+            codingDateStr: "2024-08-29",
+          },
+          {
+            qrCode: "xxxx",
+            generateTime: "2024-08-29 15:00:00",
+            boxBarProductLineDeviceCode: "BXBSB001",
+            boxBarProductLineName: "盒条产线",
+            codingDateStr: "2024-08-29",
+          },
+        ],
+        box: [
+          {
+            qrCode: "xxxx",
+            generateTime: "2024-08-29 15:00:00",
+            boxBarProductLineDeviceCode: "BXBSB001",
+            boxBarProductLineName: "盒条产线",
+            codingDateStr: "2024-08-29",
+          },
+          {
+            qrCode: "xxxx",
+            generateTime: "2024-08-29 15:00:00",
+            boxBarProductLineDeviceCode: "BXBSB001",
+            boxBarProductLineName: "盒条产线",
+            codingDateStr: "2024-08-29",
+          },
+        ],
+      },
+      active: "a",
+    };
+  },
+  computed: {},
+  methods: {
+    deleteItem(index) {
+      this.data.splice(index, 1);
+    },
+    gousearch() {
+      this.$router.push({
+        path: "/ScanBarcodes",
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* 原有样式 */
+:deep(.van-nav-bar__right) {
+  font-size: 0.45rem;
+  color: #ffffff;
+}
+#centerDiv {
+  height: 94%;
+  background: #ffffff;
+}
+:deep(.erricon) {
+  font-size: 0.35rem;
+  background: #f3f4f6;
+  margin-left: 55%;
+  box-sizing: border-box;
+  width: 0.65rem;
+  height: 0.65rem;
+  text-align: center;
+  line-height: 0.65rem;
+  border-radius: 50%;
+}
+.Titles {
+  font-size: 0.35rem;
+  color: #979797;
+}
+.Conts {
+  font-size: 0.35rem;
+}
+.nav-bar {
+  background-color: rgba(0, 105, 83, 1);
+}
+.scan-title {
+  width: 100%;
+  height: 8%;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding-left: 0.3rem;
+  font-size: 0.45rem;
+  font-size: 0.35rem;
+  color: #979797;
+}
+.success-icon {
+  margin-left: 0.15rem;
+  margin-right: 0.25rem;
+}
+.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%;
+  margin-top: 0.2rem;
+}
+.query-btn {
+  width: 92%;
+  margin: auto;
+  display: block;
+  border-radius: 0.1rem;
+  height: 40%;
+}
+:deep(.van-tabs) {
+  padding: 0 0.4rem;
+}
+:deep(.van-tabs__wrap) {
+  height: 1rem;
+  border-radius: 0.2rem;
+  overflow: hidden;
+}
+:deep(.van-tab__text) {
+  font-size: 0.45rem;
+  display: block;
+  height: 100%;
+  line-height: 1rem;
+}
+:deep(.van-tabs__nav) {
+  background: #f3f4f6;
+}
+:deep(.van-tabs__line) {
+  display: none;
+}
+:deep(.van-tab--active) {
+  background: #07c160;
+  color: #ffffff;
+  border-radius: 0.2rem;
+}
+.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;
+}
+
+.list-content {
+  margin-top: 0.3rem;
+  height: 11rem;
+  width: 100%;
+}
+
+.list-item {
+  font-size: 0.35rem;
+  height: 2.5rem;
+}
+
+.item-row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.item-header-row {
+  margin-top: 0.2rem;
+}
+
+.item-main-row {
+  margin: 0.2rem 0;
+}
+
+.qr-code-text {
+  font-size: 0.4rem;
+}
+</style>
\ No newline at end of file

src/views/ManualOperation/ScanBarcodes/index.vue

@@ -248,7 +248,7 @@ export default {
     },
     gousearch(){
             this.$router.push({
-        path: "/oneCode",
+        path: "/QueryResults",
       });
     }
   },