Develop/maxcess-synergy-admin
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
maxcess-synergy-admin/src/views/materialReceiptNotice/selectedData.vue

283 lines
12 KiB
Vue
Raw Normal View History

初始化仓库备份
2025-03-21 09:20:29 +08:00
<template>
1
2025-05-22 16:08:45 +08:00
<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>
初次对接
2025-04-11 18:00:39 +08:00
</div>
初次对接
2025-04-08 00:14:08 +08:00
<div class="btnList">
交付
2025-05-12 09:22:57 +08:00
<el-button type="primary" @click="printElement">{{ t('message.index.print') }}</el-button>
初次对接
2025-04-08 00:14:08 +08:00
</div>
</el-dialog>
初始化仓库备份
2025-03-21 09:20:29 +08:00
</template>
<script setup lang="ts">
1
2025-05-22 16:08:45 +08:00
import { reactive, defineExpose, ref } from 'vue';
交付
2025-05-12 09:22:57 +08:00
import { useI18n } from 'vue-i18n';
1
2025-05-22 16:08:45 +08:00
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',
初次对接
2025-04-08 00:14:08 +08:00
},
1
2025-05-22 16:08:45 +08:00
};
const printInitBoxRef = ref();
const { t } = useI18n();
初始化仓库备份
2025-03-21 09:20:29 +08:00
const state = reactive({
1
2025-05-22 16:08:45 +08:00
show: false,
dataList: [],
初始化仓库备份
2025-03-21 09:20:29 +08:00
});
初次对接
2025-04-11 18:00:39 +08:00
const closeFun = () => {
1
2025-05-22 16:08:45 +08:00
state.show = false;
初次对接
2025-04-11 18:00:39 +08:00
};
1
2025-05-22 16:08:45 +08:00
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;
初次对接
2025-04-08 00:14:08 +08:00
};
1
2025-05-22 16:08:45 +08:00
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
版本修改
2025-04-21 15:55:42 +08:00
}
1
2025-05-22 16:08:45 +08:00
}
}
};
pdfMake.createPdf(docDefinition).print();
初次对接
2025-04-11 18:00:39 +08:00
};
1
2025-05-22 16:08:45 +08:00
defineExpose({
closeFun,
showFun,
});
初始化仓库备份
2025-03-21 09:20:29 +08:00
</script>
<style scoped lang="scss">
1
2025-05-22 16:08:45 +08:00
.printInitBox {
.title {
width: 100%;
text-align: center;
font-size: 30px;
letter-spacing: 14px;
font-weight: 500;
padding: 8px 0;
color: black !important;
}
版本修改
2025-04-21 15:55:42 +08:00
1
2025-05-22 16:08:45 +08:00
.mainBox {
width: 100%;
border: 2px solid black;
版本修改
2025-04-21 15:55:42 +08:00
1
2025-05-22 16:08:45 +08:00
.codeBox {
width: 100%;
display: flex;
版本修改
2025-04-21 15:55:42 +08:00
1
2025-05-22 16:08:45 +08:00
.codeBoxItem {
width: calc(100% / 3);
min-height: 200px;
}
版本修改
2025-04-21 15:55:42 +08:00
1
2025-05-22 16:08:45 +08:00
.codeBoxItem:nth-child(2) {
border-left: 2px solid black;
border-right: 2px solid black;
}
}
}
版本修改
2025-04-21 15:55:42 +08:00
}
1
2025-05-22 16:08:45 +08:00
.btnList {
margin-top: 26px;
display: flex;
justify-content: center;
版本修改
2025-04-21 15:55:42 +08:00
}
初次对接
2025-04-08 00:14:08 +08:00
</style>
Reference in New Issue Copy Permalink