huojin
/
kcw-wx-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

打印界面修复

main
liu 2025-08-12 11:32:49 +08:00
parent 71c814905b
commit 3b266595ae
1 changed files with 79 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
src/views/base-data/point/print_kw.vue
View File

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