aldehyde 0.2.480 → 0.2.481

package/src/aldehyde/tree/tmpl-tree.tsx

@@ -1,751 +1,751 @@
-import React from "react";
-import {
-  Button,
-  Card,
-  Col,
-  Input,
-  Popconfirm,
-  Popover,
-  Row,
-  Space,
-  Tag,
-  Tooltip,
-  Tree,
-} from "antd";
-import {
-  AlignLeftOutlined,
-  DeleteOutlined,
-  EditOutlined,
-  PlusOutlined,
-  PlusSquareOutlined,
-  ReloadOutlined, SyncOutlined,
-} from "@ant-design/icons";
-
-import Scrollbars from "react-custom-scrollbars";
-import { HydrocarbonService } from "../index";
-import TreeUtils, { TtmplNodeConfig } from "./tree-utils";
-import { TreeDataNode } from "./tree-utils";
-import { LocaleContext } from "../locale/LocaleProvider";
-
-// 查找第一个叶子节点，用于默认选中使用;存在code,则查找等于code的节点
-const findFirstLeaf = (tree, code?: string) => {
-  if (!Array.isArray(tree)) return null;
-  const dfs = (nodes) => {
-    for (const node of nodes) {
-      if (code ? node?.code === code : node?.isLeaf === true) {
-        return node;
-      }
-      if (Array.isArray(node?.children)) {
-        const found = dfs(node.children);
-        if (found) return found;
-      }
-    }
-    return null;
-  }
-  return dfs(tree);
-}
-
-interface TmplTreeProps {
-  showFilterInput?: boolean;
-  ttmplNodeConfig: TtmplNodeConfig;
-  checkable: boolean,
-  onChangeCheck?: (checkCodes: string[]) => any,
-  currentId?: string,
-  checkedCodes?: string[],
-  doEditSub?: (
-    title: string,
-    ratmplId: string,
-    mainCode: string,
-    code?: string
-  ) => void;
-  doViewSub?: (
-    title: string,
-    ratmplId: string,
-    mainCode: string,
-    code?: string
-  ) => void;
-  doEditRoot?: (title: string, code?: string) => void;
-  doViewRoot?: (title: string, code?: string) => void;
-  doDelete?: (ratmplId: string, code?: string) => void;
-  doAddSub?: (
-    title: string,
-    ratmplId: string,
-    mainCode: string,
-    addTmplId: string
-  ) => void;
-  onClickNode?: (dataNode: TreeDataNode) => void;
-  defExpandedRoot?: boolean; // 默认展开根节点
-  defSelect?: boolean; // 默认选中节点
-}
-
-interface TmplTreeState {
-  data?: TreeDataNode[];
-  expandedKeys?: string[];
-  loadedKeys?: string[];
-  loading?: boolean;
-  drawMainCode?: string;
-  // currentEditKey?: string;
-  parentNodeData?: TreeDataNode;
-  currentNodeData?: TreeDataNode;
-  rootAddable?: boolean;
-  searchValue?: string;
-  checkedKeys?: string[];
-  nodeClickLoading?: boolean;
-}
-
-class TmplTree extends React.PureComponent<TmplTreeProps, TmplTreeState> {
-  state = {
-    data: [],
-    expandedKeys: [],
-    loadedKeys: [],
-    loading: false,
-    parentNodeData: undefined,
-    currentNodeData: undefined,
-    rootAddable: false,
-    searchValue: undefined,
-    checkedKeys: undefined,
-    nodeClickLoading: false,
-  };
-
-
-  static defaultProps = {
-    draggable: false,
-    readOnly: false,
-    checkable: true,
-    showFilterInput: true,
-    defExpandedRoot: false,
-    defSelect: false,
-  };
-  static contextType = LocaleContext;
-  context: React.ContextType<typeof LocaleContext>;
-
-  reloadData = async (mainCode, currentCode?: string) => {
-    let { ttmplNodeConfig } = this.props;
-    const { data, expandedKeys } = this.state;
-    let v = await TreeUtils.reloadData(mainCode, ttmplNodeConfig, data, expandedKeys);
-    this.setState({ ...v });
-    if (currentCode) {
-      const current = TreeUtils.getNodesOfArrayNode(v.data, [currentCode])?.[0];
-      this.onClickNode(current || v.data[0]);
-    }
-  }
-
-
-  doDelete = async (node: TreeDataNode) => {
-    let { ttmplNodeConfig } = this.props;
-    const { data, expandedKeys } = this.state;
-    let sourceId;
-    if (node.isLeaf) {
-      sourceId = ttmplNodeConfig.leafRatmplId;
-    } else {
-      sourceId = ttmplNodeConfig.branchRatmplId ? ttmplNodeConfig.branchRatmplId : ttmplNodeConfig.rootLTmplConfig;
-    }
-    let res = await HydrocarbonService.deleteByCode(null, sourceId, [
-      node.code,
-    ]);
-    if (node.parent) {
-      let v = await TreeUtils.reloadData(node.parent.code, ttmplNodeConfig, data, expandedKeys);
-      this.setState({ ...v });
-      this.onClickNode(node.parent);
-    } else {
-      let v = await TreeUtils.reloadData(null, ttmplNodeConfig, data, expandedKeys);
-      this.setState({ ...v });
-      this.onClickNode(v.data[0]);
-    }
-  };
-
-  async componentDidMount() {
-    await this.refresh();
-  }
-
-  async componentDidUpdate(prevProps) {
-    let { ttmplNodeConfig: preTtmplNodeConfig } = prevProps;
-    let { ttmplNodeConfig, currentId } = this.props;
-
-    if (
-      !ttmplNodeConfig ||
-      (preTtmplNodeConfig && ttmplNodeConfig.id == preTtmplNodeConfig.id)
-    ) {
-      if (currentId && (prevProps?.currentId !== currentId)) {
-        const curNode = findFirstLeaf(this.state.data, currentId);
-        if (curNode) this.onClickNode(curNode);
-      }
-      return;
-    }
-    await this.refresh();
-  }
-
-  async refresh() {
-    const { ttmplNodeConfig, defExpandedRoot, defSelect, currentId } = this.props;
-    if (!ttmplNodeConfig) {
-      return;
-    }
-    this.setState({
-      loading: true,
-    });
-    //let loadedKeys = [];
-    let data = await TreeUtils.loadRootNodeData(ttmplNodeConfig);
-    this.setState({
-      searchValue: null,
-      data,
-      rootAddable:
-        ttmplNodeConfig.rootLTmplConfig?.buttons?.indexOf("dtmplAdd") > 0,
-      loading: false,
-      expandedKeys: []
-    }, async () => { // 页面闪烁异常处理，更新后立即使用state
-      if (defExpandedRoot) { // 默认展开所有根节点
-        const temData = this.state.data;
-        const temExpandedKeys = temData.map(r => r.key);
-        for (let index = 0; index < temData.length; index++) {
-          const r = temData[index];
-          await this.onExpand(temExpandedKeys, { expanded: true, node: r });
-        }
-      }
-      if (defSelect && !this.state.currentNodeData && !currentId) { // 是否默认选中
-        const leafNode = findFirstLeaf(this.state.data);
-        if (leafNode) this.onClickNode(leafNode, false);
-      }
-      if (currentId) { // 指定默认选中项
-        const curNode = findFirstLeaf(this.state.data, currentId);
-        if (curNode) this.onClickNode(curNode, false);
-      }
-    });
-  }
-
-  // loadRootNodeData = async () => {
-  //   const { ttmplNodeConfig } = this.props;
-  //   let data = await TreeUtils.loadRootNodeData(ttmplNodeConfig);
-  //   return data;
-  // };
-
-  async componentWillUnmount() { }
-
-  onExpand = async (
-    expandedKeys,
-    current: { expanded: boolean; node: TreeDataNode }
-  ) => {
-    const { ttmplNodeConfig } = this.props;
-    const { data } = this.state;
-    if (current.expanded) {
-      await TreeUtils.pushSameCodeNodeData([current.node], ttmplNodeConfig);
-    }
-    this.setState({
-      data: [...data],
-      expandedKeys,
-    });
-  };
-  serial_number = new Date().getTime();
-
-  // throttle是否节流
-  onClickNode = (dataNode: TreeDataNode, throttle = true) => {
-    const {
-      doEditRoot,
-      doViewRoot,
-      doViewSub,
-      doEditSub,
-      ttmplNodeConfig, onClickNode,
-    } = this.props;
-
-
-    let new_serial_number = new Date().getTime();
-    if (!throttle || (new_serial_number - this.serial_number > 1500)) {
-      this.serial_number = new_serial_number;
-    } else {
-      return;
-    }
-
-    this.setState({ currentNodeData: dataNode, nodeClickLoading: true })
-    setTimeout(() => {
-      this.setState({ nodeClickLoading: false })
-    }, 1500)
-    if (onClickNode) {
-      onClickNode(dataNode);
-      return;
-    }
-    if (dataNode.parent) {
-      //说明是sub
-      if (dataNode.isLeaf) {
-        if (ttmplNodeConfig.leafLTmplConfig.buttons.indexOf("dtmplEdit") > 0 && doEditSub) {
-          doEditSub(
-            ttmplNodeConfig.leafTitle,
-            ttmplNodeConfig.leafRatmplId,
-            dataNode.parent.code,
-            dataNode.code
-          );
-        } else if (
-          ttmplNodeConfig.leafLTmplConfig.buttons.indexOf("detail") > 0 && doViewSub
-        ) {
-          doViewSub(
-            ttmplNodeConfig.leafTitle,
-            ttmplNodeConfig.leafRatmplId,
-            dataNode.parent.code,
-            dataNode.code
-          );
-        }
-      } else {
-        if (
-          ttmplNodeConfig.branchLTmplConfig.buttons.indexOf("dtmplEdit") > 0 && doEditSub
-        ) {
-          doEditSub(
-            ttmplNodeConfig.branchTitle,
-            ttmplNodeConfig.branchRatmplId,
-            dataNode.parent.code,
-            dataNode.code
-          );
-        } else if (
-          ttmplNodeConfig.branchLTmplConfig.buttons.indexOf("detail") > 0 && doViewSub
-        ) {
-          doViewSub(
-            ttmplNodeConfig.branchTitle,
-            ttmplNodeConfig.branchRatmplId,
-            dataNode.parent.code,
-            dataNode.code
-          );
-        }
-      }
-    } else {
-      //说明是root
-      //判断是否允许编辑
-      if (ttmplNodeConfig.rootLTmplConfig?.buttons.indexOf("dtmplEdit") > 0 && doEditSub) {
-        doEditRoot(ttmplNodeConfig.branchTitle, dataNode.code);
-      } else if (
-        ttmplNodeConfig.rootLTmplConfig?.buttons.indexOf("detail") > 0 && doViewRoot
-      ) {
-        doViewRoot(ttmplNodeConfig.branchTitle, dataNode.code);
-      }
-    }
-
-  };
-
-  stopPropagation = (e) => {
-    if (e.stopPropagation) {
-      //如果提供了事件对象，则这是一个非IE浏览器
-      e.stopPropagation();
-    } else {
-      //兼容IE的方式来取消事件冒泡
-      window.event.cancelBubble = true;
-    }
-  };
-
-  getDeleteButton = (sourceId, node: TreeDataNode) => {
-    const { doDelete, ttmplNodeConfig } = this.props;
-    const { translate } = this.context;
-
-    return (
-      <div
-        onClick={(e) => {
-          this.stopPropagation(e);
-        }}
-      >
-        <Popconfirm
-          placement="topLeft"
-          title={translate("${确定要删除吗}?")}
-          onConfirm={async () => {
-            const { data, expandedKeys } = this.state;
-            await doDelete(sourceId, node.code);
-            if (node.parent) {
-              let v = await TreeUtils.reloadData(node.parent.code, ttmplNodeConfig, data, expandedKeys);
-              this.setState({ ...v });
-              this.onClickNode(node.parent);
-            } else {
-              const { data, expandedKeys } = this.state;
-              let v = await TreeUtils.reloadData(null, ttmplNodeConfig, data, expandedKeys);
-              this.setState({ ...v });
-              this.onClickNode(v.data[0]);
-            }
-          }}
-          okText={translate("${确定}")}
-          cancelText={translate("${取消}")}
-        >
-          <Tooltip>
-            <Button size={"small"} danger={true}>
-              <DeleteOutlined />
-            </Button>
-          </Tooltip>
-        </Popconfirm>
-      </div>
-    );
-
-  };
-
-  getAddButton = (
-    title: string,
-    icon: any,
-    ratmplId: string,
-    mainCode: any
-  ) => {
-    const { translate } = this.context;
-    const { doAddSub } = this.props;
-    return (
-      <Button
-        onClick={(e) => {
-          this.stopPropagation(e);
-          doAddSub(title, ratmplId, mainCode, null);
-        }}
-        size={"small"}
-      >
-        {icon}
-        {translate("${" + title + "}")}
-      </Button>
-    );
-  };
-  onCheck = (checkedKeys, e) => {
-    console.log(checkedKeys);
-    console.log(e);
-    if (this.props.onChangeCheck) {
-      let checks: string[] = [];
-      if (e.checkedNodes) {
-        e.checkedNodes.forEach((c) => {
-          checks.push(c.code + "@R@" + c.title);
-        })
-      }
-      this.props.onChangeCheck(checks);
-
-    }
-    this.setState({
-      checkedKeys
-    })
-  }
-
-  packageTitle = (dataNode) => {
-    const {
-      doEditRoot,
-      doViewRoot,
-      doViewSub,
-      doEditSub, doDelete, doAddSub,
-      ttmplNodeConfig, currentId,
-    } = this.props;
-    const { translate } = this.context;
-    const { currentNodeData, nodeClickLoading } = this.state;
-    let buttons = [];
-    if (dataNode.parent) {
-      //说明是sub
-      if (dataNode.isLeaf) {
-        if (ttmplNodeConfig.leafLTmplConfig?.buttons.indexOf("dtmplEdit") > 0 && doEditSub) {
-          buttons.push(
-            <Button
-              onClick={(e) => {
-                this.stopPropagation(e);
-                doEditSub(
-                  ttmplNodeConfig.leafTitle,
-                  ttmplNodeConfig.leafRatmplId,
-                  dataNode.parent.code,
-                  dataNode.code
-                );
-              }}
-              size={"small"}
-            >
-              <EditOutlined />
-              {translate("${编辑}")}
-            </Button>
-          );
-        }
-        if (ttmplNodeConfig.leafLTmplConfig?.buttons.indexOf("detail") > 0 && doViewSub) {
-          buttons.push(
-            <Button
-              onClick={(e) => {
-                this.stopPropagation(e);
-                doViewSub(
-                  ttmplNodeConfig.leafTitle,
-                  ttmplNodeConfig.leafRatmplId,
-                  dataNode.parent.code,
-                  dataNode.code
-                );
-              }}
-              size={"small"}
-            >
-              <AlignLeftOutlined />
-              {translate("${查看}")}
-            </Button>
-          );
-        }
-        if (ttmplNodeConfig.leafLTmplConfig?.buttons.indexOf("singleDelete") > 0 && doDelete) {
-          buttons.push(
-            this.getDeleteButton(ttmplNodeConfig.leafRatmplId, dataNode)
-          );
-        }
-        //节点上加操作
-        // if(ttmplNodeConfig.leafLTmplConfig?.rowActions.length > 0){
-        //   ttmplNodeConfig.leafLTmplConfig.rowActions.map((action) => {
-        //     buttons.push(
-        //         <Action
-        //             serverKey={null}
-        //             iconType={"icon"}
-        //             key={action.id}
-        //             data={[dataNode.data]}
-        //             actionConfig={action}
-        //             doAction={this.doRowAction}
-        //             buttonSize={"small"}
-        //             serial={1}
-        //         ></Action>
-        //     );
-        //   })
-        // }
-      } else if (ttmplNodeConfig.branchLTmplConfig) {
-        if (
-          ttmplNodeConfig.branchLTmplConfig.buttons.indexOf("dtmplEdit") > 0 && doEditSub
-        ) {
-          buttons.push(
-            <Button
-              onClick={(e) => {
-                this.stopPropagation(e);
-                doEditSub(
-                  ttmplNodeConfig.branchTitle,
-                  ttmplNodeConfig.branchRatmplId,
-                  dataNode.parent.code,
-                  dataNode.code
-                );
-              }}
-              size={"small"}
-            >
-              <EditOutlined />
-              {translate("${编辑}")}
-            </Button>
-          );
-        }
-        if (ttmplNodeConfig.branchLTmplConfig?.buttons.indexOf("detail") > 0 && doViewSub) {
-          buttons.push(
-            <Button
-              onClick={(e) => {
-                this.stopPropagation(e);
-                doViewSub(
-                  ttmplNodeConfig.branchTitle,
-                  ttmplNodeConfig.branchRatmplId,
-                  dataNode.parent.code,
-                  dataNode.code
-                );
-              }}
-              size={"small"}
-            >
-              <AlignLeftOutlined />
-              {translate("${查看}")}
-            </Button>
-          );
-        }
-
-        if (
-          ttmplNodeConfig.branchLTmplConfig?.buttons.indexOf("dtmplAdd") > 0 && doAddSub
-        ) {
-          buttons.push(
-            this.getAddButton(
-              ttmplNodeConfig.branchTitle,
-              <PlusSquareOutlined />,
-              ttmplNodeConfig.branchRatmplId,
-              dataNode.code
-            )
-          );
-        }
-
-        if (ttmplNodeConfig.leafLTmplConfig?.buttons.indexOf("dtmplAdd") > 0 && doAddSub) {
-          buttons.push(
-            this.getAddButton(
-              ttmplNodeConfig.leafTitle,
-              <PlusOutlined />,
-              ttmplNodeConfig.leafRatmplId,
-              dataNode.code
-            )
-          );
-        }
-        if (
-          ttmplNodeConfig.branchLTmplConfig?.buttons.indexOf("singleDelete") > 0 && doDelete
-        ) {
-          buttons.push(
-            this.getDeleteButton(ttmplNodeConfig.branchRatmplId, dataNode)
-          );
-        }
-      }
-    } else {
-      //说明是root
-      //判断是否允许编辑
-      if (ttmplNodeConfig.rootLTmplConfig?.buttons.indexOf("dtmplEdit") > 0 && doEditRoot) {
-        buttons.push(
-          <Button
-            onClick={(e) => {
-              this.stopPropagation(e);
-              doEditRoot(ttmplNodeConfig.branchTitle, dataNode.code);
-            }}
-            size={"small"}
-          >
-            <EditOutlined style={{ color: "var(--ant-color-primary)" }} />
-            {translate("${编辑}")}
-          </Button>
-        );
-      }
-      if (ttmplNodeConfig.rootLTmplConfig?.buttons.indexOf("detail") > 0 && doViewRoot) {
-        buttons.push(
-          <Button
-            onClick={(e) => {
-              this.stopPropagation(e);
-              doViewRoot(ttmplNodeConfig.branchTitle, dataNode.code);
-            }}
-            size={"small"}
-          >
-            <AlignLeftOutlined />
-            {translate("${查看}")}
-          </Button>
-        );
-      }
-      //debugger
-      if (ttmplNodeConfig.branchLTmplConfig) {
-        if (ttmplNodeConfig.rootLTmplConfig?.buttons.indexOf("dtmplAdd") > 0 && doAddSub) {
-          buttons.push(
-            this.getAddButton(
-              ttmplNodeConfig.branchTitle,
-              <PlusSquareOutlined />,
-              ttmplNodeConfig.branchRatmplId,
-              dataNode.code
-            )
-          );
-        }
-      }
-      if (ttmplNodeConfig.leafLTmplConfig?.buttons.indexOf("dtmplAdd") > 0 && doAddSub) {
-        buttons.push(
-          this.getAddButton(
-            ttmplNodeConfig.leafTitle,
-            <PlusOutlined />,
-            ttmplNodeConfig.leafRatmplId,
-            dataNode.code
-          )
-        );
-      }
-
-      if (ttmplNodeConfig.rootLTmplConfig?.buttons.indexOf("singleDelete") > 0 && doDelete) {
-        buttons.push(
-          this.getDeleteButton(ttmplNodeConfig.branchRatmplId ? ttmplNodeConfig.branchRatmplId : ttmplNodeConfig.rootGtmplId, dataNode)
-        );
-      }
-    }
-
-    let titleNode =
-      <Tag icon={nodeClickLoading && dataNode.key == currentNodeData?.key ? <SyncOutlined spin /> : null} style={{ fontSize: '14px' }} bordered={false} color={dataNode.key == currentNodeData?.key ? "processing" : undefined} >{dataNode.title}</Tag>
-
-    if (buttons.length == 0) {
-      return titleNode;
-    } else {
-      return (
-        <Popover
-          zIndex={100}
-          content={
-            <>
-              <Space>{buttons}</Space>
-            </>
-          }
-          arrow={false}
-        >
-          {titleNode}
-          {/*<span style={{background:dataNode.key==currentNodeData?.key?"red":undefined}}>{dataNode.title }</span>*/}
-          {/*<Card styles={{body:{"padding":"0px"}}} variant={'borderless'} style={{padding:"0px",margin:'0px'}} > {dataNode.title }</Card>*/}
-          {/*{dataNode.key==currentNodeData?.key?currentNodeData.key:"2"}*/}
-        </Popover>
-      );
-    }
-  };
-
-  render() {
-    const { doEditRoot, ttmplNodeConfig, showFilterInput } = this.props;
-    const {
-      data,
-      loading,
-      expandedKeys,
-      rootAddable,
-      searchValue,
-    } = this.state;
-    let treeData = data;
-    const { translate } = this.context;
-    if (searchValue) {
-      treeData = TreeUtils.filterTree(data, searchValue);
-    }
-
-    const isAddRoot = rootAddable && doEditRoot;
-
-    return (
-      <>
-        <Row >
-          <Col span={24}>
-            <Card
-              style={{ marginBottom: 0, width: "100%" }}
-              variant={"borderless"}
-              styles={{ body: { padding: "0px 4px" } }}
-            >
-              <Row align="middle">
-                {isAddRoot ?
-                  <Col span={8}>
-                    <Button
-                      type={"link"}
-                      onClick={() => doEditRoot(ttmplNodeConfig.branchTitle)}
-                    >
-                      {translate("${添加}")}
-                    </Button>
-                  </Col> : null}
-                {showFilterInput ?
-                  <Col span={isAddRoot ? 16 : 24}>
-                    <Input.Search
-                      value={searchValue}
-                      allowClear
-                      placeholder={translate("${输入查找内容}")}
-                      onChange={(e) => {
-                        this.setState({
-                          searchValue: e.target.value,
-                        });
-                      }}
-                      onSearch={(value) => {
-                        this.refresh();
-                      }}
-                      enterButton={<ReloadOutlined />}
-                    />
-                  </Col> : null}
-              </Row>
-            </Card>
-          </Col>
-        </Row>
-        <Row>
-          <Col span={24}>
-            <Card
-              styles={{
-                body: {
-                  padding: "4px 0px 4px 0px",
-                  height: "80vh",
-                  minWidth: "194px",
-                }
-              }}
-              loading={loading}
-            >
-              {treeData.length == 0 ? (
-                translate("${没有找到数据}")
-              ) : (
-                <Scrollbars
-                  style={{ height: "80vh" }}
-                  autoHide
-                  autoHideTimeout={1000}
-                >
-                  <Tree onSelect={(selectedKeys, info) => {
-                    console.log('selected', selectedKeys, info);
-                  }}
-                    checkStrictly
-                    blockNode
-                    showLine={ttmplNodeConfig.showLine}
-                    // checkable={checkable}
-                    // onCheck={this.onCheck}
-                    // checkedKeys={checkKeys}
-                    expandedKeys={expandedKeys}
-                    onExpand={this.onExpand}
-                    titleRender={(nodeData) => {
-                      return (
-                        <div onClick={() => this.onClickNode(nodeData)}>
-                          {this.packageTitle(nodeData)}
-                        </div>
-                      );
-                    }}
-                    treeData={treeData}
-                  />
-                </Scrollbars>
-              )}
-            </Card>
-          </Col>
-        </Row>
-      </>
-    );
-  }
-}
-
-export default TmplTree;
+import React from "react";
+import {
+  Button,
+  Card,
+  Col,
+  Input,
+  Popconfirm,
+  Popover,
+  Row,
+  Space,
+  Tag,
+  Tooltip,
+  Tree,
+} from "antd";
+import {
+  AlignLeftOutlined,
+  DeleteOutlined,
+  EditOutlined,
+  PlusOutlined,
+  PlusSquareOutlined,
+  ReloadOutlined, SyncOutlined,
+} from "@ant-design/icons";
+
+import Scrollbars from "react-custom-scrollbars";
+import { HydrocarbonService } from "../index";
+import TreeUtils, { TtmplNodeConfig } from "./tree-utils";
+import { TreeDataNode } from "./tree-utils";
+import { LocaleContext } from "../locale/LocaleProvider";
+
+// 查找第一个叶子节点，用于默认选中使用;存在code,则查找等于code的节点
+const findFirstLeaf = (tree, code?: string) => {
+  if (!Array.isArray(tree)) return null;
+  const dfs = (nodes) => {
+    for (const node of nodes) {
+      if (code ? node?.code === code : node?.isLeaf === true) {
+        return node;
+      }
+      if (Array.isArray(node?.children)) {
+        const found = dfs(node.children);
+        if (found) return found;
+      }
+    }
+    return null;
+  }
+  return dfs(tree);
+}
+
+interface TmplTreeProps {
+  showFilterInput?: boolean;
+  ttmplNodeConfig: TtmplNodeConfig;
+  checkable: boolean,
+  onChangeCheck?: (checkCodes: string[]) => any,
+  currentId?: string,
+  checkedCodes?: string[],
+  doEditSub?: (
+    title: string,
+    ratmplId: string,
+    mainCode: string,
+    code?: string
+  ) => void;
+  doViewSub?: (
+    title: string,
+    ratmplId: string,
+    mainCode: string,
+    code?: string
+  ) => void;
+  doEditRoot?: (title: string, code?: string) => void;
+  doViewRoot?: (title: string, code?: string) => void;
+  doDelete?: (ratmplId: string, code?: string) => void;
+  doAddSub?: (
+    title: string,
+    ratmplId: string,
+    mainCode: string,
+    addTmplId: string
+  ) => void;
+  onClickNode?: (dataNode: TreeDataNode) => void;
+  defExpandedRoot?: boolean; // 默认展开根节点
+  defSelect?: boolean; // 默认选中节点
+}
+
+interface TmplTreeState {
+  data?: TreeDataNode[];
+  expandedKeys?: string[];
+  loadedKeys?: string[];
+  loading?: boolean;
+  drawMainCode?: string;
+  // currentEditKey?: string;
+  parentNodeData?: TreeDataNode;
+  currentNodeData?: TreeDataNode;
+  rootAddable?: boolean;
+  searchValue?: string;
+  checkedKeys?: string[];
+  nodeClickLoading?: boolean;
+}
+
+class TmplTree extends React.PureComponent<TmplTreeProps, TmplTreeState> {
+  state = {
+    data: [],
+    expandedKeys: [],
+    loadedKeys: [],
+    loading: false,
+    parentNodeData: undefined,
+    currentNodeData: undefined,
+    rootAddable: false,
+    searchValue: undefined,
+    checkedKeys: undefined,
+    nodeClickLoading: false,
+  };
+
+
+  static defaultProps = {
+    draggable: false,
+    readOnly: false,
+    checkable: true,
+    showFilterInput: true,
+    defExpandedRoot: false,
+    defSelect: false,
+  };
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
+
+  reloadData = async (mainCode, currentCode?: string) => {
+    let { ttmplNodeConfig } = this.props;
+    const { data, expandedKeys } = this.state;
+    let v = await TreeUtils.reloadData(mainCode, ttmplNodeConfig, data, expandedKeys);
+    this.setState({ ...v });
+    if (currentCode) {
+      const current = TreeUtils.getNodesOfArrayNode(v.data, [currentCode])?.[0];
+      this.onClickNode(current || v.data[0]);
+    }
+  }
+
+
+  doDelete = async (node: TreeDataNode) => {
+    let { ttmplNodeConfig } = this.props;
+    const { data, expandedKeys } = this.state;
+    let sourceId;
+    if (node.isLeaf) {
+      sourceId = ttmplNodeConfig.leafRatmplId;
+    } else {
+      sourceId = ttmplNodeConfig.branchRatmplId ? ttmplNodeConfig.branchRatmplId : ttmplNodeConfig.rootLTmplConfig;
+    }
+    let res = await HydrocarbonService.deleteByCode(null, sourceId, [
+      node.code,
+    ]);
+    if (node.parent) {
+      let v = await TreeUtils.reloadData(node.parent.code, ttmplNodeConfig, data, expandedKeys);
+      this.setState({ ...v });
+      this.onClickNode(node.parent);
+    } else {
+      let v = await TreeUtils.reloadData(null, ttmplNodeConfig, data, expandedKeys);
+      this.setState({ ...v });
+      this.onClickNode(v.data[0]);
+    }
+  };
+
+  async componentDidMount() {
+    await this.refresh();
+  }
+
+  async componentDidUpdate(prevProps) {
+    let { ttmplNodeConfig: preTtmplNodeConfig } = prevProps;
+    let { ttmplNodeConfig, currentId } = this.props;
+
+    if (
+      !ttmplNodeConfig ||
+      (preTtmplNodeConfig && ttmplNodeConfig.id == preTtmplNodeConfig.id)
+    ) {
+      if (currentId && (prevProps?.currentId !== currentId)) {
+        const curNode = findFirstLeaf(this.state.data, currentId);
+        if (curNode) this.onClickNode(curNode);
+      }
+      return;
+    }
+    await this.refresh();
+  }
+
+  async refresh() {
+    const { ttmplNodeConfig, defExpandedRoot, defSelect, currentId } = this.props;
+    if (!ttmplNodeConfig) {
+      return;
+    }
+    this.setState({
+      loading: true,
+    });
+    //let loadedKeys = [];
+    let data = await TreeUtils.loadRootNodeData(ttmplNodeConfig);
+    this.setState({
+      searchValue: null,
+      data,
+      rootAddable:
+        ttmplNodeConfig.rootLTmplConfig?.buttons?.indexOf("dtmplAdd") > 0,
+      loading: false,
+      expandedKeys: []
+    }, async () => { // 页面闪烁异常处理，更新后立即使用state
+      if (defExpandedRoot) { // 默认展开所有根节点
+        const temData = this.state.data;
+        const temExpandedKeys = temData.map(r => r.key);
+        for (let index = 0; index < temData.length; index++) {
+          const r = temData[index];
+          await this.onExpand(temExpandedKeys, { expanded: true, node: r });
+        }
+      }
+      if (defSelect && !this.state.currentNodeData && !currentId) { // 是否默认选中
+        const leafNode = findFirstLeaf(this.state.data);
+        if (leafNode) this.onClickNode(leafNode, false);
+      }
+      if (currentId) { // 指定默认选中项
+        const curNode = findFirstLeaf(this.state.data, currentId);
+        if (curNode) this.onClickNode(curNode, false);
+      }
+    });
+  }
+
+  // loadRootNodeData = async () => {
+  //   const { ttmplNodeConfig } = this.props;
+  //   let data = await TreeUtils.loadRootNodeData(ttmplNodeConfig);
+  //   return data;
+  // };
+
+  async componentWillUnmount() { }
+
+  onExpand = async (
+    expandedKeys,
+    current: { expanded: boolean; node: TreeDataNode }
+  ) => {
+    const { ttmplNodeConfig } = this.props;
+    const { data } = this.state;
+    if (current.expanded) {
+      await TreeUtils.pushSameCodeNodeData([current.node], ttmplNodeConfig);
+    }
+    this.setState({
+      data: [...data],
+      expandedKeys,
+    });
+  };
+  serial_number = new Date().getTime();
+
+  // throttle是否节流
+  onClickNode = (dataNode: TreeDataNode, throttle = true) => {
+    const {
+      doEditRoot,
+      doViewRoot,
+      doViewSub,
+      doEditSub,
+      ttmplNodeConfig, onClickNode,
+    } = this.props;
+
+
+    let new_serial_number = new Date().getTime();
+    if (!throttle || (new_serial_number - this.serial_number > 1500)) {
+      this.serial_number = new_serial_number;
+    } else {
+      return;
+    }
+
+    this.setState({ currentNodeData: dataNode, nodeClickLoading: true })
+    setTimeout(() => {
+      this.setState({ nodeClickLoading: false })
+    }, 1500)
+    if (onClickNode) {
+      onClickNode(dataNode);
+      return;
+    }
+    if (dataNode.parent) {
+      //说明是sub
+      if (dataNode.isLeaf) {
+        if (ttmplNodeConfig.leafLTmplConfig.buttons.indexOf("dtmplEdit") > 0 && doEditSub) {
+          doEditSub(
+            ttmplNodeConfig.leafTitle,
+            ttmplNodeConfig.leafRatmplId,
+            dataNode.parent.code,
+            dataNode.code
+          );
+        } else if (
+          ttmplNodeConfig.leafLTmplConfig.buttons.indexOf("detail") > 0 && doViewSub
+        ) {
+          doViewSub(
+            ttmplNodeConfig.leafTitle,
+            ttmplNodeConfig.leafRatmplId,
+            dataNode.parent.code,
+            dataNode.code
+          );
+        }
+      } else {
+        if (
+          ttmplNodeConfig.branchLTmplConfig.buttons.indexOf("dtmplEdit") > 0 && doEditSub
+        ) {
+          doEditSub(
+            ttmplNodeConfig.branchTitle,
+            ttmplNodeConfig.branchRatmplId,
+            dataNode.parent.code,
+            dataNode.code
+          );
+        } else if (
+          ttmplNodeConfig.branchLTmplConfig.buttons.indexOf("detail") > 0 && doViewSub
+        ) {
+          doViewSub(
+            ttmplNodeConfig.branchTitle,
+            ttmplNodeConfig.branchRatmplId,
+            dataNode.parent.code,
+            dataNode.code
+          );
+        }
+      }
+    } else {
+      //说明是root
+      //判断是否允许编辑
+      if (ttmplNodeConfig.rootLTmplConfig?.buttons.indexOf("dtmplEdit") > 0 && doEditSub) {
+        doEditRoot(ttmplNodeConfig.branchTitle, dataNode.code);
+      } else if (
+        ttmplNodeConfig.rootLTmplConfig?.buttons.indexOf("detail") > 0 && doViewRoot
+      ) {
+        doViewRoot(ttmplNodeConfig.branchTitle, dataNode.code);
+      }
+    }
+
+  };
+
+  stopPropagation = (e) => {
+    if (e.stopPropagation) {
+      //如果提供了事件对象，则这是一个非IE浏览器
+      e.stopPropagation();
+    } else {
+      //兼容IE的方式来取消事件冒泡
+      window.event.cancelBubble = true;
+    }
+  };
+
+  getDeleteButton = (sourceId, node: TreeDataNode) => {
+    const { doDelete, ttmplNodeConfig } = this.props;
+    const { translate } = this.context;
+
+    return (
+      <div
+        onClick={(e) => {
+          this.stopPropagation(e);
+        }}
+      >
+        <Popconfirm
+          placement="topLeft"
+          title={translate("${确定要删除吗}?")}
+          onConfirm={async () => {
+            const { data, expandedKeys } = this.state;
+            await doDelete(sourceId, node.code);
+            if (node.parent) {
+              let v = await TreeUtils.reloadData(node.parent.code, ttmplNodeConfig, data, expandedKeys);
+              this.setState({ ...v });
+              this.onClickNode(node.parent);
+            } else {
+              const { data, expandedKeys } = this.state;
+              let v = await TreeUtils.reloadData(null, ttmplNodeConfig, data, expandedKeys);
+              this.setState({ ...v });
+              this.onClickNode(v.data[0]);
+            }
+          }}
+          okText={translate("${确定}")}
+          cancelText={translate("${取消}")}
+        >
+          <Tooltip>
+            <Button size={"small"} danger={true}>
+              <DeleteOutlined />
+            </Button>
+          </Tooltip>
+        </Popconfirm>
+      </div>
+    );
+
+  };
+
+  getAddButton = (
+    title: string,
+    icon: any,
+    ratmplId: string,
+    mainCode: any
+  ) => {
+    const { translate } = this.context;
+    const { doAddSub } = this.props;
+    return (
+      <Button
+        onClick={(e) => {
+          this.stopPropagation(e);
+          doAddSub(title, ratmplId, mainCode, null);
+        }}
+        size={"small"}
+      >
+        {icon}
+        {translate("${" + title + "}")}
+      </Button>
+    );
+  };
+  onCheck = (checkedKeys, e) => {
+    console.log(checkedKeys);
+    console.log(e);
+    if (this.props.onChangeCheck) {
+      let checks: string[] = [];
+      if (e.checkedNodes) {
+        e.checkedNodes.forEach((c) => {
+          checks.push(c.code + "@R@" + c.title);
+        })
+      }
+      this.props.onChangeCheck(checks);
+
+    }
+    this.setState({
+      checkedKeys
+    })
+  }
+
+  packageTitle = (dataNode) => {
+    const {
+      doEditRoot,
+      doViewRoot,
+      doViewSub,
+      doEditSub, doDelete, doAddSub,
+      ttmplNodeConfig, currentId,
+    } = this.props;
+    const { translate } = this.context;
+    const { currentNodeData, nodeClickLoading } = this.state;
+    let buttons = [];
+    if (dataNode.parent) {
+      //说明是sub
+      if (dataNode.isLeaf) {
+        if (ttmplNodeConfig.leafLTmplConfig?.buttons.indexOf("dtmplEdit") > 0 && doEditSub) {
+          buttons.push(
+            <Button
+              onClick={(e) => {
+                this.stopPropagation(e);
+                doEditSub(
+                  ttmplNodeConfig.leafTitle,
+                  ttmplNodeConfig.leafRatmplId,
+                  dataNode.parent.code,
+                  dataNode.code
+                );
+              }}
+              size={"small"}
+            >
+              <EditOutlined />
+              {translate("${编辑}")}
+            </Button>
+          );
+        }
+        if (ttmplNodeConfig.leafLTmplConfig?.buttons.indexOf("detail") > 0 && doViewSub) {
+          buttons.push(
+            <Button
+              onClick={(e) => {
+                this.stopPropagation(e);
+                doViewSub(
+                  ttmplNodeConfig.leafTitle,
+                  ttmplNodeConfig.leafRatmplId,
+                  dataNode.parent.code,
+                  dataNode.code
+                );
+              }}
+              size={"small"}
+            >
+              <AlignLeftOutlined />
+              {translate("${查看}")}
+            </Button>
+          );
+        }
+        if (ttmplNodeConfig.leafLTmplConfig?.buttons.indexOf("singleDelete") > 0 && doDelete) {
+          buttons.push(
+            this.getDeleteButton(ttmplNodeConfig.leafRatmplId, dataNode)
+          );
+        }
+        //节点上加操作
+        // if(ttmplNodeConfig.leafLTmplConfig?.rowActions.length > 0){
+        //   ttmplNodeConfig.leafLTmplConfig.rowActions.map((action) => {
+        //     buttons.push(
+        //         <Action
+        //             serverKey={null}
+        //             iconType={"icon"}
+        //             key={action.id}
+        //             data={[dataNode.data]}
+        //             actionConfig={action}
+        //             doAction={this.doRowAction}
+        //             buttonSize={"small"}
+        //             serial={1}
+        //         ></Action>
+        //     );
+        //   })
+        // }
+      } else if (ttmplNodeConfig.branchLTmplConfig) {
+        if (
+          ttmplNodeConfig.branchLTmplConfig.buttons.indexOf("dtmplEdit") > 0 && doEditSub
+        ) {
+          buttons.push(
+            <Button
+              onClick={(e) => {
+                this.stopPropagation(e);
+                doEditSub(
+                  ttmplNodeConfig.branchTitle,
+                  ttmplNodeConfig.branchRatmplId,
+                  dataNode.parent.code,
+                  dataNode.code
+                );
+              }}
+              size={"small"}
+            >
+              <EditOutlined />
+              {translate("${编辑}")}
+            </Button>
+          );
+        }
+        if (ttmplNodeConfig.branchLTmplConfig?.buttons.indexOf("detail") > 0 && doViewSub) {
+          buttons.push(
+            <Button
+              onClick={(e) => {
+                this.stopPropagation(e);
+                doViewSub(
+                  ttmplNodeConfig.branchTitle,
+                  ttmplNodeConfig.branchRatmplId,
+                  dataNode.parent.code,
+                  dataNode.code
+                );
+              }}
+              size={"small"}
+            >
+              <AlignLeftOutlined />
+              {translate("${查看}")}
+            </Button>
+          );
+        }
+
+        if (
+          ttmplNodeConfig.branchLTmplConfig?.buttons.indexOf("dtmplAdd") > 0 && doAddSub
+        ) {
+          buttons.push(
+            this.getAddButton(
+              ttmplNodeConfig.branchTitle,
+              <PlusSquareOutlined />,
+              ttmplNodeConfig.branchRatmplId,
+              dataNode.code
+            )
+          );
+        }
+
+        if (ttmplNodeConfig.leafLTmplConfig?.buttons.indexOf("dtmplAdd") > 0 && doAddSub) {
+          buttons.push(
+            this.getAddButton(
+              ttmplNodeConfig.leafTitle,
+              <PlusOutlined />,
+              ttmplNodeConfig.leafRatmplId,
+              dataNode.code
+            )
+          );
+        }
+        if (
+          ttmplNodeConfig.branchLTmplConfig?.buttons.indexOf("singleDelete") > 0 && doDelete
+        ) {
+          buttons.push(
+            this.getDeleteButton(ttmplNodeConfig.branchRatmplId, dataNode)
+          );
+        }
+      }
+    } else {
+      //说明是root
+      //判断是否允许编辑
+      if (ttmplNodeConfig.rootLTmplConfig?.buttons.indexOf("dtmplEdit") > 0 && doEditRoot) {
+        buttons.push(
+          <Button
+            onClick={(e) => {
+              this.stopPropagation(e);
+              doEditRoot(ttmplNodeConfig.branchTitle, dataNode.code);
+            }}
+            size={"small"}
+          >
+            <EditOutlined style={{ color: "var(--ant-color-primary)" }} />
+            {translate("${编辑}")}
+          </Button>
+        );
+      }
+      if (ttmplNodeConfig.rootLTmplConfig?.buttons.indexOf("detail") > 0 && doViewRoot) {
+        buttons.push(
+          <Button
+            onClick={(e) => {
+              this.stopPropagation(e);
+              doViewRoot(ttmplNodeConfig.branchTitle, dataNode.code);
+            }}
+            size={"small"}
+          >
+            <AlignLeftOutlined />
+            {translate("${查看}")}
+          </Button>
+        );
+      }
+      //debugger
+      if (ttmplNodeConfig.branchLTmplConfig) {
+        if (ttmplNodeConfig.rootLTmplConfig?.buttons.indexOf("dtmplAdd") > 0 && doAddSub) {
+          buttons.push(
+            this.getAddButton(
+              ttmplNodeConfig.branchTitle,
+              <PlusSquareOutlined />,
+              ttmplNodeConfig.branchRatmplId,
+              dataNode.code
+            )
+          );
+        }
+      }
+      if (ttmplNodeConfig.leafLTmplConfig?.buttons.indexOf("dtmplAdd") > 0 && doAddSub) {
+        buttons.push(
+          this.getAddButton(
+            ttmplNodeConfig.leafTitle,
+            <PlusOutlined />,
+            ttmplNodeConfig.leafRatmplId,
+            dataNode.code
+          )
+        );
+      }
+
+      if (ttmplNodeConfig.rootLTmplConfig?.buttons.indexOf("singleDelete") > 0 && doDelete) {
+        buttons.push(
+          this.getDeleteButton(ttmplNodeConfig.branchRatmplId ? ttmplNodeConfig.branchRatmplId : ttmplNodeConfig.rootGtmplId, dataNode)
+        );
+      }
+    }
+
+    let titleNode =
+      <Tag icon={nodeClickLoading && dataNode.key == currentNodeData?.key ? <SyncOutlined spin /> : null} style={{ fontSize: '14px' }} bordered={false} color={dataNode.key == currentNodeData?.key ? "processing" : undefined} >{dataNode.title}</Tag>
+
+    if (buttons.length == 0) {
+      return titleNode;
+    } else {
+      return (
+        <Popover
+          zIndex={100}
+          content={
+            <>
+              <Space>{buttons}</Space>
+            </>
+          }
+          arrow={false}
+        >
+          {titleNode}
+          {/*<span style={{background:dataNode.key==currentNodeData?.key?"red":undefined}}>{dataNode.title }</span>*/}
+          {/*<Card styles={{body:{"padding":"0px"}}} variant={'borderless'} style={{padding:"0px",margin:'0px'}} > {dataNode.title }</Card>*/}
+          {/*{dataNode.key==currentNodeData?.key?currentNodeData.key:"2"}*/}
+        </Popover>
+      );
+    }
+  };
+
+  render() {
+    const { doEditRoot, ttmplNodeConfig, showFilterInput } = this.props;
+    const {
+      data,
+      loading,
+      expandedKeys,
+      rootAddable,
+      searchValue,
+    } = this.state;
+    let treeData = data;
+    const { translate } = this.context;
+    if (searchValue) {
+      treeData = TreeUtils.filterTree(data, searchValue);
+    }
+
+    const isAddRoot = rootAddable && doEditRoot;
+
+    return (
+      <>
+        <Row >
+          <Col span={24}>
+            <Card
+              style={{ marginBottom: 0, width: "100%" }}
+              variant={"borderless"}
+              styles={{ body: { padding: "0px 4px" } }}
+            >
+              <Row align="middle">
+                {isAddRoot ?
+                  <Col span={8}>
+                    <Button
+                      type={"link"}
+                      onClick={() => doEditRoot(ttmplNodeConfig.branchTitle)}
+                    >
+                      {translate("${添加}")}
+                    </Button>
+                  </Col> : null}
+                {showFilterInput ?
+                  <Col span={isAddRoot ? 16 : 24}>
+                    <Input.Search
+                      value={searchValue}
+                      allowClear
+                      placeholder={translate("${输入查找内容}")}
+                      onChange={(e) => {
+                        this.setState({
+                          searchValue: e.target.value,
+                        });
+                      }}
+                      onSearch={(value) => {
+                        this.refresh();
+                      }}
+                      enterButton={<ReloadOutlined />}
+                    />
+                  </Col> : null}
+              </Row>
+            </Card>
+          </Col>
+        </Row>
+        <Row>
+          <Col span={24}>
+            <Card
+              styles={{
+                body: {
+                  padding: "4px 0px 4px 0px",
+                  height: "80vh",
+                  minWidth: "194px",
+                }
+              }}
+              loading={loading}
+            >
+              {treeData.length == 0 ? (
+                translate("${没有找到数据}")
+              ) : (
+                <Scrollbars
+                  style={{ height: "80vh" }}
+                  autoHide
+                  autoHideTimeout={1000}
+                >
+                  <Tree onSelect={(selectedKeys, info) => {
+                    console.log('selected', selectedKeys, info);
+                  }}
+                    checkStrictly
+                    blockNode
+                    showLine={ttmplNodeConfig.showLine}
+                    // checkable={checkable}
+                    // onCheck={this.onCheck}
+                    // checkedKeys={checkKeys}
+                    expandedKeys={expandedKeys}
+                    onExpand={this.onExpand}
+                    titleRender={(nodeData) => {
+                      return (
+                        <div onClick={() => this.onClickNode(nodeData)}>
+                          {this.packageTitle(nodeData)}
+                        </div>
+                      );
+                    }}
+                    treeData={treeData}
+                  />
+                </Scrollbars>
+              )}
+            </Card>
+          </Col>
+        </Row>
+      </>
+    );
+  }
+}
+
+export default TmplTree;