feat: 员工列表+部门树结构

src/models/employee.js

@@ -0,0 +1,30 @@
+import consts from '@/consts'
+import { queryStaff } from '@/services/staff'
+
+export default {
+  namespace: 'employee',
+  state: {
+    data: []
+  },
+  effects: {
+    *fetch({ payload }, { call, put }) {
+      const response = yield call(queryStaff, payload)
+      if (response && response.code === consts.RET_CODE.SUCCESS) {
+        yield put({
+          type: 'show',
+          payload: response.data
+        })
+      }
+      // console.log(response)
+    }
+  },
+  reducers: {
+    // action:是由reducers及effects的触发器，一般是第一个对象，如：{type:'add',payload:todo}
+    show(state, action) {
+      return {
+        ...state,
+        data: action.payload.list
+      }
+    }
+  }
+}

src/pages/Staff/Employee/index.jsx

@@ -1,8 +1,31 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
+import consts from '@/consts'
 import ProTable from '@ant-design/pro-table'
 import RoleMenu from '@/pages/Staff/RoleMenu'
+import { queryStaff } from '@/services/staff'
 
 const Employee = () => {
+  const [state, setState] = useState({
+    id: '',
+    params: {},
+    visible: false
+  })
+  // const [state, setState] = useState({
+  //   data: [],
+  //   total: 0,
+  //   id: ''
+  // })
+  // const initData = async payload => {
+  //   const { code = -1, data: { list = [], total = 0 } = { list: [], total: 0 } } = await queryStaff(
+  //     payload
+  //   )
+  //   if (code === consts.RET_CODE.SUCCESS) {
+  //     setState({ ...state, data: list, total })
+  //   }
+  // }
+  // useEffect(() => {
+  //   initData()
+  // }, [])
   const columns = [
     {
       title: '工号',
@@ -73,7 +96,24 @@ const Employee = () => {
       <RoleMenu />
       <div className="w-max-3/4">
         <div className="ml-8 shadow-hex-3e2c5a">
-          <ProTable bordered columns={columns} search={{ filterType: 'light' }} />
+          <ProTable
+            bordered
+            rowKey={record => record.id}
+            columns={columns}
+            params={state.params}
+            request={async params => {
+              const {
+                code = -1,
+                data: { list = [], total = 0 } = { list: [], total: 0 }
+              } = await queryStaff({ ...params })
+              return {
+                data: list,
+                success: code === consts.RET_CODE.SUCCESS,
+                total
+              }
+            }}
+            search={{ filterType: 'light' }}
+          />
         </div>
       </div>
     </div>

src/pages/Staff/RoleMenu/index.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Button, message } from 'antd'
+import { Button, message, Tree } from 'antd'
 import { PlusOutlined } from '@ant-design/icons'
 import consts from '@/consts'
 import { apiaddDepartment } from '@/services/department'
@@ -10,13 +10,13 @@ const RoleMenu = props => {
   const { dispatch, departments = [] } = props
   // eslint-disable-next-line no-unused-vars
   const [activeId, setActiveId] = useState('')
+  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) {
@@ -32,6 +32,14 @@ const RoleMenu = props => {
     }
   }, [])
 
+  const onSelect = (keys, info) => {
+    console.log('Trigger Select', keys, info)
+  }
+
+  const onExpand = () => {
+    console.log('Trigger Expand')
+  }
+
   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">
@@ -61,7 +69,14 @@ const RoleMenu = props => {
         </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">
+        <DirectoryTree
+          multiple
+          defaultExpandAll
+          onSelect={onSelect}
+          onExpand={onExpand}
+          treeData={departments}
+        />
+        {/* <ul className="p-0 m-0 list-none text-primary flex flex-col flex-1">
           {departments.map(item => (
             <li
               key={item.id}
@@ -70,7 +85,7 @@ const RoleMenu = props => {
               <span>{item.name}</span>
             </li>
           ))}
-        </ul>
+        </ul> */}
       </div>
     </div>
   )

src/services/staff.js

@@ -6,7 +6,7 @@ import request from '@/basic/utils/request'
  * @returns 结果集
  */
 export async function queryStaff(payload) {
-  const data = await request.post('/staff/list', {
+  const data = await request.get('/staff/list', {
     data: payload
   })
   return data