添加部门

src/pages/Staff/RoleMenu/index.jsx

@@ -1,28 +1,45 @@
 import React, { useState, useEffect } from 'react'
-import { Button } from 'antd'
+import { Button, message } from 'antd'
 import { PlusOutlined } from '@ant-design/icons'
 import consts from '@/consts'
-import { getDepartMentList } from '@/services/department'
+import { apiaddDepartment } from '@/services/department'
+import { connect } from 'dva'
 import { ModalForm, ProFormText, ProFormSelect } from '@ant-design/pro-form'
 
 const RoleMenu = props => {
+  const { dispatch, departments = [] } = props
   const [state, setState] = useState({
-    data: []
+    params: {},
+    visible: false
   })
-  const initData = async id => {
-    setState({ ...state, loading: true })
-    const {
-      data: { data = [] },
-      code = -1
-    } = await getDepartMentList(id)
+  const [addDepartment, setAddDepartment] = useState({
+    visible: false,
+    loading: false
+  })
+  const handleAddDepartment = async values => {
+    setAddDepartment({ ...addDepartment, loading: true })
+    const { code = -1 } = await apiaddDepartment({ ...values })
     if (code === consts.RET_CODE.SUCCESS) {
-      setState({ ...state, data })
+      message.success('新增成功')
+      setState({ ...state, data: values })
     }
+    // 请求完了
+    setAddDepartment({ ...addDepartment, loading: false, visible: false })
+    // 刷新数据
+    dispatch({
+      type: 'refresh/commitAction',
+      payload: 'contact'
+    })
   }
 
   useEffect(() => {
-    initData()
+    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">
@@ -35,7 +52,8 @@ const RoleMenu = props => {
               <PlusOutlined />
               创建部门
             </Button>
-          }>
+          }
+          onFinish={handleAddDepartment}>
           <ProFormText name="backstageMenuId" hidden />
           <ProFormText name="name" label="新增部门" rules={[{ message: '请输入部门名称' }]} />
           <ProFormSelect
@@ -64,7 +82,7 @@ const RoleMenu = props => {
   )
 }
 
-export default RoleMenu
-// export default connect(({ staff }) => ({
-//   departments: staff.departments
-// }))(RoleMenu)
+// export default RoleMenu
+export default connect(({ staff }) => ({
+  departments: staff.departments
+}))(RoleMenu)

src/services/department.js

@@ -12,7 +12,7 @@ export function getDepartMentList(parentId) {
 /**
  * @description 新增部门
  */
-export function addDepartment(payload) {
+export function apiaddDepartment(payload) {
   return request.post('/department/add', { data: payload })
 }