From ae216140dcae830b4ad818903ac19c9cf09f9260 Mon Sep 17 00:00:00 2001
From: ycy <2861518472@qq.com>
Date: Tue, 9 Apr 2024 17:18:01 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E5=A2=9E=E5=8A=A0=E5=AF=BC?=
 =?UTF-8?q?=E5=87=BAexcel=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  2 ++
 .../finance-bill-manage/detailReport.vue      | 32 +++++++++++++++++++
 src/utils/excel.js                            | 24 ++++++++++++++
 3 files changed, 58 insertions(+)
 create mode 100644 src/utils/excel.js

diff --git a/package.json b/package.json
index a027f07..beb66d2 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,8 @@
     "axios": "^1.6.8",
     "dayjs": "^1.11.10",
     "echarts": "^5.5.0",
+    "exceljs": "^4.4.0",
+    "file-saver": "^2.0.5",
     "less": "^4.2.0",
     "mockjs": "^1.1.0",
     "pinia": "^2.1.7",
diff --git a/src/pages/finance-bill-manage/detailReport.vue b/src/pages/finance-bill-manage/detailReport.vue
index e25e79e..578b0b7 100644
--- a/src/pages/finance-bill-manage/detailReport.vue
+++ b/src/pages/finance-bill-manage/detailReport.vue
@@ -29,6 +29,9 @@
             <h4 style="font-size: 110%">报表明细</h4>
           </div>
           <div>
+            <t-button theme="primary" size="small" @click="exportExcel">
+              导出报表明细
+            </t-button>
             <t-button
               shape="circle"
               theme="primary"
@@ -63,6 +66,7 @@ import { ref, onMounted } from "vue";
 import { MessagePlugin } from "tdesign-vue-next";
 import { LoadIcon } from "tdesign-icons-vue-next";
 import { reqDetailReportList } from "@/api/finance-bill-manage/detailReportList";
+import { ExcelUtils } from "@/utils/excel";
 
 const tableData = ref([]);
 const dataList = ref([]);
@@ -171,6 +175,34 @@ const resetting = () => {
 const refresh = () => {
   tableList();
 };
+
+// 导出excel
+const exportExcel = () => {
+  const title = "报表明细excel";
+  const titleFile = "报表明细";
+  const columns = [
+    { header: "部门", key: "1", width: 20 },
+    { header: "入库量", key: "2", width: 20 },
+    { header: "退库量", key: "3", width: 20 },
+    { header: "领用量", key: "4", width: 20 },
+    { header: "报损量", key: "5", width: 20 },
+    { header: "核销量", key: "6", width: 20 },
+    { header: "总票据比例", key: "7", width: 20 },
+  ];
+  const addRow = [];
+  tableData.value.forEach((item) => {
+    addRow.push({
+      1: item.branch,
+      2: item.stockNum,
+      3: item.cancelNum,
+      4: item.receiveNum,
+      5: item.breakNum,
+      6: item.destoryNum,
+      7: item.grossBillRatio,
+    });
+  });
+  ExcelUtils(title, titleFile, columns, addRow);
+};
 onMounted(() => {
   tableList();
 });
diff --git a/src/utils/excel.js b/src/utils/excel.js
new file mode 100644
index 0000000..17e7935
--- /dev/null
+++ b/src/utils/excel.js
@@ -0,0 +1,24 @@
+import ExcelJS from "exceljs";
+import saveAs from "file-saver"; // 引入FileSaver.js以使用saveAs函数
+
+const ExcelUtils = (title, titleFile, columns, addRow) => {
+  // 创建一个新的工作簿
+  const workbook = new ExcelJS.Workbook();
+  // 添加一个新的工作表
+  const worksheet = workbook.addWorksheet(title);
+  // 添加表头
+  worksheet.columns = columns;
+  // 添加数据行
+  for (const row of addRow) {
+    worksheet.addRow(row);
+  }
+  // 写入文件并下载
+  workbook.xlsx.writeBuffer().then((buffer) => {
+    const blob = new Blob([buffer], {
+      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    });
+    saveAs(blob, `${titleFile}.xlsx`);
+  });
+};
+
+export { ExcelUtils };