feat: 角色权限分前后台单独菜单管理

config/routes.ts

@@ -213,10 +213,16 @@ const routes: Route[] = [
         redirect: '/permission/role'
       },
       {
-        path: 'role',
+        path: 'front',
         name: BackstagePermission.VIEW_PERMISSION_ROLE,
         access: 'authRouteFilter',
-        component: './Permission/Role'
+        component: './Permission/FrontRole'
+      },
+      {
+        path: 'back',
+        name: BackstagePermission.VIEW_BACK_PERMISSION_ROLE,
+        access: 'authRouteFilter',
+        component: './Permission/BackRole'
       }
     ]
   },

src/enums/access.ts

@@ -87,6 +87,8 @@ export enum BackstagePermission {
   VIEW_RULE_CODE = 'viewRuleCode',
   /** 权限角色设置-查看信息 */
   VIEW_PERMISSION_ROLE = 'viewPermissionRole',
+  /** 后台权限设置-查看信息 */
+  VIEW_BACK_PERMISSION_ROLE = 'viewBackPermissionRole',
   /** 系统设置-查看管理员 */
   VIEW_SYSTEM_ADMIN_SETTING = 'viewSystemAdminSetting'
 }

src/locales/zh-CN/menu.ts

@@ -41,7 +41,8 @@ export default {
   'menu.schema.viewBudgetSchema.budget': '预算业务表单',
   'menu.schema.viewBudgetSchema.budget-detail': '编辑业务表单',
   'menu.permission': '权限设置',
-  'menu.permission.viewPermissionRole': '功能角色设置',
+  'menu.permission.viewPermissionRole': '前台功能角色设置',
+  'menu.permission.viewBackPermissionRole': '后台功能角色设置',
   'menu.system': '系统管理',
   'menu.system.setting': '系统设置',
   'menu.system.viewSystemAdminSetting': '管理员',

src/pages/Institutions/Staff/components/StaffDetail.tsx

@@ -33,7 +33,7 @@ import {
 } from '@formily/antd'
 import { fetchRoleList } from '@/services/permission'
 import consts from '@/utils/consts'
-import { RoleType } from '@/pages/Permission/Role/components/RoleLeftMenu'
+import { RoleType } from '@/pages/Permission/FrontRole/components/RoleLeftMenu'
 type StaffModalProps = ConnectProps & {
   readOnly: boolean
   onVisibleChange: (visible: boolean) => void

src/pages/Permission/BackRole/components/PermTabs/index.tsx

@@ -0,0 +1,399 @@
+import { useState } from 'react'
+import { useRequest } from '@umijs/max'
+import { RoleType } from '../RoleLeftMenu'
+import { Card, Checkbox, Button, message, Spin, Affix } from 'antd'
+import { queryRoleDetailByID, setRolePermission } from '@/services/permission'
+import { BackstagePermission } from '@/enums/access'
+
+import './index.less'
+
+type PermTabsProps = {
+  currentPermData: {
+    ID: string
+    roleType: RoleType
+  }
+}
+const backstagePermissionArray = Object.values(BackstagePermission)
+// 过滤权限枚举
+const filterPermission = (permission: string[]) => {
+  if (!Array.isArray(permission)) return []
+  return permission.filter(item => backstagePermissionArray?.includes(item))
+}
+
+const PermTabs: React.FC<PermTabsProps> = ({ currentPermData: { ID } }) => {
+  const [permission, setPermission] = useState([])
+
+  const { loading } = useRequest(() => queryRoleDetailByID({ ID }), {
+    refreshDeps: [ID],
+    onSuccess: ({ backstagePermission = [] } = {}) => {
+      setPermission(filterPermission(backstagePermission))
+    },
+    onError: e => console.log(e)
+  })
+
+  const { run: trySetRolePermission, loading: submitStauts } = useRequest(
+    (params: API.RolePermissionParams) => setRolePermission(params),
+    {
+      manual: true,
+      onSuccess: () => {
+        message.success('设置成功')
+      }
+    }
+  )
+  const handleBackOnchange = (checked: boolean, role: string) => {
+    if (checked) {
+      setPermission([...permission, role])
+    } else {
+      setPermission(permission.filter(item => item !== role))
+    }
+  }
+
+  const handleSubmit = () => {
+    const params = {
+      ID,
+      frontPermission: filterPermission(permission)
+    }
+    trySetRolePermission(params)
+  }
+
+  return (
+    <>
+      <div style={{ height: 'calc(100vh - 250px)' }} className="overflow-y-auto">
+        <Spin spinning={loading}>
+          <div className="shadow-md mb-4">
+            <Card size="small" type="inner" title="项目审批设置">
+              <div>
+                <h4>项目管理</h4>
+                <div className="my-2">
+                  <Checkbox
+                    onChange={e =>
+                      handleBackOnchange(e.target.checked, BackstagePermission.VIEW_PROJECT_MANAGEMENT)
+                    }
+                    checked={permission.includes(BackstagePermission.VIEW_PROJECT_MANAGEMENT)}>
+                    查看项目
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'addBa1')}
+                    checked={permission.includes('updatePsw')}>
+                    新建项目
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'editBa1')}
+                    checked={permission.includes('updatePsw')}>
+                    编辑项目
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'bindBa1')}
+                    checked={permission.includes('updatePsw')}>
+                    绑定角色
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'deployBa1')}
+                    checked={permission.includes('updatePsw')}>
+                    流程配置
+                  </Checkbox>
+                </div>
+              </div>
+              <div>
+                <h4 className="pt-3">审批角色</h4>
+                <div className="my-2">
+                  <Checkbox
+                    onChange={e =>
+                      handleBackOnchange(e.target.checked, BackstagePermission.VIEW_APPROVAL_ROLE)
+                    }
+                    checked={permission.includes(BackstagePermission.VIEW_APPROVAL_ROLE)}>
+                    查看角色
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e =>
+                      handleBackOnchange(e.target.checked, BackstagePermission.ADD_APPROVAL_ROLE)
+                    }
+                    checked={permission.includes(BackstagePermission.ADD_APPROVAL_ROLE)}>
+                    新建角色
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e =>
+                      handleBackOnchange(e.target.checked, BackstagePermission.EDIT_APPROVAL_ROLE)
+                    }
+                    checked={permission.includes(BackstagePermission.EDIT_APPROVAL_ROLE)}>
+                    编辑角色
+                  </Checkbox>
+                </div>
+              </div>
+              <div>
+                <h4 className="pt-3">审批流程模板</h4>
+                <div className="my-2">
+                  <Checkbox
+                    onChange={e =>
+                      handleBackOnchange(e.target.checked, BackstagePermission.VIEW_AUDIT_TEMPLATE)
+                    }
+                    checked={permission.includes(BackstagePermission.VIEW_AUDIT_TEMPLATE)}>
+                    查看流程
+                  </Checkbox>
+                  {/* <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'addBa2')}
+                    checked={permission.includes('updatePsw')}>
+                    新建流程
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'editBa2')}
+                    checked={permission.includes('updatePsw')}>
+                    编辑流程
+                  </Checkbox> */}
+                </div>
+              </div>
+            </Card>
+          </div>
+          <div className="shadow-md mb-4">
+            <Card size="small" type="inner" title="企事业单位">
+              <div>
+                <h4>单位管理</h4>
+                <div className="my-2">
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, BackstagePermission.VIEW_INSTITUTION)}
+                    checked={permission.includes(BackstagePermission.VIEW_INSTITUTION)}>
+                    查看单位
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, BackstagePermission.ADD_INSTITUTION)}
+                    checked={permission.includes(BackstagePermission.ADD_INSTITUTION)}>
+                    新建单位
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, BackstagePermission.EDIT_INSTITUTION)}
+                    checked={permission.includes(BackstagePermission.EDIT_INSTITUTION)}>
+                    编辑单位
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e =>
+                      handleBackOnchange(e.target.checked, BackstagePermission.VIEW_STAFF_WITH_IN)
+                    }
+                    checked={permission.includes(BackstagePermission.VIEW_STAFF_WITH_IN)}>
+                    人员管理
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e =>
+                      handleBackOnchange(e.target.checked, BackstagePermission.VIEW_ORGANIZATION)
+                    }
+                    checked={permission.includes(BackstagePermission.VIEW_ORGANIZATION)}>
+                    组织管理
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e =>
+                      handleBackOnchange(e.target.checked, BackstagePermission.VIEW_INSTITUTION_SETTING)
+                    }
+                    checked={permission.includes(BackstagePermission.VIEW_INSTITUTION_SETTING)}>
+                    单位设置
+                  </Checkbox>
+                </div>
+              </div>
+              <div>
+                <h4 className="pt-3">人员管理</h4>
+                <div className="my-2">
+                  <Checkbox
+                    onChange={e =>
+                      handleBackOnchange(e.target.checked, BackstagePermission.VIEW_INSTITUTION_STAFF)
+                    }
+                    checked={permission.includes(BackstagePermission.VIEW_STAFF_WITH_OUT)}>
+                    查看人员
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e =>
+                      handleBackOnchange(e.target.checked, BackstagePermission.ADD_INSTITUTION_STAFF)
+                    }
+                    checked={permission.includes(BackstagePermission.ADD_INSTITUTION_STAFF)}>
+                    新增人员
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e =>
+                      handleBackOnchange(e.target.checked, BackstagePermission.EDIT_INSTITUTION_STAFF)
+                    }
+                    checked={permission.includes(BackstagePermission.EDIT_INSTITUTION_STAFF)}>
+                    编辑人员
+                  </Checkbox>
+                </div>
+              </div>
+              <div>
+                <h4 className="pt-3">限制登录</h4>
+                <div className="my-2">
+                  <Checkbox
+                    onChange={e =>
+                      handleBackOnchange(e.target.checked, BackstagePermission.VIEW_ILLEGAL_USER)
+                    }
+                    checked={permission.includes(BackstagePermission.VIEW_ILLEGAL_USER)}>
+                    查看人员
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e =>
+                      handleBackOnchange(e.target.checked, BackstagePermission.EDIT_ILLEGAL_USER)
+                    }
+                    checked={permission.includes(BackstagePermission.EDIT_ILLEGAL_USER)}>
+                    编辑人员
+                  </Checkbox>
+                </div>
+              </div>
+            </Card>
+          </div>
+          <div className="shadow-md mb-4">
+            <Card size="small" type="inner" title="业务审批设置">
+              <div>
+                <h4 className="pt-3">业务编号配置</h4>
+                <div className="my-2">
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, BackstagePermission.VIEW_RULE_CODE)}
+                    checked={permission.includes(BackstagePermission.VIEW_RULE_CODE)}>
+                    查看编号规则
+                  </Checkbox>
+                </div>
+              </div>
+              {/* <div>
+                  <h4>业务管理</h4>
+                  <div className="my-2">
+                    <Checkbox
+                      onChange={e => handleBackOnchange(e.target.checked, 'viewBusiness')}
+                      checked={permission.includes('viewBusiness')}>
+                      查看信息
+                    </Checkbox>
+                  </div>
+                </div> */}
+              <div>
+                <h4 className="pt-3">流程用户配置</h4>
+                <div className="my-2">
+                  <Checkbox
+                    onChange={e =>
+                      handleBackOnchange(e.target.checked, BackstagePermission.VIEW_PROCESS_USER)
+                    }
+                    checked={permission.includes(BackstagePermission.VIEW_PROCESS_USER)}>
+                    查看流程用户
+                  </Checkbox>
+                </div>
+              </div>
+              <div>
+                <h4 className="pt-3">资料清单配置</h4>
+                <div className="my-2">
+                  <Checkbox
+                    onChange={e =>
+                      handleBackOnchange(e.target.checked, BackstagePermission.VIEW_INVENTORY_TEMPLATE)
+                    }
+                    checked={permission.includes(BackstagePermission.VIEW_INVENTORY_TEMPLATE)}>
+                    查看资料清单模板
+                  </Checkbox>
+                </div>
+              </div>
+            </Card>
+          </div>
+          <div className="shadow-md mb-4">
+            <Card size="small" type="inner" title="表单设置">
+              <div>
+                <h4>基础数据设置</h4>
+                <div className="my-2">
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, BackstagePermission.VIEW_BASE_SCHEMA)}
+                    checked={permission.includes(BackstagePermission.VIEW_BASE_SCHEMA)}>
+                    查看信息
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, BackstagePermission.EDIT_BASE_SCHEMA)}
+                    checked={permission.includes(BackstagePermission.EDIT_BASE_SCHEMA)}>
+                    编辑信息
+                  </Checkbox>
+                </div>
+              </div>
+              <div>
+                <h4 className="pt-3">数据源设置</h4>
+                <div className="my-2">
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, BackstagePermission.VIEW_DS_LIST)}
+                    checked={permission.includes(BackstagePermission.VIEW_DS_LIST)}>
+                    查看信息
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, BackstagePermission.EDIT_DS_LIST)}
+                    checked={permission.includes(BackstagePermission.EDIT_DS_LIST)}>
+                    编辑信息
+                  </Checkbox>
+                </div>
+              </div>
+              <div>
+                <h4 className="pt-3">预算业务表单设置</h4>
+                <div className="my-2">
+                  <Checkbox
+                    onChange={e =>
+                      handleBackOnchange(e.target.checked, BackstagePermission.VIEW_BUDGET_SCHEMA)
+                    }
+                    checked={permission.includes(BackstagePermission.VIEW_BUDGET_SCHEMA)}>
+                    查看信息
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e =>
+                      handleBackOnchange(e.target.checked, BackstagePermission.EDIT_BUDGET_SCHEMA)
+                    }
+                    checked={permission.includes(BackstagePermission.EDIT_BUDGET_SCHEMA)}>
+                    编辑信息
+                  </Checkbox>
+                </div>
+              </div>
+            </Card>
+          </div>
+          <div className="shadow-md mb-4">
+            <Card size="small" type="inner" title="权限设置">
+              <div>
+                <h4>前台功能角色设置</h4>
+                <div className="my-2">
+                  <Checkbox
+                    onChange={e =>
+                      handleBackOnchange(e.target.checked, BackstagePermission.VIEW_PERMISSION_ROLE)
+                    }
+                    checked={permission.includes(BackstagePermission.VIEW_PERMISSION_ROLE)}>
+                    查看信息
+                  </Checkbox>
+                </div>
+              </div>
+              <div>
+                <h4>后台功能角色设置</h4>
+                <div className="my-2">
+                  <Checkbox
+                    onChange={e =>
+                      handleBackOnchange(e.target.checked, BackstagePermission.VIEW_BACK_PERMISSION_ROLE)
+                    }
+                    checked={permission.includes(BackstagePermission.VIEW_BACK_PERMISSION_ROLE)}>
+                    查看信息
+                  </Checkbox>
+                </div>
+              </div>
+            </Card>
+          </div>
+          <div className="shadow-md mb-4">
+            <Card size="small" type="inner" title="系统管理">
+              <div>
+                <h4>管理员设置</h4>
+                <div className="my-2">
+                  <Checkbox
+                    onChange={e =>
+                      handleBackOnchange(e.target.checked, BackstagePermission.VIEW_SYSTEM_ADMIN_SETTING)
+                    }
+                    checked={permission.includes(BackstagePermission.VIEW_SYSTEM_ADMIN_SETTING)}>
+                    查看信息
+                  </Checkbox>
+                  {/* <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'editBa9')}
+                    checked={permission.includes('updatePsw')}
+                    >
+                    编辑信息
+                  </Checkbox> */}
+                </div>
+              </div>
+            </Card>
+          </div>
+        </Spin>
+      </div>
+      <Affix offsetBottom={10}>
+        <Button type="primary" onClick={handleSubmit} loading={submitStauts}>
+          提交
+        </Button>
+      </Affix>
+    </>
+  )
+}
+
+export default PermTabs

src/pages/Permission/BackRole/index.tsx

@@ -0,0 +1,166 @@
+import { fetchRoleList, unLinkRoleAccount, fetchRoleStaffListByRoleId } from '@/services/permission'
+import { DeleteOutlined } from '@ant-design/icons'
+import { PageContainer } from '@ant-design/pro-layout'
+import { Input, message, Popconfirm, Table, Tabs } from 'antd'
+import { useState } from 'react'
+import { useRequest } from '@umijs/max'
+import RoleLeftMenu, { RoleType } from './components/RoleLeftMenu'
+import PermTabs from './components/PermTabs'
+import type { ColumnsType } from 'antd/lib/table'
+import ConnectModal from '../FrontRole/components/ConnectModal'
+const { TabPane } = Tabs
+
+const Role = () => {
+  const [state, setState] = useState({
+    activeTab: '1',
+    currentRoleID: null,
+    roleType: '',
+    roleStaff: []
+  })
+
+  const [menuRoles, setMenuRoles] = useState([])
+  const { run: tryGetRoleStaffList, loading: staffListLoading } = useRequest(
+    (params: { roleID: string; search?: string }) =>
+      fetchRoleStaffListByRoleId({ pageNo: 1, pageSize: 214000, ...params }),
+    {
+      manual: true,
+      onSuccess: result => {
+        setState({ ...state, roleStaff: result.items })
+      }
+    }
+  )
+  const { run: tryUnLinkRoleAccount } = useRequest(
+    (params: API.LinkAccountParams) => unLinkRoleAccount(params),
+    {
+      manual: true,
+      onSuccess: async () => {
+        message.success('移除成功')
+        await tryGetRoleStaffList({ roleID: state.currentRoleID })
+      }
+    }
+  )
+
+  const onSelect = (currentRoleID: string, roleType: string) => {
+    if (state.currentRoleID === currentRoleID) return
+    setState({ ...state, currentRoleID, roleType })
+    tryGetRoleStaffList({ roleID: currentRoleID })
+  }
+
+  const { run: tryFetchRoleListByMenu } = useRequest(fetchRoleList, {
+    onSuccess: result => {
+      setMenuRoles(
+        result.map(item => ({
+          key: item.ID,
+          title: item.name,
+          roleType: item.roleType
+        }))
+      )
+
+      result?.length && onSelect?.(state.currentRoleID ?? result[0]?.ID, result[0]?.roleType)
+    }
+  })
+
+  const delRoleValidFn = (ID: string) => {
+    if (state.roleStaff.length) {
+      return message.warning('请先移除该角色下的所有用户')
+    }
+    tryDelRole(ID)
+  }
+  const columns: ColumnsType<API.MenuByRoleIdItem> = [
+    {
+      title: '账号',
+      dataIndex: 'account',
+      width: '15%'
+    },
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      width: '15%'
+    },
+    {
+      title: '企事业名称',
+      dataIndex: 'institutionID',
+      width: '35%',
+      render: (_, record) => record.institution?.name
+    },
+    {
+      title: '操作',
+      dataIndex: 'operation',
+      width: '10%',
+      render: (_, record) =>
+        ![RoleType.SYSTEM, RoleType.SYSTEM_NORMAL].includes(state.roleType) && (
+          <Popconfirm
+            title="确定移除吗？"
+            okText="确定"
+            cancelText="取消"
+            onConfirm={() => {
+              tryUnLinkRoleAccount({ ID: state.currentRoleID, accountID: record.ID })
+            }}>
+            <span className="text-hex-fd3995 cursor-pointer hover:text-hex-e7026e">
+              <DeleteOutlined />
+            </span>
+          </Popconfirm>
+        )
+    }
+  ]
+
+  const wrapHeight = document.querySelector('.ant-pro-page-container-warp')?.clientHeight || 0
+
+  return (
+    <PageContainer title={false}>
+      <div className="h-full w-full flex flex-row">
+        <RoleLeftMenu
+          defaultActiveRole={state.currentRoleID ?? menuRoles[0]?.ID}
+          onSelect={onSelect}
+          menuRoles={menuRoles}
+          showDelIcon={!state.roleStaff.length}
+          onReloadStaff={() => tryFetchRoleListByMenu()}
+          delRoleValidFn={delRoleValidFn}
+        />
+        <div className="w-6/7 ml-8 bg-white p-4 rounded-20px relative">
+          <Tabs
+            tabBarExtraContent={{
+              right: state.activeTab === '1' && (
+                <div className="flex items-center children:mx-1">
+                  <Input.Search
+                    placeholder="请输入账号或姓名"
+                    onSearch={value => tryGetRoleStaffList({ roleID: state.currentRoleID, search: value })}
+                  />
+                  {state.currentRoleID && state.roleType !== RoleType.SYSTEM && (
+                    <ConnectModal
+                      dataId={state.currentRoleID}
+                      onReload={() => tryGetRoleStaffList({ roleID: state.currentRoleID })}
+                    />
+                  )}
+                </div>
+              )
+            }}
+            defaultActiveKey="1"
+            onChange={key => setState({ ...state, activeTab: key })}>
+            <TabPane tab="用户列表" key="1">
+              <Table<API.RoleStaffItem>
+                loading={staffListLoading}
+                columns={columns}
+                scroll={{
+                  y: document.body.clientHeight - (285 + wrapHeight)
+                }}
+                dataSource={state.roleStaff}
+                rowKey={row => row.id}
+              />
+            </TabPane>
+            <TabPane tab="功能权限" key="2">
+              <PermTabs
+                currentPermData={{
+                  ID: state.currentRoleID,
+                  roleType: state.roleType
+                }}
+              />
+            </TabPane>
+          </Tabs>
+        </div>
+      </div>
+    </PageContainer>
+  )
+}
+
+export default Role

src/pages/Permission/FrontRole/components/PermTabs/index.tsx

@@ -0,0 +1,215 @@
+import { useState } from 'react'
+import { useRequest } from '@umijs/max'
+import { Card, Checkbox, Button, message, Spin, Affix } from 'antd'
+import { queryRoleDetailByID, setRolePermission } from '@/services/permission'
+import { FrontPermission } from '@/enums/access'
+
+type PermTabsProps = {
+  currentPermData: {
+    ID: string
+  }
+}
+
+const frontPermissionArray = Object.values(FrontPermission)
+
+// 过滤权限枚举
+const filterPermission = (permission: string[]) => {
+  if (!Array.isArray(permission)) return []
+  return permission.filter(item => frontPermissionArray?.includes(item))
+}
+
+const PermTabs: React.FC<PermTabsProps> = ({ currentPermData: { ID } }) => {
+  const [permission, setPermission] = useState([])
+
+  const { loading } = useRequest(() => queryRoleDetailByID({ ID }), {
+    refreshDeps: [ID],
+    onSuccess: ({ frontPermission = [] } = {}) => {
+      setPermission(filterPermission(frontPermission))
+    },
+    onError: e => console.log(e)
+  })
+
+  const { run: trySetRolePermission, loading: submitStauts } = useRequest(
+    (params: API.RolePermissionParams) => setRolePermission(params),
+    {
+      manual: true,
+      onSuccess: () => {
+        message.success('设置成功')
+      }
+    }
+  )
+  const handleFrontOnchange = (checked: boolean, role: string) => {
+    if (checked) {
+      setPermission([...permission, role])
+    } else {
+      setPermission(permission.filter(item => item !== role))
+    }
+  }
+
+  const handleSubmit = () => {
+    const params = {
+      ID,
+      operation: state.activeTab,
+      frontPermission: filterPermission(permission)
+    }
+    trySetRolePermission(params)
+  }
+
+  return (
+    <>
+      <div style={{ height: 'calc(100vh - 250px)' }} className="overflow-y-auto">
+        <Spin spinning={loading}>
+          <div className="shadow-md mb-4">
+            <Card size="small" type="inner" title="待办列表">
+              <div>
+                {/* <h4>我的项目</h4> */}
+                <div className="my-2">
+                  <Checkbox onChange={e => handleFrontOnchange(e.target.checked, 'todo')}>已办待办</Checkbox>
+                </div>
+              </div>
+            </Card>
+          </div>
+          <div className="shadow-md mb-4">
+            <Card size="small" type="inner" title="项目列表">
+              <div>
+                <h4>我的项目</h4>
+                <div className="my-2">
+                  <Checkbox
+                    onChange={e => handleFrontOnchange(e.target.checked, FrontPermission.VIEW_PROJECT)}
+                    checked={permission.includes(FrontPermission.VIEW_PROJECT)}>
+                    查看项目
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleFrontOnchange(e.target.checked, FrontPermission.ADD_PROJECT)}
+                    checked={permission.includes(FrontPermission.ADD_PROJECT)}>
+                    新建项目
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleFrontOnchange(e.target.checked, FrontPermission.EDIT_PROJECT)}
+                    checked={permission.includes(FrontPermission.EDIT_PROJECT)}>
+                    编辑项目
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleFrontOnchange(e.target.checked, FrontPermission.EXPORT_PROJECT)}
+                    checked={permission.includes(FrontPermission.EXPORT_PROJECT)}>
+                    导出项目
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleFrontOnchange(e.target.checked, FrontPermission.DEL_PROJECT)}
+                    checked={permission.includes(FrontPermission.DEL_PROJECT)}>
+                    删除项目
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleFrontOnchange(e.target.checked, FrontPermission.REPORT)}
+                    checked={permission.includes(FrontPermission.REPORT)}>
+                    项目上报（审批模板）
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleFrontOnchange(e.target.checked, FrontPermission.FREE_REPORT)}
+                    checked={permission.includes(FrontPermission.FREE_REPORT)}>
+                    项目上报（自由流程）
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleFrontOnchange(e.target.checked, FrontPermission.VIEW_APPROVAL)}
+                    checked={permission.includes(FrontPermission.VIEW_APPROVAL)}>
+                    审批进度
+                  </Checkbox>
+                </div>
+              </div>
+              <div>
+                <h4 className="pt-3">我参与的项目</h4>
+                <div className="my-2">
+                  <Checkbox
+                    checked={permission.includes(FrontPermission.VIEW_PARTICIPATING_PROJECT)}
+                    onChange={e =>
+                      handleFrontOnchange(e.target.checked, FrontPermission.VIEW_PARTICIPATING_PROJECT)
+                    }>
+                    查看项目
+                  </Checkbox>
+                  <Checkbox
+                    checked={permission.includes(FrontPermission.SAVE_INDEX)}
+                    onChange={e => handleFrontOnchange(e.target.checked, FrontPermission.SAVE_INDEX)}>
+                    指标入库
+                  </Checkbox>
+                  <Checkbox
+                    checked={permission.includes(FrontPermission.EXPORT_PARTICIPATING_PROJECT)}
+                    onChange={e =>
+                      handleFrontOnchange(e.target.checked, FrontPermission.EXPORT_PARTICIPATING_PROJECT)
+                    }>
+                    导出项目
+                  </Checkbox>
+                </div>
+              </div>
+              <div>
+                <h4 className="pt-3">全部项目</h4>
+                <div className="my-2">
+                  <Checkbox
+                    onChange={e => handleFrontOnchange(e.target.checked, FrontPermission.VIEW_ALL_PROJECTS)}
+                    checked={permission.includes(FrontPermission.VIEW_ALL_PROJECTS)}>
+                    查看项目
+                  </Checkbox>
+                  <Checkbox
+                    checked={permission.includes(FrontPermission.SAVE_INDEX_ALL)}
+                    onChange={e => handleFrontOnchange(e.target.checked, FrontPermission.SAVE_INDEX_ALL)}>
+                    指标入库
+                  </Checkbox>
+                  <Checkbox
+                    checked={permission.includes(FrontPermission.SET_PROJECTS)}
+                    onChange={e => handleFrontOnchange(e.target.checked, FrontPermission.SET_PROJECTS)}>
+                    项目设置
+                  </Checkbox>
+                </div>
+              </div>
+              {/* <div>
+                <h4 className="pt-3">指标库</h4>
+                <div className="my-2">
+                  <Checkbox onChange={e => handleFrontOnchange(e.target.checked, 'section')} disabled>
+                    区间对数
+                  </Checkbox>
+                </div>
+              </div> */}
+            </Card>
+          </div>
+          <div className="shadow-md mb-4">
+            <Card size="small" type="inner" title="个人设置">
+              <div>
+                <h4>基本设置</h4>
+                <div className="my-2">
+                  <Checkbox onChange={e => handleFrontOnchange(e.target.checked, 'edit')} disabled>
+                    编辑
+                  </Checkbox>
+                </div>
+              </div>
+              <div>
+                <h4 className="pt-3">企事业信息</h4>
+                <div className="my-2">
+                  <Checkbox onChange={e => handleFrontOnchange(e.target.checked, 'access2')} disabled>
+                    查看
+                  </Checkbox>
+                </div>
+              </div>
+              <div>
+                <h4 className="pt-3">安全设置</h4>
+                <div className="my-2">
+                  <Checkbox onChange={e => handleFrontOnchange(e.target.checked, 'phone')} disabled>
+                    手机绑定
+                  </Checkbox>
+                  <Checkbox onChange={e => handleFrontOnchange(e.target.checked, 'password')} disabled>
+                    密码修改
+                  </Checkbox>
+                </div>
+              </div>
+            </Card>
+          </div>
+        </Spin>
+      </div>
+      <Affix offsetBottom={10}>
+        <Button type="primary" onClick={handleSubmit} loading={submitStauts}>
+          提交
+        </Button>
+      </Affix>
+    </>
+  )
+}
+
+export default PermTabs

src/pages/Permission/FrontRole/components/RoleLeftMenu/index.less

@@ -0,0 +1,32 @@
+.menu-title {
+  box-shadow: inset 0 -1px 0 1px #f0f0f0;
+}
+.department-node {
+  height: 32px;
+  max-width: 152px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .title {
+    word-wrap: break-word;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .extra {
+    display: none;
+    margin-right: 0.25rem;
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  &:hover {
+    .extra {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-wrap: nowrap;
+    }
+  }
+}

src/pages/Permission/FrontRole/components/RoleLeftMenu/index.tsx

@@ -0,0 +1,167 @@
+import { addRoleMenu, delRoleMenuByRoleID, updateRoleMenu } from '@/services/permission'
+import { isNullOrUnDef } from '@/utils/is'
+import { DeleteOutlined, FormOutlined, PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons'
+import { ModalForm, ProFormText } from '@ant-design/pro-form'
+import type { ProFormInstance } from '@ant-design/pro-form'
+import type { TreeDataNode } from 'antd'
+import { Button, Input, Tree, message, Popconfirm } from 'antd'
+import { useRef, useState } from 'react'
+import { useRequest } from '@umijs/max'
+const { DirectoryTree } = Tree
+import './index.less'
+
+export enum RoleType {
+  SYSTEM = 'system', // 超级管理员
+  SYSTEM_NORMAL = 'systemNormal', // 普通用户
+  NORMAL = 'normal' // 手动添加的角色
+}
+
+type RoleLeftMenuProps = {
+  defaultActiveRole?: string
+  onSelect: (...args) => void
+  showDelIcon: boolean
+  onReloadStaff: () => void
+}
+
+const RoleLeftMenu: React.FC<RoleLeftMenuProps> = ({
+  defaultActiveRole,
+  onSelect,
+  menuRoles,
+  showDelIcon,
+  onReloadStaff
+}) => {
+  const formRef = useRef<ProFormInstance>(null)
+  const [activeID, setActiveID] = useState<Nullable<string>>(null)
+
+  const { run: tryAddRole } = useRequest((params: API.CreateRoleParams) => addRoleMenu(params), {
+    manual: true,
+    onSuccess: () => {
+      onReloadStaff()
+    }
+  })
+
+  const { run: tryUpdateRole } = useRequest(
+    (params: Partial<API.UpdateRoleParams>) => updateRoleMenu(params),
+    {
+      manual: true,
+      onSuccess: () => {
+        message.success('修改成功')
+        onReloadStaff()
+      }
+    }
+  )
+
+  const { run: tryDelRole } = useRequest((ID: string) => delRoleMenuByRoleID({ ID }), {
+    manual: true,
+    onSuccess: () => {
+      message.success('删除成功')
+      onReloadStaff()
+    }
+  })
+  const handleOnFocus = async (
+    e: React.FocusEvent<HTMLInputElement> | React.KeyboardEvent<HTMLElement>,
+    oldTitle: string,
+    ID: string
+  ) => {
+    const val = e.currentTarget.value || e.currentTarget.nodeValue
+    if (val !== oldTitle) {
+      await tryUpdateRole({ ID, name: val })
+    }
+    setActiveID(null)
+  }
+
+  function renderTreeNode(tree) {
+    return tree.map((item: TreeDataNode & { roleType: string }) => {
+      // 系统管理员，系统用户不能删除、编辑
+      const newItem = {
+        ...item,
+        title: [RoleType.SYSTEM, RoleType.SYSTEM_NORMAL].includes(item.roleType) ? (
+          <span className="department-node py-1">{item.title}</span>
+        ) : (
+          <div className="department-node py-1">
+            {item.key === activeID ? (
+              <Input
+                autoFocus
+                defaultValue={item.title}
+                bordered={false}
+                size="small"
+                style={{ width: '70%', backgroundColor: 'white' }}
+                onBlur={e => handleOnFocus(e, item.title, item.key)}
+                onPressEnter={e => handleOnFocus(e, item.title, item.key)}
+              />
+            ) : (
+              <div className="title">{item.title}</div>
+            )}
+            <div className="extra">
+              <FormOutlined className="pr-2" onClick={() => setActiveID(item.key)} />
+              <Popconfirm
+                disabled={!showDelIcon}
+                title="确认删除吗？"
+                onText="确认"
+                cancelText="取消"
+                onConfirm={() => tryDelRole(item.key)}
+                icon={<QuestionCircleOutlined style={{ color: 'red' }} />}>
+                <DeleteOutlined
+                  onClick={() => {
+                    !showDelIcon && message.warning('请先移除该角色下的所有用户')
+                  }}
+                />
+              </Popconfirm>
+            </div>
+          </div>
+        )
+      }
+      if (newItem.children?.length) {
+        newItem.children = renderTreeNode(newItem.children)
+      }
+      return newItem
+    })
+  }
+
+  const virtualHeight = document.getElementById('role-list')?.clientHeight
+
+  if (!menuRoles?.length || isNullOrUnDef(defaultActiveRole)) return null
+  return (
+    <div className="min-w-54 rounded-3xl" style={{ height: 'calc(100vh - 122px)', background: '#ffffff' }}>
+      <div className="menu-title flex items-center justify-around">
+        <span className="py-4 text-base text-opacity-85">角色列表</span>
+        <ModalForm
+          title="新建角色"
+          width="30%"
+          onVisibleChange={visible => !visible && formRef.current?.resetFields()}
+          layout="horizontal"
+          isKeyPressSubmit
+          trigger={
+            <Button size="small" type="primary" ghost>
+              <PlusOutlined />
+              添加
+            </Button>
+          }
+          onFinish={async values => {
+            await tryAddRole(values)
+            message.success('添加成功')
+            return true
+          }}>
+          <ProFormText name="name" label="角色名称" rules={[{ required: true, message: '请输入角色名' }]} />
+        </ModalForm>
+      </div>
+      <div
+        id="role-list"
+        className="p-4 bg-white rounded-b-20px"
+        style={{ height: 'calc(100% - 1rem*2 - 20px)' }}>
+        {menuRoles.length ? (
+          <DirectoryTree
+            itemHeight={32}
+            height={virtualHeight - 32}
+            defaultSelectedKeys={[menuRoles[0]?.key]}
+            onSelect={(keys, node) => onSelect(keys[0], node.node.roleType)}
+            showIcon={false}
+            treeData={renderTreeNode(menuRoles)}
+          />
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+export default RoleLeftMenu

src/pages/Permission/Role/components/PermTabs/index.tsx

@@ -1,616 +0,0 @@
-import { useState } from 'react'
-import { useRequest } from '@umijs/max'
-import { RoleType } from '../RoleLeftMenu'
-import { Card, Tabs, Checkbox, Button, message, Spin, Affix } from 'antd'
-import { queryRoleDetailByID, setRolePermission } from '@/services/permission'
-import { FrontPermission, BackstagePermission } from '@/enums/access'
-
-import './index.less'
-
-const { TabPane } = Tabs
-
-type PermTabsProps = {
-  currentPermData: {
-    ID: string
-    roleType: RoleType
-  }
-}
-export enum OperationType {
-  FRONT = 'front', // 前台
-  BACKSTAGE = 'backstage' // 后台
-}
-
-const frontPermissionArray = Object.values(FrontPermission)
-const backstagePermissionArray = Object.values(BackstagePermission)
-
-// 过滤权限枚举
-function filterPermission(mode: OperationType, data: string[]): string[] {
-  if (!Array.isArray(data)) {
-    return []
-  }
-  return data.filter(item => {
-    if (mode === OperationType.FRONT) {
-      return frontPermissionArray?.includes(item)
-    } else {
-      return backstagePermissionArray?.includes(item)
-    }
-  })
-}
-
-const PermTabs: React.FC<PermTabsProps> = ({ currentPermData: { ID, roleType } }) => {
-  const [state, setState] = useState({
-    activeTab: OperationType.FRONT, // 默认激活的tab
-    frontPermission: [], // 前台权限
-    backstagePermission: [] // 后台权限
-  })
-
-  const { loading } = useRequest(() => queryRoleDetailByID({ ID }), {
-    refreshDeps: [ID],
-    onSuccess: ({ frontPermission = [], backstagePermission = [] } = {}) => {
-      setState({
-        ...state,
-        frontPermission: filterPermission(state.activeTab, frontPermission),
-        backstagePermission: filterPermission(state.activeTab, backstagePermission)
-      })
-    },
-    onError: e => console.log(e)
-  })
-
-  const { run: trySetRolePermission, loading: submitStauts } = useRequest(
-    (params: API.RolePermissionParams) => setRolePermission(params),
-    {
-      manual: true,
-      onSuccess: () => {
-        message.success('设置成功')
-      }
-    }
-  )
-  const handleFrontOnchange = (checked: boolean, perm: string) => {
-    if (checked) {
-      setState({ ...state, frontPermission: [...state.frontPermission, perm] })
-    } else {
-      setState({ ...state, frontPermission: state.frontPermission.filter(item => item !== perm) })
-    }
-  }
-  const handleBackOnchange = (checked: boolean, perm: string) => {
-    if (checked) {
-      setState({ ...state, backstagePermission: [...state.backstagePermission, perm] })
-    } else {
-      setState({
-        ...state,
-        backstagePermission: state.backstagePermission.filter(item => item !== perm)
-      })
-    }
-  }
-  const handleSubmit = () => {
-    const params = { ID, operation: state.activeTab }
-    if (state.activeTab === OperationType.FRONT) {
-      params.frontPermission = filterPermission(state.activeTab, state.frontPermission)
-      console.log(params.frontPermission)
-    } else if (state.activeTab === OperationType.BACKSTAGE) {
-      params.backstagePermission = filterPermission(state.activeTab, state.backstagePermission)
-    } else {
-      message.error('参数异常，请检查')
-      return
-    }
-    trySetRolePermission(params)
-  }
-
-  return (
-    <div>
-      <Tabs type="card" onChange={tab => setState({ ...state, activeTab: tab })}>
-        <TabPane tab="前台" key={OperationType.FRONT} className="tab-height overflow-y-auto">
-          <Spin spinning={loading}>
-            <div className="shadow-md mb-4">
-              <Card size="small" type="inner" title="待办列表">
-                <div>
-                  {/* <h4>我的项目</h4> */}
-                  <div className="my-2">
-                    <Checkbox onChange={e => handleFrontOnchange(e.target.checked, 'todo')} disabled>
-                      已办待办
-                    </Checkbox>
-                  </div>
-                </div>
-              </Card>
-            </div>
-            <div className="shadow-md mb-4">
-              <Card size="small" type="inner" title="项目列表">
-                <div>
-                  <h4>我的项目</h4>
-                  <div className="my-2">
-                    <Checkbox
-                      onChange={e => handleFrontOnchange(e.target.checked, FrontPermission.VIEW_PROJECT)}
-                      checked={state.frontPermission.includes(FrontPermission.VIEW_PROJECT)}
-                      disabled={roleType === RoleType.SYSTEM}>
-                      查看项目
-                    </Checkbox>
-                    <Checkbox
-                      onChange={e => handleFrontOnchange(e.target.checked, FrontPermission.ADD_PROJECT)}
-                      checked={state.frontPermission.includes(FrontPermission.ADD_PROJECT)}
-                      disabled={roleType === RoleType.SYSTEM}>
-                      新建项目
-                    </Checkbox>
-                    <Checkbox
-                      onChange={e => handleFrontOnchange(e.target.checked, FrontPermission.EDIT_PROJECT)}
-                      checked={state.frontPermission.includes(FrontPermission.EDIT_PROJECT)}
-                      disabled={roleType === RoleType.SYSTEM}>
-                      编辑项目
-                    </Checkbox>
-                    <Checkbox
-                      onChange={e => handleFrontOnchange(e.target.checked, FrontPermission.EXPORT_PROJECT)}
-                      checked={state.frontPermission.includes(FrontPermission.EXPORT_PROJECT)}
-                      disabled={roleType === RoleType.SYSTEM}>
-                      导出项目
-                    </Checkbox>
-                    <Checkbox
-                      onChange={e => handleFrontOnchange(e.target.checked, FrontPermission.DEL_PROJECT)}
-                      checked={state.frontPermission.includes(FrontPermission.DEL_PROJECT)}
-                      disabled={roleType === RoleType.SYSTEM}>
-                      删除项目
-                    </Checkbox>
-                    <Checkbox
-                      onChange={e => handleFrontOnchange(e.target.checked, FrontPermission.REPORT)}
-                      checked={state.frontPermission.includes(FrontPermission.REPORT)}
-                      disabled={roleType === RoleType.SYSTEM}>
-                      项目上报（审批模板）
-                    </Checkbox>
-                    <Checkbox
-                      onChange={e => handleFrontOnchange(e.target.checked, FrontPermission.FREE_REPORT)}
-                      checked={state.frontPermission.includes(FrontPermission.FREE_REPORT)}
-                      disabled={roleType === RoleType.SYSTEM}>
-                      项目上报（自由流程）
-                    </Checkbox>
-                    <Checkbox
-                      onChange={e => handleFrontOnchange(e.target.checked, FrontPermission.VIEW_APPROVAL)}
-                      checked={state.frontPermission.includes(FrontPermission.VIEW_APPROVAL)}
-                      disabled={roleType === RoleType.SYSTEM}>
-                      审批进度
-                    </Checkbox>
-                  </div>
-                </div>
-                <div>
-                  <h4 className="pt-3">我参与的项目</h4>
-                  <div className="my-2">
-                    <Checkbox
-                      disabled={roleType === RoleType.SYSTEM}
-                      checked={state.frontPermission.includes(FrontPermission.VIEW_PARTICIPATING_PROJECT)}
-                      onChange={e =>
-                        handleFrontOnchange(e.target.checked, FrontPermission.VIEW_PARTICIPATING_PROJECT)
-                      }>
-                      查看项目
-                    </Checkbox>
-                    <Checkbox
-                      disabled={roleType === RoleType.SYSTEM}
-                      checked={state.frontPermission.includes(FrontPermission.SAVE_INDEX)}
-                      onChange={e => handleFrontOnchange(e.target.checked, FrontPermission.SAVE_INDEX)}>
-                      指标入库
-                    </Checkbox>
-                    <Checkbox
-                      disabled={roleType === RoleType.SYSTEM}
-                      checked={state.frontPermission.includes(FrontPermission.EXPORT_PARTICIPATING_PROJECT)}
-                      onChange={e =>
-                        handleFrontOnchange(e.target.checked, FrontPermission.EXPORT_PARTICIPATING_PROJECT)
-                      }>
-                      导出项目
-                    </Checkbox>
-                  </div>
-                </div>
-                <div>
-                  <h4 className="pt-3">全部项目</h4>
-                  <div className="my-2">
-                    <Checkbox
-                      onChange={e => handleFrontOnchange(e.target.checked, FrontPermission.VIEW_ALL_PROJECTS)}
-                      checked={state.frontPermission.includes(FrontPermission.VIEW_ALL_PROJECTS)}
-                      disabled={roleType === RoleType.SYSTEM}>
-                      查看项目
-                    </Checkbox>
-                    <Checkbox
-                      disabled={roleType === RoleType.SYSTEM}
-                      checked={state.frontPermission.includes(FrontPermission.SAVE_INDEX_ALL)}
-                      onChange={e => handleFrontOnchange(e.target.checked, FrontPermission.SAVE_INDEX_ALL)}>
-                      指标入库
-                    </Checkbox>
-                    <Checkbox
-                      disabled={roleType === RoleType.SYSTEM}
-                      checked={state.frontPermission.includes(FrontPermission.SET_PROJECTS)}
-                      onChange={e => handleFrontOnchange(e.target.checked, FrontPermission.SET_PROJECTS)}>
-                      项目设置
-                    </Checkbox>
-                  </div>
-                </div>
-                <div>
-                  <h4 className="pt-3">指标库</h4>
-                  <div className="my-2">
-                    <Checkbox onChange={e => handleFrontOnchange(e.target.checked, 'section')} disabled>
-                      区间对数
-                    </Checkbox>
-                  </div>
-                </div>
-              </Card>
-            </div>
-            <div className="shadow-md mb-4">
-              <Card size="small" type="inner" title="个人设置">
-                <div>
-                  <h4>基本设置</h4>
-                  <div className="my-2">
-                    <Checkbox onChange={e => handleFrontOnchange(e.target.checked, 'edit')} disabled>
-                      编辑
-                    </Checkbox>
-                  </div>
-                </div>
-                <div>
-                  <h4 className="pt-3">企事业信息</h4>
-                  <div className="my-2">
-                    <Checkbox onChange={e => handleFrontOnchange(e.target.checked, 'access2')} disabled>
-                      查看
-                    </Checkbox>
-                  </div>
-                </div>
-                <div>
-                  <h4 className="pt-3">安全设置</h4>
-                  <div className="my-2">
-                    <Checkbox onChange={e => handleFrontOnchange(e.target.checked, 'phone')} disabled>
-                      手机绑定
-                    </Checkbox>
-                    <Checkbox onChange={e => handleFrontOnchange(e.target.checked, 'password')} disabled>
-                      密码修改
-                    </Checkbox>
-                  </div>
-                </div>
-              </Card>
-            </div>
-          </Spin>
-        </TabPane>
-        <TabPane tab="后台" key={OperationType.BACKSTAGE} className="tab-height overflow-y-auto">
-          <Spin spinning={loading}>
-            <div className="shadow-md mb-4">
-              <Card size="small" type="inner" title="项目审批设置">
-                <div>
-                  <h4>项目管理</h4>
-                  <div className="my-2">
-                    <Checkbox
-                      onChange={e =>
-                        handleBackOnchange(e.target.checked, BackstagePermission.VIEW_PROJECT_MANAGEMENT)
-                      }
-                      checked={state.backstagePermission.includes(
-                        BackstagePermission.VIEW_PROJECT_MANAGEMENT
-                      )}>
-                      查看项目
-                    </Checkbox>
-                    <Checkbox
-                      onChange={e => handleBackOnchange(e.target.checked, 'addBa1')}
-                      checked={state.backstagePermission.includes('updatePsw')}
-                      disabled>
-                      新建项目
-                    </Checkbox>
-                    <Checkbox
-                      onChange={e => handleBackOnchange(e.target.checked, 'editBa1')}
-                      checked={state.backstagePermission.includes('updatePsw')}
-                      disabled>
-                      编辑项目
-                    </Checkbox>
-                    <Checkbox
-                      onChange={e => handleBackOnchange(e.target.checked, 'bindBa1')}
-                      checked={state.backstagePermission.includes('updatePsw')}
-                      disabled>
-                      绑定角色
-                    </Checkbox>
-                    <Checkbox
-                      onChange={e => handleBackOnchange(e.target.checked, 'deployBa1')}
-                      checked={state.backstagePermission.includes('updatePsw')}
-                      disabled>
-                      流程配置
-                    </Checkbox>
-                  </div>
-                </div>
-                <div>
-                  <h4 className="pt-3">审批角色</h4>
-                  <div className="my-2">
-                    <Checkbox
-                      onChange={e =>
-                        handleBackOnchange(e.target.checked, BackstagePermission.VIEW_APPROVAL_ROLE)
-                      }
-                      checked={state.backstagePermission.includes(BackstagePermission.VIEW_APPROVAL_ROLE)}>
-                      查看角色
-                    </Checkbox>
-                    <Checkbox
-                      onChange={e => handleBackOnchange(e.target.checked, 'addApprovalRole')}
-                      checked={state.backstagePermission.includes('addApprovalRole')}
-                      disabled>
-                      新建角色
-                    </Checkbox>
-                    <Checkbox
-                      onChange={e => handleBackOnchange(e.target.checked, 'editApprovalRole')}
-                      checked={state.backstagePermission.includes('editApprovalRole')}
-                      disabled>
-                      编辑角色
-                    </Checkbox>
-                  </div>
-                </div>
-                <div>
-                  <h4 className="pt-3">审批流程模板</h4>
-                  <div className="my-2">
-                    <Checkbox
-                      onChange={e =>
-                        handleBackOnchange(e.target.checked, BackstagePermission.VIEW_AUDIT_TEMPLATE)
-                      }
-                      checked={state.backstagePermission.includes(BackstagePermission.VIEW_AUDIT_TEMPLATE)}>
-                      查看流程
-                    </Checkbox>
-                    <Checkbox
-                      onChange={e => handleBackOnchange(e.target.checked, 'addBa2')}
-                      checked={state.backstagePermission.includes('updatePsw')}
-                      disabled>
-                      新建流程
-                    </Checkbox>
-                    <Checkbox
-                      onChange={e => handleBackOnchange(e.target.checked, 'editBa2')}
-                      checked={state.backstagePermission.includes('updatePsw')}
-                      disabled>
-                      编辑流程
-                    </Checkbox>
-                  </div>
-                </div>
-              </Card>
-            </div>
-            <div className="shadow-md mb-4">
-              <Card size="small" type="inner" title="企事业单位">
-                <div>
-                  <h4>单位管理</h4>
-                  <div className="my-2">
-                    <Checkbox
-                      onChange={e =>
-                        handleBackOnchange(e.target.checked, BackstagePermission.VIEW_INSTITUTION)
-                      }
-                      checked={state.backstagePermission.includes(BackstagePermission.VIEW_INSTITUTION)}>
-                      查看单位
-                    </Checkbox>
-                    <Checkbox
-                      onChange={e =>
-                        handleBackOnchange(e.target.checked, BackstagePermission.ADD_INSTITUTION)
-                      }
-                      checked={state.backstagePermission.includes(BackstagePermission.ADD_INSTITUTION)}>
-                      新建单位
-                    </Checkbox>
-                    <Checkbox
-                      onChange={e =>
-                        handleBackOnchange(e.target.checked, BackstagePermission.EDIT_INSTITUTION)
-                      }
-                      checked={state.backstagePermission.includes(BackstagePermission.EDIT_INSTITUTION)}>
-                      编辑单位
-                    </Checkbox>
-                    <Checkbox
-                      onChange={e =>
-                        handleBackOnchange(e.target.checked, BackstagePermission.VIEW_STAFF_WITH_IN)
-                      }
-                      checked={state.backstagePermission.includes(BackstagePermission.VIEW_STAFF_WITH_IN)}>
-                      人员管理
-                    </Checkbox>
-                    <Checkbox
-                      onChange={e =>
-                        handleBackOnchange(e.target.checked, BackstagePermission.VIEW_ORGANIZATION)
-                      }
-                      checked={state.backstagePermission.includes(BackstagePermission.VIEW_ORGANIZATION)}>
-                      组织管理
-                    </Checkbox>
-                    <Checkbox
-                      onChange={e =>
-                        handleBackOnchange(e.target.checked, BackstagePermission.VIEW_INSTITUTION_SETTING)
-                      }
-                      checked={state.backstagePermission.includes(
-                        BackstagePermission.VIEW_INSTITUTION_SETTING
-                      )}>
-                      单位设置
-                    </Checkbox>
-                  </div>
-                </div>
-                <div>
-                  <h4 className="pt-3">人员管理</h4>
-                  <div className="my-2">
-                    <Checkbox
-                      onChange={e =>
-                        handleBackOnchange(e.target.checked, BackstagePermission.VIEW_INSTITUTION_STAFF)
-                      }
-                      checked={state.backstagePermission.includes(BackstagePermission.VIEW_STAFF_WITH_OUT)}>
-                      查看人员
-                    </Checkbox>
-                    <Checkbox
-                      onChange={e =>
-                        handleBackOnchange(e.target.checked, BackstagePermission.ADD_INSTITUTION_STAFF)
-                      }
-                      checked={state.backstagePermission.includes(BackstagePermission.ADD_INSTITUTION_STAFF)}>
-                      新增人员
-                    </Checkbox>
-                    <Checkbox
-                      onChange={e =>
-                        handleBackOnchange(e.target.checked, BackstagePermission.EDIT_INSTITUTION_STAFF)
-                      }
-                      checked={state.backstagePermission.includes(
-                        BackstagePermission.EDIT_INSTITUTION_STAFF
-                      )}>
-                      编辑人员
-                    </Checkbox>
-                  </div>
-                </div>
-                <div>
-                  <h4 className="pt-3">限制登录</h4>
-                  <div className="my-2">
-                    <Checkbox
-                      onChange={e =>
-                        handleBackOnchange(e.target.checked, BackstagePermission.VIEW_ILLEGAL_USER)
-                      }
-                      checked={state.backstagePermission.includes(BackstagePermission.VIEW_ILLEGAL_USER)}>
-                      查看人员
-                    </Checkbox>
-                    <Checkbox
-                      onChange={e =>
-                        handleBackOnchange(e.target.checked, BackstagePermission.EDIT_ILLEGAL_USER)
-                      }
-                      checked={state.backstagePermission.includes(BackstagePermission.EDIT_ILLEGAL_USER)}>
-                      编辑人员
-                    </Checkbox>
-                  </div>
-                </div>
-              </Card>
-            </div>
-            <div className="shadow-md mb-4">
-              <Card size="small" type="inner" title="业务审批设置">
-                <div>
-                  <h4 className="pt-3">业务编号配置</h4>
-                  <div className="my-2">
-                    <Checkbox
-                      onChange={e => handleBackOnchange(e.target.checked, BackstagePermission.VIEW_RULE_CODE)}
-                      checked={state.backstagePermission.includes(BackstagePermission.VIEW_RULE_CODE)}>
-                      查看编号规则
-                    </Checkbox>
-                  </div>
-                </div>
-                {/* <div>
-                  <h4>业务管理</h4>
-                  <div className="my-2">
-                    <Checkbox
-                      onChange={e => handleBackOnchange(e.target.checked, 'viewBusiness')}
-                      checked={state.backstagePermission.includes('viewBusiness')}>
-                      查看信息
-                    </Checkbox>
-                  </div>
-                </div> */}
-                <div>
-                  <h4 className="pt-3">流程用户配置</h4>
-                  <div className="my-2">
-                    <Checkbox
-                      onChange={e =>
-                        handleBackOnchange(e.target.checked, BackstagePermission.VIEW_PROCESS_USER)
-                      }
-                      checked={state.backstagePermission.includes(BackstagePermission.VIEW_PROCESS_USER)}>
-                      查看流程用户
-                    </Checkbox>
-                  </div>
-                </div>
-                <div>
-                  <h4 className="pt-3">资料清单配置</h4>
-                  <div className="my-2">
-                    <Checkbox
-                      onChange={e =>
-                        handleBackOnchange(e.target.checked, BackstagePermission.VIEW_INVENTORY_TEMPLATE)
-                      }
-                      checked={state.backstagePermission.includes(
-                        BackstagePermission.VIEW_INVENTORY_TEMPLATE
-                      )}>
-                      查看资料清单模板
-                    </Checkbox>
-                  </div>
-                </div>
-              </Card>
-            </div>
-            <div className="shadow-md mb-4">
-              <Card size="small" type="inner" title="表单设置">
-                <div>
-                  <h4>基础数据设置</h4>
-                  <div className="my-2">
-                    <Checkbox
-                      onChange={e =>
-                        handleBackOnchange(e.target.checked, BackstagePermission.VIEW_BASE_SCHEMA)
-                      }
-                      checked={state.backstagePermission.includes(BackstagePermission.VIEW_BASE_SCHEMA)}>
-                      查看信息
-                    </Checkbox>
-                    <Checkbox
-                      onChange={e =>
-                        handleBackOnchange(e.target.checked, BackstagePermission.EDIT_BASE_SCHEMA)
-                      }
-                      checked={state.backstagePermission.includes(BackstagePermission.EDIT_BASE_SCHEMA)}>
-                      编辑信息
-                    </Checkbox>
-                  </div>
-                </div>
-                <div>
-                  <h4 className="pt-3">数据源设置</h4>
-                  <div className="my-2">
-                    <Checkbox
-                      onChange={e => handleBackOnchange(e.target.checked, BackstagePermission.VIEW_DS_LIST)}
-                      checked={state.backstagePermission.includes(BackstagePermission.VIEW_DS_LIST)}>
-                      查看信息
-                    </Checkbox>
-                    <Checkbox
-                      onChange={e => handleBackOnchange(e.target.checked, BackstagePermission.EDIT_DS_LIST)}
-                      checked={state.backstagePermission.includes(BackstagePermission.EDIT_DS_LIST)}
-                      disabled>
-                      编辑信息
-                    </Checkbox>
-                  </div>
-                </div>
-                <div>
-                  <h4 className="pt-3">预算业务表单设置</h4>
-                  <div className="my-2">
-                    <Checkbox
-                      onChange={e =>
-                        handleBackOnchange(e.target.checked, BackstagePermission.VIEW_BUDGET_SCHEMA)
-                      }
-                      checked={state.backstagePermission.includes(BackstagePermission.VIEW_BUDGET_SCHEMA)}>
-                      查看信息
-                    </Checkbox>
-                    <Checkbox
-                      onChange={e =>
-                        handleBackOnchange(e.target.checked, BackstagePermission.EDIT_BUDGET_SCHEMA)
-                      }
-                      checked={state.backstagePermission.includes(BackstagePermission.EDIT_BUDGET_SCHEMA)}>
-                      编辑信息
-                    </Checkbox>
-                  </div>
-                </div>
-              </Card>
-            </div>
-            <div className="shadow-md mb-4">
-              <Card size="small" type="inner" title="权限设置">
-                <div>
-                  <h4>功能角色设置</h4>
-                  <div className="my-2">
-                    <Checkbox
-                      onChange={e =>
-                        handleBackOnchange(e.target.checked, BackstagePermission.VIEW_PERMISSION_ROLE)
-                      }
-                      checked={state.backstagePermission.includes(BackstagePermission.VIEW_PERMISSION_ROLE)}>
-                      查看信息
-                    </Checkbox>
-                  </div>
-                </div>
-              </Card>
-            </div>
-            <div className="shadow-md mb-4">
-              <Card size="small" type="inner" title="系统管理">
-                <div>
-                  <h4>管理员设置</h4>
-                  <div className="my-2">
-                    <Checkbox
-                      onChange={e =>
-                        handleBackOnchange(e.target.checked, BackstagePermission.VIEW_SYSTEM_ADMIN_SETTING)
-                      }
-                      checked={state.backstagePermission.includes(
-                        BackstagePermission.VIEW_SYSTEM_ADMIN_SETTING
-                      )}>
-                      查看信息
-                    </Checkbox>
-                    <Checkbox
-                      onChange={e => handleBackOnchange(e.target.checked, 'editBa9')}
-                      checked={state.backstagePermission.includes('updatePsw')}
-                      disabled>
-                      编辑信息
-                    </Checkbox>
-                  </div>
-                </div>
-              </Card>
-            </div>
-          </Spin>
-        </TabPane>
-      </Tabs>
-      <Affix offsetBottom={10}>
-        <Button type="primary" onClick={handleSubmit} loading={submitStauts}>
-          提交
-        </Button>
-      </Affix>
-    </div>
-  )
-}
-
-export default PermTabs

src/pages/Schema/Option/components/LeftMenu/index.tsx

@@ -6,7 +6,7 @@ import { Button, Input, message, Popconfirm, Tree } from 'antd'
 import type { DirectoryTreeProps } from 'antd/lib/tree'
 import { addDataSource, delDataSourceID, updateDataSourceItem } from '@/services/api/schema'
 import { useRef, useState } from 'react'
-import '@/pages/Permission/Role/components/RoleLeftMenu/index.less'
+import '@/pages/Permission/FrontRole/components/RoleLeftMenu/index.less'
 
 const { DirectoryTree } = Tree