<script lang="ts" setup>
|
import type { ActionItem, BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import type { GradeExamListItem, GradeSessionListItem } from './types';
|
|
import { onActivated, onMounted, ref } from 'vue';
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicVxeTable, TableAction, useVxeTable } from '@jnpf/ui/vxeTable';
|
|
import { getGradeExamList, getGradeSessionInfo } from '#/api/x/tms/examGrade';
|
import { TMS_BTN } from '#/views/x/tms/shared/ui';
|
|
import { colorOfGradeStatus, labelOfGradeStatus, loadExamGradeDics } from './constants';
|
|
import '#/views/x/tms/shared/page.css';
|
|
defineOptions({ name: 'TmsExamGradeSession' });
|
|
const route = useRoute();
|
const router = useRouter();
|
const { createMessage } = useMessage();
|
|
const session = ref<GradeSessionListItem | null>(null);
|
const sessionId = String(route.params.id || '');
|
|
const columns: BasicColumn[] = [
|
{ title: '考生', dataIndex: 'userName', width: 120 },
|
{ title: '部门', dataIndex: 'deptName', minWidth: 140 },
|
{ title: '交卷时间', dataIndex: 'submitTime', width: 170 },
|
{
|
title: '客观题得分',
|
dataIndex: 'objectiveScore',
|
width: 110,
|
align: 'center',
|
customRender: ({ record }) => (record as GradeExamListItem).objectiveScore ?? '-',
|
},
|
{
|
title: '主观题得分',
|
dataIndex: 'subjectiveScore',
|
width: 110,
|
align: 'center',
|
customRender: ({ record }) => (record as GradeExamListItem).subjectiveScore ?? '-',
|
},
|
{
|
title: '总分',
|
dataIndex: 'totalScore',
|
width: 90,
|
align: 'center',
|
customRender: ({ record }) => (record as GradeExamListItem).totalScore ?? '-',
|
},
|
{
|
title: '阅卷状态',
|
dataIndex: 'gradeStatus',
|
width: 100,
|
align: 'center',
|
slots: { default: 'gradeStatus' },
|
},
|
];
|
|
const [registerTable, { reload }] = useVxeTable({
|
api: fetchList,
|
columns,
|
immediate: false,
|
rowKey: 'id',
|
useSearchForm: false,
|
pagination: false,
|
actionColumn: {
|
width: 100,
|
title: '操作',
|
dataIndex: 'action',
|
fixed: 'right',
|
},
|
});
|
|
onMounted(async () => {
|
if (!sessionId) {
|
router.replace('/tms/examGrade');
|
return;
|
}
|
try {
|
await loadExamGradeDics();
|
await refreshSession();
|
} catch (e: any) {
|
createMessage.error(e?.message || '加载失败');
|
router.replace('/tms/examGrade');
|
}
|
});
|
|
onActivated(() => {
|
if (!sessionId) return;
|
void refreshSession();
|
});
|
|
async function refreshSession() {
|
session.value = await getGradeSessionInfo(sessionId);
|
reload();
|
}
|
|
async function fetchList() {
|
const list = await getGradeExamList(sessionId);
|
return { data: Array.isArray(list) ? list : [] };
|
}
|
|
function goBack() {
|
router.push('/tms/examGrade');
|
}
|
|
function handleMark(record: GradeExamListItem) {
|
router.push(`/tms/examGrade/mark/${record.id}`);
|
}
|
|
function getTableActions(record: GradeExamListItem): ActionItem[] {
|
if (record.gradeStatus === 'pending') {
|
return [{ label: TMS_BTN.grade, onClick: handleMark.bind(null, record) }];
|
}
|
return [{ label: TMS_BTN.detail, onClick: handleMark.bind(null, record) }];
|
}
|
</script>
|
|
<template>
|
<div class="jnpf-content-wrapper">
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-content">
|
<BasicVxeTable @register="registerTable">
|
<template #tableTitle>
|
<div class="tms-page-header" style="margin-bottom: 0">
|
<div>
|
<div class="tms-page-header__title">{{ session?.paperName || '答卷列表' }}</div>
|
<div class="tms-page-header__sub">{{ session?.taskNo }} · {{ session?.taskSubject }}</div>
|
</div>
|
<div class="tms-page-header__actions">
|
<a-button @click="goBack">{{ TMS_BTN.back }}</a-button>
|
</div>
|
</div>
|
</template>
|
<template #gradeStatus="{ record }">
|
<span :style="{ color: colorOfGradeStatus(record.gradeStatus) }">
|
{{ labelOfGradeStatus(record.gradeStatus) }}
|
</span>
|
</template>
|
<template #action="{ record }">
|
<TableAction :actions="getTableActions(record)" />
|
</template>
|
</BasicVxeTable>
|
</div>
|
</div>
|
</div>
|
</template>
|
