有一个用react写的后台管理系统,需要给账号赋予不同的角色组,角色组代表着不同的权限。antd中的Tree插件可以实现权限的显示获取。
<Tree
checkable
onCheck={this.onCheck.bind(this)} // 选择事件
onExpand={this.onExpand.bind(this)} // 展开事件
treeData={ruleList} // 内容显示
/>
比较麻烦的时候,如果只选择了增删查改子节点,是不会将父节点也自动选择的,所以需要自己在事件中进行处理。可以在info中获取父节点,然后赋值给一个变量。
// 展开
onExpand=(expandedKeys) => {
let _this = this
_this.setState({
expandedKeys
})
};
// 选择
onCheck = (checkedKeys, info) => {
let _this = this
_this.formBox.current.setFieldsValue({
rules: checkedKeys
});
_this.setState({
checkedKeysFather: info.halfCheckedKeys
})
};
最后在提交的时候对变量进行处理即可。
添加的全部代码:
import React, { Component } from 'react';
import { withRouter } from "react-router-dom";
import { Button, message, Form, Input, Tree } from 'antd';
import { } from '@ant-design/icons';
import { addRule } from '../../../static/js/api';
import { } from '../../../static/js/file';
import { } from '../../../static/js/cookie';
import { InsertWrapper } from './style.js';
const rules = [{ required: true }];
class insertRule extends Component {
constructor(props){
super(props);
this.state = {
ruleList: [], // 全部列表
checkedKeys: [], // 选中节点,不包括父节点
expandedKeys: [], // 展开节点
checkedKeysFather: [], // 选中节点,包括父节点
}
}
formBox = React.createRef();
// 查询全部权限
getRule(){
let list = JSON.parse(sessionStorage.getItem("eng_rule"))
if(list.length>0){
for(let i=0;i<list.length;i++){
list[i].key = list[i].id.toString()
if(list[i].children.length>0){
for(let j=0;j<list[i].children.length;j++){
list[i].children[j].key = list[i].children[j].id.toString()
if(list[i].children[j].children){
for(let k=0;k<list[i].children[j].children.length;k++){
list[i].children[j].children[k].key = list[i].children[j].children[k].id.toString()
}
}
}
}
}
}
this.setState({
ruleList: list
})
};
// 展开
onExpand=(expandedKeys) => {
let _this = this
_this.setState({
expandedKeys
})
};
// 选择
onCheck = (checkedKeys, info) => {
let _this = this
_this.formBox.current.setFieldsValue({
rules: checkedKeys
});
_this.setState({
checkedKeysFather: info.halfCheckedKeys
})
};
// 保存
InsertFinish(values){
let _this = this
let father = _this.state.checkedKeysFather
if(father.length===0){
}else{
for(let i=0;i<father.length;i++){
values.rules.push(father[i])
}
}
};
// 渲染
componentDidMount(){
this.getRule()
};
render() {
const { ruleList } = this.state;
return (
<InsertWrapper>
<Form ref={this.formBox} name="update-ref" onFinish={this.InsertFinish.bind(this)} layout='horizontal'>
<Form.Item name="name" label="名称" rules={rules}>
<Input placeholder="请输入名称" autoComplete="off" />
</Form.Item>
<Form.Item name="rules" label="规则" rules={rules}>
<Tree
checkable
onCheck={this.onCheck.bind(this)}
onExpand={this.onExpand.bind(this)}
treeData={ruleList}
/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
保存
</Button>
</Form.Item>
</Form>
</InsertWrapper>
);
}
}
export default withRouter(insertRule);
编辑的全部代码:
import React, { Component } from 'react';
import { withRouter } from "react-router-dom";
import { Button, message, Form, Input, Tree, Spin } from 'antd';
import { } from '@ant-design/icons';
import { detailRule, updateRule } from '../../../static/js/api';
import { } from '../../../static/js/file';
import { } from '../../../static/js/cookie';
import { InsertWrapper } from './style.js';
const rules = [{ required: true }];
class insertRule extends Component {
constructor(props){
super(props);
this.state = {
loading: true, // 懒加载
id: '',
ruleList: [], // 全部列表
checkedKeys: [], // 选中节点,不包括父节点
expandedKeys: [], // 展开节点
checkedKeysFather: [], // 选中节点,包括父节点
}
}
formBox = React.createRef();
// 查询全部权限
getRule(){
let list = JSON.parse(sessionStorage.getItem("eng_rule"))
if(list.length>0){
for(let i=0;i<list.length;i++){
list[i].key = list[i].id.toString()
if(list[i].children.length>0){
for(let j=0;j<list[i].children.length;j++){
list[i].children[j].key = list[i].children[j].id.toString()
if(list[i].children[j].children){
for(let k=0;k<list[i].children[j].children.length;k++){
list[i].children[j].children[k].key = list[i].children[j].children[k].id.toString()
}
}
}
}
}
}
this.setState({
ruleList: list
})
};
// 获取详情
getDetail(id){
let _this = this
let postData = {
id
}
detailRule(postData).then(res=>{
if(res.code===1){
let rulesKey = ''
let checkedKeysFather = []
if(res.data.rules===null){
rulesKey = ''
}else{
rulesKey = res.data.rules.split(',')
for(let i=0;i<_this.state.ruleList.length;i++){
for(let j=0;j<rulesKey.length;j++){
if(_this.state.ruleList[i].id.toString()===rulesKey[j]){
checkedKeysFather.push(rulesKey.splice(j, 1)[0])
}
}
}
}
console.log(rulesKey)
_this.formBox.current.setFieldsValue({
name: res.data.name,
rules: rulesKey
});
_this.setState({
checkedKeys: rulesKey,
checkedKeysFather,
id,
loading: false
})
}
})
};
// 展开
onExpand=(expandedKeys) => {
let _this = this
_this.setState({
expandedKeys
})
};
// 选择
onCheck = (checkedKeys, info) => {
let _this = this
let father = []
if(info.checked===false){
father = info.halfCheckedKeys
}else{
if(info.halfCheckedKeys){
if(info.halfCheckedKeys.length===0){
father = []
}else{
father = info.halfCheckedKeys
}
}else{
father = []
}
}
_this.formBox.current.setFieldsValue({
rules: checkedKeys
});
_this.setState({
checkedKeys,
checkedKeysFather: father
})
};
// 保存
InsertFinish(values){
let _this = this
let father = _this.state.checkedKeysFather
if(father.length===0){
}else{
for(let i=0;i<father.length;i++){
values.rules.push(father[i])
}
}
};
// 渲染
componentDidMount(){
this.getRule()
this.getDetail(this.props.comment)
};
UNSAFE_componentWillReceiveProps(nextProps) {
this.getRule()
if(this.props.comment === nextProps.comment){
this.getDetail(this.props.comment)
}else{
// 重新调用接口
this.getDetail(nextProps.comment)
}
return true;
}
render() {
const { ruleList, checkedKeys, expandedKeys, loading } = this.state;
return (
<InsertWrapper>
<Spin spinning={loading}>
<Form ref={this.formBox} name="update-ref" onFinish={this.InsertFinish.bind(this)} layout='horizontal'>
<Form.Item name="name" label="名称" rules={rules}>
<Input placeholder="请输入名称" autoComplete="off" />
</Form.Item>
<Form.Item name="rules" label="规则" rules={rules}>
<Tree
checkable
checkedKeys={checkedKeys}
expandedKeys={expandedKeys}
onCheck={this.onCheck.bind(this)}
onExpand={this.onExpand.bind(this)}
treeData={ruleList}
/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
保存
</Button>
</Form.Item>
</Form>
</Spin>
</InsertWrapper>
);
}
}
export default withRouter(insertRule);