283 lines
12 KiB
Vue
283 lines
12 KiB
Vue
<template>
|
||
<el-dialog :model-value="state.show" @close="closeFun" width="90%">
|
||
<div class="printInitBox" ref="printInitBoxRef">
|
||
<div v-for="(itemMain,indexMain) of state.dataList" :key="indexMain">
|
||
<div
|
||
class="title"
|
||
style="width: 100%; text-align: center; font-size: 30px; letter-spacing: 14px; font-weight: 500; padding: 8px 0; color: black !important"
|
||
>
|
||
{{ t('message.index.deliveryNote1') }}
|
||
</div>
|
||
<table
|
||
style="width: 100%; border-collapse: collapse; border-right: 2px solid black; border-top: 2px solid black; border-left: 2px solid black"
|
||
>
|
||
<tbody style="border-collapse: collapse">
|
||
<tr style="border-collapse: collapse; border-bottom: 2px solid black">
|
||
<td style="text-align: center; vertical-align: middle" colspan="10">
|
||
<div>{{ t('message.index.deliveryNoteNumber1') }}</div>
|
||
<VueQr style="width: 130px; height: 130px" :text="itemMain[0].fBillNo" :size="130" />
|
||
</td>
|
||
<td
|
||
colspan="12"
|
||
style="min-height: 200px; text-align: center; vertical-align: middle; border-left: 2px solid black; border-right: 2px solid black"
|
||
>
|
||
<div style="text-align: left; padding: 16px">
|
||
<div style="font-size: 16px; margin-bottom: 8px; color: #000000">
|
||
<span class="span1">{{ t('message.index.deliveryNoteNumber') }}：</span>
|
||
<span class="span2">{{ itemMain[0].fBillNo }}</span>
|
||
</div>
|
||
<div style="font-size: 16px; margin-bottom: 8px; color: #000000">
|
||
<span class="span1">{{ t('message.index.supplierName') }}：</span>
|
||
<span class="span2">{{ itemMain[0].supplierName }}</span>
|
||
</div>
|
||
<div style="font-size: 16px; margin-bottom: 8px; color: #000000">
|
||
<span class="span1">{{ t('message.index.khmc') }}：</span>
|
||
<span class="span2">{{ itemMain[0].fPurchaseOrgName }}</span>
|
||
</div>
|
||
<div style="font-size: 16px; margin-bottom: 8px; color: #000000">
|
||
<span class="span1">{{ t('message.index.deliveryDate') }}：</span>
|
||
<span class="span2">{{ itemMain[0].deliveryDate }}</span>
|
||
</div>
|
||
<div style="font-size: 16px; margin-bottom: 8px; color: #000000">
|
||
<span class="span1">{{ t('message.index.invoiceNumber') }}：</span>
|
||
<span class="span2">{{ itemMain[0].f_VHUB_Text }}</span>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td style="text-align: center; vertical-align: middle" colspan="10">
|
||
<div>{{ t('message.index.invoiceNumber1') }}</div>
|
||
<VueQr style="width: 130px; height: 130px" :text="itemMain[0].f_VHUB_Text" :size="130" />
|
||
</td>
|
||
</tr>
|
||
<tr style="border-collapse: collapse; border-bottom: 2px solid black">
|
||
<td style="text-align: center; font-size: 18px; padding: 4px; color: black" colspan="2">#</td>
|
||
<td style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="5">
|
||
{{ t('message.index.PO') }}
|
||
</td>
|
||
<td style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="5">
|
||
{{ t('message.index.partNumber') }}
|
||
</td>
|
||
<td style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="5">
|
||
{{ t('message.index.materialName') }}
|
||
</td>
|
||
<td style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="2">
|
||
{{ t('message.index.unit1') }}
|
||
</td>
|
||
<td style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="3">
|
||
{{ t('message.index.deliveryQTY') }}
|
||
</td>
|
||
<td style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="4">
|
||
{{ t('message.index.maxcessLot') }}
|
||
</td>
|
||
<td style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="6">
|
||
{{ t('message.index.supplierLot') }}
|
||
</td>
|
||
</tr>
|
||
<tr style="border-collapse: collapse; border-bottom: 2px solid black" v-for="(item, index) of itemMain" :key="index">
|
||
<td style="text-align: center; font-size: 18px; padding: 4px; color: black; width: 3%" colspan="2">
|
||
{{ index + 1 }}
|
||
</td>
|
||
<td width="3%" style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="5">
|
||
{{ item.purchaseOrderFBillNo }}
|
||
</td>
|
||
<td style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="5">
|
||
{{ item.materialCode }}
|
||
</td>
|
||
<td style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="5">
|
||
{{ item.materialName }}
|
||
</td>
|
||
<td style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="2">
|
||
{{ item.unitName }}
|
||
</td>
|
||
<td style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="3">
|
||
{{ item.qty }}
|
||
</td>
|
||
<td style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="4">
|
||
{{ item.mssSupplierLot }}
|
||
</td>
|
||
<td style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="6">
|
||
{{ item.fSupplierLot }}
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<table style="width: 100%; border-collapse: collapse; margin-top: 18px; border: none">
|
||
<tbody style="width: 100%; border: none">
|
||
<tr style="font-size: 18px; color: black; width: 100%; border: none">
|
||
<td style="font-size: 18px; width: 10%; color: black; border: none">{{ t('message.index.shipper') }}：</td>
|
||
<td style="font-size: 18px; width: 10%; color: black; border: none"></td>
|
||
<td style="font-size: 18px; width: 10%; color: black; border: none"></td>
|
||
<td style="font-size: 18px; width: 10%; color: black; border: none"></td>
|
||
<td style="font-size: 18px; width: 10%; color: black; border: none"></td>
|
||
<td style="font-size: 18px; width: 10%; color: black; border: none"></td>
|
||
<td style="font-size: 18px; width: 10%; color: black; border: none"></td>
|
||
<td style="font-size: 18px; width: 10%; color: black; border: none"></td>
|
||
<td style="font-size: 18px; width: 10%; color: black; border: none">{{ t('message.index.receiver') }}：</td>
|
||
<td style="font-size: 18px; color: black; width: 8.3%; border: none"></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<table style="width: 100%; border-collapse: collapse; margin-top: 8px; border: none">
|
||
<tbody style="width: 100%; border: none">
|
||
<tr style="width: 100%; border: none">
|
||
<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none">
|
||
{{ t('message.index.year') }}
|
||
</td>
|
||
<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none">
|
||
{{ t('message.index.month') }}
|
||
</td>
|
||
<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none">
|
||
{{ t('message.index.day') }}
|
||
</td>
|
||
<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none"></td>
|
||
<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none"></td>
|
||
<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none"></td>
|
||
<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none"></td>
|
||
<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none"></td>
|
||
<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none"></td>
|
||
<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none"></td>
|
||
<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none"></td>
|
||
<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none"></td>
|
||
<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none">
|
||
{{ t('message.index.year') }}
|
||
</td>
|
||
<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none">
|
||
{{ t('message.index.month') }}
|
||
</td>
|
||
<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none">
|
||
{{ t('message.index.day') }}
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="btnList">
|
||
<el-button type="primary" @click="printElement">{{ t('message.index.print') }}</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { reactive, defineExpose, ref } from 'vue';
|
||
import { useI18n } from 'vue-i18n';
|
||
import VueQr from 'vue-qr/src/packages/vue-qr.vue';
|
||
import pdfMake from 'pdfmake/build/pdfmake';
|
||
import pdfFonts from 'pdfmake/build/vfs_fonts';
|
||
import htmlToPdfmake from 'html-to-pdfmake';
|
||
|
||
pdfMake.vfs = pdfFonts.vfs;
|
||
pdfMake.fonts = {
|
||
AlibabaPuHuiTi: {
|
||
normal: import.meta.env.import.meta.env.VITE_API_URL + '/SimHei.ttf',
|
||
bold: import.meta.env.import.meta.env.VITE_API_URL + '/SimHei.ttf',
|
||
italics: import.meta.env.import.meta.env.VITE_API_URL + '/SimHei.ttf',
|
||
bolditalics: import.meta.env.import.meta.env.VITE_API_URL + '/SimHei.ttf',
|
||
},
|
||
};
|
||
const printInitBoxRef = ref();
|
||
const { t } = useI18n();
|
||
const state = reactive({
|
||
show: false,
|
||
dataList: [],
|
||
});
|
||
const closeFun = () => {
|
||
state.show = false;
|
||
};
|
||
const splitArrayInto10Parts = (arr:any) => {
|
||
let result:any = [];
|
||
let resultMin:any = []
|
||
if(arr.length > 10){
|
||
arr.forEach((item:any) => {
|
||
resultMin.push(item)
|
||
if(resultMin.length === 10){
|
||
result.push(resultMin)
|
||
resultMin = []
|
||
}
|
||
})
|
||
} else {
|
||
result.push(arr)
|
||
}
|
||
return result;
|
||
}
|
||
const showFun = (list: any) => {
|
||
state.dataList = splitArrayInto10Parts(list);
|
||
state.show = true;
|
||
};
|
||
const printElement = () => {
|
||
const html = printInitBoxRef.value.innerHTML;
|
||
const options = {
|
||
tableAutoSize: true,
|
||
defaultStyles: {
|
||
title: { fontSize: 14 },
|
||
},
|
||
};
|
||
const content = htmlToPdfmake(html, options);
|
||
var i = 0
|
||
const docDefinition = {
|
||
content: content,
|
||
pageSize: 'A4', // 明确指定纸张类型
|
||
pageOrientation: 'landscape', // 设置为横向
|
||
pageMargins: [40, 10, 40, 40], // 调整页边距[左, 上, 右, 下]
|
||
footer: function (currentPage: any, pageCount: any) {
|
||
return { text: `${pageCount}-${currentPage}`, alignment: 'center' };
|
||
},
|
||
defaultStyle: {
|
||
font: 'AlibabaPuHuiTi',
|
||
},
|
||
pageBreakBefore: (node:any) =>{
|
||
if(node.style && node.style.indexOf('title') !== -1 ){
|
||
i++
|
||
console.log(i)
|
||
if(i > 1){
|
||
return true
|
||
}
|
||
}
|
||
}
|
||
};
|
||
pdfMake.createPdf(docDefinition).print();
|
||
};
|
||
defineExpose({
|
||
closeFun,
|
||
showFun,
|
||
});
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.printInitBox {
|
||
.title {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 30px;
|
||
letter-spacing: 14px;
|
||
font-weight: 500;
|
||
padding: 8px 0;
|
||
color: black !important;
|
||
}
|
||
|
||
.mainBox {
|
||
width: 100%;
|
||
border: 2px solid black;
|
||
|
||
.codeBox {
|
||
width: 100%;
|
||
display: flex;
|
||
|
||
.codeBoxItem {
|
||
width: calc(100% / 3);
|
||
min-height: 200px;
|
||
}
|
||
|
||
.codeBoxItem:nth-child(2) {
|
||
border-left: 2px solid black;
|
||
border-right: 2px solid black;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.btnList {
|
||
margin-top: 26px;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
</style>
|