基於vue與element實現建立試卷相關功能(例項程式碼)
阿新 • • 發佈：2020-12-09
由於最近在一個專案中需要實現建立試卷與預覽試卷的功能，所以就自己動手寫了一個，效果還不錯，目前專案已經交付使用，今天就先和大家分享一下建立試卷。
建立試卷
先放一下效果圖
首先是試卷的相關設定
考試物件是通過介面返回的資料
<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 ?
question.quesTypeId === 1 ?
'單選題' : '多選題'
: question.quesTypeId < 5 ?
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 ? 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" 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: '',// 考試物件
deadline: '',// 截止時間
questions: []
},questionType: [],rules: {
roleList: [{
required: true,message: '請選擇考試物件',trigger: 'blur'
}],deadline: [{
required: true,message: '請選擇截止時間',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,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,.05);
border-color: rgba(0,.05);
}
</style>
到此這篇關於基於vue與element實現建立試卷相關功能的文章就介紹到這了,更多相關vue與element建立試卷功能內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！