index.jsx

import React, { useState, useMemo, useRef, createContext, useEffect } from 'react';
import { Tree, Input, Popconfirm, Tooltip, Divider, Modal, message } from 'antd';
import {
  MinusSquareOutlined,
  FormOutlined,
  PlusSquareOutlined,
  ArrowDownOutlined,
  ArrowRightOutlined,
} from '@ant-design/icons';
import { useRequest } from 'ahooks';
import { doFetch } from '@/utils/doFetch';
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;
};
{
  /* <TreeRender
        url="/ngic-workmanship/pmMaterieType/queryTreeList"
        deleteurl="/ngic-workmanship/pmMaterieType/deleteById"
        saveurl="/ngic-workmanship/pmMaterieType/save"
        onselected={(vals) => {
          setmaterieTypeId(vals[0] ?? "");
        }}
      /> */
}

function TreeRender({
  url,
  deleteurl,
  saveurl,
  onselected,
  params,
  noaction,
  maxWidth,
  style,
  submitKey,
}) {
  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: '',
        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',
                marginRight: 6,
              }}
            >
              {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',
                marginRight: 6,
              }}
            >
              {item.title}
            </span>
          </Tooltip>
        );

      const actiontitle = (
        <div
          style={{
            display: 'flex',
            alignItems: 'start',
            justifyContent: 'space-between',
          }}
        >
          <span style={{ merginRight: 6 }}>{title}</span>
          <div>
            {item.key && item.key != '00000000' && (
              <Tooltip
                title="编辑"
                onClick={(e) => {
                  e.stopPropagation();
                  setsavetitle(null);
                  if (true) {
                    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={false}
                onClick={(e) => {
                  e.stopPropagation();
                  setsavetitle(null);
                  if (true) {
                    setModal({
                      visible: true,
                      closable: true,
                      title: '新增子结构',
                      okText: '新增',
                      cancelText: '取消',
                      placeholder: item.title,
                      key: item.key,
                    });
                  }
                }}
                style={{
                  color: `${true ? '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="top"
                title="是否删除该节点？"
                okText="删除"
                cancelText="取消"
                onConfirm={(e) => {
                  console.log(111);
                  doFetch({ url: deleteurl, params: { id: item.key } }).then((res) => {
                    if (res.code == '0000') {
                      message.success('操作成功');
                      refresh();
                    }
                  });
                }}
                disabled={true}
              >
                <Tooltip title="删除">
                  <MinusSquareOutlined
                    onClick={(e) => {
                      // console.log(e);
                      e.stopPropagation();
                      doFetch({ url: deleteurl, params: { id: item.key } }).then((res) => {
                        if (res.code == '0000') {
                          message.success('操作成功');
                          refresh();
                        }
                      });
                    }}
                    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 {
          title: noaction ? title : actiontitle,
          key: item.key,
          children: loop(item.children),
          level: item.level,
          type: item.type,
        };
      }
      return {
        title: noaction ? title : actiontitle,
        key: item.key,
        level: item.level,
        type: item.type,
      };
    });
  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 style={{ ...style }} className='treenode'>
      <Modal
        {...modal}
        onCancel={() => {
          setModal((s) => ({
            ...s,
            visible: false,
          }));
        }}
        onOk={() => {
          if (modal.okText == '修改') {
            return new Promise((resolve, reject) => {
              if (savetitle) {
                doFetch({
                  url: saveurl,
                  params: {
                    [submitKey]: 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: {
                    [submitKey]: 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) => {
          // //console.log(selectedKeys);
          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;