后台管理
This commit is contained in:
245
src/pages/Staff/Grp/components/AdminGrpEditModal.tsx
Normal file
245
src/pages/Staff/Grp/components/AdminGrpEditModal.tsx
Normal 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
55
src/pages/Staff/Grp/components/AdminGrpSelect.tsx
Normal 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
242
src/pages/Staff/Grp/index.tsx
Normal 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;
|
||||
Reference in New Issue
Block a user