vue 试卷控件界面模式

考试界面

阅卷界面

重要说明

list格式 必须是 以下格式:list:[{// 题目类型 1.单选题 2.多选题 3.判断题 4.填空题 5.简答题type: null,// 题目IDid: null,// 题号no: null,// 题目subject: "",// 题目总分totalScore: null,// 答案集合answers: [{// 答案idid: "",// 答案序号no: "",// 答案answer: ""}],// 考生答案examineAnswer: null, // 1.单选题 '' 2.多选题 ['1','2'] 3.判断题 '' 4.填空题  ['1','2'] 5.简答题 ''// 正确答案correctAnswer: null, // 1.单选题 '' 2.多选题 ['1','2'] 3.判断题 '' 4.填空题  ['1','2'] 5.简答题 ''// 答案解析answerAnalysis: "",// 是否对错  1.对 0.错isHook: null,// 得分score: null}]

初始化

<examination-paper :data-source="paperData"></examination-paper >
paperData:{//试卷IDpaperId:'1',//试卷名称paperName: '测试试卷',//考生IDexamineId:'1000',//考生名称examineName: '张三',//分数score: 80,//考试时长examDuration: 90,//交卷时间submissionTime: '2019-11-25 16:30:26',//题目集合list:[{//题目类型 1.单选题 2.多选题 3.判断题 4.填空题 5.简答题type:2, no:1, subject:'以下属于南方电网员工职业操守中明文规定的有()',totalScore:6,answers:[{no:'A',answer:'热爱祖国、热爱南网、热爱岗位'},{no:'B',answer:'遵纪守法、忠于职守、令行禁止'},{no:'C',answer:'客户至上、诚实守信、优质服务'}],examineAnswer:['A','B'],correctAnswer:['A','B','C'],answerAnalysis:'答案解析.......',isHook:2,score:0,},{//题目类型 1.单选题 2.多选题 3.判断题 4.填空题 5.简答题type:1, no:1, subject:'在生产管理信息系统中，下列操作步骤能正确将工单推进流程的是（ ）',totalScore:1,answers:[{no:'A',answer:'在工具栏中点击“workflow”标签'},{no:'B',answer:'在缺陷单界面中点击“推进流程”按钮'},{no:'C',answer:'在缺陷单界面中点击“提交”按钮'}],examineAnswer:'A',correctAnswer:'B',answerAnalysis:'答案解析.......',isHook:2,score:0,},{//题目类型 1.单选题 2.多选题 3.判断题 4.填空题 5.简答题type:1, no:2, subject:'在营销系统中查询客户有无欠费、余额及抄表数据接待客户时应做到哪些最基本的礼仪？',totalScore:5,answers:[{no:'A',answer:'起身、微笑、示坐、问候客户'},{no:'B',answer:'坐着，问候客户'},{no:'C',answer:'请问需要办理什么业务'}],examineAnswer:'A',correctAnswer:'A',answerAnalysis:'答案解析.......',isHook:1,score:5,},{//题目类型 1.单选题 2.多选题 3.判断题 4.填空题 5.简答题type:3, no:1, subject:'记录一次与人有效沟通的案例',totalScore:10,answers:[],examineAnswer:'对',correctAnswer:'对',answerAnalysis:'答案解析.......',isHook:1,score:10,},{//题目类型 1.单选题 2.多选题 3.判断题 4.填空题 5.简答题type:4, no:1, subject:'打招呼的方式一般有（）（）（）（）',totalScore:10,answers:[],examineAnswer:'寒暄式',correctAnswer:['寒暄式','问候式','致意式','致礼式'],answerAnalysis:'答案解析.......',isHook:1,score:10,},{//题目类型 1.单选题 2.多选题 3.判断题 4.填空题 5.简答题type:5, no:1, subject:'请简单说一下你对礼仪的认识与理解',totalScore:10,answers:[],examineAnswer:'寒暄式',correctAnswer:'',answerAnalysis:'答案解析.......',isHook:1,score:10,}]}

控件

<template><div class="paper-main"><div class="paper-header"><el-form label-position="top" label-width="100px" :model="tempDataSource" style="padding-top:0px; "><el-row><el-col :span="4" :offset="1"><el-form-item label="试卷">{{dataSource.paperName}}</el-form-item></el-col><el-col :span="4"><el-form-item label="考生">{{dataSource.examineName}}</el-form-item></el-col><el-col :span="4"><el-form-item label="分数" v-if="this.type===2 || this.type===3">{{dataSource.score}}</el-form-item></el-col><el-col :span="4"><el-form-item label="考试时长">{{dataSource.examDuration}}分</el-form-item></el-col><el-col :span="4" v-if="this.type===1"><el-form-item label="倒计时间"><span class="downTime">{{hour? hourString+':'+minuteString+':'+secondString : minuteString+':'+secondString}}</span></el-form-item></el-col><el-col :span="4"><el-form-item label="交卷时间" v-if="this.type===2 || this.type===3">{{dataSource.submissionTime}}</el-form-item></el-col></el-row></el-form></div><div ref="paperLeft" class="paper-left"><div class="paper-title"><h1><i class="el-icon-s-grid"></i>答题卡</h1></div><el-collapse v-model="answerCardActiveName"><el-collapse-item v-for="item in convertDatas"   :name="item.code" ><template slot="title"><h2>{{item.name}}</h2><spn>共{{item.count}}题</spn></template><el-button  class="answer-button" circle size="small" v-for="index of item.count" :id="'answer'+item.code+index"  @click.native="jump(item.code+index)">{{index}}</el-button></el-collapse-item></el-collapse></div><div ref="paperContent" class="paper-content"><div class="subject" v-for="item in convertDatas"><div class="subject-title" ><h2>{{item.name}}</h2><spn>（共 {{item.count}} 题，合计 {{item.totalScore}} 分）</spn></div><el-card class="box-card" v-for="(sub,index) in item.childs" :id="item.code+(index+1)"><div slot="header" class="clearfix"><el-tag effect="dark"> {{sub.no}} </el-tag><span>{{sub.subject}}</span><span>({{sub.totalScore}}分)</span><div v-if="type===2 || type===3" style="float: right; padding: 3px 0"><el-radio-group v-model="sub.isHook"><el-radio-button :disabled="disabledRead" :label="1"  @change.native="isHookButtionCheck(sub)"><i class="el-icon-check"/></el-radio-button><el-radio-button :disabled="disabledRead" :label="2"  @change.native="isHookButtionCheck(sub)"><i class="el-icon-close"/></el-radio-button></el-radio-group><div v-if="sub.type===1 ||sub.type===2||sub.type===3" style="display: inline;"><el-input :disabled="true" v-model="sub.score" style="width:50px" ></el-input><span>分</span></div><div v-else style="display: inline;"><el-input :disabled="disabledRead" v-model="sub.score" style="width:50px" ></el-input><span>分</span></div></div></div><el-radio-group v-if="sub.type===1" v-model="sub.examineAnswer"><el-radio :disabled="disabledAnswer" v-for="o in sub.answers"  :label="o.no" class="answer-radio" @change="answerButtionCheck($event,item,sub)">{{o.no}}.{{o.answer}}</el-radio></el-radio-group><el-checkbox-group v-if="sub.type===2" v-model="sub.examineAnswer"><el-checkbox :disabled="disabledAnswer" v-for="o in sub.answers" :label="o.no" class="answer-checkbox" @change="answerButtionCheck($event,item,sub)">{{o.no}}.{{o.answer}}</el-checkbox></el-checkbox-group><el-radio-group v-if="sub.type===3" v-model="sub.examineAnswer"><el-radio :disabled="disabledAnswer" label="对" class="answer-radio" @change="answerButtionCheck($event,item,sub)">对</el-radio><el-radio :disabled="disabledAnswer" label="错" class="answer-radio" @change="answerButtionCheck($event,item,sub)">错</el-radio></el-radio-group><el-input :disabled="disabledAnswer"  v-if="sub.type===4" type="textarea" :rows="2"  v-model="sub.examineAnswer" resize="none" maxlength="150" @blur="answerButtionCheck($event,item,sub)"> </el-input><el-input :disabled="disabledAnswer"  v-if="sub.type===5" type="textarea" :rows="10"  v-model="sub.examineAnswer" resize="none" maxlength="2000" @blur="answerButtionCheck($event,item,sub)"> </el-input><div v-if="type!==1" class="subject-remark"><div class="item"><span class="title">考生答案：</span><span>{{converAnswerStr(sub.examineAnswer)}}</span></div><div class="item"><span class="title">正确答案：</span><span>{{converAnswerStr(sub.correctAnswer)}}</span></div><div class="item"><span class="title">考生答案：</span><span>{{sub.answerAnalysis}}</span></div></div></el-card></div></div><div class="paper-footer"><el-button v-if="type===1" type="success" @click.native="btnClick('handPaper')">交卷</el-button><el-button v-if="type===2" type="success" @click.native="btnClick('readPaper')">阅卷</el-button><el-button v-if="type===2" type="success" @click.native="btnClick('readPaperUpper')">上一个</el-button><el-button v-if="type===2" type="success" @click.native="btnClick('readPaperNext')">下一个</el-button></div></div>
</template><script>export default {name: 'examinationPaper',props: {//试卷类型 1 考试 2 阅卷 3 查看type: {type: Number,default: 1},//数据源dataSource: {type: Object,default: () => {return {//试卷IDpaperId: '',//试卷名称paperName: '',//考生IDexamineId: '',//考生名称examineName: '',//分数score: null,//考试时长(分钟)examDuration: null,//交卷时间submissionTime: '',//题目集合list: [{//题目类型 1.单选题 2.多选题 3.判断题 4.填空题 5.简答题type: null,//题号no: null,//题目subject: '',//题目总分totalScore: null,//答案集合answers: [{//答案序号no: '',//答案answer: ''}],//考生答案examineAnswer: null,//正确答案correctAnswer: null,//答案解析answerAnalysis: '',//是否对错  1.对 2.错isHook: null,//得分score: null}]}}}},data() {return {//倒计小时hour: '',//倒计分钟minute: '',//倒计秒second: '',//计时器promiseTimer: '',//数据源tempDataSource: {},//答题卡激活项answerCardActiveName: [],//组装后数据集convertDatas: [],//禁止答题disabledAnswer:false,//禁止阅卷disabledRead:false,}},watch: {dataSource(newValue, oldValue) {Object.assign(this.tempDataSource, newValue)this.convertData()}},created() {Object.assign(this.tempDataSource, this.dataSource)this.convertData()if(this.type===2){this.disabledAnswer=true}if(this.type===3){this.disabledAnswer=truethis.disabledRead=true}},computed: {hourString () {return this.hour < 10 ? '0' + this.hour : '' + this.hour},minuteString () {return this.minute < 10 ? '0' + this.minute : '' + this.minute},secondString () {return this.second < 10 ? '0' + this.second : '' + this.second}},mounted () {if(this.type===1){let remainTime=this.dataSource.examDuration*60;if (remainTime> 0) {this.hour = Math.floor((remainTime / 3600) % 24)this.minute = Math.floor((remainTime / 60) % 60)this.second = Math.floor(remainTime % 60)this.countDowm()}}if(this.type===2 || this.type===3){this.convertDatas.forEach(t=>{t.childs.forEach(c=>{this.answerButtionCheck(c.examineAnswer,t,c);});});}},methods: {/*** 按钮点击事件*/btnClick(type){console.log(this.tempDataSource);switch (type) {//交卷case 'handPaper':this.$emit('PaperHand',this.tempDataSource)break//阅卷case 'readPaper':this.$emit('paperRead',this.tempDataSource)break//阅卷 上一个case 'readPaperUpper':this.$emit('paperReadUpper')break//阅卷 下一个case 'readPaperNext':this.$emit('paperReadNext')break}},/*** 锚点定位*/jump(postion) {let jump = this.$refs.paperContent.querySelectorAll("#"+postion);// 获取需要滚动的距离let total = jump[0].offsetTop;//实现form锚点定位this.$refs.paperContent.scrollTop = jump[0].offsetTop;},/***对错选择*/isHookButtionCheck(val) {if(val.type===1 || val.type===2 || val.type===3){if(val.isHook===1){val.score=val.totalScore;}if(val.isHook===2){val.score=0;}}},/***答题卡选中*/answerButtionCheck(value,parent,child){console.log(value,parent,child)let answerId='answer'+parent.code+child.nolet but = this.$refs.paperLeft.querySelectorAll("#"+answerId);if(but.length>0){if(but[0].className.indexOf('answer-button-check')>-1){if(child.examineAnswer && child.examineAnswer.length==0){but[0].classList.remove("answer-button-check");}}else{if (child.examineAnswer && child.examineAnswer.length > 0) {but[0].classList.add("answer-button-check");}}}},/*** 转换答案*/converAnswerStr(answer){if(answer instanceof Array){return answer.join('  ')}return  answer},/*** 转换数据*/convertData() {let sorted = this.groupBy(this.tempDataSource.list, function(item) {return [item.type]})this.convertDatas = []this.answerCardActiveName=[]this.orderBy(sorted, 'key', 'asc')sorted.forEach(item => {let totalScore = 0item.value.forEach(t => {totalScore += t.totalScore})switch (item.key) {case "[1]":this.convertDatas.push({name: '单选题',code: 'Single',count: item.value.length,totalScore: totalScore,childs:item.value})this.answerCardActiveName.push('Single')breakcase "[2]":this.convertDatas.push({name: '多选题',code: 'Multiple',count: item.value.length,totalScore: totalScore,childs:item.value})this.answerCardActiveName.push('Multiple')breakcase "[3]":this.convertDatas.push({name: '判断题',code: 'Judgment',count: item.value.length,totalScore: totalScore,childs:item.value})this.answerCardActiveName.push('Judgment')breakcase "[4]":this.convertDatas.push({name: '填空题',code: 'Blank',count: item.value.length,totalScore: totalScore,childs:item.value})this.answerCardActiveName.push('Blank')breakcase "[5]":this.convertDatas.push({name: '简答题',code: 'Answer',count: item.value.length,totalScore: totalScore,childs:item.value})this.answerCardActiveName.push('Answer')break}})console.log(this.convertDatas)},/*** 排序* @param {} datas 数组* @param {} col 列* @param {} type 类型 desc,asc* @returns {}*/orderBy(datas, col, type) {let mfor (let i = 0; i < datas.length; i++) {for (let k = 0; k < datas.length; k++) {if (type === 'asc') {if (datas[i][col] < datas[k][col]) {m = datas[k]datas[k] = datas[i]datas[i] = m}} else if (type === 'desc') {if (datas[i][col] > datas[k][col]) {m = datas[k]datas[k] = datas[i]datas[i] = m}}}}return datas},/*** 分组* @param array 数据集* @param f 函数* let sorted = groupBy(list, function(item){ return [item.name];});*/groupBy(array, f) {const groups = {}const keyValues = []array.forEach(function(o) {const group = JSON.stringify(f(o))groups[group] = groups[group] || []groups[group].push(o)})Object.keys(groups).map(function(group) {return keyValues.push({ key: group, value: groups[group] })})return keyValues},/*** 倒计时*/countDowm () {let self = thisclearInterval(this.promiseTimer)this.promiseTimer = setInterval(function () {if(self.hour===0 && self.minute===0 && self.second===0){self.disabledAnswer=true;}if (self.hour === 0) {if (self.minute !== 0 && self.second === 0) {self.second = 59self.minute -= 1} else if (self.minute === 0 && self.second === 0) {self.second = 0self.$emit('countDowmEnd', true)clearInterval(self.promiseTimer)} else {self.second -= 1}} else {if (self.minute !== 0 && self.second === 0) {self.second = 59self.minute -= 1} else if (self.minute === 0 && self.second === 0) {self.hour -= 1self.minute = 59self.second = 59} else {self.second -= 1}}}, 1000)},}}
</script><style scoped>.paper-main {margin: 10px;position: absolute;top: 0;right: 0;bottom: 0;left: 0;overflow: hidden}.paper-header {width: 100%;height: 60px;background-color: #f7f7f7;position: absolute;top: 0;z-index: 1000;box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .1);-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .1);}.paper-left {position: absolute;padding: 10px;left: 0;top: 60px;bottom: 0;width: 300px;overflow-x: hidden;overflow-y: auto;border: 1px solid #e4e4e4;border-top: none;}.paper-content {position: absolute;left: 305px;top: 60px;right: 0px;bottom: 45px;overflow-x: hidden;overflow-y: auto;box-sizing: border-box;padding: 10px;border: 1px solid #e4e4e4;border-top: none;}.paper-footer {position: absolute;padding: 5px 10px;left: 305px;right: 0;bottom: 0px;height: 45px;overflow: hidden;box-sizing: border-box;background-color: #f7f7f7;box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);text-align: center;}.paper-title {padding-left: 10px;width: 100%;height: 45px;line-height: 45px;background: #f7f7f7;}.paper-title h1 {font-size: 1.2em;margin: 0;}.downTime{color: rgb(230, 93, 110);font-size: 16px;font-weight: bold;}.answer-button{padding: 0px;color: #0a0a0a;background-color: #ffffff;border-color: #e4e4e4;margin-left: 10px;width: 30px;height: 30px;}.answer-button:hover{background: #ecf1ef;border-color: #e4e4e4;color: #0a0a0a;}.answer-button-check{background: #13ce66;border-color: #30B08F;}.answer-radio{display: list-item;margin: 5px 0px;}.answer-checkbox{display: list-item;margin: 5px 0px;}.subject-title{padding-left: 10px;width: 100%;height: 45px;line-height: 45px;background: #f7f7f7;box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);}.subject-title h2{font-size: 16px;display: inline-block;}.subject-title span {font-size: 16px;display: inline-block;}.subject-remark{background: #f7f7f7;}.subject-remark .item{display: block;padding: 5px;}.subject-remark .title{font-weight: bold;}.el-radio>>>.el-radio__input.is-checked .el-radio__inner {background-color: #13ce66;border-color: #13ce66;}.el-radio-button>>>.el-radio-button__inner {padding: 10px;}.el-collapse-item h2 {width: 150px;font-size: 14px;display: inline-block;}.el-form--label-top >>> .el-form-item__label {float: none;display: inline-block;text-align: left;padding: 0px;}.el-card{margin: 10px;}.el-card >>>.el-card__header {background-color: #ffffff;padding: 0px 10px;line-height: 35px;font-size: 16px;}.el-card >>>.el-card__body {padding: 5px 20px;}
</style>

vue 试卷控件界面模式相关推荐

EDIT控件只读模式及实践问题
EDIT控件实现只读模式先说三种使EDIT控件实现只读模式的简单方式,然后由于这三种方式不能满足要求,最后又引出两种稍复杂的方式.这三种简单方式如下: 1.设置EDIT控件窗口风格,使窗口风格中含有 ...
vue单位文本控件与vue加密文本控件
vue单位文本控件: 使用方式: npm install dami-text-input --save使用:<text-input v-model="test" :unit= ...
ElementUI+VUE 日期控件禁用用法
今天给大家整理一下ElementUI+VUE 日期控件禁用用法,希望对大家有所帮助! HTML文件 <el-date-pickerv-model="value"type=&q ...
vue element 控件之 el-container中的el-side 与 el-main 的间距怎么设置
vue element 控件之 el-container中的el-side 与 el-main 的间距怎么设置效果: 如图所示,当我们在页面中同时使用el-container中的el-side 与 ...
vue时间控件美化成IOS样式(移动端)，vux组件datatime添加星期几/周几教程
input的时间控件有三种类型属性 Android IOS type="date" 年+月+日(原生UI样式) 年+月+日(滚轮样式) type="datetime&q ...
vue 树形控件可编辑_vue.js element-ui组件改iview 第一期 tree树形控件
此为第一期修改,后期也适配了其他组件,更多查看我得文章 element-ui组件的tree树形控件修改源码改为iview组件实现原理修改了element-ui源码,把源码里面的tree模块提取出来 ...
C#多线程加载控件界面卡死的解决
先听一个故事: 有一个老板忙不过来,于是招一个员工去负责某些事务.这样老板就可以腾出时间处理其它事. 后来发现员工干不下去,原因是干活需要花费,没有老板的认可,财务不给批钱.这是原则. 于是老板设计了 ...
vue旋钮控件——vue-knob-control
vue最简单的旋钮控件:A rotary knob control for Vue.js 该控件特点:能显示当前的旋钮数值,同时也支持手动输入. 控件导入vue项目 1.全局安装该插件 npm ins ...
vue占位控件solt
solt是占位控件父组件 <templateSlotNamed><h1 slot="footer">footer</h1><h1 slo ...

vue 试卷控件界面模式

vue 试卷控件界面模式相关推荐

最新文章

热门文章

vue 试卷控件 界面模式

vue 试卷控件 界面模式相关推荐

最新文章

热门文章

vue 试卷控件界面模式

vue 试卷控件界面模式相关推荐