MiFaZhan
137 lines
3.8 KiB
TypeScript
137 lines
3.8 KiB
TypeScript
import type { Component } from 'vue';
|
|
|
|
import type { ComponentType } from './types';
|
|
|
|
import { h } from 'vue';
|
|
|
|
import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
|
|
|
|
import { HtcRegisterComponent } from '#/components/HtCustom/FormExpand/register';
|
|
import { Tinymce as RichTextarea } from '#/components/tinymce';
|
|
import { FileUpload, ImageUpload } from '#/components/upload';
|
|
|
|
import {
|
|
AutoComplete,
|
|
Button,
|
|
Cascader,
|
|
Checkbox,
|
|
CheckboxGroup,
|
|
DatePicker,
|
|
Divider,
|
|
Input,
|
|
InputNumber,
|
|
InputPassword,
|
|
Mentions,
|
|
Radio,
|
|
RadioGroup,
|
|
RangePicker,
|
|
Rate,
|
|
Select,
|
|
Space,
|
|
Switch,
|
|
Textarea,
|
|
TimePicker,
|
|
TreeSelect,
|
|
} from './antd';
|
|
import { defineComponentAdapterMessage } from './helpers/message';
|
|
import { withDefaultPlaceholder } from './helpers/with-default-placeholder';
|
|
import { withPreviewUpload } from './helpers/with-preview-upload';
|
|
|
|
/**
|
|
* 通用组件适配层。
|
|
*
|
|
* 这里只维护“组件名称 -> 真实组件”的映射关系，供 vben-form、vben-modal、
|
|
* vben-drawer 等框架组件通过 globalShareState 复用。
|
|
*/
|
|
function createComponentAdapterMap(): Partial<
|
|
Record<ComponentType, Component>
|
|
> {
|
|
return {
|
|
// 如果你的组件体积比较大，可以使用异步加载
|
|
// Button: () =>
|
|
// import('xxx').then((res) => res.Button),
|
|
ApiCascader: withDefaultPlaceholder(ApiComponent, 'select', {
|
|
component: Cascader,
|
|
fieldNames: { label: 'label', value: 'value', children: 'children' },
|
|
loadingSlot: 'suffixIcon',
|
|
modelPropName: 'value',
|
|
visibleEvent: 'onVisibleChange',
|
|
}),
|
|
ApiSelect: withDefaultPlaceholder(
|
|
{
|
|
...ApiComponent,
|
|
name: 'ApiSelect',
|
|
},
|
|
'select',
|
|
{
|
|
component: Select,
|
|
loadingSlot: 'suffixIcon',
|
|
visibleEvent: 'onDropdownVisibleChange',
|
|
modelPropName: 'value',
|
|
},
|
|
),
|
|
ApiTreeSelect: withDefaultPlaceholder(
|
|
{
|
|
...ApiComponent,
|
|
name: 'ApiTreeSelect',
|
|
},
|
|
'select',
|
|
{
|
|
component: TreeSelect,
|
|
fieldNames: { label: 'label', value: 'value', children: 'children' },
|
|
loadingSlot: 'suffixIcon',
|
|
modelPropName: 'value',
|
|
optionsPropName: 'treeData',
|
|
visibleEvent: 'onVisibleChange',
|
|
},
|
|
),
|
|
AutoComplete,
|
|
Cascader,
|
|
Checkbox,
|
|
CheckboxGroup,
|
|
DatePicker,
|
|
// 弹窗、抽屉等框架组件会通过共享状态读取这两个按钮组件
|
|
DefaultButton: (props, { attrs, slots }) => {
|
|
return h(Button, { ...props, attrs, type: 'default' }, slots);
|
|
},
|
|
Divider,
|
|
FileUpload,
|
|
ImageUpload,
|
|
IconPicker: withDefaultPlaceholder(IconPicker, 'select', {
|
|
iconSlot: 'addonAfter',
|
|
inputComponent: Input,
|
|
modelValueProp: 'value',
|
|
}),
|
|
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,
|
|
RichTextarea,
|
|
Select: withDefaultPlaceholder(Select, 'select'),
|
|
// SelectDivision,
|
|
Space,
|
|
Switch,
|
|
Textarea: withDefaultPlaceholder(Textarea, 'input'),
|
|
TimePicker,
|
|
TreeSelect: withDefaultPlaceholder(TreeSelect, 'select'),
|
|
Upload: withPreviewUpload(),
|
|
...HtcRegisterComponent,
|
|
};
|
|
}
|
|
|
|
async function initComponentAdapter() {
|
|
// 先注册组件，再初始化 form 适配，确保 setupVbenForm 能读到完整组件表
|
|
globalShareState.setComponents(createComponentAdapterMap());
|
|
defineComponentAdapterMessage();
|
|
}
|
|
|
|
export { initComponentAdapter };
|
|
export type { ComponentType };
|