OJ_UI/src/view/submission/SubmissionListView.vue

<script setup lang="ts">
import { getSubmissionController } from '@/api/submission-controller'
import type { SubmissionVo } from '@/api/models'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useLoginUserStore } from '@/store'
import { formatTime } from '@/util/format-time'
import { getStatusInfo } from '@/util/submission'

const route = useRoute()
const router = useRouter()
const api = getSubmissionController()
const loginUserStore = useLoginUserStore()

const loading = ref(false)
const tableData = ref<SubmissionVo[]>([])
const pagination = reactive({ pageNum: 1, pageSize: 20, total: 0 })

const fetchData = async () => {
  loading.value = true
  try {
    const res = await api.queryMy({ pageNum: pagination.pageNum, pageSize: pagination.pageSize })
    const pageData = res?.data
    tableData.value = pageData?.data || []
    pagination.total = pageData?.total || 0
  } catch {
    tableData.value = []
  } finally {
    loading.value = false
  }
}

const handlePageChange = (page: number) => {
  pagination.pageNum = page
  fetchData()
}

const handleSizeChange = (size: number) => {
  pagination.pageSize = size
  pagination.pageNum = 1
  fetchData()
}

const goProblem = (problemId?: number) => {
  if (!problemId) return
  router.push(`/problems/${problemId}`)
}

onMounted(() => {
  if (!loginUserStore.loginUser.isLogin) {
    ElMessage.warning('请先登录')
    router.push({ path: '/login', query: { redirect: route.fullPath } })
    return
  }
  fetchData()
})
</script>

<template>
  <div class="submission-list-view">
    <el-card class="table-card" shadow="never">
      <template #header><span class="card-title">我的提交记录</span></template>

      <el-table v-loading="loading" :data="tableData" border stripe style="width: 100%" :empty-text="'暂无提交记录'">
        <el-table-column type="expand">
          <template #default="{ row }">
            <div v-if="row.judgeDetail" class="expand-detail">
              <div class="expand-title">判题详情</div>
              <pre class="judge-detail">{{ row.judgeDetail }}</pre>
            </div>
            <el-empty v-else description="无判题详情" :image-size="40" />
          </template>
        </el-table-column>
        <el-table-column prop="id" label="编号" width="90" align="center" />
        <el-table-column label="题目" min-width="120">
          <template #default="{ row }">
            <el-link type="primary" @click="goProblem(row.problemId)">题目 #{{ row.problemId ?? '-' }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="language" label="语言" width="90" align="center">
          <template #default="{ row }">{{ (row.language || 'java').toUpperCase() }}</template>
        </el-table-column>
        <el-table-column label="状态" width="120" align="center">
          <template #default="{ row }">
            <el-tag :type="getStatusInfo(row.status).tag">{{ getStatusInfo(row.status).label }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="得分" width="80" align="center">
          <template #default="{ row }">{{ row.score ?? '-' }}</template>
        </el-table-column>
        <el-table-column label="用时" width="90" align="center">
          <template #default="{ row }">{{ row.timeUsedMs != null ? `${row.timeUsedMs}ms` : '-' }}</template>
        </el-table-column>
        <el-table-column label="内存" width="100" align="center">
          <template #default="{ row }">{{ row.memoryUsedKb != null ? `${row.memoryUsedKb}KB` : '-' }}</template>
        </el-table-column>
        <el-table-column label="通过用例" width="100" align="center">
          <template #default="{ row }">
            {{ row.passedTestCases ?? 0 }} / {{ row.totalTestCases ?? 0 }}
          </template>
        </el-table-column>
        <el-table-column label="提交时间" width="170" align="center">
          <template #default="{ row }">{{ formatTime(row.createdAt) }}</template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.pageNum"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
        />
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.submission-list-view {
  padding: 20px;
  margin: 0 auto;
}

.card-title {
  font-weight: 600;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.expand-detail {
  padding: 8px 16px;
}

.expand-title {
  font-weight: 600;
  margin-bottom: 6px;
}

.judge-detail {
  margin: 0;
  padding: 12px;
  background: var(--el-fill-color-light);
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
}
</style>