feat: 考勤菜单

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

@@ -1,10 +1,20 @@
-import React from 'react'
-// import '@/pages/Role/System/components/RoleMenu/index.less'
+import React, { useState, useEffect } from 'react'
 
 interface ShowTitleMenuProps {
-  itemTitle: string
+  itemTitle?: number
 }
 const showTitleMenu: React.FC<ShowTitleMenuProps> = ({ itemTitle }) => {
+  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">
@@ -12,12 +22,22 @@ 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">
-          <li
-            className={
-              'flex justify-between items-center py-2 px-5 cursor-pointer scale-up-center text-white bg-primary rounded-4px'
-            }>
-            {itemTitle}
-          </li>
+          {menuItem.map(item => (
+            <li
+              key={item.id}
+              className={[
+                'flex justify-between items-center py-2 px-5 cursor-pointer',
+                item.id === activeId ? 'scale-up-center' : ''
+              ].join(' ')}
+              onClick={() => handleItemClick(item.id)}
+              onSelect={() => handleSelect()}>
+              {/* 加班申请人 */}
+              {item.name}
+            </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

@@ -15,7 +15,8 @@ const Attendance: React.FC = () => {
     id: '',
     attendanceList: [],
     visible: false,
-    type: modalType.addobjectModal
+    type: modalType.addobjectModal,
+    itemTitleOptions: ['申请加班人', '参数设置']
   })
 
   const { run: tryGetRoleStaffList } = useRequest(fetchAttendanceList, {
@@ -110,7 +111,7 @@ const Attendance: React.FC = () => {
 
   return (
     <div className="h-full w-full flex flex-row">
-      <ShowTitleMenu itemTitle="加班申请人" />
+      <ShowTitleMenu itemTitle={state.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">