|
|
@@ -0,0 +1,322 @@
|
|
|
+<template>
|
|
|
+ <div class="print-content" v-show="visible">
|
|
|
+ <a-row :gutter="48" slot="extra">
|
|
|
+ <a-col :md="48" :sm="48">
|
|
|
+ <span class="table-page-search-submitButtons" style="float: right">
|
|
|
+ <a-button type="dashed" @click="handleEdit()">保存参数</a-button>
|
|
|
+ <a-button type="primary" style="margin-left: 8px" v-print="'#print-container-batch'" :disabled="disabled">打印</a-button>
|
|
|
+ <a-button style="margin-left: 8px" @click="handleCancel()">返回列表</a-button>
|
|
|
+ </span>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="4">
|
|
|
+ 标签纸宽度（黑色背景）
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-slider v-model="labelWidth" :min="1" :max="1000" />
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="2">
|
|
|
+ <a-input-number v-model="labelWidth" style="marginLeft: 8px" />
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="4">
|
|
|
+ 标签表格宽度
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-slider v-model="labelContentWidth" :min="1" :max="1000" />
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="2">
|
|
|
+ <a-input-number v-model="labelContentWidth" suffix="px" style="marginLeft: 8px" />
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="4">
|
|
|
+ 标签表格高度
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-slider v-model="labelContentHeight" :min="1" :max="1000" />
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="2">
|
|
|
+ <a-input-number v-model="labelContentHeight" suffix="px" style="marginLeft: 8px" />
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="4">
|
|
|
+ 二维码宽度
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-slider v-model="imgWidth" :min="1" :max="1000" />
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="2">
|
|
|
+ <a-input-number v-model="imgWidth" suffix="px" style="marginLeft: 8px" />
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <div class="container" :style="labelWidthProgress" id="print-container-batch">
|
|
|
+ <table class="gridtable list" :style="labelContentWidthProgress" :id="'printDiv' + record.id" v-for="record in sbInfoList" :key="record.id">
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td class="text-center">备件名称</td>
|
|
|
+ <td class="text-center">{{ record.name }}</td>
|
|
|
+ <td rowspan="4" style="padding: 0 !important;" class="text-center"><img :style="imageProgress" :src="record.qrCode"></img></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="text-center">备件编号</td>
|
|
|
+ <td class="text-center">{{ record.no }}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="text-center">规格型号</td>
|
|
|
+ <td class="text-center">{{ record.ggxh }}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="text-center" width='17%'>备件类型</td>
|
|
|
+ <td class="text-center">{{ record.typeName }}</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { formatDate } from '@/utils/util'
|
|
|
+import { configData, updateSysConfigBatch } from '@/api/upms/config'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'PrintSpareBatch',
|
|
|
+ components: { },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ visible: false,
|
|
|
+ disabled: true,
|
|
|
+ sbInfoList: [],
|
|
|
+ count: 0,
|
|
|
+ levelMap: {},
|
|
|
+ user: this.$store.getters.userInfo,
|
|
|
+ labelWidth: 200,
|
|
|
+ labelContentWidth: 100,
|
|
|
+ labelContentHeight: 100,
|
|
|
+ imgWidth: 50,
|
|
|
+ configMap: {}
|
|
|
+ // 下拉框map
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ labelWidthProgress () {
|
|
|
+ const style = {}
|
|
|
+ style.width = this.labelWidth + 'px'
|
|
|
+ style.backgroundColor = 'black'
|
|
|
+ style.textAlign = 'center'
|
|
|
+ return style
|
|
|
+ },
|
|
|
+ labelContentWidthProgress () {
|
|
|
+ const style = {}
|
|
|
+ style.width = this.labelContentWidth + 'px'
|
|
|
+ style.height = this.labelContentHeight + 'px'
|
|
|
+ style.backgroundColor = 'white'
|
|
|
+ style.textAlign = 'center'
|
|
|
+ style.margin = '4px auto'
|
|
|
+ return style
|
|
|
+ },
|
|
|
+ imageProgress () {
|
|
|
+ const style = {}
|
|
|
+ style.width = this.imgWidth + 'px'
|
|
|
+ return style
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: {},
|
|
|
+ created () {
|
|
|
+ // 下拉框map
|
|
|
+ this.levelMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SPARE_PART_INFO_LEVEL)
|
|
|
+ configData().then(res => {
|
|
|
+ this.configMap = res.data['config:open:value']
|
|
|
+ this.labelWidth = parseInt(this.configMap[this.DictCache.TYPE.SPARE_QR_CODE_LABEL_WIDTH])
|
|
|
+ this.labelContentWidth = parseInt(this.configMap[this.DictCache.TYPE.SPARE_QR_CODE_LABEL_CONTENT_WIDTH])
|
|
|
+ this.labelContentHeight = parseInt(this.configMap[this.DictCache.TYPE.SPARE_QR_CODE_LABEL_CONTENT_HEIGHT])
|
|
|
+ this.imgWidth = parseInt(this.configMap[this.DictCache.TYPE.SPARE_QR_CODE_LABEL_IMG_WIDTH])
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ base (sbInfoList) {
|
|
|
+ this.disabled = true
|
|
|
+ this.visible = true
|
|
|
+ this.sbInfoList = sbInfoList
|
|
|
+ this.disabled = false
|
|
|
+ },
|
|
|
+ formatDateEn (value) {
|
|
|
+ return formatDate(new Date(value), 'yyyy-MM-dd')
|
|
|
+ },
|
|
|
+ formatDateCh (value) {
|
|
|
+ return formatDate(new Date(value), 'yyyy年MM月dd日')
|
|
|
+ },
|
|
|
+ handleCancel (values) {
|
|
|
+ this.visible = false
|
|
|
+ this.$emit('ok', values)
|
|
|
+ },
|
|
|
+ print () {
|
|
|
+ this.count = this.count + 1
|
|
|
+ },
|
|
|
+ handleEdit () {
|
|
|
+ const parameter = []
|
|
|
+ parameter.push({ code: this.DictCache.TYPE.SPARE_QR_CODE_LABEL_WIDTH, content: this.labelWidth })
|
|
|
+ parameter.push({ code: this.DictCache.TYPE.SPARE_QR_CODE_LABEL_CONTENT_WIDTH, content: this.labelContentWidth })
|
|
|
+ parameter.push({ code: this.DictCache.TYPE.SPARE_QR_CODE_LABEL_CONTENT_HEIGHT, content: this.labelContentHeight })
|
|
|
+ parameter.push({ code: this.DictCache.TYPE.SPARE_QR_CODE_LABEL_IMG_WIDTH, content: this.imgWidth })
|
|
|
+ updateSysConfigBatch(parameter).then(res => {
|
|
|
+ this.$message.info('更新成功, 退出，重新登录后全局生效')
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style media=print>
|
|
|
+/* 应用这个样式的在打印时隐藏 */
|
|
|
+.noPrint {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+/* 应用这个样式的，从那个标签结束开始另算一页，之后在遇到再起一页，以此类推 */
|
|
|
+.page {
|
|
|
+ page-break-after: always;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+.print-content{
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 1000px;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.container {
|
|
|
+ width: 100%;
|
|
|
+ padding-right: 15px;
|
|
|
+ padding-left: 15px;
|
|
|
+ margin-right: auto;
|
|
|
+ margin-left: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
|
|
|
+ position: relative;
|
|
|
+ min-height: 1px;
|
|
|
+ padding-right: 15px;
|
|
|
+ padding-left: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.text-left {
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+
|
|
|
+.text-right {
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+
|
|
|
+.text-center {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+table.gridtable {
|
|
|
+ width: 100%;
|
|
|
+ font-family: verdana, arial, sans-serif;
|
|
|
+ font-size: 11px;
|
|
|
+ color: #333333;
|
|
|
+ border-width: 1px;
|
|
|
+ border-color: #666666;
|
|
|
+ border-collapse: collapse;
|
|
|
+ page-break-after: always;
|
|
|
+}
|
|
|
+
|
|
|
+table.gridtable th {
|
|
|
+ border-width: 1px;
|
|
|
+ padding: 8px 0px;
|
|
|
+ border-style: solid;
|
|
|
+ border-color: #666666;
|
|
|
+ background-color: #dedede;
|
|
|
+}
|
|
|
+
|
|
|
+table.gridtable td {
|
|
|
+ border-width: 1px;
|
|
|
+ padding: 0;
|
|
|
+ border-style: solid;
|
|
|
+ color: black;
|
|
|
+ font-weight: bold;
|
|
|
+ border-color: #666666;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.row {
|
|
|
+ margin-right: -15px;
|
|
|
+ margin-left: -15px;
|
|
|
+}
|
|
|
+
|
|
|
+.container:before,
|
|
|
+.container:after,
|
|
|
+.row:before, .row:after {
|
|
|
+ display: table;
|
|
|
+ content: " ";
|
|
|
+}
|
|
|
+
|
|
|
+.container:after, .row:after {
|
|
|
+ clear: both;
|
|
|
+}
|
|
|
+
|
|
|
+.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+
|
|
|
+.col-md-12 {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.col-md-11 {
|
|
|
+ width: 91.66666667%;
|
|
|
+}
|
|
|
+
|
|
|
+.col-md-10 {
|
|
|
+ width: 83.33333333%;
|
|
|
+}
|
|
|
+
|
|
|
+.col-md-9 {
|
|
|
+ width: 75%;
|
|
|
+}
|
|
|
+
|
|
|
+.col-md-8 {
|
|
|
+ width: 66.66666667%;
|
|
|
+}
|
|
|
+
|
|
|
+.col-md-7 {
|
|
|
+ width: 58.33333333%;
|
|
|
+}
|
|
|
+
|
|
|
+.col-md-6 {
|
|
|
+ width: 50%;
|
|
|
+}
|
|
|
+
|
|
|
+.col-md-5 {
|
|
|
+ width: 41.66666667%;
|
|
|
+}
|
|
|
+
|
|
|
+.col-md-4 {
|
|
|
+ width: 33.33333333%;
|
|
|
+}
|
|
|
+
|
|
|
+.col-md-3 {
|
|
|
+ width: 25%;
|
|
|
+}
|
|
|
+
|
|
|
+.col-md-2 {
|
|
|
+ width: 16.66666667%;
|
|
|
+}
|
|
|
+
|
|
|
+.col-md-1 {
|
|
|
+ width: 8.33333333%;
|
|
|
+}
|
|
|
+
|
|
|
+ .node-line{
|
|
|
+ position: absolute;
|
|
|
+ width: 60px;
|
|
|
+ height: 10px;
|
|
|
+ left:20%;
|
|
|
+ }
|
|
|
+</style>
|
