feat: 系统管理

src/pages/system/dept/config.tsx

@@ -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,
+        },
+      ],
+    },
+  },
+];

src/pages/system/dept/index.tsx

@@ -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;

src/pages/system/dict/config.tsx

@@ -0,0 +1,115 @@
+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',
+  },
+  {
+    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,
+  },
+  {
+    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',
+    colProps: {
+      span: 12,
+    },
+    formItemProps: {
+      rules: [
+        {
+          required: true,
+          message: '请输入字典类型',
+        },
+      ],
+    },
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    valueType: 'select',
+    fieldProps: {
+      options: tenantStatus,
+    },
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    valueType: 'textarea',
+    colProps: {
+      span: 24,
+    },
+  },
+];

src/pages/system/dict/index.tsx

@@ -1,5 +1,131 @@
+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 {
+  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>,
+    ],
+  };
+
+  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;

src/pages/system/menu/config.tsx

@@ -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 },
+      ],
+    },
+  },
+];

src/pages/system/menu/index.tsx

@@ -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;

src/pages/system/post/config.tsx

@@ -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: '请输入备注',
+    },
+  },
+];

src/pages/system/post/index.tsx

@@ -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;

src/pages/system/role/config.tsx

@@ -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,
+    },
+  },
+];

src/pages/system/role/index.tsx

@@ -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;

src/pages/system/tenant/list/config.tsx

@@ -1,30 +1,31 @@
-import { type TenantVO, deleteTenant } from "@/services/system/tenant/list";
-import { ProColumns, ProFormColumnsType } from "@ant-design/pro-components";
-import { DatePicker, Modal, Popconfirm } from "antd";
-import { FormInstance } from "antd/lib";
-import dayjs from "dayjs";
+import type {
+  ProColumns,
+  ProFormColumnsType,
+} from '@ant-design/pro-components';
+import dayjs from 'dayjs';
+import type { TenantVO } from '@/services/system/tenant/list';
 
 export const baseTenantColumns: ProColumns<TenantVO>[] = [
   {
-    title: "租户编号",
-    dataIndex: "id",
-    tip: "租户编号",
+    title: '租户编号',
+    dataIndex: 'id',
+    tip: '租户编号',
     width: 100,
     hideInSearch: true, // 在搜索表单中隐藏
   },
   {
-    title: "租户名",
-    dataIndex: "name",
-    tip: "租户名", // 提示信息
+    title: '租户名',
+    dataIndex: 'name',
+    tip: '租户名', // 提示信息
   },
   {
-    title: "租户套餐",
-    dataIndex: "packageId",
-    valueType: "select",
+    title: '租户套餐',
+    dataIndex: 'packageId',
+    valueType: 'select',
     request: async () => {
       return [
         {
-          label: "默认套餐",
+          label: '默认套餐',
           value: 1,
         },
       ];
@@ -36,60 +37,67 @@ export const baseTenantColumns: ProColumns<TenantVO>[] = [
     // },
   },
   {
-    title: "联系人",
-    dataIndex: "contactName",
+    title: '联系人',
+    dataIndex: 'contactName',
   },
   {
-    title: "联系手机",
-    dataIndex: "contactMobile",
+    title: '联系手机',
+    dataIndex: 'contactMobile',
   },
   {
-    title: "账号额度",
-    dataIndex: "accountCount",
+    title: '账号额度',
+    dataIndex: 'accountCount',
     hideInSearch: true, // 在搜索表单中隐藏
   },
   {
-    title: "过期时间",
-    dataIndex: "expireTime",
-    valueType: "dateTime",
+    title: '过期时间',
+    dataIndex: 'expireTime',
+    valueType: 'dateTime',
 
     hideInSearch: true, // 在搜索表单中隐藏
   },
-  { title: "绑定域名", dataIndex: "website", width: 100 },
+  { title: '绑定域名', dataIndex: 'website', width: 100 },
   {
-    title: "租户状态",
-    dataIndex: "status",
-    valueType: "select",
+    title: '租户状态',
+    dataIndex: 'status',
+    valueType: 'select',
     valueEnum: {
-      all: { text: "全部", status: "Default" },
-      open: { text: "未解决", status: "Error" },
-      closed: { text: "已解决", status: "Success" },
+      all: { text: '全部', status: 'Default' },
+      open: { text: '未解决', status: 'Error' },
+      closed: { text: '已解决', status: 'Success' },
     },
   },
   {
-    title: "创建时间",
-    dataIndex: "createTime",
-    valueType: "dateRange",
+    title: '创建时间',
+    dataIndex: 'createTime',
+    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) =>
-      dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss"),
+      dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
   },
 ];
 
 export const formColumns = (type: string): ProFormColumnsType[] => [
   {
-    title: "租户名",
-    dataIndex: "name",
-    tip: "租户名", // 提示信息
+    title: '租户名',
+    dataIndex: 'name',
+    tip: '租户名', // 提示信息
     formItemProps: {
       rules: [
         {
           required: true,
-          message: "请输入用户名",
+          message: '请输入用户名',
         },
         // {
         //   min: 2,
@@ -100,121 +108,121 @@ export const formColumns = (type: string): ProFormColumnsType[] => [
     },
   },
   {
-    title: "租户套餐",
-    dataIndex: "packageId",
-    valueType: "select",
+    title: '租户套餐',
+    dataIndex: 'packageId',
+    valueType: 'select',
     formItemProps: {
       rules: [
         {
           required: true,
-          message: "请选择租户套餐",
+          message: '请选择租户套餐',
         },
       ],
     },
     fieldProps: {
-      placeholder: "请选择套餐类型",
+      placeholder: '请选择套餐类型',
       options: [
         {
-          label: "普通套餐",
+          label: '普通套餐',
           value: 111,
         },
       ],
     },
   },
   {
-    title: "联系人",
-    dataIndex: "contactName",
+    title: '联系人',
+    dataIndex: 'contactName',
   },
   {
-    title: "联系手机",
-    dataIndex: "contactMobile",
+    title: '联系手机',
+    dataIndex: 'contactMobile',
     formItemProps: {
       rules: [
         {
           required: true,
-          message: "请输入联系手机",
+          message: '请输入联系手机',
         },
       ],
     },
   },
   {
-    title: "用户名称",
-    dataIndex: "username",
-    hideInForm: type === "update",
+    title: '用户名称',
+    dataIndex: 'username',
+    hideInForm: type === 'update',
     formItemProps: {
       rules: [
         {
           required: true,
-          message: "请输入用户名称",
+          message: '请输入用户名称',
         },
         {
           pattern: /^[a-zA-Z0-9]+$/,
-          message: "用户账号由 0-9、a-z、A-Z 组成",
+          message: '用户账号由 0-9、a-z、A-Z 组成',
         },
         // 用户账号由 数字、字母组成
       ],
     },
   },
   {
-    title: "用户密码",
-    dataIndex: "password",
-    valueType: "password",
-    hideInForm: type === "update",
+    title: '用户密码',
+    dataIndex: 'password',
+    valueType: 'password',
+    hideInForm: type === 'update',
     fieldProps: {
-      placeholder: "请输入用户密码",
-      autoComplete: "new-password",
+      placeholder: '请输入用户密码',
+      autoComplete: 'new-password',
     },
     formItemProps: {
       rules: [
         {
           required: true,
-          message: "请输入用户密码",
+          message: '请输入用户密码',
         },
         {
           min: 4,
           max: 16,
-          message: "密码长度为4-16个字符",
+          message: '密码长度为4-16个字符',
         },
       ],
     },
   },
   {
-    title: "账号额度",
-    dataIndex: "accountCount",
-    valueType: "digit",
+    title: '账号额度',
+    dataIndex: 'accountCount',
+    valueType: 'digit',
   },
   {
-    title: "过期时间",
-    dataIndex: "expireTime",
-    valueType: "date",
+    title: '过期时间',
+    dataIndex: 'expireTime',
+    valueType: 'date',
 
     fieldProps: {
-      placeholder: "请选择过期时间",
-      format: "YYYY-MM-DD",
+      placeholder: '请选择过期时间',
+      format: 'YYYY-MM-DD',
     },
   },
-  { title: "绑定域名", dataIndex: "website" },
+  { title: '绑定域名', dataIndex: 'website' },
   {
-    title: "租户状态",
-    dataIndex: "status",
-    valueType: "radio",
+    title: '租户状态',
+    dataIndex: 'status',
+    valueType: 'radio',
     formItemProps: {
       rules: [
         {
           required: true,
-          message: "请选择租户状态",
+          message: '请选择租户状态',
         },
       ],
     },
     fieldProps: {
-      placeholder: "请选择套餐类型",
+      placeholder: '请选择套餐类型',
       options: [
         {
-          label: "启用",
+          label: '启用',
           value: 1,
         },
         {
-          label: "禁用",
+          label: '禁用',
           value: 0,
         },
       ],

src/pages/system/tenant/list/index.tsx

@@ -1,25 +1,23 @@
-import EnhancedProTable from "@/components/EnhancedProTable";
+import { PlusOutlined } from '@ant-design/icons';
+import type { ActionType, ProColumns } from '@ant-design/pro-components';
+import { Popconfirm } from 'antd';
+import dayjs from 'dayjs';
+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 {
-  getTenantPage,
   createTenant,
+  deleteTenant,
+  getTenantPage,
   type TenantPageReqVO,
   type TenantVO,
-  deleteTenant,
   updateTenant,
-} from "@/services/system/tenant/list";
-import React, { createContext, useCallback } from "react";
-import ConfigurableDrawerForm, {
-  ConfigurableDrawerFormRef,
-} from "@/components/DrawerForm";
-import { useRef, useState } from "react";
-import { formColumns, baseTenantColumns } from "./config";
-import { PlusOutlined } from "@ant-design/icons";
-import { ref } from "process";
-import { ActionType, ProColumns } from "@ant-design/pro-components";
-import { ToolbarAction } from "@/components/EnhancedProTable/types";
-import { Modal, Popconfirm } from "antd";
-import { formStatusType } from "@/constants";
-import dayjs from "dayjs";
+} from '@/services/system/tenant/list';
+import { baseTenantColumns, formColumns } from './config';
 export const waitTimePromise = async (time: number = 90) => {
   return new Promise((resolve) => {
     setTimeout(() => {
@@ -30,13 +28,13 @@ export const waitTimePromise = async (time: number = 90) => {
 const TenantList = () => {
   const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
   const tableRef = useRef<ActionType>(null);
-  const [type, setType] = useState<"create" | "update">("create");
+  const [type, setType] = useState<'create' | 'update'>('create');
   const [id, setId] = useState<number>(0);
   const onFetch = async (
     params: TenantPageReqVO & {
       pageSize?: number;
       current?: number;
-    }
+    },
   ) => {
     await waitTimePromise();
     const data = await getTenantPage({
@@ -53,7 +51,7 @@ const TenantList = () => {
 
   const handleSubmit = useCallback(
     async (values: TenantVO) => {
-      if (type === "create") {
+      if (type === 'create') {
         await createTenant(values);
       } else {
         await updateTenant({
@@ -65,36 +63,36 @@ const TenantList = () => {
       tableRef.current?.reload();
       return true;
     },
-    [type]
+    [type],
   );
 
   const handleAdd = () => {
-    setType("create");
+    setType('create');
     configurableDrawerRef.current?.open({});
   };
   const handleEdit = (record: TenantVO) => {
-    setType("update");
+    setType('update');
     setId(record.id);
 
     configurableDrawerRef.current?.open(record);
   };
   const toolbarActions: ToolbarAction[] = [
     {
-      key: "add",
-      label: "新建",
-      type: "primary",
+      key: 'add',
+      label: '新建',
+      type: 'primary',
       icon: <PlusOutlined />,
       onClick: handleAdd,
     },
   ];
 
   const actionColumns: ProColumns<TenantVO> = {
-    title: "操作",
-    dataIndex: "option",
-    valueType: "option",
-    fixed: "right",
+    title: '操作',
+    dataIndex: 'option',
+    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>,
@@ -123,8 +121,6 @@ const TenantList = () => {
         headerTitle="租户列表"
         showIndex={false}
         showSelection={false}
-        showActions
-        maxActionCount={3}
       />
 
       <ConfigurableDrawerForm

src/pages/system/tenant/package/config.tsx

@@ -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',
+  },
+];

src/pages/system/tenant/package/index.tsx

@@ -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;

src/pages/system/user/config.tsx

@@ -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',
+  },
+];

src/pages/system/user/index.tsx

@@ -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;