1,列表上右鍵事件 treeNodeonRightClick,代碼中有
2,自定義右鍵菜單內容 getNodeTreeRightClickMenu,代碼中有
3,return下面寫入右鍵菜單內容 {this.getNodeTreeRightClickMenu()}
4,效果圖
5,詳細代碼
import React, { PureComponent } from 'react';
import { findDOMNode } from 'react-dom';
import moment from '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 styles from './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()
class DepartmentList 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 (
<TreeNode title={item.name} key={item.id} dataRef={item} data-key={item.id} data-title={item.categoryName} >
{this.renderTreeNodes(item.children)}
</TreeNode>
);
}
return <TreeNode {...item} dataRef={item} />;
});
// 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 = (
<div style={tmpStyle} className={styles.selfrightmenu} onMouseLeave={this.hideRight}>
<Link to={{ pathname: '/SetUp/department/edit', query: { id: id } }}>
<a>編輯</a>
</Link>
<Popconfirm title="確定刪除此記錄?" onConfirm={() => this.deleteDepartment(id)}>
<a href="javascript:;"><a>刪除</a></a>
</Popconfirm>
<Link to={{ pathname: '/SetUp/userSet/edit', query: { department_id: id } }}>
<a href="javascript:;">添加用戶</a>
</Link>
<Link to={{ pathname: '/SetUp/department/edit', query: { parent_id: id } }}>
<a style={{ borderBottom: '1px solid gainsboro', paddingBottom: '10px', display: ' block', }}>添加部門</a>
</Link>
<Button onClick={this.hideRight} style={{ marginLeft: '15px', marginTop: '10px' }}>取消</Button>
</div>
);
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 (
<div className={styles.listback}>
<div style={{ width: '35%', float: 'left' }}>
<h3>部門樹</h3>
<Tree
showLine
expandedKeys={this.state.expandedKeys}
onSelect={this.onSelect}
onExpand={this.onExpand}
onRightClick={this.treeNodeonRightClick}
>
{this.renderTreeNodes(departmentsListTree)}
</Tree>
{this.getNodeTreeRightClickMenu()}
</div>
</div>
);
}
}
function mapStateToProps(state) {
return { ...state.department };
}
export default connect(mapStateToProps)(DepartmentList);