<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 { exportExamScores, getExamScoreDetail } from '#/api/x/tms/examScore';
|
import { isPassNo, isPassYes } from '#/views/x/tms/shared/dic';
|
import { saveExportBlob } from '#/views/x/tms/shared/exportDownload';
|
import { TMS_BTN } from '#/views/x/tms/shared/ui';
|
|
import {
|
PASS_FLAG_FILTER_OPTIONS,
|
TMS_DIC_FIELD_NAMES,
|
labelOfPassFlag,
|
loadExamScoreDics,
|
} from './constants';
|
|
import '#/views/x/tms/shared/page.css';
|
|
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 exporting = ref(false);
|
|
const columns: BasicColumn[] = [
|
{ title: '试卷名称', dataIndex: 'taskSubject', minWidth: 220 },
|
{ title: '试卷编号', dataIndex: 'taskNo', width: 180 },
|
{
|
title: '考生',
|
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' },
|
},
|
];
|
|
const [registerTable, { getSelectRows, reload, getForm }] = 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: PASS_FLAG_FILTER_OPTIONS.value,
|
fieldNames: TMS_DIC_FIELD_NAMES,
|
},
|
},
|
],
|
},
|
pagination: false,
|
actionColumn: {
|
width: 110,
|
title: '操作',
|
dataIndex: 'action',
|
fixed: 'right',
|
},
|
});
|
|
onMounted(async () => {
|
if (!summaryId) {
|
router.replace('/tms/examScore');
|
return;
|
}
|
try {
|
await loadExamScoreDics();
|
getForm()?.updateSchema?.([
|
{
|
field: 'passFlag',
|
componentProps: {
|
allowClear: true,
|
placeholder: '请选择',
|
options: PASS_FLAG_FILTER_OPTIONS.value,
|
fieldNames: TMS_DIC_FIELD_NAMES,
|
},
|
},
|
]);
|
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 === 'pass' || params.passFlag === '1') {
|
list = list.filter((x) => isPassYes(x.passFlag));
|
} else if (params.passFlag === 'fail' || params.passFlag === '0') {
|
list = list.filter((x) => isPassNo(x.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]);
|
}
|
|
async function handleExport() {
|
if (exporting.value || !summaryId) return;
|
exporting.value = true;
|
try {
|
const res = await exportExamScores([summaryId]);
|
await saveExportBlob(res, '考试成绩.xls');
|
createMessage.success('导出成功');
|
} catch (e: any) {
|
createMessage.error(e?.message || '导出失败');
|
} finally {
|
exporting.value = false;
|
}
|
}
|
|
function getTableActions(record: ExamScoreDetailRow): ActionItem[] {
|
return [{ label: TMS_BTN.viewPaper, 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">{{ TMS_BTN.back }}</a-button>
|
<a-button type="primary" @click="handleViewSelected">{{ TMS_BTN.viewPaper }}</a-button>
|
<a-button :loading="exporting" @click="handleExport">{{ TMS_BTN.export }}</a-button>
|
<span class="tms-toolbar-hint">{{ titleText }}</span>
|
</a-space>
|
</template>
|
<template #passFlag="{ record }">
|
<span
|
v-if="isPassYes(record.passFlag) || isPassNo(record.passFlag)"
|
:class="isPassYes(record.passFlag) ? 'text-green-600' : 'text-red-500'"
|
>
|
{{ labelOfPassFlag(record.passFlag) }}
|
</span>
|
<span v-else>{{ labelOfPassFlag(record.passFlag) }}</span>
|
</template>
|
<template #action="{ record }">
|
<TableAction :actions="getTableActions(record)" />
|
</template>
|
</BasicVxeTable>
|
</div>
|
</div>
|
</div>
|
</template>
|
