基于vue与element实现创建试卷相关功能(实例代码)
(编辑：jimmy 日期: 2024/11/25 浏览：3 次 )
由于最近在一个项目中需要实现创建试卷与预览试卷的功能，所以就自己动手写了一个，效果还不错，目前项目已经交付使用，今天就先和大家分享一下创建试卷。
创建试卷
先放一下效果图
首先是试卷的相关设置
考试对象是通过接口返回的数据
<span class="content-label">选择考试对象</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 class="content-label">截止时间</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 class="question-type">
<el-button
v-for="item in questionType"
:key="item.typeId"
style="border-color: #2A82E4; color: #2A82E4"
@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 class="box-card">
<div slot="header" class="clearfix" style="margin-bottom: -10px">
<span
class="type-name"
v-text="question.quesTypeId < 3 "
>卡片名称</span>
<el-input v-model="question.score" style="width: 55px" />
<span>分</span>
<el-button style="float: right; border: none; font-size: 20px" 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" style="margin-bottom: 0px">
<el-checkbox-group
v-model="question.answer"
:min="0"
:max="question.quesTypeId === 1 "
>
<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" style="margin-bottom: 0px">
<el-input
v-model="question.answer[0]"
type="textarea"
placeholder="请输入参考答案"
/>
</el-form-item>
<!--判断-->
<el-form-item v-if="question.quesTypeId === 5" style="margin-bottom: 0px">
<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" class="question-content" @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)
}
}
},
最后提交方法中进行数据验证
这个在之前一篇博客中简单介绍过，感兴趣的朋友可以自行前去了解
Vue关于Element对表单的校验
最最后把create.vue的源码分享给大家方便大家进行参考，如有更好的建议也请大家不吝赐教
<template>
<div class="app-container">
<div>
<el-form
ref="form"
:model="form"
:rules="rules"
class="form"
>
<h4 class="card-label">设置任务</h4>
<div class="card-panel">
<div class="settings-wrap" style="width: 18%">
<span class="content-label">选择考试对象</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>
</div>
<div class="settings-wrap" style="width: 18%">
<span class="content-label">截止时间</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>
</div>
</div>
<h4 class="card-label">试卷标题</h4>
<div class="card-panel">
<div class="settings-wrap" style="width: 40%">
<el-form-item prop="title">
<el-input
v-model="form.title"
type="text"
placeholder="请输入试卷标题（1-20个字）"
maxlength="20"
show-word-limit
/>
</el-form-item>
</div>
</div>
<question
v-for="item in form.questions"
:key="item.id"
:question="item"
class="question-content"
@removeQuestion="removeQuestion"
/>
<div class="question-type">
<el-button
v-for="item in questionType"
:key="item.typeId"
style="border-color: #2A82E4; color: #2A82E4"
@click="addQuestion(item.typeId)"
>
<svg-icon :icon-class="item.icon" />
{{ item.typeName }}
</el-button>
</div>
<el-button
type="primary"
class="submit"
:loading="loading"
style="margin-top: 20px"
@click="submit"
>
提交试卷
</el-button>
</el-form>
</div>
</div>
</template>
<script>
import crudRoles from '@/api/system/role'
import crudExam from '@/api/exam/exam'
import question from '@/views/exam/module/question'
import crudList from '@/api/exam/list'
export default {
name: 'Create',
components: {
question
},
data() {
return {
roles: [],
dialogVisible: false,
loading: false,
questionId: 0,
form: {
title: '',
roleList: [], // 考试对象
deadline: '', // 截止时间
questions: []
},
questionType: [],
rules: {
roleList: [{
required: true,
message: '请选择考试对象',
trigger: 'blur'
}],
deadline: [{
required: true,
message: '请选择截止时间',
trigger: 'blur'
}],
title: [{
required: true,
message: '请输入试卷标题（1-20个字）',
trigger: 'blur'
}]
}
}
},
created() {
this.getRoles()
this.getQuestionType()
},
methods: {
getRoles() {
crudRoles.getAll().then(res => {
res.map((obj) => {
const role = {
value: obj.id,
label: obj.name
}
this.roles.push(role)
})
})
},
getQuestionType() {
crudExam.getQuestionType().then(res => {
this.questionType = res
})
},
addQuestion(typeId) {
const question = {
id: this.questionId,
quesTypeId: typeId,
title: '',
score: 0,
answer: [],
content: []
}
this.form.questions.push(question)
this.questionId++
},
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)
}
}
},
submit() {
if (this.form.questions.length === 0) {
this.$notify({
title: '警告',
message: '请添加试题',
type: 'warning'
})
return
}
const form = JSON.parse(JSON.stringify(this.form))
let isSubmit = true
let message = ''
this.loading = true
this.$refs['form'].validate(res => {
if (!res) {
this.loading = false
return
}
for (let i = 0; i < form.questions.length; i++) {
const question = form.questions[i]
if (question.title === '') {
isSubmit = false
message = '请设置题目题干'
break
}
if ((question.quesTypeId === 1 || question.quesTypeId === 2) && question.content.length === 0) {
isSubmit = false
message = '请设置选择题题答案'
break
}
if ((question.quesTypeId === 1 || question.quesTypeId === 2 || question.quesTypeId === 5) && question.answer.length === 0) {
isSubmit = false
message = '请设置客观题选项'
break
}
}
if (!isSubmit) {
this.$notify({
title: '警告',
message: message,
type: 'warning'
})
this.loading = false
return
}
form.questions.forEach(function(question) {
question.answer = JSON.stringify(question.answer)
question.content = JSON.stringify(question.content)
})
crudExam.add(form).then((res) => {
this.loading = false
const params = {
type: 2,
typeId: res,
url: this.$frontUrl + '/answerOnline'
}
crudList.remind(params).then(() => {
this.$message.success('提醒成功~')
})
this.$router.push('/exam/index')
}).catch(() => {
this.loading = false
})
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.card-label {
margin: 30px 0 15px;
}
.card-panel {
display: flex;
flex-direction: row;
padding: 17px 15px 0;
color: #666;
box-shadow: 0 0 3px 1px #e7e7e7;
border-color: #e7e7e7;
.settings-wrap {
margin-right: 4%;
}
}
.content-label {
display: block;
padding-bottom: 5px;
}
.question-type {
margin-top: 20px;
}
.question-content {
margin-top: 20px;
color: #666;
box-shadow: 0 0 4px 2px rgba(0, 0, 0, .05);
border-color: rgba(0, 0, 0, .05);
}
</style>
下一篇：vue祖孙组件之间的数据传递案例