postdischarge-ui/src/views/system/components/questionopennew.vue

<template>
    <div class="app-container">
        <!-- 问卷模板 -->
        <!-- <el-dialog title="问卷预览" :visible.sync="questionopen" width="30%"> -->
        <div class="words" v-for="(item, index) in questiondata.questionSubjectList" :key="index">
            {{ index + 1 }}.{{ item.questionName }}
            <span v-if="item.questionType == 'MULTIPLE_CHOICE'">（单选题）</span>
            <span v-if="item.questionType == 'MULTIPLE_CHOICE_QUESTIONS'">（多选题）</span>
            <span v-if="item.questionType == 'SCORING_QUESTIONS'">（打分题）</span>
            <span v-if="item.questionType == 'COMBINATION_RADIO_SUBJECT'">（组合单选题）</span>
            <span v-if="item.questionType == 'COMBINATION_MULTIPLE_SUBJECT'">（组合多选题）</span>
            <span v-if="item.questionType == 'COMBINATION_BLANKS_SUBJECT'">（组合填空题）</span>
            <span v-if="item.questionType == 'FILL_IN_THE_BLANKS'">（填空题）</span>
            <span v-if="item.questionType == 'COMBINATION_SCORING_SUBJECT'">（组合打分题）</span>
            <span v-if="item.questionType == 'DATE_BLANKS_SUBJECT'">（日期填空题）</span>
            <span v-if="item.questionType == 'TIME_BLANKS_SUBJECT'">（时间填空题）</span>
            <el-radio-group v-if="item.questionType == 'MULTIPLE_CHOICE' ||
            item.questionType == 'COMBINATION_RADIO_SUBJECT' ||
            item.questionType == 'SCORING_QUESTIONS' ||
            item.questionType == 'COMBINATION_SCORING_SUBJECT'
            " v-model="questiondata[index]" class="custom-radio-group" disabled
                @change="radioGroupChange($event, item)">
                <el-radio class="custom" v-for="(aitem, aindex) in item.questionSubjectOptionList" :key="aindex"
                    :label="aitem.id" @change="radioChange($event, aitem, index)">{{ aitem.optionName }}</el-radio>
            </el-radio-group>
            <!-- 多选、组合多选 -->
            <el-checkbox-group disabled v-model="checkeddata" @change="radioGroupChange($event, item, 'checkbox')" v-if="item.questionType == 'MULTIPLE_CHOICE_QUESTIONS' ||
            item.questionType == 'COMBINATION_MULTIPLE_SUBJECT'
            ">
                <el-checkbox v-for="(aitem, aindex) in item.questionSubjectOptionList" :key="aindex" :label="aitem.id"
                    @change="radioChangecheck($event, aitem, index, aindex)">{{ aitem.optionName
                    }}</el-checkbox>
            </el-checkbox-group>
            <!-- 填空题、组合填空 -->
            <div v-if="item.questionType == 'FILL_IN_THE_BLANKS' ||
            item.questionType == 'COMBINATION_BLANKS_SUBJECT'
            " class="tk">
                <el-input v-model="item.fillBlanksAnswer" disabled placeholder="请输入答案" type="textarea" />
                <!-- <el-input></el-input> -->
            </div>
            <!-- 日期填空题、 -->
            <div v-if="item.questionType == 'DATE_BLANKS_SUBJECT'" style="margin: 20px 0 10px 30px">
                <el-date-picker disabled @change="timepicker($event, index)" clearable v-model="item.fillBlanksAnswer"
                    type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
                </el-date-picker>
            </div>
            <!-- 时间填空题 -->
            <div style="margin: 20px 0 10px 30px" v-if="item.questionType == 'TIME_BLANKS_SUBJECT'">
                <el-time-select disabled @change="timepickerselect($event, index)" clearable
                    v-model="item.fillBlanksAnswer" :picker-options="{
            start: '08:30',
            step: '00:30',
            end: '23:30',
        }" placeholder="选择时间">
                </el-time-select>
            </div>
        </div>
        <!-- </el-dialog> -->
    </div>
</template>

<script>
export default {
    name: "questionopen",
    props: ['lookitemnew'],
    data() {
        return {
            checkeddata: [],
            questiondata: {},
            // questionopen: false,
        };
    },
 
    created() {
        console.log(this.lookitemnew,'lookitemnewlookitemnewlookitemnew')
        this.questiondata = this.lookitemnew
    },
    mounted() {
    },
    watch: {
        lookitemnew(newValue, oldValue) {
            if (newValue) {
                this.questiondata = newValue;
            }
        }
    },
    methods: {
        // questionopentrue() {
        //     this.questionopen = true
        // },
        // 日期填空题
        timepicker(e, index) {
            this.questiondata.questionSubjectList[index].fillBlanksAnswer = e
        },
        // 复选框
        radioChangecheck(e, item, index, aindex) {
            console.log(e, item, index, '选中某个复选框时')
            if (e == true) {
                this.questiondata.questionSubjectList[index].questionSubjectOptionList[aindex].optionChooseSign = '0'
            } else {
                this.questiondata.questionSubjectList[index].questionSubjectOptionList[aindex].optionChooseSign = '1'
            }
        },
        // 时间填空题
        timepickerselect(e, index) {
            this.questiondata.questionSubjectList[index].fillBlanksAnswer = e
        },
        radioGroupChange(e, item) {
        },
        // 选中某个单选框时，由radio时触发
        radioChange(e, item, index) {
            this.questiondata.questionSubjectList[index].questionSubjectOptionList.forEach(el => {
                if (el.id == item.id) {
                    el.optionChooseSign = '0'
                }
                else {
                    el.optionChooseSign = '1'
                }
            })
            console.log(this.questiondata, 'this.questiondata')
            this.questiondata
        },
        // 复选框
        radioChangecheck(e, item, index, aindex) {
            if (e == true) {
                this.questiondata.questionSubjectList[index].questionSubjectOptionList[aindex].optionChooseSign = '0'
            } else {
                this.questiondata.questionSubjectList[index].questionSubjectOptionList[aindex].optionChooseSign = '1'
            }
        },
    }
};
</script>
<style scoped lang="scss">
.app-container {
    height: 100% !important;
}

::v-deep .el-input .is-disabled .el-input__inner {
    background: #fff !important;
    color: #606266;
}

::v-deep .el-textarea .is-disabled .el-textarea__inner {
    color: #606266;
    background: #fff;
}

::v-deep .el-radio__input.is-disabled+span.el-radio__label {
    color: black;
    background: #fff;
    cursor: default;
}

.tk {
    ::v-deep .el-textarea__inner {
        margin: 20px 0 10px 10px;
    }
}

::v-deep .el-radio {
    padding: 10px;
}

::v-deep .el-checkbox-group {
    display: flex;
    flex-direction: column;
    padding: 10px 0px 10px 24px;
}

::v-deep .el-checkbox {
    padding: 10px 0 10px 0px;
    // padding: 10px;
}

.custom-radio-group {
    display: flex;
    flex-direction: column;
    padding: 10px 0 10px 10px;

    .custom {
        padding: 10px 0 10px 10px;
    }
}

.bodytop {
    position: relative;
    top: 20px;
    // height: 500px;
    width: 400px;
    margin: 0 auto;
    // background: red;f
    overflow: auto;
    border: 1px solid #e2e2e2;

    .titledata {
        margin: 30px 0px 15px 30px;
        top: 14px;
        font-size: 20px;
    }

    .audiotop {
        margin: 10px 0px 10px 30px;
    }

    img {
        // width: 362px;
        // height: 127px;
        margin: 0px 0px 0px 30px;
    }

    .know {
        margin: 11px 0px 10px 30px;
        font-size: 20px;
        font-weight: 550;
    }

    .knowlist {
        margin: 10px 0px 10px 30px;
        font-size: 16px;
    }
}

.right {
    width: 100%;
    height: 500px;
    // background: yellow;
}

.header {
    background-color: #f1f3f5;
    padding-top: 10px;

    ::v-deep .el-tabs__header {
        margin: 0 !important;
        width: 100%;
        // overflow: auto;
        // height: 500px;
        // background: red;
    }

    .bottomheader {
        overflow: auto;
        width: 99%;
        background-color: #fff;
        margin: 10px auto;
        padding: 10px 20px;

        .sport {
            padding: 10px 50px 10px 10px;
            font-size: 20px;
            font-weight: 600;
        }

        .words {
            font-size: 15px;
            padding: 10px 50px 10px 10px;
        }

        .sports {
            position: absolute;
            left: 50%;
            transform: translate(-50%);
            font-size: 18px;
            font-weight: 600;
        }

        .word {
            font-size: 14px;
            font-weight: 550;
            padding: 50px 50px 10px 10px;
        }

        .videoleft {
            width: 40%;
            height: 200px;
            background: red;
        }

        .time {
            font-size: 20px;
            font-weight: 550;
            padding: 10px 50px 10px 10px;
        }

        .number {
            width: 25px;
            height: 25px;
            text-align: center;
            display: inline-block;
            color: white;
            background: blue;
            border-radius: 50%;
        }

        .nexttime {
            font-size: 15px;
            padding: 10px 50px 10px 10px;
        }

        .images {
            width: 53%;
            height: 241px;
            margin: 0 auto;
            background: red;
        }

        .attention {
            font-size: 14px;
            font-weight: 550;
            padding: 10px 50px 10px 10px;
        }

        // .videobottom
        // {
        //   font-size: 14px;
        //   font-weight: 550;
        //   padding: 10px 50px 10px 10px;
        // }
    }

    .topheader {
        width: 99%;
        background-color: #fff;
        margin: 0 auto;

        .information {
            display: flex;
            flex-wrap: wrap;
            padding: 10px 20px;
            height: 110px;

            .top,
            .bottom {
                color: #666666;
                width: 100%;
                display: flex;

                div {
                    width: 25%;
                }
            }
        }

        .user {
            width: 100%;
            padding: 0 20px;
            display: flex;
            height: 80px;
            align-items: center;
            line-height: 80px;

            .source {
                display: flex;
                position: relative;
                right: 59px;
                position: absolute;

                .item {
                    margin-left: 20px;
                }
            }

            .name {
                font-size: 20px;
                padding-left: 12px;
            }

            .gender {
                padding-left: 10px;
            }

            .age {
                padding-left: 10px;
            }

            .headsculpture {
                border-radius: 50%;
                width: 40px;
                height: 40px;
            }
        }
    }
}
</style>