index.jsx

import React, { useState, useMemo, useRef, createContext } from "react";
import {
  Tree,
  Input,
  Popconfirm,
  Tooltip,
  Divider,
  Modal,
  message,
} from "antd";
import {
  MinusSquareOutlined,
  FormOutlined,
  PlusSquareOutlined,
  ArrowDownOutlined,
  ArrowRightOutlined,
} from "@ant-design/icons";
import getPrem from "@/utils/getPrem";
import { useRequest } from "ahooks";
import { doFetch } from "@/utils/doFetch";
import { useEffect } from "react";
import Login from "@/pages/user/Login";

const ReachableContext = createContext(null);
let { Search } = Input,
  { TreeNode } = Tree;
const getParentKey = (key, tree) => {
  let parentKey;
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i];
    if (node.children) {
      if (
        node.children.some((item) => {
          return item.key === key;
        })
      ) {
        parentKey = node.key;
      } else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children);
      }
    }
  }
  return parentKey;
};

function TreeRender({
  url,
  deleteurl,
  saveurl,
  onselected,
  params,
  noaction,
  maxWidth,
  hasTool = false,
}) {
  const [search, setsearch] = useState("");
  const [savetitle, setsavetitle] = useState(null);
  const [modal, setModal] = useState({
    visible: false,
  });
  const [expandall, setexpandall] = useState(false);
  const [expandedKeys, onExpand] = useState();
  const { data, loading, refresh } = useRequest(() => {
    return doFetch({ url, params: params ?? {} });
  });
  const [autoExpandParent, setAutoExpandParent] = useState(true);

  const allkeys = useMemo(() => {
    let res = [];
    const fn = (source) => {
      source.map((el) => {
        res.push(el);
        el.children && el.children.length > 0 ? fn(el.children) : ""; // 子级递归
      });
    };
    fn(data?.data?.dataList ?? []);
    return res.filter((it) => it.children).map((it) => it.key);
  }, [data]);
  const alldata = useMemo(() => {
    let res = [];
    const fn = (source) => {
      source.map((el) => {
        res.push(el);
        el.children && el.children.length > 0 ? fn(el.children) : ""; // 子级递归
      });
    };
    fn(data?.data?.dataList ?? []);
    return res;
  }, [data]);
  const treeData = useMemo(() => {
    let res = data?.data?.dataList ?? [];
    return [
      {
        title: "全部",
        key: "00000000",
        children: res,
      },
    ];
  }, [data]);
  const onChange = (e) => {
    const { value } = e.target;
    const dataLists = getAllList();
    const newExpandedKeys = dataLists
      .map((item) => {
        if (item.title.indexOf(value) > -1) {
          return getParentKey(item.key, treeData);
        }
        return null;
      })
      .filter((item, i, self) => item && self.indexOf(item) === i);
    setsearch(value);
    if (newExpandedKeys.length > 0) {
      setexpandall(true);
      setAutoExpandParent(true);
    } else {
      setexpandall(false);
      setAutoExpandParent(false);
    }
    onExpand(newExpandedKeys);
  };
  const loop = (data) =>
    data.map((item) => {
      const index = item.title.indexOf(search);
      const beforeStr = item.title.substr(0, index);
      const afterStr = item.title.substr(index + search.length);
      let title =
        index > -1 ? (
          <Tooltip title={item.title} placement="bottom">
            <span
              style={{
                display: "inline-block",
                maxWidth: maxWidth ?? 88,
                overflow: "hidden",
                textOverflow: "ellipsis",
                whiteSpace: "nowrap",
              }}
            >
              {beforeStr}
              <span style={{ color: "#f50" }}>{search}</span>
              {afterStr}
            </span>
          </Tooltip>
        ) : (
          <Tooltip title={item.title} placement="bottom">
            <span
              style={{
                display: "inline-block",
                maxWidth: maxWidth ?? 88,
                overflow: "hidden",
                textOverflow: "ellipsis",
                whiteSpace: "nowrap",
              }}
            >
              {item.title}
            </span>
          </Tooltip>
        );

      const actiontitle = (
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
          }}
        >
          {title}
          {hasTool && (
            <div>
              {item.key && item.key != "00000000" && (
                <Tooltip
                  title="编辑"
                  onClick={(e) => {
                    e.stopPropagation();
                    setsavetitle(null);
                    if (getPrem("enElectricityMeterType_save", "ifs")) {
                      setModal({
                        visible: true,
                        closable: true,
                        title: "修改节点名称",
                        okText: "修改",
                        cancelText: "取消",
                        placeholder: item.title,
                        key: item.key,
                      });
                    }
                  }}
                >
                  <FormOutlined style={{ color: "#1890ff" }} />
                </Tooltip>
              )}
              {item.key && item.key != "00000000" && (
                <Divider type="vertical" style={{ margin: "0 6px" }}></Divider>
              )}
              <Tooltip title="新增">
                <PlusSquareOutlined
                  disabled={!getPrem("enElectricityMeterType_save", "ifs")}
                  onClick={(e) => {
                    e.stopPropagation();
                    setsavetitle(null);
                    if (getPrem("enElectricityMeterType_save", "ifs")) {
                      setModal({
                        visible: true,
                        closable: true,
                        title: "新增子结构",
                        okText: "新增",
                        cancelText: "取消",
                        placeholder: item.title,
                        key: item.key,
                      });
                    }
                  }}
                  style={{
                    color: `${
                      getPrem("enElectricityMeterType_save", "ifs")
                        ? "green"
                        : ""
                    }`,
                  }}
                />
              </Tooltip>
              {(!item.children || item.children.length == 0) && (
                <Divider type="vertical" style={{ margin: "0 6px" }}></Divider>
              )}
              {(!item.children || item.children.length == 0) &&
                item.key != "0" && (
                  <Popconfirm
                    placement="bottom"
                    title="是否删除该节点？"
                    okText="删除"
                    cancelText="取消"
                    onConfirm={() => {
                      doFetch({
                        url: deleteurl,
                        params: { id: item.key },
                      }).then((res) => {
                        if (res.code == "0000") {
                          message.success("操作成功");
                          refresh();
                        }
                      });
                    }}
                    disabled={
                      !getPrem("enElectricityMeterType_deleteById", "ifs")
                    }
                  >
                    <Tooltip title="删除">
                      <MinusSquareOutlined
                        onClick={(e) => {
                          e.stopPropagation();
                        }}
                        style={{ color: "red" }}
                      />
                    </Tooltip>
                  </Popconfirm>
                )}
              {item.key === "00000000" && (
                <Divider type="vertical" style={{ margin: "0 6px" }}></Divider>
              )}
              {item.key === "00000000" && (
                <Tooltip
                  title={expandall ? "收起" : "展开"}
                  onClick={(e) => {
                    e.stopPropagation();
                    setexpandall(!expandall);
                    onExpand(expandall ? [] : allkeys);
                  }}
                >
                  {expandall ? <ArrowDownOutlined /> : <ArrowRightOutlined />}
                </Tooltip>
              )}
            </div>
          )}
        </div>
      );
      if (item.key === "00000000") {
        title = (
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              flex: 1,
            }}
          >
            {title}
            <Tooltip
              title={expandall ? "收起" : "展开"}
              onClick={(e) => {
                e.stopPropagation();
                setexpandall(!expandall);
                onExpand(expandall ? [] : allkeys);
                setAutoExpandParent(!expandall);
              }}
            >
              {expandall ? <ArrowDownOutlined /> : <ArrowRightOutlined />}
            </Tooltip>
          </div>
        );
      }

      // if (item.children) {
      //     return (
      //         <TreeNode key={item.key} title={actiontitle}>
      //             {loop(item.children)}
      //         </TreeNode>
      //     );
      // }
      // return <TreeNode key={item.key} title={title} />;
      // return (
      //     <TreeNode key={item.key} title={noaction ? title : actiontitle}>
      //         {item.children && loop(item.children)}
      //     </TreeNode>
      // );

      if (item.children) {
        return {
          title: noaction ? title : actiontitle,
          key: item.key,
          children: loop(item.children),
          level: item.level,
        };
      }
      return {
        title: noaction ? title : actiontitle,
        key: item.key,
        level: item.level,
      };
    });
  useEffect(() => {
    setexpandall(true);
    onExpand(allkeys);
  }, [allkeys]);
  function getAllList() {
    const dataLists = [];
    const generateLists = (data) => {
      for (let i = 0; i < data.length; i++) {
        const node = data[i];
        const key = node.key;
        dataLists.push({ key, title: node.title, level: node.level });
        if (node.children) {
          generateLists(node.children, node.key);
        }
      }
    };
    generateLists(treeData);
    return dataLists;
  }
  return (
    <div>
      <Modal
        {...modal}
        onCancel={() => {
          setModal((s) => ({
            ...s,
            visible: false,
          }));
        }}
        onOk={() => {
          if (modal.okText == "修改") {
            return new Promise((resolve, reject) => {
              if (savetitle) {
                doFetch({
                  url: saveurl,
                  params: {
                    materieTypeName: savetitle,
                    id: modal.key,
                  },
                }).then((res) => {
                  if (res.code == "0000") {
                    message.success("操作成功");

                    refresh();
                    setModal({
                      visible: false,
                    });
                  }
                });
                resolve();
              } else {
                message.warn("请输入修改的名称");
                reject();
              }
            });
          } else {
            return new Promise((resolve, reject) => {
              if (savetitle) {
                doFetch({
                  url: saveurl,
                  params: {
                    materieTypeName: savetitle,
                    parentId: modal.key,
                  },
                }).then((res) => {
                  if (res.code == "0000") {
                    message.success("操作成功");
                    refresh();
                    setModal({
                      visible: false,
                    });
                  }
                });
                resolve();
              } else {
                message.warn("请输入修改的名称");
                reject();
              }
            });
          }
        }}
      >
        {modal.okText == "修改" ? (
          <div>
            <Input
              placeholder={modal.placeholder}
              allowClear
              value={savetitle}
              onChange={(e) => {
                setsavetitle(e.target.value);
              }}
            ></Input>
          </div>
        ) : (
          <div>
            <div style={{ marginBottom: 15, color: "#f50", fontSize: 16 }}>
              当前结构：{modal.placeholder}
            </div>
            <Input
              placeholder="子结构"
              allowClear
              onChange={(e) => {
                setsavetitle(e.target.value);
              }}
            ></Input>
          </div>
        )}
      </Modal>
      <Search
        value={search}
        style={{ margin: "16px 0 8px 0" }}
        placeholder="搜索"
        onChange={onChange}
      />

      <Tree
        onSelect={(selectedKeys, e) => {
          onselected?.(selectedKeys, e, alldata);
        }}
        autoExpandParent={autoExpandParent}
        defaultExpandAll={true}
        expandedKeys={expandedKeys}
        onExpand={(expandedKeys, { expanded: bool, node }) => {
          onExpand(expandedKeys);
          setAutoExpandParent(false);
          if (!bool && node.key == "00000000") {
            setexpandall(false);
          } else {
            setexpandall(true);
          }
        }}
        treeData={loop(treeData ?? [])}
      >
        {/* {loop(treeData ? treeData : [])} */}
      </Tree>
    </div>
  );
}

export default TreeRender;