feat: 1

src/pages/Business/Attendance/components/ApplicantModal/index.tsx

@@ -1,35 +1,28 @@
 import { useRequest } from 'umi'
 import { Input, message, Modal } from 'antd'
+import type { PropsWithChildren } from 'react'
 import React, { useState, useRef, useEffect } from 'react'
-import Icon from '@/components/IconPark'
 import { fetchStaffList } from '@/services/user/api'
-import { linkAttendance } from '@/services/user/system'
+import { linkAttendance, addAttendance } from '@/services/user/system'
 import '@/pages/Role/System/components/ConnectModal/index.less'
 import { LoadingOutlined, MoreOutlined } from '@ant-design/icons'
+import { addType } from '../..'
 
-interface ConnectModalProps {
-  title: string
+interface ConnectModalProps extends PropsWithChildren {
   dataId: string
+  visible: boolean
+  onCancel: () => void
 }
-const ApplicantModal: React.FC<ConnectModalProps> = ({ dataId }) => {
+const ApplicantModal: React.FC<ConnectModalProps> = ({
+  type,
+  dataId,
+  visible,
+  onCancel,
+  children
+}) => {
   const containerRef = useRef<HTMLDivElement>(null)
-  const [visible, setVisible] = useState(false)
   const [searchVal, setSearchVal] = useState('')
 
-  const { run: tryLinkAttendance } = useRequest(
-    (params: API.LinkAttendance) => linkAttendance(params),
-    {
-      manual: true,
-      onSuccess: () => {
-        message.success('关联成功')
-        setVisible(false)
-      },
-      onError: e => {
-        message.error(e.message)
-      }
-    }
-  )
-
   const {
     run: tryQueryStaffList,
     data,
@@ -51,7 +44,40 @@ const ApplicantModal: React.FC<ConnectModalProps> = ({ dataId }) => {
       refreshDeps: [searchVal]
     }
   )
+  const { run: tryLinkAttendance } = useRequest(
+    (params: API.LinkAttendance) => linkAttendance(params),
+    {
+      manual: true,
+      onSuccess: () => {
+        message.success('关联成功')
+        onCancel()
+      },
+      onError: e => {
+        message.error(e.message)
+      }
+    }
+  )
+  const { run: tryAddAttendance } = useRequest(
+    (params: API.Addattendance) => addAttendance(params),
+    {
+      manual: true,
+      onSuccess: () => {
+        message.success('关联成功')
+        onCancel()
+      },
+      onError: e => {
+        message.error(e.message)
+      }
+    }
+  )
 
+  const AddTypeModal = (staffId: string, applicantStaffId: string) => {
+    if (type === addType.addobjectModal) {
+      tryLinkAttendance({ id: dataId, staffId })
+    } else {
+      tryAddAttendance({ applicantStaffId })
+    }
+  }
   const handleSearch = (value: string) => {
     setSearchVal(value)
     setTimeout(() => {
@@ -66,20 +92,19 @@ const ApplicantModal: React.FC<ConnectModalProps> = ({ dataId }) => {
     }
   }, [visible])
 
-  const itemSelectHandler = (staffId: string) => {
-    tryLinkAttendance({ id: dataId, staffId })
-  }
+  // const itemSelectHandler = (staffId: string) => {
+  //   if (type === addType.addobjectModal) {
+
+  //   } else {
+
+  //   }
+  // }
   return (
     <>
-      <span
-        className="hover:text-hex-886ab5 cursor-pointer text-purple-500"
-        onClick={() => setVisible(true)}>
-        <Icon type="plus" />
-        添加
-      </span>
+      {children}
       <Modal
         visible={visible}
-        onCancel={() => setVisible(false)}
+        onCancel={onCancel}
         getContainer={false}
         width="60vw"
         title={
@@ -100,7 +125,7 @@ const ApplicantModal: React.FC<ConnectModalProps> = ({ dataId }) => {
                 <span className="w-1/5">{item.category}</span>
               </div>
               <div className="w-1/4 flex justify-end">
-                <span className="btn-outline" onClick={() => itemSelectHandler(item.id)}>
+                <span className="btn-outline" onClick={() => AddTypeModal(item.id)}>
                   选择ta
                 </span>
               </div>

src/pages/Business/Attendance/index.tsx

@@ -2,15 +2,21 @@ import React, { useState, useEffect } from 'react'
 import AttendanceMenu from './components/AttendanceMenu/attendanceMenu'
 import { useRequest } from 'umi'
 import Icon from '@/components/IconPark'
-import AddObjectModal from './components/AddObjectModal'
-import ApplicantModal from './components/ApplicantModal'
-import { Table, Tag, Popconfirm, Popover } from 'antd'
+// import AddObjectModal from './components/AddObjectModal'
+// import ApplicantModal from './components/ApplicantModal'
+import { Table, Tag, Popconfirm, Popover, Button } from 'antd'
 import { fetchAttendanceList, unlinkAttendance, deleteAttendance } from '@/services/user/system'
 
+export enum addType {
+  addobjectModal = 0,
+  applicantModal = 1
+}
 const Attendance = () => {
   const [state, setState] = useState({
     id: '',
-    attendanceList: []
+    attendanceList: [],
+    visible: false,
+    type: addType.addobjectModal
   })
 
   const { run: tryGetRoleStaffList } = useRequest(fetchAttendanceList, {
@@ -64,7 +70,7 @@ const Attendance = () => {
       align: 'left',
       width: '70%',
       render: (_, record) => (
-        <>
+        <div>
           {record.staff.map(item => (
             // console.log(item.staffName)
             <span key={item.staffId} className="zh-mg-bottom-5 zh-block">
@@ -75,8 +81,15 @@ const Attendance = () => {
               </Tag>
             </span>
           ))}
-          <ApplicantModal dataId={record.id} />
-        </>
+          <span
+            className="hover:text-hex-886ab5 cursor-pointer text-purple-500"
+            onClick={() =>
+              setState({ ...state, id: record.id, visible: true, type: addType.addobjectModal })
+            }>
+            <Icon type="plus" />
+            添加
+          </span>
+        </div>
       )
     },
     {
@@ -106,7 +119,12 @@ const Attendance = () => {
       <div className="w-max-3/4">
         <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
           <div className="absolute right-7 top-7 z-100">
-            <AddObjectModal title="添加新申请人" />
+            <Button
+              type="primary"
+              onClick={() => setState({ ...state, visible: true, type: addType.applicantModal })}>
+              添加新申请人
+            </Button>
+            {/* <AddObjectModal title="添加新申请人" type visvi onCan /> */}
           </div>
           <Table
             bordered