feat: 1

src/pages/Business/Attendance/components/ShowTitleMenu.tsx

@@ -1,20 +1,18 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
+import '@/pages/Role/System/components/RoleMenu/index.less'
 
 interface ShowTitleMenuProps {
-  itemTitle?: number
+  itemTitle: string
+  onSelect?: (vaule: string) => void
 }
-const showTitleMenu: React.FC<ShowTitleMenuProps> = ({ itemTitle }) => {
+const showTitleMenu: React.FC<ShowTitleMenuProps> = ({ itemTitle, onSelect }) => {
   const [activeId, setActiveId] = useState('')
-  const [menuItem, setMenuItem] = useState([])
   const handleItemClick = (id: string) => {
     setActiveId(id)
     if (onSelect) {
       onSelect(id)
     }
   }
-  const handleSelect = () => {
-    'ffafadfas'
-  }
   return (
     <div className="h-full w-max-234px rounded-4px shadow-card">
       <div className="p-4 border-b-1 border-solid border-black border-opacity-10 bg-[#f7f9fa] justify-around text-left">
@@ -22,22 +20,17 @@ const showTitleMenu: React.FC<ShowTitleMenuProps> = ({ itemTitle }) => {
       </div>
       <div className="p-4 bg-white" style={{ height: 'calc(100% - 1rem*2 - 20px)' }}>
         <ul className="p-0 m-0 list-none text-primary flex flex-col flex-1">
-          {menuItem.map(item => (
+          {itemTitle.map(item => (
             <li
-              key={item.id}
+              key={item.value}
               className={[
                 'flex justify-between items-center py-2 px-5 cursor-pointer',
-                item.id === activeId ? 'scale-up-center' : ''
+                item.value === activeId ? 'scale-up-center' : ''
               ].join(' ')}
-              onClick={() => handleItemClick(item.id)}
-              onSelect={() => handleSelect()}>
-              {/* 加班申请人 */}
-              {item.name}
+              onClick={() => handleItemClick(item.value)}>
+              {item.label}
             </li>
           ))}
-          {/* <li className="flex justify-between items-center py-2 px-5 cursor-pointer scale-up-center">
-            参数设计
-          </li> */}
         </ul>
       </div>
     </div>

src/pages/Business/Attendance/index.tsx

@@ -6,6 +6,10 @@ import { Table, Tag, Popconfirm, Popover, Button } from 'antd'
 import { fetchAttendanceList, unlinkAttendance, deleteAttendance } from '@/services/user/system'
 import ConnectModal from '@/pages/role/System/components/ConnectModal'
 
+const itemTitleOptions = [
+  { label: '加班申请人', value: '0' },
+  { label: '加班参数设置', value: '1' }
+]
 export enum modalType {
   addobjectModal = 0,
   linkAttendance = 1
@@ -15,11 +19,15 @@ const Attendance: React.FC = () => {
     id: '',
     attendanceList: [],
     visible: false,
-    type: modalType.addobjectModal,
-    itemTitleOptions: ['申请加班人', '参数设置']
+    type: modalType.addobjectModal
   })
 
+  const onSelect = (id: string) => {
+    setState({ id })
+  }
+
   const { run: tryGetRoleStaffList } = useRequest(fetchAttendanceList, {
+    manual: true,
     onSuccess: result => {
       setState({ ...state, attendanceList: result })
     }
@@ -111,27 +119,33 @@ const Attendance: React.FC = () => {
 
   return (
     <div className="h-full w-full flex flex-row">
-      <ShowTitleMenu itemTitle={state.itemTitleOptions} />
+      <ShowTitleMenu onSelect={onSelect} itemTitle={itemTitleOptions} />
       <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">
-            <Button
-              type="primary"
-              onClick={() => setState({ ...state, visible: true, type: modalType.addobjectModal })}>
-              添加新申请人
-            </Button>
-            <ConnectModal
-              dataId={state.id}
-              show={state.visible}
-              onShowChange={(visible: boolean) => setState({ ...state, visible })}
-              onReload={() => tryGetRoleStaffList(state.id)}
-              postUrl={
-                state.type === modalType.addobjectModal
-                  ? '/attendance/add'
-                  : '/attendance/linkStaff'
-              }
-              showButton={false}
-            />
+            {state.id && (
+              <>
+                <Button
+                  type="primary"
+                  onClick={() =>
+                    setState({ ...state, visible: true, type: modalType.addobjectModal })
+                  }>
+                  添加新申请人
+                </Button>
+                <ConnectModal
+                  dataId={state.id}
+                  show={state.visible}
+                  onShowChange={(visible: boolean) => setState({ ...state, visible })}
+                  onReload={() => tryGetRoleStaffList(state.id)}
+                  postUrl={
+                    state.type === modalType.addobjectModal
+                      ? '/attendance/add'
+                      : '/attendance/linkStaff'
+                  }
+                  showButton={false}
+                />
+              </>
+            )}
           </div>
           <Table
             bordered