ソースを参照

fix:不合格审理单二维码生成

lupeng 5 ヶ月 前
コミット
b87ad92794
2 ファイル変更165 行追加0 行削除
  1. 12 0
      src/api/fault/index.ts
  2. 153 0
      src/views/quality/unqualified/index.vue

+ 12 - 0
src/api/fault/index.ts

@@ -98,3 +98,15 @@ export function updateFault(data:Object) {
   });
 }
 
+/**
+ * 获取不合格品审理单二维码
+ *
+ * @param id
+ * @param data
+ */
+export function getFaultScanCode(id: Number): AxiosPromise<any> {
+  return request({
+    url: "/api/v1/process/escalationFault/scan/" + id,
+    method: "get",
+  });
+}

+ 153 - 0
src/views/quality/unqualified/index.vue

@@ -25,6 +25,13 @@
                    text
                    type="primary"
         >查看</el-button>
+          <el-button
+                  v-if="row.currentState==='5'"
+                  size="small"
+                  type="primary"
+                  @click="handleScanCode(row.id)"
+          >二维码生成
+          </el-button>
       </template>
 
 
@@ -39,7 +46,41 @@
     >
       <FaultDetail  :escalationFaultId="fault.id" :dialog="dialog" />
     </el-dialog>
+    <el-dialog
+      v-model="dialog3.visible"
+      :title="dialog3.title"
+      width="950px"
+      @close="
+        dialog3.visible = false;
+        scanCodeArray = [];
+      "
+    >
+      <div class="scanInfo">
+        <div style="padding: 0 20px; text-align: center">
+          二维码数量:{{ scanCodeArray.length }}
+        </div>
+        <el-scrollbar class="scrollbarA">
+          <div
+            :style="
+              scanCodeArray.length == 1 ? '   justify-content: center;' : ''
+            "
+            class="box"
+          >
+            <div
+              v-for="(item, index) in scanCodeArray"
+              :key="index"
+              class="scancodeitem"
+            >
+              <div class="qrcodeItem">
+                <vue-qrcode :value="item" error-level="low" size="70" />
+              </div>
+            </div>
+          </div>
 
+          <div v-if="scanCodeArray.length < 1">暂无数据</div>
+        </el-scrollbar>
+      </div>
+    </el-dialog>
 
   </div>
 </template>
@@ -53,6 +94,7 @@
   const { isShowTable, tableType } = toRefs(useCommonStoreHook());
   // 数据字典相关
   const { dicts } = useDictionaryStore();
+  import {getFaultScanCode} from "@/api/fault";
 
   const test = () => {
     isShowTable.value = true;
@@ -62,6 +104,10 @@
     title: "报故详情",
     visible: false,
   });
+  const dialog3 = reactive({
+    title: "二维码详情",
+    visible: false,
+  });
   const fault=ref({});
   const faultInfo=ref({});
   const faultEs=ref({});
@@ -76,7 +122,18 @@
     faultEs.value.id=row.id;
     dialog2.value.visible=true;
   }
+  function useScanCode() {
+    const scanCodeArray = ref([]);
 
+    const handleScanCode = async (id) => {
+      const { data, code } = await getFaultScanCode(id);
+      scanCodeArray.value = data;
+      dialog3.visible = true;
+    };
+    return { scanCodeArray, handleScanCode };
+  }
+
+  const { scanCodeArray, handleScanCode } = useScanCode();
   const faultExamine =(row)=>{
     faultExa.value.id=row.id;
     dialog3.value.visible=true;
@@ -132,3 +189,99 @@
 
 
 </script>
+<style lang="scss" scoped>
+.scanInfo {
+  width: 100%;
+
+  .scrollbar {
+    padding: 20px;
+    height: 350px;
+
+    .item {
+      margin: 20px 0;
+      width: 100%;
+      background-color: #80808030;
+      border-radius: 16px;
+      height: 60px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 20px;
+
+      .el-icon {
+        width: 50px;
+        height: 50px;
+        color: red;
+        cursor: pointer;
+      }
+    }
+
+    .scancodeitem {
+      width: 300px;
+      height: 300px;
+      margin: 0 20px;
+      display: inline-block;
+      border-radius: 16px;
+      border: 1px solid black;
+      padding-top: 10px;
+
+      .qrcodeItem {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+
+  .bottombtn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .scrollbarA {
+    padding: 20px;
+    height: 350px;
+
+    .box {
+      display: flex;
+      align-items: center;
+
+      .item {
+        margin: 20px 0;
+        width: 100%;
+        background-color: #80808030;
+        border-radius: 16px;
+        height: 60px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 20px;
+
+        .el-icon {
+          width: 50px;
+          height: 50px;
+          color: red;
+          cursor: pointer;
+        }
+      }
+
+      .scancodeitem {
+        width: 300px;
+        height: 300px;
+        margin: 0 20px;
+        display: inline-block;
+        border-radius: 16px;
+        border: 1px solid black;
+        padding-top: 10px;
+
+        .qrcodeItem {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+    }
+  }
+}
+</style>