@lingxiteam/ebe-utils 0.5.10 → 0.6.1

package/lib/pcpublic/src/components/pcfactory/src/FormGroup/TitleComp.tsx

@@ -1,76 +1,82 @@
 import React from 'react';
+import { FormGroupProps } from './FormGroup';
 import { EngineBaseProps, IEdCompBaseProps } from '@lingxiteam/types';
-import { FormGroupProps } from '.';
-import Icon from '../Icon';
 import IconED from '../Icon/IconED';
+import Icon from '../Icon';
 
-type TitleProps = Pick<FormGroupProps, 'hasIcon' | 'iconType' | 'prefixIcon' | 'title'>;
+type TitleProps = Pick<FormGroupProps, 'hasIcon' | 'iconType'| 'prefixIcon'| 'title'>
 type TitleCompProps = {
   prefixCls: string;
   isED?: boolean;
   getEngineApis?: EngineBaseProps['getEngineApis'];
   getEdEngineApi?: IEdCompBaseProps['getEdEngineApi'];
   $$componentItem?: EngineBaseProps['$$componentItem'] | IEdCompBaseProps['$$componentItem'];
+  titleStyle?: any;
 } & TitleProps;
 const TitleComp = (props: TitleCompProps) => {
-  const { iconType, hasIcon, title, prefixCls, prefixIcon = {}, isED, getEdEngineApi, getEngineApis, $$componentItem } = props || {};
+  const { iconType, hasIcon, title, prefixCls, prefixIcon = {}, isED, getEdEngineApi, getEngineApis, $$componentItem, titleStyle = {} } = props || {};
   const titlePrefix = `${prefixCls}-title`;
   const renderTitle = () => {
     if (hasIcon || iconType) {
       switch (iconType) {
         case 'line':
-          return <div className={`${titlePrefix} ${titlePrefix}-icon-line`}>{title}</div>;
+          return <div className={`${titlePrefix} ${titlePrefix}-icon-line`} style={titleStyle}>{title}</div>;
         case 'auto': {
-          const { prefixIconIsIconFont, prefixIconFontAddress, prefixIconTheme, prefixIconType, prefixIconiconFile, prefixIconIconFileInfo } =
-            prefixIcon;
+          const {
+            prefixIconIsIconFont,
+            prefixIconFontAddress,
+            prefixIconTheme,
+            prefixIconType,
+            prefixIconiconFile,
+            prefixIconIconFileInfo,
+          } = prefixIcon;
           let icon = null;
           if (!isED && getEngineApis) {
-            icon = (
-              <Icon
-                icon={{
-                  type: prefixIconType,
-                  theme: prefixIconTheme,
-                  isIconFont: prefixIconIsIconFont,
-                  fontAddress: prefixIconFontAddress,
-                  iconFile: prefixIconiconFile,
-                  iconFileInfo: prefixIconIconFileInfo,
-                }}
-                engineApis={getEngineApis?.()}
-                getEngineApis={getEngineApis}
-                $$componentItem={$$componentItem!}
-                className=""
-              />
-            );
+            icon = <Icon
+              icon={{
+                type: prefixIconType,
+                theme: prefixIconTheme,
+                isIconFont: prefixIconIsIconFont,
+                fontAddress: prefixIconFontAddress,
+                iconFile: prefixIconiconFile,
+                iconFileInfo: prefixIconIconFileInfo,
+                isSystem: prefixIcon.isSystem,
+                systemIconKey: prefixIcon.systemIconKey,
+              }}
+              engineApis={getEngineApis?.()}
+              getEngineApis={getEngineApis}
+              $$componentItem={$$componentItem!}
+              className=""
+            />;
           } else if (getEdEngineApi) {
-            icon = (
-              <IconED
-                icon={{
-                  type: prefixIconType,
-                  theme: prefixIconTheme,
-                  isIconFont: prefixIconIsIconFont,
-                  fontAddress: prefixIconFontAddress,
-                  iconFile: prefixIconiconFile,
-                  iconFileInfo: prefixIconIconFileInfo,
-                }}
-                getEdEngineApi={getEdEngineApi}
-                $$componentItem={props.$$componentItem}
-              />
-            );
+            icon = <IconED
+              icon={{
+                type: prefixIconType,
+                theme: prefixIconTheme,
+                isIconFont: prefixIconIsIconFont,
+                fontAddress: prefixIconFontAddress,
+                iconFile: prefixIconiconFile,
+                iconFileInfo: prefixIconIconFileInfo,
+                isSystem: prefixIcon.isSystem,
+                systemIconKey: prefixIcon.systemIconKey,
+              }}
+              getEdEngineApi={getEdEngineApi}
+              $$componentItem={props.$$componentItem}
+            />;
           }
           return (
-            <div className={`${titlePrefix} ${titlePrefix}-icon-auto`}>
+            <div className={`${titlePrefix} ${titlePrefix}-icon-auto`} style={titleStyle}>
               {icon}
               {title}
             </div>
-          );
-        }
+          ); }
         case 'circle':
-          return <div className={`${titlePrefix} ${titlePrefix}-circle`}>{title}</div>;
+          return <div className={`${titlePrefix} ${titlePrefix}-circle`} style={titleStyle}>{title}</div>;
         default:
-          return <div className={`${titlePrefix}`}>{title}</div>;
+          return <div className={`${titlePrefix}`} style={titleStyle}>{title}</div>;
       }
     } else {
-      return <div className={`${titlePrefix}`}>{title}</div>;
+      return <div className={`${titlePrefix}`} style={titleStyle}>{title}</div>;
     }
   };
   return renderTitle();

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

@@ -1,134 +1,11 @@
-import { CaretDownOutlined } from '@ant-design/icons';
+import React, { useImperativeHandle } from 'react';
+import FormGroupLoader from './loader';
 import { LingxiForwardRef } from '@lingxiteam/types';
-import { Collapse } from 'antd';
-import classNames from 'classnames';
-import React, { CSSProperties, useMemo, useState } from 'react';
-import { MyCardProps } from '../Card';
-import useExtendBtn from '../Card/useExtendBtn';
-import { FormChildren } from '../Form/Form';
-import { FormContextProps, useForm } from '../utils';
-import useBackgroundStyle from '../View/useBackgroundStyle';
-import TitleComp from './TitleComp';
 
-type CardProps = Pick<MyCardProps, 'title' | 'name' | 'prefixIcon' | 'visible' | 'extendNum' | 'extend' | 'className' | 'backgroundType' | 'hasIcon'>;
-export interface FormGroupProps extends CardProps {
-  appId?: string;
-  getEngineApis?: any;
-  required?: boolean;
-  fold?: boolean;
-  onFoldChange?: (fold: boolean) => void;
-  iconType?: 'none' | 'line' | 'circle' | 'auto' | 'divider';
-  style: CSSProperties & {
-    titleColor?: string;
-    titleFontSize?: number;
-    titleLineHeight?: number;
-    titleFontWeight?: number;
-  };
-  titleStyle?: 'none' | 'divider';
-  'data-compid'?: string;
-}
 
-const FORM_GROUP_KEY = 'formGroup';
-const prefixCls = 'ued-form-group';
-const { Panel } = Collapse;
-const FormGroup = LingxiForwardRef<any, FormGroupProps>(props => {
-  const { style = {}, title, className, backgroundType, getEngineApis, appId, fold, onFoldChange, children, titleStyle, ...restProps } = props;
-  const engineApis = getEngineApis?.() || {};
-  const [foldKey, setFoldKey] = useState([FORM_GROUP_KEY]);
-  const { backgroundStyle } = useBackgroundStyle({
-    engineApis,
-    backgroundType,
-    appId,
-    mode: 'engine',
-  });
-  const { colSpan, rowSpace, layout, colSpace } = useForm() as FormContextProps;
-
-  const { containerStyle, headStyle, bodyStyle } = useMemo(() => {
-    const { titleColor, titleFontSize, titleFontWeight, titleLineHeight, ...restStyle } = style;
-    const container: CSSProperties = {
-      ...(backgroundStyle || {}),
-    };
-    const head: CSSProperties = {
-      color: titleColor,
-      fontSize: titleFontSize,
-      fontWeight: titleFontWeight,
-      lineHeight: titleLineHeight,
-    };
-    const body: CSSProperties = {
-      ...restStyle,
-    };
-    const containerKeys = ['margin', 'border'];
-    Object.keys(body).forEach(k => {
-      const key = k.toLocaleLowerCase() || '';
-      const hasKey = containerKeys.find(innerKey => key && key.indexOf(innerKey) === 0);
-      if (hasKey) {
-        (container as any)[k] = body[k as keyof CSSProperties];
-        delete body[k as keyof CSSProperties];
-      }
-    });
-    return {
-      containerStyle: container,
-      headStyle: head,
-      bodyStyle: body,
-    };
-  }, [backgroundStyle, style]);
-
-  const { renderExtendBtn } = useExtendBtn({ ...props, prefixCls });
-
-  return (
-    <div data-compid={props?.['data-compid']} className={classNames(prefixCls, className)} style={containerStyle}>
-      <Collapse
-        {...restProps}
-        expandIconPosition="end"
-        activeKey={fold ? foldKey : [FORM_GROUP_KEY]}
-        expandIcon={({ isActive }) => {
-          return (
-            fold && (
-              <div
-                className={`${prefixCls}-fold`}
-                onClick={() => {
-                  if (fold) {
-                    onFoldChange?.(!(foldKey?.length > 0));
-                    setFoldKey(foldKey?.length ? [] : [FORM_GROUP_KEY]);
-                  }
-                }}
-              >
-                <CaretDownOutlined rev="" rotate={isActive ? 0 : -90} />
-              </div>
-            )
-          );
-        }}
-        {...restProps}
-      >
-        <Panel
-          key="formGroup"
-          className={classNames(`${prefixCls}-body-wrap`, `${prefixCls}-body-wrap-${titleStyle}`)}
-          header={
-            <div className={classNames(`${prefixCls}-head-wrap`, className)} style={headStyle}>
-              <div className={`${prefixCls}-title-box`}>
-                <TitleComp
-                  title={title}
-                  getEngineApis={getEngineApis}
-                  $$componentItem={props?.$$componentItem}
-                  prefixCls={prefixCls}
-                  iconType={props.iconType}
-                  hasIcon={props.hasIcon}
-                  prefixIcon={props.prefixIcon}
-                />
-              </div>
-              {renderExtendBtn()}
-            </div>
-          }
-        >
-          <div className={`${prefixCls}-body`} style={bodyStyle}>
-            <FormChildren rowSpace={rowSpace} layout={layout} colSpace={colSpace} colSpan={colSpan} engineApis={engineApis}>
-              {children}
-            </FormChildren>
-          </div>
-        </Panel>
-      </Collapse>
-    </div>
-  );
+const FormGroup = LingxiForwardRef<unknown, any>((props, ref) => {
+  useImperativeHandle(ref, () => ({}));
+  return <FormGroupLoader {...props} />;
 });
 
 export default FormGroup;

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

@@ -0,0 +1,9 @@
+import Loadable from 'react-loadable';
+import { LoadingComponennt } from '../utils/LoaderHelper';
+
+const ReactChartsLoader = Loadable({
+  loader: async () => (await import/* webpackChunkName: 'pcFactory-FormGroup' */('./FormGroup')) as unknown as React.ComponentType<any>,
+  loading: LoadingComponennt,
+});
+
+export default ReactChartsLoader;

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

@@ -0,0 +1,323 @@
+import React, { useEffect, useMemo } from 'react';
+import { IFormListComponentProps } from './type';
+import { LingXiFC } from '@lingxiteam/engine-types';
+import { Table, Collapse } from 'antd';
+import LcdpForm from '../Form';
+import { FormListProvider } from './FormListProvider';
+import WrapperContainer, { formListPrefixCls } from './components/WrapperContainer';
+import ItemHeader from './components/WrapperItem';
+import { CaretDownOutlined } from '@lingxiteam/icons';
+import classNames from 'classnames';
+import useFormListTable from './hooks/useFormListTable';
+import { get } from 'lodash';
+import { useCommon } from '../Table/hooks/ED';
+
+const { Panel } = Collapse;
+
+
+/**
+ * 表单形式
+ * @param props
+ */
+const FormComp: LingXiFC<IFormListComponentProps> = (props) => {
+  const {
+    currentDataList,
+    handleAction,
+    rowKey,
+    formListRef,
+    fold,
+    activeKeys,
+    setActiveKeys,
+    dataList,
+    hiddenFormTypeHeader = false,
+  } = props;
+
+  const { updateDataByRowId } = handleAction;
+
+  const { MemoRenderer } = props?.getEngineApis?.();
+
+  const { renderer, getLoopItemExtraProps } = MemoRenderer;
+
+  // 同步更新数据
+  // FIXME 防抖？
+  useEffect(() => {
+    if (formListRef.current.length > 0 && currentDataList.length > 0) {
+      formListRef.current.forEach((item, index) => {
+        item?.setFieldsValue?.(currentDataList[index]);
+      });
+    }
+  }, [currentDataList?.map(item => item[rowKey]).join('|')]);
+
+  return (
+    <div className={`${formListPrefixCls}-wrapperItem`}>
+      <Collapse
+        expandIconPosition="end"
+        activeKey={fold ? activeKeys : dataList.map(item => item[rowKey])}
+        onChange={(keys) => {
+          if (Array.isArray(keys)) {
+            setActiveKeys(keys);
+          }
+        }}
+        expandIcon={({ isActive }) => {
+          return fold && (
+          <div>
+            <CaretDownOutlined style={{ color: '#414352' }} rotate={isActive ? 0 : -90} />
+          </div>);
+        }}
+      >
+        {
+        (currentDataList || []).map((item, index) => {
+          return (
+            <Panel
+              key={item[rowKey]}
+              className={classNames(`${formListPrefixCls}-wrapperItem-panel`)}
+              forceRender
+              header={hiddenFormTypeHeader ? null : (
+                <ItemHeader
+                  {...props as any}
+                  source="engine"
+                  itemData={item}
+                  itemIndex={index}
+                />
+              )}
+            >
+              <div
+                className={`${formListPrefixCls}-body`}
+                onClick={() => {
+                  props?.onRowClick?.(item[rowKey], item, handleAction.queryOne(item[rowKey]).rowIndex);
+                }}
+                onDoubleClick={() => {
+                  props?.onRowDoubleClick?.(item[rowKey], item, handleAction.queryOne(item[rowKey]).rowIndex);
+                }}
+              >
+                <LcdpForm
+                  {...props as any}
+                  style={{
+                    // @ts-ignore
+                    padding: props?.style?.formListContentPadding,
+                  }}
+                  backgroundType={props.formListContentBackgroundType}
+                  key={item[rowKey]}
+                  formCode={props?.fieldName || `${props.$$componentItem.uid}_${index}`}
+                  ref={(formRef) => {
+                    formListRef.current[index] = formRef;
+                  }}
+                  onValuesChange={(fieldName, val) => {
+                    updateDataByRowId(item[rowKey], { [fieldName]: val });
+                    // 触发表单值变化回调事件
+                    props?.onValuesChange?.(fieldName, val, item[rowKey], { ...item, [fieldName]: val });
+                  }}
+                >
+                  {
+                  renderer?.renderComponents(
+                    renderer.components,
+                    {
+                      ...renderer.options,
+                      ...getLoopItemExtraProps?.(item, index),
+                      row: item,
+                      index,
+                    },
+                    {
+                      isLoop: true,
+                      compId: props?.$$componentItem?.uid,
+                      itemId: item[rowKey],
+                    }
+                  )
+               }
+                </LcdpForm>
+              </div>
+            </Panel>
+          );
+        })
+      }
+      </Collapse>
+    </div>
+  );
+};
+
+/**
+ * 表格形式
+ * @param props
+ */
+const TableComp: LingXiFC<IFormListComponentProps> = props => {
+  const {
+    currentDataList,
+    handleAction,
+    rowKey,
+    selectedKeys,
+    formListRef,
+    rowSelection,
+    columnInfo,
+    disabledOrReadOnly,
+    showHeader,
+  } = props;
+
+  const { MemoRenderer } = props?.getEngineApis?.();
+
+  const { renderer, getLoopItemExtraProps } = MemoRenderer;
+
+  const { components } = renderer || {};
+
+  const { orderColumn, operatorColumn } = useFormListTable(props as any, 'engine');
+
+  const {
+    isBordered,
+    isZebraStripe,
+  } = useCommon(props);
+
+  const columns = useMemo(() => {
+    const result: any[] = components.map((item) => {
+      const { props: childProps = {} } = item || {};
+      const columnWidth = get(columnInfo, `${item.id}.columnWidth`);
+      return {
+        title: childProps.name,
+        width: columnWidth && !Number.isNaN(Number(columnWidth)) ? Number(columnWidth) : columnWidth,
+        fixed: get(columnInfo, `${item.id}.columnFixed`),
+        render: (txt: string, record: any, idx: number) => {
+          item.props.namePath = ['data', idx, childProps.fieldName];
+          return (
+            <FormListProvider
+              value={{
+                prefixNamePaths: ['data', idx],
+              }}
+            >
+              {
+                renderer.renderComponents(
+                  [item],
+                  {
+                    ...renderer.options,
+                    ...getLoopItemExtraProps?.(record, idx),
+                    row: record,
+                    index: idx,
+                  },
+                  {
+                    compId: childProps?.$$componentItem?.uid,
+                    isLoop: true,
+                    itemId: record[rowKey],
+                  }
+                )
+              }
+            </FormListProvider>
+          );
+        },
+      };
+    });
+    if (orderColumn) {
+      result.unshift(orderColumn);
+    }
+    if (operatorColumn) {
+      result.push(operatorColumn);
+    }
+    return result;
+  }, [components, orderColumn, operatorColumn]);
+
+  // FIXME 防抖？
+  useEffect(() => {
+    if (formListRef.current[0]) {
+      const { patchSetFormsValueFn } = formListRef.current[0];
+      formListRef.current[0].form.setFieldsValue({
+        data: currentDataList.map(item => {
+          Object.keys(item).forEach(key => {
+            if (typeof patchSetFormsValueFn[key] === 'function') {
+              item[key] = patchSetFormsValueFn[key](item[key]);
+            }
+          });
+          return item;
+        }),
+      });
+    }
+  }, [currentDataList?.map(item => item[rowKey]).join('|')]);
+
+  return (
+    <div className={classNames(`${formListPrefixCls}-wrapper-tableWrapper ued-table-wrap`)}>
+      <LcdpForm
+        {...props as any}
+        formCode={(props.fieldName || `${props.$$componentItem.uid}_${0}`)}
+        ref={(_ref) => {
+          formListRef.current[0] = _ref;
+        }}
+        colSpan={24}
+        style={{
+          // @ts-ignore
+          padding: props?.style?.formListContentPadding,
+        }}
+        backgroundType={props.formListContentBackgroundType}
+        onValuesChange={(fieldName, val) => {
+          /**
+            * 表格内是按照数据格式返回
+            * fieldName 固定为 data  val [Empty, Empty, Empty , {xx:xx}] 修改第几项就有对应多少个空值
+            * 需要根据修改的索引定位到 currentDataList 中获取 item
+            */
+          if (Array.isArray(val)) {
+            const targetIdx = val.findIndex(el => !!el);
+            const row = currentDataList[targetIdx];
+            if (row) {
+              handleAction.updateDataByRowId(
+                row[rowKey],
+                val[targetIdx]
+              );
+            }
+            // 变化字段key
+            const changeKey = Object.keys(val[targetIdx])[0];
+            props?.onValuesChange?.(changeKey, val[targetIdx][changeKey], row[rowKey], { ...row, ...val[targetIdx] });
+          }
+        }}
+      >
+        <Table
+          bordered={isBordered}
+          className={classNames(
+            {
+              'ued-table-zebra-stripe': isZebraStripe,
+            }
+          )}
+          showHeader={showHeader}
+          scroll={{ x: 'max-content' }}
+          rowKey={rowKey}
+          dataSource={currentDataList}
+          columns={columns}
+          pagination={false}
+          rowSelection={!rowSelection || disabledOrReadOnly ? undefined : {
+            type: rowSelection,
+            selectedRowKeys: selectedKeys,
+            onSelect: (record) => {
+              handleAction.onSelect(record[rowKey]);
+            },
+            onSelectAll: (flag) => {
+              handleAction.onSelectAll(flag);
+            },
+          }}
+          onRow={(record) => {
+            return {
+              onClick: () => {
+                props?.onRowClick?.(record[rowKey], record, handleAction.queryOne(record[rowKey]).rowIndex);
+              },
+              onDoubleClick: () => {
+                props?.onRowDoubleClick?.(record[rowKey], record, handleAction.queryOne(record[rowKey]).rowIndex);
+              },
+            };
+          }}
+        />
+      </LcdpForm>
+    </div>
+  );
+};
+
+const FormListComp:LingXiFC<IFormListComponentProps> = (props) => {
+  const { formDisplayType } = props;
+
+  if (['standardTable'].includes(formDisplayType)) {
+    return (
+      <WrapperContainer source="engine" {...props}>
+        <TableComp {...props} />
+      </WrapperContainer>
+    );
+  }
+
+  return (
+    <WrapperContainer source="engine" {...props}>
+      <FormComp {...props} />
+    </WrapperContainer>
+  );
+};
+
+export default FormListComp;