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

import React, { useEffect } from 'react'
import { Button, message, Tree, TreeSelect, Form } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import consts from '@/consts'
import { apiaddDepartment } from '@/services/department'
import { connect, useAccess } from 'umi'
import { ProFormText } from '@ant-design/pro-form'
import ModalDragForm from '@/components/Modal/src/components/ModalDragForm'

const RoleMenu = props => {
  const { dispatch, departments = [], onSelect } = props
  const newList = [...departments]
  newList.unshift({
    children: [],
    id: '0',
    key: '0',
    isLeaf: false,
    name: '总全公司',
    title: '总全公司'
  })
  const { DirectoryTree } = Tree

  const initData = () => {
    dispatch({
      type: 'staff/fetchDepartments'
    })
  }
  const handleAddDepartment = async values => {
    const { code = -1 } = await apiaddDepartment({ ...values })
    if (code === consts.RET_CODE.SUCCESS) {
      // message.success('新增成功')
      initData()
    }
  }

  useEffect(() => {
    if (!departments.length) {
      initData()
    }
  }, [])

  const saveActiveId = id => {
    // console.log(keys)
    if (onSelect) {
      onSelect(id)
    }
  }

  const onExpand = () => {}

  const hasPerm = useAccess()?.validatePermByType('employee_add_department')

  return (
    <div className="h-full w-12rem rounded-4px">
      <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 && (
          <ModalDragForm
            title="创建部门"
            width="500px"
            trigger={
              <Button size="small" type="primary" ghost>
                <PlusOutlined />
                创建部门
              </Button>
            }
            onFinish={async values => {
              await handleAddDepartment(values)
              message.success('添加成功')
              return true
            }}
          >
            <ProFormText name="backstageMenuId" hidden />
            <ProFormText name="name" label="新增部门" rules={[{ message: '请输入部门名称' }]} />
            <Form.Item label="上级部门" name="parentId">
              <TreeSelect
                style={{ width: '100%' }}
                placeholder="请选择上司"
                treeDefaultExpandAll
                treeData={departments}
                allowClear
              />
            </Form.Item>
            {/* <ProFormTreeSelect
            width="md"
            options={departments.map(item => ({ label: item.name, value: item.id }))}
            name="parentId"
            label="上级部门"
          /> */}
          </ModalDragForm>
        )}
      </div>
      <div className="py-4 pt-4 bg-white" style={{ height: 'calc(100% - 1rem*2 - 20px)' }}>
        {departments.length ? (
          <DirectoryTree
            multiple
            defaultExpandAll
            defaultSelectedKeys={['0']}
            onSelect={keys => saveActiveId(keys[0])}
            onExpand={onExpand}
            showIcon={false}
            treeData={newList}
          />
        ) : null}
      </div>
    </div>
  )
}

// export default RoleMenu
export default connect(({ staff }) => ({
  departments: staff.departments
}))(RoleMenu)