This commit is contained in:
170
src/pages/system/dept/config.tsx
Normal file
170
src/pages/system/dept/config.tsx
Normal file
@@ -0,0 +1,170 @@
|
||||
import type {
|
||||
ProColumns,
|
||||
ProFormColumnsType,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Tag } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import { tenantStatus } from '@/constants';
|
||||
import type { DeptVO } from '@/services/system/dept';
|
||||
import { getStatusLabel } from '@/utils/constant';
|
||||
|
||||
export const baseDeptColumns: ProColumns<DeptVO>[] = [
|
||||
{
|
||||
title: '部门名称',
|
||||
dataIndex: 'name',
|
||||
ellipsis: true,
|
||||
hideInSearch: true,
|
||||
},
|
||||
// { prop: "leaderUserId", label: "负责人", width: 100 },
|
||||
{
|
||||
title: '负责人',
|
||||
dataIndex: 'leaderUserId',
|
||||
hideInSearch: true,
|
||||
},
|
||||
// { prop: "sort", label: "排序", width: 100 },
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
hideInSearch: true,
|
||||
},
|
||||
// {
|
||||
// prop: "status",
|
||||
// label: "状态",
|
||||
// width: 100,
|
||||
// render: (record) => (
|
||||
// <ElTag type={record.status == 1 ? "info" : "primary"}>
|
||||
// {getStatusLabel(tenantStatus, record.status)}
|
||||
// </ElTag>
|
||||
// )
|
||||
// },
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
hideInSearch: true,
|
||||
render: (_, record: DeptVO) => [
|
||||
<Tag
|
||||
key={record.status}
|
||||
color={record.status === 1 ? 'default' : 'processing'}
|
||||
>
|
||||
{getStatusLabel(tenantStatus, record.status)}
|
||||
</Tag>,
|
||||
],
|
||||
},
|
||||
// {
|
||||
// prop: "createTime",
|
||||
// label: "创建时间",
|
||||
// width: 160,
|
||||
// render: (row) => dateFormatter(row.createTime)
|
||||
// },
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
valueType: 'dateRange',
|
||||
search: {
|
||||
transform: (value) => {
|
||||
return {
|
||||
'createTime[0]': dayjs(value[0])
|
||||
.startOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
'createTime[1]': dayjs(value[1])
|
||||
.endOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
};
|
||||
},
|
||||
},
|
||||
render: (_, record: DeptVO) =>
|
||||
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
];
|
||||
|
||||
export const formColumns = (_type: string): ProFormColumnsType[] => [
|
||||
{
|
||||
title: '上级部门',
|
||||
dataIndex: 'parentId',
|
||||
valueType: 'treeSelect',
|
||||
fieldProps: () => {
|
||||
return {
|
||||
multiple: true,
|
||||
placeholder: '请选择上级部门',
|
||||
options: [{ label: '11', value: 5016 }],
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '部门名称',
|
||||
dataIndex: 'name',
|
||||
valueType: 'text',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入部门名称',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '显示顺序',
|
||||
dataIndex: 'sort',
|
||||
valueType: 'digit',
|
||||
fieldProps: {
|
||||
min: 0,
|
||||
},
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入显示顺序',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '负责人',
|
||||
dataIndex: 'leaderUserId',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择负责人',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '邮箱',
|
||||
dataIndex: 'email',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入邮箱',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
valueType: 'select',
|
||||
fieldProps: {
|
||||
options: [
|
||||
{
|
||||
label: '正常',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '禁用',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
@@ -1,5 +1,136 @@
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import { Popconfirm } from 'antd';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import ConfigurableDrawerForm, {
|
||||
type ConfigurableDrawerFormRef,
|
||||
} from '@/components/DrawerForm';
|
||||
import EnhancedProTable from '@/components/EnhancedProTable';
|
||||
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
|
||||
import { formStatusType } from '@/constants';
|
||||
import {
|
||||
createDept,
|
||||
type DeptReqVO,
|
||||
type DeptVO,
|
||||
deleteDept,
|
||||
getDeptPage,
|
||||
updateDept,
|
||||
} from '@/services/system/dept';
|
||||
import { handleTree } from '@/utils/tree';
|
||||
import { baseDeptColumns, formColumns } from './config';
|
||||
|
||||
const SyStemDept = () => {
|
||||
return <>SyStemDept</>;
|
||||
const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||
const tableRef = useRef<ActionType>(null);
|
||||
|
||||
const [type, setType] = useState<'create' | 'update'>('create');
|
||||
const [id, setId] = useState<number>(0);
|
||||
|
||||
const handleEdit = (record: DeptVO) => {
|
||||
setType('update');
|
||||
setId(record.id);
|
||||
|
||||
configurableDrawerRef.current?.open(record);
|
||||
};
|
||||
|
||||
const onFetch = async (
|
||||
params: DeptReqVO & {
|
||||
pageSize?: number;
|
||||
current?: number;
|
||||
},
|
||||
) => {
|
||||
const data = await getDeptPage({
|
||||
...params,
|
||||
pageNo: params.current,
|
||||
pageSize: params.pageSize,
|
||||
});
|
||||
return {
|
||||
data: handleTree(data),
|
||||
success: true,
|
||||
total: data.total,
|
||||
};
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
setType('create');
|
||||
configurableDrawerRef.current?.open({});
|
||||
};
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
async (values: DeptVO) => {
|
||||
if (type === 'create') {
|
||||
await createDept(values);
|
||||
} else {
|
||||
await updateDept({
|
||||
...values,
|
||||
id,
|
||||
});
|
||||
}
|
||||
tableRef.current?.reload();
|
||||
return true;
|
||||
},
|
||||
[type, id],
|
||||
);
|
||||
|
||||
const toolbarActions: ToolbarAction[] = [
|
||||
{
|
||||
key: 'add',
|
||||
label: '新建',
|
||||
type: 'primary',
|
||||
icon: <PlusOutlined />,
|
||||
onClick: handleAdd,
|
||||
},
|
||||
];
|
||||
|
||||
const actionColumns: ProColumns<DeptVO> = {
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
width: 120,
|
||||
render: (_text: React.ReactNode, record: DeptVO, _: any, action: any) => [
|
||||
<a key="editable" onClick={() => handleEdit(record)}>
|
||||
编辑
|
||||
</a>,
|
||||
<Popconfirm
|
||||
title="是否删除?"
|
||||
key="delete"
|
||||
onConfirm={async () => {
|
||||
await deleteDept(record.id);
|
||||
action?.reload();
|
||||
}}
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
>
|
||||
<a>删除</a>
|
||||
</Popconfirm>,
|
||||
],
|
||||
};
|
||||
|
||||
const columns = [...baseDeptColumns, actionColumns];
|
||||
return (
|
||||
<>
|
||||
<EnhancedProTable<DeptVO>
|
||||
ref={tableRef}
|
||||
columns={columns}
|
||||
request={onFetch}
|
||||
toolbarActions={toolbarActions}
|
||||
headerTitle="租户列表"
|
||||
showIndex={false}
|
||||
showSelection={false}
|
||||
expandable={{
|
||||
defaultExpandAllRows: true,
|
||||
}}
|
||||
/>
|
||||
|
||||
<ConfigurableDrawerForm
|
||||
ref={configurableDrawerRef}
|
||||
title={formStatusType[type]}
|
||||
columns={formColumns(type)}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SyStemDept;
|
||||
|
||||
120
src/pages/system/dict/config.tsx
Normal file
120
src/pages/system/dict/config.tsx
Normal file
@@ -0,0 +1,120 @@
|
||||
import type {
|
||||
ProColumns,
|
||||
ProFormColumnsType,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Tag } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import { tenantStatus } from '@/constants';
|
||||
import type { DictTypeVO } from '@/services/system/dict/dict.type';
|
||||
|
||||
export const baseDictTypeColumns: ProColumns<DictTypeVO>[] = [
|
||||
{
|
||||
title: '字典编号',
|
||||
dataIndex: 'id',
|
||||
width: 80,
|
||||
align: 'left',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '字典名称',
|
||||
dataIndex: 'name',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '字典类型',
|
||||
dataIndex: 'type',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
width: 100,
|
||||
render: (_, record) => (
|
||||
<Tag
|
||||
key={record.status}
|
||||
color={record.status === 1 ? 'default' : 'processing'}
|
||||
>
|
||||
{record.status === 1 ? '正常' : '禁用'}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
width: 120,
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
valueType: 'dateRange',
|
||||
search: {
|
||||
transform: (value) => {
|
||||
return {
|
||||
'createTime[0]': dayjs(value[0])
|
||||
.startOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
'createTime[1]': dayjs(value[1])
|
||||
.endOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
};
|
||||
},
|
||||
},
|
||||
render: (_, record: DictTypeVO) =>
|
||||
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
];
|
||||
|
||||
export const formColumns = (type: string): ProFormColumnsType[] => [
|
||||
{
|
||||
title: '字典名称',
|
||||
dataIndex: 'name',
|
||||
valueType: 'text',
|
||||
colProps: {
|
||||
span: 12,
|
||||
},
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入字典名称',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '字典类型',
|
||||
dataIndex: 'type',
|
||||
valueType: 'text',
|
||||
fieldProps: {
|
||||
disabled: type === 'update',
|
||||
},
|
||||
colProps: {
|
||||
span: 12,
|
||||
},
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入字典类型',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
valueType: 'select',
|
||||
fieldProps: {
|
||||
options: tenantStatus,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
valueType: 'textarea',
|
||||
colProps: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
];
|
||||
189
src/pages/system/dict/data/config.tsx
Normal file
189
src/pages/system/dict/data/config.tsx
Normal file
@@ -0,0 +1,189 @@
|
||||
import type {
|
||||
ProColumns,
|
||||
ProFormColumnsType,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Tag } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import { tenantStatus } from '@/constants';
|
||||
import type { DictDataVO } from '@/services/system/dict/dict.data';
|
||||
import { getStatusLabel } from '@/utils/constant';
|
||||
|
||||
export const baseDictDataColumns: ProColumns<DictDataVO>[] = [
|
||||
{
|
||||
title: '字典编码',
|
||||
dataIndex: 'id',
|
||||
width: 80,
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '字典标签',
|
||||
dataIndex: 'label',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '字典键值',
|
||||
dataIndex: 'value',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '字典排序',
|
||||
dataIndex: 'sort',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
width: 80,
|
||||
render: (_, record) => (
|
||||
<Tag color={record.status === 1 ? 'red' : 'green'}>
|
||||
{getStatusLabel(tenantStatus, record.status)}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '颜色类型',
|
||||
dataIndex: 'colorType',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: 'CSS Class',
|
||||
dataIndex: 'cssClass',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
valueType: 'dateRange',
|
||||
search: {
|
||||
transform: (value) => {
|
||||
return {
|
||||
'createTime[0]': dayjs(value[0])
|
||||
.startOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
'createTime[1]': dayjs(value[1])
|
||||
.endOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
};
|
||||
},
|
||||
},
|
||||
render: (_, record: DictDataVO) =>
|
||||
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
];
|
||||
|
||||
export const formColumns = (_type: string): ProFormColumnsType[] => [
|
||||
{
|
||||
title: '字典类型',
|
||||
dataIndex: 'dictType',
|
||||
fieldProps: {
|
||||
disabled: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '字典标签',
|
||||
dataIndex: 'label',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入字典标签',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '字典键值',
|
||||
dataIndex: 'value',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入字典键值',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '显示排序',
|
||||
dataIndex: 'sort',
|
||||
valueType: 'digit',
|
||||
fieldProps: {
|
||||
min: 0,
|
||||
max: 9999,
|
||||
},
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入排序',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
valueType: 'select',
|
||||
fieldProps: {
|
||||
options: [
|
||||
{
|
||||
label: '启用',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '禁用',
|
||||
value: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '颜色类型',
|
||||
dataIndex: 'colorType',
|
||||
valueType: 'select',
|
||||
fieldProps: {
|
||||
options: [
|
||||
{
|
||||
label: '默认(waiting)',
|
||||
value: 'waiting',
|
||||
},
|
||||
{
|
||||
label: '成功(success)',
|
||||
value: 'success',
|
||||
},
|
||||
{
|
||||
label: '信息(processing)',
|
||||
value: 'processing',
|
||||
},
|
||||
{
|
||||
label: '失败(error)',
|
||||
value: 'error',
|
||||
},
|
||||
{
|
||||
label: '警告(warning)',
|
||||
value: 'warning',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'CSS Class',
|
||||
dataIndex: 'cssClass',
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
},
|
||||
];
|
||||
139
src/pages/system/dict/data/index.tsx
Normal file
139
src/pages/system/dict/data/index.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import { useParams } from '@umijs/max';
|
||||
import { Popconfirm } from 'antd';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import ConfigurableDrawerForm, {
|
||||
type ConfigurableDrawerFormRef,
|
||||
} from '@/components/DrawerForm';
|
||||
import EnhancedProTable from '@/components/EnhancedProTable';
|
||||
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
|
||||
import { formStatusType } from '@/constants';
|
||||
import {
|
||||
createDictData,
|
||||
type DictDataVO,
|
||||
deleteDictData,
|
||||
getDictDataPage,
|
||||
updateDictData,
|
||||
} from '@/services/system/dict/dict.data';
|
||||
import { baseDictDataColumns, formColumns } from './config';
|
||||
|
||||
const SyStemDictData = () => {
|
||||
const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||
const tableRef = useRef<ActionType>(null);
|
||||
|
||||
const [type, setType] = useState<'create' | 'update'>('create');
|
||||
const [id, setId] = useState<number>(0);
|
||||
|
||||
const routerParams = useParams();
|
||||
|
||||
console.log(routerParams);
|
||||
|
||||
const handleEdit = (record: DictDataVO) => {
|
||||
setType('update');
|
||||
setId(record.id);
|
||||
|
||||
configurableDrawerRef.current?.open(record);
|
||||
};
|
||||
|
||||
const onFetch = async (params: { pageSize?: number; current?: number }) => {
|
||||
const data = await getDictDataPage({
|
||||
...params,
|
||||
dictType: routerParams.type,
|
||||
pageNo: params.current,
|
||||
pageSize: params.pageSize,
|
||||
});
|
||||
return {
|
||||
data: data.list,
|
||||
success: true,
|
||||
total: data.total,
|
||||
};
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
setType('create');
|
||||
configurableDrawerRef.current?.open({
|
||||
dictType: routerParams.type,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
async (values: DictDataVO) => {
|
||||
if (type === 'create') {
|
||||
await createDictData(values);
|
||||
} else {
|
||||
await updateDictData({
|
||||
...values,
|
||||
id,
|
||||
});
|
||||
}
|
||||
tableRef.current?.reload();
|
||||
return true;
|
||||
},
|
||||
[type, id],
|
||||
);
|
||||
|
||||
const toolbarActions: ToolbarAction[] = [
|
||||
{
|
||||
key: 'add',
|
||||
label: '新建',
|
||||
type: 'primary',
|
||||
icon: <PlusOutlined />,
|
||||
onClick: handleAdd,
|
||||
},
|
||||
];
|
||||
|
||||
const actionColumns: ProColumns<DictDataVO> = {
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
width: 120,
|
||||
render: (
|
||||
_text: React.ReactNode,
|
||||
record: DictDataVO,
|
||||
_: any,
|
||||
action: any,
|
||||
) => [
|
||||
<a key="editable" onClick={() => handleEdit(record)}>
|
||||
编辑
|
||||
</a>,
|
||||
<Popconfirm
|
||||
title="是否删除?"
|
||||
key="delete"
|
||||
onConfirm={async () => {
|
||||
await deleteDictData(record.id);
|
||||
action?.reload();
|
||||
}}
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
>
|
||||
<a>删除</a>
|
||||
</Popconfirm>,
|
||||
],
|
||||
};
|
||||
|
||||
const columns = [...baseDictDataColumns, actionColumns];
|
||||
return (
|
||||
<>
|
||||
<EnhancedProTable<DictDataVO>
|
||||
ref={tableRef}
|
||||
columns={columns}
|
||||
request={onFetch}
|
||||
toolbarActions={toolbarActions}
|
||||
headerTitle="租户列表"
|
||||
showIndex={false}
|
||||
showSelection={false}
|
||||
/>
|
||||
|
||||
<ConfigurableDrawerForm
|
||||
ref={configurableDrawerRef}
|
||||
title={formStatusType[type]}
|
||||
columns={formColumns(type)}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SyStemDictData;
|
||||
@@ -1,5 +1,144 @@
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import { history } from '@umijs/max';
|
||||
import { Popconfirm } from 'antd';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import ConfigurableDrawerForm, {
|
||||
type ConfigurableDrawerFormRef,
|
||||
} from '@/components/DrawerForm';
|
||||
import EnhancedProTable from '@/components/EnhancedProTable';
|
||||
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
|
||||
import { formStatusType } from '@/constants';
|
||||
import {
|
||||
createDictType,
|
||||
type DictTypeVO,
|
||||
deleteDictType,
|
||||
getDictTypePage,
|
||||
updateDictType,
|
||||
} from '@/services/system/dict/dict.type';
|
||||
import { baseDictTypeColumns, formColumns } from './config';
|
||||
|
||||
const SyStemDict = () => {
|
||||
return <>SyStemDict</>;
|
||||
const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||
const tableRef = useRef<ActionType>(null);
|
||||
|
||||
const [type, setType] = useState<'create' | 'update'>('create');
|
||||
const [id, setId] = useState<number>(0);
|
||||
|
||||
//获取路由数据
|
||||
|
||||
const handleEdit = (record: DictTypeVO) => {
|
||||
setType('update');
|
||||
setId(record.id);
|
||||
|
||||
configurableDrawerRef.current?.open(record);
|
||||
};
|
||||
|
||||
const onFetch = async (params: { pageSize?: number; current?: number }) => {
|
||||
const data = await getDictTypePage({
|
||||
...params,
|
||||
pageNo: params.current,
|
||||
pageSize: params.pageSize,
|
||||
});
|
||||
return {
|
||||
data: data.list,
|
||||
success: true,
|
||||
total: data.total,
|
||||
};
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
setType('create');
|
||||
configurableDrawerRef.current?.open({});
|
||||
};
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
async (values: DictTypeVO) => {
|
||||
if (type === 'create') {
|
||||
await createDictType(values);
|
||||
} else {
|
||||
await updateDictType({
|
||||
...values,
|
||||
id,
|
||||
});
|
||||
}
|
||||
tableRef.current?.reload();
|
||||
return true;
|
||||
},
|
||||
[type, id],
|
||||
);
|
||||
|
||||
const toolbarActions: ToolbarAction[] = [
|
||||
{
|
||||
key: 'add',
|
||||
label: '新建',
|
||||
type: 'primary',
|
||||
icon: <PlusOutlined />,
|
||||
onClick: handleAdd,
|
||||
},
|
||||
];
|
||||
|
||||
const actionColumns: ProColumns<DictTypeVO> = {
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
width: 120,
|
||||
render: (
|
||||
_text: React.ReactNode,
|
||||
record: DictTypeVO,
|
||||
_: any,
|
||||
action: any,
|
||||
) => [
|
||||
<a key="editable" onClick={() => handleEdit(record)}>
|
||||
编辑
|
||||
</a>,
|
||||
<Popconfirm
|
||||
title="是否删除?"
|
||||
key="delete"
|
||||
onConfirm={async () => {
|
||||
await deleteDictType(record.id);
|
||||
action?.reload();
|
||||
}}
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
>
|
||||
<a>删除</a>
|
||||
</Popconfirm>,
|
||||
<a
|
||||
key="data"
|
||||
onClick={() =>
|
||||
history.push({
|
||||
pathname: '/system/dict/data/' + record.type,
|
||||
})
|
||||
}
|
||||
>
|
||||
数据
|
||||
</a>,
|
||||
],
|
||||
};
|
||||
|
||||
const columns = [...baseDictTypeColumns, actionColumns];
|
||||
return (
|
||||
<>
|
||||
<EnhancedProTable<DictTypeVO>
|
||||
ref={tableRef}
|
||||
columns={columns}
|
||||
request={onFetch}
|
||||
toolbarActions={toolbarActions}
|
||||
headerTitle="租户列表"
|
||||
showIndex={false}
|
||||
showSelection={false}
|
||||
/>
|
||||
|
||||
<ConfigurableDrawerForm
|
||||
ref={configurableDrawerRef}
|
||||
title={formStatusType[type]}
|
||||
columns={formColumns(type)}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SyStemDict;
|
||||
|
||||
125
src/pages/system/menu/config.tsx
Normal file
125
src/pages/system/menu/config.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
// src/pages/system/menu/config.tsx
|
||||
import type {
|
||||
ProColumns,
|
||||
ProFormColumnsType,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Switch } from 'antd';
|
||||
import type { MenuVO } from '@/services/system/menu';
|
||||
|
||||
export const baseMenuColumns: ProColumns<MenuVO>[] = [
|
||||
{
|
||||
title: '菜单名称',
|
||||
dataIndex: 'name',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '图标',
|
||||
dataIndex: 'icon',
|
||||
width: 60,
|
||||
render: (_, record: MenuVO) => (
|
||||
<span>
|
||||
{record.icon ? <i className={`anticon ${record.icon}`} /> : '—'}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '权限标识',
|
||||
dataIndex: 'permission',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '组件路径',
|
||||
dataIndex: 'component',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '组件名称',
|
||||
dataIndex: 'componentName',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
width: 80,
|
||||
render: (_, record: MenuVO) => (
|
||||
<Switch
|
||||
checked={record.status === 1}
|
||||
disabled={true} // 可后续改为可编辑
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export const formColumns = (_type: string): ProFormColumnsType[] => [
|
||||
{
|
||||
title: '菜单名称',
|
||||
dataIndex: 'name',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入菜单名称',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '图标',
|
||||
dataIndex: 'icon',
|
||||
valueType: 'select',
|
||||
fieldProps: {
|
||||
placeholder: '请选择图标',
|
||||
options: [
|
||||
{ label: '商品', value: 'icon-product' },
|
||||
{ label: '系统', value: 'icon-system' },
|
||||
{ label: '用户', value: 'icon-user' },
|
||||
{ label: '设置', value: 'icon-setting' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
valueType: 'digit',
|
||||
fieldProps: {
|
||||
placeholder: '请输入排序值',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '权限标识',
|
||||
dataIndex: 'permission',
|
||||
fieldProps: {
|
||||
placeholder: '请输入权限标识',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '组件路径',
|
||||
dataIndex: 'component',
|
||||
fieldProps: {
|
||||
placeholder: '请输入组件路径',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '组件名称',
|
||||
dataIndex: 'componentName',
|
||||
fieldProps: {
|
||||
placeholder: '请输入组件名称',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
valueType: 'select',
|
||||
fieldProps: {
|
||||
options: [
|
||||
{ label: '启用', value: 1 },
|
||||
{ label: '禁用', value: 0 },
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
@@ -1,5 +1,126 @@
|
||||
const SyStemMenu = () => {
|
||||
return <>SyStemMenu</>;
|
||||
// src/pages/system/menu/index.tsx
|
||||
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import { Popconfirm } from 'antd';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import ConfigurableDrawerForm, {
|
||||
type ConfigurableDrawerFormRef,
|
||||
} from '@/components/DrawerForm';
|
||||
import EnhancedProTable from '@/components/EnhancedProTable';
|
||||
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
|
||||
import { formStatusType } from '@/constants';
|
||||
import {
|
||||
createMenu,
|
||||
deleteMenu,
|
||||
getMenuList,
|
||||
type MenuReqVO,
|
||||
type MenuVO,
|
||||
updateMenu,
|
||||
} from '@/services/system/menu';
|
||||
import { handleTree } from '@/utils/tree';
|
||||
import { baseMenuColumns, formColumns } from './config';
|
||||
|
||||
const SystemMenu = () => {
|
||||
const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||
const tableRef = useRef<ActionType>(null);
|
||||
|
||||
const [type, setType] = useState<'create' | 'update'>('create');
|
||||
const [id, setId] = useState<number>(0);
|
||||
|
||||
const handleEdit = (record: MenuVO) => {
|
||||
setType('update');
|
||||
setId(record.id);
|
||||
|
||||
configurableDrawerRef.current?.open(record);
|
||||
};
|
||||
|
||||
const onFetch = async (params: MenuReqVO) => {
|
||||
const data = await getMenuList({
|
||||
...params,
|
||||
});
|
||||
return {
|
||||
data: handleTree(data),
|
||||
success: true,
|
||||
total: data.total,
|
||||
};
|
||||
};
|
||||
const handleAdd = () => {
|
||||
setType('create');
|
||||
configurableDrawerRef.current?.open({});
|
||||
};
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
async (values: MenuVO) => {
|
||||
if (type === 'create') {
|
||||
await createMenu(values);
|
||||
} else {
|
||||
await updateMenu({
|
||||
...values,
|
||||
id,
|
||||
});
|
||||
}
|
||||
tableRef.current?.reload();
|
||||
return true;
|
||||
},
|
||||
[type, id],
|
||||
);
|
||||
|
||||
const toolbarActions: ToolbarAction[] = [
|
||||
{
|
||||
key: 'add',
|
||||
label: '新建',
|
||||
type: 'primary',
|
||||
icon: <PlusOutlined />,
|
||||
onClick: handleAdd,
|
||||
},
|
||||
];
|
||||
|
||||
const actionColumns: ProColumns<MenuVO> = {
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
width: 120,
|
||||
render: (_text: React.ReactNode, record: MenuVO, _: any, action: any) => [
|
||||
<a key="editable" onClick={() => handleEdit(record)}>
|
||||
编辑
|
||||
</a>,
|
||||
<Popconfirm
|
||||
title="是否删除?"
|
||||
key="delete"
|
||||
onConfirm={async () => {
|
||||
await deleteMenu(record.id);
|
||||
action?.reload();
|
||||
}}
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
>
|
||||
<a>删除</a>
|
||||
</Popconfirm>,
|
||||
],
|
||||
};
|
||||
const columns = [...baseMenuColumns, actionColumns];
|
||||
return (
|
||||
<>
|
||||
<EnhancedProTable<MenuVO>
|
||||
ref={tableRef}
|
||||
columns={columns}
|
||||
request={onFetch}
|
||||
toolbarActions={toolbarActions}
|
||||
headerTitle="租户列表"
|
||||
showIndex={false}
|
||||
showSelection={false}
|
||||
/>
|
||||
|
||||
<ConfigurableDrawerForm
|
||||
ref={configurableDrawerRef}
|
||||
title={formStatusType[type]}
|
||||
columns={formColumns(type)}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SyStemMenu;
|
||||
export default SystemMenu;
|
||||
|
||||
121
src/pages/system/post/config.tsx
Normal file
121
src/pages/system/post/config.tsx
Normal file
@@ -0,0 +1,121 @@
|
||||
import type {
|
||||
ProColumns,
|
||||
ProFormColumnsType,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Tag } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import { tenantStatus } from '@/constants';
|
||||
import type { PostVO } from '@/services/system/post';
|
||||
import { getStatusLabel } from '@/utils/constant';
|
||||
|
||||
export const basePostColumns: ProColumns<PostVO>[] = [
|
||||
{
|
||||
title: '岗位编号',
|
||||
dataIndex: 'id',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '岗位名称',
|
||||
dataIndex: 'name',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '岗位编码',
|
||||
dataIndex: 'code',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '岗位顺序',
|
||||
dataIndex: 'sort',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '岗位备注',
|
||||
dataIndex: 'remark',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
width: 100,
|
||||
render: (_, record: PostVO) => [
|
||||
<Tag
|
||||
key={record.status}
|
||||
color={record.status === 1 ? 'default' : 'processing'}
|
||||
>
|
||||
{getStatusLabel(tenantStatus, record.status)}
|
||||
</Tag>,
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
valueType: 'dateRange',
|
||||
search: {
|
||||
transform: (value) => {
|
||||
return {
|
||||
'createTime[0]': dayjs(value[0])
|
||||
.startOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
'createTime[1]': dayjs(value[1])
|
||||
.endOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
};
|
||||
},
|
||||
},
|
||||
render: (_, record: PostVO) =>
|
||||
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
];
|
||||
|
||||
export const formColumns = (_type: string): ProFormColumnsType[] => [
|
||||
{
|
||||
title: '岗位名称',
|
||||
dataIndex: 'name',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入岗位名称',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '岗位编码',
|
||||
dataIndex: 'code',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入岗位编码',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '岗位顺序',
|
||||
dataIndex: 'sort',
|
||||
valueType: 'digit',
|
||||
fieldProps: {
|
||||
placeholder: '请输入排序值',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
valueType: 'select',
|
||||
fieldProps: {
|
||||
placeholder: '请选择状态',
|
||||
options: tenantStatus,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
valueType: 'textarea',
|
||||
fieldProps: {
|
||||
placeholder: '请输入备注',
|
||||
},
|
||||
},
|
||||
];
|
||||
@@ -1,5 +1,132 @@
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import { Popconfirm } from 'antd';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import ConfigurableDrawerForm, {
|
||||
type ConfigurableDrawerFormRef,
|
||||
} from '@/components/DrawerForm';
|
||||
import EnhancedProTable from '@/components/EnhancedProTable';
|
||||
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
|
||||
import { formStatusType } from '@/constants';
|
||||
import {
|
||||
createPost,
|
||||
deletePost,
|
||||
getPostPage,
|
||||
type PostReqVO,
|
||||
type PostVO,
|
||||
updatePost,
|
||||
} from '@/services/system/post';
|
||||
import { basePostColumns, formColumns } from './config';
|
||||
|
||||
const SyStemPost = () => {
|
||||
return <>SyStemPost</>;
|
||||
const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||
const tableRef = useRef<ActionType>(null);
|
||||
|
||||
const [type, setType] = useState<'create' | 'update'>('create');
|
||||
const [id, setId] = useState<number>(0);
|
||||
|
||||
const handleEdit = (record: PostVO) => {
|
||||
setType('update');
|
||||
setId(record.id);
|
||||
|
||||
configurableDrawerRef.current?.open(record);
|
||||
};
|
||||
|
||||
const onFetch = async (
|
||||
params: PostReqVO & {
|
||||
pageSize?: number;
|
||||
current?: number;
|
||||
},
|
||||
) => {
|
||||
const data = await getPostPage({
|
||||
...params,
|
||||
pageNo: params.current,
|
||||
pageSize: params.pageSize,
|
||||
});
|
||||
return {
|
||||
data: data.list,
|
||||
success: true,
|
||||
total: data.total,
|
||||
};
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
setType('create');
|
||||
configurableDrawerRef.current?.open({});
|
||||
};
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
async (values: PostVO) => {
|
||||
if (type === 'create') {
|
||||
await createPost(values);
|
||||
} else {
|
||||
await updatePost({
|
||||
...values,
|
||||
id,
|
||||
});
|
||||
}
|
||||
tableRef.current?.reload();
|
||||
return true;
|
||||
},
|
||||
[type, id],
|
||||
);
|
||||
|
||||
const toolbarActions: ToolbarAction[] = [
|
||||
{
|
||||
key: 'add',
|
||||
label: '新建',
|
||||
type: 'primary',
|
||||
icon: <PlusOutlined />,
|
||||
onClick: handleAdd,
|
||||
},
|
||||
];
|
||||
|
||||
const actionColumns: ProColumns<PostVO> = {
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
width: 120,
|
||||
render: (_text: React.ReactNode, record: PostVO, _: any, action: any) => [
|
||||
<a key="editable" onClick={() => handleEdit(record)}>
|
||||
编辑
|
||||
</a>,
|
||||
<Popconfirm
|
||||
title="是否删除?"
|
||||
key="delete"
|
||||
onConfirm={async () => {
|
||||
await deletePost(record.id);
|
||||
action?.reload();
|
||||
}}
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
>
|
||||
<a>删除</a>
|
||||
</Popconfirm>,
|
||||
],
|
||||
};
|
||||
|
||||
const columns = [...basePostColumns, actionColumns];
|
||||
return (
|
||||
<>
|
||||
<EnhancedProTable<PostVO>
|
||||
ref={tableRef}
|
||||
columns={columns}
|
||||
request={onFetch}
|
||||
toolbarActions={toolbarActions}
|
||||
headerTitle="租户列表"
|
||||
showIndex={false}
|
||||
showSelection={false}
|
||||
/>
|
||||
|
||||
<ConfigurableDrawerForm
|
||||
ref={configurableDrawerRef}
|
||||
title={formStatusType[type]}
|
||||
columns={formColumns(type)}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SyStemPost;
|
||||
|
||||
143
src/pages/system/role/config.tsx
Normal file
143
src/pages/system/role/config.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
import type {
|
||||
ProColumns,
|
||||
ProFormColumnsType,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Tag } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import { tenantStatus } from '@/constants';
|
||||
import type { RoleVO } from '@/services/system/role';
|
||||
import { getStatusLabel } from '@/utils/constant';
|
||||
|
||||
export const baseTenantColumns: ProColumns<RoleVO>[] = [
|
||||
{
|
||||
title: '角色编号',
|
||||
dataIndex: 'id',
|
||||
width: 100,
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '角色名称',
|
||||
dataIndex: 'name',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '角色类型',
|
||||
dataIndex: 'type',
|
||||
width: 100,
|
||||
render: (_, record: RoleVO) => [
|
||||
<Tag key={record.type} color={record.type === 1 ? 'error' : 'processing'}>
|
||||
{record.type === 1 ? '内置' : '自定义'}
|
||||
</Tag>,
|
||||
],
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '角色标识',
|
||||
dataIndex: 'code',
|
||||
width: 150,
|
||||
render: (_, record: RoleVO) => [
|
||||
<Tag key={record.code} color={record.type === 1 ? 'error' : 'processing'}>
|
||||
{record.code}
|
||||
</Tag>,
|
||||
],
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '显示顺序',
|
||||
dataIndex: 'sort',
|
||||
width: 100,
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '租户状态',
|
||||
dataIndex: 'status',
|
||||
width: 100,
|
||||
render: (_, record: RoleVO) => [
|
||||
<Tag
|
||||
key={record.status}
|
||||
color={record.status === 1 ? 'default' : 'processing'}
|
||||
>
|
||||
{getStatusLabel(tenantStatus, record.status)}
|
||||
</Tag>,
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
valueType: 'dateRange',
|
||||
search: {
|
||||
transform: (value) => {
|
||||
return {
|
||||
'createTime[0]': dayjs(value[0])
|
||||
.startOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
'createTime[1]': dayjs(value[1])
|
||||
.endOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
};
|
||||
},
|
||||
},
|
||||
render: (_, record: RoleVO) =>
|
||||
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
];
|
||||
|
||||
export const formColumns = (_type: string): ProFormColumnsType[] => [
|
||||
{
|
||||
title: '角色名称',
|
||||
dataIndex: 'name',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入角色名称',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '角色标识',
|
||||
dataIndex: 'code',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入角色名称',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '显示顺序',
|
||||
dataIndex: 'sort',
|
||||
valueType: 'digit',
|
||||
fieldProps: {
|
||||
placeholder: '请输入显示顺序',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '租户状态',
|
||||
dataIndex: 'status',
|
||||
valueType: 'select',
|
||||
fieldProps: {
|
||||
multiple: true,
|
||||
placeholder: '请选择租户状态',
|
||||
options: tenantStatus,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
valueType: 'textarea',
|
||||
fieldProps: {
|
||||
placeholder: '请输入备注',
|
||||
min: 5,
|
||||
max: 20,
|
||||
},
|
||||
},
|
||||
];
|
||||
@@ -1,5 +1,132 @@
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import { Popconfirm } from 'antd';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import ConfigurableDrawerForm, {
|
||||
type ConfigurableDrawerFormRef,
|
||||
} from '@/components/DrawerForm';
|
||||
import EnhancedProTable from '@/components/EnhancedProTable';
|
||||
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
|
||||
import { formStatusType } from '@/constants';
|
||||
import {
|
||||
createRole,
|
||||
deleteRole,
|
||||
getRolePage,
|
||||
type RolePageReqVO,
|
||||
type RoleVO,
|
||||
updateRole,
|
||||
} from '@/services/system/role';
|
||||
import { baseTenantColumns, formColumns } from './config';
|
||||
|
||||
const SyStemRole = () => {
|
||||
return <>SyStemRole</>;
|
||||
const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||
const tableRef = useRef<ActionType>(null);
|
||||
|
||||
const [type, setType] = useState<'create' | 'update'>('create');
|
||||
const [id, setId] = useState<number>(0);
|
||||
|
||||
const handleEdit = (record: RoleVO) => {
|
||||
setType('update');
|
||||
setId(record.id);
|
||||
|
||||
configurableDrawerRef.current?.open(record);
|
||||
};
|
||||
|
||||
const onFetch = async (
|
||||
params: RolePageReqVO & {
|
||||
pageSize?: number;
|
||||
current?: number;
|
||||
},
|
||||
) => {
|
||||
const data = await getRolePage({
|
||||
...params,
|
||||
pageNo: params.current,
|
||||
pageSize: params.pageSize,
|
||||
});
|
||||
return {
|
||||
data: data.list,
|
||||
success: true,
|
||||
total: data.total,
|
||||
};
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
setType('create');
|
||||
configurableDrawerRef.current?.open({});
|
||||
};
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
async (values: RoleVO) => {
|
||||
if (type === 'create') {
|
||||
await createRole(values);
|
||||
} else {
|
||||
await updateRole({
|
||||
...values,
|
||||
id,
|
||||
});
|
||||
}
|
||||
tableRef.current?.reload();
|
||||
return true;
|
||||
},
|
||||
[type, id],
|
||||
);
|
||||
|
||||
const toolbarActions: ToolbarAction[] = [
|
||||
{
|
||||
key: 'add',
|
||||
label: '新建',
|
||||
type: 'primary',
|
||||
icon: <PlusOutlined />,
|
||||
onClick: handleAdd,
|
||||
},
|
||||
];
|
||||
|
||||
const actionColumns: ProColumns<RoleVO> = {
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
width: 120,
|
||||
render: (_text: React.ReactNode, record: RoleVO, _: any, action: any) => [
|
||||
<a key="editable" onClick={() => handleEdit(record)}>
|
||||
编辑
|
||||
</a>,
|
||||
<Popconfirm
|
||||
title="是否删除?"
|
||||
key="delete"
|
||||
onConfirm={async () => {
|
||||
await deleteRole(record.id);
|
||||
action?.reload();
|
||||
}}
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
>
|
||||
<a>删除</a>
|
||||
</Popconfirm>,
|
||||
],
|
||||
};
|
||||
|
||||
const columns = [...baseTenantColumns, actionColumns];
|
||||
return (
|
||||
<>
|
||||
<EnhancedProTable<RoleVO>
|
||||
ref={tableRef}
|
||||
columns={columns}
|
||||
request={onFetch}
|
||||
toolbarActions={toolbarActions}
|
||||
headerTitle="租户列表"
|
||||
showIndex={false}
|
||||
showSelection={false}
|
||||
/>
|
||||
|
||||
<ConfigurableDrawerForm
|
||||
ref={configurableDrawerRef}
|
||||
title={formStatusType[type]}
|
||||
columns={formColumns(type)}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SyStemRole;
|
||||
|
||||
@@ -29,7 +29,6 @@ export const baseTenantColumns: ProColumns<TenantVO>[] = [
|
||||
request: async () => {
|
||||
const packageList: { id: number; name: string }[] =
|
||||
await getTenantPackageList();
|
||||
console.log(packageList);
|
||||
packageList.map((item) => ({ label: item.name, value: item.id }));
|
||||
return packageList.map((item) => ({ label: item.name, value: item.id }));
|
||||
},
|
||||
@@ -83,7 +82,14 @@ export const baseTenantColumns: ProColumns<TenantVO>[] = [
|
||||
valueType: 'dateRange',
|
||||
search: {
|
||||
transform: (value) => {
|
||||
return [`${value[0]} 00:00:00`, `${value[1]} 00:00:00`];
|
||||
return {
|
||||
'createTime[0]': dayjs(value[0])
|
||||
.startOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
'createTime[1]': dayjs(value[1])
|
||||
.endOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
};
|
||||
},
|
||||
},
|
||||
render: (_, record: TenantVO) =>
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import { Modal, Popconfirm } from 'antd';
|
||||
import { Popconfirm } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import { ref } from 'process';
|
||||
import React, { createContext, useCallback, useRef, useState } from 'react';
|
||||
import ConfigurableDrawerForm, {
|
||||
type ConfigurableDrawerFormRef,
|
||||
@@ -93,7 +92,7 @@ const TenantList = () => {
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
width: 120,
|
||||
render: (text: React.ReactNode, record: TenantVO, _: any, action: any) => [
|
||||
render: (_text: React.ReactNode, record: TenantVO, _: any, action: any) => [
|
||||
<a key="editable" onClick={() => handleEdit(record)}>
|
||||
编辑
|
||||
</a>,
|
||||
@@ -122,8 +121,6 @@ const TenantList = () => {
|
||||
headerTitle="租户列表"
|
||||
showIndex={false}
|
||||
showSelection={false}
|
||||
showActions
|
||||
maxActionCount={3}
|
||||
/>
|
||||
|
||||
<ConfigurableDrawerForm
|
||||
|
||||
109
src/pages/system/tenant/package/config.tsx
Normal file
109
src/pages/system/tenant/package/config.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
import type {
|
||||
ProColumns,
|
||||
ProFormColumnsType,
|
||||
} from '@ant-design/pro-components';
|
||||
import dayjs from 'dayjs';
|
||||
import type { TenantPackageVO } from '@/services/system/tenant/package';
|
||||
|
||||
export const baseTenantColumns: ProColumns<TenantPackageVO>[] = [
|
||||
{
|
||||
title: '套餐编号',
|
||||
dataIndex: 'id',
|
||||
width: 100,
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '套餐名',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
valueType: 'select',
|
||||
valueEnum: {
|
||||
all: { text: '全部', status: 'Default' },
|
||||
open: { text: '未解决', status: 'Error' },
|
||||
closed: { text: '已解决', status: 'Success' },
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
valueType: 'dateRange',
|
||||
search: {
|
||||
transform: (value) => {
|
||||
return {
|
||||
'createTime[0]': dayjs(value[0])
|
||||
.startOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
'createTime[1]': dayjs(value[1])
|
||||
.endOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
};
|
||||
},
|
||||
},
|
||||
render: (_, record: TenantPackageVO) =>
|
||||
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
];
|
||||
|
||||
export const formColumns = (_type: string): ProFormColumnsType[] => [
|
||||
{
|
||||
title: '套餐名',
|
||||
dataIndex: 'name',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入用户名',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '套餐权限',
|
||||
dataIndex: 'menuIds',
|
||||
valueType: 'treeSelect',
|
||||
fieldProps: {
|
||||
multiple: true,
|
||||
placeholder: '请选择租户权限',
|
||||
options: [{ lable: '11', value: 5016 }],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '租户状态',
|
||||
dataIndex: 'status',
|
||||
valueType: 'radio',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择租户状态',
|
||||
},
|
||||
],
|
||||
},
|
||||
fieldProps: {
|
||||
placeholder: '请选择套餐类型',
|
||||
options: [
|
||||
{
|
||||
label: '开启',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '关闭',
|
||||
value: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
valueType: 'textarea',
|
||||
},
|
||||
];
|
||||
@@ -1,5 +1,137 @@
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import { Popconfirm } from 'antd';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import ConfigurableDrawerForm, {
|
||||
type ConfigurableDrawerFormRef,
|
||||
} from '@/components/DrawerForm';
|
||||
import EnhancedProTable from '@/components/EnhancedProTable';
|
||||
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
|
||||
import { formStatusType } from '@/constants';
|
||||
import {
|
||||
createTenantPackage,
|
||||
deleteTenantPackage,
|
||||
getTenantPackagePage,
|
||||
type TenantPackagePageReqVO,
|
||||
type TenantPackageVO,
|
||||
updateTenantPackage,
|
||||
} from '@/services/system/tenant/package';
|
||||
import { baseTenantColumns, formColumns } from './config';
|
||||
|
||||
const TenantPackage = () => {
|
||||
return <div>TenantPackage</div>;
|
||||
const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||
const tableRef = useRef<ActionType>(null);
|
||||
|
||||
const [type, setType] = useState<'create' | 'update'>('create');
|
||||
const [id, setId] = useState<number>(0);
|
||||
|
||||
const handleEdit = (record: TenantPackageVO) => {
|
||||
setType('update');
|
||||
setId(record.id);
|
||||
|
||||
configurableDrawerRef.current?.open(record);
|
||||
};
|
||||
|
||||
const onFetch = async (
|
||||
params: TenantPackagePageReqVO & {
|
||||
pageSize?: number;
|
||||
current?: number;
|
||||
},
|
||||
) => {
|
||||
const data = await getTenantPackagePage({
|
||||
...params,
|
||||
pageNo: params.current,
|
||||
pageSize: params.pageSize,
|
||||
});
|
||||
return {
|
||||
data: data.list,
|
||||
success: true,
|
||||
total: data.total,
|
||||
};
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
setType('create');
|
||||
configurableDrawerRef.current?.open({});
|
||||
};
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
async (values: TenantPackageVO) => {
|
||||
if (type === 'create') {
|
||||
await createTenantPackage(values);
|
||||
} else {
|
||||
await updateTenantPackage({
|
||||
...values,
|
||||
id,
|
||||
});
|
||||
}
|
||||
tableRef.current?.reload();
|
||||
return true;
|
||||
},
|
||||
[type, id],
|
||||
);
|
||||
|
||||
const toolbarActions: ToolbarAction[] = [
|
||||
{
|
||||
key: 'add',
|
||||
label: '新建',
|
||||
type: 'primary',
|
||||
icon: <PlusOutlined />,
|
||||
onClick: handleAdd,
|
||||
},
|
||||
];
|
||||
|
||||
const actionColumns: ProColumns<TenantPackageVO> = {
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
width: 120,
|
||||
render: (
|
||||
_text: React.ReactNode,
|
||||
record: TenantPackageVO,
|
||||
_: any,
|
||||
action: any,
|
||||
) => [
|
||||
<a key="editable" onClick={() => handleEdit(record)}>
|
||||
编辑
|
||||
</a>,
|
||||
<Popconfirm
|
||||
title="是否删除?"
|
||||
key="delete"
|
||||
onConfirm={async () => {
|
||||
await deleteTenantPackage(record.id);
|
||||
action?.reload();
|
||||
}}
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
>
|
||||
<a>删除</a>
|
||||
</Popconfirm>,
|
||||
],
|
||||
};
|
||||
|
||||
const columns = [...baseTenantColumns, actionColumns];
|
||||
return (
|
||||
<>
|
||||
<EnhancedProTable<TenantPackageVO>
|
||||
ref={tableRef}
|
||||
columns={columns}
|
||||
request={onFetch}
|
||||
toolbarActions={toolbarActions}
|
||||
headerTitle="租户列表"
|
||||
showIndex={false}
|
||||
showSelection={false}
|
||||
/>
|
||||
|
||||
<ConfigurableDrawerForm
|
||||
ref={configurableDrawerRef}
|
||||
title={formStatusType[type]}
|
||||
columns={formColumns(type)}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TenantPackage;
|
||||
|
||||
220
src/pages/system/user/config.tsx
Normal file
220
src/pages/system/user/config.tsx
Normal file
@@ -0,0 +1,220 @@
|
||||
import type {
|
||||
ProColumns,
|
||||
ProCoreActionType,
|
||||
ProFormColumnsType,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Modal, message, Switch } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import { updateUserStatus } from '@/services/system/user';
|
||||
import type { UserVO } from '@/services/system/user/index';
|
||||
|
||||
export const baseTenantColumns: ProColumns<UserVO>[] = [
|
||||
{
|
||||
title: '用户编号',
|
||||
dataIndex: 'id',
|
||||
width: 80,
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '用户名称',
|
||||
dataIndex: 'username',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '用户昵称',
|
||||
dataIndex: 'nickname',
|
||||
width: 100,
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '部门',
|
||||
dataIndex: 'deptName',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '手机号码',
|
||||
dataIndex: 'mobile',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
valueType: 'select',
|
||||
valueEnum: {
|
||||
all: { text: '全部', status: 'Default' },
|
||||
open: { text: '未解决', status: 'Error' },
|
||||
closed: { text: '已解决', status: 'Success' },
|
||||
},
|
||||
render: (
|
||||
_dom: React.ReactNode,
|
||||
record: UserVO,
|
||||
_index: number,
|
||||
action: ProCoreActionType | undefined,
|
||||
) => [
|
||||
<Switch
|
||||
key={record.id}
|
||||
checked={record.status === 0}
|
||||
onChange={async (_checked) => {
|
||||
const text = record.status ? '启用' : '停用';
|
||||
Modal.confirm({
|
||||
title: '确认操作',
|
||||
content: `确认要"${text}""${record.username}"用户吗?`,
|
||||
onOk: async () => {
|
||||
const status = record.status === 0 ? 1 : 0;
|
||||
await updateUserStatus(record.id, status);
|
||||
message.success('修改成功');
|
||||
action?.reload();
|
||||
// 执行状态变更逻辑
|
||||
},
|
||||
});
|
||||
// await message.confirm("修改成功");
|
||||
}}
|
||||
></Switch>,
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
valueType: 'dateRange',
|
||||
search: {
|
||||
transform: (value) => {
|
||||
return {
|
||||
'createTime[0]': dayjs(value[0])
|
||||
.startOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
'createTime[1]': dayjs(value[1])
|
||||
.endOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
};
|
||||
},
|
||||
},
|
||||
render: (_, record: UserVO) =>
|
||||
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
];
|
||||
|
||||
export const formColumns = (type: string): ProFormColumnsType[] => [
|
||||
{
|
||||
title: '用户昵称',
|
||||
dataIndex: 'nickname',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入用户名',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '归属部门',
|
||||
dataIndex: 'deptId',
|
||||
valueType: 'treeSelect',
|
||||
fieldProps: {
|
||||
multiple: true,
|
||||
placeholder: '请选择归属部门',
|
||||
options: [{ lable: '11', value: 5016 }],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '手机号码',
|
||||
dataIndex: 'mobile',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入联系手机',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
// { prop: "email", label: "邮箱", type: "input", inputType: "email" },
|
||||
{
|
||||
title: '邮箱',
|
||||
dataIndex: 'email',
|
||||
valueType: 'text',
|
||||
fieldProps: {
|
||||
type: 'email',
|
||||
placeholder: '请输入邮箱',
|
||||
},
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入邮箱',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '用户名称',
|
||||
dataIndex: 'username',
|
||||
hideInForm: type === 'update',
|
||||
},
|
||||
{
|
||||
title: '用户密码',
|
||||
dataIndex: 'password',
|
||||
valueType: 'password',
|
||||
hideInForm: type === 'update',
|
||||
fieldProps: {
|
||||
placeholder: '请输入用户密码',
|
||||
autoComplete: 'new-password',
|
||||
},
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入用户密码',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '用户性别',
|
||||
dataIndex: 'sex',
|
||||
valueType: 'select',
|
||||
fieldProps: {
|
||||
placeholder: '请选择性别',
|
||||
options: [
|
||||
{
|
||||
label: '男',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '女',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '岗位',
|
||||
dataIndex: 'postIds',
|
||||
valueType: 'select',
|
||||
fieldProps: {
|
||||
mode: 'multiple',
|
||||
placeholder: '请选择岗位',
|
||||
options: [
|
||||
{
|
||||
label: '管理员',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '普通用户',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
formItemProps: {},
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
valueType: 'textarea',
|
||||
},
|
||||
];
|
||||
@@ -1,5 +1,130 @@
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import { Popconfirm } from 'antd';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import ConfigurableDrawerForm, {
|
||||
type ConfigurableDrawerFormRef,
|
||||
} from '@/components/DrawerForm';
|
||||
import EnhancedProTable from '@/components/EnhancedProTable';
|
||||
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
|
||||
import { formStatusType } from '@/constants';
|
||||
import {
|
||||
createUser,
|
||||
deleteUser,
|
||||
getUserPage,
|
||||
type UserReqVO,
|
||||
type UserVO,
|
||||
updateUser,
|
||||
} from '@/services/system/user';
|
||||
import { baseTenantColumns, formColumns } from './config';
|
||||
|
||||
const SyStemUser = () => {
|
||||
return <>SyStemUser</>;
|
||||
const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||
const tableRef = useRef<ActionType>(null);
|
||||
const [type, setType] = useState<'create' | 'update'>('create');
|
||||
const [id, setId] = useState<number>(0);
|
||||
|
||||
const handleEdit = (record: UserVO) => {
|
||||
setType('update');
|
||||
setId(record.id);
|
||||
|
||||
configurableDrawerRef.current?.open(record);
|
||||
};
|
||||
|
||||
const onFetch = async (
|
||||
params: UserReqVO & {
|
||||
pageSize?: number;
|
||||
current?: number;
|
||||
},
|
||||
) => {
|
||||
const data = await getUserPage({
|
||||
...params,
|
||||
pageNo: params.current,
|
||||
pageSize: params.pageSize,
|
||||
});
|
||||
return {
|
||||
data: data.list,
|
||||
success: true,
|
||||
total: data.total,
|
||||
};
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
setType('create');
|
||||
configurableDrawerRef.current?.open({});
|
||||
};
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
async (values: UserVO) => {
|
||||
if (type === 'create') {
|
||||
await createUser(values);
|
||||
} else {
|
||||
await updateUser({
|
||||
...values,
|
||||
id,
|
||||
});
|
||||
}
|
||||
tableRef.current?.reload();
|
||||
return true;
|
||||
},
|
||||
[type, id],
|
||||
);
|
||||
|
||||
const toolbarActions: ToolbarAction[] = [
|
||||
{
|
||||
key: 'add',
|
||||
label: '新建',
|
||||
type: 'primary',
|
||||
icon: <PlusOutlined />,
|
||||
onClick: handleAdd,
|
||||
},
|
||||
];
|
||||
|
||||
const actionColumns: ProColumns<UserVO> = {
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
width: 120,
|
||||
render: (_text: React.ReactNode, record: UserVO, _: any, action: any) => [
|
||||
<a key="editable" onClick={() => handleEdit(record)}>
|
||||
编辑
|
||||
</a>,
|
||||
<Popconfirm
|
||||
title="是否删除?"
|
||||
key="delete"
|
||||
onConfirm={async () => {
|
||||
await deleteUser(record.id);
|
||||
action?.reload();
|
||||
}}
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
>
|
||||
<a>删除</a>
|
||||
</Popconfirm>,
|
||||
],
|
||||
};
|
||||
const columns = [...baseTenantColumns, actionColumns];
|
||||
return (
|
||||
<>
|
||||
<EnhancedProTable<UserVO>
|
||||
ref={tableRef}
|
||||
columns={columns}
|
||||
request={onFetch}
|
||||
toolbarActions={toolbarActions}
|
||||
headerTitle="租户列表"
|
||||
showIndex={false}
|
||||
showSelection={false}
|
||||
/>
|
||||
|
||||
<ConfigurableDrawerForm
|
||||
ref={configurableDrawerRef}
|
||||
title={formStatusType[type]}
|
||||
columns={formColumns(type)}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SyStemUser;
|
||||
|
||||
Reference in New Issue
Block a user