打印标签组件优化

src/views/system/jbdScan/goods/deviceTag.vue

@@ -1,23 +1,32 @@
 <template>
     <div class="bg">
-        <el-dialog width="11cm" height="10cm" :modal-append-to-body='true' :append-to-body="true" title="设备标签"
-            :visible.sync="scanVisible">
+        <el-dialog
+            width="11cm"
+            height="10cm"
+            :modal-append-to-body="true"
+            :append-to-body="true"
+            title="设备标签"
+            :visible.sync="dialogVisible"
+            @close="close"
+        >
             <!-- 表单是否显示 -->
             <div style="height:500px">
-                <div ref="qrcode" id="box">
-                    <vue-easy-print tableShow ref="easyPrint" :onePageRow="onePageRow">
-                        <div v-for="(item, index1) in list" :key="index">
+                <div id="box" ref="qrcode">
+                    <vue-easy-print ref="easyPrint" table-show :one-page-row="onePageRow">
+                        <div v-for="(item, index) in list" :key="index">
                             <div class="All">
                                 <div>
                                     <div class="one">
                                         <div class="container">
                                             <div
-                                                :class="item.deviceStatus === '合格' ? 'triangle' : item.deviceStatus === '停用' ? 'triangleRed' : 'triangleYellow'">
+                                                :class="item.deviceStatus === '合格' ? 'triangle' : item.deviceStatus === '停用' ? 'triangleRed' : 'triangleYellow'"
+                                            >
                                                 <div class="label" style="border: 0;">{{ item.prove }}</div>
                                             </div>
                                             <div style="position: absolute;top: 25px;width: 100%;">
                                                 <div
-                                                    style="display: flex;justify-content: space-between;font-size: 14px;font-weight: 800;margin: 0 8px;">
+                                                    style="display: flex;justify-content: space-between;font-size: 14px;font-weight: 800;margin: 0 8px;"
+                                                >
                                                     <div>{{ item.slogan }}</div>
                                                 </div>
                                             </div>
@@ -58,7 +67,7 @@
                                                 <div>{{ item.verificationDate }}</div>
                                             </div>
                                         </div> -->
-                                        <div class="lh" style="border-bottom: 0px;" v-if="item.range !== ''">
+                                        <div v-if="item.range !== ''" class="lh" style="border-bottom: 0px;">
                                             <div class="qianZhi">限用范围：</div>
                                             <div class="zuoJuZhong">{{ item.range }}</div>
                                         </div>
@@ -71,28 +80,27 @@
                 </div>
             </div>
             <span slot="footer" class="dialog-footer">
-                <el-button @click="scanVisible = false">取 消</el-button>
+                <el-button @click="close">取 消</el-button>
                 <el-button type="primary" @click="printDemo">打印标签</el-button>
             </span>
         </el-dialog>
 
-
     </div>
 </template>
 
 <script>
-import VueBarcode from 'vue-barcode';
-import vueEasyPrint from "vue-easy-print";
-import curdPost from '@/business/platform/form/utils/custom/joinCURD.js';
+import VueBarcode from 'vue-barcode'
+import vueEasyPrint from 'vue-easy-print'
+import curdPost from '@/business/platform/form/utils/custom/joinCURD.js'
 
 export default {
     components: {
         VueBarcode,
-        vueEasyPrint,
+        vueEasyPrint
     },
     props: {
         obj: {
-            default: [],
+            default: () => [],
             type: Array
         },
         onePageRow: {
@@ -108,16 +116,17 @@ export default {
             default: false
         }
     },
-    data() {
+    data () {
         return {
+            dialogVisible: false,
             value: '',
             id: '',
             list: [{
                 name: '设备名称',
                 serial: '设备编号',
                 model: '型号规格',
-                verifier:'核查人',
-                verificationDate:'核查日期',
+                verifier: '核查人',
+                verificationDate: '核查日期',
                 // status: 1
                 prove: '测试证', // 证名
                 slogan: '标语', // 标语
@@ -125,31 +134,41 @@ export default {
                 range: '限用范围', // 限用范围
                 assetNum: '固定资产号'
             }],
-            visible: true,
+            visible: true
         }
     },
     watch: {
-        obj() {
+        obj () {
             this.getInit()
+        },
+        scanVisible: {
+            handler (val) {
+                this.dialogVisible = val
+            },
+            immediate: true
         }
     },
-    created() {
+    created () {
         this.getInit()
     },
     methods: {
-        printDemo() {
+        close () {
+            this.dialogVisible = false
+            this.$emit('scanOff')
+        },
+        printDemo () {
             this.$refs.easyPrint.print()
         },
-        getInit() {
-            var idStr = '';
+        getInit () {
+            var idStr = ''
             this.obj.forEach(item => {
-                idStr += item.split(" ")[0] + ','
+                idStr += item.split(' ')[0] + ','
             })
-            idStr = idStr.substring(0, idStr.length - 1);
+            idStr = idStr.substring(0, idStr.length - 1)
             this.getLook(idStr)
         },
-        getLook(id) {
-            let sql = `select
+        getLook (id) {
+            const sql = `select
                     dj.she_bei_ming_cheng_,
                     dj.she_bei_shi_bie_h,
                     dj.gui_ge_xing_hao_,
@@ -163,67 +182,64 @@ export default {
                 WHERE
                     find_in_set( dj.id_, '${id}' )`
             // console.log(sql)
-            let personSql = `select id_,NAME_ from ibps_party_employee`
-            Promise.all([curdPost("sql", sql),curdPost("sql", personSql)]).then(([res1,res2])=>{
+            const personSql = `select id_,NAME_ from ibps_party_employee`
+            Promise.all([curdPost('sql', sql), curdPost('sql', personSql)]).then(([res1, res2]) => {
                 const { data } = res1.variables || []
                 const personData = res2.variables.data || []
                 console.log(data)
                 // console.log(personData)
-                let list = []
+                const list = []
                 data.forEach(item => {
-                    let verificationDateStr = item.bi_xu_she_shi_?item.bi_xu_she_shi_:''
-                    let o = {
+                    const verificationDateStr = item.bi_xu_she_shi_ ? item.bi_xu_she_shi_ : ''
+                    const o = {
                         prove: this.switchProve(item.she_bei_zhuang_ta),
                         slogan: this.switchSlogan(item.she_bei_zhuang_ta),
                         deviceStatus: item.she_bei_zhuang_ta,
-                        range: this.judgementVal(item.cai_gou_he_tong_)?item.cai_gou_he_tong_:"",
+                        range: this.judgementVal(item.cai_gou_he_tong_) ? item.cai_gou_he_tong_ : '',
                         assetNum: item.zi_chan_bian_hao_,
-                        
+
                         name: item.she_bei_ming_cheng_,
                         serial: item.she_bei_shi_bie_h,
                         model: item.gui_ge_xing_hao_,
-                        verifier:this.findPersonName(item.bi_xu_de_huan_jin,personData),
-                        verificationDate:verificationDateStr.substring(0,10)
+                        verifier: this.findPersonName(item.bi_xu_de_huan_jin, personData),
+                        verificationDate: verificationDateStr.substring(0, 10)
                     }
                     list.push(o)
                     console.log(o)
                 })
                 this.list = list
-
             })
         },
-        judgementVal(value){
+        judgementVal (value) {
             return value != null && value != undefined
         },
-        switchProve(status) {
+        switchProve (status) {
             switch (status) {
                 case '合格':
-                    return "合格证"
+                    return '合格证'
                 case '停用':
-                    return "停用证"
+                    return '停用证'
                 case '限用':
-                    return "限用证"
+                    return '限用证'
                 default:
-                    return "测试证"
+                    return '测试证'
             }
         },
-        switchSlogan(status) {
+        switchSlogan (status) {
             switch (status) {
                 case '合格':
-                    return "PASS"
+                    return 'PASS'
                 case '停用':
-                    return "STOP"
+                    return 'STOP'
                 case '限用':
-                    return "RESTRICT"
+                    return 'RESTRICT'
                 default:
-                    return "TEST"
+                    return 'TEST'
             }
         },
-        findPersonName(id,personData) {
-            if(!personData)
-                return '核查人列表为空'
-            if(!id)
-                return ''
+        findPersonName (id, personData) {
+            if (!personData) { return '核查人列表为空' }
+            if (!id) { return '' }
             return personData.find(i => i.id_ === id).NAME_
         }
     }
@@ -278,8 +294,6 @@ export default {
     border-bottom: 1px solid #000000;
 }
 
-
-
 .container {
     width: 250px;
     height: 50px;