@skyfox2000/webui 1.2.12 → 1.3.0

package/src/typings/option.d.ts

@@ -1,4 +1,6 @@
 import { AnyData, IUrlInfo, ReqParams } from '@skyfox2000/fapi';
+import { Ref, ShallowRef } from 'vue';
+import { InputFactoryItems } from './form.d';
 
 type RawValue = string | number;
 export type SelectValue = RawValue | RawValue[];
@@ -20,37 +22,13 @@ export interface OptionItemProps {
  */
 export interface OptionProps {
    /**
-    * 自动接口加载数据
-    * - 默认为true
-    */
-   autoload?: boolean;
-   /**
-    * 是否显示全部选项
-    * - 默认为false
-    */
-   all?: boolean;
-   /**
-    * 选择项数据
-    */
-   data?: Record<string, any>[];
-   /**
-    * 字段转换控制
-    * - Key：目的字段
-    * - Value：源字段，支持模板 ${}
-    */
-   fieldMap?: Record<string, string>;
-   /**
-    * 接口定义
+    * 选项数据接口
     */
    url?: IUrlInfo;
    /**
-    * 重载接口，默认false
-    */
-   reload?: boolean;
-   /**
-    * 接口自定义QOD参数
+    * 自定义选项数据, 优先级高于optionCtrl.data
     */
-   params?: ReqParams;
+   data?: OptionItemProps[];
    /**
     * 表单数据
     */
@@ -80,6 +58,10 @@ export interface OptionProps {
     * - 第一个参数为事件名，第二个参数为事件参数模板，支持模板 ${selectedValues}
     */
    changeEvent?: [string | string[], string];
+   /**
+    * 选项控制器
+    */
+   optionCtrl?: OptionControl;
 }
 
 import type { PropType } from 'vue';
@@ -89,59 +71,17 @@ import type { PropType } from 'vue';
  */
 export const OptionCommProps = {
    /**
-    * 自动接口加载数据
-    * - 默认为true
-    */
-   autoload: {
-      type: Boolean as PropType<boolean>,
-      required: false,
-      default: true,
-   },
-   /**
-    * 是否显示全部选项
-    * - 默认为false
-    */
-   all: {
-      type: Boolean as PropType<boolean>,
-      required: false,
-      default: false,
-   },
-   /**
-    * 选择项数据
-    */
-   data: {
-      type: Array as PropType<Record<string, any>[]>,
-      required: false,
-   },
-   /**
-    * 字段转换控制
-    * - Key：目的字段
-    * - Value：源字段，支持模板 ${}
-    */
-   fieldMap: {
-      type: Object as PropType<Record<string, string>>,
-      required: false,
-   },
-   /**
-    * 接口定义
+    * 选项数据接口
     */
    url: {
       type: Object as PropType<IUrlInfo>,
       required: false,
    },
    /**
-    * 重载接口，默认false
+    * 选项数据
     */
-   reload: {
-      type: Boolean as PropType<boolean>,
-      required: false,
-      default: false,
-   },
-   /**
-    * 接口自定义QOD参数
-    */
-   params: {
-      type: Object as PropType<ReqParams>,
+   data: {
+      type: Array as PropType<OptionItemProps[]>,
       required: false,
    },
    /**
@@ -188,4 +128,84 @@ export const OptionCommProps = {
       type: Array as PropType<[string | string[], string]>,
       required: false,
    },
+   optionCtrl: {
+      type: Object as PropType<OptionControl>,
+      required: false,
+   },
+};
+
+/**
+ * 表格控制默认设置
+ */
+export type OptionControlOption = {
+   /**
+    * 是否显示全部选项
+    * - 默认为false
+    */
+   all: boolean;
+   /**
+    * 全部选项值
+    * 自定义全部选项的值
+    * 如果all为true，则显示全部选项
+    * 未设置allValue，则默认[0, 1]
+    */
+   allValue: string | number | string[] | number[] | undefined;
+   /**
+    * 自动加载数据
+    */
+   autoload: boolean;
+};
+
+/**
+ * 选项数据交互标准定义
+ */
+export type OptionControl = OptionControlOption & {
+   /**
+    * 输入项工厂
+    */
+   inputFactory?: ShallowRef<InputFactoryItems<any>>;
+   /**
+    * 重新加载数据
+    */
+   reload: Ref<boolean>;
+   /**
+    * 当前查询条件
+    */
+   optionQuery?: ReqParams;
+   /**
+    * 当前数据
+    */
+   data: ShallowRef<OptionItemProps[] | undefined>;
+   /**
+    * 选项数据
+    */
+   options: Ref<OptionItemProps[]>;
+   /**
+    * 基础选中数据
+    */
+   selected: Ref<string | number | string[] | number[] | undefined>;
+   /**
+    * 选中数据
+    */
+   selectedOptions: Ref<OptionItemProps[]>;
+   /**
+    * 字段转换控制
+    * - Key：目的字段
+    * - Value：源字段，支持模板 ${}
+    */
+   fieldMap?: Record<string, string>;
+   /**
+    * 查询接口
+    *  - 优先使用
+    *  - 或使用PageData.urls.option
+    */
+   url?: IUrlInfo;
+   /**
+    * 额外查询参数
+    */
+   params?: ReqParams;
+   /**
+    * 是否正在加载中
+    */
+   isOptionLoading: Ref<boolean>;
 };

package/src/utils/form-excel.ts

@@ -33,7 +33,7 @@ export type ExcelMarkInfo = {
 export const processExcelFile = async (excelBuffer: ArrayBuffer) => {
    // 动态导入 exceljs
    const ExcelJS = await import('exceljs');
-   const workbook = new ExcelJS.Workbook();
+   const workbook = new ExcelJS.default.Workbook();
    await workbook.xlsx.load(excelBuffer);
 
    // 获取第一个工作表
@@ -168,7 +168,7 @@ export const createMarkedExcelBlob = async (
    }
 
    // 创建一个新的工作簿和工作表
-   const newWorkbook = new ExcelJS.Workbook();
+   const newWorkbook = new ExcelJS.default.Workbook();
    const newWorksheet = newWorkbook.addWorksheet('Sheet1');
 
    // 默认列宽

package/src/utils/options.ts

@@ -9,8 +9,7 @@ import {
    ResStatus,
 } from '@skyfox2000/fapi';
 import { inject, ref, Ref, watch } from 'vue';
-import { OptionProps, OptionItemProps, SelectValue } from '@/typings/option.d';
-import { InputFactoryItems } from '@/typings/form.d';
+import { OptionItemProps, SelectValue, OptionControl, OptionProps } from '@/typings/option.d';
 import { ProviderKeys } from '@/typings/page.d';
 import message from 'vue-m-message';
 import eventBus from './eventbus';
@@ -19,40 +18,30 @@ import { combineParams } from '@skyfox2000/microbase';
 
 /**
  * 自动初始化选择项
- * @param autoload 是否自动加载
- * @param props 选项外部属性值
- * @param options 实际选择项
- * @param inputFactory 本地工厂，用于统一处理事件
- * @param url 选项接口
- * @param params 选择参数
+ * @param optionCtrl 选项控制器
  */
-export const loadOption = (
-   autoload: boolean,
-   props: OptionProps,
-   options: Ref<OptionItemProps[]>,
-   inputFactory?: InputFactoryItems<any>,
-   url?: IUrlInfo,
-   // 自定义的额外参数
-   params?: ReqParams,
-) => {
-   if (inputFactory && props.reloadEvent) {
+export const loadOption = (optionCtrl: OptionControl, props?: OptionProps) => {
+   if (optionCtrl.inputFactory && props?.reloadEvent) {
+      const inputFactory = optionCtrl.inputFactory.value;
       /// 接收事件，联动显示或者重新加载数据
       inputFactory.reloadHandler = (_event: string, params: Record<string, AnyData> | AnyData[]) => {
-         optionEventHandler(url!, props, params, options);
+         optionEventHandler(optionCtrl.url!, optionCtrl, params, optionCtrl.options);
       };
       eventBus.on(props.reloadEvent, inputFactory.reloadHandler);
    }
 
-   if (props.data) {
+   if (props?.data) {
+      // 监听自定义选项数据, 优先级高于optionCtrl.data
       watch(
          () => props.data,
          () => {
-            updateOptions(props, props.data!, options, true);
+            updateOptions(optionCtrl, props.data!, optionCtrl.options, true);
          },
          { deep: true, immediate: true },
       );
-   } else if (url && url.url) {
-      if (autoload !== false) doQueryOptions(url, props, params ?? {}, options);
+   } else if (optionCtrl.url && optionCtrl.url.url) {
+      if (optionCtrl.autoload !== false)
+         doQueryOptions(optionCtrl.url, optionCtrl, optionCtrl.params ?? {}, optionCtrl.options);
    } else {
       const labelText = ref<string>(inject(ProviderKeys.LabelText, ''));
       message.error('`' + labelText.value + '` 未配置选项数据！', {
@@ -63,34 +52,30 @@ export const loadOption = (
 
 /**
  * 组件选项数据更新
- * @param props 选项外部属性值
+ * @param optionCtrl 选项控制器
  * @param data 提供的下拉数据
  * @param options 实际选择项
  * @param mapping 是否需要转换字段
  */
 const updateOptions = (
-   props: OptionProps,
+   optionCtrl: OptionControl,
    data: Record<string, AnyData>[],
    options: Ref<OptionItemProps[]>,
    mapping: boolean,
 ) => {
-   if (!data || data.length === 0) {
-      options.value = [];
-      return;
-   }
    if (mapping) {
       // 转换字段
       const fieldMap = {
-         ...props.fieldMap,
+         ...optionCtrl.fieldMap,
       };
       data = fieldMapping(fieldMap, data);
    }
 
-   data = JSON.parse(JSON.stringify(data));
-   if (props.all) {
+   data = JSON.parse(JSON.stringify(data ?? []));
+   if (optionCtrl.all) {
       data.unshift({
          label: '全部',
-         value: undefined,
+         value: optionCtrl.allValue ?? undefined,
       });
    }
 
@@ -100,48 +85,54 @@ const updateOptions = (
 /**
  * 选项重载事件处理
  * @param url 选项接口
- * @param props 选项外部属性值
+ * @param optionCtrl 选项控制器
  * @param data 提供的下拉数据
  * @param options 实际选择项
  */
 const optionEventHandler = (
    url: IUrlInfo,
-   props: OptionProps,
+   optionCtrl: OptionControl,
    params_data: Record<string, AnyData> | AnyData[],
    options: Ref<OptionItemProps[]>,
 ) => {
    if (Array.isArray(params_data)) {
       // 数据组仅用于联动显示
-      updateOptions(props, params_data, options, true);
+      updateOptions(optionCtrl, params_data, options, true);
    } else {
       // 其它情况使用Query参数
-      doQueryOptions(url, props, params_data, options);
+      doQueryOptions(url, optionCtrl, params_data, options);
    }
 };
 
 /**
  * 卸载选择项
- * @param props 选项外部属性值
- * @param inputFactory 输入组件工厂
+ * @param optionCtrl 选项控制器
  */
-export const unloadOption = (props: OptionProps, inputFactory?: InputFactoryItems<any>) => {
-   if (inputFactory && props.reloadEvent && inputFactory.reloadHandler)
-      eventBus.off(props.reloadEvent, inputFactory.reloadHandler);
+export const unloadOption = (optionCtrl: OptionControl, props: OptionProps) => {
+   if (optionCtrl.inputFactory?.value && props.reloadEvent && optionCtrl.inputFactory.value.reloadHandler)
+      eventBus.off(props.reloadEvent, optionCtrl.inputFactory.value.reloadHandler);
 };
 
 /**
- *
+ * 查询选项数据
  * @param url 选项接口
- * @param props 选项外部属性值
+ * @param optionCtrl 选项控制器
  * @param params 查询条件
  * @param options 实际选择项
  */
-const doQueryOptions = (url: IUrlInfo, props: OptionProps, params: ReqParams, options: Ref<OptionItemProps[]>) => {
-   const newParams: ReqParams = combineParams(url.params, props.params, params);
-   queryOptions(url, props.fieldMap, newParams).then((results) => {
+const doQueryOptions = (
+   url: IUrlInfo,
+   optionCtrl: OptionControl,
+   params: ReqParams,
+   options: Ref<OptionItemProps[]>,
+) => {
+   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(props, data, options, false);
+      updateOptions(optionCtrl, data, options, false);
    });
 };
 
@@ -163,6 +154,7 @@ const doQueryOptions = (url: IUrlInfo, props: OptionProps, params: ReqParams, op
  */
 const queryOptions = <T>(
    url: IUrlInfo,
+   optionCtrl: OptionControl,
    fieldMap?: Record<string, string>,
    params?: ReqParams,
 ): Promise<T[] | undefined> => {
@@ -183,14 +175,19 @@ const queryOptions = <T>(
    optionUrl.loadingText = false;
    if (!params) params = {};
    if (!params.Query) params.Query = {};
-   return httpPost<T>(optionUrl, params).then((result: ApiResponse<T> | null) => {
-      if (result?.status === ResStatus.SUCCESS) {
-         if (result.data) {
-            return result.data as T[];
+   optionCtrl.isOptionLoading.value = true;
+   return httpPost<T>(optionUrl, params)
+      .then((result: ApiResponse<T> | null) => {
+         if (result?.status === ResStatus.SUCCESS) {
+            if (result.data) {
+               return result.data as T[];
+            }
          }
-      }
-      return [];
-   });
+         return [];
+      })
+      .finally(() => {
+         optionCtrl.isOptionLoading.value = false;
+      });
 };
 
 /**
@@ -273,24 +270,23 @@ export const outFormDataFields = (
 
 /**
  * 选项选中事件处理函数
- * @param props 选项外部属性值
+ * @param optionCtrl 选项控制器
  * @param values 选中的项目，支持单选或多项
- * @param options 实际选择项
  * @param inputFactory 输入组件工厂
  */
 export const onOptionChanged = (
+   optionCtrl: OptionControl,
    props: OptionProps,
    values: undefined | SelectValue,
-   options: Ref<OptionItemProps[]>,
-   inputFactory: InputFactoryItems<any>,
 ): OptionItemProps | OptionItemProps[] | undefined => {
+   const inputFactory = optionCtrl.inputFactory?.value;
    // 如果存在验证错误，重新检测
-   if (inputFactory.editorCtrl && inputFactory.errInfo?.value.errClass) {
+   if (inputFactory?.editorCtrl && inputFactory.errInfo?.value.errClass) {
       formValidate(inputFactory.editorCtrl);
    }
 
    // 获取选中的选项对象或对象数组
-   const selectedValues = getSelectedValues(values, options.value);
+   const selectedValues = getSelectedValues(values, optionCtrl.options.value);
 
    // 如果配置了 formData 和 outFields，将选中的其它属性值映射到 formData 上
    if (props.formData && props.outFields) {
@@ -330,7 +326,7 @@ export const onOptionChanged = (
       }
    }
    // 触发 inputFactory 的 change 事件
-   if (inputFactory.inputEmit) {
+   if (inputFactory?.inputEmit) {
       inputFactory.inputEmit('change', values, selectedValues);
    }
    return selectedValues;

package/src/utils/page.ts

@@ -7,12 +7,16 @@ import { TreeControl, TreeControlOption } from '@/typings/tree.d';
 import { ref, watch, shallowRef } from 'vue';
 import { queryTree } from './tree';
 import { gridQueryFind, gridQueryList } from './table';
+import { OptionControl, OptionControlOption, OptionProps } from '@/typings/option';
+import { loadOption } from './options';
+import { IUrlInfo } from '@skyfox2000/fapi';
 
 const defaultOptions: {
    PageOption: PageControlOption;
    GridOption: GridControlOption;
    EditorOption: EditorControlOption;
    TreeOption: TreeControlOption;
+   OptionOption: OptionControlOption;
 } = {
    PageOption: {
       primaryKey: 'Id',
@@ -42,6 +46,11 @@ const defaultOptions: {
    TreeOption: {
       autoload: true,
    },
+   OptionOption: {
+      all: false,
+      allValue: [0, 1],
+      autoload: true,
+   },
 };
 
 /**
@@ -213,6 +222,38 @@ export const useTreeFactory = <T>(urls: ApiUrls, pageCtrl: PageControl<T>) => {
    };
 };
 
+export const useOptionFactory = (url?: IUrlInfo, props?: OptionProps) => {
+   const optionCtrl: OptionControl = {
+      ...defaultOptions.OptionOption,
+      url: url,
+      options: ref([]),
+      reload: ref(false),
+      data: shallowRef([]),
+      selected: ref([]),
+      selectedOptions: ref([]),
+      optionQuery: {},
+      isOptionLoading: ref(false),
+   };
+
+   // 监听重载状态
+   watch(
+      () => optionCtrl.reload.value,
+      (newVal) => {
+         if (newVal) {
+            // 使用 nextTick 或 setTimeout 延迟重置值
+            setTimeout(() => {
+               optionCtrl.reload.value = false;
+            }, 1);
+            loadOption(optionCtrl, props);
+         }
+      },
+   );
+
+   return {
+      optionCtrl,
+   };
+};
+
 /**
  * 页面控制工厂处理
  *