feat: 销假参数设置

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

@@ -4,9 +4,14 @@ import '@/pages/Role/System/components/RoleMenu/index.less'
 interface ShowTitleMenuProps {
   itemTitle: string
   onSelect?: (vaule: string) => void
+  selectDefaultValue?: string
 }
-const showTitleMenu: React.FC<ShowTitleMenuProps> = ({ itemTitle, onSelect }) => {
-  const [activeId, setActiveId] = useState('')
+const showTitleMenu: React.FC<ShowTitleMenuProps> = ({
+  itemTitle,
+  onSelect,
+  selectDefaultValue = ''
+}) => {
+  const [activeId, setActiveId] = useState(selectDefaultValue)
   const handleItemClick = (id: string) => {
     setActiveId(id)
     if (onSelect) {

src/pages/Business/Attendance/index.tsx

@@ -1,14 +1,15 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import ShowTitleMenu from './components/ShowTitleMenu'
 import { useRequest } from 'umi'
 import { Plus, Delete } from '@icon-park/react'
-import { Table, Tag, Popconfirm, Popover, Button } from 'antd'
+import { Table, Tag, Popconfirm, Popover, Button, Alert } from 'antd'
 import { fetchAttendanceList, unlinkAttendance, deleteAttendance } from '@/services/user/system'
 import ConnectModal from '@/pages/role/System/components/ConnectModal'
+import ProForm, { ProFormText } from '@ant-design/pro-form'
 
 const itemTitleOptions = [
   { label: '加班申请人', value: '0' },
-  { label: '加班参数设置', value: '1' }
+  { label: '销假参数', value: '1' }
 ]
 export enum modalType {
   addobjectModal = 0,
@@ -16,14 +17,14 @@ export enum modalType {
 }
 const Attendance: React.FC = () => {
   const [state, setState] = useState({
-    id: '',
+    id: '0',
     attendanceList: [],
     visible: false,
     type: modalType.addobjectModal
   })
 
   const onSelect = (id: string) => {
-    setState({ id })
+    setState({ ...state, id })
   }
 
   const { run: tryGetRoleStaffList } = useRequest(fetchAttendanceList, {
@@ -57,6 +58,12 @@ const Attendance: React.FC = () => {
     }
   )
 
+  useEffect(() => {
+    if (state.id) {
+      tryGetRoleStaffList(state.id)
+    }
+  }, [state.id])
+
   const columns: ColumnsType<API.AttendanceItem> = [
     {
       title: '申请人名称',
@@ -119,12 +126,12 @@ const Attendance: React.FC = () => {
 
   return (
     <div className="h-full w-full flex flex-row">
-      <ShowTitleMenu onSelect={onSelect} itemTitle={itemTitleOptions} />
+      <ShowTitleMenu onSelect={onSelect} itemTitle={itemTitleOptions} selectDefaultValue="0" />
       <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">
-            {state.id && (
-              <>
+          {state.id === '0' ? (
+            <>
+              <div className="absolute right-7 top-7 z-100">
                 <Button
                   type="primary"
                   onClick={() =>
@@ -144,16 +151,36 @@ const Attendance: React.FC = () => {
                   }
                   showButton={false}
                 />
-              </>
-            )}
-          </div>
-          <Table
-            bordered
-            title={() => '加班申请人'}
-            columns={columns}
-            dataSource={state.attendanceList}
-            rowKey={row => row.id}
-          />
+              </div>
+              <Table
+                bordered
+                title={() => '加班申请人'}
+                columns={columns}
+                dataSource={state.attendanceList}
+                rowKey={row => row.id}
+              />
+            </>
+          ) : null}
+          {state.id === '1' ? (
+            <>
+              <div>
+                <ProForm onFinish={async values => console.log(values)}>
+                  <h3 className="font-bold">销假参数</h3>
+                  <div className="mt-4 mb-4">
+                    <Alert
+                      type="warning"
+                      message="超过当前设置销假参数（不包含当前所写的）不计算考勤"
+                    />
+                  </div>
+                  <ProForm.Group>
+                    <span>每月</span>
+                    <ProFormText name="attendanceNum" label="" initialValue={5} />
+                    <span>号</span>
+                  </ProForm.Group>
+                </ProForm>
+              </div>
+            </>
+          ) : null}
         </div>
       </div>
     </div>