AppTypeTreeAsyncLoad.js 2.9 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
import React, { Fragment, useEffect, useState } from 'react';
import { Input, Tree } from 'antd';
import Shell from '@/baseComponent/Shell';
import BlockTitle from '@/baseComponent/BlockTitle';
import { getListByTreeList } from '@/webPublic/Services';

const { TreeNode } = Tree;


const renderTreeNodes = data =>
  data.map(item => {
    if (item.children) {
      return (
        <TreeNode title={item.title} key={item.key} dataRef={item}>
          {renderTreeNodes(item.children)}
        </TreeNode>
      );
    }
    return <TreeNode key={item.id} {...item} dataRef={item} />;
  });

export default function AppTypeTreeAsyncLoad(props) {
	const { groupId, changeSearch, selectKey } = props;
	const [treeData, setTreeData] = useState([]);
	const [loading, setLoading] = useState(false);
	const [name, setName] = useState(''); // 搜索应用

  // useEffect(() => {
  //   if(groupId){
  //     setName('');
  //   }
  // }, [groupId]);

	useEffect(
		() => {
			if (groupId) {
			  setLoading(true);
				getListByTreeList({
					groupId,
					name,
				}).then((res) => {
          setLoading(false);
          if (res && res.length) {
						setTreeData(res);
						changeSearch({
							selectKey: res[0].id + '',
						});
					} else {
						setTreeData([]);
						changeSearch({
							selectKey: '',
						});
					}
				});
			}
		},
		[groupId, name],
	);

	const onSelect = (selectedKeys, info) => {
    changeSearch({
      selectKey: selectedKeys[0],
    });
  };

	const inputList = () => {
    return (
      <Input.Search
        placeholder={'应用名称搜索'}
        onSearch={(value) => {
          setName(value);
        }}
        style={{ marginLeft: '10px', width: '150px' }}
      />
    );
  };

	const onLoadData = treeNode =>
    new Promise(resolve => {
钟是志's avatar
钟是志 committed
80
      if (treeNode.props.children || !treeNode.props.pos) {
81 82 83 84 85 86 87 88 89 90 91 92 93 94
        resolve();
        return;
      }
      getListByTreeList({
        groupId,
        name,
        parentId: treeNode.props.id,
      }).then((res) => {
        if(res && res.length){
          treeNode.props.dataRef.children = res.map((g) => {
            return {
              title: g.title,
              key: g.id,
              isLeaf: g.isLeaf,
钟是志's avatar
钟是志 committed
95
              id: g.id,
96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126
            };
          });
        }
        setTreeData([...treeData]);
        resolve();
      });
    });

	return (
    <Fragment>
      <Shell
        styleShell={{
          borderRight: '1px solid rgba(210,210,210,1)',
          minHeight: document.body.clientHeight - 150,
          backgroundColor: '#fff',
          overflowX: 'auto',
          marginTop: 0,
        }}>
        <BlockTitle title={'应用'} isSmall={true} dom={inputList()} />
        <Tree
          onSelect={onSelect}
          selectedKeys={[selectKey]}
          style={{ minHeight: '400px,' }}
          loadData={onLoadData}
          disabled={loading}>
          {renderTreeNodes(treeData)}
        </Tree>
      </Shell>
    </Fragment>
  )
}