@skyfox2000/webui 1.3.0 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@skyfox2000/webui",
-   "version": "1.3.0",
+   "version": "1.3.2",
    "description": "后台前端通用组件定义",
    "type": "module",
    "keywords": [],

package/src/components/form/autoComplete/index.vue

@@ -134,7 +134,7 @@ const onSearch = (value: string) => {
       props.onsearch(search_value, query);
    }
 
-   if (optionCtrl) loadOption(optionCtrl, props);
+   if (optionCtrl) loadOption(optionCtrl.autoload, optionCtrl, props);
 };
 
 const onSelected = (value: any) => {

package/src/components/form/cascader/index.vue

@@ -93,7 +93,7 @@ onMounted(() => {
          key: 'Id',
       };
    }
-   if (optionCtrl) loadOption(optionCtrl, props);
+   if (optionCtrl) loadOption(optionCtrl.autoload, optionCtrl, props);
 });
 
 onUnmounted(() => {

package/src/components/form/checkbox/index.vue

@@ -84,7 +84,7 @@ onMounted(() => {
          key: 'Id',
       };
    }
-   if (optionCtrl) loadOption(optionCtrl, props);
+   if (optionCtrl) loadOption(optionCtrl.autoload, optionCtrl, props);
 });
 onUnmounted(() => {
    if (optionCtrl) unloadOption(optionCtrl, props);

package/src/components/form/radio/index.vue

@@ -102,7 +102,7 @@ onMounted(() => {
          key: 'Id',
       };
    }
-   if (optionCtrl) loadOption(optionCtrl, props);
+   if (optionCtrl) loadOption(optionCtrl.autoload, optionCtrl, props);
 });
 onUnmounted(() => {
    if (optionCtrl) unloadOption(optionCtrl, props);

package/src/components/form/select/index.vue

@@ -135,14 +135,6 @@ watch(
    },
 );
 
-// watch(
-//    () => props.params,
-//    (newVal) => {
-//          loadOption(true, props, selectOptions, inputFactory, url.value, newVal);
-//    },
-//    { deep: true },
-// );
-
 onMounted(() => {
    if (url.value && !url.value.fieldMap) {
       url.value.fieldMap = {
@@ -154,7 +146,7 @@ onMounted(() => {
    if (props.dataKey) {
       const options = JSON.parse(JSON.stringify(OPTIONS.getOptions(props.dataKey)));
       selectOptions.value = options;
-   } else if (optionCtrl) loadOption(optionCtrl, props);
+   } else if (optionCtrl) loadOption(optionCtrl.autoload, optionCtrl, props);
 });
 
 onUnmounted(() => {

package/src/components/form/switch/index.vue

@@ -55,7 +55,7 @@ onMounted(() => {
       message.error('Switch组件必须有且只有两个选项');
       return;
    }
-   if (optionCtrl) loadOption(optionCtrl, props);
+   if (optionCtrl) loadOption(optionCtrl.autoload, optionCtrl, props);
 });
 
 onUnmounted(() => {

package/src/typings/option.d.ts

@@ -154,6 +154,12 @@ export type OptionControlOption = {
     * 自动加载数据
     */
    autoload: boolean;
+   /**
+    * 字段转换控制
+    * - Key：目的字段
+    * - Value：源字段，支持模板 ${}
+    */
+   fieldMap?: Record<string, string>;
 };
 
 /**
@@ -173,11 +179,12 @@ export type OptionControl = OptionControlOption & {
     */
    optionQuery?: ReqParams;
    /**
-    * 当前数据
+    * 当前传入数据
     */
    data: ShallowRef<OptionItemProps[] | undefined>;
    /**
-    * 选项数据
+    * 实际选项数据
+    * - 已转换fieldMap
     */
    options: Ref<OptionItemProps[]>;
    /**
@@ -188,12 +195,6 @@ export type OptionControl = OptionControlOption & {
     * 选中数据
     */
    selectedOptions: Ref<OptionItemProps[]>;
-   /**
-    * 字段转换控制
-    * - Key：目的字段
-    * - Value：源字段，支持模板 ${}
-    */
-   fieldMap?: Record<string, string>;
    /**
     * 查询接口
     *  - 优先使用

package/src/utils/options.ts

@@ -8,7 +8,7 @@ import {
    ReqParams,
    ResStatus,
 } from '@skyfox2000/fapi';
-import { inject, ref, Ref, watch } from 'vue';
+import { inject, ref, watch } from 'vue';
 import { OptionItemProps, SelectValue, OptionControl, OptionProps } from '@/typings/option.d';
 import { ProviderKeys } from '@/typings/page.d';
 import message from 'vue-m-message';
@@ -20,12 +20,12 @@ import { combineParams } from '@skyfox2000/microbase';
  * 自动初始化选择项
  * @param optionCtrl 选项控制器
  */
-export const loadOption = (optionCtrl: OptionControl, props?: OptionProps) => {
+export const loadOption = (load: boolean, optionCtrl: OptionControl, props?: OptionProps) => {
    if (optionCtrl.inputFactory && props?.reloadEvent) {
       const inputFactory = optionCtrl.inputFactory.value;
       /// 接收事件，联动显示或者重新加载数据
       inputFactory.reloadHandler = (_event: string, params: Record<string, AnyData> | AnyData[]) => {
-         optionEventHandler(optionCtrl.url!, optionCtrl, params, optionCtrl.options);
+         optionEventHandler(optionCtrl.url!, optionCtrl, params);
       };
       eventBus.on(props.reloadEvent, inputFactory.reloadHandler);
    }
@@ -35,13 +35,12 @@ export const loadOption = (optionCtrl: OptionControl, props?: OptionProps) => {
       watch(
          () => props.data,
          () => {
-            updateOptions(optionCtrl, props.data!, optionCtrl.options, true);
+            updateOptions(optionCtrl, props.data!, true);
          },
          { deep: true, immediate: true },
       );
    } else if (optionCtrl.url && optionCtrl.url.url) {
-      if (optionCtrl.autoload !== false)
-         doQueryOptions(optionCtrl.url, optionCtrl, optionCtrl.params ?? {}, optionCtrl.options);
+      if (load) doQueryOptions(optionCtrl.url, optionCtrl, optionCtrl.params ?? {});
    } else {
       const labelText = ref<string>(inject(ProviderKeys.LabelText, ''));
       message.error('`' + labelText.value + '` 未配置选项数据！', {
@@ -54,15 +53,9 @@ export const loadOption = (optionCtrl: OptionControl, props?: OptionProps) => {
  * 组件选项数据更新
  * @param optionCtrl 选项控制器
  * @param data 提供的下拉数据
- * @param options 实际选择项
  * @param mapping 是否需要转换字段
  */
-const updateOptions = (
-   optionCtrl: OptionControl,
-   data: Record<string, AnyData>[],
-   options: Ref<OptionItemProps[]>,
-   mapping: boolean,
-) => {
+const updateOptions = (optionCtrl: OptionControl, data: Record<string, AnyData>[], mapping: boolean) => {
    if (mapping) {
       // 转换字段
       const fieldMap = {
@@ -79,7 +72,7 @@ const updateOptions = (
       });
    }
 
-   options.value = data as OptionItemProps[];
+   optionCtrl.options.value = data as OptionItemProps[];
 };
 
 /**
@@ -93,14 +86,13 @@ const optionEventHandler = (
    url: IUrlInfo,
    optionCtrl: OptionControl,
    params_data: Record<string, AnyData> | AnyData[],
-   options: Ref<OptionItemProps[]>,
 ) => {
    if (Array.isArray(params_data)) {
       // 数据组仅用于联动显示
-      updateOptions(optionCtrl, params_data, options, true);
+      updateOptions(optionCtrl, params_data, true);
    } else {
       // 其它情况使用Query参数
-      doQueryOptions(url, optionCtrl, params_data, options);
+      doQueryOptions(url, optionCtrl, params_data);
    }
 };
 
@@ -118,21 +110,15 @@ export const unloadOption = (optionCtrl: OptionControl, props: OptionProps) => {
  * @param url 选项接口
  * @param optionCtrl 选项控制器
  * @param params 查询条件
- * @param options 实际选择项
  */
-const doQueryOptions = (
-   url: IUrlInfo,
-   optionCtrl: OptionControl,
-   params: ReqParams,
-   options: Ref<OptionItemProps[]>,
-) => {
+const doQueryOptions = (url: IUrlInfo, optionCtrl: OptionControl, params: ReqParams) => {
    const urlParams = JSON.parse(JSON.stringify(url.params ?? {}));
    const ctrlParams = JSON.parse(JSON.stringify(optionCtrl.params ?? {}));
    const newParams: ReqParams = combineParams(urlParams, ctrlParams, params);
    queryOptions(url, optionCtrl, optionCtrl.fieldMap, newParams).then((results) => {
       // 使用url，由request负责转换，无需再次map转换
       const data = results as OptionItemProps[];
-      updateOptions(optionCtrl, data, options, false);
+      updateOptions(optionCtrl, data, false);
    });
 };
 
@@ -164,8 +150,8 @@ const queryOptions = <T>(
       url: '',
       cacheTime: 60000,
       fieldMap: {
-         ...fieldMap,
          ...url.fieldMap,
+         ...fieldMap,
       },
    };
    const optionUrl = {
@@ -173,8 +159,10 @@ const queryOptions = <T>(
       ...rest,
    };
    optionUrl.loadingText = false;
+   console.log(optionUrl.fieldMap, params);
    if (!params) params = {};
    if (!params.Query) params.Query = {};
+   optionCtrl.optionQuery = params;
    optionCtrl.isOptionLoading.value = true;
    return httpPost<T>(optionUrl, params)
       .then((result: ApiResponse<T> | null) => {
@@ -284,9 +272,11 @@ export const onOptionChanged = (
    if (inputFactory?.editorCtrl && inputFactory.errInfo?.value.errClass) {
       formValidate(inputFactory.editorCtrl);
    }
+   optionCtrl.selected.value = values as undefined | string | number | string[] | number[];
 
    // 获取选中的选项对象或对象数组
    const selectedValues = getSelectedValues(values, optionCtrl.options.value);
+   optionCtrl.selectedOptions.value = selectedValues as OptionItemProps[];
 
    // 如果配置了 formData 和 outFields，将选中的其它属性值映射到 formData 上
    if (props.formData && props.outFields) {

package/src/utils/page.ts

@@ -50,6 +50,10 @@ const defaultOptions: {
       all: false,
       allValue: [0, 1],
       autoload: true,
+      fieldMap: {
+         label: 'Name',
+         value: 'Id',
+      },
    },
 };
 
@@ -226,12 +230,12 @@ export const useOptionFactory = (url?: IUrlInfo, props?: OptionProps) => {
    const optionCtrl: OptionControl = {
       ...defaultOptions.OptionOption,
       url: url,
-      options: ref([]),
       reload: ref(false),
+      optionQuery: {},
       data: shallowRef([]),
       selected: ref([]),
       selectedOptions: ref([]),
-      optionQuery: {},
+      options: ref([]),
       isOptionLoading: ref(false),
    };
 
@@ -240,15 +244,50 @@ export const useOptionFactory = (url?: IUrlInfo, props?: OptionProps) => {
       () => optionCtrl.reload.value,
       (newVal) => {
          if (newVal) {
-            // 使用 nextTick 或 setTimeout 延迟重置值
             setTimeout(() => {
                optionCtrl.reload.value = false;
             }, 1);
-            loadOption(optionCtrl, props);
+            loadOption(true, optionCtrl, props);
          }
       },
    );
 
+   // // 为 optionCtrl 创建响应式的 params 监听
+   // // 使用 Proxy 来拦截 params 的设置，确保能够触发响应式更新
+   // const originalParams = optionCtrl.params;
+   // const paramsRef = ref(originalParams);
+
+   // // 使用 Object.defineProperty 来拦截 params 的赋值
+   // Object.defineProperty(optionCtrl, 'params', {
+   //    get() {
+   //       return paramsRef.value;
+   //    },
+   //    set(newParams) {
+   //       paramsRef.value = newParams;
+   //    },
+   //    enumerable: true,
+   //    configurable: true,
+   // });
+
+   // let isInitialized = false;
+
+   // // 监听params变化，自动重新加载数据
+   // watch(
+   //    () => paramsRef.value,
+   //    () => {
+   //       if (!isInitialized) {
+   //          isInitialized = true;
+   //          return;
+   //       }
+   //       // 确保有URL且params存在时才自动重新加载
+   //       // 避免重复加载，通过reload状态控制
+   //       if (!optionCtrl.reload.value) {
+   //          optionCtrl.reload.value = true;
+   //       }
+   //    },
+   //    { deep: true },
+   // );
+
    return {
       optionCtrl,
    };