import React, { useState, useRef, useEffect } from 'react';
|
import {
|
ProForm,
|
ProFormDigit,
|
} from '@ant-design/pro-components';
|
import { Col, Form, Modal, Row, Checkbox, Skeleton, Tree } from 'antd';
|
import Http from '@/utils/http';
|
import { transformTreeData, getTreeAllKeys } from '@/utils/tree-util'
|
|
const Scope = (props) => {
|
const [form] = Form.useForm();
|
const { originMenuIds } = props;
|
const [menuTreeLoading, setMenuTreeLoading] = useState(false);
|
const [menuTreeData, setMenuTreeData] = useState([]);
|
const [menuExpandedKeys, setMenuExpandedKeys] = useState([]);
|
const [menuIds, setMenuIds] = useState([]);
|
|
const [menuTreeAllKeys, setMenuTreeAllKeys] = useState([]);
|
|
const loadMenuTree = (param) => {
|
setMenuTreeLoading(true);
|
Http.doPostPromise('/api/menu/tree', param, (res) => {
|
setMenuTreeLoading(false);
|
const treeData = transformTreeData(res.data);
|
setMenuTreeData(treeData);
|
const treeAllKeys = getTreeAllKeys(treeData);
|
setMenuTreeAllKeys(treeAllKeys);
|
}).catch((err) => {
|
console.error(err);
|
setMenuTreeLoading(false);
|
})
|
}
|
|
useEffect(() => {
|
setMenuIds(originMenuIds);
|
form.resetFields();
|
form.setFieldsValue({
|
...props.values
|
})
|
|
loadMenuTree();
|
}, [form, props])
|
|
const handleCancel = () => {
|
props.onCancel();
|
};
|
|
const handleOk = () => {
|
form.submit();
|
}
|
|
const handleFinish = async (values) => {
|
console.log({ ...values, menuIds }); return
|
props.onSubmit({ ...values, menuIds });
|
}
|
|
return (
|
<>
|
<Modal
|
title="Scope"
|
width={640}
|
forceRender
|
destroyOnClose
|
open={props.open}
|
onCancel={handleCancel}
|
onOk={handleOk}
|
>
|
<ProForm
|
form={form}
|
submitter={false}
|
onFinish={handleFinish}
|
layout="horizontal"
|
grid={true}
|
>
|
<ProFormDigit
|
name="id"
|
disabled
|
hidden={true}
|
/>
|
|
<ProForm.Item
|
name="deptIds"
|
label="菜单权限"
|
colProps={{ md: 24, xl: 24 }}
|
>
|
|
<Row gutter={[16, 16]}>
|
<Col md={24}>
|
<Checkbox.Group
|
options={[
|
{ label: '展开/折叠', value: 'expandAll' },
|
{ label: '全选/全不选', value: 'checkAll' },
|
]}
|
onChange={(values) => {
|
if (values.includes('expandAll')) {
|
setMenuExpandedKeys(menuTreeAllKeys);
|
} else {
|
setMenuExpandedKeys([]);
|
}
|
if (values.includes('checkAll')) {
|
|
} else {
|
|
}
|
}} />
|
</Col>
|
<Col md={24}>
|
{menuTreeLoading ? (
|
<Skeleton active />
|
) : (
|
<Tree
|
checkable
|
treeData={menuTreeData}
|
expandedKeys={menuExpandedKeys}
|
onExpand={(expandedKeys) => {
|
setMenuExpandedKeys(expandedKeys)
|
}}
|
checkedKeys={menuIds}
|
onCheck={(checkedKeys, checkInfo) => {
|
return setMenuIds({
|
checked: checkedKeys,
|
halfChecked: checkInfo.halfCheckedKeys // 父节点
|
});
|
}}
|
// defaultCheckedKeys={onSelect}
|
/>
|
)}
|
</Col>
|
</Row>
|
|
</ProForm.Item>
|
</ProForm>
|
</Modal>
|
</>
|
)
|
}
|
|
export default Scope;
|
