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