Develop/maxcess-synergy-admin
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

版本修改

Browse Source
This commit is contained in:
刘晓鹏
2025-04-21 15:55:42 +08:00
parent dcfd44da94
commit 54f1af048d
16 changed files with 300 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/views/materialReceiptNotice/barCode.vue
View File

@@ -15,16 +15,16 @@
</div>
</div>
</div>
<div class="btnList">
<el-button type="primary" @click="handlePrint">打印</el-button>
</div>
</el-dialog>
</template>
<script setup lang="ts">
import { defineProps, reactive, ref, nextTick, defineEmits } from 'vue';
import { defineProps, reactive, ref, defineEmits } from 'vue';
import VueQr from 'vue-qr/src/packages/vue-qr.vue';
import printJS from 'print-js';
import html2canvas from "html2canvas";
const typefaceBoxRef = ref();
const emits = defineEmits(['close']);
const props = defineProps({
@@ -42,17 +42,23 @@ const props = defineProps({
const state = reactive({
snapshotUrl: '',
});
const handlePrint = () => {
const handlePrint = async () => {
const canvas = await html2canvas(typefaceBoxRef.value, {
allowTaint: true, // 允许跨域图片
useCORS: true, // 使用 CORS 加载图片
scale: 2, // 提高截图分辨率
width: typefaceBoxRef.value.clientWidth,
height: typefaceBoxRef.value.clientHeight,
});
state.snapshotUrl = canvas.toDataURL('image/png');
// 获取打印模板的DOM元素
const printElement = document.getElementById('printTemplate');
if (printElement) {
printJS({
printable: printElement,
type: 'html',
targetStyles: ['*'],
printable: state.snapshotUrl,
type: 'image',
style: `
@page { size: 100mm 52mm landscapes; margin: 0; }
@page { size: 100mm 50mm landscapes; margin: 0; }
`,
});
}

44
src/views/materialReceiptNotice/ceshi.vue
View File

@@ -2,18 +2,24 @@
<div class="orderPrinting" ref="orderPrintingRef">
<div class="title">{{ t('message.index.deliveryNote1') }}</div>
<div class="orderPrintingTop">
<div class="item item1">
<VueQr style="width: 150px; height: 150px" :text="state.pageData.fBillNo" :size="150"></VueQr>
<div class="item item1" style="">
<div>{{ t('message.index.deliveryNoteNumber1') }}</div>
<VueQr style="width: 130px; height: 130px" :text="state.pageData.fBillNo" :size="130"></VueQr>
</div>
<div class="item item2">
<div class="dataText">
<span class="span1">{{ t('message.index.deliveryNoteNumber') }}：</span>
<span class="span2">{{ state.pageData.fBillNo }}</span>
</div>
<div class="dataText">
<span class="span1">客户：</span>
<span class="span2">{{ state.pageData.fBillNo }}</span>
</div>
<div class="dataText">
<span class="span1">{{ t('message.index.supplierName') }}：</span>
<span class="span2">{{ state.pageData.supplierName }}</span>
</div>
<div class="dataText">
<span class="span1">{{ t('message.index.deliveryDate') }}：</span>
<span class="span2">{{ state.pageData.deliveryDate }}</span>
@@ -24,17 +30,28 @@
</div>
</div>
<div class="item item3">
<VueQr style="width: 150px; height: 150px" :text="state.pageData.f_VHUB_Text" :size="150"></VueQr>
<div>{{ t('message.index.invoiceNumber1') }}</div>
<VueQr style="width: 130px; height: 130px" :text="state.pageData.f_VHUB_Text" :size="130"></VueQr>
</div>
</div>
<avue-crud ref="crudRef" :data="props.data" :option="state.option"></avue-crud>
<div class="shuming">
<div class="nameText">{{ t('message.index.shipper') }}：</div>
<div class="dateTime">
<span>{{ t('message.index.year') }}</span>
<span>{{ t('message.index.month') }}</span>
<span>{{ t('message.index.day') }}</span>
</div>
<div>
<div class="nameText">{{ t('message.index.shipper') }}：</div>
<div class="dateTime">
<span>{{ t('message.index.year') }}</span>
<span>{{ t('message.index.month') }}</span>
<span>{{ t('message.index.day') }}</span>
</div>
</div>
<div>
<div class="nameText">{{ t('message.index.receiver') }}：</div>
<div class="dateTime">
<span>{{ t('message.index.year') }}</span>
<span>{{ t('message.index.month') }}</span>
<span>{{ t('message.index.day') }}</span>
</div>
</div>
</div>
</div>
</template>
@@ -104,9 +121,14 @@ defineExpose({
</script>
<style scoped lang="scss">
:deep(.el-form){
border-right: 0 !important;
}
.shuming {
width: 100%;
text-align: right;
display: flex;
justify-content: space-between;
//text-align: left;
}
.nameText {
margin-right: 120px;
@@ -186,7 +208,7 @@ defineExpose({
.dataText {
font-size: 16px;
margin-bottom: 16px;
margin-bottom: 8px;
color: #000000;
}
}

11
src/views/materialReceiptNotice/componentPrinting.vue Normal file
View File

@@ -0,0 +1,11 @@
<script setup lang="ts">
</script>
<template>
</template>
<style scoped lang="scss">
</style>

54
src/views/materialReceiptNotice/index.vue
View File

@@ -15,6 +15,7 @@
</div>
</template>
<template #deliveryDate="{ row }">{{ row.ifHidden === 0 ? row.deliveryDate : '' }}</template>
<template #purchaseOrderFBillNo="{ row }">{{ row.ifHidden === 0 ? row.purchaseOrderFBillNo : '' }}</template>
<template #sheet="{ row }">{{ row.ifHidden === 0 ? row.sheet : '' }}</template>
<template #materialName="{ row }">
<el-tooltip :content="row.materialName" placement="top">
@@ -25,7 +26,7 @@
<el-tooltip :content="row.supplierName" placement="top">
<div class="multi-line-omit">{{ row.supplierName }}</div>
</el-tooltip>
</template>
</template>43
<template #menu-left>
<div class="selectBoxes">
<div class="selectItem">
@@ -54,7 +55,7 @@
</template>
<template #print="{ row }">
<div class="btnList">
<el-button type="text" @click="barCodeFunDataRow(row)">{{ t('message.index.print') }}</el-button>
<el-button v-if="row.ifHidden === 0" type="text" @click="barCodeFunDataRow(row)">{{ t('message.index.print') }}</el-button>
</div>
</template>
<template #deleteText="{ row }">
@@ -64,7 +65,7 @@
</template>
<template #menu="{ row }">
<div class="btnList">
<el-button type="text" @click="barCodeFunDataRow(row)">{{ t('message.index.print') }}</el-button>
<el-button type="text" @click="barCodeFunDataRow(row)">{{ t('message.index.print') }}</el-button >
<el-button v-if="row.ifHidden === 0" type="text" @click="invoiceOrderDeleteOrderFun(row)">{{ t('message.index.deleteText') }}</el-button>
</div>
</template>
@@ -73,18 +74,14 @@
<selectedData
:listData="state.selectedData"
:showes="state.selectedDataShow"
@close="
() => {
state.selectedDataShow = false;
}
"
@close="() => { state.selectedDataShow = false; }"
/>
<barCode :showes="state.barCodeShow" :data="state.barCodeItem" @close="() => { state.barCodeShow = false }"/>
</div>
</template>
<script lang="ts" setup>
import { reactive, onMounted, computed, nextTick, ref } from 'vue';
import { reactive, onMounted, computed, ref } from 'vue';
import { listApi } from '../../api/list/index';
import { useI18n } from 'vue-i18n';
import SelectedData from '/@/views/materialReceiptNotice/selectedData.vue';
@@ -115,15 +112,16 @@ const state = reactive({
column: [
{ label: '', prop: 'checkboxBox', width: 35 },
{ label: computed(()=> t('message.index.deliveryDate')), prop: 'deliveryDate' },
{ label: computed(()=> t('message.index.deliveryDate')), prop: 'sheet', width: '135' },
{ label: computed(()=> t('message.index.deliveryNote')), prop: 'sheet', width: '135' },
{ label: computed(()=> t('message.index.PO1')), prop: 'purchaseOrderFBillNo', width: '135' },
{ label: computed(()=> t('message.index.maxcessLot')), prop: 'mssSupplierLot' },
{ label: computed(()=> t('message.index.supplierLot')), prop: 'fSupplierLot' },
{ label: computed(()=> t('message.index.partNumber')), prop: 'materialCode', width: '120' },
{ label: computed(()=> t('message.index.materialName')), prop: 'materialName' },
{ label: computed(() => t('message.index.supplierCode')), prop: 'supplierId', width: '90' },
{ label: computed(() => t('message.index.supplierName')), prop: 'supplierName', width: '120' },
{ label: computed(() => t('message.index.receivedQTY')), prop: 'sendedQty', width: '110' },
{ label: computed(() => t('message.index.deliveryQTY')), prop: 'qty' },
// { label: computed(() => t('message.index.receivedQTY')), prop: 'sendedQty', width: '110' },
{ label: computed(() => t('message.index.shipmentQTY')), prop: 'qty' },
{ label: computed(() => t('message.index.POQTY')), prop: 'purchaseQty' },
{ label: computed(() => t('message.index.unit')), prop: 'unitName' },
{ label: computed(() => t('message.index.print')), prop: 'print',width: 80 },
@@ -150,7 +148,7 @@ const elDatePickerFun = (val: any) => {
state.formData.fDateBegin = val[0];
state.formData.fDateEmd = val[1];
};
const invoiceOrderDeleteOrderFun = (row) => {
const invoiceOrderDeleteOrderFun = (row:any) => {
ElMessageBox({
closeOnClickModal: false,
closeOnPressEscape: false,
@@ -168,7 +166,6 @@ const invoiceOrderDeleteOrderFun = (row) => {
getList()
if(res.resultCode === 0){
ElMessage.success(t('message.index.success'))
}
})
} else {
@@ -206,7 +203,7 @@ const selectionChange = (row: any) => {
state.selectedData = [];
}
};
const barCodeFunDataRow = (row) => {
const barCodeFunDataRow = (row:any) => {
state.barCodeItem = row
state.barCodeShow = true
}
@@ -257,38 +254,25 @@ onMounted(() => {});
</script>
<style lang="scss" scoped>
//.el-checkbox__inner:nth-child(1){
// display: none;
//}
:deep(.el-checkbox--default):nth-child(0) {
display: none !important;
}
:deep(.el-checkbox) {
height: 15px !important;
}
:deep(.cell) {
padding: 0 8px !important;
}
:deep(.avue-crud__left) {
flex: 1;
}
:deep(.el-button--text) {
padding: 0 !important;
height: auto !important;
}
:deep(.avue-crud__refreshBtn) {
display: none;
}
:deep(.avue-crud__gridBtn) {
display: none;
}
.piliang {
margin-left: 12px;
border: 1px solid #d5d5d5;
@@ -299,11 +283,9 @@ onMounted(() => {});
box-sizing: border-box;
padding: 4px;
}
.system-user-container {
padding: 0 !important;
}
.multi-line-omit {
word-break: break-all; // 允许单词内自动换行，如果一个单词很长的话
text-overflow: ellipsis; // 溢出用省略号显示
@@ -312,56 +294,45 @@ onMounted(() => {});
-webkit-line-clamp: 1; // 显示的行
-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
}
.selectBoxes {
display: flex;
flex: 1;
.selectItem {
margin-right: 16px;
display: flex;
}
}
:deep(.avue-crud) {
height: 100%;
width: 100%;
}
:deep(.avue-crud--card) {
display: flex;
flex-direction: column;
flex: 1;
}
:deep(.avue-crud__body) {
flex: 1;
}
:deep(.el-table__header) {
height: 40px;
}
:deep(.el-card__body) {
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
padding: 0 !important;
}
:deep(.el-table__cell) {
padding: 0 !important;
//height: 56px !important;
}
:deep(.el-card) {
padding: 12px;
}
:deep(.el-form) {
flex: 1;
}
.system-user-container {
:deep(.el-card__body) {
display: flex;
@@ -374,7 +345,6 @@ onMounted(() => {});
}
}
}
:deep(.el-col) {
margin-bottom: 16px;
}

144
src/views/materialReceiptNotice/selectedData.vue
View File

@@ -3,6 +3,7 @@
<div ref="ceshiRef">
<ceshi id="ceshi" :data="props.listData"></ceshi>
</div>
<div class="btnList">
<el-button type="primary" @click="printElement">打印</el-button>
</div>
@@ -35,11 +36,22 @@ const closeFun = () => {
const printElement = () => {
captureSnapshot();
// 获取 DOM 元素的 HTML
nextTick(() => {
printJS({
printable: state.snapshotUrl,
type: 'image',
style: `
};
// 截图函数
const captureSnapshot = async () => {
const canvas = await html2canvas(ceshiRef.value, {
allowTaint: true, // 允许跨域图片
useCORS: true, // 使用 CORS 加载图片
scale: 2, // 提高截图分辨率
width: ceshiRef.value.clientWidth,
height: ceshiRef.value.clientHeight,
});
state.snapshotUrl = canvas.toDataURL('image/png');
printJS({
printable: state.snapshotUrl,
type: 'image',
style: `
@page {
size: auto;
margin: 0mm;
@@ -49,20 +61,7 @@ const printElement = () => {
padding: 36px;
}
`,
});
});
};
// 截图函数
const captureSnapshot = async () => {
// 使用 html2canvas 将 div 渲染为 Canvas
const canvas = await html2canvas(ceshiRef.value, {
allowTaint: true, // 允许跨域图片
useCORS: true, // 使用 CORS 加载图片
scale: 2, // 提高截图分辨率
width: ceshiRef.value.clientWidth,
height: ceshiRef.value.clientHeight,
});
state.snapshotUrl = canvas.toDataURL('image/png');
});
};
</script>
<style scoped lang="scss">
@@ -71,4 +70,111 @@ const captureSnapshot = async () => {
display: flex;
justify-content: center;
}
:deep(.el-form){
border-right: 0 !important;
}
.shuming {
width: 100%;
display: flex;
justify-content: space-between;
//text-align: left;
}
.nameText {
margin-right: 120px;
margin-top: 80px;
}
.dateTime {
margin-right: 50px;
margin-top: 16px;
}
.dateTime > span {
margin-left: 42px;
}
:deep(.el-table__inner-wrapper) {
box-sizing: border-box;
//border: 1px solid black;
}
:deep(.is-leaf) {
border-color: black;
}
:deep(.el-table__cell) {
border-color: black;
}
:deep(.el-table__cell) {
border-color: black !important;
}
:deep(.el-card) {
border: 1px solid black !important;
}
:deep(.avue-crud__header) {
display: none;
}
:deep(.avue-crud__body) {
padding: 0 !important;
}
.orderPrinting {
width: 100%;
.title {
width: 100%;
height: 50px;
background-color: #deeaf6;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
letter-spacing: 10px;
}
.orderPrintingTop {
height: 161px;
border: 1px solid #000000;
box-sizing: border-box;
display: flex;
.item1 {
width: 33.33%;
height: 160px;
border-right: 1px solid #000000;
display: flex;
justify-content: center;
align-items: center;
}
.item2 {
width: 33.33%;
height: 160px;
border-right: 1px solid #000000;
box-sizing: border-box;
padding: 16px;
.dataText {
font-size: 16px;
margin-bottom: 16px;
color: #000000;
}
}
.item2 {
width: 33.33%;
height: 160px;
//border-right: 1px solid black;
}
.item3 {
width: 33.33%;
height: 160px;
display: flex;
justify-content: center;
align-items: center;
}
}
}
</style>