plain-design 1.0.0-beta.16 → 1.0.0-beta.161

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,8 +8,9 @@ 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";
+import {injectTableAutoSpan} from "../../plc/use/useTableAutoSpan";
 
 export const PltCell = designComponent({
   name: 'plt-cell',
@@ -23,6 +24,9 @@ export const PltCell = designComponent({
     const { refs, onRef } = useRefs({ el: iHTMLElement });
 
     const popup = usePopup();
+
+    const tableAutoSpan = injectTableAutoSpan();
+
     /**
      * 单元格校验
      * @author  韦胜健
@@ -51,6 +55,11 @@ export const PltCell = designComponent({
       props.table.hooks.onDblclickCell.exec({ e, node: props.node, plc: props.plc });
     };
 
+    const onContextmenu = (e: iMouseEvent) => {
+      // if (bodyCell.value().editable) {return;}
+      props.table.hooks.onContextmenuCell.exec({ e, node: props.node, plc: props.plc });
+    };
+
     /**
      * 鼠标进入单元格
      * @author  韦胜健
@@ -70,7 +79,9 @@ export const PltCell = designComponent({
      * @author  韦胜健
      * @date    2022/12/5 20:35
      */
-    const { bodyCell } = useCellValue({ optionGetter: () => ({ node: props.node, plc: props.plc }), formEdit: false });
+    const { effects: cellValueEffects } = createEffects();
+    onBeforeUnmount(() => cellValueEffects.clear());
+    const { bodyCell } = useCellValue({ optionGetter: () => ({ node: props.node, plc: props.plc }), formEdit: false, effects: cellValueEffects });
 
     /**
      * 单元格样式类名
@@ -127,24 +138,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);
@@ -177,14 +193,32 @@ export const PltCell = designComponent({
       return { update };
     })();
 
+    /*每次渲染都记录上一次的span，某次渲染在offsetData中找不到自己的offsetIndex时，就用上一次的span*/
+    let prevSpan = { rowspan: 1, colspan: 1 };
+
     return {
       render: () => {
         const { node, plc } = props;
         const { body, editable } = bodyCell.value();
-        const span = !!props.table.props.spanMethod ? props.table.props.spanMethod({ node, plc }) : { rowspan: 1, colspan: 1 };
+        let span = !!props.table.props.spanMethod ? props.table.props.spanMethod({ node, plc }) : { rowspan: 1, colspan: 1 };
         if (plc.props.editColSpan != null && node.state.edit) {
           span.colspan = typeof plc.props.editColSpan === "function" ? plc.props.editColSpan(node) : plc.props.editColSpan;
         }
+        if (!!tableAutoSpan.value && (plc.props.autoRowSpan || plc.props.autoColSpan)) {
+          const { spans, data: offsetData } = tableAutoSpan.value;
+          /*要用offsetIndex，而不是props.node.state.index,这个是行数据在所有数据中的真实索引，而不是在虚拟列表数据中的索引*/
+          /*计算的spans仅含有虚拟数据的合并结果*/
+          const offsetIndex = offsetData.indexOf(props.node.data);
+          if (offsetIndex > -1) {
+            const rowSpan = !plc.props.field ? null : spans[offsetIndex].row?.[plc.props.field];
+            if (rowSpan != null) {span.rowspan = rowSpan;}
+            const colSpan = !plc.props.field ? null : spans[offsetIndex].col?.[plc.props.field];
+            if (colSpan != null) {span.colspan = colSpan;}
+          } else {
+            span = prevSpan;
+          }
+        }
+        prevSpan = span;
         if (span.rowspan === 0 || span.colspan === 0) {
           /*rowspan为0时，不会正确合并单元格，如果要合并单元格则不渲染这个td*/
           return null;
@@ -196,6 +230,7 @@ export const PltCell = designComponent({
         // console.log('cell', props.plc.props.title);
         return (
           <td
+            data-span={String(span.rowspan != 1 || span.colspan != 1)}
             ref={onRef.el}
             rowSpan={span.rowspan}
             colSpan={span.colspan}
@@ -203,6 +238,7 @@ export const PltCell = designComponent({
             style={styles.value}
             onClick={onClick}
             onDoubleClick={onDblclick}
+            onContextMenu={onContextmenu}
             onMouseEnter={onEnter}
             onMouseLeave={onLeave}
           >

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,11 +1,13 @@
 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 {globalComputed, 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";
 import {renderBodyCell} from "../../plc/utils/plc.render";
+import {iEffects} from "@peryl/utils/createEffects";
+import {delay} from "@peryl/utils/delay";
 
 /**
  * 计算cell渲染所需要的内容
@@ -16,9 +18,11 @@ export function useCellValue(
   {
     optionGetter,
     formEdit,
+    effects,
   }: {
     optionGetter: () => { node: iTableNode, plc: tPlc },
     formEdit: boolean,
+    effects: iEffects,
   }
 ) {
   /**
@@ -26,20 +30,22 @@ export function useCellValue(
    * @author  韦胜健
    * @date    2022.12.3 10:50
    */
-  const row = computed(() => {
+  const row = globalComputed(() => {
     const { node } = optionGetter();
     return node.state.edit ? node.state.editRow : node.data;
   });
+  effects.push(() => row.effect.stop());
 
   /**
    * 当前单元格的目标数据
    * @author  韦胜健
    * @date    2022.12.3 10:50
    */
-  const sourceValue = computed(() => {
+  const sourceValue = globalComputed(() => {
     const { plc } = optionGetter();
     return !!plc.props.field ? row.value[plc.props.field] : null;
   });
+  effects.push(() => sourceValue.effect.stop());
 
   /**
    * 异步格式化的状态
@@ -58,8 +64,9 @@ export function useCellValue(
       loading: boolean,
     }
   });
+  effects.push(() => delay().then(() => {asyncState.asyncValue = null;}));
 
-  const targetValue = computed(() => {
+  const targetValue = globalComputed(() => {
     const { plc, node } = optionGetter();
     const { formatter, asyncFormatter, formatterOptions } = plc.props;
     const cellRenderScope = { plc: plc, node: node, row: row.value };
@@ -84,13 +91,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);
@@ -121,12 +132,14 @@ export function useCellValue(
       return sourceValue.value;
     }
   });
+  effects.push(() => targetValue.effect.stop());
 
-  const bodyCell = computed(() => {
+  const bodyCell = globalComputed(() => {
     const { node, plc } = optionGetter();
     const bc = renderBodyCell({ node, plc, formEdit, targetValue: targetValue.value });
     return () => bc;
   });
+  effects.push(() => bodyCell.effect.stop());
 
   return { bodyCell, targetValue };
 }

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

@@ -1,12 +1,14 @@
 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";
 import {Icon} from "../../../Icon";
 import {renderHeadCell} from "../../plc/utils/plc.render";
 import {useTooltip} from "../../../useTooltip";
+import Tooltip from "../../../Tooltip";
+import {getFunctionValue} from '@peryl/utils/getFunctionValue';
 
 export const PltHeadCell = designComponent({
   name: 'plt-head-cell',
@@ -77,6 +79,10 @@ export const PltHeadCell = designComponent({
             onMouseLeave={handler.onLeave}
           >
             {content}
+            {!!props.tablePlc.props.tip && <Tooltip v-slots={{
+              default: () => <Icon icon="pi-info-circle" className="plt-head-cell-tip"/>,
+              popper: () => getFunctionValue(props.tablePlc.props.tip)
+            }}/>}
             <span className="plt-head-cell-indicator" onMouseDown={resizeHandler.mousedown}/>
             {sort.value != null && (
               <div className={`plt-head-cell-sorter plt-head-cell-sorter-${sort.value ? 'desc' : 'asc'}`}>

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 } } }) {

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

@@ -2,12 +2,32 @@
   position: relative;
 
   @include sizeMixin(table, (font-size)) {
+    .plt-cell {
+      padding: 0 plv(input-padding-x-#{$name});
+
+      &.plt-cell-editing {
+        &:not(.plt-cell-add-edit-padding) {
+          padding-left: 2px;
+          @include comp(input) {
+            & > div, & > span, & > input, & > textarea {
+              &:first-child {
+                padding-left: calc(#{plv(input-padding-x-#{$name})} - 3px);
+              }
+            }
+          }
+        }
+      }
+    }
   }
   .virtual-table-head-table {
     td {
-      font-weight: 600;
+      font-weight: 500;
       letter-spacing: 1px;
 
+      .plt-head-cell-tip {
+        color: plv(text-3);
+      }
+
       .plt-head-cell-indicator {
         position: absolute;
         top: 0;
@@ -84,22 +104,10 @@
       padding: 0;
     }
 
-    &.plt-cell-editing {
-      &:not(.plt-cell-add-edit-padding) {
-        padding-left: 2px;
-        @include comp(input) {
-          & > div, & > span, & > input, & > textarea {
-            &:first-child {
-              padding-left: calc(#{plv(input-padding-x)} - 3px);
-            }
-          }
-        }
-      }
-    }
-
     &.plt-cell-link {
       color: plv(primary-6);
       cursor: pointer;
+      text-decoration: underline;
 
       &:hover {
         text-decoration: underline;
@@ -109,7 +117,7 @@
     @include comp(input) {
       &:not(.input-multiple) {
         .input-box {
-          padding-bottom: 4px;
+          padding-bottom: 3px;
         }
       }
     }
@@ -216,7 +224,7 @@
   .plt-expand-row {
     &, &:hover {
       td {
-        padding: 0;
+        padding: 0 !important;
         background-color: plv(background-color) !important;
         overflow: unset !important;
       }

package/src/packages/components/Table/table/use/useFixedShadow.ts

@@ -1,5 +1,5 @@
-import {computed, reactive, SimpleFunction} from "plain-design-composition";
-import {delay} from "plain-utils/utils/delay";
+import {computed, reactive, SimpleFunction} from "@peryl/react-compose";
+import {delay} from "@peryl/utils/delay";
 import {iTableScrollRefer} from "./useTableScroll";
 import {PlainScroll} from "../../../Scroll";
 

package/src/packages/components/Table/table/use/useTableDraggier.col.tsx

@@ -1,17 +1,17 @@
-import {createEffects} from "plain-utils/utils/createEffects";
+import {createEffects} from "@peryl/utils/createEffects";
 import {useAutoScroll} from "../../../Scroll/useAutoScroll";
 import {PlainScroll} from "../../../Scroll";
 import {TablePlcFixedType, tPlc, tPlcType} from "../../plc/utils/plc.utils";
-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 {IteratePlcHandleType, iteratePlcList} from "../../plc/utils/iteratePlcList";
 import VirtualTable from "../../../VirtualTable";
 import {customDeepClone} from "../../../../utils/customDeepClone";
-import {addClass} from "plain-utils/dom/addClass";
-import {getComponentCls, iMouseEvent, nextIndex, StyleProperties} from "plain-design-composition";
+import {addClass} from "@peryl/utils/addClass";
+import {getComponentCls, iMouseEvent, nextIndex, StyleProperties} from "@peryl/react-compose";
 import {iTableHooks} from "../utils/createTableHooks";
 import {iElementRect} from "../../../../utils/getRowEl";
-import {createEnum} from "plain-utils/utils/createEnum";
+import {createEnum} from "@peryl/utils/createEnum";
 import {ClientZoom} from "../../../ClientZoom";
 
 export function useTableDraggierCol(

package/src/packages/components/Table/table/use/useTableDraggier.row.tsx

@@ -1,15 +1,15 @@
-import {getComponentCls, iMouseEvent, reactive} from "plain-design-composition";
-import {useAutoScroll} from "../../../Scroll/useAutoScroll";
-import {createEffects} from "plain-utils/utils/createEffects";
+import {getComponentCls, iMouseEvent, reactive} from "@peryl/react-compose";
+import {createEffects} from "@peryl/utils/createEffects";
 import VirtualTable from "../../../VirtualTable";
 import {iTableHooks} from "../utils/createTableHooks";
 import {iTableNode} from "../utils/table.utils";
-import {findParentElement} from "../../../../utils/findParentElement";
-import {hasClass} from "plain-utils/dom/hasClass";
-import {addClass} from "plain-utils/dom/addClass";
-import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
-import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
+import {findParentElement} from "@peryl/utils/findParentElement";
+import {hasClass} from "@peryl/utils/hasClass";
+import {addClass} from "@peryl/utils/addClass";
+import {disabledUserSelect} from "@peryl/utils/disabledUserSelect";
+import {enableUserSelect} from "@peryl/utils/enableUserSelect";
 import {ClientZoom} from "../../../ClientZoom";
+import {createAutoScrollManager} from "../../../createAutoScrollManager";
 
 export function useTableDraggierRow(
   {
@@ -29,8 +29,11 @@ export function useTableDraggierRow(
     model: { value: any[] | null | undefined }
   }
 ) {
+
   /*自动滚动*/
-  const autoScroll = useAutoScroll({ getScroll: () => refs.virtual?.refs.scroll, vertical: true, });
+  /*const autoScroll = useAutoScroll({ getScroll: () => refs.virtual?.refs.scroll, vertical: true, });*/
+
+  const autoScrollManager = createAutoScrollManager(() => refs.virtual?.refs.scroll);
 
   /*拖拽结束之后要清除的副作用*/
   const { effects: draggierEffects } = createEffects();
@@ -180,18 +183,18 @@ export function useTableDraggierRow(
 
       /*---------------------------------------初始化auto scroll-------------------------------------------*/
       /*自动滚动*/
-      if (refs.virtual?.refs.scroll?.refs.wrapper) {
+      /*if (refs.virtual?.refs.scroll?.refs.wrapper) {
         const { scrollHeight, offsetHeight } = refs.virtual.refs.scroll.refs.wrapper;
         if (scrollHeight > offsetHeight) {
           autoScroll.showHover();
           draggierEffects.push(() => {autoScroll.hideHover();});
         }
-      }
+      }*/
     };
 
     const start = (e: iMouseEvent, node: iTableNode) => {
       const { clientY } = !e ? { clientY: prevClientY } : ClientZoom.getClientPosition(e);
-      const rowEl = (Array.from(refs.el!.querySelectorAll(`.plt-row`)) as HTMLTableRowElement[]).find(i => i.dataset.vid == node.state.index.toString())!;
+      const rowEl = (Array.from(refs.el!.querySelectorAll(`.plt-row`)) as HTMLTableRowElement[]).find(i => i.dataset.idx == node.state.index.toString())!;
       const rowRect = rowEl.getBoundingClientRect();
       staticState = { startY: clientY, startTop: rowRect.top, node, rowEl, data: null, };
       /*清理状态*/
@@ -222,16 +225,25 @@ export function useTableDraggierRow(
       const durY = clientY - staticState.startY;
       let top = staticState.startTop + durY;
       const minTop = move.staticState!.bodyHostEl.getBoundingClientRect().top + (move.staticState!.headTableEl?.clientHeight || 0);
+      const hostRect = move.staticState!.bodyHostEl.getBoundingClientRect();
+      const maxTop = hostRect.top + hostRect.height - numberState.bodyRowHeight - (staticState.data!.summaryTable?.clientHeight || 0);
+
       if (top < minTop) {
         top = minTop;
       } else {
-        const hostRect = move.staticState!.bodyHostEl.getBoundingClientRect();
-        const maxTop = hostRect.top + hostRect.height - numberState.bodyRowHeight - (staticState.data!.summaryTable?.clientHeight || 0);
         if (top > maxTop) {
           top = maxTop;
         }
       }
 
+      if (top == minTop) {
+        autoScrollManager.set('top');
+      } else if (top == maxTop) {
+        autoScrollManager.set('bottom');
+      } else {
+        autoScrollManager.set(null);
+      }
+
       staticState.data!.cloneRowEl.style.top = `${top}px`;
       if (!!e) {
         prevClientY = clientY;

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

@@ -1,8 +1,8 @@
 import {iTableHooks} from "../utils/createTableHooks";
 import {iTableEventType, iTableNode, iTablePropsType} from "../utils/table.utils";
-import {findParentElement} from "../../../../utils/findParentElement";
-import {hasClass} from "plain-utils/dom/hasClass";
-import {designComponent, getComponentCls, iHTMLDivElement, iMouseEvent} from "plain-design-composition";
+import {findParentElement} from "@peryl/utils/findParentElement";
+import {hasClass} from "@peryl/utils/hasClass";
+import {designComponent, getComponentCls, iHTMLDivElement, iMouseEvent} from "@peryl/react-compose";
 import {Icon} from "../../../Icon";
 import {tPlcType} from "../../plc/utils/plc.utils";
 import {useTableDraggierRow} from "./useTableDraggier.row";

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

@@ -1,16 +1,16 @@
 import {iTableHooks} from "../utils/createTableHooks";
-import {computed, onBeforeUnmount, reactive, useRefs} from "plain-design-composition";
-import {createEffects} from "plain-utils/utils/createEffects";
+import {computed, onBeforeUnmount, reactive, useRefs} from "@peryl/react-compose";
+import {createEffects} from "@peryl/utils/createEffects";
 import {Dialog} from "../../../Dialog";
 import {Form} from "../../../Form";
 import {FormItem} from "../../../FormItem";
 import {iTableNode, iTablePropsType} from "../utils/table.utils";
-import {deepcopy} from "plain-utils/object/deepcopy";
+import {deepcopy} from "@peryl/utils/deepcopy";
 import {useCellValue} from "../body/useCellValue";
 import {PlcValidatePropsOption, tPlc} from "../../plc/utils/plc.utils";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 import {iTableMethods} from "./useTableMethods";
-import {pick} from "../../../../utils/pick";
+import {pick} from "@peryl/utils/pick";
 import i18n from "../../../i18n";
 
 export function useTableFormEditor(
@@ -53,10 +53,13 @@ export function useTableFormEditor(
    * @author  韦胜健
    * @date    2022/12/5 20:45
    */
+  const { effects: cellBodyArrayEffects } = createEffects();
+  effects.push(() => cellBodyArrayEffects.clear());
   const cellBodyArray = computed(() => {
+    cellBodyArrayEffects.clear();
     if (!state.optionGetter) {return [];}
     const { node } = state.optionGetter();
-    return showPlcArray.value.map(plc => useCellValue({ optionGetter: () => ({ plc, node }), formEdit: true }));
+    return showPlcArray.value.map(plc => useCellValue({ optionGetter: () => ({ plc, node }), formEdit: true, effects: cellBodyArrayEffects }));
   });
 
   const handler = {
@@ -104,45 +107,52 @@ export function useTableFormEditor(
             return (
               <Dialog
                 v-model={state.show}
-                title={title || i18n('base.edit.edit').d('编辑')}
+                title={title || i18n.$it('base.edit.edit').d('编辑')}
                 confirmButton
                 cancelButton
-                confirmButtonText={i18n('base.edit.save').d('保存')}
+                confirmButtonText={i18n.$it('base.edit.save').d('保存')}
                 handleConfirm={handler.handleConfirm}
                 handleCancel={handler.handleCancel}
                 position="right"
                 initialize
-              >
-                <Form
-                  rules={rules}
-                  ref={onRef.form}
-                  column={1}
-                  modelValue={node.state.editRow}
-                >
-                  {showPlcArray.value.map((plc, index) => {
-                    if (plc.props.editColSpan === 0) {
-                      return null;
-                    }
-                    const { bodyCell } = cellBodyArray.value[index];
-                    const { editable, body } = bodyCell.value();
-                    const validateAttrs = pick(plc.props, Object.keys(PlcValidatePropsOption) as (keyof typeof PlcValidatePropsOption)[]);
-                    return (
-                      <FormItem
-                        label={plc.props.formLabel || plc.props.title}
-                        field={plc.props.field}
-                        required={plc.props.required}
-                        rules={plc.props.rules}
-                        validator={plc.props.validator}
-                        key={index}
-                        disabled={!editable}
-                        {...validateAttrs}
-                      >
-                        {body}
-                      </FormItem>
-                    );
-                  })}
-                </Form>
-              </Dialog>
+                v-slots={{
+                  default: () => (
+                    <Form
+                      rules={rules}
+                      ref={onRef.form}
+                      column={1}
+                      modelValue={node.state.editRow}
+                      labelAlign="right"
+                      validateMessagePosition="bottom-left"
+                    >
+                      {showPlcArray.value.map((plc, index) => {
+                        if (plc.props.editColSpan === 0) {
+                          return null;
+                        }
+                        const { bodyCell } = cellBodyArray.value[index];
+                        const { editable, body } = bodyCell.value();
+                        const validateAttrs = pick(plc.props, Object.keys(PlcValidatePropsOption) as (keyof typeof PlcValidatePropsOption)[]);
+                        return (
+                          <FormItem
+                            key={index}
+                            label={plc.props.formLabel || plc.props.title}
+                            field={plc.props.field}
+                            required={plc.props.required}
+                            rules={plc.props.rules}
+                            validator={plc.props.validator}
+                            tip={plc.props.tip}
+                            disabled={!editable}
+                            {...validateAttrs}
+                          >
+                            {body}
+                          </FormItem>
+                        );
+                      })}
+                    </Form>
+                  ),
+                  foot: () => props.formEditorFootRender?.(node.state.editRow)
+                }}
+              />
             );
           },
         }));

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

@@ -1,5 +1,5 @@
-import {reactive} from "plain-design-composition";
-import {createCounter} from "plain-utils/utils/createCounter";
+import {reactive} from "@peryl/react-compose";
+import {createCounter} from "@peryl/utils/createCounter";
 import {iTableHooks} from "../utils/createTableHooks";
 import {LoadingMask} from "../../../LoadingMask";
 import {iTablePropsType} from "../utils/table.utils";