基于vue與element實(shí)現(xiàn)創(chuàng)建試卷相關(guān)功能(實(shí)例代碼)

更新時(shí)間：2020年12月07日 14:46:06 作者：ゞ﹏銘 (り

這篇文章主要介紹了基于vue與element實(shí)現(xiàn)創(chuàng)建試卷相關(guān)功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

由于最近在一個(gè)項(xiàng)目中需要實(shí)現(xiàn)創(chuàng)建試卷與預(yù)覽試卷的功能，所以就自己動(dòng)手寫了一個(gè)，效果還不錯(cuò)，目前項(xiàng)目已經(jīng)交付使用，今天就先和大家分享一下創(chuàng)建試卷。

創(chuàng)建試卷

先放一下效果圖

創(chuàng)建試卷

首先是試卷的相關(guān)設(shè)置

考試對象是通過接口返回的數(shù)據(jù)

考試對象

<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數(shù)據(jù)

roles: [], //考試對象選擇列表（接口返回）
form: {
	title: '',
	roleList: [], // 考試對象
	deadline: '', // 截止時(shí)間
	questions: []
},

獲取考試對象列表

getRoles() {
	crudRoles.getAll().then(res => {
		res.map((obj) => {
			const role = {
				value: obj.id,
				label: obj.name
			}
			this.roles.push(role)
		})
	})
},

截至?xí)r間使用的是element時(shí)間日期選擇器

日期時(shí)間選擇器

<span class="content-label">截止時(shí)間</span>
<el-form-item prop="deadline">
	<el-date-picker
	v-model="form.deadline"
	type="datetime"
	placeholder="選擇日期時(shí)間"
	value-format="yyyy-MM-dd HH:mm:ss"
	/>
</el-form-item>

然后是添加試題
試題類型的相關(guān)數(shù)據(jù)也是通過接口返回的

添加試題
data數(shù)據(jù)

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++
},

對于添加的試題模板則是單獨(dú)創(chuàng)建了一個(gè)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="請輸入題干內(nèi)容..."
   />
  </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="請輸入選項(xiàng)..."
       @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="請輸入?yún)⒖即鸢?
   />
  </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="錯(cuò)" 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)
		}
	}
},

最后提交方法中進(jìn)行數(shù)據(jù)驗(yàn)證
這個(gè)在之前一篇博客中簡單介紹過，感興趣的朋友可以自行前去了解
Vue關(guān)于Element對表單的校驗(yàn)

最最后把create.vue的源碼分享給大家方便大家進(jìn)行參考，如有更好的建議也請大家不吝賜教

<template>
 <div class="app-container">
  <div>
   <el-form
    ref="form"
    :model="form"
    :rules="rules"
    class="form"
   >
    <h4 class="card-label">設(shè)置任務(wù)</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">截止時(shí)間</span>
      <el-form-item prop="deadline">
       <el-date-picker
        v-model="form.deadline"
        type="datetime"
        placeholder="選擇日期時(shí)間"
        value-format="yyyy-MM-dd HH:mm:ss"
       />
      </el-form-item>
     </div>
    </div>
    <h4 class="card-label">試卷標(biāo)題</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="請輸入試卷標(biāo)題（1-20個(gè)字）"
        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: '', // 截止時(shí)間
    questions: []
   },
   questionType: [],
   rules: {
    roleList: [{
     required: true,
     message: '請選擇考試對象',
     trigger: 'blur'
    }],
    deadline: [{
     required: true,
     message: '請選擇截止時(shí)間',
     trigger: 'blur'
    }],
    title: [{
     required: true,
     message: '請輸入試卷標(biāo)題（1-20個(gè)字）',
     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: '請?zhí)砑釉囶}',
     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 = '請?jiān)O(shè)置題目題干'
      break
     }
     if ((question.quesTypeId === 1 || question.quesTypeId === 2) && question.content.length === 0) {
      isSubmit = false
      message = '請?jiān)O(shè)置選擇題題答案'
      break
     }
     if ((question.quesTypeId === 1 || question.quesTypeId === 2 || question.quesTypeId === 5) && question.answer.length === 0) {
      isSubmit = false
      message = '請?jiān)O(shè)置客觀題選項(xiàng)'
      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>

到此這篇關(guān)于基于vue與element實(shí)現(xiàn)創(chuàng)建試卷相關(guān)功能的文章就介紹到這了,更多相關(guān)vue與element創(chuàng)建試卷功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: