import { Form, Input, Modal, Tree, Button, Spin } from 'antd';
|
import { forwardRef, useImperativeHandle, useState } from 'react';
|
import { useEffect } from 'react';
|
import { getTree, getAddTree } from '../service';
|
const formItemLayout = {
|
labelCol: { span: 6 },
|
wrapperCol: { span: 18 },
|
};
|
|
|
const AddAndEdit = ({ visible, onSave, onUpdate, onCancel }, ref) => {
|
const [form] = Form.useForm();
|
const [data, setData] = useState({})
|
const [treeData, setTreeData] = useState([]);//权限树
|
const [treeSeletKeys, setTreeSeletKeys] = useState([]); //勾选权限
|
const [detailType, setDetailType] = useState(false);//是否详情
|
const [spinning, setSpinning] = useState(false);
|
|
useEffect(() => {
|
// 获取权限树
|
getAddTree().then(res => {
|
setTreeData(res.data)
|
})
|
}, [])
|
|
useImperativeHandle(ref, () => {
|
return {
|
refreshData: (data, type) => {
|
setDetailType(type || false)
|
if (data.id) {
|
// 获取角色的权限树
|
getTree(data.id).then(res => {
|
setTreeSeletKeys(res.data.systemMenuIds || []);
|
})
|
}
|
setData(data)
|
form.setFieldsValue(data);
|
},
|
clean: () => {
|
setSpinning(false)
|
},
|
};
|
});
|
|
// 保存
|
const okHandle = () => {
|
form.validateFields().then((values) => {
|
setSpinning(true)
|
values.systemMenuIds = treeSeletKeys
|
delete values.tree
|
if (data.id) {
|
values.id = data.id
|
onUpdate(values)
|
} else {
|
onSave(values);
|
}
|
});
|
};
|
|
// 选中树
|
const onCheck = (e, row) => {
|
let seletKeys = e.checked;
|
treeData.find(item => {
|
if (item.children) {
|
let arr1 = item.children.find((item1) => {//循环子路由
|
if (item1.children) {
|
let arr2 = item1.children.find((item2) => {//循环子路由下按钮
|
return item2.id == row.node.id;
|
});
|
if (row.checked) {
|
if (arr2 && !seletKeys.includes(item1.id)) {
|
seletKeys.push(item1.id);
|
}
|
if (arr2 && !seletKeys.includes(item.id)) {
|
seletKeys.push(item.id);
|
}
|
} else {
|
let isCheck = item1.children.find((item2) => seletKeys.includes(item2.id));
|
if (!isCheck) {
|
let arr = seletKeys.filter((it) => it != item1.id);
|
seletKeys = arr;
|
}
|
}
|
}
|
return item1.id == row.node.id;
|
});
|
if (row.checked) {
|
if (arr1 && !seletKeys.includes(item.id)) {
|
seletKeys.push(item.id);
|
}
|
} else {
|
let isCheck = item.children.find((item1) => seletKeys.includes(item1.id));
|
if (!isCheck) {
|
let arr = seletKeys.filter((it) => it != item.id);
|
seletKeys = arr;
|
}
|
}
|
}
|
return item.id == row.node.id;
|
});
|
if (row.node.children.length != 0) {
|
row.node.children.map((item) => {
|
if (row.checked) {
|
if (!seletKeys.includes(item.id)) {
|
seletKeys.push(item.id);
|
}
|
} else {
|
seletKeys = seletKeys.filter((item1) => item1 != item.id);
|
}
|
if (item.children.length != 0) {
|
item.children.map((item1) => {
|
if (row.checked) {
|
if (!seletKeys.includes(item1.id)) {
|
seletKeys.push(item1.id);
|
}
|
} else {
|
seletKeys = seletKeys.filter((item2) => item2 != item1.id);
|
}
|
});
|
}
|
});
|
}
|
setTreeSeletKeys(seletKeys);
|
};
|
|
return (
|
<Modal
|
getContainer={false}
|
width="20%"
|
destroyOnClose
|
title={detailType ? '权限详情' : data.id ? '编辑权限' : '添加权限'}
|
open={visible}
|
onCancel={() => onCancel(false)}
|
afterClose={() => {
|
form.resetFields()
|
setTreeSeletKeys([])
|
}}
|
footer={
|
!detailType ?
|
[
|
<Button key="back" onClick={() => onCancel(false)}>取消</Button>,
|
<Button key="submit" type="primary" onClick={okHandle}>
|
确定
|
</Button>
|
]
|
:
|
<Button key="back" onClick={() => onCancel(false)}>关闭</Button>
|
}
|
>
|
<Form layout="horizontal" {...formItemLayout} form={form} scrollToFirstError>
|
<Form.Item
|
name="name"
|
label="权限名称"
|
rules={[{ required: true, message: '请输入权限名称' }]}
|
>
|
<Input disabled={detailType} placeholder='请输入权限名称' />
|
</Form.Item>
|
<Form.Item
|
name="tree"
|
label="角色权限"
|
rules={[{
|
required: true,
|
validator: (rule, value) => {
|
return new Promise((resolve, reject) => {
|
if (value) {
|
resolve('');
|
} else {
|
if (treeSeletKeys.length === 0) {
|
reject(new Error('请选择角色权限'));
|
}
|
resolve('');
|
}
|
})
|
}
|
}]}>
|
<Tree
|
checkable
|
checkStrictly
|
checkedKeys={treeSeletKeys}
|
treeData={treeData}
|
disabled={detailType}
|
fieldNames={{ title: 'name', key: 'id' }}
|
onCheck={onCheck}
|
/>
|
</Form.Item>
|
</Form>
|
<Spin spinning={spinning} fullscreen />
|
</Modal >
|
);
|
};
|
|
export default forwardRef(AddAndEdit);
|
