Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev

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

@@ -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(() => {

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,

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字段名 */

packages/effects/common-ui/src/components/index.ts

@@ -27,6 +27,7 @@ export {
   VbenContextMenu,
   VbenCountToAnimator,
   VbenFullScreen,
+  VbenIconButton,
   VbenInputPassword,
   VbenLoading,
   VbenLogo,