naive-ui.
This commit is contained in:
@@ -1,38 +1,65 @@
|
||||
<script setup lang="ts">
|
||||
import { c, DataTableColumn, SelectOption } from "naive-ui"
|
||||
import { NButton } from "naive-ui"
|
||||
import Pagination from "~/shared/Pagination/index.vue"
|
||||
import SubmissionResultTag from "oj/components/SubmissionResultTag.vue"
|
||||
import {
|
||||
submissionMemoryFormat,
|
||||
submissionTimeFormat,
|
||||
parseTime,
|
||||
filterEmptyValue,
|
||||
} from "utils/functions"
|
||||
import { Submission } from "utils/types"
|
||||
import { getSubmissions } from "oj/api"
|
||||
import { isDesktop } from "~/shared/composables/breakpoints"
|
||||
import SubmissionResultTag from "oj/components/SubmissionResultTag.vue"
|
||||
|
||||
interface Query {
|
||||
username: string
|
||||
result: string
|
||||
limit: number
|
||||
page: number
|
||||
myself: boolean
|
||||
}
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const problemID = <string>route.query.problem ?? ""
|
||||
const contestID = <string>route.query.contest ?? ""
|
||||
|
||||
const submissions = ref([])
|
||||
const total = ref(0)
|
||||
const query = reactive({
|
||||
const query = reactive<Query>({
|
||||
result: <string>route.query.result ?? "",
|
||||
page: parseInt(<string>route.query.page) || 1,
|
||||
limit: parseInt(<string>route.query.limit) || 10,
|
||||
username: <string>route.query.username ?? "",
|
||||
myself: <"1" | "0">route.query.myself,
|
||||
myself: route.query.myself === "1",
|
||||
})
|
||||
|
||||
const options: SelectOption[] = [
|
||||
{ label: "全部", value: "" },
|
||||
{ label: "编译失败", value: "-2" },
|
||||
{ label: "答案错误", value: "-1" },
|
||||
{ label: "答案正确", value: "0" },
|
||||
{ label: "运行超时", value: "1" },
|
||||
{ label: "内存超限", value: "3" },
|
||||
{ label: "运行时错误", value: "4" },
|
||||
{ label: "系统错误", value: "5" },
|
||||
{ label: "部分正确", value: "8" },
|
||||
]
|
||||
|
||||
async function listSubmissions() {
|
||||
query.result = <string>route.query.result ?? ""
|
||||
query.page = parseInt(<string>route.query.page) || 1
|
||||
query.limit = parseInt(<string>route.query.limit) || 10
|
||||
query.username = <string>route.query.username ?? ""
|
||||
query.myself = <"1" | "0">route.query.myself
|
||||
query.myself = route.query.myself === "1"
|
||||
|
||||
if (query.page < 1) query.page = 1
|
||||
const offset = query.limit * (query.page - 1)
|
||||
const res = await getSubmissions({
|
||||
...query,
|
||||
myself: query.myself ? "1" : "0",
|
||||
offset,
|
||||
problem_id: problemID,
|
||||
contest_id: contestID,
|
||||
@@ -44,16 +71,30 @@ async function listSubmissions() {
|
||||
onMounted(listSubmissions)
|
||||
|
||||
function routerPush() {
|
||||
const newQuery = {
|
||||
...query,
|
||||
myself: query.myself ? "1" : "0",
|
||||
}
|
||||
router.push({
|
||||
path: route.path,
|
||||
query: filterEmptyValue(query),
|
||||
query: filterEmptyValue(newQuery),
|
||||
})
|
||||
}
|
||||
|
||||
function search(value: string) {
|
||||
query.username = value
|
||||
}
|
||||
|
||||
function clear() {
|
||||
query.username = ""
|
||||
query.myself = false
|
||||
query.result = ""
|
||||
}
|
||||
|
||||
watch(() => query.page, routerPush)
|
||||
|
||||
watch(
|
||||
() => [query.limit, query.myself, query.username],
|
||||
() => [query.limit, query.myself, query.username, query.result],
|
||||
() => {
|
||||
query.page = 1
|
||||
routerPush()
|
||||
@@ -66,75 +107,88 @@ watch(
|
||||
if (newVal) listSubmissions()
|
||||
}
|
||||
)
|
||||
|
||||
const columns: DataTableColumn<Submission>[] = [
|
||||
{
|
||||
title: "提交时间",
|
||||
key: "create_time",
|
||||
width: 180,
|
||||
render: (row) =>
|
||||
parseTime(row.create_time, isDesktop ? "YYYY-M-D hh:mm:ss" : "M-D hh:mm"),
|
||||
},
|
||||
{
|
||||
title: "编号",
|
||||
key: "id",
|
||||
render: (row) =>
|
||||
h(NButton, { text: true, type: "info" }, () => row.id.slice(0, 12)),
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
key: "status",
|
||||
width: 120,
|
||||
render: (row) => h(SubmissionResultTag, { result: row.result }),
|
||||
},
|
||||
{
|
||||
title: "题目",
|
||||
key: "problem",
|
||||
width: 100,
|
||||
render: (row) =>
|
||||
h(NButton, { text: true, type: "info" }, () => row.problem),
|
||||
},
|
||||
{
|
||||
title: "执行耗时",
|
||||
key: "time",
|
||||
width: 100,
|
||||
render: (row) => submissionTimeFormat(row.statistic_info.time_cost),
|
||||
},
|
||||
{
|
||||
title: "占用内存",
|
||||
key: "memory",
|
||||
width: 100,
|
||||
render: (row) => submissionMemoryFormat(row.statistic_info.memory_cost),
|
||||
},
|
||||
{ title: "语言", key: "language", width: 100 },
|
||||
{
|
||||
title: "提交者",
|
||||
key: "username",
|
||||
minWidth: 120,
|
||||
render: (row) =>
|
||||
h(NButton, { text: true, type: "info" }, () => row.username),
|
||||
},
|
||||
]
|
||||
</script>
|
||||
<template>
|
||||
<el-form inline>
|
||||
<el-form-item label="提交状态">
|
||||
<el-select></el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="查看自己">
|
||||
<el-switch></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="搜索提交者">
|
||||
<el-input></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table :data="submissions" stripe>
|
||||
<el-table-column
|
||||
label="提交时间"
|
||||
prop="create_time"
|
||||
:width="isDesktop ? 200 : 120"
|
||||
>
|
||||
<template #default="scope">
|
||||
{{
|
||||
parseTime(
|
||||
scope.row.create_time,
|
||||
isDesktop ? "YYYY-M-D hh:mm:ss" : "M-D hh:mm"
|
||||
)
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="编号" min-width="140">
|
||||
<template #default="scope">
|
||||
<el-link type="primary">{{ scope.row.id.slice(0, 12) }}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" prop="result">
|
||||
<template #default="scope">
|
||||
<SubmissionResultTag :result="scope.row.result" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="题目" width="90">
|
||||
<template #default="scope">
|
||||
<el-link
|
||||
type="primary"
|
||||
@click="$router.push(`/problem/${scope.row.problem}`)"
|
||||
>
|
||||
{{ scope.row.problem }}
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="isDesktop" label="执行耗时" width="100">
|
||||
<template #default="scope">
|
||||
{{ submissionTimeFormat(scope.row.statistic_info.time_cost) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="isDesktop" label="占用内存" width="100">
|
||||
<template #default="scope">
|
||||
{{ submissionMemoryFormat(scope.row.statistic_info.memory_cost) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="语言" prop="language" width="100"></el-table-column>
|
||||
<el-table-column label="提交者" min-width="120">
|
||||
<template #default="scope">
|
||||
<el-link type="primary">{{ scope.row.username }}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<n-form :inline="isDesktop" label-placement="left">
|
||||
<n-form-item label="提交状态">
|
||||
<n-select
|
||||
class="select"
|
||||
v-model:value="query.result"
|
||||
:options="options"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="只看自己">
|
||||
<n-switch v-model:value="query.myself" />
|
||||
</n-form-item>
|
||||
<n-form-item label="搜索提交者">
|
||||
<n-input @change="search" clearable placeholder="输入后回车" />
|
||||
</n-form-item>
|
||||
<n-form-item>
|
||||
<n-button @click="clear">重置</n-button>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
<n-data-table striped size="small" :columns="columns" :data="submissions" />
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:limit="query.limit"
|
||||
v-model:page="query.page"
|
||||
/>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
.select {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user