|
|
@@ -0,0 +1,166 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="show"
|
|
|
+ :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="3">
|
|
|
+ <div class="content">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in list"
|
|
|
+ :key="index"
|
|
|
+ :class="(index + 1) % 9 === 9 ? ['box', 'next-page'] : 'box'"
|
|
|
+ >
|
|
|
+ <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>
|
|
|
+ </template>
|
|
|
+ <vue-barcode
|
|
|
+ :value="item.bianHao"
|
|
|
+ :width="2.5"
|
|
|
+ :height="40"
|
|
|
+ :fontSize="0"
|
|
|
+ :margin="0"
|
|
|
+ class="barcode"
|
|
|
+ ></vue-barcode>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </vue-easy-print>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="goPrint">打印</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ show: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ width: {
|
|
|
+ type: String,
|
|
|
+ default: '1020px'
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ type: String,
|
|
|
+ default: '入库标签打印'
|
|
|
+ },
|
|
|
+ list: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+ type: {
|
|
|
+ type: String,
|
|
|
+ default: '物料'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ vueEasyPrint: () => import('vue-easy-print'),
|
|
|
+ VueBarcode: () => import('vue-barcode')
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ modelList: [
|
|
|
+ {
|
|
|
+ label: `${this.type}名称`,
|
|
|
+ value: 'mingCheng',
|
|
|
+ width: '100%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: `${this.type}编码`,
|
|
|
+ value: 'bianHao'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '规格',
|
|
|
+ value: 'guiGe'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '货号',
|
|
|
+ value: 'huoHao'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '批号',
|
|
|
+ value: 'piHao'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '到库日期',
|
|
|
+ value: 'daoKuRiQi'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '有效期',
|
|
|
+ value: 'youXiaoQi'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '代数',
|
|
|
+ value: 'daiShu'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '生厂商',
|
|
|
+ value: 'shengChanShang',
|
|
|
+ width: '100%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '保存条件',
|
|
|
+ value: 'baoCunTiaoJian',
|
|
|
+ width: '100%'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goPrint() {
|
|
|
+ this.$refs.easyPrint.print()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+ .print-dialog {
|
|
|
+ width: 1020px;
|
|
|
+ min-width: 1020px;
|
|
|
+ height: 528px;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 10px;
|
|
|
+ min-height: 380px;
|
|
|
+ overflow: auto;
|
|
|
+ .box {
|
|
|
+ position: relative;
|
|
|
+ width: 300px;
|
|
|
+ height: 180px;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 4px;
|
|
|
+ margin: 0 10px 10px;
|
|
|
+ border: 1px solid #000;
|
|
|
+ border-radius: 4px;
|
|
|
+ .item {
|
|
|
+ margin-bottom: 1px;
|
|
|
+ display: inline-block;
|
|
|
+ min-width: 50%;
|
|
|
+ .name {
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .barcode {
|
|
|
+ position: absolute;
|
|
|
+ text-align: center;
|
|
|
+ bottom: 10px;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .next-page {
|
|
|
+ page-break-after: always;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
cfort