plain-design 1.0.0-beta.71 → 1.0.0-beta.73

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

@@ -1,78 +1,78 @@
-import {iTableCellRenderScope} from "../../table/utils/table.utils";
-import {useStyles} from "plain-design-composition";
-import {unit} from "plain-utils/string/unit";
-import {DropdownOption} from "../../../DropdownOption";
-import {iTreeCore} from "../../../TreeCore/createTreeCore";
-import {iPlcTreePropsType, iPlcTreeScopeSlotsType, PlcTreeButtonSize} from "./PlcTree.utils";
-import {RenderPlcTreeNode} from "./RenderPlcTreeNode";
-import {iTableRefer} from "../../table/Table";
-import {tPlcType} from "../../plc/utils/plc.utils";
-import {PlcTreeHeader} from "./PlcTreeHeader";
-import i18n from "../../../i18n";
-
-export function usePlcTreeRenderNode(
-  {
-    treeCore,
-    props,
-    scopeSlots,
-    table,
-    getPlcRefer,
-  }: {
-    treeCore: iTreeCore,
-    props: iPlcTreePropsType,
-    scopeSlots: iPlcTreeScopeSlotsType,
-    table: iTableRefer,
-    getPlcRefer: () => tPlcType,
-  }
-) {
-
-
-  const buttonStyles = useStyles(styles => {
-    styles.width = unit(PlcTreeButtonSize);
-    styles.height = unit(PlcTreeButtonSize);
-  });
-
-  /**
-   * 渲染列标题
-   * @author  韦胜健
-   * @date    2022.11.21 11:43
-   */
-  const renderTreeHead = () => (
-    <>
-      <PlcTreeHeader table={table} buttonStyles={buttonStyles.value} getPlcRefer={getPlcRefer}>
-        <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.$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}
-    </>
-  );
-
-  /**
-   * 渲染节点内容
-   * @author  韦胜健
-   * @date    2022.11.21 11:43
-   */
-  const renderTreeNode = (renderScope: iTableCellRenderScope) => {
-    const treeNode = treeCore.flatNodeComputedData.value[renderScope.node.state.index];
-    return (
-      <RenderPlcTreeNode
-        treeCore={treeCore}
-        treeNode={treeNode}
-        scopeSlots={scopeSlots}
-        tableNode={renderScope.node}
-        row={renderScope.row}
-        plc={renderScope.plc}
-        buttonStyles={buttonStyles.value}
-      />
-    );
-  };
-
-  return {
-    renderTreeHead,
-    renderTreeNode,
-  };
-}
+import {iTableCellRenderScope} from "../../table/utils/table.utils";
+import {useStyles} from "plain-design-composition";
+import {unit} from "plain-utils/string/unit";
+import {DropdownOption} from "../../../DropdownOption";
+import {iTreeCore} from "../../../TreeCore/createTreeCore";
+import {iPlcTreePropsType, iPlcTreeScopeSlotsType, PlcTreeButtonSize} from "./PlcTree.utils";
+import {RenderPlcTreeNode} from "./RenderPlcTreeNode";
+import {iTableRefer} from "../../table/Table";
+import {tPlcType} from "../../plc/utils/plc.utils";
+import {PlcTreeHeader} from "./PlcTreeHeader";
+import i18n from "../../../i18n";
+
+export function usePlcTreeRenderNode(
+  {
+    treeCore,
+    props,
+    scopeSlots,
+    table,
+    getPlcRefer,
+  }: {
+    treeCore: iTreeCore,
+    props: iPlcTreePropsType,
+    scopeSlots: iPlcTreeScopeSlotsType,
+    table: iTableRefer,
+    getPlcRefer: () => tPlcType,
+  }
+) {
+
+
+  const buttonStyles = useStyles(styles => {
+    styles.width = unit(PlcTreeButtonSize);
+    styles.height = unit(PlcTreeButtonSize);
+  });
+
+  /**
+   * 渲染列标题
+   * @author  韦胜健
+   * @date    2022.11.21 11:43
+   */
+  const renderTreeHead = () => (
+    <>
+      <PlcTreeHeader table={table} buttonStyles={buttonStyles.value} getPlcRefer={getPlcRefer}>
+        <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.$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}
+    </>
+  );
+
+  /**
+   * 渲染节点内容
+   * @author  韦胜健
+   * @date    2022.11.21 11:43
+   */
+  const renderTreeNode = (renderScope: iTableCellRenderScope) => {
+    const treeNode = treeCore.flatNodeComputedData.value[renderScope.node.state.index];
+    return (
+      <RenderPlcTreeNode
+        treeCore={treeCore}
+        treeNode={treeNode}
+        scopeSlots={scopeSlots}
+        tableNode={renderScope.node}
+        row={renderScope.row}
+        plc={renderScope.plc}
+        buttonStyles={buttonStyles.value}
+      />
+    );
+  };
+
+  return {
+    renderTreeHead,
+    renderTreeNode,
+  };
+}

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

@@ -1,194 +1,194 @@
-import {computed, designComponent, iMouseEvent, onBeforeUnmount, onMounted, SimpleFunction, watch} from "plain-design-composition";
-import {TreeEmitOptions} from "../../../TreeCore/createTreeProps";
-import {PlcEmitsOptions} from "../../plc/utils/plc.utils";
-import {usePlc} from "../../plc/use/usePlc";
-import {createTreeCore} from "../../../TreeCore/createTreeCore";
-import {injectPlainTable} from "../../table/Table";
-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 {iTableNode} from "../../table/utils/table.utils";
-import {findParentElement} from "plain-utils/dom/findParentElement";
-import {hasClass} from "plain-utils/dom/hasClass";
-
-export const PlcTree = designComponent({
-  name: 'plc-tree',
-  props: PlcTreePropsOptions,
-  emits: {
-    ...PlcEmitsOptions,
-    ...TreeEmitOptions,
-  },
-  scopeSlots: PlcTreeScopeSlotsOptions,
-  setup({ props, event, slots, scopeSlots }) {
-
-    const { effects } = createEffects();
-
-    /**
-     * 父组件表格组合对象
-     * @author  韦胜健
-     * @date    2022.11.19 13:33
-     */
-    const table = injectPlainTable();
-
-    /**
-     * 树属性
-     * @author  韦胜健
-     * @date    2022.11.19 13:33
-     */
-    const treeProps = new Proxy(props, {
-      get(target: any, key) {
-        if (key === 'labelField') {return target.field;}
-        if (key === 'width') {return width.value;}
-        return target[key];
-      },
-    }) as typeof props & { labelField: string };
-
-    /**
-     * 树组合对象
-     * @author  韦胜健
-     * @date    2022.11.19 13:34
-     */
-    const treeCore = createTreeCore({
-      props: treeProps,
-      event,
-      ignoreEmpty: true,
-      draggable: {
-        rowClass: 'plt-row',
-        contentClass: 'tree-node-content',
-      }
-    });
-
-    /**
-     * 自动开启Table的加载状态
-     * @author  韦胜健
-     * @date    2023.1.25 23:35
-     */
-    let closeLoading: SimpleFunction | null = null;
-    watch(() => treeCore.isLoading.isLoading, val => {
-      closeLoading?.();
-      !!val && (closeLoading = table.tableLoading.loading());
-    });
-
-    effects.push(() => {treeCore.dispose();});
-
-    /**
-     * 去掉空的节点数据
-     * @author  韦胜健
-     * @date    2022.11.19 23:11
-     */
-    const treeNodes = computed(() => treeCore.flatNodeComputedData.value.filter(i => !i.empty));
-
-    /**
-     * 自动宽度
-     * @author  韦胜健
-     * @date    2022.11.19 22:58
-     */
-    const { width } = usePlcTreeAutoWidth({ props, treeCore, scopeSlots });
-
-    /**
-     * 拦截渲染的数据
-     * @author  韦胜健
-     * @date    2022.11.19 13:34
-     */
-    effects.push(table.hooks.onData.use(() => {return { data: treeNodes.value.map(i => i.data) };}));
-
-    /**
-     * 拦截处理行样式
-     * @author  韦胜健
-     * @date    2022.11.21 17:13
-     */
-    effects.push(table.hooks.onRowClass.use(({ node, classList }) => {
-      const treeNode = treeCore.flatNodeComputedData.value[node.state.index];
-      if (!treeNode) {return;}
-      if (props.multiple || props.singleValueType === 'all') {
-        if (treeNode.checkStatus() === CheckboxStatus.check) {
-          classList.push('plt-row-checked');
-        }
-      } else {
-        if (treeCore.state.current === treeNode.key) {
-          classList.push('plt-row-checked');
-        }
-      }
-    }));
-
-    /**
-     * 点击行保存当前选中节点
-     * @author  韦胜健
-     * @date    2022.11.22 22:53
-     */
-    effects.push(table.hooks.onClickRow.use(({ node, e }) => {
-      /*点击了图标，不触发onClickNodeContent钩子*/
-      const tagName = (e as any).target.tagName;
-      if (tagName === 'svg' || tagName === 'path') {return;}
-      const operatorEl = findParentElement(e.target as any, parent => hasClass(parent, 'tree-node-operator'));
-      // console.log(operatorEl, e.target);
-      /*点击了operator，不做任何处理*/
-      if (!!operatorEl) {return;}
-
-      const treeNode = treeNodes.value[node.state.index];
-      treeCore.hooks.onClickNodeContent.exec({ treeNode, el: e.currentTarget as HTMLElement });
-    }));
-
-    /**
-     * 将scroll的引用传递给treeCore
-     * @author  韦胜健
-     * @date    2022.11.27 14:13
-     */
-    effects.push(table.hooks.onRefVirtual.use(({ virtual }) => {treeCore.onRef.scroll(virtual?.refs.scroll);}));
-
-    /**
-     * 渲染树标题以及节点
-     * @author  韦胜健
-     * @date    2022.11.19 20:32
-     */
-    const renderTree = usePlcTreeRenderNode({
-      treeCore,
-      props,
-      scopeSlots,
-      table,
-      getPlcRefer: () => refer.refer(),
-    });
-
-    const onMousemoveRow = computed(() => !treeCore.draggier.value || !treeCore.draggier.value.onMousemoveRow ? undefined : (e: iMouseEvent, node: iTableNode) => {
-      treeCore.draggier.value!.onMousemoveRow!(e, treeNodes.value[node.state.index]);
-    });
-
-    effects.push(table.hooks.onMousemoveRow.use(({ e, node }) => {onMousemoveRow.value?.(e, node);}));
-
-    /**
-     * 默认展开逻辑
-     * @author  韦胜健
-     * @date    2022.11.25 20:13
-     */
-    onMounted(() => {
-      !!props.defaultExpandAll && treeCore.methods.expandAll();
-      treeCore.hooks.onMounted.exec(undefined);
-    });
-
-    onBeforeUnmount(() => effects.clear());
-
-    const { refer, render } = usePlc({
-      props: treeProps,
-      event,
-      scopeSlots,
-      slots,
-      defaultScopeSlots: {
-        head: () => renderTree.renderTreeHead(),
-        normal: (renderScope) => renderTree.renderTreeNode(renderScope),
-        summary: () => '',
-      },
-      externalRefer: {
-        tree: treeCore, methods: treeCore.methods, getTreeNodes: () => treeNodes.value
-      },
-    });
-
-    if (refer.isExclude()) {effects.clear();}
-
-    return {
-      refer,
-      render
-    };
-  },
-});
+import {computed, designComponent, iMouseEvent, onBeforeUnmount, onMounted, SimpleFunction, watch} from "plain-design-composition";
+import {TreeEmitOptions} from "../../../TreeCore/createTreeProps";
+import {PlcEmitsOptions} from "../../plc/utils/plc.utils";
+import {usePlc} from "../../plc/use/usePlc";
+import {createTreeCore} from "../../../TreeCore/createTreeCore";
+import {injectPlainTable} from "../../table/Table";
+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 {iTableNode} from "../../table/utils/table.utils";
+import {findParentElement} from "plain-utils/dom/findParentElement";
+import {hasClass} from "plain-utils/dom/hasClass";
+
+export const PlcTree = designComponent({
+  name: 'plc-tree',
+  props: PlcTreePropsOptions,
+  emits: {
+    ...PlcEmitsOptions,
+    ...TreeEmitOptions,
+  },
+  scopeSlots: PlcTreeScopeSlotsOptions,
+  setup({ props, event, slots, scopeSlots }) {
+
+    const { effects } = createEffects();
+
+    /**
+     * 父组件表格组合对象
+     * @author  韦胜健
+     * @date    2022.11.19 13:33
+     */
+    const table = injectPlainTable();
+
+    /**
+     * 树属性
+     * @author  韦胜健
+     * @date    2022.11.19 13:33
+     */
+    const treeProps = new Proxy(props, {
+      get(target: any, key) {
+        if (key === 'labelField') {return target.field;}
+        if (key === 'width') {return width.value;}
+        return target[key];
+      },
+    }) as typeof props & { labelField: string };
+
+    /**
+     * 树组合对象
+     * @author  韦胜健
+     * @date    2022.11.19 13:34
+     */
+    const treeCore = createTreeCore({
+      props: treeProps,
+      event,
+      ignoreEmpty: true,
+      draggable: {
+        rowClass: 'plt-row',
+        contentClass: 'tree-node-content',
+      }
+    });
+
+    /**
+     * 自动开启Table的加载状态
+     * @author  韦胜健
+     * @date    2023.1.25 23:35
+     */
+    let closeLoading: SimpleFunction | null = null;
+    watch(() => treeCore.isLoading.isLoading, val => {
+      closeLoading?.();
+      !!val && (closeLoading = table.tableLoading.loading());
+    });
+
+    effects.push(() => {treeCore.dispose();});
+
+    /**
+     * 去掉空的节点数据
+     * @author  韦胜健
+     * @date    2022.11.19 23:11
+     */
+    const treeNodes = computed(() => treeCore.flatNodeComputedData.value.filter(i => !i.empty));
+
+    /**
+     * 自动宽度
+     * @author  韦胜健
+     * @date    2022.11.19 22:58
+     */
+    const { width } = usePlcTreeAutoWidth({ props, treeCore, scopeSlots });
+
+    /**
+     * 拦截渲染的数据
+     * @author  韦胜健
+     * @date    2022.11.19 13:34
+     */
+    effects.push(table.hooks.onData.use(() => {return { data: treeNodes.value.map(i => i.data) };}));
+
+    /**
+     * 拦截处理行样式
+     * @author  韦胜健
+     * @date    2022.11.21 17:13
+     */
+    effects.push(table.hooks.onRowClass.use(({ node, classList }) => {
+      const treeNode = treeCore.flatNodeComputedData.value[node.state.index];
+      if (!treeNode) {return;}
+      if (props.multiple || props.singleValueType === 'all') {
+        if (treeNode.checkStatus() === CheckboxStatus.check) {
+          classList.push('plt-row-checked');
+        }
+      } else {
+        if (treeCore.state.current === treeNode.key) {
+          classList.push('plt-row-checked');
+        }
+      }
+    }));
+
+    /**
+     * 点击行保存当前选中节点
+     * @author  韦胜健
+     * @date    2022.11.22 22:53
+     */
+    effects.push(table.hooks.onClickRow.use(({ node, e }) => {
+      /*点击了图标，不触发onClickNodeContent钩子*/
+      const tagName = (e as any).target.tagName;
+      if (tagName === 'svg' || tagName === 'path') {return;}
+      const operatorEl = findParentElement(e.target as any, parent => hasClass(parent, 'tree-node-operator'));
+      // console.log(operatorEl, e.target);
+      /*点击了operator，不做任何处理*/
+      if (!!operatorEl) {return;}
+
+      const treeNode = treeNodes.value[node.state.index];
+      treeCore.hooks.onClickNodeContent.exec({ treeNode, el: e.currentTarget as HTMLElement });
+    }));
+
+    /**
+     * 将scroll的引用传递给treeCore
+     * @author  韦胜健
+     * @date    2022.11.27 14:13
+     */
+    effects.push(table.hooks.onRefVirtual.use(({ virtual }) => {treeCore.onRef.scroll(virtual?.refs.scroll);}));
+
+    /**
+     * 渲染树标题以及节点
+     * @author  韦胜健
+     * @date    2022.11.19 20:32
+     */
+    const renderTree = usePlcTreeRenderNode({
+      treeCore,
+      props,
+      scopeSlots,
+      table,
+      getPlcRefer: () => refer.refer(),
+    });
+
+    const onMousemoveRow = computed(() => !treeCore.draggier.value || !treeCore.draggier.value.onMousemoveRow ? undefined : (e: iMouseEvent, node: iTableNode) => {
+      treeCore.draggier.value!.onMousemoveRow!(e, treeNodes.value[node.state.index]);
+    });
+
+    effects.push(table.hooks.onMousemoveRow.use(({ e, node }) => {onMousemoveRow.value?.(e, node);}));
+
+    /**
+     * 默认展开逻辑
+     * @author  韦胜健
+     * @date    2022.11.25 20:13
+     */
+    onMounted(() => {
+      !!props.defaultExpandAll && treeCore.methods.expandAll();
+      treeCore.hooks.onMounted.exec(undefined);
+    });
+
+    onBeforeUnmount(() => effects.clear());
+
+    const { refer, render } = usePlc({
+      props: treeProps,
+      event,
+      scopeSlots,
+      slots,
+      defaultScopeSlots: {
+        head: () => renderTree.renderTreeHead(),
+        normal: (renderScope) => renderTree.renderTreeNode(renderScope),
+        summary: () => '',
+      },
+      externalRefer: {
+        tree: treeCore, methods: treeCore.methods, getTreeNodes: () => treeNodes.value
+      },
+    });
+
+    if (refer.isExclude()) {effects.clear();}
+
+    return {
+      refer,
+      render
+    };
+  },
+});

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

@@ -1,59 +1,59 @@
-import {ExtractPropTypes, PropType, tScopeSlotsType} from "plain-design-composition";
-import {omit} from "plain-utils/object/omit";
-import {TreePropsOptions} from "../../../TreeCore/createTreeProps";
-import {createPlcPropOptions} from "../../plc/utils/plc.utils";
-import {PlcScopeSlotsOptions} from "../../plc/utils/plc.scope-slots";
-import {iTableNode} from "../../table/utils/table.utils";
-import {iTreeNode} from "../../../TreeCore/createTreeNode";
-import {iTreeProps} from "../../../TreeCore/TreeCore.type";
-
-/**
- * 树列每个按钮的宽度
- * @author  韦胜健
- * @date    2022.11.19 19:12
- */
-export const PlcTreeButtonSize = 20;
-
-/**
- * 数列属性配置
- * @author  韦胜健
- * @date    2022.11.19 19:13
- */
-export const PlcTreePropsOptions = {
-  modelValue: {},                                       // 选中数据绑定值
-  expand: { type: Array as PropType<string[]> },        // 展开绑定值
-  contentWidth: { type: Number, default: 120 },         // 内容文本宽度
-  ...omit(TreePropsOptions, ['labelField', 'singleValueType']),            // 继承树属性，使用列的field来代替labelField
-  singleValueType: { type: String as PropType<iTreeProps['singleValueType']>, default: 'last' },
-  ...createPlcPropOptions({
-    autoFixedLeft: true,
-    order: -9994,
-    hideInForm: true,
-    width: null as any,
-    disableAutoEmitClickTitle: true,
-  })
-};
-
-/**
- * 树列作用域插槽配置
- * @author  韦胜健
- * @date    2022.11.20 15:24
- */
-export const PlcTreeScopeSlotsOptions = {
-  ...PlcScopeSlotsOptions,
-  content: (scope: { tableNode: iTableNode, treeNode: iTreeNode }) => {},
-};
-
-/**
- * 树列作用域插槽函数类型
- * @author  韦胜健
- * @date    2022.11.20 15:27
- */
-export type iPlcTreeScopeSlotsType = tScopeSlotsType<typeof PlcTreeScopeSlotsOptions>
-
-/**
- * 树列属性类型
- * @author  韦胜健
- * @date    2022.11.19 21:47
- */
-export type iPlcTreePropsType = ExtractPropTypes<typeof PlcTreePropsOptions>
+import {ExtractPropTypes, PropType, tScopeSlotsType} from "plain-design-composition";
+import {omit} from "plain-utils/object/omit";
+import {TreePropsOptions} from "../../../TreeCore/createTreeProps";
+import {createPlcPropOptions} from "../../plc/utils/plc.utils";
+import {PlcScopeSlotsOptions} from "../../plc/utils/plc.scope-slots";
+import {iTableNode} from "../../table/utils/table.utils";
+import {iTreeNode} from "../../../TreeCore/createTreeNode";
+import {iTreeProps} from "../../../TreeCore/TreeCore.type";
+
+/**
+ * 树列每个按钮的宽度
+ * @author  韦胜健
+ * @date    2022.11.19 19:12
+ */
+export const PlcTreeButtonSize = 20;
+
+/**
+ * 数列属性配置
+ * @author  韦胜健
+ * @date    2022.11.19 19:13
+ */
+export const PlcTreePropsOptions = {
+  modelValue: {},                                       // 选中数据绑定值
+  expand: { type: Array as PropType<string[]> },        // 展开绑定值
+  contentWidth: { type: Number, default: 120 },         // 内容文本宽度
+  ...omit(TreePropsOptions, ['labelField', 'singleValueType']),            // 继承树属性，使用列的field来代替labelField
+  singleValueType: { type: String as PropType<iTreeProps['singleValueType']>, default: 'last' },
+  ...createPlcPropOptions({
+    autoFixedLeft: true,
+    order: -9994,
+    hideInForm: true,
+    width: null as any,
+    disableAutoEmitClickTitle: true,
+  })
+};
+
+/**
+ * 树列作用域插槽配置
+ * @author  韦胜健
+ * @date    2022.11.20 15:24
+ */
+export const PlcTreeScopeSlotsOptions = {
+  ...PlcScopeSlotsOptions,
+  content: (scope: { tableNode: iTableNode, treeNode: iTreeNode }) => {},
+};
+
+/**
+ * 树列作用域插槽函数类型
+ * @author  韦胜健
+ * @date    2022.11.20 15:27
+ */
+export type iPlcTreeScopeSlotsType = tScopeSlotsType<typeof PlcTreeScopeSlotsOptions>
+
+/**
+ * 树列属性类型
+ * @author  韦胜健
+ * @date    2022.11.19 21:47
+ */
+export type iPlcTreePropsType = ExtractPropTypes<typeof PlcTreePropsOptions>