由于最近在一个项目中需要实现创建试卷与预览试卷的功能，所以就自己动手写了一个，效果还不错，目前项目已经交付使用，今天就先和大家分享一下创建试卷。
创建试卷
先放一下效果图
首先是试卷的相关设置
考试对象是通过接口返回的数据
<span>选择考试对象</span> <el-form-item prop="roleList"> <el-select v-model="form.roleList" multiple filterable allow-create default-first-option placeholder="请选择考试对象" > <el-option v-for="item in roles" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </el-form-item>
需要定义的data数据
roles: [], //考试对象选择列表（接口返回） form: { title: '', roleList: [], // 考试对象 deadline: '', // 截止时间 questions: [] },
获取考试对象列表
getRoles() { crudRoles.getAll().then(res => { res.map((obj) => { const role = { value: obj.id, label: obj.name } this.roles.push(role) }) }) },
截至时间使用的是element时间日期选择器
<span>截止时间</span> <el-form-item prop="deadline"> <el-date-picker v-model="form.deadline" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" /> </el-form-item>
然后是添加试题
试题类型的相关数据也是通过接口返回的
data数据
questionType: [],
获取试题类型
getQuestionType() { crudExam.getQuestionType().then(res => { this.questionType = res }) },
<div> <el-button v-for="item in questionType" :key="item.typeId" @click="addQuestion(item.typeId)" > <svg-icon :icon-class="item.icon" /> {{ item.typeName }} </el-button> </div>
addQuestion(typeId) { const question = { id: this.questionId, quesTypeId: typeId, title: '', score: 0, answer: [], content: [] } this.form.questions.push(question) this.questionId++ },
对于添加的试题模板则是单独创建了一个question.vue
这里由于其他布局方法一直不太理想，所以采用了栅格布局，效果还算可以
<template> <el-card> <div slot="header"> <span v-text="question.quesTypeId < 3 ? question.quesTypeId === 1 ? '单选题' : '多选题' : question.quesTypeId < 5 ? question.quesTypeId === 3 ? '填空题' : '简答题' : '判断题'" >卡片名称</span> <el-input v-model="question.score" /> <span>分</span> <el-button icon="el-icon-close" @click="removeQuestion" /> </div> <el-form-item> <el-input v-model="question.title" type="textarea" placeholder="请输入题干内容..." /> </el-form-item> <!--单选、多选--> <el-form-item v-if="question.quesTypeId === 1 || question.quesTypeId === 2"> <el-checkbox-group v-model="question.answer" :min="0" :max="question.quesTypeId === 1 ? 1 : 4" > <el-row v-for="(item, index) in ['A', 'B', 'C', 'D']" :key="item" > <el-col :span="1"> <el-checkbox-button v-model="question.answer" :label="question.content[index]" border > {{ item }} </el-checkbox-button> </el-col> <el-col :span="23"> <el-input v-model="question.content[index]" placeholder="请输入选项..." @input="contentChange(question)" /> </el-col> </el-row> </el-checkbox-group> </el-form-item> <!--简答、填空--> <el-form-item v-if="question.quesTypeId === 3 || question.quesTypeId === 4"> <el-input v-model="question.answer[0]" type="textarea" placeholder="请输入参考答案" /> </el-form-item> <!--判断--> <el-form-item v-if="question.quesTypeId === 5"> <el-checkbox-group v-model="question.answer" :min="0" :max="1" > <el-checkbox v-model="question.answer" label="对" border /> <el-checkbox v-model="question.answer" label="错" border /> </el-checkbox-group> </el-form-item> </el-card> </template> <script> export default { props: { question: { type: Object, required: true } }, methods: { removeQuestion() { this.$emit('removeQuestion', this.question.id) }, contentChange(question) { question.answer.splice(0) } } } </script> <style scoped> .type-name { color: #505050; margin-right: 20px; } </style>
然后是删除试题
<question v-for="item in form.questions" :key="item.id" :question="item" @removeQuestion="removeQuestion" />
removeQuestion(id) { for (let i = 0; i < this.form.questions.length; i++) { if (this.form.questions[i].id === id) { this.form.questions.splice(i, 1) } } },