feat: multi-module iteration
This commit is contained in:
@@ -0,0 +1,698 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Alert,
|
||||
Button,
|
||||
Checkbox,
|
||||
Descriptions,
|
||||
Drawer,
|
||||
Form,
|
||||
Input,
|
||||
Modal,
|
||||
Select,
|
||||
Space,
|
||||
Table,
|
||||
Tag,
|
||||
Typography,
|
||||
message,
|
||||
} from 'antd';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import { USER_SOURCE_TYPE_LABELS, resolveUserLogCategory, type UserSourceType } from '@dukang/shared-types';
|
||||
import { request, type AdminUserRow, type HqProfile, type Paginated } from '../lib/api';
|
||||
import { ORDER_STATUS_LABELS, fmtTime, maskPhone } from '../lib/constants';
|
||||
|
||||
type UserOrderRow = {
|
||||
id: string;
|
||||
orderNo: string;
|
||||
status: string;
|
||||
payAmount: number;
|
||||
payStatus?: string;
|
||||
createdAt: string;
|
||||
};
|
||||
|
||||
type UserBehaviorLog = {
|
||||
id: string;
|
||||
eventName: string;
|
||||
clientApp?: string | null;
|
||||
createdAt: string;
|
||||
extraJson?: Record<string, unknown> | null;
|
||||
};
|
||||
|
||||
type UserDetail = AdminUserRow & {
|
||||
wxUnionId?: string | null;
|
||||
cityPref?: Record<string, unknown> | null;
|
||||
mergedInto?: { id: string; userNo: string; phone: string | null; nickname: string | null } | null;
|
||||
sourcePromo?: { id: string; code: string; name: string } | null;
|
||||
orders?: UserOrderRow[];
|
||||
mergedFromCount?: number;
|
||||
addressCount?: number;
|
||||
};
|
||||
|
||||
type BatchDeletePreviewItem = {
|
||||
id: string;
|
||||
userNo: string;
|
||||
nickname: string | null;
|
||||
phone: string | null;
|
||||
hasRisk: boolean;
|
||||
unfinishedOrders: UserOrderRow[];
|
||||
redeemRecords: Array<{
|
||||
id: string;
|
||||
redeemNo: string;
|
||||
amount: number;
|
||||
createdAt: string;
|
||||
payoutStatus: string | null;
|
||||
}>;
|
||||
};
|
||||
|
||||
type BatchDeletePreview = {
|
||||
items: BatchDeletePreviewItem[];
|
||||
hasRisk: boolean;
|
||||
total: number;
|
||||
};
|
||||
|
||||
export default function UsersPage() {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const [form] = Form.useForm();
|
||||
const [profile, setProfile] = useState<HqProfile | null>(null);
|
||||
const [data, setData] = useState<Paginated<AdminUserRow> | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [page, setPage] = useState(1);
|
||||
const [pageSize, setPageSize] = useState(20);
|
||||
const [detail, setDetail] = useState<UserDetail | null>(null);
|
||||
const [behaviorLogs, setBehaviorLogs] = useState<UserBehaviorLog[]>([]);
|
||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||
const [deleteConfirm, setDeleteConfirm] = useState('');
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
|
||||
const [batchDeleteOpen, setBatchDeleteOpen] = useState(false);
|
||||
const [batchDeleteStep, setBatchDeleteStep] = useState<1 | 2>(1);
|
||||
const [batchPreview, setBatchPreview] = useState<BatchDeletePreview | null>(null);
|
||||
const [batchPreviewLoading, setBatchPreviewLoading] = useState(false);
|
||||
const [batchDeleting, setBatchDeleting] = useState(false);
|
||||
const [batchRiskAck, setBatchRiskAck] = useState(false);
|
||||
const canDeleteUsers = (profile?.permissionKeys ?? []).includes('users_delete');
|
||||
|
||||
useEffect(() => {
|
||||
request<HqProfile>('/admin/auth/me').then(setProfile).catch(() => {});
|
||||
}, []);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const values = form.getFieldsValue();
|
||||
const qs = new URLSearchParams({ page: String(page), pageSize: String(pageSize) });
|
||||
if (values.phone) qs.set('phone', values.phone);
|
||||
if (values.userNo) qs.set('userNo', values.userNo);
|
||||
if (values.deviceKey) qs.set('deviceKey', values.deviceKey);
|
||||
if (values.phoneVerified !== undefined && values.phoneVerified !== '') {
|
||||
qs.set('phoneVerified', values.phoneVerified);
|
||||
}
|
||||
if (values.status !== undefined && values.status !== '') {
|
||||
qs.set('status', String(values.status));
|
||||
}
|
||||
const res = await request<Paginated<AdminUserRow>>(`/admin/users?${qs}`);
|
||||
setData(res);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [form, page, pageSize]);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
useEffect(() => {
|
||||
const openUserId = (location.state as { openUserId?: string } | null)?.openUserId;
|
||||
if (openUserId) {
|
||||
void openDetail(openUserId);
|
||||
navigate(location.pathname, { replace: true, state: null });
|
||||
}
|
||||
}, [location.state, location.pathname, navigate]);
|
||||
|
||||
async function openDetail(id: string) {
|
||||
const [res, logs] = await Promise.all([
|
||||
request<UserDetail>(`/admin/users/${id}`),
|
||||
request<{ items: UserBehaviorLog[] }>(`/admin/logs/users?userId=${id}&pageSize=50`).catch(
|
||||
() => ({ items: [] as UserBehaviorLog[] }),
|
||||
),
|
||||
]);
|
||||
setDetail(res);
|
||||
setBehaviorLogs(logs.items ?? []);
|
||||
setDrawerOpen(true);
|
||||
}
|
||||
|
||||
function openDeleteModal() {
|
||||
setDeleteConfirm('');
|
||||
setDeleteOpen(true);
|
||||
}
|
||||
|
||||
async function confirmDelete() {
|
||||
if (!detail) return;
|
||||
if (deleteConfirm !== detail.userNo) {
|
||||
message.error('请输入正确的用户编号以确认删除');
|
||||
return;
|
||||
}
|
||||
setDeleting(true);
|
||||
try {
|
||||
await request(`/admin/users/${detail.id}`, { method: 'DELETE' });
|
||||
message.success('用户已删除（行为日志已保留）');
|
||||
setDeleteOpen(false);
|
||||
setDrawerOpen(false);
|
||||
setDetail(null);
|
||||
setSelectedRowKeys((keys) => keys.filter((k) => k !== detail.id));
|
||||
void load();
|
||||
} catch (e) {
|
||||
message.error(e instanceof Error ? e.message : '删除失败');
|
||||
} finally {
|
||||
setDeleting(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function openBatchDeleteModal() {
|
||||
if (!selectedRowKeys.length) return;
|
||||
setBatchDeleteStep(1);
|
||||
setBatchRiskAck(false);
|
||||
setBatchPreview(null);
|
||||
setBatchDeleteOpen(true);
|
||||
setBatchPreviewLoading(true);
|
||||
try {
|
||||
const res = await request<BatchDeletePreview>('/admin/users/batch-delete/preview', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ ids: selectedRowKeys }),
|
||||
});
|
||||
setBatchPreview(res);
|
||||
} catch (e) {
|
||||
message.error(e instanceof Error ? e.message : '预检失败');
|
||||
setBatchDeleteOpen(false);
|
||||
} finally {
|
||||
setBatchPreviewLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmBatchDelete(confirmRisk: boolean) {
|
||||
if (!selectedRowKeys.length) return;
|
||||
setBatchDeleting(true);
|
||||
try {
|
||||
const res = await request<{ deleted: number; message: string }>('/admin/users/batch-delete', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ ids: selectedRowKeys, confirmRisk }),
|
||||
});
|
||||
message.success(res.message || `已删除 ${res.deleted} 名用户`);
|
||||
setBatchDeleteOpen(false);
|
||||
setBatchPreview(null);
|
||||
if (detail && selectedRowKeys.includes(detail.id)) {
|
||||
setDrawerOpen(false);
|
||||
setDetail(null);
|
||||
}
|
||||
setSelectedRowKeys([]);
|
||||
void load();
|
||||
} catch (e) {
|
||||
message.error(e instanceof Error ? e.message : '批量删除失败');
|
||||
} finally {
|
||||
setBatchDeleting(false);
|
||||
}
|
||||
}
|
||||
|
||||
function handleBatchDeleteOk() {
|
||||
if (!batchPreview) return;
|
||||
if (batchPreview.hasRisk && batchDeleteStep === 1) {
|
||||
setBatchDeleteStep(2);
|
||||
return;
|
||||
}
|
||||
void confirmBatchDelete(batchPreview.hasRisk);
|
||||
}
|
||||
|
||||
const orderColumns: ColumnsType<UserOrderRow> = [
|
||||
{ title: '订单号', dataIndex: 'orderNo', width: 170 },
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
width: 100,
|
||||
render: (s) => <Tag>{ORDER_STATUS_LABELS[s] || s}</Tag>,
|
||||
},
|
||||
{ title: '实付', dataIndex: 'payAmount', width: 90, render: (v) => `¥${v}` },
|
||||
{ title: '下单时间', dataIndex: 'createdAt', width: 160, render: fmtTime },
|
||||
];
|
||||
|
||||
const columns: ColumnsType<AdminUserRow> = [
|
||||
{ title: '用户编号', dataIndex: 'userNo', width: 120 },
|
||||
{ title: '昵称', dataIndex: 'nickname', width: 100 },
|
||||
{
|
||||
title: '手机',
|
||||
dataIndex: 'phone',
|
||||
width: 120,
|
||||
render: (v) => maskPhone(v),
|
||||
},
|
||||
{
|
||||
title: '验手机',
|
||||
dataIndex: 'phoneVerifiedAt',
|
||||
width: 90,
|
||||
render: (v) => (v ? <Tag color="green">已验证</Tag> : <Tag color="orange">访客</Tag>),
|
||||
},
|
||||
{
|
||||
title: '微信',
|
||||
dataIndex: 'wechatVerified',
|
||||
width: 100,
|
||||
render: (v) => (v ? <Tag color="blue">微信已验证</Tag> : <Tag>未绑定</Tag>),
|
||||
},
|
||||
{
|
||||
title: '来源类型',
|
||||
dataIndex: 'sourceType',
|
||||
width: 100,
|
||||
render: (v: string) => (
|
||||
<Tag color={v === 'PROMO_CODE' ? 'blue' : v === 'ORGANIC' ? 'default' : 'purple'}>
|
||||
{USER_SOURCE_TYPE_LABELS[v as UserSourceType] || v}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '来源 ID',
|
||||
dataIndex: 'sourceRefId',
|
||||
width: 100,
|
||||
ellipsis: true,
|
||||
render: (v, row) => {
|
||||
if (!v) return '—';
|
||||
if (row.sourceType === 'PROMO_CODE') {
|
||||
return (
|
||||
<Link to={`/promo-codes/${v}`} onClick={(e) => e.stopPropagation()}>
|
||||
{v}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
return v;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '来源标签',
|
||||
dataIndex: 'sourceLabel',
|
||||
width: 120,
|
||||
ellipsis: true,
|
||||
render: (v) => v || '—',
|
||||
},
|
||||
{
|
||||
title: 'deviceKey',
|
||||
dataIndex: 'deviceKey',
|
||||
ellipsis: true,
|
||||
render: (v) => v || '—',
|
||||
},
|
||||
{
|
||||
title: '合并',
|
||||
dataIndex: 'mergedIntoUserId',
|
||||
width: 80,
|
||||
render: (v) => (v ? <Tag color="blue">已合并</Tag> : '—'),
|
||||
},
|
||||
{ title: '订单数', dataIndex: 'orderCount', width: 80 },
|
||||
{
|
||||
title: '注册时间',
|
||||
dataIndex: 'createdAt',
|
||||
width: 170,
|
||||
render: (v) => new Date(v).toLocaleString('zh-CN'),
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 140,
|
||||
render: (_, row) => (
|
||||
<Space size="small">
|
||||
<Button type="link" size="small" onClick={() => openDetail(row.id)}>
|
||||
详情
|
||||
</Button>
|
||||
<Button type="link" size="small" onClick={() => navigate(`/logs/users?userId=${row.id}`)}>
|
||||
查看日志
|
||||
</Button>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Space style={{ marginBottom: 16, width: '100%', justifyContent: 'space-between' }}>
|
||||
<Typography.Title level={4} style={{ margin: 0 }}>用户监控</Typography.Title>
|
||||
{canDeleteUsers ? (
|
||||
<Button
|
||||
danger
|
||||
disabled={!selectedRowKeys.length}
|
||||
onClick={() => void openBatchDeleteModal()}
|
||||
>
|
||||
批量删除{selectedRowKeys.length ? ` (${selectedRowKeys.length})` : ''}
|
||||
</Button>
|
||||
) : null}
|
||||
</Space>
|
||||
<Form form={form} layout="inline" style={{ marginBottom: 16 }} onFinish={() => { setPage(1); void load(); }}>
|
||||
<Form.Item name="phone" label="手机号">
|
||||
<Input placeholder="模糊搜索" allowClear />
|
||||
</Form.Item>
|
||||
<Form.Item name="userNo" label="用户编号">
|
||||
<Input placeholder="DK..." allowClear />
|
||||
</Form.Item>
|
||||
<Form.Item name="deviceKey" label="deviceKey">
|
||||
<Input placeholder="UUID" allowClear style={{ width: 200 }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="phoneVerified" label="验手机">
|
||||
<Select allowClear style={{ width: 100 }} options={[
|
||||
{ value: '1', label: '已验证' },
|
||||
{ value: '0', label: '访客' },
|
||||
]} />
|
||||
</Form.Item>
|
||||
<Form.Item name="status" label="状态">
|
||||
<Select allowClear style={{ width: 90 }} options={[
|
||||
{ value: 1, label: '正常' },
|
||||
{ value: 0, label: '停用' },
|
||||
]} />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button type="primary" htmlType="submit">查询</Button>
|
||||
<Button onClick={() => { form.resetFields(); setPage(1); void load(); }}>重置</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<Table
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
columns={columns}
|
||||
dataSource={data?.items ?? []}
|
||||
scroll={{ x: 1500 }}
|
||||
rowSelection={canDeleteUsers ? {
|
||||
selectedRowKeys,
|
||||
preserveSelectedRowKeys: true,
|
||||
onChange: (keys) => setSelectedRowKeys(keys as string[]),
|
||||
} : undefined}
|
||||
pagination={{
|
||||
current: page,
|
||||
pageSize,
|
||||
total: data?.total ?? 0,
|
||||
showSizeChanger: true,
|
||||
onChange: (p, ps) => {
|
||||
setPage(p);
|
||||
setPageSize(ps);
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<Drawer
|
||||
title="用户详情"
|
||||
width={640}
|
||||
open={drawerOpen}
|
||||
onClose={() => setDrawerOpen(false)}
|
||||
extra={detail && canDeleteUsers ? (
|
||||
<Button danger onClick={openDeleteModal}>删除用户</Button>
|
||||
) : undefined}
|
||||
>
|
||||
{detail && (
|
||||
<>
|
||||
<Descriptions column={1} bordered size="small">
|
||||
<Descriptions.Item label="ID">{detail.id}</Descriptions.Item>
|
||||
<Descriptions.Item label="用户编号">{detail.userNo}</Descriptions.Item>
|
||||
<Descriptions.Item label="昵称">{detail.nickname || '—'}</Descriptions.Item>
|
||||
<Descriptions.Item label="手机号">{maskPhone(detail.phone)}</Descriptions.Item>
|
||||
<Descriptions.Item label="验手机时间">
|
||||
{detail.phoneVerifiedAt ? new Date(detail.phoneVerifiedAt).toLocaleString('zh-CN') : '未验证'}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="微信验证">
|
||||
{detail.wechatVerified ? <Tag color="blue">微信已验证</Tag> : <Tag>未绑定</Tag>}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="来源类型">
|
||||
<Tag color={detail.sourceType === 'PROMO_CODE' ? 'blue' : 'default'}>
|
||||
{USER_SOURCE_TYPE_LABELS[detail.sourceType as UserSourceType] || detail.sourceType}
|
||||
</Tag>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="来源 ID">
|
||||
{detail.sourceRefId ? (
|
||||
detail.sourceType === 'PROMO_CODE' ? (
|
||||
<Link to={`/promo-codes/${detail.sourceRefId}`}>{detail.sourceRefId}</Link>
|
||||
) : (
|
||||
detail.sourceRefId
|
||||
)
|
||||
) : '—'}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="来源标签">{detail.sourceLabel || '—'}</Descriptions.Item>
|
||||
{detail.sourcePromo && (
|
||||
<Descriptions.Item label="推广码">
|
||||
<Link to={`/promo-codes/${detail.sourcePromo.id}`}>
|
||||
{detail.sourcePromo.name}（{detail.sourcePromo.code}）
|
||||
</Link>
|
||||
</Descriptions.Item>
|
||||
)}
|
||||
<Descriptions.Item label="wxOpenId">{detail.wxOpenId || '—'}</Descriptions.Item>
|
||||
<Descriptions.Item label="wxUnionId">{detail.wxUnionId || '—'}</Descriptions.Item>
|
||||
<Descriptions.Item label="deviceKey">{detail.deviceKey || '—'}</Descriptions.Item>
|
||||
<Descriptions.Item label="合并至">
|
||||
{detail.mergedInto
|
||||
? `${detail.mergedInto.userNo} (${detail.mergedInto.phone ? maskPhone(detail.mergedInto.phone) : '无手机'})`
|
||||
: '—'}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="被合并访客数">{detail.mergedFromCount ?? 0}</Descriptions.Item>
|
||||
<Descriptions.Item label="订单/地址">{detail.orderCount} / {detail.addressCount}</Descriptions.Item>
|
||||
<Descriptions.Item label="注册时间">
|
||||
{new Date(detail.createdAt).toLocaleString('zh-CN')}
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
|
||||
<Typography.Title level={5} style={{ marginTop: 16 }}>
|
||||
行为时间线（最近 {behaviorLogs.length} 条）
|
||||
</Typography.Title>
|
||||
<Table
|
||||
size="small"
|
||||
rowKey="id"
|
||||
pagination={false}
|
||||
scroll={{ y: 200 }}
|
||||
dataSource={behaviorLogs}
|
||||
locale={{ emptyText: '暂无行为日志' }}
|
||||
columns={[
|
||||
{ title: '时间', dataIndex: 'createdAt', width: 160, render: (v) => fmtTime(v) },
|
||||
{
|
||||
title: '分类',
|
||||
width: 100,
|
||||
render: (_, r) => resolveUserLogCategory(r.eventName) ?? '—',
|
||||
},
|
||||
{ title: '事件', dataIndex: 'eventName' },
|
||||
{ title: '端', dataIndex: 'clientApp', width: 90 },
|
||||
]}
|
||||
/>
|
||||
|
||||
<Typography.Title level={5} style={{ marginTop: 16 }}>
|
||||
全部订单（{detail.orders?.length ?? 0}）
|
||||
</Typography.Title>
|
||||
<Table
|
||||
size="small"
|
||||
rowKey="id"
|
||||
pagination={false}
|
||||
scroll={{ x: 520, y: 240 }}
|
||||
dataSource={detail.orders ?? []}
|
||||
columns={orderColumns}
|
||||
locale={{ emptyText: '暂无订单' }}
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ marginTop: 16 }}
|
||||
onClick={() => navigate(`/logs/users?userId=${detail.id}`)}
|
||||
>
|
||||
查看用户日志
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</Drawer>
|
||||
|
||||
<Modal
|
||||
title="确认删除用户"
|
||||
open={deleteOpen}
|
||||
okText="确认删除"
|
||||
okButtonProps={{
|
||||
danger: true,
|
||||
disabled: !detail || deleteConfirm !== detail.userNo,
|
||||
loading: deleting,
|
||||
}}
|
||||
onOk={() => void confirmDelete()}
|
||||
onCancel={() => setDeleteOpen(false)}
|
||||
width={720}
|
||||
destroyOnClose
|
||||
>
|
||||
{detail && (
|
||||
<>
|
||||
<Alert
|
||||
type="error"
|
||||
showIcon
|
||||
style={{ marginBottom: 16 }}
|
||||
message="此操作不可恢复"
|
||||
description={(
|
||||
<>
|
||||
将删除用户 <strong>{detail.userNo}</strong> 及其地址、订单、权益券、核销记录等业务数据。
|
||||
<br />
|
||||
用户行为日志（埋点）与第三方调用日志将<strong>保留</strong>，不随用户删除。
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
<Typography.Text strong>关联订单（{detail.orders?.length ?? 0} 笔）</Typography.Text>
|
||||
<Table
|
||||
size="small"
|
||||
style={{ marginTop: 8, marginBottom: 16 }}
|
||||
rowKey="id"
|
||||
pagination={false}
|
||||
scroll={{ x: 520, y: 200 }}
|
||||
dataSource={detail.orders ?? []}
|
||||
columns={orderColumns}
|
||||
locale={{ emptyText: '无订单' }}
|
||||
/>
|
||||
<Typography.Paragraph type="secondary">
|
||||
请输入用户编号 <Typography.Text code>{detail.userNo}</Typography.Text> 以确认删除：
|
||||
</Typography.Paragraph>
|
||||
<Input
|
||||
value={deleteConfirm}
|
||||
placeholder={detail.userNo}
|
||||
onChange={(e) => setDeleteConfirm(e.target.value)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
title={batchDeleteStep === 1 ? `确认批量删除（${selectedRowKeys.length} 人）` : '二次确认：删除关联业务数据'}
|
||||
open={batchDeleteOpen}
|
||||
okText={batchPreview?.hasRisk && batchDeleteStep === 1 ? '下一步' : '确认删除'}
|
||||
okButtonProps={{
|
||||
danger: batchDeleteStep === 2 || !batchPreview?.hasRisk,
|
||||
loading: batchPreviewLoading || batchDeleting,
|
||||
disabled: batchDeleteStep === 2 && !batchRiskAck,
|
||||
}}
|
||||
cancelText={batchDeleteStep === 2 ? '上一步' : '取消'}
|
||||
onOk={() => handleBatchDeleteOk()}
|
||||
onCancel={() => {
|
||||
if (batchDeleteStep === 2) {
|
||||
setBatchDeleteStep(1);
|
||||
setBatchRiskAck(false);
|
||||
return;
|
||||
}
|
||||
setBatchDeleteOpen(false);
|
||||
}}
|
||||
width={800}
|
||||
destroyOnClose
|
||||
>
|
||||
{batchPreviewLoading && (
|
||||
<Typography.Text type="secondary">正在检查关联订单与核销记录…</Typography.Text>
|
||||
)}
|
||||
{!batchPreviewLoading && batchPreview && batchDeleteStep === 1 && (
|
||||
<>
|
||||
<Alert
|
||||
type={batchPreview.hasRisk ? 'warning' : 'error'}
|
||||
showIcon
|
||||
style={{ marginBottom: 16 }}
|
||||
message={batchPreview.hasRisk ? '部分用户存在未完成订单或核销记录' : '此操作不可恢复'}
|
||||
description={batchPreview.hasRisk
|
||||
? '标有「需关注」的用户名下有未完成订单和/或核销记录。继续后将进入二次确认，确认后将一并删除相关订单、核销记录及权益等业务数据。用户行为日志将保留。'
|
||||
: `将删除 ${batchPreview.total} 名用户及其地址、订单、权益券等业务数据。用户行为日志将保留。`}
|
||||
/>
|
||||
<Table
|
||||
size="small"
|
||||
rowKey="id"
|
||||
pagination={false}
|
||||
scroll={{ x: 640, y: 320 }}
|
||||
dataSource={batchPreview.items}
|
||||
expandable={{
|
||||
rowExpandable: (row) => row.hasRisk,
|
||||
expandedRowRender: (row) => (
|
||||
<div style={{ padding: '0 8px 8px' }}>
|
||||
{row.unfinishedOrders.length > 0 && (
|
||||
<>
|
||||
<Typography.Text strong>未完成订单（{row.unfinishedOrders.length}）</Typography.Text>
|
||||
<Table
|
||||
size="small"
|
||||
style={{ marginTop: 8, marginBottom: 12 }}
|
||||
rowKey="id"
|
||||
pagination={false}
|
||||
dataSource={row.unfinishedOrders}
|
||||
columns={orderColumns}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{row.redeemRecords.length > 0 && (
|
||||
<>
|
||||
<Typography.Text strong>核销记录（{row.redeemRecords.length}）</Typography.Text>
|
||||
<Table
|
||||
size="small"
|
||||
style={{ marginTop: 8 }}
|
||||
rowKey="id"
|
||||
pagination={false}
|
||||
dataSource={row.redeemRecords}
|
||||
columns={[
|
||||
{ title: '核销单号', dataIndex: 'redeemNo', width: 160 },
|
||||
{ title: '金额', dataIndex: 'amount', width: 90, render: (v) => `¥${v}` },
|
||||
{
|
||||
title: '打款状态',
|
||||
dataIndex: 'payoutStatus',
|
||||
width: 100,
|
||||
render: (v) => (v === 'PENDING' ? <Tag color="orange">待打款</Tag> : v === 'PAID' ? <Tag color="green">已打款</Tag> : '—'),
|
||||
},
|
||||
{ title: '时间', dataIndex: 'createdAt', width: 160, render: fmtTime },
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
columns={[
|
||||
{ title: '用户编号', dataIndex: 'userNo', width: 120 },
|
||||
{ title: '昵称', dataIndex: 'nickname', width: 100, render: (v) => v || '—' },
|
||||
{ title: '手机', dataIndex: 'phone', width: 120, render: (v) => maskPhone(v) },
|
||||
{
|
||||
title: '风险',
|
||||
width: 200,
|
||||
render: (_, row) => (row.hasRisk ? (
|
||||
<Space size={4} wrap>
|
||||
<Tag color="warning">需关注</Tag>
|
||||
{row.unfinishedOrders.length > 0 && (
|
||||
<Tag color="orange">未完成订单 {row.unfinishedOrders.length}</Tag>
|
||||
)}
|
||||
{row.redeemRecords.length > 0 && (
|
||||
<Tag color="red">核销 {row.redeemRecords.length}</Tag>
|
||||
)}
|
||||
</Space>
|
||||
) : (
|
||||
<Tag color="default">无关联风险</Tag>
|
||||
)),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{!batchPreviewLoading && batchPreview && batchDeleteStep === 2 && (
|
||||
<>
|
||||
<Alert
|
||||
type="error"
|
||||
showIcon
|
||||
style={{ marginBottom: 16 }}
|
||||
message="即将删除未完成订单与核销记录"
|
||||
description={(
|
||||
<>
|
||||
以下 <strong>{batchPreview.items.filter((i) => i.hasRisk).length}</strong> 名用户存在未完成订单或核销记录。
|
||||
确认后将<strong>永久删除</strong>这些订单、核销记录、权益券及门店打款关联数据，且不可恢复。
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
<Table
|
||||
size="small"
|
||||
style={{ marginBottom: 16 }}
|
||||
rowKey="id"
|
||||
pagination={false}
|
||||
scroll={{ y: 200 }}
|
||||
dataSource={batchPreview.items.filter((i) => i.hasRisk)}
|
||||
columns={[
|
||||
{ title: '用户编号', dataIndex: 'userNo', width: 120 },
|
||||
{ title: '未完成订单', width: 110, render: (_, row) => row.unfinishedOrders.length },
|
||||
{ title: '核销记录', width: 90, render: (_, row) => row.redeemRecords.length },
|
||||
]}
|
||||
/>
|
||||
<Checkbox checked={batchRiskAck} onChange={(e) => setBatchRiskAck(e.target.checked)}>
|
||||
我确认删除上述用户的未完成订单、核销记录及相关业务数据
|
||||
</Checkbox>
|
||||
</>
|
||||
)}
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user