[fix] 完成 DISC 问卷 部分 的问卷页和问卷结果页

This commit is contained in:
tian.guangyuan
2020-04-01 17:33:18 +08:00
parent ec0af28171
commit e2c2933979
4 changed files with 216 additions and 24 deletions

View File

@@ -106,8 +106,8 @@ export function getShareKey(data) {
data
})
}
// 根据问卷编码获取问卷详细信息
// 根据问卷编码获取问卷详细信息
export function answerDetail(data = {}) {
return request({
url: getUrl('/customer/answer/detailByQnCode', 1),
@@ -115,3 +115,12 @@ export function answerDetail(data = {}) {
data
})
}
// 答卷提交接口
export function answerSubmit(data) {
return request({
url: getUrl('/customer/answer/submit', 1),
method: 'post',
data
})
}

View File

@@ -38,6 +38,11 @@ export default {
title: '产品信息',
icon: 'bookmark-o',
path: '/product/productList'
},
{
title: 'DISC性格分析',
icon: 'newspaper-o',
path: '/manpower/DiscAnalysis/List'
}
// {
// title: '培训体系',

View File

@@ -1,7 +1,7 @@
<!-- DISC性格分析 - 问卷答题页面 -->
<template>
<div class="container">
<van-field v-model="formData.name" class="mt10" required clearable label="姓名" name="姓名" placeholder="请输入" v-validate="'required|manpowerName'" />
<div class="container pb50">
<van-field v-model="formData.customerName" class="mt10" required clearable label="姓名" name="姓名" placeholder="请输入" v-validate="'required|manpowerName'" />
<van-field
v-model="formData.mobile"
clearable
@@ -13,13 +13,57 @@
type="tel"
v-validate="'required|mobile'"
/>
<div :class="index>0?'mt10':''" v-for="(qesObj, index) of questions" :key="index">
<van-cell-group>
<van-cell class="noline">
<template slot="title">
<span class="qTitle fs15">{{qesObj.title}}</span>
<van-button class="ml10 prt-3" round plain size="mini" type="info">{{qesObj.tag}}</van-button>
</template>
</van-cell>
</van-cell-group>
<template v-if="index ===0">
<van-radio-group v-model="answerList[qItem.quCode]" v-for="(qItem, qIndex) of qesObj.questions" :class="qIndex>0?'mt10':''" :key="qIndex">
<van-cell-group>
<van-cell class="noline" title-class="qTitle fs15" :title="(qIndex+1)+'. '+ qItem.quTitle"></van-cell>
<van-cell v-for="(qAns, qAIndex) of qItem.qaAnswerInfoResponseDTOList" :key="qAIndex" title-class="ml10 c-gray-dark fs14" :title="qAns.anContent" clickable @click="changeAns(qItem.quCode,qAns.anMessage)">
<template #icon>
<van-radio :name="qAns.anMessage" />
</template>
</van-cell>
</van-cell-group>
</van-radio-group>
</template>
<template v-else>
<van-row type="flex" v-for="(qItem, qIndex) of qesObj.questions" :class="qIndex>0?'mt10':''" :key="qIndex">
<van-col class="bg-white">
<van-cell class="noline pr0" title-class="qTitle fs15" :title="(qIndex+11)+'. '+ qItem.quTitle"></van-cell>
</van-col>
<van-col>
<van-radio-group v-model="answerList[qItem.quCode]" >
<van-cell-group>
<van-cell v-for="(qAns, qAIndex) of qItem.qaAnswerInfoResponseDTOList" :key="qAIndex" title-class="ml10 c-gray-dark fs14" :title="qAns.anContent" clickable @click="changeAns(qItem.quCode,qAns.anMessage)">
<template #icon>
<van-radio :name="qAns.anMessage" />
</template>
</van-cell>
</van-cell-group>
</van-radio-group>
</van-col>
</van-row>
</template>
<van-button type="danger" class="bottom-btn" size="large" @click="save" v-no-more-click="1000">提交</van-button>
</div>
</div>
</template>
<script>
import { Field } from 'vant'
import { Field, Radio, RadioGroup, Cell, CellGroup, Col, Row } from 'vant'
import formatDate from '@/assets/js/utils/date-utils'
// import { } from '@/api/ebiz/manpower/manpower'
import { answerDetail } from '@/api/ebiz/manpower/manpower'
import { answerDetail, answerSubmit } from '@/api/ebiz/manpower/manpower'
export default {
name: '',
@@ -27,9 +71,16 @@ export default {
data() {
return {
formData: {
name: '',
mobile: ''
}
customerName: '',
mobile: '',
tableCode: '',
shareTime: '',
tableCode: 'GFRS-DISC',
answerList:[]
},
answerList:{},
questions: [],
data4res: {}
}
},
watch: {},
@@ -39,19 +90,119 @@ export default {
mounted() {},
methods: {
init() {
let shareTimeStamp = this.$route.query.shareTime -0;
localStorage.token = this.$route.query.token;
console.log(shareTimeStamp);
this.formData.shareTime = formatDate.formatDate(new Date(shareTimeStamp));
answerDetail({
qnCode: 'GFRS-DISC'
})
.then(res => {
console.log(res)
if (res.result == 0) {
res.content.questions.forEach(item => {
this.answerList[item.quCode] = ""
})
this.questions = [
{
title: '第一部分:请就您在“生活中”的状态选择最接近自己的一个描述',
tag: '单选',
type: 'radio',
questions: res.content.questions.slice(0, 10)
},
{
title: '第二部分:请就您在“工作中”的状态选择最接近自己的一个描述',
tag: '单选',
type: 'radio',
questions: res.content.questions.slice(10, 20)
}
]
} else {
this.$toast(res.resultMessage)
}
})
.catch(err => {})
},
changeAns(ans, value){
this.answerList[ans] = value;
this.$forceUpdate()
},
save(){
this.$validator.validateAll()
.then(result => {
if (result) {
this.formData.answerList = []
this.data4res = {}
for(let key in this.answerList){
let tempQuContent= this.answerList[key]
if(!tempQuContent){
return this.$toast("请完成问卷后提交")
}
this.formData.answerList.push({
quCode : key,
quContent : tempQuContent
})
if(this.data4res[tempQuContent]){
this.data4res[tempQuContent] = this.data4res[tempQuContent]+1
}else{
this.data4res[tempQuContent] = 1
}
}
answerSubmit(this.formData)
.then(res => {
if (res.result == 0) {
localStorage["DISC-answerList"] = JSON.stringify(this.data4res)
this.$jump({
flag: 'h5',
extra: {
url: location.origin + `/#/manpower/DiscAnalysis/Result`,
forbidSwipeBack: '1',
needRefresh: '1'
},
routerInfo: { path: `/manpower/DiscAnalysis/Result` }
})
} else {
this.$toast(res.resultMessage)
}
})
.catch(err => err)
} else {
this.$toast(this.errors.all()[0])
}
})
}
},
components: {
[Field.name]: Field
[Field.name]: Field,
[Radio.name]: Radio,
[RadioGroup.name]: RadioGroup,
[Cell.name]: Cell,
[CellGroup.name]: CellGroup,
[Col.name]: Col,
[Row.name]: Row
}
}
</script>
<style scoped="scoped" lang="scss"></style>
<style scoped="scoped" lang="scss">
.container {
.van-cell:not(:last-child)::after {
margin-left: 30px;
}
.noline:not(:last-child)::after {
border: none !important;
}
.qTitle {
color: #333440;
font-weight: 500;
line-height: 22px;
}
.prt-3 {
position: relative;
top: -3px;
}
}
</style>

View File

@@ -1,19 +1,21 @@
<!-- DISC性格分析 - DISC性格分析结果 -->
<template>
<div class="container">
<div class="box mt66vw ml10 mr10 pt30 pl30 pr30 fs16 c-gray-darker">
<div class="box mt66vw ml10 mr10 p30 fs16 c-gray-darker">
<van-row class="h40">
<van-col span="24" class="text-center">DISC性格分析结果</van-col>
</van-row>
<template v-for="(value,key,index) in answerList">
<van-row class="h40">
<van-col span="12"> <span class="circular mr10"></span> title</van-col>
<van-col span="12" class="text-right">value</van-col>
<van-col span="12"> <span class="circular mr10" :class="'circular'+index%4" ></span> {{key}}</van-col>
<van-col span="12" class="text-right">{{value}}</van-col>
</van-row>
<van-divider />
<van-row class="h40">
</template>
<!-- <van-row class="h40">
<van-col span="12"> <span class="circular mr10"></span> title</van-col>
<van-col span="12" class="text-right">value</van-col>
</van-row>
</van-row> -->
</div>
</div>
</template>
@@ -25,13 +27,26 @@ export default {
name: '',
filters: {},
data() {
return {}
return {
answerList: {}
}
},
watch: {},
created() {},
created() {
this.init()
},
mounted() {},
methods: {
init() {}
init() {
// let tmp = {
// "D" : 5,
// "I" : 6,
// "S" : 1,
// "C" : 8,
// }
// localStorage.answerList = JSON.stringify(tmp)
this.answerList = JSON.parse(localStorage["DISC-answerList"])
}
},
components: {
[Row.name]: Row,
@@ -57,7 +72,7 @@ export default {
.box {
width: auto;
height: 300px;
// height: 300px;
background-image: url('../../../../assets/images/discResBorder.png');
background-size: 100% 100%;
background-repeat: no-repeat;
@@ -67,9 +82,21 @@ export default {
display: inline-block;
width: 8px;
height: 8px;
background: rgba(255, 101, 26, 1);
background: #FF651A;
border-radius: 50%;
}
.circular0{
background: #FF651A;
}
.circular1{
background: #FACE01;
}
.circular2{
background: #46D591;
}
.circular3{
background: #12DAEC;
}
.h40 {
line-height: 40px;
height: 40px;