antd tree组件，搜索并定位，实现已被其他数据关联的情况不允许被再次关联

实现的效果如下图：

实现搜索定位：
搜索用的官方提供的代码，在搜索框监听到数据变化的时候，找到相关数据并高亮
因为该页面有两个tree，所以我写在了一个方法里面，根据传参不同来区别
写法应该是根据传参来设置state，但是由于需求更改频繁所以没做改动

应该正确的写法是：
获取数据：const list = this.state[${str}Datalist];
设置数据：this.setState({
[${str}expandedKeys]: expandedKeys,
[${str}autoExpandParent]: true,
[${str}searchValue] : value,
});

  // ---------------------------------监听搜索框输入值，把需要展开的放入列表，存储搜索的值
  onChangeTab = (e, tree, str) => {
    const { value } = e.target;
    const { dataList, dataListExtend } = this.state;
    // const list = this.state[`${str}Datalist`];
    // console.log(list);
    const list = str === 'extend' ? dataListExtend : dataList;
    const expandedKeys = list
      .map(item => {
        if (item.name.indexOf(value) > -1) {
          // && str === "researcher"
          return this.getParentKey(item.key, tree);
        }
        return null;
      })
      .filter((item, i, self) => item && self.indexOf(item) === i);
    if (str === 'extend') {
      this.setState({
        expandedKeys,
        autoExpandParent: true,
        asearchValue: value,
      });
    } else
      this.setState({
        [`${str}expandedKeys`]: expandedKeys,
        [`${str}autoExpandParent`]: true,
        searchValue: value,
      });
  };

定位代码：
onchange的时候已经展开所有找到的数据，定位就是需要把scrollTop的值 修改到该数据所在的位置，可能找到多个数据，这里我设置了一个count，找到第一个就不再做定位了
（这里应该可以做递归方法去实现，我这里的树最多都只有二级就没去琢磨了）

  // ---------------------------------左侧树 ，回车搜索定位功能
  onSearchTab = (e, tree, str, id) => {
    const { searchValue, asearchValue, expandedKeys } = this.state;
    const searchValueCur = str === 'extend' ? asearchValue : searchValue;
    const expandedKeysCur =
      str === 'extend' ? expandedKeys : this.state[`${str}expandedKeys`];
    let count = 1;
    tree.map((item, i) => {
      if (expandedKeysCur.indexOf(item.key) > -1) {
        if (item.children) {
          item.children.map((subitem, n) => {
            if (subitem.name.indexOf(searchValueCur) > -1) {
              // console.log(i,n);
              document.getElementById(id).scrollTop = (i + n + 1) * 32;
              return false;
            }
          });
        } else if (count === 1) {
          document.getElementById(id).scrollTop = i * 32;
          count = 2;
          return false;
        }
      } else if (item.name.indexOf(searchValueCur) > -1) {
        if (count === 1) {
          document.getElementById(id).scrollTop = i * 32;
          count = 2;
        }
      }
    });
  };

实现已被其他数据关联的情况不允许被再次关联：
1、拿到后台数据之后处理好，哪些数据是已被内部行业关联了，
a:不是当前内部行业关联的，设置他的disableCheckbox为true
b:是当前内部行业关联的，则把这个key放入checkedKeys数组中，则可以默认选择
2、在渲染树的时候做限制，如果当前节点disableCheckbox为true时， disableCheckbox={item.disableCheckbox}

代码：
处理数据：

	dispatch({
      type: url,
      payload: param,
      callback: res => {
        if (res && res.data && res.resultCode === '200') {
          // console.log("外部行业树数据", res);
          res.data.map(item => {
            item.name = item.industriesname;
            item.children = item.childs;
            item.key = item.industriescode;
            item.isChild = false;
            if (item.childs) {
              item.childs.map(subitem => {
                subitem.name = subitem.industriesname;
                subitem.key = subitem.industriescode;
                // 如果当前已经被关联过，则放入选中的key
                if (subitem.relateStatus === 'Y') {
                  if (!expandedKeys.find(a => a === item.key)) {
                    expandedKeys.push(item.key);
                  }
                  checkedKeys.push(subitem.industriescode);
                  // 如果没有当前被关联过，并且被别的行业关联过，则放入不可用中
                } else if (subitem.hasUsedStatus === 'Y') {
                  subitem.disableCheckbox = true;
                }
              });
            }
            const ishasDisabledItem = item.childs.find(
              ssItem => ssItem.disableCheckbox === undefined,
            );
            // 如果没有一个可用的，那就设置父节点也是不可用---因为后台并没有很好的处理父元素的选中和不选中
            if (!ishasDisabledItem) {
              item.disableCheckbox = true;
            }
            extendIndustry.push(item);
          });
          // console.log(checkedKeys);
          this.putAllKeyArr(extendIndustry || [], 'extend');
          this.setState({ extendIndustry, checkedKeys, expandedKeys }, () => {
            document.getElementById('scrollTree11').scrollTop = 0;
          });
        }
      },
    });

全部代码：
// 注释太多了，需求改版也频繁就不删里面的代码了

/* eslint-disable no-lonely-if */
/* eslint-disable react/no-did-update-set-state */
/* eslint-disable no-nested-ternary */
/* eslint-disable consistent-return */
/* eslint-disable no-param-reassign */
/* eslint-disable @typescript-eslint/no-unused-expressions */
/* eslint-disable semi */
/* eslint-disable array-callback-return */
//  Modal, Transfer,Button
import React, { Component } from 'react';
import { connect } from 'dva';
import {
  Tree,
  Form,
  Layout,
  Row,
  Col,
  Input,
  Icon,
  Button,
  message,
  Popconfirm,
} from 'antd';
import { deleteIcon } from '@/utils/SvgIcon';

import style from '../IndexDetailManagement/index.less';

const { Search } = Input;
const { Content } = Layout;
const { TreeNode } = Tree;

@connect(({ user }) => ({
  user,
}))
@Form.create()
class MappingRelate extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataList: [],
      dataListShare: [],
      searchValue: '',
      chooseResearcher: '',
      sharesData: [],
      researcherData: [],
      currentHasShares: [],
      btnText: '新增',
      dataSource: [],
      account: '',
      total: 0,
      current: 1,
      pageSize: 40,
      innervalue: '',
      extendIndustry: [],
      saveExtendArr: [],
    };
  }

  // 生命周期 数据加载--------------------获取左侧数据
  componentDidMount() {
    this.getLeftData();
  }

  // 生命周期 数据更新--------------------当弹框变化时，重新获取左侧数据，并刷新input框中的数据
  componentDidUpdate(prevProps) {
    const { industryRadio } = this.props;
    const { industryRadio: previndustryRadio } = prevProps;
    if (industryRadio !== previndustryRadio) {
      this.getLeftData();
      document.getElementById('scrollTree11').scrollTop = 0;
      this.setState({ searchValue: '', asearchValue: '' });
    }
  }

  // ---------------------------------获取左侧列表数据
  getLeftData = () => {
    const { dispatch, industryRadio } = this.props;
    const { current } = this.state;
    let url = 'newsinfo/getResearherAll';
    let param = {};
    let defaultObj = {};
    let phIndusCode = '';
    const selectedKeys = [];
    url = 'newsinfo/insdustryPage';
    param = {
      market: industryRadio,
      researcher: '',
      pageSize: 1000,
      pageNum: current,
    };
    dispatch({
      type: url,
      payload: param,
      callback: res => {
        if (res && res.data && res.resultCode === '200') {
          // console.log("treedata", res.data);  存储内部行业的indusCode，获取外部行业和股票
          if (res.data.list) {
            const { list } = res.data;
            if (list.length) {
              defaultObj = list[0];
              selectedKeys.push(defaultObj.id ? defaultObj.id.toString() : '');
              phIndusCode = defaultObj.indusCode;
            }
            list.map(item => {
              item.name = item.indusName;
              item.key = item.indusCode;
            });
          }
          // console.log(defaultObj);
          this.setState(
            {
              researcherData: res.data.list || [],
              selectedKeys,
              phIndusCode,
            },
            () => {
              this.putAllKeyArr(res.data.list || [], '');
              this.getRightData();
            },
          );
        }
      },
    });
  };

  // ---------------------------------获取右侧列表数据
  getRightData = () => {
    const { dispatch, industryRadio } = this.props;
    let url = 'newsinfo/insdustryPage';
    let param = {};
    const checkedKeys = [];
    const { phIndusCode } = this.state;
    // type === 3时，内部行业与外部行业的映射关系 获取外部行业表格
    url = 'newsinfo/getExternalindustry';
    param = {
      market: industryRadio,
      phIndusCode,
    };
    const expandedKeys = [];
    const extendIndustry = [];
    dispatch({
      type: url,
      payload: param,
      callback: res => {
        if (res && res.data && res.resultCode === '200') {
          // console.log("外部行业树数据", res);
          res.data.map(item => {
            item.name = item.industriesname;
            item.children = item.childs;
            item.key = item.industriescode;
            item.isChild = false;
            // 当前内部行业是否关联了该外部行业  第三个版本不需要判断父节点
            // if (item.relateStatus === "Y") {
            // checkedKeys.push(item.industriescode);
            // 该外部行业是否被关联过，并且不是当前内部行业关联的，应该设置为不可用
            // } else if (item.hasUsedStatus === "Y") {
            // item.disableCheckbox = true;
            // }
            if (item.childs) {
              item.childs.map(subitem => {
                subitem.name = subitem.industriesname;
                subitem.key = subitem.industriescode;
                // 如果当前已经被关联过，则放入选中的key
                if (subitem.relateStatus === 'Y') {
                  if (!expandedKeys.find(a => a === item.key)) {
                    expandedKeys.push(item.key);
                  }
                  checkedKeys.push(subitem.industriescode);
                  // 如果没有当前被关联过，并且被别的行业关联过，则放入不可用中
                } else if (subitem.hasUsedStatus === 'Y') {
                  subitem.disableCheckbox = true;
                }
              });
            }
            const ishasDisabledItem = item.childs.find(
              ssItem => ssItem.disableCheckbox === undefined,
            );
            // 如果没有一个可用的，那就设置父节点也是不可用
            if (!ishasDisabledItem) {
              item.disableCheckbox = true;
            }
            extendIndustry.push(item);
          });
          // console.log(checkedKeys);
          this.putAllKeyArr(extendIndustry || [], 'extend');
          this.setState({ extendIndustry, checkedKeys, expandedKeys }, () => {
            document.getElementById('scrollTree11').scrollTop = 0;
          });
        }
      },
    });
  };

  /** ********************************树型方法与属性 start************************** */
  // ---------------------------------将所有数据保存到数组，方便搜索功能
  putAllKeyArr = (data, str) => {
    const dataList = [];
    data &&
      data.map(item => {
        dataList.push({ name: item.name, key: item.account || item.key });
        item.children &&
          item.children.map(subItem => {
            dataList.push({
              name: subItem.name,
              key: subItem.account || subItem.key,
            });
            subItem.children &&
              subItem.children.map(ssubItem => {
                dataList.push({
                  name: ssubItem.name,
                  key: ssubItem.account || ssubItem.key,
                });
              });
          });
      });
    str === 'extend'
      ? this.setState({ dataListExtend: dataList })
      : this.setState({ dataList });
  };

  // ---------------------------------获取需要展开的父级key
  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 => item.key === key)) {
          parentKey = node.key;
        } else if (this.getParentKey(key, node.children)) {
          parentKey = this.getParentKey(key, node.children);
        }
      }
    }
    return parentKey;
  };

  // ---------------------------------渲染树 ，搜索关键字高亮
  renderTreeNodes = (data, str) => {
    const { types } = this.props;
    const { searchValue, asearchValue } = this.state;
    const svalue = str === 'extend' ? asearchValue : searchValue;
    return (
      data &&
      data.map(item => {
        const uname = item.name;
        // 研究员则获取该研究员的accout为key，内部行业则获取id为key
        let key = types === '1' ? item.account : item.id;
        if (str === 'extend') {
          key = item.industriescode;
        }
        const index = uname.indexOf(svalue);
        const beforeStr = uname.substr(0, index);
        const afterStr = svalue
          ? uname.substr(index + svalue.length)
          : item.name;
        const name =
          index > -1 ? (
            <span>
              {beforeStr}
              <span style={{ color: '#ff6600' }}>{svalue}</span>
              {afterStr}
            </span>
          ) : (
            <span>{uname}</span>
          );
        if (item.children) {
          return (
            <TreeNode
              key={key}
              icon={types === '1' ? <Icon type="user" /> : <Icon type="file" />}
              dataRef={item}
              title={name}
              disableCheckbox={item.disableCheckbox}
            >
              {this.renderTreeNodes(item.children, str)}
            </TreeNode>
          );
        }
        return (
          <TreeNode
            key={key}
            icon={types === '1' ? <Icon type="user" /> : <Icon type="file" />}
            dataRef={item}
            title={name}
            disableCheckbox={item.disableCheckbox}
          />
        );
      })
    );
  };

  // ---------------------------------选中树 右侧
  onCheck = (checkedKeys, info) => {
    const saveExtendArr = [];
    const deleteExtendArr = [];
    // const lastItem = [];
    const {
      node: { props: nodePorps },
    } = info;
    // console.log(nodePorps);
    const { checked } = info;
    // 判断选中的节点中，有无父节点
    // checkedNodesPositions.map(item => {
    //   const { props:subProps } = item.node;
    if (nodePorps.pos.split('-').length >= 3) {
      if (checked) {
        saveExtendArr.push({
          key: nodePorps.dataRef.key,
          name: nodePorps.dataRef.industriesname,
        });
      } else {
        deleteExtendArr.push(nodePorps.dataRef.key);
      }
    } else if (nodePorps.pos.split('-').length <= 2) {
      // 有父节点 在判断其子节点是否有不可用的 禁用的项
      // const isHasDisabledItem = nodePorps.children && nodePorps.children.filter(subitem => subitem.props.disableCheckbox === true);
      // console.log(isHasDisabledItem);
      // 如果没有禁用的项，即全部要传过去  改成不需要传父节点过去  20210315
      // if (checked){
      //   saveExtendArr.push(nodePorps.dataRef && nodePorps.dataRef.key);
      // }
      // else {
      //   deleteExtendArr.push(nodePorps.dataRef && nodePorps.dataRef.key);
      // }
      nodePorps.dataRef &&
        nodePorps.dataRef.childs.map(item => {
          // 如果当前是没有被别的行业关联，并且没有被当前行业关联
          if (
            item.relateStatus !== 'Y' &&
            item.hasUsedStatus !== 'Y' &&
            checked
          ) {
            // saveExtendArr.push(item.key);
            saveExtendArr.push({ key: item.key, name: item.industriesname });
          } else if (item.relateStatus === 'Y' && !checked) {
            deleteExtendArr.push(item.key);
          }
          // if (isHasDisabledItem) {
          //   // 如果有禁用的项，需要把禁用的项剔除
          //   if (checked) {
          //     lastItem = isHasDisabledItem.filter((subitem) => {
          //       return saveExtendArr.indexOf(subitem.key) === -1;
          //     });
          //   }
          //   else {
          //     lastItem = isHasDisabledItem.filter((subitem) => {
          //       return deleteExtendArr.indexOf(subitem.key) === -1;
          //     });
          //   }
          // }
        });
    }
    // console.log(saveExtendArr,deleteExtendArr,);
    // })
    this.setState(
      { checkedKeys, saveExtendArr, checked, deleteExtendArr },
      () => {
        this.onSave();
      },
    );
  };

  // ---------------------------------展开树 左右侧公用
  onExpand = (expandedKeys, str) => {
    // console.log(expandedKeys);
    if (str === 'researcher') {
      this.setState({
        [`${str}expandedKeys`]: expandedKeys,
        [`${str}autoExpandParent`]: false,
      });
    } else {
      this.setState({ expandedKeys, autoExpandParent: false });
    }
  };

  // ---------------------------------左侧树选中（判断是否是子节点），并刷新右侧数据
  onSelect = (selectedKeys, info) => {
    const { props } = info.node;
    // const { target } = info.nativeEvent;
    this.setState({ selectedKeys });
    // console.log("选中的selectkey",);
    const { name, indusCode } = props.dataRef;
    // 如果没有选中值或者 当前不是内部行业与外部行业面板
    if (selectedKeys.length) {
      if (!props.children) {
        document.getElementById('scrollTree11').scrollTop = 0;
        // 是末端节点
        // 当前弹框是内部行业与外部行业 选中了内部行业，可以修改其值，加载右侧外部行业数据列表
        this.setState(
          {
            innervalue: name,
            btnText: '修改',
            isShowInput: true,
            phIndusCode: indusCode,
            asearchValue: '',
          },
          () => {
            this.getRightData();
          },
        );
      }
    } else {
      this.setState({ innervalue: '', btnText: '新增', isShowInput: false });
    }
  };

  // ---------------------------------左侧监听搜索框输入值，把需要展开的放入列表，存储搜索的值
  onChangeTab = (e, tree, str) => {
    const { value } = e.target;
    const { dataList, dataListExtend } = this.state;
    // const list = this.state[`${str}Datalist`];
    // console.log(list);
    const list = str === 'extend' ? dataListExtend : dataList;
    const expandedKeys = list
      .map(item => {
        if (item.name.indexOf(value) > -1) {
          // && str === "researcher"
          return this.getParentKey(item.key, tree);
        }
        return null;
      })
      .filter((item, i, self) => item && self.indexOf(item) === i);
    if (str === 'extend') {
      this.setState({
        expandedKeys,
        autoExpandParent: true,
        asearchValue: value,
      });
    } else
      this.setState({
        [`${str}expandedKeys`]: expandedKeys,
        [`${str}autoExpandParent`]: true,
        searchValue: value,
      });
  };

  // ---------------------------------左侧树 ，回车搜索定位功能
  onSearchTab = (e, tree, str, id) => {
    const { searchValue, asearchValue, expandedKeys } = this.state;
    const searchValueCur = str === 'extend' ? asearchValue : searchValue;
    const expandedKeysCur =
      str === 'extend' ? expandedKeys : this.state[`${str}expandedKeys`];
    let count = 1;
    tree.map((item, i) => {
      if (expandedKeysCur.indexOf(item.key) > -1) {
        if (item.children) {
          item.children.map((subitem, n) => {
            if (subitem.name.indexOf(searchValueCur) > -1) {
              // console.log(i,n);
              document.getElementById(id).scrollTop = (i + n + 1) * 32;
              return false;
            }
          });
        } else if (count === 1) {
          document.getElementById(id).scrollTop = i * 32;
          count = 2;
          return false;
        }
      } else if (item.name.indexOf(searchValueCur) > -1) {
        if (count === 1) {
          document.getElementById(id).scrollTop = i * 32;
          count = 2;
        }
      }
    });
  };
  /** ********************************树型方法与属性 end************************** */

  // ---------------------------------左侧，types为3时添加或者修改内部行业
  onClickAdd = () => {
    this.setState({
      innervalue: '',
      isShowInput: true,
      btnText: '新增',
      selectedKeys: undefined,
    });
  };

  // ---------------------------------左侧，types为3时添加或者修改内部行业 调接口
  onClickSure = () => {
    const { dispatch, industryRadio } = this.props;
    const { innervalue, selectedKeys, researcherData } = this.state;
    const isHasCurrent = researcherData.find(item => item.name === innervalue);
    // console.log(innervalue, selectedKeys, researcherData);
    if (isHasCurrent) {
      message.warning('该行业名称已经存在，请知悉');
      return false;
    }
    if (innervalue.trim() === '') {
      message.warning(
        '请点击左侧加号输入行业名称 或者选择一个内部行业进行操作',
      );
      return false;
    }
    let url = '';
    const param = [];
    // 如果选中了值，再次确认便是修改
    if (selectedKeys && selectedKeys.length) {
      // 修改
      url = 'newsinfo/insdustryUpdate';
      param.push({
        indusName: innervalue,
        id: selectedKeys[0],
      });
    } else {
      // 添加
      url = 'newsinfo/insdustryAdd';
      param.push({
        indusName: innervalue,
        market: industryRadio,
      });
    }
    dispatch({
      type: url,
      payload: param,
      callback: res => {
        if (res && res.resultCode === '200') {
          message.success(res.resultMsg);
          this.getLeftData();
        } else {
          message.error(res.resultMsg);
        }
      },
    });
  };

  // ---------------------------------左侧，types为3时，删除内部行业
  delete = () => {
    const { selectedKeys } = this.state;
    const {
      dispatch,
      // user: { currentUser },
    } = this.props;
    if (!selectedKeys || !selectedKeys.length) {
      message.warning('请选中一个行业后进行删除操作');
      return false;
    }
    // const param = {
    //   updateBy: currentUser.username,
    //   ids: selectedKeys,
    // };
    dispatch({
      type: 'newsinfo/insdustryDelete',
      payload: selectedKeys,
      callback: res => {
        if (res && res.resultCode === '200') {
          message.success(res.resultMsg);
          this.getLeftData();
        } else {
          message.error(res.resultMsg);
        }
      },
    });
  };

  // ---------------------------------左侧types为3时，内部行业输入值
  innerChange = e => {
    this.setState({ innervalue: e.target.value });
  };

  // ---------------------------------右侧 按钮保存映射关系  ------- 新增内外部行业的名称加上记得
  onSave = () => {
    const {
      dispatch,
      industryRadio,
      // user: { currentUser },
    } = this.props; // checkedKeys handleOk
    const { phIndusCode, saveExtendArr, checked, deleteExtendArr } = this.state;
    const param = [];
    let url = '';
    let arr = '';
    // console.log(saveExtendArr);
    if (checked) {
      arr = saveExtendArr;
      url = 'newsinfo/saveExtendInner';
      arr.map(item => {
        param.push({
          market: industryRadio,
          phIndusCode,
          // updateBy: currentUser.username,
          // createBy: currentUser.username,
          outIndusCode: item.key,
          outIndusName: item.name,
        });
      });
    } else {
      url = 'newsinfo/deleteExtendInner';
      arr = deleteExtendArr;
      arr.map(item => {
        param.push({
          market: industryRadio,
          phIndusCode,
          // updateBy: currentUser.username,
          outIndusCode: item,
        });
      });
    }
    dispatch({
      type: url,
      payload: param,
      callback: res => {
        if (res && res.resultCode === '200') {
          this.getRightData();
          message.success(res.resultMsg);
        } else {
          message.error(res.resultMsg);
        }
      },
    });
  };

  onKeyUp = e => {
    if (e.keyCode === 13) {
      this.onClickSure();
    }
  };

  render() {
    const {
      researcherexpandedKeys,
      researcherautoExpandParent,
      researcherData,
      innervalue,
      isShowInput,
      btnText,
      selectedKeys,
      searchValue,
      checkedKeys,
      expandedKeys,
      autoExpandParent,
      extendIndustry,
      asearchValue,
    } = this.state;
    const { titleLeft, titleRight } = this.props;
    // const height = 'calc(100vh - 340x)';
    const classnameStr = btnText === '添加' ? '' : 'buleButton';
    const signText = '* 禁用表示该内部行业已与其他外部行业关联，请知悉';
    // console.log(expandedKeys);
    return (
      <Content className={style.IndexManagement}>
        <div className="tabTop notabelTextIndex">
          <Row>
            <Col span={24} style={{ padding: 20 }}>
              <Row>
                <Col
                  span={8}
                  className="colspan  tablebg"
                  style={{
                    height: 'calc(100vh - 180px)',
                    padding: '20px',
                    borderRadius: 4,
                  }}
                >
                  <div>
                    <h2>
                      {titleLeft}
                      {/* <span
                        style={{
                          display: "inline-block", textAlign: "center", border: "1px solid #3D4A63", width: "32px", height: "32px",
                          lineHeight:"32px",float:"right",marginLeft:"10px"
                        }}
                        onClick={this.onClickSure} >
                        <Icon
                          className="collapse"
                          component={deleteIcon}
                        />
                      </span> */}
                      <Popconfirm
                        title="确定删除该行业?"
                        onConfirm={this.delete}
                        // onCancel={cancel}
                        okText="确定"
                        cancelText="取消"
                      >
                        {/* <Button
                          // onClick={this.delete}
                          style={{ marginLeft: 15, padding: '0 10px' }}
                          className="greyButton"
                        >
                          删除
                        </Button> */}
                        <span
                          style={{
                            display: 'inline-block',
                            textAlign: 'center',
                            border: '1px solid #3D4A63',
                            width: '32px',
                            height: '32px',
                            lineHeight: '32px',
                            float: 'right',
                            marginLeft: '10px',
                            marginBottom: 10,
                          }}
                        >
                          <Icon
                            className="collapse"
                            component={deleteIcon}
                            // onClick={this.handleMenuCollapse}
                          />
                        </span>
                      </Popconfirm>
                    </h2>
                    <Search
                      placeholder="回车搜索内部行业"
                      value={searchValue}
                      onSearch={e =>
                        this.onSearchTab(
                          e,
                          researcherData,
                          'researcher',
                          'scrollTree11',
                        )
                      }
                      onChange={e =>
                        this.onChangeTab(e, researcherData, 'researcher')
                      }
                    />
                    <div style={{ marginTop: 10 }}>
                      <span
                        style={{
                          fontSize: 30,
                          marginRight: 10,
                          color: '#3D4D66',
                          verticalAlign: 'middle',
                        }}
                        onClick={this.onClickAdd}
                      >
                        <Icon type="plus-square" />
                      </span>
                      {isShowInput && (
                        <Input
                          size="default"
                          style={{ width: 195, marginRight: 15 }}
                          value={innervalue}
                          onKeyUp={this.onKeyUp}
                          onChange={this.innerChange}
                        />
                      )}
                      <Button
                        className={classnameStr}
                        type="default"
                        style={{ padding: '0 10px' }}
                        onClick={this.onClickSure}
                      >
                        {btnText}
                      </Button>
                    </div>

                    <div
                      className="tablebgTree"
                      id="scrollTree11"
                      style={{ height: 'calc(100vh - 340px)' }}
                    >
                      <Tree
                        // showLine
                        showIcon
                        onExpand={e => this.onExpand(e, 'researcher')}
                        expandedKeys={researcherexpandedKeys}
                        autoExpandParent={researcherautoExpandParent}
                        onSelect={this.onSelect}
                        selectedKeys={selectedKeys}
                        // switcherIcon={types === "1"?<Icon type="user" />:<Icon type="file" />}
                        style={{ marginLeft: -23 }}
                      >
                        {this.renderTreeNodes(researcherData, 'researcher')}
                      </Tree>
                    </div>
                  </div>
                </Col>

                <Col
                  span={16}
                  style={{
                    height: 'calc(100vh - 180px)',
                    padding: '20px',
                    width: 'calc(66% - 20px)',
                    marginLeft: 20,
                    borderRadius: 4,
                  }}
                  className="colspan tablebg"
                >
                  <h2 style={{ marginBottom: 22 }}>{titleRight}</h2>
                  <Search
                    placeholder="回车搜索外部行业"
                    value={asearchValue}
                    onSearch={e =>
                      this.onSearchTab(
                        e,
                        extendIndustry,
                        'extend',
                        'scrollTree2',
                      )
                    }
                    onChange={e =>
                      this.onChangeTab(e, extendIndustry, 'extend')
                    }
                  />

                  <div
                    style={{
                      marginBottom: 10,
                      marginTop: 10,
                      color: '#D5783C',
                    }}
                  >
                    {signText}
                  </div>
                  <div
                    className="tablebgTree"
                    id="scrollTree2"
                    style={{ height: 'calc(100vh - 330px)' }}
                  >
                    <Tree
                      checkable
                      onExpand={this.onExpand}
                      expandedKeys={expandedKeys}
                      autoExpandParent={autoExpandParent}
                      onCheck={this.onCheck}
                      checkedKeys={checkedKeys}
                      // onSelect={onSelect}
                      // selectedKeys={selectedKeys}
                    >
                      {this.renderTreeNodes(extendIndustry, 'extend')}
                    </Tree>
                  </div>
                </Col>
              </Row>
              <div>
                {/* <Button className="buleButton" style={{float:"right",marginRight:20,marginTop:65}} onClick = {this.onSave}>确定</Button> */}
              </div>
            </Col>
          </Row>
        </div>
      </Content>
    );
  }
}

export default MappingRelate;