fetch: add printing function for sales module eairps#244

Jzow · Nov 30, 2023 · 2fe5d98 · 2fe5d98
1 parent 870e2c6
commit 2fe5d98
Show file tree

Hide file tree

Showing 4 changed files with 157 additions and 23 deletions.
diff --git 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">
         <template #extra>
-          <a-button key="1">导出</a-button>
-          <a-button key="1">普通打印</a-button>
-          <a-button key="1">三联打印</a-button>
-          <a-button key="2" type="primary">发起流程审批</a-button>
+          <a-button @click="exportTable">导出</a-button>
+          <a-button @click="primaryPrint" type="primary">普通打印</a-button>
+          <!--          <a-button key="triplePrint">三联打印</a-button>-->
+          <!--          <a-button key="2" type="primary">发起流程审批</a-button>-->
         </template>
         <a-descriptions size="small" :column="3">
           <a-descriptions-item label="客户">{{ customerName }}</a-descriptions-item>
@@ -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 = `
+  <div style="${flexContainer}">
+    <div style="${flexItem}">单据编号：${receiptNumber.value}</div>
+    <div style="${flexItem}">单据金额：${discountLastAmount.value}</div>
+    <div style="${flexItem}">单据日期：${receiptDate.value}</div>
+  </div>
+  <div style="${flexContainer}">
+    <div style="${flexItem}">结算账户：${accountName.value}</div>
+    <div style="${flexItem}">优惠率：${discountRate.value}</div>
+    <div style="${flexItem}">付款优惠：${discountAmount.value}</div>
+  </div>
+  <div style="${flexContainer}">
+    <div style="${flexItem}">支付订金：${deposit.value}</div>
+    <div style="${flexItem}">客户：${customerName.value}</div>
+    <div style="${flexItem}">备注：${remark.value}</div>
+  </div>
+`;
+      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
@@ -5,13 +5,13 @@
           title="销售退货-详情"
           :sub-title= "receiptNumber">
         <template #extra>
-          <a-button key="1">导出</a-button>
-          <a-button key="1">普通打印</a-button>
-          <a-button key="1">三联打印</a-button>
-          <a-button key="2" type="primary">发起流程审批</a-button>
+          <a-button @click="exportTable">导出</a-button>
+          <a-button @click="primaryPrint" type="primary">普通打印</a-button>
+          <!--          <a-button key="triplePrint">三联打印</a-button>-->
+          <!--          <a-button key="2" type="primary">发起流程审批</a-button>-->
         </template>
         <a-descriptions size="small" :column="4">
-          <a-descriptions-item label="供应商">{{ customerName }}</a-descriptions-item>
+          <a-descriptions-item label="客户">{{ customerName }}</a-descriptions-item>
           <a-descriptions-item label="单据日期">{{ receiptDate }}</a-descriptions-item>
           <a-descriptions-item label="出库单据">
             <a @click="viewShipmentReceipt">{{ otherReceipt }}</a>
@@ -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 = `
+  <div style="${flexContainer}">
+    <div style="${flexItem}">单据编号：${receiptNumber.value}</div>
+    <div style="${flexItem}">单据金额：${refundLastAmount.value}</div>
+    <div style="${flexItem}">单据日期：${receiptDate.value}</div>
+  </div>
+  <div style="${flexContainer}">
+    <div style="${flexItem}">结算账户：${accountName.value}</div>
+    <div style="${flexItem}">优惠率：${refundOfferRate.value}</div>
+    <div style="${flexItem}">退款优惠：${refundOfferAmount.value}</div>
+    <div style="${flexItem}">其它费用：${otherAmount.value}</div>
+  </div>
+  <div style="${flexContainer}">
+    <div style="${flexItem}">本次退款：${thisRefundAmount.value}</div>
+    <div style="${flexItem}">本次欠款：${thisArrearsAmount.value}</div>
+    <div style="${flexItem}">客户：${customerName.value}</div>
+    <div style="${flexItem}">备注：${remark.value}</div>
+  </div>
+`;
+      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
@@ -41,7 +41,7 @@
       </template>
     </BasicTable>
     <AddEditModal ref="addEditModalRef" @cancel="handleCancel"/>
-    <ViewShipmentModal @register="viewShipmentReceiptModal"/>
+    <ViewSaleRefundModal @register="viewRefundReceiptModal"/>
   </div>
 </template>
 <div>
@@ -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
@@ -5,13 +5,13 @@
           title="销售出库-详情"
           :sub-title= "receiptNumber">
         <template #extra>
-          <a-button key="1">导出</a-button>
-          <a-button key="1">普通打印</a-button>
-          <a-button key="1">三联打印</a-button>
-          <a-button key="2" type="primary">发起流程审批</a-button>
+          <a-button @click="exportTable">导出</a-button>
+          <a-button @click="primaryPrint" type="primary">普通打印</a-button>
+          <!--          <a-button key="triplePrint">三联打印</a-button>-->
+          <!--          <a-button key="2" type="primary">发起流程审批</a-button>-->
         </template>
         <a-descriptions size="small" :column="4">
-          <a-descriptions-item label="供应商">{{ customerName }}</a-descriptions-item>
+          <a-descriptions-item label="客户">{{ customerName }}</a-descriptions-item>
           <a-descriptions-item label="单据日期">{{ receiptDate }}</a-descriptions-item>
           <a-descriptions-item label="订单单据">
             <a @click="viewOrderReceipt">{{ otherReceipt }}</a>
@@ -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 = `
+  <div style="${flexContainer}">
+    <div style="${flexItem}">单据编号：${receiptNumber.value}</div>
+    <div style="${flexItem}">单据金额：${collectOfferLastAmount.value}</div>
+    <div style="${flexItem}">单据日期：${receiptDate.value}</div>
+  </div>
+  <div style="${flexContainer}">
+    <div style="${flexItem}">结算账户：${accountName.value}</div>
+    <div style="${flexItem}">优惠率：${collectOfferRate.value}</div>
+    <div style="${flexItem}">收款优惠：${collectOfferAmount.value}</div>
+    <div style="${flexItem}">其它费用：${otherAmount.value}</div>
+  </div>
+  <div style="${flexContainer}">
+    <div style="${flexItem}">本次收款：${thisCollectAmount.value}</div>
+    <div style="${flexItem}">本次欠款：${thisArrearsAmount.value}</div>
+    <div style="${flexItem}">客户：${customerName.value}</div>
+    <div style="${flexItem}">备注：${remark.value}</div>
+  </div>
+`;
+      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
     };
   },
 });