@lingxiteam/ebe-utils 0.5.1 → 0.5.2

package/lib/public/src/components/pcfactory/src/Table/hooks/useCMDActions.ts

@@ -0,0 +1,325 @@
+import { useImperativeHandle, useState } from 'react';
+import { createEmptyRow, EMPTY_ROW_TEMP_KEY_ATTR } from '../utils';
+
+interface UseCommonCMDAction {
+  ref: any;
+  setCurrent?: React.SetStateAction<any>;
+  setCurrentPage?: React.SetStateAction<any>;
+  setTotal?: React.SetStateAction<any>;
+  selectedRows: any[];
+  selectedRowKeys: (string | number)[];
+  setSelectedRows: React.SetStateAction<any>;
+  setSelectedRowKeys: React.SetStateAction<any>;
+  setCurrentPageSelectedRows?: React.SetStateAction<any>;
+  setCurrentPageSelectedRowKeys?: React.SetStateAction<any>;
+  setSelectedRowsRule: React.SetStateAction<any>;
+  dataSourceLoading?: boolean;
+  innerDataSource: any[];
+  setInnerDataSource: Function;
+  setOuterDataSource: Function;
+  onRowSelected: Function;
+}
+
+interface UseCMDActionPropsType extends UseCommonCMDAction {
+  [key: string]: any;
+  ref: any;
+  form: any;
+  currentRowKey: string;
+  dataSourceFromDataSourceConfig?: string;
+  currentPageDataSource?: any[];
+  editInlineRow: Function;
+  setNowInlineEditKey: React.SetStateAction<any>;
+  setNowEditingData: React.SetStateAction<any>;
+  currentPageSelectedRows: any[];
+  currentPageSelectedRowKeys: (string | number)[];
+  page?: boolean;
+  pagination?: any;
+  onRowSaveClick: Function;
+  loadPrint: any;
+}
+
+const useCMDAction = (props: UseCMDActionPropsType) => {
+  const {
+    ref,
+    form,
+    currentRowKey,
+    dataSourceFromDataSourceConfig,
+    innerDataSource,
+    setInnerDataSource,
+    setOuterDataSource,
+    currentPageDataSource,
+    editInlineRow: innerEditInlineRow,
+    setNowInlineEditKey,
+    setNowEditingData,
+    setTotal,
+    setCurrent,
+    currentPageSelectedRows,
+    currentPageSelectedRowKeys,
+    page,
+    pagination,
+    onRowSaveClick,
+    loadPrint,
+  } = props;
+
+  // 表格编辑格式为下拉框时，绑定的服务对应的数据
+  const [colServiceDataForEdit, setColServiceDataForEdit] = useState({});
+
+  const { loading, colServiceData } = useCommonCMDAction(props);
+
+  const validateFormAndScroll = (compId: string, callback: any = () => {}) => {
+    const formValues = form.getFieldsValue() || {};
+    const keys = Object.keys(formValues).filter((k) => k.startsWith(compId));
+    form
+      .validateFields(keys)
+      .then(() => {
+        if (typeof callback === 'function') {
+          callback();
+        }
+      })
+      .catch((errorInfo: any) => {
+        if (typeof callback === 'function') {
+          callback(errorInfo);
+        }
+      });
+  };
+
+  useImperativeHandle(ref, () => ({
+    /**
+     * 加载表格数据（加载完之后，表格就脱离了数据源的控制了）
+     */
+    setTableData: (data: { dataSource: any[]; total: any; current: any }) => {
+      /**
+       * 注意，不是直接使用 setInnerDataSource
+       * 而是通过 setOuterDataSource 间接驱动 -> setInnerDataSource
+       * 因为需要对数据进行初始化
+       */
+      setOuterDataSource(data?.dataSource || []);
+      setTotal?.(data?.total);
+      setCurrent?.(data?.current);
+    },
+
+    /**
+     * 表格·加载字段数据
+     * （编辑格式为下拉框时，绑定的服务对应的数据）
+     * @param serviceData
+     */
+    addColServiceDataForEdit: (serviceData: any = {}) => {
+      setColServiceDataForEdit({
+        ...(colServiceDataForEdit || {}),
+        ...serviceData,
+      });
+    },
+    getTableCurrentPageSelected: () => {
+      return [...(currentPageSelectedRows || [])];
+    },
+    getTableCurrentPageSelectedKey: () => {
+      return [...(currentPageSelectedRowKeys || [])];
+    },
+    getPageNum: () => {
+      return page ? pagination.current : 1;
+    },
+
+    /**
+     * 新增一行空白数据（绑定了数据源/没有绑定数据源通用）
+     */
+    addTableEmptyRow: (updateData: Function, inlineeditnow?: boolean) => {
+      const newRowData = createEmptyRow();
+
+      // TODO: 正是由于这里的历史需求，导致在表格初始化数据里，需要保留处理空白行的逻辑
+      // 如果表格绑定了数据源，则添加空白数据行时，采用先在数据源中加入空白行的方式，再刷新该表格数据实现
+      if (dataSourceFromDataSourceConfig) {
+        const dataArrs = (dataSourceFromDataSourceConfig as any).split('.');
+        const dataName = dataArrs[1];
+
+        const payload = {
+          ...newRowData,
+        };
+
+        const params: any = {
+          name: dataName,
+          patch: undefined,
+          operateType: 0,
+          itemIndex: {},
+          newData: {},
+          payload,
+        };
+
+        if (dataArrs.length > 2) {
+          const childFiled = dataArrs.slice(
+            dataArrs.length - 1,
+            dataArrs.length,
+          );
+          params.otherObjectArrayOptions = {
+            [childFiled]: {
+              name: dataName,
+              patch: undefined,
+              operateType: 0,
+              itemIndex: {},
+              newData: {},
+              payload,
+            },
+          };
+          delete params.payload;
+          // 如果是更新子节点，需要增加isChildren标识
+          params.isChildren = true;
+        }
+        updateData(params);
+      } else {
+        // 注意，不是直接使用 setInnerDataSource，而是通过 setOuterDataSource 间接驱动 -> setInnerDataSource
+        setOuterDataSource([...innerDataSource, newRowData]);
+      }
+
+      // 是否开启行编辑
+      if (inlineeditnow) {
+        // 设置当前行为编辑状态
+        setNowInlineEditKey(newRowData[EMPTY_ROW_TEMP_KEY_ATTR]);
+        setNowEditingData({});
+      }
+    },
+
+    /**
+     * 新增一行数据（这里新增完后，表格就脱离了数据源的控制了）
+     */
+    addTableRowData: (newRowData: any) => {
+      /**
+       * 注意，不是直接使用 setInnerDataSource
+       * 而是通过 setOuterDataSource 间接驱动 -> setInnerDataSource
+       * 因为需要对数据进行初始化
+       */
+      setOuterDataSource([...innerDataSource, newRowData]);
+    },
+
+    /**
+     * 删除指定行数据
+     */
+    deleteTableRow: (type: string, value: any) => {
+      // 兼容 $row$，其他都当做 $rowId$
+      const newInnerDataSource = (innerDataSource || []).filter((row: any) => {
+        if (type === '$row$') {
+          return !Object.is(value, row);
+        }
+        return row[currentRowKey] !== value;
+      });
+
+      // 直接更新内部数据
+      setInnerDataSource(newInnerDataSource);
+    },
+
+    editInlineRow: (editRowKey: any) => {
+      // 指定行启用行内编辑操作
+      innerEditInlineRow(editRowKey);
+    },
+    saveInlineRow: () => {
+      // 强制保存行内编辑操作
+      // 把数据存进去
+      onRowSaveClick(null, null, true);
+    },
+    restoreInlineRow: () => {
+      innerEditInlineRow(null);
+    },
+    validateTableData: (compId: string, callback: any = () => {}) => {
+      validateFormAndScroll(compId, (err: any) => {
+        callback(err, currentPageDataSource);
+      });
+    },
+    validateTableRowData: (compId: string, callback: any = () => {}) => {
+      validateFormAndScroll(compId, (err: any) => {
+        callback(err);
+      });
+    },
+    loadPrint,
+  }));
+
+  return {
+    loading,
+    colServiceData,
+    colServiceDataForEdit,
+  };
+};
+
+const useCommonCMDAction = (props: UseCommonCMDAction) => {
+  const {
+    ref,
+    setTotal,
+    setCurrent,
+    setCurrentPage,
+    selectedRows,
+    selectedRowKeys,
+    setSelectedRows,
+    setSelectedRowKeys,
+    setCurrentPageSelectedRows,
+    setCurrentPageSelectedRowKeys,
+    setSelectedRowsRule,
+    onRowSelected,
+    dataSourceLoading,
+    innerDataSource,
+    setInnerDataSource,
+    setOuterDataSource,
+  } = props;
+
+  const [loading, setLoading] = useState(false);
+  // 表格字段翻译绑定的服务对应的翻译数据
+  const [colServiceData, setColServiceData] = useState({});
+
+  useImperativeHandle(ref, () => ({
+    /**
+     * 加载字段翻译数据
+     * @param serviceData
+     */
+    addColServiceData: (serviceData: any = {}) => {
+      setColServiceData({
+        ...(colServiceData || {}),
+        ...serviceData,
+      });
+    },
+
+    /**
+     * 获取表格数据
+     */
+    getTableData: () => {
+      return [...(innerDataSource || [])];
+    },
+    getTableSelected: () => {
+      return [...(selectedRows || [])];
+    },
+    getTableSelectedKey: () => {
+      return [...(selectedRowKeys || [])];
+    },
+    setSelectedRowKeys: (value: any) => {
+      setSelectedRowsRule(value);
+    },
+    clearTableSelected: () => {
+      onRowSelected([], false);
+      setSelectedRowsRule(null);
+    },
+    setLoading: (_loading: boolean, reloadDataSource?: string) => {
+      if (reloadDataSource && reloadDataSource === 'reloadDataSource') {
+        if (dataSourceLoading) {
+          setLoading(_loading);
+        }
+      } else {
+        setLoading(_loading);
+      }
+    },
+    clearData: () => {
+      setInnerDataSource([]);
+      setOuterDataSource([]);
+      setTotal?.(0);
+      setCurrent?.(1);
+      setCurrentPage?.(1);
+      setSelectedRowsRule?.(null);
+      setSelectedRows?.([]);
+      setSelectedRowKeys?.([]);
+      setCurrentPageSelectedRows?.([]);
+      setCurrentPageSelectedRowKeys?.([]);
+    },
+  }));
+
+  return {
+    loading,
+    colServiceData,
+  };
+};
+
+export default useCMDAction;
+export { useCommonCMDAction };

package/lib/public/src/components/pcfactory/src/Table/hooks/useCheckStrict.ts

@@ -0,0 +1,176 @@
+import { useMemo } from 'react';
+import { useCreation } from '../../utils/ahooks';
+import { LevelItem } from '../types/prop';
+import { getFullCheckedKeySet, recursionDataSource } from '../utils';
+
+interface CheckStrictlyParams<T> {
+  rowSelectType?: 'checkbox' | 'radio';
+  checkLoosed?: boolean;
+  dataSource: T[];
+  currentRowKey: string;
+  childrenKey?: string;
+}
+
+function useCheckStrict<T extends { children?: T[]; [key: string]: unknown }>(
+  params: CheckStrictlyParams<T>,
+) {
+  const {
+    rowSelectType,
+    checkLoosed = false,
+    dataSource,
+    currentRowKey,
+    childrenKey = 'children',
+  } = params;
+  // 父子数据是否关联选择，默认不关联
+  const checkStrictly = useMemo(
+    () => !(rowSelectType === 'checkbox' && checkLoosed),
+    [checkLoosed, rowSelectType],
+  );
+
+  // 标记节点是否禁用
+  const { relatedDisabledMap, markDisable, getLevelDataMap, getRecordByKey } =
+    useCreation(() => {
+      const relatedDisabledMap: Record<string, boolean> = {};
+      const markDisable = (node: T, flag: boolean = false) => {
+        if (!checkStrictly) {
+          relatedDisabledMap[node[currentRowKey] as string] = flag;
+          if (flag && node[childrenKey]) {
+            recursionDataSource<T>(
+              node[childrenKey] as T[],
+              (n) => {
+                relatedDisabledMap[n[currentRowKey] as string] = flag;
+              },
+              childrenKey,
+            );
+          }
+        }
+      };
+      const levelDataMap: Map<number, LevelItem<T>[]> = new Map();
+      let maxLevel = 0;
+      // 按数据层级收集映射数据
+      const getLevelDataMap = () => {
+        if (levelDataMap.size > 0) {
+          return {
+            levelDataMap,
+            maxLevel,
+          };
+        }
+        recursionDataSource<T, LevelItem<T>>(
+          dataSource,
+          (node, parentPath) => {
+            const level = parentPath?.length || 0;
+            maxLevel = Math.max(maxLevel, level);
+            const n = {
+              ...node,
+              __key__: node[currentRowKey] as string,
+              __parent__:
+                level && parentPath ? parentPath[level - 1] : undefined,
+              __children__: node[childrenKey] as LevelItem<T>[],
+            };
+            if (levelDataMap.get(level)) {
+              levelDataMap.get(level)?.push(n);
+            } else {
+              levelDataMap.set(level, [n]);
+            }
+            return n;
+          },
+          '__children__',
+        );
+        return {
+          levelDataMap,
+          maxLevel,
+        };
+      };
+
+      // 记录数据映射
+      const dataCacheMap: Record<string, T> = {};
+      // extraData 之前选中过的跨页数据不存在当前dataSource中
+      const getRecordByKey = (key: string | number, extraData?: T[]) => {
+        if (dataCacheMap[key]) {
+          return dataCacheMap[key];
+        }
+        recursionDataSource(
+          [...dataSource, ...(extraData || [])],
+          (n) => {
+            dataCacheMap[n[currentRowKey] as string] = n;
+          },
+          childrenKey,
+        );
+        return dataCacheMap[key];
+      };
+
+      return {
+        markDisable,
+        relatedDisabledMap,
+        getLevelDataMap,
+        getRecordByKey,
+      };
+    }, [dataSource, checkStrictly, currentRowKey, childrenKey]);
+
+  // 获取单个勾选/反选时的选中项
+  const triggerSingleSelection = (originSelectRow: T[], selectRow: T) => {
+    const key = selectRow[currentRowKey];
+    const checked =
+      originSelectRow.findIndex((c) => c[currentRowKey] === key) === -1;
+    const selectionList = checked
+      ? [...originSelectRow, selectRow]
+      : originSelectRow.filter((c) => c[currentRowKey] !== key);
+    if (checkStrictly) {
+      return selectionList;
+    }
+    const { levelDataMap, maxLevel } = getLevelDataMap();
+    const keys = selectionList.map((c) => c[currentRowKey] as string);
+    // 基于当前选中数据获取上层所有选中key
+    const checkedSet = getFullCheckedKeySet({
+      levelEntries: levelDataMap,
+      maxLevel,
+      currentCheckedKey: keys,
+      disabledMap: relatedDisabledMap,
+      checked,
+    });
+    const childrenRow: T[] = [];
+    recursionDataSource(
+      (selectRow?.[childrenKey] as T[]) || [],
+      (n) => {
+        if (!relatedDisabledMap[n[currentRowKey] as string]) {
+          if (checked) {
+            childrenRow.push(n);
+          }
+          // 过滤选中集合中的部分
+          checkedSet.delete(n[currentRowKey] as string);
+        }
+      },
+      childrenKey,
+    );
+    const checkedRows = [...checkedSet].map((k) =>
+      getRecordByKey(k, selectionList),
+    );
+    return [...checkedRows, ...childrenRow];
+  };
+
+  // 根据当前选中项收集最终选中key
+  const triggerFullSelection = (checkedKeys: (string | number)[]) => {
+    if (checkStrictly) {
+      return checkedKeys;
+    }
+    const { levelDataMap, maxLevel } = getLevelDataMap();
+    const checkedSet = getFullCheckedKeySet({
+      levelEntries: levelDataMap,
+      maxLevel,
+      currentCheckedKey: checkedKeys,
+      disabledMap: relatedDisabledMap,
+      checked: true,
+    });
+    return [...checkedSet];
+  };
+
+  return {
+    checkStrictly,
+    relatedDisabledMap,
+    markDisable,
+    triggerSingleSelection,
+    triggerFullSelection,
+  };
+}
+
+export default useCheckStrict;