|
|
|
|
|
<template>
|
|
|
|
|
|
<main class="question-bank app-container">
|
|
|
|
|
|
<header class="page-head"><div><h1>题库管理</h1><p>维护平台公共题库，供教师组卷使用</p></div><div class="actions"><el-button type="primary" :icon="Plus" @click="openEditor()">添加题目</el-button><el-button type="success" :icon="Upload" :loading="loading" @click="pickImport">批量导入</el-button><el-dropdown trigger="click" @command="downloadTemplate"><el-button type="success" :icon="Download">下载模板<el-icon class="el-icon--right"><ArrowDown /></el-icon></el-button><template #dropdown><el-dropdown-menu><el-dropdown-item command="word">Word 导入模板</el-dropdown-item><el-dropdown-item command="excel">Excel 导入模板</el-dropdown-item></el-dropdown-menu></template></el-dropdown><el-button type="primary" @click="openAi">AI出题</el-button></div></header>
|
|
|
|
|
|
<section class="toolbar"><el-select v-model="query.type" clearable placeholder="题型：请选择" @change="load"><el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value" /></el-select><el-select v-model="query.taskKey" clearable placeholder="归属项目：请选择" @change="load"><el-option v-for="item in projects" :key="item.taskKey" :label="projectLabel(item)" :value="item.taskKey" /></el-select><el-input v-model="query.keyword" placeholder="请输入题干关键词" clearable @keyup.enter="load" /><el-button type="primary" :icon="Search" @click="load">搜索</el-button><input ref="fileInput" type="file" accept=".docx,.xlsx,.xls" hidden @change="importFile" /></section>
|
|
|
|
|
|
<el-table v-loading="loading" :data="questions" class="data-table"><el-table-column type="index" label="序号" width="78" /><el-table-column label="题干" min-width="420" show-overflow-tooltip><template #default="{ row }"><span>{{ plainHtml(row.stem) }}</span></template></el-table-column><el-table-column label="题型" width="120"><template #default="{ row }"><el-tag>{{ typeName[row.type] }}</el-tag></template></el-table-column><el-table-column label="题目来源" width="140"><template #default><el-tag type="success">平台题库</el-tag></template></el-table-column><el-table-column label="操作" width="190" fixed="right"><template #default="{ row }"><el-button link type="primary" @click="openEditor(row)">编辑</el-button><el-button link type="primary" @click="openEditor(row)">查看</el-button><el-button link type="danger" @click="remove(row)">删除</el-button></template></el-table-column><template #empty><el-empty description="暂无题目" /></template></el-table>
|
|
|
|
|
|
<p class="prototype-note">说明：简答题批量导入不支持文件上传，只导入题干和参考答案。管理端进行内置题库管理，题库管理功能在管理端也放一个页面。老师端只能查看管理端的题目，只能编辑删除自己新增的题目。智云平台上有AI出题功能，可以复用过来，点击AI出题按钮跳转到AI出题界面，支持导出试题</p>
|
|
|
|
|
|
|
|
|
|
|
|
<el-dialog v-model="editorVisible" :title="form.id ? '编辑题目' : '新增题目'" width="min(1180px, 94vw)" top="4vh" class="question-editor-dialog" destroy-on-close>
|
|
|
|
|
|
<div class="editor-shell"><div class="editor-project"><span>归属项目</span><el-select v-model="form.taskKey" placeholder="请选择归属项目"><el-option v-for="item in projects" :key="item.taskKey" :label="projectLabel(item)" :value="item.taskKey" /></el-select></div>
|
|
|
|
|
|
<div class="type-switch"><span>题型：</span><el-radio-group v-model="form.type" @change="resetForType"><el-radio-button v-for="item in types" :key="item.value" :label="item.value">{{ item.label }}</el-radio-button></el-radio-group></div>
|
|
|
|
|
|
<div class="rich-row"><label>题干</label><Editor v-model="form.stem" :min-height="154" /></div>
|
|
|
|
|
|
<template v-if="isChoice"><div class="option-block"><label>选项</label><div class="option-list"><div v-for="option in form.options" :key="option.label" class="option-row"><el-radio v-if="form.type === 'SINGLE'" v-model="singleAnswer" :label="option.label" class="answer-control">{{ option.label }}</el-radio><el-checkbox v-else v-model="answers" :label="option.label" class="answer-control">{{ option.label }}</el-checkbox><Editor v-model="option.content" :min-height="92" /></div></div></div><div class="rich-row analysis-row"><label>答案解析（选填）</label><Editor v-model="form.analysis" :min-height="112" /></div></template>
|
|
|
|
|
|
<template v-else-if="form.type === 'TRUE_FALSE'"><div class="tf-block"><label>选项</label><el-radio-group v-model="form.answer"><el-radio :label="true">对</el-radio><el-radio :label="false">错</el-radio></el-radio-group></div><div class="rich-row analysis-row"><label>答案解析（选填）</label><Editor v-model="form.analysis" :min-height="112" /></div></template>
|
|
|
|
|
|
<template v-else><div class="material-row"><el-upload :show-file-list="false" :http-request="uploadMaterial" accept=".pdf,.doc,.docx,.png,.jpg,.jpeg"><el-button type="primary" plain :loading="uploading">上传简答题资料</el-button></el-upload><span v-if="form.attachmentName" class="material-name">{{ form.attachmentName }}</span></div><div class="rich-row"><label>参考答案</label><Editor v-model="form.answer" :min-height="180" /></div><div class="rich-row analysis-row"><label>答案解析（选填）</label><Editor v-model="form.analysis" :min-height="112" /></div></template>
|
|
|
|
|
|
</div><template #footer><el-button @click="editorVisible=false">取消</el-button><el-button type="primary" :loading="saving" @click="save">确定</el-button></template>
|
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
|
|
<el-dialog v-model="aiVisible" title="AI 出题" width="620px"><el-form :model="aiForm" label-width="92px"><el-form-item label="归属项目"><el-select v-model="aiForm.taskKey" style="width:100%"><el-option v-for="item in projects" :key="item.taskKey" :label="projectLabel(item)" :value="item.taskKey" /></el-select></el-form-item><el-form-item label="题型"><el-select v-model="aiForm.type"><el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value" /></el-select></el-form-item><el-form-item label="数量"><el-input-number v-model="aiForm.count" :min="1" :max="50" /></el-form-item><el-form-item label="出题要求"><el-input v-model="aiForm.requirement" type="textarea" :rows="4" placeholder="例如：偏重实训场景，难度中等" /></el-form-item></el-form><el-alert v-if="preview.length" title="请确认预览内容后再入库" type="info" :closable="false" class="preview-alert" /><el-scrollbar v-if="preview.length" max-height="280px"><div v-for="(q, i) in preview" :key="i" class="preview-item"><b>{{ i + 1 }}. {{ plainHtml(q.stem) }}</b><div>答案：{{ displayAnswer(q.answer) }}</div></div></el-scrollbar><template #footer><el-button @click="aiVisible=false">取消</el-button><el-button v-if="!preview.length" type="primary" :loading="aiLoading" @click="previewAi">生成预览</el-button><el-button v-else type="primary" :loading="aiLoading" @click="confirmAi">确认入库</el-button></template></el-dialog>
|
|
|
|
|
|
</main>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
|
import { computed, onMounted, reactive, ref } from "vue";
|
|
|
|
|
|
import { ElMessage, ElMessageBox } from "element-plus";
|
|
|
|
|
|
import { ArrowDown, Download, Plus, Search, Upload } from "@element-plus/icons-vue";
|
|
|
|
|
|
import { saveAs } from "file-saver";
|
|
|
|
|
|
import * as api from "@/api/exam";
|
|
|
|
|
|
|
|
|
|
|
|
const types = [{ label: "单选题", value: "SINGLE" }, { label: "多选题", value: "MULTIPLE" }, { label: "判断题", value: "TRUE_FALSE" }, { label: "简答题", value: "SHORT_ANSWER" }];
|
|
|
|
|
|
const typeName = Object.fromEntries(types.map((item) => [item.value, item.label]));
|
|
|
|
|
|
const loading = ref(false); const saving = ref(false); const uploading = ref(false); const aiLoading = ref(false); const questions = ref([]); const projects = ref([]); const editorVisible = ref(false); const aiVisible = ref(false); const preview = ref([]); const fileInput = ref();
|
|
|
|
|
|
const query = reactive({ type: "", taskKey: "", keyword: "" }); const form = reactive(emptyQuestion()); const aiForm = reactive({ taskKey: "", type: "SINGLE", count: 5, requirement: "" });
|
|
|
|
|
|
const isChoice = computed(() => ["SINGLE", "MULTIPLE"].includes(form.type)); const answers = computed({ get: () => Array.isArray(form.answer) ? form.answer : [], set: (value) => { form.answer = value; } }); const singleAnswer = computed({ get: () => Array.isArray(form.answer) ? form.answer[0] || "" : "", set: (value) => { form.answer = value ? [value] : []; } });
|
|
|
|
|
|
function emptyQuestion() { return { id: null, taskKey: "", type: "SINGLE", stem: "<p></p>", options: ["A", "B", "C", "D"].map((label) => ({ label, content: "<p></p>" })), answer: [], analysis: "<p></p>", attachmentName: "", attachmentUrl: "" }; }
|
|
|
|
|
|
function projectLabel(item) { return `${item.projectName} / ${item.taskName}`; } function plainHtml(value) { return String(value || "").replace(/<[^>]+>/g, "").replace(/ /g, " "); }
|
|
|
|
|
|
async function load() { loading.value = true; try { questions.value = (await api.getPlatformQuestions(query)).data || []; } finally { loading.value = false; } } async function init() { projects.value = (await api.getPlatformQuestionProjects()).data || []; await load(); } onMounted(init);
|
|
|
|
|
|
function openEditor(row) { Object.assign(form, row ? JSON.parse(JSON.stringify(row)) : emptyQuestion()); if (!Array.isArray(form.answer) && isChoice.value) form.answer = []; editorVisible.value = true; } function openAi() { aiForm.taskKey = query.taskKey || aiForm.taskKey || projects.value[0]?.taskKey || ""; preview.value = []; aiVisible.value = true; }
|
|
|
|
|
|
function resetForType() { form.answer = form.type === "TRUE_FALSE" ? true : form.type === "SHORT_ANSWER" ? "<p></p>" : []; if (form.type !== "SHORT_ANSWER") { form.attachmentName = ""; form.attachmentUrl = ""; } }
|
|
|
|
|
|
async function save() { if (!form.taskKey || !plainHtml(form.stem).trim()) return ElMessage.warning("请填写归属项目和题干"); if (isChoice.value && (!form.answer.length || form.options.some((item) => !plainHtml(item.content).trim()))) return ElMessage.warning("请补全选项并设置正确答案"); if (form.type === "SHORT_ANSWER" && !plainHtml(form.answer).trim()) return ElMessage.warning("请填写参考答案"); saving.value = true; try { await (form.id ? api.updatePlatformQuestion(form.id, form) : api.createPlatformQuestion(form)); ElMessage.success("题目已保存"); editorVisible.value = false; load(); } finally { saving.value = false; } }
|
|
|
|
|
|
async function remove(row) { await ElMessageBox.confirm("删除后无法恢复，确认删除？", "删除题目", { type: "warning" }); await api.deletePlatformQuestion(row.id); ElMessage.success("已删除"); load(); } function pickImport() { if (!query.taskKey) return ElMessage.warning("请先选择归属项目，再导入题目"); fileInput.value.value = ""; fileInput.value.click(); }
|
|
|
|
|
|
async function importFile(event) { const file = event.target.files[0]; if (!file) return; if (!query.taskKey) return ElMessage.warning("请先选择归属项目"); const data = new FormData(); data.append("file", file); await api.importPlatformQuestions(data, query.taskKey); ElMessage.success("导入成功"); event.target.value = ""; load(); }
|
|
|
|
|
|
async function downloadTemplate(format) { const extension = format === "excel" ? "xlsx" : "docx"; const blob = await api.downloadPlatformQuestionTemplate(format); saveAs(blob, `考试题库${format === "excel" ? "Excel" : "Word"}导入模板.${extension}`); }
|
|
|
|
|
|
async function uploadMaterial({ file }) { uploading.value = true; try { const data = new FormData(); data.append("file", file); const result = await api.uploadPlatformQuestionAttachment(data); form.attachmentName = result.data.name; form.attachmentUrl = result.data.url; ElMessage.success("资料已上传"); } finally { uploading.value = false; } }
|
|
|
|
|
|
async function previewAi() { if (!aiForm.taskKey) return ElMessage.warning("请选择归属项目"); aiLoading.value = true; try { preview.value = (await api.previewPlatformAiQuestions(aiForm)).data.questions || []; } finally { aiLoading.value = false; } } async function confirmAi() { aiLoading.value = true; try { await api.confirmPlatformAiQuestions({ questions: preview.value }); ElMessage.success("题目已入库"); preview.value = []; aiVisible.value = false; load(); } finally { aiLoading.value = false; } }
|
|
|
|
|
|
function displayAnswer(value) { return Array.isArray(value) ? value.join("、") : value === true ? "正确" : value === false ? "错误" : value || "-"; }
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
|
.question-bank { min-height: 100%; color: #eaf8ff; background: linear-gradient(145deg, #061b2b, #07111c); }
|
|
|
|
|
|
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
|
|
|
|
|
|
.page-head h1 { margin: 0; font-size: 26px; }.page-head p { margin: 7px 0 0; color: #9fc2d8; }.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
|
|
|
|
|
|
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px; margin-bottom: 16px; border: 1px solid rgba(69, 185, 236, .3); border-radius: 10px; background: rgba(2, 18, 31, .6); }.toolbar .el-select { width: 210px; }.toolbar .el-input { width: min(300px, 30vw); }
|
|
|
|
|
|
.data-table { background: rgba(2, 18, 31, .72); }.prototype-note { margin: 14px auto 0; max-width: 1180px; color: #ff5e67; font-size: 15px; line-height: 1.8; text-align: center; }
|
|
|
|
|
|
.editor-shell { padding: 4px 8px 12px; color: #243746; }.editor-project { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }.editor-project > span { width: 62px; color: #526979; }.editor-project .el-select { width: 420px; }.type-switch { display: flex; align-items: center; gap: 10px; margin: 4px 0 22px; font-size: 16px; }.rich-row, .option-block { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; margin-bottom: 22px; }.rich-row > label, .option-block > label, .tf-block > label { padding-top: 10px; color: #526979; font-size: 15px; text-align: right; }.option-list { display: grid; gap: 12px; }.option-row { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: start; gap: 8px; }.answer-control { padding-top: 12px; }.tf-block { display: flex; align-items: center; gap: 24px; margin: 18px 0 30px; }.tf-block .el-radio-group { display: flex; gap: 28px; }.material-row { display: flex; align-items: center; gap: 14px; margin: 6px 0 22px 102px; }.material-name { color: #5c7585; }.preview-alert { margin-bottom: 12px; }.preview-item { padding: 10px 4px; border-bottom: 1px solid #24465a; line-height: 1.7; }.editor-shell :deep(.ql-container) { min-height: 88px; font-size: 15px; }.editor-shell :deep(.ql-editor) { min-height: 74px; }.editor-shell :deep(.ql-toolbar) { background: #fff; }.editor-shell :deep(.ql-editor.ql-blank::before) { color: #a6b0b8; font-style: normal; }
|
|
|
|
|
|
</style>
|
