修改角色

src/pages/Role/System/components/RoleMenu/roleMenu.tsx

@@ -1,9 +1,14 @@
 import React, { useState, useEffect } from 'react'
 import { PlusOutlined, DownOutlined } from '@ant-design/icons'
-import { Button, message, Popconfirm, Popover } from 'antd'
+import { Button, message, Popconfirm, Popover, Input } from 'antd'
 import './index.less'
 import { useRequest } from 'umi'
-import { createRoleWithMenuId, fetchRoleListByMenuId, deleteRole } from '@/services/user/api'
+import {
+  createRoleWithMenuId,
+  fetchRoleListByMenuId,
+  deleteRole,
+  updateStaff
+} from '@/services/user/api'
 import { ModalForm, ProFormText } from '@ant-design/pro-form'
 
 type RoleMenuProps = {
@@ -12,6 +17,9 @@ type RoleMenuProps = {
 }
 
 const RoleMenu: React.FC<RoleMenuProps> = ({ menuId, onSelect }) => {
+  const [state, setState] = useState({
+    value: ''
+  })
   const [activeId, setActiveId] = useState('')
   const [menuRoles, setMenuRoles] = useState<API.MenuRoleItem[]>([])
   const { run: tryFetchMenuRoles } = useRequest((id: string) => fetchRoleListByMenuId(id), {
@@ -35,6 +43,26 @@ const RoleMenu: React.FC<RoleMenuProps> = ({ menuId, onSelect }) => {
       }
     }
   )
+  const { run: tryUpdateStaff } = useRequest(
+    (id: string, name: string) => {
+      if (activeId === id) {
+        setActiveId('')
+      }
+      return updateStaff({ id, name })
+    },
+    {
+      manual: true,
+      onSuccess: () => {
+        message.success('修改成功')
+        tryFetchMenuRoles(menuId)
+      }
+    }
+  )
+
+  const onChangeName = value => {
+    setState({ ...state, name: value })
+  }
+
   const { run: tryAddRole } = useRequest(
     (params: API.CreateRoleParams) => createRoleWithMenuId(params),
     {
@@ -95,8 +123,20 @@ const RoleMenu: React.FC<RoleMenuProps> = ({ menuId, onSelect }) => {
                 content={
                   <div className="popoverList">
                     <ul>
-                      <li>复制</li>
-                      <li>粘贴</li>
+                      <Popconfirm
+                        title={
+                          <Input
+                            placeholder="角色名称"
+                            name="name"
+                            onChange={e => onChangeName(e.currentTarget.value)}
+                          />
+                        }
+                        okText="确认"
+                        cancelText="取消"
+                        onConfirm={() => tryUpdateStaff(item.id, state.name)}
+                        icon="">
+                        <li>编辑</li>
+                      </Popconfirm>
                       <Popconfirm
                         title="确认删除吗？"
                         okText="确认"

src/pages/Role/System/index.tsx

@@ -2,13 +2,14 @@ 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 } from 'antd'
+import { message, Table, Tabs, Popconfirm, Popover } from 'antd'
 import React, { useRef, useMemo, useState, useEffect } from 'react'
 import RoleMenu from './components/RoleMenu/roleMenu'
 import {
   fetchRoleStaffListByRoleId,
   updateRolePermission,
-  getRolePermissions
+  getRolePermissions,
+  deleteStaff
 } from '@/services/user/api'
 import type { ColumnsType } from 'antd/lib/table'
 import ConnectModal from './components/ConnectModal'
@@ -17,44 +18,6 @@ import { formatPermission } from '@/utils/utils'
 const System = () => {
   const { TabPane } = Tabs
   const formRef = 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
@@ -90,6 +53,19 @@ const System = () => {
     }
   })
 
+  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)
@@ -103,6 +79,57 @@ const System = () => {
     }
   }, [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) => (
+        // console.log(record.staffId)
+        <>
+          {state.id && (
+            <Popover>
+              <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>
+            </Popover>
+          )}
+        </>
+      )
+    }
+  ]
+
   return (
     <div className="h-full w-full flex flex-row">
       <RoleMenu menuId={menuId} onSelect={onSelect} />

src/services/user/api.ts

@@ -103,3 +103,19 @@ export async function deleteRole({ id }: { id: string }) {
     data: { id }
   })
 }
+
+/** 编辑角色 */
+export async function updateStaff(params: API.UpdateStaff) {
+  return request('/role/update', {
+    method: 'POST',
+    data: params
+  })
+}
+
+/** 角色下移除员工 */
+export async function deleteStaff(params: API.DeleteStaff) {
+  return request('/role/staff/delete', {
+    method: 'POST',
+    data: params
+  })
+}

src/services/user/typings.d.ts

@@ -205,4 +205,9 @@ declare namespace API {
   type DeleteAttendance = {
     id: string
   }
+
+  type UpdateStaff = {
+    id: string
+    name: string
+  }
 }