fix: compact report status record table

This commit is contained in:
hectorzhao
2026-09-03 16:48:56 +08:00
parent 7b8a613afa
commit fe3c6e5b58
4 changed files with 113 additions and 32 deletions
+29 -32
View File
@@ -192,68 +192,65 @@ export function AdminReportRecordsPage() {
{
key: 'task',
title: '报备任务号',
width: '190px',
render: (record) => <strong className="admin-task-id">{record.taskId}</strong>,
},
{ key: 'channel', title: '通道名称', width: '180px', render: (record) => record.channel?.name ?? '-' },
{
key: 'targetType',
title: '变更主体',
width: '110px',
render: (record) => (
<Tag tone={record.task?.reportType === 'drainage' ? 'info' : 'neutral'}>
{record.task?.reportType === 'drainage' ? '引流信息' : '签名'}
</Tag>
),
width: '160px',
render: (record) => <strong className="admin-task-id admin-report-record-id" title={record.taskId}>{record.taskId}</strong>,
},
{ key: 'channel', title: '通道名称', width: '130px', render: (record) => record.channel?.name ?? '-' },
{
key: 'target',
title: '主体内容',
width: '260px',
title: '变更对象',
width: '230px',
render: (record) =>
record.task?.reportType === 'drainage' ? (
<div className="admin-task-enterprise">
<div className="admin-task-enterprise admin-report-record-target">
<Tag tone="info"></Tag>
<strong>{record.task?.signature?.name ?? '-'}</strong>
<span>{record.task?.drainageInfo?.url ?? '-'}</span>
{record.task?.drainageInfo?.remark ? <span>{record.task.drainageInfo.remark}</span> : null}
</div>
) : (
<div className="admin-task-enterprise">
<div className="admin-task-enterprise admin-report-record-target">
<Tag tone="neutral"></Tag>
<strong>{record.task?.signature?.name ?? '-'}</strong>
{record.task?.signature?.purpose ? <span>{record.task.signature.purpose}</span> : null}
</div>
),
},
{ key: 'source', title: '修改入口', width: '150px', render: (record) => recordSource(record) },
{
key: 'operator',
title: '操作人',
width: '140px',
render: (record) => record.operator?.displayName ?? record.operator?.username ?? '系统',
key: 'action',
title: '变更动作',
width: '180px',
render: (record) => (
<div className="admin-report-record-meta">
<strong>{actionLabel[record.action] ?? record.action}</strong>
<span>{recordSource(record)}</span>
</div>
),
},
{ key: 'action', title: '动作', width: '170px', render: (record) => actionLabel[record.action] ?? record.action },
{
key: 'status',
title: '状态变化',
width: '210px',
width: '150px',
render: (record) => (
<Tag
tone={statusTone[record.statusAfter ?? 'pending'] ?? 'info'}
>{`${translateStatus(record.statusBefore)}${translateStatus(record.statusAfter)}`}</Tag>
),
},
{ key: 'time', title: '记录时间', width: '190px', render: (record) => record.createdAt ?? '-' },
{
key: 'reason',
title: '备注',
width: '320px',
render: (record) => <span className="ui-table__long-text">{record.reason ?? '-'}</span>,
key: 'operatorTime',
title: '操作人 / 时间',
width: '175px',
render: (record) => (
<div className="admin-report-record-meta">
<strong>{record.operator?.displayName ?? record.operator?.username ?? '系统'}</strong>
<span>{record.createdAt ?? '-'}</span>
</div>
),
},
{
key: 'actions',
title: '操作',
align: 'right',
width: '120px',
width: '76px',
render: (record) => (
<Button icon={<Eye size={14} />} onClick={() => setDetail(record)} size="sm" variant="ghost">
@@ -4,6 +4,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
import { MemoryRouter } from 'react-router-dom';
import { AdminReportBatchesPage } from './AdminReportBatchesPage';
import { AdminReportMaterialsPage } from './AdminReportMaterialsPage';
import { AdminReportRecordsPage } from './AdminReportRecordsPage';
import { AdminReportTasksPage } from './AdminReportTasksPage';
const { adminApi, clipboardWriteText } = vi.hoisted(() => ({
@@ -18,6 +19,7 @@ const { adminApi, clipboardWriteText } = vi.hoisted(() => ({
listReportDetailsPage: vi.fn(),
listReportMaterialBatches: vi.fn(),
listReportMaterialBatchTasks: vi.fn(),
listReportRecordsPage: vi.fn(),
preflightReportMaterialBatch: vi.fn(),
},
clipboardWriteText: vi.fn(),
@@ -171,6 +173,43 @@ describe('report workbench pages', () => {
);
});
it('keeps the report record list compact while retaining full details in the dialog', async () => {
adminApi.listReportRecordsPage.mockResolvedValue({
items: [{
id: 'record-1',
taskId: 'report-task-with-a-long-identifier-1',
channelId: 'channel-1',
action: 'manual_status_change',
statusBefore: 'pending',
statusAfter: 'approved',
reason: '通道已确认报备通过',
sourceEntry: 'report_task',
createdAt: '2026-09-03 15:30:00',
channel: { id: 'channel-1', name: '测试通道' },
operator: { id: 'operator-1', username: 'operator', displayName: '运营一' },
task: task('record-1'),
}],
total: 1,
page: 1,
pageSize: 10,
});
render(
<MemoryRouter>
<AdminReportRecordsPage />
</MemoryRouter>,
);
expect(await screen.findByRole('columnheader', { name: '变更对象' })).toBeVisible();
expect(screen.getByRole('columnheader', { name: '变更动作' })).toBeVisible();
expect(screen.getByRole('columnheader', { name: '操作人 / 时间' })).toBeVisible();
expect(screen.queryByRole('columnheader', { name: '备注' })).not.toBeInTheDocument();
expect(screen.getByText('报备任务修改')).toBeVisible();
await userEvent.click(screen.getByRole('button', { name: '详情' }));
expect((await screen.findAllByText('通道已确认报备通过')).length).toBeGreaterThan(0);
});
it('shows and copies the channel brief returned by the batch detail API', async () => {
const batch = {
id: 'batch-1',