feat(tms): 完成课程考试自测等页面与接口对接

liuyu

21 小时以前 93c133349a5ccd7a328371fa113dce69d5611f21

 apps/jnpf-web-apps-main/src/views/x/tms/selfTest/index.vue

@@ -2,10 +2,11 @@
import type { QuestionBankOption } from '#/views/x/tms/question/types';
import type { SelfTestFormModel } from './types';

import { computed, onMounted, reactive, ref } from 'vue';
import { computed, onActivated, onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';

import { useMessage } from '@jnpf/hooks';
import { useTabbarStore } from '@vben/stores';

import { getSelfTestBanks, startSelfTest } from '#/api/x/tms/selfTest';

@@ -20,10 +21,12 @@

const router = useRouter();
const { createMessage } = useMessage();
const tabbarStore = useTabbarStore();

const banks = ref<QuestionBankOption[]>([]);
const loading = ref(false);
const formRef = ref();
const pageReady = ref(false);

function defaultSetting() {
  return { count: 0, difficulty: 'normal' as SelfTestDifficulty };
@@ -44,10 +47,28 @@
  () => 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;
async function loadBanks() {
  try {
    banks.value = (await getSelfTestBanks()) || [];
    if (!dataForm.bankId && banks.value.length === 1) {
      dataForm.bankId = banks.value[0].id;
    }
  } catch (e: any) {
    banks.value = [];
    createMessage.error(e?.message || '加载题库失败');
  } finally {
    pageReady.value = true;
  }
}

onMounted(() => {
  tabbarStore.renderRouteView = true;
  loadBanks();
});
onActivated(() => {
  tabbarStore.renderRouteView = true;
  if (!pageReady.value || !banks.value.length) {
    loadBanks();
  }
});

@@ -92,6 +113,10 @@
    loading.value = false;
  }
}

function goRecords() {
  router.push('/tms/selfTest/records');
}
</script>

<template>
@@ -99,8 +124,11 @@
    <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>
            <div class="text-base font-medium">自我检测</div>
            <div class="mt-1 text-gray-400 text-sm">设置查询条件，从题库中筛选题目进行自我检测。</div>
          </div>
          <a-button @click="goRecords">我的检测记录</a-button>
        </div>

        <a-form
@@ -213,6 +241,9 @@
}

.tms-self-test-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;