|
|
@@ -1,132 +1,146 @@
|
|
|
<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="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]"
|
|
|
+ <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
|
|
|
+ ref="easyPrint"
|
|
|
+ table-show
|
|
|
+ :one-page-row="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"
|
|
|
+ >
|
|
|
+ 17025实验室质量管理系统
|
|
|
+ </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>
|
|
|
- </template>
|
|
|
- <!-- <vue-barcode :value="item.bianHao"
|
|
|
+ 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="3"
|
|
|
: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>
|
|
|
+ </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: '500px'
|
|
|
- },
|
|
|
- title: {
|
|
|
- type: String,
|
|
|
- default: '入库标签打印'
|
|
|
+ components: {
|
|
|
+ vueEasyPrint: () => import('vue-easy-print'),
|
|
|
+ VueBarcode: () => import('vue-barcode')
|
|
|
},
|
|
|
- list: {
|
|
|
- type: Array,
|
|
|
- default: () => []
|
|
|
- },
|
|
|
- type: {
|
|
|
- type: String,
|
|
|
- default: '物料'
|
|
|
- }
|
|
|
- },
|
|
|
- components: {
|
|
|
- vueEasyPrint: () => import('vue-easy-print'),
|
|
|
- VueBarcode: () => import('vue-barcode')
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- modelList: [
|
|
|
- {
|
|
|
- label: `仓库类型`,
|
|
|
- value: 'cangKuLeiXing',
|
|
|
- },
|
|
|
- {
|
|
|
- label: `物料类型`,
|
|
|
- value: 'wuLiaoLeiXing',
|
|
|
- },
|
|
|
- {
|
|
|
- label: `物料名称`,
|
|
|
- value: 'mingCheng',
|
|
|
- width: '100%'
|
|
|
+ props: {
|
|
|
+ show: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
},
|
|
|
- {
|
|
|
- label: `物料编码`,
|
|
|
- value: 'bianHao'
|
|
|
+ width: {
|
|
|
+ type: String,
|
|
|
+ default: '500px'
|
|
|
},
|
|
|
- {
|
|
|
- label: '货 号',
|
|
|
- value: 'huoHao'
|
|
|
+ title: {
|
|
|
+ type: String,
|
|
|
+ default: '入库标签打印'
|
|
|
},
|
|
|
- {
|
|
|
- label: '批 号',
|
|
|
- value: 'piHao'
|
|
|
+ list: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
},
|
|
|
- {
|
|
|
- label: '有效期',
|
|
|
- value: 'youXiaoQi'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '存放位置',
|
|
|
- value: 'cunFangWeiZhi',
|
|
|
- width: '100%'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '储存条件',
|
|
|
- value: 'cunChuYaoQiu',
|
|
|
- width: '100%'
|
|
|
- },
|
|
|
-{
|
|
|
- label: '备注',
|
|
|
- value: 'beiZhu',
|
|
|
- width: '100%'
|
|
|
- },
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- goPrint() {
|
|
|
- this.$refs.easyPrint.print()
|
|
|
+ type: {
|
|
|
+ type: String,
|
|
|
+ default: '物料'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ modelList: [
|
|
|
+ {
|
|
|
+ label: `仓库类型`,
|
|
|
+ value: 'cangKuLeiXing'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: `物料类型`,
|
|
|
+ value: 'wuLiaoLeiXing'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: `物料名称`,
|
|
|
+ value: 'mingCheng',
|
|
|
+ width: '100%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: `物料编码`,
|
|
|
+ value: 'bianHao'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '货 号',
|
|
|
+ value: 'huoHao'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '批 号',
|
|
|
+ value: 'piHao'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '有效期',
|
|
|
+ value: 'youXiaoQi'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '存放位置',
|
|
|
+ value: 'cunFangWeiZhi',
|
|
|
+ width: '100%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '储存条件',
|
|
|
+ value: 'cunChuYaoQiu',
|
|
|
+ width: '100%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '备注',
|
|
|
+ value: 'beiZhu',
|
|
|
+ width: '100%'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goPrint () {
|
|
|
+ this.$refs.easyPrint.print()
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
@@ -180,4 +194,4 @@ export default {
|
|
|
page-break-after: always;
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
shenqilong