import React, { useState, useRef, useEffect } from 'react';
|
import {
|
ProForm,
|
ProFormDigit,
|
} from '@ant-design/pro-components';
|
import { DownOutlined } from '@ant-design/icons';
|
import { Col, Form, Modal, Row, Checkbox, Skeleton, Tree, Drawer, Space, Button, Card } from 'antd';
|
import Http from '@/utils/http';
|
import { FormattedMessage, useIntl } from '@umijs/max';
|
import { transformTreeData, getTreeAllKeys } from '@/utils/tree-util'
|
|
const Scope = (props) => {
|
const intl = useIntl();
|
const [form] = Form.useForm();
|
const { originMenuIds, values: { name } } = 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);
|
setMenuExpandedKeys(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) => {
|
props.onSubmit({ ...values, menuIds });
|
}
|
|
return (
|
<>
|
<Drawer
|
title={`${intl.formatMessage({ id: 'page.assign.permission', defaultMessage: '分配权限' })} - ${name ? name : '-'}`}
|
width={640}
|
forceRender
|
destroyOnClose
|
open={props.open}
|
onClose={handleCancel}
|
styles={{
|
body: {
|
paddingBottom: 80,
|
},
|
}}
|
extra={
|
<Space>
|
<Button onClick={handleCancel}>Cancel</Button>
|
<Button onClick={handleOk} type="primary">
|
Submit
|
</Button>
|
</Space>
|
}
|
>
|
<Card>
|
<ProForm
|
form={form}
|
submitter={false}
|
onFinish={handleFinish}
|
layout="horizontal"
|
grid={true}
|
>
|
<ProFormDigit
|
name="id"
|
disabled
|
hidden={true}
|
/>
|
|
<ProForm.Item
|
name="deptIds"
|
label={intl.formatMessage({ id: 'page.permission.menu', defaultMessage: '权限菜单' })}
|
colProps={{ md: 24, xl: 24 }}
|
>
|
<Row gutter={[16, 16]}>
|
<Col md={24}>
|
<Checkbox.Group
|
options={[
|
{ label: intl.formatMessage({ id: 'page.role.assign.ec', defaultMessage: '展开/折叠' }), value: 'expandAll' },
|
{ label: intl.formatMessage({ id: 'page.role.assign.sd', defaultMessage: '全选/全不选' }), value: 'checkAll' },
|
]}
|
defaultValue={['expandAll']}
|
onChange={(values) => {
|
if (values.includes('expandAll')) {
|
setMenuExpandedKeys(menuTreeAllKeys);
|
} else {
|
setMenuExpandedKeys([]);
|
}
|
if (values.includes('checkAll')) {
|
setMenuIds(menuTreeAllKeys)
|
} else {
|
setMenuIds([]);
|
}
|
}} />
|
</Col>
|
<Col md={24}>
|
{menuTreeLoading ? (
|
<Skeleton active />
|
) : (
|
<Tree
|
showLine
|
blockNode
|
checkable
|
switcherIcon={<DownOutlined />}
|
treeData={menuTreeData}
|
expandedKeys={menuExpandedKeys}
|
onExpand={(expandedKeys) => {
|
setMenuExpandedKeys(expandedKeys)
|
}}
|
checkedKeys={menuIds}
|
onCheck={(checkedKeys, checkInfo) => {
|
return setMenuIds({
|
checked: checkedKeys,
|
halfChecked: checkInfo.halfCheckedKeys // 父节点
|
});
|
}}
|
/>
|
)}
|
</Col>
|
</Row>
|
</ProForm.Item>
|
</ProForm>
|
</Card>
|
</Drawer>
|
</>
|
)
|
}
|
|
export default Scope;
|
