feat: 优化人资-删除部门按钮，挪至左侧树选择器节点内部

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

@@ -1,13 +1,16 @@
 import React, { useEffect } from 'react'
-import { Button, message, Tree, TreeSelect, Form } from 'antd'
-import { PlusOutlined } from '@ant-design/icons'
+import { Button, message, Tree, TreeSelect, Form, Popconfirm } from 'antd'
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons'
 import consts from '@/consts'
-import { apiaddDepartment } from '@/services/hr'
+import { addDepartment, delDepartment } from '@/services/hr'
 import { connect, useAccess } from 'umi'
 import { ModalForm, ProFormText } from '@ant-design/pro-form'
+import './index.less'
+const { DirectoryTree } = Tree
 
 const RoleMenu = props => {
   const { dispatch, departments = [], onSelect } = props
+  const hasPerm = useAccess()?.validatePermByType('employee_del_department')
   const newList = [...departments]
   newList.unshift({
     children: [],
@@ -17,15 +20,51 @@ const RoleMenu = props => {
     name: '总全公司',
     title: '总全公司'
   })
-  const { DirectoryTree } = Tree
 
   const initData = () => {
     dispatch({
       type: 'staff/fetchDepartments'
     })
   }
+
+  const handleDelDepartment = async id => {
+    const { code = -1 } = await delDepartment(id)
+    if (code === consts.RET_CODE.SUCCESS) {
+      message.success('删除成功')
+      initData()
+    }
+  }
+
+  function renderTreeNode(tree) {
+    if (!hasPerm) return tree
+    return tree.map(item => {
+      const newItem = {
+        ...item,
+        title: (
+          <div className="department-node">
+            <div>{item.title}</div>
+            <div className="extra">
+              <Popconfirm
+                title="确认删除吗？"
+                onText="确认"
+                cancelText="取消"
+                onConfirm={() => handleDelDepartment(item.id)}
+              >
+                <DeleteOutlined />
+              </Popconfirm>
+            </div>
+          </div>
+        )
+      }
+      if (newItem.children.length) {
+        newItem.children = renderTreeNode(newItem.children)
+      }
+      return newItem
+    })
+  }
+
   const handleAddDepartment = async values => {
-    const { code = -1 } = await apiaddDepartment({ ...values })
+    const { code = -1 } = await addDepartment({ ...values })
     if (code === consts.RET_CODE.SUCCESS) {
       initData()
     }
@@ -43,10 +82,6 @@ const RoleMenu = props => {
     }
   }
 
-  const onExpand = () => {}
-
-  const hasPerm = useAccess()?.validatePermByType('employee_add_department')
-
   return (
     <div className="h-full w-12rem rounded-4px">
       <div className="p-4 pb-3 border-b-1 border-solid border-black border-opacity-10 bg-[#f7f9fa] flex justify-around items-center">
@@ -78,12 +113,6 @@ const RoleMenu = props => {
                 allowClear
               />
             </Form.Item>
-            {/* <ProFormTreeSelect
-            width="md"
-            options={departments.map(item => ({ label: item.name, value: item.id }))}
-            name="parentId"
-            label="上级部门"
-          /> */}
           </ModalForm>
         )}
       </div>
@@ -94,9 +123,8 @@ const RoleMenu = props => {
             defaultExpandAll
             defaultSelectedKeys={['0']}
             onSelect={keys => saveActiveId(keys[0])}
-            onExpand={onExpand}
             showIcon={false}
-            treeData={newList}
+            treeData={renderTreeNode(newList)}
           />
         ) : null}
       </div>
@@ -104,7 +132,6 @@ const RoleMenu = props => {
   )
 }
 
-// export default RoleMenu
 export default connect(({ staff }) => ({
   departments: staff.departments
 }))(RoleMenu)

src/pages/Hr/Employee/components/RoleMenu/index.less

@@ -0,0 +1,18 @@
+.department-node {
+  @apply flex justify-between items-center;
+  .extra {
+    display: none;
+    @apply mr-1 hover:cursor-pointer;
+  }
+
+  &:hover {
+    .extra {
+      display: block;
+    }
+  }
+}
+// .ant-tree-node-selected {
+//   .department-node > .extra {
+//     display: block;
+//   }
+// }

src/pages/Hr/Employee/index.jsx

@@ -1,10 +1,9 @@
 import React, { useState } from 'react'
 import consts from '@/consts'
-import { Button, Popconfirm, message } from 'antd'
+import { message } from 'antd'
 import RoleMenu from '@/pages/Hr/Employee/components/RoleMenu'
 import { queryStaff } from '@/services/staff'
-import { delDepartment } from '@/services/hr'
-import { connect, useAccess } from 'umi'
+import { connect } from 'umi'
 import BasicTable from '@/components/Table'
 import { useModal } from '@/components/ModalStore'
 
@@ -14,11 +13,6 @@ const Employee = props => {
   const [state, setState] = useState({
     params: { id: '0' }
   })
-  const initData = () => {
-    dispatch({
-      type: 'staff/fetchDepartments'
-    })
-  }
 
   const columns = [
     {
@@ -88,36 +82,11 @@ const Employee = props => {
     setState({ ...state, params: { id } })
   }
 
-  const handleDelDepartment = async id => {
-    const { code = -1 } = await delDepartment(id)
-    if (code === consts.RET_CODE.SUCCESS) {
-      message.success('删除成功')
-      initData()
-    }
-  }
-
-  const hasPerm = useAccess()?.validatePermByType('employee_del_department')
-
   return (
     <div className="h-full w-full flex flex-row">
       <RoleMenu onSelect={onSelect} />
       <div style={{ width: 'calc(100% - 12rem)' }}>
         <div className="ml-8 shadow-hex-3e2c5a">
-          {/* <div className="absolute right-33 top-3 z-100">
-            {hasPerm && state.params.id && (
-              <Popconfirm
-                title="确认删除吗？"
-                onText="确认"
-                cancelText="取消"
-                // onConfirm={() => console.log(state.params.id)}
-                onConfirm={() => handleDelDepartment(state.params.id)}
-              >
-                <Button danger size="small">
-                  删除部门
-                </Button>
-              </Popconfirm>
-            )}
-          </div> */}
           {state.params.id && (
             <BasicTable
               columnStateType="EMPLOYEE"
@@ -134,25 +103,6 @@ const Employee = props => {
                 }
               }}
               search={false}
-              toolbar={{
-                actions: [
-                  <>
-                    {hasPerm && state.params.id && (
-                      <Popconfirm
-                        title="确认删除吗？"
-                        onText="确认"
-                        cancelText="取消"
-                        // onConfirm={() => console.log(state.params.id)}
-                        onConfirm={() => handleDelDepartment(state.params.id)}
-                      >
-                        <Button danger size="small">
-                          删除部门
-                        </Button>
-                      </Popconfirm>
-                    )}
-                  </>
-                ]
-              }}
             />
           )}
         </div>