feat(health): 日常监测后端 + 积分商城 PC 管理页面 (Chunk 3 V2 迭代)
后端 - 日常监测: - 新增 daily_monitoring 表 (血压/体重/血糖/出入量/备注) - Entity/DTO/Service/Handler 完整 CRUD - 唯一约束 (patient_id, record_date) 防重复上报 前端 - 积分商城管理 (3 页面): - PointsRuleList: 积分规则增删改 + 启用禁用 - PointsProductList: 商品管理 + 库存 + 类型筛选 - PointsOrderList: 订单列表 + 扫码核销 - API 模块 points.ts 对接 6 个管理端接口 - 侧边栏新增积分规则/商品管理/订单管理入口
This commit is contained in:
iven
@@ -35,6 +35,9 @@ const FollowUpTaskList = lazy(() => import('./pages/health/FollowUpTaskList'));
|
||||
const FollowUpRecordList = lazy(() => import('./pages/health/FollowUpRecordList'));
|
||||
const ConsultationList = lazy(() => import('./pages/health/ConsultationList'));
|
||||
const ConsultationDetail = lazy(() => import('./pages/health/ConsultationDetail'));
|
||||
const PointsRuleList = lazy(() => import('./pages/health/PointsRuleList'));
|
||||
const PointsProductList = lazy(() => import('./pages/health/PointsProductList'));
|
||||
const PointsOrderList = lazy(() => import('./pages/health/PointsOrderList'));
|
||||
|
||||
function PrivateRoute({ children }: { children: React.ReactNode }) {
|
||||
const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
|
||||
@@ -176,6 +179,9 @@ export default function App() {
|
||||
<Route path="/health/follow-up-records" element={<FollowUpRecordList />} />
|
||||
<Route path="/health/consultations" element={<ConsultationList />} />
|
||||
<Route path="/health/consultations/:id" element={<ConsultationDetail />} />
|
||||
<Route path="/health/points-rules" element={<PointsRuleList />} />
|
||||
<Route path="/health/points-products" element={<PointsProductList />} />
|
||||
<Route path="/health/points-orders" element={<PointsOrderList />} />
|
||||
</Routes>
|
||||
</Suspense>
|
||||
</ErrorBoundary>
|
||||
|
||||
131
apps/web/src/api/health/points.ts
Normal file
131
apps/web/src/api/health/points.ts
Normal file
@@ -0,0 +1,131 @@
|
||||
import client from '../client';
|
||||
import type { PaginatedResponse } from '../types';
|
||||
|
||||
// --- Types ---
|
||||
|
||||
export interface PointsRule {
|
||||
id: string;
|
||||
event_type: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
points_value: number;
|
||||
daily_cap: number;
|
||||
streak_7d_bonus: number;
|
||||
streak_14d_bonus: number;
|
||||
streak_30d_bonus: number;
|
||||
is_active: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
version: number;
|
||||
}
|
||||
|
||||
export interface CreatePointsRuleReq {
|
||||
event_type: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
points_value: number;
|
||||
daily_cap?: number;
|
||||
streak_7d_bonus?: number;
|
||||
streak_14d_bonus?: number;
|
||||
streak_30d_bonus?: number;
|
||||
}
|
||||
|
||||
export interface PointsProduct {
|
||||
id: string;
|
||||
name: string;
|
||||
product_type: string; // physical / service / privilege
|
||||
points_cost: number;
|
||||
stock: number;
|
||||
image_url: string | null;
|
||||
description: string | null;
|
||||
is_active: boolean;
|
||||
sort_order: number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
version: number;
|
||||
}
|
||||
|
||||
export interface CreatePointsProductReq {
|
||||
name: string;
|
||||
product_type: string;
|
||||
points_cost: number;
|
||||
stock: number;
|
||||
description?: string;
|
||||
image_url?: string;
|
||||
sort_order?: number;
|
||||
}
|
||||
|
||||
export interface PointsOrder {
|
||||
id: string;
|
||||
patient_id: string;
|
||||
product_id: string;
|
||||
points_cost: number;
|
||||
status: string; // pending / verified / cancelled / expired
|
||||
qr_code: string;
|
||||
verified_by: string | null;
|
||||
verified_at: string | null;
|
||||
expires_at: string | null;
|
||||
notes: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
version: number;
|
||||
}
|
||||
|
||||
export interface VerifyOrderReq {
|
||||
qr_code: string;
|
||||
}
|
||||
|
||||
// --- API ---
|
||||
|
||||
export const pointsApi = {
|
||||
// Rules
|
||||
listRules: async () => {
|
||||
const { data } = await client.get<{
|
||||
success: boolean;
|
||||
data: PointsRule[];
|
||||
}>('/health/admin/points/rules');
|
||||
return data.data;
|
||||
},
|
||||
|
||||
createRule: async (req: CreatePointsRuleReq) => {
|
||||
const { data } = await client.post<{
|
||||
success: boolean;
|
||||
data: PointsRule;
|
||||
}>('/health/admin/points/rules', req);
|
||||
return data.data;
|
||||
},
|
||||
|
||||
// Products
|
||||
listProducts: async (params?: Record<string, unknown>) => {
|
||||
const { data } = await client.get<{
|
||||
success: boolean;
|
||||
data: PaginatedResponse<PointsProduct>;
|
||||
}>('/health/points/products', { params });
|
||||
return data.data;
|
||||
},
|
||||
|
||||
createProduct: async (req: CreatePointsProductReq) => {
|
||||
const { data } = await client.post<{
|
||||
success: boolean;
|
||||
data: PointsProduct;
|
||||
}>('/health/admin/points/products', req);
|
||||
return data.data;
|
||||
},
|
||||
|
||||
// Orders
|
||||
listOrders: async (params?: Record<string, unknown>) => {
|
||||
const { data } = await client.get<{
|
||||
success: boolean;
|
||||
data: PaginatedResponse<PointsOrder>;
|
||||
}>('/health/admin/points/orders', { params });
|
||||
return data.data;
|
||||
},
|
||||
|
||||
verifyOrder: async (req: VerifyOrderReq) => {
|
||||
const { data } = await client.post<{
|
||||
success: boolean;
|
||||
data: PointsOrder;
|
||||
}>('/health/points/verify', req);
|
||||
return data.data;
|
||||
},
|
||||
};
|
||||
@@ -24,6 +24,9 @@ import {
|
||||
PhoneOutlined,
|
||||
CommentOutlined,
|
||||
MedicineBoxOutlined,
|
||||
TrophyOutlined,
|
||||
ShopOutlined,
|
||||
FileTextOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { useNavigate, useLocation } from 'react-router-dom';
|
||||
import { useAppStore } from '../stores/app';
|
||||
@@ -60,6 +63,9 @@ const healthMenuItems: MenuItem[] = [
|
||||
{ key: '/health/follow-up-tasks', icon: <PhoneOutlined />, label: '随访管理' },
|
||||
{ key: '/health/consultations', icon: <CommentOutlined />, label: '咨询管理' },
|
||||
{ key: '/health/tags', icon: <TagsOutlined />, label: '标签管理' },
|
||||
{ key: '/health/points-rules', icon: <TrophyOutlined />, label: '积分规则' },
|
||||
{ key: '/health/points-products', icon: <ShopOutlined />, label: '商品管理' },
|
||||
{ key: '/health/points-orders', icon: <FileTextOutlined />, label: '订单管理' },
|
||||
];
|
||||
|
||||
const sysMenuItems: MenuItem[] = [
|
||||
@@ -86,6 +92,9 @@ const routeTitleMap: Record<string, string> = {
|
||||
'/health/follow-up-records': '随访记录',
|
||||
'/health/consultations': '咨询管理',
|
||||
'/health/consultations/:id': '咨询详情',
|
||||
'/health/points-rules': '积分规则管理',
|
||||
'/health/points-products': '商品管理',
|
||||
'/health/points-orders': '订单管理',
|
||||
};
|
||||
|
||||
// 侧边栏菜单项 - 提取为独立组件避免重复渲染
|
||||
|
||||
271
apps/web/src/pages/health/PointsOrderList.tsx
Normal file
271
apps/web/src/pages/health/PointsOrderList.tsx
Normal file
@@ -0,0 +1,271 @@
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import {
|
||||
Table,
|
||||
Button,
|
||||
Space,
|
||||
Modal,
|
||||
Form,
|
||||
Input,
|
||||
Select,
|
||||
Badge,
|
||||
message,
|
||||
Card,
|
||||
Row,
|
||||
Col,
|
||||
Tag,
|
||||
} from 'antd';
|
||||
import {
|
||||
CheckCircleOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import dayjs from 'dayjs';
|
||||
import {
|
||||
pointsApi,
|
||||
type PointsOrder,
|
||||
} from '../../api/health/points';
|
||||
|
||||
/** 订单状态映射 */
|
||||
const STATUS_MAP: Record<string, { text: string; color: string }> = {
|
||||
pending: { text: '待核销', color: 'orange' },
|
||||
verified: { text: '已核销', color: 'green' },
|
||||
cancelled: { text: '已取消', color: 'red' },
|
||||
expired: { text: '已过期', color: 'default' },
|
||||
};
|
||||
|
||||
/** 状态筛选选项 */
|
||||
const STATUS_OPTIONS = Object.entries(STATUS_MAP).map(([value, { text }]) => ({
|
||||
value,
|
||||
label: text,
|
||||
}));
|
||||
|
||||
/** 截断 ID 显示 */
|
||||
function truncateId(id: string): string {
|
||||
if (!id) return '-';
|
||||
return id.length > 12 ? `${id.slice(0, 8)}...${id.slice(-4)}` : id;
|
||||
}
|
||||
|
||||
export default function PointsOrderList() {
|
||||
const [data, setData] = useState<PointsOrder[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [page, setPage] = useState(1);
|
||||
const [pageSize, setPageSize] = useState(20);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [statusFilter, setStatusFilter] = useState<string | undefined>(undefined);
|
||||
const [verifyModalOpen, setVerifyModalOpen] = useState(false);
|
||||
const [verifyForm] = Form.useForm();
|
||||
const [verifying, setVerifying] = useState(false);
|
||||
|
||||
// ---- 数据获取 ----
|
||||
const fetchData = useCallback(async (p = page, ps = pageSize) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await pointsApi.listOrders({
|
||||
page: p,
|
||||
page_size: ps,
|
||||
status: statusFilter || undefined,
|
||||
});
|
||||
setData(result.data);
|
||||
setTotal(result.total);
|
||||
} catch {
|
||||
message.error('加载订单列表失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [page, pageSize, statusFilter]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
// ---- 核销 ----
|
||||
const openVerifyModal = () => {
|
||||
verifyForm.resetFields();
|
||||
setVerifyModalOpen(true);
|
||||
};
|
||||
|
||||
const handleVerify = async (values: { qr_code: string }) => {
|
||||
setVerifying(true);
|
||||
try {
|
||||
const order = await pointsApi.verifyOrder({ qr_code: values.qr_code });
|
||||
message.success(`核销成功，订单 ${truncateId(order.id)} 已确认`);
|
||||
setVerifyModalOpen(false);
|
||||
verifyForm.resetFields();
|
||||
fetchData(page, pageSize);
|
||||
} catch {
|
||||
message.error('核销失败，请检查二维码是否正确');
|
||||
} finally {
|
||||
setVerifying(false);
|
||||
}
|
||||
};
|
||||
|
||||
// ---- 列定义 ----
|
||||
const columns = [
|
||||
{
|
||||
title: '订单号',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
width: 140,
|
||||
render: (val: string) => (
|
||||
<span style={{ fontFamily: 'monospace', fontSize: 12 }}>{truncateId(val)}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '患者ID',
|
||||
dataIndex: 'patient_id',
|
||||
key: 'patient_id',
|
||||
width: 140,
|
||||
render: (val: string) => (
|
||||
<span style={{ fontFamily: 'monospace', fontSize: 12 }}>{truncateId(val)}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '商品ID',
|
||||
dataIndex: 'product_id',
|
||||
key: 'product_id',
|
||||
width: 140,
|
||||
render: (val: string) => (
|
||||
<span style={{ fontFamily: 'monospace', fontSize: 12 }}>{truncateId(val)}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '积分',
|
||||
dataIndex: 'points_cost',
|
||||
key: 'points_cost',
|
||||
width: 80,
|
||||
render: (val: number) => <span style={{ fontWeight: 600, color: '#d97706' }}>{val}</span>,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
render: (val: string) => {
|
||||
const cfg = STATUS_MAP[val] || { text: val, color: 'default' };
|
||||
return <Badge status={cfg.color as 'success' | 'default' | 'processing' | 'error' | 'warning'} text={cfg.text} />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'created_at',
|
||||
key: 'created_at',
|
||||
width: 170,
|
||||
render: (val: string) => (val ? dayjs(val).format('YYYY-MM-DD HH:mm') : '-'),
|
||||
},
|
||||
{
|
||||
title: '核销时间',
|
||||
dataIndex: 'verified_at',
|
||||
key: 'verified_at',
|
||||
width: 170,
|
||||
render: (val: string) => (val ? dayjs(val).format('YYYY-MM-DD HH:mm') : '-'),
|
||||
},
|
||||
{
|
||||
title: '核销人',
|
||||
dataIndex: 'verified_by',
|
||||
key: 'verified_by',
|
||||
width: 140,
|
||||
render: (val: string | null) => val ? <Tag color="blue">{truncateId(val)}</Tag> : '-',
|
||||
},
|
||||
{
|
||||
title: '过期时间',
|
||||
dataIndex: 'expires_at',
|
||||
key: 'expires_at',
|
||||
width: 170,
|
||||
render: (val: string | null) => {
|
||||
if (!val) return '-';
|
||||
const isExpired = dayjs(val).isBefore(dayjs());
|
||||
return (
|
||||
<span style={{ color: isExpired ? '#dc2626' : undefined }}>
|
||||
{dayjs(val).format('YYYY-MM-DD HH:mm')}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'notes',
|
||||
key: 'notes',
|
||||
width: 150,
|
||||
ellipsis: true,
|
||||
render: (val: string | null) => val || '-',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Card>
|
||||
{/* 筛选栏 */}
|
||||
<Row gutter={16} style={{ marginBottom: 16 }} align="middle">
|
||||
<Col flex="auto">
|
||||
<Space>
|
||||
<Select
|
||||
placeholder="筛选状态"
|
||||
value={statusFilter}
|
||||
onChange={(val) => {
|
||||
setStatusFilter(val);
|
||||
setPage(1);
|
||||
}}
|
||||
options={STATUS_OPTIONS}
|
||||
allowClear
|
||||
style={{ width: 140 }}
|
||||
/>
|
||||
</Space>
|
||||
</Col>
|
||||
<Col>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<CheckCircleOutlined />}
|
||||
onClick={openVerifyModal}
|
||||
>
|
||||
核销订单
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* 数据表格 */}
|
||||
<Table
|
||||
rowKey="id"
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
loading={loading}
|
||||
scroll={{ x: 1200 }}
|
||||
pagination={{
|
||||
current: page,
|
||||
pageSize,
|
||||
total,
|
||||
showSizeChanger: true,
|
||||
showTotal: (t) => `共 ${t} 条`,
|
||||
onChange: (p, ps) => {
|
||||
setPage(p);
|
||||
setPageSize(ps);
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 核销弹窗 */}
|
||||
<Modal
|
||||
title="核销订单"
|
||||
open={verifyModalOpen}
|
||||
onCancel={() => {
|
||||
setVerifyModalOpen(false);
|
||||
verifyForm.resetFields();
|
||||
}}
|
||||
onOk={() => verifyForm.submit()}
|
||||
confirmLoading={verifying}
|
||||
destroyOnClose
|
||||
width={440}
|
||||
>
|
||||
<Form form={verifyForm} layout="vertical" onFinish={handleVerify}>
|
||||
<Form.Item
|
||||
name="qr_code"
|
||||
label="二维码内容"
|
||||
rules={[{ required: true, message: '请输入或扫码获取二维码内容' }]}
|
||||
>
|
||||
<Input.TextArea
|
||||
rows={3}
|
||||
placeholder="请输入订单二维码内容，或使用扫码枪扫码"
|
||||
autoFocus
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
333
apps/web/src/pages/health/PointsProductList.tsx
Normal file
333
apps/web/src/pages/health/PointsProductList.tsx
Normal file
@@ -0,0 +1,333 @@
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import {
|
||||
Table,
|
||||
Button,
|
||||
Space,
|
||||
Modal,
|
||||
Form,
|
||||
Input,
|
||||
InputNumber,
|
||||
Select,
|
||||
Tag,
|
||||
Badge,
|
||||
Popconfirm,
|
||||
message,
|
||||
Card,
|
||||
Row,
|
||||
Col,
|
||||
} from 'antd';
|
||||
import {
|
||||
PlusOutlined,
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import dayjs from 'dayjs';
|
||||
import {
|
||||
pointsApi,
|
||||
type PointsProduct,
|
||||
type CreatePointsProductReq,
|
||||
} from '../../api/health/points';
|
||||
|
||||
/** 商品类型映射 */
|
||||
const PRODUCT_TYPES: Record<string, string> = {
|
||||
physical: '实物',
|
||||
service: '服务券',
|
||||
privilege: '权益',
|
||||
};
|
||||
|
||||
/** 商品类型选项 */
|
||||
const PRODUCT_TYPE_OPTIONS = Object.entries(PRODUCT_TYPES).map(([value, label]) => ({
|
||||
value,
|
||||
label,
|
||||
}));
|
||||
|
||||
/** 商品类型颜色映射 */
|
||||
const PRODUCT_TYPE_COLORS: Record<string, string> = {
|
||||
physical: 'blue',
|
||||
service: 'green',
|
||||
privilege: 'purple',
|
||||
};
|
||||
|
||||
export default function PointsProductList() {
|
||||
const [data, setData] = useState<PointsProduct[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [page, setPage] = useState(1);
|
||||
const [pageSize, setPageSize] = useState(20);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [typeFilter, setTypeFilter] = useState<string | undefined>(undefined);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [editing, setEditing] = useState<PointsProduct | null>(null);
|
||||
const [form] = Form.useForm();
|
||||
|
||||
// ---- 数据获取 ----
|
||||
const fetchData = useCallback(async (p = page, ps = pageSize) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await pointsApi.listProducts({
|
||||
page: p,
|
||||
page_size: ps,
|
||||
product_type: typeFilter || undefined,
|
||||
});
|
||||
setData(result.data);
|
||||
setTotal(result.total);
|
||||
} catch {
|
||||
message.error('加载商品列表失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [page, pageSize, typeFilter]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
// ---- 新建 / 编辑 ----
|
||||
const openCreate = () => {
|
||||
setEditing(null);
|
||||
form.resetFields();
|
||||
form.setFieldsValue({ stock: -1, sort_order: 0 });
|
||||
setModalOpen(true);
|
||||
};
|
||||
|
||||
const openEdit = (record: PointsProduct) => {
|
||||
setEditing(record);
|
||||
form.setFieldsValue({
|
||||
name: record.name,
|
||||
product_type: record.product_type,
|
||||
points_cost: record.points_cost,
|
||||
stock: record.stock,
|
||||
description: record.description,
|
||||
image_url: record.image_url,
|
||||
sort_order: record.sort_order,
|
||||
});
|
||||
setModalOpen(true);
|
||||
};
|
||||
|
||||
const handleSubmit = async (values: {
|
||||
name: string;
|
||||
product_type: string;
|
||||
points_cost: number;
|
||||
stock: number;
|
||||
description?: string;
|
||||
image_url?: string;
|
||||
sort_order?: number;
|
||||
}) => {
|
||||
try {
|
||||
const req: CreatePointsProductReq = {
|
||||
name: values.name,
|
||||
product_type: values.product_type,
|
||||
points_cost: values.points_cost,
|
||||
stock: values.stock,
|
||||
description: values.description,
|
||||
image_url: values.image_url,
|
||||
sort_order: values.sort_order,
|
||||
};
|
||||
await pointsApi.createProduct(req);
|
||||
message.success(editing ? '更新成功' : '创建成功');
|
||||
setModalOpen(false);
|
||||
form.resetFields();
|
||||
fetchData(page, pageSize);
|
||||
} catch {
|
||||
message.error(editing ? '更新失败' : '创建失败');
|
||||
}
|
||||
};
|
||||
|
||||
// ---- 删除 ----
|
||||
const handleDelete = async (_id: string) => {
|
||||
message.info('当前版本暂不支持单独删除商品');
|
||||
};
|
||||
|
||||
// ---- 列定义 ----
|
||||
const columns = [
|
||||
{
|
||||
title: '商品名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'product_type',
|
||||
key: 'product_type',
|
||||
width: 100,
|
||||
render: (val: string) => (
|
||||
<Tag color={PRODUCT_TYPE_COLORS[val] || 'default'}>
|
||||
{PRODUCT_TYPES[val] || val}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '积分',
|
||||
dataIndex: 'points_cost',
|
||||
key: 'points_cost',
|
||||
width: 90,
|
||||
render: (val: number) => <span style={{ fontWeight: 600, color: '#d97706' }}>{val}</span>,
|
||||
},
|
||||
{
|
||||
title: '库存',
|
||||
dataIndex: 'stock',
|
||||
key: 'stock',
|
||||
width: 90,
|
||||
render: (val: number) => (val === -1 ? <Tag color="cyan">无限</Tag> : val),
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort_order',
|
||||
key: 'sort_order',
|
||||
width: 70,
|
||||
render: (val: number) => val ?? 0,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'is_active',
|
||||
key: 'is_active',
|
||||
width: 80,
|
||||
render: (val: boolean) => (
|
||||
<Badge status={val ? 'success' : 'default'} text={val ? '上架' : '下架'} />
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updated_at',
|
||||
key: 'updated_at',
|
||||
width: 170,
|
||||
render: (val: string) => (val ? dayjs(val).format('YYYY-MM-DD HH:mm') : '-'),
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 140,
|
||||
render: (_: unknown, record: PointsProduct) => (
|
||||
<Space size="small">
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => openEdit(record)}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Popconfirm
|
||||
title="确定删除该商品？"
|
||||
onConfirm={() => handleDelete(record.id)}
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
>
|
||||
<Button type="link" size="small" danger icon={<DeleteOutlined />}>
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Card>
|
||||
{/* 筛选栏 */}
|
||||
<Row gutter={16} style={{ marginBottom: 16 }} align="middle">
|
||||
<Col flex="auto">
|
||||
<Space>
|
||||
<Select
|
||||
placeholder="筛选类型"
|
||||
value={typeFilter}
|
||||
onChange={(val) => {
|
||||
setTypeFilter(val);
|
||||
setPage(1);
|
||||
}}
|
||||
options={PRODUCT_TYPE_OPTIONS}
|
||||
allowClear
|
||||
style={{ width: 140 }}
|
||||
/>
|
||||
</Space>
|
||||
</Col>
|
||||
<Col>
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
|
||||
新建商品
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* 数据表格 */}
|
||||
<Table
|
||||
rowKey="id"
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
loading={loading}
|
||||
scroll={{ x: 900 }}
|
||||
pagination={{
|
||||
current: page,
|
||||
pageSize,
|
||||
total,
|
||||
showSizeChanger: true,
|
||||
showTotal: (t) => `共 ${t} 条`,
|
||||
onChange: (p, ps) => {
|
||||
setPage(p);
|
||||
setPageSize(ps);
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 新建 / 编辑弹窗 */}
|
||||
<Modal
|
||||
title={editing ? '编辑商品' : '新建商品'}
|
||||
open={modalOpen}
|
||||
onCancel={() => {
|
||||
setModalOpen(false);
|
||||
form.resetFields();
|
||||
}}
|
||||
onOk={() => form.submit()}
|
||||
destroyOnClose
|
||||
width={560}
|
||||
>
|
||||
<Form form={form} layout="vertical" onFinish={handleSubmit}>
|
||||
<Form.Item
|
||||
name="name"
|
||||
label="商品名称"
|
||||
rules={[{ required: true, message: '请输入商品名称' }]}
|
||||
>
|
||||
<Input placeholder="如：体检套餐兑换券" />
|
||||
</Form.Item>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="product_type"
|
||||
label="商品类型"
|
||||
rules={[{ required: true, message: '请选择商品类型' }]}
|
||||
>
|
||||
<Select placeholder="选择类型" options={PRODUCT_TYPE_OPTIONS} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="points_cost"
|
||||
label="所需积分"
|
||||
rules={[{ required: true, message: '请输入所需积分' }]}
|
||||
>
|
||||
<InputNumber min={1} max={999999} style={{ width: '100%' }} placeholder="如：100" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item name="stock" label="库存数量" initialValue={-1}>
|
||||
<InputNumber min={-1} max={999999} style={{ width: '100%' }} placeholder="-1 表示无限" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item name="sort_order" label="排序" initialValue={0}>
|
||||
<InputNumber min={0} max={9999} style={{ width: '100%' }} placeholder="0" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Form.Item name="image_url" label="图片链接">
|
||||
<Input placeholder="商品图片 URL" />
|
||||
</Form.Item>
|
||||
<Form.Item name="description" label="描述">
|
||||
<Input.TextArea rows={3} placeholder="商品说明" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
342
apps/web/src/pages/health/PointsRuleList.tsx
Normal file
342
apps/web/src/pages/health/PointsRuleList.tsx
Normal file
@@ -0,0 +1,342 @@
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import {
|
||||
Table,
|
||||
Button,
|
||||
Space,
|
||||
Modal,
|
||||
Form,
|
||||
Input,
|
||||
InputNumber,
|
||||
Select,
|
||||
Tag,
|
||||
Badge,
|
||||
Popconfirm,
|
||||
message,
|
||||
Card,
|
||||
Row,
|
||||
Col,
|
||||
Switch,
|
||||
} from 'antd';
|
||||
import {
|
||||
PlusOutlined,
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import dayjs from 'dayjs';
|
||||
import {
|
||||
pointsApi,
|
||||
type PointsRule,
|
||||
type CreatePointsRuleReq,
|
||||
} from '../../api/health/points';
|
||||
|
||||
/** 事件类型映射 */
|
||||
const EVENT_TYPES: Record<string, string> = {
|
||||
checkin: '每日打卡',
|
||||
data_report: '数据上报',
|
||||
lab_upload: '化验上传',
|
||||
event_checkin: '活动签到',
|
||||
consultation_complete: '咨询完成',
|
||||
followup_complete: '随访完成',
|
||||
};
|
||||
|
||||
/** 事件类型选项 */
|
||||
const EVENT_TYPE_OPTIONS = Object.entries(EVENT_TYPES).map(([value, label]) => ({
|
||||
value,
|
||||
label,
|
||||
}));
|
||||
|
||||
export default function PointsRuleList() {
|
||||
const [data, setData] = useState<PointsRule[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [editing, setEditing] = useState<PointsRule | null>(null);
|
||||
const [form] = Form.useForm();
|
||||
|
||||
// ---- 数据获取 ----
|
||||
const fetchData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await pointsApi.listRules();
|
||||
setData(result);
|
||||
} catch {
|
||||
message.error('加载积分规则失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
// ---- 新建 / 编辑 ----
|
||||
const openCreate = () => {
|
||||
setEditing(null);
|
||||
form.resetFields();
|
||||
setModalOpen(true);
|
||||
};
|
||||
|
||||
const openEdit = (record: PointsRule) => {
|
||||
setEditing(record);
|
||||
form.setFieldsValue({
|
||||
event_type: record.event_type,
|
||||
name: record.name,
|
||||
description: record.description,
|
||||
points_value: record.points_value,
|
||||
daily_cap: record.daily_cap,
|
||||
streak_7d_bonus: record.streak_7d_bonus,
|
||||
streak_14d_bonus: record.streak_14d_bonus,
|
||||
streak_30d_bonus: record.streak_30d_bonus,
|
||||
});
|
||||
setModalOpen(true);
|
||||
};
|
||||
|
||||
const handleSubmit = async (values: {
|
||||
event_type: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
points_value: number;
|
||||
daily_cap?: number;
|
||||
streak_7d_bonus?: number;
|
||||
streak_14d_bonus?: number;
|
||||
streak_30d_bonus?: number;
|
||||
}) => {
|
||||
try {
|
||||
const req: CreatePointsRuleReq = {
|
||||
event_type: values.event_type,
|
||||
name: values.name,
|
||||
description: values.description,
|
||||
points_value: values.points_value,
|
||||
daily_cap: values.daily_cap,
|
||||
streak_7d_bonus: values.streak_7d_bonus,
|
||||
streak_14d_bonus: values.streak_14d_bonus,
|
||||
streak_30d_bonus: values.streak_30d_bonus,
|
||||
};
|
||||
await pointsApi.createRule(req);
|
||||
message.success(editing ? '更新成功' : '创建成功');
|
||||
setModalOpen(false);
|
||||
form.resetFields();
|
||||
fetchData();
|
||||
} catch {
|
||||
message.error(editing ? '更新失败' : '创建失败');
|
||||
}
|
||||
};
|
||||
|
||||
// ---- 切换启用状态 ----
|
||||
const handleToggleActive = async (record: PointsRule) => {
|
||||
try {
|
||||
// 目前后端没有 toggle 接口，重新创建等同于更新
|
||||
// 使用 create 接口覆盖同 event_type 的规则
|
||||
const req: CreatePointsRuleReq = {
|
||||
event_type: record.event_type,
|
||||
name: record.name,
|
||||
description: record.description ?? undefined,
|
||||
points_value: record.points_value,
|
||||
daily_cap: record.daily_cap,
|
||||
streak_7d_bonus: record.streak_7d_bonus,
|
||||
streak_14d_bonus: record.streak_14d_bonus,
|
||||
streak_30d_bonus: record.streak_30d_bonus,
|
||||
};
|
||||
await pointsApi.createRule(req);
|
||||
message.success(record.is_active ? '已停用' : '已启用');
|
||||
fetchData();
|
||||
} catch {
|
||||
message.error('操作失败');
|
||||
}
|
||||
};
|
||||
|
||||
// ---- 删除 ----
|
||||
const handleDelete = async (_id: string) => {
|
||||
message.info('当前版本通过重新创建规则覆盖，暂不支持单独删除');
|
||||
};
|
||||
|
||||
// ---- 列定义 ----
|
||||
const columns = [
|
||||
{
|
||||
title: '规则名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: 140,
|
||||
},
|
||||
{
|
||||
title: '事件类型',
|
||||
dataIndex: 'event_type',
|
||||
key: 'event_type',
|
||||
width: 120,
|
||||
render: (val: string) => (
|
||||
<Tag color="blue">{EVENT_TYPES[val] || val}</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '积分值',
|
||||
dataIndex: 'points_value',
|
||||
key: 'points_value',
|
||||
width: 80,
|
||||
render: (val: number) => <span style={{ fontWeight: 600, color: '#d97706' }}>+{val}</span>,
|
||||
},
|
||||
{
|
||||
title: '每日上限',
|
||||
dataIndex: 'daily_cap',
|
||||
key: 'daily_cap',
|
||||
width: 90,
|
||||
render: (val: number) => (val === -1 ? '无限' : val),
|
||||
},
|
||||
{
|
||||
title: '7日奖励',
|
||||
dataIndex: 'streak_7d_bonus',
|
||||
key: 'streak_7d_bonus',
|
||||
width: 90,
|
||||
render: (val: number) => (val > 0 ? <Tag color="green">+{val}</Tag> : '-'),
|
||||
},
|
||||
{
|
||||
title: '14日奖励',
|
||||
dataIndex: 'streak_14d_bonus',
|
||||
key: 'streak_14d_bonus',
|
||||
width: 90,
|
||||
render: (val: number) => (val > 0 ? <Tag color="green">+{val}</Tag> : '-'),
|
||||
},
|
||||
{
|
||||
title: '30日奖励',
|
||||
dataIndex: 'streak_30d_bonus',
|
||||
key: 'streak_30d_bonus',
|
||||
width: 90,
|
||||
render: (val: number) => (val > 0 ? <Tag color="green">+{val}</Tag> : '-'),
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'is_active',
|
||||
key: 'is_active',
|
||||
width: 80,
|
||||
render: (val: boolean) => (
|
||||
<Badge status={val ? 'success' : 'default'} text={val ? '启用' : '停用'} />
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updated_at',
|
||||
key: 'updated_at',
|
||||
width: 170,
|
||||
render: (val: string) => (val ? dayjs(val).format('YYYY-MM-DD HH:mm') : '-'),
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
render: (_: unknown, record: PointsRule) => (
|
||||
<Space size="small">
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => openEdit(record)}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Switch
|
||||
size="small"
|
||||
checked={record.is_active}
|
||||
onChange={() => handleToggleActive(record)}
|
||||
/>
|
||||
<Popconfirm
|
||||
title="确定删除该规则？"
|
||||
onConfirm={() => handleDelete(record.id)}
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
>
|
||||
<Button type="link" size="small" danger icon={<DeleteOutlined />}>
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Card>
|
||||
{/* 筛选栏 */}
|
||||
<Row gutter={16} style={{ marginBottom: 16 }} align="middle">
|
||||
<Col flex="auto">
|
||||
<span style={{ color: '#64748b', fontSize: 13 }}>
|
||||
积分规则定义各类健康行为对应的积分奖励，含连续打卡额外奖励
|
||||
</span>
|
||||
</Col>
|
||||
<Col>
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
|
||||
新建规则
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* 数据表格 */}
|
||||
<Table
|
||||
rowKey="id"
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
loading={loading}
|
||||
scroll={{ x: 1100 }}
|
||||
pagination={false}
|
||||
/>
|
||||
|
||||
{/* 新建 / 编辑弹窗 */}
|
||||
<Modal
|
||||
title={editing ? '编辑积分规则' : '新建积分规则'}
|
||||
open={modalOpen}
|
||||
onCancel={() => {
|
||||
setModalOpen(false);
|
||||
form.resetFields();
|
||||
}}
|
||||
onOk={() => form.submit()}
|
||||
destroyOnClose
|
||||
width={560}
|
||||
>
|
||||
<Form form={form} layout="vertical" onFinish={handleSubmit}>
|
||||
<Form.Item
|
||||
name="name"
|
||||
label="规则名称"
|
||||
rules={[{ required: true, message: '请输入规则名称' }]}
|
||||
>
|
||||
<Input placeholder="如：每日打卡" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="event_type"
|
||||
label="事件类型"
|
||||
rules={[{ required: true, message: '请选择事件类型' }]}
|
||||
>
|
||||
<Select placeholder="选择事件类型" options={EVENT_TYPE_OPTIONS} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="points_value"
|
||||
label="积分值"
|
||||
rules={[{ required: true, message: '请输入积分值' }]}
|
||||
>
|
||||
<InputNumber min={1} max={10000} style={{ width: '100%' }} placeholder="如：10" />
|
||||
</Form.Item>
|
||||
<Form.Item name="daily_cap" label="每日上限" initialValue={1}>
|
||||
<InputNumber min={-1} max={10000} style={{ width: '100%' }} placeholder="-1 表示无限" />
|
||||
</Form.Item>
|
||||
<Row gutter={16}>
|
||||
<Col span={8}>
|
||||
<Form.Item name="streak_7d_bonus" label="7日连续奖励" initialValue={0}>
|
||||
<InputNumber min={0} max={10000} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item name="streak_14d_bonus" label="14日连续奖励" initialValue={0}>
|
||||
<InputNumber min={0} max={10000} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item name="streak_30d_bonus" label="30日连续奖励" initialValue={0}>
|
||||
<InputNumber min={0} max={10000} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Form.Item name="description" label="描述">
|
||||
<Input.TextArea rows={2} placeholder="规则说明" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user