防抖料组件添加数据对比功能

zkqy-ui/src/views/bussiness/dialogCompments/Mec/QRCode.vue

@@ -17,7 +17,17 @@
     </el-select>
     <div class="main-wrap">
       <div class="QRList">
-        <div class="QRItem" v-for="i in QRList" :key="i.part_no">
+        <div
+          :class="{
+            QRItem: true,
+            active: index === selectIndex,
+            right: index === selectIndex && status == 1,
+            error: index === selectIndex && status == 2,
+          }"
+          @click="itemClickHandler(index)"
+          v-for="(i, index) in QRList"
+          :key="i.part_no"
+        >
           <img class="qrcode" :src="getComplateURL(i.imageUrl)" alt="" />
           <!-- <div class="qrcode" ></div> -->
           <div class="description">
@@ -29,19 +39,24 @@
         </div>
       </div>
     </div>
-    <el-input
-      class="mt5"
-      v-model="reamrk"
-      placeholder=""
-      size="normal"
-      clearable
-    ></el-input>
+    <div class="input-wrap">
+      <el-input
+        class="mt5"
+        v-model="remark"
+        placeholder=""
+        size="normal"
+        clearable
+      ></el-input>
+      <el-button type="primary" class="ml10" size="mini" @click="sameHandler"
+        >比对</el-button
+      >
+    </div>
   </div>
 </template>
 
 <script>
 import { submitNodeForm } from "@/api/bpmprocess/runDialogApi";
-import input from "ant-design-vue/lib/input";
+
 export default {
   name: "QRCode",
   props: ["formData", "row"],
@@ -50,8 +65,10 @@ export default {
       //是否编辑
       isEdit: false,
       cardID: "",
-      reamrk: "",
+      remark: "",
       QRList: [],
+      selectIndex: "",
+      status: 0, //对比结果 0:未对比 1:对比成功 2:对比失败
     };
   },
   computed: {
@@ -77,6 +94,22 @@ export default {
   },
   mounted() {},
   methods: {
+    sameHandler() {
+      if (!this.QRList[this.selectIndex]) {
+        this.$message.error("请先选择一个二维码");
+        return;
+      }
+      this.status =
+        this.QRList[this.selectIndex].description ==
+        this.remark.replace(/\\/g, "")
+          ? 1
+          : 2;
+    },
+    // 二维码选中回调
+    itemClickHandler(index) {
+      this.status = 0;
+      this.selectIndex = index;
+    },
     // 获取完整的url
     getComplateURL(url) {
       return process.env.VUE_APP_BASE_API + url;
@@ -91,6 +124,7 @@ export default {
             imageUrl,
             part_name: partName,
             part_no: partNo,
+            description,
           };
         });
       }
@@ -204,6 +238,8 @@ export default {
       align-items: center;
       justify-content: center;
       background: #aaa6a64d;
+      cursor: pointer;
+
       .qrcode {
         width: 150px;
         height: 150px;
@@ -220,6 +256,18 @@ export default {
         }
       }
     }
+    .active {
+      background: #5250504d;
+    }
+    .right {
+      background: #a6ee75;
+    }
+    .error {
+      background: #f56c6c;
+    }
   }
 }
+.input-wrap {
+  display: flex;
+}
 </style>