import React, { PureComponent } from 'react';
import { findDOMNode }from 'react-dom';
import momentfrom 'moment';
import { Link }from 'react-router-dom';
import { connect }from 'dva';
import { Row, Col, Table, Radio, Input, Form, Button, Icon, DatePicker, Select, Modal, Popconfirm, Badge, Dropdown, Tree, Menu, Popover, }from 'antd';
import stylesfrom './departmentList.less';const FormItem =Form.Item;const RadioButton =Radio.Button;const RadioGroup =Radio.Group;const SelectOption =Select.Option;const { Search, TextArea } =Input;const { TreeNode } =Tree;const treeData =[{}];
@Form.create()classDepartmentList extends PureComponent {
state={
expandedKeys: ['1', '2', '4'],
autoExpandParent:true,
checkedKeys: [],
selectedKeys: [],
value2:'Apple',
treeData: [],
department_id:'',
rightClickNodeTreeItem: {
pageX:'',
pageY:'',
id:'',
categoryName:'',
},
display:'block',
};
componentDidMount() {const departmentsListTree = this.props.departmentList;this.setState({
treeData: departmentsListTree,
});
}//展開
onExpand = (expandedKeys, expanded, record) =>{//console.log('onExpand', expandedKeys);
this.setState({
expandedKeys,
autoExpandParent:false,
});
};//選擇節點
onSelect = (selectedKeys, info) =>{
console.log('selected', selectedKeys, info);const departmentId = info.selectedNodes[0].props.dataRef.id;//console.log('departmentId', departmentId);
const { dispatch } = this.props;
dispatch({ type:'department/userRole', payload: { department_id: departmentId } });//console.log('id',info.selectedNodes[0].props.dataRef.id);
};//讀取子節點
renderTreeNodes = data =>data.map(item=>{if(item.children) {return({this.renderTreeNodes(item.children)});
}return ;
});//tree清單上右鍵事件
treeNodeonRightClick = e =>{this.setState({
display:'block',
rightClickNodeTreeItem: {
pageX: e.event.pageX,
pageY: e.event.pageY,
id: e.node.props['data-key'],
categoryName: e.node.props['data-title'],
},
});//console.log("id::",e.node.props["title"])
};//點選取消隐藏
hideRight = e =>{this.setState({
display:'none',
});
console.log(this.state);
};//自定義右鍵菜單内容
getNodeTreeRightClickMenu = () =>{//alert(33)
const { pageX, pageY, id } = { ...this.state.rightClickNodeTreeItem };//console.log("右鍵菜單id:",id);
const tmpStyle ={
position:'absolute',
left: `${pageX+ 40}px`,
top: `${pageY- 12}px`,
display:this.state.display,
};const menu =(
編輯
this.deleteDepartment(id)}>
删除
添加使用者
添加部門
取消
);return this.state.rightClickNodeTreeItem == null ? '': menu;
};
render() {const formItemLayout ={
labelCol: {
xs: { span:20},
sm: { span:6},
},
wrapperCol: {
xs: { span:20},
sm: { span:12},
},
};const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;const modalVisible = this.props.modalVisible;const { dispatch } = this.props;const departmentsListTree = this.props.departmentList;const { checkedKeys, selectedValue, treeData, checkNodes, expandedKeys } = this.state;return(
部門樹
showLine
expandedKeys={this.state.expandedKeys}
onSelect={this.onSelect}
onExpand={this.onExpand}
onRightClick={this.treeNodeonRightClick}>{this.renderTreeNodes(departmentsListTree)}
{this.getNodeTreeRightClickMenu()} );
}
}
function mapStateToProps(state) {return{ ...state.department };
}
exportdefault connect(mapStateToProps)(DepartmentList);