打印界面修复
liu
parent
71c814905b
commit
3b266595ae
|
|
@ -1,88 +1,76 @@
|
|||
<template>
|
||||
<div>
|
||||
<button v-print>打印整个页面</button>
|
||||
<button v-print="'#printMe'">打印局部内容</button>
|
||||
<button @click="getPointListData">预览</button>
|
||||
<div class="container" >
|
||||
<!-- 标签容器 - 使用flex布局实现每行两个 -->
|
||||
<div id="printMe" v-for="(group, groupIndex) in groups" :key="groupIndex" class="group-container">
|
||||
<div
|
||||
v-for="(location, indexInGroup) in group"
|
||||
:key="groupIndex * 3 + indexInGroup"
|
||||
class="label-item"
|
||||
>
|
||||
<table class="label-table">
|
||||
<tr>
|
||||
<td class="td-item" style="width:45mm" colspan="3">纳所/品番</td>
|
||||
<td class="td-item-value" colspan="9">{{ location.productCode }}</td>
|
||||
<td class="td-item" colspan="3">箱种</td>
|
||||
<td class="td-item-value" colspan="2">{{ location.boxType }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-item" colspan="3">品名</td>
|
||||
<td class="td-item-value" colspan="9">{{ location.productCode }}</td>
|
||||
<td class="td-item" colspan="3">收容数</td>
|
||||
<td class="td-item"colspan="2">{{ location.boxType }}</td>
|
||||
</tr>
|
||||
<tr style="height: 13mm">
|
||||
<td class="td-item" colspan="3">材库</td>
|
||||
<td class="td-item-value" colspan="4">{{ location.productCode }}</td>
|
||||
<td class="td-item" colspan="2">制库</td>
|
||||
<td class="td-item-value" colspan="4">{{ location.boxType }}</td>
|
||||
<td class="td-item" colspan="2">税别</td>
|
||||
<td class="td-item-value" colspan="2">{{ location.bonded }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-item" colspan="3">供应商</td>
|
||||
<td class="td-item-value" colspan="14">{{ location.productCode }}</td>
|
||||
<div style="background: #ffffff">
|
||||
<div class="button-container">
|
||||
<el-button v-print="'#printMe'" type="primary">打印</el-button>
|
||||
<el-button @click="yulandayin" type="primary">打印预览</el-button>
|
||||
</div>
|
||||
<div id="printMe" v-for="(kw3,groupIndex) in kwfenzu" :key="groupIndex" class="group-container">
|
||||
<div
|
||||
v-for="k2 in kw3"
|
||||
class="label-item" >
|
||||
<table class="label-table">
|
||||
<tr>
|
||||
<td class="td-item" style="width:45mm" colspan="3">纳所/品番</td>
|
||||
<td class="td-item-value" colspan="9">{{ k2.ns }}</td>
|
||||
<td class="td-item" colspan="3">箱种</td>
|
||||
<td class="td-item-value" colspan="2">{{ k2.xz }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-item" colspan="3">品名</td>
|
||||
<td class="td-item-value" colspan="9">{{ k2.pm }}</td>
|
||||
<td class="td-item" colspan="3">收容数</td>
|
||||
<td class="td-item-value" colspan="2">{{ k2.srs }}</td>
|
||||
</tr>
|
||||
<tr style="height: 13mm">
|
||||
<td class="td-item" colspan="3">材库</td>
|
||||
<td class="td-item-value" colspan="4">{{ k2.hw }}</td>
|
||||
<td class="td-item" colspan="2">制库</td>
|
||||
<td class="td-item-value" colspan="4">{{ k2.hw }}</td>
|
||||
<td class="td-item" colspan="2">税别</td>
|
||||
<td class="td-item-value" colspan="2">{{ k2.bonded }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-item" colspan="3">供应商</td>
|
||||
<td class="td-item-value" colspan="14">{{ k2.supplier }}</td>
|
||||
|
||||
</tr>
|
||||
<tr style="height: 13mm">
|
||||
<td class="td-item" colspan="3">适用机型</td>
|
||||
<td class="td-item" style="width:45mm" colspan="2">{{ location.applicableModels[0] }}</td>
|
||||
<td class="td-item" style="width:45mm" colspan="2">{{ location.applicableModels[1] }}</td>
|
||||
<td class="td-item" style="width:45mm" colspan="2">{{ location.applicableModels[2] }}</td>
|
||||
<td class="td-item" style="width:45mm" colspan="2">{{ location.applicableModels[3] }}</td>
|
||||
<td class="td-item" style="width:45mm" colspan="2">{{ location.applicableModels[4] }}</td>
|
||||
<td class="td-item" colspan="4" rowspan="2" style="width: 40mm;height: 20mm;">
|
||||
<vue-qrcode
|
||||
:value="getQrContent(location)"
|
||||
:options="qrOptions"
|
||||
tag="img"
|
||||
class="qr-code"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 13mm">
|
||||
<td class="td-item" colspan="3">使用数量</td>
|
||||
<td class="td-item" colspan="2">{{ location.usageQuantities[0] }}</td>
|
||||
<td class="td-item" colspan="2">{{ location.usageQuantities[1] }}</td>
|
||||
<td class="td-item" colspan="2">{{ location.usageQuantities[2] }}</td>
|
||||
<td class="td-item" colspan="2">{{ location.usageQuantities[3] }}</td>
|
||||
<td class="td-item" colspan="2">{{ location.usageQuantities[4] }}</td>
|
||||
</tr>
|
||||
<tr style="height: 13mm">
|
||||
<td class="td-item" colspan="3">适用机型</td>
|
||||
<td class="td-item" style="width:45mm" colspan="2">{{ k2.jxs[0] }}</td>
|
||||
<td class="td-item" style="width:45mm" colspan="2">{{ k2.jxs[1] }}</td>
|
||||
<td class="td-item" style="width:45mm" colspan="2">{{ k2.jxs[2] }}</td>
|
||||
<td class="td-item" style="width:45mm" colspan="2">{{ k2.jxs[3] }}</td>
|
||||
<td class="td-item" style="width:45mm" colspan="2">{{ k2.jxs[4] }}</td>
|
||||
<td class="td-item" colspan="4" rowspan="2" style="width: 40mm;height: 20mm;">
|
||||
<vue-qrcode
|
||||
:value="getQrContent(k2)"
|
||||
:options="qrOptions"
|
||||
tag="img"
|
||||
class="qr-code"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 13mm">
|
||||
<td class="td-item" colspan="3">使用数量</td>
|
||||
<td class="td-item" colspan="2">{{ k2.tyls[0] }}</td>
|
||||
<td class="td-item" colspan="2">{{ k2.tyls[1] }}</td>
|
||||
<td class="td-item" colspan="2">{{ k2.tyls[2] }}</td>
|
||||
<td class="td-item" colspan="2">{{ k2.tyls[3] }}</td>
|
||||
<td class="td-item" colspan="2">{{ k2.tyls[4] }}</td>
|
||||
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { vPrint } from 'vue-print-next';
|
||||
import { VuePrintNext } from 'vue-print-next';
|
||||
import DonMessage from "@/utils/message";
|
||||
import pagination from "@crud/Pagination.vue";
|
||||
import crudOperation from "@crud/CRUD.operation.vue";
|
||||
import rrOperation from "@crud/RR.operation.vue";
|
||||
import udOperation from "@crud/UD.operation.vue";
|
||||
import CRUD, {crud, form, header, presenter} from "@crud/crud";
|
||||
import crudStock from "@/api/stock";
|
||||
import {getToken} from "@/utils/auth";
|
||||
import {getStockTypes} from "@/api/stockType";
|
||||
import {bomPrintBiaoQianList} from "@/api/bomAccount";
|
||||
import {getAres} from "@/api/area";
|
||||
|
||||
import VueQrcode from '@chenfengyuan/vue-qrcode';
|
||||
|
||||
|
|
@ -100,6 +88,8 @@ export default {
|
|||
|
||||
data() {
|
||||
return {
|
||||
kkkk2: [],
|
||||
kwfenzu: [],
|
||||
qrOptions: {
|
||||
width: 60, // 二维码宽度
|
||||
margin: 0, // 边距
|
||||
|
|
@ -107,8 +97,8 @@ export default {
|
|||
},
|
||||
qrSize: 120, // 二维码尺寸
|
||||
// 示例数据 - 实际应用中可从API获取
|
||||
locations: [ ],
|
||||
groups:[]
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -123,24 +113,24 @@ export default {
|
|||
// return location.boxType;
|
||||
},
|
||||
//获取点位表的数据
|
||||
getPointListData(){
|
||||
yulandayin(){
|
||||
new VuePrintNext({
|
||||
el: '#printMe', /* 其他参数 */
|
||||
popTitle: '打印拣货单',
|
||||
preview: true,// 启用打印预览
|
||||
paperSize: 'A5'
|
||||
paperSize: 'A4'
|
||||
});
|
||||
},
|
||||
getPrintList(){
|
||||
getPrintList(){
|
||||
bomPrintBiaoQianList().then(res => {
|
||||
console.log(res)
|
||||
this.kkkk2=res;
|
||||
|
||||
this.locations = res;
|
||||
this.groups=[]
|
||||
for (let i = 0; i < this.locations.length; i += 3) {
|
||||
this.groups.push(this.locations.slice(i, i + 3));
|
||||
this.kwfenzu=[]
|
||||
for (let i = 0; i < this.kkkk2.length; i += 3) {
|
||||
this.kwfenzu.push(this.kkkk2.slice(i, i + 3));
|
||||
}
|
||||
console.log(this.groups)
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -161,6 +151,11 @@ body {
|
|||
padding: 20px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.button-container {
|
||||
padding-top: 20px;
|
||||
display: flex;
|
||||
justify-content: center; /* 水平居中 */
|
||||
}
|
||||
.group-container{
|
||||
padding-top: 10mm;
|
||||
box-shadow: none;margin-bottom:0;padding: 0;border-radius: 0;
|
||||
|
|
@ -171,7 +166,7 @@ body {
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
background: #C03639;
|
||||
background: #ffffff;
|
||||
justify-content: center;
|
||||
}
|
||||
.td-item{
|
||||
|
|
|
|||
Loading…
Reference in New Issue