feat: 初始化项目并完成基础功能开发
- 完成项目初始化
- 实现用户注册、登录功能
- 完成用户管理与权限管理模块
- 开发后端 Tracker 服务器项目管理接口
- 实现日志管理接口
Change-Id: Ia4bde1c9ff600352a7ff0caca0cc50b02cad1af7
diff --git a/react-ui/src/pages/System/Role/components/DataScope.tsx b/react-ui/src/pages/System/Role/components/DataScope.tsx
new file mode 100644
index 0000000..a3dcce0
--- /dev/null
+++ b/react-ui/src/pages/System/Role/components/DataScope.tsx
@@ -0,0 +1,233 @@
+import React, { useEffect, useState } from 'react';
+import { Checkbox, Col, Form, Modal, Row, Tree } from 'antd';
+import { FormattedMessage, useIntl } from '@umijs/max';
+import { Key, ProForm, ProFormDigit, ProFormSelect, ProFormText } from '@ant-design/pro-components';
+import { DataNode } from 'antd/es/tree';
+import { CheckboxValueType } from 'antd/es/checkbox/Group';
+
+/* *
+ *
+ * @author whiteshader@163.com
+ * @datetime 2023/02/06
+ *
+ * */
+
+export type FormValueType = any & Partial<API.System.Dept>;
+
+export type DataScopeFormProps = {
+ onCancel: (flag?: boolean, formVals?: FormValueType) => void;
+ onSubmit: (values: FormValueType) => Promise<void>;
+ open: boolean;
+ values: Partial<API.System.Role>;
+ deptTree: DataNode[];
+ deptCheckedKeys: string[];
+};
+
+const DataScopeForm: React.FC<DataScopeFormProps> = (props) => {
+ const [form] = Form.useForm();
+
+ const { deptTree, deptCheckedKeys } = props;
+ const [dataScopeType, setDataScopeType] = useState<string | undefined>('1');
+ const [deptIds, setDeptIds] = useState<string[] | {checked: string[], halfChecked: string[]}>([]);
+ const [deptTreeExpandKey, setDeptTreeExpandKey] = useState<Key[]>([]);
+ const [checkStrictly, setCheckStrictly] = useState<boolean>(true);
+
+
+ useEffect(() => {
+ setDeptIds(deptCheckedKeys);
+ form.resetFields();
+ form.setFieldsValue({
+ roleId: props.values.roleId,
+ roleName: props.values.roleName,
+ roleKey: props.values.roleKey,
+ dataScope: props.values.dataScope,
+ });
+ setDataScopeType(props.values.dataScope);
+ }, [props.values]);
+
+ const intl = useIntl();
+ const handleOk = () => {
+ form.submit();
+ };
+ const handleCancel = () => {
+ props.onCancel();
+ };
+ const handleFinish = async (values: Record<string, any>) => {
+ props.onSubmit({ ...values, deptIds } as FormValueType);
+ };
+
+ const getAllDeptNode = (node: DataNode[]) => {
+ let keys: any[] = [];
+ node.forEach(value => {
+ keys.push(value.key);
+ if(value.children) {
+ keys = keys.concat(getAllDeptNode(value.children));
+ }
+ });
+ return keys;
+ }
+
+ const deptAllNodes = getAllDeptNode(deptTree);
+
+
+ const onDeptOptionChange = (checkedValues: CheckboxValueType[]) => {
+ if(checkedValues.includes('deptExpand')) {
+ setDeptTreeExpandKey(deptAllNodes);
+ } else {
+ setDeptTreeExpandKey([]);
+ }
+ if(checkedValues.includes('deptNodeAll')) {
+ setDeptIds(deptAllNodes);
+ } else {
+ setDeptIds([]);
+ }
+
+ if(checkedValues.includes('deptCheckStrictly')) {
+ setCheckStrictly(false);
+ } else {
+ setCheckStrictly(true);
+ }
+ };
+
+ return (
+ <Modal
+ width={640}
+ title={intl.formatMessage({
+ id: 'system.user.auth.role',
+ defaultMessage: '分配角色',
+ })}
+ open={props.open}
+ destroyOnClose
+ forceRender
+ onOk={handleOk}
+ onCancel={handleCancel}
+ >
+ <ProForm
+ form={form}
+ grid={true}
+ layout="horizontal"
+ onFinish={handleFinish}
+ initialValues={{
+ login_password: '',
+ confirm_password: '',
+ }}
+ >
+
+ <ProFormDigit
+ name="roleId"
+ label={intl.formatMessage({
+ id: 'system.role.role_id',
+ defaultMessage: '角色编号',
+ })}
+ colProps={{ md: 12, xl: 12 }}
+ placeholder="请输入角色编号"
+ disabled
+ hidden={true}
+ rules={[
+ {
+ required: false,
+ message: <FormattedMessage id="请输入角色编号！" defaultMessage="请输入角色编号！" />,
+ },
+ ]}
+ />
+ <ProFormText
+ name="roleName"
+ label={intl.formatMessage({
+ id: 'system.role.role_name',
+ defaultMessage: '角色名称',
+ })}
+ disabled
+ placeholder="请输入角色名称"
+ rules={[
+ {
+ required: true,
+ message: <FormattedMessage id="请输入角色名称！" defaultMessage="请输入角色名称！" />,
+ },
+ ]}
+ />
+ <ProFormText
+ name="roleKey"
+ label={intl.formatMessage({
+ id: 'system.role.role_key',
+ defaultMessage: '权限字符串',
+ })}
+ disabled
+ placeholder="请输入角色权限字符串"
+ rules={[
+ {
+ required: true,
+ message: <FormattedMessage id="请输入角色权限字符串！" defaultMessage="请输入角色权限字符串！" />,
+ },
+ ]}
+ />
+ <ProFormSelect
+ name="dataScope"
+ label='权限范围'
+ initialValue={'1'}
+ placeholder="请输入用户性别"
+ valueEnum={{
+ "1": "全部数据权限",
+ "2": "自定数据权限",
+ "3": "本部门数据权限",
+ "4": "本部门及以下数据权限",
+ "5": "仅本人数据权限"
+ }}
+ rules={[
+ {
+ required: true,
+ },
+ ]}
+ fieldProps={{
+ onChange: (value) => {
+ setDataScopeType(value);
+ },
+ }}
+ />
+ <ProForm.Item
+ name="deptIds"
+ label={intl.formatMessage({
+ id: 'system.role.auth',
+ defaultMessage: '菜单权限',
+ })}
+ required={dataScopeType === '1'}
+ hidden={dataScopeType !== '1'}
+ >
+ <Row gutter={[16, 16]}>
+ <Col md={24}>
+ <Checkbox.Group
+ options={[
+ { label: '展开/折叠', value: 'deptExpand' },
+ { label: '全选/全不选', value: 'deptNodeAll' },
+ // { label: '父子联动', value: 'deptCheckStrictly' },
+ ]}
+ onChange={onDeptOptionChange} />
+ </Col>
+ <Col md={24}>
+ <Tree
+ checkable={true}
+ checkStrictly={checkStrictly}
+ expandedKeys={deptTreeExpandKey}
+ treeData={deptTree}
+ checkedKeys={deptIds}
+ defaultCheckedKeys={deptCheckedKeys}
+ onCheck={(checkedKeys: any, checkInfo: any) => {
+ console.log(checkedKeys, checkInfo);
+ if(checkStrictly) {
+ return setDeptIds(checkedKeys.checked);
+ } else {
+ return setDeptIds({checked: checkedKeys, halfChecked: checkInfo.halfCheckedKeys});
+ }
+ }}
+ onExpand={(expandedKeys: Key[]) => {
+ setDeptTreeExpandKey(deptTreeExpandKey.concat(expandedKeys));
+ }}
+ />
+ </Col>
+ </Row>
+ </ProForm.Item>
+ </ProForm>
+ </Modal>
+ );
+};
+
+export default DataScopeForm;