FreeERP/FreeERP.Antd.Admin
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

后台管理

Browse Source
This commit is contained in:
孙钦辉
2026-01-20 16:52:41 +08:00
parent b2727a6b5f
commit a7f5e37aac
18 changed files with 1187 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/configs/adminDepConfig.ts Normal file
View File

@@ -0,0 +1,12 @@
/**
* 部门状态
*/
export const stateObj: any = {
1: '正常',
2: '禁用',
};
export const stateOptions = [
{ label: '正常', value: '1' },
{ label: '禁用', value: '2' },
];

12
src/configs/adminGrpConfig.ts Normal file
View File

@@ -0,0 +1,12 @@
/**
* 角色状态
*/
export const statusObj: any = {
1: '正常',
2: '禁用',
};
export const statusOptions = [
{ label: '正常', value: '1' },
{ label: '禁用', value: '2' },
];

6
src/configs/routes.ts
View File

@@ -6,8 +6,8 @@ import ErrorPage from '@/pages/Error';
import Index from '@/pages/Index';
import Login from '@/pages/Record/Login';
import Sys from '@/pages/Record/Sys';
import Dep from '@/pages/Staff/dep';
import Group from '@/pages/Staff/group';
import Dep from '@/pages/Staff/Dep';
import Grp from '@/pages/Staff/Grp';
import StaffList from '@/pages/Staff/List';
import UserList from '@/pages/User/List';
import type { IRouteItem } from '@/router/types';
@@ -44,7 +44,7 @@ export const routes: IRouteItem[] = [
children: [
{ path: '/list', Component: StaffList },
{ path: '/dep', Component: Dep },
{ path: '/group', Component: Group },
{ path: '/group', Component: Grp },
{ path: '/login', Component: Login },
{ path: '/sys', Component: Sys },
],

115
src/pages/Index/index.tsx
View File

@@ -1,32 +1,99 @@
const Index = () => {
import { Card, Col, Descriptions, Row, Tooltip } from 'antd';
import { useEffect, useState } from 'react';
import { DefaultERPName } from '@/configs/config';
import { HomeServices } from '@/services/HomeServices';
import { useRequest } from '@/utils/useRequest';
const Index: React.FC = () => {
const [projectInfo, setProjectInfo] = useState<any>([]); // 项目信息
const [serverInfo, setServerInfo] = useState<any>([]); // 服务器信息
const [admin, setAdminInfo] = useState<any>([]); // 登录信息
const { loading: listLoading, request: listRequest } = useRequest(HomeServices.index, {
onSuccessCodeZero: (res) => {
setProjectInfo(res?.data?.projectInfo || {});
setServerInfo(res?.data?.serverInfo || {});
setAdminInfo(res?.data?.admin || {});
},
});
useEffect(() => {
if (!listLoading) {
listRequest();
}
}, []);
return (
<div>
开发中...
{/* Index */}
{/* <Button
onClick={() => {
// console.log(a);
throw new Error('测试');
<div style={{ padding: 24 }}>
{/* 上面登录信息 */}
<Card title='登录信息' style={{ marginBottom: 24 }}>
<Descriptions column={1}>
<Descriptions.Item label='管理员'>{admin?.username}</Descriptions.Item>
<Descriptions.Item label='昵称'>{admin?.nickname}</Descriptions.Item>
<Descriptions.Item label='注册时间'>{admin?.create_date}</Descriptions.Item>
</Descriptions>
</Card>
{/* 下面两列：左服务器，右项目 */}
<Row gutter={24}>
<Col span={12}>
<Card title='服务器信息'>
<Descriptions column={1}>
<Descriptions.Item label='操作系统'>{serverInfo?.os}</Descriptions.Item>
<Descriptions.Item label='PHP 版本'>{serverInfo?.php}</Descriptions.Item>
<Descriptions.Item label='Web Server'>{serverInfo?.web}</Descriptions.Item>
<Descriptions.Item label='数据库版本'>{serverInfo?.mysql}</Descriptions.Item>
<Descriptions.Item label='Host'>{serverInfo?.host}</Descriptions.Item>
<Descriptions.Item label='支持最大内存'>{serverInfo?.memory_limit}</Descriptions.Item>
<Descriptions.Item label='最大执行时间'>{serverInfo?.max_execution_time}</Descriptions.Item>
<Descriptions.Item label='上传文件大小'>{serverInfo?.upload_max_filesize}</Descriptions.Item>
<Descriptions.Item label='SSL 是否安装'>{String(serverInfo?.ssl)}</Descriptions.Item>
</Descriptions>
</Card>
</Col>
<Col span={12}>
<Card title='项目信息'>
<Descriptions column={1}>
<Descriptions.Item label='项目名称'>{DefaultERPName}</Descriptions.Item>
<Descriptions.Item label='ThinkPHP版本'>{projectInfo?.framework}</Descriptions.Item>
<Descriptions.Item label='时区'>{projectInfo?.timezone}</Descriptions.Item>
<Descriptions.Item label='是否开启调试模式'>{String(projectInfo?.debug)}</Descriptions.Item>
<Descriptions.Item label='Storage 目录可写?'>{String(projectInfo?.storage_writable)}</Descriptions.Item>
<Descriptions.Item label='Cache 目录可写?'>{String(projectInfo?.cache_writable)}</Descriptions.Item>
<Descriptions.Item label='缓存驱动'>{projectInfo?.cache_driver}</Descriptions.Item>
<Descriptions.Item label='Session 驱动'>{projectInfo?.session_driver}</Descriptions.Item>
<Descriptions.Item label='依赖版本'>
<Tooltip
title={
<div
style={{
maxWidth: 480,
maxHeight: 200,
overflowY: 'auto',
whiteSpace: 'normal',
}}
>
测试
</Button>
<Button
onClick={() => {
notificationEventBus.emit({ description: '你好' });
{projectInfo?.dependencies}
</div>
}
>
<span
style={{
display: 'inline-block',
maxWidth: 480,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
cursor: 'pointer',
}}
>
测试2
</Button>
<Button
onClick={() => {
notificationEventBus.emitClose('MonitorUpdate');
}}
>
关闭提示
</Button>
<a href='#/login'>login</a> */}
{/* {undefined.map()} */}
{projectInfo?.dependencies}
</span>
</Tooltip>
</Descriptions.Item>
</Descriptions>
</Card>
</Col>
</Row>
</div>
);
};

2
src/pages/Login/index.tsx
View File

@@ -18,7 +18,7 @@ const Login = () => {
const { request, loading } = useRequest(AdminServices.login, {
onSuccessCodeZero: (res) => {
notificationEventBus.emit({ description: '登录成功' });
user.updateUser(res.user_info);
user.updateUser(res.admin);
auth.updateAuth(toObject(res.auth) as IAuth);
location.href = '#/';
},

245
src/pages/Staff/Grp/components/AdminGrpEditModal.tsx Normal file
View File

@@ -0,0 +1,245 @@
import { Button, Form, Input, notification, Select, Space, Tree } from 'antd';
import TextArea from 'antd/lib/input/TextArea';
import { stringify } from 'qs';
import type React from 'react';
import { useImperativeHandle, useState } from 'react';
import ModalPlugin from '@/components/ModalPlugin';
import { statusOptions } from '@/configs/adminGrpConfig';
import { AdminGroupServices } from '@/services/AdminGroupServices';
import type { IRef } from '@/utils/type';
import { useRequest } from '@/utils/useRequest';
interface IProps extends IRef {
onCallback?: () => void;
}
export type IAdminGrpEditModalType = {
show: (data?: any) => void;
};
export const AdminGrpEditModal: React.FC<IProps> = (props) => {
const [open, setOpen] = useState(false);
const [title, setTitle] = useState('');
const [form] = Form.useForm();
const [data, setData] = useState<any>(null);
const [menuTree, setMenuTree] = useState<any[]>([]);
const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
// 请求成功回调
const success = (res: any) => {
if (res.err_code === 0) {
notification.success({ message: '保存成功' });
props.onCallback?.();
setOpen(false);
form.resetFields();
setCheckedKeys([]);
}
};
const { loading: addLoading, request: addRequest } = useRequest(AdminGroupServices.add, { onSuccess: success });
const { loading: editLoading, request: editRequest } = useRequest(AdminGroupServices.edit, { onSuccess: success });
// 获取菜单 + 功能树
const { request: getMenuTreeRequest } = useRequest(AdminGroupServices.getGrpAjaxRights, {
onSuccessCodeZero: (res) => {
setMenuTree(transformToTreeNodes(res.data));
},
});
// 将后端数据转换为 Tree 节点
const transformToTreeNodes = (menus: any[]): any[] => {
return menus.map((menu) => {
const childrenNodes: any[] = [];
// 子菜单和功能节点
if (menu.children && menu.children.length > 0) {
menu.children.forEach((child: any) => {
const childNodes: any[] = [];
// 子菜单的功能节点
if (child.children && child.children.length > 0) {
child.children.forEach((func: any) => {
childNodes.push({
title: func.function_ch_name,
key: `func_${func.function_id}`,
isLeaf: true,
});
});
}
// 子菜单自己的功能
if (child.functions && child.functions.length > 0) {
child.functions.forEach((func: any) => {
childNodes.push({
title: func.function_ch_name,
key: `func_${func.function_id}`,
isLeaf: true,
});
});
}
childrenNodes.push({
title: child.menu_ch_name,
key: `menu_${child.menu_id}`,
children: childNodes.length > 0 ? childNodes : undefined,
});
});
}
// 菜单自己的功能节点
if (menu.functions && menu.functions.length > 0) {
menu.functions.forEach((func: any) => {
childrenNodes.push({
title: func.function_ch_name,
key: `func_${func.function_id}`,
isLeaf: true,
});
});
}
return {
title: menu.menu_ch_name,
key: `menu_${menu.menu_id}`,
children: childrenNodes.length > 0 ? childrenNodes : undefined,
};
});
};
const save = async () => {
try {
const values = await form.validateFields();
// 只取功能节点
const funcIds = checkedKeys
.filter((k) => typeof k === 'string' && k.toString().startsWith('func_'))
.map((k) => k.toString().replace('func_', ''));
values.rules = funcIds.join(',');
if (data?.group_id) {
values.group_id = data.group_id;
editRequest(stringify(values));
} else {
addRequest(stringify(values));
}
} catch (error) {
console.log('表单验证未通过', error);
}
};
useImperativeHandle(props.ref, () => ({
show: async (data?: any) => {
setTitle(data ? `${data.name} 编辑` : '新增');
setOpen(true);
setData(data);
setExpandedKeys([]);
form.resetFields();
form.setFieldsValue({
name: data?.name || '',
comments: data?.comments || '',
status: data ? String(data.status) : '1',
});
await getMenuTreeRequest();
if (data?.rules) {
const keys = data.rules.split(',').map((id: string) => `func_${id}`);
setCheckedKeys(keys);
} else {
setCheckedKeys([]);
}
},
}));
const selectAllFuncs = () => {
const allFuncKeys: React.Key[] = [];
const traverse = (nodes: any[]) => {
nodes.forEach((node) => {
if (node.isLeaf) allFuncKeys.push(node.key);
if (node.children) traverse(node.children);
});
};
traverse(menuTree);
setCheckedKeys(allFuncKeys);
};
const expandAll = () => {
const keys: React.Key[] = [];
const traverse = (nodes: any[]) => {
nodes.forEach((node) => {
keys.push(node.key);
if (node.children) traverse(node.children);
});
};
traverse(menuTree);
setExpandedKeys(keys);
};
const collapseAll = () => {
setExpandedKeys([]);
};
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='name'
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='status'>
<Select options={statusOptions} placeholder='请选择状态' />
</Form.Item>
<Form.Item label='备注' name='comments'>
<TextArea allowClear maxLength={200} showCount />
</Form.Item>
{/* 权限设置 */}
<Form.Item label='权限设置'>
<Space style={{ marginBottom: 8 }}>
<Button onClick={selectAllFuncs}>全选</Button>
<Button onClick={() => setCheckedKeys([])}>全不选</Button>
<Button onClick={expandAll}>展开</Button>
<Button onClick={collapseAll}>折叠</Button>
</Space>
<Tree
checkable
checkStrictly={false} // 父子联动
treeData={menuTree}
checkedKeys={checkedKeys}
expandedKeys={expandedKeys}
onExpand={(keys) => setExpandedKeys(keys)}
onCheck={(keys) => setCheckedKeys(keys as React.Key[])}
/>
</Form.Item>
</Form>
</ModalPlugin>
);
};

55
src/pages/Staff/Grp/components/AdminGrpSelect.tsx Normal file
View File

@@ -0,0 +1,55 @@
import { Select } from 'antd';
import type { InputStatus } from 'antd/es/_util/statusUtils';
import type React from 'react';
import { useEffect, useState } from 'react';
import { AdminGroupServices } from '@/services/AdminGroupServices';
import { isArray } from '@/utils/common';
import { useRequest } from '@/utils/useRequest';
interface IProps {
status?: InputStatus;
value?: string | number;
onChange?: (value: string | number) => void;
onBlur?: React.FocusEventHandler<HTMLElement> | undefined;
allowClear?: boolean;
}
const AdminGrpSelect: React.FC<IProps> = (props) => {
const [list, setList] = useState<any[]>([]);
const { request } = useRequest(AdminGroupServices.getAdminGroupAjaxList, {
onSuccess: (res) => {
const arr: any[] = [];
if (res.err_code == 0 && isArray(res.data)) {
res.data.forEach((item: any) => {
arr.push({
label: item.name,
value: item.group_id,
});
});
}
setList(arr);
},
});
useEffect(() => {
request();
}, []);
return (
<Select
status={props.status}
showSearch
allowClear={props.allowClear}
value={props.value}
onChange={(value) => {
props.onChange?.(value);
}}
onBlur={(event) => {
props.onBlur?.(event);
}}
options={list}
popupRender={(menu) => <>{menu}</>}
/>
);
};
export default AdminGrpSelect;

242
src/pages/Staff/Grp/index.tsx Normal file
View File

@@ -0,0 +1,242 @@
import { Button, DatePicker, Input, notification, Popconfirm, 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 { SearchButton } from '@/components/SearchButton';
import type { ColumnsTypeUltra } from '@/components/TableColumnsFilterPlugin';
import { TablePlugin } from '@/components/TablePlugin';
import { statusObj, statusOptions } from '@/configs/adminGrpConfig';
import type { IAjaxDataBase, IParamsBase } from '@/interfaces/common';
import { AdminGroupServices } from '@/services/AdminGroupServices';
import { useAuthStore } from '@/store/AuthStore';
import { tableFixedByPhone, toArray } from '@/utils/common';
import { useRequest } from '@/utils/useRequest';
import { AdminGrpEditModal, type IAdminGrpEditModalType } from './components/AdminGrpEditModal';
interface IAjaxData extends IAjaxDataBase {
data: any[];
}
type IParams = IParamsBase & {
name?: string;
status?: number;
create_dateL?: string;
create_dateU?: string;
};
/** 岗位角色列表页面 */
const GrpListForm: 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 AdminGrpEditModalRef = useRef<IAdminGrpEditModalType>(null);
const { loading: listLoading, request: listRequest } = useRequest(AdminGroupServices.getAdminGroupList, {
onSuccessCodeZero: (res) => {
setAjaxData({
count: res.count || 0,
data: toArray(res.data),
});
},
});
const { request: deleteAdminGroupRequest } = useRequest(AdminGroupServices.del, {
onSuccessCodeZero: (res) => {
if (res.err_code == 0) {
notification.success({ message: '删除成功' });
page(params.curr_page);
}
},
});
const columns: ColumnsTypeUltra<any> = [
{
title: '操作',
width: 50,
fixed: tableFixedByPhone('left'),
render: (_, item) => (
<GapBox>
{item?.group_id != 1 && (
<>
<Button
type='primary'
onClick={() => {
AdminGrpEditModalRef.current?.show(item);
}}
>
编辑
</Button>
<Popconfirm
placement='bottom'
title='确认删除该岗位角色吗？'
onConfirm={() => {
deleteAdminGroupRequest(stringify({ group_id: item.group_id }));
}}
>
<Button danger>删除</Button>
</Popconfirm>
</>
)}
</GapBox>
),
},
{ title: '岗位角色', dataIndex: 'name', width: 120 },
{ title: '状态', dataIndex: 'status', width: 60, ellipsis: true, render: (value) => statusObj[value] },
{ title: '备注', dataIndex: 'comments', width: 120 },
{
title: '创建时间',
width: window.dfConfig.isPhone ? 160 : 160,
dataIndex: 'create_date',
ellipsis: true,
},
];
function page(curr: number) {
if (!listLoading) {
params.curr_page = curr;
listRequest(stringify(params));
}
}
useEffect(() => {
page(1);
}, []);
return (
<>
<FormPlugin gutter={16}>
<FormItemPlugin label={'岗位角色'}>
<Input
allowClear
defaultValue={params.name}
placeholder='岗位角色'
onChange={(e) => {
params.name = e.target.value.trim() || undefined;
}}
onPressEnter={() => page(1)}
/>
</FormItemPlugin>
<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>
<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.state}
options={statusOptions}
onChange={(value) => {
params.state = 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={() => {
AdminGrpEditModalRef.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={'group_id'}
/>
<FooterPagination
current={params.curr_page}
pageSize={params.page_count}
total={ajaxData.count}
onChange={(curr, pageSize) => {
params.page_count = pageSize;
page(curr);
}}
/>
<AdminGrpEditModal ref={AdminGrpEditModalRef} onCallback={() => page(1)} />
</>
);
};
const Grp = () => (
<PageContainerPlugin breadcrumb={['权限管理', '岗位角色']}>
<GrpListForm />
</PageContainerPlugin>
);
export default Grp;

47
src/pages/Staff/List/components/AdminEditModal.tsx
View File

@@ -4,8 +4,11 @@ import type React from 'react';
import { useImperativeHandle, useState } from 'react';
import ModalPlugin from '@/components/ModalPlugin';
import { statusOptions } from '@/configs/adminConfig';
import { AdminDepartmentServices } from '@/services/AdminDepartmentServices';
import { AdminGroupServices } from '@/services/AdminGroupServices';
import { AdminServices } from '@/services/AdminServices';
import type { IRef } from '@/utils/type';
import { toArray } from '@/utils/common';
import type { IOption, IRef } from '@/utils/type';
import { useRequest } from '@/utils/useRequest';
interface IProps extends IRef {
@@ -21,6 +24,23 @@ export const AdminEditModal: React.FC<IProps> = (props) => {
const [title, setTitle] = useState('');
const [form] = Form.useForm();
const [data, setData] = useState<any>(null);
const [department, setDepartment] = useState<IOption[]>([]);
const [group, setGroup] = useState<IOption[]>([]);
const { request: getAdminDepartmentAjaxListRequest } = useRequest(
AdminDepartmentServices.getAdminDepartmentAjaxList,
{
onSuccessCodeZero: (res) => {
setDepartment(toArray(res.data).map((el) => ({ value: el.department_id, label: el.department_name })));
},
},
);
const { request: getAdminGroupAjaxListRequest } = useRequest(AdminGroupServices.getAdminGroupAjaxList, {
onSuccessCodeZero: (res) => {
setGroup(toArray(res.data).map((el) => ({ value: el.group_id, label: el.name })));
},
});
// 请求成功回调
const success = (res: any) => {
@@ -38,6 +58,7 @@ export const AdminEditModal: React.FC<IProps> = (props) => {
const save = async () => {
try {
const values = await form.validateFields();
//values.group_id = values.group_id?.join(',') ?? '';
// 编辑场景带上主键
if (data?.admin_id) {
values.admin_id = data.admin_id;
@@ -51,12 +72,19 @@ export const AdminEditModal: React.FC<IProps> = (props) => {
};
useImperativeHandle(props.ref, () => ({
show: (data?: any) => {
show: async (data?: any) => {
setTitle(data ? `${data.username} 编辑` : '新增');
setOpen(true);
setData(data);
await getAdminDepartmentAjaxListRequest();
await getAdminGroupAjaxListRequest();
if (data) {
console.log(data.group_id);
console.log(data.group_id.split(','));
console.log(data.group_id.split(',').map(Number));
// 编辑场景初始化表单
form.setFieldsValue({
username: data.username,
@@ -65,11 +93,14 @@ export const AdminEditModal: React.FC<IProps> = (props) => {
nickname: data.nickname,
password: '', // 密码编辑可选
status: String(data.status),
department_id: data.department_id,
group_id: data.group_id ? data.group_id.split(',').map(Number) : [],
});
} else {
form.resetFields();
form.setFieldsValue({
status: '1',
group_id: [],
});
}
},
@@ -90,6 +121,18 @@ export const AdminEditModal: React.FC<IProps> = (props) => {
]}
>
<Form form={form} labelCol={{ style: { width: window?.dfConfig?.language === 'zh-cn' ? 80 : 120 } }}>
<Form.Item label='岗位角色' name='group_id' required rules={[{ required: true, message: '请选择岗位角色' }]}>
<Select options={group} mode='multiple' allowClear placeholder='请选择岗位角色' />
</Form.Item>
<Form.Item
label='组织架构'
name='department_id'
required
rules={[{ required: true, message: '请选择组织架构' }]}
>
<Select options={department} allowClear placeholder='请选择组织架构' />
</Form.Item>
<Form.Item
label='用户名'
name='username'

56
src/pages/Staff/List/index.tsx
View File

@@ -1,4 +1,4 @@
import { Button, DatePicker, Input, Select } from 'antd';
import { Button, DatePicker, Input, notification, Popconfirm, Select } from 'antd';
import { stringify } from 'qs';
import { useEffect, useRef, useState } from 'react';
import { FormItemPlugin, FormPlugin } from '@/components/FormPlugin';
@@ -14,6 +14,8 @@ import { AdminServices } from '@/services/AdminServices';
import { useAuthStore } from '@/store/AuthStore';
import { tableFixedByPhone, toArray } from '@/utils/common';
import { useRequest } from '@/utils/useRequest';
import AdminDepSelect from '../Dep/components/AdminDepSelect';
import AdminGrpSelect from '../Grp/components/AdminGrpSelect';
import { AdminEditModal, type IAdminEditModalType } from './components/AdminEditModal';
interface IAjaxData extends IAjaxDataBase {
@@ -24,6 +26,8 @@ type IParams = IParamsBase & {
nickname?: string;
mobile?: string;
status?: number;
department_id?: any;
group_id?: any;
create_dateL?: string;
create_dateU?: string;
};
@@ -45,14 +49,24 @@ const AdminListForm: React.FC = () => {
},
});
const { request: deleteAdminRequest } = useRequest(AdminServices.del, {
onSuccessCodeZero: (res) => {
if (res.err_code == 0) {
notification.success({ message: '删除成功' });
page(params.curr_page);
}
},
});
const columns: ColumnsTypeUltra<any> = [
{
title: '操作',
width: 50,
width: 90,
fixed: tableFixedByPhone('left'),
render: (_, item) => (
<GapBox>
{item?.admin_id != 1 && (
<>
<Button
type='primary'
onClick={() => {
@@ -61,15 +75,27 @@ const AdminListForm: React.FC = () => {
>
编辑
</Button>
<Popconfirm
placement='bottom'
title='确认删除该管理员吗？'
onConfirm={() => {
deleteAdminRequest(stringify({ admin_id: item.admin_id }));
}}
>
<Button danger>删除</Button>
</Popconfirm>
</>
)}
</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: '管理员', dataIndex: 'username', width: 80 },
{ title: '昵称', dataIndex: 'nickname', width: 80 },
{ title: '岗位角色', dataIndex: 'group_name', width: 120 },
{ title: '组织架构', dataIndex: 'department_name', width: 120 },
{ title: '手机', dataIndex: 'mobile', width: 80 },
{ title: '邮箱', dataIndex: 'email', width: 80 },
{ title: '状态', dataIndex: 'status', width: 20, ellipsis: true, render: (value) => statusObj[value] },
{
title: '创建时间',
width: window.dfConfig.isPhone ? 160 : 160,
@@ -164,6 +190,22 @@ const AdminListForm: React.FC = () => {
}}
/>
</FormItemPlugin>
<FormItemPlugin label={'岗位角色'}>
<AdminGrpSelect
allowClear
onChange={(value) => {
params.group_id = value || undefined;
}}
/>
</FormItemPlugin>
<FormItemPlugin label={'组织架构'}>
<AdminDepSelect
allowClear
onChange={(value) => {
params.department_id = value || undefined;
}}
/>
</FormItemPlugin>
<FormItemPlugin label={'创建日期'}>
<DatePicker.RangePicker
style={{ width: '100%' }}

116
src/pages/Staff/dep/components/AdminDepEditModal.tsx Normal file
View File

@@ -0,0 +1,116 @@
import { Button, Form, Input, notification, Select } from 'antd';
import TextArea from 'antd/lib/input/TextArea';
import { stringify } from 'qs';
import type React from 'react';
import { useImperativeHandle, useState } from 'react';
import ModalPlugin from '@/components/ModalPlugin';
import { stateOptions } from '@/configs/adminDepConfig';
import { AdminDepartmentServices } from '@/services/AdminDepartmentServices';
import type { IRef } from '@/utils/type';
import { useRequest } from '@/utils/useRequest';
interface IProps extends IRef {
onCallback?: () => void;
}
export type IAdminDepEditModalType = {
show: (data?: any) => void;
};
export const AdminDepEditModal: 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(AdminDepartmentServices.add, { onSuccess: success });
const { loading: editLoading, request: editRequest } = useRequest(AdminDepartmentServices.edit, {
onSuccess: success,
});
const save = async () => {
try {
const values = await form.validateFields();
// 编辑场景带上主键
if (data?.department_id) {
values.department_id = data.department_id;
editRequest(stringify(values));
} else {
addRequest(stringify(values));
}
} catch (error) {
console.log('表单验证未通过', error);
}
};
useImperativeHandle(props.ref, () => ({
show: (data?: any) => {
setTitle(data ? `${data.department_name} 编辑` : '新增');
setOpen(true);
setData(data);
if (data) {
// 编辑场景初始化表单
form.setFieldsValue({
department_name: data.department_name,
comments: data.comments,
state: String(data.state),
});
} else {
form.resetFields();
form.setFieldsValue({
state: '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='department_name'
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='state'>
<Select options={stateOptions} placeholder='请选择状态' />
</Form.Item>
<Form.Item label='备注' name='comments'>
<TextArea allowClear maxLength={200} showCount />
</Form.Item>
</Form>
</ModalPlugin>
);
};

55
src/pages/Staff/dep/components/AdminDepSelect.tsx Normal file
View File

@@ -0,0 +1,55 @@
import { Select } from 'antd';
import type { InputStatus } from 'antd/es/_util/statusUtils';
import type React from 'react';
import { useEffect, useState } from 'react';
import { AdminDepartmentServices } from '@/services/AdminDepartmentServices';
import { isArray } from '@/utils/common';
import { useRequest } from '@/utils/useRequest';
interface IProps {
status?: InputStatus;
value?: string | number;
onChange?: (value: string | number) => void;
onBlur?: React.FocusEventHandler<HTMLElement> | undefined;
allowClear?: boolean;
}
const AdminDepSelect: React.FC<IProps> = (props) => {
const [list, setList] = useState<any[]>([]);
const { request } = useRequest(AdminDepartmentServices.getAdminDepartmentAjaxList, {
onSuccess: (res) => {
const arr: any[] = [];
if (res.err_code == 0 && isArray(res.data)) {
res.data.forEach((item: any) => {
arr.push({
label: item.department_name,
value: item.department_id,
});
});
}
setList(arr);
},
});
useEffect(() => {
request();
}, []);
return (
<Select
status={props.status}
showSearch
allowClear={props.allowClear}
value={props.value}
onChange={(value) => {
props.onChange?.(value);
}}
onBlur={(event) => {
props.onBlur?.(event);
}}
options={list}
popupRender={(menu) => <>{menu}</>}
/>
);
};
export default AdminDepSelect;

240
src/pages/Staff/dep/index.tsx
View File

@@ -1,17 +1,245 @@
import { Button, DatePicker, Input, notification, Popconfirm, 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 { SearchButton } from '@/components/SearchButton';
import type { ColumnsTypeUltra } from '@/components/TableColumnsFilterPlugin';
import { TablePlugin } from '@/components/TablePlugin';
import { stateObj, stateOptions } from '@/configs/adminDepConfig';
import type { IAjaxDataBase, IParamsBase } from '@/interfaces/common';
import { AdminDepartmentServices } from '@/services/AdminDepartmentServices';
import { useAuthStore } from '@/store/AuthStore';
import { tableFixedByPhone, toArray } from '@/utils/common';
import { useRequest } from '@/utils/useRequest';
import { AdminDepEditModal, type IAdminDepEditModalType } from './components/AdminDepEditModal';
interface IAjaxData extends IAjaxDataBase {
data: any[];
}
type IParams = IParamsBase & {
department_name?: string;
nickname?: string;
mobile?: string;
state?: number;
create_dateL?: string;
create_dateU?: string;
};
/** 组织架构列表页面 */
const DepListForm: 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 AdminDepEditModalRef = useRef<IAdminDepEditModalType>(null);
const { loading: listLoading, request: listRequest } = useRequest(AdminDepartmentServices.getAdminDepartmentList, {
onSuccessCodeZero: (res) => {
setAjaxData({
count: res.count || 0,
data: toArray(res.data),
});
},
});
const { request: deleteAdminDepartmentRequest } = useRequest(AdminDepartmentServices.del, {
onSuccessCodeZero: (res) => {
if (res.err_code == 0) {
notification.success({ message: '删除成功' });
page(params.curr_page);
}
},
});
const columns: ColumnsTypeUltra<any> = [
{
title: '操作',
width: 50,
fixed: tableFixedByPhone('left'),
render: (_, item) => (
<GapBox>
{item?.admin_id != 1 && (
<>
<Button
type='primary'
onClick={() => {
AdminDepEditModalRef.current?.show(item);
}}
>
编辑
</Button>
<Popconfirm
placement='bottom'
title='确认删除该组织架构吗？'
onConfirm={() => {
deleteAdminDepartmentRequest(stringify({ department_id: item.department_id }));
}}
>
<Button danger>删除</Button>
</Popconfirm>
</>
)}
</GapBox>
),
},
{ title: '组织架构', dataIndex: 'department_name', width: 120 },
{ title: '状态', dataIndex: 'state', width: 60, ellipsis: true, render: (value) => stateObj[value] },
{ title: '备注', dataIndex: 'comments', width: 120 },
{
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);
}, []);
const DepContent = () => {
return (
<div>
<div>Dep</div>
<>
<FormPlugin gutter={16}>
<FormItemPlugin label={'组织架构'}>
<Input
allowClear
defaultValue={params.department_name}
placeholder='组织架构'
onChange={(e) => {
params.department_name = e.target.value.trim() || undefined;
}}
onPressEnter={() => page(1)}
/>
</FormItemPlugin>
<FormItemPlugin label={'状态'}>
<Select
allowClear
value={params.state}
options={stateOptions}
onChange={(value) => {
params.state = 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>
<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.state}
options={statusOptions}
onChange={(value) => {
params.state = 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={() => {
AdminDepEditModalRef.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={'department_id'}
/>
<FooterPagination
current={params.curr_page}
pageSize={params.page_count}
total={ajaxData.count}
onChange={(curr, pageSize) => {
params.page_count = pageSize;
page(curr);
}}
/>
<AdminDepEditModal ref={AdminDepEditModalRef} onCallback={() => page(1)} />
</>
);
};
const Dep = () => (
<PageContainerPlugin breadcrumb={['用户管理', '组织架构']}>
<DepContent />
<PageContainerPlugin breadcrumb={['权限管理', '组织架构']}>
<DepListForm />
</PageContainerPlugin>
);
export default Dep;

17
src/pages/Staff/group/index.tsx
View File

@@ -1,17 +0,0 @@
import PageContainerPlugin from '@/components/PageContainer/PageContainerPlugin';
const GroupContent = () => {
return (
<div>
<div>Group</div>
</div>
);
};
const Group = () => (
<PageContainerPlugin breadcrumb={['用户管理', '岗位角色']}>
<GroupContent />
</PageContainerPlugin>
);
export default Group;

4
src/services/AdminDepartmentServices.ts
View File

@@ -1,3 +1,7 @@
export const AdminDepartmentServices = {
getAdminDepartmentList: '/AdminDepartment/getAdminDepartmentList',
getAdminDepartmentAjaxList: '/AdminDepartment/getAdminDepartmentAjaxList',
add: '/AdminDepartment/add',
edit: '/AdminDepartment/edit',
del: '/AdminDepartment/del',
} as const;

6
src/services/AdminGroupServices.ts
View File

@@ -1,3 +1,9 @@
export const AdminGroupServices = {
getAdminGroupList: '/AdminGroup/getAdminGroupList',
add: '/AdminGroup/add',
edit: '/AdminGroup/edit',
del: '/AdminGroup/del',
// AJAX
getGrpAjaxRights: '/AdminGroup/getGrpAjaxRights',
getAdminGroupAjaxList: '/AdminGroup/getAdminGroupAjaxList',
} as const;

1
src/services/AdminServices.ts
View File

@@ -9,4 +9,5 @@ export const AdminServices = {
getAdminList: '/Admin/getAdminList',
add: '/Admin/add',
edit: '/Admin/edit',
del: '/Admin/del',
} as const;

3
src/services/HomeServices.ts Normal file
View File

@@ -0,0 +1,3 @@
export const HomeServices = {
index: '/Index/index',
} as const;