plain-design 1.0.0-beta.11 → 1.0.0-beta.110

package/src/packages/components/Table/standard/PlcExpand.tsx

@@ -1,8 +1,8 @@
-import {classnames, computed, designComponent, onBeforeUnmount, reactive, toRaw, useStyles} from "plain-design-composition";
+import {classnames, computed, designComponent, onBeforeUnmount, reactive, toRaw, useStyles} from "@peryl/react-compose";
 import {createPlcPropOptions, PlcEmitsOptions} from "../plc/utils/plc.utils";
 import {iTableNode} from "../table/utils/table.utils";
 import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {injectPlainTable} from "../table/Table";
 import {usePlc} from "../plc/use/usePlc";
 import {Dropdown} from "../../Dropdown";
@@ -65,9 +65,9 @@ export const PlcExpand = designComponent({
        * @author  韦胜健
        * @date    2022/11/17 10:46
        */
-      renderExpand: (node: iTableNode) => {
+      renderExpand: (node: iTableNode, vIndex: number, vid: string, index: number) => {
         return (
-          <tr className="plt-row plt-expand-row" key={`expand_${node.state.index}`}>
+          <tr className="plt-row plt-expand-row" key={`expand_${table.props.virtualRowType === 'virtualIndex' ? vIndex : index}`} data-vid={vid}>
             <td className="plt-cell" rowSpan={1} colSpan={totalSpan.value}>
               <div className="plt-expand-body" style={expandStyles.value}>
                 {scopeSlots.expand({ node, row: node.data })}
@@ -128,29 +128,27 @@ export const PlcExpand = designComponent({
       },
     };
 
-    /**
-     * 不允许启用行虚拟滚动
-     * @author  韦胜健
-     * @date    2022/11/17 13:56
-     */
-    onBeforeUnmount(table.hooks.onEnableVirtual.use(() => false));
-
     /**
      * 拦截行渲染
      * @author  韦胜健
      * @date    2022/11/17 14:15
      */
-    onBeforeUnmount(table.hooks.onRenderRow.use((scope) => {
-      const { node, row, content } = scope;
-      if (!utils.isExpand(row)) {return;}
-      return {
-        node,
-        row,
-        content: <>
-          {content}
-          {utils.renderExpand(node)}
-        </>
-      };
+    const weakMap = new WeakMap<PlainObject, (param: any) => any>();
+    onBeforeUnmount(table.hooks.onTableMessyData.use(({ data }) => {
+      const newData = [] as any[];
+      data.forEach(item => {
+        newData.push(item);
+        if (typeof item === "function") {return;}
+        if (utils.isExpand(item.data)) {
+          let dataFunc = weakMap.get(item.data);
+          if (!dataFunc) {
+            dataFunc = (param: any) => utils.renderExpand(item, param.vIndex, param.vid, param.index);
+            weakMap.set(item.data, dataFunc);
+          }
+          newData.push(dataFunc);
+        }
+      });
+      return { data: newData };
     }));
 
     /**
@@ -177,8 +175,8 @@ export const PlcExpand = designComponent({
                 </div>
               ),
               popper: () => <>
-                <DropdownOption label={i18n('base.edit.expandAll').d('全部展开')} icon="pi-expand" onClick={methods.expandAll}/>
-                <DropdownOption label={i18n('base.edit.collapseAll').d('全部收起')} icon="pi-shrink" onClick={methods.collapseAll}/>
+                <DropdownOption label={i18n.$it('base.edit.expandAll').d('全部展开')} icon="pi-expand" onClick={methods.expandAll}/>
+                <DropdownOption label={i18n.$it('base.edit.collapseAll').d('全部收起')} icon="pi-shrink" onClick={methods.collapseAll}/>
               </>
             }}
           </Dropdown>

package/src/packages/components/Table/standard/PlcIndex.tsx

@@ -1,4 +1,4 @@
-import {designComponent} from "plain-design-composition";
+import {designComponent} from "@peryl/react-compose";
 import {createPlcPropOptions, PlcEmitsOptions} from "../plc/utils/plc.utils";
 import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
 import {usePlc} from "../plc/use/usePlc";
@@ -17,7 +17,7 @@ export const PlcIndex = designComponent({
       noFilter: true,
       noSort: true,
     }),
-    summaryText: { type: String, default: () => i18n('base.edit.summary').d('合计') },
+    summaryText: { type: String, default: () => i18n.$it('base.edit.summary').d('合计') },
     start: { type: Number, default: 0 },
   },
   scopeSlots: PlcScopeSlotsOptions,

package/src/packages/components/Table/standard/PlcOperation/OuterOperation.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, PropType, reactive, RenderNode, useClasses} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, PropType, reactive, RenderNode, useClasses} from "@peryl/react-compose";
 import {eTableOperationPosition, iTableOperation, iTableOperationPermitConfig, iTableOuterOperation, iTableOuterOperationConfig, TableOperationDefaultTypeSeq} from "./PlcOperation.utils";
 import {Button} from "../../../Button";
 import {ButtonGroup} from "../../../ButtonGroup";
@@ -7,7 +7,7 @@ import {Dropdown} from "../../../Dropdown";
 import './outer-operation.scss';
 import {iOperationPermission, useOperationPermission} from "./useOperationPermission";
 import {iTableOptionKeyboard} from "../../../AutoTable/use/useTableOptionKeyboard";
-import {createEffects} from "plain-utils/utils/createEffects";
+import {createEffects} from "@peryl/utils/createEffects";
 import {Tooltip} from "../../../Tooltip";
 import i18n from "../../../i18n";
 
@@ -62,7 +62,7 @@ export const OuterOperation = designComponent({
       let outerOperationConfigs: iTableOuterOperationConfig[] = props.operations?.filter(i => !i.position || i.position === eTableOperationPosition.outer) as any;
       outerOperationConfigs = props.processOuterOperations?.(outerOperationConfigs) || outerOperationConfigs || [];
       outerOperationConfigs.forEach(i => {
-        const { position, handler, keyboard, render } = i;
+        const { position, handler, keyboard, render, dropdown } = i;
         const type = typeof i.type === "function" ? i.type() : i.type || 'other';
         const operation: iTableOuterOperation = {
           label: typeof i.label === "function" ? i.label() : i.label,
@@ -73,6 +73,7 @@ export const OuterOperation = designComponent({
           type,
           disabled: typeof i.disabled === "function" ? i.disabled() : !!i.disabled,
           position,
+          dropdown,
           handler,
           mode: typeof i.mode === "function" ? i.mode() : i.mode,
           status: typeof i.status === "function" ? i.status() : i.status,
@@ -112,8 +113,8 @@ export const OuterOperation = designComponent({
           <div className="table-operation-bar-right">
             {(() => {
               const outerButtonSize = 3;
-              const exposeOuterButtons = outerOperations.value.slice(0, outerButtonSize);
-              const hiddenOuterButtons = outerOperations.value.slice(outerButtonSize);
+              const exposeOuterButtons = outerOperations.value.filter(i => !i.dropdown);
+              const hiddenOuterButtons = outerOperations.value.filter(i => i.dropdown);
               const renderContent: RenderNode[] = [];
               const exposeOuterButtonsContent = exposeOuterButtons.map(operation => {
                 const btn = operation.render ? operation.render(false) : (
@@ -165,7 +166,7 @@ export const OuterOperation = designComponent({
                       v-slots={{
                         default: () => (
                           <ButtonGroup>
-                            <Button label={i18n('base.more').d('更多')}/>
+                            <Button label={i18n.$it('base.more').d('更多')}/>
                             <Button icon="pi-down"/>
                           </ButtonGroup>
                         ),

package/src/packages/components/Table/standard/PlcOperation/PlcOperation.tsx

@@ -1,11 +1,11 @@
-import {computed, designComponent, onBeforeUnmount, PropType, reactive, watch, watchEffect} from "plain-design-composition";
+import {computed, designComponent, onBeforeUnmount, PropType, reactive, watch, watchEffect} from "@peryl/react-compose";
 import {eTableOperationPosition, iTableInnerOperation, iTableInnerOperationConfig, iTableOperation, iTableOperationPermitConfig, nextOperationKey, TableOperationDefaultTypeSeq} from "./PlcOperation.utils";
 import {iTableCellRenderScope, iTableNode, iTableRowRenderScope} from "../../table/utils/table.utils";
 import {createPlcPropOptions, PlcPropsOptions} from "../../plc/utils/plc.utils";
-import {createEffects} from "plain-utils/utils/createEffects";
+import {createEffects} from "@peryl/utils/createEffects";
 import {injectPlainTable} from "../../table/Table";
-import {delay} from "plain-utils/utils/delay";
-import {removeUnit} from "plain-utils/string/removeUnit";
+import {delay} from "@peryl/utils/delay";
+import {removeUnit} from "@peryl/utils/removeUnit";
 import {Plc} from "../../plc/plc/Plc";
 import {Button} from "../../../Button";
 import {Dropdown} from "../../../Dropdown";
@@ -14,7 +14,7 @@ import {DropdownOption} from "../../../DropdownOption";
 import {PlcScopeSlotsOptions} from "../../plc/utils/plc.scope-slots";
 import {iOperationPermission, useOperationPermission} from "./useOperationPermission";
 import i18n from "../../../i18n";
-import {pick} from "../../../../utils/pick";
+import {pick} from "@peryl/utils/pick";
 
 export const PlcOperation = designComponent({
   name: 'plc-operation',
@@ -25,7 +25,7 @@ export const PlcOperation = designComponent({
       width: null as any,
       align: 'left',
       hideInForm: true,
-      title: (() => i18n('base.operation').d('操作')) as any,
+      title: (() => i18n.$it('base.operation').d('操作')) as any,
       noFilter: true,
       noSort: true,
     }),
@@ -183,7 +183,7 @@ export const PlcOperation = designComponent({
     const predicateWidth = computed((): number => {
       if (innerOperationConfigs.value.length === 0) {return 0;}
       return innerOperationConfigs.value.reduce((prev) => {
-        return prev + 2 * 14 + 12;
+        return prev + 2 * 14 + 13;
       }, 0) + 24;
     });
 
@@ -281,7 +281,7 @@ export const PlcOperation = designComponent({
      * @author  韦胜健
      * @date    2022.11.25 19:20
      */
-    effects.push(table.hooks.onVirtualPageIndexChange.use(({ start }) => {state.virtualRowStart = start;}));
+    effects.push(table.hooks.onVirtualPageIndexChange.use(({ startIndex }) => {state.virtualRowStart = startIndex;}));
 
     onBeforeUnmount(() => effects.clear());
 
@@ -305,13 +305,13 @@ export const PlcOperation = designComponent({
                       <Button
                         mode="text"
                         key="save"
-                        label={i18n('base.edit.save').d('保存')}
+                        label={i18n.$it('base.edit.save').d('保存')}
                         onClick={() => event.emit.onClickNodeSaveOperation(node)}
                       />
                       <Button
                         mode="text"
                         key="cancel"
-                        label={i18n('base.cancel').d('取消')}
+                        label={i18n.$it('base.cancel').d('取消')}
                         onClick={() => event.emit.onClickNodeCancelOperation(node)}
                       />
                     </>;
@@ -349,7 +349,7 @@ export const PlcOperation = designComponent({
                               mode="text"
                               key="more"
                             >
-                              <span>{i18n('base.more').d('更多')}</span>
+                              <span>{i18n.$it('base.more').d('更多')}</span>
                               <Icon icon="pi-down"/>
                             </Button>
                           ),

package/src/packages/components/Table/standard/PlcOperation/PlcOperation.utils.tsx

@@ -1,9 +1,9 @@
-import {createEnum} from "plain-utils/utils/createEnum";
-import {PlainObject} from "plain-utils/utils/event";
+import {createEnum} from "@peryl/utils/createEnum";
+import {PlainObject} from "@peryl/utils/event";
 import {iTableRowRenderScope} from "../../table/utils/table.utils";
-import {createCounter} from "plain-utils/utils/createCounter";
+import {createCounter} from "@peryl/utils/createCounter";
 import {ThemeStatus} from "../../../../uses/useStyle";
-import {RenderNode} from "plain-design-composition";
+import {RenderNode} from "@peryl/react-compose";
 
 /**
  * 按钮位置类型
@@ -50,6 +50,8 @@ type iBuildTableOperationConfig<Scope = never, IsConfig = true> = {
       keyboard?: string,
       /*外部按钮可以不用设置position，默认按钮就是外部的*/
       position?: typeof eTableOperationPosition.outer,
+      /*是否放在更多按钮里边*/
+      dropdown?: boolean,
       handler?: () => any,
       render?: (isDropdown: boolean) => RenderNode
     }) :

package/src/packages/components/Table/standard/PlcOperation/outer-operation.scss

@@ -6,7 +6,7 @@
 
     .table-operation-bar-left {
       flex: 1;
-      overflow: hidden;
+      //overflow: hidden;
       white-space: nowrap;
       text-align: left;
     }
@@ -16,11 +16,13 @@
 @include comp(auto-table) {
   @include sizeMixin(auto-table, ()) {
     .table-operation-bar {
-      margin-bottom: $margin;
+      margin-bottom: 0;
 
       .table-operation-bar-right {
+        margin-left: $margin;
+
         & > * + * {
-          margin-left: calc(#{$margin} - 8px);
+          margin-left: calc(#{$margin});
         }
 
         & > .#{componentName(button-group)} {

package/src/packages/components/Table/standard/PlcOperation/useOperationPermission.ts

@@ -1,5 +1,5 @@
 import {iTableOperationPermitConfig, iTableOperationPermitData} from "./PlcOperation.utils";
-import {computed} from "plain-design-composition";
+import {computed} from "@peryl/react-compose";
 
 /**
  * 计算operation按钮的权限

package/src/packages/components/Table/standard/PlcTree/PlcTree.autoWidth.tsx

@@ -1,4 +1,4 @@
-import {computed, ExtractPropTypes, reactive} from "plain-design-composition";
+import {computed, ExtractPropTypes, reactive} from "@peryl/react-compose";
 import {iTreeCore} from "../../../TreeCore/createTreeCore";
 import {iPlcTreeScopeSlotsType, PlcTreeButtonSize, PlcTreePropsOptions} from "./PlcTree.utils";
 

package/src/packages/components/Table/standard/PlcTree/PlcTree.renderNode.tsx

@@ -1,6 +1,6 @@
 import {iTableCellRenderScope} from "../../table/utils/table.utils";
-import {useStyles} from "plain-design-composition";
-import {unit} from "plain-utils/string/unit";
+import {useStyles} from "@peryl/react-compose";
+import {unit} from "@peryl/utils/unit";
 import {DropdownOption} from "../../../DropdownOption";
 import {iTreeCore} from "../../../TreeCore/createTreeCore";
 import {iPlcTreePropsType, iPlcTreeScopeSlotsType, PlcTreeButtonSize} from "./PlcTree.utils";
@@ -40,11 +40,11 @@ export function usePlcTreeRenderNode(
   const renderTreeHead = () => (
     <>
       <PlcTreeHeader table={table} buttonStyles={buttonStyles.value} getPlcRefer={getPlcRefer}>
-        <DropdownOption label={i18n('base.edit.expandAll').d('全部展开')} icon="pi-expand" onClick={treeCore.methods.expandAll}/>
-        <DropdownOption label={i18n('base.edit.collapseAll').d('全部收起')} icon="pi-shrink" onClick={treeCore.methods.collapseAll}/>
+        <DropdownOption label={i18n.$it('base.edit.expandAll').d('全部展开')} icon="pi-expand" onClick={treeCore.methods.expandAll}/>
+        <DropdownOption label={i18n.$it('base.edit.collapseAll').d('全部收起')} icon="pi-shrink" onClick={treeCore.methods.collapseAll}/>
         {props.multiple && <>
-          <DropdownOption label={i18n('table.checkAll').d('全部选中')} icon="pi-select-all" onClick={treeCore.methods.checkAll}/>
-          <DropdownOption label={i18n('table.clearAll').d('清空选中')} icon="pi-unordered-list" onClick={treeCore.methods.unCheckAll}/>
+          <DropdownOption label={i18n.$it('table.checkAll').d('全部选中')} icon="pi-select-all" onClick={treeCore.methods.checkAll}/>
+          <DropdownOption label={i18n.$it('table.clearAll').d('清空选中')} icon="pi-unordered-list" onClick={treeCore.methods.unCheckAll}/>
         </>}
       </PlcTreeHeader>
       {props.title}
@@ -58,6 +58,9 @@ export function usePlcTreeRenderNode(
    */
   const renderTreeNode = (renderScope: iTableCellRenderScope) => {
     const treeNode = treeCore.flatNodeComputedData.value[renderScope.node.state.index];
+    if (!treeNode) {
+      return null;
+    }
     return (
       <RenderPlcTreeNode
         treeCore={treeCore}

package/src/packages/components/Table/standard/PlcTree/PlcTree.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, iMouseEvent, onBeforeUnmount, onMounted, SimpleFunction, watch} from "plain-design-composition";
+import {computed, designComponent, iMouseEvent, onBeforeUnmount, onMounted, SimpleFunction, watch} from "@peryl/react-compose";
 import {TreeEmitOptions} from "../../../TreeCore/createTreeProps";
 import {PlcEmitsOptions} from "../../plc/utils/plc.utils";
 import {usePlc} from "../../plc/use/usePlc";
@@ -8,10 +8,10 @@ import {usePlcTreeRenderNode} from "./PlcTree.renderNode";
 import {PlcTreePropsOptions, PlcTreeScopeSlotsOptions} from "./PlcTree.utils";
 import {usePlcTreeAutoWidth} from "./PlcTree.autoWidth";
 import {CheckboxStatus} from "../../../../utils/constant";
-import {createEffects} from "plain-utils/utils/createEffects";
+import {createEffects} from "@peryl/utils/createEffects";
 import {iTableNode} from "../../table/utils/table.utils";
-import {findParentElement} from "../../../../utils/findParentElement";
-import {hasClass} from "plain-utils/dom/hasClass";
+import {findParentElement} from "@peryl/utils/findParentElement";
+import {hasClass} from "@peryl/utils/hasClass";
 
 export const PlcTree = designComponent({
   name: 'plc-tree',

package/src/packages/components/Table/standard/PlcTree/PlcTree.utils.ts

@@ -1,5 +1,5 @@
-import {ExtractPropTypes, PropType, tScopeSlotsType} from "plain-design-composition";
-import {omit} from "../../../../utils/omit";
+import {ExtractPropTypes, PropType, tScopeSlotsType} from "@peryl/react-compose";
+import {omit} from "@peryl/utils/omit";
 import {TreePropsOptions} from "../../../TreeCore/createTreeProps";
 import {createPlcPropOptions} from "../../plc/utils/plc.utils";
 import {PlcScopeSlotsOptions} from "../../plc/utils/plc.scope-slots";

package/src/packages/components/Table/standard/PlcTree/PlcTreeHeader.tsx

@@ -1,10 +1,10 @@
-import {designComponent, iHTMLElement, onBeforeUnmount, PropType, reactive, useRefs, watch} from "plain-design-composition";
+import {designComponent, iHTMLElement, onBeforeUnmount, PropType, reactive, useRefs, watch} from "@peryl/react-compose";
 import Dropdown from "../../../Dropdown";
 import {iTableRefer} from "../../table/Table";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import Icon from "../../../Icon";
 import {tPlcType} from "../../plc/utils/plc.utils";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 
 export const PlcTreeHeader = designComponent({
   props: {

package/src/packages/components/Table/standard/PlcTree/RenderPlcTreeNode.tsx

@@ -1,14 +1,14 @@
-import {cacheComputed, classnames, computed, designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, PropType, useRefs} from "plain-design-composition";
+import {cacheComputed, classnames, computed, designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, PropType, useRefs} from "@peryl/react-compose";
 import {iTreeNode} from "../../../TreeCore/createTreeNode";
 import {iTableNode} from "../../table/utils/table.utils";
 import {iTreeCore} from "../../../TreeCore/createTreeCore";
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 import {iPlcTreeScopeSlotsType, PlcTreeButtonSize} from "./PlcTree.utils";
 import Checkbox from "../../../Checkbox";
 import Loading from "../../../Loading";
 import Icon from "../../../Icon";
 import {tPlc} from "../../plc/utils/plc.utils";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 
 export const RenderPlcTreeNode = designComponent({
   props: {
@@ -80,6 +80,7 @@ export const RenderPlcTreeNode = designComponent({
             {props.treeCore.props.multiple && (
               <div className={`tree-node-checker plc-tree-button`}>
                 <Checkbox
+                  key={props.treeNode.id}
                   checkStatus={checkStatus.value}
                   disabled={!props.treeNode.isCheckAble()}
                   onClick={handler.onClickCheckbox}
@@ -89,7 +90,7 @@ export const RenderPlcTreeNode = designComponent({
             {props.treeCore.props.draggable && (
               <div
                 className={classnames(['tree-node-draggier', 'plc-tree-button', { 'tree-node-draggier-disable': !props.treeCore.utils.isAllowDraggable(props.treeNode) }])}
-                onMouseDown={handler.onMousedownDraggier.value}
+                onMouseDown={props.treeNode.empty ? undefined : handler.onMousedownDraggier.value}
               >
                 <Icon icon="pi-menu"/>
               </div>

package/src/packages/components/Table/table/Table.tsx

@@ -1,14 +1,14 @@
-import {computed, designComponent, getComponentCls, nextTick, onMounted, reactive, toRaw, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, nextTick, onMounted, reactive, toRaw, useClasses, useRefs, useStyles} from "@peryl/react-compose";
 import {iTableNode, TableEmitsOptions, TablePropsOptions, TableSizeVariables, TableSlotsOptions} from "./utils/table.utils";
 import {createTableHooks} from "./utils/createTableHooks";
 import {useTablePlc} from "../plc/useTablePlc";
 import {useTableNode} from "./node/useTableNode";
 import {VirtualTable} from "../../VirtualTable";
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 import {PltHeadCell} from "./head/head-cell";
-import {removeUnit} from "plain-utils/string/removeUnit";
+import {removeUnit} from "@peryl/utils/removeUnit";
 import './table.scss';
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {useFixedShadow} from "./use/useFixedShadow";
 import {useTableScroll} from "./use/useTableScroll";
 import {Validation} from "../../Form/validate/createValidation";
@@ -108,6 +108,8 @@ export const Table = designComponent({
      */
     const { bodyNodes, summaryNodes } = useTableNode({ props, formValidator, dataRef });
 
+    const tableBodyNodes = computed(() => hooks.onTableMessyData.exec({ data: [...bodyNodes.value] }).data);
+
     const showRows = computed((): number => {
       const bodyRows = bodyNodes.value.length;
       if (props.showRows === 'auto') {
@@ -234,6 +236,7 @@ export const Table = designComponent({
     /*---------------------------------------内置hooks-------------------------------------------*/
 
     hooks.onRender.use({
+      separate: false,
       processor: ({ list, render }) => {!bodyNodes.value.length && list.push({ render, key: 'empty', seq: 4 });},
       render: () => (
         <div className="table-empty">
@@ -323,9 +326,10 @@ export const Table = designComponent({
               <VirtualTable
                 ref={onRefVirtual}
                 height={tableHeight.value || undefined}
-                data={bodyNodes.value}
+                data={tableBodyNodes.value}
                 headData={plcData.value?.headPlcListArray}
                 size={numberState.bodyRowHeight}
+                dynamicSize={props.dynamicSize}
                 headSize={numberState.headRowHeight}
                 width={plcData.value!.targetTableWidth!}
                 summaryData={summaryNodes.value}
@@ -351,8 +355,12 @@ export const Table = designComponent({
                       </tr>
                     ))
                   ),
-                  default: ({ item, index, virtualIndex }) => (
-                    <PltRow table={refer} node={item} vid={index} key={virtualIndex}/>
+                  default: ({ item, vid, vIndex, index }) => (
+                    typeof item !== "function" ? (
+                      <PltRow table={refer} node={item} vid={vid} key={props.virtualRowType === 'virtualIndex' ? vIndex : index}/>
+                    ) : (
+                      item({ vid, vIndex, index })
+                    )
                   ),
                 }}
               />

package/src/packages/components/Table/table/body/cell.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, iHTMLElement, iMouseEvent, onBeforeUnmount, PropType, useClassCache, useRefs, useStyleCache} from "plain-design-composition";
+import {computed, designComponent, iHTMLElement, iMouseEvent, onBeforeUnmount, PropType, useClassCache, useRefs, useStyleCache} from "@peryl/react-compose";
 import {tPlc} from "../../plc/utils/plc.utils";
 import {iTableNode} from "../utils/table.utils";
 import {eFormValidateTrigger} from "../../../Form/validate/validate.utils";
@@ -8,7 +8,7 @@ import {Table} from "../Table";
 import {iFormValidator} from "../../../Form/validate/createValidation";
 import {useCellValue} from "./useCellValue";
 import {createTooltip} from "../../../useTooltip";
-import {createEffects} from "plain-utils/utils/createEffects";
+import {createEffects} from "@peryl/utils/createEffects";
 import {usePopup} from "../../../usePopup";
 
 export const PltCell = designComponent({
@@ -127,24 +127,29 @@ export const PltCell = designComponent({
          * @author  韦胜健
          * @date    2023.1.20 14:00
          */
+        const emptyOverflowTooltipOption = { reference: null, message: null, };
         const overflowTooltip = createTooltip({
           overflow: true,
           /*当没有message时注销监听鼠标事件*/
           ignoreEmptyMessage: false,
           tooltip: () => {
             const bodyCell = getBodyCell();
-            return ({
-              /*
-              * 没有开启overflowTooltip
-              * 或者没有初始化getBodyCell
-              * 或者没有bodyCell
-              * 或者当前处于编辑状态
-              *
-              * 则不显示overflowTooltip
-              */
-              reference: !props.plc.props.overflowTooltip || !bodyCell || bodyCell.editable ? null : refs.el,
-              message: bodyCell?.body,
-            });
+            /*
+             * 没有开启overflowTooltip
+             * 或者没有初始化getBodyCell
+             * 或者没有bodyCell
+             * 或者当前处于编辑状态
+             *
+             * 则不显示overflowTooltip
+             */
+            if (!props.plc.props.overflowTooltip || !bodyCell || bodyCell.editable) {
+              return emptyOverflowTooltipOption
+            } else {
+              return {
+                reference: !props.plc.props.overflowTooltip || !bodyCell || bodyCell.editable ? null : refs.el,
+                message: bodyCell?.body,
+              };
+            }
           },
         }, popup);
         effects.push(overflowTooltip.clear);

package/src/packages/components/Table/table/body/row.tsx

@@ -1,5 +1,5 @@
 import {PltCell} from "./cell";
-import {designComponent, iMouseEvent, PropType, useClasses} from "plain-design-composition";
+import {designComponent, iMouseEvent, PropType, useClasses} from "@peryl/react-compose";
 import {Table} from "../Table";
 import {iTableNode} from "../utils/table.utils";
 
@@ -34,7 +34,7 @@ export const PltRow = designComponent({
       render: () => {
         return props.table.hooks.onRenderRow.exec({
           content: (
-            <tr className={classes.value} style={{ height: `${props.table.numberState.bodyRowHeight}px` }} data-vid={props.vid} {...handler}>
+            <tr className={classes.value} style={{ height: `${props.table.numberState.bodyRowHeight}px` }} data-vid={props.vid} data-idx={String(props.node.state.index == null ? "" : props.node.state.index)} {...handler}>
               {(props.table.bodyPlcList.value?.map((plc) => <PltCell key={plc.plcKey} table={props.table} node={props.node} plc={plc}/>))}
             </tr>
           ),

package/src/packages/components/Table/table/body/useCellValue.tsx

@@ -1,7 +1,7 @@
 import {iTableNode} from "../utils/table.utils";
 import {tPlc} from "../../plc/utils/plc.utils";
-import {computed, reactive, toRaw} from "plain-design-composition";
-import {PlainObject} from "plain-utils/utils/event";
+import {computed, reactive, toRaw} from "@peryl/react-compose";
+import {PlainObject} from "@peryl/utils/event";
 import {LoadingText} from "../../../../utils/LoadingText";
 import {AsyncFormatter} from "../../../AsyncFormatter";
 import {Formatter} from "../../../Formatter";
@@ -84,13 +84,17 @@ export function useCellValue(
           };
           (async () => {
             try {
+              const sv = sourceValue.value;
+              const sr = row.value;
               const value = await asyncFormatterFunction(sourceValue.value, { ...cellRenderScope, ...formatterOptions });
-              asyncState.asyncValue = {
-                sourceValue: sourceValue.value,
-                row: row.value,
-                targetValue: value,
-                loading: false,
-              };
+              if (sv === sourceValue.value && sr === row.value) {
+                asyncState.asyncValue = {
+                  sourceValue: sourceValue.value,
+                  row: row.value,
+                  targetValue: value,
+                  loading: false,
+                };
+              }
             } catch (e) {
               /*异步格式化失败*/
               console.error(e);

package/src/packages/components/Table/table/head/head-cell.tsx

@@ -1,6 +1,6 @@
 import {useHeadCellResize} from "./useHeadCellResize";
-import {computed, designComponent, iHTMLElement, iMouseEvent, PropType, useClassCache, useRefs, useStyleCache} from "plain-design-composition";
-import {toArray} from "plain-utils/utils/toArray";
+import {computed, designComponent, iHTMLElement, iMouseEvent, PropType, useClassCache, useRefs, useStyleCache} from "@peryl/react-compose";
+import {toArray} from "@peryl/utils/toArray";
 import {Table} from "../Table";
 import {tPlcType} from "../../plc/utils/plc.utils";
 import {PlainScroll} from "../../../Scroll";

package/src/packages/components/Table/table/head/useHeadCellResize.ts

@@ -1,9 +1,9 @@
-import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
-import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
+import {disabledUserSelect} from "@peryl/utils/disabledUserSelect";
+import {enableUserSelect} from "@peryl/utils/enableUserSelect";
 import {Table} from "../../index";
 import {tPlcType} from "../../plc/utils/plc.utils";
-import {addClass} from "plain-utils/dom/addClass";
-import {getComponentCls, iMouseEvent} from "plain-design-composition";
+import {addClass} from "@peryl/utils/addClass";
+import {getComponentCls, iMouseEvent} from "@peryl/react-compose";
 import {ClientZoom} from "../../../ClientZoom";
 
 /**

package/src/packages/components/Table/table/node/useTableNode.tsx

@@ -1,6 +1,6 @@
 import {createTableNode, iTableNode, iTablePropsType} from "../utils/table.utils";
-import {computed} from "plain-design-composition";
-import {PlainObject} from "plain-utils/utils/event";
+import {computed} from "@peryl/react-compose";
+import {PlainObject} from "@peryl/utils/event";
 import {iFormValidator} from "../../../Form/validate/createValidation";
 
 export function useTableNode({ props, formValidator, dataRef }: { props: iTablePropsType, formValidator: iFormValidator, dataRef: { value: { data: PlainObject[] | undefined } } }) {