<script lang="ts" setup>
|
import type { ActionItem, BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import type { ExamScoreDetailRow } from './types';
|
|
import { onMounted, ref } from 'vue';
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicVxeTable, TableAction, useVxeTable } from '@jnpf/ui/vxeTable';
|
|
import { getExamScoreDetail } from '#/api/x/tms/examScore';
|
|
defineOptions({ name: 'TmsExamScoreDetail' });
|
|
const route = useRoute();
|
const router = useRouter();
|
const { createMessage } = useMessage();
|
|
const titleText = ref('考生试卷列表');
|
const summaryId = String(route.params.id || '');
|
const loaded = ref(false);
|
|
const columns: BasicColumn[] = [
|
{ title: '培训主题', dataIndex: 'taskSubject', minWidth: 220 },
|
{ title: '培训任务编号', dataIndex: 'taskNo', width: 140 },
|
{
|
title: '用户ID',
|
dataIndex: 'userName',
|
width: 120,
|
customRender: ({ record }) => {
|
const row = record as ExamScoreDetailRow;
|
return row.userName || row.userId;
|
},
|
},
|
{ title: '考试开始时间', dataIndex: 'examStart', width: 170 },
|
{ title: '考试结束时间', dataIndex: 'examEnd', width: 170 },
|
{ title: '成绩', dataIndex: 'score', width: 80, align: 'center' },
|
{
|
title: '是否合格',
|
dataIndex: 'passFlag',
|
width: 100,
|
align: 'center',
|
slots: { default: 'passFlag' },
|
},
|
{ title: '来源IP地址', dataIndex: 'sourceIp', width: 140 },
|
];
|
|
const [registerTable, { getSelectRows, reload }] = useVxeTable({
|
api: fetchList,
|
columns,
|
immediate: false,
|
rowKey: 'id',
|
rowSelection: { type: 'checkbox' },
|
useSearchForm: true,
|
formConfig: {
|
baseColProps: { span: 6 },
|
compact: true,
|
schemas: [
|
{
|
field: 'keyword',
|
label: '关键词',
|
component: 'Input',
|
componentProps: { placeholder: '请输入检索关键字', submitOnPressEnter: true },
|
},
|
{
|
field: 'passFlag',
|
label: '是否合格',
|
component: 'Select',
|
componentProps: {
|
allowClear: true,
|
placeholder: '请选择',
|
options: [
|
{ id: '1', fullName: '是' },
|
{ id: '0', fullName: '否' },
|
],
|
},
|
},
|
],
|
},
|
pagination: false,
|
actionColumn: {
|
width: 110,
|
title: '操作',
|
dataIndex: 'action',
|
fixed: 'right',
|
},
|
});
|
|
onMounted(async () => {
|
if (!summaryId) {
|
router.replace('/tms/examScore');
|
return;
|
}
|
try {
|
const detail = await getExamScoreDetail(summaryId);
|
titleText.value = `考生试卷列表 · ${detail.taskNo}`;
|
loaded.value = true;
|
reload();
|
} catch (e: any) {
|
createMessage.error(e?.message || '加载失败');
|
router.replace('/tms/examScore');
|
}
|
});
|
|
async function fetchList(params: Record<string, any>) {
|
if (!loaded.value) {
|
return { data: { list: [], pagination: { total: 0 } } };
|
}
|
const detail = await getExamScoreDetail(summaryId);
|
let list = [...(detail.rows || [])];
|
if (params.keyword && params.keyword !== 'null') {
|
const kw = String(params.keyword).trim().toLowerCase();
|
list = list.filter(
|
(x) =>
|
(x.userName || '').toLowerCase().includes(kw) ||
|
(x.userId || '').toLowerCase().includes(kw) ||
|
(x.taskSubject || '').toLowerCase().includes(kw),
|
);
|
}
|
if (params.passFlag === '0' || params.passFlag === '1') {
|
list = list.filter((x) => x.passFlag === params.passFlag);
|
}
|
return { data: { list, pagination: { total: list.length, currentPage: 1, pageSize: list.length || 20 } } };
|
}
|
|
function goBack() {
|
router.push('/tms/examScore');
|
}
|
|
function viewPaper(record: ExamScoreDetailRow) {
|
router.push(`/tms/examScore/paper/${record.id}`);
|
}
|
|
function handleViewSelected() {
|
const rows = (getSelectRows?.() || []) as ExamScoreDetailRow[];
|
if (!rows.length) {
|
createMessage.warning('请先勾选一名考生');
|
return;
|
}
|
if (rows.length > 1) {
|
createMessage.warning('一次只能查看一份试卷，请只勾选一条');
|
return;
|
}
|
viewPaper(rows[0]);
|
}
|
|
function getTableActions(record: ExamScoreDetailRow): ActionItem[] {
|
return [{ label: '查看试卷', onClick: viewPaper.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>
|
<a-space>
|
<a-button @click="goBack">返回</a-button>
|
<a-button type="primary" @click="handleViewSelected">查看试卷</a-button>
|
<span class="text-gray-400 text-sm">{{ titleText }}</span>
|
</a-space>
|
</template>
|
<template #passFlag="{ record }">
|
<span :class="record.passFlag === '1' ? 'text-green-600' : 'text-red-500'">
|
{{ record.passFlag === '1' ? '是' : '否' }}
|
</span>
|
</template>
|
<template #action="{ record }">
|
<TableAction :actions="getTableActions(record)" />
|
</template>
|
</BasicVxeTable>
|
</div>
|
</div>
|
</div>
|
</template>
|
