后台管理

src/configs/adminDepConfig.ts

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

src/configs/adminGrpConfig.ts

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

src/configs/routes.ts

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

src/pages/Index/index.tsx

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

src/pages/Login/index.tsx

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

src/pages/Staff/Grp/components/AdminGrpEditModal.tsx

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

src/pages/Staff/Grp/components/AdminGrpSelect.tsx

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

src/pages/Staff/Grp/index.tsx

@@ -0,0 +1,242 @@
+import { Button, DatePicker, Input, notification, Popconfirm, Select } from 'antd';
+import { stringify } from 'qs';
+import { useEffect, useRef, useState } from 'react';
+import { FormItemPlugin, FormPlugin } from '@/components/FormPlugin';
+import { GapBox } from '@/components/GapBox';
+import PageContainerPlugin from '@/components/PageContainer/PageContainerPlugin';
+import { FooterPagination, HeaderPagination } from '@/components/PaginationPlugin';
+import { SearchButton } from '@/components/SearchButton';
+import type { ColumnsTypeUltra } from '@/components/TableColumnsFilterPlugin';
+import { TablePlugin } from '@/components/TablePlugin';
+import { statusObj, statusOptions } from '@/configs/adminGrpConfig';
+import type { IAjaxDataBase, IParamsBase } from '@/interfaces/common';
+import { AdminGroupServices } from '@/services/AdminGroupServices';
+import { useAuthStore } from '@/store/AuthStore';
+import { tableFixedByPhone, toArray } from '@/utils/common';
+import { useRequest } from '@/utils/useRequest';
+import { AdminGrpEditModal, type IAdminGrpEditModalType } from './components/AdminGrpEditModal';
+
+interface IAjaxData extends IAjaxDataBase {
+  data: any[];
+}
+type IParams = IParamsBase & {
+  name?: string;
+  status?: number;
+  create_dateL?: string;
+  create_dateU?: string;
+};
+
+/** 岗位角色列表页面 */
+const GrpListForm: React.FC = () => {
+  const auth = useAuthStore().auth;
+  const [params, setParams] = useState<IParams>({ curr_page: 1, page_count: 20 });
+  const [ajaxData, setAjaxData] = useState<IAjaxData>({ count: 0, data: [] });
+  //const [showMoreSearch, setShowMoreSearch] = useState(false);
+  const AdminGrpEditModalRef = useRef<IAdminGrpEditModalType>(null);
+
+  const { loading: listLoading, request: listRequest } = useRequest(AdminGroupServices.getAdminGroupList, {
+    onSuccessCodeZero: (res) => {
+      setAjaxData({
+        count: res.count || 0,
+        data: toArray(res.data),
+      });
+    },
+  });
+
+  const { request: deleteAdminGroupRequest } = useRequest(AdminGroupServices.del, {
+    onSuccessCodeZero: (res) => {
+      if (res.err_code == 0) {
+        notification.success({ message: '删除成功' });
+        page(params.curr_page);
+      }
+    },
+  });
+
+  const columns: ColumnsTypeUltra<any> = [
+    {
+      title: '操作',
+      width: 50,
+      fixed: tableFixedByPhone('left'),
+      render: (_, item) => (
+        <GapBox>
+          {item?.group_id != 1 && (
+            <>
+              <Button
+                type='primary'
+                onClick={() => {
+                  AdminGrpEditModalRef.current?.show(item);
+                }}
+              >
+                编辑
+              </Button>
+              <Popconfirm
+                placement='bottom'
+                title='确认删除该岗位角色吗？'
+                onConfirm={() => {
+                  deleteAdminGroupRequest(stringify({ group_id: item.group_id }));
+                }}
+              >
+                <Button danger>删除</Button>
+              </Popconfirm>
+            </>
+          )}
+        </GapBox>
+      ),
+    },
+    { title: '岗位角色', dataIndex: 'name', width: 120 },
+    { title: '状态', dataIndex: 'status', width: 60, ellipsis: true, render: (value) => statusObj[value] },
+    { title: '备注', dataIndex: 'comments', width: 120 },
+    {
+      title: '创建时间',
+      width: window.dfConfig.isPhone ? 160 : 160,
+      dataIndex: 'create_date',
+      ellipsis: true,
+    },
+  ];
+
+  function page(curr: number) {
+    if (!listLoading) {
+      params.curr_page = curr;
+      listRequest(stringify(params));
+    }
+  }
+
+  useEffect(() => {
+    page(1);
+  }, []);
+
+  return (
+    <>
+      <FormPlugin gutter={16}>
+        <FormItemPlugin label={'岗位角色'}>
+          <Input
+            allowClear
+            defaultValue={params.name}
+            placeholder='岗位角色'
+            onChange={(e) => {
+              params.name = e.target.value.trim() || undefined;
+            }}
+            onPressEnter={() => page(1)}
+          />
+        </FormItemPlugin>
+        <FormItemPlugin label={'状态'}>
+          <Select
+            allowClear
+            value={params.status}
+            options={statusOptions}
+            onChange={(value) => {
+              params.status = value || undefined;
+              setParams({ ...params });
+            }}
+          />
+        </FormItemPlugin>
+        <FormItemPlugin label={'创建日期'}>
+          <DatePicker.RangePicker
+            style={{ width: '100%' }}
+            onChange={(_values, dates) => {
+              params.create_dateL = dates?.[0] || undefined;
+              params.create_dateU = dates?.[1] || undefined;
+            }}
+          />
+        </FormItemPlugin>
+
+        <FormItemPlugin>
+          <div
+            style={{
+              display: 'flex',
+              flexWrap: 'nowrap',
+              alignItems: 'center',
+              whiteSpace: 'nowrap',
+              gap: 8,
+            }}
+          >
+            <SearchButton
+              onClick={() => {
+                page(1);
+              }}
+            />
+            {/* <MoreSearchButton
+              show={showMoreSearch}
+              onClick={() => {
+                setShowMoreSearch((v) => !v);
+              }}
+            /> */}
+          </div>
+        </FormItemPlugin>
+      </FormPlugin>
+
+      {/* <FormPlugin style={{ display: showMoreSearch ? 'flex' : 'none' }} gutter={16}>
+        <FormItemPlugin label={'状态'}>
+          <Select
+            allowClear
+            value={params.state}
+            options={statusOptions}
+            onChange={(value) => {
+              params.state = value || undefined;
+              setParams({ ...params });
+            }}
+          />
+        </FormItemPlugin>
+        <FormItemPlugin label={'创建日期'}>
+          <DatePicker.RangePicker
+            style={{ width: '100%' }}
+            onChange={(_values, dates) => {
+              params.create_dateL = dates?.[0] || undefined;
+              params.create_dateU = dates?.[1] || undefined;
+            }}
+          />
+        </FormItemPlugin>
+      </FormPlugin> */}
+
+      <GapBox style={{ marginBottom: 12, justifyContent: 'space-between' }}>
+        <GapBox>
+          <Button
+            type='primary'
+            onClick={() => {
+              AdminGrpEditModalRef.current?.show();
+            }}
+          >
+            新增
+          </Button>
+        </GapBox>
+        <HeaderPagination
+          style={{ marginBottom: 0, marginRight: 12 }}
+          current={params.curr_page}
+          pageSize={params.page_count}
+          total={ajaxData.count}
+          onChange={page}
+        />
+      </GapBox>
+
+      <TablePlugin
+        loading={listLoading}
+        onChange={(_p, _f, sort: any) => {
+          page(1);
+        }}
+        dataSource={ajaxData.data}
+        columns={columns}
+        scroll={{ x: true }}
+        rowKey={'group_id'}
+      />
+
+      <FooterPagination
+        current={params.curr_page}
+        pageSize={params.page_count}
+        total={ajaxData.count}
+        onChange={(curr, pageSize) => {
+          params.page_count = pageSize;
+          page(curr);
+        }}
+      />
+
+      <AdminGrpEditModal ref={AdminGrpEditModalRef} onCallback={() => page(1)} />
+    </>
+  );
+};
+
+const Grp = () => (
+  <PageContainerPlugin breadcrumb={['权限管理', '岗位角色']}>
+    <GrpListForm />
+  </PageContainerPlugin>
+);
+export default Grp;

src/pages/Staff/List/components/AdminEditModal.tsx

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

src/pages/Staff/List/index.tsx

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

src/pages/Staff/dep/components/AdminDepEditModal.tsx

@@ -0,0 +1,116 @@
+import { Button, Form, Input, notification, Select } from 'antd';
+import TextArea from 'antd/lib/input/TextArea';
+import { stringify } from 'qs';
+import type React from 'react';
+import { useImperativeHandle, useState } from 'react';
+import ModalPlugin from '@/components/ModalPlugin';
+import { stateOptions } from '@/configs/adminDepConfig';
+import { AdminDepartmentServices } from '@/services/AdminDepartmentServices';
+import type { IRef } from '@/utils/type';
+import { useRequest } from '@/utils/useRequest';
+
+interface IProps extends IRef {
+  onCallback?: () => void;
+}
+
+export type IAdminDepEditModalType = {
+  show: (data?: any) => void;
+};
+
+export const AdminDepEditModal: React.FC<IProps> = (props) => {
+  const [open, setOpen] = useState(false);
+  const [title, setTitle] = useState('');
+  const [form] = Form.useForm();
+  const [data, setData] = useState<any>(null);
+
+  // 请求成功回调
+  const success = (res: any) => {
+    if (res.err_code === 0) {
+      notification.success({ message: '保存成功' });
+      props.onCallback?.();
+      setOpen(false);
+      form.resetFields(); // 提交成功重置表单
+    }
+  };
+
+  const { loading: addLoading, request: addRequest } = useRequest(AdminDepartmentServices.add, { onSuccess: success });
+  const { loading: editLoading, request: editRequest } = useRequest(AdminDepartmentServices.edit, {
+    onSuccess: success,
+  });
+
+  const save = async () => {
+    try {
+      const values = await form.validateFields();
+      // 编辑场景带上主键
+      if (data?.department_id) {
+        values.department_id = data.department_id;
+        editRequest(stringify(values));
+      } else {
+        addRequest(stringify(values));
+      }
+    } catch (error) {
+      console.log('表单验证未通过', error);
+    }
+  };
+
+  useImperativeHandle(props.ref, () => ({
+    show: (data?: any) => {
+      setTitle(data ? `${data.department_name} 编辑` : '新增');
+      setOpen(true);
+      setData(data);
+
+      if (data) {
+        // 编辑场景初始化表单
+        form.setFieldsValue({
+          department_name: data.department_name,
+          comments: data.comments,
+          state: String(data.state),
+        });
+      } else {
+        form.resetFields();
+        form.setFieldsValue({
+          state: '1',
+        });
+      }
+    },
+  }));
+
+  return (
+    <ModalPlugin
+      open={open}
+      onCancel={() => setOpen(false)}
+      title={title}
+      footer={[
+        <Button key='cancel' onClick={() => setOpen(false)}>
+          取消
+        </Button>,
+        <Button key='save' type='primary' loading={addLoading || editLoading} onClick={save}>
+          保存
+        </Button>,
+      ]}
+    >
+      <Form form={form} labelCol={{ style: { width: window?.dfConfig?.language === 'zh-cn' ? 80 : 120 } }}>
+        <Form.Item
+          label='组织建构'
+          name='department_name'
+          required
+          rules={[
+            { required: true, message: '请输入组织建构' },
+            { min: 2, message: '最少2字符' },
+            { max: 20, message: '最多20字符' },
+          ]}
+        >
+          <Input allowClear placeholder='请填写组织建构' maxLength={20} showCount />
+        </Form.Item>
+
+        <Form.Item label={'状态'} name='state'>
+          <Select options={stateOptions} placeholder='请选择状态' />
+        </Form.Item>
+
+        <Form.Item label='备注' name='comments'>
+          <TextArea allowClear maxLength={200} showCount />
+        </Form.Item>
+      </Form>
+    </ModalPlugin>
+  );
+};

src/pages/Staff/dep/components/AdminDepSelect.tsx

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

src/pages/Staff/dep/index.tsx

@@ -1,17 +1,245 @@
+import { Button, DatePicker, Input, notification, Popconfirm, Select } from 'antd';
+import { stringify } from 'qs';
+import { useEffect, useRef, useState } from 'react';
+import { FormItemPlugin, FormPlugin } from '@/components/FormPlugin';
+import { GapBox } from '@/components/GapBox';
 import PageContainerPlugin from '@/components/PageContainer/PageContainerPlugin';
+import { FooterPagination, HeaderPagination } from '@/components/PaginationPlugin';
+import { SearchButton } from '@/components/SearchButton';
+import type { ColumnsTypeUltra } from '@/components/TableColumnsFilterPlugin';
+import { TablePlugin } from '@/components/TablePlugin';
+import { stateObj, stateOptions } from '@/configs/adminDepConfig';
+import type { IAjaxDataBase, IParamsBase } from '@/interfaces/common';
+import { AdminDepartmentServices } from '@/services/AdminDepartmentServices';
+import { useAuthStore } from '@/store/AuthStore';
+import { tableFixedByPhone, toArray } from '@/utils/common';
+import { useRequest } from '@/utils/useRequest';
+import { AdminDepEditModal, type IAdminDepEditModalType } from './components/AdminDepEditModal';
+
+interface IAjaxData extends IAjaxDataBase {
+  data: any[];
+}
+type IParams = IParamsBase & {
+  department_name?: string;
+  nickname?: string;
+  mobile?: string;
+  state?: number;
+  create_dateL?: string;
+  create_dateU?: string;
+};
+
+/** 组织架构列表页面 */
+const DepListForm: React.FC = () => {
+  const auth = useAuthStore().auth;
+  const [params, setParams] = useState<IParams>({ curr_page: 1, page_count: 20 });
+  const [ajaxData, setAjaxData] = useState<IAjaxData>({ count: 0, data: [] });
+  //const [showMoreSearch, setShowMoreSearch] = useState(false);
+  const AdminDepEditModalRef = useRef<IAdminDepEditModalType>(null);
+
+  const { loading: listLoading, request: listRequest } = useRequest(AdminDepartmentServices.getAdminDepartmentList, {
+    onSuccessCodeZero: (res) => {
+      setAjaxData({
+        count: res.count || 0,
+        data: toArray(res.data),
+      });
+    },
+  });
+
+  const { request: deleteAdminDepartmentRequest } = useRequest(AdminDepartmentServices.del, {
+    onSuccessCodeZero: (res) => {
+      if (res.err_code == 0) {
+        notification.success({ message: '删除成功' });
+        page(params.curr_page);
+      }
+    },
+  });
+
+  const columns: ColumnsTypeUltra<any> = [
+    {
+      title: '操作',
+      width: 50,
+      fixed: tableFixedByPhone('left'),
+      render: (_, item) => (
+        <GapBox>
+          {item?.admin_id != 1 && (
+            <>
+              <Button
+                type='primary'
+                onClick={() => {
+                  AdminDepEditModalRef.current?.show(item);
+                }}
+              >
+                编辑
+              </Button>
+              <Popconfirm
+                placement='bottom'
+                title='确认删除该组织架构吗？'
+                onConfirm={() => {
+                  deleteAdminDepartmentRequest(stringify({ department_id: item.department_id }));
+                }}
+              >
+                <Button danger>删除</Button>
+              </Popconfirm>
+            </>
+          )}
+        </GapBox>
+      ),
+    },
+    { title: '组织架构', dataIndex: 'department_name', width: 120 },
+    { title: '状态', dataIndex: 'state', width: 60, ellipsis: true, render: (value) => stateObj[value] },
+    { title: '备注', dataIndex: 'comments', width: 120 },
+    {
+      title: '创建时间',
+      width: window.dfConfig.isPhone ? 160 : 160,
+      dataIndex: 'create_date',
+      ellipsis: true,
+    },
+  ];
+
+  function page(curr: number) {
+    if (!listLoading) {
+      params.curr_page = curr;
+      console.log(params);
+      listRequest(stringify(params));
+    }
+  }
+
+  useEffect(() => {
+    page(1);
+  }, []);
 
-const DepContent = () => {
   return (
-    <div>
+    <>
-      <div>Dep</div>
+      <FormPlugin gutter={16}>
+        <FormItemPlugin label={'组织架构'}>
+          <Input
+            allowClear
+            defaultValue={params.department_name}
+            placeholder='组织架构'
+            onChange={(e) => {
+              params.department_name = e.target.value.trim() || undefined;
+            }}
+            onPressEnter={() => page(1)}
+          />
+        </FormItemPlugin>
+        <FormItemPlugin label={'状态'}>
+          <Select
+            allowClear
+            value={params.state}
+            options={stateOptions}
+            onChange={(value) => {
+              params.state = value || undefined;
+              setParams({ ...params });
+            }}
+          />
+        </FormItemPlugin>
+        <FormItemPlugin label={'创建日期'}>
+          <DatePicker.RangePicker
+            style={{ width: '100%' }}
+            onChange={(_values, dates) => {
+              params.create_dateL = dates?.[0] || undefined;
+              params.create_dateU = dates?.[1] || undefined;
+            }}
+          />
+        </FormItemPlugin>
+
+        <FormItemPlugin>
+          <div
+            style={{
+              display: 'flex',
+              flexWrap: 'nowrap',
+              alignItems: 'center',
+              whiteSpace: 'nowrap',
+              gap: 8,
+            }}
+          >
+            <SearchButton
+              onClick={() => {
+                page(1);
+              }}
+            />
+            {/* <MoreSearchButton
+              show={showMoreSearch}
+              onClick={() => {
+                setShowMoreSearch((v) => !v);
+              }}
+            /> */}
           </div>
+        </FormItemPlugin>
+      </FormPlugin>
+
+      {/* <FormPlugin style={{ display: showMoreSearch ? 'flex' : 'none' }} gutter={16}>
+        <FormItemPlugin label={'状态'}>
+          <Select
+            allowClear
+            value={params.state}
+            options={statusOptions}
+            onChange={(value) => {
+              params.state = value || undefined;
+              setParams({ ...params });
+            }}
+          />
+        </FormItemPlugin>
+        <FormItemPlugin label={'创建日期'}>
+          <DatePicker.RangePicker
+            style={{ width: '100%' }}
+            onChange={(_values, dates) => {
+              params.create_dateL = dates?.[0] || undefined;
+              params.create_dateU = dates?.[1] || undefined;
+            }}
+          />
+        </FormItemPlugin>
+      </FormPlugin> */}
+
+      <GapBox style={{ marginBottom: 12, justifyContent: 'space-between' }}>
+        <GapBox>
+          <Button
+            type='primary'
+            onClick={() => {
+              AdminDepEditModalRef.current?.show();
+            }}
+          >
+            新增
+          </Button>
+        </GapBox>
+        <HeaderPagination
+          style={{ marginBottom: 0, marginRight: 12 }}
+          current={params.curr_page}
+          pageSize={params.page_count}
+          total={ajaxData.count}
+          onChange={page}
+        />
+      </GapBox>
+
+      <TablePlugin
+        loading={listLoading}
+        onChange={(_p, _f, sort: any) => {
+          page(1);
+        }}
+        dataSource={ajaxData.data}
+        columns={columns}
+        scroll={{ x: true }}
+        rowKey={'department_id'}
+      />
+
+      <FooterPagination
+        current={params.curr_page}
+        pageSize={params.page_count}
+        total={ajaxData.count}
+        onChange={(curr, pageSize) => {
+          params.page_count = pageSize;
+          page(curr);
+        }}
+      />
+
+      <AdminDepEditModal ref={AdminDepEditModalRef} onCallback={() => page(1)} />
+    </>
   );
 };
 
 const Dep = () => (
-  <PageContainerPlugin breadcrumb={['用户管理', '组织架构']}>
+  <PageContainerPlugin breadcrumb={['权限管理', '组织架构']}>
-    <DepContent />
+    <DepListForm />
   </PageContainerPlugin>
 );
-
 export default Dep;

src/pages/Staff/group/index.tsx

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

src/services/AdminDepartmentServices.ts

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

src/services/AdminGroupServices.ts

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

src/services/AdminServices.ts

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

src/services/HomeServices.ts

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