member-management-system-excel-4tS6CDLA/src/components/MemberList.jsx

import React, { useState, useEffect, useCallback, useRef } from 'react';
import { Table, Button, message, Modal, Space, Image, Input, Tag } from 'antd';
import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
import Highlighter from 'react-highlight-words';
import { deviceApi } from '../api/deviceApi';
import ExcelImportExport from './ExcelImportExport';
import MemberForm from './MemberForm';

const MemberList = () => {
  // ... 保留其他状态和函数 ...

  const fetchMembers = useCallback(async () => {
    setLoading(true);
    try {
      const data = await deviceApi.getAllPersons();
      console.log('获取到的会友列表数据:', data);
      // 转换数据格式以匹配组件期望的结构
      const formattedData = data.map(member => ({
        personId: member.personId,
        name: member.name,
        gender: member.gender === 1 ? '男' : '女',
        idCard: member.idCard,
        // 其他字段根据需要添加
      }));
      setMembers(formattedData);
      message.success('会友列表获取成功');
    } catch (error) {
      console.error('获取会友列表失败', error);
      message.error(`获取会友列表失败: ${error.message}`);
    } finally {
      setLoading(false);
    }
  }, []);

  // ... 保留其他函数 ...

  const handleSubmit = async (values) => {
    try {
      if (editingMember) {
        console.log('更新会员信息:', values);
        await deviceApi.updatePerson(editingMember.personId, values);
        message.success('会友信息更新成功');
      } else {
        console.log('添加新会员:', values);
        await deviceApi.addPerson(values);
        message.success('会友添加成功');
      }
      setIsModalVisible(false);
      fetchMembers();
    } catch (error) {
      console.error('操作失败', error);
      message.error(`操作失败: ${error.message}`);
    }
  };

  const columns = [
    { title: 'ID', dataIndex: 'personId', key: 'personId' },
    { 
      title: '姓名', 
      dataIndex: 'name', 
      key: 'name',
      ...getColumnSearchProps('name'),
    },
    { title: '性别', dataIndex: 'gender', key: 'gender' },
    { title: '身份证号', dataIndex: 'idCard', key: 'idCard' },
    // ... 其他列保持不变 ...
  ];

  // ... 保留其他渲染逻辑 ...

  return (
    // ... 保持组件结构不变 ...
  );
};

export default MemberList;