任务模块
This commit is contained in:
yuhawu
parent
cbaa331831
commit
ceef525878
@ -3,7 +3,8 @@ import instance from '../../utils/axios.js'
|
||||
// 任务相关API
|
||||
const taskApi = {
|
||||
// 获取运行中的任务列表
|
||||
getRunningTasks: () => instance.get('/task/test'),
|
||||
getRunningTasks: (pageSize = 0, pageNum = 10) =>
|
||||
instance.get(`/task/getRunningTasks?pageSize=${pageSize}&pageNum=${pageNum}`),
|
||||
|
||||
// 停止指定任务
|
||||
stopTask: (taskId) => instance.get(`/task/stopTask?taskId=${taskId}`),
|
||||
|
||||
@ -108,8 +108,10 @@ router.beforeEach((to, from, next) => {
|
||||
const isPublic = to.meta.public
|
||||
// 定义 是否已认证
|
||||
const isAuthenticated = store.getters.isAuthenticated
|
||||
// 如果访问根路径, 重定向到welcome页
|
||||
if (to.path === '/' && isAuthenticated) return next('/welcome')
|
||||
// 已认证用户访问登录页自动跳转首页
|
||||
if (to.path === '/login' && isAuthenticated) return next('/')
|
||||
if (to.path === '/login' && isAuthenticated) return next('/welcome')
|
||||
// 需要认证且未登录
|
||||
if (!isPublic && !isAuthenticated) {
|
||||
// 跳转到登录 并且带上属性
|
||||
|
||||
@ -13,20 +13,28 @@
|
||||
<div v-else-if="taskList.length === 0" class="empty-content">
|
||||
暂无运行中的任务
|
||||
</div>
|
||||
<el-table v-else :data="taskList" border style="width: 100%">
|
||||
<el-table-column prop="id" label="任务ID" width="180" />
|
||||
<el-table-column prop="fileName" label="文件名称" />
|
||||
<el-table-column prop="shopNames" label="店铺名称" />
|
||||
<el-table-column prop="dataNum" label="数据总数" width="100" />
|
||||
<el-table-column prop="taskStatus" label="状态" width="100">
|
||||
<el-table
|
||||
v-else
|
||||
:data="taskList"
|
||||
border
|
||||
style="width: 100%"
|
||||
height="500"
|
||||
max-height="500"
|
||||
:header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266', textAlign: 'center' }"
|
||||
>
|
||||
<el-table-column prop="id" label="任务ID" width="180" align="center" />
|
||||
<el-table-column prop="fileName" label="文件名称" align="center" />
|
||||
<el-table-column prop="shopNames" label="店铺名称" align="center" />
|
||||
<el-table-column prop="dataNum" label="数据总数" width="100" align="center" />
|
||||
<el-table-column prop="taskStatus" label="状态" width="100" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getTaskStatusType(scope.row.taskStatus)">
|
||||
{{ getTaskStatusText(scope.row.taskStatus) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="160" />
|
||||
<el-table-column label="操作" width="100" fixed="right">
|
||||
<el-table-column prop="createTime" label="创建时间" width="160" align="center" />
|
||||
<el-table-column label="操作" width="100" fixed="right" align="center">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="danger"
|
||||
@ -40,26 +48,39 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-dialog v-model="detailVisible" title="任务详情" width="500px">
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="任务ID">{{ currentTask.id }}</el-descriptions-item>
|
||||
<el-descriptions-item label="文件名称">{{ currentTask.fileName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="店铺名称">{{ currentTask.shopNames }}</el-descriptions-item>
|
||||
<el-descriptions-item label="数据总数">{{ currentTask.dataNum }}</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间">{{ currentTask.createTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="执行进度">
|
||||
<el-progress
|
||||
:percentage="calculateProgress(currentTask)"
|
||||
:status="currentTask.taskStatus === '1' ? 'success' : 'exception'"
|
||||
/>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="执行消息">
|
||||
<div class="task-msg">{{ currentTask.msg }}</div>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-dialog>
|
||||
</el-card>
|
||||
|
||||
<!-- 分页控件独立于卡片外部 -->
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="detailVisible" title="任务详情" width="500px">
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="任务ID">{{ currentTask.id }}</el-descriptions-item>
|
||||
<el-descriptions-item label="文件名称">{{ currentTask.fileName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="店铺名称">{{ currentTask.shopNames }}</el-descriptions-item>
|
||||
<el-descriptions-item label="数据总数">{{ currentTask.dataNum }}</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间">{{ currentTask.createTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="执行进度">
|
||||
<el-progress
|
||||
:percentage="calculateProgress(currentTask)"
|
||||
:status="currentTask.taskStatus === '1' ? 'success' : 'exception'"
|
||||
/>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="执行消息">
|
||||
<div class="task-msg">{{ currentTask.msg }}</div>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -74,17 +95,57 @@ const loading = ref(false)
|
||||
const stoppingTasks = ref([])
|
||||
const detailVisible = ref(false)
|
||||
const currentTask = ref({})
|
||||
const total = ref(0)
|
||||
|
||||
// 分页信息
|
||||
const currentPage = ref(1) // 界面显示的当前页，从1开始
|
||||
const pageSize = ref(10) // 每页条数
|
||||
|
||||
// 获取任务列表
|
||||
const fetchTaskList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await taskApi.getRunningTasks()
|
||||
console.log(res)
|
||||
// 将currentPage转换为后端需要的pageSize(0表示第一页)
|
||||
const pageIndex = currentPage.value - 1
|
||||
|
||||
const res = await taskApi.getRunningTasks(pageIndex, pageSize.value)
|
||||
console.log('API响应数据:', res)
|
||||
|
||||
if (res.code === 200) {
|
||||
taskList.value = res.data || []
|
||||
// 适应后端返回的数据结构
|
||||
if (res.data) {
|
||||
// 处理嵌套的data.data结构
|
||||
if (res.data.data && Array.isArray(res.data.data)) {
|
||||
taskList.value = res.data.data || []
|
||||
total.value = res.data.total || 0
|
||||
}
|
||||
// 处理嵌套的data.list结构
|
||||
else if (res.data.list && Array.isArray(res.data.list)) {
|
||||
taskList.value = res.data.list || []
|
||||
total.value = res.data.total || 0
|
||||
}
|
||||
// 处理records结构
|
||||
else if (res.data.records && Array.isArray(res.data.records)) {
|
||||
taskList.value = res.data.records || []
|
||||
total.value = res.data.total || 0
|
||||
}
|
||||
// 如果返回的直接就是数组
|
||||
else if (Array.isArray(res.data)) {
|
||||
taskList.value = res.data
|
||||
total.value = res.data.length
|
||||
}
|
||||
// 其他情况
|
||||
else {
|
||||
taskList.value = []
|
||||
total.value = 0
|
||||
console.warn('未能识别的数据格式:', res.data)
|
||||
}
|
||||
} else {
|
||||
taskList.value = []
|
||||
total.value = 0
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(res.data.message || '获取任务列表失败')
|
||||
ElMessage.error(res.data?.message || '获取任务列表失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取任务列表出错:', error)
|
||||
@ -94,6 +155,19 @@ const fetchTaskList = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 处理页码变化
|
||||
const handleCurrentChange = (val) => {
|
||||
currentPage.value = val
|
||||
fetchTaskList()
|
||||
}
|
||||
|
||||
// 处理每页显示条数变化
|
||||
const handleSizeChange = (val) => {
|
||||
pageSize.value = val
|
||||
currentPage.value = 1 // 切换每页条数时重置为第一页
|
||||
fetchTaskList()
|
||||
}
|
||||
|
||||
// 刷新任务列表
|
||||
const refreshTasks = () => {
|
||||
fetchTaskList()
|
||||
@ -216,4 +290,55 @@ onMounted(() => {
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.pagination-container {
|
||||
margin-top: 15px;
|
||||
background-color: #fff;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
:deep(.el-table) {
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
:deep(.el-table__body-wrapper) {
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
:deep(.el-table__body-wrapper::-webkit-scrollbar) {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
|
||||
border-radius: 3px;
|
||||
background: #c0c4cc;
|
||||
}
|
||||
|
||||
:deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
|
||||
border-radius: 3px;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
:deep(.el-table--scrollable-y .el-table__body-wrapper) {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
:deep(.el-table th) {
|
||||
height: 40px;
|
||||
padding: 8px 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.el-table td) {
|
||||
padding: 8px;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user