Update files: src/components/member/MemberList.tsx

src/components/member/MemberList.tsx

@@ -10,25 +10,45 @@ interface MemberListProps {
 
 const MemberList: React.FC<MemberListProps> = ({ members, onEdit, onDelete }) => {
   const columns = [
-    { title: '姓名', dataIndex: 'name', key: 'name' },
-    { title: '性别', dataIndex: 'gender', key: 'gender' },
-    { title: '年龄', dataIndex: 'age', key: 'age' },
-    { title: '手机号', dataIndex: 'phone', key: 'phone' },
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      key: 'name',
+      fixed: 'left' as const,
+      width: 100,
+    },
+    { title: '性别', dataIndex: 'gender', key: 'gender', width: 80 },
+    { title: '年龄', dataIndex: 'age', key: 'age', width: 80 },
+    { title: '手机号', dataIndex: 'phone', key: 'phone', width: 120 },
+    { title: '身份证号', dataIndex: 'idNumber', key: 'idNumber', width: 180 },
+    { title: '出生日期', dataIndex: 'birthDate', key: 'birthDate', width: 120 },
+    { 
+      title: '婚姻状态', 
+      dataIndex: 'maritalStatus', 
+      key: 'maritalStatus',
+      width: 100,
+    },
+    { title: '联系地址', dataIndex: 'address', key: 'address', width: 200 },
+    { title: '工作单位', dataIndex: 'workplace', key: 'workplace', width: 150 },
+    { title: '小组组长', dataIndex: 'groupLeader', key: 'groupLeader', width: 100 },
     { 
       title: '是否受洗', 
       dataIndex: 'isBaptized', 
       key: 'isBaptized',
+      width: 100,
       render: (isBaptized: boolean) => (
         <Tag color={isBaptized ? 'green' : 'red'}>
           {isBaptized ? '已受洗' : '未受洗'}
         </Tag>
       )
     },
-    { title: '小组组长', dataIndex: 'groupLeader', key: 'groupLeader' },
-    { title: '服侍岗位', dataIndex: 'servicePosition', key: 'servicePosition' },
+    { title: '受洗日期', dataIndex: 'baptismDate', key: 'baptismDate', width: 120 },
+    { title: '服侍岗位', dataIndex: 'servicePosition', key: 'servicePosition', width: 150 },
     {
       title: '操作',
       key: 'action',
+      fixed: 'right' as const,
+      width: 120,
       render: (text: string, record: Member) => (
         <span>
           <Button type="link" onClick={() => onEdit(record)}>编辑</Button>
@@ -45,7 +65,15 @@ const MemberList: React.FC<MemberListProps> = ({ members, onEdit, onDelete }) =>
     },
   ];
 
-  return <Table columns={columns} dataSource={members} rowKey="id" />;
+  return (
+    <Table 
+      columns={columns} 
+      dataSource={members} 
+      rowKey="id"
+      scroll={{ x: 1500 }} // 启用横向滚动
+      pagination={{ pageSize: 10 }} // 设置每页显示的行数
+    />
+  );
 }
 
 export default MemberList;