feat: 角色权限显示的限制

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

@@ -1,11 +1,11 @@
-import { Card, Tabs, Checkbox, Affix, Button } from 'antd'
-import React, { useState } from 'react'
+import { Card, Tabs, Checkbox, Affix, Button, message } from 'antd'
+import React, { useEffect, useState } from 'react'
 import './index.less'
 import { setRolePermission } from '@/services/permission'
 import { useRequest } from 'umi'
 const { TabPane } = Tabs
 
-const SetPermission = ({ ID, roleType = 'system' }) => {
+const SetPermission = ({ ID, roleType = 'system', menuRoles }) => {
   const [state, setState] = useState({
     frontPermission: [], // 前台权限
     backstagePermission: [] // 后台权限
@@ -43,6 +43,7 @@ const SetPermission = ({ ID, roleType = 'system' }) => {
       backstagePermission: state.backstagePermission
     })
   }
+  useEffect(() => {}, [])
   return (
     <div>
       <Tabs type="card">
@@ -54,8 +55,8 @@ const SetPermission = ({ ID, roleType = 'system' }) => {
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleFrontOnchange(e.target.checked, 'todo')}
-                    checked={state.frontPermission.includes('todo')}
-                    disabled={roleType !== 'system' ? false : true}>
+                    checked={roleType === 'system' ? false : true}
+                    disabled={roleType === 'system' && roleType === 'systemNormal' ? false : true}>
                     已办待办
                   </Checkbox>
                 </div>
@@ -69,20 +70,20 @@ const SetPermission = ({ ID, roleType = 'system' }) => {
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleFrontOnchange(e.target.checked, 'access')}
-                    checked={state.frontPermission.includes('access')}
-                    disabled={roleType !== 'system' ? false : true}>
+                    checked={roleType === 'system' ? false : true}
+                    disabled={roleType === 'system' && roleType === 'systemNormal' ? false : true}>
                     查看项目
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleFrontOnchange(e.target.checked, 'add')}
-                    checked={state.frontPermission.includes('add')}
-                    disabled={roleType !== 'system' ? false : true}>
+                    checked={roleType === 'system' ? false : true}
+                    disabled={roleType === 'system' && roleType === 'systemNormal' ? false : true}>
                     新建项目
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleFrontOnchange(e.target.checked, 'report')}
                     checked={state.frontPermission.includes('report')}
-                    disabled={roleType !== 'system' ? false : true}>
+                    disabled={roleType === 'system' ? true : false}>
                     项目上报
                   </Checkbox>
                 </div>
@@ -92,8 +93,8 @@ const SetPermission = ({ ID, roleType = 'system' }) => {
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleFrontOnchange(e.target.checked, 'access1')}
-                    checked={state.frontPermission.includes('access1')}
-                    disabled={roleType !== 'system' ? false : true}>
+                    checked={roleType === 'system' ? false : true}
+                    disabled={roleType === 'system' && roleType === 'systemNormal' ? false : true}>
                     查看项目
                   </Checkbox>
                 </div>
@@ -104,7 +105,7 @@ const SetPermission = ({ ID, roleType = 'system' }) => {
                   <Checkbox
                     onChange={e => handleFrontOnchange(e.target.checked, 'viewAllProjects')}
                     checked={state.frontPermission.includes('viewAllProjects')}
-                    disabled={roleType !== 'system' ? false : true}>
+                    disabled={roleType === 'system' ? true : false}>
                     查看项目
                   </Checkbox>
                 </div>
@@ -114,8 +115,8 @@ const SetPermission = ({ ID, roleType = 'system' }) => {
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleFrontOnchange(e.target.checked, 'section')}
-                    checked={state.frontPermission.includes('section')}
-                    disabled={roleType !== 'system' ? false : true}>
+                    checked={roleType === 'system' ? false : true}
+                    disabled={roleType === 'system' && roleType === 'systemNormal' ? false : true}>
                     区间对数
                   </Checkbox>
                 </div>
@@ -129,8 +130,8 @@ const SetPermission = ({ ID, roleType = 'system' }) => {
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleFrontOnchange(e.target.checked, 'edit')}
-                    checked={state.frontPermission.includes('edit')}
-                    disabled={roleType !== 'system' ? false : true}>
+                    checked={roleType === 'system' ? false : true}
+                    disabled={roleType === 'system' && roleType === 'systemNormal' ? false : true}>
                     编辑
                   </Checkbox>
                 </div>
@@ -140,8 +141,8 @@ const SetPermission = ({ ID, roleType = 'system' }) => {
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleFrontOnchange(e.target.checked, 'access2')}
-                    checked={state.frontPermission.includes('access2')}
-                    disabled={roleType !== 'system' ? false : true}>
+                    checked={roleType === 'system' ? false : true}
+                    disabled={roleType === 'system' && roleType === 'systemNormal' ? false : true}>
                     查看
                   </Checkbox>
                 </div>
@@ -151,14 +152,14 @@ const SetPermission = ({ ID, roleType = 'system' }) => {
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleFrontOnchange(e.target.checked, 'phone')}
-                    checked={state.frontPermission.includes('phone')}
-                    disabled={roleType !== 'system' ? false : true}>
+                    checked={roleType === 'system' ? false : true}
+                    disabled={roleType === 'system' && roleType === 'systemNormal' ? false : true}>
                     手机绑定
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleFrontOnchange(e.target.checked, 'password')}
-                    checked={state.frontPermission.includes('password')}
-                    disabled={roleType !== 'system' ? false : true}>
+                    checked={roleType === 'system' ? false : true}
+                    disabled={roleType === 'system' && roleType === 'systemNormal' ? false : true}>
                     密码修改
                   </Checkbox>
                 </div>
@@ -173,32 +174,32 @@ const SetPermission = ({ ID, roleType = 'system' }) => {
                 <h4>项目管理</h4>
                 <div className="my-2">
                   <Checkbox
-                    onChange={e => handleBackOnchange(e.target.checked, 'accessBa1')}
-                    checked={state.frontPermission.includes('accessBa1')}
+                    onChange={e => handleBackOnchange(e.target.checked, 'password')}
+                    checked={roleType === 'system' ? true : false}
                     disabled={true}>
-                    查看项目
+                    密码修改
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'addBa1')}
-                    checked={state.frontPermission.includes('addBa1')}
+                    checked={roleType === 'system' ? true : false}
                     disabled={true}>
                     新建项目
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'editBa1')}
-                    checked={state.frontPermission.includes('editBa1')}
+                    checked={roleType === 'system' ? true : false}
                     disabled={true}>
                     编辑项目
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'bindBa1')}
-                    checked={state.frontPermission.includes('bindBa1')}
+                    checked={roleType === 'system' ? true : false}
                     disabled={true}>
                     绑定角色
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'deployBa1')}
-                    checked={state.frontPermission.includes('deployBa1')}
+                    checked={roleType === 'system' ? true : false}
                     disabled={true}>
                     流程配置
                   </Checkbox>
@@ -209,19 +210,19 @@ const SetPermission = ({ ID, roleType = 'system' }) => {
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'accessBa2')}
-                    checked={state.frontPermission.includes('accessBa2')}
+                    checked={roleType === 'system' ? true : false}
                     disabled={true}>
                     查看流程
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'addBa2')}
-                    checked={state.frontPermission.includes('addBa2')}
+                    checked={roleType === 'system' ? true : false}
                     disabled={true}>
                     新建流程
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'editBa2')}
-                    checked={state.frontPermission.includes('editBa2')}
+                    checked={roleType === 'system' ? true : false}
                     disabled={true}>
                     编辑流程
                   </Checkbox>
@@ -232,19 +233,19 @@ const SetPermission = ({ ID, roleType = 'system' }) => {
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'accessBa3')}
-                    checked={state.frontPermission.includes('accessBa3')}
+                    checked={roleType === 'system' ? true : false}
                     disabled={true}>
                     查看创建人
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'addBa3')}
-                    checked={state.frontPermission.includes('addBa3')}
+                    checked={roleType === 'system' ? true : false}
                     disabled={true}>
                     新建创建人
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'deleteBa3')}
-                    checked={state.frontPermission.includes('deleteBa3')}
+                    checked={roleType === 'system' ? true : false}
                     disabled={true}>
                     删除创建人
                   </Checkbox>
@@ -259,31 +260,31 @@ const SetPermission = ({ ID, roleType = 'system' }) => {
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'accessBa4')}
-                    checked={state.frontPermission.includes('accessBa4')}
+                    checked={roleType === 'system' ? true : false}
                     disabled={true}>
                     查看单位
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'addBa4')}
-                    checked={state.frontPermission.includes('addBa4')}
+                    checked={roleType === 'system' ? true : false}
                     disabled={true}>
                     新建单位
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'staff')}
-                    checked={state.frontPermission.includes('staff')}
+                    checked={roleType === 'system' ? true : false}
                     disabled={true}>
                     人员管理
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'organizational')}
-                    checked={state.frontPermission.includes('organizational')}
+                    checked={roleType === 'system' ? true : false}
                     disabled={true}>
                     组织管理
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'deploy')}
-                    checked={state.frontPermission.includes('deploy')}
+                    checked={roleType === 'system' ? true : false}
                     disabled={true}>
                     单位设置
                   </Checkbox>
@@ -294,13 +295,13 @@ const SetPermission = ({ ID, roleType = 'system' }) => {
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'accessBa5')}
-                    checked={state.frontPermission.includes('accessBa5')}
+                    checked={roleType === 'system' ? true : false}
                     disabled={true}>
                     查看人员
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'editBa5')}
-                    checked={state.frontPermission.includes('editBa5')}
+                    checked={roleType === 'system' ? true : false}
                     disabled={true}>
                     编辑人员
                   </Checkbox>
@@ -315,13 +316,13 @@ const SetPermission = ({ ID, roleType = 'system' }) => {
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'accessBa6')}
-                    checked={state.frontPermission.includes('accessBa6')}
+                    checked={roleType === 'system' ? true : false}
                     disabled={true}>
                     查看信息
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'editBa6')}
-                    checked={state.frontPermission.includes('editBa6')}
+                    checked={roleType === 'system' ? true : false}
                     disabled={true}>
                     编辑信息
                   </Checkbox>
@@ -332,13 +333,13 @@ const SetPermission = ({ ID, roleType = 'system' }) => {
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'accessBa7')}
-                    checked={state.frontPermission.includes('accessBa7')}
+                    checked={roleType === 'system' ? true : false}
                     disabled={true}>
                     查看信息
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'editBa7')}
-                    checked={state.frontPermission.includes('editBa7')}
+                    checked={roleType === 'system' ? true : false}
                     disabled={true}>
                     编辑信息
                   </Checkbox>
@@ -349,13 +350,13 @@ const SetPermission = ({ ID, roleType = 'system' }) => {
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'accessBa8')}
-                    checked={state.frontPermission.includes('accessBa8')}
+                    checked={roleType === 'system' ? true : false}
                     disabled={true}>
                     查看信息
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'editBa8')}
-                    checked={state.frontPermission.includes('editBa8')}
+                    checked={roleType === 'system' ? true : false}
                     disabled={true}>
                     编辑信息
                   </Checkbox>
@@ -370,13 +371,13 @@ const SetPermission = ({ ID, roleType = 'system' }) => {
                 <div className="my-2">
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'accessBa9')}
-                    checked={state.frontPermission.includes('accessBa9')}
+                    checked={roleType === 'system' ? true : false}
                     disabled={true}>
                     查看信息
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'editBa9')}
-                    checked={state.frontPermission.includes('editBa9')}
+                    checked={roleType === 'system' ? true : false}
                     disabled={true}>
                     编辑信息
                   </Checkbox>

src/pages/Permission/Role/index.tsx

@@ -123,7 +123,11 @@ const Role = () => {
                 />
               </TabPane>
               <TabPane tab="功能权限" key="2">
-                <SetPermission ID={state.currentRoleID} roleType={state.roleType} />
+                <SetPermission
+                  ID={state.currentRoleID}
+                  roleType={state.roleType}
+                  menuRoles={menuRoles}
+                />
               </TabPane>
             </Tabs>
           </div>