import React, { useState, useEffect, useCallback } from 'react';
|
import { Table, Button, Modal, Form, Input, Select, InputNumber, Space, Card, message, Popconfirm, Tag } from 'antd';
|
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
|
import { declarationConfigAPI } from '../../services/api';
|
|
const { Option } = Select;
|
|
const PointProjectManagement = () => {
|
const [form] = Form.useForm();
|
const [modalVisible, setModalVisible] = useState(false);
|
const [editingRecord, setEditingRecord] = useState(null);
|
const [loading, setLoading] = useState(false);
|
const [projectData, setProjectData] = useState([]);
|
const [pagination, setPagination] = useState({
|
current: 1,
|
pageSize: 10,
|
total: 0,
|
});
|
const [filters, setFilters] = useState({});
|
const [categories, setCategories] = useState([]);
|
|
// 获取申报项目配置列表
|
const fetchProjectData = useCallback(async (page = pagination.current, size = pagination.pageSize, filterParams = {}) => {
|
try {
|
setLoading(true);
|
const queryParams = {
|
page,
|
size,
|
...filters,
|
...filterParams,
|
};
|
|
console.log('调用接口获取申报项目配置列表:', queryParams); // 添加调试日志
|
const response = await declarationConfigAPI.getDeclarationConfigList(queryParams);
|
console.log('接口响应:', response); // 添加调试日志
|
|
if (response.code === 0) {
|
// 转换数据格式以适配前端显示
|
const transformedData = response.data.content?.map(item => ({
|
id: item.id,
|
projectName: item.category_desc,
|
projectType: item.category_desc,
|
pointType: item.is_positive === 1 ? '正向积分' : '负向积分',
|
basePoints: item.points,
|
maxPoints: item.points, // 使用相同分值作为最高分值
|
conditions: Array.isArray(JSON.parse(item.secondary || '[]'))
|
? JSON.parse(item.secondary || '[]').join('、')
|
: item.secondary || '无',
|
status: item.is_active === '1' ? '启用' : '禁用',
|
createTime: item.create_time,
|
// 保存原始数据用于编辑
|
originalData: item,
|
})) || [];
|
|
setProjectData(transformedData);
|
setPagination(prev => ({
|
...prev,
|
total: response.data.totalElements || 0,
|
}));
|
}
|
} catch (error) {
|
console.error('获取申报项目配置列表失败:', error);
|
message.error('获取申报项目配置列表失败');
|
} finally {
|
setLoading(false);
|
}
|
}, [filters]);
|
|
// 获取分类列表
|
const fetchCategories = useCallback(async () => {
|
try {
|
console.log('调用接口获取分类列表'); // 添加调试日志
|
const response = await declarationConfigAPI.getDeclarationConfigCategories();
|
console.log('分类接口响应:', response); // 添加调试日志
|
if (response.code === 0) {
|
setCategories(response.data || []);
|
}
|
} catch (error) {
|
console.error('获取分类列表失败:', error);
|
}
|
}, []);
|
|
// 页面初始化加载数据
|
useEffect(() => {
|
console.log('页面初始化，开始加载数据'); // 添加调试日志
|
fetchProjectData();
|
fetchCategories();
|
}, []); // 只在组件挂载时执行一次
|
|
// 处理分页变化
|
const handleTableChange = (paginationInfo) => {
|
setPagination(prev => ({
|
...prev,
|
current: paginationInfo.current,
|
pageSize: paginationInfo.pageSize,
|
}));
|
// 分页变化时重新获取数据
|
fetchProjectData(paginationInfo.current, paginationInfo.pageSize);
|
};
|
|
const columns = [
|
{
|
title: '项目名称',
|
dataIndex: 'projectName',
|
key: 'projectName',
|
},
|
{
|
title: '项目类型',
|
dataIndex: 'projectType',
|
key: 'projectType',
|
render: (type) => {
|
const colorMap = {
|
'社区服务': 'blue',
|
'敬老助残': 'green',
|
'环保活动': 'orange',
|
'特殊贡献': 'purple',
|
};
|
return <Tag color={colorMap[type]}>{type}</Tag>;
|
},
|
},
|
{
|
title: '积分类型',
|
dataIndex: 'pointType',
|
key: 'pointType',
|
},
|
{
|
title: '基础分值',
|
dataIndex: 'basePoints',
|
key: 'basePoints',
|
render: (points) => <span style={{ color: '#52c41a', fontWeight: 'bold' }}>+{points}</span>,
|
},
|
{
|
title: '最高分值',
|
dataIndex: 'maxPoints',
|
key: 'maxPoints',
|
render: (points) => <span style={{ color: '#1890ff', fontWeight: 'bold' }}>+{points}</span>,
|
},
|
{
|
title: '获得条件',
|
dataIndex: 'conditions',
|
key: 'conditions',
|
ellipsis: true,
|
},
|
{
|
title: '状态',
|
dataIndex: 'status',
|
key: 'status',
|
render: (status) => (
|
<Tag color={status === '启用' ? 'success' : 'default'}>
|
{status}
|
</Tag>
|
),
|
},
|
{
|
title: '创建时间',
|
dataIndex: 'createTime',
|
key: 'createTime',
|
},
|
{
|
title: '操作',
|
key: 'action',
|
render: (_, record) => (
|
<Space size="middle">
|
<Button
|
type="link"
|
icon={<EditOutlined />}
|
onClick={() => handleEdit(record)}
|
>
|
编辑
|
</Button>
|
<Popconfirm
|
title="确定要删除这个项目配置吗？"
|
onConfirm={() => handleDelete(record.id)}
|
okText="确定"
|
cancelText="取消"
|
>
|
<Button type="link" danger icon={<DeleteOutlined />}>
|
删除
|
</Button>
|
</Popconfirm>
|
</Space>
|
),
|
},
|
];
|
|
const handleAdd = () => {
|
setEditingRecord(null);
|
form.resetFields();
|
setModalVisible(true);
|
};
|
|
const handleEdit = (record) => {
|
setEditingRecord(record);
|
form.setFieldsValue(record);
|
setModalVisible(true);
|
};
|
|
const handleDelete = async (id) => {
|
try {
|
const response = await declarationConfigAPI.deleteDeclarationConfigs(id.toString());
|
if (response.code === 0) {
|
message.success('删除成功');
|
fetchProjectData();
|
}
|
} catch (error) {
|
console.error('删除申报项目配置失败:', error);
|
message.error('删除失败');
|
}
|
};
|
|
const handleModalOk = async () => {
|
try {
|
const values = await form.validateFields();
|
setLoading(true);
|
|
// 转换数据格式以适配后端接口
|
const apiData = {
|
id: editingRecord?.originalData?.id,
|
category: values.projectType === '社区服务' ? 'community_service' :
|
values.projectType === '敬老助残' ? 'elderly_care' :
|
values.projectType === '环保活动' ? 'environmental' : 'special_contribution',
|
category_desc: values.projectType,
|
secondary: JSON.stringify([values.conditions || '']),
|
points: values.basePoints,
|
is_positive: values.pointType === '正向积分' ? 1 : 0,
|
is_active: values.status === '启用' ? '1' : '0',
|
};
|
|
const response = await declarationConfigAPI.saveDeclarationConfig(apiData);
|
if (response.code === 0) {
|
message.success(editingRecord ? '更新成功' : '添加成功');
|
setModalVisible(false);
|
fetchProjectData();
|
}
|
} catch (error) {
|
console.error('保存申报项目配置失败:', error);
|
message.error('保存失败');
|
} finally {
|
setLoading(false);
|
}
|
};
|
|
const handleModalCancel = () => {
|
setModalVisible(false);
|
form.resetFields();
|
};
|
|
return (
|
<div>
|
<div className="page-header">
|
<h1 className="page-title">项目分值配置</h1>
|
<p className="page-description">配置不同项目的积分分值，设置积分获得条件和上限</p>
|
</div>
|
|
<Card>
|
<div className="table-actions">
|
<Button
|
type="primary"
|
icon={<PlusOutlined />}
|
onClick={handleAdd}
|
>
|
新增项目配置
|
</Button>
|
</div>
|
|
<Table
|
columns={columns}
|
dataSource={projectData}
|
rowKey="id"
|
loading={loading}
|
pagination={{
|
current: pagination.current,
|
pageSize: pagination.pageSize,
|
total: pagination.total,
|
showSizeChanger: true,
|
showQuickJumper: true,
|
showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条/共 ${total} 条`,
|
}}
|
onChange={handleTableChange}
|
/>
|
</Card>
|
|
<Modal
|
title={editingRecord ? '编辑项目配置' : '新增项目配置'}
|
open={modalVisible}
|
onOk={handleModalOk}
|
onCancel={handleModalCancel}
|
confirmLoading={loading}
|
width={600}
|
>
|
<Form
|
form={form}
|
layout="vertical"
|
initialValues={{
|
status: '启用',
|
}}
|
>
|
<Form.Item
|
name="projectName"
|
label="项目名称"
|
rules={[{ required: true, message: '请输入项目名称' }]}
|
>
|
<Input placeholder="请输入项目名称" />
|
</Form.Item>
|
|
<Form.Item
|
name="projectType"
|
label="项目类型"
|
rules={[{ required: true, message: '请选择项目类型' }]}
|
>
|
<Select placeholder="请选择项目类型">
|
{categories.map(category => (
|
<Option key={category.category} value={category.category_desc}>
|
{category.category_desc}
|
</Option>
|
))}
|
</Select>
|
</Form.Item>
|
|
<Form.Item
|
name="pointType"
|
label="积分类型"
|
rules={[{ required: true, message: '请选择积分类型' }]}
|
>
|
<Select placeholder="请选择积分类型">
|
<Option value="正向积分">正向积分</Option>
|
<Option value="负向积分">负向积分</Option>
|
</Select>
|
</Form.Item>
|
|
<Form.Item
|
name="basePoints"
|
label="基础分值"
|
rules={[{ required: true, message: '请输入基础分值' }]}
|
>
|
<InputNumber
|
min={0}
|
style={{ width: '100%' }}
|
placeholder="请输入基础分值"
|
/>
|
</Form.Item>
|
|
<Form.Item
|
name="maxPoints"
|
label="最高分值"
|
rules={[{ required: true, message: '请输入最高分值' }]}
|
>
|
<InputNumber
|
min={0}
|
style={{ width: '100%' }}
|
placeholder="请输入最高分值"
|
/>
|
</Form.Item>
|
|
<Form.Item
|
name="conditions"
|
label="获得条件"
|
rules={[{ required: true, message: '请输入获得条件' }]}
|
>
|
<Input.TextArea rows={3} placeholder="请输入获得条件" />
|
</Form.Item>
|
|
<Form.Item
|
name="status"
|
label="状态"
|
rules={[{ required: true, message: '请选择状态' }]}
|
>
|
<Select placeholder="请选择状态">
|
<Option value="启用">启用</Option>
|
<Option value="禁用">禁用</Option>
|
</Select>
|
</Form.Item>
|
</Form>
|
</Modal>
|
</div>
|
);
|
};
|
|
export default PointProjectManagement;
|
