feat: 实现多商户管理模块与前端服务
refactor: 优化服务层代码并修复类型问题 docs: 更新开发进度文档 feat(merchant): 新增商户监控与数据统计服务 feat(dashboard): 添加商户管理前端页面与服务 fix: 修复类型转换与可选参数处理 feat: 实现商户订单、店铺与结算管理功能 refactor: 重构审计日志格式与服务调用 feat: 新增商户入驻与身份注册功能 fix(controller): 修复路由参数类型问题 feat: 添加商户排名与统计报告功能 chore: 更新模拟数据与服务配置
This commit is contained in:
315
dashboard/src/pages/Merchant/MerchantSettlementManage.tsx
Normal file
315
dashboard/src/pages/Merchant/MerchantSettlementManage.tsx
Normal file
@@ -0,0 +1,315 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Table, Input, Button, Select, DatePicker, message, Card, Typography, Tag, Modal, Form } from 'antd';
|
||||
import { SearchOutlined, EyeOutlined, DownloadOutlined, ReloadOutlined } from '@ant-design/icons';
|
||||
import { getMerchantSettlements, processSettlement } from '../../services/merchantSettlementService';
|
||||
|
||||
const { Option } = Select;
|
||||
const { Title, Text } = Typography;
|
||||
const { RangePicker } = DatePicker;
|
||||
const { Item } = Form;
|
||||
|
||||
interface Settlement {
|
||||
id: string;
|
||||
merchantId: string;
|
||||
merchantName: string;
|
||||
periodStart: string;
|
||||
periodEnd: string;
|
||||
totalAmount: number;
|
||||
status: 'PENDING' | 'PROCESSING' | 'COMPLETED' | 'FAILED';
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
const MerchantSettlementManage: React.FC = () => {
|
||||
const [settlements, setSettlements] = useState<Settlement[]>([]);
|
||||
const [merchants, setMerchants] = useState<{ id: string; companyName: string }[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [merchantFilter, setMerchantFilter] = useState<string>('');
|
||||
const [statusFilter, setStatusFilter] = useState<string>('');
|
||||
const [dateRange, setDateRange] = useState<[string, string] | null>(null);
|
||||
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||
const [selectedSettlement, setSelectedSettlement] = useState<Settlement | null>(null);
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const fetchSettlements = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await getMerchantSettlements();
|
||||
setSettlements(response.data);
|
||||
} catch (error) {
|
||||
message.error('获取结算列表失败');
|
||||
console.error('获取结算列表失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchMerchants = async () => {
|
||||
try {
|
||||
// 实际项目中应该调用获取商户列表的API
|
||||
// 这里模拟数据
|
||||
setMerchants([
|
||||
{ id: '1', companyName: '商户A' },
|
||||
{ id: '2', companyName: '商户B' },
|
||||
{ id: '3', companyName: '商户C' },
|
||||
]);
|
||||
} catch (error) {
|
||||
console.error('获取商户列表失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchMerchants();
|
||||
fetchSettlements();
|
||||
}, []);
|
||||
|
||||
const handleSearch = (value: string) => {
|
||||
setSearchText(value);
|
||||
};
|
||||
|
||||
const handleMerchantFilter = (value: string) => {
|
||||
setMerchantFilter(value);
|
||||
};
|
||||
|
||||
const handleStatusFilter = (value: string) => {
|
||||
setStatusFilter(value);
|
||||
};
|
||||
|
||||
const handleDateRangeChange = (dates: any) => {
|
||||
if (dates) {
|
||||
setDateRange([dates[0].format('YYYY-MM-DD'), dates[1].format('YYYY-MM-DD')]);
|
||||
} else {
|
||||
setDateRange(null);
|
||||
}
|
||||
};
|
||||
|
||||
const filteredSettlements = settlements.filter(settlement => {
|
||||
const matchesSearch = settlement.id.includes(searchText) ||
|
||||
settlement.merchantName.toLowerCase().includes(searchText.toLowerCase());
|
||||
const matchesMerchant = merchantFilter ? settlement.merchantId === merchantFilter : true;
|
||||
const matchesStatus = statusFilter ? settlement.status === statusFilter : true;
|
||||
return matchesSearch && matchesMerchant && matchesStatus;
|
||||
});
|
||||
|
||||
const handleView = (settlement: Settlement) => {
|
||||
setSelectedSettlement(settlement);
|
||||
setIsModalVisible(true);
|
||||
};
|
||||
|
||||
const handleProcess = (settlement: Settlement) => {
|
||||
// 调用API处理结算
|
||||
message.info(`处理结算: ${settlement.id}`);
|
||||
};
|
||||
|
||||
const handleDownload = (settlement: Settlement) => {
|
||||
// 下载结算单
|
||||
message.info(`下载结算单: ${settlement.id}`);
|
||||
};
|
||||
|
||||
const handleRefresh = () => {
|
||||
fetchSettlements();
|
||||
};
|
||||
|
||||
const getStatusTag = (status: string) => {
|
||||
const statusConfig: Record<string, { color: string; text: string }> = {
|
||||
PENDING: { color: 'blue', text: '待处理' },
|
||||
PROCESSING: { color: 'orange', text: '处理中' },
|
||||
COMPLETED: { color: 'green', text: '已完成' },
|
||||
FAILED: { color: 'red', text: '失败' },
|
||||
};
|
||||
const config = statusConfig[status] || { color: 'default', text: status };
|
||||
return <Tag color={config.color}>{config.text}</Tag>;
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '结算单ID',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '商户',
|
||||
dataIndex: 'merchantName',
|
||||
key: 'merchantName',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '结算周期',
|
||||
key: 'period',
|
||||
render: (_, settlement: Settlement) => (
|
||||
<Text>
|
||||
{settlement.periodStart} 至 {settlement.periodEnd}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '结算金额',
|
||||
dataIndex: 'totalAmount',
|
||||
key: 'totalAmount',
|
||||
render: (amount: number) => <Text>${amount.toFixed(2)}</Text>,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
render: (status: string) => getStatusTag(status),
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createdAt',
|
||||
key: 'createdAt',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
render: (_: any, settlement: Settlement) => (
|
||||
<div>
|
||||
<Button
|
||||
icon={<EyeOutlined />}
|
||||
size="small"
|
||||
style={{ marginRight: 8 }}
|
||||
onClick={() => handleView(settlement)}
|
||||
>
|
||||
查看
|
||||
</Button>
|
||||
<Button
|
||||
icon={<DownloadOutlined />}
|
||||
size="small"
|
||||
style={{ marginRight: 8 }}
|
||||
onClick={() => handleDownload(settlement)}
|
||||
>
|
||||
下载
|
||||
</Button>
|
||||
{settlement.status === 'PENDING' && (
|
||||
<Button
|
||||
type="primary"
|
||||
size="small"
|
||||
onClick={() => handleProcess(settlement)}
|
||||
>
|
||||
处理
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
|
||||
<Title level={4}>多商户结算管理</Title>
|
||||
<Button
|
||||
icon={<ReloadOutlined />}
|
||||
onClick={handleRefresh}
|
||||
>
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', marginBottom: 16, gap: 16, flexWrap: 'wrap' }}>
|
||||
<Input
|
||||
placeholder="搜索结算单ID或商户名称"
|
||||
prefix={<SearchOutlined />}
|
||||
style={{ width: 300 }}
|
||||
onChange={(e) => handleSearch(e.target.value)}
|
||||
/>
|
||||
<Select
|
||||
placeholder="筛选商户"
|
||||
style={{ width: 200 }}
|
||||
onChange={handleMerchantFilter}
|
||||
allowClear
|
||||
>
|
||||
{merchants.map(merchant => (
|
||||
<Option key={merchant.id} value={merchant.id}>
|
||||
{merchant.companyName}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
<Select
|
||||
placeholder="筛选状态"
|
||||
style={{ width: 120 }}
|
||||
onChange={handleStatusFilter}
|
||||
allowClear
|
||||
>
|
||||
<Option value="PENDING">待处理</Option>
|
||||
<Option value="PROCESSING">处理中</Option>
|
||||
<Option value="COMPLETED">已完成</Option>
|
||||
<Option value="FAILED">失败</Option>
|
||||
</Select>
|
||||
<RangePicker
|
||||
placeholder={['开始日期', '结束日期']}
|
||||
onChange={handleDateRangeChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={filteredSettlements}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50'],
|
||||
defaultPageSize: 10,
|
||||
}}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
title="结算详情"
|
||||
open={isModalVisible}
|
||||
onCancel={() => setIsModalVisible(false)}
|
||||
footer={[
|
||||
<Button key="close" onClick={() => setIsModalVisible(false)}>
|
||||
关闭
|
||||
</Button>,
|
||||
]}
|
||||
width={600}
|
||||
>
|
||||
{selectedSettlement && (
|
||||
<div>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<Text strong>结算单ID:</Text> {selectedSettlement.id}
|
||||
</div>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<Text strong>商户:</Text> {selectedSettlement.merchantName}
|
||||
</div>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<Text strong>结算周期:</Text> {selectedSettlement.periodStart} 至 {selectedSettlement.periodEnd}
|
||||
</div>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<Text strong>结算金额:</Text> ${selectedSettlement.totalAmount.toFixed(2)}
|
||||
</div>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<Text strong>状态:</Text> {getStatusTag(selectedSettlement.status)}
|
||||
</div>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<Text strong>创建时间:</Text> {selectedSettlement.createdAt}
|
||||
</div>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<Text strong>更新时间:</Text> {selectedSettlement.updatedAt}
|
||||
</div>
|
||||
<div style={{ marginTop: 24 }}>
|
||||
<Title level={5}>结算明细</Title>
|
||||
<Table
|
||||
columns={[
|
||||
{ title: '项目', dataIndex: 'item', key: 'item' },
|
||||
{ title: '金额', dataIndex: 'amount', key: 'amount', render: (amount: number) => `$${amount.toFixed(2)}` },
|
||||
]}
|
||||
dataSource={[
|
||||
{ key: '1', item: '商品销售', amount: selectedSettlement.totalAmount * 0.9 },
|
||||
{ key: '2', item: '平台服务费', amount: selectedSettlement.totalAmount * 0.1 },
|
||||
]}
|
||||
pagination={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default MerchantSettlementManage;
|
||||
Reference in New Issue
Block a user