import React, { useState, useEffect, useCallback } from 'react';
|
import { Card, Table, Button, Modal, Form, Input, Select, Space, message, Popconfirm, Tag, InputNumber } from 'antd';
|
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
|
import { declarationConfigAPI } from '../../services/api';
|
|
const { Option } = Select;
|
const { TextArea } = Input;
|
|
const DeclarationRuleManagement = () => {
|
const [form] = Form.useForm();
|
const [modalVisible, setModalVisible] = useState(false);
|
const [editingRecord, setEditingRecord] = useState(null);
|
const [loading, setLoading] = useState(false);
|
const [rules, setRules] = useState([]);
|
const [pagination, setPagination] = useState({
|
current: 1,
|
pageSize: 10,
|
total: 0,
|
});
|
const [filters, setFilters] = useState({});
|
|
// 获取申报项目配置列表
|
const fetchRulesData = 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,
|
category: item.categoryDesc, // 使用 categoryDesc 字段
|
content: item.secondary || '无', // 直接使用 secondary 字段
|
points: item.points,
|
pointsType: item.isPositive === 1 ? '加积分' : '减积分', // 使用 isPositive 字段
|
status: item.isActive === '1' ? '启用' : '禁用', // 使用 isActive 字段，字符串类型
|
createTime: item.createTime ? new Date(item.createTime).toLocaleString('zh-CN', {
|
year: 'numeric',
|
month: '2-digit',
|
day: '2-digit',
|
hour: '2-digit',
|
minute: '2-digit',
|
hour12: false
|
}).replace(/\//g, '-') : '', // 格式化时间
|
// 保存原始数据用于编辑
|
originalData: item,
|
})) || [];
|
|
setRules(transformedData);
|
setPagination(prev => ({
|
...prev,
|
total: response.data.totalElements || 0,
|
}));
|
}
|
} catch (error) {
|
console.error('获取申报项目配置列表失败:', error);
|
message.error('获取申报项目配置列表失败');
|
} finally {
|
setLoading(false);
|
}
|
}, [filters]);
|
|
// 页面初始化加载数据
|
useEffect(() => {
|
console.log('页面初始化，开始加载数据');
|
fetchRulesData();
|
}, []);
|
|
// 处理分页变化
|
const handleTableChange = (paginationInfo) => {
|
setPagination(prev => ({
|
...prev,
|
current: paginationInfo.current,
|
pageSize: paginationInfo.pageSize,
|
}));
|
// 分页变化时重新获取数据
|
fetchRulesData(paginationInfo.current, paginationInfo.pageSize);
|
};
|
|
// 固定的类别选项
|
const categoryOptions = [
|
{ value: 1, name: '党的建设' },
|
{ value: 2, name: '经济发展' },
|
{ value: 3, name: '平安法治' },
|
{ value: 4, name: '民生服务' },
|
{ value: 5, name: '失信违法' }
|
];
|
|
const columns = [
|
{
|
title: '类别',
|
dataIndex: 'category',
|
key: 'category',
|
render: (category) => <Tag color="blue">{category}</Tag>,
|
},
|
{
|
title: '类别内容',
|
dataIndex: 'content',
|
key: 'content',
|
ellipsis: false,
|
width: 300,
|
},
|
{
|
title: '积分',
|
dataIndex: 'points',
|
key: 'points',
|
render: (points, record) => (
|
<span style={{ color: record.pointsType === '减积分' ? '#ff4d4f' : '#52c41a' }}>
|
{record.pointsType === '减积分' ? '-' : '+'}{points}
|
</span>
|
),
|
},
|
{
|
title: '积分类型',
|
dataIndex: 'pointsType',
|
key: 'pointsType',
|
render: (pointsType) => (
|
<Tag color={pointsType === '减积分' ? 'error' : 'success'}>
|
{pointsType}
|
</Tag>
|
),
|
},
|
{
|
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);
|
// 根据categoryDesc找到对应的value
|
const category = categoryOptions.find(cat => cat.name === record.category);
|
const categoryValue = category ? category.value : record.category;
|
|
form.setFieldsValue({
|
...record,
|
category: categoryValue
|
});
|
setModalVisible(true);
|
};
|
|
const handleDelete = async (id) => {
|
try {
|
const response = await declarationConfigAPI.deleteDeclarationConfigs(id.toString());
|
if (response.code === 0) {
|
message.success('删除成功');
|
fetchRulesData();
|
}
|
} catch (error) {
|
console.error('删除申报项目配置失败:', error);
|
message.error('删除失败');
|
}
|
};
|
|
const handleModalOk = async () => {
|
try {
|
const values = await form.validateFields();
|
setLoading(true);
|
|
// 根据类别自动设置积分类型
|
const category = categoryOptions.find(cat => cat.value === values.category);
|
const categoryName = category ? category.name : '';
|
const pointsType = categoryName === '失信违法' ? '减积分' : '加积分';
|
|
// 转换数据格式以适配后端接口
|
const apiData = {
|
id: editingRecord?.originalData?.id,
|
category: values.category, // 传递value值
|
categoryDesc: categoryName, // 传递name值
|
secondary: values.content || '', // 直接使用 secondary 字段
|
points: values.points,
|
isPositive: values.pointsType === '加积分' ? 1 : 0, // 使用 isPositive 字段
|
isActive: values.status === '启用' ? '1' : '0', // 使用 isActive 字段，字符串类型
|
};
|
|
const response = await declarationConfigAPI.saveDeclarationConfig(apiData);
|
if (response.code === 0) {
|
message.success(editingRecord ? '更新成功' : '添加成功');
|
setModalVisible(false);
|
fetchRulesData();
|
}
|
} catch (error) {
|
console.error('保存申报项目配置失败:', error);
|
message.error('保存失败');
|
} finally {
|
setLoading(false);
|
}
|
};
|
|
const handleModalCancel = () => {
|
setModalVisible(false);
|
form.resetFields();
|
};
|
|
// 当类别改变时，自动设置积分类型
|
const handleCategoryChange = (value) => {
|
// 根据value找到对应的name
|
const category = categoryOptions.find(cat => cat.value === value);
|
const categoryName = category ? category.name : '';
|
const pointsType = categoryName === '失信违法' ? '减积分' : '加积分';
|
form.setFieldsValue({ pointsType });
|
};
|
|
// 获取积分类型显示值
|
const getPointsTypeValue = (category) => {
|
return category === '失信违法' ? '减积分' : '加积分';
|
};
|
|
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={rules}
|
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: '启用',
|
pointsType: '加积分',
|
}}
|
>
|
<Form.Item
|
name="category"
|
label="类别"
|
rules={[{ required: true, message: '请选择类别' }]}
|
>
|
<Select
|
placeholder="请选择类别"
|
onChange={handleCategoryChange}
|
>
|
{categoryOptions.map(category => (
|
<Option key={category.value} value={category.value}>{category.name}</Option>
|
))}
|
</Select>
|
</Form.Item>
|
|
<Form.Item
|
name="content"
|
label="类别内容"
|
rules={[{ required: true, message: '请输入类别内容' }]}
|
>
|
<TextArea rows={3} placeholder="请输入类别内容描述" />
|
</Form.Item>
|
|
<Form.Item
|
name="points"
|
label="积分"
|
rules={[{ required: true, message: '请输入积分数量' }]}
|
>
|
<InputNumber
|
min={1}
|
max={1000}
|
placeholder="请输入积分数量"
|
style={{ width: '100%' }}
|
/>
|
</Form.Item>
|
|
<Form.Item
|
name="pointsType"
|
label="积分类型"
|
rules={[{ required: true, message: '请选择积分类型' }]}
|
>
|
<Select placeholder="请选择积分类型" disabled>
|
<Option value="加积分">加积分</Option>
|
<Option value="减积分">减积分</Option>
|
</Select>
|
</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 DeclarationRuleManagement;
|
