react+ts实现树形穿梭组件

import React, { useEffect, useState } from "react";
import { Tree, Divider, Steps, Input, Button, Modal, Layout } from "antd";
import { CloseOutlined } from "@ant-design/icons";
import "./base.less";

const { Search } = Input;
const { Step } = Steps;
const { Content } = Layout;

const mockData = [
  {
    permissionRestInfList:
      '[{"resourceId":133,"restId":"BOOPNDTL","resourceNm":"测试龙见3333玮","permission":"1","serviceId":"bou","restNm":"开户结果明细查询"}]',
    resourceId: "133",
    resourceNm: "测试龙见3333玮",
  },
  {
    permissionRestInfList:
      '[{"resourceId":16,"restId":"TXVOPTRQ","resourceNm":"个税服务","permission":"1","serviceId":"tax","restNm":"个税辅助缴款服务/打印缴款凭证"},{"resourceId":16,"restId":"tax/TXYDISSJ","resourceNm":"个税服务","permission":"1","serviceId":"tax","restNm":"测试"},{"resourceId":16,"restId":"v2/TXDECINF","resourceNm":"个税服务","permission":"1","serviceId":"tax","restNm":"申报明细查询"},{"resourceId":16,"restId":"v2/TXSPELST","resourceNm":"个税服务","permission":"0","serviceId":"tax","restNm":"专项扣除查询"},{"resourceId":16,"restId":"v2/TXPAYINF","resourceNm":"个税服务","permission":"0","serviceId":"tax","restNm":"缴款结果查询"},{"resourceId":16,"restId":"UPDNTPWD","resourceNm":"个税服务","permission":"0","serviceId":"tax","restNm":"网报密码修改"},{"resourceId":16,"restId":"TXEMPSTA","resourceNm":"个税服务","permission":"0","serviceId":"tax","restNm":"人员验证状态更新"},{"resourceId":16,"restId":"TXSHCAPI","resourceNm":"个税服务","permission":"0","serviceId":"tax","restNm":"企业所得税核查提醒反馈"},{"resourceId":16,"restId":"TXSOIQFL","resourceNm":"个税服务","permission":"0","serviceId":"tax","restNm":"企业所得税核查证明材料上传"},{"resourceId":16,"restId":"TXINACFG","resourceNm":"个税服务","permission":"0","serviceId":"tax","restNm":"获取减免附表"},{"resourceId":16,"restId":"TXARECOD","resourceNm":"个税服务","permission":"0","serviceId":"tax","restNm":"获取地区编码"}]',
    resourceId: "16",
    resourceNm: "个税服务",
  },
];
export default function 树形选择() {
  const [checkedKeys, setCheckedKeys]: any = useState([
    "BOOPNDTL/开户结果明细查询",
  ]);
  const [selectedKeys, setSelectedKeys]: any = useState([]);
  const [treeData, setTreeData]: any = useState([]);
  useEffect(() => {
    setTreeData(
      mockData.map((item: any) => {
        return {
          permissionRestInfList: JSON.parse(item.permissionRestInfList),
          resourceId: item.resourceId,
          resourceNm: item.resourceNm,
          title: item.resourceNm,
          key: item.resourceNm,
          pid: "",
          pNm: "",
          disabled: false,
          children: JSON.parse(item.permissionRestInfList).map((i: any) => {
            return {
              title: i.restId + "/" + i.restNm,
              key: i.restId + "/" + i.restNm,
              resourceId: i.resourceId,
              restId: i.restId,
              resourceNm: i.resourceNm,
              permission: i.permission,
              serviceId: i.serviceId,
              restNm: i.restNm,
              pid: i.resourceId,
              pNm: i.resourceNm,
              disabled: i.permission === "1",
            };
          }),
        };
      })
    );
  }, []);
  useEffect(() => {
    if (treeData) {
      let defList: any = [];
      treeData.map((i: any) => {
        let count = 0;
        let len = i.children.length;
        i.children.forEach((item: any) => {
          if (item.permission === "1") {
            count++;
            defList.push(item.key);
            console.log("defList", defList);
          }
        });
        if (len === count) {
          i.permission = "1";
          i.disabled = true;
        } else {
          i.permission = "0";
          i.disabled = false;
        }
      });
    }
    console.log("treeData: ", treeData);
  }, [treeData]);

  const onCheck = (checkedKeysValue: any, e: any) => {
    setCheckedKeys(checkedKeysValue);
    let checkList = e.checkedNodes;
    checkList = checkList.filter((item: any) => {
      return item.pid !== "";
    });
    setSelectList(checkList);
  };
  const onSelect = (selectedKeysValue: React.Key[], info: any) => {};

  const deleteAll = () => {
    setCheckedKeys([]);
    setSelectList([]);
  };
  const deleteById: any = (e: any) => {
    // 删除右边的数组
    let rightList = JSON.parse(JSON.stringify(selectList));
    let pNm: any;
    //获取选中元素的下标和pNm
    let index = rightList.findIndex((i: any) => {
      // 找到点击的父节点
      if (i.key === e.key) pNm = i.pNm;
      return i.key === e.key;
    });
    //删除右边元素
    rightList.splice(index, 1);
    setSelectList(rightList);
    let leftList = JSON.parse(JSON.stringify(checkedKeys));
    leftList.splice(leftList.indexOf(e.key), 1);
    //当全选时，删除一次pNm
    if (leftList.indexOf(pNm) >= 0) leftList.splice(leftList.indexOf(pNm), 1);
    setCheckedKeys(leftList);
  };
  const [isModalVisible, setIsModalVisible] = useState(true);
  const [current, setCurrent] = useState(0);
  const [selectList, setSelectList] = useState([]);
  const handleOk = () => {};
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  return (
    
       setIsModalVisible(true)}>
        打开树形d框
      
      
        {
            margin: "24px 0",
            display: "flex",
            justifyContent: "center",
          }}
        >
          { width: "50%" }}>
            
            
          
        
        { margin: "0" }} />
        {current === 0 && (
          {
              display: "flex",
              padding: "0 24px",
            }}
          >
            {
                flex: "1",
                borderRight: "1px solid #ccc",
                paddingRight: "24px",
              }}
            >
              { margin: "24px 0" }} placeholder="Search" />
              
            
            { flex: "1", overflow: "auto" }}>
              {
                  padding: "24px",
                  display: "flex",
                  justifyContent: "space-between",
                }}
              >
                已选择({selectList.length})
                { cursor: "pointer" }} onClick={deleteAll}>
                  清空
                
              
              {selectList.map((item: any, index) => (
                { display: "flex", justifyContent: "space-between" }}
                  key={index}
                >
                  <>
                    {item.pNm + " &&&& " + item.key}
                     deleteById(item)}>
                      
                    
                  
                
              ))}
            
          
        )}
      
    
  );
}

base.less
@import "~antd/dist/antd.css";

.ant-modal-body {
  padding: 0;
}
.ant-tree-switcher {
  position: relative;
}
.ant-tree-switcher_open::before,
.ant-tree-switcher_close::before {
  position: absolute;
  content: "";
  right: -310px;
  top: 0;
  left: 46px;
  bottom: 0;
  z-index: 100;
}
.ant-tree-title {
  z-index: 1;
}
.ant-tree-checkbox-disabled {
  // content: "\f200";
  .ant-tree-checkbox-inner::after {
    position: absolute;
    display: table;
    border: 2px solid rgba(0, 0, 0, 0.25);
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg) scale(1) translate(-50%, -50%);
    opacity: 1;
    transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
    content: " ";
  }
}