feat: 优化角色权限功能逻辑

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

@@ -22,9 +22,7 @@ const ConnectModal = ({ dataId, onReload }) => {
     <ModalForm
       formRef={formRef}
       title="添加用户"
-      width="500px"
-      labelCol={{ span: 4 }}
-      wrapperCol={{ span: 16 }}
+      width="30%"
       onVisibleChange={visible => !visible && formRef.current?.resetFields()}
       layout="horizontal"
       trigger={

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

@@ -1,27 +1,29 @@
 import { Card, Tabs, Checkbox, Affix, Button, message } from 'antd'
 import React, { useState } from 'react'
-import './index.less'
-import { setRolePermission } from '@/services/permission'
+import { queryRoleDetailByID, setRolePermission } from '@/services/permission'
 import { useRequest } from 'umi'
 import { RoleType } from '../RoleLeftMenu'
+import './index.less'
 const { TabPane } = Tabs
 
 type PermTabsProps = {
   currentPermData: {
     ID: string
     roleType: RoleType
-    frontPermission: string[]
-    backstagePermission: string[]
   }
 }
-const PermTabs: React.FC<PermTabsProps> = ({
-  currentPermData: { ID, roleType, frontPermission = [], backstagePermission = [] }
-}) => {
-  console.log(roleType)
-
+const PermTabs: React.FC<PermTabsProps> = ({ currentPermData: { ID, roleType } }) => {
   const [state, setState] = useState({
-    frontPermission: frontPermission, // 前台权限
-    backstagePermission: backstagePermission // 后台权限
+    frontPermission: [], // 前台权限
+    backstagePermission: [] // 后台权限
+  })
+
+  useRequest(() => queryRoleDetailByID({ ID }), {
+    refreshDeps: [ID],
+    onSuccess: ({ frontPermission = [], backstagePermission = [] } = {}) => {
+      setState({ ...state, frontPermission, backstagePermission })
+    },
+    onError: e => console.log(e)
   })
 
   const { run: trySetRolePermission } = useRequest(
@@ -181,31 +183,31 @@ const PermTabs: React.FC<PermTabsProps> = ({
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'password')}
                     checked={state.backstagePermission.includes('updatePsw')}
-                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
+                    disabled={roleType !== RoleType.SYSTEM}>
                     密码修改
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'addBa1')}
                     checked={state.backstagePermission.includes('updatePsw')}
-                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
+                    disabled={roleType !== RoleType.SYSTEM}>
                     新建项目
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'editBa1')}
                     checked={state.backstagePermission.includes('updatePsw')}
-                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
+                    disabled={roleType !== RoleType.SYSTEM}>
                     编辑项目
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'bindBa1')}
                     checked={state.backstagePermission.includes('updatePsw')}
-                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
+                    disabled={roleType !== RoleType.SYSTEM}>
                     绑定角色
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'deployBa1')}
                     checked={state.backstagePermission.includes('updatePsw')}
-                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
+                    disabled={roleType !== RoleType.SYSTEM}>
                     流程配置
                   </Checkbox>
                 </div>
@@ -216,19 +218,19 @@ const PermTabs: React.FC<PermTabsProps> = ({
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'accessBa2')}
                     checked={state.backstagePermission.includes('updatePsw')}
-                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
+                    disabled={roleType !== RoleType.SYSTEM}>
                     查看流程
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'addBa2')}
                     checked={state.backstagePermission.includes('updatePsw')}
-                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
+                    disabled={roleType !== RoleType.SYSTEM}>
                     新建流程
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'editBa2')}
                     checked={state.backstagePermission.includes('updatePsw')}
-                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
+                    disabled={roleType !== RoleType.SYSTEM}>
                     编辑流程
                   </Checkbox>
                 </div>
@@ -239,19 +241,19 @@ const PermTabs: React.FC<PermTabsProps> = ({
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'accessBa3')}
                     checked={state.backstagePermission.includes('updatePsw')}
-                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
+                    disabled={roleType !== RoleType.SYSTEM}>
                     查看创建人
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'addBa3')}
                     checked={state.backstagePermission.includes('updatePsw')}
-                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
+                    disabled={roleType !== RoleType.SYSTEM}>
                     新建创建人
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'deleteBa3')}
                     checked={state.backstagePermission.includes('updatePsw')}
-                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
+                    disabled={roleType !== RoleType.SYSTEM}>
                     删除创建人
                   </Checkbox>
                 </div>
@@ -266,31 +268,31 @@ const PermTabs: React.FC<PermTabsProps> = ({
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'accessBa4')}
                     checked={state.backstagePermission.includes('updatePsw')}
-                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
+                    disabled={roleType !== RoleType.SYSTEM}>
                     查看单位
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'addBa4')}
                     checked={state.backstagePermission.includes('updatePsw')}
-                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
+                    disabled={roleType !== RoleType.SYSTEM}>
                     新建单位
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'staff')}
                     checked={state.backstagePermission.includes('updatePsw')}
-                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
+                    disabled={roleType !== RoleType.SYSTEM}>
                     人员管理
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'organizational')}
                     checked={state.backstagePermission.includes('updatePsw')}
-                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
+                    disabled={roleType !== RoleType.SYSTEM}>
                     组织管理
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'deploy')}
                     checked={state.backstagePermission.includes('updatePsw')}
-                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
+                    disabled={roleType !== RoleType.SYSTEM}>
                     单位设置
                   </Checkbox>
                 </div>
@@ -301,13 +303,13 @@ const PermTabs: React.FC<PermTabsProps> = ({
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'accessBa5')}
                     checked={state.backstagePermission.includes('updatePsw')}
-                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
+                    disabled={roleType !== RoleType.SYSTEM}>
                     查看人员
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'editBa5')}
                     checked={state.backstagePermission.includes('updatePsw')}
-                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
+                    disabled={roleType !== RoleType.SYSTEM}>
                     编辑人员
                   </Checkbox>
                 </div>
@@ -322,13 +324,13 @@ const PermTabs: React.FC<PermTabsProps> = ({
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'accessBa6')}
                     checked={state.backstagePermission.includes('updatePsw')}
-                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
+                    disabled={roleType !== RoleType.SYSTEM}>
                     查看信息
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'editBa6')}
                     checked={state.backstagePermission.includes('updatePsw')}
-                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
+                    disabled={roleType !== RoleType.SYSTEM}>
                     编辑信息
                   </Checkbox>
                 </div>
@@ -339,13 +341,13 @@ const PermTabs: React.FC<PermTabsProps> = ({
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'accessBa7')}
                     checked={state.backstagePermission.includes('updatePsw')}
-                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
+                    disabled={roleType !== RoleType.SYSTEM}>
                     查看信息
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'editBa7')}
                     checked={state.backstagePermission.includes('updatePsw')}
-                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
+                    disabled={roleType !== RoleType.SYSTEM}>
                     编辑信息
                   </Checkbox>
                 </div>
@@ -356,13 +358,13 @@ const PermTabs: React.FC<PermTabsProps> = ({
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'accessBa8')}
                     checked={state.backstagePermission.includes('updatePsw')}
-                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
+                    disabled={roleType !== RoleType.SYSTEM}>
                     查看信息
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'editBa8')}
                     checked={state.backstagePermission.includes('updatePsw')}
-                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
+                    disabled={roleType !== RoleType.SYSTEM}>
                     编辑信息
                   </Checkbox>
                 </div>
@@ -377,13 +379,13 @@ const PermTabs: React.FC<PermTabsProps> = ({
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'accessBa9')}
                     checked={state.backstagePermission.includes('updatePsw')}
-                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
+                    disabled={roleType !== RoleType.SYSTEM}>
                     查看信息
                   </Checkbox>
                   <Checkbox
                     onChange={e => handleBackOnchange(e.target.checked, 'editBa9')}
                     checked={state.backstagePermission.includes('updatePsw')}
-                    disabled={roleType === RoleType.SYSTEM_NORMAL}>
+                    disabled={roleType !== RoleType.SYSTEM}>
                     编辑信息
                   </Checkbox>
                 </div>

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

@@ -2,16 +2,21 @@
   box-shadow: inset 0 -1px 0 1px #f0f0f0;
 }
 .department-node {
-  min-height: 32px;
-  @apply flex justify-between items-center;
+  height: 32px;
+  @apply flex justify-between items-center flex-nowrap;
+  .title {
+    // max-width: 110px;
+    @apply line-clamp-1;
+  }
   .extra {
     display: none;
+    right: 0;
     @apply mr-1 hover:cursor-pointer;
   }
 
   &:hover {
     .extra {
-      display: block;
+      @apply flex justify-between items-center flex-nowrap;
     }
   }
 }

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

@@ -95,7 +95,7 @@ const RoleLeftMenu: React.FC<RoleLeftMenuProps> = ({
                 onPressEnter={e => handleOnFocus(e, item.title, item.key)}
               />
             ) : (
-              item.title
+              <div className="title">{item.title}</div>
             )}
             <div className="extra">
               <FormOutlined className="pr-2" onClick={() => setActiveID(item.key)} />
@@ -123,6 +123,8 @@ const RoleLeftMenu: React.FC<RoleLeftMenuProps> = ({
     })
   }
 
+  const virtualHeigh = document.getElementById('role-list')?.clientHeight
+
   if (!menuRoles?.length || isNullOrUnDef(defaultActiveRole)) return null
   return (
     <div
@@ -154,25 +156,20 @@ const RoleLeftMenu: React.FC<RoleLeftMenuProps> = ({
           />
         </ModalForm>
       </div>
-      <div className="p-4 bg-white" style={{ height: 'calc(100% - 1rem*2 - 20px)' }}>
-        <ul className="p-0 m-0 list-none text-primary flex flex-col flex-1">
-          {menuRoles.length ? (
-            <DirectoryTree
-              defaultSelectedKeys={[menuRoles[0]?.key]}
-              onSelect={(keys, node) =>
-                onSelect(
-                  keys[0],
-                  node.node.roleType,
-                  node.node.frontPermission,
-                  node.node.backstagePermission
-                )
-              }
-              // onSelect={(keys, node) => console.log(keys)}
-              showIcon={false}
-              treeData={renderTreeNode(menuRoles)}
-            />
-          ) : null}
-        </ul>
+      <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={virtualHeigh - 32}
+            defaultSelectedKeys={[menuRoles[0]?.key]}
+            onSelect={(keys, node) => onSelect(keys[0], node.node.roleType)}
+            showIcon={false}
+            treeData={renderTreeNode(menuRoles)}
+          />
+        ) : null}
       </div>
     </div>
   )

src/pages/Permission/Role/index.tsx

@@ -5,23 +5,22 @@ import { message, Popconfirm, Spin, Table, Tabs } from 'antd'
 import { useState } from 'react'
 import { useRequest } from 'umi'
 import ConnectModal from './components/ConnectModal'
-import RoleLeftMenu from './components/RoleLeftMenu'
+import RoleLeftMenu, { RoleType } from './components/RoleLeftMenu'
 import PermTabs from './components/PermTabs'
 import type { ColumnsType } from 'antd/lib/table'
 const { TabPane } = Tabs
 
 const Role = () => {
   const [state, setState] = useState({
+    activeTab: '1',
     currentRoleID: null,
     roleType: '',
-    frontPermission: [],
-    backstagePermission: [],
     roleStaff: []
   })
 
   const [menuRoles, setMenuRoles] = useState([])
   const { run: tryGetRoleStaffList, loading: staffListLoading } = useRequest(
-    (roleID: string) => fetchRoleStaffListByRoleId({ roleID }),
+    (roleID: string) => fetchRoleStaffListByRoleId({ pageNo: 1, pageSize: 214000, roleID }),
     {
       manual: true,
       onSuccess: result => {
@@ -40,14 +39,9 @@ const Role = () => {
     }
   )
 
-  const onSelect = (
-    currentRoleID: string,
-    roleType: string,
-    frontPermission: string[],
-    backstagePermission: string[]
-  ) => {
+  const onSelect = (currentRoleID: string, roleType: string) => {
     if (state.currentRoleID === currentRoleID) return
-    setState({ ...state, currentRoleID, roleType, frontPermission, backstagePermission })
+    setState({ ...state, currentRoleID, roleType })
     tryGetRoleStaffList(currentRoleID)
   }
 
@@ -57,19 +51,11 @@ const Role = () => {
         result.map(item => ({
           key: item.ID,
           title: item.name,
-          roleType: item.roleType,
-          frontPermission: item?.frontPermission || [],
-          backstagePermission: item?.backstagePermission || []
+          roleType: item.roleType
         }))
       )
 
-      result?.length &&
-        onSelect?.(
-          state.currentRoleID ?? result[0]?.ID,
-          result[0]?.roleType,
-          result[0]?.frontPermission || [],
-          result[0]?.backstagePermission || []
-        )
+      result?.length && onSelect?.(state.currentRoleID ?? result[0]?.ID, result[0]?.roleType)
     }
   })
 
@@ -100,19 +86,20 @@ const Role = () => {
       title: '操作',
       dataIndex: 'operation',
       width: '10%',
-      render: (_, record) => (
-        <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>
-      )
+      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>
+        )
     }
   ]
 
@@ -128,31 +115,32 @@ const Role = () => {
           delRoleValidFn={delRoleValidFn}
         />
         <div className="w-6/7 ml-8 bg-white p-4 rounded-20px relative">
-          <div className="absolute right-4 top-4 z-100">
-            {state.currentRoleID && (
-              <ConnectModal
-                dataId={state.currentRoleID}
-                onReload={() => tryGetRoleStaffList(state.currentRoleID)}
-              />
-            )}
-          </div>
-          <Tabs>
+          <Tabs
+            tabBarExtraContent={{
+              right: state.activeTab === '1' &&
+                state.currentRoleID &&
+                state.roleType !== RoleType.SYSTEM && (
+                  <ConnectModal
+                    dataId={state.currentRoleID}
+                    onReload={() => tryGetRoleStaffList(state.currentRoleID)}
+                  />
+                )
+            }}
+            defaultActiveKey="1"
+            onChange={key => setState({ ...state, activeTab: key })}>
             <TabPane tab="用户列表" key="1">
-              <Spin spinning={staffListLoading}>
-                <Table<API.MenuByRoleIdItem>
-                  columns={columns}
-                  dataSource={state.roleStaff}
-                  rowKey={row => row.id}
-                />
-              </Spin>
+              <Table<API.RoleStaffItem>
+                loading={staffListLoading}
+                columns={columns}
+                dataSource={state.roleStaff}
+                rowKey={row => row.id}
+              />
             </TabPane>
             <TabPane tab="功能权限" key="2">
               <PermTabs
                 currentPermData={{
                   ID: state.currentRoleID,
-                  roleType: state.roleType,
-                  frontPermission: state.frontPermission,
-                  backstagePermission: state.backstagePermission
+                  roleType: state.roleType
                 }}
               />
             </TabPane>

src/services/permission.ts

@@ -62,3 +62,8 @@ export async function setRolePermission(params: API.SetRolePermissionParams) {
     data: params
   })
 }
+
+/** 获取角色详情 */
+export async function queryRoleDetailByID(params: { ID: string }) {
+  return request('/role/detail', { params })
+}