feat: 角色权限-客户员工列表增加删除功能

src/pages/Role/Customer/index.tsx

@@ -2,14 +2,15 @@ import { useModel, useRequest } from 'umi'
 import { Delete, EveryUser } from '@icon-park/react'
 import ProForm, { ProFormCheckbox, ProFormDependency, ProFormSwitch } from '@ant-design/pro-form'
 import type { FormInstance } from 'antd'
-import { message, Table, Tabs, Radio, Space } from 'antd'
+import { message, Table, Tabs, Radio, Space, Popconfirm } from 'antd'
 import React, { useRef, useMemo, useState, useEffect } from 'react'
 
 import {
   fetchRoleStaffListByRoleId,
   updateRolePermission,
   getRolePermissions,
-  updatePermDataByRoleId
+  updatePermDataByRoleId,
+  deleteStaff
 } from '@/services/user/api'
 import type { ColumnsType } from 'antd/lib/table'
 import { formatPermission } from '@/utils/utils'
@@ -45,44 +46,6 @@ const Customer = () => {
   const formRef = useRef<FormInstance>(null)
   const formRef2 = useRef<FormInstance>(null)
 
-  const columns: ColumnsType<API.RoleStaffListItem> = [
-    {
-      title: '用户',
-      dataIndex: 'username',
-      width: '15%'
-    },
-    {
-      title: '手机',
-      dataIndex: 'phone',
-      width: '20%'
-    },
-    {
-      title: '部门',
-      dataIndex: 'departmentName',
-      width: '20%'
-    },
-    {
-      title: '岗位',
-      dataIndex: 'position',
-      width: '15%'
-    },
-    {
-      title: '角色',
-      dataIndex: 'age',
-      width: '20%'
-    },
-    {
-      title: '操作',
-      dataIndex: 'opreate',
-      width: '20%',
-      render: () => (
-        <span className="hover:text-hex-e7026e">
-          <Delete fill="#fd3995" />
-        </span>
-      )
-    }
-  ]
-
   const { initialState } = useModel('@@initialState')
   const menuId = useMemo(() => {
     return initialState?.menuList?.find(item => item.name === '客户')?.id
@@ -121,6 +84,19 @@ const Customer = () => {
     }
   })
 
+  const { run: tryDeleteStaff } = useRequest(
+    (params: API.DeleteStaff) => {
+      return deleteStaff(params)
+    },
+    {
+      manual: true,
+      onSuccess: () => {
+        message.success('移除员工成功')
+        tryGetRoleStaffList(state.id)
+      }
+    }
+  )
+
   useEffect(() => {
     if (state.id) {
       tryGetRoleStaffList(state.id)
@@ -134,6 +110,50 @@ const Customer = () => {
     }
   }, [state.id, state.activeKey])
 
+  const columns: ColumnsType<API.RoleStaffListItem> = [
+    {
+      title: '用户',
+      dataIndex: 'username',
+      width: '15%'
+    },
+    {
+      title: '手机',
+      dataIndex: 'phone',
+      width: '20%'
+    },
+    {
+      title: '部门',
+      dataIndex: 'departmentName',
+      width: '20%'
+    },
+    {
+      title: '岗位',
+      dataIndex: 'position',
+      width: '15%'
+    },
+    {
+      title: '角色',
+      dataIndex: 'age',
+      width: '20%'
+    },
+    {
+      title: '操作',
+      dataIndex: 'opreate',
+      width: '20%',
+      render: (_, record) => (
+        <Popconfirm
+          title="确认删除吗？"
+          okText="确认"
+          cancelText="取消"
+          onConfirm={() => tryDeleteStaff({ id: state.id, staffId: record.staffId })}>
+          <span className="hover:text-hex-e7026e cursor-pointer">
+            <Delete fill="#fd3995" />
+          </span>
+        </Popconfirm>
+      )
+    }
+  ]
+
   return (
     <div className="h-full w-full flex flex-row">
       <RoleMenu menuId={menuId} onSelect={onSelect} itemCount={state.roleStaff?.length || 0} />