From 60a29cc6c558b81cc01b9b13fc7e837e755f8508 Mon Sep 17 00:00:00 2001
From: jameszow <jameszow@163.com>
Date: Thu, 30 Nov 2023 17:15:53 +0800
Subject: [PATCH 1/9] new: add view advance charge modal

---
 .../components/ViewAdvanceChargeModal.vue     | 171 ++++++++++++++++++
 1 file changed, 171 insertions(+)
 create mode 100644 web/src/views/financial/advance-charge/components/ViewAdvanceChargeModal.vue

diff --git a/web/src/views/financial/advance-charge/components/ViewAdvanceChargeModal.vue b/web/src/views/financial/advance-charge/components/ViewAdvanceChargeModal.vue
new file mode 100644
index 00000000..7b737b9d
--- /dev/null
+++ b/web/src/views/financial/advance-charge/components/ViewAdvanceChargeModal.vue
@@ -0,0 +1,171 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+    <div class="components-page-header-demo-responsive" style="border: 1px solid rgb(235, 237, 240)">
+      <a-page-header
+          title="收预付款单-详情"
+          :sub-title= "receiptNumber">
+        <template #extra>
+          <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="付款会员">{{ memberName }}</a-descriptions-item>
+          <a-descriptions-item label="单据日期">{{ receiptDate }}</a-descriptions-item>
+          <a-descriptions-item label="财务人员">{{ financialPersonnel }}</a-descriptions-item>
+          <a-descriptions-item label="合计金额">{{ totalAmount }}</a-descriptions-item>
+          <a-descriptions-item label="收款金额">{{ collectedAmount }}</a-descriptions-item>
+          <a-descriptions-item label="备注">
+            {{ remark }}
+          </a-descriptions-item>
+        </a-descriptions>
+        <div class="extra">
+          <div
+              class="descriptions-context"
+              :style="{
+              display: 'flex',
+              width: 'max-content',
+              justifyContent: 'flex-end',
+            }"
+          >
+            <a-statistic
+                title="单据状态"
+                :value="status === 1 ? '已审核' : '未审核'"
+                :value-style="status === 1 ? { color: '#3f8600' } : { color: '#cf1322' }"
+                :style="{
+                marginRight: '32px',
+                color: 'green',
+              }"
+            />
+            <a-statistic title="单据金额"
+                         prefix="￥"
+                         :value-style="status === 1 ? { color: '#3f8600' } : { color: '#cf1322' }"
+                         :value="collectedAmount"/>
+          </div>
+        </div>
+      </a-page-header>
+      <BasicTable @register="registerTable">
+      </BasicTable>
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts">
+import {defineComponent, ref} from 'vue';
+import {BasicTable, useTable} from '/src/components/Table';
+import {BasicModal, useModalInner} from "@/components/Modal";
+import {getAdvanceDetail} from "@/api/financial/advance";
+import {
+  Descriptions,
+  DescriptionsItem,
+  PageHeader,
+  Statistic,
+} from 'ant-design-vue';
+import {advanceChargeTableColumns} from "@/views/financial/advance-charge/advance.data";
+import printJS from "print-js";
+
+export default defineComponent({
+  name: 'ViewIncomeModal',
+  components: {
+    BasicModal,
+    BasicTable,
+    'a-page-header': PageHeader,
+    'a-descriptions': Descriptions,
+    'a-descriptions-item': DescriptionsItem,
+    'a-statistic': Statistic,
+  },
+  setup() {
+    const receiptNumber = ref('');
+    const memberName = ref('');
+    const receiptDate = ref('');
+    const financialPersonnel = ref('');
+    const totalAmount = ref('');
+    const collectedAmount = ref('');
+    const remark = ref('')
+    const tableData = ref([]);
+    const status = ref(-1);
+    const [registerTable] = useTable({
+      title: '收预付款单据详情数据',
+      columns: advanceChargeTableColumns,
+      dataSource: tableData,
+      pagination: false,
+      showIndexColumn: false,
+      bordered: true,
+      canResize: false,
+    });
+    const getTitle = ref('单据详情');
+    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
+      setModalProps({confirmLoading: false, destroyOnClose: true, width: 1000, showOkBtn: false});
+      const res = await getAdvanceDetail(data.id);
+      tableData.value = res.data.tableData;
+      receiptNumber.value = res.data.receiptNumber;
+      memberName.value = res.data.memberName;
+      financialPersonnel.value = res.data.financialPersonnel;
+      receiptDate.value = res.data.receiptDate;
+      totalAmount.value = res.data.totalAmount;
+      collectedAmount.value = res.data.collectedAmount;
+      remark.value = res.data.remark;
+      status.value = res.data.status;
+    });
+
+    function handleSubmit() {
+      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}">单据日期：${receiptDate.value}</div>
+    <div style="${flexItem}">单据金额：${totalAmount.value}</div>
+  </div>
+  <div style="${flexContainer}">
+    <div style="${flexItem}">付款会员：${memberName.value}</div>
+    <div style="${flexItem}">财务人员：${financialPersonnel.value}</div>
+    <div style="${flexItem}">备注：${remark.value}</div>
+  </div>
+`;
+      printJS({
+        documentTitle: "EAIRP (收预付款单单据-详情)",
+        header: header,
+        properties: advanceChargeTableColumns.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,
+      memberName,
+      receiptDate,
+      financialPersonnel,
+      collectedAmount,
+      totalAmount,
+      remark,
+      status,
+      registerTable,
+      registerModal,
+      getTitle,
+      handleSubmit,
+      exportTable,
+      primaryPrint
+    };
+  },
+});
+</script>
+<style scoped>
+
+</style>

From d85dacaac81f50ee70eafb041ddf4a2062a76bfc Mon Sep 17 00:00:00 2001
From: jameszow <jameszow@163.com>
Date: Thu, 30 Nov 2023 17:16:29 +0800
Subject: [PATCH 2/9] fix: fix bug query income receipt page list need input
 delete flag

---
 .../service/financial/impl/IncomeReceiptServiceImpl.java         | 1 +
 1 file changed, 1 insertion(+)

diff --git a/core/service/src/main/java/com/wansenai/service/financial/impl/IncomeReceiptServiceImpl.java b/core/service/src/main/java/com/wansenai/service/financial/impl/IncomeReceiptServiceImpl.java
index 668c8a74..0d5b85c1 100644
--- a/core/service/src/main/java/com/wansenai/service/financial/impl/IncomeReceiptServiceImpl.java
+++ b/core/service/src/main/java/com/wansenai/service/financial/impl/IncomeReceiptServiceImpl.java
@@ -115,6 +115,7 @@ public Response<Page<IncomeVO>> getIncomeReceiptPageList(QueryIncomeDTO queryInc
                 .ge(StringUtils.hasLength(queryIncomeDTO.getStartDate()), FinancialMain::getReceiptDate, queryIncomeDTO.getStartDate())
                 .le(StringUtils.hasLength(queryIncomeDTO.getEndDate()), FinancialMain::getReceiptDate, queryIncomeDTO.getEndDate())
                 .eq(FinancialMain::getType, "收入")
+                .eq(FinancialMain::getDeleteFlag, CommonConstants.NOT_DELETED)
                 .page(page);
 
         var incomeVOList = new ArrayList<IncomeVO>(financialMainPage.getRecords().size() + 1);

From 0bbb92d5867bd5e6a4c16131897ab22e92b775c4 Mon Sep 17 00:00:00 2001
From: jameszow <jameszow@163.com>
Date: Thu, 30 Nov 2023 17:22:16 +0800
Subject: [PATCH 3/9] fetch: update shipments detail column filed width and add
 advance charge table columns

---
 .../financial/advance-charge/advance.data.ts  | 20 ++++++++++++++++++-
 web/src/views/report/report.data.ts           |  4 ++--
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/web/src/views/financial/advance-charge/advance.data.ts b/web/src/views/financial/advance-charge/advance.data.ts
index 9ab22b5a..0a243dd9 100644
--- a/web/src/views/financial/advance-charge/advance.data.ts
+++ b/web/src/views/financial/advance-charge/advance.data.ts
@@ -162,4 +162,22 @@ export const formState: UnwrapRef<FormState> = reactive<FormState>({
     remark: '',
     totalAmount: 0,
     collectedAmount: 0,
-});
\ No newline at end of file
+});
+
+export const advanceChargeTableColumns: BasicColumn[] = [
+    {
+        title: '账户名称',
+        dataIndex: 'accountName',
+        width: 200,
+    },
+    {
+        title: '金额',
+        dataIndex: 'amount',
+        width: 180,
+    },
+    {
+        title: '备注',
+        dataIndex: 'remark',
+        width: 200,
+    },
+]
\ No newline at end of file
diff --git a/web/src/views/report/report.data.ts b/web/src/views/report/report.data.ts
index 45e07e51..cc435a65 100644
--- a/web/src/views/report/report.data.ts
+++ b/web/src/views/report/report.data.ts
@@ -710,7 +710,7 @@ export const shipmentsDetailStatisticsColumns: BasicColumn[] = [
     {
         title: '金额',
         dataIndex: 'amount',
-        width: 65,
+        width: 75,
     },
     {
         title: '税率(%)',
@@ -720,7 +720,7 @@ export const shipmentsDetailStatisticsColumns: BasicColumn[] = [
     {
         title: '税额',
         dataIndex: 'taxAmount',
-        width: 65,
+        width: 70,
     },
     {
         title: '出库日期',

From 3948cb84392bf1b05c1aff21fa90430c7d0b83c9 Mon Sep 17 00:00:00 2001
From: jameszow <jameszow@163.com>
Date: Thu, 30 Nov 2023 17:23:36 +0800
Subject: [PATCH 4/9] fetch: add printing function for report module #244

---
 web/src/views/report/accountStatistics.vue  | 38 ++++++++++++++--
 web/src/views/report/customerBill.vue       | 46 +++++++++++++++++--
 web/src/views/report/productStock.vue       | 50 +++++++++++++++++++--
 web/src/views/report/purchaseStatistics.vue | 42 +++++++++++++++--
 web/src/views/report/retailStatistics.vue   | 44 ++++++++++++++++--
 web/src/views/report/saleStatistics.vue     | 42 +++++++++++++++--
 web/src/views/report/shipmentsDetail.vue    | 49 ++++++++++++++++++--
 web/src/views/report/shipmentsSummary.vue   | 44 ++++++++++++++++--
 web/src/views/report/storageDetail.vue      | 49 ++++++++++++++++++--
 web/src/views/report/storageSummary.vue     | 44 ++++++++++++++++--
 web/src/views/report/supplierBill.vue       | 41 +++++++++++++++--
 11 files changed, 449 insertions(+), 40 deletions(-)

diff --git a/web/src/views/report/accountStatistics.vue b/web/src/views/report/accountStatistics.vue
index 34c41880..dc21df8a 100644
--- a/web/src/views/report/accountStatistics.vue
+++ b/web/src/views/report/accountStatistics.vue
@@ -2,8 +2,8 @@
   <div>
     <BasicTable @register="registerTable">
       <template #toolbar>
-        <a-button type="primary" @click=""> 导出</a-button>
-        <a-button @click=""> 打印</a-button>
+        <a-button @click="exportTable">导出</a-button>
+        <a-button @click="primaryPrint" type="primary">普通打印</a-button>
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'accountId'">
@@ -18,7 +18,7 @@
 </div>
 
 <script lang="ts">
-import {defineComponent} from "vue";
+import {defineComponent, ref} from "vue";
 import {BasicTable, TableAction, useTable} from "@/components/Table";
 import {accountStatisticsColumns, searchAccountSchema} from "@/views/report/report.data";
 import {Tag} from "ant-design-vue";
@@ -27,11 +27,13 @@ import XEUtils from "xe-utils";
 import AccountFlowModal from "@/views/report/modal/AccountFlowModal.vue";
 import StockFlowModal from "@/views/report/modal/StockFlowModal.vue";
 import {useModal} from "@/components/Modal";
+import printJS from "print-js";
 
 export default defineComponent({
   name: 'AccountStatistics',
   components: {StockFlowModal, AccountFlowModal, Tag, TableAction, BasicTable},
   setup() {
+    const printTableData = ref<any[]>([]);
     const [registerModal, {openModal}] = useModal();
     const [registerTable, { reload }] = useTable({
       title: '账户统计报表',
@@ -57,6 +59,14 @@ export default defineComponent({
       const initialAmount = tableData.reduce((prev, next) => prev + next.initialAmount, 0);
       const thisMonthChangeAmount = tableData.reduce((prev, next) => prev + next.thisMonthChangeAmount, 0);
       const currentAmount = tableData.reduce((prev, next) => prev + next.currentAmount, 0);
+      printTableData.value = tableData;
+      printTableData.value.push({
+        accountName: '合计',
+        accountNumber: '',
+        initialAmount: `￥${XEUtils.commafy(XEUtils.toNumber(initialAmount), { digits: 2 })}`,
+        thisMonthChangeAmount: `￥${XEUtils.commafy(XEUtils.toNumber(thisMonthChangeAmount), { digits: 2 })}`,
+        currentAmount: `￥${XEUtils.commafy(XEUtils.toNumber(currentAmount), { digits: 2 })}`
+      });
       return [
         {
           _index: '合计',
@@ -79,12 +89,32 @@ export default defineComponent({
       reload();
     }
 
+    function exportTable() {
+
+    }
+
+    function primaryPrint() {
+      const printColumns = accountStatisticsColumns.filter(item => item.dataIndex !== 'accountId');
+      printJS({
+        documentTitle: "EAIRP (账户统计-详情)",
+        properties: printColumns.map(item => {
+          return { field: item.dataIndex, displayName: item.title }
+        }),
+        printable: printTableData.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 {
       registerModal,
       registerTable,
       handleSuccess,
       handleCancel,
-      handleAccountFlow
+      handleAccountFlow,
+      exportTable,
+      primaryPrint
     }
   }
 })
diff --git a/web/src/views/report/customerBill.vue b/web/src/views/report/customerBill.vue
index 57436e49..3d89ac94 100644
--- a/web/src/views/report/customerBill.vue
+++ b/web/src/views/report/customerBill.vue
@@ -2,8 +2,8 @@
   <div>
     <BasicTable @register="registerTable">
       <template #toolbar>
-        <a-button type="primary" @click=""> 导出</a-button>
-        <a-button @click=""> 打印</a-button>
+        <a-button @click="exportTable">导出</a-button>
+        <a-button @click="primaryPrint" type="primary">普通打印</a-button>
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'customerId'">
@@ -18,20 +18,25 @@
 </div>
 
 <script lang="ts">
-import {defineComponent} from "vue";
+import {defineComponent, ref} from "vue";
 import {BasicTable, TableAction, useTable} from "@/components/Table";
-import {customerBillColumns, searchCustomerBillSchema} from "@/views/report/report.data";
+import {
+  customerBillColumns,
+  searchCustomerBillSchema,
+} from "@/views/report/report.data";
 import {Tag} from "ant-design-vue";
 import {getCustomerBill} from "@/api/report/report";
 import XEUtils from "xe-utils";
 import {useModal} from "@/components/Modal";
 import CustomerBillDetailModal from "@/views/report/modal/CustomerBillDetailModal.vue";
+import printJS from "print-js";
 
 export default defineComponent({
   name: 'CustomerBill',
   components: {
     CustomerBillDetailModal, Tag, TableAction, BasicTable},
   setup() {
+    const printTableData = ref<any[]>([]);
     const [handleRegister, {openModal}] = useModal();
     const [registerTable, { reload }] = useTable({
       title: '客户对账报表',
@@ -60,6 +65,20 @@ export default defineComponent({
       const totalQuarterArrears = tableData.reduce((prev, next) => prev + next.totalQuarterArrears, 0);
       const totalQuarterReceivable = tableData.reduce((prev, next) => prev + next.totalQuarterReceivable, 0);
       const remainingReceivableArrears = tableData.reduce((prev, next) => prev + next.remainingReceivableArrears, 0);
+      printTableData.value = tableData;
+      printTableData.value.push({
+        firstQuarterReceivable:`￥${XEUtils.commafy(XEUtils.toNumber(firstQuarterReceivable), { digits: 2 })}`,
+        secondQuarterReceivable:`￥${XEUtils.commafy(XEUtils.toNumber(secondQuarterReceivable), { digits: 2 })}`,
+        thirdQuarterReceivable:`￥${XEUtils.commafy(XEUtils.toNumber(thirdQuarterReceivable), { digits: 2 })}`,
+        fourthQuarterReceivable:`￥${XEUtils.commafy(XEUtils.toNumber(fourthQuarterReceivable), { digits: 2 })}`,
+        totalQuarterArrears:`￥${XEUtils.commafy(XEUtils.toNumber(totalQuarterArrears), { digits: 2 })}`,
+        totalQuarterReceivable: `￥${XEUtils.commafy(XEUtils.toNumber(totalQuarterReceivable), { digits: 2 })}`,
+        remainingReceivableArrears: `￥${XEUtils.commafy(XEUtils.toNumber(remainingReceivableArrears), { digits: 2 })}`,
+        customerName: '合计',
+        contactName: '',
+        contactPhone: '',
+        email: '',
+      });
       return [
         {
           _index: '合计',
@@ -87,12 +106,31 @@ export default defineComponent({
       });
     }
 
+    function exportTable() {
+    }
+
+    function primaryPrint() {
+      const printColumns = customerBillColumns.filter(item => item.dataIndex !== 'customerId');
+      printJS({
+        documentTitle: "EAIRP (客户对账)",
+        properties: printColumns.map(item => {
+          return { field: item.dataIndex, displayName: item.title }
+        }),
+        printable: printTableData.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 {
       openReceipt,
       registerTable,
       handleSuccess,
       handleCancel,
       handleRegister,
+      exportTable,
+      primaryPrint
     }
   }
 })
diff --git a/web/src/views/report/productStock.vue b/web/src/views/report/productStock.vue
index 4ecf49f4..8716ebfb 100644
--- a/web/src/views/report/productStock.vue
+++ b/web/src/views/report/productStock.vue
@@ -2,8 +2,8 @@
   <div>
     <BasicTable @register="registerTable">
       <template #toolbar>
-        <a-button type="primary" @click=""> 导出</a-button>
-        <a-button @click=""> 打印</a-button>
+        <a-button @click="exportTable">导出</a-button>
+        <a-button @click="primaryPrint" type="primary">普通打印</a-button>
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'id'">
@@ -18,7 +18,7 @@
 </div>
 
 <script lang="ts">
-import {defineComponent} from "vue";
+import {defineComponent, ref} from "vue";
 import {BasicTable, TableAction, useTable} from "@/components/Table";
 import {useModal} from "@/components/Modal";
 import {productStockColumns, searchProductStockSchema} from "@/views/report/report.data";
@@ -26,11 +26,13 @@ import {Tag} from "ant-design-vue";
 import {getProductStock} from "@/api/report/report";
 import XEUtils from "xe-utils";
 import StockFlowModal from "@/views/report/modal/StockFlowModal.vue";
+import printJS from "print-js";
 export default defineComponent({
   name: 'ProductStock',
   components: {Tag, TableAction, BasicTable, StockFlowModal},
   setup() {
     const [registerModal, {openModal}] = useModal();
+    const printTableData = ref<any[]>([]);
     const [registerTable, { reload }] = useTable({
       title: '商品库存报表',
       api: getProductStock,
@@ -55,6 +57,25 @@ export default defineComponent({
       const totalInitStock = tableData.reduce((prev, next) => prev + next.initialStock, 0);
       const totalCurrentStock = tableData.reduce((prev, next) => prev + next.currentStock, 0);
       const totalStockAmount = tableData.reduce((prev, next) => prev + next.stockAmount, 0);
+      // 将数据写入到printTableData里面
+      printTableData.value = tableData;
+      printTableData.value.push({
+        initialStock: totalInitStock,
+        currentStock: totalCurrentStock,
+        stockAmount: `￥${XEUtils.commafy(XEUtils.toNumber(totalStockAmount), { digits: 2 })}`,
+        productBarcode: '合计',
+        // 将其他字段写成空字符串 为了打印的时候不显示
+        warehouseName: '',
+        productName: '',
+        productCategoryName: '',
+        productStandard: '',
+        productModel: '',
+        productWeight: '',
+        productColor: '',
+        productUnit: '',
+        warehouseShelves: '',
+        unitPrice: ''
+      });
       return [
         {
           _index: '合计',
@@ -77,12 +98,33 @@ export default defineComponent({
       reload();
     }
 
+    function exportTable() {
+
+    }
+
+    function primaryPrint() {
+      const printColumns = productStockColumns.filter(item => item.dataIndex !== 'productId' && item.dataIndex !== 'warehouseId'
+          && item.dataIndex !== 'id');
+      printJS({
+        documentTitle: "EAIRP (商品库存-详情)",
+        properties: printColumns.map(item => {
+          return { field: item.dataIndex, displayName: item.title }
+        }),
+        printable: printTableData.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 {
       registerTable,
       handleSuccess,
       handleCancel,
       registerModal,
-      handleStockFlow
+      handleStockFlow,
+      exportTable,
+      primaryPrint
     }
   }
 })
diff --git a/web/src/views/report/purchaseStatistics.vue b/web/src/views/report/purchaseStatistics.vue
index c3101d7e..fc8fa339 100644
--- a/web/src/views/report/purchaseStatistics.vue
+++ b/web/src/views/report/purchaseStatistics.vue
@@ -2,8 +2,8 @@
   <div>
     <BasicTable @register="registerTable">
       <template #toolbar>
-        <a-button type="primary" @click=""> 导出</a-button>
-        <a-button @click=""> 打印</a-button>
+        <a-button @click="exportTable">导出</a-button>
+        <a-button @click="primaryPrint" type="primary">普通打印</a-button>
       </template>
     </BasicTable>
   </div>
@@ -12,17 +12,19 @@
 </div>
 
 <script lang="ts">
-import {defineComponent} from "vue";
+import {defineComponent, ref} from "vue";
 import {BasicTable, TableAction, useTable} from "@/components/Table";
 import {searchPurchaseSchema, purchaseStatisticsColumns} from "@/views/report/report.data";
 import {Tag} from "ant-design-vue";
 import {getPurchaseStatistics} from "@/api/report/report";
 import XEUtils from "xe-utils";
+import printJS from "print-js";
 
 export default defineComponent({
   name: 'PurchaseStatistics',
   components: {Tag, TableAction, BasicTable},
   setup() {
+    const printTableData = ref<any[]>([]);
     const [registerTable, { reload }] = useTable({
       title: '采购统计报表',
       api: getPurchaseStatistics,
@@ -48,6 +50,21 @@ export default defineComponent({
       const purchaseRefundNumber = tableData.reduce((prev, next) => prev + next.purchaseRefundNumber, 0);
       const purchaseRefundAmount = tableData.reduce((prev, next) => prev + next.purchaseRefundAmount, 0);
       const purchaseLastAmount = tableData.reduce((prev, next) => prev + next.purchaseLastAmount, 0);
+      printTableData.value = tableData;
+      printTableData.value.push({
+        purchaseNumber: purchaseNumber,
+        purchaseAmount: `￥${XEUtils.commafy(XEUtils.toNumber(purchaseAmount), { digits: 2 })}`,
+        purchaseRefundNumber: purchaseRefundNumber,
+        purchaseRefundAmount: `￥${XEUtils.commafy(XEUtils.toNumber(purchaseRefundAmount), { digits: 2 })}`,
+        purchaseLastAmount: `￥${XEUtils.commafy(XEUtils.toNumber(purchaseLastAmount), { digits: 2 })}`,
+        productBarcode: '合计',
+        warehouseName: '',
+        productName: '',
+        productStandard: '',
+        productModel: '',
+        productExtendInfo: '',
+        productUnit: '',
+      });
       return [
         {
           _index: '合计',
@@ -67,10 +84,29 @@ export default defineComponent({
       reload();
     }
 
+    function exportTable() {
+
+    }
+
+    function primaryPrint() {
+      printJS({
+        documentTitle: "EAIRP (采购统计-详情)",
+        properties: purchaseStatisticsColumns.map(item => {
+          return { field: item.dataIndex, displayName: item.title }
+        }),
+        printable: printTableData.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 {
       registerTable,
       handleSuccess,
       handleCancel,
+      exportTable,
+      primaryPrint
     }
   }
 })
diff --git a/web/src/views/report/retailStatistics.vue b/web/src/views/report/retailStatistics.vue
index 1aa31c46..7b252534 100644
--- a/web/src/views/report/retailStatistics.vue
+++ b/web/src/views/report/retailStatistics.vue
@@ -2,8 +2,8 @@
   <div>
     <BasicTable @register="registerTable">
       <template #toolbar>
-        <a-button type="primary" @click=""> 导出</a-button>
-        <a-button @click=""> 打印</a-button>
+        <a-button @click="exportTable">导出</a-button>
+        <a-button @click="primaryPrint" type="primary">普通打印</a-button>
       </template>
     </BasicTable>
   </div>
@@ -12,17 +12,19 @@
 </div>
 
 <script lang="ts">
-import {defineComponent} from "vue";
+import {defineComponent, ref} from "vue";
 import {BasicTable, TableAction, useTable} from "@/components/Table";
 import {searchRetailSchema, retailStatisticsColumns} from "@/views/report/report.data";
 import {Tag} from "ant-design-vue";
 import {getRetailStatistics} from "@/api/report/report";
 import XEUtils from "xe-utils";
+import printJS from "print-js";
 
 export default defineComponent({
   name: 'RetailStatistics',
   components: {Tag, TableAction, BasicTable},
   setup() {
+    const printTableData = ref<any[]>([]);
     const [registerTable, { reload }] = useTable({
       title: '零售统计报表',
       api: getRetailStatistics,
@@ -48,6 +50,22 @@ export default defineComponent({
       const retailRefundNumber = tableData.reduce((prev, next) => prev + next.retailRefundNumber, 0);
       const retailRefundAmount = tableData.reduce((prev, next) => prev + next.retailRefundAmount, 0);
       const retailLastAmount = tableData.reduce((prev, next) => prev + next.retailLastAmount, 0);
+      // 将数据写入到printTableData里面
+      printTableData.value = tableData;
+      printTableData.value.push({
+        retailNumber: retailNumber,
+        retailAmount: `￥${XEUtils.commafy(XEUtils.toNumber(retailAmount), { digits: 2 })}`,
+        retailRefundNumber: retailRefundNumber,
+        retailRefundAmount: `￥${XEUtils.commafy(XEUtils.toNumber(retailRefundAmount), { digits: 2 })}`,
+        retailLastAmount: `￥${XEUtils.commafy(XEUtils.toNumber(retailLastAmount), { digits: 2 })}`,
+        productBarcode: '合计',
+        warehouseName: '',
+        productName: '',
+        productStandard: '',
+        productModel: '',
+        productExtendInfo: '',
+        productUnit: '',
+      });
       return [
         {
           _index: '合计',
@@ -67,10 +85,30 @@ export default defineComponent({
       reload();
     }
 
+    function exportTable() {
+
+    }
+
+    function primaryPrint() {
+      printJS({
+        documentTitle: "EAIRP (零售统计-详情)",
+        properties: retailStatisticsColumns.map(item => {
+          return { field: item.dataIndex, displayName: item.title }
+        }),
+        printable: printTableData.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 {
       registerTable,
       handleSuccess,
       handleCancel,
+      exportTable,
+      primaryPrint
     }
   }
 })
diff --git a/web/src/views/report/saleStatistics.vue b/web/src/views/report/saleStatistics.vue
index 10999466..685bce96 100644
--- a/web/src/views/report/saleStatistics.vue
+++ b/web/src/views/report/saleStatistics.vue
@@ -2,8 +2,8 @@
   <div>
     <BasicTable @register="registerTable">
       <template #toolbar>
-        <a-button type="primary" @click=""> 导出</a-button>
-        <a-button @click=""> 打印</a-button>
+        <a-button @click="exportTable">导出</a-button>
+        <a-button @click="primaryPrint" type="primary">普通打印</a-button>
       </template>
     </BasicTable>
   </div>
@@ -12,17 +12,19 @@
 </div>
 
 <script lang="ts">
-import {defineComponent} from "vue";
+import {defineComponent, ref} from "vue";
 import {BasicTable, TableAction, useTable} from "@/components/Table";
 import {searchSalesSchema, salesStatisticsColumns} from "@/views/report/report.data";
 import {Tag} from "ant-design-vue";
 import {getSalesStatistics} from "@/api/report/report";
 import XEUtils from "xe-utils";
+import printJS from "print-js";
 
 export default defineComponent({
   name: 'SalesStatistics',
   components: {Tag, TableAction, BasicTable},
   setup() {
+    const printTableData = ref<any[]>([]);
     const [registerTable, { reload }] = useTable({
       title: '销售统计报表',
       api: getSalesStatistics,
@@ -48,6 +50,21 @@ export default defineComponent({
       const salesRefundNumber = tableData.reduce((prev, next) => prev + next.salesRefundNumber, 0);
       const salesRefundAmount = tableData.reduce((prev, next) => prev + next.salesRefundAmount, 0);
       const salesLastAmount = tableData.reduce((prev, next) => prev + next.salesLastAmount, 0);
+      printTableData.value = tableData;
+      printTableData.value.push({
+        salesNumber: salesNumber,
+        salesAmount: `￥${XEUtils.commafy(XEUtils.toNumber(salesAmount), { digits: 2 })}`,
+        salesRefundNumber: salesRefundNumber,
+        salesRefundAmount: `￥${XEUtils.commafy(XEUtils.toNumber(salesRefundAmount), { digits: 2 })}`,
+        salesLastAmount: `￥${XEUtils.commafy(XEUtils.toNumber(salesLastAmount), { digits: 2 })}`,
+        productBarcode: '合计',
+        warehouseName: '',
+        productName: '',
+        productStandard: '',
+        productModel: '',
+        productExtendInfo: '',
+        productUnit: '',
+      });
       return [
         {
           _index: '合计',
@@ -67,10 +84,29 @@ export default defineComponent({
       reload();
     }
 
+    function exportTable() {
+
+    }
+
+    function primaryPrint() {
+      printJS({
+        documentTitle: "EAIRP (销售统计-详情)",
+        properties: salesStatisticsColumns.map(item => {
+          return { field: item.dataIndex, displayName: item.title }
+        }),
+        printable: printTableData.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 {
       registerTable,
       handleSuccess,
       handleCancel,
+      exportTable,
+      primaryPrint
     }
   }
 })
diff --git a/web/src/views/report/shipmentsDetail.vue b/web/src/views/report/shipmentsDetail.vue
index e25092c1..e39e7c32 100644
--- a/web/src/views/report/shipmentsDetail.vue
+++ b/web/src/views/report/shipmentsDetail.vue
@@ -2,8 +2,8 @@
   <div>
     <BasicTable @register="registerTable">
       <template #toolbar>
-        <a-button type="primary" @click=""> 导出</a-button>
-        <a-button @click=""> 打印</a-button>
+        <a-button @click="exportTable">导出</a-button>
+        <a-button @click="primaryPrint" type="primary">普通打印</a-button>
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'receiptNumber'">
@@ -20,9 +20,12 @@
 </div>
 
 <script lang="ts">
-import {defineComponent} from "vue";
+import {defineComponent, ref} from "vue";
 import {BasicTable, TableAction, useTable} from "@/components/Table";
-import {searchShipmentsDetailSchema, shipmentsDetailStatisticsColumns} from "@/views/report/report.data";
+import {
+  searchShipmentsDetailSchema,
+  shipmentsDetailStatisticsColumns
+} from "@/views/report/report.data";
 import {Tag} from "ant-design-vue";
 import {getShipmentsDetail} from "@/api/report/report";
 import XEUtils from "xe-utils";
@@ -30,6 +33,7 @@ import {useModal} from "@/components/Modal";
 import ViewShipmentModal from "@/views/retail/shipments/components/ViewShipmentModal.vue";
 import ViewSaleShipmentsModal from "@/views/sales/shipments/components/ViewSaleShipmentsModal.vue";
 import ViewPurchaseRefundModal from "@/views/purchase/refund/components/ViewRefundModal.vue";
+import printJS from "print-js";
 
 export default defineComponent({
   name: 'ShipmentsDetailStatistics',
@@ -38,6 +42,7 @@ export default defineComponent({
     const [handleSaleShipmentsModal, {openModal: openSaleShipmentsModal}] = useModal();
     const [handlePurchaseRefundModal, {openModal: openPurchaseRefundModal}] = useModal();
     const [handleRetailShipmentModal, {openModal: openRetailShipmentModal}] = useModal();
+    const printTableData = ref<any[]>([]);
     const [registerTable, { reload }] = useTable({
       title: '出库明细报表',
       api: getShipmentsDetail,
@@ -61,6 +66,24 @@ export default defineComponent({
       const productNumber = tableData.reduce((prev, next) => prev + next.productNumber, 0);
       const amount = tableData.reduce((prev, next) => prev + next.amount, 0);
       const taxAmount = tableData.reduce((prev, next) => prev + next.taxAmount, 0);
+      printTableData.value = tableData;
+      printTableData.value.push({
+        productNumber: productNumber,
+        amount: `￥${XEUtils.commafy(XEUtils.toNumber(amount), { digits: 2 })}`,
+        taxAmount: `￥${XEUtils.commafy(XEUtils.toNumber(taxAmount), { digits: 2 })}`,
+        receiptNumber: '合计',
+        type: '',
+        name: '',
+        productBarcode: '',
+        warehouseName: '',
+        productName: '',
+        productStandard: '',
+        productModel: '',
+        productUnit: '',
+        unitPrice: '',
+        taxRate: '',
+        createTime: ''
+      });
       return [
         {
           _index: '合计',
@@ -94,6 +117,22 @@ export default defineComponent({
       }
     }
 
+    function exportTable() {
+    }
+
+    function primaryPrint() {
+      printJS({
+        documentTitle: "EAIRP (出库明细)",
+        properties: shipmentsDetailStatisticsColumns.map(item => {
+          return { field: item.dataIndex, displayName: item.title }
+        }),
+        printable: printTableData.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 {
       openReceipt,
       registerTable,
@@ -102,6 +141,8 @@ export default defineComponent({
       handleRetailShipmentModal,
       handleSaleShipmentsModal,
       handlePurchaseRefundModal,
+      exportTable,
+      primaryPrint
     }
   }
 })
diff --git a/web/src/views/report/shipmentsSummary.vue b/web/src/views/report/shipmentsSummary.vue
index e411b6af..0fd80f61 100644
--- a/web/src/views/report/shipmentsSummary.vue
+++ b/web/src/views/report/shipmentsSummary.vue
@@ -2,8 +2,8 @@
   <div>
     <BasicTable @register="registerTable">
       <template #toolbar>
-        <a-button type="primary" @click=""> 导出</a-button>
-        <a-button @click=""> 打印</a-button>
+        <a-button @click="exportTable">导出</a-button>
+        <a-button @click="primaryPrint" type="primary">普通打印</a-button>
       </template>
     </BasicTable>
   </div>
@@ -12,17 +12,22 @@
 </div>
 
 <script lang="ts">
-import {defineComponent} from "vue";
+import {defineComponent, ref} from "vue";
 import {BasicTable, TableAction, useTable} from "@/components/Table";
-import {searchShipmentsSummarySchema, shipmentsSummaryStatisticsColumns} from "@/views/report/report.data";
+import {
+  searchShipmentsSummarySchema,
+  shipmentsSummaryStatisticsColumns
+} from "@/views/report/report.data";
 import {Tag} from "ant-design-vue";
 import {getShipmentsSummary} from "@/api/report/report";
 import XEUtils from "xe-utils";
+import printJS from "print-js";
 
 export default defineComponent({
   name: 'ShipmentsSummaryStatistics',
   components: {Tag, TableAction, BasicTable},
   setup() {
+    const printTableData = ref<any[]>([]);
     const [registerTable, { reload }] = useTable({
       title: '出库汇总报表',
       api: getShipmentsSummary,
@@ -45,6 +50,19 @@ export default defineComponent({
     function handleSummary(tableData: Recordable[]) {
       const shipmentsNumber = tableData.reduce((prev, next) => prev + next.shipmentsNumber, 0);
       const shipmentsAmount = tableData.reduce((prev, next) => prev + next.shipmentsAmount, 0);
+      printTableData.value = tableData;
+      printTableData.value.push({
+        shipmentsNumber: shipmentsNumber,
+        shipmentsAmount: `￥${XEUtils.commafy(XEUtils.toNumber(shipmentsAmount), { digits: 2 })}`,
+        productBarcode: '合计',
+        warehouseName: '',
+        productName: '',
+        productCategoryName: '',
+        productStandard: '',
+        productModel: '',
+        productUnit: '',
+        createTime: ''
+      });
       return [
         {
           _index: '合计',
@@ -61,10 +79,28 @@ export default defineComponent({
       reload();
     }
 
+    function exportTable() {
+    }
+
+    function primaryPrint() {
+      printJS({
+        documentTitle: "EAIRP (出库汇总)",
+        properties: shipmentsSummaryStatisticsColumns.map(item => {
+          return { field: item.dataIndex, displayName: item.title }
+        }),
+        printable: printTableData.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 {
       registerTable,
       handleSuccess,
       handleCancel,
+      exportTable,
+      primaryPrint
     }
   }
 })
diff --git a/web/src/views/report/storageDetail.vue b/web/src/views/report/storageDetail.vue
index 1ce93163..8a43e574 100644
--- a/web/src/views/report/storageDetail.vue
+++ b/web/src/views/report/storageDetail.vue
@@ -2,8 +2,8 @@
   <div>
     <BasicTable @register="registerTable">
       <template #toolbar>
-        <a-button type="primary" @click=""> 导出</a-button>
-        <a-button @click=""> 打印</a-button>
+        <a-button @click="exportTable">导出</a-button>
+        <a-button @click="primaryPrint" type="primary">普通打印</a-button>
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'receiptNumber'">
@@ -20,9 +20,12 @@
 </div>
 
 <script lang="ts">
-import {defineComponent} from "vue";
+import {defineComponent, ref} from "vue";
 import {BasicTable, TableAction, useTable} from "@/components/Table";
-import {searchStorageDetailSchema, storageDetailStatisticsColumns} from "@/views/report/report.data";
+import {
+  searchStorageDetailSchema,
+  storageDetailStatisticsColumns
+} from "@/views/report/report.data";
 import {Tag} from "ant-design-vue";
 import {getStorageDetail} from "@/api/report/report";
 import XEUtils from "xe-utils";
@@ -30,6 +33,7 @@ import {useModal} from "@/components/Modal";
 import ViewRefundModal from "@/views/retail/refund/components/ViewRefundModal.vue";
 import ViewSaleRefundModal from "@/views/sales/refund/components/ViewSaleRefundModal.vue";
 import ViewPurchaseStorageModal from "@/views/purchase/storage/components/ViewStorageModal.vue";
+import printJS from "print-js";
 
 export default defineComponent({
   name: 'StorageDetailStatistics',
@@ -42,6 +46,7 @@ export default defineComponent({
     const [handleRetailRefundModal, {openModal: openRetailRefundModal}] = useModal();
     const [handleSaleRefundModal, {openModal: openSaleRefundModal}] = useModal();
     const [handlePurchaseStorageModal, {openModal: openPurchaseStorageModal}] = useModal();
+    const printTableData = ref<any[]>([]);
     const [registerTable, { reload }] = useTable({
       title: '入库明细报表',
       api: getStorageDetail,
@@ -65,6 +70,24 @@ export default defineComponent({
       const productNumber = tableData.reduce((prev, next) => prev + next.productNumber, 0);
       const amount = tableData.reduce((prev, next) => prev + next.amount, 0);
       const taxAmount = tableData.reduce((prev, next) => prev + next.taxAmount, 0);
+      printTableData.value = tableData;
+      printTableData.value.push({
+        productNumber: productNumber,
+        amount: `￥${XEUtils.commafy(XEUtils.toNumber(amount), { digits: 2 })}`,
+        taxAmount: `￥${XEUtils.commafy(XEUtils.toNumber(taxAmount), { digits: 2 })}`,
+        receiptNumber: '合计',
+        type: '',
+        name: '',
+        productBarcode: '',
+        warehouseName: '',
+        productName: '',
+        productStandard: '',
+        productModel: '',
+        productUnit: '',
+        unitPrice: '',
+        taxRate: '',
+        createTime: ''
+      });
       return [
         {
           _index: '合计',
@@ -98,6 +121,22 @@ export default defineComponent({
       }
     }
 
+    function exportTable() {
+    }
+
+    function primaryPrint() {
+      printJS({
+        documentTitle: "EAIRP (入库明细)",
+        properties: storageDetailStatisticsColumns.map(item => {
+          return { field: item.dataIndex, displayName: item.title }
+        }),
+        printable: printTableData.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 {
       openReceipt,
       registerTable,
@@ -106,6 +145,8 @@ export default defineComponent({
       handleRetailRefundModal,
       handleSaleRefundModal,
       handlePurchaseStorageModal,
+      exportTable,
+      primaryPrint
     }
   }
 })
diff --git a/web/src/views/report/storageSummary.vue b/web/src/views/report/storageSummary.vue
index 8034da7a..a8ec91d2 100644
--- a/web/src/views/report/storageSummary.vue
+++ b/web/src/views/report/storageSummary.vue
@@ -2,8 +2,8 @@
   <div>
     <BasicTable @register="registerTable">
       <template #toolbar>
-        <a-button type="primary" @click=""> 导出</a-button>
-        <a-button @click=""> 打印</a-button>
+        <a-button @click="exportTable">导出</a-button>
+        <a-button @click="primaryPrint" type="primary">普通打印</a-button>
       </template>
     </BasicTable>
   </div>
@@ -12,17 +12,22 @@
 </div>
 
 <script lang="ts">
-import {defineComponent} from "vue";
+import {defineComponent, ref} from "vue";
 import {BasicTable, TableAction, useTable} from "@/components/Table";
-import {searchStorageSummarySchema, storageSummaryStatisticsColumns} from "@/views/report/report.data";
+import {
+  searchStorageSummarySchema,
+  storageSummaryStatisticsColumns
+} from "@/views/report/report.data";
 import {Tag} from "ant-design-vue";
 import {getStorageSummary} from "@/api/report/report";
 import XEUtils from "xe-utils";
+import printJS from "print-js";
 
 export default defineComponent({
   name: 'StorageSummaryStatistics',
   components: {Tag, TableAction, BasicTable},
   setup() {
+    const printTableData = ref<any[]>([]);
     const [registerTable, { reload }] = useTable({
       title: '入库汇总报表',
       api: getStorageSummary,
@@ -45,6 +50,19 @@ export default defineComponent({
     function handleSummary(tableData: Recordable[]) {
       const storageNumber = tableData.reduce((prev, next) => prev + next.storageNumber, 0);
       const storageAmount = tableData.reduce((prev, next) => prev + next.storageAmount, 0);
+      printTableData.value = tableData;
+      printTableData.value.push({
+        storageNumber: storageNumber,
+        storageAmount: `￥${XEUtils.commafy(XEUtils.toNumber(storageAmount), { digits: 2 })}`,
+        productBarcode: '合计',
+        warehouseName: '',
+        productName: '',
+        productCategoryName: '',
+        productStandard: '',
+        productModel: '',
+        productUnit: '',
+        createTime: ''
+      });
       return [
         {
           _index: '合计',
@@ -61,10 +79,28 @@ export default defineComponent({
       reload();
     }
 
+    function exportTable() {
+    }
+
+    function primaryPrint() {
+      printJS({
+        documentTitle: "EAIRP (入库汇总)",
+        properties: storageSummaryStatisticsColumns.map(item => {
+          return { field: item.dataIndex, displayName: item.title }
+        }),
+        printable: printTableData.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 {
       registerTable,
       handleSuccess,
       handleCancel,
+      exportTable,
+      primaryPrint
     }
   }
 })
diff --git a/web/src/views/report/supplierBill.vue b/web/src/views/report/supplierBill.vue
index 17db953e..b758d8e2 100644
--- a/web/src/views/report/supplierBill.vue
+++ b/web/src/views/report/supplierBill.vue
@@ -2,8 +2,8 @@
   <div>
     <BasicTable @register="registerTable">
       <template #toolbar>
-        <a-button type="primary" @click=""> 导出</a-button>
-        <a-button @click=""> 打印</a-button>
+        <a-button @click="exportTable">导出</a-button>
+        <a-button @click="primaryPrint" type="primary">普通打印</a-button>
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'supplierId'">
@@ -18,7 +18,7 @@
 </div>
 
 <script lang="ts">
-import {defineComponent} from "vue";
+import {defineComponent, ref} from "vue";
 import {BasicTable, TableAction, useTable} from "@/components/Table";
 import {searchSupplierBillSchema, supplierBillColumns} from "@/views/report/report.data";
 import {Tag} from "ant-design-vue";
@@ -26,12 +26,14 @@ import {getSupplierBill} from "@/api/report/report";
 import XEUtils from "xe-utils";
 import {useModal} from "@/components/Modal";
 import SupplierBillDetailModal from "@/views/report/modal/SupplierBillDetailModal.vue";
+import printJS from "print-js";
 
 export default defineComponent({
   name: 'SupplierBill',
   components: {
     SupplierBillDetailModal, Tag, TableAction, BasicTable},
   setup() {
+    const printTableData = ref<any[]>([]);
     const [handleRegister, {openModal}] = useModal();
     const [registerTable, { reload }] = useTable({
       title: '供应商对账报表',
@@ -60,6 +62,20 @@ export default defineComponent({
       const totalPayment = tableData.reduce((prev, next) => prev + next.totalPayment, 0);
       const totalArrears = tableData.reduce((prev, next) => prev + next.totalArrears, 0);
       const remainingPaymentArrears = tableData.reduce((prev, next) => prev + next.remainingPaymentArrears, 0);
+      printTableData.value = tableData;
+      printTableData.value.push({
+        firstQuarterPayment:`￥${XEUtils.commafy(XEUtils.toNumber(firstQuarterPayment), { digits: 2 })}`,
+        secondQuarterPayment:`￥${XEUtils.commafy(XEUtils.toNumber(secondQuarterPayment), { digits: 2 })}`,
+        thirdQuarterPayment:`￥${XEUtils.commafy(XEUtils.toNumber(thirdQuarterPayment), { digits: 2 })}`,
+        fourthQuarterPayment:`￥${XEUtils.commafy(XEUtils.toNumber(fourthQuarterPayment), { digits: 2 })}`,
+        totalPayment:`￥${XEUtils.commafy(XEUtils.toNumber(totalPayment), { digits: 2 })}`,
+        totalArrears: `￥${XEUtils.commafy(XEUtils.toNumber(totalArrears), { digits: 2 })}`,
+        remainingPaymentArrears: `￥${XEUtils.commafy(XEUtils.toNumber(remainingPaymentArrears), { digits: 2 })}`,
+        supplierName: '合计',
+        contactName: '',
+        contactPhone: '',
+        email: '',
+      });
       return [
         {
           _index: '合计',
@@ -87,12 +103,31 @@ export default defineComponent({
       });
     }
 
+    function exportTable() {
+    }
+
+    function primaryPrint() {
+      const printColumns = supplierBillColumns.filter(item => item.dataIndex !== 'supplierId');
+      printJS({
+        documentTitle: "EAIRP (供应商对账)",
+        properties: printColumns.map(item => {
+          return { field: item.dataIndex, displayName: item.title }
+        }),
+        printable: printTableData.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 {
       openReceipt,
       registerTable,
       handleSuccess,
       handleCancel,
       handleRegister,
+      exportTable,
+      primaryPrint
     }
   }
 })

From 449e35f84c1d98b356a4b8e5bb830bcd0cd4f52e Mon Sep 17 00:00:00 2001
From: jameszow <jameszow@163.com>
Date: Thu, 30 Nov 2023 17:24:24 +0800
Subject: [PATCH 5/9] fetch: add printing function for financial module #244

---
 .../views/financial/advance-charge/index.vue  | 22 ++++++---
 .../components/ViewCollectionModal.vue        | 48 ++++++++++++++++++-
 .../expense/components/ViewExpenseModal.vue   | 44 ++++++++++++++++-
 .../income/components/ViewIncomeModal.vue     | 43 ++++++++++++++++-
 .../payment/components/ViewPaymentModal.vue   | 48 ++++++++++++++++++-
 .../transfer/components/ViewTransferModal.vue | 45 ++++++++++++++++-
 6 files changed, 238 insertions(+), 12 deletions(-)

diff --git a/web/src/views/financial/advance-charge/index.vue b/web/src/views/financial/advance-charge/index.vue
index 6f4efe92..e7e13199 100644
--- a/web/src/views/financial/advance-charge/index.vue
+++ b/web/src/views/financial/advance-charge/index.vue
@@ -12,8 +12,9 @@
           <TableAction
               :actions="[
               {
-                icon: 'clarity:view-line',
-                onClick: handleEdit.bind(null, record),
+                icon: 'clarity:info-standard-line',
+                tooltip: '查看收预付款单详情',
+                onClick: handleView.bind(null, record),
               },
               {
                 icon: 'clarity:note-edit-line',
@@ -39,6 +40,7 @@
       </template>
     </BasicTable>
     <AdvanceChargeModal ref="advanceChargeModalRef" @cancel="handleCancel"></AdvanceChargeModal>
+    <ViewAdvanceChargeModal @register="viewAdvanceChargeModalRef"/>
   </div>
 </template>
 <div>
@@ -52,13 +54,14 @@ import {useMessage} from "@/hooks/web/useMessage";
 import {columns, searchFormSchema} from "@/views/financial/advance-charge/advance.data";
 import {getAdvancePageList, deleteBatchAdvance, updateAdvanceStatus} from "@/api/financial/advance";
 import AdvanceChargeModal from "@/views/financial/advance-charge/components/AdvanceChargeModal.vue";
+import ViewAdvanceChargeModal from "@/views/financial/advance-charge/components/ViewAdvanceChargeModal.vue";
 import {Tag} from "ant-design-vue";
 
 export default defineComponent({
   name: 'advanceCharge',
-  components: {Tag, TableAction, BasicTable, AdvanceChargeModal },
+  components: {Tag, TableAction, BasicTable, AdvanceChargeModal, ViewAdvanceChargeModal},
   setup() {
-    const [registerModal, {openModal}] = useModal();
+    const [viewAdvanceChargeModalRef, {openModal: openAdvanceChargeModal}] = useModal();
     const { createMessage } = useMessage();
     const advanceChargeModalRef = ref(null);
     const [registerTable, { reload, getSelectRows }] = useTable({
@@ -142,17 +145,24 @@ export default defineComponent({
       reload();
     }
 
+    function handleView(record: Recordable){
+      openAdvanceChargeModal(true, {
+        id: record.id,
+      });
+    }
+
     return {
       registerTable,
-      registerModal,
       handleCreate,
       handleDelete,
       handleBatchDelete,
       handleEdit,
+      handleView,
       handleSuccess,
       handleOnStatus,
       handleCancel,
-      advanceChargeModalRef
+      advanceChargeModalRef,
+      viewAdvanceChargeModalRef
     }
   }
 })
diff --git a/web/src/views/financial/collection/components/ViewCollectionModal.vue b/web/src/views/financial/collection/components/ViewCollectionModal.vue
index 55325f12..4bac5ada 100644
--- a/web/src/views/financial/collection/components/ViewCollectionModal.vue
+++ b/web/src/views/financial/collection/components/ViewCollectionModal.vue
@@ -5,7 +5,10 @@
           title="收款单-详情"
           :sub-title= "receiptNumber">
         <template #extra>
-          <a-button key="1" 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>
@@ -61,6 +64,7 @@ import {
   Statistic,
 } from 'ant-design-vue';
 import {collectionReceiptTableColumns} from "@/views/financial/collection/collection.data";
+import printJS from "print-js";
 export default defineComponent({
   name: 'ViewExpenseModal',
   components: {
@@ -113,6 +117,46 @@ 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}">单据日期：${receiptDate.value}</div>
+    <div style="${flexItem}">单据金额：${totalCollectionAmount.value}</div>
+  </div>
+  <div style="${flexContainer}">
+    <div style="${flexItem}">收款账户：${collectionAccountName.value}</div>
+    <div style="${flexItem}">优惠金额：${discountAmount.value}</div>
+    <div style="${flexItem}">实际收款：${actualCollectionAmount.value}</div>
+  </div>
+  <div style="${flexContainer}">
+    <div style="${flexItem}">客户：${customerName.value}</div>
+    <div style="${flexItem}">财务人员：${financialPersonName.value}</div>
+    <div style="${flexItem}">备注：${remark.value}</div>
+  </div>
+`;
+      printJS({
+        documentTitle: "EAIRP (收款单单据-详情)",
+        header: header,
+        properties: collectionReceiptTableColumns.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,
       customerName,
@@ -128,6 +172,8 @@ export default defineComponent({
       registerModal,
       getTitle,
       handleSubmit,
+      exportTable,
+      primaryPrint
     };
   },
 });
diff --git a/web/src/views/financial/expense/components/ViewExpenseModal.vue b/web/src/views/financial/expense/components/ViewExpenseModal.vue
index a3f60f8e..58468fda 100644
--- a/web/src/views/financial/expense/components/ViewExpenseModal.vue
+++ b/web/src/views/financial/expense/components/ViewExpenseModal.vue
@@ -5,7 +5,10 @@
           title="支出单-详情"
           :sub-title= "receiptNumber">
         <template #extra>
-          <a-button key="1" 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="往来单位">{{ relatedPersonName }}</a-descriptions-item>
@@ -59,6 +62,7 @@ import {
   Statistic,
 } from 'ant-design-vue';
 import {expenseReceiptTableColumns} from "@/views/financial/expense/expense.data";
+import printJS from "print-js";
 export default defineComponent({
   name: 'ViewExpenseModal',
   components: {
@@ -107,6 +111,42 @@ 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}">单据日期：${receiptDate.value}</div>
+    <div style="${flexItem}">单据金额：${expenseAmount.value}</div>
+  </div>
+  <div style="${flexContainer}">
+    <div style="${flexItem}">往来单位：${relatedPersonName.value}</div>
+    <div style="${flexItem}">支出账户：${expenseAccountName.value}</div>
+    <div style="${flexItem}">财务人员：${financialPersonName.value}</div>
+    <div style="${flexItem}">备注：${remark.value}</div>
+  </div>
+`;
+      printJS({
+        documentTitle: "EAIRP (支出单单据-详情)",
+        header: header,
+        properties: expenseReceiptTableColumns.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,
       relatedPersonName,
@@ -120,6 +160,8 @@ export default defineComponent({
       registerModal,
       getTitle,
       handleSubmit,
+      exportTable,
+      primaryPrint
     };
   },
 });
diff --git a/web/src/views/financial/income/components/ViewIncomeModal.vue b/web/src/views/financial/income/components/ViewIncomeModal.vue
index 8c609e12..3fce26bf 100644
--- a/web/src/views/financial/income/components/ViewIncomeModal.vue
+++ b/web/src/views/financial/income/components/ViewIncomeModal.vue
@@ -5,7 +5,10 @@
           title="收入单-详情"
           :sub-title= "receiptNumber">
         <template #extra>
-          <a-button key="1" 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="往来单位">{{ relatedPersonName }}</a-descriptions-item>
@@ -59,6 +62,7 @@ import {
   Statistic,
 } from 'ant-design-vue';
 import {incomeReceiptTableColumns} from "@/views/financial/income/income.data";
+import printJS from "print-js";
 
 export default defineComponent({
   name: 'ViewIncomeModal',
@@ -108,6 +112,41 @@ 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}">单据日期：${receiptDate.value}</div>
+    <div style="${flexItem}">单据金额：${incomeAmount.value}</div>
+  </div>
+  <div style="${flexContainer}">
+    <div style="${flexItem}">收入账户：${incomeAccountName.value}</div>
+    <div style="${flexItem}">财务人员：${financialPersonName.value}</div>
+    <div style="${flexItem}">备注：${remark.value}</div>
+  </div>
+`;
+      printJS({
+        documentTitle: "EAIRP (收入单单据-详情)",
+        header: header,
+        properties: incomeReceiptTableColumns.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,
       relatedPersonName,
@@ -121,6 +160,8 @@ export default defineComponent({
       registerModal,
       getTitle,
       handleSubmit,
+      exportTable,
+      primaryPrint
     };
   },
 });
diff --git a/web/src/views/financial/payment/components/ViewPaymentModal.vue b/web/src/views/financial/payment/components/ViewPaymentModal.vue
index a44bb3fc..493d13d5 100644
--- a/web/src/views/financial/payment/components/ViewPaymentModal.vue
+++ b/web/src/views/financial/payment/components/ViewPaymentModal.vue
@@ -5,7 +5,10 @@
           title="付款单-详情"
           :sub-title= "receiptNumber">
         <template #extra>
-          <a-button key="1" 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="供应商">{{ supplierName }}</a-descriptions-item>
@@ -61,6 +64,7 @@ import {
   Statistic,
 } from 'ant-design-vue';
 import {paymentReceiptTableColumns} from "@/views/financial/payment/payment.data";
+import printJS from "print-js";
 export default defineComponent({
   name: 'ViewExpenseModal',
   components: {
@@ -113,6 +117,46 @@ 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}">单据日期：${receiptDate.value}</div>
+    <div style="${flexItem}">单据金额：${totalPaymentAmount.value}</div>
+  </div>
+  <div style="${flexContainer}">
+    <div style="${flexItem}">付款账户：${paymentAccountName.value}</div>
+    <div style="${flexItem}">优惠金额：${discountAmount.value}</div>
+    <div style="${flexItem}">实际付款：${actualPaymentAmount.value}</div>
+  </div>
+  <div style="${flexContainer}">
+    <div style="${flexItem}">供应商：${supplierName.value}</div>
+    <div style="${flexItem}">财务人员：${financialPersonName.value}</div>
+    <div style="${flexItem}">备注：${remark.value}</div>
+  </div>
+`;
+      printJS({
+        documentTitle: "EAIRP (付款单单据-详情)",
+        header: header,
+        properties: paymentReceiptTableColumns.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,
       supplierName,
@@ -128,6 +172,8 @@ export default defineComponent({
       registerModal,
       getTitle,
       handleSubmit,
+      exportTable,
+      primaryPrint
     };
   },
 });
diff --git a/web/src/views/financial/transfer/components/ViewTransferModal.vue b/web/src/views/financial/transfer/components/ViewTransferModal.vue
index d208b80f..116aa030 100644
--- a/web/src/views/financial/transfer/components/ViewTransferModal.vue
+++ b/web/src/views/financial/transfer/components/ViewTransferModal.vue
@@ -5,7 +5,10 @@
           title="转账单-详情"
           :sub-title= "receiptNumber">
         <template #extra>
-          <a-button key="1" 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="单据日期">{{ receiptDate }}</a-descriptions-item>
@@ -49,7 +52,7 @@
 <script lang="ts">
 import {defineComponent, ref} from 'vue';
 import {BasicTable, useTable} from '/src/components/Table';
-import {BasicModal, useModal, useModalInner} from "@/components/Modal";
+import {BasicModal, useModalInner} from "@/components/Modal";
 import {getTransferDetailById} from "@/api/financial/transfer";
 import {
   Descriptions,
@@ -58,6 +61,7 @@ import {
   Statistic,
 } from 'ant-design-vue';
 import {transferReceiptTableColumns} from "@/views/financial/transfer/transfer.data";
+import printJS from "print-js";
 
 export default defineComponent({
   name: 'ViewTransferModal',
@@ -105,6 +109,41 @@ 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}">单据日期：${receiptDate.value}</div>
+    <div style="${flexItem}">单据金额：${paymentAmount.value}</div>
+  </div>
+  <div style="${flexContainer}">
+    <div style="${flexItem}">付款账户：${paymentAccountName.value}</div>
+    <div style="${flexItem}">财务人员：${financialPersonName.value}</div>
+    <div style="${flexItem}">备注：${remark.value}</div>
+  </div>
+`;
+      printJS({
+        documentTitle: "EAIRP (转账单单据-详情)",
+        header: header,
+        properties: transferReceiptTableColumns.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,
       receiptDate,
@@ -117,6 +156,8 @@ export default defineComponent({
       registerModal,
       getTitle,
       handleSubmit,
+      exportTable,
+      primaryPrint
     };
   },
 });

From ddde3aef350947fbecb33b61e1f095df8f4aa6cc Mon Sep 17 00:00:00 2001
From: jameszow <jameszow@163.com>
Date: Thu, 30 Nov 2023 17:24:47 +0800
Subject: [PATCH 6/9] fetch: add printing function for purchase module #244

---
 .../order/components/ViewOrderModal.vue       | 54 ++++++++++++++++--
 .../refund/components/ViewRefundModal.vue     | 55 ++++++++++++++++--
 .../storage/components/ViewStorageModal.vue   | 57 ++++++++++++++++---
 3 files changed, 149 insertions(+), 17 deletions(-)

diff --git a/web/src/views/purchase/order/components/ViewOrderModal.vue b/web/src/views/purchase/order/components/ViewOrderModal.vue
index 7b846666..236d2d54 100644
--- a/web/src/views/purchase/order/components/ViewOrderModal.vue
+++ b/web/src/views/purchase/order/components/ViewOrderModal.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="供应商">{{ supplierName }}</a-descriptions-item>
@@ -64,6 +64,7 @@ import {
   PageHeader,
   Statistic,
 } from 'ant-design-vue';
+import printJS from "print-js";
 
 export default defineComponent({
   name: 'ViewPurchaseOrderModal',
@@ -118,6 +119,47 @@ export default defineComponent({
     function handleSubmit() {
       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}">供应商：${supplierName.value}</div>
+    <div style="${flexItem}">备注：${remark.value}</div>
+  </div>
+`;
+      printJS({
+        documentTitle: "EAIRP (采购订单单据-详情)",
+        header: header,
+        properties: purchaseOrderTableColumns.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,
@@ -133,7 +175,9 @@ export default defineComponent({
       registerTable,
       registerModal,
       getTitle,
-      handleSubmit
+      handleSubmit,
+      exportTable,
+      primaryPrint,
     };
   },
 });
diff --git a/web/src/views/purchase/refund/components/ViewRefundModal.vue b/web/src/views/purchase/refund/components/ViewRefundModal.vue
index c558f1aa..e150aa6e 100644
--- a/web/src/views/purchase/refund/components/ViewRefundModal.vue
+++ b/web/src/views/purchase/refund/components/ViewRefundModal.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="4">
           <a-descriptions-item label="供应商">{{ supplierName }}</a-descriptions-item>
@@ -71,6 +71,7 @@ import {
   PageHeader,
   Statistic,
 } from 'ant-design-vue';
+import printJS from "print-js";
 
 export default defineComponent({
   name: 'ViewPurchaseRefundModal',
@@ -145,6 +146,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}">供应商：${supplierName.value}</div>
+    <div style="${flexItem}">备注：${remark.value}</div>
+  </div>
+`;
+      printJS({
+        documentTitle: "EAIRP (采购退货单据-详情)",
+        header: header,
+        properties: purchaseOrderTableColumns.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,
@@ -166,7 +209,9 @@ export default defineComponent({
       handleSubmit,
       viewRefundReceipt,
       viewOrderReceipt,
-      viewStorageReceiptModal
+      viewStorageReceiptModal,
+      primaryPrint,
+      exportTable
     };
   },
 });
diff --git a/web/src/views/purchase/storage/components/ViewStorageModal.vue b/web/src/views/purchase/storage/components/ViewStorageModal.vue
index 373fbbca..3f4d92d2 100644
--- a/web/src/views/purchase/storage/components/ViewStorageModal.vue
+++ b/web/src/views/purchase/storage/components/ViewStorageModal.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="4">
           <a-descriptions-item label="供应商">{{ supplierName }}</a-descriptions-item>
@@ -71,6 +71,7 @@ import {
   PageHeader,
   Statistic,
 } from 'ant-design-vue';
+import printJS from "print-js";
 
 export default defineComponent({
   name: 'ViewPurchaseStorageModal',
@@ -94,7 +95,6 @@ export default defineComponent({
     const otherAmount = ref('');
     const thisPaymentAmount = ref('');
     const thisArrearsAmount = ref('');
-    const deposit = ref('');
     const accountName = ref('');
     const remark = ref('')
     const status = ref();
@@ -140,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}">单据金额：${paymentLastAmount.value}</div>
+    <div style="${flexItem}">单据日期：${receiptDate.value}</div>
+  </div>
+  <div style="${flexContainer}">
+    <div style="${flexItem}">结算账户：${accountName.value}</div>
+    <div style="${flexItem}">优惠率：${paymentRate.value}</div>
+    <div style="${flexItem}">付款优惠：${paymentAmount.value}</div>
+    <div style="${flexItem}">其他费用：${otherAmount.value}</div>
+  </div>
+  <div style="${flexContainer}">
+    <div style="${flexItem}">本次付款：${thisPaymentAmount.value}</div>
+    <div style="${flexItem}">本次欠款：${thisArrearsAmount.value}</div>
+    <div style="${flexItem}">供应商：${supplierName.value}</div>
+    <div style="${flexItem}">备注：${remark.value}</div>
+  </div>
+`;
+      printJS({
+        documentTitle: "EAIRP (采购入库单据-详情)",
+        header: header,
+        properties: purchaseOrderTableColumns.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,
@@ -147,7 +189,6 @@ export default defineComponent({
       paymentRate,
       receiptDate,
       paymentAmount,
-      deposit,
       paymentLastAmount,
       otherAmount,
       thisPaymentAmount,
@@ -160,7 +201,9 @@ export default defineComponent({
       getTitle,
       handleSubmit,
       viewOrderReceiptModal,
-      viewOrderReceipt
+      viewOrderReceipt,
+      exportTable,
+      primaryPrint
     };
   },
 });

From 870e2c694956ce970b1ad9d968010c3e19e6c75e Mon Sep 17 00:00:00 2001
From: jameszow <jameszow@163.com>
Date: Thu, 30 Nov 2023 17:25:11 +0800
Subject: [PATCH 7/9] fetch: add printing function for retail module #244

---
 .../refund/components/ViewRefundModal.vue     | 53 +++++++++++++++--
 .../components/ViewShipmentModal.vue          | 59 +++++++++++++++++--
 2 files changed, 101 insertions(+), 11 deletions(-)

diff --git a/web/src/views/retail/refund/components/ViewRefundModal.vue b/web/src/views/retail/refund/components/ViewRefundModal.vue
index d88fe0c7..5941f7c8 100644
--- a/web/src/views/retail/refund/components/ViewRefundModal.vue
+++ b/web/src/views/retail/refund/components/ViewRefundModal.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="会员">{{ memberName }}</a-descriptions-item>
@@ -68,6 +68,7 @@ import {
 } from 'ant-design-vue';
 import {retailShipmentsTableColumns} from "@/views/retail/shipments/shipments.data";
 import ViewShipmentModal from "@/views/retail/shipments/components/ViewShipmentModal.vue";
+import printJS from "print-js";
 
 export default defineComponent({
   name: 'ViewRefundModal',
@@ -134,6 +135,46 @@ export default defineComponent({
       });
     }
 
+    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}">单据金额：${receiptAmount.value}</div>
+    <div style="${flexItem}">单据日期：${receiptDate.value}</div>
+  </div>
+  <div style="${flexContainer}">
+    <div style="${flexItem}">付款账户：${accountName.value}</div>
+    <div style="${flexItem}">付款金额：${paymentType.value}</div>
+    <div style="${flexItem}">付款金额：${paymentAmount.value}</div>
+  </div>
+  <div style="${flexContainer}">
+    <div style="${flexItem}">找零：${backAmount.value}</div>
+    <div style="${flexItem}">会员：${memberName.value}</div>
+    <div style="${flexItem}">备注：${remark.value}</div>
+  </div>
+`;
+      printJS({
+        documentTitle: "EAIRP (零售退货单据-详情)",
+        header: header,
+        properties: retailShipmentsTableColumns.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,
       memberName,
@@ -152,7 +193,9 @@ export default defineComponent({
       handleSubmit,
       otherReceipt,
       viewShipmentReceipt,
-      viewShipmentReceiptModal
+      viewShipmentReceiptModal,
+      exportTable,
+      primaryPrint
     };
   },
 });
diff --git a/web/src/views/retail/shipments/components/ViewShipmentModal.vue b/web/src/views/retail/shipments/components/ViewShipmentModal.vue
index 1ddb7244..78b40695 100644
--- a/web/src/views/retail/shipments/components/ViewShipmentModal.vue
+++ b/web/src/views/retail/shipments/components/ViewShipmentModal.vue
@@ -3,12 +3,12 @@
     <div class="components-page-header-demo-responsive" style="border: 1px solid rgb(235, 237, 240)">
       <a-page-header
           title="零售出库-详情"
-          :sub-title= "receiptNumber">
+          :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="会员">{{ memberName }}</a-descriptions-item>
@@ -60,6 +60,7 @@ import {defineComponent, ref} from 'vue';
 import {BasicTable, useTable} from '/src/components/Table';
 import {BasicModal, useModalInner} from "@/components/Modal";
 import {getLinkShipmentsDetail} from "@/api/retail/shipments";
+import printJS from 'print-js';
 import {
   Descriptions,
   DescriptionsItem,
@@ -128,6 +129,50 @@ 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}">单据金额：${receiptAmount.value}</div>
+    <div style="${flexItem}">单据日期：${receiptDate.value}</div>
+  </div>
+  <div style="${flexContainer}">
+    <div style="${flexItem}">收款账户：${accountName.value}</div>
+    <div style="${flexItem}">收款类型：${paymentType.value}</div>
+    <div style="${flexItem}">收款金额：${collectAmount.value}</div>
+  </div>
+  <div style="${flexContainer}">
+    <div style="${flexItem}">找零：${backAmount.value}</div>
+    <div style="${flexItem}">会员：${memberName.value}</div>
+    <div style="${flexItem}">备注：${remark.value}</div>
+  </div>
+`;
+      printJS({
+        documentTitle: "EAIRP (零售出库单据-详情)",
+        header: header,
+        properties: retailShipmentsTableColumns.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',
+      });
+    }
+
+    function triplePrint() {
+
+    }
+
     return {
       receiptNumber,
       otherReceipt,
@@ -145,7 +190,9 @@ export default defineComponent({
       registerModal,
       getTitle,
       handleSubmit,
-      viewRefundReceipt
+      viewRefundReceipt,
+      exportTable,
+      primaryPrint
     };
   },
 });

From 2fe5d9843b35d5f6d24ac812210721da3e6c015a Mon Sep 17 00:00:00 2001
From: jameszow <jameszow@163.com>
Date: Thu, 30 Nov 2023 17:25:27 +0800
Subject: [PATCH 8/9] 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">
         <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
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">
         <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
index 856869c0..e2e51cf0 100644
--- 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
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">
         <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
     };
   },
 });

From 5a538eda3d9cf9f477c9b017394ba8170647b2f4 Mon Sep 17 00:00:00 2001
From: jameszow <jameszow@163.com>
Date: Thu, 30 Nov 2023 17:25:40 +0800
Subject: [PATCH 9/9] fetch: add printing function for warehouse module #244

---
 .../components/ViewAllotShipmentsModal.vue    | 43 +++++++++++++++--
 .../assemble/components/ViewAssembleModal.vue | 42 +++++++++++++++--
 .../components/ViewDisassembleModal.vue       | 46 ++++++++++++++++---
 .../components/ViewOtherShipmentsModal.vue    | 45 ++++++++++++++++--
 .../components/ViewOtherStorageModal.vue      | 45 ++++++++++++++++--
 5 files changed, 196 insertions(+), 25 deletions(-)

diff --git a/web/src/views/warehouse/allot/components/ViewAllotShipmentsModal.vue b/web/src/views/warehouse/allot/components/ViewAllotShipmentsModal.vue
index d7b9a70f..69fc0b4a 100644
--- a/web/src/views/warehouse/allot/components/ViewAllotShipmentsModal.vue
+++ b/web/src/views/warehouse/allot/components/ViewAllotShipmentsModal.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="单据日期">{{ receiptDate }}</a-descriptions-item>
@@ -55,6 +55,7 @@ import {
   PageHeader,
   Statistic,
 } from 'ant-design-vue';
+import printJS from "print-js";
 
 export default defineComponent({
   name: 'ViewAllotShipmentsModal',
@@ -88,7 +89,6 @@ export default defineComponent({
       const res = await getAllotShipmentsDetailById(data.id);
       tableData.value = res.data.tableData;
       receiptNumber.value = res.data.receiptNumber;
-      customerName.value = res.data.customerName;
       receiptDate.value = res.data.receiptDate;
       remark.value = res.data.remark;
       status.value = res.data.status;
@@ -98,6 +98,37 @@ 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}">单据日期：${receiptDate.value}</div>
+    <div style="${flexItem}">备注：${remark.value}</div>
+  </div>
+
+`;
+      printJS({
+        documentTitle: "EAIRP (调拨出库单单据-详情)",
+        header: header,
+        properties: allotShipmentTableColumns.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,
       customerName,
@@ -108,6 +139,8 @@ export default defineComponent({
       registerModal,
       getTitle,
       handleSubmit,
+      exportTable,
+      primaryPrint
     };
   },
 });
diff --git a/web/src/views/warehouse/assemble/components/ViewAssembleModal.vue b/web/src/views/warehouse/assemble/components/ViewAssembleModal.vue
index 4044027c..7f4550de 100644
--- a/web/src/views/warehouse/assemble/components/ViewAssembleModal.vue
+++ b/web/src/views/warehouse/assemble/components/ViewAssembleModal.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="单据日期">{{ receiptDate }}</a-descriptions-item>
@@ -55,6 +55,7 @@ import {
   PageHeader,
   Statistic,
 } from 'ant-design-vue';
+import printJS from "print-js";
 
 export default defineComponent({
   name: 'ViewAssembleModal',
@@ -95,6 +96,37 @@ 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}">单据日期：${receiptDate.value}</div>
+    <div style="${flexItem}">备注：${remark.value}</div>
+  </div>
+
+`;
+      printJS({
+        documentTitle: "EAIRP (组装单单据-详情)",
+        header: header,
+        properties: assembleTableColumns.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,
       receiptDate,
@@ -104,6 +136,8 @@ export default defineComponent({
       registerModal,
       getTitle,
       handleSubmit,
+      exportTable,
+      primaryPrint
     };
   },
 });
diff --git a/web/src/views/warehouse/disassemble/components/ViewDisassembleModal.vue b/web/src/views/warehouse/disassemble/components/ViewDisassembleModal.vue
index 25f0d822..9fb6068e 100644
--- a/web/src/views/warehouse/disassemble/components/ViewDisassembleModal.vue
+++ b/web/src/views/warehouse/disassemble/components/ViewDisassembleModal.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="单据日期">{{ receiptDate }}</a-descriptions-item>
@@ -48,13 +48,14 @@ import {defineComponent, ref} from 'vue';
 import {BasicTable, useTable} from '/src/components/Table';
 import {BasicModal, useModalInner} from "@/components/Modal";
 import {getAssembleDetailById} from "@/api/warehouse/assemble";
-import {assembleTableColumns} from "@/views/warehouse/assemble/assemble.data";
+import {disAssembleTableColumns} from "@/views/warehouse/disassemble/disassemble.data";
 import {
   Descriptions,
   DescriptionsItem,
   PageHeader,
   Statistic,
 } from 'ant-design-vue';
+import printJS from "print-js";
 
 export default defineComponent({
   name: 'ViewDisassembleModal',
@@ -74,7 +75,7 @@ export default defineComponent({
     const tableData = ref([]);
     const [registerTable] = useTable({
       title: '拆卸单表数据',
-      columns: assembleTableColumns,
+      columns: disAssembleTableColumns,
       dataSource: tableData,
       pagination: false,
       showIndexColumn: false,
@@ -95,6 +96,37 @@ 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}">单据日期：${receiptDate.value}</div>
+    <div style="${flexItem}">备注：${remark.value}</div>
+  </div>
+
+`;
+      printJS({
+        documentTitle: "EAIRP (拆卸单单据-详情)",
+        header: header,
+        properties: disAssembleTableColumns.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,
       receiptDate,
@@ -104,6 +136,8 @@ export default defineComponent({
       registerModal,
       getTitle,
       handleSubmit,
+      exportTable,
+      primaryPrint
     };
   },
 });
diff --git a/web/src/views/warehouse/shipments/components/ViewOtherShipmentsModal.vue b/web/src/views/warehouse/shipments/components/ViewOtherShipmentsModal.vue
index 4115911a..364bcd6c 100644
--- a/web/src/views/warehouse/shipments/components/ViewOtherShipmentsModal.vue
+++ b/web/src/views/warehouse/shipments/components/ViewOtherShipmentsModal.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>
@@ -56,6 +56,7 @@ import {
   PageHeader,
   Statistic,
 } from 'ant-design-vue';
+import printJS from "print-js";
 
 export default defineComponent({
   name: 'ViewOtherStorageModal',
@@ -107,6 +108,38 @@ 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}">单据日期：${receiptDate.value}</div>
+    <div style="${flexItem}">客户：${customerName.value}</div>
+    <div style="${flexItem}">备注：${remark.value}</div>
+  </div>
+
+`;
+      printJS({
+        documentTitle: "EAIRP (其他出库单单据-详情)",
+        header: header,
+        properties: otherShipmentTableColumns.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,
       customerName,
@@ -118,7 +151,9 @@ export default defineComponent({
       getTitle,
       handleSubmit,
       viewOrderReceiptModal,
-      viewOrderReceipt
+      viewOrderReceipt,
+      exportTable,
+      primaryPrint
     };
   },
 });
diff --git a/web/src/views/warehouse/storage/components/ViewOtherStorageModal.vue b/web/src/views/warehouse/storage/components/ViewOtherStorageModal.vue
index 3bc55c09..8530b7d3 100644
--- a/web/src/views/warehouse/storage/components/ViewOtherStorageModal.vue
+++ b/web/src/views/warehouse/storage/components/ViewOtherStorageModal.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="供应商">{{ supplierName }}</a-descriptions-item>
@@ -56,6 +56,7 @@ import {
   PageHeader,
   Statistic,
 } from 'ant-design-vue';
+import printJS from "print-js";
 
 export default defineComponent({
   name: 'ViewOtherStorageModal',
@@ -107,6 +108,38 @@ 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}">单据日期：${receiptDate.value}</div>
+    <div style="${flexItem}">供应商：${supplierName.value}</div>
+    <div style="${flexItem}">备注：${remark.value}</div>
+  </div>
+
+`;
+      printJS({
+        documentTitle: "EAIRP (其他入库单单据-详情)",
+        header: header,
+        properties: otherStorageTableColumns.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,
       supplierName,
@@ -118,7 +151,9 @@ export default defineComponent({
       getTitle,
       handleSubmit,
       viewOrderReceiptModal,
-      viewOrderReceipt
+      viewOrderReceipt,
+      exportTable,
+      primaryPrint
     };
   },
 });