三期出库流程

applications/dee-mes/src/privateComponents/components/OutStorageExpireFlow/PrintTag.vue

+<!--
+ * @Author: Lean
+ * @Date: 2021-03-01 14:40:26
+ * @LastEditTime: 2021-03-09 20:17:23
+ * @Description: 打印标签
+ * @FilePath: applications/dee-mes/src/privateComponents/components/WarehousingConfirmationConfirm/component/PrintTag.vue
+-->
+
+<!--
+  @prop config
+  @prop Number config.width 设置宽度 default = 300
+  @prop Array config.prints 打印的数据
+  @prop String config.prints[].QRcode 二维码
+  @prop String config.prints[].propertys 二维码下显示的属性
+  * 测试参数结构
+  config: {
+    width: 300,
+    prints: [
+      {
+        text: 'asdasdasd',
+        propertys: [
+          { label: '编码', value: '' },
+          { label: '名称', value: '' }
+        ]
+      },
+      {
+        text: 'asdasdasd',
+        propertys: [
+          { label: '编码', value: '' },
+          { label: '名称', value: '' }
+        ]
+      }
+    ]
+  }
+-->
+<template>
+  <section ref="print" class="print">
+    <section
+      v-for="(item, index) in config.prints || []"
+      :key="index"
+      :style="{ width: '19%' }"
+      class="item"
+    >
+      <header>
+        <vue-qr style="height:218px;" :size="config.width" :margin="0" :text="item.text.toString()" :qid="index.toString()" />
+      </header>
+      <footer>
+        <ul>
+          <li
+            v-for="property in item.propertys"
+            :key="property.label"
+          >
+            <p>{{ property.label }}</p>
+            <span>{{ property.value }}</span>
+          </li>
+        </ul>
+      </footer>
+    </section>
+  </section>
+</template>
+<script>
+import VueQr from 'vue-qr'
+export default {
+  name: 'Print',
+  components: {
+    VueQr
+  },
+  props: {
+    config: {
+      type: Object,
+      default: () => {
+        return {
+          width: 300,
+          prints: []
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      timer: null,
+      flag: true
+    }
+  },
+  beforeDestroy() {
+    this.timer = null
+  },
+  methods: {
+    print() {
+      if (this.flag) {
+        this.flag = false
+        this.timer = setInterval(() => {
+          if (this.$refs.print.innerHTML) {
+            this.printTag()
+            clearInterval(this.timer)
+          }
+        }, 300)
+        setTimeout(() => {
+          this.flag = true
+        }, 1000)
+      }
+    },
+    printTag() {
+      var iframe = document.createElement('IFRAME')
+      var doc = null
+      iframe.setAttribute('style', 'position:absolute; width:0; height:0; margin-top: -1000px; margin-left: -1000px;')
+      document.body.appendChild(iframe)
+      doc = iframe.contentWindow.document
+      doc.write(`
+        <style>
+        ul, li {
+          margin: 0;
+          padding: 0;
+          list-style: none;
+          font-size: 17px;
+        }
+        .item {
+          min-height:700px;
+        }
+        li {
+          position: relative;
+          width: 306px;
+          display: flex;
+          padding: 0 5px;
+          align-items: center;
+          border-left: 2px solid #222;
+          border-right: 2px solid #222;
+          border-bottom: 2px solid #222;
+        }
+        li::after{
+          content: '';
+          position: absolute;
+          left: calc(35% - 5px);
+          top: 0;
+          height: 100%;
+          border-left: 2px solid #222;
+          width: 0;
+        }
+        ul {
+          width: 320px;
+          border-top: 4px solid #222;
+        }
+        li p {
+          margin: 0;
+          width: 35%;
+          padding: 3.5px 0;
+        }
+        li span {
+          display: inline-block;
+          width: 65%;
+          text-align: left;
+          padding-left: 6px;
+        }
+        img {
+          width: 320px;
+          height:290px;
+          margin-bottom: 4px;
+        }
+        </style>
+        `)
+      doc.write(this.$refs.print.innerHTML)
+      doc.close()
+      iframe.contentWindow.focus()
+      iframe.contentWindow.print()
+    }
+  }
+}
+</script>
+  <style lang="scss" scoped>
+  .print {
+    position: absolute;
+    z-index: -999;
+    left: -1000px;
+    top: -1110px;
+  }
+  </style>
+

applications/dee-mes/src/privateComponents/components/OutStorageExpireFlow/index.vue

 <template>
   <div>
-    <div class="sub-title">物料明细</div>
     <DeeAsCom
       v-if="basicData"
+      ref="list"
       :basic-data="basicData"
       :lay-config="{
         typeName: 'OutStorageExpireItem',
-        layKey: 'sanqichukumixi'
+        layKey: 'OutStorageExpireFlow'
       }"
+      @tb-printCode="tbPrintCode"
     />
+    <PrintTag ref="print" :config="printConfig" />
   </div>
 </template>
 
 <script>
+import PrintTag from './PrintTag.vue'
 export default {
   componentName: '三期出库物料明细',
   name: 'OutStorageExpireFlowInfo',
+  components: { PrintTag },
   props: {
     basicData: {
       type: Object,
@@ -24,7 +28,12 @@ export default {
   },
   data() {
     return {
-
+      // 打印标签
+      printConfig: {
+        visible: false,
+        width: 300,
+        prints: []
+      }
     }
   },
 
@@ -33,7 +42,44 @@ export default {
   },
 
   methods: {
-
+    tbPrintCode() {
+      const selection = this.$refs['list'].$refs['asCom'].selectedData
+      // 获取需要打印的数据
+      this.printConfig.prints = []
+      selection.forEach((row) => {
+        this.printConfig = Object.assign({}, this.printConfig, {
+          visible: true
+        })
+        this.printConfig.prints.push({
+          text: row.id,
+          propertys: [
+            { label: '编码', value: row.extMaterial.resCode },
+            { label: '名称', value: row.extMaterial.resName },
+            { label: '型号/牌号/件号', value: row.extMaterial.modelNo },
+            { label: '规格', value: row.extMaterial.spec },
+            { label: '批号', value: row.lotNo },
+            { label: '系列号/序列号', value: row.serialNo },
+            { label: '机型', value: row.airModel },
+            { label: '验收单号', value: row.purchaseOrderNo },
+            // {
+            //   label: '保证保管期',
+            //   value:
+            //     item.pbo.guaranteePeriod &&
+            //     item.pbo.guaranteePeriod.replace(' 00:00:00', '')
+            // },
+            // {
+            //   label: '贮存期',
+            //   value:
+            //     item.pbo.qualityPeriod &&
+            //     item.pbo.qualityPeriod.replace(' 00:00:00', '')
+            // },
+            { label: '库位号', value: this.extWorkUnitName || '' },
+            { label: '备注', value: row.remark || '' }
+          ]
+        })
+      })
+      this.$refs.print.print()
+    }
   }
 }
 </script>

applications/dee-mes/src/privateComponents/components/Warehouse/index.vue

@@ -106,7 +106,7 @@ export default {
       })
     },
     update() {
-      const item = this.warehouseOptions.find(r => (r.id + '') === this.cloneValue)
+      const item = this.warehouseOptions.find(r => r.id === this.cloneValue)
       if (this.dataType === 'string') {
         this.$emit('input', this.cloneValue)
       } else {