feat: 超级管理员、普通用户前后台角色权限限制

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

@@ -1,25 +1,28 @@
 import { Card, Tabs, Checkbox, Affix, Button, message } from 'antd'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import './index.less'
 import { setRolePermission } from '@/services/permission'
 import { useRequest } from 'umi'
+import { RoleType } from '../RoleLeftMenu'
 const { TabPane } = Tabs
 
-const PermTabs = ({
-  passPermissionValue: {
-    currentRoleID: ID,
-    roleType = 'system',
-    activeKey,
-    frontPermission: rolesPermission
+type PermTabsProps = {
+  currentPermData: {
+    ID: string
+    roleType: RoleType
+    frontPermission: string[]
+    backstagePermission: string[]
   }
+}
+const PermTabs: React.FC<PermTabsProps> = ({
+  currentPermData: { ID, roleType, frontPermission = [], backstagePermission = [] }
 }) => {
-  console.log(rolesPermission)
+  console.log(roleType)
 
   const [state, setState] = useState({
-    frontPermission: [], // 前台权限
-    backstagePermission: [] // 后台权限
+    frontPermission: frontPermission, // 前台权限
+    backstagePermission: backstagePermission // 后台权限
   })
-  console.log(state.frontPermission)
 
   const { run: trySetRolePermission } = useRequest(
     (params: API.SetRolePermissionParams) => setRolePermission(params),
@@ -54,14 +57,7 @@ const PermTabs = ({
       backstagePermission: state.backstagePermission
     })
   }
-  useEffect(() => {
-    if (activeKey === '2') {
-      setState({
-        ...state,
-        frontPermission: [].concat(rolesPermission)
-      })
-    }
-  }, [activeKey])
+
   return (
     <div>
       <Tabs type="card">
@@ -73,8 +69,7 @@ const PermTabs = ({
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleFrontOnchange(e.target.checked, 'todo')}
-                    checked={roleType === 'system' ? false : true}
-                    disabled={roleType === 'system' && roleType === 'systemNormal' ? false : true}>
+                    disabled={roleType === RoleType.SYSTEM}>
                     已办待办
                   </Checkbox>
                 </div>
@@ -88,20 +83,18 @@ const PermTabs = ({
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleFrontOnchange(e.target.checked, 'access')}
-                    checked={roleType === 'system' ? false : true}
-                    disabled={roleType === 'system' && roleType === 'systemNormal' ? false : true}>
+                    disabled={roleType === RoleType.SYSTEM}>
                     查看项目
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleFrontOnchange(e.target.checked, 'add')}
-                    checked={roleType === 'system' ? false : true}
-                    disabled={roleType === 'system' && roleType === 'systemNormal' ? false : true}>
+                    disabled={roleType === RoleType.SYSTEM}>
                     新建项目
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleFrontOnchange(e.target.checked, 'report')}
                     checked={state.frontPermission.includes('report')}
-                    disabled={roleType === 'system' ? true : false}>
+                    disabled={roleType === RoleType.SYSTEM}>
                     项目上报
                   </Checkbox>
                 </div>
@@ -111,8 +104,7 @@ const PermTabs = ({
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleFrontOnchange(e.target.checked, 'access1')}
-                    checked={roleType === 'system' ? false : true}
-                    disabled={roleType === 'system' && roleType === 'systemNormal' ? false : true}>
+                    disabled={roleType === RoleType.SYSTEM}>
                     查看项目
                   </Checkbox>
                 </div>
@@ -123,7 +115,7 @@ const PermTabs = ({
                   <Checkbox
                     onChange={e => handleFrontOnchange(e.target.checked, 'viewAllProjects')}
                     checked={state.frontPermission.includes('viewAllProjects')}
-                    disabled={roleType === 'system' ? true : false}>
+                    disabled={roleType === RoleType.SYSTEM ? true : false}>
                     查看项目
                   </Checkbox>
                 </div>
@@ -133,8 +125,7 @@ const PermTabs = ({
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleFrontOnchange(e.target.checked, 'section')}
-                    checked={roleType === 'system' ? false : true}
-                    disabled={roleType === 'system' && roleType === 'systemNormal' ? false : true}>
+                    disabled={roleType === RoleType.SYSTEM}>
                     区间对数
                   </Checkbox>
                 </div>
@@ -148,8 +139,7 @@ const PermTabs = ({
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleFrontOnchange(e.target.checked, 'edit')}
-                    checked={roleType === 'system' ? false : true}
-                    disabled={roleType === 'system' && roleType === 'systemNormal' ? false : true}>
+                    disabled={roleType === RoleType.SYSTEM}>
                     编辑
                   </Checkbox>
                 </div>
@@ -159,8 +149,7 @@ const PermTabs = ({
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleFrontOnchange(e.target.checked, 'access2')}
-                    checked={roleType === 'system' ? false : true}
-                    disabled={roleType === 'system' && roleType === 'systemNormal' ? false : true}>
+                    disabled={roleType === RoleType.SYSTEM}>
                     查看
                   </Checkbox>
                 </div>
@@ -170,14 +159,12 @@ const PermTabs = ({
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleFrontOnchange(e.target.checked, 'phone')}
-                    checked={roleType === 'system' ? false : true}
-                    disabled={roleType === 'system' && roleType === 'systemNormal' ? false : true}>
+                    disabled={roleType === RoleType.SYSTEM}>
                     手机绑定
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleFrontOnchange(e.target.checked, 'password')}
-                    checked={roleType === 'system' ? false : true}
-                    disabled={roleType === 'system' && roleType === 'systemNormal' ? false : true}>
+                    disabled={roleType === RoleType.SYSTEM}>
                     密码修改
                   </Checkbox>
                 </div>
@@ -193,32 +180,32 @@ const PermTabs = ({
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'password')}
-                    checked={roleType === 'system' ? true : false}
-                    disabled={true}>
+                    checked={state.backstagePermission.includes('updatePsw')}
+                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
                     密码修改
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'addBa1')}
-                    checked={roleType === 'system' ? true : false}
-                    disabled={true}>
+                    checked={state.backstagePermission.includes('updatePsw')}
+                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
                     新建项目
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'editBa1')}
-                    checked={roleType === 'system' ? true : false}
-                    disabled={true}>
+                    checked={state.backstagePermission.includes('updatePsw')}
+                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
                     编辑项目
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'bindBa1')}
-                    checked={roleType === 'system' ? true : false}
-                    disabled={true}>
+                    checked={state.backstagePermission.includes('updatePsw')}
+                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
                     绑定角色
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'deployBa1')}
-                    checked={roleType === 'system' ? true : false}
-                    disabled={true}>
+                    checked={state.backstagePermission.includes('updatePsw')}
+                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
                     流程配置
                   </Checkbox>
                 </div>
@@ -228,20 +215,20 @@ const PermTabs = ({
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'accessBa2')}
-                    checked={roleType === 'system' ? true : false}
-                    disabled={true}>
+                    checked={state.backstagePermission.includes('updatePsw')}
+                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
                     查看流程
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'addBa2')}
-                    checked={roleType === 'system' ? true : false}
-                    disabled={true}>
+                    checked={state.backstagePermission.includes('updatePsw')}
+                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
                     新建流程
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'editBa2')}
-                    checked={roleType === 'system' ? true : false}
-                    disabled={true}>
+                    checked={state.backstagePermission.includes('updatePsw')}
+                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
                     编辑流程
                   </Checkbox>
                 </div>
@@ -251,20 +238,20 @@ const PermTabs = ({
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'accessBa3')}
-                    checked={roleType === 'system' ? true : false}
-                    disabled={true}>
+                    checked={state.backstagePermission.includes('updatePsw')}
+                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
                     查看创建人
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'addBa3')}
-                    checked={roleType === 'system' ? true : false}
-                    disabled={true}>
+                    checked={state.backstagePermission.includes('updatePsw')}
+                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
                     新建创建人
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'deleteBa3')}
-                    checked={roleType === 'system' ? true : false}
-                    disabled={true}>
+                    checked={state.backstagePermission.includes('updatePsw')}
+                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
                     删除创建人
                   </Checkbox>
                 </div>
@@ -278,32 +265,32 @@ const PermTabs = ({
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'accessBa4')}
-                    checked={roleType === 'system' ? true : false}
-                    disabled={true}>
+                    checked={state.backstagePermission.includes('updatePsw')}
+                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
                     查看单位
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'addBa4')}
-                    checked={roleType === 'system' ? true : false}
-                    disabled={true}>
+                    checked={state.backstagePermission.includes('updatePsw')}
+                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
                     新建单位
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'staff')}
-                    checked={roleType === 'system' ? true : false}
-                    disabled={true}>
+                    checked={state.backstagePermission.includes('updatePsw')}
+                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
                     人员管理
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'organizational')}
-                    checked={roleType === 'system' ? true : false}
-                    disabled={true}>
+                    checked={state.backstagePermission.includes('updatePsw')}
+                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
                     组织管理
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'deploy')}
-                    checked={roleType === 'system' ? true : false}
-                    disabled={true}>
+                    checked={state.backstagePermission.includes('updatePsw')}
+                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
                     单位设置
                   </Checkbox>
                 </div>
@@ -313,14 +300,14 @@ const PermTabs = ({
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'accessBa5')}
-                    checked={roleType === 'system' ? true : false}
-                    disabled={true}>
+                    checked={state.backstagePermission.includes('updatePsw')}
+                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
                     查看人员
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'editBa5')}
-                    checked={roleType === 'system' ? true : false}
-                    disabled={true}>
+                    checked={state.backstagePermission.includes('updatePsw')}
+                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
                     编辑人员
                   </Checkbox>
                 </div>
@@ -334,14 +321,14 @@ const PermTabs = ({
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'accessBa6')}
-                    checked={roleType === 'system' ? true : false}
-                    disabled={true}>
+                    checked={state.backstagePermission.includes('updatePsw')}
+                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
                     查看信息
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'editBa6')}
-                    checked={roleType === 'system' ? true : false}
-                    disabled={true}>
+                    checked={state.backstagePermission.includes('updatePsw')}
+                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
                     编辑信息
                   </Checkbox>
                 </div>
@@ -351,14 +338,14 @@ const PermTabs = ({
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'accessBa7')}
-                    checked={roleType === 'system' ? true : false}
-                    disabled={true}>
+                    checked={state.backstagePermission.includes('updatePsw')}
+                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
                     查看信息
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'editBa7')}
-                    checked={roleType === 'system' ? true : false}
-                    disabled={true}>
+                    checked={state.backstagePermission.includes('updatePsw')}
+                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
                     编辑信息
                   </Checkbox>
                 </div>
@@ -368,14 +355,14 @@ const PermTabs = ({
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'accessBa8')}
-                    checked={roleType === 'system' ? true : false}
-                    disabled={true}>
+                    checked={state.backstagePermission.includes('updatePsw')}
+                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
                     查看信息
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'editBa8')}
-                    checked={roleType === 'system' ? true : false}
-                    disabled={true}>
+                    checked={state.backstagePermission.includes('updatePsw')}
+                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
                     编辑信息
                   </Checkbox>
                 </div>
@@ -389,14 +376,14 @@ const PermTabs = ({
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'accessBa9')}
-                    checked={roleType === 'system' ? true : false}
-                    disabled={true}>
+                    checked={state.backstagePermission.includes('updatePsw')}
+                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
                     查看信息
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'editBa9')}
-                    checked={roleType === 'system' ? true : false}
-                    disabled={true}>
+                    checked={state.backstagePermission.includes('updatePsw')}
+                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
                     编辑信息
                   </Checkbox>
                 </div>

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

@@ -160,7 +160,12 @@ const RoleLeftMenu: React.FC<RoleLeftMenuProps> = ({
             <DirectoryTree
               defaultSelectedKeys={[menuRoles[0]?.key]}
               onSelect={(keys, node) =>
-                onSelect(keys[0], node.node.roleType, node.node.frontPermission)
+                onSelect(
+                  keys[0],
+                  node.node.roleType,
+                  node.node.frontPermission,
+                  node.node.backstagePermission
+                )
               }
               // onSelect={(keys, node) => console.log(keys)}
               showIcon={false}

src/pages/Permission/Role/index.tsx

@@ -15,11 +15,11 @@ const Role = () => {
     currentRoleID: null,
     roleType: '',
     frontPermission: [],
-    roleStaff: [],
-    activeKey: ''
+    backstagePermission: [],
+    roleStaff: []
   })
 
-  const [menuRoles, setMenuRoles] = useState<API.MenuRoleItem[]>([])
+  const [menuRoles, setMenuRoles] = useState([])
   const { run: tryGetRoleStaffList, loading: staffListLoading } = useRequest(
     (roleID: string) => fetchRoleStaffListByRoleId({ roleID }),
     {
@@ -40,9 +40,14 @@ const Role = () => {
     }
   )
 
-  const onSelect = (currentRoleID: string, roleType: string, frontPermission: []) => {
+  const onSelect = (
+    currentRoleID: string,
+    roleType: string,
+    frontPermission: string[],
+    backstagePermission: string[]
+  ) => {
     if (state.currentRoleID === currentRoleID) return
-    setState({ ...state, currentRoleID, roleType, frontPermission })
+    setState({ ...state, currentRoleID, roleType, frontPermission, backstagePermission })
     tryGetRoleStaffList(currentRoleID)
   }
 
@@ -53,10 +58,18 @@ const Role = () => {
           key: item.ID,
           title: item.name,
           roleType: item.roleType,
-          frontPermission: item?.frontPermission
+          frontPermission: item?.frontPermission || [],
+          backstagePermission: item?.backstagePermission || []
         }))
       )
-      result?.length && onSelect?.(state.currentRoleID ?? result[0]?.ID)
+
+      result?.length &&
+        onSelect?.(
+          state.currentRoleID ?? result[0]?.ID,
+          result[0]?.roleType,
+          result[0]?.frontPermission || [],
+          result[0]?.backstagePermission || []
+        )
     }
   })
 
@@ -135,10 +148,12 @@ const Role = () => {
             </TabPane>
             <TabPane tab="功能权限" key="2">
               <PermTabs
-                passPermissionValue={state}
-                // ID={state.currentRoleID}
-                // roleType={state.roleType}
-                // activeKey={state.activeKey}
+                currentPermData={{
+                  ID: state.currentRoleID,
+                  roleType: state.roleType,
+                  frontPermission: state.frontPermission,
+                  backstagePermission: state.backstagePermission
+                }}
               />
             </TabPane>
           </Tabs>