Admin
This commit is contained in:
151
src/pages/Staff/List/components/AdminEditModal.tsx
Normal file
151
src/pages/Staff/List/components/AdminEditModal.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
import { Button, Form, Input, notification, Select } from 'antd';
|
||||
import { stringify } from 'qs';
|
||||
import type React from 'react';
|
||||
import { useImperativeHandle, useState } from 'react';
|
||||
import ModalPlugin from '@/components/ModalPlugin';
|
||||
import { statusOptions } from '@/configs/adminConfig';
|
||||
import { AdminServices } from '@/services/AdminServices';
|
||||
import type { IRef } from '@/utils/type';
|
||||
import { useRequest } from '@/utils/useRequest';
|
||||
|
||||
interface IProps extends IRef {
|
||||
onCallback?: () => void;
|
||||
}
|
||||
|
||||
export type IAdminEditModalType = {
|
||||
show: (data?: any) => void;
|
||||
};
|
||||
|
||||
export const AdminEditModal: React.FC<IProps> = (props) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [title, setTitle] = useState('');
|
||||
const [form] = Form.useForm();
|
||||
const [data, setData] = useState<any>(null);
|
||||
|
||||
// 请求成功回调
|
||||
const success = (res: any) => {
|
||||
if (res.err_code === 0) {
|
||||
notification.success({ message: '保存成功' });
|
||||
props.onCallback?.();
|
||||
setOpen(false);
|
||||
form.resetFields(); // 提交成功重置表单
|
||||
}
|
||||
};
|
||||
|
||||
const { loading: addLoading, request: addRequest } = useRequest(AdminServices.add, { onSuccess: success });
|
||||
const { loading: editLoading, request: editRequest } = useRequest(AdminServices.edit, { onSuccess: success });
|
||||
|
||||
const save = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
// 编辑场景带上主键
|
||||
if (data?.admin_id) {
|
||||
values.admin_id = data.admin_id;
|
||||
editRequest(stringify(values));
|
||||
} else {
|
||||
addRequest(stringify(values));
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('表单验证未通过', error);
|
||||
}
|
||||
};
|
||||
|
||||
useImperativeHandle(props.ref, () => ({
|
||||
show: (data?: any) => {
|
||||
setTitle(data ? `${data.username} 编辑` : '新增');
|
||||
setOpen(true);
|
||||
setData(data);
|
||||
|
||||
if (data) {
|
||||
// 编辑场景初始化表单
|
||||
form.setFieldsValue({
|
||||
username: data.username,
|
||||
mobile: data.mobile,
|
||||
email: data.email,
|
||||
nickname: data.nickname,
|
||||
password: '', // 密码编辑可选
|
||||
status: String(data.status),
|
||||
});
|
||||
} else {
|
||||
form.resetFields();
|
||||
form.setFieldsValue({
|
||||
status: '1',
|
||||
});
|
||||
}
|
||||
},
|
||||
}));
|
||||
|
||||
return (
|
||||
<ModalPlugin
|
||||
open={open}
|
||||
onCancel={() => setOpen(false)}
|
||||
title={title}
|
||||
footer={[
|
||||
<Button key='cancel' onClick={() => setOpen(false)}>
|
||||
取消
|
||||
</Button>,
|
||||
<Button key='save' type='primary' loading={addLoading || editLoading} onClick={save}>
|
||||
保存
|
||||
</Button>,
|
||||
]}
|
||||
>
|
||||
<Form form={form} labelCol={{ style: { width: window?.dfConfig?.language === 'zh-cn' ? 80 : 120 } }}>
|
||||
<Form.Item
|
||||
label='用户名'
|
||||
name='username'
|
||||
required
|
||||
rules={[
|
||||
{ required: true, message: '请输入用户名' },
|
||||
{ min: 2, message: '最少2字符' },
|
||||
{ max: 20, message: '最多20字符' },
|
||||
]}
|
||||
>
|
||||
<Input allowClear placeholder='请填写用户名' maxLength={20} showCount />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label='昵称'
|
||||
name='nickname'
|
||||
required
|
||||
rules={[
|
||||
{ required: true, message: '请输入昵称' },
|
||||
{ min: 2, message: '最少2字符' },
|
||||
{ max: 20, message: '最多20字符' },
|
||||
]}
|
||||
>
|
||||
<Input allowClear placeholder='请填写昵称' maxLength={20} showCount />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label='手机号'
|
||||
name='mobile'
|
||||
required
|
||||
rules={[
|
||||
{ required: true, message: '请输入手机号' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' },
|
||||
]}
|
||||
>
|
||||
<Input allowClear placeholder='请填写手机号' maxLength={11} showCount />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label='邮箱' name='email' rules={[{ type: 'email', message: '邮箱格式不正确' }]}>
|
||||
<Input allowClear placeholder='请填写邮箱' />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label='密码'
|
||||
name='password'
|
||||
tooltip={data ? undefined : '不填写则系统自动生成初始密码'}
|
||||
//help={<div style={{ marginBottom: 6, fontSize: 12, color: '#999' }}>不填写则系统自动生成初始密码</div>}
|
||||
rules={[{ min: 6, max: 18, message: '密码需6~18位' }]}
|
||||
>
|
||||
<Input.Password allowClear placeholder={data ? '不修改请留空' : '请填写密码'} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label={'状态'} name='status'>
|
||||
<Select options={statusOptions} placeholder='请选择状态' />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</ModalPlugin>
|
||||
);
|
||||
};
|
||||
229
src/pages/Staff/List/index.tsx
Normal file
229
src/pages/Staff/List/index.tsx
Normal file
@@ -0,0 +1,229 @@
|
||||
import { Button, DatePicker, Input, Select } from 'antd';
|
||||
import { stringify } from 'qs';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { FormItemPlugin, FormPlugin } from '@/components/FormPlugin';
|
||||
import { GapBox } from '@/components/GapBox';
|
||||
import PageContainerPlugin from '@/components/PageContainer/PageContainerPlugin';
|
||||
import { FooterPagination, HeaderPagination } from '@/components/PaginationPlugin';
|
||||
import { MoreSearchButton, SearchButton } from '@/components/SearchButton';
|
||||
import type { ColumnsTypeUltra } from '@/components/TableColumnsFilterPlugin';
|
||||
import { TablePlugin } from '@/components/TablePlugin';
|
||||
import { statusObj, statusOptions } from '@/configs/adminConfig';
|
||||
import type { IAjaxDataBase, IParamsBase } from '@/interfaces/common';
|
||||
import { AdminServices } from '@/services/AdminServices';
|
||||
import { useAuthStore } from '@/store/AuthStore';
|
||||
import { tableFixedByPhone, toArray } from '@/utils/common';
|
||||
import { useRequest } from '@/utils/useRequest';
|
||||
import { AdminEditModal, type IAdminEditModalType } from './components/AdminEditModal';
|
||||
|
||||
interface IAjaxData extends IAjaxDataBase {
|
||||
data: any[];
|
||||
}
|
||||
type IParams = IParamsBase & {
|
||||
username?: string;
|
||||
nickname?: string;
|
||||
mobile?: string;
|
||||
status?: number;
|
||||
create_dateL?: string;
|
||||
create_dateU?: string;
|
||||
};
|
||||
|
||||
/** 管理员列表页面 */
|
||||
const AdminListForm: React.FC = () => {
|
||||
const auth = useAuthStore().auth;
|
||||
const [params, setParams] = useState<IParams>({ curr_page: 1, page_count: 20 });
|
||||
const [ajaxData, setAjaxData] = useState<IAjaxData>({ count: 0, data: [] });
|
||||
const [showMoreSearch, setShowMoreSearch] = useState(false);
|
||||
const AdminEditModalRef = useRef<IAdminEditModalType>(null);
|
||||
|
||||
const { loading: listLoading, request: listRequest } = useRequest(AdminServices.getAdminList, {
|
||||
onSuccessCodeZero: (res) => {
|
||||
setAjaxData({
|
||||
count: res.count || 0,
|
||||
data: toArray(res.data),
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const columns: ColumnsTypeUltra<any> = [
|
||||
{
|
||||
title: '操作',
|
||||
width: 50,
|
||||
fixed: tableFixedByPhone('left'),
|
||||
render: (_, item) => (
|
||||
<GapBox>
|
||||
{item?.admin_id != 1 && (
|
||||
<Button
|
||||
type='primary'
|
||||
onClick={() => {
|
||||
AdminEditModalRef.current?.show(item);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
)}
|
||||
</GapBox>
|
||||
),
|
||||
},
|
||||
{ title: '管理员', dataIndex: 'username', width: 120 },
|
||||
{ title: '昵称', dataIndex: 'nickname', width: 120 },
|
||||
{ title: '手机', dataIndex: 'mobile', width: 120 },
|
||||
{ title: '邮箱', dataIndex: 'email', width: 120 },
|
||||
{ title: '状态', dataIndex: 'status', width: 60, ellipsis: true, render: (value) => statusObj[value] },
|
||||
{
|
||||
title: '创建时间',
|
||||
width: window.dfConfig.isPhone ? 160 : 160,
|
||||
dataIndex: 'create_date',
|
||||
ellipsis: true,
|
||||
},
|
||||
];
|
||||
|
||||
function page(curr: number) {
|
||||
if (!listLoading) {
|
||||
params.curr_page = curr;
|
||||
console.log(params);
|
||||
listRequest(stringify(params));
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
page(1);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<FormPlugin gutter={16}>
|
||||
<FormItemPlugin label={'管理员'}>
|
||||
<Input
|
||||
allowClear
|
||||
defaultValue={params.username}
|
||||
placeholder='管理员'
|
||||
onChange={(e) => {
|
||||
params.username = e.target.value.trim() || undefined;
|
||||
}}
|
||||
onPressEnter={() => page(1)}
|
||||
/>
|
||||
</FormItemPlugin>
|
||||
<FormItemPlugin label={'昵称'}>
|
||||
<Input
|
||||
allowClear
|
||||
defaultValue={params.nickname}
|
||||
placeholder='昵称'
|
||||
onChange={(e) => {
|
||||
params.nickname = e.target.value.trim() || undefined;
|
||||
}}
|
||||
onPressEnter={() => page(1)}
|
||||
/>
|
||||
</FormItemPlugin>
|
||||
<FormItemPlugin label={'手机'}>
|
||||
<Input
|
||||
allowClear
|
||||
defaultValue={params.mobile}
|
||||
placeholder='手机'
|
||||
onChange={(e) => {
|
||||
params.mobile = e.target.value.trim() || undefined;
|
||||
}}
|
||||
onPressEnter={() => page(1)}
|
||||
/>
|
||||
</FormItemPlugin>
|
||||
|
||||
<FormItemPlugin>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'nowrap',
|
||||
alignItems: 'center',
|
||||
whiteSpace: 'nowrap',
|
||||
gap: 8,
|
||||
}}
|
||||
>
|
||||
<SearchButton
|
||||
onClick={() => {
|
||||
page(1);
|
||||
}}
|
||||
/>
|
||||
<MoreSearchButton
|
||||
show={showMoreSearch}
|
||||
onClick={() => {
|
||||
setShowMoreSearch((v) => !v);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</FormItemPlugin>
|
||||
</FormPlugin>
|
||||
|
||||
<FormPlugin style={{ display: showMoreSearch ? 'flex' : 'none' }} gutter={16}>
|
||||
<FormItemPlugin label={'状态'}>
|
||||
<Select
|
||||
allowClear
|
||||
value={params.status}
|
||||
options={statusOptions}
|
||||
onChange={(value) => {
|
||||
params.status = value || undefined;
|
||||
setParams({ ...params });
|
||||
}}
|
||||
/>
|
||||
</FormItemPlugin>
|
||||
<FormItemPlugin label={'创建日期'}>
|
||||
<DatePicker.RangePicker
|
||||
style={{ width: '100%' }}
|
||||
onChange={(_values, dates) => {
|
||||
params.create_dateL = dates?.[0] || undefined;
|
||||
params.create_dateU = dates?.[1] || undefined;
|
||||
}}
|
||||
/>
|
||||
</FormItemPlugin>
|
||||
</FormPlugin>
|
||||
|
||||
<GapBox style={{ marginBottom: 12, justifyContent: 'space-between' }}>
|
||||
<GapBox>
|
||||
<Button
|
||||
type='primary'
|
||||
onClick={() => {
|
||||
AdminEditModalRef.current?.show();
|
||||
}}
|
||||
>
|
||||
新增
|
||||
</Button>
|
||||
</GapBox>
|
||||
<HeaderPagination
|
||||
style={{ marginBottom: 0, marginRight: 12 }}
|
||||
current={params.curr_page}
|
||||
pageSize={params.page_count}
|
||||
total={ajaxData.count}
|
||||
onChange={page}
|
||||
/>
|
||||
</GapBox>
|
||||
|
||||
<TablePlugin
|
||||
loading={listLoading}
|
||||
onChange={(_p, _f, sort: any) => {
|
||||
page(1);
|
||||
}}
|
||||
dataSource={ajaxData.data}
|
||||
columns={columns}
|
||||
scroll={{ x: true }}
|
||||
rowKey={'admin_id'}
|
||||
/>
|
||||
|
||||
<FooterPagination
|
||||
current={params.curr_page}
|
||||
pageSize={params.page_count}
|
||||
total={ajaxData.count}
|
||||
onChange={(curr, pageSize) => {
|
||||
params.page_count = pageSize;
|
||||
page(curr);
|
||||
}}
|
||||
/>
|
||||
|
||||
<AdminEditModal ref={AdminEditModalRef} onCallback={() => page(1)} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const StaffList = () => (
|
||||
<PageContainerPlugin breadcrumb={['权限管理', '管理员信息']}>
|
||||
<AdminListForm />
|
||||
</PageContainerPlugin>
|
||||
);
|
||||
export default StaffList;
|
||||
Reference in New Issue
Block a user