用户管理
This commit is contained in:
jlzhangyx5
@ -164,12 +164,13 @@ const Index: React.FC<{}> = () => {
|
|||||||
options={false}
|
options={false}
|
||||||
rowKey="orgId"
|
rowKey="orgId"
|
||||||
size="small"
|
size="small"
|
||||||
// pagination={{
|
pagination={{
|
||||||
// defaultPageSize: 10,
|
defaultPageSize: 10,
|
||||||
// showSizeChanger: false,
|
showSizeChanger: true,
|
||||||
// onChange: (page, pageSize) => pageDataSet({ pageNo: page, pageSize: pageSize }),
|
showQuickJumper: true,
|
||||||
// onShowSizeChange: (current, size) => pageDataSet({ pageNo: current, pageSize: size }),
|
size: 'default',
|
||||||
// }}
|
showTotal: (total) => <>{`共${total}条`}</>,
|
||||||
|
}}
|
||||||
pagination={false}
|
pagination={false}
|
||||||
toolBarRender={() => [
|
toolBarRender={() => [
|
||||||
<Button onClick={() => { handleAdd() }} type="primary">
|
<Button onClick={() => { handleAdd() }} type="primary">
|
||||||
|
|||||||
290
src/pages/System/User/index.tsx
Normal file
290
src/pages/System/User/index.tsx
Normal file
@ -0,0 +1,290 @@
|
|||||||
|
import React, { useState, useRef, useMemo, useEffect } from 'react';
|
||||||
|
import { message, Modal, Input, Form, PageHeader, Button, Spin, Tree, Checkbox, Row, Col } from 'antd';
|
||||||
|
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
|
||||||
|
import { getPage, getDataById, allocationIF, assignsRoles, updateRole } from './service';
|
||||||
|
import { fetchAllDepartment } from '../Department/service';
|
||||||
|
import { getDicData } from '@/utils/session';
|
||||||
|
const { Search } = Input;
|
||||||
|
const entrust: React.FC<{}> = () => {
|
||||||
|
const [roleModalForm] = Form.useForm();
|
||||||
|
const [open, setOpen] = useState<boolean>(false);
|
||||||
|
const actionRef = useRef<ActionType>();
|
||||||
|
const [spin, spinSet] = useState<boolean>(false);
|
||||||
|
const [roles, setRoles] = useState<any>([]);
|
||||||
|
//查询分页数据
|
||||||
|
const [pageData, pageDataSet] = useState<any>({
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10
|
||||||
|
});
|
||||||
|
const layout = {
|
||||||
|
labelCol: { span: 6 },
|
||||||
|
wrapperCol: { span: 13 },
|
||||||
|
};
|
||||||
|
useEffect(() => {
|
||||||
|
getDepartmentList();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
//委托列表
|
||||||
|
const columns: ProColumns<any>[] = [
|
||||||
|
{ title: '序号', valueType: 'index', width: 50, },
|
||||||
|
{ title: '用户名', dataIndex: 'name', },
|
||||||
|
{ title: '用户账号', dataIndex: 'employeeNumber' },
|
||||||
|
{ title: '用户Id', dataIndex: 'userId' },
|
||||||
|
{ title: '部门', dataIndex: 'orgName', hideInSearch: true },
|
||||||
|
{ title: '邮箱', dataIndex: 'email' },
|
||||||
|
{
|
||||||
|
title: '操作', width: '9%',
|
||||||
|
valueType: 'option',
|
||||||
|
render: (_, record) => [
|
||||||
|
<Button type='text' onClick={() => { chooseRole(record) }}>分配角色</Button>
|
||||||
|
// <Button type='text' onClick={() => { handleUpdate(record) }}>修改</Button>,
|
||||||
|
// <Button type='text' onClick={() => { handleDelete(record.roleId) }}>删除</Button>
|
||||||
|
]
|
||||||
|
},
|
||||||
|
];
|
||||||
|
//分配角色查询数据
|
||||||
|
const chooseRole = (record: any) => {
|
||||||
|
roleModalForm.resetFields();
|
||||||
|
spinSet(true);
|
||||||
|
allocationIF(record.userId)
|
||||||
|
.then((res: any) => {
|
||||||
|
if (res?.code === 200) {
|
||||||
|
console.log("roleIds",res?.data?.roleIds);
|
||||||
|
setRoles(
|
||||||
|
res?.data?.allRole?.map((item: any) => ({ label: item.roleName, value: item.roleId })),
|
||||||
|
);
|
||||||
|
roleModalForm.setFieldsValue({ ...record, roleIds: res?.data?.roleIds });
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
spinSet(false);
|
||||||
|
});
|
||||||
|
setOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeModal = async () => {
|
||||||
|
actionRef.current?.reload();
|
||||||
|
roleModalForm.resetFields();
|
||||||
|
setOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onAssignsRoles = async () => {
|
||||||
|
const values = await roleModalForm.validateFields();
|
||||||
|
try {
|
||||||
|
const { success } = await assignsRoles(values );
|
||||||
|
if (success) {
|
||||||
|
message.success('操作成功！');
|
||||||
|
}
|
||||||
|
closeModal();
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const setRoleModal = (
|
||||||
|
<Modal
|
||||||
|
title={"分配角色"}
|
||||||
|
visible={open}
|
||||||
|
width="70%"
|
||||||
|
centered
|
||||||
|
destroyOnClose={true}
|
||||||
|
bodyStyle={{ maxHeight: window.innerHeight * 0.96 - 108, overflowY: 'auto', paddingTop: 0 }}
|
||||||
|
// footer={<Button onClick={() => setOpen(false)}>关闭</Button>}
|
||||||
|
onOk={onAssignsRoles}
|
||||||
|
onCancel={() => closeModal()}
|
||||||
|
>
|
||||||
|
<Form form={roleModalForm} {...layout}>
|
||||||
|
<Form.Item label="id" name="userId" hidden>
|
||||||
|
<Input />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="名称" name="name" >
|
||||||
|
<Input disabled />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="部门" name="orgName" >
|
||||||
|
<Input disabled />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="角色信息" name="roleIds">
|
||||||
|
<Checkbox.Group>
|
||||||
|
<Row>
|
||||||
|
{roles?.map((v: any, i: number) => (
|
||||||
|
<Col span={8} key={`col-${i}`}>
|
||||||
|
<Checkbox value={v.value}>{v.label}</Checkbox>
|
||||||
|
</Col>
|
||||||
|
))}
|
||||||
|
</Row>
|
||||||
|
</Checkbox.Group>
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
const [treeDataList, treeDataListSet] = useState<any>([]);
|
||||||
|
const [orgId, setOrgId] = useState<any>('');
|
||||||
|
const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
|
||||||
|
const [searchValue, setSearchValue] = useState('');
|
||||||
|
const [autoExpandParent, setAutoExpandParent] = useState(true);
|
||||||
|
const [allData, allDataSet] = useState<any>([]);
|
||||||
|
const onChange: (e: any) => void = (e) => {
|
||||||
|
const { value } = e.target;
|
||||||
|
let keys: any = [];
|
||||||
|
if (value !== '') {
|
||||||
|
const newExpandedKeys = treeDataList
|
||||||
|
.map((item: { title: string | any[]; key: any }) => {
|
||||||
|
if (item.title.indexOf(value) > -1) {
|
||||||
|
return getParentKey(item.key, allData);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
})
|
||||||
|
.filter((item: any, i: any, self: string | any[]) => {
|
||||||
|
return item && self.indexOf(item) === i;
|
||||||
|
});
|
||||||
|
keys = newExpandedKeys;
|
||||||
|
}
|
||||||
|
setExpandedKeys(keys as React.Key[]);
|
||||||
|
setSearchValue(value);
|
||||||
|
setAutoExpandParent(value !== '');
|
||||||
|
};
|
||||||
|
const getDepartmentList = async () => {
|
||||||
|
try {
|
||||||
|
const { data } = await fetchAllDepartment({});
|
||||||
|
allDataSet(data);
|
||||||
|
const dataList: { key: React.Key; title: string }[] = [];
|
||||||
|
const generateList = (data: any[]) => {
|
||||||
|
for (let i = 0; i < data.length; i++) {
|
||||||
|
const node = data[i];
|
||||||
|
const { key } = node;
|
||||||
|
dataList.push({ key, title: node.title });
|
||||||
|
if (node.children) {
|
||||||
|
generateList(node.children);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
generateList(data);
|
||||||
|
treeDataListSet(dataList);
|
||||||
|
} catch (e) { }
|
||||||
|
};
|
||||||
|
|
||||||
|
const getParentKey = (key: React.Key, tree: any): React.Key => {
|
||||||
|
let parentKey: React.Key;
|
||||||
|
for (let i = 0; i < tree.length; i++) {
|
||||||
|
const node = tree[i];
|
||||||
|
if (node.children) {
|
||||||
|
if (node.children.some((item) => item.key === key)) {
|
||||||
|
parentKey = node.key;
|
||||||
|
} else if (getParentKey(key, node.children)) {
|
||||||
|
parentKey = getParentKey(key, node.children);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return parentKey!;
|
||||||
|
};
|
||||||
|
const onExpand = (newExpandedKeys: any[]) => {
|
||||||
|
setExpandedKeys(newExpandedKeys);
|
||||||
|
setAutoExpandParent(false);
|
||||||
|
};
|
||||||
|
const onDepartmentClick = (selectedKeys: any, e: any) => {
|
||||||
|
setOrgId(selectedKeys[0]);
|
||||||
|
setTimeout(() => {
|
||||||
|
actionRef.current?.reload();
|
||||||
|
}, 200);
|
||||||
|
};
|
||||||
|
const treeData = useMemo(() => {
|
||||||
|
const loop = (data: any): any[] => {
|
||||||
|
console.log('data', data);
|
||||||
|
let res: any[] = [];
|
||||||
|
data.map((item: any, i: any) => {
|
||||||
|
const strTitle = item.title as string;
|
||||||
|
const index = strTitle.indexOf(searchValue);
|
||||||
|
const beforeStr = strTitle.substring(0, index);
|
||||||
|
const afterStr = strTitle.slice(index + searchValue.length);
|
||||||
|
const title =
|
||||||
|
index > -1 ? (
|
||||||
|
<span>
|
||||||
|
{beforeStr}
|
||||||
|
<span style={{ color: 'red' }}>{searchValue}</span>
|
||||||
|
{afterStr}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span>{strTitle}</span>
|
||||||
|
);
|
||||||
|
if (expandedKeys.includes(item.key) || index > -1) {
|
||||||
|
if (item.children) {
|
||||||
|
res.push({ title, key: item.key, children: loop(item.children) });
|
||||||
|
} else {
|
||||||
|
res.push({ title, key: item.key });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return res;
|
||||||
|
};
|
||||||
|
if (searchValue !== '') {
|
||||||
|
let returnData = loop(allData);
|
||||||
|
return returnData;
|
||||||
|
} else {
|
||||||
|
return allData;
|
||||||
|
}
|
||||||
|
}, [searchValue, allData]);
|
||||||
|
return (
|
||||||
|
<Spin spinning={spin}>
|
||||||
|
<PageHeader title="用户管理" />
|
||||||
|
<div style={{ maxHeight: innerHeight - 130, height: innerHeight - 130 }} className='xsy-entrust bgCWhite'>
|
||||||
|
<div style={{ display: 'flex', }}>
|
||||||
|
<div style={{ backgroundColor: '#FFF', width: '220px', marginRight: '8px', }}>
|
||||||
|
<Search style={{ marginBottom: 2 }} placeholder="关键字查询" onChange={onChange} />
|
||||||
|
<div style={{ height: 'calc(100vh - 96px)', overflowY: 'auto', }}>
|
||||||
|
<Tree
|
||||||
|
// fieldNames={{ title: 'orgName', key: 'orgId', children: 'children' }}
|
||||||
|
onExpand={onExpand}
|
||||||
|
expandedKeys={expandedKeys}
|
||||||
|
autoExpandParent={autoExpandParent}
|
||||||
|
treeData={treeData}
|
||||||
|
onSelect={onDepartmentClick}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ backgroundColor: '#FFF', flex: '1', width: '100%', }} >
|
||||||
|
<ProTable<any>
|
||||||
|
actionRef={actionRef}//action触发后更新表格
|
||||||
|
columns={columns}//表格
|
||||||
|
options={false}
|
||||||
|
bordered={false}
|
||||||
|
className='tableSearch'
|
||||||
|
size='small'
|
||||||
|
search={{ labelWidth: 'auto', span: 6 }}
|
||||||
|
request={(params) =>
|
||||||
|
getPage({
|
||||||
|
...params,
|
||||||
|
orgId: orgId,
|
||||||
|
basePageRequest: { pageNo: pageData.pageNo, pageSize: pageData.pageSize },
|
||||||
|
}).then((res) => {
|
||||||
|
const result = {
|
||||||
|
data: res.data.records,
|
||||||
|
total: res.data.total,
|
||||||
|
success: res.success,
|
||||||
|
pageSize: res.data.size,
|
||||||
|
current: res.data.current
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
toolBarRender={() => [
|
||||||
|
// <Button onClick={() => { handleAdd() }} type="primary">
|
||||||
|
// 新增
|
||||||
|
// </Button>,
|
||||||
|
]
|
||||||
|
}
|
||||||
|
pagination={{
|
||||||
|
defaultPageSize: 10,
|
||||||
|
showSizeChanger: false,
|
||||||
|
onChange: (page, pageSize) => pageDataSet({ pageNo: page, pageSize: pageSize }),
|
||||||
|
onShowSizeChange: (current, size) => pageDataSet({ pageNo: current, pageSize: size }),
|
||||||
|
}}
|
||||||
|
onReset={() => { pageDataSet({ pageNo: 1, pageSize: 10 }); setOrgId(''); }}
|
||||||
|
/>
|
||||||
|
{setRoleModal}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* 查看 */}
|
||||||
|
</Spin >
|
||||||
|
)
|
||||||
|
};
|
||||||
|
export default entrust;
|
||||||
89
src/pages/System/User/service.ts
Normal file
89
src/pages/System/User/service.ts
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
import { request } from 'umi';
|
||||||
|
|
||||||
|
// 分页查询角色
|
||||||
|
export async function getPage(params: any) {
|
||||||
|
return request('/api/sys-manager-ebtp-project/v1/sysuser/getPage', {
|
||||||
|
method: 'post',
|
||||||
|
data: params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
export async function getDataById(id: any) {
|
||||||
|
return request(`/api/sys-manager-ebtp-project/v1/sysuser/${id}`, {
|
||||||
|
method: 'get',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
export async function deleteRole(id: any) {
|
||||||
|
return request(`/api/sys-manager-ebtp-project/v1/sysuser/del/${id}`, {
|
||||||
|
method: 'get',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
export async function addRole(params: any) {
|
||||||
|
return request('/api/sys-manager-ebtp-project/v1/sysuser/insert', {
|
||||||
|
method: 'post',
|
||||||
|
data: params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
export async function updateRole(params: any) {
|
||||||
|
return request('/api/sys-manager-ebtp-project/v1/sysuser/update', {
|
||||||
|
method: 'post',
|
||||||
|
data: params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//分配人员查询数据
|
||||||
|
export async function allocationIF(userId: any) {
|
||||||
|
return request(`/api/sys-manager-ebtp-project/v1/sysrole/role/assign/${userId}`, {
|
||||||
|
method: 'get',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function assignsRoles(params: any) {
|
||||||
|
return request('/api/sys-manager-ebtp-project/v1/sysuserrole/assignsRoles', {
|
||||||
|
method: 'post',
|
||||||
|
data: params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// import { TreeDataNode } from 'antd';
|
||||||
|
|
||||||
|
// export function userList(options?: { [key: string]: any }): Promise<{ data: any }> {
|
||||||
|
// return request('/api/system/userList', {
|
||||||
|
// method: 'GET',
|
||||||
|
// ...(options || {}),
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// export function treeData(options?: { [key: string]: any }): Promise<{ data: TreeDataNode[] }> {
|
||||||
|
// return request('/api/system/treeData', {
|
||||||
|
// method: 'GET',
|
||||||
|
// ...(options || {}),
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// export function fetchUserList(options?: any) {
|
||||||
|
// return request('/api/sysuser/getPage', {
|
||||||
|
// method: 'POST',
|
||||||
|
// data: options,
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// //获取用户数据
|
||||||
|
// export function getUser(userId?: any) {
|
||||||
|
// return request(`/api/sysuser/${userId}`, {
|
||||||
|
// method: 'get',
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// export function assignsRoles(options?: { [key: string]: any }): Promise<any> {
|
||||||
|
// return request('/api/sysuser/assignsRoles', {
|
||||||
|
// method: 'post',
|
||||||
|
// ...(options || {}),
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// //查询用户详情
|
||||||
|
// export function getOneUserAll(options?: { [key: string]: any }): Promise<{ data: TreeDataNode[] }> {
|
||||||
|
// return request(`/api/sysuser/getOneUserAll/${options?.id}`, {
|
||||||
|
// method: 'GET',
|
||||||
|
// params: options,
|
||||||
|
// ...(options || {}),
|
||||||
|
// });
|
||||||
|
// }
|
||||||
Reference in New Issue
Block a user