fix:修改物料标签

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

@@ -1,82 +1,50 @@
 <template>
-  <div class="bg">
-    <el-dialog width="21cm" height="10cm" :modal-append-to-body='false' title="物料标签" :visible.sync="scanVisible">
-      <!-- 表单是否显示 -->
-      <div style="height:500px">
-        <div ref="qrcode" id="box">
-          <vue-easy-print tableShow ref="easyPrint" :onePageRow="onePageRow">
-            <div v-for="(item1, index1) in list" :key="index1" style="display: inline-block">
-              <div class="All">
-                <div class="tagBox">
-                  <p class="title">
-                    <img src="../../../../assets/images/login/logo.jpg" class="logoImg" />
-                    深圳市罗湖医院集团
-                  </p>
-                  <div class="lh">
-                    <div>物料名称：</div>
-                    <div>{{ item1.wu_liao_ming_chen ? item1.wu_liao_ming_chen : '-' }}</div>
-                  </div>
-                  <div class="lh">
-                    <div>物料编码：</div>
-                    <div>{{ item1.wu_liao_bian_ma_ ? item1.wu_liao_bian_ma_ : '-' }}</div>
-                  </div>
-                  <div class="la">
-                    <div class="lh">
-                      <div>货&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</div>
-                      <div>{{ item1.huo_hao_ ? item1.huo_hao_ : '-' }}</div>
-                    </div>
-                    <div class="lh" style="margin-left: 10px">
-                      <div>批号：</div>
-                      <div>{{ item1.pi_hao_ ? item1.pi_hao_ : '-' }}</div>
-                    </div>
-                  </div>
-                  <div class="la">
-                    <div class="lh">
-                      <div>到库日期：</div>
-                      <div>{{ item1.create_time_ ? getData(item1.create_time_) : '-' }}</div>
-                    </div>
-                    <div class="lh" style="margin-left: 10px">
-                      <div>有效期：</div>
-                      <div>{{ item1.you_xiao_qi_ ? item1.you_xiao_qi_ : '-' }}</div>
-                    </div>
-                  </div>
-                  <div class="lh">
-                    <div>生产厂家：</div>
-                    <div>{{ item1.sheng_chan_chang_ ? item1.sheng_chan_chang_ : '-' }}</div>
-                  </div>
-                  <div class="lh">
-                    <div>储存条件：</div>
-                    <div>{{ item1.cun_chu_yao_qiu_ ? item1.cun_chu_yao_qiu_ : '-' }}</div>
-                  </div>
-                  <div class="ewm">
-                    <vue-barcode :value='item1.wu_liao_bian_ma_' :width="1" :height="15"></vue-barcode>
-                  </div>
-                </div>
-              </div>
+  <el-dialog :visible.sync="scanVisible"
+             :width="width"
+             custom-class="print-dialog"
+             append-to-body
+             :close-on-click-modal="false"
+             :title="title"
+             top="5vh"
+             @close="$emit('update:show', false)">
+    <vue-easy-print tableShow
+                    ref="easyPrint"
+                    :onePageRow="1">
+      <div class="content">
+        <div v-for="(item, index) in list"
+             :key="index"
+             class="box">
+          <p class="title">
+            <img src="../../../../assets/images/login/logo.jpg"
+                 class="logoImg" />
+            深圳市罗湖医院集团
+          </p>
+          <template v-for="(o, i) in modelList">
+            <div v-if="item[o.value]"
+                 class="item"
+                 :style="`width: ${o.width};`">
+              <span class="name">{{ o.label }}：</span>
+              <span class="value">{{ item[o.value] }}</span>
             </div>
-          </vue-easy-print>
+          </template>
+          <vue-barcode :value='item.wu_liao_bian_ma_'
+                       :width="1"
+                       :height="15"></vue-barcode>
         </div>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
-        <el-button type="primary" @click="printDemo">打印标签</el-button>
-      </span>
-    </el-dialog>
-
-
-  </div>
+    </vue-easy-print>
+    <span slot="footer"
+          class="dialog-footer">
+      <el-button type="primary"
+                 @click="goPrint">打印</el-button>
+    </span>
+  </el-dialog>
 </template>
-
 <script>
 import VueBarcode from 'vue-barcode';
 import vueEasyPrint from "vue-easy-print";
 import repostCurd from '@/business/platform/form/utils/custom/joinCURD.js';
-
 export default {
-  components: {
-    VueBarcode,
-    vueEasyPrint,
-  },
   props: {
     obj: {
       default: [],
@@ -93,12 +61,57 @@ export default {
     scanVisible: {
       type: Boolean,
       default: false
-    }
+    },
+    width: {
+      type: String,
+      default: '500px'
+    },
+  },
+  components: {
+    vueEasyPrint: () => import('vue-easy-print'),
+    VueBarcode: () => import('vue-barcode')
   },
   data() {
     return {
-      value: '',
-      id: '',
+      modelList: [
+        {
+          label: `物料名称`,
+          value: 'wu_liao_ming_chen',
+          width: '100%'
+        },
+        {
+          label: `物料编码`,
+          value: 'wu_liao_bian_ma_',
+          width: '100%'
+
+        },
+        {
+          label: `货号`,
+          value: 'huo_hao_'
+        },
+        {
+          label: '批号',
+          value: 'pi_hao_'
+        },
+        {
+          label: '到库日期',
+          value: 'create_time_'
+        },
+        {
+          label: '有效期',
+          value: 'you_xiao_qi_'
+        },
+        {
+          label: '生厂商',
+          value: 'sheng_chan_chang_',
+          width: '100%'
+        },
+        {
+          label: '储存条件',
+          value: 'cun_chu_yao_qiu_',
+          width: '100%'
+        }
+      ],
       list: [{
         wu_liao_ming_chen: '-',
         wu_liao_bian_ma_: '-',
@@ -110,6 +123,9 @@ export default {
         cun_chu_yao_qiu_: '-',
         barcode: '-'
       }],
+      title: "物料标签",
+      value: '',
+      id: '',
       visible: true
     }
   },
@@ -122,7 +138,7 @@ export default {
     this.getInit()
   },
   methods: {
-    printDemo() {
+    goPrint() {
       this.$refs.easyPrint.print()
     },
     getInit() {
@@ -151,57 +167,49 @@ export default {
   }
 }
 </script>
-
-<style lang="less" scoped>
-.bg {
-  // height: auto;
+<style lang="scss">
+.print-dialog {
+  width: 500px;
+  min-width: 500px;
+  height: 680px;
 }
-
-.title {
-  font-size: 16px;
-  color: #01a39e;
-  margin: 0;
-  margin-bottom: 10px;
-}
-
-/deep/ .logoImg {
-  width: 25px;
-  height: 25px;
-  position: relative;
-  top: 6px;
-}
-
-.tagBox {
-  width: 240px; // 300  240
-  height: 140px; // 180  150
-  position: relative;
-  border: 1px solid #000000;
-  padding: 2px;
-  display: inline-block;
-  margin: 10px 5px;
-  border-radius: 4px;
-  background-color: #fff;
-}
-
-.ewm {
-  display: flex;
-  justify-content: center;
-}
-
-.la {
-  display: flex;
-  align-items: center;
-}
-
-.lh {
-  font-size: 4px; //16
-  display: flex;
-  align-items: center;
-}
-
-/deep/ .tagBox {
-  width: auto;
-  height: auto;
-  padding: 0px 10px 1px 10px;
+.content {
+  // display: flex;
+  // flex-wrap: wrap;
+  // justify-content: center;
+  padding: 10px;
+  min-height: 380px;
+  overflow: auto;
+  .box {
+    position: relative;
+    width: 300px;
+    height: 240px;
+    font-size: 14px;
+    padding: 10px;
+    margin: 0 auto 20px;
+    border: 1px solid #000;
+    border-radius: 4px;
+    .item {
+      margin-bottom: 6px;
+      display: inline-block;
+      min-width: 50%;
+      .name {
+        white-space: nowrap;
+      }
+    }
+    .barcode {
+      position: absolute;
+      text-align: center;
+      bottom: 10px;
+      left: 0;
+      right: 0;
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .next-page {
+    page-break-after: always;
+  }
 }
-</style>
+</style>