@lingxiteam/ebe-utils 0.0.25 → 0.0.29

package/lib/pcpublic/src/components/pcfactory/src/Table/hooks/useCommon.ts

@@ -1,11 +1,13 @@
 import classNames from 'classnames';
-import { useEffect, useState } from 'react';
+import { clone } from 'lodash';
+import { useEffect, useRef, useState } from 'react';
+import { useCreation } from '../../utils/ahooks';
 
 const TABLE_ZEBRA_STRIPE_TYPE_CODE = 'zebra';
 const TABLE_BORDER_TYPE_CODE = 'border';
 
 const useCommon = (props: any) => {
-  const { rowKeyType, rowKey, bordered } = props;
+  const { rowKeyType, rowKey, bordered, boundDataSource } = props;
 
   const state = props.pageState;
   const isBordered =
@@ -27,12 +29,48 @@ const useCommon = (props: any) => {
     setCurrentRowKey(rowKeyType === 'auto' ? '__RowId__' : rowKey);
   }, [rowKeyType, rowKey]);
 
+  const [replaceBoundDataSource, setReplaceBoundDataSource] = useState(null);
+  // 优先取 replaceBoundDataSource
+  // 表格外部数据源
+  const outerDataSource = replaceBoundDataSource || boundDataSource;
+
+  const preCloneData = useRef<any>();
+
+  const outerDataSourceRef = useCreation(() => {
+    preCloneData.current = clone(outerDataSource);
+    return {
+      current: outerDataSource,
+    };
+  }, []);
+
+  const preOuterDataSourceRef = outerDataSourceRef.current;
+
+  // 若表格源数据源引用发生变更，则进一步判断
+  if (preOuterDataSourceRef !== outerDataSource) {
+    /**
+     * 简单的通过 JSON.stringify 判断值是否变更
+     * 注：正常情况下，表格绑定页面数据数据源，不会走到里面来，理论上不会有多余的 JSON.stringify 性能损耗
+     * 目前只针对表格数据源绑定的表达式是“json字符串数组固定数据”的情况，在每次运行态解析DSL时会是一个新的数组
+     * 导致表格数据重复更新渲染 -> 外部渲染 -> 死循环
+     * 若今后有其他场景被影响到，或者是 表格数据源绑定的表达式是“json字符串数组固定数据” 但数据量巨大的场景，影响到性能，请修正
+     */
+    if (
+      JSON.stringify(preCloneData.current) !== JSON.stringify(outerDataSource)
+    ) {
+      preCloneData.current = clone(outerDataSource);
+      outerDataSourceRef.current = outerDataSource;
+    }
+  }
+
   return {
     currentRowKey,
     isBordered,
     isZebraStripe,
     state,
     innerClassName,
+    setReplaceBoundDataSource,
+    outerDataSourceRef,
+    outerDataSource,
   };
 };
 

package/lib/pcpublic/src/components/pcfactory/src/Table/hooks/useDataSource.ts

@@ -1,7 +1,5 @@
 import { message } from 'antd';
-import { clone } from 'lodash';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { useCreation } from '../../utils/ahooks';
 import {
   createAutoKey,
   createTempRowKey,
@@ -20,25 +18,13 @@ const useDataSource = (props: any) => {
     pagination,
     hasPageChangeEvent,
     getLocale,
+    setReplaceBoundDataSource,
+    outerDataSource,
+    outerDataSourceRef,
   } = props;
 
   const [dataSource, setDataSource] = useState<any[]>([]);
 
-  const [replaceBoundDataSource, setReplaceBoundDataSource] = useState(null);
-  // 优先取 replaceBoundDataSource
-  const outerDataSource = replaceBoundDataSource || boundDataSource;
-
-  const preCloneData = useRef<any>();
-
-  const outerDataSourceRef = useCreation(() => {
-    preCloneData.current = clone(outerDataSource);
-    return {
-      current: outerDataSource,
-    };
-  }, []);
-
-  const preOuterDataSourceRef = outerDataSourceRef.current;
-
   // 创建id 实例
   const seqId = useMemo(
     () =>
@@ -48,23 +34,6 @@ const useDataSource = (props: any) => {
     [],
   );
 
-  // 若表格源数据源引用发生变更，则进一步判断
-  if (preOuterDataSourceRef !== outerDataSource) {
-    /**
-     * 简单的通过 JSON.stringify 判断值是否变更
-     * 注：正常情况下，表格绑定页面数据数据源，不会走到里面来，理论上不会有多余的 JSON.stringify 性能损耗
-     * 目前只针对表格数据源绑定的表达式是“json字符串数组固定数据”的情况，在每次运行态解析DSL时会是一个新的数组
-     * 导致表格数据重复更新渲染 -> 外部渲染 -> 死循环
-     * 若今后有其他场景被影响到，或者是 表格数据源绑定的表达式是“json字符串数组固定数据” 但数据量巨大的场景，影响到性能，请修正
-     */
-    if (
-      JSON.stringify(preCloneData.current) !== JSON.stringify(outerDataSource)
-    ) {
-      preCloneData.current = clone(outerDataSource);
-      outerDataSourceRef.current = outerDataSource;
-    }
-  }
-
   // 表格当前页数据
   const currentPageDataSource = useMemo(() => {
     // 当 未配置页面回调事件（前端分页） 且 开启分页，需计算当前页的数据有哪些

package/lib/pcpublic/src/components/pcfactory/src/Table/hooks/useExpandable.tsx

@@ -6,7 +6,7 @@ import { useLocale } from '../../utils/hooks/useLocale';
 
 const useExpandable = (expandCfg: any, isED?: boolean) => {
   const {
-    innerDataSource = [],
+    dataSource: innerDataSource = [],
     currentRowKey,
     rowExpandable,
     expandOpenIcon,

package/lib/pcpublic/src/components/pcfactory/src/Table/hooks/usePagination.ts

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useListenProps } from '../../utils';
 import { useLocale } from '../../utils/hooks/useLocale';
 
@@ -15,7 +15,12 @@ const usePagination = (props: any) => {
     pageSize: originPageSize,
     showTotal,
     onPageChange,
+    outerDataSourceRef,
+    boundDataSource,
+    engineApis,
   } = props;
+  // 是否只更新内部数据源，从3.8.1开始只更新内部数据，不上报到数据源
+  const { tableUpdateInnerDataSource } = engineApis?.compatConfig?.cmd || {};
 
   // TODO: 有咩有判断是否是前端分页更好的方式？
   const hasPageChangeEvent = typeof onPageChange === 'function'; // 是否配置页码改变回调事件（是：后端分页，否：前端分页）
@@ -28,6 +33,28 @@ const usePagination = (props: any) => {
   const [current, setCurrent] = useListenProps(originCurrent);
   const [pageSize] = useListenProps(originPageSize);
 
+  const originPagination = useRef<any>({
+    total: originTotal,
+    current: originCurrent,
+    pageSize: originPageSize,
+  });
+  originPagination.current.total = originTotal;
+  originPagination.current.current = originCurrent;
+  originPagination.current.pageSize = originPageSize;
+  useEffect(() => {
+    if (tableUpdateInnerDataSource) {
+      const { total: totalRef, current: currentRef } =
+        originPagination.current || {};
+      // 数据源更新时，将总数和当前页重置成表达式或属性配置的值
+      if (totalRef) {
+        setTotal(totalRef);
+      }
+      if (currentRef) {
+        setCurrent(currentRef);
+      }
+    }
+  }, [outerDataSourceRef.current, boundDataSource]);
+
   // 解析分页选择器配置
   const parsedPageSizeOptions = useMemo(() => {
     if (pageSizeOptions) {
@@ -52,8 +79,8 @@ const usePagination = (props: any) => {
       ? (total: number) => getLocale('Pagination.showTotal', { tol: total })
       : undefined,
     // TODO: 这里目前存在一个问题，若配置了空的分页事件，自动认为是后端分页，实际上
-    current: hasPageChangeEvent ? paginationCurrent : currentPage,
-    pageSize: hasPageChangeEvent ? paginationPageSize : currentPageSize,
+    current: (hasPageChangeEvent ? paginationCurrent : currentPage) || 1,
+    pageSize: (hasPageChangeEvent ? paginationPageSize : currentPageSize) || 10,
     total: Number(total) || undefined,
     showQuickJumper,
     showSizeChanger,

package/lib/pcpublic/src/components/pcfactory/src/Table/hooks/useRowEdit.ts

@@ -27,11 +27,15 @@ const useRowEdit = (props: any) => {
     onRowDoubleClick,
     onBeforeInlineEdit,
     onBeforeInlineSave,
+    engineApis,
   } = props;
 
   const [nowInlineEditKey, setNowInlineEditKey] = useState<string | null>();
   const [nowEditingData, setNowEditingData] = useState<any | null>();
 
+  // 是否只更新内部数据源，从3.8.1开始只更新内部数据源
+  const { tableUpdateInnerDataSource } = engineApis?.compatConfig?.cmd || {};
+
   const onRowSaveClick = (row: any, index: number | null, isForce: any) => {
     // 保存行内编辑行方法
     // 这个同时处理用于自带的行内编辑保存按钮，和指令的强制保存的情况
@@ -57,12 +61,14 @@ const useRowEdit = (props: any) => {
     Object.assign(trow, nowEditingData);
     deleteTempRowProperties(trow);
 
-    // 单行保存编辑时，需要将修改后的值同步到绑定的数据源
-    const syncPropsDataSourceRow = props.dataSource?.find(
-      (r: any) => r[currentRowKey] === nowInlineEditKey,
-    );
-    Object.assign(syncPropsDataSourceRow, nowEditingData);
-    deleteTempRowProperties(syncPropsDataSourceRow);
+    if (!tableUpdateInnerDataSource) {
+      // 单行保存编辑时，需要将修改后的值同步到绑定的数据源
+      const syncPropsDataSourceRow = props.dataSource?.find(
+        (r: any) => r[currentRowKey] === nowInlineEditKey,
+      );
+      Object.assign(syncPropsDataSourceRow, nowEditingData);
+      deleteTempRowProperties(syncPropsDataSourceRow);
+    }
 
     setInnerDataSource([...innerDataSource]);
 
@@ -121,7 +127,11 @@ const useRowEdit = (props: any) => {
     }
 
     // 倘若绑定了数据源，需要通过引用的方式，移除对应的临时数据
-    if (isLatestCreationTempRow && dataSourceFromDataSourceConfig) {
+    if (
+      isLatestCreationTempRow &&
+      dataSourceFromDataSourceConfig &&
+      !tableUpdateInnerDataSource
+    ) {
       const targetIndex = innerDataSource.findIndex(
         (i: any) =>
           row?.[EMPTY_ROW_TEMP_KEY_ATTR] === i?.[EMPTY_ROW_TEMP_KEY_ATTR],
@@ -167,10 +177,13 @@ const useRowEdit = (props: any) => {
       const editRow = innerDataSource.find(
         (r: any) => r[currentRowKey] === row[currentRowKey],
       );
-      // 整表编辑时，需要将修改后的值同步到绑定的数据源
-      const syncPropsDataSourceRow = outerDataSource?.find(
-        (r: any) => r[currentRowKey] === row[currentRowKey],
-      );
+      let syncPropsDataSourceRow: Record<string, any> = {};
+      if (!tableUpdateInnerDataSource) {
+        // 整表编辑时，需要将修改后的值同步到绑定的数据源
+        syncPropsDataSourceRow = outerDataSource?.find(
+          (r: any) => r[currentRowKey] === row[currentRowKey],
+        );
+      }
 
       editRow[attr] = newAttrVal;
       syncPropsDataSourceRow[attr] = newAttrVal;
@@ -196,13 +209,18 @@ const useRowEdit = (props: any) => {
 
     // 当处于编辑状态时，需要过滤来自编辑控件内部触发的 click
     while (target?.className !== curentTarget?.className) {
+      if (!target) break;
+      // 非当前行内元素，不再遍历
+      if (!curentTarget.contains(target)) {
+        return false;
+      }
       if (
         typeof target?.className === 'string' &&
         target.className.includes(EDIT_COMPONENT_STOP_PROPAGATION_CLS)
       ) {
         return true;
       }
-      target = target.parentNode as HTMLBaseElement;
+      target = target?.parentNode as HTMLBaseElement;
     }
 
     if (onRowClick) {
@@ -221,6 +239,12 @@ const useRowEdit = (props: any) => {
       // 当处于编辑状态时，需要过滤来自编辑控件内部触发的 doubleclick
       let stopDoubleClick = false;
       while (target?.className !== curentTarget?.className) {
+        if (!target) break;
+        // 非当前行内元素，不再遍历，不触发点击事件
+        if (!curentTarget.contains(target)) {
+          stopDoubleClick = true;
+          break;
+        }
         if (
           typeof target?.className === 'string' &&
           target.className.includes(EDIT_COMPONENT_STOP_PROPAGATION_CLS)
@@ -228,7 +252,7 @@ const useRowEdit = (props: any) => {
           stopDoubleClick = true;
           break;
         }
-        target = target.parentNode as HTMLBaseElement;
+        target = target?.parentNode as HTMLBaseElement;
       }
 
       if (!stopDoubleClick) {

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

@@ -90,7 +90,10 @@ const MyTable = React.forwardRef<any, MyTableProps>((props, ref) => {
     currentRowKey,
     isBordered,
     innerClassName,
-  } = useCommon(props);
+    setReplaceBoundDataSource,
+    outerDataSource,
+    outerDataSourceRef,
+  } = useCommon({ ...props, boundDataSource });
 
   const {
     page,
@@ -101,13 +104,16 @@ const MyTable = React.forwardRef<any, MyTableProps>((props, ref) => {
     setCurrentPage,
     setCurrentPageSize,
     onPageChange,
-  } = usePagination(props);
+  } = usePagination({
+    ...props,
+    outerDataSourceRef,
+    boundDataSource,
+    engineApis,
+  });
 
   const {
     innerDataSource,
     setInnerDataSource,
-    outerDataSource,
-    outerDataSourceRef,
     setOuterDataSource,
     currentPageDataSource,
   } = useDataSource({
@@ -119,6 +125,9 @@ const MyTable = React.forwardRef<any, MyTableProps>((props, ref) => {
     pagination,
     hasPageChangeEvent,
     getLocale,
+    setReplaceBoundDataSource,
+    outerDataSource,
+    outerDataSourceRef,
   });
 
   const {
@@ -200,6 +209,7 @@ const MyTable = React.forwardRef<any, MyTableProps>((props, ref) => {
     currentRowKey,
     selectedRows,
     onRowSelected,
+    engineApis,
   });
 
   const { rowSpanColMap, rowSpanMap, rowClassMap } = useRowMerge({
@@ -241,6 +251,7 @@ const MyTable = React.forwardRef<any, MyTableProps>((props, ref) => {
     onRowSelected,
     onRowSaveClick,
     loadPrint,
+    engineApis,
   });
 
   // 根据id获取真实的下标，避免过滤和排序后影响下标

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

@@ -142,10 +142,12 @@ const MyTabs = LingxiForwardRef<any, MyTabsProps>((props, ref) => {
         };
 
         return (
+          // tab={c?.props.schema?.props?.tab || c?.props?.tab} 兼容转源码
           <TabPane
             forceRender
             {...(c?.props.schema?.props || {})}
             key={key}
+            tab={c?.props.schema?.props?.tab || c?.props?.tab}
             {...extendProps}
           >
             <ChannelContainer.Item

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

@@ -15,11 +15,11 @@ export interface MyTagProps extends TagProps {
 }
 
 const MyTag = LingxiForwardRef<any, MyTagProps>((props, ref) => {
-  const { name, visible = true, title, ...restProps } = props;
+  const { name, visible = true, title, $$componentItem, ...restProps } = props;
 
   return visible ? (
     <WrapperTag>
-      <div>
+      <div key={$$componentItem.uid}>
         <Tag
           {...restProps}
           color={restProps?.tagType?.color || restProps.color}

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

@@ -58,12 +58,18 @@ const TreeTable = React.forwardRef<any, MyTableProps>((props, ref) => {
   const appId = props?.appId || $$componentItem?.appId;
   const pageId = props?.pageId || $$componentItem?.pageId;
 
-  const { currentRowKey, isBordered, innerClassName } = useCommon(props);
+  const {
+    currentRowKey,
+    isBordered,
+    innerClassName,
+    setReplaceBoundDataSource,
+    outerDataSource,
+    outerDataSourceRef,
+  } = useCommon({ ...props, boundDataSource });
 
   const {
     innerDataSource,
     setInnerDataSource,
-    outerDataSource,
     setOuterDataSource,
     currentPageDataSource,
   } = useDataSource({
@@ -71,6 +77,9 @@ const TreeTable = React.forwardRef<any, MyTableProps>((props, ref) => {
     compId,
     currentRowKey,
     boundDataSource,
+    setReplaceBoundDataSource,
+    outerDataSource,
+    outerDataSourceRef,
   });
 
   // 根据id获取真实的下标，避免过滤和排序后影响下标
@@ -124,6 +133,7 @@ const TreeTable = React.forwardRef<any, MyTableProps>((props, ref) => {
     currentRowKey,
     selectedRows,
     onRowSelected,
+    engineApis,
   });
 
   const {
@@ -157,6 +167,7 @@ const TreeTable = React.forwardRef<any, MyTableProps>((props, ref) => {
     setChildrenColumnName,
     onRowSelected,
     setMode,
+    engineApis,
   });
 
   const {

package/lib/pcpublic/src/components/pcfactory/src/styles/components/Card.less

@@ -23,7 +23,7 @@
       top: 50%;
       left: @padding-xs;
       width: @padding-xxs;
-      height: @font-size-lg;
+      height: @font-size-sm;
       margin-right: @margin-xs;
       background: @primary-color;
       border-radius: @padding-xxs / 2;

package/lib/pcpublic/src/components/pcfactory/src/styles/components/FormGroup.less

@@ -14,12 +14,11 @@
       }
       & > .@{ant-prefix}-collapse-header {
         border-radius: 0;
-        padding: @padding-xs 0;
+        padding: 0;
         background-color: transparent;
         display: flex;
         flex-direction: row-reverse;
         align-items: center;
-        padding-right: @padding-sm;
       }
     }
     .@{ant-prefix}-collapse-expand-icon {
@@ -45,8 +44,9 @@
     position: relative;
     display: flex;
     align-items: center;
-    padding: 0 @padding-xs;
+    padding: 0 @padding-xs 0 0;
     &-icon-line {
+      // padding: @padding-xs @padding-xs @padding-xs 0;
       &::before {
         content: '';
         background-color: @primary-color;
@@ -76,7 +76,8 @@
       }
 
       > i,
-      span {
+      span,
+      img {
         margin-right: @padding-xxs;
         color: @primary-color;
       }
@@ -101,6 +102,9 @@
       & > .@{ant-prefix}-collapse-content {
         border-top: 1px solid @border-color-base;
       }
+      .ued-form-group-title {
+        padding: 4px 8px 4px 0;
+      }
     }
   }
   &-extend-btn {

package/lib/pcpublic/src/components/pcfactory/src/styles/components/Icon.less

@@ -8,6 +8,10 @@
     fill: @primary-color;
   }
 }
+img.@{iconPrefix} {
+  width: 1em;
+  height: 1em;
+}
 
 .@{iconPrefix}-of-design-platform {
   width: @font-size-base;

package/lib/pcpublic/src/components/pcfactory/src/styles/components/StdUpload.less

@@ -17,7 +17,7 @@
       border-radius: @border-radius-base;
     }
     &.@{stdupload-prefix-cls}-disabled {
-      display: block !important;
+      display: block;
       .@{ant-prefix}-btn {
         cursor: not-allowed;
         background-color: #f5f8fa;
@@ -33,7 +33,7 @@
     border: 1px dashed @border-color-base;
     border-radius: @border-radius-base;
     &.@{stdupload-prefix-cls}-disabled {
-      display: inline-block !important;
+      display: inline-block;
       cursor: not-allowed;
     }
   }
@@ -45,7 +45,7 @@
     border-radius: @border-radius-base;
 
     &.@{stdupload-prefix-cls}-disabled {
-      display: block !important;
+      display: block;
       cursor: not-allowed;
     }
   }

package/lib/pcpublic/src/components/pcfactory/src/utils/CustomModule.tsx

@@ -99,6 +99,9 @@ const CustomModule: FC<CustomModuleProps> = ({
   errorInfo,
   allowMap,
 }) => {
+  if (typeof code === 'function') {
+    return code(compProps);
+  }
   // 加载到组件模块
   const Component = useMemo(() => {
     if (!code) {

package/lib/pcpublic/src/components/pcfactory/src/utils/common.ts

@@ -361,6 +361,20 @@ const IconCheckSvg = getSvgImageBase64(
   '<?xml version="1.0" encoding="UTF-8"?><svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>全局样式:20/原子级控件/复选/状态:#选中</title><g id="控件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="system-complete"><path d="M11,0 C17.075904,0 22,4.92409598 22,11 C22,17.075904 17.0734732,22 11,22 C4.92652679,22 0,17.0734732 0,11 C0,4.92652679 4.92409598,0 11,0 Z" id="Shape" fill="#1890FF"></path><path d="M9.42871875,12.9681652 L7.2069029,10.7463493 C6.90006126,10.4395077 6.40257267,10.4395077 6.09573103,10.7463493 C5.78889035,11.05319 5.78889035,11.550677 6.09573103,11.8575177 C6.09573161,11.8575183 6.0957322,11.8575189 6.09573278,11.8575195 L8.72212536,14.4838955 C9.11265701,14.8744045 9.74581424,14.874407 10.136349,14.483901 L10.5404063,14.0798527 L10.5404063,14.0798527 L16.2813591,8.33795955 C16.588183,8.03108543 16.5881626,7.53359119 16.2813136,7.22674219 C15.974472,6.91990055 15.4769834,6.91990055 15.1701417,7.22674219 L9.42871875,12.9681652 L9.42871875,12.9681652 Z" id="Path" fill="#FFFFFF"></path></g></g></svg>',
 );
 
+const getDynamicProperty = (str: string) => {
+  const patterns = ['data.', 'globalData.', 'state.'];
+
+  // eslint-disable-next-line no-plusplus
+  for (let index = 0; index < patterns.length; index++) {
+    const pattern = patterns[index];
+    if (str.includes(pattern)) {
+      return pattern.slice(0, -1);
+    }
+  }
+  // 如果都不包含，返回 null
+  return undefined;
+};
+
 export {
   flatTree,
   deepCopy,
@@ -380,4 +394,5 @@ export {
   IconCheckSvg,
   IconNormalCheckSvg,
   IconWebViewErrorSvg,
+  getDynamicProperty,
 };

package/lib/pcpublic/src/hooks/usePageForm.ts

@@ -11,7 +11,7 @@ import {
 import { useContext } from 'react';
 
 const usePageForm = (refs: Record<string, any>) => {
-  const { refs: renderRefs } = useContext(Context);
+  const { refs: renderRefs, forceUpdate } = useContext(Context);
 
   /**
    * 获取当前表单值
@@ -121,11 +121,12 @@ const usePageForm = (refs: Record<string, any>) => {
       });
 
       forms.forEach((form) => {
-        form?.setFieldsValue(formValues);
+        form?.setFieldsValue(formValues, refs);
       });
     } else {
-      refs[compId]?.setFieldsValue?.(formValues);
+      refs[compId]?.setFieldsValue?.(formValues, refs);
     }
+    forceUpdate({});
   };
 
   /**