<script lang="ts" setup>
|
import type { ActionItem, BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import type { MyPaperListItem } from './types';
|
|
import { ref } from 'vue';
|
import { useRouter } from 'vue-router';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicVxeTable, TableAction, useVxeTable } from '@jnpf/ui/vxeTable';
|
|
import { getMyPaperList, startOnlineExam } from '#/api/x/tms/onlineExam';
|
|
import { MY_PAPER_STATUS_OPTIONS, colorOfMyPaperStatus, labelOfMyPaperStatus } from './constants';
|
|
defineOptions({ name: 'TmsOnlineExam' });
|
|
const router = useRouter();
|
const { createMessage } = useMessage();
|
const starting = ref(false);
|
|
const columns: BasicColumn[] = [
|
{ title: '试卷名称', dataIndex: 'paperName', minWidth: 260 },
|
{
|
title: '状态',
|
dataIndex: 'status',
|
width: 100,
|
align: 'center',
|
slots: { default: 'status' },
|
},
|
{
|
title: '考试时间',
|
dataIndex: 'examTimeText',
|
minWidth: 280,
|
customRender: ({ record }) => (record as MyPaperListItem).examTimeText || '-',
|
},
|
{
|
title: '卷面总分',
|
dataIndex: 'totalScore',
|
width: 100,
|
align: 'center',
|
},
|
];
|
|
const [registerTable] = useVxeTable({
|
api: fetchList,
|
columns,
|
immediate: true,
|
rowKey: 'id',
|
useSearchForm: true,
|
formConfig: {
|
baseColProps: { span: 6 },
|
compact: true,
|
schemas: [
|
{
|
field: 'keyword',
|
label: '试卷名称',
|
component: 'Input',
|
componentProps: { placeholder: '请输入试卷名称', submitOnPressEnter: true },
|
},
|
{
|
field: 'status',
|
label: '状态',
|
component: 'Select',
|
componentProps: {
|
allowClear: true,
|
placeholder: '请选择状态',
|
options: MY_PAPER_STATUS_OPTIONS,
|
},
|
},
|
],
|
},
|
actionColumn: {
|
width: 160,
|
title: '操作',
|
dataIndex: 'action',
|
fixed: 'right',
|
},
|
});
|
|
async function fetchList(params: Record<string, any>) {
|
return { data: await getMyPaperList(params) };
|
}
|
|
function handleDetail(record: MyPaperListItem) {
|
router.push(`/tms/onlineExam/detail/${record.id}`);
|
}
|
|
async function handleStart(record: MyPaperListItem) {
|
if (starting.value) return;
|
starting.value = true;
|
try {
|
const paper = await startOnlineExam(record.id);
|
sessionStorage.setItem('tms_online_exam_paper', JSON.stringify(paper));
|
sessionStorage.setItem('tms_online_exam_myPaperId', record.id);
|
router.push('/tms/onlineExam/exam');
|
} catch (e: any) {
|
createMessage.error(e?.message || '开始考试失败');
|
} finally {
|
starting.value = false;
|
}
|
}
|
|
function getTableActions(record: MyPaperListItem): ActionItem[] {
|
const actions: ActionItem[] = [];
|
if (record.status === 'notStarted') {
|
actions.push({ label: '开始考试', onClick: handleStart.bind(null, record) });
|
} else if (record.status === 'doing') {
|
actions.push({ label: '继续考试', onClick: handleStart.bind(null, record) });
|
}
|
actions.push({ label: '查看详情', onClick: handleDetail.bind(null, record) });
|
return actions;
|
}
|
</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>
|
<div class="text-base font-medium">我的试卷</div>
|
<div class="mt-1 text-gray-400 text-sm">我的试卷，选择试卷参加考试，或者查看考试详情。</div>
|
</div>
|
</template>
|
<template #status="{ record }">
|
<span :style="{ color: colorOfMyPaperStatus(record.status) }">
|
{{ labelOfMyPaperStatus(record.status) }}
|
</span>
|
</template>
|
<template #action="{ record }">
|
<TableAction :actions="getTableActions(record)" />
|
</template>
|
</BasicVxeTable>
|
</div>
|
</div>
|
</div>
|
</template>
|
