import React, { useState, useEffect, useCallback } from 'react';
|
import { Table, Button, Space, Card, message, Tag, Row, Col, Avatar, Form, Input, Select, Spin, Modal, Radio } from 'antd';
|
import { EyeOutlined, UserOutlined, CheckOutlined } from '@ant-design/icons';
|
import { useNavigate } from 'react-router-dom';
|
import { applicationAPI } from '../../services/api';
|
|
const { Option } = Select;
|
|
const VolunteerList = () => {
|
const [searchForm] = Form.useForm();
|
const [selectedStatus, setSelectedStatus] = useState('全部');
|
const [volunteers, setVolunteers] = useState([]);
|
const [loading, setLoading] = useState(false);
|
const [pagination, setPagination] = useState({
|
current: 1,
|
pageSize: 10,
|
total: 0,
|
});
|
const [filters, setFilters] = useState({});
|
const [reviewModal, setReviewModal] = useState({
|
visible: false,
|
id: null,
|
name: '',
|
});
|
const [reviewForm] = Form.useForm();
|
|
const navigate = useNavigate();
|
|
// 获取志愿者列表数据
|
const fetchVolunteerData = useCallback(async (params = {}) => {
|
try {
|
setLoading(true);
|
const queryParams = {
|
page: pagination.current,
|
size: pagination.pageSize,
|
...filters,
|
...params,
|
};
|
|
const response = await applicationAPI.getApplicationList(queryParams);
|
if (response.code === 0) {
|
// 转换数据格式以适配前端显示
|
const transformedData = response.data.content?.map(item => {
|
// 调试日志：查看状态值类型
|
console.log('状态值:', item.status, '类型:', typeof item.status);
|
return {
|
id: item.id,
|
name: item.name, // 志愿者姓名
|
idCard: item.idCard, // 志愿者身份证号
|
phone: item.phone, // 志愿者手机号码
|
createTime: item.createTime, // 加入时间
|
status: (item.status === 0 || item.status === '0') ? '待审核' : (item.status === 1 || item.status === '1') ? '通过' : (item.status === 2 || item.status === '2') ? '不通过' : '未知', // 审核状态映射
|
totalPoints: item.applicationsCount?.points || 0, // 积分数量
|
activities: item.applicationsCount?.activityNum || 0, // 参加活动次数
|
serviceHours: item.applicationsCount?.serviceHours || 0, // 服务时长
|
originalData: item,
|
};
|
}) || [];
|
|
console.log('转换后的数据:', transformedData);
|
setVolunteers(transformedData);
|
setPagination(prev => ({
|
...prev,
|
total: response.data.totalElements || 0,
|
}));
|
}
|
} catch (error) {
|
console.error('获取志愿者列表失败:', error);
|
message.error('获取志愿者列表失败');
|
} finally {
|
setLoading(false);
|
}
|
}, [pagination.current, pagination.pageSize, filters]);
|
|
// 页面初始化加载数据
|
useEffect(() => {
|
fetchVolunteerData();
|
}, [fetchVolunteerData]);
|
|
const getStatusColor = (status) => {
|
switch (status) {
|
case '通过':
|
return 'success';
|
case '待审核':
|
return 'warning';
|
case '不通过':
|
return 'error';
|
default:
|
return 'default';
|
}
|
};
|
|
const columns = [
|
{
|
title: '志愿者',
|
key: 'volunteer',
|
width: 200,
|
render: (_, record) => (
|
<Space>
|
<Avatar icon={<UserOutlined />} />
|
<div style={{ fontWeight: 'bold' }}>{record.name}</div>
|
</Space>
|
),
|
},
|
{
|
title: '联系方式',
|
key: 'contact',
|
width: 180,
|
render: (_, record) => (
|
<div>
|
<div>{record.phone}</div>
|
<div style={{ fontSize: '12px', color: '#8c8c8c' }}>{record.email}</div>
|
</div>
|
),
|
},
|
{
|
title: '积分',
|
dataIndex: 'totalPoints',
|
key: 'totalPoints',
|
width: 100,
|
render: (points) => (
|
<span style={{ color: '#52c41a', fontWeight: 'bold', fontSize: '16px' }}>
|
{points}
|
</span>
|
),
|
},
|
{
|
title: '参与活动',
|
dataIndex: 'activities',
|
key: 'activities',
|
width: 100,
|
render: (activities) => (
|
<span style={{ color: '#1890ff' }}>{activities}次</span>
|
),
|
},
|
{
|
title: '服务时长',
|
dataIndex: 'serviceHours',
|
key: 'serviceHours',
|
width: 100,
|
render: (hours) => (
|
<span style={{ color: '#faad14' }}>{hours}小时</span>
|
),
|
},
|
{
|
title: '加入时间',
|
dataIndex: 'createTime',
|
key: 'createTime',
|
width: 150,
|
render: (time) => time ? new Date(time).toLocaleString('zh-CN', {
|
year: 'numeric',
|
month: '2-digit',
|
day: '2-digit',
|
hour: '2-digit',
|
minute: '2-digit',
|
hour12: false
|
}).replace(/\//g, '-') : '-',
|
},
|
{
|
title: '状态',
|
dataIndex: 'status',
|
key: 'status',
|
width: 100,
|
render: (status) => <Tag color={getStatusColor(status)}>{status}</Tag>,
|
},
|
{
|
title: '操作',
|
key: 'action',
|
width: 200,
|
render: (_, record) => (
|
<Space size="middle">
|
<Button
|
type="link"
|
icon={<EyeOutlined />}
|
onClick={() => handleViewDetail(record)}
|
>
|
查看详情
|
</Button>
|
{record.status === '待审核' && (
|
<Button
|
type="link"
|
icon={<CheckOutlined />}
|
onClick={() => handleApprove(record)}
|
>
|
审核
|
</Button>
|
)}
|
|
</Space>
|
),
|
},
|
];
|
|
|
|
const handleApprove = (record) => {
|
setReviewModal({
|
visible: true,
|
id: record.id,
|
name: record.name,
|
});
|
reviewForm.resetFields();
|
};
|
|
const handleReviewSubmit = async () => {
|
try {
|
const values = await reviewForm.validateFields();
|
const response = await applicationAPI.reviewApplication({
|
id: reviewModal.id,
|
status: values.status,
|
reviewComment: values.reviewComment || '',
|
});
|
if (response.code === 0) {
|
message.success('审核成功');
|
setReviewModal({ visible: false, id: null, name: '' });
|
fetchVolunteerData(); // 重新获取数据
|
} else {
|
message.error('审核失败');
|
}
|
} catch (error) {
|
console.error('审核失败:', error);
|
message.error('审核失败');
|
}
|
};
|
|
const handleReviewCancel = () => {
|
setReviewModal({ visible: false, id: null, name: '' });
|
reviewForm.resetFields();
|
};
|
|
|
|
const handleSearch = (values) => {
|
console.log('搜索条件:', values);
|
setSelectedStatus(values.status || '全部');
|
setFilters(values);
|
setPagination(prev => ({ ...prev, current: 1 }));
|
fetchVolunteerData({ ...values, page: 1 });
|
};
|
|
const handleReset = () => {
|
searchForm.resetFields();
|
setSelectedStatus('全部');
|
setFilters({});
|
setPagination(prev => ({ ...prev, current: 1 }));
|
fetchVolunteerData({ page: 1 });
|
};
|
|
// 处理查看详情
|
const handleViewDetail = async (record) => {
|
try {
|
// 调用接口获取志愿者详情
|
const response = await applicationAPI.getApplicationById(record.id);
|
if (response.code === 0) {
|
// 跳转到详情页面
|
navigate(`/volunteers/${record.id}`);
|
} else {
|
message.error('获取志愿者详情失败');
|
}
|
} catch (error) {
|
console.error('获取志愿者详情失败:', error);
|
message.error('获取志愿者详情失败');
|
}
|
};
|
|
// 处理分页变化
|
const handleTableChange = (paginationInfo) => {
|
setPagination(prev => ({
|
...prev,
|
current: paginationInfo.current,
|
pageSize: paginationInfo.pageSize,
|
}));
|
fetchVolunteerData({
|
page: paginationInfo.current,
|
size: paginationInfo.pageSize,
|
});
|
};
|
|
|
|
return (
|
<div>
|
<div className="page-header">
|
<h1 className="page-title">志愿者列表</h1>
|
<p className="page-description">管理所有志愿者信息，查看志愿者积分和活动参与情况</p>
|
</div>
|
|
{/* 搜索表单 */}
|
<Card className="search-form">
|
<Form
|
form={searchForm}
|
layout="inline"
|
onFinish={handleSearch}
|
>
|
<Row gutter={[16, 16]} style={{ width: '100%' }}>
|
<Col xs={24} sm={12} md={6}>
|
<Form.Item name="name" label="姓名">
|
<Input placeholder="请输入姓名" />
|
</Form.Item>
|
</Col>
|
<Col xs={24} sm={12} md={6}>
|
<Form.Item name="phone" label="手机号">
|
<Input placeholder="请输入手机号" />
|
</Form.Item>
|
</Col>
|
<Col xs={24} sm={12} md={6}>
|
<Form.Item name="status" label="状态">
|
<Select placeholder="请选择状态" allowClear>
|
<Option value="0">待审核</Option>
|
<Option value="1">审核通过</Option>
|
<Option value="2">审核不通过</Option>
|
</Select>
|
</Form.Item>
|
</Col>
|
<Col xs={24} sm={12} md={6}>
|
<Form.Item name="gender" label="性别">
|
<Select placeholder="请选择性别" allowClear>
|
<Option value="男">男</Option>
|
<Option value="女">女</Option>
|
</Select>
|
</Form.Item>
|
</Col>
|
</Row>
|
<div className="form-actions">
|
<Button type="primary" htmlType="submit">
|
搜索
|
</Button>
|
<Button onClick={handleReset}>
|
重置
|
</Button>
|
</div>
|
</Form>
|
</Card>
|
|
<Card>
|
|
<Table
|
columns={columns}
|
dataSource={volunteers}
|
rowKey="id"
|
scroll={{ x: 1200 }}
|
loading={loading}
|
pagination={{
|
...pagination,
|
showSizeChanger: true,
|
showQuickJumper: true,
|
showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条/共 ${total} 条`,
|
}}
|
onChange={handleTableChange}
|
/>
|
</Card>
|
|
{/* 审核弹出框 */}
|
<Modal
|
title="审核志愿者申请"
|
open={reviewModal.visible}
|
onOk={handleReviewSubmit}
|
onCancel={handleReviewCancel}
|
okText="确定"
|
cancelText="取消"
|
width={500}
|
>
|
<div style={{ marginBottom: '16px' }}>
|
<strong>志愿者姓名：</strong>{reviewModal.name}
|
</div>
|
<Form
|
form={reviewForm}
|
layout="vertical"
|
initialValues={{
|
status: '1',
|
}}
|
>
|
<Form.Item
|
name="status"
|
label="审核结果"
|
rules={[{ required: true, message: '请选择审核结果' }]}
|
>
|
<Radio.Group>
|
<Radio value="1">通过</Radio>
|
<Radio value="2">不通过</Radio>
|
</Radio.Group>
|
</Form.Item>
|
<Form.Item
|
name="reviewComment"
|
label="审核意见"
|
>
|
<Input.TextArea
|
placeholder="请输入审核意见（可选）"
|
rows={4}
|
maxLength={200}
|
showCount
|
/>
|
</Form.Item>
|
</Form>
|
</Modal>
|
|
</div>
|
);
|
};
|
|
export default VolunteerList;
|
