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