Commit c7c95dd2affec5c7e697ca2ccde51bd8603c383a
1 parent
6dbbdbac
chore: type Descrition,Drawer,Excel,Dropdown
Showing
21 changed files
with
129 additions
and
138 deletions
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 'ant-design-vue/es/descriptions/index'; |
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
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<{ [key: number]: boolean }>({}); |
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 => { |
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
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
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
src/settings/localeSetting.ts
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 |
... | ... |