Commit c7c95dd2affec5c7e697ca2ccde51bd8603c383a

Authored by Vben
1 parent 6dbbdbac

chore: type Descrition,Drawer,Excel,Dropdown

src/components/Description/index.ts
1   -import Description from './src/Description.vue';
  1 +import { withInstall } from '/@/utils';
  2 +import description from './src/Description.vue';
2 3  
3   -export { Description };
4   -export * from './src/types';
  4 +export * from './src/typing';
5 5 export { useDescription } from './src/useDescription';
  6 +export const Description = withInstall(description);
... ...
src/components/Description/src/Description.vue
1 1 <script lang="tsx">
2   - import type { DescOptions, DescInstance, DescItem } from './types';
  2 + import type { DescriptionProps, DescInstance, DescItem } from './typing';
3 3 import type { DescriptionsProps } from 'ant-design-vue/es/descriptions/index';
4 4 import type { CSSProperties } from 'vue';
5 5 import type { CollapseContainerOptions } from '/@/components/Container/index';
6   -
7 6 import { defineComponent, computed, ref, unref } from 'vue';
8 7 import { get } from 'lodash-es';
9 8 import { Descriptions } from 'ant-design-vue';
10 9 import { CollapseContainer } from '/@/components/Container/index';
11   -
12 10 import { useDesign } from '/@/hooks/web/useDesign';
13   -
14 11 import { isFunction } from '/@/utils/is';
15 12 import { getSlot } from '/@/utils/helper/tsxHelper';
16   -
17   - import descProps from './props';
18 13 import { useAttrs } from '/@/hooks/core/useAttrs';
19 14  
  15 + const props = {
  16 + useCollapse: { type: Boolean, default: true },
  17 + title: { type: String, default: '' },
  18 + size: {
  19 + type: String,
  20 + validator: (v) => ['small', 'default', 'middle', undefined].includes(v),
  21 + default: 'small',
  22 + },
  23 + bordered: { type: Boolean, default: true },
  24 + column: {
  25 + type: [Number, Object] as PropType<number | Recordable>,
  26 + default: () => {
  27 + return { xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 };
  28 + },
  29 + },
  30 + collapseOptions: {
  31 + type: Object as PropType<CollapseContainerOptions>,
  32 + default: null,
  33 + },
  34 + schema: {
  35 + type: Array as PropType<DescItem[]>,
  36 + default: () => [],
  37 + },
  38 + data: { type: Object },
  39 + };
  40 +
20 41 export default defineComponent({
21 42 name: 'Description',
22   - props: descProps,
  43 + props,
23 44 emits: ['register'],
24 45 setup(props, { slots, emit }) {
25   - const propsRef = ref<Partial<DescOptions> | null>(null);
  46 + const propsRef = ref<Partial<DescriptionProps> | null>(null);
26 47  
27 48 const { prefixCls } = useDesign('description');
28 49 const attrs = useAttrs();
... ... @@ -32,7 +53,7 @@
32 53 return {
33 54 ...props,
34 55 ...(unref(propsRef) as Recordable),
35   - } as DescOptions;
  56 + } as DescriptionProps;
36 57 });
37 58  
38 59 const getProps = computed(() => {
... ... @@ -40,7 +61,7 @@
40 61 ...unref(getMergeProps),
41 62 title: undefined,
42 63 };
43   - return opt as DescOptions;
  64 + return opt as DescriptionProps;
44 65 });
45 66  
46 67 /**
... ... @@ -66,7 +87,7 @@
66 87 /**
67 88 * @description:设置desc
68 89 */
69   - function setDescProps(descProps: Partial<DescOptions>): void {
  90 + function setDescProps(descProps: Partial<DescriptionProps>): void {
70 91 // Keep the last setDrawerProps
71 92 propsRef.value = { ...(unref(propsRef) as Recordable), ...descProps } as Recordable;
72 93 }
... ... @@ -79,7 +100,6 @@
79 100  
80 101 const labelStyles: CSSProperties = {
81 102 ...labelStyle,
82   -
83 103 minWidth: `${labelMinWidth}px `,
84 104 };
85 105 return <div style={labelStyles}>{label}</div>;
... ... @@ -97,7 +117,9 @@
97 117  
98 118 const getContent = () => {
99 119 const _data = unref(getProps)?.data;
100   - if (!_data) return null;
  120 + if (!_data) {
  121 + return null;
  122 + }
101 123 const getField = get(_data, field);
102 124 return isFunction(render) ? render(getField, _data) : getField ?? '';
103 125 };
... ... @@ -131,7 +153,6 @@
131 153 const renderContainer = () => {
132 154 const content = props.useCollapse ? renderDesc() : <div>{renderDesc()}</div>;
133 155 // Reduce the dom level
134   -
135 156 if (!props.useCollapse) {
136 157 return content;
137 158 }
... ...
src/components/Description/src/props.ts deleted 100644 → 0
1   -import type { PropType } from 'vue';
2   -import type { CollapseContainerOptions } from '/@/components/Container';
3   -import type { DescItem } from './types';
4   -import { propTypes } from '/@/utils/propTypes';
5   -export default {
6   - useCollapse: propTypes.bool.def(true),
7   - title: propTypes.string.def(''),
8   - size: propTypes.oneOf(['small', 'default', 'middle', undefined]).def('small'),
9   - bordered: propTypes.bool.def(true),
10   - column: {
11   - type: [Number, Object] as PropType<number | Recordable>,
12   - default: () => {
13   - return { xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 };
14   - },
15   - },
16   - collapseOptions: {
17   - type: Object as PropType<CollapseContainerOptions>,
18   - default: null,
19   - },
20   - schema: {
21   - type: Array as PropType<Array<DescItem>>,
22   - default: () => [],
23   - },
24   - data: propTypes.object,
25   -};
src/components/Description/src/types.ts renamed to src/components/Description/src/typing.ts
... ... @@ -4,11 +4,8 @@ import type { DescriptionsProps } from &#39;ant-design-vue/es/descriptions/index&#39;;
4 4  
5 5 export interface DescItem {
6 6 labelMinWidth?: number;
7   -
8 7 contentMinWidth?: number;
9   -
10 8 labelStyle?: CSSProperties;
11   -
12 9 field: string;
13 10 label: string | VNode | JSX.Element;
14 11 // Merge column
... ... @@ -21,7 +18,7 @@ export interface DescItem {
21 18 ) => VNode | undefined | JSX.Element | Element | string | number;
22 19 }
23 20  
24   -export interface DescOptions extends DescriptionsProps {
  21 +export interface DescriptionProps extends DescriptionsProps {
25 22 // Whether to include the collapse component
26 23 useCollapse?: boolean;
27 24 /**
... ... @@ -42,7 +39,7 @@ export interface DescOptions extends DescriptionsProps {
42 39 }
43 40  
44 41 export interface DescInstance {
45   - setDescProps(descProps: Partial<DescOptions>): void;
  42 + setDescProps(descProps: Partial<DescriptionProps>): void;
46 43 }
47 44  
48 45 export type Register = (descInstance: DescInstance) => void;
... ...
src/components/Description/src/useDescription.ts
  1 +import type { DescriptionProps, DescInstance, UseDescReturnType } from './typing';
1 2 import { ref, getCurrentInstance, unref } from 'vue';
2 3 import { isProdMode } from '/@/utils/env';
3 4  
4   -import type { DescOptions, DescInstance, UseDescReturnType } from './types';
5   -
6   -export function useDescription(props?: Partial<DescOptions>): UseDescReturnType {
  5 +export function useDescription(props?: Partial<DescriptionProps>): UseDescReturnType {
7 6 if (!getCurrentInstance()) {
8   - throw new Error('Please put useDescription function in the setup function!');
  7 + throw new Error('useDescription() can only be used inside setup() or functional components!');
9 8 }
10   - const descRef = ref<Nullable<DescInstance>>(null);
11   - const loadedRef = ref(false);
  9 + const desc = ref<Nullable<DescInstance>>(null);
  10 + const loaded = ref(false);
12 11  
13 12 function register(instance: DescInstance) {
14   - if (unref(loadedRef) && isProdMode()) return;
15   - descRef.value = instance;
  13 + if (unref(loaded) && isProdMode()) {
  14 + return;
  15 + }
  16 + desc.value = instance;
16 17 props && instance.setDescProps(props);
17   - loadedRef.value = true;
  18 + loaded.value = true;
18 19 }
19 20  
20 21 const methods: DescInstance = {
21   - setDescProps: (descProps: Partial<DescOptions>): void => {
22   - unref(descRef)?.setDescProps(descProps);
  22 + setDescProps: (descProps: Partial<DescriptionProps>): void => {
  23 + unref(desc)?.setDescProps(descProps);
23 24 },
24 25 };
25 26  
... ...
src/components/Drawer/index.ts
1   -import BasicDrawer from './src/BasicDrawer.vue';
  1 +import { withInstall } from '/@/utils';
  2 +import basicDrawer from './src/BasicDrawer.vue';
2 3  
3   -export { BasicDrawer };
4   -export * from './src/types';
  4 +export const BasicDrawer = withInstall(basicDrawer);
  5 +export * from './src/typing';
5 6 export { useDrawer, useDrawerInner } from './src/useDrawer';
... ...
src/components/Drawer/src/BasicDrawer.vue
... ... @@ -31,9 +31,8 @@
31 31 </Drawer>
32 32 </template>
33 33 <script lang="ts">
34   - import type { DrawerInstance, DrawerProps } from './types';
  34 + import type { DrawerInstance, DrawerProps } from './typing';
35 35 import type { CSSProperties } from 'vue';
36   -
37 36 import {
38 37 defineComponent,
39 38 ref,
... ... @@ -46,15 +45,12 @@
46 45 getCurrentInstance,
47 46 } from 'vue';
48 47 import { Drawer } from 'ant-design-vue';
49   -
50 48 import { useI18n } from '/@/hooks/web/useI18n';
51   -
52 49 import { isFunction, isNumber } from '/@/utils/is';
53 50 import { deepMerge } from '/@/utils';
54 51 import DrawerFooter from './components/DrawerFooter.vue';
55 52 import DrawerHeader from './components/DrawerHeader.vue';
56 53 import { ScrollContainer } from '/@/components/Container';
57   -
58 54 import { basicProps } from './props';
59 55 import { useDesign } from '/@/hooks/web/useDesign';
60 56 import { useAttrs } from '/@/hooks/core/useAttrs';
... ... @@ -167,7 +163,7 @@
167 163  
168 164 function setDrawerProps(props: Partial<DrawerProps>): void {
169 165 // Keep the last setDrawerProps
170   - propsRef.value = deepMerge(unref(propsRef) || {}, props);
  166 + propsRef.value = deepMerge((unref(propsRef) as any) || {}, props);
171 167  
172 168 if (Reflect.has(props, 'visible')) {
173 169 visibleRef.value = !!props.visible;
... ...
src/components/Drawer/src/components/DrawerHeader.vue
... ... @@ -40,6 +40,7 @@
40 40 function handleClose() {
41 41 emit('close');
42 42 }
  43 +
43 44 return { prefixCls, handleClose };
44 45 },
45 46 });
... ...
src/components/Drawer/src/props.ts
1 1 import type { PropType } from 'vue';
2 2  
3 3 import { useI18n } from '/@/hooks/web/useI18n';
4   -import { propTypes } from '/@/utils/propTypes';
5 4 const { t } = useI18n();
6 5  
7 6 export const footerProps = {
8   - confirmLoading: propTypes.bool,
  7 + confirmLoading: { type: Boolean },
9 8 /**
10 9 * @description: Show close button
11 10 */
12   - showCancelBtn: propTypes.bool.def(true),
  11 + showCancelBtn: { type: Boolean, default: true },
13 12 cancelButtonProps: Object as PropType<Recordable>,
14   - cancelText: propTypes.string.def(t('common.cancelText')),
  13 + cancelText: { type: String, default: t('common.cancelText') },
15 14 /**
16 15 * @description: Show confirmation button
17 16 */
18   - showOkBtn: propTypes.bool.def(true),
  17 + showOkBtn: { type: Boolean, default: true },
19 18 okButtonProps: Object as PropType<Recordable>,
20   - okText: propTypes.string.def(t('common.okText')),
21   - okType: propTypes.string.def('primary'),
22   - showFooter: propTypes.bool,
  19 + okText: { type: String, default: t('common.okText') },
  20 + okType: { type: String, default: 'primary' },
  21 + showFooter: { type: Boolean },
23 22 footerHeight: {
24 23 type: [String, Number] as PropType<string | number>,
25 24 default: 60,
26 25 },
27 26 };
28 27 export const basicProps = {
29   - isDetail: propTypes.bool,
30   - title: propTypes.string.def(''),
31   - loadingText: propTypes.string,
32   - showDetailBack: propTypes.bool.def(true),
33   - visible: propTypes.bool,
34   - loading: propTypes.bool,
35   - maskClosable: propTypes.bool.def(true),
  28 + isDetail: { type: Boolean },
  29 + title: { type: String, default: '' },
  30 + loadingText: { type: String },
  31 + showDetailBack: { type: Boolean, default: true },
  32 + visible: { type: Boolean },
  33 + loading: { type: Boolean },
  34 + maskClosable: { type: Boolean, default: true },
36 35 getContainer: {
37 36 type: [Object, String] as PropType<any>,
38 37 },
... ... @@ -44,7 +43,7 @@ export const basicProps = {
44 43 type: [Function, Object] as PropType<any>,
45 44 default: null,
46 45 },
47   - triggerWindowResize: propTypes.bool,
48   - destroyOnClose: propTypes.bool,
  46 + triggerWindowResize: { type: Boolean },
  47 + destroyOnClose: { type: Boolean },
49 48 ...footerProps,
50 49 };
... ...
src/components/Drawer/src/types.ts renamed to src/components/Drawer/src/typing.ts
... ... @@ -181,7 +181,6 @@ export interface DrawerProps extends DrawerFooterProps {
181 181 placement?: 'top' | 'right' | 'bottom' | 'left';
182 182 afterVisibleChange?: (visible?: boolean) => void;
183 183 keyboard?: boolean;
184   -
185 184 /**
186 185 * Specify a callback that will be called when a user clicks mask, close button or Cancel button.
187 186 */
... ...
src/components/Drawer/src/useDrawer.ts
... ... @@ -4,7 +4,7 @@ import type {
4 4 ReturnMethods,
5 5 DrawerProps,
6 6 UseDrawerInnerReturnType,
7   -} from './types';
  7 +} from './typing';
8 8  
9 9 import {
10 10 ref,
... ... @@ -32,24 +32,27 @@ const visibleData = reactive&lt;{ [key: number]: boolean }&gt;({});
32 32 * @description: Applicable to separate drawer and call outside
33 33 */
34 34 export function useDrawer(): UseDrawerReturnType {
35   - const drawerRef = ref<DrawerInstance | null>(null);
36   - const loadedRef = ref<Nullable<boolean>>(false);
37   - const uidRef = ref<string>('');
  35 + if (!getCurrentInstance()) {
  36 + throw new Error('useDrawer() can only be used inside setup() or functional components!');
  37 + }
  38 + const drawer = ref<DrawerInstance | null>(null);
  39 + const loaded = ref<Nullable<boolean>>(false);
  40 + const uid = ref<string>('');
38 41  
39 42 function register(drawerInstance: DrawerInstance, uuid: string) {
40 43 isProdMode() &&
41 44 tryOnUnmounted(() => {
42   - drawerRef.value = null;
43   - loadedRef.value = null;
44   - dataTransferRef[unref(uidRef)] = null;
  45 + drawer.value = null;
  46 + loaded.value = null;
  47 + dataTransferRef[unref(uid)] = null;
45 48 });
46 49  
47   - if (unref(loadedRef) && isProdMode() && drawerInstance === unref(drawerRef)) {
  50 + if (unref(loaded) && isProdMode() && drawerInstance === unref(drawer)) {
48 51 return;
49 52 }
50   - uidRef.value = uuid;
51   - drawerRef.value = drawerInstance;
52   - loadedRef.value = true;
  53 + uid.value = uuid;
  54 + drawer.value = drawerInstance;
  55 + loaded.value = true;
53 56  
54 57 drawerInstance.emitVisible = (visible: boolean, uid: number) => {
55 58 visibleData[uid] = visible;
... ... @@ -57,7 +60,7 @@ export function useDrawer(): UseDrawerReturnType {
57 60 }
58 61  
59 62 const getInstance = () => {
60   - const instance = unref(drawerRef);
  63 + const instance = unref(drawer);
61 64 if (!instance) {
62 65 error('useDrawer instance is undefined!');
63 66 }
... ... @@ -70,7 +73,7 @@ export function useDrawer(): UseDrawerReturnType {
70 73 },
71 74  
72 75 getVisible: computed((): boolean => {
73   - return visibleData[~~unref(uidRef)];
  76 + return visibleData[~~unref(uid)];
74 77 }),
75 78  
76 79 openDrawer: <T = any>(visible = true, data?: T, openOnSet = true): void => {
... ... @@ -80,13 +83,13 @@ export function useDrawer(): UseDrawerReturnType {
80 83 if (!data) return;
81 84  
82 85 if (openOnSet) {
83   - dataTransferRef[unref(uidRef)] = null;
84   - dataTransferRef[unref(uidRef)] = toRaw(data);
  86 + dataTransferRef[unref(uid)] = null;
  87 + dataTransferRef[unref(uid)] = toRaw(data);
85 88 return;
86 89 }
87   - const equal = isEqual(toRaw(dataTransferRef[unref(uidRef)]), toRaw(data));
  90 + const equal = isEqual(toRaw(dataTransferRef[unref(uid)]), toRaw(data));
88 91 if (!equal) {
89   - dataTransferRef[unref(uidRef)] = toRaw(data);
  92 + dataTransferRef[unref(uid)] = toRaw(data);
90 93 }
91 94 },
92 95 };
... ... @@ -99,8 +102,8 @@ export const useDrawerInner = (callbackFn?: Fn): UseDrawerInnerReturnType =&gt; {
99 102 const currentInstance = getCurrentInstance();
100 103 const uidRef = ref<string>('');
101 104  
102   - if (!currentInstance) {
103   - error('useDrawerInner instance is undefined!');
  105 + if (!getCurrentInstance()) {
  106 + throw new Error('useDrawerInner() can only be used inside setup() or functional components!');
104 107 }
105 108  
106 109 const getInstance = () => {
... ...
src/components/Dropdown/index.ts
1   -import Dropdown from './src/Dropdown.vue';
  1 +import { withInstall } from '/@/utils';
  2 +import dropdown from './src/Dropdown.vue';
2 3  
3   -export * from './src/types';
4   -export { Dropdown };
  4 +export * from './src/typing';
  5 +export const Dropdown = withInstall(dropdown);
... ...
src/components/Dropdown/src/Dropdown.vue
1 1 <template>
2   - <a-dropdown :trigger="trigger" v-bind="$attrs">
  2 + <Dropdown :trigger="trigger" v-bind="$attrs">
3 3 <span>
4 4 <slot></slot>
5 5 </span>
6 6 <template #overlay>
7   - <a-menu :selectedKeys="selectedKeys">
  7 + <Menu :selectedKeys="selectedKeys">
8 8 <template v-for="item in dropMenuList" :key="`${item.event}`">
9   - <a-menu-item
  9 + <MenuItem
10 10 v-bind="getAttr(item.event)"
11 11 @click="handleClickMenu(item)"
12 12 :disabled="item.disabled"
... ... @@ -19,17 +19,17 @@
19 19 <Icon :icon="item.icon" v-if="item.icon" />
20 20 <span class="ml-1">{{ item.text }}</span>
21 21 </template>
22   - </a-menu-item>
23   - <a-menu-divider v-if="item.divider" :key="`d-${item.event}`" />
  22 + </MenuItem>
  23 + <MenuDivider v-if="item.divider" :key="`d-${item.event}`" />
24 24 </template>
25   - </a-menu>
  25 + </Menu>
26 26 </template>
27   - </a-dropdown>
  27 + </Dropdown>
28 28 </template>
29 29  
30 30 <script lang="ts">
31 31 import type { PropType } from 'vue';
32   - import type { DropMenu } from './types';
  32 + import type { DropMenu } from './typing';
33 33  
34 34 import { defineComponent } from 'vue';
35 35 import { Dropdown, Menu, Popconfirm } from 'ant-design-vue';
... ... @@ -38,10 +38,10 @@
38 38 export default defineComponent({
39 39 name: 'BasicDropdown',
40 40 components: {
41   - [Dropdown.name]: Dropdown,
42   - [Menu.name]: Menu,
43   - [Menu.Item.name]: Menu.Item,
44   - [Menu.Divider.name]: Menu.Divider,
  41 + Dropdown,
  42 + Menu,
  43 + MenuItem: Menu.Item,
  44 + MenuDivider: Menu.Divider,
45 45 Icon,
46 46 Popconfirm,
47 47 },
... ... @@ -75,6 +75,7 @@
75 75 emit('menuEvent', menu);
76 76 item.onClick?.();
77 77 }
  78 +
78 79 return {
79 80 handleClickMenu,
80 81 getAttr: (key: string | number) => ({ key }),
... ...
src/components/Dropdown/src/types.ts renamed to src/components/Dropdown/src/typing.ts
... ... @@ -7,5 +7,3 @@ export interface DropMenu {
7 7 disabled?: boolean;
8 8 divider?: boolean;
9 9 }
10   -
11   -// export type Trigger = 'click' | 'hover' | 'contextMenu';
... ...
src/components/Excel/index.ts
1   -import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
2   -
3   -export const ImpExcel = createAsyncComponent(() => import('./src/ImportExcel.vue'));
4   -export const ExpExcelModel = createAsyncComponent(() => import('./src/ExportExcelModel.vue'));
5   -
6   -export * from './src/types';
  1 +import { withInstall } from '/@/utils';
  2 +import impExcel from './src/ImportExcel.vue';
  3 +import expExcelModal from './src/ExportExcelModal.vue';
7 4  
  5 +export const ImpExcel = withInstall(impExcel);
  6 +export const ExpExcelModal = withInstall(expExcelModal);
  7 +export * from './src/typing';
8 8 export { jsonToSheetXlsx, aoaToSheetXlsx } from './src/Export2Excel';
... ...
src/components/Excel/src/Export2Excel.ts
1 1 import xlsx from 'xlsx';
2 2 import type { WorkBook } from 'xlsx';
3   -import type { JsonToSheet, AoAToSheet } from './types';
  3 +import type { JsonToSheet, AoAToSheet } from './typing';
4 4  
5 5 const { utils, writeFile } = xlsx;
6 6  
7 7 const DEF_FILE_NAME = 'excel-list.xlsx';
  8 +
8 9 export function jsonToSheetXlsx<T = any>({
9 10 data,
10 11 header,
... ...
src/components/Excel/src/ExportExcelModel.vue renamed to src/components/Excel/src/ExportExcelModal.vue
... ... @@ -14,7 +14,7 @@
14 14 </BasicModal>
15 15 </template>
16 16 <script lang="ts">
17   - import type { ExportModalResult } from './types';
  17 + import type { ExportModalResult } from './typing';
18 18 import { defineComponent } from 'vue';
19 19 import { BasicModal, useModalInner } from '/@/components/Modal';
20 20 import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
... ...
src/components/Excel/src/ImportExcel.vue
... ... @@ -16,7 +16,7 @@
16 16 import { defineComponent, ref, unref } from 'vue';
17 17 import XLSX from 'xlsx';
18 18  
19   - import type { ExcelData } from './types';
  19 + import type { ExcelData } from './typing';
20 20 export default defineComponent({
21 21 name: 'ImportExcel',
22 22 emits: ['success', 'error'],
... ...
src/components/Excel/src/types.ts renamed to src/components/Excel/src/typing.ts
... ... @@ -6,10 +6,6 @@ export interface ExcelData&lt;T = any&gt; {
6 6 meta: { sheetName: string };
7 7 }
8 8  
9   -// export interface ImportProps {
10   -// beforeUpload: (file: File) => boolean;
11   -// }
12   -
13 9 export interface JsonToSheet<T = any> {
14 10 data: T[];
15 11 header?: T;
... ...
src/settings/localeSetting.ts
1   -import type { DropMenu } from '/@/components/Dropdown/src/types';
  1 +import type { DropMenu } from '../components/Dropdown';
2 2 import type { LocaleSetting, LocaleType } from '/#/config';
3 3  
4 4 export const LOCALE: { [key: string]: LocaleType } = {
... ...
src/views/demo/excel/CustomExport.vue
... ... @@ -5,20 +5,20 @@
5 5 <a-button @click="openModal"> 导出 </a-button>
6 6 </template>
7 7 </BasicTable>
8   - <ExpExcelModel @register="register" @success="defaultHeader" />
  8 + <ExpExcelModal @register="register" @success="defaultHeader" />
9 9 </PageWrapper>
10 10 </template>
11 11  
12 12 <script lang="ts">
13 13 import { defineComponent } from 'vue';
14 14 import { BasicTable } from '/@/components/Table';
15   - import { jsonToSheetXlsx, ExpExcelModel, ExportModalResult } from '/@/components/Excel';
  15 + import { jsonToSheetXlsx, ExpExcelModal, ExportModalResult } from '/@/components/Excel';
16 16 import { columns, data } from './data';
17 17 import { useModal } from '/@/components/Modal';
18 18 import { PageWrapper } from '/@/components/Page';
19 19  
20 20 export default defineComponent({
21   - components: { BasicTable, ExpExcelModel, PageWrapper },
  21 + components: { BasicTable, ExpExcelModal, PageWrapper },
22 22 setup() {
23 23 function defaultHeader({ filename, bookType }: ExportModalResult) {
24 24 // 默认Object.keys(data[0])作为header
... ...