首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript Vue.js

基于vue与element实现创建试卷相关功能(实例代码)

Posted in Vue.js onDecember 07, 2020

由于最近在一个项目中需要实现创建试卷与预览试卷的功能，所以就自己动手写了一个，效果还不错，目前项目已经交付使用，今天就先和大家分享一下创建试卷。

创建试卷

先放一下效果图

基于vue与element实现创建试卷相关功能(实例代码)

首先是试卷的相关设置

考试对象是通过接口返回的数据

基于vue与element实现创建试卷相关功能(实例代码)

<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时间日期选择器

基于vue与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>

 

然后是添加试题
试题类型的相关数据也是通过接口返回的

基于vue与element实现创建试卷相关功能(实例代码)
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: '',
    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与element实现创建试卷相关功能的文章就介绍到这了,更多相关vue与element创建试卷功能内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

基于vue与element实现创建试卷相关功能(实例代码)

- Author -

??铭 (り

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Vue.js 相关文章推荐
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
Vue2.0搭建脚手架
Mar 13 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
vue里使用create, mounted调用方法
Apr 26 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 #Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 #Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 #Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 #Vue.js
详解Vue中的自定义指令
Dec 07 #Vue.js
vue-router定义元信息meta操作
Dec 07 #Vue.js
Vue如何实现验证码输入交互
Dec 07 #Vue.js
丹麦购物网站(22) 肯尼亚购物网站(2) 澳大利亚购物网站(309) 阿根廷购物网站(9) 意大利购物网站(128) 台湾购物网站(77) 比利时购物网站(33) 瑞典购物网站(55) 挪威购物网站(7) 芬兰购物网站(10)
You might like
一些花式咖啡的配方
2021/03/03 冲泡冲煮
php截取中文字符串函数实例
2015/02/23 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
SWFObject Flash js调用类
2008/07/08 Javascript
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
Angular的$http的ajax的请求操作（推荐）
2017/01/10 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
jQuery实现分页功能（含ajax请求、后台数据、附完整demo）
2017/04/03 jQuery
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦：OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
Python正则捕获操作示例
2017/08/19 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
利用python生成照片墙的示例代码
2020/04/09 Python
基于python实现删除指定文件类型
2020/07/21 Python
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
北大研究生linux应用求职信
2013/10/29 职场文书
毕业自荐书
2013/12/09 职场文书
青年教师培训方案
2014/02/06 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
单位介绍信格式范文
2015/05/04 职场文书
单身证明范本
2015/06/15 职场文书
k8s部署redis cluster集群的实现
2021/06/24 Redis
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server