@lingxiteam/ebe-utils 0.5.11 → 0.6.1

package/lib/pcpublic/src/components/pcfactory/src/FormList/hooks/useHandleActions.ts

@@ -0,0 +1,308 @@
+import React from 'react';
+import { useMemoizedFn, useDebounceFn } from 'ahooks';
+import { IUseFormListPaginationDataResult, LcdpActionType } from '../type';
+
+
+const addLxTempKey = (row: any, rowKey: string) => {
+  row._lxTempKey = row[rowKey];
+  return row;
+};
+
+const useHandleActions = (props: {
+    setDataList: (cb: any[] | ((list: any[]) => any[])) => void
+    rowKey: string;
+    dataList: IUseFormListPaginationDataResult['dataList'];
+    setSelectedKeys: React.Dispatch<React.SetStateAction<string[]>>
+    createId: () => string;
+    pageFlag?: boolean;
+    page: {
+      currentPage: number;
+      pageSize: number;
+    };
+    checkIsOverSize: IUseFormListPaginationDataResult['checkIsOverSize'],
+    dataListActionMap: IUseFormListPaginationDataResult['dataListActionMap']
+}): IUseFormListPaginationDataResult['handleAction'] => {
+  const { dataList, setDataList, rowKey, setSelectedKeys, createId, checkIsOverSize, dataListActionMap } = props;
+
+  /**
+   * 删除临时key
+   */
+  const removeLxTempKey = useMemoizedFn((rowId: string) => {
+    const row = queryOne(rowId).rowData;
+    if (row && row._lxTempKey) {
+      delete row._lxTempKey;
+    }
+  });
+
+  /**
+   * 操作过程数据
+   */
+  const actionTypeDataHandle = useMemoizedFn((rowId: string, actionType: LcdpActionType) => {
+    const item = dataListActionMap[rowId] || {};
+
+    item.actionType = actionType;
+    
+    if (actionType === 'D') {
+      const row = queryOne(rowId).rowData;
+      item.rowData = { ...row };
+    } else {
+      delete item.rowData;
+    }
+
+    dataListActionMap[rowId] = {
+      ...item,
+    };
+  });
+
+  /**
+   * 修改数据操作类型
+   */
+  const changeActionType = useMemoizedFn((rowId: string, opts: {actionType?: LcdpActionType, changeData?: any}) => {
+    const { actionType, changeData } = opts;
+    const dataRow = queryOne(rowId).rowData;
+    // 修改数据操纵
+    if (dataRow && changeData) {
+      // NOTE 特殊情况，修改主键
+      if (!!changeData[rowKey] && changeData[rowKey] !== rowId) {
+        // 当前数据如果不为新增数据则需要删除
+        if (!dataRow._lxTempKey) {
+          actionTypeDataHandle(rowId, 'D');
+          // 给修改的数据增加临时key 标志为新增
+          addLxTempKey(changeData, rowKey);
+          // 之前修改主键，导致数据加入删除队列，这时如果再修改回去变更成修改操作
+        } else if (dataListActionMap[changeData[rowKey]]?.actionType === 'D') {
+          actionTypeDataHandle(changeData[rowKey], 'M');
+          removeLxTempKey(rowId);
+        }
+        // 普通修改操作
+      } else if (!dataRow._lxTempKey) {
+        actionTypeDataHandle(rowId, 'M');
+      }
+      // 直接修改数据操纵类型
+    } else if (dataRow && actionType) {
+      if (!dataRow._lxTempKey) {
+        actionTypeDataHandle(rowId, actionType);
+      }
+    }
+  });
+
+  /**
+   * 根据rowId获取当前数据项
+   */
+  const queryOne = useMemoizedFn((rowId: string) => {
+    const idx = dataList.findIndex((item) => item[rowKey] === rowId);
+    return {
+      rowIndex: idx,
+      rowData: dataList[idx],
+    };
+  });
+
+  /**
+   * 根据id更新数据
+   */
+  const updateDataByRowId = useMemoizedFn((rowId: string, item: any, force: boolean = false) => {
+    // NOTE: 更新数据项操作状态
+    changeActionType(rowId, { changeData: item });
+
+    setDataList(pre => {
+      const { rowIndex } = queryOne(rowId);
+      if (rowIndex !== -1) {
+        if (force) {
+          pre[rowIndex] = item;
+        } else {
+          pre[rowIndex] = { ...pre[rowIndex], ...item };
+        }
+      }
+      return [...pre];
+    });
+  });
+    
+  /**
+   * 新增数据
+   */
+  const addOne = useMemoizedFn((rowData: any = {}, rowId?: string) => {
+    if (checkIsOverSize(1, true)) {
+      return;
+    }
+    setDataList(pre => {
+      if (!rowData[rowKey]) {
+        rowData[rowKey] = createId();
+      }
+      // 新增数据都会携带 _lxTempKey 记录主键id
+      addLxTempKey(rowData, rowKey);
+      if (rowId) {
+        const { rowIndex } = queryOne(rowId);
+        pre.splice(rowIndex, 0, { ...rowData });
+      } else {
+        pre.push({ ...rowData });
+      }
+      // 新增数据后如果存在分页并且当前页无法显示新增项，自动切换到最后一页
+      if (props.pageFlag && props.page.pageSize * props.page.currentPage < pre.length) {
+        props.page.currentPage = Math.ceil(pre.length / props.page.pageSize);
+      }
+      return [...pre];
+    });
+  });
+    
+  /**
+   * 删除数据
+   */
+  const deleteByRowId = useMemoizedFn((rowId: string) => {
+    setDataList(pre => {
+      const { rowIndex } = queryOne(rowId);
+      if (rowIndex !== -1) {
+        // NOTE: 更新数据操作状态
+        changeActionType(rowId, { actionType: 'D' });
+        pre.splice(rowIndex, 1);
+      }
+      return [...pre];
+    });
+  });
+
+  /**
+   * 批量删除
+   */
+  const batchDelete = useMemoizedFn((rowIds: string[]) => {
+    setDataList(pre => {
+      const next = pre.filter(item => !rowIds.includes(item[rowKey]));
+      rowIds.forEach(id => changeActionType(id, { actionType: 'D' }));
+      return [...next];
+    });
+  });
+
+  /**
+   * 选中 取消选中
+   */
+  const onSelect = useMemoizedFn((rowId: string | string[], force = false) => {
+    setSelectedKeys(pre => {
+      const nextList = [...pre];
+      const rowIds = Array.isArray(rowId) ? rowId : [rowId];
+      if (force) {
+        return rowIds;
+      }
+      rowIds.forEach(id => {
+        const idx = nextList.findIndex(str => str === id);
+        if (idx !== -1) {
+          nextList.splice(idx, 1);
+        } else {
+          nextList.push(id);
+        }
+      });
+      return nextList;
+    });
+  });
+
+  const onSelectAll = useMemoizedFn((selected: boolean) => {
+    setSelectedKeys(pre => {
+      if (selected) {
+        return dataList.map(item => item[rowKey]);
+      }
+      return [];
+    });
+  });
+
+  /**
+   * 将指定行向上移动
+   * @param rowId 要移动的行的唯一标识
+   */
+  const moveUp = useMemoizedFn((rowId: string) => {
+    // 实现逻辑：查找当前行索引，将其与前一行交换位置
+    const index = queryOne(rowId).rowIndex;
+    if (index > 0) {
+      [dataList[index], dataList[index - 1]] = [{ ...dataList[index - 1] }, { ...dataList[index] }];
+      setDataList([...dataList]);
+    }
+  });
+
+  /**
+   * 将指定行向下移动
+   * @param rowId 要移动的行的唯一标识
+   */
+  const moveDown = useMemoizedFn((rowId: string) => {
+    // 实现逻辑：查找当前行索引，将其与后一行交换位置
+    const index = queryOne(rowId).rowIndex;
+    if (index < dataList.length - 1) {
+      [dataList[index], dataList[index + 1]] = [{ ...dataList[index + 1] }, { ...dataList[index] }];
+      setDataList([...dataList]);
+    }
+  });
+
+  /**
+   * 将指定行移动到顶部
+   * @param rowId 要移动的行的唯一标识
+   */
+  const moveToTop = useMemoizedFn((rowId: string) => {
+    // 实现逻辑：查找当前行索引，将其移动到数组的第一个位置
+    const index = queryOne(rowId).rowIndex;
+    if (index > 0) {
+      const item = dataList.splice(index, 1)[0];
+      dataList.unshift({ ...item });
+      setDataList([...dataList]);
+    }
+  });
+
+  /**
+   * 将指定行移动到底部
+   * @param rowId 要移动的行的唯一标识
+   */
+  const moveToBottom = useMemoizedFn((rowId: string) => {
+    // 实现逻辑：查找当前行索引，将其移动到数组的最后一个位置
+    const index = queryOne(rowId).rowIndex;
+    if (index < dataList.length - 1) {
+      const item = dataList.splice(index, 1)[0];
+      dataList.push({ ...item });
+      setDataList([...dataList]);
+    }
+  });
+
+  /**
+   * 复制
+   */
+  const copy = useMemoizedFn((rowId: string) => {
+    if (checkIsOverSize(1, true)) {
+      return;
+    }
+    // 实现逻辑：查找当前行索引，将其移动到数组的最后一个位置
+    const { rowIndex } = queryOne(rowId);
+    if (rowIndex > -1) {
+      const nextItem = { ...dataList[rowIndex], [rowKey]: createId() };
+      addLxTempKey(nextItem, rowKey);
+      dataList.splice(rowIndex + 1, 0, nextItem);
+      setDataList([...dataList]);
+    }
+  });
+
+  const updateDataByRowIdDebounce = useDebounceFn(updateDataByRowId, {
+    wait: 500,
+  });
+
+  /**
+   * 追加数据列
+   */
+  const appendList = useMemoizedFn((list: any[]) => {
+    setDataList(pre => {
+      const next = [...pre, ...list];
+      return [...next];
+    });
+  });
+
+  return {
+    updateDataByRowId: (...args) => {
+      updateDataByRowIdDebounce.run(...args);
+    },
+    addOne,
+    deleteByRowId,
+    batchDelete,
+    onSelect,
+    onSelectAll,
+    moveUp,
+    moveDown,
+    moveToTop,
+    moveToBottom,
+    copy,
+    queryOne,
+    appendList,
+  };
+};
+
+export default useHandleActions;

package/lib/pcpublic/src/components/pcfactory/src/FormList/index.tsx

@@ -0,0 +1,76 @@
+import React, { useRef, useMemo } from 'react';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { IFormListProps } from './type';
+import { FormFields, getFieldsProps, useCommonImperativeHandle } from '../utils';
+import FormListMain from './FormListMain';
+  
+
+/**
+ * 表单列表控件 => 子表单
+ */
+const FormList = LingxiForwardRef<any, IFormListProps>((props, ref) => {
+  const formListMainRef = useRef<any>(null);
+
+  const rowKey = useMemo(() => {
+    if (props.rowKeyType === 'specified' && props.rowKey) {
+      return props.rowKey;
+    }
+    return '__RowId__';
+  }, [props.rowKeyType, props.rowKey]);
+  
+  const { formFieldsRef, disabled, readOnly, required } = useCommonImperativeHandle(ref, {
+    ...props,
+    rowKey,
+  }, {
+    ...(formListMainRef.current || {}),
+  },
+  {
+    listenStatus: (value, type) => {
+      // 获取子表单下表单实例，状态变化时广播给子控件
+      const instList: any[] = formListMainRef.current?.getFormInstList?.() || [];
+      if (type === 'disabled') {
+        instList.forEach(inst => inst?.setDisabled(!!value));
+      } else if (type === 'readonly') {
+        instList.forEach(inst => inst?.setReadOnly(!!value));
+      }
+    },
+  }
+  );
+
+  return (
+    <FormFields
+      {...getFieldsProps(props)}
+      ref={formFieldsRef}
+      fieldName={props?.fieldName || props.$$componentItem.uid}
+      disabled={disabled}
+      required={required}
+      readOnly={readOnly}
+      ignoreReadOnlyFlag
+      value={props.relationDataSource || []}
+      // 子表单本身不需要主动触发校验，由内部表单主动触发
+      validateTrigger="onBlur"
+      rules={[{
+        // TODO 调用子表单内的表单校验取值
+        validator: async () => {
+          const res = await formListMainRef.current?.validateCurrentPageForm();
+          if (res?.errorFields?.length) {
+            throw Error('');
+          }
+        },
+      }]}
+      hiddenLabel
+      removeErrorCls
+    >
+      <FormListMain
+        ref={formListMainRef}
+        {...props}
+        rowKey={rowKey}
+        readOnly={readOnly}
+        disabled={disabled}
+        required={required}
+      />
+    </FormFields>
+  );
+});
+  
+export default FormList;

package/lib/pcpublic/src/components/pcfactory/src/FormList/loader.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import Loadable from 'react-loadable';
+import { LoadingComponennt } from '../utils/LoaderHelper';
+
+const FormListLoader = Loadable<any, React.ComponentType<any>>({
+  loader: () => import(/* webpackChunkName: "pcfactory-FormListComp" */ './FormListComp'),
+  loading: LoadingComponennt,
+});
+
+export default FormListLoader;