@lingxiteam/ebe-utils 0.5.10 → 0.6.1

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

@@ -0,0 +1,278 @@
+import React, { useMemo } from 'react';
+import { IFormListComponentProps } from '../type';
+import ExtraButtonComp from '../../utils/ExtraButtonComp';
+import TitleComp from '../../FormGroup/TitleComp';
+import { formGroupPrefixCls } from '../../FormGroup/FormGroup';
+import classNames from 'classnames';
+import { formListPrefixCls } from './WrapperContainer';
+import { Checkbox, Popover, Radio } from 'antd';
+import { useMemoizedFn } from 'ahooks';
+import useBackgroundStyle from '../../View/useBackgroundStyle';
+
+export interface WrapperItemProps extends IFormListComponentProps {
+
+    /**
+     * 数据项
+     */
+    itemData: any;
+
+    /**
+     * 序号
+     */
+    itemIndex: number;
+
+    /**
+     * 是否配置态
+     */
+    source: 'editor' | 'engine';
+}
+
+export const ItemActionRender: React.FC<WrapperItemProps> = props => {
+  const {
+    source = 'engine',
+    extend,
+    itemData,
+    itemIndex,
+    rowKey,
+    handleAction,
+    dataList,
+    maxMenuNum,
+    formDisplayType,
+    fold,
+    displayList,
+    allowAdd,
+    disabledOrReadOnly,
+  } = props;
+
+  const nextExtends = useMemo(() => {
+    return (extend || []).map(item => {
+      if (source === 'engine') {
+        if (disabledOrReadOnly && item.type) {
+          return null;
+        }
+        if (['moveToTop', 'moveUp'].includes(item.type) && displayList?.[0]?.[rowKey] === itemData[rowKey]) {
+          return null;
+        }
+        if (['moveToBottom', 'moveDown'].includes(item.type) && displayList?.[displayList.length - 1]?.[rowKey] === itemData[rowKey]) {
+          return null;
+        }
+        if (item.type === 'copy') {
+          return {
+            ...item,
+            disabled: !allowAdd,
+          };
+        }
+      }
+      return {
+        ...item,
+        // 强制设置为文本按钮
+        btnType: 'text',
+      };
+    }).filter(Boolean);
+  }, [itemData, itemIndex, extend, dataList, maxMenuNum, disabledOrReadOnly]);
+
+  const finalRenderAction = useMemo(() => {
+    if (source === 'editor') {
+      return nextExtends.filter(el => el.checked === true);
+    }
+    // 解析是否显示
+    return nextExtends.map((item: any) => {
+      const { rule, checked } = item;
+      try {
+        if (rule === true || (typeof rule === 'string' && props?.sandBoxSafeRun?.(rule)) || !checked) {
+          return null;
+        }
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error(e);
+      }
+      return item;
+    }).filter(Boolean);
+  }, [nextExtends]);
+
+  /**
+   * 显示更多按钮
+   */
+  const showMore = useMemo(() => {
+    return Number(maxMenuNum) > 0 && finalRenderAction.length > Number(maxMenuNum);
+  }, [finalRenderAction, maxMenuNum]);
+
+  /**
+   * 按钮点击事件
+   */
+  const onClick = useMemoizedFn((item: any) => {
+    if (source === 'editor') {
+      return null;
+    }
+    // @ts-ignore
+    const fn = handleAction[item.type === 'delete' ? 'deleteByRowId' : item.type];
+    if (typeof fn === 'function') {
+      fn(itemData[rowKey]);
+    }
+    // @ts-ignore
+    // 触发配置事件
+    return props[item.value]?.(itemData, itemIndex);
+  });
+  
+  return (
+    <div
+      className={classNames(
+        `${formListPrefixCls}-wrapperItem-header-actions`,
+        {
+          [`${formListPrefixCls}-wrapperItem-header-actions-table`]: ['standardTable'].includes(formDisplayType),
+          [`${formListPrefixCls}-wrapperItem-header-actions-fold`]: fold,
+        }
+      )}
+      onClick={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      }}
+    >
+      {
+       (showMore ? finalRenderAction.slice(0, Number(maxMenuNum) - 1) : finalRenderAction).map(item => {
+         return (
+           <ExtraButtonComp
+             source={source}
+             buttonConfig={item}
+             compProps={props as any}
+             onClick={(e) => {
+               onClick(item);
+             }}
+           />
+         );
+       })
+      }
+      {
+        showMore && (
+          <Popover
+            overlayClassName={`${formListPrefixCls}-wrapperItem-header-actions-overlay`}
+            autoAdjustOverflow={false}
+            content={() => {
+              return (finalRenderAction.slice(Number(maxMenuNum) - 1).map(item => {
+                return (
+                  <ExtraButtonComp
+                    source={source}
+                    buttonConfig={item}
+                    compProps={props as any}
+                    onClick={(e) => {
+                      onClick(item);
+                    }}
+                  />
+                );
+              }));
+            }}
+            trigger="hover"
+            placement="bottom"
+          >
+            <ExtraButtonComp
+              source={source}
+              buttonConfig={{
+                title: '更多',
+                checked: true,
+                btnType: 'text',
+              } as any}
+              compProps={props as any}
+            />
+          </Popover>
+        )
+      }
+    </div>
+  );
+};
+
+const ItemHeader:React.FC<WrapperItemProps> = props => {
+  const {
+    source = 'engine',
+    orderTitle,
+    itemData,
+    itemIndex,
+    rowSelection,
+    selectedKeys = [],
+    rowKey,
+    handleAction,
+    showOrder = false,
+    showRowOperator,
+    disabledOrReadOnly,
+  } = props;
+
+  const { backgroundStyle } = useBackgroundStyle({
+    engineApis: source === 'editor' ? props?.getEdEngineApi : props?.getEngineApis(),
+    backgroundType: props.formListHeaderBackgroundType,
+    mode: source,
+  });
+
+  const title = useMemo(() => {
+    let tmpTitle = `${orderTitle || ''}`;
+    if (showOrder) {
+      tmpTitle += `${itemIndex + 1}`;
+    }
+    return tmpTitle;
+  }, [showOrder, itemIndex, orderTitle]);
+
+  const renderRowSelection = useMemoizedFn(() => {
+    if (disabledOrReadOnly) {
+      return null;
+    }
+    switch (rowSelection) {
+      case 'checkbox':
+        return (
+          <Checkbox
+            checked={selectedKeys.includes(itemData[rowKey])}
+            onClick={() => {
+              handleAction.onSelect(itemData[rowKey]);
+            }}
+          />
+        );
+      case 'radio':
+        return (
+          <Radio
+            checked={selectedKeys.includes(itemData[rowKey])}
+            onClick={() => {
+              handleAction.onSelect(itemData[rowKey], true);
+            }}
+          />
+        );
+      default:
+        return null;
+    }
+  });
+
+  return (
+    <div
+      className={classNames(
+        `${formListPrefixCls}-wrapperItem-header`,
+        {
+          [`${formListPrefixCls}-wrapperItem-header-line`]: props.headerStyle === 'line',
+          [`${formListPrefixCls}-editor`]: source === 'editor',
+        }
+      )}
+      style={{
+        ...backgroundStyle,
+      }}
+    >
+      <div
+        className={`${formListPrefixCls}-common-title`}
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+        }}
+      >
+        {renderRowSelection()}
+        <TitleComp
+          {...props}
+          title={title}
+          prefixCls={formGroupPrefixCls}
+          iconType={props.orderIconType}
+          prefixIcon={props.orderPrefixIcon}
+        />
+      </div>
+      {
+        showRowOperator && (
+          <ItemActionRender {...props} />
+        )
+      }
+    </div>
+  );
+};
+
+export default ItemHeader;

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

@@ -0,0 +1,279 @@
+import { useState, useCallback, useMemo, useLayoutEffect, useRef } from 'react';
+import { ActionTypeDataListItem, IUseFormListPaginationDataProps, IUseFormListPaginationDataResult } from '../type';
+import { useMemoizedFn, useReactive, useUpdateEffect } from 'ahooks';
+import useHandleActions from './useHandleActions';
+import { message } from 'antd';
+
+const createId = (idx?: number) => {
+  return `LX_TEMP_${idx || Math.random().toString().substring(2, 7)}`;
+};
+
+/**
+ * 生成内部数据列表
+ * @param list 外部数据列表
+ * @returns
+ */
+const renewDataListId = (key: string, list?: any[]): any[] => {
+  return (list || []).map((item, idx) => {
+    // 主键没有值
+    if (!item[key]) {
+      item[key] = createId(idx);
+    }
+    return item;
+  });
+};
+
+
+/**
+ * 子表单数据操作钩子
+ * @param props
+ * @returns
+ */
+const useFormListPaginationData = (props: IUseFormListPaginationDataProps): IUseFormListPaginationDataResult => {
+  const { value, page: pageFlag = false, onDataListChange, rowKey, defaultUnfold: _defaultUnfold, fold, pageSize, maxSize = 10 } = props;
+
+  /**
+   * 数据操作状态
+   */
+  const dataListActionMap = useRef<IUseFormListPaginationDataResult['dataListActionMap']>({});
+
+  const defaultUnfold = useMemo(() => {
+    return fold && _defaultUnfold;
+  }, [fold, _defaultUnfold]);
+
+  const [activeKeys, setActiveKeys] = useState<string[]>([]);
+
+  const dataList = useMemo(() => {
+    return Array.isArray(value) ? renewDataListId(rowKey, value) : [];
+  }, [value, value?.length]);
+
+  // 展示数据
+  const displayList = useMemo(() => {
+    return dataList.length > maxSize ? dataList.slice(0, maxSize) : dataList;
+  }, [dataList, maxSize]);
+
+  const setDataList = useCallback((cb: any[] | ((list: any[]) => any[])) => {
+    if (typeof cb === 'function') {
+      onDataListChange(cb(dataList));
+    } else {
+      onDataListChange(cb);
+    }
+  }, [dataList]);
+
+  /**
+   * 勾选列表 keys
+   */
+  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+
+  /**
+   * 全选状态
+   */
+  const selectAllFlag = useMemo(() => {
+    return dataList.length > 0 && dataList.length === selectedKeys.length;
+  }, [dataList, selectedKeys]);
+
+  /**
+   * 隐藏表单模式下头部
+   */
+  const hiddenFormTypeHeader = useMemo(() => {
+    return !props.showRowOperator && !props.fold && !props.showOrder && (
+      !props.orderIconType || props.orderIconType === 'none'
+    ) && !props.orderTitle && !props.rowSelection;
+  }, []);
+
+  /**
+   * 页码信息
+   */
+  const page = useReactive({
+    currentPage: 1,
+    pageSize,
+  });
+
+  /**
+   * 根据分页获取当前页的数据
+   */
+  const getCurrentPageData = useCallback(() => {
+    if (!pageFlag) {
+      return displayList;
+    }
+    const startIndex = (page.currentPage - 1) * page.pageSize;
+    const endIndex = startIndex + page.pageSize;
+    return displayList.slice(startIndex, endIndex);
+  }, [page.currentPage, displayList, page.pageSize, pageFlag]);
+
+  /**
+   * 当前分页数据 - 内部控件通过该数据列渲染控件
+   */
+  const currentDataList = useMemo(() => {
+    return getCurrentPageData();
+  }, [getCurrentPageData]);
+
+  /**
+   * 校验是否超过最大行数
+   */
+  const checkIsOverSize = useMemoizedFn((newLine: any[] | number, showTips: boolean = false) => {
+    const length = Array.isArray(newLine) ? newLine.length : newLine;
+    const flag = dataList.length + length > maxSize;
+    if (flag && showTips) {
+      message.warning(`最大条数限制 ${maxSize} 条，请删除数据后再操作。`);
+    }
+    return flag;
+  });
+
+  // 操作数据方法
+  const handleAction = useHandleActions({
+    dataList,
+    setDataList,
+    setSelectedKeys,
+    createId,
+    rowKey,
+    pageFlag,
+    page,
+    checkIsOverSize,
+    dataListActionMap: dataListActionMap.current,
+  });
+
+  // 禁用或者只读
+  const disabledOrReadOnly = useMemo(() => {
+    return !!props.disabled || !!props.readOnly;
+  }, [props.disabled, props.readOnly]);
+
+  /**
+   * 展示多选全选框
+   */
+  const showSelectAllCheckBox = useMemo(() => {
+    return props.rowSelection === 'checkbox' && props.formDisplayType === 'standardForm' && !disabledOrReadOnly;
+  }, [disabledOrReadOnly, props.rowSelection, props.formDisplayType]);
+
+  /**
+   * 生成获取模板数据结构
+   */
+  const getTemplateRequestData = useMemoizedFn(() => {
+    const { MemoRenderer } = props?.getEngineApis?.();
+    const { renderer } = MemoRenderer;
+    const comp = renderer?.components || [];
+    const resultList: any[] = [];
+    const loop = (sourceList: any[], resList: any[]) => {
+      sourceList?.forEach((item: any, idx: number) => {
+        const { props, label, compName, compType } = item;
+        const isFormList = compName === 'FormList';
+        if (compType === 2) {
+          const row: any = {
+            attrName: props?.name || label,
+            attrCode: props?.fieldName,
+            sort: idx,
+          };
+          resList.push(row);
+          if (isFormList) {
+            row.children = [];
+            loop(item.components, row.children);
+          }
+        } else if (compName !== 'Form' && item.components?.length) {
+          loop(item.components, resList);
+        }
+      });
+    };
+    loop(comp, resultList);
+    return resultList;
+  });
+
+  /**
+   * 获取过程状态数据
+   */
+  const getDataListForActionType = useMemoizedFn(() => {
+    const resultList: ActionTypeDataListItem[] = [];
+    dataList.forEach(item => {
+      // 新增数据标志
+      if (item._lxTempKey) {
+        resultList.push({
+          ...item,
+          lcdpActionType: 'A',
+        });
+      } else if (dataListActionMap.current[item[rowKey]]?.actionType === 'M') {
+        resultList.push({
+          ...item,
+          lcdpActionType: 'M',
+        });
+      } else {
+        // 没操作记录的数据
+        resultList.push({
+          ...item,
+        });
+      }
+    });
+
+    Object.keys(dataListActionMap.current).forEach(rowId => {
+      if (dataListActionMap.current[rowId]?.actionType === 'D') {
+        resultList.push({
+          [rowKey]: rowId,
+          lcdpActionType: 'D',
+          ...(dataListActionMap.current[rowId]?.rowData || {}),
+        });
+      }
+    });
+
+    return resultList;
+  });
+
+  useLayoutEffect(() => {
+    if (defaultUnfold && fold) {
+      setActiveKeys(dataList.map(item => item[rowKey]));
+    }
+    const keys = selectedKeys.filter(selectKey => dataList.find(el => el[rowKey] === selectKey));
+    setSelectedKeys(keys);
+  }, [JSON.stringify(dataList.map(item => item[rowKey]))]);
+
+  useUpdateEffect(() => {
+    // 选中行变化回调
+    props?.onSelectChange?.(selectedKeys, selectedKeys.map(key => dataList.find(item => item[rowKey] === key)));
+  }, [selectedKeys]);
+
+  useLayoutEffect(() => {
+    if (pageFlag) {
+      // 分页情况下自动校正页码
+      if (displayList.length && page.currentPage > 1) {
+        const maxPage = Math.ceil(displayList.length / page.pageSize);
+        if (page.currentPage > maxPage) {
+          page.currentPage = maxPage;
+        }
+      }
+    }
+  }, [displayList.length]);
+ 
+  return {
+    pagination: {
+      current: page.currentPage,
+      pageSize: page.pageSize,
+      onChange(_page, _pageSize) {
+        page.currentPage = _page;
+        page.pageSize = _pageSize;
+      },
+      total: displayList.length,
+      showTotal: total => `共 ${total} 条`,
+    },
+    currentDataList,
+    dataList,
+    resetDataList: (list: any[]) => {
+      const nextList = renewDataListId(rowKey, list);
+      setDataList(nextList);
+      return nextList;
+    },
+    handleAction,
+    selectedKeys,
+    selectAllFlag,
+    getCurrentPageData,
+    activeKeys,
+    setActiveKeys,
+    getTemplateRequestData,
+    hiddenFormTypeHeader,
+    checkIsOverSize,
+    displayList,
+    allowAdd: dataList.length < maxSize,
+    disabledOrReadOnly,
+    showSelectAllCheckBox,
+    dataListActionMap: dataListActionMap.current,
+    getDataListForActionType,
+  };
+};
+
+export default useFormListPaginationData;

package/lib/pcpublic/src/components/pcfactory/src/FormList/hooks/useFormListTable.tsx

@@ -0,0 +1,71 @@
+import React, { useMemo } from 'react';
+import { IFormListComponentProps } from '../type';
+import { ItemActionRender } from '../components/WrapperItem';
+
+
+const useFormListTable = (props: IFormListComponentProps, source: 'editor' | 'engine') => {
+  const {
+    showOrder,
+    showRowOperator,
+    operatorColumnWidth,
+    orderTitle,
+    fixedOperatorColumn,
+    formDisplayType,
+    maxMenuNum,
+    dataList,
+    handleAction,
+    rowKey,
+    columnInfo,
+  } = props;
+
+  const isTable = formDisplayType === 'standardTable';
+
+  // 表格排序列
+  const orderColumn = useMemo(() => {
+    // 存在左侧固定列 序号列需要同步固定左侧
+    const existFixedLeft = Object.keys(columnInfo || {}).find(key => {
+      return columnInfo[key]?.columnFixed === 'left';
+    });
+
+    return showOrder && isTable ? {
+      key: '__order__',
+      title: orderTitle || '序号',
+      fixed: existFixedLeft ? 'left' : undefined,
+      render: (text: string, record: any, index: number) => {
+        if (source === 'editor') {
+          return 1;
+        }
+        return handleAction.queryOne(record[rowKey]).rowIndex + 1;
+      },
+    } : null;
+  }, [orderTitle, showOrder]);
+
+  // 表格操作列
+  const operatorColumn = useMemo(() => {
+    if (showRowOperator && isTable) {
+      return {
+        key: '__row_operator__',
+        title: '操作',
+        width: operatorColumnWidth || 'auto',
+        fixed: fixedOperatorColumn === true ? 'right' : undefined,
+        render: (txt: string, record: any, index: number) => {
+          return (<ItemActionRender
+            {...props as any}
+            source={source}
+            itemData={record || {}}
+            itemIndex={index}
+          />
+          );
+        },
+      };
+    }
+    return null;
+  }, [showRowOperator, isTable, operatorColumnWidth, fixedOperatorColumn, maxMenuNum, dataList]);
+
+  return {
+    orderColumn,
+    operatorColumn,
+  };
+};
+
+export default useFormListTable;