|
|
@@ -11,10 +11,21 @@
|
|
|
</a-row>
|
|
|
<a-row>
|
|
|
<a-col :span="4">
|
|
|
- 标签纸宽度(黑色背景)
|
|
|
+ 每行列数
|
|
|
</a-col>
|
|
|
<a-col :span="12">
|
|
|
- <a-slider v-model="labelWidth" :min="1" :max="1000" />
|
|
|
+ <a-slider v-model="columnsPerRow" :min="1" :max="6" :marks="{1:'1',2:'2',3:'3',4:'4',5:'5',6:'6'}" />
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="2">
|
|
|
+ <a-input-number v-model="columnsPerRow" :min="1" :max="6" style="marginLeft: 8px" />
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="4">
|
|
|
+ 页面总宽度
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-slider v-model="labelWidth" :min="200" :max="1000" />
|
|
|
</a-col>
|
|
|
<a-col :span="2">
|
|
|
<a-input-number v-model="labelWidth" style="marginLeft: 8px" />
|
|
|
@@ -25,7 +36,7 @@
|
|
|
标签表格宽度
|
|
|
</a-col>
|
|
|
<a-col :span="12">
|
|
|
- <a-slider v-model="labelContentWidth" :min="1" :max="1000" />
|
|
|
+ <a-slider v-model="labelContentWidth" :min="80" :max="500" />
|
|
|
</a-col>
|
|
|
<a-col :span="2">
|
|
|
<a-input-number v-model="labelContentWidth" suffix="px" style="marginLeft: 8px" />
|
|
|
@@ -36,7 +47,7 @@
|
|
|
标签表格高度
|
|
|
</a-col>
|
|
|
<a-col :span="12">
|
|
|
- <a-slider v-model="labelContentHeight" :min="1" :max="1000" />
|
|
|
+ <a-slider v-model="labelContentHeight" :min="40" :max="300" />
|
|
|
</a-col>
|
|
|
<a-col :span="2">
|
|
|
<a-input-number v-model="labelContentHeight" suffix="px" style="marginLeft: 8px" />
|
|
|
@@ -47,34 +58,36 @@
|
|
|
二维码宽度
|
|
|
</a-col>
|
|
|
<a-col :span="12">
|
|
|
- <a-slider v-model="imgWidth" :min="1" :max="1000" />
|
|
|
+ <a-slider v-model="imgWidth" :min="20" :max="200" />
|
|
|
</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">{{ BaseTool.Object.getField(levelMap,record.level) }}</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td class="text-center" width='17%'>维护人</td>
|
|
|
- <td class="text-center">{{ record.repairUserName }}</td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
+ <div :style="labelWidthProgress" id="print-container-batch">
|
|
|
+ <div class="label-cell" v-for="record in sbInfoList" :key="record.id">
|
|
|
+ <table class="gridtable list" :style="labelContentWidthProgress" :id="'printDiv' + 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">{{ BaseTool.Object.getField(levelMap,record.level) }}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="text-center" width='17%'>维护人</td>
|
|
|
+ <td class="text-center">{{ record.repairUserName }}</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -94,35 +107,38 @@ export default {
|
|
|
count: 0,
|
|
|
levelMap: {},
|
|
|
user: this.$store.getters.userInfo,
|
|
|
- labelWidth: 200,
|
|
|
- labelContentWidth: 100,
|
|
|
- labelContentHeight: 100,
|
|
|
- imgWidth: 50,
|
|
|
+ columnsPerRow: 2,
|
|
|
+ labelWidth: 750,
|
|
|
+ labelContentWidth: 340,
|
|
|
+ labelContentHeight: 120,
|
|
|
+ imgWidth: 80,
|
|
|
configMap: {}
|
|
|
// 下拉框map
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
labelWidthProgress () {
|
|
|
- const style = {}
|
|
|
- style.width = this.labelWidth + 'px'
|
|
|
- style.backgroundColor = 'black'
|
|
|
- style.textAlign = 'center'
|
|
|
- return style
|
|
|
+ return {
|
|
|
+ width: this.labelWidth + 'px',
|
|
|
+ display: 'grid',
|
|
|
+ gridTemplateColumns: `repeat(${this.columnsPerRow}, 1fr)`,
|
|
|
+ gap: '6px',
|
|
|
+ padding: '6px',
|
|
|
+ backgroundColor: '#f0f0f0'
|
|
|
+ }
|
|
|
},
|
|
|
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
|
|
|
+ return {
|
|
|
+ width: '100%',
|
|
|
+ height: this.labelContentHeight + 'px',
|
|
|
+ backgroundColor: 'white',
|
|
|
+ textAlign: 'center'
|
|
|
+ }
|
|
|
},
|
|
|
imageProgress () {
|
|
|
- const style = {}
|
|
|
- style.width = this.imgWidth + 'px'
|
|
|
- return style
|
|
|
+ return {
|
|
|
+ width: this.imgWidth + 'px'
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
props: {},
|
|
|
@@ -132,10 +148,18 @@ export default {
|
|
|
this.levelMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SBINFO_LEVEL)
|
|
|
configData().then(res => {
|
|
|
this.configMap = res.data['config:open:value']
|
|
|
- this.labelWidth = parseInt(this.configMap[this.DictCache.TYPE.SB_QR_CODE_LABEL_WIDTH])
|
|
|
- this.labelContentWidth = parseInt(this.configMap[this.DictCache.TYPE.SB_QR_CODE_LABEL_CONTENT_WIDTH])
|
|
|
- this.labelContentHeight = parseInt(this.configMap[this.DictCache.TYPE.SB_QR_CODE_LABEL_CONTENT_HEIGHT])
|
|
|
- this.imgWidth = parseInt(this.configMap[this.DictCache.TYPE.SB_QR_CODE_LABEL_IMG_WIDTH])
|
|
|
+ const savedWidth = parseInt(this.configMap[this.DictCache.TYPE.SB_QR_CODE_LABEL_WIDTH])
|
|
|
+ const savedContentWidth = parseInt(this.configMap[this.DictCache.TYPE.SB_QR_CODE_LABEL_CONTENT_WIDTH])
|
|
|
+ const savedContentHeight = parseInt(this.configMap[this.DictCache.TYPE.SB_QR_CODE_LABEL_CONTENT_HEIGHT])
|
|
|
+ const savedImgWidth = parseInt(this.configMap[this.DictCache.TYPE.SB_QR_CODE_LABEL_IMG_WIDTH])
|
|
|
+ if (savedWidth) this.labelWidth = savedWidth
|
|
|
+ if (savedContentWidth) this.labelContentWidth = savedContentWidth
|
|
|
+ if (savedContentHeight) this.labelContentHeight = savedContentHeight
|
|
|
+ if (savedImgWidth) this.imgWidth = savedImgWidth
|
|
|
+ // 尝试读取列数配置,如果没有则保持默认
|
|
|
+ if (this.configMap['SB_QR_CODE_LABEL_COLUMNS']) {
|
|
|
+ this.columnsPerRow = parseInt(this.configMap['SB_QR_CODE_LABEL_COLUMNS']) || 2
|
|
|
+ }
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -164,6 +188,7 @@ export default {
|
|
|
parameter.push({ code: this.DictCache.TYPE.SB_QR_CODE_LABEL_CONTENT_WIDTH, content: this.labelContentWidth })
|
|
|
parameter.push({ code: this.DictCache.TYPE.SB_QR_CODE_LABEL_CONTENT_HEIGHT, content: this.labelContentHeight })
|
|
|
parameter.push({ code: this.DictCache.TYPE.SB_QR_CODE_LABEL_IMG_WIDTH, content: this.imgWidth })
|
|
|
+ parameter.push({ code: 'SB_QR_CODE_LABEL_COLUMNS', content: this.columnsPerRow })
|
|
|
updateSysConfigBatch(parameter).then(res => {
|
|
|
this.$message.info('更新成功, 退出,重新登录后全局生效')
|
|
|
})
|
|
|
@@ -172,60 +197,26 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-<style media=print>
|
|
|
-/* 应用这个样式的在打印时隐藏 */
|
|
|
-.noPrint {
|
|
|
- display: none;
|
|
|
-}
|
|
|
-
|
|
|
-/* 应用这个样式的,从那个标签结束开始另算一页,之后在遇到再起一页,以此类推 */
|
|
|
-.page {
|
|
|
- page-break-after: always;
|
|
|
-}
|
|
|
-</style>
|
|
|
-<style>
|
|
|
-.print-content{
|
|
|
+<style scoped>
|
|
|
+/* 页面正常显示时的样式 */
|
|
|
+.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;
|
|
|
+.label-cell {
|
|
|
+ break-inside: avoid;
|
|
|
+ page-break-inside: avoid;
|
|
|
}
|
|
|
|
|
|
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 {
|
|
|
@@ -238,7 +229,7 @@ table.gridtable th {
|
|
|
|
|
|
table.gridtable td {
|
|
|
border-width: 1px;
|
|
|
- padding: 0;
|
|
|
+ padding: 2px 4px;
|
|
|
border-style: solid;
|
|
|
color: black;
|
|
|
font-weight: bold;
|
|
|
@@ -246,78 +237,59 @@ table.gridtable td {
|
|
|
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%;
|
|
|
+.text-center {
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
+</style>
|
|
|
|
|
|
-.col-md-8 {
|
|
|
- width: 66.66666667%;
|
|
|
+<style media="print">
|
|
|
+/* 打印时隐藏非打印区域 */
|
|
|
+.noPrint {
|
|
|
+ display: none !important;
|
|
|
}
|
|
|
|
|
|
-.col-md-7 {
|
|
|
- width: 58.33333333%;
|
|
|
+@page {
|
|
|
+ size: A4 portrait;
|
|
|
+ margin: 5mm;
|
|
|
}
|
|
|
|
|
|
-.col-md-6 {
|
|
|
- width: 50%;
|
|
|
+.print-content {
|
|
|
+ width: auto !important;
|
|
|
+ margin: 0 !important;
|
|
|
}
|
|
|
|
|
|
-.col-md-5 {
|
|
|
- width: 41.66666667%;
|
|
|
+/* 打印时隐藏滑块配置区域 */
|
|
|
+.print-content .ant-row {
|
|
|
+ display: none !important;
|
|
|
}
|
|
|
|
|
|
-.col-md-4 {
|
|
|
- width: 33.33333333%;
|
|
|
+#print-container-batch {
|
|
|
+ background: white !important;
|
|
|
+ padding: 0 !important;
|
|
|
+ gap: 4px !important;
|
|
|
}
|
|
|
|
|
|
-.col-md-3 {
|
|
|
- width: 25%;
|
|
|
+.label-cell {
|
|
|
+ break-inside: avoid !important;
|
|
|
+ page-break-inside: avoid !important;
|
|
|
}
|
|
|
|
|
|
-.col-md-2 {
|
|
|
- width: 16.66666667%;
|
|
|
+table.gridtable {
|
|
|
+ font-family: verdana, arial, sans-serif;
|
|
|
+ font-size: 11px;
|
|
|
+ color: #333333;
|
|
|
+ border-width: 1px;
|
|
|
+ border-color: #666666;
|
|
|
+ border-collapse: collapse;
|
|
|
}
|
|
|
|
|
|
-.col-md-1 {
|
|
|
- width: 8.33333333%;
|
|
|
+table.gridtable td {
|
|
|
+ border-width: 1px;
|
|
|
+ padding: 2px 4px;
|
|
|
+ border-style: solid;
|
|
|
+ color: black;
|
|
|
+ font-weight: bold;
|
|
|
+ border-color: #666666;
|
|
|
+ background-color: #ffffff !important;
|
|
|
}
|
|
|
-
|
|
|
- .node-line{
|
|
|
- position: absolute;
|
|
|
- width: 60px;
|
|
|
- height: 10px;
|
|
|
- left:20%;
|
|
|
- }
|
|
|
</style>
|