fix: 修改角色列表的展示

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

@@ -11,7 +11,7 @@ import {
   QuestionCircleOutlined
 } from '@ant-design/icons'
 import { ModalForm, ProFormText } from '@ant-design/pro-form'
-import { Button, Input, Tree, message, Popconfirm, Popover } from 'antd'
+import { Button, Input, Tree, message, Popconfirm } from 'antd'
 import React, { useEffect, useState } from 'react'
 import { useRequest } from 'umi'
 import './index.less'
@@ -23,16 +23,14 @@ const RoleLeftMenu = ({ onSelect }) => {
   })
   // const [activeId, setActiveId] = useState('')
   const [menuRoles, setMenuRoles] = useState<API.MenuRoleItem[]>([])
-  console.log(menuRoles)
   const { run: tryFetchRoleListByMenu } = useRequest(() => fetchRoleListByMenu(), {
     manual: true,
     onSuccess: result => {
       setMenuRoles(
         result.map(item => ({
-          id: item.ID,
           key: item.ID,
           title: item.name,
-          children: []
+          roleType: item.roleType
         }))
       )
       // setActiveId(result[0]['ID'])
@@ -69,31 +67,35 @@ const RoleLeftMenu = ({ onSelect }) => {
       const newItem = {
         ...item,
         title: (
-          <div className="department-node">
+          <div className="department-node py-1">
             <div>{item.title}</div>
             <div className="extra">
-              <Popconfirm
-                title={
-                  <Input
-                    placeholder="角色名称"
-                    name="name"
-                    onChange={e => onChangeName(e.currentTarget.value)}
-                  />
-                }
-                okText="确认"
-                cancelText="取消"
-                onConfirm={() => tryUpdateRole(item.ID, state.name)}
-                icon="">
-                <FormOutlined className="pr-2" />
-              </Popconfirm>
-              <Popconfirm
-                title="确认删除吗？"
-                onText="确认"
-                cancelText="取消"
-                onConfirm={() => tryDelRole(item.ID)}
-                icon={<QuestionCircleOutlined style={{ color: 'red' }} />}>
-                <DeleteOutlined />
-              </Popconfirm>
+              {item.roleType !== 'system' ? (
+                <>
+                  <Popconfirm
+                    title={
+                      <Input
+                        placeholder="角色名称"
+                        name="name"
+                        onChange={e => onChangeName(e.currentTarget.value)}
+                      />
+                    }
+                    okText="确认"
+                    cancelText="取消"
+                    onConfirm={() => tryUpdateRole(item.id, state.name)}
+                    icon="">
+                    <FormOutlined className="pr-2" />
+                  </Popconfirm>
+                  <Popconfirm
+                    title="确认删除吗？"
+                    onText="确认"
+                    cancelText="取消"
+                    onConfirm={() => tryDelRole(item.id)}
+                    icon={<QuestionCircleOutlined style={{ color: 'red' }} />}>
+                    <DeleteOutlined />
+                  </Popconfirm>
+                </>
+              ) : null}
             </div>
           </div>
         )
@@ -150,10 +152,10 @@ const RoleLeftMenu = ({ onSelect }) => {
             <DirectoryTree
               multiple
               defaultExpandAll
-              defaultSelectedKeys={['0']}
+              defaultSelectedKeys={menuRoles[0]?.key}
               onSelect={keys => saveActiveId(keys[0])}
               showIcon={false}
-              treeData={renderTreeNode()}
+              treeData={renderTreeNode(menuRoles)}
             />
           ) : null}
           {/* {menuRoles.map(item => (