flat:初始化
This commit is contained in:
史典卓
233
src/pages/System/Role/components/DataScope.tsx
Normal file
233
src/pages/System/Role/components/DataScope.tsx
Normal file
@@ -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;
|
||||
125
src/pages/System/Role/components/UserSelectorModal.tsx
Normal file
125
src/pages/System/Role/components/UserSelectorModal.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Modal } from 'antd';
|
||||
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||
import { ActionType, ParamsType, ProColumns, ProTable, RequestData } from '@ant-design/pro-components';
|
||||
import { getDictValueEnum } from '@/services/system/dict';
|
||||
import DictTag from '@/components/DictTag';
|
||||
|
||||
|
||||
/* *
|
||||
*
|
||||
* @author whiteshader@163.com
|
||||
* @datetime 2023/02/10
|
||||
*
|
||||
* */
|
||||
|
||||
export type DataScopeFormProps = {
|
||||
onCancel: () => void;
|
||||
onSubmit: (values: React.Key[]) => void;
|
||||
open: boolean;
|
||||
params: ParamsType;
|
||||
request?: (params: Record<string, any>) => Promise<Partial<RequestData<API.System.User>>>;
|
||||
};
|
||||
|
||||
const UserSelectorModal: React.FC<DataScopeFormProps> = (props) => {
|
||||
|
||||
const actionRef = useRef<ActionType>();
|
||||
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
|
||||
const [statusOptions, setStatusOptions] = useState<any>([]);
|
||||
|
||||
useEffect(() => {
|
||||
getDictValueEnum('sys_normal_disable').then((data) => {
|
||||
setStatusOptions(data);
|
||||
});
|
||||
}, [props]);
|
||||
|
||||
const intl = useIntl();
|
||||
const handleOk = () => {
|
||||
props.onSubmit(selectedRowKeys);
|
||||
};
|
||||
const handleCancel = () => {
|
||||
props.onCancel();
|
||||
};
|
||||
|
||||
const columns: ProColumns<API.System.User>[] = [
|
||||
{
|
||||
title: <FormattedMessage id="system.user.user_id" defaultMessage="用户编号" />,
|
||||
dataIndex: 'userId',
|
||||
valueType: 'text',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: <FormattedMessage id="system.user.user_name" defaultMessage="用户账号" />,
|
||||
dataIndex: 'userName',
|
||||
valueType: 'text',
|
||||
},
|
||||
{
|
||||
title: <FormattedMessage id="system.user.nick_name" defaultMessage="用户昵称" />,
|
||||
dataIndex: 'nickName',
|
||||
valueType: 'text',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: <FormattedMessage id="system.user.phonenumber" defaultMessage="手机号码" />,
|
||||
dataIndex: 'phonenumber',
|
||||
valueType: 'text',
|
||||
},
|
||||
{
|
||||
title: <FormattedMessage id="system.user.status" defaultMessage="帐号状态" />,
|
||||
dataIndex: 'status',
|
||||
valueType: 'select',
|
||||
hideInSearch: true,
|
||||
valueEnum: statusOptions,
|
||||
render: (_, record) => {
|
||||
return (<DictTag enums={statusOptions} value={record.status} />);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: <FormattedMessage id="system.user.create_time" defaultMessage="创建时间" />,
|
||||
dataIndex: 'createTime',
|
||||
valueType: 'dateRange',
|
||||
hideInSearch: true,
|
||||
render: (_, record) => {
|
||||
return (<span>{record.createTime.toString()} </span>);
|
||||
},
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<Modal
|
||||
width={800}
|
||||
title={intl.formatMessage({
|
||||
id: 'system.role.auth.user',
|
||||
defaultMessage: '选择用户',
|
||||
})}
|
||||
open={props.open}
|
||||
destroyOnClose
|
||||
onOk={handleOk}
|
||||
onCancel={handleCancel}
|
||||
>
|
||||
<ProTable<API.System.User>
|
||||
headerTitle={intl.formatMessage({
|
||||
id: 'pages.searchTable.title',
|
||||
defaultMessage: '信息',
|
||||
})}
|
||||
actionRef={actionRef}
|
||||
rowKey="userId"
|
||||
key="userList"
|
||||
search={{
|
||||
labelWidth: 120,
|
||||
}}
|
||||
toolbar={{}}
|
||||
params={props.params}
|
||||
request={props.request}
|
||||
columns={columns}
|
||||
rowSelection={{
|
||||
onChange: (selectedRowKeys: React.Key[]) => {
|
||||
setSelectedRowKeys(selectedRowKeys);
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserSelectorModal;
|
||||
Reference in New Issue
Block a user