fix(excel): update excel demo

src/components/Excel/src/ExportExcelModel.vue

@@ -12,6 +12,7 @@
   import { defineComponent } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
+  import { ExportModalResult } from './types';
 
   const schemas: FormSchema[] = [
     {
@@ -59,7 +60,7 @@
       const [registerModal, { closeModal }] = useModalInner();
 
       async function handleOk() {
-        const res = await validateFields();
+        const res: ExportModalResult = await validateFields();
         const { filename, bookType } = res;
 
         emit('success', {

src/router/menus/modules/demo/charts.ts

@@ -27,6 +27,28 @@ const menu: MenuModule = {
           },
         ],
       },
+      //   {
+      // path: '/excel',
+      // name: 'excel',
+      // children: [
+      {
+        path: '/customExport',
+        name: '选择导出格式',
+      },
+      {
+        path: '/jsonExport',
+        name: 'JSON数据导出',
+      },
+      {
+        path: '/arrayExport',
+        name: 'Array数据导出',
+      },
+      {
+        path: '/importExcel',
+        name: '导入',
+      },
+      //     ],
+      //   },
     ],
   },
 };

src/router/menus/modules/demo/comp.ts

@@ -66,20 +66,6 @@ const menu: MenuModule = {
         path: '/strength-meter',
         name: '密码强度组件',
       },
-      {
-        path: '/excel',
-        name: 'excel',
-        children: [
-          {
-            path: '/export',
-            name: 'Export',
-          },
-          {
-            path: '/import',
-            name: 'Import',
-          },
-        ],
-      },
     ],
   },
 };

src/router/routes/modules/demo/charts.ts

@@ -56,5 +56,47 @@ export default {
       },
       component: () => import('/@/views/demo/echarts/apex/index.vue'),
     },
+    // {
+    //   path: '/excel',
+    //   name: 'ExcelDemo',
+    //   redirect: '/charts/excel/export',
+    //   meta: {
+    //     title: 'excel',
+    //   },
+    //   children: [
+    {
+      path: '/customExport',
+      name: 'CustomExport',
+      component: () => import('/@/views/demo/echarts/excel/CustomExport.vue'),
+      meta: {
+        title: '选择导出格式',
+      },
+    },
+    {
+      path: '/jsonExport',
+      name: 'JsonExport',
+      component: () => import('/@/views/demo/echarts/excel/JsonExport.vue'),
+      meta: {
+        title: 'JSON数据导出',
+      },
+    },
+    {
+      path: '/arrayExport',
+      name: 'ArrayExport',
+      component: () => import('/@/views/demo/echarts/excel/ArrayExport.vue'),
+      meta: {
+        title: 'Array数据导出',
+      },
+    },
+    {
+      path: '/importExcel',
+      name: 'ImportExcel',
+      component: () => import('/@/views/demo/echarts/excel/ImportExcel.vue'),
+      meta: {
+        title: '导入',
+      },
+    },
+    //   ],
+    // },
   ],
 } as AppRouteModule;

src/router/routes/modules/demo/comp.ts

@@ -136,31 +136,5 @@ export default {
         title: '密码强度组件',
       },
     },
-    {
-      path: '/excel',
-      name: 'ExcelDemo',
-      redirect: '/comp/excel/export',
-      meta: {
-        title: 'excel',
-      },
-      children: [
-        {
-          path: 'export',
-          name: 'Export2Excel',
-          component: () => import('/@/views/demo/comp/excel/ExportToExcel.vue'),
-          meta: {
-            title: 'Export2Excel',
-          },
-        },
-        {
-          path: 'import',
-          name: 'ImportExcel',
-          component: () => import('/@/views/demo/comp/excel/ImportExcel.vue'),
-          meta: {
-            title: 'ImportExcel',
-          },
-        },
-      ],
-    },
   ],
 } as AppRouteModule;

src/views/demo/echarts/excel/ArrayExport.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="m-4">
+    <BasicTable title="基础表格" :columns="columns" :dataSource="data">
+      <template #toolbar>
+        <a-button @click="aoaToExcel">导出</a-button>
+      </template>
+    </BasicTable>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable } from '/@/components/Table';
+  import { aoaToSheetXlsx, ExportExcelModel } from '/@/components/Excel';
+  import { arrHeader, arrData, columns, data } from './data';
+
+  export default defineComponent({
+    components: { BasicTable, ExportExcelModel },
+    setup() {
+      function aoaToExcel() {
+        // 保证data顺序与header一致
+        aoaToSheetXlsx({
+          data: arrData,
+          header: arrHeader,
+          filename: '二维数组方式导出excel.xlsx',
+        });
+      }
+
+      return {
+        aoaToExcel,
+        columns,
+        data,
+      };
+    },
+  });
+</script>

src/views/demo/echarts/excel/CustomExport.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="m-4">
+    <BasicTable title="基础表格" :columns="columns" :dataSource="data">
+      <template #toolbar>
+        <a-button @click="openModal">导出</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, ExportExcelModel, ExportModalResult } from '/@/components/Excel';
+  import { columns, data } 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,
+          },
+        });
+      }
+      const [register, { openModal }] = useModal();
+
+      return {
+        defaultHeader,
+        columns,
+        data,
+        register,
+        openModal,
+      };
+    },
+  });
+</script>

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="m-4">
     <ImportExcel @success="loadDataSuccess">
       <a-button class="m-3">导入Excel</a-button>
     </ImportExcel>

src/views/demo/echarts/excel/JsonExport.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="m-4">
+    <BasicTable title="基础表格" :columns="columns" :dataSource="data">
+      <template #toolbar>
+        <a-button @click="defaultHeader">导出：默认头部</a-button>
+        <a-button @click="customHeader">导出：自定义头部</a-button>
+      </template>
+    </BasicTable>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable } from '/@/components/Table';
+  import { jsonToSheetXlsx, ExportExcelModel } from '/@/components/Excel';
+  import { columns, data } from './data';
+
+  export default defineComponent({
+    components: { BasicTable, ExportExcelModel },
+    setup() {
+      function defaultHeader() {
+        // 默认Object.keys(data[0])作为header
+        jsonToSheetXlsx({
+          data,
+          filename: '使用key作为默认头部.xlsx',
+        });
+      }
+      function customHeader() {
+        jsonToSheetXlsx({
+          data,
+          header: {
+            id: 'ID',
+            name: '姓名',
+            age: '年龄',
+            no: '编号',
+            address: '地址',
+            beginTime: '开始时间',
+            endTime: '结束时间',
+          },
+          filename: '自定义头部.xlsx',
+          json2sheetOpts: {
+            // 指定顺序
+            header: ['name', 'id'],
+          },
+        });
+      }
+
+      return {
+        defaultHeader,
+        customHeader,
+        columns,
+        data,
+      };
+    },
+  });
+</script>