From 2cdcb7153c48f7c70ef12951a97b7b65abe94861 Mon Sep 17 00:00:00 2001
From: bqy_fe <1743369777@qq.com>
Date: Wed, 5 Jan 2022 13:01:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A8=E6=A0=BC=E5=AF=BC=E5=87=BA?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   5 +-
 src/components/basic/excel/index.ts           |   8 +
 .../basic/excel/src/Export2Excel.ts           |  61 +++++
 .../basic/excel/src/ExportExcelModal.tsx      |  80 ++++++
 .../basic/excel/src/ImportExcel.vue           | 157 ++++++++++++
 src/components/basic/excel/src/typing.ts      |  27 ++
 .../components/query-form/index.vue           |  16 +-
 .../dynamic-table/components/table-action.vue |   2 -
 .../table-settings/column-setting.vue         |  18 +-
 .../table-settings/refresh-setting.vue        |   2 +-
 .../table-settings/size-setting.vue           |   8 +-
 .../components/tool-bar/index.vue             |   3 +-
 .../core/dynamic-table/dynamic-table.vue      |  37 ++-
 .../core/dynamic-table/hooks/index.ts         |   4 +-
 .../dynamic-table/hooks/useExpandLoading.ts   |  29 ---
 .../hooks/useExportData2Excel.ts              |  41 ++++
 .../core/dynamic-table/hooks/usePagination.ts |   4 +-
 .../dynamic-table/hooks/useTableContext.ts    |  12 +-
 src/components/core/dynamic-table/props.ts    |  24 ++
 src/components/core/dynamic-table/typing.ts   |  16 +-
 src/components/core/schema-form/helper.ts     |   9 +-
 src/hooks/functions/useContextMenu.ts         |   1 +
 src/hooks/useI18n.ts                          |  37 +++
 src/hooks/useModal/useFormModal.tsx           |  12 +-
 src/layout/tabs/tabs-view.vue                 |  20 +-
 src/locales/index.ts                          |   2 +-
 src/locales/lang/en-US/component.ts           |  28 +++
 src/locales/lang/zh-CN/component.ts           |  32 +++
 src/utils/Export2Excel.js                     | 231 ++++++++++++++++++
 src/utils/dateUtil.ts                         |  23 ++
 src/utils/index.ts                            |  13 +
 src/views/demos/tables/lol-table/index.vue    |  60 ++++-
 src/views/demos/tables/wzry-table/columns.tsx |   3 +
 src/views/demos/tables/wzry-table/index.vue   |  96 ++++++--
 src/views/system/permission/menu/index.vue    |   2 +-
 src/views/system/permission/role/index.vue    |   4 +-
 src/views/system/permission/user/index.vue    |   4 +-
 yarn.lock                                     |  21 +-
 38 files changed, 1014 insertions(+), 138 deletions(-)
 create mode 100644 src/components/basic/excel/index.ts
 create mode 100644 src/components/basic/excel/src/Export2Excel.ts
 create mode 100644 src/components/basic/excel/src/ExportExcelModal.tsx
 create mode 100644 src/components/basic/excel/src/ImportExcel.vue
 create mode 100644 src/components/basic/excel/src/typing.ts
 delete mode 100644 src/components/core/dynamic-table/hooks/useExpandLoading.ts
 create mode 100644 src/components/core/dynamic-table/hooks/useExportData2Excel.ts
 create mode 100644 src/locales/lang/en-US/component.ts
 create mode 100644 src/locales/lang/zh-CN/component.ts
 create mode 100644 src/utils/Export2Excel.js
 create mode 100644 src/utils/dateUtil.ts

diff --git a/package.json b/package.json
index f60ca7ecd..f896159fb 100644
--- a/package.json
+++ b/package.json
@@ -23,10 +23,11 @@
   },
   "dependencies": {
     "@vueuse/core": "^7.5.1",
-    "ant-design-vue": "3.0.0-beta.4",
+    "ant-design-vue": "3.0.0-beta.5",
     "axios": "^0.24.0",
     "core-js": "^3.20.2",
     "dayjs": "^1.10.7",
+    "file-saver": "^2.0.5",
     "lodash": "^4.17.21",
     "mitt": "^3.0.0",
     "mockjs": "^1.1.0",
@@ -44,7 +45,7 @@
     "@commitlint/cli": "^16.0.1",
     "@commitlint/config-conventional": "^16.0.0",
     "@types/lodash": "^4.14.178",
-    "@types/node": "^17.0.7",
+    "@types/node": "^17.0.8",
     "@types/webpack-env": "^1.16.3",
     "@typescript-eslint/eslint-plugin": "^5.9.0",
     "@typescript-eslint/parser": "^5.9.0",
diff --git a/src/components/basic/excel/index.ts b/src/components/basic/excel/index.ts
new file mode 100644
index 000000000..58bcae06f
--- /dev/null
+++ b/src/components/basic/excel/index.ts
@@ -0,0 +1,8 @@
+import { withInstall } from '@/utils';
+import impExcel from './src/ImportExcel.vue';
+export { useExportExcelModal } from './src/ExportExcelModal';
+
+export const ImpExcel = withInstall(impExcel);
+// export const ExpExcelModal = withInstall(expExcelModal);
+export * from './src/typing';
+export { jsonToSheetXlsx, aoaToSheetXlsx } from './src/Export2Excel';
diff --git a/src/components/basic/excel/src/Export2Excel.ts b/src/components/basic/excel/src/Export2Excel.ts
new file mode 100644
index 000000000..24f7f1cf0
--- /dev/null
+++ b/src/components/basic/excel/src/Export2Excel.ts
@@ -0,0 +1,61 @@
+import xlsx from 'xlsx';
+import type { WorkBook } from 'xlsx';
+import type { JsonToSheet, AoAToSheet } from './typing';
+
+const { utils, writeFile } = xlsx;
+
+const DEF_FILE_NAME = 'excel-list.xlsx';
+
+export function jsonToSheetXlsx<T = any>({
+  data,
+  header,
+  filename = DEF_FILE_NAME,
+  json2sheetOpts = {},
+  write2excelOpts = { bookType: 'xlsx' },
+}: JsonToSheet<T>) {
+  let arrData = [...data];
+  if (header) {
+    arrData.unshift(header);
+    const filterKeys = Object.keys(header);
+    arrData = arrData.map((item) => filterKeys.reduce<any>((p, k) => ((p[k] = item[k]), p), {}));
+    json2sheetOpts.skipHeader = true;
+  }
+
+  const worksheet = utils.json_to_sheet(arrData, json2sheetOpts);
+
+  /* add worksheet to workbook */
+  const workbook: WorkBook = {
+    SheetNames: [filename],
+    Sheets: {
+      [filename]: worksheet,
+    },
+  };
+  /* output format determined by filename */
+  writeFile(workbook, filename, write2excelOpts);
+  /* at this point, out.xlsb will have been downloaded */
+}
+
+export function aoaToSheetXlsx<T = any>({
+  data,
+  header,
+  filename = DEF_FILE_NAME,
+  write2excelOpts = { bookType: 'xlsx' },
+}: AoAToSheet<T>) {
+  const arrData = [...data];
+  if (header) {
+    arrData.unshift(header);
+  }
+
+  const worksheet = utils.aoa_to_sheet(arrData);
+
+  /* add worksheet to workbook */
+  const workbook: WorkBook = {
+    SheetNames: [filename],
+    Sheets: {
+      [filename]: worksheet,
+    },
+  };
+  /* output format determined by filename */
+  writeFile(workbook, filename, write2excelOpts);
+  /* at this point, out.xlsb will have been downloaded */
+}
diff --git a/src/components/basic/excel/src/ExportExcelModal.tsx b/src/components/basic/excel/src/ExportExcelModal.tsx
new file mode 100644
index 000000000..4b34241a7
--- /dev/null
+++ b/src/components/basic/excel/src/ExportExcelModal.tsx
@@ -0,0 +1,80 @@
+import type { ExportModalResult } from './typing';
+import type { FormItemSchema } from '@/components/core/schema-form/types/form';
+
+import { useFormModal } from '@/hooks/useModal/useFormModal';
+
+import { useI18n } from 'vue-i18n';
+
+export type OpenModalOptions = {
+  onOk: (val: ExportModalResult) => any;
+};
+
+const getSchemas = (t): FormItemSchema<ExportModalResult>[] => [
+  {
+    field: 'filename',
+    component: 'Input',
+    label: t('component.excel.fileName'),
+    rules: [{ required: true }],
+  },
+  {
+    field: 'bookType',
+    component: 'Select',
+    label: t('component.excel.fileType'),
+    defaultValue: 'xlsx',
+    rules: [{ required: true }],
+    componentProps: {
+      options: [
+        {
+          label: 'xlsx',
+          value: 'xlsx',
+          key: 'xlsx',
+        },
+        {
+          label: 'html',
+          value: 'html',
+          key: 'html',
+        },
+        {
+          label: 'csv',
+          value: 'csv',
+          key: 'csv',
+        },
+        {
+          label: 'txt',
+          value: 'txt',
+          key: 'txt',
+        },
+      ],
+    },
+  },
+];
+
+export const useExportExcelModal = () => {
+  const { t } = useI18n();
+  const [showModal] = useFormModal();
+
+  const openModal = ({ onOk }: OpenModalOptions) => {
+    showModal<ExportModalResult>({
+      modalProps: {
+        title: t('component.excel.exportModalTitle'),
+        onFinish: async (values) => {
+          const { filename, bookType } = values;
+
+          onOk({
+            filename: `${filename.split('.').shift()}.${bookType}`,
+            bookType,
+          });
+        },
+      },
+      formSchema: {
+        labelWidth: 100,
+        layout: 'vertical',
+        schemas: getSchemas(t),
+      },
+    });
+  };
+
+  return {
+    openModal,
+  };
+};
diff --git a/src/components/basic/excel/src/ImportExcel.vue b/src/components/basic/excel/src/ImportExcel.vue
new file mode 100644
index 000000000..7a741d9c8
--- /dev/null
+++ b/src/components/basic/excel/src/ImportExcel.vue
@@ -0,0 +1,157 @@
+<template>
+  <div>
+    <input
+      ref="inputRef"
+      type="file"
+      v-show="false"
+      accept=".xlsx, .xls"
+      @change="handleInputClick"
+    />
+    <div @click="handleUpload">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, unref } from 'vue';
+  import XLSX from 'xlsx';
+  import { dateUtil } from '@/utils/dateUtil';
+
+  import type { ExcelData } from './typing';
+  export default defineComponent({
+    name: 'ImportExcel',
+    props: {
+      // 日期时间格式。如果不提供或者提供空值，将返回原始Date对象
+      dateFormat: {
+        type: String,
+      },
+      // 时区调整。实验性功能，仅为了解决读取日期时间值有偏差的问题。目前仅提供了+08:00时区的偏差修正值
+      // https://github.com/SheetJS/sheetjs/issues/1470#issuecomment-501108554
+      timeZone: {
+        type: Number,
+        default: 8,
+      },
+    },
+    emits: ['success', 'error'],
+    setup(props, { emit }) {
+      const inputRef = ref<HTMLInputElement | null>(null);
+      const loadingRef = ref<Boolean>(false);
+
+      /**
+       * @description: 第一行作为头部
+       */
+      function getHeaderRow(sheet: XLSX.WorkSheet) {
+        if (!sheet || !sheet['!ref']) return [];
+        const headers: string[] = [];
+        // A3:B7=>{s:{c:0, r:2}, e:{c:1, r:6}}
+        const range = XLSX.utils.decode_range(sheet['!ref']);
+
+        const R = range.s.r;
+        /* start in the first row */
+        for (let C = range.s.c; C <= range.e.c; ++C) {
+          /* walk every column in the range */
+          const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })];
+          /* find the cell in the first row */
+          let hdr = 'UNKNOWN ' + C; // <-- replace with your desired default
+          if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
+          headers.push(hdr);
+        }
+        return headers;
+      }
+
+      /**
+       * @description: 获得excel数据
+       */
+      function getExcelData(workbook: XLSX.WorkBook) {
+        const excelData: ExcelData[] = [];
+        const { dateFormat, timeZone } = props;
+        for (const sheetName of workbook.SheetNames) {
+          const worksheet = workbook.Sheets[sheetName];
+          const header: string[] = getHeaderRow(worksheet);
+          let results = XLSX.utils.sheet_to_json(worksheet, {
+            raw: true,
+            dateNF: dateFormat, //Not worked
+          }) as object[];
+          results = results.map((row: object) => {
+            for (let field in row) {
+              if (row[field] instanceof Date) {
+                if (timeZone === 8) {
+                  row[field].setSeconds(row[field].getSeconds() + 43);
+                }
+                if (dateFormat) {
+                  row[field] = dateUtil(row[field]).format(dateFormat);
+                }
+              }
+            }
+            return row;
+          });
+
+          excelData.push({
+            header,
+            results,
+            meta: {
+              sheetName,
+            },
+          });
+        }
+        return excelData;
+      }
+
+      /**
+       * @description: 读取excel数据
+       */
+      function readerData(rawFile: File) {
+        loadingRef.value = true;
+        return new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = async (e) => {
+            try {
+              const data = e.target && e.target.result;
+              const workbook = XLSX.read(data, { type: 'array', cellDates: true });
+              // console.log(workbook);
+              /* DO SOMETHING WITH workbook HERE */
+              const excelData = getExcelData(workbook);
+              emit('success', excelData);
+              resolve('');
+            } catch (error) {
+              reject(error);
+              emit('error');
+            } finally {
+              loadingRef.value = false;
+            }
+          };
+          reader.readAsArrayBuffer(rawFile);
+        });
+      }
+
+      async function upload(rawFile: File) {
+        const inputRefDom = unref(inputRef);
+        if (inputRefDom) {
+          // fix can't select the same excel
+          inputRefDom.value = '';
+        }
+        await readerData(rawFile);
+      }
+
+      /**
+       * @description: 触发选择文件管理器
+       */
+      function handleInputClick(e: Event) {
+        const files = e && (e.target as HTMLInputElement).files;
+        const rawFile = files && files[0]; // only setting files[0]
+        if (!rawFile) return;
+        upload(rawFile);
+      }
+
+      /**
+       * @description: 点击上传按钮
+       */
+      function handleUpload() {
+        const inputRefDom = unref(inputRef);
+        inputRefDom && inputRefDom.click();
+      }
+
+      return { handleUpload, handleInputClick, inputRef };
+    },
+  });
+</script>
diff --git a/src/components/basic/excel/src/typing.ts b/src/components/basic/excel/src/typing.ts
new file mode 100644
index 000000000..e55e549ea
--- /dev/null
+++ b/src/components/basic/excel/src/typing.ts
@@ -0,0 +1,27 @@
+import type { JSON2SheetOpts, WritingOptions, BookType } from 'xlsx';
+
+export interface ExcelData<T = any> {
+  header: string[];
+  results: T[];
+  meta: { sheetName: string };
+}
+
+export interface JsonToSheet<T = any> {
+  data: T[];
+  header?: T;
+  filename?: string;
+  json2sheetOpts?: JSON2SheetOpts;
+  write2excelOpts?: WritingOptions;
+}
+
+export interface AoAToSheet<T = any> {
+  data: T[][];
+  header?: T[];
+  filename?: string;
+  write2excelOpts?: WritingOptions;
+}
+
+export interface ExportModalResult {
+  filename: string;
+  bookType: BookType;
+}
diff --git a/src/components/core/dynamic-table/components/query-form/index.vue b/src/components/core/dynamic-table/components/query-form/index.vue
index 8b7f78ce2..ed9162370 100644
--- a/src/components/core/dynamic-table/components/query-form/index.vue
+++ b/src/components/core/dynamic-table/components/query-form/index.vue
@@ -4,12 +4,14 @@
       <template #operate-button>
         <span class="search-submitButtons" :style="{ float: 'right', overflow: 'hidden' }">
           <span>
-            <a-button type="default" style="margin-right: 10px" @click="reset"> 重置 </a-button>
-            <a-button type="primary" @click="query"> 查询 </a-button>
+            <a-button type="default" style="margin-right: 10px" @click="reset">
+              {{ $t('common.resetText') }}
+            </a-button>
+            <a-button type="primary" @click="query"> {{ $t('common.queryText') }} </a-button>
           </span>
           <template v-if="formItemSchemas.length > 0 && formItemSchemas.length > defaultShowItems">
             <a style="margin-left: 8px" @click="toggleAdvanced">
-              {{ advanced ? '收起' : '展开' }}
+              {{ advanced ? $t('component.form.putAway') : $t('component.form.unfold') }}
               <DownOutlined class="collapse-icon" />
             </a>
           </template>
@@ -20,7 +22,7 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, reactive, toRefs, computed, ref } from 'vue';
+  import { defineComponent, reactive, toRefs, computed, ref, nextTick } from 'vue';
   import { DownOutlined } from '@ant-design/icons-vue';
   import type { TableColumn } from '../../typing';
   import SchemaForm from '@/components/core/schema-form/schema-form.vue';
@@ -45,7 +47,7 @@
         required: true,
       },
     },
-    emits: ['query', 'reset'],
+    emits: ['query', 'reset', 'toggle-advanced'],
     setup(props, { slots, emit }) {
       const state = reactive({
         advanced: false,
@@ -96,8 +98,10 @@
       /**
        * @description 切换展开/收起 状态
        */
-      const toggleAdvanced = () => {
+      const toggleAdvanced = async () => {
         state.advanced = !state.advanced;
+        await nextTick();
+        emit('toggle-advanced', state.advanced);
       };
 
       /**
diff --git a/src/components/core/dynamic-table/components/table-action.vue b/src/components/core/dynamic-table/components/table-action.vue
index 4d64e57e5..a9bf9e627 100644
--- a/src/components/core/dynamic-table/components/table-action.vue
+++ b/src/components/core/dynamic-table/components/table-action.vue
@@ -3,8 +3,6 @@
     <component
       :title="actionItem.title"
       :is="actionItem.popConfirm ? Popconfirm : 'span'"
-      ok-text="确认"
-      cancel-text="取消"
       v-bind="actionItem.popConfirm"
     >
       <a-button type="link" v-bind="actionItem">{{ actionItem.label }}</a-button>
diff --git a/src/components/core/dynamic-table/components/table-settings/column-setting.vue b/src/components/core/dynamic-table/components/table-settings/column-setting.vue
index e988ed383..b3947699b 100644
--- a/src/components/core/dynamic-table/components/table-settings/column-setting.vue
+++ b/src/components/core/dynamic-table/components/table-settings/column-setting.vue
@@ -1,7 +1,7 @@
 <template>
   <Tooltip placement="top">
     <template #title>
-      <span>列设置</span>
+      <span>{{ $t('component.table.settingColumn') }}</span>
     </template>
     <Popover
       placement="bottomLeft"
@@ -11,14 +11,18 @@
     >
       <template #title>
         <div class="popover-title">
-          <Checkbox :indeterminate="indeterminate" v-model:checked="checkAll"> 列展示 </Checkbox>
+          <Checkbox :indeterminate="indeterminate" v-model:checked="checkAll">
+            {{ $t('component.table.settingColumnShow') }}
+          </Checkbox>
           <Checkbox v-model:checked="checkIndex" @change="handleIndexCheckChange">
-            序号列
+            {{ $t('component.table.settingIndexColumnShow') }}
           </Checkbox>
           <Checkbox v-model:checked="checkBordered" @change="handleBorderedCheckChange">
-            边框
+            {{ $t('component.table.settingBordered') }}
           </Checkbox>
-          <a-button size="small" type="link" @click="reset"> 重置 </a-button>
+          <a-button size="small" type="link" @click="reset">
+            {{ $t('common.resetText') }}
+          </a-button>
         </div>
       </template>
       <template #content>
@@ -37,7 +41,7 @@
               </div>
               <div class="column-fixed">
                 <Tooltip placement="bottomLeft" :mouseLeaveDelay="0.4">
-                  <template #title> 固定到左侧 </template>
+                  <template #title> {{ $t('component.table.settingFixedLeft') }} </template>
                   <VerticalRightOutlined
                     class="fixed-left"
                     :class="{ active: item.fixed === 'left' }"
@@ -46,7 +50,7 @@
                 </Tooltip>
                 <Divider type="vertical" />
                 <Tooltip placement="bottomLeft" :mouseLeaveDelay="0.4">
-                  <template #title> 固定到右侧 </template>
+                  <template #title> {{ $t('component.table.settingFixedRight') }} </template>
                   <VerticalLeftOutlined
                     class="fixed-right"
                     :class="{ active: item.fixed === 'right' }"
diff --git a/src/components/core/dynamic-table/components/table-settings/refresh-setting.vue b/src/components/core/dynamic-table/components/table-settings/refresh-setting.vue
index 27669e7a4..d6f6ed97a 100644
--- a/src/components/core/dynamic-table/components/table-settings/refresh-setting.vue
+++ b/src/components/core/dynamic-table/components/table-settings/refresh-setting.vue
@@ -1,7 +1,7 @@
 <template>
   <Tooltip placement="top">
     <template #title>
-      <span>刷新</span>
+      <span>{{ $t('common.redo') }}</span>
     </template>
     <RedoOutlined @click="redo" />
   </Tooltip>
diff --git a/src/components/core/dynamic-table/components/table-settings/size-setting.vue b/src/components/core/dynamic-table/components/table-settings/size-setting.vue
index 607b69186..94e3c97cb 100644
--- a/src/components/core/dynamic-table/components/table-settings/size-setting.vue
+++ b/src/components/core/dynamic-table/components/table-settings/size-setting.vue
@@ -1,7 +1,7 @@
 <template>
   <Tooltip placement="top">
     <template #title>
-      <span>密度</span>
+      <span>{{ $t('component.table.settingDens') }}</span>
     </template>
 
     <Dropdown placement="bottomCenter" :trigger="['click']">
@@ -9,13 +9,13 @@
       <template #overlay>
         <Menu @click="handleMenuClick" selectable v-model:selectedKeys="selectedKeysRef">
           <Menu.Item key="large">
-            <span>默认</span>
+            <span>{{ $t('component.table.settingDensDefault') }}</span>
           </Menu.Item>
           <Menu.Item key="middle">
-            <span>中等</span>
+            <span>{{ $t('component.table.settingDensMiddle') }}</span>
           </Menu.Item>
           <Menu.Item key="small">
-            <span>紧凑</span>
+            <span>{{ $t('component.table.settingDensSmall') }}</span>
           </Menu.Item>
         </Menu>
       </template>
diff --git a/src/components/core/dynamic-table/components/tool-bar/index.vue b/src/components/core/dynamic-table/components/tool-bar/index.vue
index da49a38ec..985c88c90 100644
--- a/src/components/core/dynamic-table/components/tool-bar/index.vue
+++ b/src/components/core/dynamic-table/components/tool-bar/index.vue
@@ -9,8 +9,9 @@
 
     <div>
       <slot name="toolbar"></slot>
+      <slot></slot>
       <Divider type="vertical" v-if="$slots.toolbar && showTableSetting" />
-      <TableSetting />
+      <TableSetting v-if="showTableSetting" />
     </div>
   </div>
 </template>
diff --git a/src/components/core/dynamic-table/dynamic-table.vue b/src/components/core/dynamic-table/dynamic-table.vue
index c3ca236b0..759556eb3 100644
--- a/src/components/core/dynamic-table/dynamic-table.vue
+++ b/src/components/core/dynamic-table/dynamic-table.vue
@@ -1,6 +1,13 @@
 <template>
   <div>
-    <QueryForm v-if="search" :columns="columns" :formProps="formProps" @query="queryTable" />
+    <QueryForm
+      v-if="search"
+      ref="queryFormRef"
+      :columns="columns"
+      :formProps="formProps"
+      @toggle-advanced="(e) => $emit('toggle-advanced', e)"
+      @query="queryTable"
+    />
     <div class="bg-white">
       <ToolBar
         v-if="showToolBar"
@@ -11,6 +18,11 @@
         <template #headerTitle v-if="$slots.headerTitle">
           <slot name="headerTitle"></slot>
         </template>
+        <span v-if="exportFileName" class="ml-6px" @click="exportData2Excel">
+          <slot name="export-button">
+            <a-button type="primary">导出</a-button>
+          </slot>
+        </span>
         <template #toolbar v-if="$slots.toolbar">
           <Space><slot name="toolbar"></slot></Space>
         </template>
@@ -69,13 +81,13 @@
     unref,
   } from 'vue';
   import { Table, Space } from 'ant-design-vue';
-  import { usePagination } from './hooks/usePagination';
+  import { usePagination, createTableContext, useExportData2Excel } from './hooks/';
   import type { TableColumn, OnChangeCallbackParams } from './typing';
   import { isBoolean, isObject } from '@/utils/is';
-  import { createTableContext } from './hooks/useTableContext';
   import { omit } from 'lodash';
   import { TableAction, QueryForm, ToolBar } from './components';
   import dynamicTableProps, { TableProps } from './props';
+  import { type SchemaFormRef } from '@/components/core/schema-form';
 
   export default defineComponent({
     name: 'DynamicTable',
@@ -88,11 +100,16 @@
     },
     inheritAttrs: false,
     props: dynamicTableProps,
-    emits: ['change'],
+    emits: ['change', 'toggle-advanced'],
     setup(props, { emit, slots }) {
       createTableContext(getCurrentInstance()!);
 
+      const { exportData2Excel } = useExportData2Excel(getCurrentInstance()!);
+
+      const { paginationRef } = usePagination(props.pagination);
+
       const tableRef = ref<InstanceType<typeof Table>>();
+      const queryFormRef = ref<InstanceType<typeof QueryForm>>();
 
       const innerPropsRef = ref<Partial<TableProps>>();
 
@@ -100,8 +117,6 @@
         return { ...props, ...unref(innerPropsRef) };
       });
 
-      const { paginationRef } = usePagination(props.pagination);
-
       // 默认支持的插槽
       const defaultSlots = [
         'emptyText',
@@ -259,6 +274,13 @@
         emit('change', ...rest);
       };
 
+      /**
+       * 当外部需要动态改变搜索表单的值或选项时，需要调用此方法获取dynamicFormRef实例
+       */
+      const getQueryFormRef = () => {
+        return queryFormRef.value?.dynamicFormRef as SchemaFormRef;
+      };
+
       // dataIndex 可以为 a.b.c
       // const getDataIndexVal = (dataIndex, record) => dataIndex.split('.').reduce((pre, curr) => pre[curr], record)
 
@@ -270,9 +292,12 @@
       return {
         ...toRefs(state),
         tableRef,
+        queryFormRef,
         defaultSlots,
         getProps,
         getBindValues,
+        getQueryFormRef,
+        exportData2Excel,
         queryTable,
         setProps,
         getColumnKey,
diff --git a/src/components/core/dynamic-table/hooks/index.ts b/src/components/core/dynamic-table/hooks/index.ts
index e3da3a235..45895c946 100644
--- a/src/components/core/dynamic-table/hooks/index.ts
+++ b/src/components/core/dynamic-table/hooks/index.ts
@@ -1 +1,3 @@
-export { useExpandLoading } from './useExpandLoading';
+export { useTableContext, createTableContext } from './useTableContext';
+export { usePagination } from './usePagination';
+export { useExportData2Excel } from './useExportData2Excel';
diff --git a/src/components/core/dynamic-table/hooks/useExpandLoading.ts b/src/components/core/dynamic-table/hooks/useExpandLoading.ts
deleted file mode 100644
index e306c25bb..000000000
--- a/src/components/core/dynamic-table/hooks/useExpandLoading.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { createVNode, nextTick, render } from 'vue';
-import { LoadingOutlined } from '@ant-design/icons-vue';
-
-/**
- * 点击展开图标loading子数据
- * @param expanded
- * @param record
- * @param expandItemEl
- * @param asyncFunc 异步方法
- * @param params API参数
- */
-export const useExpandLoading = async ({ expanded, record, expandItemEl, asyncFunc, params }) => {
-  // 如果是第一次展开
-  if (expanded && record.children && !Array.isArray(record.children)) {
-    if (expandItemEl) {
-      const iconEle = expandItemEl.closest('td').querySelector('.ant-table-row-expand-icon');
-      render(createVNode(LoadingOutlined), iconEle);
-      await nextTick();
-      iconEle.classList.add('loading-icon');
-      return asyncFunc(params).finally(async () => {
-        render(null, iconEle);
-        await nextTick();
-        iconEle.classList.remove('loading-icon');
-      });
-    } else {
-      return asyncFunc(params);
-    }
-  }
-};
diff --git a/src/components/core/dynamic-table/hooks/useExportData2Excel.ts b/src/components/core/dynamic-table/hooks/useExportData2Excel.ts
new file mode 100644
index 000000000..c0426c40b
--- /dev/null
+++ b/src/components/core/dynamic-table/hooks/useExportData2Excel.ts
@@ -0,0 +1,41 @@
+import { isEmpty } from 'lodash';
+import { export_json_to_excel } from '@/utils/Export2Excel';
+import { type DynamicTableInstance } from '../typing';
+import { type ComponentInternalInstance } from 'vue';
+
+/**
+ * 导出表格Excel
+ */
+export const useExportData2Excel = (_tableInstance: ComponentInternalInstance) => {
+  const tableInstance = _tableInstance.proxy as unknown as DynamicTableInstance;
+
+  const exportData2Excel = () => {
+    const { columns, getColumnKey, tableData } = tableInstance;
+
+    const theaders = columns.filter((n) => getColumnKey(n) && getColumnKey(n) !== '$action');
+
+    if (tableInstance.exportFormatter) {
+      const { header, data } = tableInstance.exportFormatter(theaders, tableData);
+      if (isEmpty(header) || isEmpty(data)) {
+        return;
+      } else {
+        export_json_to_excel({
+          header,
+          data,
+          filename: tableInstance.exportFileName,
+          bookType: tableInstance.exportBookType,
+          autoWidth: tableInstance.exportAutoWidth,
+        });
+      }
+    } else {
+      export_json_to_excel({
+        header: theaders.map((n) => n.title),
+        data: tableData.map((v) => theaders.map((header) => v[getColumnKey(header)!])),
+        filename: tableInstance.exportFileName,
+        bookType: tableInstance.exportBookType,
+        autoWidth: tableInstance.exportAutoWidth,
+      });
+    }
+  };
+  return { exportData2Excel };
+};
diff --git a/src/components/core/dynamic-table/hooks/usePagination.ts b/src/components/core/dynamic-table/hooks/usePagination.ts
index 1c88bfeba..ae8cb382d 100644
--- a/src/components/core/dynamic-table/hooks/usePagination.ts
+++ b/src/components/core/dynamic-table/hooks/usePagination.ts
@@ -1,10 +1,12 @@
 import { ref } from 'vue';
 // import Pagination from 'ant-design-vue/lib/pagination/Pagination'
 import type { TableProps } from 'ant-design-vue';
+import { useI18n } from 'vue-i18n';
 
 export type Pagination = TableProps['pagination'];
 
 export function usePagination(pageOption: Pagination) {
+  const { t } = useI18n();
   // 分页配置参数
   const paginationRef = ref<Pagination>(false);
 
@@ -16,7 +18,7 @@ export function usePagination(pageOption: Pagination) {
       pageSizeOptions: ['10', '20', '50', '100'],
       showQuickJumper: true,
       showSizeChanger: true, // 显示可改变每页数量
-      showTotal: (total) => `共 ${total} 条`, // 显示总数
+      showTotal: (total) => t('component.table.total', { total }), // 显示总数
       // onChange: (current, pageSize) => pageOption?.pageChange?.(current, pageSize),
       // onShowSizeChange: (current, pageSize) => pageOption?.pageChange?.(current, pageSize),
       ...pageOption,
diff --git a/src/components/core/dynamic-table/hooks/useTableContext.ts b/src/components/core/dynamic-table/hooks/useTableContext.ts
index f3b75a8be..db7cce5ec 100644
--- a/src/components/core/dynamic-table/hooks/useTableContext.ts
+++ b/src/components/core/dynamic-table/hooks/useTableContext.ts
@@ -1,13 +1,5 @@
-import { provide, inject, ComponentInternalInstance } from 'vue';
-import type { TableProps } from '../props';
-
-type DynamicTableInstance = {
-  [P in keyof TableProps]: TableProps[P];
-} & {
-  setProps(props: Partial<TableProps>): () => any;
-  getProps: TableProps;
-  refreshTable: (...rest: any[]) => any;
-};
+import type { DynamicTableInstance } from './../typing';
+import { provide, inject, type ComponentInternalInstance } from 'vue';
 
 const key = Symbol('dynamic-table');
 
diff --git a/src/components/core/dynamic-table/props.ts b/src/components/core/dynamic-table/props.ts
index 468286228..2c4074f52 100644
--- a/src/components/core/dynamic-table/props.ts
+++ b/src/components/core/dynamic-table/props.ts
@@ -1,6 +1,7 @@
 import type { PropType, ExtractPropTypes } from 'vue';
 import { tableProps } from 'ant-design-vue/lib/table';
 import type { FormProps } from 'ant-design-vue';
+import type { BookType } from 'xlsx';
 import type { LoadDataParams, TableColumn, OnChangeCallbackParams } from './typing';
 
 export const props = {
@@ -10,11 +11,13 @@ export const props = {
     type: Object as PropType<FormProps>,
     default: () => ({}),
   },
+  /** 表格列配置 */
   columns: {
     type: Array as PropType<TableColumn<any>[]>,
     required: true,
     default: () => [],
   },
+  /** 表格数据请求函数 */
   dataRequest: {
     // 获取列表数据函数API
     type: Function as PropType<
@@ -53,6 +56,27 @@ export const props = {
     type: Boolean as PropType<boolean>,
     default: true,
   },
+  // excel导出配置
+  /** 导出的文件名 */
+  exportFileName: {
+    type: String as PropType<string>,
+    default: '导出数据',
+  },
+  /** xlsx的booktype */
+  exportBookType: {
+    type: String as PropType<BookType>,
+    default: 'xlsx',
+  },
+  /** 自动宽度 */
+  exportAutoWidth: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+  /** 自定义数据导出格式函数 */
+  exportFormatter: {
+    type: Function,
+    default: null,
+  },
 };
 
 export type TableProps = ExtractPropTypes<typeof props>;
diff --git a/src/components/core/dynamic-table/typing.ts b/src/components/core/dynamic-table/typing.ts
index c1007676f..66ccf16be 100644
--- a/src/components/core/dynamic-table/typing.ts
+++ b/src/components/core/dynamic-table/typing.ts
@@ -2,11 +2,12 @@ import type { TableColumnType, TableProps } from 'ant-design-vue';
 import type { VNode } from 'vue';
 import type { FormItemSchema } from '../schema-form/types/form';
 import type { ActionItem } from './types/tableAction';
+import type { TableProps as DynamicTableProps } from './props';
 
 /**
  * 加载表格数据的参数
  */
-export interface LoadDataParams extends TableProps {
+export interface LoadDataParams {
   /** 根据自己业务需求定义页码 */
   page?: number;
   /** 根据自己业务需求定义页数据条数 */
@@ -43,3 +44,16 @@ export interface TableColumn<T = Indexable> extends Omit<TableColumnType, 'dataI
   headerCell?: (params: ColumnParams<T>) => VNode;
   actions?: (params: ColumnParams<T>) => ActionItem[];
 }
+
+/**
+ * 表格实例
+ */
+export type DynamicTableInstance = {
+  [P in keyof DynamicTableProps]: DynamicTableProps[P];
+} & {
+  tableData: any[];
+  setProps(props: Partial<DynamicTableProps>): () => any;
+  getProps: DynamicTableProps;
+  refreshTable: (...rest: any[]) => any;
+  getColumnKey: (column: TableColumn) => string | undefined;
+};
diff --git a/src/components/core/schema-form/helper.ts b/src/components/core/schema-form/helper.ts
index 8e3d396e7..ce7a4a64f 100644
--- a/src/components/core/schema-form/helper.ts
+++ b/src/components/core/schema-form/helper.ts
@@ -2,13 +2,16 @@ import type { ValidationRule } from 'ant-design-vue/lib/form/Form';
 import type { ComponentMapType } from './types';
 import { isNumber } from '@/utils/is';
 import dayjs from 'dayjs';
+import { useI18n } from '@/hooks/useI18n';
+
+const { t } = useI18n();
 
 /**
  * @description: 生成placeholder
  */
 export function createPlaceholderMessage(component: ComponentMapType, label = '') {
   if (component.includes('Input') || component.includes('Complete')) {
-    return `请输入${label}`;
+    return `${t('common.inputText')}${label}`;
   }
   const chooseTypes: ComponentMapType[] = [
     'Select',
@@ -19,10 +22,10 @@ export function createPlaceholderMessage(component: ComponentMapType, label = ''
     'TreeSelect',
   ];
   if (component.includes('Picker')) {
-    return `请选择${label}`;
+    return `${t('common.inputText')}${label}`;
   }
   if (chooseTypes.includes(component)) {
-    return `请选择${label}`;
+    return `${t('common.chooseText')}${label}`;
   }
   return '';
 }
diff --git a/src/hooks/functions/useContextMenu.ts b/src/hooks/functions/useContextMenu.ts
index 9e369b698..be147d992 100644
--- a/src/hooks/functions/useContextMenu.ts
+++ b/src/hooks/functions/useContextMenu.ts
@@ -2,6 +2,7 @@ import { onUnmounted, getCurrentInstance } from 'vue';
 import { createContextMenu, destroyContextMenu } from '@/components/basic/context-menu';
 import type { ContextMenuItem } from '@/components/basic/context-menu';
 export type { ContextMenuItem };
+
 export function useContextMenu(authRemove = true) {
   if (getCurrentInstance() && authRemove) {
     onUnmounted(() => {
diff --git a/src/hooks/useI18n.ts b/src/hooks/useI18n.ts
index f726121f0..b3a556f52 100644
--- a/src/hooks/useI18n.ts
+++ b/src/hooks/useI18n.ts
@@ -1,6 +1,43 @@
+import { type Composer } from 'vue-i18n';
 import { i18n } from '@/locales';
 import { Title18n } from 'types/vue-router';
 
+type I18nGlobalTranslation = Composer['t'];
+type I18nTranslationRestParameters = [string, any];
+
+function getKey(namespace: string | undefined, key: string) {
+  if (!namespace) {
+    return key;
+  }
+  if (key.startsWith(namespace)) {
+    return key;
+  }
+  return `${namespace}.${key}`;
+}
+
+export function useI18n(namespace?: string): {
+  t: I18nGlobalTranslation;
+} {
+  const normalFn = {
+    t: (key: string) => {
+      return getKey(namespace, key);
+    },
+  };
+
+  if (!i18n) {
+    return normalFn;
+  }
+
+  const { t } = i18n.global;
+
+  const tFn: I18nGlobalTranslation = (key: string, ...arg: any[]) => {
+    if (!key) return '';
+    if (!key.includes('.') && !namespace) return key;
+    return t(getKey(namespace, key), ...(arg as I18nTranslationRestParameters));
+  };
+  return Object.assign(i18n.global, { t: tFn });
+}
+
 /**
  * 国际化转换工具函数，主要用于处理动态路由的title
  * @param {string | Title18n} message message
diff --git a/src/hooks/useModal/useFormModal.tsx b/src/hooks/useModal/useFormModal.tsx
index a2b85b2f9..b474338a2 100644
--- a/src/hooks/useModal/useFormModal.tsx
+++ b/src/hooks/useModal/useFormModal.tsx
@@ -4,15 +4,15 @@ import { SchemaForm } from '@/components/core/schema-form';
 import type { SchemaFormRef, FormSchema } from '@/components/core/schema-form';
 import type { FormModalProps } from './types';
 
-interface ShowModalProps {
-  modalProps: FormModalProps;
+interface ShowModalProps<T = Recordable> {
+  modalProps: FormModalProps<T>;
   formSchema: FormSchema;
 }
 
-export const useFormModal = () => {
+export function useFormModal<T extends Recordable>() {
   const { show } = useModal();
 
-  const showModal = async ({ modalProps, formSchema }: ShowModalProps) => {
+  const showModal = async <P extends T>({ modalProps, formSchema }: ShowModalProps<P>) => {
     const formRef = ref<SchemaFormRef>();
 
     const onCancel = (e: MouseEvent) => {
@@ -26,7 +26,7 @@ export const useFormModal = () => {
       onCancel,
       content: () => <SchemaForm ref={formRef} formSchema={formSchema}></SchemaForm>,
       onOk: async () => {
-        const values = formRef.value?.formModel || {};
+        const values = (formRef.value?.formModel || {}) as any;
         try {
           await formRef.value?.validate();
           await modalProps?.onFinish?.({ ...values });
@@ -44,4 +44,4 @@ export const useFormModal = () => {
   };
 
   return [showModal] as const;
-};
+}
diff --git a/src/layout/tabs/tabs-view.vue b/src/layout/tabs/tabs-view.vue
index 74504dfe1..3c287ed66 100644
--- a/src/layout/tabs/tabs-view.vue
+++ b/src/layout/tabs/tabs-view.vue
@@ -18,29 +18,29 @@
               <Menu style="user-select: none">
                 <Menu.Item key="1" :disabled="activeKey !== pageItem.fullPath" @click="reloadPage">
                   <reload-outlined />
-                  刷新
+                  {{ $t('layout.multipleTab.reload') }}
                 </Menu.Item>
                 <Menu.Item key="2" @click="removeTab(pageItem)">
                   <close-outlined />
-                  关闭
+                  {{ $t('layout.multipleTab.close') }}
                 </Menu.Item>
                 <a-menu-divider />
                 <Menu.Item key="3" @click="closeLeft(pageItem)">
                   <vertical-right-outlined />
-                  关闭左侧
+                  {{ $t('layout.multipleTab.closeLeft') }}
                 </Menu.Item>
                 <Menu.Item key="4" @click="closeRight(pageItem)">
                   <vertical-left-outlined />
-                  关闭右侧
+                  {{ $t('layout.multipleTab.closeRight') }}
                 </Menu.Item>
                 <a-menu-divider />
                 <Menu.Item key="5" @click="closeOther(pageItem)">
                   <column-width-outlined />
-                  关闭其他
+                  {{ $t('layout.multipleTab.closeOther') }}
                 </Menu.Item>
                 <Menu.Item key="6" @click="closeAll">
                   <minus-outlined />
-                  关闭全部
+                  {{ $t('layout.multipleTab.closeAll') }}
                 </Menu.Item>
               </Menu>
             </template>
@@ -57,20 +57,20 @@
             <Menu style="user-select: none">
               <Menu.Item key="1" :disabled="activeKey !== route.fullPath" @click="reloadPage">
                 <reload-outlined />
-                刷新
+                {{ $t('layout.multipleTab.reload') }}
               </Menu.Item>
               <Menu.Item key="2" @click="removeTab(route)">
                 <close-outlined />
-                关闭
+                {{ $t('layout.multipleTab.close') }}
               </Menu.Item>
               <a-menu-divider />
               <Menu.Item key="5" @click="closeOther(route)">
                 <column-width-outlined />
-                关闭其他
+                {{ $t('layout.multipleTab.closeOther') }}
               </Menu.Item>
               <Menu.Item key="6" @click="closeAll">
                 <minus-outlined />
-                关闭全部
+                {{ $t('layout.multipleTab.closeAll') }}
               </Menu.Item>
             </Menu>
           </template>
diff --git a/src/locales/index.ts b/src/locales/index.ts
index b1ace275b..4710b4db2 100644
--- a/src/locales/index.ts
+++ b/src/locales/index.ts
@@ -1,4 +1,4 @@
-import type { App } from 'vue';
+import { type App } from 'vue';
 import { localeMap } from './config';
 import { createI18n } from 'vue-i18n';
 import { setHtmlPageLang, setLoadLocalePool } from './helper';
diff --git a/src/locales/lang/en-US/component.ts b/src/locales/lang/en-US/component.ts
new file mode 100644
index 000000000..c84eb3b1e
--- /dev/null
+++ b/src/locales/lang/en-US/component.ts
@@ -0,0 +1,28 @@
+export default {
+  excel: {
+    exportModalTitle: 'Export data',
+    fileType: 'File type',
+    fileName: 'File name',
+  },
+  form: {
+    putAway: 'Put away',
+    unfold: 'Unfold',
+    maxTip: 'The number of characters should be less than {0}',
+    apiSelectNotFound: 'Wait for data loading to complete...',
+  },
+  table: {
+    settingDens: 'Density',
+    settingDensDefault: 'Default',
+    settingDensMiddle: 'Middle',
+    settingDensSmall: 'Compact',
+    settingColumn: 'Column settings',
+    settingColumnShow: 'Column display',
+    settingIndexColumnShow: 'Index Column',
+    settingFixedLeft: 'Fixed Left',
+    settingFixedRight: 'Fixed Right',
+    settingFullScreen: 'Full Screen',
+    settingBordered: 'Bordered',
+    index: 'Index',
+    total: 'total of {total}',
+  },
+};
diff --git a/src/locales/lang/zh-CN/component.ts b/src/locales/lang/zh-CN/component.ts
new file mode 100644
index 000000000..35f298211
--- /dev/null
+++ b/src/locales/lang/zh-CN/component.ts
@@ -0,0 +1,32 @@
+export default {
+  excel: {
+    exportModalTitle: '导出数据',
+    fileType: '文件类型',
+    fileName: '文件名',
+  },
+  form: {
+    putAway: '收起',
+    unfold: '展开',
+
+    maxTip: '字符数应小于{0}位',
+
+    apiSelectNotFound: '请等待数据加载完成...',
+  },
+  table: {
+    settingDens: '密度',
+    settingDensDefault: '默认',
+    settingDensMiddle: '中等',
+    settingDensSmall: '紧凑',
+    settingColumn: '列设置',
+    settingColumnShow: '列展示',
+    settingIndexColumnShow: '序号列',
+    settingFixedLeft: '固定到左侧',
+    settingFixedRight: '固定到右侧',
+    settingFullScreen: '全屏',
+    settingBordered: '边框',
+
+    index: '序号',
+
+    total: '共 {total} 条数据',
+  },
+};
diff --git a/src/utils/Export2Excel.js b/src/utils/Export2Excel.js
new file mode 100644
index 000000000..c3bbc5497
--- /dev/null
+++ b/src/utils/Export2Excel.js
@@ -0,0 +1,231 @@
+/* eslint-disable */
+import { saveAs } from 'file-saver';
+import XLSX from 'xlsx';
+
+function generateArray(table) {
+  var out = [];
+  var rows = table.querySelectorAll('tr');
+  var ranges = [];
+  for (var R = 0; R < rows.length; ++R) {
+    var outRow = [];
+    var row = rows[R];
+    var columns = row.querySelectorAll('td');
+    for (var C = 0; C < columns.length; ++C) {
+      var cell = columns[C];
+      var colspan = cell.getAttribute('colspan');
+      var rowspan = cell.getAttribute('rowspan');
+      var cellValue = cell.innerText;
+      if (cellValue !== '' && cellValue == +cellValue) cellValue = +cellValue;
+
+      //Skip ranges
+      ranges.forEach(function (range) {
+        if (
+          R >= range.s.r &&
+          R <= range.e.r &&
+          outRow.length >= range.s.c &&
+          outRow.length <= range.e.c
+        ) {
+          for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
+        }
+      });
+
+      //Handle Row Span
+      if (rowspan || colspan) {
+        rowspan = rowspan || 1;
+        colspan = colspan || 1;
+        ranges.push({
+          s: {
+            r: R,
+            c: outRow.length,
+          },
+          e: {
+            r: R + rowspan - 1,
+            c: outRow.length + colspan - 1,
+          },
+        });
+      }
+
+      //Handle Value
+      outRow.push(cellValue !== '' ? cellValue : null);
+
+      //Handle Colspan
+      if (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
+    }
+    out.push(outRow);
+  }
+  return [out, ranges];
+}
+
+function datenum(v, date1904) {
+  if (date1904) v += 1462;
+  var epoch = Date.parse(v);
+  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
+}
+
+function sheet_from_array_of_arrays(data, opts) {
+  var ws = {};
+  var range = {
+    s: {
+      c: 10000000,
+      r: 10000000,
+    },
+    e: {
+      c: 0,
+      r: 0,
+    },
+  };
+  for (var R = 0; R != data.length; ++R) {
+    for (var C = 0; C != data[R].length; ++C) {
+      if (range.s.r > R) range.s.r = R;
+      if (range.s.c > C) range.s.c = C;
+      if (range.e.r < R) range.e.r = R;
+      if (range.e.c < C) range.e.c = C;
+      var cell = {
+        v: data[R][C],
+      };
+      if (cell.v == null) continue;
+      var cell_ref = XLSX.utils.encode_cell({
+        c: C,
+        r: R,
+      });
+
+      if (typeof cell.v === 'number') cell.t = 'n';
+      else if (typeof cell.v === 'boolean') cell.t = 'b';
+      else if (cell.v instanceof Date) {
+        cell.t = 'n';
+        cell.z = XLSX.SSF._table[14];
+        cell.v = datenum(cell.v);
+      } else cell.t = 's';
+
+      ws[cell_ref] = cell;
+    }
+  }
+  if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
+  return ws;
+}
+
+function Workbook() {
+  if (!(this instanceof Workbook)) return new Workbook();
+  this.SheetNames = [];
+  this.Sheets = {};
+}
+
+function s2ab(s) {
+  var buf = new ArrayBuffer(s.length);
+  var view = new Uint8Array(buf);
+  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
+  return buf;
+}
+
+export function export_table_to_excel(id) {
+  var theTable = document.getElementById(id);
+  var oo = generateArray(theTable);
+  var ranges = oo[1];
+
+  /* original data */
+  var data = oo[0];
+  var ws_name = 'SheetJS';
+
+  var wb = new Workbook(),
+    ws = sheet_from_array_of_arrays(data);
+
+  /* add ranges to worksheet */
+  // ws['!cols'] = ['apple', 'banan'];
+  ws['!merges'] = ranges;
+
+  /* add worksheet to workbook */
+  wb.SheetNames.push(ws_name);
+  wb.Sheets[ws_name] = ws;
+
+  var wbout = XLSX.write(wb, {
+    bookType: 'xlsx',
+    bookSST: false,
+    type: 'binary',
+  });
+
+  saveAs(
+    new Blob([s2ab(wbout)], {
+      type: 'application/octet-stream',
+    }),
+    'test.xlsx',
+  );
+}
+
+export function export_json_to_excel({
+  multiHeader = [],
+  header,
+  data,
+  filename,
+  merges = [],
+  autoWidth = true,
+  bookType = 'xlsx',
+} = {}) {
+  /* original data */
+  filename = filename || 'excel-list';
+  data = [...data];
+  data.unshift(header);
+
+  for (let i = multiHeader.length - 1; i > -1; i--) {
+    data.unshift(multiHeader[i]);
+  }
+
+  var ws_name = 'SheetJS';
+  var wb = new Workbook(),
+    ws = sheet_from_array_of_arrays(data);
+
+  if (merges.length > 0) {
+    if (!ws['!merges']) ws['!merges'] = [];
+    merges.forEach((item) => {
+      ws['!merges'].push(XLSX.utils.decode_range(item));
+    });
+  }
+
+  if (autoWidth) {
+    /*设置worksheet每列的最大宽度*/
+    const colWidth = data.map((row) =>
+      row.map((val) => {
+        /*先判断是否为null/undefined*/
+        if (val == null) {
+          return {
+            wch: 10,
+          };
+        } else if (val.toString().charCodeAt(0) > 255) {
+          /*再判断是否为中文*/
+          return {
+            wch: val.toString().length * 2,
+          };
+        } else {
+          return {
+            wch: val.toString().length,
+          };
+        }
+      }),
+    );
+    /*以第一行为初始值*/
+    let result = colWidth[0];
+    for (let i = 1; i < colWidth.length; i++) {
+      for (let j = 0; j < colWidth[i].length; j++) {
+        if (result[j]['wch'] < colWidth[i][j]['wch']) {
+          result[j]['wch'] = colWidth[i][j]['wch'];
+        }
+      }
+    }
+    ws['!cols'] = result;
+  }
+
+  /* add worksheet to workbook */
+  wb.SheetNames.push(ws_name);
+  wb.Sheets[ws_name] = ws;
+
+  var wbout = XLSX.write(wb, {
+    bookType: bookType,
+    bookSST: false,
+    type: 'binary',
+  });
+  saveAs(
+    new Blob([s2ab(wbout)], {
+      type: 'application/octet-stream',
+    }),
+    `${filename}.${bookType}`,
+  );
+}
diff --git a/src/utils/dateUtil.ts b/src/utils/dateUtil.ts
new file mode 100644
index 000000000..7fb578771
--- /dev/null
+++ b/src/utils/dateUtil.ts
@@ -0,0 +1,23 @@
+/**
+ * Independent time operation tool to facilitate subsequent switch to dayjs
+ */
+import dayjs from 'dayjs';
+
+const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+const DATE_FORMAT = 'YYYY-MM-DD';
+
+export function formatToDateTime(
+  date: dayjs.Dayjs | undefined = undefined,
+  format = DATE_TIME_FORMAT,
+): string {
+  return dayjs(date).format(format);
+}
+
+export function formatToDate(
+  date: dayjs.Dayjs | undefined = undefined,
+  format = DATE_FORMAT,
+): string {
+  return dayjs(date).format(format);
+}
+
+export const dateUtil = dayjs;
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 300128ef5..6a8ccc676 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,3 +1,5 @@
+import { type App } from 'vue';
+
 /**
  *
  * byte to size
@@ -18,3 +20,14 @@ export function formatSizeUnits(bytes, decimals = 2) {
 
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
 }
+
+export const withInstall = <T>(component: T, alias?: string) => {
+  const comp = component as any;
+  comp.install = (app: App) => {
+    app.component(comp.name || comp.displayName, component);
+    if (alias) {
+      app.config.globalProperties[alias] = component;
+    }
+  };
+  return component as T & Plugin;
+};
diff --git a/src/views/demos/tables/lol-table/index.vue b/src/views/demos/tables/lol-table/index.vue
index d6d1177ad..aa128b17d 100644
--- a/src/views/demos/tables/lol-table/index.vue
+++ b/src/views/demos/tables/lol-table/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <Alert message="游戏介绍" type="info" show-icon>
-      <template #description> 英雄联盟 </template>
+      <template #description> 英雄联盟 -- 根据数组格式的数据进行导出 </template>
     </Alert>
     <Card title="英雄列表mock数据" style="margin-top: 20px">
       <dynamic-table
@@ -10,8 +10,15 @@
         :data-request="loadData"
         :columns="columns"
         rowKey="heroid"
+        export-file-name="表格自带导出"
         :customRow="customRow"
-      />
+      >
+        <template #export-button> <a-button type="primary">表格自带导出</a-button> </template>
+        <template #toolbar>
+          <a-button type="primary" @click="aoaToExcel"> 数组格式导出 </a-button>
+          <a-button type="primary" @click="openExportModal"> 自定义导出格式 </a-button>
+        </template>
+      </dynamic-table>
     </Card>
   </div>
 </template>
@@ -29,10 +36,54 @@
   import { columns } from './columns';
   import { useContextMenu } from '@/hooks/functions/useContextMenu';
   import { useRouter } from 'vue-router';
+  import { useExportExcelModal, jsonToSheetXlsx, aoaToSheetXlsx } from '@/components/basic/excel';
 
   const router = useRouter();
   const [createContextMenu] = useContextMenu();
 
+  const exportExcelModal = useExportExcelModal();
+  let tableData: any[] = [];
+
+  const aoaToExcel = () => {
+    const colFilters = columns.filter((n) => n.dataIndex !== '$action');
+    const colFilterKeys = colFilters.map((n) => n.dataIndex);
+    // 保证data顺序与header一致
+    aoaToSheetXlsx({
+      data: tableData
+        .map((item) => {
+          return colFilterKeys.reduce((p, k) => {
+            p[k] = Array.isArray(item[k]) ? item[k].toString() : item[k];
+            return p;
+          }, {});
+        })
+        .map((item) => Object.values(item)),
+      // ['头像', '英雄名称', '英雄称号', '定位']
+      header: colFilters.map((column) => column.title),
+      filename: '二维数组方式导出excel.xlsx',
+    });
+  };
+
+  const openExportModal = () => {
+    exportExcelModal.openModal({
+      onOk: ({ filename, bookType }) => {
+        // 默认Object.keys(data[0])作为header
+        jsonToSheetXlsx({
+          data: tableData,
+          filename,
+          write2excelOpts: {
+            bookType,
+          },
+        });
+      },
+    });
+  };
+
+  const loadData = async (params) => {
+    const { data } = await getLolHeroList(params);
+    tableData = data.list;
+    return data;
+  };
+
   const customRow = (record) => {
     return {
       onContextmenu: (e: MouseEvent) => {
@@ -57,11 +108,6 @@
       },
     };
   };
-
-  const loadData = async (params) => {
-    const { data } = await getLolHeroList(params);
-    return data;
-  };
 </script>
 
 <style lang="less" scoped></style>
diff --git a/src/views/demos/tables/wzry-table/columns.tsx b/src/views/demos/tables/wzry-table/columns.tsx
index dcee3685e..57e2a12f0 100644
--- a/src/views/demos/tables/wzry-table/columns.tsx
+++ b/src/views/demos/tables/wzry-table/columns.tsx
@@ -32,6 +32,9 @@ export const columns: TableColumn[] = [
     title: '皮肤',
     align: 'center',
     dataIndex: 'skin_name',
+    formItemProps: {
+      component: 'Select',
+    },
     bodyCell: ({ record }) => (
       <>
         {record.skin_name?.split('|')?.map((name) => (
diff --git a/src/views/demos/tables/wzry-table/index.vue b/src/views/demos/tables/wzry-table/index.vue
index 8a8a30ff4..7206bba90 100644
--- a/src/views/demos/tables/wzry-table/index.vue
+++ b/src/views/demos/tables/wzry-table/index.vue
@@ -1,52 +1,94 @@
 <template>
   <div>
     <Alert message="游戏介绍" type="info" show-icon>
-      <template #description>
-        《王者荣耀》是腾讯第一5V5团队公平竞技手游，国民MOBA手游大作！5V5王者峡谷、公平对战、还原MOBA经典体验；契约之战、五军对决、边境突围等，带来花式作战乐趣！
-        10秒实时跨区匹配，与好友开黑上分，向最强王者进击！多款英雄任凭选择，一血、五杀、超神，实力碾压，收割全场！敌军即将到达战场，王者召唤师快来集结好友，准备团战，就在《王者荣耀》！
-        <div>
-          ① 英雄列表接口1：
-          <a href="https://pvp.qq.com/web201605/js/herolist.json" target="_blank">
-            https://pvp.qq.com/web201605/js/herolist.json
-          </a>
-        </div>
-        <div>
-          ② 英雄介绍以及技能描述接口：
-          <a href="https://pvp.qq.com/story201904/index.html#/heroDetail/index/111" target="_blank">
-            https://pvp.qq.com/web201605/herodetail/+（ename）+.shtml
-          </a>
-        </div>
-        <div>
-          ③ 英雄列表接口2：
-          <a
-            href="https://pvp.qq.com/webplat/info/news_version3/15592/18024/23901/24397/24398/m17330/list_1.shtml?callback=createHeroList"
-            target="_blank"
-          >
-            https://pvp.qq.com/webplat/info/news_version3/15592/18024/23901/24397/24398/m17330/list_1.shtml?callback=createHeroList
-          </a>
-        </div>
-      </template>
+      <template #description> 《王者荣耀》-- 根据JSON格式的数据进行导出 </template>
     </Alert>
     <Card title="英雄列表mock数据" style="margin-top: 20px">
       <dynamic-table
+        ref="dynamicTableRef"
         size="small"
         bordered
         :data-request="loadData"
         :columns="columns"
         rowKey="heroid"
-      />
+        @toggle-advanced="toggleAdvanced"
+      >
+        <template #toolbar>
+          <a-button type="primary" @click="defaultHeader"> 导出：默认头部 </a-button>
+          <a-button type="primary" @click="customHeader"> 导出：自定义头部 </a-button>
+        </template>
+      </dynamic-table>
     </Card>
   </div>
 </template>
 
 <script lang="ts" setup>
   import { Alert, Card } from 'ant-design-vue';
-  import { DynamicTable } from '@/components/core/dynamic-table';
+  import { DynamicTable, type DynamicTableInstance } from '@/components/core/dynamic-table';
+  import { jsonToSheetXlsx } from '@/components/basic/excel';
+
   import { getWzryHeroList } from '@/api/demos/hero';
   import { columns } from './columns';
+  import { ref } from 'vue';
+
+  let tableData = [];
+
+  const dynamicTableRef = ref<DynamicTableInstance>();
+
+  function defaultHeader() {
+    // 默认Object.keys(data[0])作为header
+    jsonToSheetXlsx({
+      data: tableData,
+      filename: '使用key作为默认头部.xlsx',
+    });
+  }
+
+  // 自定义头部
+  function customHeader() {
+    jsonToSheetXlsx({
+      data: tableData,
+      header: {
+        heroid: 'ID',
+        cname: '英雄名称',
+        title: '英雄称号',
+        occupation: '定位',
+        skin_name: '皮肤',
+      },
+      filename: '自定义头部.xlsx',
+      json2sheetOpts: {
+        // 指定顺序
+        header: ['cname', 'heroid'],
+      },
+    });
+  }
+
+  // 展开搜索表单时更新英雄皮肤选项值
+  const toggleAdvanced = (e) => {
+    if (e) {
+      dynamicTableRef.value?.getQueryFormRef().updateSchema([
+        {
+          field: 'skin_name',
+          componentProps: {
+            options: [
+              {
+                label: '皮肤1',
+                value: 'aa',
+              },
+              {
+                label: '皮肤2',
+                value: 'bb',
+              },
+            ],
+          },
+        },
+      ]);
+    }
+  };
 
   const loadData = async (params) => {
     const { data } = await getWzryHeroList(params);
+
+    tableData = data.list;
     return data;
   };
 </script>
diff --git a/src/views/system/permission/menu/index.vue b/src/views/system/permission/menu/index.vue
index b68318de6..93849f465 100644
--- a/src/views/system/permission/menu/index.vue
+++ b/src/views/system/permission/menu/index.vue
@@ -54,7 +54,7 @@
   };
 
   const openMenuModal = async (record: Partial<TableListItem>) => {
-    const [formRef] = await showModal({
+    const [formRef] = await showModal<any>({
       modalProps: {
         title: `${record.id ? '编辑' : '新增'}菜单`,
         width: 700,
diff --git a/src/views/system/permission/role/index.vue b/src/views/system/permission/role/index.vue
index 319812752..8e4305e43 100644
--- a/src/views/system/permission/role/index.vue
+++ b/src/views/system/permission/role/index.vue
@@ -63,12 +63,12 @@
    * @description 打开新增/编辑弹窗
    */
   const openMenuModal = async (record: Partial<TableListItem>) => {
-    const [formRef] = await showModal({
+    const [formRef] = await showModal<API.UpdateRoleParams & API.CaptchaParams>({
       modalProps: {
         title: `${record.id ? '编辑' : '新增'}角色`,
         width: '50%',
         onFinish: async (values) => {
-          values.roleId = record.id;
+          record.id && (values.roleId = record.id);
           const menusRef = formRef.value?.compRefs?.menus;
           const deptsRef = formRef.value?.compRefs?.depts;
           const params = {
diff --git a/src/views/system/permission/user/index.vue b/src/views/system/permission/user/index.vue
index 169fc7b20..ef43474ca 100644
--- a/src/views/system/permission/user/index.vue
+++ b/src/views/system/permission/user/index.vue
@@ -154,7 +154,7 @@
   const openDeptModal = async (record: Partial<API.SysDeptListResult> = {}) => {
     console.log('record', record);
 
-    const [formRef] = await showModal({
+    const [formRef] = await showModal<any>({
       modalProps: {
         title: `${record.id ? '编辑' : '新增'}部门`,
         width: 700,
@@ -227,7 +227,7 @@
    * @description 打开用户弹窗
    */
   const openUserModal = async (record: Partial<TableListItem> = {}) => {
-    const [formRef] = await showModal({
+    const [formRef] = await showModal<any>({
       modalProps: {
         title: `${record.id ? '编辑' : '新增'}用户`,
         width: 700,
diff --git a/yarn.lock b/yarn.lock
index 898224e9a..fc31193a3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1421,10 +1421,10 @@
   resolved "https://registry.npmmirror.com/@types/node/download/@types/node-17.0.5.tgz#57ca67ec4e57ad9e4ef5a6bab48a15387a1c83e0"
   integrity sha512-w3mrvNXLeDYV1GKTZorGJQivK6XLCoGwpnyJFbJVK/aTBQUxOCaa/GlFAAN3OTDFcb7h5tiFG+YXCO2By+riZw==
 
-"@types/node@^17.0.7":
-  version "17.0.7"
-  resolved "https://registry.npmmirror.com/@types/node/download/@types/node-17.0.7.tgz#4a53d8332bb65a45470a2f9e2611f1ced637a5cb"
-  integrity sha512-1QUk+WAUD4t8iR+Oj+UgI8oJa6yyxaB8a8pHaC8uqM6RrS1qbL7bf3Pwl5rHv0psm2CuDErgho6v5N+G+5fwtQ==
+"@types/node@^17.0.8":
+  version "17.0.8"
+  resolved "https://registry.npmmirror.com/@types/node/download/@types/node-17.0.8.tgz#50d680c8a8a78fe30abe6906453b21ad8ab0ad7b"
+  integrity sha512-YofkM6fGv4gDJq78g4j0mMuGMkZVxZDgtU0JRdx6FgiJDG+0fY0GKVolOV8WqVmEhLCXkQRjwDdKyPxJp/uucg==
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
@@ -2412,10 +2412,10 @@ ansi-styles@^6.0.0:
   resolved "https://registry.nlark.com/ansi-styles/download/ansi-styles-6.1.0.tgz#87313c102b8118abd57371afab34618bf7350ed3"
   integrity sha1-hzE8ECuBGKvVc3GvqzRhi/c1DtM=
 
-ant-design-vue@3.0.0-beta.4:
-  version "3.0.0-beta.4"
-  resolved "https://registry.npmmirror.com/ant-design-vue/download/ant-design-vue-3.0.0-beta.4.tgz#e6f7861682875d77220d02ffe561b2b2022cd15b"
-  integrity sha512-WUkA8LyXw35vi1OOHTzvtcet0lEhNGCQNF85zEOHpPlA1Xf8KWCricFeiA38fgg2AHWvE1mrVw/wqB1kXBJM1Q==
+ant-design-vue@3.0.0-beta.5:
+  version "3.0.0-beta.5"
+  resolved "https://registry.npmmirror.com/ant-design-vue/download/ant-design-vue-3.0.0-beta.5.tgz#9994ecedc7ad29600d85e73a754199d948869bb1"
+  integrity sha512-yX+JGkPlzXav56hHCg0aa1LAB9GQEEQ8Xfy0o7tc49zFH2v0Q8ekiWVXsvsiracLZgl7GcLm5HnEPp9tAy0BZQ==
   dependencies:
     "@ant-design/colors" "^6.0.0"
     "@ant-design/icons-vue" "^6.0.0"
@@ -4572,6 +4572,11 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
+file-saver@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.npmmirror.com/file-saver/download/file-saver-2.0.5.tgz#d61cfe2ce059f414d899e9dd6d4107ee25670c38"
+  integrity sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==
+
 fill-range@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npm.taobao.org/fill-range/download/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"