feat(用户管理): 新增用户管理页面
- 实现用户列表展示功能 - 添加用户搜索和筛选 - 集成表格分页组件 - 支持用户查看、编辑、删除操作
This commit is contained in:
gaoziman
parent
d5dcd6780c
commit
a44b06cc15
117
src/pages/user-management/constants.tsx
Normal file
117
src/pages/user-management/constants.tsx
Normal file
@ -0,0 +1,117 @@
|
||||
import React from 'react';
|
||||
import { Button, Typography, Badge, Space } from '@arco-design/web-react';
|
||||
import { IconEye, IconEdit, IconDelete } from '@arco-design/web-react/icon';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
export const RoleType = ['管理员', '普通用户', '访客'];
|
||||
export const Status = ['禁用', '启用'];
|
||||
|
||||
export function getColumns(
|
||||
t: any,
|
||||
callback: (record: Record<string, any>, type: string) => Promise<void>
|
||||
) {
|
||||
return [
|
||||
{
|
||||
title: t['userManagement.columns.id'],
|
||||
dataIndex: 'id',
|
||||
width: 100,
|
||||
render: (value) => <Text copyable>{value}</Text>,
|
||||
},
|
||||
{
|
||||
title: t['userManagement.columns.name'],
|
||||
dataIndex: 'name',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: t['userManagement.columns.username'],
|
||||
dataIndex: 'username',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: t['userManagement.columns.email'],
|
||||
dataIndex: 'email',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: t['userManagement.columns.phone'],
|
||||
dataIndex: 'phone',
|
||||
width: 130,
|
||||
},
|
||||
{
|
||||
title: t['userManagement.columns.role'],
|
||||
dataIndex: 'role',
|
||||
width: 100,
|
||||
render: (value) => {
|
||||
const roleMap = {
|
||||
0: { text: t['userManagement.role.admin'], color: 'red' },
|
||||
1: { text: t['userManagement.role.user'], color: 'blue' },
|
||||
2: { text: t['userManagement.role.guest'], color: 'gray' },
|
||||
};
|
||||
const role = roleMap[value] || roleMap[1];
|
||||
return <Badge color={role.color} text={role.text} />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t['userManagement.columns.department'],
|
||||
dataIndex: 'department',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: t['userManagement.columns.createdTime'],
|
||||
dataIndex: 'createdTime',
|
||||
width: 180,
|
||||
render: (x) => dayjs().subtract(x, 'days').format('YYYY-MM-DD HH:mm:ss'),
|
||||
sorter: (a, b) => b.createdTime - a.createdTime,
|
||||
},
|
||||
{
|
||||
title: t['userManagement.columns.status'],
|
||||
dataIndex: 'status',
|
||||
width: 100,
|
||||
render: (x) => {
|
||||
if (x === 0) {
|
||||
return <Badge status="error" text={Status[x]}></Badge>;
|
||||
}
|
||||
return <Badge status="success" text={Status[x]}></Badge>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t['userManagement.columns.operations'],
|
||||
dataIndex: 'operations',
|
||||
width: 240,
|
||||
fixed: 'right' as const,
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<IconEye />}
|
||||
onClick={() => callback(record, 'view')}
|
||||
>
|
||||
{t['userManagement.columns.operations.view']}
|
||||
</Button>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<IconEdit />}
|
||||
onClick={() => callback(record, 'edit')}
|
||||
>
|
||||
{t['userManagement.columns.operations.edit']}
|
||||
</Button>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
status="danger"
|
||||
icon={<IconDelete />}
|
||||
onClick={() => callback(record, 'delete')}
|
||||
>
|
||||
{t['userManagement.columns.operations.delete']}
|
||||
</Button>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
export default () => RoleType;
|
||||
160
src/pages/user-management/form.tsx
Normal file
160
src/pages/user-management/form.tsx
Normal file
@ -0,0 +1,160 @@
|
||||
import React, { useContext } from 'react';
|
||||
import dayjs from 'dayjs';
|
||||
import {
|
||||
Form,
|
||||
Input,
|
||||
Select,
|
||||
DatePicker,
|
||||
Button,
|
||||
Grid,
|
||||
} from '@arco-design/web-react';
|
||||
import { GlobalContext } from '@/context';
|
||||
import locale from './locale';
|
||||
import useLocale from '@/utils/useLocale';
|
||||
import { IconRefresh, IconSearch } from '@arco-design/web-react/icon';
|
||||
import { RoleType, Status } from './constants';
|
||||
import styles from './style/index.module.less';
|
||||
|
||||
const { Row, Col } = Grid;
|
||||
const { useForm } = Form;
|
||||
|
||||
function SearchForm(props: {
|
||||
onSearch: (values: Record<string, any>) => void;
|
||||
}) {
|
||||
const { lang } = useContext(GlobalContext);
|
||||
|
||||
const t = useLocale(locale);
|
||||
const [form] = useForm();
|
||||
|
||||
const handleSubmit = () => {
|
||||
const values = form.getFieldsValue();
|
||||
props.onSearch(values);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
form.resetFields();
|
||||
props.onSearch({});
|
||||
};
|
||||
|
||||
const colSpan = lang === 'zh-CN' ? 8 : 12;
|
||||
|
||||
return (
|
||||
<div className={styles['search-form-wrapper']}>
|
||||
<Form
|
||||
form={form}
|
||||
className={styles['search-form']}
|
||||
labelAlign="left"
|
||||
labelCol={{ span: 5 }}
|
||||
wrapperCol={{ span: 19 }}
|
||||
>
|
||||
<Row gutter={24}>
|
||||
<Col span={colSpan}>
|
||||
<Form.Item label={t['userManagement.columns.id']} field="id">
|
||||
<Input
|
||||
placeholder={t['userManagement.form.id.placeholder']}
|
||||
allowClear
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={colSpan}>
|
||||
<Form.Item label={t['userManagement.columns.name']} field="name">
|
||||
<Input
|
||||
allowClear
|
||||
placeholder={t['userManagement.form.name.placeholder']}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={colSpan}>
|
||||
<Form.Item
|
||||
label={t['userManagement.columns.username']}
|
||||
field="username"
|
||||
>
|
||||
<Input
|
||||
allowClear
|
||||
placeholder={t['userManagement.form.username.placeholder']}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={colSpan}>
|
||||
<Form.Item label={t['userManagement.columns.email']} field="email">
|
||||
<Input
|
||||
allowClear
|
||||
placeholder={t['userManagement.form.email.placeholder']}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={colSpan}>
|
||||
<Form.Item label={t['userManagement.columns.phone']} field="phone">
|
||||
<Input
|
||||
allowClear
|
||||
placeholder={t['userManagement.form.phone.placeholder']}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={colSpan}>
|
||||
<Form.Item label={t['userManagement.columns.role']} field="role">
|
||||
<Select
|
||||
placeholder={t['userManagement.form.all.placeholder']}
|
||||
options={RoleType.map((item, index) => ({
|
||||
label: item,
|
||||
value: index,
|
||||
}))}
|
||||
mode="multiple"
|
||||
allowClear
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={colSpan}>
|
||||
<Form.Item
|
||||
label={t['userManagement.columns.department']}
|
||||
field="department"
|
||||
>
|
||||
<Input
|
||||
allowClear
|
||||
placeholder={t['userManagement.form.department.placeholder']}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={colSpan}>
|
||||
<Form.Item
|
||||
label={t['userManagement.columns.status']}
|
||||
field="status"
|
||||
>
|
||||
<Select
|
||||
placeholder={t['userManagement.form.all.placeholder']}
|
||||
options={Status.map((item, index) => ({
|
||||
label: item,
|
||||
value: index,
|
||||
}))}
|
||||
mode="multiple"
|
||||
allowClear
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={colSpan}>
|
||||
<Form.Item
|
||||
label={t['userManagement.columns.createdTime']}
|
||||
field="createdTime"
|
||||
>
|
||||
<DatePicker.RangePicker
|
||||
allowClear
|
||||
style={{ width: '100%' }}
|
||||
disabledDate={(date) => dayjs(date).isAfter(dayjs())}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
<div className={styles['right-button']}>
|
||||
<Button type="primary" icon={<IconSearch />} onClick={handleSubmit}>
|
||||
{t['userManagement.form.search']}
|
||||
</Button>
|
||||
<Button icon={<IconRefresh />} onClick={handleReset}>
|
||||
{t['userManagement.form.reset']}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SearchForm;
|
||||
171
src/pages/user-management/index.tsx
Normal file
171
src/pages/user-management/index.tsx
Normal file
@ -0,0 +1,171 @@
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import {
|
||||
Table,
|
||||
Card,
|
||||
PaginationProps,
|
||||
Button,
|
||||
Space,
|
||||
Typography,
|
||||
Message,
|
||||
} from '@arco-design/web-react';
|
||||
import PermissionWrapper from '@/components/PermissionWrapper';
|
||||
import Pagination from '@/components/Pagination';
|
||||
import {
|
||||
IconDownload,
|
||||
IconPlus,
|
||||
IconDelete,
|
||||
} from '@arco-design/web-react/icon';
|
||||
import axios from 'axios';
|
||||
import useLocale from '@/utils/useLocale';
|
||||
import SearchForm from './form';
|
||||
import locale from './locale';
|
||||
import styles from './style/index.module.less';
|
||||
import './mock';
|
||||
import { getColumns } from './constants';
|
||||
|
||||
const { Title } = Typography;
|
||||
|
||||
function UserManagement() {
|
||||
const t = useLocale(locale);
|
||||
|
||||
const tableCallback = async (record, type) => {
|
||||
console.log(record, type);
|
||||
|
||||
// 简单的操作提示
|
||||
if (type === 'view') {
|
||||
Message.info(`查看用户: ${record.name}`);
|
||||
} else if (type === 'edit') {
|
||||
Message.info(`编辑用户: ${record.name}`);
|
||||
} else if (type === 'delete') {
|
||||
Message.warning(`删除用户: ${record.name}`);
|
||||
}
|
||||
};
|
||||
|
||||
const columns = useMemo(() => getColumns(t, tableCallback), [t]);
|
||||
|
||||
const [data, setData] = useState([]);
|
||||
const [pagination, setPagination] = useState<PaginationProps>({
|
||||
sizeCanChange: true,
|
||||
showTotal: true,
|
||||
pageSize: 10,
|
||||
current: 1,
|
||||
pageSizeChangeResetCurrent: true,
|
||||
});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [formParams, setFormParams] = useState({});
|
||||
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [pagination.current, pagination.pageSize, JSON.stringify(formParams)]);
|
||||
|
||||
function fetchData() {
|
||||
const { current, pageSize } = pagination;
|
||||
setLoading(true);
|
||||
axios
|
||||
.get('/api/user-management', {
|
||||
params: {
|
||||
page: current,
|
||||
pageSize,
|
||||
...formParams,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
setData(res.data.list);
|
||||
setPagination({
|
||||
...pagination,
|
||||
current,
|
||||
pageSize,
|
||||
total: res.data.total,
|
||||
});
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
|
||||
function onChangeTable(current: number, pageSize: number) {
|
||||
setPagination({
|
||||
...pagination,
|
||||
current,
|
||||
pageSize,
|
||||
});
|
||||
}
|
||||
|
||||
function handleSearch(params) {
|
||||
setPagination({ ...pagination, current: 1 });
|
||||
setFormParams(params);
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
Message.info(t['userManagement.operations.add']);
|
||||
}
|
||||
|
||||
function handleBatchDelete() {
|
||||
if (selectedRowKeys.length === 0) {
|
||||
Message.warning('请选择要删除的用户');
|
||||
return;
|
||||
}
|
||||
Message.warning(`批量删除 ${selectedRowKeys.length} 个用户`);
|
||||
}
|
||||
|
||||
function handleExport() {
|
||||
Message.info(t['userManagement.operations.export']);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Title heading={6}>{t['menu.list.userManagement']}</Title>
|
||||
<SearchForm onSearch={handleSearch} />
|
||||
<PermissionWrapper
|
||||
requiredPermissions={[
|
||||
{ resource: 'menu.list.userManagement', actions: ['write'] },
|
||||
]}
|
||||
>
|
||||
<div className={styles['button-group']}>
|
||||
<Space>
|
||||
<Button type="primary" icon={<IconPlus />} onClick={handleAdd}>
|
||||
{t['userManagement.operations.add']}
|
||||
</Button>
|
||||
<Button icon={<IconDelete />} onClick={handleBatchDelete}>
|
||||
{t['userManagement.operations.batchDelete']}
|
||||
</Button>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button icon={<IconDownload />} onClick={handleExport}>
|
||||
{t['userManagement.operations.export']}
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
</PermissionWrapper>
|
||||
<Table
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
pagination={false}
|
||||
columns={columns}
|
||||
data={data}
|
||||
rowSelection={{
|
||||
type: 'checkbox',
|
||||
selectedRowKeys,
|
||||
onChange: (selectedRowKeys) => {
|
||||
setSelectedRowKeys(selectedRowKeys);
|
||||
},
|
||||
}}
|
||||
scroll={{ x: 1640 }}
|
||||
/>
|
||||
<Pagination
|
||||
total={pagination.total}
|
||||
current={pagination.current}
|
||||
pageSize={pagination.pageSize}
|
||||
sizeCanChange={pagination.sizeCanChange}
|
||||
onChange={onChangeTable}
|
||||
onPageSizeChange={(pageSize) => {
|
||||
setPagination({ ...pagination, current: 1, pageSize });
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default UserManagement;
|
||||
74
src/pages/user-management/locale/index.ts
Normal file
74
src/pages/user-management/locale/index.ts
Normal file
@ -0,0 +1,74 @@
|
||||
const i18n = {
|
||||
'en-US': {
|
||||
'menu.list.userManagement': 'User Management',
|
||||
'userManagement.form.search': 'Search',
|
||||
'userManagement.form.reset': 'Reset',
|
||||
'userManagement.columns.id': 'User ID',
|
||||
'userManagement.columns.name': 'Name',
|
||||
'userManagement.columns.username': 'Username',
|
||||
'userManagement.columns.email': 'Email',
|
||||
'userManagement.columns.phone': 'Phone',
|
||||
'userManagement.columns.role': 'Role',
|
||||
'userManagement.columns.department': 'Department',
|
||||
'userManagement.columns.status': 'Status',
|
||||
'userManagement.columns.createdTime': 'Created Time',
|
||||
'userManagement.columns.operations': 'Operations',
|
||||
'userManagement.columns.operations.view': 'View',
|
||||
'userManagement.columns.operations.edit': 'Edit',
|
||||
'userManagement.columns.operations.delete': 'Delete',
|
||||
'userManagement.columns.operations.enable': 'Enable',
|
||||
'userManagement.columns.operations.disable': 'Disable',
|
||||
'userManagement.operations.add': 'Add User',
|
||||
'userManagement.operations.batchDelete': 'Batch Delete',
|
||||
'userManagement.operations.export': 'Export',
|
||||
'userManagement.role.admin': 'Administrator',
|
||||
'userManagement.role.user': 'User',
|
||||
'userManagement.role.guest': 'Guest',
|
||||
'userManagement.status.enabled': 'Enabled',
|
||||
'userManagement.status.disabled': 'Disabled',
|
||||
'userManagement.form.id.placeholder': 'Please enter user ID',
|
||||
'userManagement.form.name.placeholder': 'Please enter name',
|
||||
'userManagement.form.username.placeholder': 'Please enter username',
|
||||
'userManagement.form.email.placeholder': 'Please enter email',
|
||||
'userManagement.form.phone.placeholder': 'Please enter phone',
|
||||
'userManagement.form.department.placeholder': 'Please enter department',
|
||||
'userManagement.form.all.placeholder': 'All',
|
||||
},
|
||||
'zh-CN': {
|
||||
'menu.list.userManagement': '用户管理',
|
||||
'userManagement.form.search': '查询',
|
||||
'userManagement.form.reset': '重置',
|
||||
'userManagement.columns.id': '用户ID',
|
||||
'userManagement.columns.name': '姓名',
|
||||
'userManagement.columns.username': '用户名',
|
||||
'userManagement.columns.email': '邮箱',
|
||||
'userManagement.columns.phone': '手机号',
|
||||
'userManagement.columns.role': '角色',
|
||||
'userManagement.columns.department': '部门',
|
||||
'userManagement.columns.status': '状态',
|
||||
'userManagement.columns.createdTime': '创建时间',
|
||||
'userManagement.columns.operations': '操作',
|
||||
'userManagement.columns.operations.view': '查看',
|
||||
'userManagement.columns.operations.edit': '编辑',
|
||||
'userManagement.columns.operations.delete': '删除',
|
||||
'userManagement.columns.operations.enable': '启用',
|
||||
'userManagement.columns.operations.disable': '禁用',
|
||||
'userManagement.operations.add': '新建用户',
|
||||
'userManagement.operations.batchDelete': '批量删除',
|
||||
'userManagement.operations.export': '导出',
|
||||
'userManagement.role.admin': '管理员',
|
||||
'userManagement.role.user': '普通用户',
|
||||
'userManagement.role.guest': '访客',
|
||||
'userManagement.status.enabled': '启用',
|
||||
'userManagement.status.disabled': '禁用',
|
||||
'userManagement.form.id.placeholder': '请输入用户ID',
|
||||
'userManagement.form.name.placeholder': '请输入姓名',
|
||||
'userManagement.form.username.placeholder': '请输入用户名',
|
||||
'userManagement.form.email.placeholder': '请输入邮箱',
|
||||
'userManagement.form.phone.placeholder': '请输入手机号',
|
||||
'userManagement.form.department.placeholder': '请输入部门',
|
||||
'userManagement.form.all.placeholder': '全部',
|
||||
},
|
||||
};
|
||||
|
||||
export default i18n;
|
||||
134
src/pages/user-management/mock/index.ts
Normal file
134
src/pages/user-management/mock/index.ts
Normal file
@ -0,0 +1,134 @@
|
||||
import Mock from 'mockjs';
|
||||
import qs from 'query-string';
|
||||
import dayjs from 'dayjs';
|
||||
import setupMock from '@/utils/setupMock';
|
||||
|
||||
const { list } = Mock.mock({
|
||||
'list|100': [
|
||||
{
|
||||
id: /[0-9]{8}/,
|
||||
name: () => Mock.Random.cname(),
|
||||
username: () => Mock.Random.word(5, 10),
|
||||
email: () => Mock.Random.email(),
|
||||
phone: /1[3-9]\d{9}/,
|
||||
'role|0-2': 0,
|
||||
department: () =>
|
||||
Mock.Random.pick([
|
||||
'技术部',
|
||||
'产品部',
|
||||
'运营部',
|
||||
'市场部',
|
||||
'人力资源部',
|
||||
'财务部',
|
||||
]),
|
||||
'status|0-1': 0,
|
||||
'createdTime|1-365': 0,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const filterData = (
|
||||
rest: {
|
||||
id?: string;
|
||||
name?: string;
|
||||
username?: string;
|
||||
email?: string;
|
||||
phone?: string;
|
||||
'role[]'?: string[];
|
||||
department?: string;
|
||||
'status[]'?: string[];
|
||||
'createdTime[]'?: string[];
|
||||
} = {}
|
||||
) => {
|
||||
const {
|
||||
id,
|
||||
name,
|
||||
username,
|
||||
email,
|
||||
phone,
|
||||
'role[]': role,
|
||||
department,
|
||||
'status[]': status,
|
||||
'createdTime[]': createdTime,
|
||||
} = rest;
|
||||
|
||||
if (id) {
|
||||
return list.filter((item) => item.id === id);
|
||||
}
|
||||
|
||||
let result = [...list];
|
||||
|
||||
if (name) {
|
||||
result = result.filter((item) => {
|
||||
return (item.name as string).toLowerCase().includes(name.toLowerCase());
|
||||
});
|
||||
}
|
||||
|
||||
if (username) {
|
||||
result = result.filter((item) => {
|
||||
return (item.username as string)
|
||||
.toLowerCase()
|
||||
.includes(username.toLowerCase());
|
||||
});
|
||||
}
|
||||
|
||||
if (email) {
|
||||
result = result.filter((item) => {
|
||||
return (item.email as string).toLowerCase().includes(email.toLowerCase());
|
||||
});
|
||||
}
|
||||
|
||||
if (phone) {
|
||||
result = result.filter((item) => {
|
||||
return (item.phone as string).includes(phone);
|
||||
});
|
||||
}
|
||||
|
||||
if (role && role.length > 0) {
|
||||
result = result.filter((item) => role.includes(item.role.toString()));
|
||||
}
|
||||
|
||||
if (department) {
|
||||
result = result.filter((item) => {
|
||||
return (item.department as string).includes(department);
|
||||
});
|
||||
}
|
||||
|
||||
if (status && status.length > 0) {
|
||||
result = result.filter((item) => status.includes(item.status.toString()));
|
||||
}
|
||||
|
||||
if (createdTime && createdTime.length === 2) {
|
||||
const [begin, end] = createdTime;
|
||||
result = result.filter((item) => {
|
||||
const time = dayjs()
|
||||
.subtract(item.createdTime, 'days')
|
||||
.format('YYYY-MM-DD HH:mm:ss');
|
||||
return (
|
||||
!dayjs(time).isBefore(dayjs(begin)) && !dayjs(time).isAfter(dayjs(end))
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
setupMock({
|
||||
setup: () => {
|
||||
Mock.mock(new RegExp('/api/user-management'), (params) => {
|
||||
const {
|
||||
page = 1,
|
||||
pageSize = 10,
|
||||
...rest
|
||||
} = qs.parseUrl(params.url).query;
|
||||
const p = page as number;
|
||||
const ps = pageSize as number;
|
||||
|
||||
const result = filterData(rest);
|
||||
return {
|
||||
list: result.slice((p - 1) * ps, p * ps),
|
||||
total: result.length,
|
||||
};
|
||||
});
|
||||
},
|
||||
});
|
||||
41
src/pages/user-management/style/index.module.less
Normal file
41
src/pages/user-management/style/index.module.less
Normal file
@ -0,0 +1,41 @@
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.operations {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.search-form-wrapper {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--color-border-1);
|
||||
margin-bottom: 20px;
|
||||
|
||||
.right-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding-left: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-left: 1px solid var(--color-border-2);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
padding-right: 20px;
|
||||
|
||||
:global(.arco-form-label-item-left) {
|
||||
> label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user