功能：账号权限

src/api/interface/systemManageType.ts

-import { InterFunction, InterListFunction } from '~/api/interface';
+import { InterFunction, InterItemFunction, InterListFunction } from '~/api/interface';
 // 账号-列表
 export type listBAccountPageType = InterListFunction<
   {
@@ -177,3 +177,35 @@ export type listCompanyRemove = InterFunction<
   },
   NonNullable<unknown>
 >;
+//账号权限-列表
+export type listRoleInfoPageType = InterItemFunction<
+  { numberOrName?: string },
+  {
+    id: number;
+    roleNo: string;
+    userName: string;
+    roleName: string;
+    remark: string;
+  }[]
+>;
+//账号权限-新增
+export type insertRoleInfoType = InterFunction<{ remark?: string; roleName: string }, any>;
+//账号权限-编辑
+export type updateRoleInfoType = InterFunction<
+  { id?: number; remark?: string; roleName: string },
+  any
+>;
+//账号权限-删除
+export type deleteRoleInfoType = InterFunction<{ id: number }, any>;
+//账号权限-全部菜单列表
+type menType = {
+  id: number;
+  menuName: string;
+  pid: number;
+  children: menType[];
+};
+export type listMenuInfoType = InterFunction<any, menType>;
+//账号权限-根据id获取权限
+export type listRoleMenuInfoType = InterFunction<{ roleId: number }, any>;
+//账号权限-修改角色菜单权限
+export type updateRoleMenuInfoType = InterFunction<{ menuInfoIds: number[]; roleId: number }, any>;

src/api/modules/systemManage.ts

 import {
+  deleteRoleInfoType,
   getSecondDistrictInfo,
   insertBAccountType,
+  insertRoleInfoType,
   listBAccountPageType,
   listCompanyAdd,
   listCompanyPage,
   listCompanyRemove,
   listCompanyUpdate,
+  listMenuInfoType,
+  listRoleInfoPageType,
+  listRoleMenuInfoType,
   removeBAccountType,
   updateBAccountType,
   updatePasswordType,
+  updateRoleInfoType,
+  updateRoleMenuInfoType,
 } from '../interface/systemManageType';
 import axios from '../request';
 
@@ -55,4 +62,26 @@ export class SystemManageAPI {
   // 单位-区域
   static getSecondDistrictInfo: getSecondDistrictInfo = (params) =>
     axios.get('/pms/webDevice/getSecondDistrictInfo', { params });
+
+  //账号权限-列表
+  static getListRoleInfoPage: listRoleInfoPageType = (data) =>
+    axios.post('/userapp/role/listRoleInfoPage', data);
+
+  //  账号权限-新增
+  static insertRoleInfo: insertRoleInfoType = (data) =>
+    axios.post('/userapp/role/insertRoleInfo', data);
+  //  账号权限-编辑
+  static updateRoleInfo: updateRoleInfoType = (data) =>
+    axios.post('/userapp/role/updateRoleInfo', data);
+  //  账号权限-删除
+  static deleteRoleInfo: deleteRoleInfoType = (params) =>
+    axios.get('/userapp/role/removeRoleInfo', { params });
+  //  账号权限-全部菜单列表
+  static getListMenuInfo: listMenuInfoType = () => axios.get('/userapp/role-menu/listMenuInfo');
+  //  账号权限-根据角色id获取权限
+  static getListRoleMenuInfo: listRoleMenuInfoType = (params) =>
+    axios.get('/userapp/role-menu/listRoleMenuInfo', { params });
+  //账号权限-修改角色菜单权限
+  static updateRoleMenuInfo: updateRoleMenuInfoType = (data) =>
+    axios.post('/userapp/role-menu/updateRoleMenuInfo', data);
 }

src/pages/systemManage/accountLimit/index.tsx

-const AccountLimit = () => {
-  return <div className='account-limit'></div>;
-};
-export default AccountLimit;

src/pages/systemManage/limitManage/limitInfo/index.scss

+.limit-info{
+  &-operate{
+    text-align: right;
+    & button:first-child{
+      margin-right: 10px;
+    }
+  }
+}

src/pages/systemManage/limitManage/limitInfo/index.tsx

+import { useSearchParams, useNavigate } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { SystemManageAPI } from '~/api';
+import { InterDataType } from '~/api/interface';
+import { listMenuInfoType } from '~/api/interface/systemManageType';
+import { Button, message, Modal, Tree } from 'antd';
+import './index.scss';
+
+//菜单类型
+type menuType = InterDataType<listMenuInfoType>;
+
+const LimitInfo = () => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const [roleId, setRoleId] = useState<number>(-1);
+  const [allMenu, setAllMenu] = useState<any>();
+  const [checkedKeys, setCheckedKeys] = useState<number[]>([]);
+  const [menuInfoIds, setMenuInfoIds] = useState<number[]>([]); //编辑请求数组
+  //获取全部菜单
+  const getListMenuInfo = () => {
+    SystemManageAPI.getListMenuInfo().then(({ result }) => {
+      setAllMenu(result);
+    });
+  };
+  //根据id获取该角色菜单
+  const getListRoleMenuInfo = (roleId: number) => {
+    SystemManageAPI.getListRoleMenuInfo({ roleId }).then(({ result }) => {
+      setCheckedKeys(getChildKeys(result.children));
+      setMenuInfoIds(getAllKeys(result.children));
+    });
+  };
+  //获取叶子节点
+  const getChildKeys = (data: menuType[]) => {
+    return data.reduce((pre: number[], cur) => {
+      if (cur.children) {
+        pre.push(...getChildKeys(cur.children));
+      } else {
+        pre.push(cur.id);
+      }
+      return pre;
+    }, []);
+  };
+  //获取全部节点
+  const getAllKeys = (data: menuType[]) => {
+    return data.reduce((pre: number[], cur) => {
+      pre.push(cur.id);
+      if (cur.children) {
+        pre.push(...getChildKeys(cur.children));
+      }
+      return pre;
+    }, []);
+  };
+  //菜单选中
+  const menuCheckEvent = (checkedKeys: any, info: any) => {
+    setCheckedKeys(checkedKeys);
+    setMenuInfoIds(checkedKeys.concat(info.halfCheckedKeys));
+  };
+  //更新菜单权限
+  const updateRoleMenuInfo = () => {
+    Modal.confirm({
+      title: '修改权限',
+      content: '确认修改该角色权限',
+      onOk: () => {
+        SystemManageAPI.updateRoleMenuInfo({ roleId, menuInfoIds }).then(({ code }) => {
+          if (code === '200') {
+            message.success('修改成功');
+          }
+        });
+      },
+    });
+  };
+  //返回
+  const backRoute = () => {
+    navigate(-1);
+  };
+  useEffect(() => {
+    setRoleId(Number(searchParams.get('id')));
+    getListRoleMenuInfo(Number(searchParams.get('id')));
+    getListMenuInfo();
+  }, []);
+  return (
+    <div className='limit-info'>
+      <div className='limit-info-operate'>
+        <Button type='primary' onClick={updateRoleMenuInfo}>
+          修改
+        </Button>
+        <Button type='primary' onClick={backRoute}>
+          返回
+        </Button>
+      </div>
+      <div className='limit-info-content'>
+        {allMenu && (
+          <Tree
+            checkable
+            treeData={[allMenu]}
+            fieldNames={{ title: 'menuName', key: 'id' }}
+            defaultExpandAll
+            checkedKeys={checkedKeys}
+            onCheck={menuCheckEvent}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+export default LimitInfo;

src/pages/systemManage/limitManage/roleList/components/addOrEditLimitModal/index.tsx

+import { Form, Input, message, Modal, ModalProps } from 'antd';
+import { FC, useEffect } from 'react';
+import { InterDataType } from '~/api/interface';
+import { listRoleInfoPageType } from '~/api/interface/systemManageType';
+import { SystemManageAPI } from '~/api';
+
+//账号权限-返回类型
+type accountLimitType = InterDataType<listRoleInfoPageType>['list'];
+type selfProps = {
+  onOk: () => void;
+  onCancel: () => void;
+  currentLimit: accountLimitType[0] | undefined;
+};
+
+const AddOrEditLimitModal: FC<ModalProps & selfProps> = ({
+  open,
+  onCancel,
+  onOk,
+  currentLimit,
+}) => {
+  const [form] = Form.useForm<{ roleName: string; remark?: string }>();
+
+  //表单提交
+  const handleOk = () => {
+    form.validateFields().then((value) => {
+      SystemManageAPI[currentLimit ? 'updateRoleInfo' : 'insertRoleInfo']({
+        ...value,
+        id: currentLimit ? currentLimit.id : undefined,
+      }).then(({ code }) => {
+        if (code === '200') {
+          message.success(currentLimit ? '编辑成功' : '新增成功');
+          form.resetFields();
+          onOk();
+        }
+      });
+    });
+  };
+  const handleCancel = () => {
+    form.resetFields();
+    onCancel();
+  };
+  useEffect(() => {
+    if (currentLimit) {
+      form.setFieldsValue({
+        roleName: currentLimit.roleName,
+        remark: currentLimit.remark || undefined,
+      });
+    }
+  }, [currentLimit]);
+  return (
+    <Modal
+      open={open}
+      onCancel={handleCancel}
+      title={currentLimit ? '编辑角色' : '新增角色'}
+      onOk={handleOk}
+    >
+      <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 16 }}>
+        <Form.Item
+          label='角色名称'
+          name='roleName'
+          rules={[{ required: true, message: '请输入角色名称' }]}
+        >
+          <Input placeholder='请输入角色名称' maxLength={30} />
+        </Form.Item>
+        <Form.Item label='角色备注' name='remark'>
+          <Input.TextArea placeholder='请输入备注信息' rows={4} maxLength={70} showCount />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+export default AddOrEditLimitModal;

src/pages/systemManage/limitManage/roleList/index.scss

+.limit-remark{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

src/pages/systemManage/limitManage/roleList/index.tsx

+import SearchBox, { searchColumns } from '~/components/search-box';
+import { Button, Modal, Table } from 'antd';
+import { ColumnsType } from 'antd/es/table';
+import { PlusOutlined } from '@ant-design/icons';
+import AddOrEditLimitModal from './components/addOrEditLimitModal';
+import { useEffect, useState } from 'react';
+import { InterDataType, InterReqType, PaginationProps } from '~/api/interface';
+import { SystemManageAPI } from '~/api';
+import { listRoleInfoPageType } from '~/api/interface/systemManageType';
+import { useNavigate } from 'react-router-dom';
+import './index.scss';
+
+//账号权限列表-返回类型
+type accountLimitType = InterDataType<listRoleInfoPageType>['list'];
+//账号权限列表-请求参数类型
+type accountLimitParametersType = InterReqType<listRoleInfoPageType>;
+
+const AccountLimit = () => {
+  const navigate = useNavigate();
+  const searchColumns: searchColumns[] = [
+    {
+      label: '权限角色',
+      placeholder: '请输入角色编号或名称',
+      name: 'numberOrName',
+      type: 'input',
+    },
+  ];
+  const TableColumns: ColumnsType<accountLimitType[0]> = [
+    {
+      title: '角色编号',
+      align: 'center',
+      dataIndex: 'roleNo',
+    },
+    {
+      title: '备注',
+      align: 'center',
+      dataIndex: 'remark',
+      width: '20%',
+      ellipsis: true,
+      render: (text: string) => <div className='limit-remark'>{text}</div>,
+    },
+    {
+      title: '权限角色',
+      dataIndex: 'roleName',
+      align: 'center',
+    },
+    {
+      title: '创建人',
+      align: 'center',
+      dataIndex: 'userName',
+    },
+    {
+      title: '操作',
+      align: 'center',
+      width: '20%',
+      render: (_text: string, record) => (
+        <>
+          <Button type='link' onClick={() => addOrEditRoleClick(record)}>
+            变更
+          </Button>
+          <Button type='link' onClick={() => toLimitInfo(record)}>
+            权限
+          </Button>
+          <Button type='link' danger onClick={() => deleteAccountLimit(record)}>
+            删除
+          </Button>
+        </>
+      ),
+    },
+  ];
+  const [query, setQuery] = useState<accountLimitParametersType>();
+  const [tableData, setTableData] = useState<accountLimitType>([]);
+  const [currentLimit, setCurrentLimit] = useState<accountLimitType[0]>();
+  const [pagination, setPagination] = useState<PaginationProps & { totalCount: number }>({
+    pageNo: 1,
+    pageSize: 10,
+    totalCount: 0,
+  });
+  const [addOrEditLimitModalShow, setAddOrEditLimitModalShow] = useState<boolean>(false);
+
+  //账号权限列表
+  const getListRoleInfoPage = (query?: accountLimitParametersType) => {
+    SystemManageAPI.getListRoleInfoPage({
+      pageNo: pagination.pageNo,
+      pageSize: pagination.pageSize,
+      ...query,
+    }).then(({ result }) => {
+      setTableData(result.list || []);
+      pagination.totalCount = result.totalCount;
+      setPagination(pagination);
+    });
+  };
+  //分页
+  const paginationChange = (pageNo: number, pageSize: number) => {
+    pagination.pageNo = pageNo;
+    pagination.pageSize = pageSize;
+    getListRoleInfoPage(query);
+  };
+  //筛选
+  const searchSuccessEvent = (data: accountLimitParametersType) => {
+    setQuery(data);
+    pagination.pageSize = 10;
+    pagination.pageNo = 1;
+    getListRoleInfoPage(data);
+  };
+  //删除账号权限
+  const deleteAccountLimit = (record: accountLimitType[0]) => {
+    Modal.confirm({
+      title: '角色删除',
+      content: '确认删除该角色?',
+      onOk: () => {
+        SystemManageAPI.deleteRoleInfo({ id: record.id }).then(({ code }) => {
+          if (code === '200') {
+            getListRoleInfoPage(query);
+          }
+        });
+      },
+    });
+  };
+  //新增、编辑弹窗
+  const addOrEditRoleClick = (record?: accountLimitType[0]) => {
+    setAddOrEditLimitModalShow(true);
+    setCurrentLimit(record ? { ...record } : undefined);
+  };
+  const addOrEditLimitModalCancel = () => {
+    setAddOrEditLimitModalShow(false);
+  };
+  const addOrEditLimitModalOk = () => {
+    getListRoleInfoPage(query);
+    setAddOrEditLimitModalShow(false);
+  };
+  //跳转权限信息
+  const toLimitInfo = (record: accountLimitType[0]) => {
+    navigate({ pathname: '/systemManage/limitInfo', search: `id=${record.id}` });
+  };
+
+  useEffect(() => {
+    getListRoleInfoPage();
+  }, []);
+  return (
+    <div className='account-limit'>
+      <SearchBox
+        search={searchColumns}
+        child={
+          <Button type='primary' icon={<PlusOutlined />} onClick={() => addOrEditRoleClick()}>
+            添加角色
+          </Button>
+        }
+        searchData={searchSuccessEvent}
+      />
+      <Table
+        bordered
+        columns={TableColumns}
+        rowKey='id'
+        dataSource={tableData}
+        pagination={{
+          total: pagination.totalCount,
+          pageSize: pagination.pageSize,
+          current: pagination.pageNo,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          onChange: (page: number, pageSize: number) => paginationChange(page, pageSize),
+          showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
+        }}
+      />
+      <AddOrEditLimitModal
+        open={addOrEditLimitModalShow}
+        onCancel={addOrEditLimitModalCancel}
+        onOk={addOrEditLimitModalOk}
+        currentLimit={currentLimit}
+      />
+    </div>
+  );
+};
+export default AccountLimit;

src/router/router.tsx

@@ -109,7 +109,8 @@ import TenderManageFeedback from '~/pages/resourceManage/tenderManage/feedback';
 import BusinessCaseManage from '~/pages/resourceManage/businessCaseManage';
 import CustomIdentityView from '~/pages/customManage/customIdentity';
 import CompanyManageView from '~/pages/systemManage/companyManage';
-// import AccountLimit from '~/pages/systemManage/accountLimit';
+import AccountLimit from '~/pages/systemManage/limitManage/roleList'; //账号权限
+import LimitInfo from '~/pages/systemManage/limitManage/limitInfo'; //权限信息
 
 // const IndustryListView = React.lazy(() => import('~/pages/mallManage/industryManage/industryList')); //行业列表
 // const IndustryDetailView = React.lazy(
@@ -849,20 +850,30 @@ export const routerList: Array<RouteObjectType> = [
           icon: <UserOutlined />,
         },
       },
-      // {
-      //   path: '/systemManage/accountLimit',
-      //   element: withLoadingComponent(<AccountLimit />),
-      //   meta: {
-      //     id: 28200,
-      //     title: '账号权限',
-      //     icon: <UserOutlined />,
-      //   },
-      // },
+      {
+        path: '/systemManage/accountLimit',
+        element: withLoadingComponent(<AccountLimit />),
+        meta: {
+          id: 28200,
+          title: '账号权限',
+          icon: <UserOutlined />,
+        },
+      },
+      {
+        path: '/systemManage/limitInfo',
+        element: withLoadingComponent(<LimitInfo />),
+        meta: {
+          id: 28300,
+          title: '权限信息',
+          icon: <UserOutlined />,
+          hidden: true,
+        },
+      },
       {
         path: '/systemManage/companyManage',
         element: withLoadingComponent(<CompanyManageView />),
         meta: {
-          id: 28300,
+          id: 28400,
           title: '单位管理',
           icon: <BankOutlined />,
         },