AI: 将考勤系统拆分为单独文件

src/api/deviceApi.js

@@ -32,6 +32,14 @@ let mockData = [
   }
 ];
 
+// 模拟考勤记录
+let mockAttendanceRecords = [
+  { personId: '1', name: '张三', timestamp: '2024-10-22T09:00:00Z' },
+  { personId: '2', name: '李四', timestamp: '2024-10-22T09:15:00Z' },
+  { personId: '1', name: '张三', timestamp: '2024-10-23T08:55:00Z' },
+  { personId: '2', name: '李四', timestamp: '2024-10-23T09:05:00Z' },
+];
+
 export const deviceApi = {
   getAllPersons: async () => {
     try {
@@ -106,4 +114,27 @@ export const deviceApi = {
       throw error;
     }
   },
+
+  getDeviceInfo: async () => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve({
+          deviceId: 'DEVICE001',
+          deviceName: '教会主门考勤机'
+        });
+      }, 500);
+    });
+  },
+
+  getAttendanceRecords: async (startDate, endDate) => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        const filteredRecords = mockAttendanceRecords.filter(record => {
+          const recordDate = new Date(record.timestamp);
+          return recordDate >= new Date(startDate) && recordDate <= new Date(endDate);
+        });
+        resolve(filteredRecords);
+      }, 1000);
+    });
+  },
 };

src/components/AttendanceSystem.jsx

@@ -1,18 +1,21 @@
 import React, { useState, useEffect } from 'react';
-import { Card, List, Typography, Spin } from 'antd';
+import { Card, List, Typography, Spin, Table, DatePicker } from 'antd';
 import { deviceApi } from '../api/deviceApi';
+import moment from 'moment';
 
 const { Title, Text } = Typography;
+const { RangePicker } = DatePicker;
 
 const AttendanceSystem = () => {
   const [deviceInfo, setDeviceInfo] = useState(null);
   const [attendanceRecords, setAttendanceRecords] = useState([]);
   const [loading, setLoading] = useState(true);
+  const [dateRange, setDateRange] = useState([moment().subtract(7, 'days'), moment()]);
 
   useEffect(() => {
     fetchDeviceInfo();
     fetchAttendanceRecords();
-  }, []);
+  }, [dateRange]);
 
   const fetchDeviceInfo = async () => {
     try {
@@ -24,10 +27,10 @@ const AttendanceSystem = () => {
   };
 
   const fetchAttendanceRecords = async () => {
+    setLoading(true);
     try {
-      const endTime = new Date().toISOString();
-      const startTime = new Date(new Date().setDate(new Date().getDate() - 7)).toISOString();
-      const records = await deviceApi.getAttendanceRecords(startTime, endTime);
+      const [startDate, endDate] = dateRange;
+      const records = await deviceApi.getAttendanceRecords(startDate.toISOString(), endDate.toISOString());
       setAttendanceRecords(records);
     } catch (error) {
       console.error('获取考勤记录失败', error);
@@ -36,6 +39,29 @@ const AttendanceSystem = () => {
     }
   };
 
+  const handleDateRangeChange = (dates) => {
+    setDateRange(dates);
+  };
+
+  const columns = [
+    {
+      title: '会友ID',
+      dataIndex: 'personId',
+      key: 'personId',
+    },
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '打卡时间',
+      dataIndex: 'timestamp',
+      key: 'timestamp',
+      render: (text) => moment(text).format('YYYY-MM-DD HH:mm:ss'),
+    },
+  ];
+
   return (
     <div>
       <Title level={2}>考勤系统</Title>
@@ -46,15 +72,16 @@ const AttendanceSystem = () => {
             <p><Text strong>设备名称:</Text> {deviceInfo.deviceName}</p>
           </Card>
         )}
-        <Card title="考勤记录">
-          <List
+        <Card title="考勤记录" extra={
+          <RangePicker
+            value={dateRange}
+            onChange={handleDateRangeChange}
+          />
+        }>
+          <Table
             dataSource={attendanceRecords}
-            renderItem={(record, index) => (
-              <List.Item key={index}>
-                <Text>人员ID: {record.personId}</Text>
-                <Text>打卡时间: {record.timestamp}</Text>
-              </List.Item>
-            )}
+            columns={columns}
+            rowKey={(record) => `${record.personId}-${record.timestamp}`}
           />
         </Card>
       </Spin>