diff --git a/packages/effects/common-ui/src/components/api-component/api-component.vue b/packages/effects/common-ui/src/components/api-component/api-component.vue index 45ec260f4..2c6d69317 100644 --- a/packages/effects/common-ui/src/components/api-component/api-component.vue +++ b/packages/effects/common-ui/src/components/api-component/api-component.vue @@ -17,6 +17,7 @@ defineOptions({ name: 'ApiComponent', inheritAttrs: false }); const props = withDefaults(defineProps(), { labelField: 'label', valueField: 'value', + labelFn: undefined, disabledField: 'disabled', childrenField: '', optionsPropName: 'options', @@ -54,33 +55,37 @@ const hasPendingRequest = ref(false); const getOptions = computed(() => { const { labelField, + labelFn, valueField, disabledField, childrenField, numberToString, } = props; - const refOptionsData = unref(refOptions); - - function transformData(data: OptionsItem[]): OptionsItem[] { + function transformData(data: OptionsItem[] = []): OptionsItem[] { return data.map((item) => { const value = get(item, valueField); - const disabled = get(item, disabledField); + const children = childrenField ? get(item, childrenField) : item.children; return { - ...objectOmit(item, [labelField, valueField, disabled, childrenField]), - label: get(item, labelField), + ...objectOmit(item, [ + labelField, + valueField, + disabledField, + ...(childrenField ? [childrenField] : []), + ]), + label: labelFn ? labelFn(item) : get(item, labelField), value: numberToString ? `${value}` : value, disabled: get(item, disabledField), - ...(childrenField && item[childrenField] - ? { children: transformData(item[childrenField]) } + ...(Array.isArray(children) && children.length > 0 + ? { children: transformData(children) } : {}), }; }); } - const data: OptionsItem[] = transformData(refOptionsData); + const data = transformData(unref(refOptions)); - return data.length > 0 ? data : props.options; + return data.length > 0 ? data : transformData(props.options); }); const bindProps = computed(() => { diff --git a/packages/effects/common-ui/src/components/api-component/index.ts b/packages/effects/common-ui/src/components/api-component/index.ts index 097858698..173b30d1c 100644 --- a/packages/effects/common-ui/src/components/api-component/index.ts +++ b/packages/effects/common-ui/src/components/api-component/index.ts @@ -1,5 +1,6 @@ export { default as ApiComponent } from './api-component.vue'; export type { + ApiComponentLabelFn, ApiComponentOptionsItem, ApiComponentProps, ApiComponentSharedProps, diff --git a/packages/effects/common-ui/src/components/api-component/types.ts b/packages/effects/common-ui/src/components/api-component/types.ts index 000636a7f..a771f78a5 100644 --- a/packages/effects/common-ui/src/components/api-component/types.ts +++ b/packages/effects/common-ui/src/components/api-component/types.ts @@ -10,6 +10,8 @@ export type ApiComponentOptionsItem = { value?: number | string; }; +export type ApiComponentLabelFn = (item: ApiComponentOptionsItem) => string; + export interface ApiComponentProps { /** 组件 */ component: Component; @@ -23,6 +25,8 @@ export interface ApiComponentProps { resultField?: string; /** label字段名 */ labelField?: string; + /** 通过选项数据自定义label */ + labelFn?: ApiComponentLabelFn; /** children字段名,需要层级数据的组件可用 */ childrenField?: string; /** value字段名 */