feat: 更换部门列表组件

src/components/EditableForm/src/editableFormItem.jsx

@@ -7,6 +7,7 @@ import { connect } from 'dva'
 import './index.less'
 import useOptions from './useOptions'
 import ChangeSelect from '@/pages/customer/Company/components/ChangeSelect'
+import ChangeTreeSelect from '@/pages/staff/Employee/components/ChangeTreeSelect'
 
 const EditableFormItem = ({
   type,
@@ -134,7 +135,7 @@ const EditableFormItem = ({
         break
       case 'treeselect':
         cell = (
-          <ChangeSelect
+          <ChangeTreeSelect
             ref={iRef}
             defaultValue={state.val}
             options={options}

src/components/EditableForm/src/useOptions.js

@@ -7,7 +7,8 @@ const genderOptions = [
 ]
 const typeEnum = {
   NATUREIDS: 'natureIds',
-  GENDER: 'gender'
+  GENDER: 'gender',
+  DEPARTMENTS: 'departments'
 }
 
 export default function useOptions(type) {
@@ -22,6 +23,13 @@ export default function useOptions(type) {
         })
       }
     }
+    if (type === typeEnum.DEPARTMENTS) {
+      if (!store.getState().staff.natures.length) {
+        dispatch({
+          type: 'staff/fetchDepartments'
+        })
+      }
+    }
   }, [type])
   if (type === typeEnum.GENDER) {
     return genderOptions
@@ -29,5 +37,8 @@ export default function useOptions(type) {
   if (type === typeEnum.NATUREIDS) {
     return store.getState().customer.natures
   }
+  if (type === typeEnum.DEPARTMENTS) {
+    return store.getState().staff.natures
+  }
   return null
 }

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

@@ -0,0 +1,38 @@
+import React, { forwardRef, useState } from 'react'
+import { TreeSelect } from 'antd'
+
+const ChangeTreeSelect = props => {
+  const { defaultValue, refinstance, options, onSave } = props
+  const [selectedObj, setSelectedObj] = useState({ value: defaultValue, label: '' })
+  const handleOnChange = (value, option) => {
+    let local = ''
+    if (Array.isArray(value)) {
+      local = options.reduce(prev => {
+        return prev
+      }, '')
+    } else {
+      local = option.label
+    }
+
+    setSelectedObj({ ...selectedObj, value, local })
+  }
+  return (
+    <div>
+      <TreeSelect
+        className="zh-width-100P"
+        placeholder="请选择上司"
+        treeDefaultExpandAll
+        allowClear
+        defaultValue={defaultValue}
+        ref={refinstance}
+        onBlur={() => onSave({ currentTarget: { ...selectedObj } })}
+        options={options}
+        defaultOpen={true}
+        mode={Array.isArray(selectedObj.value)}
+        onChange={handleOnChange}
+      />
+    </div>
+  )
+}
+
+export default forwardRef((props, ref) => <ChangeTreeSelect {...props} refinstance={ref} />)

src/pages/Staff/Employee/components/EmployeeDetail/EmployeeForm.jsx

@@ -18,7 +18,8 @@ const EmployeeForm = props => {
     {
       dataIndex: 'category',
       label: '办事处',
-      span: 12
+      span: 12,
+      editCellType: 'treeselect'
     },
     {
       dataIndex: 'departmentName',

src/pages/Staff/Employee/index.jsx

@@ -8,12 +8,19 @@ import { queryStaff } from '@/services/staff'
 import { useTableScroll } from '@/hooks/useAutoTable'
 import EmployeeDetail from '@/pages/staff/Employee/components/EmployeeDetail'
 import { delDepartment } from '@/services/department'
+import { connect } from 'dva'
 
-const Employee = () => {
+const Employee = props => {
+  const { dispatch } = props
   const [selectKeys, setSelectKeys] = useState([])
   const [state, setState] = useState({
     params: { id: '0' }
   })
+  const initData = () => {
+    dispatch({
+      type: 'staff/fetchDepartments'
+    })
+  }
   const { toggleDrawer, setDrawerProps } = useModal()
   // 展示员工详情
   const showDrawer = id => {
@@ -110,7 +117,6 @@ const Employee = () => {
 
   const handleDelDepartment = async id => {
     const { code = -1 } = await delDepartment(id)
-    console.log(id)
     if (code === consts.RET_CODE.SUCCESS) {
       message.success('删除成功')
       initData()
@@ -170,4 +176,7 @@ const Employee = () => {
   )
 }
 
-export default Employee
+// export default Employee
+export default connect(({ staff }) => ({
+  departments: staff.departments
+}))(Employee)