问卷
<p>[TOC]</p>
<h4>使用</h4>
<p>问卷提供了三个组件，
问卷（vhQuestionnaire）： 默认样式为弹窗，功能集成了 问卷列表、已推送问卷列表、绑定、复制、预览、创建、编辑功能。范围：pc、wap。
问卷编辑组件（vhQuestionnaireEdit）：提供创建和编辑功能。范围：pc。
问卷详情组件（vhQuestionnaireDetail）：主要是根据一个问卷 id 展示信息。范围：pc。</p>
<p>打开问卷时判断用户是否填写过该问卷,若填写过将隐藏提交按钮
question_type: user--获取当前用户下的问卷 room--获取当前房间下的问卷</p>
<h3>问卷（vhQuestionnaire）</h3>
<p>业务层需要自己监听消息，执行打开问卷的操作</p>
<pre><code class="language-html"> <vhQuestionnaire
: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" // 业务层按需传入
questionnaireNeedLogin="false" // 业务层按需传入
:isBack="false" // 业务层按需传入
questionType="console"
ref="question"
></vhQuestionnaire></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;">questionType</td>
<td style="text-align: left;">问卷列表类型，展示当前用户所有问卷，还是当前房间的</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">'room'/'user'</td>
<td style="text-align: left;">'room'</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;">questionnaireNeedLogin</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;">isBack</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;">textareaLimit</td>
<td style="text-align: left;">文本域字数限制（简介、文本题回答）</td>
<td style="text-align: left;">number</td>
<td style="text-align: left;">1-2000</td>
<td style="text-align: left;">1000</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">inputLimit</td>
<td style="text-align: left;">输入框字数限制</td>
<td style="text-align: left;">number</td>
<td style="text-align: left;">1-255</td>
<td style="text-align: left;">200</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">isCanSubmit</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)
参数：
type 问卷弹窗类型，可选值有 list、preview、bind、submit、edit，必填
id 第一个参数值为 preview 和 submit 时，id 必填；值为 edit 的时候，id 选填（创建时不用填，编辑时必填）；其他情况可使用该参数
说明：打开问卷功能
有问卷操作的问卷列表 和 无操作权限的问卷列表</p>
<pre><code class="language-javascript">this.$refs.question.open('list') // 打开问卷列表
this.$refs.question.open('bind') // 打开问卷的待绑定列表
this.$refs.question.open('preview', '1231') // 打开id为1231的问卷的预览，无提交按钮
this.$refs.question.open('submit', '1231') // 打开id为1231的问卷的天蝎，有提交按钮
this.$refs.question.open('edit', '1231') // 打开id为1231的问卷的编辑
this.$refs.question.open('edit') // 打开问卷的创建</code></pre>
</li>
<li>
<p>checkSurvey(id)
说明：检测该用户是否填写过试卷
参数： id 试卷 id
示例：</p>
<pre><code class="language-javascript">this.$refs.question.chexkSurvey().then(res => {
if (res) {
// 该用户已填写过该问卷
} else {
// 该用户没有填写该问卷
}
})</code></pre>
</li>
<li>
<p>checkAllSurvey()
说明：检测该用户是否填写 所有已发送的 试卷
示例：</p>
<pre><code class="language-javascript">this.$refs.question.checkAllSurvey().then(res => {
let status = res.status
if (status == 'zero') {
this.$message({
message: '您已填写全部问卷'
})
} else if (status == 'more') { // 多个问卷未填写
this.$refs.question.open('list')
} else if (status == 'one') { // 只有一个问卷未填写
this.$refs.question.open('submit', res.queId)
}
})</code></pre>
</li>
</ul>
<h4>关键EventBus</h4>
<p>消息都使用组件提供的 EventBus 进行监听
以下均为示例，业务层可根据需求进行调整
如果在收到消息打开问卷的时候，需要判断该用户是否填写该问卷，可使用问卷提供的checkSurvey方法</p>
<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;">questionnaire_push</td>
<td style="text-align: left;">问卷推送</td>
<td style="text-align: left;">服务端 ｜</td>
</tr>
<tr>
<td style="text-align: left;">component_check_questionnaire</td>
<td style="text-align: left;">其他组件打开 问卷</td>
<td style="text-align: left;">[聊天]/[公共] ｜</td>
</tr>
<tr>
<td style="text-align: left;">component_questionnaire_no_not_filled</td>
<td style="text-align: left;">问卷都已填写</td>
<td style="text-align: left;">[问卷]</td>
</tr>
<tr>
<td style="text-align: left;">component_que_submit_click</td>
<td style="text-align: left;">当参数 isCanSubmit=false，点击提交按钮是触发</td>
<td style="text-align: left;">[问卷]</td>
</tr>
<tr>
<td style="text-align: left;">component_que_status</td>
<td style="text-align: left;">问卷的状态</td>
<td style="text-align: left;">[问卷]</td>
</tr>
<tr>
<td style="text-align: left;">component_que_create_answer</td>
<td style="text-align: left;">用户提交问卷，创建答卷</td>
<td style="text-align: left;">[问卷详情]sdk保存情况</td>
</tr>
<tr>
<td style="text-align: left;">component_que_submit</td>
<td style="text-align: left;">提交问卷，vss接口调用成功</td>
<td style="text-align: left;">[问卷] ｜</td>
</tr>
</tbody>
</table>
<ul>
<li>
<p>推送问卷
触发时机，有问卷操作权限的人推送问卷</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('questionnaire_push', msg => {
this.$refs.question.open('submit', msg.questionnaire_id)
})</code></pre>
</li>
<li>
<p>其他组件打开问卷
通过其他组件中的消息按钮，打开问卷</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('component_check_questionnaire', msg => {
this.$refs.question.open('submit', msg.questionnaire_id)
})</code></pre>
<p>若判断用户填写过某一个问卷没有</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('component_check_questionnaire', msg => {
this.$refs.question.checkSurvey(msg.questionnaire_id).then(res => {
// res的值为true填写过问卷，false没有填写过问卷
if (res) {
this.$message({
type: 'error',
message: '您已填写过问卷'
})
this.$refs.question.open('preview', msg.questionnaire_id) // 打开预览模式，没有填写按钮
} else {
this.$refs.question.open('submit', msg.questionnaire_id) // 打开提交模式，有填写按钮
}
})
})</code></pre>
</li>
<li>
<p>问卷提交完成后，不自动打开问卷列表
通过监听消息，打开问卷列表</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('component_questionnaire_submit', () => {
this.$refs.question.open('list')
})</code></pre>
</li>
<li>
<p>点击显示问卷列表，如果列表中没有未填写的问卷抛出事件</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('component_questionnaire_no_not_filled', msg => {
this.$message({
type: 'error',
message: '您已填写过问卷'
})
})</code></pre>
</li>
<li>提交问卷，创建答卷</li>
</ul>
<pre><code class="language-javascript">this.$vhallEvent.$on('component_que_create_answer', data => {
// data.submitStatus='success' 底层创建答卷成功
// data.submitStatus='fail' 底层创建答卷失败
})</code></pre>
<ul>
<li>
<p>问卷状态</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('component_que_status', data => {
let status = data.status
// status == 'submit' 问卷提交状态
// status == 'list' 问卷再展示列表
// status == 'small' 有被推送的问卷，问卷面板被推送
// status == '' 问卷关闭
})</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;">参数</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">pageEndContent</td>
<td style="text-align: left;">预览或填写问卷时，每页的结尾的位置的插槽</td>
<td style="text-align: left;">isLastPage 是否为最后一页, currentPage当前页，totalPage总页数</td>
</tr>
</tbody>
</table>
<h3>问卷编辑（vhQuestionnaireEdit）</h3>
<h4>使用</h4>
<pre><code class="language-html"> <vhQuestionnaireEdit
:id="queId"
:appId="appId"
:account="accountId"
:token="token"
ref="queCreate"
></vhQuestionnaireEdit></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;">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>EventBus</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;">component_que_edit</td>
<td style="text-align: left;">编辑/创建点击保存时</td>
<td style="text-align: left;">-</td>
</tr>
</tbody>
</table>
<pre><code class="language-javascript">this.$vhallEvent.$on('component_que_create_answer', data => {
// data.id 问卷id
// data.title问卷标题
// data.description问卷简介
// data.status 更新状态 'no-modify'未更新问卷(未编辑)，‘update-success’编辑保存修改，‘create-success’问卷创建成功，'edit-fail'编辑/创建失败
})</code></pre>
<h3>问卷详情组件（vhQuestionnaireDetail）</h3>
<pre><code class="language-html"> <vhQuestionnaireDetail
:id="examId"
:status="tabStatus"
:appId="appId"
:account="accountId"
:token="token"
ref="examDetail"
></vhQuestionnaireDetail>
或者
<vhQuestionnaireDetail
:id="examId"
:status="tabStatus"
:formSdk="formSdk"
ref="examDetail"
></vhQuestionnaireDetail></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;">submit 只显示问卷题目，无答案回现，可提交</td>
<td style="text-align: left;">-</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>EventBus</h4>
<p>消息都使用组件提供的 EventBus 进行监听
以下均为示例，业务层可根据需求进行调整
如果在收到消息打开问卷的时候，需要判断该用户是否填写该问卷，可使用问卷提供的checkSurvey方法</p>
<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;">component_que_submit_click</td>
<td style="text-align: left;">当参数 isCanSubmit=false，点击提交按钮是触发</td>
<td style="text-align: left;">[问卷]</td>
</tr>
<tr>
<td style="text-align: left;">component_que_create_answer</td>
<td style="text-align: left;">用户提交问卷，创建答卷</td>
<td style="text-align: left;">[问卷]</td>
</tr>
</tbody>
</table>
<ul>
<li>提交问卷，创建答卷</li>
</ul>
<pre><code class="language-javascript">this.$vhallEvent.$on('component_que_create_answer', data => {
// data.status='success' 底层创建答卷成功
// data.status='fail' 底层创建答卷失败
})</code></pre>
<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;">pageEndContent</td>
<td style="text-align: left;">预览或填写问卷时，每页的结尾的位置的插槽</td>
<td style="text-align: left;">isLastPage 是否为最后一页, currentPage当前页，totalPage总页数</td>
</tr>
</tbody>
</table>