public/ruoyi-plus-vben5-h
1
0
Fork 0
mirror of https://github.com/imdap/ruoyi-plus-vben5.git synced 2026-04-23 08:48:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(common-ui): add labelFn support to ApiComponent (#7801)

Browse Source 
* feat: allow api-component labels to be derived from option data

ApiComponent already normalizes option records into the label/value shape used by
consuming controls, but label text could only come from a single field. Add
labelFn so callers can build labels from the full option record while keeping
labelField as the fallback path.

This keeps the change inside the existing component instead of introducing a
wrapper, and it also normalizes direct options through the same transform path
as API-loaded options for consistent behavior.

Constraint: Must extend the existing ApiComponent API instead of adding a second
Constraint: wrapper component
Rejected: Add a separate ApiLabelComponent wrapper |
Rejected: extra surface area for one option-mapping concern
Confidence: high
Scope-risk: narrow
Reversibility: clean
Directive: Keep labelFn as a presentation transform and preserve labelField
Directive: fallback for existing callers
Tested: pnpm exec eslint api-component.vue index.ts types.ts
Tested: pnpm exec vue-tsc --noEmit -p packages/effects/common-ui/tsconfig.json
Not-tested: runtime integration in consuming select/tree-select components

* Update packages/effects/common-ui/src/components/api-component/api-component.vue

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
This commit is contained in:
Caisin
2026-04-12 14:29:18 +08:00
committed by allen
parent d779a39862
commit 2b1fcb038b
3 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
packages/effects/common-ui/src/components/api-component/api-component.vue
View File

@@ -17,6 +17,7 @@ defineOptions({ name: 'ApiComponent', inheritAttrs: false });
const props = withDefaults(defineProps<ApiComponentProps>(), {
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(() => {