添加预览

src/views/setQuestions/components/answerList.vue

@@ -0,0 +1,209 @@
+<template>
+	<div>
+        <div class="questions" v-if="questionList.length > 0"  v-show="!resultStatus">
+            <div class="top-tips">{{ form.title }}</div>
+            <el-card class="box-card">
+                <div slot="header" class="clearfix">
+                    <span class="questionName">{{ questionList[currentIndex - 1]['content'] }}</span>
+                </div>
+                <el-radio-group v-model="check" v-if="questionList[currentIndex - 1]['type'] == 'radio'">
+                    <div class="" v-for="(item) in questionList[currentIndex - 1]['questionnaireQuestionItemList']" :key="item.id">
+                        <el-radio :label="item.id">{{item.answerValue}}</el-radio>
+                    </div>
+                </el-radio-group>
+                <el-checkbox-group v-model="checkBox" v-if="questionList[currentIndex - 1]['type'] == 'checkbox'">
+                    <el-checkbox  v-for="(item) in questionList[currentIndex - 1]['questionnaireQuestionItemList']" :key="item.id" :label="item.id">{{ item.answerValue }}</el-checkbox>
+                </el-checkbox-group>
+                <el-input
+                    v-if="questionList[currentIndex - 1]['type'] == 'textarea'"
+                    type="textarea"
+                    style="border: 0;"
+                    :autosize="{ minRows: 3, maxRows: 6}"
+                    placeholder="请输入其它意见"
+                    v-model="textarea">
+                </el-input>
+            </el-card>
+            <el-button size="large" type="primary" v-if="questionList[currentIndex - 1]['type'] == 'radio'" block round class="btn-submit" color="#01C1B5" :disabled="!check && !!isRequire" @click="onSubmit">提交</el-button>
+            <el-button size="large" type="primary" v-if="questionList[currentIndex - 1]['type'] == 'checkbox'" block round class="btn-submit" color="#01C1B5" :disabled="checkBox.length <= 0 && !!isRequire" @click="onSubmit">提交</el-button>
+            <el-button size="large" type="primary" v-if="questionList[currentIndex - 1]['type'] == 'textarea'" block round class="btn-submit" color="#01C1B5" :disabled="!textarea && !!isRequire" @click="onSubmit">提交</el-button>
+        </div>
+
+        <div class="resultModel" v-show="resultStatus">
+            <img src="@/assets/images/pay_success.png" class="img" alt="">
+            <p class="content">感谢您的参与！</p>
+            <el-button size="large" type="primary" round class="btn-submit" @click="onSubmitClose">确认</el-button>
+        </div>
+
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'question',
+        props: ['form', 'close'],
+		data() {
+			return {
+                currentIndex: 1,
+                questionList: [],
+                check: null,
+                isRequire: 1,
+                checkBox: [],
+                textarea: null,
+                checkList: [],
+                resultStatus: false
+			}
+		},
+		async mounted() {
+            try {
+                this.questionList = this.form.questionnaireQuestionList || []
+                console.log(this.questionList)
+                this.isRequire = this.questionList[this.currentIndex - 1].isRequire
+            } catch {
+                //
+            }
+		},
+		methods: {
+            toggle(index) {
+                let selectList = this.questionList[this.currentIndex - 1]
+                if(selectList.type == 'radio') {
+                    this.check = index
+                } else if(selectList.type == 'checkbox') {
+                    this.$refs.checkboxes[index].toggle()
+                }
+            },
+            onSubmit() {
+                let selectList = this.questionList[this.currentIndex - 1]
+                if(selectList.type == 'radio' && selectList.isRequire && !this.check) {
+                    this.$message.error('请回答当前问题')
+                    return
+                } else if(selectList.type == 'checkbox' && selectList.isRequire && this.checkBox.length <= 0) {
+                    this.$message.error('请回答当前问题')
+                    return
+                } else if(selectList.type == 'textarea' && selectList.isRequire && !this.textarea) {
+                    this.$message.error('请回答当前问题')
+                    return
+                }
+
+                let answerList = selectList.questionnaireQuestionItemList || [] //当前题的选项
+                let currentIsOver = 0 // 是否终止答题
+                answerList.forEach(item => {
+                    if(selectList.type == 'radio' && this.check == item.id) {
+                        currentIsOver = item.isOver
+                    } else if(selectList.type == 'checkbox' && this.checkBox.includes(item.id) && !currentIsOver) {
+                        currentIsOver = item.isOver
+                    }
+                })
+
+                // 判断是否在题目列表里面
+                if(this.currentIndex <= this.questionList.length) {
+                    if(selectList.type == 'radio') {
+                        this.checkList[this.currentIndex - 1] = {
+                            questionnaireQuestionId: selectList.id,
+                            questionnaireQuestionItemIdList: this.check
+                        }
+                        this.check = null
+                    } else if(selectList.type == 'checkbox') {
+                        this.checkList[this.currentIndex - 1] = {
+                            questionnaireQuestionId: selectList.id,
+                            questionnaireQuestionItemIdList: this.checkBox.join(',')
+                        }
+                        this.checkBox = []
+                    } else if(selectList.type == 'textarea') {
+                        this.checkList[this.currentIndex - 1] = {
+                            questionnaireQuestionId: selectList.id,
+                            additionalValue: this.textarea
+                        }
+                        this.textarea = null
+                    }
+
+                    // 1 为终止答题
+                    if(currentIsOver) {
+                        this.onConfirm()
+                        return
+                    }
+
+                    this.check = null
+                    if(this.currentIndex == this.questionList.length) {
+                        this.saveKey()
+                        return
+                    }
+
+                    this.currentIndex++
+                }
+            },
+            saveKey() {
+                // this.$message.info('谢谢参与')
+                this.resultStatus = true
+            },
+            async onConfirm() {
+                // this.$message.info('谢谢参与')
+                this.resultStatus = true
+            },
+            onSubmitClose() {
+                this.close()
+            }
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+.top-tips {
+    color: #808080;
+    font-size: 14px;
+    padding: 0 0 10px;
+}
+
+.btn-submit {
+    width: 90%;
+    margin: 20px 5%;
+}
+
+.form-info {
+    margin: 10px;
+    width: auto;
+    border-radius: 5px;
+}
+.questionName {
+    padding-top: 5px;
+    font-size: 16px;
+    color: #444;
+    font-weight: 500;
+    line-height: 1.5;
+}
+/deep/.el-radio-group, /deep/.el-checkbox-group {
+    width: 100%;
+}
+/deep/.el-radio__input.is-checked+.el-radio__label {
+    color: #606266;
+}
+/deep/.el-radio, /deep/.el-checkbox {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row-reverse;
+    padding: 10px 0;
+    .el-radio__label, .el-checkbox__label {
+        padding-left: 0;
+    }
+}
+/deep/.el-button--primary {
+    background: #01c1b5 !important;
+    border-color: #01c1b5 !important;
+}
+
+.resultModel {
+    .img {
+        width: 145px;
+        margin: 0 auto;
+        display: block;
+        // padding-top: 50px;
+    }
+    .content {
+        font-size: 20px;
+        color: #1A1A1A;
+        text-align: center;
+        font-weight: 500;
+        padding-bottom: 30px;
+    }
+}
+</style>

src/views/setQuestions/operation.vue

@@ -66,15 +66,25 @@
         </el-row>
         <el-button type="primary" :disabled="disabled" @click="onSubmit">{{ type == 'create' ? '提交问卷' : '修改问卷' }}</el-button>
         <el-button @click="onReset" :disabled="disabled">重置</el-button>
+        <el-button @click="onPreview">预览</el-button>
+
+        <el-dialog title="问卷题目"
+               :close-on-click-modal="false"
+               :visible.sync="questionStatus"
+               v-if="questionStatus"
+               width="375px">
+            <answer-list :form="form" :close="() => {questionStatus = false}" />
+        </el-dialog>
     </div>
 </div>
 </template>
 <script>
 import questionList from './components/questionList'
 import { questionnaireTopicAdd, questionnaireTopicGetDetail, questionnaireTopicUpdate } from './api'
+import AnswerList from './components/answerList'
 export default {
     name: 'operationQuestion',
-    components: { questionList },
+    components: { questionList, AnswerList },
     data () {
         let query = this.$route.query
         let titleName = '问卷'
@@ -95,7 +105,8 @@ export default {
                 title: null,
                 questionnaireQuestionList: [{questionnaireQuestionItemList: [{ }]}],
             },
-            disabled: query.type == 'look' ? true : false
+            disabled: query.type == 'look' ? true : false,
+            questionStatus: false
         }
     },
     async mounted () {
@@ -173,11 +184,26 @@ export default {
                 })
             })
         },
-        onReset() {
+        onPreview() {
             const forms = this.getForms();
-            for(let form of forms) {
-                form.resetFields()
+            Promise.all(forms.map(this.getFormPromise)).then(async (res) => {
+                const validateResult = res.every(item => !!item)
+                if(validateResult) {
+                    this.questionStatus = true
+                }
+            })
+        },
+        onReset() {
+            this.form = {
+                title: null,
+                questionnaireQuestionList: [{questionnaireQuestionItemList: [{ }]}],
             }
+            setTimeout(() => {
+                const forms = this.getForms();
+                for(let form of forms) {
+                    form.clearValidate()
+                }
+            }, 30)
         },
         // 添加题目选项
         addQuestionItem(questionnaireQuestionList) {