fix: cronmessages page table display

This commit is contained in:
engigu
2025-10-07 17:33:35 +08:00
parent f31eba0558
commit 565fafb114
@@ -184,59 +184,62 @@ onMounted(async () => {
</div> </div>
<!-- 表格 --> <!-- 表格 -->
<Table> <div class="overflow-x-auto" style="will-change: transform;">
<TableHeader> <div class="min-w-full">
<TableRow> <Table>
<TableHead class="w-20">ID</TableHead> <TableHeader>
<TableHead>名称</TableHead> <TableRow>
<TableHead>内容</TableHead> <TableHead class="w-20">ID</TableHead>
<TableHead>Cron表达式</TableHead> <TableHead>名称</TableHead>
<TableHead>关联任务</TableHead> <TableHead>内容</TableHead>
<TableHead>下次执行时间</TableHead> <TableHead>Cron表达式</TableHead>
<TableHead>创建时间</TableHead> <TableHead>关联任务</TableHead>
<TableHead class="text-center">操作</TableHead> <TableHead>下次执行时间</TableHead>
</TableRow> <TableHead>创建时间</TableHead>
</TableHeader> <TableHead class="text-center">操作</TableHead>
</TableRow>
</TableHeader>
<TableBody> <TableBody>
<!-- 空数据展示 --> <!-- 空数据展示 -->
<TableRow v-if="state.tableData.length === 0"> <TableRow v-if="state.tableData.length === 0">
<TableCell colspan="8" class="text-center py-12"> <TableCell colspan="8" class="text-center py-12">
<EmptyTableState title="暂无定时消息" description="还没有配置任何定时消息,请先添加定时消息" /> <EmptyTableState title="暂无定时消息" description="还没有配置任何定时消息,请先添加定时消息" />
</TableCell> </TableCell>
</TableRow> </TableRow>
<!-- 数据行 --> <!-- 数据行 -->
<TableRow v-for="cronMessage in state.tableData" :key="cronMessage.id"> <TableRow v-for="cronMessage in state.tableData" :key="cronMessage.id">
<TableCell>{{ cronMessage.id }}</TableCell> <TableCell>{{ cronMessage.id }}</TableCell>
<TableCell class="max-w-32 truncate" :title="cronMessage.title">{{ cronMessage.title }}</TableCell> <TableCell class="whitespace-pre-wrap break-words">{{ cronMessage.title }}</TableCell>
<TableCell class="max-w-32 truncate" :title="cronMessage.content">{{ cronMessage.content }}</TableCell> <TableCell class="whitespace-pre-wrap break-words">{{ cronMessage.content }}</TableCell>
<TableCell> <TableCell>
<code class="px-2 py-1 rounded text-sm font-mono bg-muted text-foreground border border-border"> <code class="px-2 py-1 rounded text-sm font-mono bg-muted text-foreground border border-border">
{{ cronMessage.cron }} {{ cronMessage.cron }}
</code> </code>
</TableCell> </TableCell>
<TableCell class="max-w-24 truncate" :title="cronMessage.task_id">{{ cronMessage.task_id }}</TableCell> <TableCell class="break-all">{{ cronMessage.task_id }}</TableCell>
<TableCell class="max-w-32 truncate" :title="cronMessage.next_time || '-'">{{ cronMessage.next_time || '-' }} <TableCell>{{ cronMessage.next_time || '-' }}</TableCell>
</TableCell> <TableCell>{{ cronMessage.created_on }}</TableCell>
<TableCell class="max-w-32 truncate" :title="cronMessage.created_on">{{ cronMessage.created_on }}</TableCell> <!-- <TableCell class="text-center">
<!-- <TableCell class="text-center"> <Badge :class="cronMessage.status === 1 ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-600'">
<Badge :class="cronMessage.status === 1 ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-600'"> {{ getStatusText(cronMessage.status) }}
{{ getStatusText(cronMessage.status) }} </Badge>
</Badge> </TableCell> -->
</TableCell> --> <TableCell class="text-center space-x-2">
<TableCell class="text-center space-x-2"> <Button size="sm" variant="outline" @click="handleViewLogs(cronMessage)">日志</Button>
<Button size="sm" variant="outline" @click="handleViewLogs(cronMessage)">日志</Button> <Button size="sm" variant="outline" @click="openEditCronMessageDialog(cronMessage)">编辑</Button>
<Button size="sm" variant="outline" @click="openEditCronMessageDialog(cronMessage)">编辑</Button> <Button size="sm" variant="outline" class="text-red-500 border-red-300 hover:bg-red-50
<Button size="sm" variant="outline" class="text-red-500 border-red-300 hover:bg-red-50 hover:border-red-400 hover:text-red-600 hover:shadow-md
hover:border-red-400 hover:text-red-600 hover:shadow-md transition-all duration-200" @click="handleDelete(cronMessage.id)">删除</Button>
transition-all duration-200" @click="handleDelete(cronMessage.id)">删除</Button> <Switch :model-value="cronMessage.enable === 1" @update:model-value="toggleStatus(cronMessage)" />
<Switch :model-value="cronMessage.enable === 1" @update:model-value="toggleStatus(cronMessage)" />
</TableCell> </TableCell>
</TableRow> </TableRow>
</TableBody> </TableBody>
</Table> </Table>
</div>
</div>
<!-- 分页 --> <!-- 分页 -->
<Pagination :total="state.total" :current-page="state.currPage" :page-size="state.pageSize" <Pagination :total="state.total" :current-page="state.currPage" :page-size="state.pageSize"