✨ feat: 增加导出excel按钮

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",

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();
 });

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 };