feat(excel): import/export (#40)

src/views/demo/comp/excel/ExportToExcel.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <BasicTable title="基础表格" :columns="columns" :dataSource="data">
+      <template #toolbar>
+        <a-button @click="openModal">JSON格式导出：默认头部</a-button>
+        <a-button @click="customHeader">JSON格式导出：自定义头部</a-button>
+        <a-button @click="aoaToExcel">二维数组格式导出</a-button>
+      </template>
+    </BasicTable>
+    <ExportExcelModel @register="register" @success="defaultHeader" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable } from '/@/components/Table';
+  import {
+    jsonToSheetXlsx,
+    aoaToSheetXlsx,
+    ExportExcelModel,
+    ExportModalResult,
+  } from '/@/components/Excel';
+  import { columns, data, arrHeader, arrData } from './data';
+  import { useModal } from '/@/components/Modal';
+
+  export default defineComponent({
+    components: { BasicTable, ExportExcelModel },
+    setup() {
+      function defaultHeader({ filename, bookType }: ExportModalResult) {
+        // 默认Object.keys(data[0])作为header
+        jsonToSheetXlsx({
+          data,
+          filename,
+          write2excelOpts: {
+            bookType,
+          },
+        });
+      }
+      function customHeader() {
+        jsonToSheetXlsx({
+          data,
+          header: {
+            id: 'ID',
+            name: '姓名',
+            age: '年龄',
+            no: '编号',
+            address: '地址',
+            beginTime: '开始时间',
+            endTime: '结束时间',
+          },
+          filename: '文件名头部修改.xlsx',
+          json2sheetOpts: {
+            // 指定顺序
+            header: ['name', 'id'],
+          },
+        });
+      }
+      function aoaToExcel() {
+        // 保证data顺序与header一致
+        aoaToSheetXlsx({
+          data: arrData,
+          header: arrHeader,
+          filename: '数组方式导出excel.xlsx',
+        });
+      }
+      const [register, { openModal }] = useModal();
+
+      return {
+        defaultHeader,
+        customHeader,
+        aoaToExcel,
+        columns,
+        data,
+        register,
+        openModal,
+      };
+    },
+  });
+</script>

src/views/demo/comp/excel/ImportExcel.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <ImportExcel @success="loadDataSuccess">
+      <a-button class="m-3">导入Excel</a-button>
+    </ImportExcel>
+    <BasicTable
+      v-for="(table, index) in tableListRef"
+      :key="index"
+      :title="table.title"
+      :columns="table.columns"
+      :dataSource="table.dataSource"
+    ></BasicTable>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+
+  import { ImportExcel, ExcelData } from '/@/components/Excel';
+  import { BasicTable, BasicColumn } from '/@/components/Table';
+
+  export default defineComponent({
+    components: { BasicTable, ImportExcel },
+
+    setup() {
+      const tableListRef = ref<
+        {
+          title: string;
+          columns?: any[];
+          dataSource?: any[];
+        }[]
+      >([]);
+
+      function loadDataSuccess(excelDataList: ExcelData[]) {
+        tableListRef.value = [];
+        console.log(excelDataList);
+        for (const excelData of excelDataList) {
+          const {
+            header,
+            results,
+            meta: { sheetName },
+          } = excelData;
+          const columns: BasicColumn[] = [];
+          for (const title of header) {
+            columns.push({ title, dataIndex: title });
+          }
+          tableListRef.value.push({ title: sheetName, dataSource: results, columns });
+        }
+      }
+
+      return {
+        loadDataSuccess,
+        tableListRef,
+      };
+    },
+  });
+</script>

src/views/demo/comp/excel/data.ts

@@ -0,0 +1,59 @@
+import { BasicColumn } from '/@/components/Table';
+
+export const columns: BasicColumn[] = [
+  {
+    title: 'ID',
+    dataIndex: 'id',
+    width: 80,
+  },
+  {
+    title: '姓名',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '年龄',
+    dataIndex: 'age',
+    width: 80,
+  },
+  {
+    title: '编号',
+    dataIndex: 'no',
+    width: 80,
+  },
+  {
+    title: '地址',
+    dataIndex: 'address',
+  },
+  {
+    title: '开始时间',
+    dataIndex: 'beginTime',
+  },
+  {
+    title: '结束时间',
+    dataIndex: 'endTime',
+  },
+];
+
+export const data: any[] = (() => {
+  const arr: any[] = [];
+  for (let index = 0; index < 40; index++) {
+    arr.push({
+      id: `${index}`,
+      name: `${index} John Brown`,
+      age: `${index + 10}`,
+      no: `${index}98678`,
+      address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park',
+      beginTime: new Date().toLocaleString(),
+      endTime: new Date().toLocaleString(),
+    });
+  }
+  return arr;
+})();
+
+// ["ID", "姓名", "年龄", "编号", "地址", "开始时间", "结束时间"]
+export const arrHeader = columns.map((column) => column.title);
+// [["ID", "姓名", "年龄", "编号", "地址", "开始时间", "结束时间"],["0", "0 John Brown", "10", "098678"]]
+export const arrData = data.map((item) => {
+  return Object.keys(item).map((key) => item[key]);
+});