fix: 通讯录左边组织架构的调整

src/pages/Hr/AddressBook/components/Organization/index.less

@@ -0,0 +1,13 @@
+.department-node {
+  @apply flex justify-between items-center;
+  .extra {
+    display: none;
+    @apply mr-1 hover:cursor-pointer;
+  }
+
+  &:hover {
+    .extra {
+      display: block;
+    }
+  }
+}

src/pages/Hr/AddressBook/components/Organization/index.tsx

@@ -0,0 +1,77 @@
+import { Tree } from 'antd'
+import React, { useEffect } from 'react'
+import { connect } from 'umi'
+const { DirectoryTree } = Tree
+import './index.less'
+
+const Organization = props => {
+  const { dispatch, departments = [], onSelect } = props
+  const newList = [...departments]
+  newList.unshift({
+    children: [],
+    id: '0',
+    key: '0',
+    isLeaf: false,
+    name: '总全公司',
+    title: '总全公司'
+  })
+  const initData = () => {
+    dispatch({
+      type: 'staff/fetchDepartments'
+    })
+  }
+  function renderTreeNode(tree) {
+    return tree.map(item => {
+      const newItem = {
+        ...item,
+        title: (
+          <div className="department-node">
+            <div>{item.title}</div>
+          </div>
+        )
+      }
+      if (newItem.children?.length) {
+        newItem.children = renderTreeNode(newItem.children)
+      }
+      return newItem
+    })
+  }
+  useEffect(() => {
+    if (!departments.length) {
+      initData()
+    }
+  }, [])
+  const saveActiveId = id => {
+    if (onSelect) {
+      onSelect(id)
+    }
+  }
+  return (
+    <div
+      className="w-12rem rounded-4px"
+      style={{
+        height: `calc(100vh - 96px)`,
+        overflowY: 'auto'
+      }}>
+      <div className="p-4 pb-3 border-b-1 border-solid border-black border-opacity-10 bg-[#f7f9fa]">
+        <span className="text-[0.9375rem]">组织架构</span>
+      </div>
+      <div className="py-4 pt-4 bg-white" style={{ height: 'calc(100% - 1rem*2 - 21px)' }}>
+        {departments.length ? (
+          <DirectoryTree
+            multiple
+            defaultExpandAll
+            defaultSelectedKeys={['0']}
+            onSelect={keys => saveActiveId(keys[0])}
+            showIcon={false}
+            treeData={renderTreeNode(newList)}
+          />
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+export default connect(({ staff }) => ({
+  departments: staff.departments
+}))(Organization)

src/pages/Hr/AddressBook/index.jsx

@@ -3,7 +3,7 @@ import consts from '@/consts'
 import { queryStaff } from '@/services/staff'
 import { PageContainer } from '@ant-design/pro-layout'
 import React, { useState } from 'react'
-import RoleMenu from '../Employee/components/RoleMenu'
+import Organization from './components/Organization'
 
 const AddressBook = () => {
   const [state, setState] = useState({
@@ -65,7 +65,7 @@ const AddressBook = () => {
   return (
     <PageContainer title={false} breadcrumb={false}>
       <div className="h-full w-full flex flex-row">
-        <RoleMenu onSelect={onSelect} showType={false} />
+        <Organization onSelect={onSelect} />
         <div style={{ width: 'calc(100% - 12rem)' }}>
           <div className="ml-6 shadow-hex-3e2c5a">
             {state.params.id && (

src/pages/Hr/Employee/components/RoleMenu/index.jsx

@@ -9,7 +9,7 @@ import './index.less'
 const { DirectoryTree } = Tree
 
 const RoleMenu = props => {
-  const { dispatch, departments = [], onSelect, showType } = props
+  const { dispatch, departments = [], onSelect } = props
   const hasPerm = useAccess()?.validatePermByType('employee_del_department')
   const newList = [...departments]
   newList.unshift({
@@ -44,15 +44,13 @@ const RoleMenu = props => {
           <div className="department-node">
             <div>{item.title}</div>
             <div className="extra">
-              {showType ? (
-                <Popconfirm
-                  title="确认删除吗？"
-                  onText="确认"
-                  cancelText="取消"
-                  onConfirm={() => handleDelDepartment(item.id)}>
-                  <DeleteOutlined />
-                </Popconfirm>
-              ) : null}
+              <Popconfirm
+                title="确认删除吗？"
+                onText="确认"
+                cancelText="取消"
+                onConfirm={() => handleDelDepartment(item.id)}>
+                <DeleteOutlined />
+              </Popconfirm>
             </div>
           </div>
         )
@@ -92,7 +90,7 @@ const RoleMenu = props => {
       }}>
       <div className="p-4 pb-3 border-b-1 border-solid border-black border-opacity-10 bg-[#f7f9fa] flex justify-around items-center">
         <span className="text-[0.9375rem]">组织架构</span>
-        {hasPerm && showType ? (
+        {hasPerm && (
           <ModalForm
             title="创建部门"
             width="500px"
@@ -119,7 +117,7 @@ const RoleMenu = props => {
               />
             </Form.Item>
           </ModalForm>
-        ) : null}
+        )}
       </div>
       <div className="py-4 pt-4 bg-white" style={{ height: 'calc(100% - 1rem*2 - 21px)' }}>
         {departments.length ? (

src/pages/Hr/Employee/index.jsx

@@ -83,7 +83,7 @@ const Employee = props => {
   return (
     <PageContainer title={false} breadcrumb={false}>
       <div className="h-full w-full flex flex-row">
-        <RoleMenu onSelect={onSelect} showType={true} />
+        <RoleMenu onSelect={onSelect} />
         <div style={{ width: 'calc(100% - 12rem)' }}>
           <div className="ml-6 shadow-hex-3e2c5a">
             {state.params.id && (