antd实现动态树形搜索

/**  * 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
上一篇:this.$refs.proup is not a function


下一篇:ant-design-vue中的a-directory-tree更换图标