plain-design 1.0.0-beta.145 → 1.0.0-beta.147

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

@@ -1,310 +1,310 @@
-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";
-import {useEdit} from "../../../../uses/useEdit";
-import {ThemeStatus, useStyle} from "../../../../uses/useStyle";
-import {Table} from "../Table";
-import {iFormValidator} from "../../../Form/validate/createValidation";
-import {useCellValue} from "./useCellValue";
-import {createTooltip} from "../../../useTooltip";
-import {createEffects} from "@peryl/utils/createEffects";
-import {usePopup} from "../../../usePopup";
-import {injectTableAutoSpan} from "../../plc/use/useTableAutoSpan";
-
-export const PltCell = designComponent({
-  name: 'plt-cell',
-  props: {
-    table: { type: Object as PropType<typeof Table.use.class>, required: true },
-    node: { type: Object as PropType<iTableNode>, required: true },
-    plc: { type: Object as PropType<tPlc>, required: true },
-  },
-  setup({ props }) {
-
-    const { refs, onRef } = useRefs({ el: iHTMLElement });
-
-    const popup = usePopup();
-
-    const tableAutoSpan = injectTableAutoSpan();
-
-    /**
-     * 单元格校验
-     * @author  韦胜健
-     * @date    2022.12.3 20:14
-     */
-    useCellFormItemValidate(props, props.table.formValidator);
-
-    /**
-     * 处理单元格点击动作
-     * @author  韦胜健
-     * @date    2022.12.3 10:50
-     */
-    const onClick = (e: iMouseEvent) => {
-      if (bodyCell.value().editable) {return;}
-      props.table.hooks.onClickCell.exec({ e, node: props.node, plc: props.plc });
-      props.plc.event.emit.onClick({ e, scope: { row: props.node.data, node: props.node, plc: props.plc } });
-    };
-
-    /**
-     * 单元格双击动作
-     * @author  韦胜健
-     * @date    2023.1.24 9:57
-     */
-    const onDblclick = (e: iMouseEvent) => {
-      if (bodyCell.value().editable) {return;}
-      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  韦胜健
-     * @date    2023/5/8 10:23
-     */
-    const onEnter = (e: iMouseEvent) => {props.table.hooks.onEnterCell.exec({ e, node: props.node, plc: props.plc });};
-
-    /**
-     * 鼠标离开单元格
-     * @author  韦胜健
-     * @date    2023/5/8 10:23
-     */
-    const onLeave = (e: iMouseEvent) => {props.table.hooks.onLeaveCell.exec({ e, node: props.node, plc: props.plc });};
-
-    /**
-     * 单元格渲染内容
-     * @author  韦胜健
-     * @date    2022/12/5 20:35
-     */
-    const { effects: cellValueEffects } = createEffects();
-    onBeforeUnmount(() => cellValueEffects.clear());
-    const { bodyCell } = useCellValue({ optionGetter: () => ({ node: props.node, plc: props.plc }), formEdit: false, effects: cellValueEffects });
-
-    /**
-     * 单元格样式类名
-     * @author  韦胜健
-     * @date    2022/12/5 20:35
-     */
-    const classes = useClassCache(() => {
-      const ret = [
-        props.plc.classes.body,
-        props.plc.props.bodyCls,
-        'box-message-reference',
-        {
-          'plt-cell-editing': bodyCell.value().editable,
-          'plt-cell-link': props.plc.props.link,
-        }
-      ] as any[];
-      if (!!props.table.props.cellClassFunc) {
-        ret.push(props.table.props.cellClassFunc(props.node, props.plc));
-      }
-      return props.table.hooks.onCellClass.exec({ classes: ret, plc: props.plc, node: props.node }).classes;
-    });
-
-    /**
-     * 单元格行内样式
-     * @author  韦胜健
-     * @date    2022/12/5 20:36
-     */
-    const styles = useStyleCache(style => {
-      Object.assign(style, props.plc.styles.body);
-      /*if (style.position === 'sticky') {
-        /!*每一行的tr的zIndex都要比下一行的zIndex要大，不然box-message会被下一行的固定单元格遮盖*!/
-        style.zIndex = props.table.bodyNodes.value.length - 1 - props.node.state.index + 3;
-      }*/
-      if (!!props.table.props.cellStyleFunc) {
-        Object.assign(style, props.table.props.cellStyleFunc(props.node, props.plc));
-      }
-      return props.table.hooks.onCellStyle.exec({ styles: style, plc: props.plc, node: props.node }).styles;
-    });
-
-    /**
-     * 不能立即调用bodyCell.value，因为调用了插槽函数，必须得在render渲染函数上下文中执行
-     * @author  韦胜健
-     * @date    2023/1/19 15:50
-     */
-    const tooltip = (() => {
-      let init = false;
-      const { effects } = createEffects();
-      const update = (getBodyCell: () => ({ body: any, editable: boolean })) => {
-        if (init) {return;}
-        init = true;
-
-        /**
-         * overflow tooltip
-         * @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();
-            /*
-             * 没有开启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);
-
-        /**
-         * 校验tooltip
-         * @author  韦胜健
-         * @date    2023.1.20 14:01
-         */
-        const validateTooltip = createTooltip({
-          ignoreEmptyMessage: true,
-          tooltip: () => {
-            const validateResult = props.node.state.validateResultData?.find(i => i.field === props.plc.props.field || i.label === props.plc.props.title);
-            const bodyCell = getBodyCell();
-            return ({
-              size: 'mini',
-              reference: !bodyCell || !bodyCell.editable ? null : refs.el,
-              message: validateResult?.message,
-              status: 'error',
-              placement: 'bottom-start',
-              noArrow: true,
-            });
-          }
-        }, popup);
-        effects.push(validateTooltip.clear);
-      };
-
-      onBeforeUnmount(() => {effects.clear();});
-
-      return { update };
-    })();
-
-    /*每次渲染都记录上一次的span，某次渲染在offsetData中找不到自己的offsetIndex时，就用上一次的span*/
-    let prevSpan = { rowspan: 1, colspan: 1 };
-
-    return {
-      render: () => {
-        const { node, plc } = props;
-        const { body, editable } = bodyCell.value();
-        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;
-        }
-        /*第一次render的时候才初始化tooltip*/
-        (props.plc.props.overflowTooltip || editable) && tooltip.update(() => bodyCell.value());
-        /*检查用了useTooltip之后有没有影响cell的render次数*/
-        // !!props.plc.props.overflowTooltip && console.log(props.plc.props.title, 'render', body);
-        // 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}
-            className={classes.value}
-            style={styles.value}
-            onClick={onClick}
-            onDoubleClick={onDblclick}
-            onContextMenu={onContextmenu}
-            onMouseEnter={onEnter}
-            onMouseLeave={onLeave}
-          >
-            {body}
-          </td>
-        );
-      }
-    };
-  },
-});
-
-/**
- * 单元格校验
- * @author  韦胜健
- * @date    2022/12/5 20:36
- */
-function useCellFormItemValidate(props: { plc: tPlc, node: iTableNode }, formValidator: iFormValidator) {
-  const handler = {
-    validateChange: async (trigger: typeof eFormValidateTrigger.TYPE) => {
-      let { plc: { props: { field, title } }, node } = props;
-      const { state } = node;
-      if (!field) {return;}
-      await formValidator.methods.validateItem({
-        label: title,
-        field,
-        trigger,
-        state,
-        formData: state.editRow,
-      });
-    },
-    onEditChange: async () => {
-      await handler.validateChange(eFormValidateTrigger.change);
-    },
-    onEditBlur: async () => {
-      await handler.validateChange(eFormValidateTrigger.blur);
-    },
-  };
-  const isRequired = computed(() => props.plc.isRequired(props.node.state.editRow));
-  useEdit({
-    adjust: ret => {
-      ret.disabled = null;
-      ret.readonly = null;
-      ret.loading = null;
-      ret.onChange = handler.onEditChange;
-      ret.onBlur = handler.onEditBlur;
-    }
-  });
-  useStyle({
-    adjust: (ret) => {
-      const { node: { state: { validateResultData } }, plc: { props: { field, title } } } = props;
-      const { status } = ret;
-      const inValidError = (() => {
-        if (!validateResultData) {return false;}
-        const error = validateResultData.find(i => i.field === field || i.label === title);
-        return !!error;
-      })();
-      if (!status) {
-        if (inValidError) {
-          ret.status = ThemeStatus.error;
-        } else {
-          if (isRequired.value) {
-            ret.status = ThemeStatus.warn;
-          }
-        }
-      }
-      return ret;
-    }
-  });
-}
+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";
+import {useEdit} from "../../../../uses/useEdit";
+import {ThemeStatus, useStyle} from "../../../../uses/useStyle";
+import {Table} from "../Table";
+import {iFormValidator} from "../../../Form/validate/createValidation";
+import {useCellValue} from "./useCellValue";
+import {createTooltip} from "../../../useTooltip";
+import {createEffects} from "@peryl/utils/createEffects";
+import {usePopup} from "../../../usePopup";
+import {injectTableAutoSpan} from "../../plc/use/useTableAutoSpan";
+
+export const PltCell = designComponent({
+  name: 'plt-cell',
+  props: {
+    table: { type: Object as PropType<typeof Table.use.class>, required: true },
+    node: { type: Object as PropType<iTableNode>, required: true },
+    plc: { type: Object as PropType<tPlc>, required: true },
+  },
+  setup({ props }) {
+
+    const { refs, onRef } = useRefs({ el: iHTMLElement });
+
+    const popup = usePopup();
+
+    const tableAutoSpan = injectTableAutoSpan();
+
+    /**
+     * 单元格校验
+     * @author  韦胜健
+     * @date    2022.12.3 20:14
+     */
+    useCellFormItemValidate(props, props.table.formValidator);
+
+    /**
+     * 处理单元格点击动作
+     * @author  韦胜健
+     * @date    2022.12.3 10:50
+     */
+    const onClick = (e: iMouseEvent) => {
+      if (bodyCell.value().editable) {return;}
+      props.table.hooks.onClickCell.exec({ e, node: props.node, plc: props.plc });
+      props.plc.event.emit.onClick({ e, scope: { row: props.node.data, node: props.node, plc: props.plc } });
+    };
+
+    /**
+     * 单元格双击动作
+     * @author  韦胜健
+     * @date    2023.1.24 9:57
+     */
+    const onDblclick = (e: iMouseEvent) => {
+      if (bodyCell.value().editable) {return;}
+      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  韦胜健
+     * @date    2023/5/8 10:23
+     */
+    const onEnter = (e: iMouseEvent) => {props.table.hooks.onEnterCell.exec({ e, node: props.node, plc: props.plc });};
+
+    /**
+     * 鼠标离开单元格
+     * @author  韦胜健
+     * @date    2023/5/8 10:23
+     */
+    const onLeave = (e: iMouseEvent) => {props.table.hooks.onLeaveCell.exec({ e, node: props.node, plc: props.plc });};
+
+    /**
+     * 单元格渲染内容
+     * @author  韦胜健
+     * @date    2022/12/5 20:35
+     */
+    const { effects: cellValueEffects } = createEffects();
+    onBeforeUnmount(() => cellValueEffects.clear());
+    const { bodyCell } = useCellValue({ optionGetter: () => ({ node: props.node, plc: props.plc }), formEdit: false, effects: cellValueEffects });
+
+    /**
+     * 单元格样式类名
+     * @author  韦胜健
+     * @date    2022/12/5 20:35
+     */
+    const classes = useClassCache(() => {
+      const ret = [
+        props.plc.classes.body,
+        props.plc.props.bodyCls,
+        'box-message-reference',
+        {
+          'plt-cell-editing': bodyCell.value().editable,
+          'plt-cell-link': props.plc.props.link,
+        }
+      ] as any[];
+      if (!!props.table.props.cellClassFunc) {
+        ret.push(props.table.props.cellClassFunc(props.node, props.plc));
+      }
+      return props.table.hooks.onCellClass.exec({ classes: ret, plc: props.plc, node: props.node }).classes;
+    });
+
+    /**
+     * 单元格行内样式
+     * @author  韦胜健
+     * @date    2022/12/5 20:36
+     */
+    const styles = useStyleCache(style => {
+      Object.assign(style, props.plc.styles.body);
+      /*if (style.position === 'sticky') {
+        /!*每一行的tr的zIndex都要比下一行的zIndex要大，不然box-message会被下一行的固定单元格遮盖*!/
+        style.zIndex = props.table.bodyNodes.value.length - 1 - props.node.state.index + 3;
+      }*/
+      if (!!props.table.props.cellStyleFunc) {
+        Object.assign(style, props.table.props.cellStyleFunc(props.node, props.plc));
+      }
+      return props.table.hooks.onCellStyle.exec({ styles: style, plc: props.plc, node: props.node }).styles;
+    });
+
+    /**
+     * 不能立即调用bodyCell.value，因为调用了插槽函数，必须得在render渲染函数上下文中执行
+     * @author  韦胜健
+     * @date    2023/1/19 15:50
+     */
+    const tooltip = (() => {
+      let init = false;
+      const { effects } = createEffects();
+      const update = (getBodyCell: () => ({ body: any, editable: boolean })) => {
+        if (init) {return;}
+        init = true;
+
+        /**
+         * overflow tooltip
+         * @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();
+            /*
+             * 没有开启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);
+
+        /**
+         * 校验tooltip
+         * @author  韦胜健
+         * @date    2023.1.20 14:01
+         */
+        const validateTooltip = createTooltip({
+          ignoreEmptyMessage: true,
+          tooltip: () => {
+            const validateResult = props.node.state.validateResultData?.find(i => i.field === props.plc.props.field || i.label === props.plc.props.title);
+            const bodyCell = getBodyCell();
+            return ({
+              size: 'mini',
+              reference: !bodyCell || !bodyCell.editable ? null : refs.el,
+              message: validateResult?.message,
+              status: 'error',
+              placement: 'bottom-start',
+              noArrow: true,
+            });
+          }
+        }, popup);
+        effects.push(validateTooltip.clear);
+      };
+
+      onBeforeUnmount(() => {effects.clear();});
+
+      return { update };
+    })();
+
+    /*每次渲染都记录上一次的span，某次渲染在offsetData中找不到自己的offsetIndex时，就用上一次的span*/
+    let prevSpan = { rowspan: 1, colspan: 1 };
+
+    return {
+      render: () => {
+        const { node, plc } = props;
+        const { body, editable } = bodyCell.value();
+        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;
+        }
+        /*第一次render的时候才初始化tooltip*/
+        (props.plc.props.overflowTooltip || editable) && tooltip.update(() => bodyCell.value());
+        /*检查用了useTooltip之后有没有影响cell的render次数*/
+        // !!props.plc.props.overflowTooltip && console.log(props.plc.props.title, 'render', body);
+        // 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}
+            className={classes.value}
+            style={styles.value}
+            onClick={onClick}
+            onDoubleClick={onDblclick}
+            onContextMenu={onContextmenu}
+            onMouseEnter={onEnter}
+            onMouseLeave={onLeave}
+          >
+            {body}
+          </td>
+        );
+      }
+    };
+  },
+});
+
+/**
+ * 单元格校验
+ * @author  韦胜健
+ * @date    2022/12/5 20:36
+ */
+function useCellFormItemValidate(props: { plc: tPlc, node: iTableNode }, formValidator: iFormValidator) {
+  const handler = {
+    validateChange: async (trigger: typeof eFormValidateTrigger.TYPE) => {
+      let { plc: { props: { field, title } }, node } = props;
+      const { state } = node;
+      if (!field) {return;}
+      await formValidator.methods.validateItem({
+        label: title,
+        field,
+        trigger,
+        state,
+        formData: state.editRow,
+      });
+    },
+    onEditChange: async () => {
+      await handler.validateChange(eFormValidateTrigger.change);
+    },
+    onEditBlur: async () => {
+      await handler.validateChange(eFormValidateTrigger.blur);
+    },
+  };
+  const isRequired = computed(() => props.plc.isRequired(props.node.state.editRow));
+  useEdit({
+    adjust: ret => {
+      ret.disabled = null;
+      ret.readonly = null;
+      ret.loading = null;
+      ret.onChange = handler.onEditChange;
+      ret.onBlur = handler.onEditBlur;
+    }
+  });
+  useStyle({
+    adjust: (ret) => {
+      const { node: { state: { validateResultData } }, plc: { props: { field, title } } } = props;
+      const { status } = ret;
+      const inValidError = (() => {
+        if (!validateResultData) {return false;}
+        const error = validateResultData.find(i => i.field === field || i.label === title);
+        return !!error;
+      })();
+      if (!status) {
+        if (inValidError) {
+          ret.status = ThemeStatus.error;
+        } else {
+          if (isRequired.value) {
+            ret.status = ThemeStatus.warn;
+          }
+        }
+      }
+      return ret;
+    }
+  });
+}