feat: 角色权限管理

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

@@ -1,13 +1,14 @@
 import { Card, Tabs, Checkbox, Affix, Button } 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'
 const { TabPane } = Tabs
 
-const SetPermission = ({ ID, activeKey }) => {
+const SetPermission = ({ ID, roleType = 'system' }) => {
   const [state, setState] = useState({
-    frontPermission: [] // 前台权限
+    frontPermission: [], // 前台权限
+    backstagePermission: [] // 后台权限
   })
   const { run: trySetRolePermission } = useRequest(
     (params: API.SetRolePermissionParams) => setRolePermission(params),
@@ -18,21 +19,30 @@ const SetPermission = ({ ID, activeKey }) => {
       }
     }
   )
-  const handleOnchange = (checked: boolean, perm: string) => {
+  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 = () => {
-    trySetRolePermission({ ID, frontPermission: state.frontPermission })
+    trySetRolePermission({
+      ID,
+      frontPermission: state.frontPermission,
+      backstagePermission: state.backstagePermission
+    })
   }
-  useEffect(() => {
-    if (activeKey === '2') {
-      // trySetRolePermission(ID, e)
-    }
-  }, [activeKey])
   return (
     <div>
       <Tabs type="card">
@@ -42,7 +52,10 @@ const SetPermission = ({ ID, activeKey }) => {
               <div>
                 {/* <h4>我的项目</h4> */}
                 <div className="my-2">
-                  <Checkbox onChange={e => handleOnchange(e, 'todo')} checked={state.checked}>
+                  <Checkbox
+                    onChange={e => handleFrontOnchange(e.target.checked, 'todo')}
+                    checked={state.frontPermission.includes('todo')}
+                    disabled={roleType !== 'system' ? false : true}>
                     已办待办
                   </Checkbox>
                 </div>
@@ -55,14 +68,21 @@ const SetPermission = ({ ID, activeKey }) => {
                 <h4>我的项目</h4>
                 <div className="my-2">
                   <Checkbox
-                    onChange={e => handleOnchange(e.target.checked, 'access')}
-                    checked={state.frontPermission.includes('access')}>
+                    onChange={e => handleFrontOnchange(e.target.checked, 'access')}
+                    checked={state.frontPermission.includes('access')}
+                    disabled={roleType !== 'system' ? false : true}>
                     查看项目
                   </Checkbox>
-                  <Checkbox onChange={e => handleOnchange(e, 'add')} checked={state.checked}>
+                  <Checkbox
+                    onChange={e => handleFrontOnchange(e.target.checked, 'add')}
+                    checked={state.frontPermission.includes('add')}
+                    disabled={roleType !== 'system' ? false : true}>
                     新建项目
                   </Checkbox>
-                  <Checkbox onChange={e => handleOnchange(e, 'report')} checked={state.checked}>
+                  <Checkbox
+                    onChange={e => handleFrontOnchange(e.target.checked, 'report')}
+                    checked={state.frontPermission.includes('report')}
+                    disabled={roleType !== 'system' ? false : true}>
                     项目上报
                   </Checkbox>
                 </div>
@@ -70,7 +90,10 @@ const SetPermission = ({ ID, activeKey }) => {
               <div>
                 <h4 className="pt-3">我参与的项目</h4>
                 <div className="my-2">
-                  <Checkbox onChange={e => handleOnchange(e, 'access')} checked={state.checked}>
+                  <Checkbox
+                    onChange={e => handleFrontOnchange(e.target.checked, 'access1')}
+                    checked={state.frontPermission.includes('access1')}
+                    disabled={roleType !== 'system' ? false : true}>
                     查看项目
                   </Checkbox>
                 </div>
@@ -79,8 +102,9 @@ const SetPermission = ({ ID, activeKey }) => {
                 <h4 className="pt-3">全部项目</h4>
                 <div className="my-2">
                   <Checkbox
-                    onChange={e => handleOnchange(e, 'viewAllProjects')}
-                    checked={state.checked}>
+                    onChange={e => handleFrontOnchange(e.target.checked, 'viewAllProjects')}
+                    checked={state.frontPermission.includes('viewAllProjects')}
+                    disabled={roleType !== 'system' ? false : true}>
                     查看项目
                   </Checkbox>
                 </div>
@@ -88,7 +112,12 @@ const SetPermission = ({ ID, activeKey }) => {
               <div>
                 <h4 className="pt-3">指标库</h4>
                 <div className="my-2">
-                  <Checkbox.Group options={[{ value: 'section', label: '区间对数' }]} />
+                  <Checkbox
+                    onChange={e => handleFrontOnchange(e.target.checked, 'section')}
+                    checked={state.frontPermission.includes('section')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    区间对数
+                  </Checkbox>
                 </div>
               </div>
             </Card>
@@ -98,24 +127,40 @@ const SetPermission = ({ ID, activeKey }) => {
               <div>
                 <h4>基本设置</h4>
                 <div className="my-2">
-                  <Checkbox.Group options={[{ value: 'edit', label: '编辑' }]} />
+                  <Checkbox
+                    onChange={e => handleFrontOnchange(e.target.checked, 'edit')}
+                    checked={state.frontPermission.includes('edit')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    编辑
+                  </Checkbox>
                 </div>
               </div>
               <div>
                 <h4 className="pt-3">企事业信息</h4>
                 <div className="my-2">
-                  <Checkbox.Group options={[{ value: 'access', label: '查看' }]} />
+                  <Checkbox
+                    onChange={e => handleFrontOnchange(e.target.checked, 'access2')}
+                    checked={state.frontPermission.includes('access2')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    查看
+                  </Checkbox>
                 </div>
               </div>
               <div>
                 <h4 className="pt-3">安全设置</h4>
                 <div className="my-2">
-                  <Checkbox.Group
-                    options={[
-                      { value: 'phone', label: '手机绑定' },
-                      { value: 'password', label: '密码修改' }
-                    ]}
-                  />
+                  <Checkbox
+                    onChange={e => handleFrontOnchange(e.target.checked, 'phone')}
+                    checked={state.frontPermission.includes('phone')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    手机绑定
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleFrontOnchange(e.target.checked, 'password')}
+                    checked={state.frontPermission.includes('password')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    密码修改
+                  </Checkbox>
                 </div>
               </div>
             </Card>
@@ -127,39 +172,82 @@ const SetPermission = ({ ID, activeKey }) => {
               <div>
                 <h4>项目管理</h4>
                 <div className="my-2">
-                  <Checkbox.Group
-                    options={[
-                      { value: 'access', label: '查看项目' },
-                      { value: 'add', label: '新建项目' },
-                      { value: 'edit', label: '编辑项目' },
-                      { value: 'bind', label: '绑定角色' },
-                      { value: 'deploy', label: '流程配置' }
-                    ]}
-                  />
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'accessBa1')}
+                    checked={state.frontPermission.includes('accessBa1')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    查看项目
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'addBa1')}
+                    checked={state.frontPermission.includes('addBa1')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    新建项目
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'editBa1')}
+                    checked={state.frontPermission.includes('editBa1')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    编辑项目
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'bindBa1')}
+                    checked={state.frontPermission.includes('bindBa1')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    绑定角色
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'deployBa1')}
+                    checked={state.frontPermission.includes('deployBa1')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    流程配置
+                  </Checkbox>
                 </div>
               </div>
               <div>
                 <h4 className="pt-3">审批流程模板</h4>
                 <div className="my-2">
-                  <Checkbox.Group
-                    options={[
-                      { value: 'access', label: '查看流程' },
-                      { value: 'add', label: '新建流程' },
-                      { value: 'edit', label: '编辑流程' }
-                    ]}
-                  />
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'accessBa2')}
+                    checked={state.frontPermission.includes('accessBa2')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    查看流程
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'addBa2')}
+                    checked={state.frontPermission.includes('addBa2')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    新建流程
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'editBa2')}
+                    checked={state.frontPermission.includes('editBa2')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    编辑流程
+                  </Checkbox>
                 </div>
               </div>
               <div>
                 <h4 className="pt-3">项目创建人</h4>
                 <div className="my-2">
-                  <Checkbox.Group
-                    options={[
-                      { value: 'access', label: '查看创建人' },
-                      { value: 'add', label: '新建创建人' },
-                      { value: 'delete', label: '删除创建人' }
-                    ]}
-                  />
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'accessBa3')}
+                    checked={state.frontPermission.includes('accessBa3')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    查看创建人
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'addBa3')}
+                    checked={state.frontPermission.includes('addBa3')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    新建创建人
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'deleteBa3')}
+                    checked={state.frontPermission.includes('deleteBa3')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    删除创建人
+                  </Checkbox>
                 </div>
               </div>
             </Card>
@@ -169,26 +257,53 @@ const SetPermission = ({ ID, activeKey }) => {
               <div>
                 <h4>单位管理</h4>
                 <div className="my-2">
-                  <Checkbox.Group
-                    options={[
-                      { value: 'access', label: '查看单位' },
-                      { value: 'add', label: '新建单位' },
-                      { value: 'staff', label: '人员管理' },
-                      { value: 'organizational', label: '组织管理' },
-                      { value: 'deploy', label: '单位设置' }
-                    ]}
-                  />
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'accessBa4')}
+                    checked={state.frontPermission.includes('accessBa4')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    查看单位
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'addBa4')}
+                    checked={state.frontPermission.includes('addBa4')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    新建单位
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'staff')}
+                    checked={state.frontPermission.includes('staff')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    人员管理
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'organizational')}
+                    checked={state.frontPermission.includes('organizational')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    组织管理
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'deploy')}
+                    checked={state.frontPermission.includes('deploy')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    单位设置
+                  </Checkbox>
                 </div>
               </div>
               <div>
                 <h4 className="pt-3">人员管理</h4>
                 <div className="my-2">
-                  <Checkbox.Group
-                    options={[
-                      { value: 'access', label: '查看人员' },
-                      { value: 'edit', label: '编辑人员' }
-                    ]}
-                  />
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'accessBa5')}
+                    checked={state.frontPermission.includes('accessBa5')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    查看人员
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'editBa5')}
+                    checked={state.frontPermission.includes('editBa5')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    编辑人员
+                  </Checkbox>
                 </div>
               </div>
             </Card>
@@ -198,34 +313,52 @@ const SetPermission = ({ ID, activeKey }) => {
               <div>
                 <h4>项目信息</h4>
                 <div className="my-2">
-                  <Checkbox.Group
-                    options={[
-                      { value: 'access', label: '查看信息' },
-                      { value: 'edit', label: '编辑信息' }
-                    ]}
-                  />
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'accessBa6')}
+                    checked={state.frontPermission.includes('accessBa6')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    查看信息
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'editBa6')}
+                    checked={state.frontPermission.includes('editBa6')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    编辑信息
+                  </Checkbox>
                 </div>
               </div>
               <div>
                 <h4 className="pt-3">企事业单位信息</h4>
                 <div className="my-2">
-                  <Checkbox.Group
-                    options={[
-                      { value: 'access', label: '查看信息' },
-                      { value: 'edit', label: '编辑信息' }
-                    ]}
-                  />
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'accessBa7')}
+                    checked={state.frontPermission.includes('accessBa7')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    查看信息
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'editBa7')}
+                    checked={state.frontPermission.includes('editBa7')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    编辑信息
+                  </Checkbox>
                 </div>
               </div>
               <div>
                 <h4 className="pt-3">人员信息</h4>
                 <div className="my-2">
-                  <Checkbox.Group
-                    options={[
-                      { value: 'access', label: '查看信息' },
-                      { value: 'edit', label: '编辑信息' }
-                    ]}
-                  />
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'accessBa8')}
+                    checked={state.frontPermission.includes('accessBa8')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    查看信息
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'editBa8')}
+                    checked={state.frontPermission.includes('editBa8')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    编辑信息
+                  </Checkbox>
                 </div>
               </div>
             </Card>
@@ -235,12 +368,18 @@ const SetPermission = ({ ID, activeKey }) => {
               <div>
                 <h4>管理员设置</h4>
                 <div className="my-2">
-                  <Checkbox.Group
-                    options={[
-                      { value: 'access', label: '查看信息' },
-                      { value: 'edit', label: '编辑信息' }
-                    ]}
-                  />
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'accessBa9')}
+                    checked={state.frontPermission.includes('accessBa9')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    查看信息
+                  </Checkbox>
+                  <Checkbox
+                    onChange={e => handleBackOnchange(e.target.checked, 'editBa9')}
+                    checked={state.frontPermission.includes('editBa9')}
+                    disabled={roleType !== 'system' ? false : true}>
+                    编辑信息
+                  </Checkbox>
                 </div>
               </div>
             </Card>

src/pages/Permission/Role/index.tsx

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