278 lines
9.4 KiB
Vue
278 lines
9.4 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<cu-custom bgColor="bg-gradual-blueness" :isBack="true">
|
||
|
|
<block slot="backText">返回</block>
|
||
|
|
<block slot="content">{{TITLE}}</block>
|
||
|
|
</cu-custom>
|
||
|
|
<view class="course">
|
||
|
|
|
||
|
|
<view class="course-aa">
|
||
|
|
<view class="course-items" v-for="(question,i) in questions" :key="i">
|
||
|
|
<view class="course-ask">
|
||
|
|
{{ i + 1 }}.
|
||
|
|
<text v-if="question.QUESTIONTYPE === '1'" class="mark">(单选题)</text>
|
||
|
|
<text v-if="question.QUESTIONTYPE === '2'" class="mark">(多选题)</text>
|
||
|
|
<text v-if="question.QUESTIONTYPE === '3'" class="mark">(问答题)</text>
|
||
|
|
{{ question.QUESTIONDRY }}
|
||
|
|
</view>
|
||
|
|
<view class="course-answer">
|
||
|
|
<radio-group v-if="question.QUESTIONTYPE == '1'" v-model="question.ANSWER"
|
||
|
|
@change="radioQuestionChange($event,i)">
|
||
|
|
<label class="answer-lable" v-for="(answer,j) in question.selection">
|
||
|
|
<radio class="blue" :class="question.ANSWER==answer.ITEM_ID?'checked':''"
|
||
|
|
:checked="question.ANSWER==answer.ITEM_ID?true:false"
|
||
|
|
:value="answer.ITEM_ID"></radio>
|
||
|
|
<text class="title">{{ j+1 }}.{{ answer.OPTIONDES }}</text>
|
||
|
|
</label>
|
||
|
|
</radio-group>
|
||
|
|
<checkbox-group v-if="question.QUESTIONTYPE == '2'" class="checkbox" v-model="question.ANSWER"
|
||
|
|
@change="checkQuestionChange($event,i)">
|
||
|
|
<label class="answer-lable" v-for="(answer,j) in question.selection">
|
||
|
|
<checkbox class="blue" :class="question.ANSWER==answer.ITEM_ID?'checked':''"
|
||
|
|
:checked="question.ANSWER==answer.ITEM_ID?true:false"
|
||
|
|
:value="answer.ITEM_ID"></checkbox>
|
||
|
|
<text class="title">{{ j+1 }}.{{ answer.OPTIONDES }}</text>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
</checkbox-group>
|
||
|
|
<radio-group v-if="question.QUESTIONTYPE == '3'" :disabled="isDisabled"
|
||
|
|
v-model="question.ANSWER" @change="radioQuestionChange($event,i)">
|
||
|
|
<label class="answer-lable">
|
||
|
|
<!-- <input type="textarea" name="input" ref="ANSWER" autosize v-model="question.ANSWER" placeholder="请输入答案"></input>-->
|
||
|
|
<textarea class="textarea" ref="ANSWER" :value="question.ANSWER" placeholder="请输入答案"
|
||
|
|
placeholder-style="font-size:28rpx" @input="descInput($event,i)"></textarea>
|
||
|
|
<view class="num">{{ question.ANSWER.length }}/140</view>
|
||
|
|
</label>
|
||
|
|
</radio-group>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="cu-tabbar-height"></view>
|
||
|
|
<view class="bottom-fixed">
|
||
|
|
<button class="cu-btn bg-green" @click="$noMultipleClicks(confirm)">提交</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
basePath,
|
||
|
|
corpinfoId,
|
||
|
|
deptId,
|
||
|
|
loginSession,
|
||
|
|
formatDate,
|
||
|
|
loginUser
|
||
|
|
} from '@/common/tool.js'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
StatusBar: this.StatusBar,
|
||
|
|
CustomBar: this.CustomBar,
|
||
|
|
bgImage: '',
|
||
|
|
isExamStart: false,
|
||
|
|
isDisabled: true,
|
||
|
|
titleContext: '我的问卷',
|
||
|
|
timer: '',
|
||
|
|
hour: 0,
|
||
|
|
minutes: 0,
|
||
|
|
seconds: 0,
|
||
|
|
showRight: false,
|
||
|
|
dataFlag: 'noData',
|
||
|
|
sTop: 0,
|
||
|
|
pd: {},
|
||
|
|
answer: '',
|
||
|
|
totalHeight: 0,
|
||
|
|
questions: [], //返回数据
|
||
|
|
noClick: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
style() {
|
||
|
|
var StatusBar = this.StatusBar;
|
||
|
|
var CustomBar = this.CustomBar;
|
||
|
|
var bgImage = this.bgImage;
|
||
|
|
var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
|
||
|
|
if (this.bgImage) {
|
||
|
|
style = `${style}background-image:url(${bgImage});`;
|
||
|
|
}
|
||
|
|
return style
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onReady() {
|
||
|
|
},
|
||
|
|
onLoad(event) {
|
||
|
|
this.SURVEY_ID = event.SURVEY_ID
|
||
|
|
this.getData();
|
||
|
|
loginSession();
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
},
|
||
|
|
|
||
|
|
beforeDestroy() {
|
||
|
|
if (this.timer) {
|
||
|
|
clearInterval(this.timer) // 满足条件时 停止计时
|
||
|
|
this.timer = null
|
||
|
|
this.seconds = 0
|
||
|
|
this.minutes = 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getData() {
|
||
|
|
var _this = this;
|
||
|
|
uni.showLoading({
|
||
|
|
title: '请稍候'
|
||
|
|
})
|
||
|
|
uni.request({
|
||
|
|
url: basePath + '/app/survey/getQuestions',
|
||
|
|
method: 'POST',
|
||
|
|
dataType: 'json',
|
||
|
|
header: {
|
||
|
|
'Content-type': 'application/x-www-form-urlencoded'
|
||
|
|
},
|
||
|
|
data: {
|
||
|
|
SURVEY_ID: this.SURVEY_ID
|
||
|
|
},
|
||
|
|
success: (res) => {
|
||
|
|
if ("success" == res.data.result) {
|
||
|
|
_this.questions = res.data.questions
|
||
|
|
_this.questions.forEach(item => {
|
||
|
|
item.ANSWER = ""
|
||
|
|
})
|
||
|
|
this.TITLE = res.data.pd.TITLE
|
||
|
|
console.log(this.TITLE)
|
||
|
|
uni.hideLoading();
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
title: res.data.message,
|
||
|
|
duration: 2000
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
radioQuestionChange(e, i) {
|
||
|
|
this.questions[i].ANSWER = e.detail.value;
|
||
|
|
},
|
||
|
|
checkQuestionChange(e, i) {
|
||
|
|
this.questions[i].ANSWER = e.detail.value;
|
||
|
|
},
|
||
|
|
descInput(event, index) {
|
||
|
|
let questions = this.questions
|
||
|
|
questions[index].ANSWER = event.detail.value
|
||
|
|
this.questions = [...questions]
|
||
|
|
},
|
||
|
|
confirm() {
|
||
|
|
for (let i = 0; i < this.questions.length; i++) {
|
||
|
|
if (!this.questions[i].ANSWER) {
|
||
|
|
uni.showToast({
|
||
|
|
icon: 'none',
|
||
|
|
title: '请填写第' + (i + 1) + '题',
|
||
|
|
duration: 1500
|
||
|
|
});
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (this.questions[i].QUESTIONTYPE == '2') {
|
||
|
|
this.questions[i].ANSWER = this.questions[i].ANSWER.join(',')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
uni.request({
|
||
|
|
url: basePath + '/app/surveyanswer/submit',
|
||
|
|
method: 'POST',
|
||
|
|
dataType: 'json',
|
||
|
|
header: {
|
||
|
|
'Content-type': 'application/x-www-form-urlencoded'
|
||
|
|
},
|
||
|
|
data: {
|
||
|
|
questions: JSON.stringify(this.questions),
|
||
|
|
CORPINFO_ID: loginUser.CORPINFO_ID,
|
||
|
|
USER_ID: loginUser.USER_ID,
|
||
|
|
SURVEY_ID: this.SURVEY_ID
|
||
|
|
},
|
||
|
|
success: (res) => {
|
||
|
|
uni.redirectTo({
|
||
|
|
url: '/pages/index/index'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
})
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.course {
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*.textarea_box{*/
|
||
|
|
/* padding: 20rpx;*/
|
||
|
|
/* background-color: #F2F2F2;*/
|
||
|
|
/*.uni-textarea-textarea{*/
|
||
|
|
/* font-size: 28rpx;*/
|
||
|
|
/* line-height: 45rpx;*/
|
||
|
|
/*}*/
|
||
|
|
.num {
|
||
|
|
text-align: right;
|
||
|
|
color: gray
|
||
|
|
}
|
||
|
|
|
||
|
|
.course-header {
|
||
|
|
padding: 20 upx;
|
||
|
|
border-bottom: 1 upx solid #F1F1F1;
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.course-name {
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 30 upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.course-int {
|
||
|
|
color: #888;
|
||
|
|
}
|
||
|
|
|
||
|
|
.course-obj {
|
||
|
|
color: #888;
|
||
|
|
}
|
||
|
|
|
||
|
|
.course-aa {
|
||
|
|
padding: 0 20 upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.course-items {
|
||
|
|
border-bottom: 1px dashed #F1F1F1;
|
||
|
|
padding: 20 upx 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.course-items .course-ask {
|
||
|
|
line-height: 1.6;
|
||
|
|
font-size: 28 upx;
|
||
|
|
/* margin-bottom: 10upx; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.course-answer {
|
||
|
|
padding-left: 40 upx;
|
||
|
|
margin-top: 20 upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.answer-lable {
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 20 upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.answer-lable:last-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.answer-lable radio {
|
||
|
|
margin-right: 20 upx;
|
||
|
|
}
|
||
|
|
</style>
|