HealthStudentWeb/src/views/questionnaire/index.vue

<template>
    <div class="questionnaire">
        <van-nav-bar title="调查问卷" left-text="返回" right-text="提交" left-arrow @click-left="onClickLeft"
            @click-right="onClickRight" />
        <van-form>
            <div v-for="(item, index) in formData" :key="index">
                <!-- 单选 -->
                <van-field v-if="item.type == 0" :name="'radio_' + item.questionId" :label="item.subject">
                    <template #input>
                        <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 }}
                            </van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <!-- 复选框 -->
                <van-field v-if="item.type == 1" :name="'multipleChoice_' + item.questionId" :label="item.subject">
                    <template #input>
                        <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 }}
                            </van-checkbox>
                        </van-checkbox-group>
                    </template>
                </van-field>
                <!-- 文本输入 -->
                <van-field v-if="item.type == 2" v-model="item.answer" rows="3" autosize
                    :name="'textBox_' + item.questionId" :label="item.subject" type="textarea" placeholder="" />
                <!-- 单行文本 -->
                <!-- <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 == 'switch'"
                    :name="'switch_' + item.questionId"
                    :label="item.subject"
                >
                    <template #input>
                        <van-switch v-model="item.value" size="20" />
                    </template>
                </van-field> -->
                <!-- 分割线 -->
                <van-divider />
            </div>
        </van-form>
    </div>
</template>

<script>
import { Form, RadioGroup, Radio, Divider } from 'vant';
import APIQuestionnaire from '@/api/questionnaire';
export default {
    components: {
        [Form.name]: Form,
        [RadioGroup.name]: RadioGroup,
        [Radio.name]: Radio,
        [Divider.name]: Divider
    },
    data() {
        return {
            formData: []
        };
    },
    created() {
        // 初始化问卷
        this.init();
    },
    mounted() { },
    methods: {
        onClickLeft(value) {
            console.log(value)
            this.$router.back()
        },
        onClickRight() {

            // 提交问卷
            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() {
            // 获取问卷
            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;
        }
    }
};
</script>
<style scoped lang="scss">
@import './scss/index.scss';
</style>