update
init
This commit is contained in:
@@ -0,0 +1,497 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user