YG_FT/frontend/src/views/data-process/DataProcessListView.vue

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import DataTablePage from '@/components/DataTablePage.vue'
import ModelStatusTag from '@/components/ModelStatusTag.vue'

/** 数据处理任务类型 */
interface DataProcessTask {
  id: number | string
  name: string
  status: string
  process_type: string
  source_dataset: string
  output_dataset?: string
  create_time?: string
}

// TODO: 接入真实接口前，先用本地 mock 数据
const router = useRouter()
const dataList = ref<DataProcessTask[]>([
  {
    id: 183921,
    name: '客服问答数据清洗',
    status: 'completed',
    process_type: '去重清洗',
    source_dataset: '客服对话原始集',
    output_dataset: '客服对话清洗集',
    create_time: '2026-07-08 14:23:00',
  },
  {
    id: 492015,
    name: '指令微调数据构造',
    status: 'running',
    process_type: '指令构造',
    source_dataset: '通用语料库',
    output_dataset: 'SFT 指令集',
    create_time: '2026-07-09 09:10:00',
  },
  {
    id: 731948,
    name: '敏感信息脱敏处理',
    status: 'pending',
    process_type: '脱敏处理',
    source_dataset: '用户反馈数据',
    create_time: '2026-07-09 16:45:00',
  },
  {
    id: 582012,
    name: '多轮对话拼接',
    status: 'failed',
    process_type: '格式转换',
    source_dataset: '单轮问答集',
    create_time: '2026-07-10 08:30:00',
  },
])

/** 新建数据处理任务 */
function handleCreate() {
  router.push('/data-process/create')
}

/** 查看任务详情 */
function viewDetail(row: unknown) {
  const taskId = (row as { id: string | number }).id
  router.push({ name: 'data-process-detail', params: { id: taskId } })
}

/** 删除任务（功能开发中） */
function handleDelete(_row: unknown) {
  ElMessage.info('删除功能开发中...')
}

function formatDateTime(value?: string) {
  if (!value) return '-'
  return new Date(value).toLocaleString('zh-CN', { hour12: false })
}
</script>

<template>
  <div class="data-process-page" style="height: 100%;">
    <DataTablePage
      title=""
      :data="dataList"
      searchable
      :search-fields="['name']"
      create-text="新建数据处理任务"
      create-to="/data-process/create"
      row-key="id"
      :page-size="10"
    >
      <template #columns>
        <el-table-column label="任务ID" prop="id" align="center" width="100" />
        <el-table-column label="任务名称" prop="name" align="center" show-overflow-tooltip />
        <el-table-column label="任务状态" align="center" width="110">
          <template #default="{ row }">
            <ModelStatusTag :status="row.status" />
          </template>
        </el-table-column>
        <el-table-column label="处理类型" align="center" width="140">
          <template #default="{ row }">{{ row.process_type || '-' }}</template>
        </el-table-column>
        <el-table-column label="源数据集" align="center" show-overflow-tooltip>
          <template #default="{ row }">{{ row.source_dataset || '-' }}</template>
        </el-table-column>
        <el-table-column label="输出数据集" align="center" show-overflow-tooltip>
          <template #default="{ row }">{{ row.output_dataset || '-' }}</template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" width="190">
          <template #default="{ row }">{{ formatDateTime(row.create_time) }}</template>
        </el-table-column>
      </template>

      <template #actions="{ row }">
        <div class="action-buttons">
          <el-button type="primary" link size="small" @click="viewDetail(row)">
            <i class="fa fa-file-text-o" style="margin-right: 4px" />详情
          </el-button>
          <el-button type="danger" link size="small" @click="handleDelete(row)">
            <i class="fa fa-trash-o" style="margin-right: 4px" />删除
          </el-button>
        </div>
      </template>
    </DataTablePage>
  </div>
</template>

<style scoped lang="scss">
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
}
</style>