<script lang="ts" setup>
|
import type { QuestionBankOption } from '#/views/x/tms/question/types';
|
import type { SelfTestFormModel } from './types';
|
|
import { computed, onMounted, reactive, ref } from 'vue';
|
import { useRouter } from 'vue-router';
|
|
import { useMessage } from '@jnpf/hooks';
|
|
import { getSelfTestBanks, startSelfTest } from '#/api/x/tms/selfTest';
|
|
import {
|
COUNT_OPTIONS,
|
SELF_TEST_DIFFICULTY_OPTIONS,
|
colorOfSelfTestDifficulty,
|
type SelfTestDifficulty,
|
} from './constants';
|
|
defineOptions({ name: 'TmsSelfTest' });
|
|
const router = useRouter();
|
const { createMessage } = useMessage();
|
|
const banks = ref<QuestionBankOption[]>([]);
|
const loading = ref(false);
|
const formRef = ref();
|
|
function defaultSetting() {
|
return { count: 0, difficulty: 'normal' as SelfTestDifficulty };
|
}
|
|
const dataForm = reactive<SelfTestFormModel>({
|
bankId: undefined,
|
single: defaultSetting(),
|
multi: defaultSetting(),
|
judge: defaultSetting(),
|
});
|
|
const rules = {
|
bankId: [{ required: true, message: '请选择题库', trigger: 'change' }],
|
};
|
|
const totalCount = computed(
|
() => Number(dataForm.single.count || 0) + Number(dataForm.multi.count || 0) + Number(dataForm.judge.count || 0),
|
);
|
|
onMounted(async () => {
|
banks.value = (await getSelfTestBanks()) || [];
|
if (banks.value.length === 1) {
|
dataForm.bankId = banks.value[0].id;
|
}
|
});
|
|
function handleReset() {
|
dataForm.bankId = banks.value.length === 1 ? banks.value[0].id : undefined;
|
dataForm.single = defaultSetting();
|
dataForm.multi = defaultSetting();
|
dataForm.judge = defaultSetting();
|
formRef.value?.clearValidate?.();
|
}
|
|
async function handleStart() {
|
try {
|
await formRef.value?.validate();
|
} catch {
|
return;
|
}
|
if (totalCount.value <= 0) {
|
createMessage.warning('请至少设置一种题型的抽题数量');
|
return;
|
}
|
|
loading.value = true;
|
try {
|
const bank = banks.value.find((b) => b.id === dataForm.bankId);
|
const paper = await startSelfTest({
|
bankId: dataForm.bankId!,
|
bankName: bank?.fullName,
|
single: { ...dataForm.single },
|
multi: { ...dataForm.multi },
|
judge: { ...dataForm.judge },
|
});
|
if (!paper.questions?.length) {
|
createMessage.warning('当前条件下没有可抽题目，请调整数量或难度');
|
return;
|
}
|
sessionStorage.setItem('tms_self_test_paper', JSON.stringify(paper));
|
router.push('/tms/selfTest/exam');
|
} catch (e: any) {
|
createMessage.error(e?.message || '开始自我检测失败');
|
} finally {
|
loading.value = false;
|
}
|
}
|
</script>
|
|
<template>
|
<div class="jnpf-content-wrapper">
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-content tms-self-test-page">
|
<div class="tms-self-test-header">
|
<div class="text-base font-medium">自我检测</div>
|
<div class="mt-1 text-gray-400 text-sm">设置查询条件，从题库中筛选题目进行自我检测。</div>
|
</div>
|
|
<a-form
|
ref="formRef"
|
:model="dataForm"
|
:rules="rules"
|
:label-col="{ style: { width: '120px' } }"
|
class="tms-self-test-form"
|
>
|
<a-form-item label="选择题库" name="bankId">
|
<jnpf-select
|
v-model:value="dataForm.bankId"
|
:options="banks"
|
show-search
|
placeholder="请选择题库"
|
class="!w-[420px]"
|
/>
|
</a-form-item>
|
|
<a-form-item label="单选题设置">
|
<div class="setting-row">
|
<jnpf-select
|
v-model:value="dataForm.single.count"
|
:options="COUNT_OPTIONS"
|
:allow-clear="false"
|
class="!w-[160px]"
|
/>
|
<a-select
|
v-model:value="dataForm.single.difficulty"
|
class="!w-[160px] difficulty-select"
|
:style="{ color: colorOfSelfTestDifficulty(dataForm.single.difficulty) }"
|
>
|
<a-select-option
|
v-for="opt in SELF_TEST_DIFFICULTY_OPTIONS"
|
:key="opt.id"
|
:value="opt.id"
|
>
|
<span :style="{ color: opt.color }">{{ opt.fullName }}</span>
|
</a-select-option>
|
</a-select>
|
</div>
|
</a-form-item>
|
|
<a-form-item label="多选题设置">
|
<div class="setting-row">
|
<jnpf-select
|
v-model:value="dataForm.multi.count"
|
:options="COUNT_OPTIONS"
|
:allow-clear="false"
|
class="!w-[160px]"
|
/>
|
<a-select
|
v-model:value="dataForm.multi.difficulty"
|
class="!w-[160px] difficulty-select"
|
:style="{ color: colorOfSelfTestDifficulty(dataForm.multi.difficulty) }"
|
>
|
<a-select-option
|
v-for="opt in SELF_TEST_DIFFICULTY_OPTIONS"
|
:key="opt.id"
|
:value="opt.id"
|
>
|
<span :style="{ color: opt.color }">{{ opt.fullName }}</span>
|
</a-select-option>
|
</a-select>
|
</div>
|
</a-form-item>
|
|
<a-form-item label="判断题设置">
|
<div class="setting-row">
|
<jnpf-select
|
v-model:value="dataForm.judge.count"
|
:options="COUNT_OPTIONS"
|
:allow-clear="false"
|
class="!w-[160px]"
|
/>
|
<a-select
|
v-model:value="dataForm.judge.difficulty"
|
class="!w-[160px] difficulty-select"
|
:style="{ color: colorOfSelfTestDifficulty(dataForm.judge.difficulty) }"
|
>
|
<a-select-option
|
v-for="opt in SELF_TEST_DIFFICULTY_OPTIONS"
|
:key="opt.id"
|
:value="opt.id"
|
>
|
<span :style="{ color: opt.color }">{{ opt.fullName }}</span>
|
</a-select-option>
|
</a-select>
|
</div>
|
</a-form-item>
|
|
<a-form-item :wrapper-col="{ style: { marginLeft: '120px' } }">
|
<a-space>
|
<a-button type="primary" :loading="loading" @click="handleStart">开始自我检测</a-button>
|
<a-button @click="handleReset">重置</a-button>
|
</a-space>
|
</a-form-item>
|
</a-form>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
.tms-self-test-page {
|
background: #fff;
|
padding: 20px 24px;
|
height: 100%;
|
overflow: auto;
|
}
|
|
.tms-self-test-header {
|
margin-bottom: 24px;
|
padding-bottom: 12px;
|
border-bottom: 1px solid #f0f0f0;
|
}
|
|
.tms-self-test-form {
|
max-width: 720px;
|
padding-top: 8px;
|
}
|
|
.setting-row {
|
display: flex;
|
gap: 16px;
|
align-items: center;
|
}
|
|
.difficulty-select :deep(.ant-select-selection-item) {
|
color: inherit;
|
}
|
</style>
|
