1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
| /**
| * 通用组件共同的使用的基础组件，原先放在 adapter/form 内部，限制了使用范围，这里提取出来，方便其他地方使用
| * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
| */
|
| import type { Component, SetupContext } from 'vue';
|
| import type { BaseFormComponentType } from '@vben/common-ui';
|
| import { h } from 'vue';
|
| import { globalShareState } from '@vben/common-ui';
| import { $t } from '@vben/locales';
|
| import {
| AutoComplete,
| Button,
| Checkbox,
| CheckboxGroup,
| DatePicker,
| Divider,
| Input,
| InputNumber,
| InputPassword,
| Mentions,
| notification,
| Radio,
| RadioGroup,
| RangePicker,
| Rate,
| Select,
| Space,
| Switch,
| Textarea,
| TimePicker,
| TreeSelect,
| Upload,
| } from 'ant-design-vue';
|
| const withDefaultPlaceholder = <T extends Component>(
| component: T,
| type: 'input' | 'select',
| ) => {
| return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
| const placeholder = props?.placeholder || $t(`ui.placeholder.${type}`);
| return h(component, { ...props, ...attrs, placeholder }, slots);
| };
| };
|
| // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
| export type ComponentType =
| | 'AutoComplete'
| | 'Checkbox'
| | 'CheckboxGroup'
| | 'DatePicker'
| | 'DefaultButton'
| | 'Divider'
| | 'Input'
| | 'InputNumber'
| | 'InputPassword'
| | 'Mentions'
| | 'PrimaryButton'
| | 'Radio'
| | 'RadioGroup'
| | 'RangePicker'
| | 'Rate'
| | 'Select'
| | 'Space'
| | 'Switch'
| | 'Textarea'
| | 'TimePicker'
| | 'TreeSelect'
| | 'Upload'
| | BaseFormComponentType;
|
| async function initComponentAdapter() {
| const components: Partial<Record<ComponentType, Component>> = {
| // 如果你的组件体积比较大，可以使用异步加载
| // Button: () =>
| // import('xxx').then((res) => res.Button),
|
| AutoComplete,
| Checkbox,
| CheckboxGroup,
| DatePicker,
| // 自定义默认按钮
| DefaultButton: (props, { attrs, slots }) => {
| return h(Button, { ...props, attrs, type: 'default' }, slots);
| },
| Divider,
| Input: withDefaultPlaceholder(Input, 'input'),
| InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
| InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
| Mentions: withDefaultPlaceholder(Mentions, 'input'),
| // 自定义主要按钮
| PrimaryButton: (props, { attrs, slots }) => {
| return h(Button, { ...props, attrs, type: 'primary' }, slots);
| },
| Radio,
| RadioGroup,
| RangePicker,
| Rate,
| Select: withDefaultPlaceholder(Select, 'select'),
| Space,
| Switch,
| Textarea: withDefaultPlaceholder(Textarea, 'input'),
| TimePicker,
| TreeSelect: withDefaultPlaceholder(TreeSelect, 'select'),
| Upload,
| };
|
| // 将组件注册到全局共享状态中
| globalShareState.setComponents(components);
|
| // 定义全局共享状态中的消息提示
| globalShareState.defineMessage({
| // 复制成功消息提示
| copyPreferencesSuccess: (title, content) => {
| notification.success({
| description: content,
| message: title,
| placement: 'bottomRight',
| });
| },
| });
| }
|
| export { initComponentAdapter };
|
|
