条码扫描

src/views/ManualOperation/ScanBarcodes/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">
+      <van-icon name="success" class="success-icon" color="#009688" />
+      <p class="title-text">已扫描盒码</p>
+    </div>
+    <div class="list-container">
+      <div
+        v-for="(item, i) in data"
+        class="item-card"
+        :key="item.id + i"
+      >
+        <p class="item-header">
+          <span class="index-badge">{{ i + 1 }}</span>
+          <span class="item-num">{{ item.num }}</span>
+          <van-icon name="cross" class="erricon" @click="deleteItem(i)" />
+        </p>
+        <p class="info-row">
+          <span class="Titles">盒码值：</span>
+          <span class="Conts">{{ 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>
+        </p>
+        <p class="info-row">
+          <span class="Titles">关联时间：</span>
+          <span class="Conts">{{ item.generateTime }}</span>
+        </p>
+      </div>
+    </div>
+    <div class="btn-container">
+      <van-button @click="gousearch()" class="query-btn" type="success">
+        <van-icon name="search" />
+        查询关联件码
+      </van-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  NavBar,
+  CellGroup,
+  Cell,
+  List,
+  Button,
+  Dialog,
+  Sticky,
+  Col,
+  Row,
+  Notify,
+  Icon,
+} 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,
+  },
+  mounted() {
+    // this.$nativeQRCode.setStatusBarColor("#006953", "white");
+    // ScanOverlay.show('请扫描二维码')
+  },
+  data() {
+    return {
+      data: [
+        {
+          id: "1234567890123456789",
+          num: "第一盒码",
+          qrCode: "QR88888888888888",
+          parentCode: "P99999999999999",
+          type: 10,
+          brandName: "中华（软）",
+          boxBarProductLineDeviceName: "盒条产线设备01",
+          barPieceProductLineDeviceName: "条件产线设备01",
+          status: 10,
+          generateTime: "2024-08-29 14:36:00",
+          brandId: 1001,
+          operUserId: 9999,
+          cLineId: "CLINE001",
+          cClassId: 2,
+          cTaskId: "CTASK001",
+          bLineId: "BLINE001",
+          bClassId: 0,
+          bTaskId: "2024-08-29",
+          brandCode: "ZH001",
+          boxBarClassGroupCode: "BXBG001",
+          barPieceClassGroupCode: "TJBg001",
+          boxBarProductShiftDetailCode: "BXBC001",
+          barPieceProductShiftDetailCode: "TJBC001",
+          boxBarProductLineDeviceCode: "BXBSB001",
+          barPieceProductLineDeviceCode: "TJBSB001",
+          boxBarWorkshopCode: "BXBCJ001",
+          barPieceWorkshopCode: "TJBCJ001",
+          boxBarSysChildCode: "BXBTX001",
+          barPieceSysChildCode: "TJBTX001",
+          boxBarUserCode: "BXBCZ001",
+          barPieceUserCode: "TJBCZ001",
+          boxBarUserName: "盒条操作工",
+          barPieceUserName: "条件操作工",
+          boxBarWorkUnitCode: "BXBDY001",
+          barPieceWorkUnitCode: "TJBDY001",
+          boxBarProductLineCode: "BXBCX001",
+          barPieceProductLineCode: "TJBCX001",
+          boxBarClassGroupName: "盒条班组",
+          barPieceClassGroupName: "条件班组",
+          boxBarProductShiftDetailName: "盒条班次",
+          barPieceProductShiftDetailName: "条件班次",
+          boxBarSysChildName: "盒条子系统",
+          barPieceSysChildName: "条件子系统",
+          boxBarWorkshopName: "盒条车间",
+          barPieceWorkshopName: "条件车间",
+          boxBarWorkUnitName: "盒条控制单元",
+          barPieceWorkUnitName: "条件控制单元",
+          boxBarProductLineName: "盒条产线",
+          barPieceProductLineName: "条件产线",
+          relationTime: "2024-08-29 15:00:00",
+          uploadStatus: 0,
+          scrapStatus: 0,
+          checkBoxStatus: 0,
+          groupDate: "20240829",
+          batchCode: "BATCH20240829001",
+          boxBarBatchCode: "BXBBATCH001",
+          barPieceBatchCode: "TJBATCH001",
+          codingDate: "2024-08-29 10:00:00",
+          codingDateStr: "2024-08-29",
+          revokeType: null,
+          uploadTime: "2024-08-29 16:00:00",
+          outBoundDate: "2024-08-30 09:00:00",
+          outBoundDateStr: "2024-08-30",
+          operationDeptName: "生产部",
+          operationDeptId: "DEPT001",
+          qrcodeSources: 1,
+          isOnDutyPiece: 0,
+          unregistered: 0,
+          channelNum: 1,
+          isRepeatCode: 0,
+          month: 8,
+          serialVersionUID: 1,
+        },
+        {
+          id: "1234567890123456789",
+          num: "第二盒码",
+          qrCode: "QR88888888888888",
+          parentCode: "P99999999999999",
+          type: 10,
+          brandName: "中华（软）",
+          boxBarProductLineDeviceName: "盒条产线设备01",
+          barPieceProductLineDeviceName: "条件产线设备01",
+          status: 10,
+          generateTime: "2024-08-29 14:36:00",
+          brandId: 1001,
+          operUserId: 9999,
+          cLineId: "CLINE001",
+          cClassId: 2,
+          cTaskId: "CTASK001",
+          bLineId: "BLINE001",
+          bClassId: 0,
+          bTaskId: "2024-08-29",
+          brandCode: "ZH001",
+          boxBarClassGroupCode: "BXBG001",
+          barPieceClassGroupCode: "TJBg001",
+          boxBarProductShiftDetailCode: "BXBC001",
+          barPieceProductShiftDetailCode: "TJBC001",
+          boxBarProductLineDeviceCode: "BXBSB001",
+          barPieceProductLineDeviceCode: "TJBSB001",
+          boxBarWorkshopCode: "BXBCJ001",
+          barPieceWorkshopCode: "TJBCJ001",
+          boxBarSysChildCode: "BXBTX001",
+          barPieceSysChildCode: "TJBTX001",
+          boxBarUserCode: "BXBCZ001",
+          barPieceUserCode: "TJBCZ001",
+          boxBarUserName: "盒条操作工",
+          barPieceUserName: "条件操作工",
+          boxBarWorkUnitCode: "BXBDY001",
+          barPieceWorkUnitCode: "TJBDY001",
+          boxBarProductLineCode: "BXBCX001",
+          barPieceProductLineCode: "TJBCX001",
+          boxBarClassGroupName: "盒条班组",
+          barPieceClassGroupName: "条件班组",
+          boxBarProductShiftDetailName: "盒条班次",
+          barPieceProductShiftDetailName: "条件班次",
+          boxBarSysChildName: "盒条子系统",
+          barPieceSysChildName: "条件子系统",
+          boxBarWorkshopName: "盒条车间",
+          barPieceWorkshopName: "条件车间",
+          boxBarWorkUnitName: "盒条控制单元",
+          barPieceWorkUnitName: "条件控制单元",
+          boxBarProductLineName: "盒条产线",
+          barPieceProductLineName: "条件产线",
+          relationTime: "2024-08-29 15:00:00",
+          uploadStatus: 0,
+          scrapStatus: 0,
+          checkBoxStatus: 0,
+          groupDate: "20240829",
+          batchCode: "BATCH20240829001",
+          boxBarBatchCode: "BXBBATCH001",
+          barPieceBatchCode: "TJBATCH001",
+          codingDate: "2024-08-29 10:00:00",
+          codingDateStr: "2024-08-29",
+          revokeType: null,
+          uploadTime: "2024-08-29 16:00:00",
+          outBoundDate: "2024-08-30 09:00:00",
+          outBoundDateStr: "2024-08-30",
+          operationDeptName: "生产部",
+          operationDeptId: "DEPT001",
+          qrcodeSources: 1,
+          isOnDutyPiece: 0,
+          unregistered: 0,
+          channelNum: 1,
+          isRepeatCode: 0,
+          month: 8,
+          serialVersionUID: 1,
+        },
+      ],
+    };
+  },
+  computed: {},
+  methods: {
+    deleteItem(index) {
+      this.data.splice(index, 1);
+    },
+    gousearch(){
+            this.$router.push({
+        path: "/oneCode",
+      });
+    }
+  },
+};
+</script>
+
+<style scoped>
+:deep(.van-nav-bar__right) {
+  font-size: 0.45rem;
+  color: #ffffff;
+}
+#centerDiv {
+  height: 94%;
+}
+: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: .35rem;
+  color: #979797;
+}
+.Conts{
+  font-size: .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;
+}
+.success-icon {
+  margin-left: .15rem;
+  margin-right: .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%;
+}
+.query-btn {
+  width: 92%;
+  margin: auto;
+  display: block;
+  border-radius: .1rem;
+  height: 40%;
+}
+</style>
\ No newline at end of file