|
|
@@ -0,0 +1,209 @@
|
|
|
+<template>
|
|
|
+ <div class="bg">
|
|
|
+ <el-dialog
|
|
|
+ width="21cm"
|
|
|
+ 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="(item1, index1) in list" :key="index1">
|
|
|
+ <div v-for="(item2, index2) in parseInt(item1.num)" :key="index2">
|
|
|
+ <div class="All" style="font-family: sans-serif">
|
|
|
+ <div class="tagBox">
|
|
|
+ <div class="lh">
|
|
|
+ <div>名称:</div>
|
|
|
+ <div>{{ item1.name || '/' }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="la">
|
|
|
+ <div class="lh">
|
|
|
+ <div>批号:</div>
|
|
|
+ <div>{{ item1.serial || '/' }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="lh">
|
|
|
+ <div>规格:</div>
|
|
|
+ <div>{{ item1.type || '/' }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="la">
|
|
|
+ <div class="lh">
|
|
|
+ <div>存储条件:</div>
|
|
|
+ <div>{{ item1.condition || '/' }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="lh">
|
|
|
+ <div>数量:</div>
|
|
|
+ <div>{{ index2 + 1 }}/{{ item1.num }}支</div>
|
|
|
+ </div>
|
|
|
+ <div class="lh">
|
|
|
+ <div>有效期至:</div>
|
|
|
+ <div>{{ item1.time || '/' }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="lh">
|
|
|
+ <div>供应商/生产商:</div>
|
|
|
+ <div>{{ item1.businesses || '/' }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="ewm">
|
|
|
+ <vue-barcode
|
|
|
+ :value="item1.serial"
|
|
|
+ :width="1.5"
|
|
|
+ :height="15"
|
|
|
+ :margin="0"
|
|
|
+ :displayValue="false"
|
|
|
+ ></vue-barcode>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </vue-easy-print>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <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'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ VueBarcode,
|
|
|
+ vueEasyPrint
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ obj: {
|
|
|
+ default: [],
|
|
|
+ type: Array
|
|
|
+ },
|
|
|
+ onePageRow: {
|
|
|
+ type: Number,
|
|
|
+ default: 3
|
|
|
+ },
|
|
|
+ blankLines: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ scanVisible: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dialogVisible: false,
|
|
|
+ value: '',
|
|
|
+ id: '',
|
|
|
+ list: [],
|
|
|
+ visible: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ obj() {
|
|
|
+ this.getInit()
|
|
|
+ },
|
|
|
+ scanVisible: {
|
|
|
+ handler(val) {
|
|
|
+ this.dialogVisible = val
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getInit()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ close() {
|
|
|
+ this.dialogVisible = false
|
|
|
+ // 必须通知父组件把 scanVisible 置为 false,否则再次打开时值未变无法重新挂载
|
|
|
+ this.$emit('scanOff', 'noRefresh')
|
|
|
+ },
|
|
|
+ printDemo() {
|
|
|
+ this.$refs.easyPrint.print()
|
|
|
+ },
|
|
|
+ getInit() {
|
|
|
+ let list = []
|
|
|
+ this.obj.forEach((item) => {
|
|
|
+ let o = {
|
|
|
+ name: item.ming_cheng_,
|
|
|
+ serial: item.pi_hao_,
|
|
|
+ type: item.gui_ge_,
|
|
|
+ num: item.shu_liang_,
|
|
|
+ condition: item.cun_chu_tiao_jian,
|
|
|
+ time: item.xiao_qi_,
|
|
|
+ businesses: item.s_c_chang_jia_
|
|
|
+ }
|
|
|
+ list.push(o)
|
|
|
+ })
|
|
|
+ if (list.length == 0) {
|
|
|
+ this.$message({
|
|
|
+ message: '该样品信息有误,请联系开发人员!',
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ this.close()
|
|
|
+ }
|
|
|
+ this.list = list
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 关闭*/
|
|
|
+ remRedar() {
|
|
|
+ this.close()
|
|
|
+ },
|
|
|
+ dateFormat() {
|
|
|
+ // 获取当前时间
|
|
|
+ var date = new Date()
|
|
|
+ var year = date.getFullYear()
|
|
|
+ var month =
|
|
|
+ date.getMonth() + 1 < 10
|
|
|
+ ? '0' + (date.getMonth() + 1)
|
|
|
+ : date.getMonth() + 1
|
|
|
+ var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
|
|
|
+ return year + '-' + month + '-' + day
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.bg {
|
|
|
+ // height: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.tagBox {
|
|
|
+ width: 231px; // 300 240
|
|
|
+ position: relative;
|
|
|
+ border: 1px solid #000000;
|
|
|
+ padding: 2px;
|
|
|
+ display: inline-block;
|
|
|
+ margin: 10px 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+.ewm {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.la {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.lh {
|
|
|
+ // line-height: auto;
|
|
|
+ font-size: 14px; //16
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+</style>
|