考试
<p>[TOC]</p>
<p>考试部提供了三个组件，
考试组件（vhExam）： 默认样式为弹窗，功能集成了 房间试卷列表、用户试卷列表、绑定、复制、预览、创建、编辑功能。范围：pc、wap。
试卷详情组件（vhExamDetail）：主要是根据一个问卷id展示问卷信息。范围：pc。
试卷编辑组件（vhExamEdit）：提供创建和编辑功能。范围：pc。</p>
<blockquote>
<p>注意：使用试卷详情组件和试卷编辑组件的时候，请先实例化表单sdk，并将实例化提供与子孙组件，示例如下</p>
</blockquote>
<pre><code class="language-javascript">//data部分
formSdk: null // 本页面使用
form: { // 提供给子孙组件
sdk: {}
}
// provide部分
provide() {
return {
form: this.form
}
}
// methods部分
initSDk() {
if (window.formSdk) {
this.formSdk = window.formSdk
this.form.sdk = this,formSdk
return
}
let param = {
appId: this.appId, // paas的应用id,必填
accountId: this.accountId, // paas的第三方用户id,必填
token: this.token // paas的授权token,必填
}
window.VhallForm.createInstance(
param,
res => {
console.log('form sdk实例化成功')
this.formSdk = res.interface
this.form.sdk = this,formSdk
},
e => {
console.error(e)
}
)
}</code></pre>
<h3>考试组件（vhExam）</h3>
<h4>使用</h4>
<p>基础功能: 问卷列表、问卷新建/编辑、问卷预览、问卷推送、问卷填写
发起端和观看端都有自己的问卷列表
打开问卷时判断用户是否填写过该问卷,若填写过将隐藏提交按钮
业务层需要自己监听消息，执行打开问卷的操作</p>
<pre><code class="language-html"><vhExam
:appId="roomInfo.app_id"
:accountId="roomInfo.third_party_user_id"
:hostId="roomInfo.account_id"
:token="roomInfo.paas_access_token"
:roomId="roomInfo.room_id"
:editPermission="roomInfo.role_name==1" // 业务层按需传入
isShowLoginBox="false" // 业务层按需传入
ref="exam"
></vhExam></code></pre>
<h4>props</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">参数</th>
<th style="text-align: left;">说明</th>
<th style="text-align: left;">类型</th>
<th style="text-align: left;">可选值</th>
<th style="text-align: left;">默认值</th>
<th style="text-align: left;">必填</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">roomId</td>
<td style="text-align: left;">房间id</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">hostId</td>
<td style="text-align: left;">主持人id</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">token</td>
<td style="text-align: left;">pass_access_toke</td>
<td style="text-align: left;">string</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">accountId</td>
<td style="text-align: left;">用户id</td>
<td style="text-align: left;">string</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">appId</td>
<td style="text-align: left;">appId</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;"></td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">editPermission</td>
<td style="text-align: left;">是否问卷的编辑权限</td>
<td style="text-align: left;">boolean</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">false</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">isShowLoginBox</td>
<td style="text-align: left;">功能使用是否需要登录</td>
<td style="text-align: left;">boolean</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">false</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">isDefaultResult</td>
<td style="text-align: left;">是否展示默认的结果列表</td>
<td style="text-align: left;">boolean</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">true</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">pagesize</td>
<td style="text-align: left;">列表分页数</td>
<td style="text-align: left;">Number</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">5</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">submitCheckType</td>
<td style="text-align: left;">此次提交检测类型(支持动态改变)</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">无需填写'', 必须全部填写'all'，可部分填写'part'</td>
<td style="text-align: left;">''</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">defaultScore</td>
<td style="text-align: left;">每道题的默认分数</td>
<td style="text-align: left;">Number</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">10</td>
<td style="text-align: left;">否</td>
</tr>
</tbody>
</table>
<h4>方法</h4>
<ul>
<li>
<p>open(type, id)
参数：
type 问卷弹窗类型，可选值有 list、preview、bind、submit、edit，必填
id 第一个参数值为preview和submit时，id必填；值为edit的时候，id选填（创建时不用填，编辑时必填）；其他情况可使用该参数
说明：打开问卷功能
有问卷操作的问卷列表 和 无操作权限的问卷列表</p>
<p>示例：</p>
<pre><code class="language-javascript">this.$refs.exam.open('list') // 打开问卷列表
this.$refs.exam.open('bind') // 打开问卷的待绑定列表
this.$refs.exam.open('preview', '1231') // 打开id为1231的问卷的预览，无提交按钮
this.$refs.exam.open('submit', '1231') // 打开id为1231的问卷的天蝎，有提交按钮
this.$refs.exam.open('answer', '1231', '111') // 打开id为1231的问卷的id为111的答卷
this.$refs.exam.open('result', '1231') // 打开id为1231的问卷的排名
this.$refs.exam.open('edit', '1231') // 打开id为1231的问卷的编辑
this.$refs.exam.open('edit') // 打开问卷的创建</code></pre>
</li>
<li>
<p>submit()
说明：对外提供 让用户被动提交试卷的接口
设计逻辑：用户在使用该接口时，方法内部对用户是否正在填写试卷，如果正在填写，则执行交卷操作，否则不执行任何操作
示例：如收到examnaire_finish消息时将未交卷的观众进行收卷操作</p>
<pre><code class="language-javascript">this.$refs.exam.submit() // 打开问卷的创建</code></pre>
</li>
<li>
<p>close
说明：关闭考试功能</p>
<pre><code class="language-javascript">this.$refs.exam.close() // 关闭试卷</code></pre>
</li>
<li>
<p>checkSurvey(id)
说明：检测该用户是否填写过试卷， 以及考试是否结束
参数： id 试卷id
示例：</p>
<pre><code class="language-javascript">this.$refs.exam.checkSurvey(msg.examId).then(res => {
let answer = res.is_answer // 用户是否填写过试卷
let finish = res.is_finish // 试卷是否结束
if(finish) {
this.$message({
type: 'error',
message: '考试已结束'
})
} else if(answer){
this.$message({
type: 'error',
message: '您已参与过考试'
})
} else {
this.$refs.exam.open('submit', msg.examId)
}
})</code></pre>
</li>
</ul>
<h4>事件</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">事件</th>
<th style="text-align: left;">说明</th>
<th style="text-align: left;">回调参数Object</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">result</td>
<td style="text-align: left;">在isDefaultResult为false时，点击结果按钮触发</td>
<td style="text-align: left;">param.id 试卷id param.isFinish 0考试未结束 1已结束 param.isGrade 0未判卷 1已判卷</td>
</tr>
</tbody>
</table>
<blockquote>
<p>只有在考试结束后，判卷后才能公布考试成绩</p>
</blockquote>
<h4>slot</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">名称</th>
<th style="text-align: left;">说明</th>
<th style="text-align: left;">提供参数</th>
<th style="text-align: left;">是否提供默认内容</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">otherDetailInfo</td>
<td style="text-align: left;">在试卷简介下面</td>
<td style="text-align: left;">answerInfo（Object）</td>
<td style="text-align: left;">是</td>
</tr>
</tbody>
</table>
<pre><code class="language-html"><slot name="otherDetailInfo" :answerInfo="answerInfo">
<div v-show="status == 'answer'" class="vh-exam-answer_info">
<p class="vh-exam-answer_info-objective">
<span class="vh-exam-answer_info-item objective">客观<i>{{answerInfo.objective}}</i>题</span>
<span class="vh-exam-answer_info-item right">正确<i>{{answerInfo.right}}</i>题</span>
<span :class="[scoreLevelClass, 'vh-exam-answer_info-item', 'accuracy']">正确率<i>{{answerInfo.accuracy}}</i>%</span>
<span :class="[scoreLevelClass, 'vh-exam-answer_info-item', 'total']">总分<i>{{answerInfo.score}}</i></span>
</p>
<p class="vh-exam-answer_info-subject">
<span>主观<i class="vh-exam-answer_info-item subject">{{answerInfo.subjective}}</i>题</span>
</p>
</div>
</slot></code></pre>
<p>业务层使用示例（仅供参考）</p>
<pre><code class="language-html"><template slot="otherDetailInfo" slot-scope="{answerInfo}">
<div>
组件提供的数据：{{JSON.stringify(answerInfo))}}
业务层需要显示信息：……………………
</div>
<template>
消息</code></pre>
<h4>消息</h4>
<ul>
<li>
<p>发布考试（examnaire_push）
触发时机：有考试操作权限的人发布考试</p>
<p>若需要填写试卷则接在接受到消息时，调用考试组件的的打开方法，示例如下</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('exam_push', msg => {
this.$refs.exam.open('submit', msg.data.examnaire_id)
})</code></pre>
</li>
<li>
<p>结束考试（examnaire_finish）
触发时机：有考试操作权限的人进行收卷操作</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('exam_finish', msg => {
this.$refs.exam.submit() // 业务层根据需求，考试结束，是否收卷
})</code></pre>
</li>
<li>
<p>结束考试（examnaire_push_grade）
触发时机：有考试操作权限的人进行公布成绩</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('exam_push_grade', msg => {})</code></pre>
</li>
<li>
<p>面板状态（examnaire_push_grade）
触发时机：考试的面板内容发生变化的时候
status：list列表，submit填写、preview预览、answer答卷、bind绑定、result结果</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('component_exam_status', status => {})</code></pre>
</li>
<li>
<p>公告组件考试按钮（component_notice_check_exam）
触发时机：在公告中点击考试相关派发的时间
参数说明： msg.type: submit主讲人发布了一个考试，查看详情 result主讲人公布了考试成绩，查看详情
msg.examId: 试卷id
示例：</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('component_notice_check_exam', msg => {
if(msg.type == 'submit') {
this.$refs.exam.open('submit', msg.id)
} else {
this.$refs.exam.open('result', msg.id)
}
})</code></pre>
</li>
<li>
<p>考试组件考试按钮（component_chat_check_exam）
触发时机：在考试中点击考试相关派发的时间
参数说明： msg.type: submit主讲人发布了一个考试，查看详情 result主讲人公布了考试成绩，查看详情
msg.examId: 试卷id
示例：</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('component_chat_check_exam', msg => {
if(msg.type == 'submit') {
this.$refs.exam.open('submit', msg.id)
} else {
this.$refs.exam.open('result', msg.id)
}
})</code></pre>
</li>
<li>
<p>考试提交（component_exam_submit_success）
触发时机：在非操作者（观众）提交试卷后触发
参数说明： msg.status: 是否提及成功
示例：</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('component_exam_submit_success', msg => {
if(msg.status) {
// msg.status === true
// 试卷提交成功
} else {
// 试卷提交失败
}
})</code></pre>
</li>
<li>
<p>考试提交（components_exam_create_add_item）
触发时机：创建/编辑时，点击左侧工具栏,新增问题时
参数说明： data.type Radio单选 Checkbox多选 Text填空 Rank排序 line分割线 Remark图文备注
示例：</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('component_exam_submit_success', data => {
// 左侧工具栏点击了
if(data.type == 'Radio') {
// 新增单选题
}
})</code></pre>
</li>
<li>
<p>考试提交时检测结果（components_exam_submit_check）
触发时机：用户提交时，组件会根据submitCheckType进行校验，把校验结果返回，如果校验通继续提交流程（调用提交接口）
参数说明： data.status 校验是否通过， data.submitCheckType 校验的规则
示例：</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('components_exam_submit_check', data => {
// 左侧工具栏点击了
if(data.status) {
// 提交校验通过，组件内部会继续执行提交
} else {
// 校验未通过，组件内部不会继续执行提交，业务层可执行业务逻辑
}
})</code></pre>
</li>
</ul>
<h3>试卷编辑（vhExamEdit）</h3>
<h4>使用</h4>
<pre><code class="language-html"><vhExamEdit
:id="examId"
@create="create"
@update="update"
@back="backList"
ref="examCreate"
></vhExamEdit></code></pre>
<h4>props</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">参数</th>
<th style="text-align: left;">说明</th>
<th style="text-align: left;">类型</th>
<th style="text-align: left;">可选值</th>
<th style="text-align: left;">默认值</th>
<th style="text-align: left;">必填</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">id</td>
<td style="text-align: left;">试卷id</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">isCanSave</td>
<td style="text-align: left;">是否能保存</td>
<td style="text-align: left;">Boolean</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">true</td>
<td style="text-align: left;">否</td>
</tr>
</tbody>
</table>
<h4>事件</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">事件名</th>
<th style="text-align: left;">说明</th>
<th style="text-align: left;">参数</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">create</td>
<td style="text-align: left;">sdk创建问卷创建成功后的触发</td>
<td style="text-align: left;">{id: this.q.id,title: data.title,description: data.description}</td>
</tr>
<tr>
<td style="text-align: left;">update</td>
<td style="text-align: left;">sdk创建问卷编辑成功后的触发</td>
<td style="text-align: left;">{id: this.q.id,title: data.title,description: data.description}</td>
</tr>
<tr>
<td style="text-align: left;">back</td>
<td style="text-align: left;">点击返回按钮</td>
<td style="text-align: left;">-</td>
</tr>
<tr>
<td style="text-align: left;">notSave</td>
<td style="text-align: left;">isCanSave为false时，点击保存按钮触发</td>
<td style="text-align: left;">-</td>
</tr>
</tbody>
</table>
<h3>试卷详情组件（vhExamDetail）</h3>
<pre><code class="language-html"><vhExamDetail
:id="examId"
answerId=""
:status="tabStatus"
ref="examDetail"
></vhExamDetail></code></pre>
<h4>props</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">参数</th>
<th style="text-align: left;">说明</th>
<th style="text-align: left;">类型</th>
<th style="text-align: left;">可选值</th>
<th style="text-align: left;">默认值</th>
<th style="text-align: left;">必填</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">id</td>
<td style="text-align: left;">试卷id</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">status</td>
<td style="text-align: left;">查看试卷详情的状态</td>
<td style="text-align: left;">string</td>
<td style="text-align: left;">preview 回现预设答案不显示提交按钮、submit 只显示试卷题目，无答案回现，可提交 、answer回现预设答案与答卷答案</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">answerId</td>
<td style="text-align: left;">答卷id</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">当status为answer时，该值必填</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">defaultScore</td>
<td style="text-align: left;">每道题的默认分数</td>
<td style="text-align: left;">Number</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">10</td>
<td style="text-align: left;">否</td>
</tr>
</tbody>
</table>
<h4>slot</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">名称</th>
<th style="text-align: left;">说明</th>
<th style="text-align: left;">提供参数</th>
<th style="text-align: left;">是否提供默认内容</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">otherDetailInfo</td>
<td style="text-align: left;">在试卷简介下面</td>
<td style="text-align: left;">answerInfo（Object）</td>
<td style="text-align: left;">是</td>
</tr>
</tbody>
</table>
<pre><code class="language-html"><slot name="otherDetailInfo" :answerInfo="answerInfo">
<div v-show="status == 'answer'" class="vh-exam-answer_info">
<p class="vh-exam-answer_info-objective">
<span class="vh-exam-answer_info-item objective">客观<i>{{answerInfo.objective}}</i>题</span>
<span class="vh-exam-answer_info-item right">正确<i>{{answerInfo.right}}</i>题</span>
<span :class="[scoreLevelClass, 'vh-exam-answer_info-item', 'accuracy']">正确率<i>{{answerInfo.accuracy}}</i>%</span>
<span :class="[scoreLevelClass, 'vh-exam-answer_info-item', 'total']">总分<i>{{answerInfo.score}}</i></span>
</p>
<p class="vh-exam-answer_info-subject">
<span>主观<i class="vh-exam-answer_info-item subject">{{answerInfo.subjective}}</i>题</span>
</p>
</div>
</slot></code></pre>
<p>业务层使用示例（仅供参考）</p>
<pre><code class="language-html"><template slot="otherDetailInfo" slot-scope="{answerInfo}">
<div>
组件提供的数据：{{JSON.stringify(answerInfo))}}
业务层需要显示信息：……………………
</div>
<template></code></pre>