投票
<p>[TOC]</p>
<blockquote>
<p>投票提供了三个组件，
投票组件（vhVote）： 默认样式为弹窗，功能集成了 房间投票列表、用户投票列表、绑定、复制、预览、创建、编辑功能。范围：pc、wap。
投票详情组件（vhVoteDetail）：主要是根据投票信息。范围：pc。</p>
</blockquote>
<h3>vhVote</h3>
<h4>使用</h4>
<p>基础功能: 投票列表、投票新建/编辑、投票预览、投票推送、投票填写
业务层需要自己监听消息，执行打开问卷的操作</p>
<pre><code class="language-html"> <vhVote
:editPermission="false"
:token="roomInfo.paas_access_token"
:vssToken="vssToken"
:accountId="roomInfo.third_party_user_id"
:appId="roomInfo.app_id"
:hostId="roomInfo.account_id"
ref="vote"
></vhVote></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>
</tbody>
</table>
<h4>方法</h4>
<ul>
<li>
<p>open(type, id, items)
参数：
type 问卷弹窗类型，可选值有 list、preview、bind、submit、edit、result，必填
id 第一个参数值为preview和submit时，id必填；值为edit的时候，id选填（创建时不用填，编辑时必填）；其他情况可使用该参数
说明：打开问卷功能
有问卷操作的问卷列表 和 无操作权限的问卷列表</p>
<p>示例：</p>
<pre><code class="language-javascript">this.$refs.vote.open('list') // 打开问卷列表
this.$refs.vote.open('bind') // 打开问卷的待绑定列表
this.$refs.vote.open('preview', '1231') // 打开id为1231的问卷的预览，无提交按钮
this.$refs.vote.open('submit', '1231') // 打开id为1231的问卷的天蝎，有提交按钮
this.$refs.vote.open('answer', '1231', '111') // 打开id为1231的问卷的id为111的答卷
this.$refs.vote.open('edit', '1231') // 打开id为1231的问卷的编辑
this.$refs.vote.open('edit') // 打开问卷的创建
this.$refs.vote.open('result', msg.data.vote_id, msg.data.vote_static)// 打开问卷的创建</code></pre>
</li>
<li>
<p>close</p>
<p>说明：关闭投票功能</p>
<pre><code class="language-javascript">this.$refs.vote.close() // 打开问卷的创建</code></pre>
</li>
<li>
<p>checkSurvey(id)
说明：检测该用户是否填写过投票， 投票是否结束
参数： id 投票id</p>
<p>示例：</p>
<pre><code class="language-javascript">this.$refs.exam.checkSurvey(msg.voteId).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.vote.open('submit', msg.voteId)
}
})</code></pre>
</li>
</ul>
<h4>消息</h4>
<ul>
<li>
<p>发布考试（vote_push）
触发时机：有投票操作权限的人发布考试</p>
<p>若需要填写投票则接在接受到消息时，调用考试组件的的打开方法，示例如下</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('vote_push', msg => {
this.$refs.vote.open('submit', msg.data.votenaire_id)
})</code></pre>
</li>
<li>
<p>结束考试（vote_finish）
触发时机：有考试操作权限的人进行收卷操作</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('vote_finish', msg => {
this.$refs.vote.submit() // 业务层根据需求，考试结束，是否收卷
})</code></pre>
</li>
<li>
<p>投票中后公布结果（vote_statis）
触发时机：有考试操作权限的人进行公布结果</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('vote_final_statis', msg => {})</code></pre>
</li>
<li>
<p>结束投票后公布结果（vote_final_statis）
触发时机：有考试操作权限的人进行公布结果</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('vote_final_statis', msg => {})</code></pre>
</li>
<li>
<p>面板状态（component_vote_status）
触发时机：考试的面板内容发生变化的时候
status：list列表，submit填写、preview预览、answer答卷、bind绑定、result结果</p>
</li>
<li>
<p>投票填写倒计时 （components_vote_submit_time）
触发时机：用户打开填写页面 和 时间倒计时为0时</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('components_vote_submit_time', data => {
let time = data.time
if(time != 0) {
// 当前剩余时间 time 秒
} else {
// 0秒，倒计时为0秒了
}
})</code></pre>
<pre><code class="language-javascript">this.$vhallEvent.$on('component_vote_status', status => {})</code></pre>
</li>
<li>
<p>公告中投票相关（component_notice_check_vote）</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('component_notice_check_vote', msg => {
console.log('公告中的投票=======', msg)
if(msg.type == 'submit') {
this.$refs.vote.open('submit', msg.voteId)
} else {
this.$refs.vote.open('result', msg.voteId)
}
})</code></pre>
</li>
<li>
<p>聊天中投票相关（component_notice_check_vote）</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('component_chat_check_vote', msg => {
console.log('公告中的投票=======', msg)
if(msg.type == 'submit') {
this.$refs.exam.checkSurvey(msg.voteId).then(res => {
if(res) {
this.$message({
type: 'error',
message: '您已参与投票'
})
} else {
this.$refs.vote.open('submit', msg.voteId)
}
})
} else {
this.$refs.vote.open('result', msg.voteId)
}
})</code></pre>
</li>
</ul>
<h3>vhExamDetail（投票详情组件）</h3>
<h4>使用</h4>
<pre><code class="language-html"><vhVoteDeatil
:id="voteId"
@create="create"
@update="update"
@back="backList"
ref="voteCreate"
></vhVoteDeatil></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>
<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;">edit编辑（如果有参数id为编辑，无id则为创建）， preview预览 ， submit提交</td>
<td style="text-align: left;">edit</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">formSdk</td>
<td style="text-align: left;">表单sdk实例后的对象</td>
<td style="text-align: left;">Object</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;">未传formSdk时，该参数必填</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，未传formSdk时，该参数必填</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;">toke</td>
<td style="text-align: left;">paas的授权token，未传formSdk时，该参数必填</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>
</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>