web/src/components/AnForm/setters/util.ts

67 lines
1.6 KiB
TypeScript

import { Component } from 'vue';
import { AnFormItemPropsBase, AnFormItemSlot, AnFormItemFnProps } from '../components/FormItem';
export interface ItemSetter<P extends object, S extends string> {
/**
* 输入组件
*/
setter: Component;
/**
* 输入组件参数
*/
setterProps?: P;
/**
* 空间插槽
*/
setterSlots?: {
/**
* 控件插槽
* @example
* ```tsx
* (props) => {
* return <span>{props.item.label}</span>
* }
* ```
*/
[key in S]?: AnFormItemSlot;
};
/**
* 初始化钩子
*/
onSetup?: (args: { model: Recordable; item: AnFormItemPropsBase; items: AnFormItemPropsBase[] }) => void;
}
export function defineSetter<P extends object, S extends string>(setter: ItemSetter<P, S>) {
return setter;
}
export function initOptions({ item, model }: AnFormItemFnProps, key: string = 'options') {
const setterProps: Recordable = item.setterProps!;
if (Array.isArray(item.options) && item.setterProps) {
setterProps[key] = item.options;
return;
}
if (typeof item.options === 'function') {
setterProps[key] = reactive([]);
item.$init = async () => {
const res = await (item as any).options({ item, model });
if (Array.isArray(res)) {
setterProps[key].splice(0);
setterProps[key].push(...res);
return;
}
const data = res?.data?.data;
if (Array.isArray(data)) {
const maped = data.map((i: any) => ({ ...i, value: i.id, label: i.name }));
setterProps[key].splice(0);
setterProps[key].push(...maped);
return;
}
};
item.$init();
}
}