fix: 111

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

@@ -1,3 +1,16 @@
 .menu-title {
   box-shadow: inset 0 -1px 0 1px #f0f0f0;
 }
+.department-node {
+  @apply flex justify-between items-center;
+  .extra {
+    display: none;
+    @apply mr-1 hover:cursor-pointer;
+  }
+
+  &:hover {
+    .extra {
+      display: block;
+    }
+  }
+}

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

@@ -11,21 +11,30 @@ import {
   QuestionCircleOutlined
 } from '@ant-design/icons'
 import { ModalForm, ProFormText } from '@ant-design/pro-form'
-import { Button, Input, message, Popconfirm, Popover } from 'antd'
+import { Button, Input, Tree, message, Popconfirm, Popover } from 'antd'
 import React, { useEffect, useState } from 'react'
 import { useRequest } from 'umi'
 import './index.less'
+const { DirectoryTree } = Tree
 
 const RoleLeftMenu = ({ onSelect }) => {
   const [state, setState] = useState({
     value: ''
   })
-  const [activeId, setActiveId] = useState('')
+  // const [activeId, setActiveId] = useState('')
   const [menuRoles, setMenuRoles] = useState<API.MenuRoleItem[]>([])
+  console.log(menuRoles)
   const { run: tryFetchRoleListByMenu } = useRequest(() => fetchRoleListByMenu(), {
     manual: true,
     onSuccess: result => {
-      setMenuRoles(result)
+      setMenuRoles(
+        result.map(item => ({
+          id: item.ID,
+          key: item.ID,
+          title: item.name,
+          children: []
+        }))
+      )
       // setActiveId(result[0]['ID'])
     }
   })
@@ -55,11 +64,51 @@ const RoleLeftMenu = ({ onSelect }) => {
       tryFetchRoleListByMenu()
     }
   })
+  function renderTreeNode(tree) {
+    return tree.map(item => {
+      const newItem = {
+        ...item,
+        title: (
+          <div className="department-node">
+            <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>
+            </div>
+          </div>
+        )
+      }
+      if (newItem.children?.length) {
+        newItem.children = renderTreeNode(newItem.children)
+      }
+      return newItem
+    })
+  }
   useEffect(() => {
     tryFetchRoleListByMenu()
   }, [])
-  const handleItemClick = (id: string) => {
-    setActiveId(id)
+  const saveActiveId = (id: string) => {
+    // setActiveId(id)
     if (onSelect) {
       onSelect(id)
     }
@@ -97,7 +146,17 @@ const RoleLeftMenu = ({ onSelect }) => {
       </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.map(item => (
+          {menuRoles.length ? (
+            <DirectoryTree
+              multiple
+              defaultExpandAll
+              defaultSelectedKeys={['0']}
+              onSelect={keys => saveActiveId(keys[0])}
+              showIcon={false}
+              treeData={renderTreeNode()}
+            />
+          ) : null}
+          {/* {menuRoles.map(item => (
             <Popover
               key={item.id}
               placement="right"
@@ -141,7 +200,7 @@ const RoleLeftMenu = ({ onSelect }) => {
                 <span>{item.name}</span>
               </li>
             </Popover>
-          ))}
+          ))} */}
         </ul>
       </div>
     </div>

src/pages/Permission/Role/index.tsx

@@ -1,5 +1,5 @@
 import {
-  fetchRoleListByMenu,
+  // fetchRoleListByMenu,
   fetchRoleListByRoleId,
   UnLinkRoleAccountItem
 } from '@/services/permission'
@@ -19,7 +19,7 @@ const Role = () => {
     roleStaff: [],
     activeKey: ''
   })
-  const [menuRoles, setMenuRoles] = useState<API.MenuRoleItem[]>([])
+  // const [menuRoles, setMenuRoles] = useState<API.MenuRoleItem[]>([])
   const onSelect = (ID: string) => {
     setState({ ...state, ID })
   }
@@ -93,7 +93,7 @@ const Role = () => {
   return (
     <PageContainer title={false}>
       <div className="h-full w-full flex flex-row">
-        <RoleLeftMenu onSelect={onSelect}></RoleLeftMenu>
+        <RoleLeftMenu onSelect={onSelect} />
         <div className="w-6/7 ml-8 bg-white p-4 rounded-20px relative">
           <div className="absolute right-4 top-4 z-100">
             {state.ID && (