问卷模块 对接api

src/api/questionnaire.js

@@ -0,0 +1,26 @@
+import request from '@/config/request';
+
+export const APIPsy = {
+  getTaskDetail,
+  submitTask
+};
+
+export default APIPsy;
+
+// 获取任务详情
+function getTaskDetail(data) {
+  return request({
+    url: `/api/Task/TaskDetail`,
+    method: 'get',
+    params: data
+  });
+}
+
+// 任务提交
+function submitTask(params) {
+    return request({
+      url: `/api/Task/Submit`,
+      method: 'post',
+      data: params
+    });
+  }

src/views/questionnaire/index.vue

@@ -12,69 +12,70 @@
             <div v-for="(item, index) in formData" :key="index">
                 <!-- 单选 -->
                 <van-field
-                    v-if="item.type == 'radio'"
+                    v-if="item.type == 0"
                     :name="'radio_' + item.questionId"
                     :label="item.subject"
                 >
                     <template #input>
-                        <van-radio-group v-model="item.value" direction="horizontal">
+                        <van-radio-group v-model="item.answer" direction="horizontal">
                             <van-radio 
                                 v-for="(list, key) in item.answerItems" 
                                 :key="key"
                                 :name="list.serialNo"
                             >
-                                {{ list.AnswerItem }}
+                                {{ list.answerItem }}
                             </van-radio>
                         </van-radio-group>
                     </template>
                 </van-field>
-                <!-- 多选 -->
+                <!-- 复选框 -->
                 <van-field
-                    v-if="item.type == 'multipleChoice'"
+                    v-if="item.type == 1"
                     :name="'multipleChoice_' + item.questionId"
                     :label="item.subject"
                 >
                     <template #input>
-                        <van-checkbox-group v-model="item.value" direction="horizontal">
+                        <van-checkbox-group v-model="item.answer" direction="horizontal">
                             <van-checkbox
                                 v-for="(list, key) in item.answerItems"
                                 :key="key"
                                 :name="list.serialNo"
                                 shape="square"
                             >
-                                {{ list.AnswerItem }}
+                                {{ list.answerItem }}
                             </van-checkbox>
                         </van-checkbox-group>
                     </template>
                 </van-field>
-                <!-- 切换 -->
+                <!-- 文本输入 -->
                 <van-field
-                    v-if="item.type == 'switch'"
-                    :name="'switch_' + item.questionId"
+                    v-if="item.type == 2"
+                    v-model="item.answer"
+                    rows="3"
+                    autosize
+                    :name="'textBox_' + item.questionId"
                     :label="item.subject"
-                >
-                    <template #input>
-                        <van-switch v-model="item.value" size="20" />
-                    </template>
-                </van-field>
+                    type="textarea"
+                    placeholder=""
+                />
                 <!-- 单行文本 -->
-                <van-field
-                    v-if="item.type == 'textBox'"
+                <!-- <van-field
+                    v-if="item.type == 2"
                     v-model="item.value"
                     :name="'textBox_' + item.questionId"
                     :label="item.subject"
                     placeholder="请输入文本"
-                />
-                <!-- 多行文本 -->
-                <van-field
-                    v-if="item.type == 'textareaBox'"
-                    v-model="item.value"
-                    rows="3"
-                    autosize
+                /> -->
+                <!-- 切换 -->
+                <!-- <van-field
+                    v-if="item.type == 'switch'"
+                    :name="'switch_' + item.questionId"
                     :label="item.subject"
-                    type="textarea"
-                    placeholder="请输入留言"
-                />
+                >
+                    <template #input>
+                        <van-switch v-model="item.value" size="20" />
+                    </template>
+                </van-field> -->
                 <!-- 分割线 -->
                 <van-divider />
             </div>
@@ -84,6 +85,7 @@
 
 <script>
 import { Form, RadioGroup, Radio, Divider } from 'vant';
+import APIQuestionnaire from '@/api/questionnaire';
 export default {
     components: {
         [Form.name]: Form,
@@ -106,12 +108,71 @@ export default {
             console.log(value)
         },
         onClickRight() {
-            console.log(this.formData)
+            
+            // 提交问卷
+            if ( this.validate() ) {
+                let questionnaireData = [];
+                this.formData.forEach(element => {
+                    let answer = "";
+                    if ( element.type == 1 ) {
+                        answer = element.answer.join("|");
+                    } else {
+                        answer = element.answer
+                    }
+                    questionnaireData.push({
+                        "questionId": element.questionId,
+                        "answer": answer
+                    })
+                });
+                let params = {
+                    "id": 5,
+                    "personId": 15,
+                    "questionnaireData": questionnaireData
+                }
+                APIQuestionnaire.submitTask(params).then(res => {
+                    this.$notify({ type: 'success', message: res.data.message });
+                });
+            }
         },
         init() {
-            // 模拟获取
-            const data = "[{\"questionId\":1,\"subject\":\"1、问题1？（多选）\",\"type\":\"multipleChoice\",\"answerItems\":[{\"serialNo\":\"A\",\"AnswerItem\":\"A、天\"},{\"serialNo\":\"B\",\"AnswerItem\":\"B、天\"},{\"serialNo\":\"C\",\"AnswerItem\":\"C、向\"},{\"serialNo\":\"D\",\"AnswerItem\":\"D、上\"}],\"value\":[]},{\"questionId\":2,\"subject\":\"2、问题2（单选）\",\"type\":\"radio\",\"answerItems\":[{\"serialNo\":\"0\",\"AnswerItem\":\"是\"},{\"serialNo\":\"1\",\"AnswerItem\":\"否\"}],\"value\":null},{\"questionId\":3,\"subject\":\"3、问题3（开关）\",\"type\":\"switch\",\"value\":null},{\"questionId\":4,\"subject\":\"4、问题4（单行输入）\",\"type\":\"textBox\",\"value\":\"\"},{\"questionId\":5,\"subject\":\"5、问题5（多行输入）\",\"type\":\"textareaBox\",\"value\":\"\"}]";
-            this.formData = JSON.parse(data);
+            // 获取问卷
+            let params = {
+                id: 5,
+                personId: 15,
+                rankId: 2
+            }
+            APIQuestionnaire.getTaskDetail(params)
+                .then(res => {
+                    this.formData = res.data.data.subjectItems;
+                    this.formData.forEach(element => {
+                        if ( element.type == 1 ) {
+                            if ( element.answer !== "" ) {
+                                element.answer = element.answer.split('|');
+                            } else {
+                                element.answer = [];
+                            }
+                        }
+                    });
+                })
+                .catch(e => {
+                    console.log(e);
+                })
+        },
+        validate() {
+            let is = true;
+            this.formData.forEach(element => {
+                if ( element.type == 0 && element.answer == "" ) {
+                    this.$notify({ type: 'warning', message: "单选项请选择一个选项" });
+                    is = false;
+                } else if ( element.type == 1 && element.answer.length == 0 ) {
+                    this.$notify({ type: 'warning', message: "多选项至少选择一项" });
+                    is = false;
+                } else if ( element.type == 2 && element.answer == "" ) {
+                    this.$notify({ type: 'warning', message: "文本内容不能为空" });
+                    is = false;
+                }
+            })
+            return is;
         }
     }
 };

src/views/questionnaire/scss/index.scss

@@ -12,4 +12,11 @@
         margin: 0;
         display: none;
     }
+    ::v-deep(.van-checkbox) {
+        width: 50%;
+        margin-right: 0!important;
+        &:nth-of-type(n+3) {
+            margin-top: 10px;
+        }
+    }
 }