#

Junjie

2025-02-14 ac4341ea6b66ae02427d39d35f41d42d78b2eb2e

 zy-asrs-flow/src/pages/system/role/components/scope.jsx

@@ -2,30 +2,33 @@
import {
    ProForm,
    ProFormDigit,
    ProFormText,
    ProFormSelect,
} from '@ant-design/pro-components';
import { Col, Form, Modal, Row, Checkbox, Skeleton, Tree } from 'antd';
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 { } = props;
    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 rootMenu = { id: 0, name: '全部', value: 0, children: [] };
            rootMenu.children = res.data;
            // const treeData = transformTreeData([rootMenu]);
            const treeData = transformTreeData(res.data);
            setMenuTreeData(treeData);
            // const treeAllKeys = getTreeAllKeys(treeData);
            // setDeptExpandedKeys(treeAllKeys);
            const treeAllKeys = getTreeAllKeys(treeData);
            setMenuTreeAllKeys(treeAllKeys);
            setMenuExpandedKeys(treeAllKeys);
        }).catch((err) => {
            console.error(err);
            setMenuTreeLoading(false);
@@ -33,6 +36,7 @@
    }

    useEffect(() => {
        setMenuIds(originMenuIds);
        form.resetFields();
        form.setFieldsValue({
            ...props.values
@@ -50,74 +54,101 @@
    }

    const handleFinish = async (values) => {
        props.onSubmit({ ...values });
        props.onSubmit({ ...values, menuIds });
    }

    return (
        <>
            <Modal
                title="Scope"
            <Drawer
                title={`${intl.formatMessage({ id: 'page.assign.permission', defaultMessage: '分配权限' })} - ${name ? name : '-'}`}
                width={640}
                forceRender
                destroyOnClose
                open={props.open}
                onCancel={handleCancel}
                onOk={handleOk}
                onClose={handleCancel}
                styles={{
                    body: {
                        paddingBottom: 80,
                    },
                }}
                extra={
                    <Space>
                        <Button onClick={handleCancel}>Cancel</Button>
                        <Button onClick={handleOk} type="primary">
                            Submit
                        </Button>
                    </Space>
                }
            >
                <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 }}
                <Card>
                    <ProForm
                        form={form}
                        submitter={false}
                        onFinish={handleFinish}
                        layout="horizontal"
                        grid={true}
                    >
                        <ProFormDigit
                            name="id"
                            disabled
                            hidden={true}
                        />

                        <Row gutter={[16, 16]}>
                            <Col md={24}>
                                <Checkbox.Group
                                    options={[
                                        { label: '展开/折叠', value: 'deptExpand' },
                                        { label: '全选/全不选', value: 'deptNodeAll' },
                                    ]}
                                    onChange={(checkedValue) => {
                                        console.log(checkedValue);
                                    }} />
                            </Col>
                            <Col md={24}>
                                {menuTreeLoading ? (
                                    <Skeleton active />
                                ) : (
                                    <Tree
                                        checkable
                                        onExpand={(expandedKeys, { expanded, node }) => {

                                        }}
                                        // expandedKeys={expandedKeys}
                                        // autoExpandParent={autoExpandParent}
                                        // onCheck={onCheck}
                                        // checkedKeys={checkedKeys}
                                        // onSelect={onSelect}
                                        // selectedKeys={selectedKeys}
                                        treeData={menuTreeData}
                                    />
                                )}
                            </Col>
                        </Row>

                    </ProForm.Item>
                </ProForm>
            </Modal>
                        <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>
        </>
    )
}