498 lines
19 KiB
Vue
498 lines
19 KiB
Vue
<template>
|
|
<div id="evaluating">
|
|
<div class="history" @click="handleHistory">历史测评</div>
|
|
<template v-for="(item, index) in questionnaireData.qsList" :key="index">
|
|
<div class="question" v-if="index === questionnaireIndex">
|
|
<div class="questionTitle">{{ index + 1 }}、{{ item.qsDes }}</div>
|
|
<!--1:单选 2:多选 3:是否 4: 填空 5:滑块-->
|
|
<template v-if="item.qsType === 1">
|
|
<template v-for="(item_, index_) in item.answerList" :key="index_">
|
|
<div class="radioDom" @click="radioChange(index, index_)">
|
|
<div :class="[item.answerNo.toString().split(',').includes(item_.answerNo.toString()) ? 'active' : '']">
|
|
<div>{{ english[index_] }}</div>
|
|
<div>{{ item_.answerDesc }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<template v-if="item.qsType === 2">
|
|
<template v-for="(item_, index_) in item.answerList" :key="index_">
|
|
<div class="checkboxDom" @click="checkboxChange(index, index_)">
|
|
<div :class="[item.answerNo.toString().split(',').includes(item_.answerNo.toString()) ? 'active' : '']">
|
|
<div>{{ english[index_] }}</div>
|
|
<div>{{ item_.answerDesc }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<template v-if="item.qsType === 4">
|
|
<div class="inputDom">
|
|
<div>
|
|
<input type="text" placeholder="填入答案" v-model="item.answer" @input="inputChange(index)" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-if="item.qsType === 5">
|
|
<div class="sliderDom">
|
|
<van-slider v-model="item.answer" :step="1" :min="0" :max="100" @change="sliderChange(index)">
|
|
<template #button>
|
|
<div class="custom-button">{{ item.answer }}</div>
|
|
</template>
|
|
</van-slider>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="btn">
|
|
<div v-if="questionnaireBtn === 'next'" @click="nextQuestionnaire()">下一题</div>
|
|
<div v-if="questionnaireBtn === 'submit'" @click="submitQuestionnaire()">提交</div>
|
|
</div>
|
|
|
|
<quit-answering :questionnaireIndex="questionnaireIndex" ref="quitAnswering" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { psychologicalEvaluationSubmit, questionnaire } from '/@/api/index';
|
|
|
|
import { defineComponent, reactive, toRefs, onMounted, ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
|
|
import { showSuccessToast, showFailToast } from 'vant';
|
|
|
|
import quitAnswering from '/@/components/quitAnswering.vue';
|
|
import { useLoading } from '../../../utils/compUtils';
|
|
const { loadingSpinner, loadingClose } = useLoading();
|
|
export default defineComponent({
|
|
components: {
|
|
quitAnswering,
|
|
},
|
|
setup() {
|
|
const router = useRouter();
|
|
|
|
const quitAnswering = ref(null);
|
|
const state = reactive({
|
|
english: [
|
|
'A',
|
|
'B',
|
|
'C',
|
|
'D',
|
|
'E',
|
|
'F',
|
|
'G',
|
|
'H',
|
|
'I',
|
|
'J',
|
|
'K',
|
|
'L',
|
|
'M',
|
|
'N',
|
|
'O',
|
|
'P',
|
|
'Q',
|
|
'R',
|
|
'S',
|
|
'T',
|
|
'U',
|
|
'V',
|
|
'W',
|
|
'X',
|
|
'Y',
|
|
'Z',
|
|
],
|
|
questionnaireIndex: 0,
|
|
questionnaireData: [],
|
|
questionnaireBtn: 'next',
|
|
backStatus: true,
|
|
isClick: true,
|
|
});
|
|
|
|
onMounted(() => {
|
|
getQuestionnaire();
|
|
});
|
|
|
|
// 点击选择问题 单选
|
|
const radioChange = (index, index_) => {
|
|
let qsList = state.questionnaireData.qsList[index];
|
|
let answerList = qsList.answerList[index_];
|
|
qsList.answerNo = answerList.answerNo;
|
|
qsList.answer = answerList.answerDesc;
|
|
qsList.qsScore = parseInt(answerList.answerScore);
|
|
};
|
|
|
|
// 点击选择问题 多选
|
|
const checkboxChange = (index, index_) => {
|
|
let qsList = state.questionnaireData.qsList[index];
|
|
let answerNo = qsList.answerNo ? qsList.answerNo.split(',') : [];
|
|
let answer = qsList.answer ? qsList.answer.split(',') : [];
|
|
let qsScore = qsList.qsScore ? qsList.qsScore.split(',') : [];
|
|
let answerList = qsList.answerList[index_];
|
|
let answerNoIndexOf = answerNo.indexOf(answerList.answerNo.toString());
|
|
if (answerNoIndexOf === -1) {
|
|
answerNo.push(answerList.answerNo);
|
|
answer.push(answerList.answerDesc);
|
|
qsScore.push(answerList.answerScore);
|
|
} else {
|
|
answerNo.splice(answerNoIndexOf, 1);
|
|
answer.splice(answerNoIndexOf, 1);
|
|
qsScore.splice(answerNoIndexOf, 1);
|
|
}
|
|
qsList.answerNo = answerNo.join(',');
|
|
qsList.answer = answer.join(',');
|
|
qsList.qsScore = qsScore.join(',');
|
|
};
|
|
|
|
// input 输入文字
|
|
const inputChange = (index) => {
|
|
let qsList = state.questionnaireData.qsList;
|
|
qsList[index].answerNo = '';
|
|
qsList[index].qsScore = '';
|
|
let answer = qsList[index].answer;
|
|
let fillType = qsList[index].fillType;
|
|
let fieldName = qsList[index].fieldName;
|
|
if (fillType === 'n' && answer) {
|
|
answer = answer.replace(/\D/g, '');
|
|
if (fieldName === 'Children_number') {
|
|
if (parseInt(answer) < 18) {
|
|
showFailToast({
|
|
message: '最小只支持18',
|
|
forbidClick: true,
|
|
});
|
|
answer = 18;
|
|
}
|
|
if (parseInt(answer) > 70) {
|
|
showFailToast({
|
|
message: '最大只支持70',
|
|
forbidClick: true,
|
|
});
|
|
answer = 70;
|
|
}
|
|
}
|
|
|
|
if (fieldName === 'PSQI_duration') {
|
|
if (parseInt(answer) < 0) {
|
|
showFailToast({
|
|
message: '最小只支持0',
|
|
forbidClick: true,
|
|
});
|
|
answer = 0;
|
|
}
|
|
if (parseInt(answer) > 24) {
|
|
showFailToast({
|
|
message: '最大只支持24',
|
|
forbidClick: true,
|
|
});
|
|
answer = 24;
|
|
}
|
|
}
|
|
qsList[index].answer = answer;
|
|
}
|
|
};
|
|
|
|
// slider 滑动
|
|
const sliderChange = (index) => {
|
|
let qsList = state.questionnaireData.qsList;
|
|
qsList[index].answerNo = '';
|
|
qsList[index].qsScore = '';
|
|
};
|
|
|
|
// 下一题
|
|
const nextQuestionnaire = () => {
|
|
let questionnaireIndex = state.questionnaireIndex;
|
|
let qsListLength = state.questionnaireData.qsList.length - 2;
|
|
let answer = state.questionnaireData.qsList[questionnaireIndex].answer;
|
|
let qsJumpType = state.questionnaireData.qsList[questionnaireIndex].qsJumpType;
|
|
if (answer) {
|
|
if (qsJumpType === 0) {
|
|
state.questionnaireIndex = questionnaireIndex + 1;
|
|
}
|
|
if (qsJumpType === 1) {
|
|
switch (answer) {
|
|
case '未婚':
|
|
state.questionnaireIndex = state.questionnaireData.qsList.findIndex((item) => {
|
|
return item.qsDes === '您和家人的生活方式是';
|
|
});
|
|
break;
|
|
case '从不倒班':
|
|
state.questionnaireIndex = state.questionnaireData.qsList.findIndex((item) => {
|
|
return item.qsDes === '您工作地点距离最近的县城有多远（公里）';
|
|
});
|
|
break;
|
|
case '否':
|
|
state.questionnaireIndex = state.questionnaireData.qsList.findIndex((item) => {
|
|
return item.qsDes === '您是否感觉因工作与社会脱节';
|
|
});
|
|
break;
|
|
default:
|
|
state.questionnaireIndex = questionnaireIndex + 1;
|
|
}
|
|
}
|
|
if (qsJumpType === 2) {
|
|
let i = 1;
|
|
if (state.questionnaireData.qsList[questionnaireIndex].qsDes === '我能经常保持愉快的心情和丈夫（妻子、前夫、前妻）相处') {
|
|
let b = state.questionnaireData.qsList.findIndex((item) => {
|
|
return item.qsDes === '您目前有多少个子女';
|
|
});
|
|
if (state.questionnaireData.qsList[b].answer === '零个' || !state.questionnaireData.qsList[b].answer) {
|
|
i = i + 2;
|
|
}
|
|
}
|
|
state.questionnaireIndex = questionnaireIndex + i;
|
|
}
|
|
if (qsJumpType === 3) {
|
|
let i = 1;
|
|
let a = state.questionnaireData.qsList.findIndex((item) => {
|
|
return item.qsDes === '婚姻状况';
|
|
});
|
|
if (state.questionnaireData.qsList[a].answer === '未婚') {
|
|
i = i + 4;
|
|
}
|
|
state.questionnaireIndex = questionnaireIndex + i;
|
|
}
|
|
state.questionnaireBtn = questionnaireIndex === qsListLength ? 'submit' : 'next';
|
|
quitAnswering.value.editBackStatus(questionnaireIndex !== qsListLength);
|
|
} else {
|
|
showFailToast({
|
|
message: '请先回答该问题',
|
|
forbidClick: true,
|
|
});
|
|
}
|
|
};
|
|
|
|
// 提交答案
|
|
const submitQuestionnaire = () => {
|
|
if (state.isClick) {
|
|
loadingSpinner();
|
|
let params = JSON.parse(JSON.stringify(state.questionnaireData));
|
|
psychologicalEvaluationSubmit(params)
|
|
.then((res) => {
|
|
loadingClose();
|
|
state.isClick = false;
|
|
showSuccessToast(res.msg);
|
|
setTimeout(() => {
|
|
router.replace({
|
|
path: '/assessmentResultA',
|
|
query: {
|
|
serialNo: res.data.serialNo,
|
|
},
|
|
});
|
|
}, 1500);
|
|
})
|
|
.catch((err) => {
|
|
showFailToast({
|
|
message: err.msg,
|
|
forbidClick: true,
|
|
});
|
|
});
|
|
} else {
|
|
showFailToast({
|
|
message: '请勿重复提交',
|
|
forbidClick: true,
|
|
});
|
|
}
|
|
};
|
|
|
|
const getQuestionnaire = () => {
|
|
let params = {
|
|
templateNo: 20000,
|
|
};
|
|
questionnaire(params)
|
|
.then((res) => {
|
|
res.data.qsList.map((item) => {
|
|
item.answer = '';
|
|
item.answerNo = '';
|
|
item.qsScore = '';
|
|
});
|
|
state.questionnaireData = res.data;
|
|
})
|
|
.catch((err) => {
|
|
showFailToast({
|
|
message: err.msg,
|
|
forbidClick: true,
|
|
});
|
|
});
|
|
};
|
|
const handleHistory = () => {
|
|
router.push({
|
|
path: '/historyA',
|
|
});
|
|
};
|
|
|
|
return {
|
|
...toRefs(state),
|
|
getQuestionnaire,
|
|
nextQuestionnaire,
|
|
radioChange,
|
|
checkboxChange,
|
|
inputChange,
|
|
sliderChange,
|
|
submitQuestionnaire,
|
|
quitAnswering,
|
|
handleHistory,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import '/@/assets/less/index';
|
|
#evaluating {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.history {
|
|
width: 100%;
|
|
color: #007aff;
|
|
font-size: 14px;
|
|
height: 45px;
|
|
line-height: 45px;
|
|
padding: 0 20px;
|
|
text-align: right;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.question {
|
|
width: 100%;
|
|
overflow-y: scroll;
|
|
padding: 14px 15px 0;
|
|
box-sizing: border-box;
|
|
height: calc(100% - 100px);
|
|
|
|
.questionTitle {
|
|
color: @zp-text-color;
|
|
font-size: 14px;
|
|
line-height: 25px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.radioDom {
|
|
width: 100%;
|
|
|
|
> div {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
border-radius: 8px;
|
|
margin-bottom: 10px;
|
|
padding: 12px 20px;
|
|
box-sizing: border-box;
|
|
background-color: @zp-bg-color-grey;
|
|
border: 1px solid @zp-bg-color-grey;
|
|
|
|
> div {
|
|
color: @zp-text-color;
|
|
font-size: 13px;
|
|
line-height: 22px;
|
|
|
|
&:first-of-type {
|
|
margin-right: 22px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.active {
|
|
background: rgba(31, 145, 242, 0.2);
|
|
border: 1px solid @zp-color-primary;
|
|
|
|
> div {
|
|
color: @zp-color-primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.checkboxDom {
|
|
width: 100%;
|
|
|
|
> div {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
border-radius: 8px;
|
|
margin-bottom: 10px;
|
|
padding: 12px 20px;
|
|
box-sizing: border-box;
|
|
background-color: @zp-bg-color-grey;
|
|
border: 1px solid @zp-bg-color-grey;
|
|
|
|
> div {
|
|
color: @zp-text-color;
|
|
font-size: 13px;
|
|
line-height: 22px;
|
|
|
|
&:first-of-type {
|
|
margin-right: 22px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.active {
|
|
background: rgba(33, 190, 189, 0.2);
|
|
border: 1px solid @zp-color-primary;
|
|
|
|
> div {
|
|
color: @zp-color-primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.inputDom {
|
|
width: 100%;
|
|
|
|
> div {
|
|
width: 100%;
|
|
padding: 0 20px;
|
|
border-radius: 8px;
|
|
box-sizing: border-box;
|
|
background-color: @zp-bg-color-grey;
|
|
border: 1px solid @zp-bg-color-grey;
|
|
|
|
input {
|
|
color: @zp-text-color;
|
|
width: 100%;
|
|
height: 46px;
|
|
font-size: 14px;
|
|
line-height: 46px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sliderDom {
|
|
width: 100%;
|
|
margin-top: 40px;
|
|
|
|
.custom-button {
|
|
width: 26px;
|
|
color: #fff;
|
|
font-size: 10px;
|
|
line-height: 18px;
|
|
text-align: center;
|
|
background-color: var(--van-primary-color);
|
|
border-radius: 100px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
height: 55px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
> div {
|
|
color: @zp-text-color-inverse;
|
|
width: 250px;
|
|
height: 35px;
|
|
margin: 0 auto;
|
|
font-size: 14px;
|
|
line-height: 35px;
|
|
text-align: center;
|
|
border-radius: 18px;
|
|
background: #21bebd;
|
|
}
|
|
}
|
|
}
|
|
</style>
|