@skyfox2000/webui 1.0.14 → 1.2.0

package/src/utils/options.ts

@@ -0,0 +1,324 @@
+import {
+   AnyData,
+   ApiResponse,
+   fieldMapping,
+   httpPost,
+   IUrlInfo,
+   parseFieldTemplate,
+   ReqParams,
+   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 { ProviderKeys } from '@/typings/page.d';
+import message from 'vue-m-message';
+import eventBus from './eventbus';
+import { formValidate } from './form-validate';
+import { combineParams } from '@skyfox2000/microbase';
+
+/**
+ * 自动初始化选择项
+ * @param autoload 是否自动加载
+ * @param props 选项外部属性值
+ * @param options 实际选择项
+ * @param inputFactory 本地工厂，用于统一处理事件
+ * @param url 选项接口
+ * @param params 选择参数
+ */
+export const loadOption = (
+   autoload: boolean,
+   props: OptionProps,
+   options: Ref<OptionItemProps[]>,
+   inputFactory?: InputFactoryItems<any>,
+   url?: IUrlInfo,
+   // 自定义的额外参数
+   params?: ReqParams,
+) => {
+   if (inputFactory && props.reloadEvent) {
+      /// 接收事件，联动显示或者重新加载数据
+      inputFactory.reloadHandler = (_event: string, data: Record<string, AnyData> | AnyData[]) => {
+         optionEventHandler(url!, props, data, options);
+      };
+      eventBus.on(props.reloadEvent, inputFactory.reloadHandler);
+   }
+   if (props.data) {
+      watch(
+         () => props.data,
+         () => {
+            updateOptions(props, props.data!, options, true);
+         },
+         { deep: true, immediate: true },
+      );
+   } else if (url && url.url) {
+      if (autoload !== false) doQueryOptions(url, props, params ?? {}, options);
+   } else {
+      const labelText = ref<string>(inject(ProviderKeys.LabelText, ''));
+      message.error('`' + labelText.value + '` 未配置选项数据！', {
+         duration: 5000,
+      });
+   }
+};
+
+/**
+ * 组件选项数据更新
+ * @param props 选项外部属性值
+ * @param data 提供的下拉数据
+ * @param options 实际选择项
+ * @param mapping 是否需要转换字段
+ */
+const updateOptions = (
+   props: OptionProps,
+   data: Record<string, AnyData>[],
+   options: Ref<OptionItemProps[]>,
+   mapping: boolean,
+) => {
+   if (!data || data.length === 0) {
+      options.value = [];
+      return;
+   }
+   if (mapping) {
+      // 转换字段
+      const fieldMap = {
+         ...props.fieldMap,
+      };
+      data = fieldMapping(fieldMap, data);
+   }
+
+   data = JSON.parse(JSON.stringify(data));
+   if (props.all) {
+      data.unshift({
+         label: '全部',
+         value: undefined,
+      });
+   }
+
+   options.value = data as OptionItemProps[];
+};
+
+/**
+ * 选项重载事件处理
+ * @param url 选项接口
+ * @param props 选项外部属性值
+ * @param data 提供的下拉数据
+ * @param options 实际选择项
+ */
+const optionEventHandler = (
+   url: IUrlInfo,
+   props: OptionProps,
+   data: Record<string, AnyData> | AnyData[],
+   options: Ref<OptionItemProps[]>,
+) => {
+   if (Array.isArray(data)) {
+      updateOptions(props, data, options, true);
+   } else {
+      doQueryOptions(url, props, { Query: data }, options);
+   }
+};
+
+/**
+ * 卸载选择项
+ * @param props 选项外部属性值
+ * @param inputFactory 输入组件工厂
+ */
+export const unloadOption = (props: OptionProps, inputFactory?: InputFactoryItems<any>) => {
+   if (inputFactory && props.reloadEvent && inputFactory.reloadHandler)
+      eventBus.off(props.reloadEvent, inputFactory.reloadHandler);
+};
+
+/**
+ *
+ * @param url 选项接口
+ * @param props 选项外部属性值
+ * @param params 查询条件
+ * @param options 实际选择项
+ */
+const doQueryOptions = (url: IUrlInfo, props: OptionProps, params: ReqParams, options: Ref<OptionItemProps[]>) => {
+   const newParams: ReqParams = combineParams(url.params, params, props.params);
+   queryOptions(url, props.fieldMap, newParams).then((results) => {
+      // 使用url，由request负责转换，无需再次map转换
+      const data = results as OptionItemProps[];
+      updateOptions(props, data, options, false);
+   });
+};
+
+/**
+ * 请求查询选项
+ * @param url 选项接口
+ * @param fieldMap 选项数据转换
+ * @param params 选择参数
+ * @returns 选项列表
+ * @default 默认设置
+ *  - cacheTime: 60000
+ *  - fieldMap:
+ **   {
+ **      title: "Name",
+ **      label: "Name",
+ **      value: "Id",
+ **      key: "Id"
+ **   }
+ */
+const queryOptions = <T>(
+   url: IUrlInfo,
+   fieldMap?: Record<string, string>,
+   params?: ReqParams,
+): Promise<T[] | undefined> => {
+   // 排除 fieldMap 属性
+   const { fieldMap: _, ...rest } = url;
+   const defaultUrl: IUrlInfo = {
+      url: '',
+      cacheTime: 60000,
+      fieldMap: {
+         ...fieldMap,
+         ...url.fieldMap,
+      },
+   };
+   const optionUrl = {
+      ...defaultUrl,
+      ...rest,
+   };
+   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[];
+         }
+      }
+      return [];
+   });
+};
+
+/**
+ * 获取选中的选项对象或对象数组
+ * @param values 当前选择的值
+ * @param options 所有选项对象数组
+ * @returns 选中的选项对象或对象数组
+ */
+export const getSelectedValues = (
+   values: undefined | string | number | (string | number | undefined)[],
+   options: OptionItemProps[],
+): OptionItemProps | OptionItemProps[] | undefined => {
+   // 如果 values 为 undefined，直接返回 undefined
+   if (values === undefined) return undefined;
+
+   // 如果 values 是数组，返回所有匹配的选项对象数组
+   if (Array.isArray(values)) {
+      return options.filter((option) => values.includes(option.value));
+   }
+   // 如果 values 是单个值，返回匹配的单个选项对象
+   else {
+      return options.find((option) => option.value === values);
+   }
+};
+
+// 辅助函数：根据路径设置值
+const setNestedValue = (obj: Record<string, any>, path: string, value: any) => {
+   const parts = path.split('.');
+   let current = obj;
+   for (let i = 0; i < parts.length - 1; i++) {
+      const part = parts[i];
+      if (!current[part]) {
+         current[part] = {};
+      }
+      current = current[part];
+   }
+   current[parts[parts.length - 1]] = value;
+};
+
+/**
+ * 将选中的值根据 outFields 映射到 formData 上
+ * @param formData 需要更新的数据对象
+ * @param outFields 输出字段转换映射关系
+ * @param selectedValues 选中的选项对象或对象数组
+ */
+export const outFormDataFields = (
+   formData: Record<string, any>,
+   outFields: Record<string, string>,
+   selectedValues?: OptionItemProps | OptionItemProps[] | null,
+) => {
+   // 如果 selectedValues 为 undefined，直接返回
+   if (selectedValues === undefined || selectedValues === null) {
+      Object.entries(outFields).forEach(([targetKey]) => {
+         setNestedValue(formData, targetKey, selectedValues);
+      });
+      return;
+   }
+
+   // 如果 selectedValues 是数组
+   if (Array.isArray(selectedValues)) {
+      // selectedValues.forEach((selectedValue) => {
+      //    Object.entries(outFields).forEach(([targetKey, sourceKey]) => {
+      //       const value = selectedValue[sourceKey];
+      //       setNestedValue(formData, targetKey, value);
+      //    });
+      // });
+   }
+   // 如果 selectedValues 是单个对象
+   else {
+      Object.entries(outFields).forEach(([targetKey, sourceKey]) => {
+         if (sourceKey.includes('${')) {
+            const value = parseFieldTemplate(sourceKey, selectedValues);
+            setNestedValue(formData, targetKey, value);
+         } else {
+            setNestedValue(formData, targetKey, selectedValues[sourceKey]);
+         }
+      });
+   }
+};
+
+/**
+ * 选项选中事件处理函数
+ * @param props 选项外部属性值
+ * @param values 选中的项目，支持单选或多项
+ * @param options 实际选择项
+ * @param inputFactory 输入组件工厂
+ */
+export const onOptionChanged = (
+   props: OptionProps,
+   values: undefined | SelectValue,
+   options: Ref<OptionItemProps[]>,
+   inputFactory: InputFactoryItems<any>,
+): OptionItemProps | OptionItemProps[] | undefined => {
+   // 如果存在验证错误，重新检测
+   if (inputFactory.editorCtrl && inputFactory.errInfo?.value.errClass) {
+      formValidate(inputFactory.editorCtrl);
+   }
+
+   // 获取选中的选项对象或对象数组
+   const selectedValues = getSelectedValues(values, options.value);
+
+   // 如果配置了 formData 和 outFields，将选中的其它属性值映射到 formData 上
+   if (props.formData && props.outFields) {
+      outFormDataFields(props.formData, props.outFields, selectedValues);
+   }
+
+   if (props.changeEvent) {
+      if (Array.isArray(props.changeEvent)) {
+         props.changeEvent.every((changeEvent: string) => {
+            eventBus.emit(changeEvent, values, selectedValues);
+         });
+      } else {
+         eventBus.emit(props.changeEvent, values, selectedValues);
+      }
+   }
+   // 触发 inputFactory 的 change 事件
+   if (inputFactory.inputEmit) {
+      inputFactory.inputEmit('change', values, selectedValues);
+   }
+   return selectedValues;
+};
+
+/**
+ * 获取选中的选项文字内容
+ * @param selectedValues 选中的选项对象或对象数
+ * @returns 选中的选项文字内容
+ */
+export const getSelectedLabels = (selectedValues: OptionItemProps | OptionItemProps[] | undefined): string[] => {
+   if (selectedValues === undefined) return [];
+   if (Array.isArray(selectedValues)) {
+      return selectedValues.map((option) => option.label);
+   }
+   return [selectedValues.label];
+};

package/src/utils/page.ts

@@ -0,0 +1,262 @@
+import { ApiUrls } from '@/typings/urls.d';
+import { ValidateRule } from '@/typings/form.d';
+import { EditorControl, EditorControlOption } from '@/typings/form.d';
+import { GridControl, GridControlOption } from '@/typings/table.d';
+import { PageControl, PageControlOption } from '@/typings/page.d';
+import { TreeControl, TreeControlOption } from '@/typings/tree.d';
+import { ref, watch, shallowRef } from 'vue';
+import { queryTree } from './tree';
+import { gridQueryFind, gridQueryList } from './table';
+
+const defaultOptions: {
+   PageOption: PageControlOption;
+   GridOption: GridControlOption;
+   EditorOption: EditorControlOption;
+   TreeOption: TreeControlOption;
+} = {
+   PageOption: {
+      primaryKey: 'Id',
+      statusKey: 'Enabled',
+   },
+   GridOption: {
+      autoload: true,
+      primaryKey: 'Id',
+      statusKey: 'Enabled',
+      remotePage: true,
+      tableSize: ref('small'),
+      selectable: ref(false),
+      searchBar: ref(true),
+      pageSize: ref(10),
+      rowExpand: ref(false),
+      buttons: ref(['New']),
+      tools: ['Reload', 'RowHeight', 'TableHeadset'],
+      operates: ['Edit', 'Delete'],
+   },
+   EditorOption: {
+      primaryKey: 'Id',
+      autoClose: true,
+      autoDetail: false,
+      saveBtnVisible: true,
+      saveAsBtnVisible: true,
+   },
+   TreeOption: {
+      autoload: true,
+   },
+};
+
+/**
+ * 设置页面控制工厂默认参数
+ * @param options 修改默认参数
+ */
+export const initPageFactory = (options: {
+   pageOption?: PageControlOption;
+   gridOption?: GridControlOption;
+   editorOptions?: EditorControlOption;
+   treeOption?: TreeControlOption;
+}) => {
+   defaultOptions.PageOption = {
+      ...defaultOptions.PageOption,
+      ...options.pageOption,
+   };
+   defaultOptions.GridOption = {
+      ...defaultOptions.GridOption,
+      ...options.gridOption,
+   };
+   defaultOptions.EditorOption = {
+      ...defaultOptions.EditorOption,
+      ...options.editorOptions,
+   };
+   defaultOptions.TreeOption = {
+      ...defaultOptions.TreeOption,
+      ...options.treeOption,
+   };
+};
+
+/**
+ * 编辑器工厂处理
+ *
+ * @param urls 接口地址
+ * @param pageCtrl 页面控制
+ * @param defaultData 默认数据
+ * @param formRules 表单验证规则
+ * @returns
+ */
+export const useEditorFactory = <T, E>(
+   urls: ApiUrls,
+   pageCtrl: PageControl<T>,
+   defaultData?: Partial<E>,
+   formRules?: Record<string, ValidateRule>,
+) => {
+   /**
+    * 表单数据交互控制
+    */
+   const editorCtrl: EditorControl<E> = {
+      ...defaultOptions.EditorOption,
+      name: '',
+      default: defaultData ? JSON.parse(JSON.stringify(defaultData)) : undefined,
+      visible: ref(false),
+      page: pageCtrl,
+      formData: ref(defaultData ? JSON.parse(JSON.stringify(defaultData)) : undefined),
+      formRules: ref(formRules),
+      ruleResults: ref({}),
+      updateData: ref(undefined),
+      saveUrl: urls.urls.save,
+      detailUrl: urls.urls.detail,
+      isFormSaving: ref(false),
+      isFormLoading: ref(false),
+   };
+
+   return {
+      editorCtrl,
+   };
+};
+
+/**
+ * 表格控制工厂处理
+ *
+ * @param urls 接口地址
+ * @param pageCtrl 页面控制
+ * @param columns 表格列配置
+ * @returns
+ */
+export const useGridFactory = <T, G>(urls: ApiUrls, pageCtrl: PageControl<T>, columns?: Record<string, any>[]) => {
+   /**
+    * 表格数据交互控制
+    */
+   const gridCtrl: GridControl<G> = {
+      ...defaultOptions.GridOption,
+      tableSize: ref(defaultOptions.GridOption.tableSize.value),
+      selectable: ref(defaultOptions.GridOption.selectable.value),
+      searchBar: ref(defaultOptions.GridOption.searchBar.value),
+      pageSize: ref(defaultOptions.GridOption.pageSize.value),
+      rowExpand: ref(defaultOptions.GridOption.rowExpand.value),
+      buttons: ref([...defaultOptions.GridOption.buttons.value]),
+      tools: [...defaultOptions.GridOption.tools],
+      operates: [...defaultOptions.GridOption.operates],
+
+      columns: ref(columns || []),
+      reload: ref(false),
+      pageNo: ref(1),
+      total: ref(0),
+      page: pageCtrl,
+      selectKeys: ref([]),
+      selectRows: ref([]),
+      rowData: ref(undefined),
+      gridQuery: {},
+      tableData: shallowRef(undefined),
+      expandRows: ref({}),
+      isGridLoading: ref(false),
+      isGridSaving: ref(false),
+      gridUrl: urls.urls.list || urls.urls.find,
+      updateUrl: urls.urls.update,
+      deleteUrl: urls.urls.delete,
+   };
+
+   // 监听重载状态
+   watch(
+      () => gridCtrl.reload.value,
+      (newVal) => {
+         if (newVal) {
+            // 使用 nextTick 或 setTimeout 延迟重置值
+            setTimeout(() => {
+               gridCtrl.reload.value = false;
+            }, 1);
+
+            if (gridCtrl.remotePage) gridQueryFind(gridCtrl);
+            else gridQueryList(gridCtrl);
+         }
+      },
+   );
+
+   return {
+      gridCtrl,
+   };
+};
+
+/**
+ * 树控制工厂处理
+ *
+ * @param urls 接口地址
+ * @param pageCtrl 页面控制
+ * @returns
+ */
+export const useTreeFactory = <T>(urls: ApiUrls, pageCtrl: PageControl<T>) => {
+   /**
+    * 树数据交互控制
+    */
+   const treeCtrl: TreeControl = {
+      ...defaultOptions.TreeOption,
+      reload: ref(false),
+      page: pageCtrl,
+      node: ref(undefined),
+      url: urls.urls.tree,
+      data: shallowRef(undefined),
+      isTreeLoading: ref(false),
+   };
+
+   // 监听重载状态
+   watch(
+      () => treeCtrl.reload.value,
+      (newVal) => {
+         if (newVal) {
+            // 使用 nextTick 或 setTimeout 延迟重置值
+            setTimeout(() => {
+               treeCtrl.reload.value = false;
+            }, 1);
+            queryTree(treeCtrl);
+         }
+      },
+   );
+
+   return {
+      treeCtrl,
+   };
+};
+
+/**
+ * 页面控制工厂处理
+ *
+ * @param urls 接口地址
+ * @param defaultData 默认数据
+ * @param formRules 表单验证规则
+ * @returns
+ */
+export const usePageFactory = <T>(
+   urls: ApiUrls,
+   defaultData?: Partial<T>,
+   formRules?: Record<string, ValidateRule>,
+) => {
+   // urls 参数处理
+   // api 默认
+   // authorize 默认
+   for (const key in urls.urls) {
+      if (urls.urls[key]) {
+         if (!urls.urls[key].api) urls.urls[key].api = urls.api;
+         if (urls.urls[key].authorize === undefined) urls.urls[key].authorize = urls.authorize;
+      }
+   }
+
+   /**
+    * 页面交互主数据
+    * 通过统一的页面交互数据，能够更方便在页面组件中传递数据
+    */
+   const pageCtrl: PageControl<T> = {
+      ...defaultOptions.PageOption,
+      ...urls,
+   };
+
+   const { editorCtrl } = useEditorFactory<T, T>(urls, pageCtrl, defaultData, formRules);
+   const { gridCtrl } = useGridFactory<T, T>(urls, pageCtrl);
+
+   pageCtrl.editor = editorCtrl;
+   pageCtrl.grid = gridCtrl;
+   gridCtrl.editor = editorCtrl;
+   gridCtrl.tools = ['Reload', 'RowHeight', 'TableHeadset', 'Fullscreen'];
+   editorCtrl.grid = gridCtrl;
+
+   return {
+      pageCtrl,
+      editorCtrl,
+      gridCtrl,
+   };
+};