ha'ha

src/api/TaskManagement/index.ts

@@ -38,6 +38,14 @@ export const ApiTasksAdd = (data: any) => {
   })
 }
 
+// 停止任务
+export const ApiTasksCancel = (task_id: string) => {
+  return request({
+    url: `/api/tasks/${task_id}/cancel`,
+    method: 'post'
+  })
+}
+
 // // 编辑申请用印
 // export const BusinessEditApplication = (data: any) => {
 //   const formData = new FormData()

src/views/BoosAccountManagement/components/ViewTheTaskListDetails.vue

@@ -28,8 +28,13 @@
         header-align="center"
       >
         <template #default="scope">
-          <el-tag v-if="scope.row.status === 'success'" type="success">成功</el-tag>
+          <el-tag v-if="scope.row.status === 'pending'" type="primary">待派发</el-tag>
+          <el-tag v-else-if="scope.row.status === 'dispatched'" type="warning">已派发</el-tag>
+          <el-tag v-else-if="scope.row.status === 'running'" type="warning">执行中</el-tag>
+          <el-tag v-else-if="scope.row.status === 'success'" type="success">成功</el-tag>
           <el-tag v-else-if="scope.row.status === 'failed'" type="danger">失败</el-tag>
+          <el-tag v-else-if="scope.row.status === 'cancelled'" type="info">已停止</el-tag>
+          <span v-else>--</span>
         </template>
       </el-table-column>
       <el-table-column label="创建时间" prop="created_at">
@@ -42,6 +47,19 @@
           {{ formatISOToDateTime(scope.row?.updated_at || '') }}
         </template>
       </el-table-column>
+      <el-table-column label="操作" width="110" align="center" header-align="center">
+        <template #default="scope">
+          <el-button
+            type="danger"
+            size="small"
+            link
+            :disabled="!canCancel(scope.row.status)"
+            @click="handleCancelTask(scope.row)"
+          >
+            停止
+          </el-button>
+        </template>
+      </el-table-column>
     </el-table>
     <pagination
       v-if="total > 0"
@@ -55,7 +73,7 @@
 
 <script setup lang="ts">
 // 表格数据
-import { ApiTasks } from '@/api/TaskManagement'
+import { ApiTasks, ApiTasksCancel } from '@/api/TaskManagement'
 import { formatISOToDateTime } from '@/utils/auxiliaryFunction'
 import { createTimer } from '@/utils/TimerManager'
 
@@ -72,6 +90,35 @@ const queryParams = reactive<any>({
   pageNum: 1,
   pageSize: 10
 })
+
+const cancellableStatuses = new Set(['pending', 'dispatched', 'running'])
+
+const canCancel = (status: string) => {
+  return cancellableStatuses.has(String(status || '').toLowerCase())
+}
+
+const handleCancelTask = (row: any) => {
+  if (!row?.task_id || !canCancel(row?.status)) {
+    return
+  }
+
+  ElMessageBox.confirm('确认停止该任务吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(
+    () => {
+      ApiTasksCancel(row.task_id).then((res: any) => {
+        ElMessage.success(res.msg || '任务已停止')
+        fetchData()
+      })
+    },
+    () => {
+      ElMessage.info('已取消操作')
+    }
+  )
+}
+
 // 获取数据
 function fetchData() {
   ApiTasks(props.bossId, queryParams.pageNum, queryParams.pageSize).then((res: any) => {