fix(excel): update excel demo

jq
1 parent 7101587b
Showing 10 changed files with 154 additions and 73 deletions
src/components/Excel/src/ExportExcelModel.vue
src/router/menus/modules/demo/charts.ts
src/router/menus/modules/demo/comp.ts
src/router/routes/modules/demo/charts.ts
src/router/routes/modules/demo/comp.ts
src/views/demo/echarts/excel/ArrayExport.vue
src/views/demo/echarts/excel/CustomExport.vue
src/views/demo/comp/excel/ImportExcel.vue → src/views/demo/echarts/excel/ImportExcel.vue
src/views/demo/comp/excel/ExportToExcel.vue → src/views/demo/echarts/excel/JsonExport.vue
src/views/demo/comp/excel/data.ts → src/views/demo/echarts/excel/data.ts
@@ -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', {
@@ -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: '导入',
+      },
+      //     ],
+      //   },
     ],
   },
 };
@@ -66,20 +66,6 @@ const menu: MenuModule = {
         path: '/strength-meter',
         name: '密码强度组件',
       },
-      {
-        path: '/excel',
-        name: 'excel',
-        children: [
-          {
-            path: '/export',
-            name: 'Export',
-          },
-          {
-            path: '/import',
-            name: 'Import',
-          },
-        ],
-      },
     ],
   },
 };
@@ -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;
@@ -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;
+<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>
+<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>
 <template>
-  <div>
+  <div class="m-4">
     <ImportExcel @success="loadDataSuccess">
       <a-button class="m-3">导入Excel</a-button>
     </ImportExcel>
 <template>
-  <div>
+  <div class="m-4">
     <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>
+        <a-button @click="defaultHeader">导出：默认头部</a-button>
+        <a-button @click="customHeader">导出：自定义头部</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';
+  import { jsonToSheetXlsx, ExportExcelModel } from '/@/components/Excel';
+  import { columns, data } from './data';
  
   export default defineComponent({
     components: { BasicTable, ExportExcelModel },
     setup() {
-      function defaultHeader({ filename, bookType }: ExportModalResult) {
+      function defaultHeader() {
         // 默认Object.keys(data[0])作为header
         jsonToSheetXlsx({
           data,
-          filename,
-          write2excelOpts: {
-            bookType,
-          },
+          filename: '使用key作为默认头部.xlsx',
         });
       }
       function customHeader() {
@@ -48,31 +37,19 @@
             beginTime: '开始时间',
             endTime: '结束时间',
           },
-          filename: '文件名头部修改.xlsx',
+          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,
       };
     },
   });