feat: 添加部门换树结构

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

@@ -1,14 +1,17 @@
 import React, { useState, useEffect } from 'react'
-import { Button, message, Tree } from 'antd'
+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 } from 'dva'
-import { ModalForm, ProFormText, ProFormSelect } from '@ant-design/pro-form'
+import { ModalForm, ProFormText } from '@ant-design/pro-form'
 
 const RoleMenu = props => {
   const { dispatch, departments = [], onSelect } = props
   const { DirectoryTree } = Tree
+  const [state, setState] = useState({
+    selestValue: ''
+  })
 
   const initData = () => {
     dispatch({
@@ -19,7 +22,6 @@ const RoleMenu = props => {
     const { code = -1 } = await apiaddDepartment({ ...values })
     if (code === consts.RET_CODE.SUCCESS) {
       message.success('新增成功')
-
       initData()
     }
   }
@@ -35,7 +37,9 @@ const RoleMenu = props => {
     if (onSelect) {
       onSelect(id)
     }
-    console.log(id)
+  }
+  const onChange = selestValue => {
+    setState({ ...state, selestValue })
   }
 
   const onExpand = () => {}
@@ -60,12 +64,23 @@ const RoleMenu = props => {
           }}>
           <ProFormText name="backstageMenuId" hidden />
           <ProFormText name="name" label="新增部门" rules={[{ message: '请输入部门名称' }]} />
-          <ProFormSelect
+          <Form.Item label="上级部门" name="parentId">
+            <TreeSelect
+              style={{ width: '100%' }}
+              placeholder="请选择上司"
+              treeDefaultExpandAll
+              onChange={onChange}
+              treeData={departments}
+              value={state.selestValue}
+              allowClear
+            />
+          </Form.Item>
+          {/* <ProFormTreeSelect
             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)' }}>
@@ -73,6 +88,7 @@ const RoleMenu = props => {
           <DirectoryTree
             multiple
             defaultExpandAll
+            defaultSelectedKeys={['McjlMdO0O0Oi']}
             onSelect={keys => saveActiveId(keys[0])}
             onExpand={onExpand}
             showIcon={false}

src/pages/Staff/Employee/index.jsx

@@ -73,20 +73,21 @@ const Employee = () => {
   ]
   const [selectKeys, setSelectKeys] = useState([])
   const [state, setState] = useState({
-    id: ''
+    params: { id: 'McjlMdO0O0Oi' }
   })
   const { getScrollRef } = useTableScroll(columns, selectKeys)
   const onSelect = id => {
-    setState({ ...state, id })
+    setState({ ...state, params: { id } })
   }
   return (
     <div className="h-full w-full flex flex-row">
       <RoleMenu onSelect={onSelect} />
       <div className="w-max-3/4">
         <div className="ml-8 shadow-hex-3e2c5a">
-          {state.id && (
+          {state.params.id && (
             <ProTable
               bordered
+              params={{ departmentId: state.params.id }}
               rowKey={record => record.staffId}
               columns={columns}
               request={async params => {