From 2fe5d9843b35d5f6d24ac812210721da3e6c015a Mon Sep 17 00:00:00 2001 From: jameszow Date: Thu, 30 Nov 2023 17:25:27 +0800 Subject: [PATCH] fetch: add printing function for sales module #244 --- .../order/components/ViewSaleOrderModal.vue | 54 ++++++++++++++++-- .../refund/components/ViewSaleRefundModal.vue | 57 +++++++++++++++++-- web/src/views/sales/refund/index.vue | 12 ++-- .../components/ViewSaleShipmentsModal.vue | 57 +++++++++++++++++-- 4 files changed, 157 insertions(+), 23 deletions(-) diff --git a/web/src/views/sales/order/components/ViewSaleOrderModal.vue b/web/src/views/sales/order/components/ViewSaleOrderModal.vue index 6ab24236..6841a9be 100644 --- a/web/src/views/sales/order/components/ViewSaleOrderModal.vue +++ b/web/src/views/sales/order/components/ViewSaleOrderModal.vue @@ -5,10 +5,10 @@ title="销售订单-详情" :sub-title= "receiptNumber"> {{ customerName }} @@ -64,6 +64,7 @@ import { PageHeader, Statistic, } from 'ant-design-vue'; +import printJS from "print-js"; export default defineComponent({ name: 'ViewSaleOrderModal', @@ -117,6 +118,47 @@ export default defineComponent({ closeModal(); } + function exportTable() { + + } + + const flexContainer = 'display: flex; justify-content: space-between; border-bottom: 1px solid #ddd; padding: 8px;'; + const flexItem = 'display: flex; flex-direction: column; justify-content: space-between; font-size: 12px;'; + function primaryPrint() { + const header = ` +
+
单据编号：${receiptNumber.value}
+
单据金额：${discountLastAmount.value}
+
单据日期：${receiptDate.value}
+
+
+
结算账户：${accountName.value}
+
优惠率：${discountRate.value}
+
付款优惠：${discountAmount.value}
+
+
+
支付订金：${deposit.value}
+
客户：${customerName.value}
+
备注：${remark.value}
+
+`; + printJS({ + documentTitle: "EAIRP (销售订单单据-详情)", + header: header, + properties: TableColumns.map((item) => { + return { + field: item.dataIndex, + displayName: item.title, + }; + }), + printable: tableData.value, + gridHeaderStyle: 'border: 1px solid #ddd; font-size: 12px; text-align: center; padding: 8px;', + gridStyle: 'border: 1px solid #ddd; font-size: 12px; text-align: center; padding: 8px;', + type: 'json', + }); + } + + return { receiptNumber, otherReceipt, @@ -132,7 +174,9 @@ export default defineComponent({ registerTable, registerModal, getTitle, - handleSubmit + handleSubmit, + exportTable, + primaryPrint }; }, }); diff --git a/web/src/views/sales/refund/components/ViewSaleRefundModal.vue b/web/src/views/sales/refund/components/ViewSaleRefundModal.vue index 768582dc..0f3baf71 100644 --- a/web/src/views/sales/refund/components/ViewSaleRefundModal.vue +++ b/web/src/views/sales/refund/components/ViewSaleRefundModal.vue @@ -5,13 +5,13 @@ title="销售退货-详情" :sub-title= "receiptNumber"> - {{ customerName }} + {{ customerName }} {{ receiptDate }} {{ otherReceipt }} @@ -72,6 +72,7 @@ import { PageHeader, Statistic, } from 'ant-design-vue'; +import printJS from "print-js"; export default defineComponent({ name: 'ViewSaleRefundModal', @@ -139,6 +140,48 @@ export default defineComponent({ closeModal(); } + function exportTable() { + + } + + const flexContainer = 'display: flex; justify-content: space-between; border-bottom: 1px solid #ddd; padding: 8px;'; + const flexItem = 'display: flex; flex-direction: column; justify-content: space-between; font-size: 12px;'; + function primaryPrint() { + const header = ` +
+
单据编号：${receiptNumber.value}
+
单据金额：${refundLastAmount.value}
+
单据日期：${receiptDate.value}
+
+
+
结算账户：${accountName.value}
+
优惠率：${refundOfferRate.value}
+
退款优惠：${refundOfferAmount.value}
+
其它费用：${otherAmount.value}
+
+
+
本次退款：${thisRefundAmount.value}
+
本次欠款：${thisArrearsAmount.value}
+
客户：${customerName.value}
+
备注：${remark.value}
+
+`; + printJS({ + documentTitle: "EAIRP (销售退货单单据-详情)", + header: header, + properties: TableColumns.map((item) => { + return { + field: item.dataIndex, + displayName: item.title, + }; + }), + printable: tableData.value, + gridHeaderStyle: 'border: 1px solid #ddd; font-size: 12px; text-align: center; padding: 8px;', + gridStyle: 'border: 1px solid #ddd; font-size: 12px; text-align: center; padding: 8px;', + type: 'json', + }); + } + return { receiptNumber, otherReceipt, @@ -158,7 +201,9 @@ export default defineComponent({ getTitle, handleSubmit, viewShipmentsReceiptModal, - viewShipmentReceipt + viewShipmentReceipt, + exportTable, + primaryPrint }; }, }); diff --git a/web/src/views/sales/refund/index.vue b/web/src/views/sales/refund/index.vue index 856869c0..e2e51cf0 100644 --- a/web/src/views/sales/refund/index.vue +++ b/web/src/views/sales/refund/index.vue @@ -41,7 +41,7 @@ - +
@@ -57,16 +57,16 @@ import {useI18n} from "vue-i18n"; import {Tag} from "ant-design-vue"; import {getSaleRefundPageList, updateSaleRefundStatus, deleteSaleRefund} from "@/api/sale/refund"; import AddEditModal from "@/views/sales/refund/components/AddEditModal.vue"; -import ViewShipmentModal from "@/views/sales/shipments/components/ViewSaleShipmentsModal.vue"; +import ViewSaleRefundModal from "@/views/sales/refund/components/ViewSaleRefundModal.vue"; import {useModal} from "@/components/Modal"; export default defineComponent({ name: 'SaleRefundModal', - components: {ViewShipmentModal, Tag, TableAction, BasicTable, AddEditModal}, + components: {ViewSaleRefundModal, Tag, TableAction, BasicTable, AddEditModal}, setup() { const { t } = useI18n(); const addEditModalRef = ref(null); const { createMessage } = useMessage(); - const [viewShipmentReceiptModal, {openModal: openViewShipmentReceiptModal}] = useModal() + const [viewRefundReceiptModal, {openModal: openViewRefundReceiptModal}] = useModal() const [registerTable, { reload, getSelectRows }] = useTable({ title: '销售退货列表', rowKey: 'id', @@ -136,7 +136,7 @@ export default defineComponent({ } function handleView(record: Recordable){ - openViewShipmentReceiptModal(true, { + openViewRefundReceiptModal(true, { receiptNumber: record.receiptNumber }); } @@ -192,7 +192,7 @@ export default defineComponent({ handleView, handleOk, handleExport, - viewShipmentReceiptModal + viewRefundReceiptModal } } }) diff --git a/web/src/views/sales/shipments/components/ViewSaleShipmentsModal.vue b/web/src/views/sales/shipments/components/ViewSaleShipmentsModal.vue index 7d494a09..62633aab 100644 --- a/web/src/views/sales/shipments/components/ViewSaleShipmentsModal.vue +++ b/web/src/views/sales/shipments/components/ViewSaleShipmentsModal.vue @@ -5,13 +5,13 @@ title="销售出库-详情" :sub-title= "receiptNumber"> - {{ customerName }} + {{ customerName }} {{ receiptDate }} {{ otherReceipt }} @@ -73,6 +73,7 @@ import { PageHeader, Statistic, } from 'ant-design-vue'; +import printJS from "print-js"; export default defineComponent({ name: 'ViewSaleShipmentsModal', @@ -140,6 +141,48 @@ export default defineComponent({ closeModal(); } + function exportTable() { + + } + + const flexContainer = 'display: flex; justify-content: space-between; border-bottom: 1px solid #ddd; padding: 8px;'; + const flexItem = 'display: flex; flex-direction: column; justify-content: space-between; font-size: 12px;'; + function primaryPrint() { + const header = ` +
+
单据编号：${receiptNumber.value}
+
单据金额：${collectOfferLastAmount.value}
+
单据日期：${receiptDate.value}
+
+
+
结算账户：${accountName.value}
+
优惠率：${collectOfferRate.value}
+
收款优惠：${collectOfferAmount.value}
+
其它费用：${otherAmount.value}
+
+
+
本次收款：${thisCollectAmount.value}
+
本次欠款：${thisArrearsAmount.value}
+
客户：${customerName.value}
+
备注：${remark.value}
+
+`; + printJS({ + documentTitle: "EAIRP (销售出库单单据-详情)", + header: header, + properties: TableColumns.map((item) => { + return { + field: item.dataIndex, + displayName: item.title, + }; + }), + printable: tableData.value, + gridHeaderStyle: 'border: 1px solid #ddd; font-size: 12px; text-align: center; padding: 8px;', + gridStyle: 'border: 1px solid #ddd; font-size: 12px; text-align: center; padding: 8px;', + type: 'json', + }); + } + return { receiptNumber, otherReceipt, @@ -159,7 +202,9 @@ export default defineComponent({ getTitle, handleSubmit, viewOrderReceiptModal, - viewOrderReceipt + viewOrderReceipt, + exportTable, + primaryPrint }; }, });