AppTypeTree.js 3.9 KB
Newer Older
1 2 3 4 5 6
/**
 * 钟是志
 * 2019年3月29日
 * 一个年份加上校区-学院-专业的树
 * */

7
import { Input, Tree } from 'antd';
8 9
import React, { Component, Fragment } from 'react';
import Shell from '@/baseComponent/Shell';
10
import { getAppTypeList, getListByTreeList } from '@/webPublic/Services';
11
import { connect } from 'dva';
12
import { deepCopy } from '@/webPublic/zyd_public/utils/utils';
13
import BlockTitle from '@/baseComponent/BlockTitle';
14 15 16 17

const { TreeNode } = Tree;

@connect(({ global }) => ({
18
	sysCode: global.system.sysCode,
19 20
}))
export default class AppTypeTree extends Component {
21 22 23 24 25 26 27
	constructor() {
		super();
		this.state = {
			treeListData: [],
			name: '',
		};
	}
28

29 30 31
	handleChange = (newSearch) => {
		this.props.changeSearch(newSearch);
	};
32

33 34 35 36 37 38 39 40 41 42 43 44 45
	pushChildrenData = (treeListData, data, parentId) => {
		for (let item of treeListData) {
			if (item.id === parentId) {
				item.children = data;
				this.setState({
					treeListData: deepCopy(treeListData),
				});
				break;
			} else if (item.children && item.children.length) {
				this.pushChildrenData(item.children, data, parentId);
			}
		}
	};
46

47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
	getLeafData = (parentId) => {
		const { groupId } = this.props;
		if (!groupId) {
			return null;
		}
		getListByTreeList({
			parentId,
			groupId,
			cacheKey: Math.random(),
		}).then((res) => {
			for (let item of res) {
				if (!item.isLeaf) {
					this.getLeafData(item.id);
				}
			}
			if (res.length) {
				this.pushChildrenData(this.state.treeListData, res, parentId);
			}
		});
	};
67

68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114
	getList = (name = null) => {
		const { groupId } = this.props;
		const { parentId } = this.state;
		if (!groupId) {
			return null;
		}
		getListByTreeList({
			parentId,
			groupId,
			name,
			cacheKey: Math.random(),
		}).then((treeListData) => {
			if (!treeListData || !treeListData.length) {
				this.setState({
					treeListData: [],
					loading: false,
				});
				this.handleChange({
					selectKey: '',
				});
			} else {
				for (let item of treeListData) {
					if (!item.isLeaf) {
						this.getLeafData(item.id);
					}
				}
				this.handleChange({
					selectKey: treeListData[0].id + '',
				});
				this.setState({
					treeListData,
					loading: false,
				});
			}
		});
		setTimeout(() => {
			if (document.getElementById('list-table-dom')) {
				let tableDom = document.getElementById('list-table-dom');
				this.setState({
					heightSet:
						document.body.clientHeight - 150 > tableDom.offsetHeight + 164
							? document.body.clientHeight - 150
							: tableDom.offsetHeight + 164,
				});
			}
		}, 1000);
	};
115

116 117 118
	componentDidMount() {
		this.getList();
	}
119

120 121 122 123 124
	componentDidUpdate(prevProps, prevState) {
		if (prevProps.groupId !== this.props.groupId) {
			this.getList();
		}
	}
125

126 127 128 129 130 131
	onSelect = (selectedKeys, info) => {
		this.handleChange({
			year: this.props.year,
			selectKey: selectedKeys[0],
		});
	};
132

133 134 135 136 137 138 139 140 141 142
	treeNodeList = (data) => {
		let dom = data.map((item) => {
			return (
				<TreeNode title={item.title} isLeaf={item.isLeaf} key={item.id}>
					{item.children && this.treeNodeList(item.children)}
				</TreeNode>
			);
		});
		return dom;
	};
143

144 145 146 147 148 149 150 151 152 153 154 155
	inputList = () => {
		const { name } = this.state;
		return (
			<Input.Search
				placeHolder={'应用名称搜索'}
				onSearch={(value) => {
					this.getList(value);
				}}
				style={{ marginLeft: '10px', width: '150px' }}
			/>
		);
	};
156

157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181
	render() {
		const { treeListData, loading, heightSet } = this.state;
		const { selectKey } = this.props;
		return (
			<Fragment>
				<Shell
					styleShell={{
						borderRight: '1px solid rgba(210,210,210,1)',
						minHeight: heightSet || document.body.clientHeight - 150,
						backgroundColor: '#fff',
						overflowX: 'auto',
						marginTop: 0,
					}}>
					<BlockTitle title={'应用'} isSmall={true} dom={this.inputList()} />
					<Tree
						onSelect={this.onSelect}
						selectedKeys={[selectKey]}
						style={{ minHeight: '400px,' }}
						disabled={loading}>
						{this.treeNodeList(treeListData)}
					</Tree>
				</Shell>
			</Fragment>
		);
	}
182
}