@lingxiteam/ebe-utils 0.5.11 → 0.6.2

package/lib/pcpublic/src/components/pcfactory/src/FormList/type.ts

@@ -0,0 +1,456 @@
+import { FormProps } from '../Form/Form';
+import { PaginationProps } from 'antd';
+import type { FormDisplayType } from '../utils/constant';
+
+
+/**
+ * M 修改
+ * D 删除
+ * A 新增
+ */
+export type LcdpActionType = 'M' | 'D' | 'A';
+
+
+export type DataListItem = {
+
+    /**
+     * 临时key 新增数据标识
+     */
+    _lxTempKey?: string;
+
+    [key: string]:any;
+}
+
+export interface ActionTypeDataListItem extends DataListItem {
+    lcdpActionType: LcdpActionType;
+}
+
+/**
+ * Comp层
+ */
+export interface IFormListProps extends Omit<FormProps, 'onValuesChange'> {
+
+    /**
+     * 是否开启分页
+     */
+    page: boolean;
+
+    /**
+     * 数量
+     */
+    pageSize: number;
+
+    /**
+     * 表单列表值 必须为数组
+     */
+    value: any[];
+
+    /**
+     * 数据源
+     */
+    relationDataSource: any[];
+
+    /**
+     * 值变化
+     * @returns
+     */
+    onChange: (value: any[]) => void;
+
+     /**
+      * 子表单类型
+      */
+    formDisplayType: FormDisplayType;
+
+    /**
+     * 行选择模式
+     */
+    rowSelection: false | 'radio' | 'checkbox';
+
+    /**
+     * 行主键
+     */
+    rowKeyType: 'specified' | 'auto';
+
+    /**
+     * 行主键指定字段
+     */
+    rowKey: string;
+
+    /**
+     * 字段编码
+     */
+    fieldName: string;
+
+    /**
+     * 全局操作按钮
+     */
+    handleExtends: {
+        type: 'addRow' | 'batchDelete' | 'import' | 'export';
+        [key: string]: any;
+    }[];
+
+    /**
+     * 行操作按钮
+     */
+    extend: any[];
+
+    /**
+     * 最大显示按钮数量
+     */
+    maxMenuNum?: number;
+
+    /**
+     * 操作按钮位置
+     */
+    actionPosition: 'rightTop' | 'leftBottom';
+
+    /**
+     * 是否允许折叠
+     */
+    fold: boolean;
+
+    /**
+     * 是否默认展开 表单模式下
+     */
+    defaultUnfold?: boolean;
+
+    /**
+     * 显示序号标题
+     */
+    showOrder: boolean;
+
+    /**
+     * 显示已选
+     */
+    showSelectLabel?: boolean;
+
+    /**
+     * 显示行操作
+     */
+    showRowOperator?: boolean;
+
+    /**
+     * 显示表头
+     */
+    showHeader?: boolean;
+
+    /**
+     * 部分列配置信息
+     */
+    columnInfo: Record<string, {
+
+        /**
+         * 列宽度
+         */
+        columnWidth?: string;
+
+        /**
+         * 列固定
+         */
+        columnFixed?: false | 'left' | 'right';
+    }>;
+
+    /**
+     * 表单行内容背景
+     */
+    formListContentBackgroundType: any;
+
+    /**
+     * 表单行头部背景
+     */
+    formListHeaderBackgroundType: any;
+
+    /**
+     * 表单头部样式
+     */
+    headerStyle: 'simple' | 'line';
+
+    /**
+     * 表单值变化
+     * @param name 字段
+     * @param value 值
+     * @param rowId 变化行id
+     * @param rowData 变化行数据
+     * @returns
+     */
+    onValuesChange: (name: string, value: unknown, rowId: string, rowData: any) => void;
+
+    /**
+     * 选中行变化回调
+     * @param selectKeys 选中keys
+     * @param selectRows 选中节点
+     * @returns
+     */
+    onSelectChange: (selectKeys: string[], singleRow: any) => void;
+
+    /**
+     * 行点击
+     * @param rowId 节点id
+     * @param rowData 节点数据
+     * @param index 当前索引
+     * @returns
+     */
+    onRowClick: (rowId: string, rowData: any, index: number) => void;
+
+    /**
+     * 行双击
+     * @param rowId 节点id
+     * @param rowData 节点数据
+     * @param index 当前索引
+     * @returns
+     */
+    onRowDoubleClick: (rowId: string, rowData: any, index: number) => void;
+
+    // 标题样式
+    mainTitleColor: string;
+    mainTitleFontWeight: string;
+    mainTitleLineHeight: string;
+    mainTitleFontSize: string;
+
+    /**
+     * 最大条数
+     */
+    maxSize: number;
+
+    [key: string]: any;
+}
+
+/**
+ * Main
+ */
+export interface IFormListMainProps extends IFormListProps {
+   
+}
+
+/**
+ * 控件属性
+ */
+export interface IFormListComponentProps extends IUseFormListPaginationDataResult, IFormListProps {
+
+    /**
+     * 表单列表
+     */
+    formListRef: { current: any[]};
+}
+
+/**
+ * 分页数据管理hooks
+ */
+export interface IUseFormListPaginationDataProps extends IFormListProps {
+
+    /**
+     * 数据发生改变时调用
+     * @param innerDataList 内部数据
+     * @param dataList 数据列表
+     * @returns
+     */
+    onDataListChange: (dataList: DataListItem[]) => void;
+}
+
+/**
+ * 分页数据管理hooks result
+ */
+export interface IUseFormListPaginationDataResult {
+
+    /**
+     * 分页信息
+     */
+    pagination: PaginationProps;
+
+    /**
+     * 当前页面数据
+     */
+    currentDataList: DataListItem[];
+
+    /**
+     * 总数据列表
+     */
+    dataList: DataListItem[];
+
+    /**
+     * 能显示的数据总数
+     */
+    displayList: any[];
+
+    /**
+     * 刷新数据
+     * @param list 数据列
+     * @returns
+     */
+    resetDataList: (list: any[]) => any[];
+
+    /**
+     * 数据操作发方法
+     */
+    handleAction: {
+
+        /**
+         * 删除数据
+         * @param rowId rowId
+         * @returns void
+         */
+        deleteByRowId: (rowId: string) => void;
+
+        /**
+         * 批量删除
+         * @param rowIds rowIds
+         * @returns
+         */
+        batchDelete: (rowIds: string[]) => void;
+
+        /**
+         * 更新索引位置数据
+         * @param rowId
+         * @param data 数据
+         * @param overwrite 是否替换更新
+         * @returns void
+         */
+        updateDataByRowId: (rowId: string, data: Record<string, any>, overwrite?: boolean) => void;
+
+        /**
+         * 新增一条数据
+         * @param rowId 数据id
+         * @returns
+         */
+        addOne: (rowId?: string) => void;
+
+        /**
+         * 选中 取消选中
+         * @param rowId
+         * @param force
+         * @returns
+         */
+        onSelect: (rowId: string | string[], force?: boolean) => void;
+
+        /**
+         * 全选
+         * @param selected 是否全选
+         * @returns
+         */
+        onSelectAll: (selected: boolean) => void;
+
+        /**
+         * 上移
+         * @param rowId 节点id
+         * @returns
+         */
+        moveUp: (rowId: string) => void;
+
+         /**
+         * 下移
+         * @param rowId 节点id
+         * @returns
+         */
+         moveDown: (rowId: string) => void;
+
+         /**
+          * 置顶
+          * @param rowId 节点id
+          * @returns
+          */
+         moveToTop: (rowId: string) => void;
+
+         /**
+          * 置底
+          * @param rowId 节点id
+          * @returns
+          */
+         moveToBottom: (rowId: string) => void;
+
+         /**
+          * 复制一行到当前项后
+          * @param rowId 节点id
+          * @returns
+          */
+         copy: (rowId: string) => void;
+
+         /**
+          * 根据节点id获取节点数据
+          * @param rowId 节点id
+          * @returns
+          */
+         queryOne: (rowId: string) => {rowIndex: number; rowData: any};
+
+         /**
+          * 追加数据列
+          * @param rows 数据列
+          * @returns
+          */
+         appendList: (rows: any[]) => void;
+    }
+
+    /**
+     * 选中列表 key
+     */
+    selectedKeys: string[];
+
+    /**
+     * 是否全选
+     */
+    selectAllFlag: boolean;
+
+    /**
+     * 获取当前页数据
+     * @returns
+     */
+    getCurrentPageData: () => any[];
+
+    /**
+     * 激活的key
+     */
+    activeKeys: string[];
+
+    /**
+     * 设置激活的面
+     * @param keys
+     * @returns
+     */
+    setActiveKeys: React.Dispatch<React.SetStateAction<string[]>>;
+
+    /**
+     * 下载模板数据结构获取
+     * @returns 模板入参
+     */
+    getTemplateRequestData: () => any;
+
+    /**
+     * 隐藏表单模式下头部
+     */
+    hiddenFormTypeHeader: boolean;
+
+    /**
+     * 检测是否超过最大行数
+     * @param newLine
+     * @returns
+     */
+    checkIsOverSize: (newLine: any[] | number, showTips?: boolean) => boolean;
+
+    /**
+     * 是否允许新增
+     */
+    allowAdd: boolean;
+
+    /**
+     * 是否禁用或只读
+     */
+    disabledOrReadOnly: boolean;
+
+    /**
+     * 是否展示全选框
+     */
+    showSelectAllCheckBox: boolean;
+
+    /**
+     * 数据列操作状态
+     */
+    dataListActionMap: Record<string, {
+        actionType: LcdpActionType;
+        rowData?: any;
+    }>;
+
+    /**
+     *  获取操作过程数据
+     * @returns 过程操作数据
+     */
+    getDataListForActionType: () => ActionTypeDataListItem[];
+}

package/lib/pcpublic/src/components/pcfactory/src/FreeLayout/FreeLayout.tsx

@@ -0,0 +1,125 @@
+import React, { CSSProperties, useEffect, useMemo, useRef, useState } from 'react';
+import useBackgroundStyle from '../View/useBackgroundStyle';
+import { Spin } from 'antd';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { useLocale } from '../utils/hooks/useLocale';
+import classNames from 'classnames';
+import useHiddenStyle from '../utils/hooks/useHiddenStyle';
+
+export interface FreeLayoutProps {
+  style: React.CSSProperties;
+  className: string;
+  visible: boolean;
+  backgroundType?: any;
+  appId?: string;
+  loading?: boolean;
+  getEngineApis?: any;
+}
+
+// const prefixCls = 'view';
+
+const FreeLayout = LingxiForwardRef<any, FreeLayoutProps>((props, ref) => {
+  const {
+    children,
+    style,
+    className,
+    visible = true,
+    backgroundType,
+    getEngineApis,
+    loading,
+    ...restProps
+  } = props;
+
+  const engineApis = getEngineApis?.() || {};
+  const { getLocale } = useLocale(engineApis);
+
+  const { backgroundStyle } = useBackgroundStyle({ engineApis, backgroundType, appId: restProps?.appId, mode: 'engine' });
+
+  const finalStyle = useHiddenStyle(visible, style);
+
+  const containerRef = useRef<any>();
+  const loadingRef = useRef<any>();
+
+  const [reload, setReload] = useState<number>(0);
+
+  const getLoadingStyle = (isShow: boolean): CSSProperties => {
+    const res: CSSProperties = {};
+    if (containerRef.current && loadingRef.current) {
+      const containerRefProps = window.getComputedStyle(containerRef.current);
+      const { offsetWidth, offsetHeight } = containerRef.current;
+      const containerOffset = containerRef.current.getBoundingClientRect();
+      // 获取loading基于父级的偏移量
+      const loadingOffset = loadingRef.current.getBoundingClientRect();
+
+      const offset = {
+        x: loadingOffset.left - containerOffset.left,
+        y: loadingOffset.top - containerOffset.top,
+      };
+
+      res.position = 'absolute';
+      res.width = `${offsetWidth}px`;
+      res.height = `${offsetHeight}px`;
+      res.zIndex = containerRefProps.zIndex;
+      res.backgroundColor = 'rgba(255,255,255,0.5)';
+      res.display = 'flex';
+      res.justifyContent = 'center';
+      res.alignItems = 'center';
+      res.left = 0;
+      res.top = 0;
+      if (offset.x > 0 || offset.y > 0) {
+        res.transform = `translate(${-offset.x}px, ${-offset.y}px)`;
+      }
+    }
+    if (!isShow) {
+      res.display = 'none';
+    }
+    return res;
+  };
+
+  const renderLoadingComp = useMemo(() => {
+    if (loading && loadingRef.current) {
+      return (
+        <div style={getLoadingStyle(true)}>
+          <Spin tip={getLocale?.('loadingText')} />
+        </div>
+      );
+    }
+    return null;
+  }, [loading, loadingRef.current, reload]);
+
+  useEffect(() => {
+    if (loading) {
+      setReload(reload + 1);
+    }
+  }, [loading]);
+
+  return (
+    <div
+      style={{
+        ...backgroundStyle,
+        ...finalStyle,
+        position: 'relative',
+      }}
+      className={classNames('ued-free-layout', className)}
+      // @ts-ignore
+      data-compid={props?.['data-compid']}
+      {...restProps}
+      ref={containerRef}
+    >
+      {children}
+      {/* loading 定位元素 */}
+      {
+        loading && (
+          <div
+            style={{ width: 0, height: 0, position: 'relative', backgroundColor: 'transparent', visibility: loading ? 'visible' : 'hidden' }}
+            ref={loadingRef}
+          >
+            {renderLoadingComp}
+          </div>
+        )
+      }
+    </div>
+  );
+});
+
+export default FreeLayout;

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

@@ -1,136 +1,17 @@
+import React, { useImperativeHandle } from 'react';
+import FreeLayoutLoader from './loader';
 import { LingxiForwardRef } from '@lingxiteam/types';
-import { Spin } from 'antd';
-import React, { CSSProperties, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { useHiddenStyle, useListenProps } from '../utils';
-import { useLocale } from '../utils/hooks/useLocale';
-import useBackgroundStyle from '../View/useBackgroundStyle';
+import { useListenProps } from '../utils/hooks/useListenState';
 
-export interface FreeLayoutProps {
-  style: React.CSSProperties;
-  className: string;
-  visible: boolean;
-  backgroundType?: any;
-  appId?: string;
-  loading?: boolean;
-  getEngineApis?: any;
-}
-
-// const prefixCls = 'view';
-
-const FreeLayout = LingxiForwardRef<any, FreeLayoutProps>((props, ref) => {
-  const { children, style, className, visible = true, backgroundType, getEngineApis, ...restProps } = props;
 
+const FreeLayout = LingxiForwardRef<unknown, any>((props, ref) => {
   const [loading, setLoading] = useListenProps(props.loading);
-
-  const engineApis = getEngineApis?.() || {};
-  const { getLocale } = useLocale(engineApis);
-
-  const { backgroundStyle } = useBackgroundStyle({
-    engineApis,
-    backgroundType,
-    appId: restProps?.appId,
-    mode: 'engine',
-  });
-
-  const finalStyle = useHiddenStyle(visible, style);
-
-  const containerRef = useRef<any>();
-  const loadingRef = useRef<any>();
-
-  const [reload, setReload] = useState<number>(0);
-
-  const getLoadingStyle = (isShow: boolean): CSSProperties => {
-    const res: CSSProperties = {};
-    if (containerRef.current && loadingRef.current) {
-      const containerRefProps = window.getComputedStyle(containerRef.current);
-      const { offsetWidth, offsetHeight } = containerRef.current;
-      const containerOffset = containerRef.current.getBoundingClientRect();
-      // 获取loading基于父级的偏移量
-      const loadingOffset = loadingRef.current.getBoundingClientRect();
-
-      const offset = {
-        x: loadingOffset.left - containerOffset.left,
-        y: loadingOffset.top - containerOffset.top,
-      };
-
-      res.position = 'absolute';
-      res.width = `${offsetWidth}px`;
-      res.height = `${offsetHeight}px`;
-      res.zIndex = containerRefProps.zIndex;
-      res.backgroundColor = 'rgba(255,255,255,0.5)';
-      res.display = 'flex';
-      res.justifyContent = 'center';
-      res.alignItems = 'center';
-      res.left = 0;
-      res.top = 0;
-      if (offset.x > 0 || offset.y > 0) {
-        res.transform = `translate(${-offset.x}px, ${-offset.y}px)`;
-      }
-    }
-    if (!isShow) {
-      res.display = 'none';
-    }
-    return res;
-  };
-
-  const renderLoadingComp = useMemo(() => {
-    if (loading && loadingRef.current) {
-      return (
-        <div style={getLoadingStyle(true)}>
-          <Spin tip={getLocale?.('loadingText')} />
-        </div>
-      );
-    }
-    return null;
-  }, [loading, loadingRef.current, reload]);
-
-  useEffect(() => {
-    if (loading) {
-      setReload(reload + 1);
-    }
-  }, [loading]);
-
   useImperativeHandle(ref, () => ({
     setLoading(_loading: boolean) {
       setLoading(_loading);
     },
   }));
-
-  // if (visible === false) {
-  //   return null;
-  // }
-
-  return (
-    <div
-      style={{
-        ...backgroundStyle,
-        ...finalStyle,
-        position: 'relative',
-      }}
-      className={className}
-      // @ts-ignore
-      data-compid={props?.['data-compid']}
-      {...restProps}
-      ref={containerRef}
-    >
-      {children}
-      {/* loading 定位元素 */}
-      {loading && (
-        <div
-          style={{
-            width: 0,
-            height: 0,
-            position: 'relative',
-            backgroundColor: 'transparent',
-            visibility: loading ? 'visible' : 'hidden',
-          }}
-          ref={loadingRef}
-        >
-          {renderLoadingComp}
-        </div>
-      )}
-    </div>
-  );
+  return <FreeLayoutLoader {...props} loading={loading} />;
 });
 
 export default FreeLayout;