| | |
|---|
| | | import React, { useState, useRef, useEffect } from 'react'; |
|---|
| | | import { |
|---|
| | | ProForm, |
|---|
| | | ProFormDigit, |
|---|
| | | } from '@ant-design/pro-components'; |
|---|
| | | import { Col, Form, Modal, Row, Checkbox, Skeleton, Tree, Drawer, Space, Button, Card } from 'antd'; |
|---|
| | | import Http from '@/utils/http'; |
|---|
| | | import { transformTreeData, getTreeAllKeys } from '@/utils/tree-util' |
|---|
| | | |
|---|
| | | const Scope = (props) => { |
|---|
| | | 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) => { |
|---|
| | | console.log({ ...values, menuIds }); return |
|---|
| | | props.onSubmit({ ...values, menuIds }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | return ( |
|---|
| | | <> |
|---|
| | | <Drawer |
|---|
| | | title={`分配权限 - ${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="菜单权限" |
|---|
| | | colProps={{ md: 24, xl: 24 }} |
|---|
| | | > |
|---|
| | | |
|---|
| | | <Row gutter={[16, 16]}> |
|---|
| | | <Col md={24}> |
|---|
| | | <Checkbox.Group |
|---|
| | | options={[ |
|---|
| | | { label: '展开/折叠', value: 'expandAll' }, |
|---|
| | | { label: '全选/全不选', value: 'checkAll' }, |
|---|
| | | ]} |
|---|
| | | defaultValue={['expandAll']} |
|---|
| | | 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> |
|---|
| | | </Card> |
|---|
| | | </Drawer> |
|---|
| | | </> |
|---|
| | | ) |
|---|
| | | } |
|---|
| | | |
|---|
| | | 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; |
|---|
