feat: 实现多商户管理模块与前端服务
refactor: 优化服务层代码并修复类型问题 docs: 更新开发进度文档 feat(merchant): 新增商户监控与数据统计服务 feat(dashboard): 添加商户管理前端页面与服务 fix: 修复类型转换与可选参数处理 feat: 实现商户订单、店铺与结算管理功能 refactor: 重构审计日志格式与服务调用 feat: 新增商户入驻与身份注册功能 fix(controller): 修复路由参数类型问题 feat: 添加商户排名与统计报告功能 chore: 更新模拟数据与服务配置
This commit is contained in:
237
dashboard/src/pages/Merchant/MerchantManage.tsx
Normal file
237
dashboard/src/pages/Merchant/MerchantManage.tsx
Normal file
@@ -0,0 +1,237 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Table, Input, Button, Select, DatePicker, message, Card, Typography } from 'antd';
|
||||
import { SearchOutlined, PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
|
||||
import { getMerchants, createMerchant, updateMerchant, deleteMerchant } from '../../services/merchantService';
|
||||
|
||||
const { Option } = Select;
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
interface Merchant {
|
||||
id: string;
|
||||
tenantId: string;
|
||||
companyName: string;
|
||||
businessLicense: string;
|
||||
contactEmail: string;
|
||||
contactPhone: string;
|
||||
status: 'PENDING' | 'ACTIVE' | 'SUSPENDED' | 'TERMINATED';
|
||||
tier: 'BASIC' | 'PRO' | 'ENTERPRISE';
|
||||
traceId: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
const MerchantManage: React.FC = () => {
|
||||
const [merchants, setMerchants] = useState<Merchant[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState<string>('');
|
||||
const [tierFilter, setTierFilter] = useState<string>('');
|
||||
|
||||
const fetchMerchants = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await getMerchants();
|
||||
setMerchants(response.data);
|
||||
} catch (error) {
|
||||
message.error('获取商户列表失败');
|
||||
console.error('获取商户列表失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchMerchants();
|
||||
}, []);
|
||||
|
||||
const handleSearch = (value: string) => {
|
||||
setSearchText(value);
|
||||
};
|
||||
|
||||
const handleStatusFilter = (value: string) => {
|
||||
setStatusFilter(value);
|
||||
};
|
||||
|
||||
const handleTierFilter = (value: string) => {
|
||||
setTierFilter(value);
|
||||
};
|
||||
|
||||
const filteredMerchants = merchants.filter(merchant => {
|
||||
const matchesSearch = merchant.companyName.toLowerCase().includes(searchText.toLowerCase()) ||
|
||||
merchant.contactEmail.toLowerCase().includes(searchText.toLowerCase());
|
||||
const matchesStatus = statusFilter ? merchant.status === statusFilter : true;
|
||||
const matchesTier = tierFilter ? merchant.tier === tierFilter : true;
|
||||
return matchesSearch && matchesStatus && matchesTier;
|
||||
});
|
||||
|
||||
const handleCreate = () => {
|
||||
// 跳转到创建商户页面或打开创建弹窗
|
||||
message.info('创建商户功能待实现');
|
||||
};
|
||||
|
||||
const handleEdit = (merchant: Merchant) => {
|
||||
// 跳转到编辑商户页面或打开编辑弹窗
|
||||
message.info(`编辑商户: ${merchant.companyName}`);
|
||||
};
|
||||
|
||||
const handleDelete = (merchantId: string) => {
|
||||
// 确认删除后调用API
|
||||
message.info(`删除商户: ${merchantId}`);
|
||||
};
|
||||
|
||||
const handleView = (merchant: Merchant) => {
|
||||
// 跳转到商户详情页面
|
||||
message.info(`查看商户详情: ${merchant.companyName}`);
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '商户ID',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '公司名称',
|
||||
dataIndex: 'companyName',
|
||||
key: 'companyName',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '联系邮箱',
|
||||
dataIndex: 'contactEmail',
|
||||
key: 'contactEmail',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '联系电话',
|
||||
dataIndex: 'contactPhone',
|
||||
key: 'contactPhone',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
render: (status: string) => {
|
||||
const statusMap: Record<string, string> = {
|
||||
PENDING: '待审核',
|
||||
ACTIVE: '活跃',
|
||||
SUSPENDED: '暂停',
|
||||
TERMINATED: '终止',
|
||||
};
|
||||
return <Text>{statusMap[status] || status}</Text>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '等级',
|
||||
dataIndex: 'tier',
|
||||
key: 'tier',
|
||||
render: (tier: string) => {
|
||||
const tierMap: Record<string, string> = {
|
||||
BASIC: '基础版',
|
||||
PRO: '专业版',
|
||||
ENTERPRISE: '企业版',
|
||||
};
|
||||
return <Text>{tierMap[tier] || tier}</Text>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createdAt',
|
||||
key: 'createdAt',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
render: (_: any, merchant: Merchant) => (
|
||||
<div>
|
||||
<Button
|
||||
icon={<EyeOutlined />}
|
||||
size="small"
|
||||
style={{ marginRight: 8 }}
|
||||
onClick={() => handleView(merchant)}
|
||||
>
|
||||
查看
|
||||
</Button>
|
||||
<Button
|
||||
icon={<EditOutlined />}
|
||||
size="small"
|
||||
style={{ marginRight: 8 }}
|
||||
onClick={() => handleEdit(merchant)}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
icon={<DeleteOutlined />}
|
||||
size="small"
|
||||
danger
|
||||
onClick={() => handleDelete(merchant.id)}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
|
||||
<Title level={4}>商户管理</Title>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={handleCreate}
|
||||
>
|
||||
新增商户
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', marginBottom: 16, gap: 16 }}>
|
||||
<Input
|
||||
placeholder="搜索商户名称或邮箱"
|
||||
prefix={<SearchOutlined />}
|
||||
style={{ width: 300 }}
|
||||
onChange={(e) => handleSearch(e.target.value)}
|
||||
/>
|
||||
<Select
|
||||
placeholder="筛选状态"
|
||||
style={{ width: 120 }}
|
||||
onChange={handleStatusFilter}
|
||||
allowClear
|
||||
>
|
||||
<Option value="PENDING">待审核</Option>
|
||||
<Option value="ACTIVE">活跃</Option>
|
||||
<Option value="SUSPENDED">暂停</Option>
|
||||
<Option value="TERMINATED">终止</Option>
|
||||
</Select>
|
||||
<Select
|
||||
placeholder="筛选等级"
|
||||
style={{ width: 120 }}
|
||||
onChange={handleTierFilter}
|
||||
allowClear
|
||||
>
|
||||
<Option value="BASIC">基础版</Option>
|
||||
<Option value="PRO">专业版</Option>
|
||||
<Option value="ENTERPRISE">企业版</Option>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={filteredMerchants}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50'],
|
||||
defaultPageSize: 10,
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default MerchantManage;
|
||||
273
dashboard/src/pages/Merchant/MerchantOrderManage.tsx
Normal file
273
dashboard/src/pages/Merchant/MerchantOrderManage.tsx
Normal file
@@ -0,0 +1,273 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Table, Input, Button, Select, DatePicker, message, Card, Typography, Tag } from 'antd';
|
||||
import { SearchOutlined, EyeOutlined, ReloadOutlined } from '@ant-design/icons';
|
||||
import { getMerchantOrders, updateOrderStatus } from '../../services/merchantOrderService';
|
||||
|
||||
const { Option } = Select;
|
||||
const { Title, Text } = Typography;
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
interface Order {
|
||||
id: string;
|
||||
merchantId: string;
|
||||
merchantName: string;
|
||||
orderId: string;
|
||||
platform: string;
|
||||
totalAmount: number;
|
||||
status: 'PENDING' | 'PROCESSING' | 'SHIPPED' | 'DELIVERED' | 'CANCELLED' | 'REFUNDED';
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
const MerchantOrderManage: React.FC = () => {
|
||||
const [orders, setOrders] = useState<Order[]>([]);
|
||||
const [merchants, setMerchants] = useState<{ id: string; companyName: string }[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [merchantFilter, setMerchantFilter] = useState<string>('');
|
||||
const [platformFilter, setPlatformFilter] = useState<string>('');
|
||||
const [statusFilter, setStatusFilter] = useState<string>('');
|
||||
const [dateRange, setDateRange] = useState<[string, string] | null>(null);
|
||||
|
||||
const fetchOrders = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await getMerchantOrders();
|
||||
setOrders(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();
|
||||
fetchOrders();
|
||||
}, []);
|
||||
|
||||
const handleSearch = (value: string) => {
|
||||
setSearchText(value);
|
||||
};
|
||||
|
||||
const handleMerchantFilter = (value: string) => {
|
||||
setMerchantFilter(value);
|
||||
};
|
||||
|
||||
const handlePlatformFilter = (value: string) => {
|
||||
setPlatformFilter(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 filteredOrders = orders.filter(order => {
|
||||
const matchesSearch = order.orderId.includes(searchText) ||
|
||||
order.merchantName.toLowerCase().includes(searchText.toLowerCase());
|
||||
const matchesMerchant = merchantFilter ? order.merchantId === merchantFilter : true;
|
||||
const matchesPlatform = platformFilter ? order.platform === platformFilter : true;
|
||||
const matchesStatus = statusFilter ? order.status === statusFilter : true;
|
||||
return matchesSearch && matchesMerchant && matchesPlatform && matchesStatus;
|
||||
});
|
||||
|
||||
const handleView = (order: Order) => {
|
||||
// 跳转到订单详情页面
|
||||
message.info(`查看订单详情: ${order.orderId}`);
|
||||
};
|
||||
|
||||
const handleStatusUpdate = (order: Order, newStatus: Order['status']) => {
|
||||
// 调用API更新订单状态
|
||||
message.info(`更新订单 ${order.orderId} 状态为: ${newStatus}`);
|
||||
};
|
||||
|
||||
const handleRefresh = () => {
|
||||
fetchOrders();
|
||||
};
|
||||
|
||||
const getStatusTag = (status: string) => {
|
||||
const statusConfig: Record<string, { color: string; text: string }> = {
|
||||
PENDING: { color: 'blue', text: '待处理' },
|
||||
PROCESSING: { color: 'orange', text: '处理中' },
|
||||
SHIPPED: { color: 'purple', text: '已发货' },
|
||||
DELIVERED: { color: 'green', text: '已送达' },
|
||||
CANCELLED: { color: 'gray', text: '已取消' },
|
||||
REFUNDED: { 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: 'orderId',
|
||||
key: 'orderId',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '商户',
|
||||
dataIndex: 'merchantName',
|
||||
key: 'merchantName',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '平台',
|
||||
dataIndex: 'platform',
|
||||
key: 'platform',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
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, order: Order) => (
|
||||
<div>
|
||||
<Button
|
||||
icon={<EyeOutlined />}
|
||||
size="small"
|
||||
style={{ marginRight: 8 }}
|
||||
onClick={() => handleView(order)}
|
||||
>
|
||||
查看
|
||||
</Button>
|
||||
<Select
|
||||
defaultValue={order.status}
|
||||
style={{ width: 120 }}
|
||||
onChange={(value) => handleStatusUpdate(order, value)}
|
||||
>
|
||||
<Option value="PENDING">待处理</Option>
|
||||
<Option value="PROCESSING">处理中</Option>
|
||||
<Option value="SHIPPED">已发货</Option>
|
||||
<Option value="DELIVERED">已送达</Option>
|
||||
<Option value="CANCELLED">已取消</Option>
|
||||
<Option value="REFUNDED">已退款</Option>
|
||||
</Select>
|
||||
</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="搜索订单号或商户名称"
|
||||
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={handlePlatformFilter}
|
||||
allowClear
|
||||
>
|
||||
<Option value="Amazon">Amazon</Option>
|
||||
<Option value="eBay">eBay</Option>
|
||||
<Option value="Shopee">Shopee</Option>
|
||||
<Option value="TikTok">TikTok</Option>
|
||||
</Select>
|
||||
<Select
|
||||
placeholder="筛选状态"
|
||||
style={{ width: 120 }}
|
||||
onChange={handleStatusFilter}
|
||||
allowClear
|
||||
>
|
||||
<Option value="PENDING">待处理</Option>
|
||||
<Option value="PROCESSING">处理中</Option>
|
||||
<Option value="SHIPPED">已发货</Option>
|
||||
<Option value="DELIVERED">已送达</Option>
|
||||
<Option value="CANCELLED">已取消</Option>
|
||||
<Option value="REFUNDED">已退款</Option>
|
||||
</Select>
|
||||
<RangePicker
|
||||
placeholder={['开始日期', '结束日期']}
|
||||
onChange={handleDateRangeChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={filteredOrders}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50'],
|
||||
defaultPageSize: 10,
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default MerchantOrderManage;
|
||||
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;
|
||||
358
dashboard/src/pages/Merchant/MerchantShopManage.tsx
Normal file
358
dashboard/src/pages/Merchant/MerchantShopManage.tsx
Normal file
@@ -0,0 +1,358 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Table, Input, Button, Select, message, Card, Typography, Form, Modal } from 'antd';
|
||||
import { SearchOutlined, PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
|
||||
import { getMerchantShops, createMerchantShop, updateMerchantShop, deleteMerchantShop } from '../../services/merchantShopService';
|
||||
|
||||
const { Option } = Select;
|
||||
const { Title, Text } = Typography;
|
||||
const { Item } = Form;
|
||||
|
||||
interface Shop {
|
||||
id: string;
|
||||
merchantId: string;
|
||||
shopName: string;
|
||||
platform: string;
|
||||
shopUrl: string;
|
||||
status: 'ACTIVE' | 'INACTIVE' | 'SUSPENDED';
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
const MerchantShopManage: React.FC = () => {
|
||||
const [shops, setShops] = useState<Shop[]>([]);
|
||||
const [merchants, setMerchants] = useState<{ id: string; companyName: string }[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [merchantFilter, setMerchantFilter] = useState<string>('');
|
||||
const [platformFilter, setPlatformFilter] = useState<string>('');
|
||||
const [statusFilter, setStatusFilter] = useState<string>('');
|
||||
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||
const [form] = Form.useForm();
|
||||
const [editingShop, setEditingShop] = useState<Shop | null>(null);
|
||||
|
||||
const fetchShops = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await getMerchantShops();
|
||||
setShops(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();
|
||||
fetchShops();
|
||||
}, []);
|
||||
|
||||
const handleSearch = (value: string) => {
|
||||
setSearchText(value);
|
||||
};
|
||||
|
||||
const handleMerchantFilter = (value: string) => {
|
||||
setMerchantFilter(value);
|
||||
};
|
||||
|
||||
const handlePlatformFilter = (value: string) => {
|
||||
setPlatformFilter(value);
|
||||
};
|
||||
|
||||
const handleStatusFilter = (value: string) => {
|
||||
setStatusFilter(value);
|
||||
};
|
||||
|
||||
const filteredShops = shops.filter(shop => {
|
||||
const matchesSearch = shop.shopName.toLowerCase().includes(searchText.toLowerCase()) ||
|
||||
shop.shopUrl.toLowerCase().includes(searchText.toLowerCase());
|
||||
const matchesMerchant = merchantFilter ? shop.merchantId === merchantFilter : true;
|
||||
const matchesPlatform = platformFilter ? shop.platform === platformFilter : true;
|
||||
const matchesStatus = statusFilter ? shop.status === statusFilter : true;
|
||||
return matchesSearch && matchesMerchant && matchesPlatform && matchesStatus;
|
||||
});
|
||||
|
||||
const handleCreate = () => {
|
||||
setEditingShop(null);
|
||||
form.resetFields();
|
||||
setIsModalVisible(true);
|
||||
};
|
||||
|
||||
const handleEdit = (shop: Shop) => {
|
||||
setEditingShop(shop);
|
||||
form.setFieldsValue(shop);
|
||||
setIsModalVisible(true);
|
||||
};
|
||||
|
||||
const handleDelete = (shopId: string) => {
|
||||
// 确认删除后调用API
|
||||
message.info(`删除店铺: ${shopId}`);
|
||||
};
|
||||
|
||||
const handleView = (shop: Shop) => {
|
||||
// 跳转到店铺详情页面
|
||||
message.info(`查看店铺详情: ${shop.shopName}`);
|
||||
};
|
||||
|
||||
const handleOk = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
if (editingShop) {
|
||||
// 编辑店铺
|
||||
await updateMerchantShop(editingShop.id, values);
|
||||
message.success('店铺更新成功');
|
||||
} else {
|
||||
// 创建店铺
|
||||
await createMerchantShop(values);
|
||||
message.success('店铺创建成功');
|
||||
}
|
||||
setIsModalVisible(false);
|
||||
fetchShops();
|
||||
} catch (error) {
|
||||
message.error('操作失败');
|
||||
console.error('操作失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setIsModalVisible(false);
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '店铺ID',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '商户',
|
||||
dataIndex: 'merchantId',
|
||||
key: 'merchantId',
|
||||
render: (merchantId: string) => {
|
||||
const merchant = merchants.find(m => m.id === merchantId);
|
||||
return <Text>{merchant?.companyName || merchantId}</Text>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '店铺名称',
|
||||
dataIndex: 'shopName',
|
||||
key: 'shopName',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '平台',
|
||||
dataIndex: 'platform',
|
||||
key: 'platform',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '店铺链接',
|
||||
dataIndex: 'shopUrl',
|
||||
key: 'shopUrl',
|
||||
ellipsis: true,
|
||||
render: (shopUrl: string) => (
|
||||
<a href={shopUrl} target="_blank" rel="noopener noreferrer">
|
||||
{shopUrl}
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
render: (status: string) => {
|
||||
const statusMap: Record<string, string> = {
|
||||
ACTIVE: '活跃',
|
||||
INACTIVE: '未激活',
|
||||
SUSPENDED: '暂停',
|
||||
};
|
||||
return <Text>{statusMap[status] || status}</Text>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createdAt',
|
||||
key: 'createdAt',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
render: (_: any, shop: Shop) => (
|
||||
<div>
|
||||
<Button
|
||||
icon={<EyeOutlined />}
|
||||
size="small"
|
||||
style={{ marginRight: 8 }}
|
||||
onClick={() => handleView(shop)}
|
||||
>
|
||||
查看
|
||||
</Button>
|
||||
<Button
|
||||
icon={<EditOutlined />}
|
||||
size="small"
|
||||
style={{ marginRight: 8 }}
|
||||
onClick={() => handleEdit(shop)}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
icon={<DeleteOutlined />}
|
||||
size="small"
|
||||
danger
|
||||
onClick={() => handleDelete(shop.id)}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
|
||||
<Title level={4}>商户店铺管理</Title>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={handleCreate}
|
||||
>
|
||||
新增店铺
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', marginBottom: 16, gap: 16, flexWrap: 'wrap' }}>
|
||||
<Input
|
||||
placeholder="搜索店铺名称或链接"
|
||||
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={handlePlatformFilter}
|
||||
allowClear
|
||||
>
|
||||
<Option value="Amazon">Amazon</Option>
|
||||
<Option value="eBay">eBay</Option>
|
||||
<Option value="Shopee">Shopee</Option>
|
||||
<Option value="TikTok">TikTok</Option>
|
||||
</Select>
|
||||
<Select
|
||||
placeholder="筛选状态"
|
||||
style={{ width: 120 }}
|
||||
onChange={handleStatusFilter}
|
||||
allowClear
|
||||
>
|
||||
<Option value="ACTIVE">活跃</Option>
|
||||
<Option value="INACTIVE">未激活</Option>
|
||||
<Option value="SUSPENDED">暂停</Option>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={filteredShops}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50'],
|
||||
defaultPageSize: 10,
|
||||
}}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
title={editingShop ? '编辑店铺' : '新增店铺'}
|
||||
open={isModalVisible}
|
||||
onOk={handleOk}
|
||||
onCancel={handleCancel}
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
<Item
|
||||
name="merchantId"
|
||||
label="商户"
|
||||
rules={[{ required: true, message: '请选择商户' }]}
|
||||
>
|
||||
<Select placeholder="选择商户">
|
||||
{merchants.map(merchant => (
|
||||
<Option key={merchant.id} value={merchant.id}>
|
||||
{merchant.companyName}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Item>
|
||||
<Item
|
||||
name="shopName"
|
||||
label="店铺名称"
|
||||
rules={[{ required: true, message: '请输入店铺名称' }]}
|
||||
>
|
||||
<Input placeholder="请输入店铺名称" />
|
||||
</Item>
|
||||
<Item
|
||||
name="platform"
|
||||
label="平台"
|
||||
rules={[{ required: true, message: '请选择平台' }]}
|
||||
>
|
||||
<Select placeholder="选择平台">
|
||||
<Option value="Amazon">Amazon</Option>
|
||||
<Option value="eBay">eBay</Option>
|
||||
<Option value="Shopee">Shopee</Option>
|
||||
<Option value="TikTok">TikTok</Option>
|
||||
</Select>
|
||||
</Item>
|
||||
<Item
|
||||
name="shopUrl"
|
||||
label="店铺链接"
|
||||
rules={[{ required: true, message: '请输入店铺链接' }]}
|
||||
>
|
||||
<Input placeholder="请输入店铺链接" />
|
||||
</Item>
|
||||
<Item
|
||||
name="status"
|
||||
label="状态"
|
||||
rules={[{ required: true, message: '请选择状态' }]}
|
||||
>
|
||||
<Select placeholder="选择状态">
|
||||
<Option value="ACTIVE">活跃</Option>
|
||||
<Option value="INACTIVE">未激活</Option>
|
||||
<Option value="SUSPENDED">暂停</Option>
|
||||
</Select>
|
||||
</Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default MerchantShopManage;
|
||||
18
dashboard/src/pages/Merchant/index.ts
Normal file
18
dashboard/src/pages/Merchant/index.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import MerchantManage from './MerchantManage';
|
||||
import MerchantShopManage from './MerchantShopManage';
|
||||
import MerchantOrderManage from './MerchantOrderManage';
|
||||
import MerchantSettlementManage from './MerchantSettlementManage';
|
||||
|
||||
export {
|
||||
MerchantManage,
|
||||
MerchantShopManage,
|
||||
MerchantOrderManage,
|
||||
MerchantSettlementManage,
|
||||
};
|
||||
|
||||
export default {
|
||||
MerchantManage,
|
||||
MerchantShopManage,
|
||||
MerchantOrderManage,
|
||||
MerchantSettlementManage,
|
||||
};
|
||||
Reference in New Issue
Block a user