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

2025-12-24 05:32:52 +08:00 · 2020-04-01 17:33:18 +08:00
parent ec0af28171
commit e2c2933979
4 changed files with 216 additions and 24 deletions
--- a/src/api/ebiz/manpower/manpower.js
+++ b/src/api/ebiz/manpower/manpower.js
@@ -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
+  })
+}
--- a/src/views/ebiz/manpower/IncreaseStaffTools.vue
+++ b/src/views/ebiz/manpower/IncreaseStaffTools.vue
@@ -38,6 +38,11 @@ export default {
          title: '产品信息',
          icon: 'bookmark-o',
          path: '/product/productList'
+        },
+        {
+          title: 'DISC性格分析',
+          icon: 'newspaper-o',
+          path: '/manpower/DiscAnalysis/List'
        }
        // {
        //   title: '培训体系',
--- a/src/views/ebiz/manpower/discAnalysis/Question.vue
+++ b/src/views/ebiz/manpower/discAnalysis/Question.vue
@@ -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>
--- a/src/views/ebiz/manpower/discAnalysis/Result.vue
+++ b/src/views/ebiz/manpower/discAnalysis/Result.vue
@@ -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>
-      <van-row class="h40">
+      <template v-for="(value,key,index) in answerList">
+        <van-row class="h40">
+          <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 />
+      </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-divider />
-      <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;