cldV2react/src/pages/Hr/Contacts/components/Organization/index.tsx

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 flex flex-col h-full"
      style={{
        height: `calc(100vh - 96px)`,
        overflowY: 'auto'
      }}>
      <div className="p-4 border-b-1 border-solid border-black border-opacity-10 bg-[#f7f9fa]">
        <span className="text-[0.9375rem]">组织架构</span>
      </div>
      <div className="py-4 bg-white flex-1">
        {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)