feat: 人资申请人标签展示

src/pages/Business/Attendance/index.tsx

@@ -3,9 +3,17 @@ import AttendanceMenu from '../Attendance/components/AttendanceMenu/attendanceMe
 import { useRequest } from 'umi'
 import Icon from '@/components/IconPark'
 import ConnectModal from '@/pages/Role/System/components/ConnectModal'
-import { Table } from 'antd'
+import { Table,Tag } from 'antd'
+import {
+  fetchAttendanceList
+} from '@/services/user/system'
+import Item from 'antd/lib/list/Item'
 
 const Attendance = () => {
+  const [state, setState] = useState({
+    id: '',
+    attendanceList: []
+  })
   const columns = [
     {
       title: '申请人名称',
@@ -17,10 +25,18 @@ const Attendance = () => {
       dataIndex: 'staff',
       align: 'left',
       width: '50%',
-      render: () => (
-        <span className="hover:text-hex-e7026e">
-          <Icon type="plus" fill="#fd3995" />
-        </span>
+      render: (_,record) => (
+        <>
+          {record.staff.map((item, index) => (
+            // console.log(item.staffName)
+            <span key={index} className="zh-mg-bottom-5 zh-block">
+              <Tag closable>{item.staffName}</Tag>
+            </span>
+          ))}
+          <span className="hover:text-hex-886ab5 cursor-pointer text-purple-500">
+            <Icon type="plus" />添加
+          </span>
+        </>
       )
     },
     {
@@ -28,19 +44,15 @@ const Attendance = () => {
       dataIndex: 'opreate',
       width: '20%',
       render: () => (
-        <span className="hover:text-hex-e7026e">
+        <span className="hover:text-hex-e7026e cursor-pointer">
           <Icon type="delete" fill="#fd3995" />
         </span>
       )
     }
   ]
-  const [state, setState] = useState({
-    id: '',
-    attendanceList: []
-  })
 
-  const { run: tryGetRoleStaffList } = useRequest((id: string) => fetchAttendanceList({ id }), {
-    manual: true,
+  const { run: tryGetRoleStaffList } = useRequest(fetchAttendanceList, {
+    manual: false,
     onSuccess: result => {
       setState({ ...state, attendanceList: result })
     }
@@ -59,21 +71,20 @@ const Attendance = () => {
       <AttendanceMenu />
       <div className="w-max-3/4">
         <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
-          <div className="absolute right-4 top-4 z-100">
-            {state.id && (
-              <ConnectModal
-                title="添加新申请人"
-                dataId={state.id}
-                onSelect={() => tryGetRoleStaffList(state.id)}
-              />
-            )}
+          <div className="absolute right-7 top-7 z-100">
+            {/* 添加新申请人 */}
+            <ConnectModal
+              title="添加新申请人"
+            />
           </div>
           <Table
             bordered
             title={() => '加班申请人'}
             columns={columns}
             dataSource={state.attendanceList}
+            rowKey={row => row.id}
           />
+          
         </div>
       </div>
     </div>

src/services/user/system.ts

@@ -11,3 +11,27 @@ export async function fetchAttendanceList(params: API.GetStaffListParams) {
     params
   })
 }
+
+/** 删除关联加班人 */
+export async function deleteAttendance({ id }: { id: string }) {
+  return request('/attendance/unlinkStaff', {
+    method: 'POST',
+    data: { id }
+  })
+}
+
+/** 关联加班人 */
+export async function linkAttendance({ id }: { id: string }) {
+  return request('/attendance/linkStaff', {
+    method: 'POST',
+    data: { id }
+  })
+}
+
+/** 新增申请人 */
+export async function addAttendance({ id }: { id: string }) {
+  return request('/attendance/add', {
+    method: 'POST',
+    data: { id }
+  })
+}