kvm/src/views/task/TaskList.vue

<template>
  <div class="task-list-container">
    <a-card class="glass-card">
      <template #title>
        <span>任务列表</span>
      </template>

      <div class="search-bar">
        <a-input-search
          v-model:value="searchTaskId"
          placeholder="输入任务ID"
          style="width: 260px"
          @search="handleSearch"
          allow-clear
        />
        <a-button @click="handleRefresh">
          <reload-outlined />
          刷新
        </a-button>
      </div>

      <a-table
        :columns="columns"
        :data-source="taskRows"
        :loading="loading"
        :pagination="pagination"
        row-key="task_id"
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <a-tag :color="getStatusColor(record.status)">
              {{ record.status }}
            </a-tag>
          </template>
          <template v-if="column.key === 'actions'">
            <a-space>
              <a-button type="link" size="small" @click="handleView(record)">
                查看日志
              </a-button>
              <a-button
                v-if="record.status === 'pending' || record.status === 'running'"
                type="link"
                size="small"
                danger
                @click="handleCancel(record)"
              >
                取消任务
              </a-button>
            </a-space>
          </template>
        </template>
      </a-table>

      <a-drawer
        v-model:open="logDrawerVisible"
        title="任务日志"
        placement="right"
        width="480"
      >
        <a-skeleton v-if="logLoading" active :paragraph="{ rows: 8 }" />
        <div v-else class="log-content">
          <pre v-if="logs.length" class="log-text">
{{ logs.join('\n') }}
          </pre>
          <a-empty v-else description="暂无日志" />
        </div>
      </a-drawer>
    </a-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ReloadOutlined } from '@ant-design/icons-vue'
import { Modal, message } from 'ant-design-vue'
import * as taskApi from '@/api/taskApi'

const searchTaskId = ref('')
const taskRows = ref([])
const loading = ref(false)
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showTotal: (total) => `共 ${total} 条`
})

const logDrawerVisible = ref(false)
const logLoading = ref(false)
const logs = ref([])
const currentTaskId = ref('')

const columns = [
  { title: '任务ID', dataIndex: 'task_id', key: 'task_id' },
  { title: '状态', dataIndex: 'status', key: 'status', width: 120 },
  { title: '进度(%)', dataIndex: 'progress', key: 'progress', width: 120 },
  { title: '操作', key: 'actions', width: 200, fixed: 'right' }
]

const getStatusColor = (status) => {
  const map = {
    pending: 'default',
    running: 'blue',
    success: 'green',
    failed: 'red'
  }
  return map[status] || 'default'
}

const fetchTask = async () => {
  if (!searchTaskId.value) {
    taskRows.value = []
    pagination.value.total = 0
    return
  }

  loading.value = true
  try {
    const data = await taskApi.getTaskStatus(searchTaskId.value)
    // 接口返回单个任务对象，包装成表格用的数组
    if (data) {
      taskRows.value = [data]
      pagination.value.total = 1
    } else {
      taskRows.value = []
      pagination.value.total = 0
    }
  } catch (error) {
    console.error('获取任务状态失败:', error)
    taskRows.value = []
    pagination.value.total = 0
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  pagination.value.current = 1
  fetchTask()
}

const handleRefresh = () => {
  fetchTask()
}

const handleTableChange = (pag) => {
  pagination.value.current = pag.current
  pagination.value.pageSize = pag.pageSize
}

const handleView = async (record) => {
  currentTaskId.value = record.task_id
  logDrawerVisible.value = true
  logLoading.value = true
  logs.value = []

  try {
    const data = await taskApi.getTaskLogs(record.task_id)
    const logArray = Array.isArray(data.logs) ? data.logs : []
    logs.value = logArray
  } catch (error) {
    console.error('获取任务日志失败:', error)
  } finally {
    logLoading.value = false
  }
}

const handleCancel = (record) => {
  Modal.confirm({
    title: '确认取消任务',
    content: `确定要取消任务 ${record.task_id} 吗？`,
    okType: 'danger',
    onOk: async () => {
      try {
        await taskApi.cancelTask(record.task_id, false)
        message.success('已提交取消请求')
        fetchTask()
      } catch (error) {
        console.error('取消任务失败:', error)
      }
    }
  })
}
</script>

<style scoped>
.task-list-container {
  padding: 0;
}

.search-bar {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.log-content {
  max-height: 70vh;
  overflow: auto;
}

.log-text {
  white-space: pre-wrap;
  word-break: break-all;
  background: transparent;
  color: #e5e7eb;
}
</style>