From ac4341ea6b66ae02427d39d35f41d42d78b2eb2e Mon Sep 17 00:00:00 2001
From: Junjie <fallin.jie@qq.com>
Date: 星期五, 14 二月 2025 10:08:32 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/pages/system/role/components/scope.jsx | 163 ++++++++++++++++++++++++++++++++----------------------
1 files changed, 97 insertions(+), 66 deletions(-)
diff --git a/zy-asrs-flow/src/pages/system/role/components/scope.jsx b/zy-asrs-flow/src/pages/system/role/components/scope.jsx
index 84c3b84..b6b5d89 100644
--- a/zy-asrs-flow/src/pages/system/role/components/scope.jsx
+++ b/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>
</>
)
}
--
Gitblit v1.9.1