antd实现动态树形搜索

技术文章 1年前 (2020) 完美者
1,197 0

标签:rom   ring   include   exp   cto   ice   inpu   rop   span   

/**
 * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
 * Copyright (c) <spug.dev@gmail.com>
 * Released under the AGPL-3.0 License.
 */
import React from ‘react‘;
import { Link } from ‘react-router-dom‘;
import { observer } from ‘mobx-react‘;
import { Modal, Button, Menu, Spin, Icon, Input, Tree } from ‘antd‘;
import store from ‘./store‘;
import styles from ‘./index.module.css‘;
import envStore from ‘pages/config/environment/store‘;
import lds from ‘lodash‘;

const TreeNode = Tree.TreeNode;
/*
const x = 5;//递归n个子类
const y = 5;//递归处理每层前n个目录
const z = 0;//n层目录
const gData = [];
const treeData = [
  {
    key: "aaaa",
    title: "aaaaa",
    children: [
      {
        key: ‘1‘,
        title: "mall-all"
      }
    ]
  },
  {
    key: "本地测试",
    title: "本地测试",
    children: [
      {
        key: ‘6‘,
        title: "test4"
      },
      {
        key: ‘5‘,
        title: "test3"
      },
      {
        key: ‘4‘,
        title: "test2"
      },
      {
        key: ‘3‘,
        title: "test1"
      }
    ]
  }
]
const treeData = [];

const generateData = (_level, _preKey, _tns) => {
  const preKey = _preKey || ‘0‘;
  const tns = _tns || gData;

  const children = [];
  for (let i = 0; i < x; i++) {
    const key = `${preKey}-${i}`;
    tns.push({ title: key, key });
    if (i < y) {
      children.push(key);
    }
  }
  if (_level < 0) {
    return tns;
  }
  const level = _level - 1;
  children.forEach((key, index) => {
    tns[index].children = [];
    return generateData(level, key, tns[index].children);
  });
};
generateData(z);

const dataList = [];
const generateList = (data) => {
  for (let i = 0; i < data.length; i++) {
    const node = data[i];
    const key = node.key;
    dataList.push({ key, title: key });
    if (node.children) {
      generateList(node.children);
    }
  }
};
generateList(treeData);
*/

@observer
class SelectApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      env_id: 0,
      search: ‘‘,
      expandedKeys: [],
      searchValue: ‘‘,
      autoExpandParent: true,
      treeData: [],
      dataList: [],
    }
  }
  componentDidMount() {
    store.loadDeploys()
    if (envStore.records.length === 0) {
      envStore.fetchRecords().then(this._initEnv)
    } else {
      this._initEnv()
    }
  }

  componentWillUnmount() {
    store.refs = {}
  }

  _initEnv = () => {
    if (envStore.records.length) {
      this.setState({ env_id: envStore.records[0].id })
    }
  };

  handleClick = (deploy) => {
    store.record = { deploy_id: deploy.id, app_host_ids: deploy.host_ids };
    if ([‘1‘, ‘3‘].includes(deploy.extend)) {
      store.ext1Visible = true
    } else {
      store.ext2Visible = true
    }
    store.addVisible = false
  };

  handleRef = (el, id) => {
    if (el && !store.refs.hasOwnProperty(id)) {
      setTimeout(() => store.refs[id] = el.scrollWidth > el.clientWidth, 200)
    }
  };

  generateList = () => {
    const data = store.deploys
    //console.log(data)
    //this.setState({treeData:data})
    for (let i = 0; i < data.length; i++) {
      const node = data[i];
      const key = node.key;
      this.state.dataList.push({ key, title: key });
      if (node.children) {
        this.generateList(node.children);
      }
    }
  };

  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;
  };

  onExpand = (expandedKeys) => {
    this.setState({
      expandedKeys,
      autoExpandParent: false,
    });
  }
  onChange = (e) => {
    const value = e.target.value;
    const treeData = store.deploys;
    const dataList = store.deploys;
    const expandedKeys = dataList.map((item) => {
      if (item.key.indexOf(value) > -1) {
        return this.getParentKey(item.key, treeData);
      }
      return null;
    }).filter((item, i, self) => item && self.indexOf(item) === i);
    this.setState({
      expandedKeys,
      searchValue: value,
      autoExpandParent: true,
    });
  };

  renderTreeNode = data => data.map((item) => {
    const { searchValue } = this.state;
    const index = item.key.indexOf(searchValue);
    const beforeStr = item.key.substr(0, index);
    const afterStr = item.key.substr(index + searchValue.length);
    const title = index > -1 ? (
      <span>
        {beforeStr}
        <span style={{ color: ‘#f50‘ }}>{searchValue}</span>
        {afterStr}
      </span>
    ) : <span>{item.key}</span>;
    if (item.children) {
      return (
        <TreeNode key={item.key} title={title}>
          {this.renderTreeNode(item.children)}
        </TreeNode>
      );
    }
    return <TreeNode key={item.key} title={title} />;
  });

  render() {
    //console.log(JSON.stringify(store.deploys))
    const { env_id } = this.state;
    //this.state.treeData= treeData;
    //this.setState({gData:treeData})
    //console.log(store.deploys)

    const treeData = store.deploys;

    /*if (this.state.search) {
      records = records.filter(x => x[‘app_name‘].toLowerCase().includes(this.state.search.toLowerCase()))
    }*/
    const { expandedKeys, autoExpandParent } = this.state;
    return (
      <Modal
        visible
        width={800}
        maskClosable={false}
        title="选择应用"
        bodyStyle={{ padding: 0 }}
        onCancel={() => store.addVisible = false}
        footer={null}>
        <div className={styles.container}>
          <div className={styles.left}>
            <Spin spinning={envStore.isFetching}>
              <Menu
                mode="inline"
                selectedKeys={[String(env_id)]}
                style={{ border: ‘none‘ }}
                onSelect={({ selectedKeys }) => this.setState({ env_id: selectedKeys[0] })}>
                {envStore.records.map(item => <Menu.Item key={item.id}>{item.name}</Menu.Item>)}
              </Menu>
            </Spin>
          </div>

          <div className={styles.right}>
          <Spin spinning={store.isLoading}>
            <Input.Search style={{ marginBottom: 8 }} placeholder="Search" onChange={this.onChange} />
            <Tree
              onExpand={this.onExpand}
              expandedKeys={expandedKeys}
              autoExpandParent={autoExpandParent}
            >
              {this.renderTreeNode(treeData)}
            </Tree>

          </Spin>
          </div>
        </div >
      </Modal >
    )
  }
}

export default SelectApp

antd实现动态树形搜索

标签:rom   ring   include   exp   cto   ice   inpu   rop   span   

原文地址:https://www.cnblogs.com/tiannan/p/13679602.html

版权声明:完美者 发表于 2020-09-18 3:09:45。
转载请注明:antd实现动态树形搜索 | 完美导航

暂无评论

暂无评论...