任务模块

src/api/modules/task.js

@@ -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}`),

src/router/index.js

@@ -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) {
 		// 跳转到登录 并且带上属性

src/views/Task/List.vue

@@ -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 
-        <el-table-column prop="id" label="任务ID" width="180" />
+        v-else 
-        <el-table-column prop="fileName" label="文件名称" />
+        :data="taskList" 
-        <el-table-column prop="shopNames" label="店铺名称" />
+        border 
-        <el-table-column prop="dataNum" label="数据总数" width="100" />
+        style="width: 100%"
-        <el-table-column prop="taskStatus" label="状态" 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 prop="createTime" label="创建时间" width="160" align="center" />
-        <el-table-column label="操作" width="100" fixed="right">
+        <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()
+    // 将currentPage转换为后端需要的pageSize(0表示第一页)
-    console.log(res)
+    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>