二维码回显问题改为组件

src/views/mes/dv/machinery/index.vue

@@ -231,13 +231,7 @@
             </el-row>
           </el-col>
           <el-col :span="10">
-            <div class="flex-container">
+            <BarcodeImg ref="barcodeImg" :bussinessId="form.machineryId" :bussinessCode="form.machineryCode" barcodeType="MACHINERY"></BarcodeImg>
-              <el-image class="barcodeClass" fit="scale-down" :src="form.barcodeUrl?form.barcodeUrl.toString():''">
-                <div slot="error" class="image-slot">
-                  <i class="el-icon-picture-outline"></i>
-                </div>
-              </el-image>
-            </div>
           </el-col>
         </el-row>
         <el-row>
@@ -304,12 +298,13 @@ import {genCode} from "@/api/system/autocode/rule"
 import { getToken } from "@/utils/auth";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import BarcodeImg from "@/components/barcodeImg/index.vue"
 import {getBarcodeUrl} from "@/api/mes/wm/barcode";
 
 export default {
   name: "Machinery",
   dicts: ['sys_yes_no','mes_machinery_status'],
-  components: { Treeselect },
+  components: { Treeselect,BarcodeImg },
   data() {
     return {
       //自动生成编码
@@ -516,7 +511,9 @@ export default {
         this.open = true;
         this.title = "查看设备信息";
         this.optType = "view";
-        this.getBarcodeUrl();
+        this.$nextTick(()=>{
+          this.$refs.barcodeImg.getBarcode();
+        })
       });
     },
     /** 新增按钮操作 */
@@ -543,19 +540,12 @@ export default {
         this.open = true;
         this.title = "修改设备";
         this.optType = "edit";
-        this.getBarcodeUrl();
+        this.$nextTick(()=>{
-      });
+          this.$refs.barcodeImg.getBarcode();
-    },
+        })
-    //获取二维码地址
-    getBarcodeUrl(){
-      this.barcodeParams.bussinessId = this.form.machineryId;
-      this.barcodeParams.bussinessCode = this.form.machineryCode;
-      getBarcodeUrl(this.barcodeParams).then( response =>{
-        if(response.data != null){
-          this.$set(this.form,'barcodeUrl',response.data.barcodeUrl);//强制刷新DOM
-        }
       });
     },
+
     /** 提交按钮 */
     submitForm: function() {
       this.$refs["form"].validate(valid => {

src/views/mes/md/mditem/index.vue

@@ -246,13 +246,7 @@
             </el-row>
           </el-col>
           <el-col :span="10">
-            <div class="flex-container">
+            <BarcodeImg ref="barcodeImg" :bussinessId="form.itemId" :bussinessCode="form.itemCode" barcodeType="ITEM"></BarcodeImg>
-              <el-image class="barcodeClass" fit="scale-down" :src="form.barcodeUrl">
-                <div slot="error" class="image-slot">
-                  <i class="el-icon-picture-outline"></i>
-                </div>
-              </el-image>
-            </div>
           </el-col>
         </el-row>
         <el-row>
@@ -406,11 +400,11 @@ import { treeselect } from "@/api/mes/md/itemtype";
 import Treeselect from "@riophae/vue-treeselect";
 import { getBarcodeUrl } from "@/api/mes/wm/barcode";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-
+import BarcodeImg from "@/components/barcodeImg/index.vue"
 export default {
   name: "MdItem",
   dicts: ['sys_yes_no','mes_item_product'],
-  components: { Treeselect,ItemBom,SOPTab,SIPTab },
+  components: { Treeselect,ItemBom,SOPTab,SIPTab,BarcodeImg },
   data() {
     return {
       // 遮罩层
@@ -608,7 +602,9 @@ export default {
         this.open = true;
         this.title = "查看物料/产品";
         this.optType = "view";
-        this.getBarcodeUrl();
+        this.$nextTick(()=>{
+          this.$refs.barcodeImg.getBarcode();
+        })
       });
     },
     /** 新增按钮操作 */
@@ -632,7 +628,9 @@ export default {
         this.open = true;
         this.optType = "edit";
         this.title = "修改物料/产品";
-        this.getBarcodeUrl();
+        this.$nextTick(()=>{
+          this.$refs.barcodeImg.getBarcode();
+        })
       });
     },
     /** 提交按钮 */

src/views/mes/md/workshop/index.vue

@@ -172,13 +172,7 @@
             </el-row>
           </el-col>
           <el-col :span="10">
-            <div class="flex-container">
+            <BarcodeImg ref="barcodeImg" :bussinessId="form.workshopId" :bussinessCode="form.workshopCode" barcodeType="WORKSHOP"></BarcodeImg>
-              <el-image class="barcodeClass" fit="scale-down" :src="form.barcodeUrl?form.barcodeUrl.toString():''">
-                <div slot="error" class="image-slot">
-                  <i class="el-icon-picture-outline"></i>
-                </div>
-              </el-image>
-            </div>
           </el-col>
         </el-row>
         <el-row>
@@ -201,8 +195,10 @@
 <script>
 import { listWorkshop, getWorkshop, delWorkshop, addWorkshop, updateWorkshop } from "@/api/mes/md/workshop";
 import {genCode} from "@/api/system/autocode/rule"
+import BarcodeImg from "@/components/barcodeImg/index.vue"
 import {getBarcodeUrl} from "@/api/mes/wm/barcode";
 export default {
+  components:{BarcodeImg},
   name: "Workshop",
   dicts: ['sys_yes_no'],
   data() {
@@ -332,7 +328,9 @@ export default {
         this.open = true;
         this.title = "查看车间";
         this.optType = "view";
-        this.getBarcodeUrl();
+        this.$nextTick(()=>{
+          this.$refs.barcodeImg.getBarcode();
+        })
       });
     },
     /** 修改按钮操作 */
@@ -344,7 +342,9 @@ export default {
         this.open = true;
         this.title = "修改车间";
         this.optType = "edit";
-        this.getBarcodeUrl();
+        this.$nextTick(()=>{
+          this.$refs.barcodeImg.getBarcode();
+        })
       });
     },
     /** 提交按钮 */

src/views/mes/md/workstation/index.vue

@@ -203,13 +203,7 @@
             </el-row>
           </el-col>
           <el-col :span="10">
-            <div class="flex-container">
+            <BarcodeImg ref="barcodeImg" :bussinessId="form.workstationId" :bussinessCode="form.workstationCode" barcodeType="WORKSTATION"></BarcodeImg>
-              <el-image class="barcodeClass" fit="scale-down" :src="form.barcodeUrl">
-                <div slot="error" class="image-slot">
-                  <i class="el-icon-picture-outline"></i>
-                </div>
-              </el-image>
-            </div>            
           </el-col>
         </el-row>
         <el-row>
@@ -312,10 +306,11 @@ import {listAllProcess} from "@/api/mes/pro/process";
 import {genCode} from "@/api/system/autocode/rule";
 import { listAllWorkshop } from "@/api/mes/md/workshop";
 import { getBarcodeUrl } from "@/api/mes/wm/barcode";
+import BarcodeImg from "@/components/barcodeImg/index.vue";
 export default {
   name: "Workstation",
   dicts: ['sys_yes_no'],
-  components: {WorkStationMachine,MachinerySelectSingle,Workstationworker,WorkStationTool},
+  components: {WorkStationMachine,MachinerySelectSingle,Workstationworker,WorkStationTool,BarcodeImg},
   data() {
     return {
       //自动生成编码
@@ -555,7 +550,9 @@ export default {
         this.open = true;
         this.title = "查看工作站信息";
         this.optType = "view";
-        this.getBarcodeUrl();
+        this.$nextTick(()=>{
+          this.$refs.barcodeImg.getBarcode();
+        })
       });
     },
     /** 修改按钮操作 */
@@ -568,7 +565,9 @@ export default {
         this.open = true;
         this.title = "修改工作站";
         this.optType = "edit";
-        this.getBarcodeUrl();
+        this.$nextTick(()=>{
+          this.$refs.barcodeImg.getBarcode();
+        })
       });
     },
     /** 提交按钮 */

src/views/mes/tm/tool/index.vue

@@ -237,13 +237,7 @@
             </el-row>
           </el-col>
           <el-col :span="10">
-            <div class="flex-container">
+            <BarcodeImg ref="barcodeImg" :bussinessId="form.toolId" :bussinessCode="form.toolCode" barcodeType="TOOL"></BarcodeImg>
-              <el-image class="barcodeClass" fit="scale-down" :src="form.barcodeUrl?form.barcodeUrl.toString():''">
-                <div slot="error" class="image-slot">
-                  <i class="el-icon-picture-outline"></i>
-                </div>
-              </el-image>
-            </div>
           </el-col>
         </el-row>
         <el-row>
@@ -326,8 +320,10 @@ import { listTool, getTool, delTool, addTool, updateTool } from "@/api/mes/tm/to
 import { listAllTooltype } from "@/api/mes/tm/tooltype"
 import {genCode} from "@/api/system/autocode/rule"
 import {getBarcodeUrl} from "@/api/mes/wm/barcode";
+import BarcodeImg from "@/components/barcodeImg/index.vue";
 export default {
   name: "Tool",
+  components: {BarcodeImg},
   dicts: ['mes_tool_status', 'mes_mainten_type'],
   data() {
     return {
@@ -495,7 +491,9 @@ export default {
         this.open = true;
         this.title = "查看工装夹具信息";
         this.optType = "view";
-        this.getBarcodeUrl();
+        this.$nextTick(()=>{
+          this.$refs.barcodeImg.getBarcode();
+        })
       });
     },
     /** 修改按钮操作 */
@@ -507,7 +505,9 @@ export default {
         this.open = true;
         this.title = "修改工装夹具清单";
         this.optType = "edit";
-        this.getBarcodeUrl();
+        this.$nextTick(()=>{
+          this.$refs.barcodeImg.getBarcode();
+        })
       });
     },
     //获取二维码地址