cldV2react/src/pages/Staff/RoleMenu/index.jsx

import React, { useState, useEffect } from 'react'
import { Button, message } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import consts from '@/consts'
import { apiaddDepartment } from '@/services/department'
import { connect } from 'dva'
import { ModalForm, ProFormText, ProFormSelect } from '@ant-design/pro-form'

const RoleMenu = props => {
  const { dispatch, departments = [], parentId } = props
  const [state, setState] = useState({
    params: {},
    visible: false
  })
  const [addDepartment, setAddDepartment] = useState({
    visible: false,
    loading: false
  })
  const handleAddDepartment = async values => {
    setAddDepartment({ ...addDepartment, loading: true })
    const { code = -1 } = await apiaddDepartment({ ...values, parentId })
    if (code === consts.RET_CODE.SUCCESS) {
      message.success('新增成功')
      setState({ ...state, data: values })
    }
    // 请求完了
    setAddDepartment({ ...addDepartment, loading: false, visible: false })
    // 刷新数据
    dispatch({
      type: 'refresh/commitAction',
      payload: 'department'
    })
  }
  useEffect(() => {
    setState({ ...state, params: { ...state.params, parentId } })
  }, [parentId])

  useEffect(() => {
    if (!departments.length) {
      dispatch({
        type: 'staff/fetchDepartments'
      })
    }
  }, [])

  return (
    <div className="h-full w-max-234px rounded-4px roleMenu">
      <div className="p-4 border-b-1 border-solid border-black border-opacity-10 bg-[#f7f9fa] flex justify-around items-center">
        <span className="text-[0.9375rem]">组织架构</span>
        <ModalForm
          title="创建部门"
          width="500px"
          trigger={
            <Button size="small" type="primary" ghost>
              <PlusOutlined />
              创建部门
            </Button>
          }
          onFinish={handleAddDepartment}
          parentId={{ parentId }}>
          <ProFormText name="backstageMenuId" hidden />
          <ProFormText name="name" label="新增部门" rules={[{ message: '请输入部门名称' }]} />
          <ProFormSelect
            width="md"
            options={departments.map(item => ({ label: item.name, value: item.id }))}
            name="parentId"
            label="上级部门"
          />
        </ModalForm>
      </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">
          {departments.map(item => (
            <li
              key={item.id}
              className="flex justify-between items-center py-2 px-5 cursor-pointer">
              <span>{item.name}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}

// export default RoleMenu
export default connect(({ staff, refresh }) => ({
  departments: staff.departments,
  shouldUpdate: refresh.department
}))(RoleMenu)