EmployeePicker.js
2.8 KB
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
80
81
82
83
84
85
86
87
88
import React,{PropTypes} from 'react';
import {connect} from 'react-redux';
import cx from 'classnames';
import l from './employeePicker.les';
import {empOrgTree,searchEmp,filterOfEmployee} from '../../utils/commonUtils';
import {Switch,Row,Col,Icon,Popconfirm,Tree,Input} from 'antd';
const TreeNode = Tree.TreeNode;
const Search = Input.Search;
class EmployeePicker extends React.Component {
constructor(props) {
super(props);
this.searchName=this.searchName.bind(this);
this.selectTreeNode=this.selectTreeNode.bind(this);
this.state={
search:'',
expandAll:false
}
}
static propTypes = {
onSelect:PropTypes.func
}
static defaultProps ={
onSelect:()=>{}
}
selectTreeNode(info,obj){
this.props.onSelect(info,obj,obj.node.props.is_leaf);
}
searchName(value){
this.setState({
search:value,
expandAll:value?true:false
})
}
render(){
const {employees,organizations}=this.props;
const need=filterOfEmployee(employees);
const {search,expandAll}=this.state;
const {orgTree,orgEmps=[],expandedKeys=[]}=empOrgTree(searchEmp(need,search),organizations);
const getTreeNode = (data=[]) => {
const children=[];
data.map( (item, index) => {
if (item.children ){
children.push(
<TreeNode {...item} key={item.key} title={<span><i className={cx('upvi-icon')} style={{color:'#ffb461',paddingRight:'5px'}}></i>{item.title+'('+ (item.uuid&&orgEmps[item.uuid]?orgEmps[item.uuid].length:0)+')'}</span>}>
{getTreeNode(item.children)}
</TreeNode>
)
}else {
children.push(<TreeNode {...item} key={item.key} uuid={item.uuid} title={<span><i className={cx(l.not)}>{item.title}</i> </span>}/>)
}
})
return children
}
return (
<div>
<div className={cx(l.searchBox)}>
<Search
placeholder="请输入搜索内容"
style={{ width: '100%' }} size="large"
onSearch={this.searchName} />
</div>
<div className={cx(l.cpnName)}>
<i className={cx('upvi-icon',l.colorD)}></i> {orgTree.name}<i className={cx(l.numPeo)}>({employees.length})</i>
</div>
<div className={cx(l.treeNode)}>
{expandAll&&
<Tree onSelect={this.selectTreeNode} defaultExpandAll={true}>
{ getTreeNode(orgTree.children) }
</Tree>
}
{!expandAll&&<Tree onSelect={this.selectTreeNode} >
{ getTreeNode(orgTree.children) }
</Tree> }
</div>
</div>
)
}
}
const mapState = (state) => {
const {hrSetting:{employees,organizations}} = state;
return {
employees,
organizations
}
};
export default connect(mapState)(EmployeePicker);