pbl-student-table/src/components/Choice/index.vue

<template>
    <div>
        <el-dialog title="选择题" :visible.sync="dialogVisibleChoice" :append-to-body="true" width="1000px"
            :before-close="handleClose" class="dialog_diy dialog_diy3">
            <div v-if="dialogVisibleChoice">
                <div class="a_addBox">
                    <div style="font-size: 16px; color: #c7c7c7">题目内容</div>
                    <div class="a_add_box" v-for="(item1, index1) in testJson.testCount" :key="index1">
                        <div class="a_add_head">
                            <div style="display: flex">
                                {{ index1 + 1 + "、" }}
                                <div v-if="testJson.testJson[index1].type == '1'" style="margin-right: 5px">
                                    (单选题)
                                </div>
                                <div v-if="testJson.testJson[index1].type == '2'" style="margin-right: 5px">
                                    (多选题)
                                </div>
                                <div>题目：{{ testJson.testJson[index1].teststitle }}</div>
                            </div>
                            <img v-if="testJson.testJson[index1].img" :src="testJson.testJson[index1].img"
                                style="height: 300px; margin-top: 10px; max-width: 100%" />
                        </div>
                        <div class="timuImgBox" v-if="testJson.testJson[index1].timuList &&
                            testJson.testJson[index1].timuList.length
                            ">
                            <div v-for="(timg, tIndex) in testJson.testJson[index1].timuList" :key="tIndex" class="timuImg"
                                @click.stop="previewImg(timg.src)">
                                <img :src="timg.src" alt="" />
                            </div>
                        </div>
                        <div class="a_add_body">
                            <div class="a_add_input">
                                <el-radio-group v-model="radio[index1]" v-if="testJson.testJson[index1].type == '1'" :disabled="videoType==1" >
                                    <div class="radioBox">
                                        <el-radio v-for="(item2, checkIndex) in testJson.testJson[index1]
                                            .checkList" :key="checkIndex" :label="checkIndex"
                                            class="redioStyle">
                                            <div style="margin-right: 10px"
                                                v-if="item2 && item2.imgType && item2.imgType == 1">
                                                <div class="inImg" @click.stop="previewImg(item2.src)">
                                                    <img :src="item2.src" alt="" />
                                                </div>
                                            </div>
                                            <span :class="typeof radio[index1] == 'number' && [radio[index1]==checkIndex?'showLight':'']" v-else v-html="item2"></span>
                                        </el-radio>
                                    </div>
                                </el-radio-group>
                                <el-checkbox-group v-model="radio[index1]" v-if="testJson.testJson[index1].type == '2'" :disabled="videoType==1">
                                    <div class="radioBox">
                                        <el-checkbox v-for="(item2, checkIndex) in testJson.testJson[index1]
                                            .checkList" :key="checkIndex" :label="checkIndex"
                                            class="redioStyle">
                                            <div style="margin-right: 10px"
                                                v-if="item2 && item2.imgType && item2.imgType == 1">
                                                <div class="inImg" @click.stop="previewImg(item2.src)">
                                                    <img :src="item2.src" alt="" />
                                                </div>
                                            </div>
                                            <span :class="radio[index1].length && [radio[index1].includes(checkIndex)?'showLight':'']" v-else v-html="item2"></span>
                                        </el-checkbox>
                                    </div>
                                </el-checkbox-group>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="addStudentTest">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: {
        dialogVisibleChoice: {
            type: Boolean,
            default: false
        },
        json: {
            type: Object
        },
        userid: {
            type: String,
        },
        id: {
            type: String,
        },
        courseType: {
            type: [String, Number],
        },
        taskCount: {
            type: Number,
        },
        toolindex: {
            type: Number,
        },
        videoTime: {
            type: Number,
        },
				userChooseAnswer:{
					type:Array,
				},
				videoType:{
					type:Number,
					default:0
				}
    },
    data() {
        return {
            testJson: {},
            radio: []
        }
    },
    watch: {
        dialogVisibleChoice(newValue, oldValue) {
            this.radio = []
            this.testJson = JSON.parse(JSON.stringify(this.json));
            for (var k = 0; k < this.testJson.testJson.length; k++) {
                if (this.testJson.testJson[k].type == "2") {
                    this.radio.push([]);
                } else {
                    this.radio.push("");
                }
            }
						
        }
    },
    methods: {
        handleClose(done) {
            this.close();
            done()
        },
        close() {
            this.$emit("update:dialogVisibleChoice", false)
            this.$emit("play")
        },
        previewImg(url) {
            this.$hevueImgPreview(url);
        },
				setUserAnswer(userAnswer){
					this.radio = userAnswer;
					// if(userAnswer.find(i=>i.testJson[0].teststitle==this.testJson[0].teststitle)){
					// 	console.log("有答案了")
					// }else{
					// 	console.log("没有答案")
					// }
				},
        addStudentTest() {
            if (!this.radio.length) {
                this.$message.error("请选择选项");
                return;
            }
            for (var i = 0; i < this.testJson.testCount; i++) {
                if (
                    (this.radio[i] instanceof Array && !this.radio[i].length) ||
                    (this.radio[i] !== 0 && !this.radio[i])
                ) {
                    this.$message.error("请选择选项");
                    return;
                }
            }
						this.videoType==0?this.$emit("success",{answer:this.radio,json:this.testJson}):'';

            this.close();
            // let askList = []
            // askList.push({ testJson: this.testJson, anwer: this.radio,type:8,tool:45 });
            // let params = [
            //     {
            //         uid: this.userid,
            //         cid: this.id,
            //         stage: this.courseType,
            //         task: this.taskCount,
            //         tool: this.toolindex,
            //         content: JSON.stringify(askList),
            //         type: 14,
            //         atool: 62,
            //         vtime: this.videoTime,
            //     },
            // ];
            // this.ajax
            //     .post(this.$store.state.api + "addCourseWorks2Inter", params)
            //     .then((res) => {
            //         this.$message({
            //             message: "提交成功",
            //             type: "success",
            //         });
            //         this.close();

            //     })
            //     .catch((err) => {
            //         this.$message.error("提交失败");
            //         console.error(err);
            //     });
        }
    },
    mounted() {
        this.radio = []
        this.testJson = JSON.parse(JSON.stringify(this.json));
        for (var k = 0; k < this.testJson.testJson.length; k++) {
            if (this.testJson.testJson[k].type == "2") {
                this.radio.push([]);
            } else {
                this.radio.push("");
            }
        }
    },
}
</script>

<style scoped>
@media screen and (max-width: 1280px) {
    .dialog_diy3>>>.el-dialog {
        width: 100% !important;
    }
}

.dialog_diy>>>.el-dialog {
    margin-top: 10vh !important;
}

.dialog_diy>>>.el-dialog__header {
    background: #454545 !important;
    padding: 15px 20px;
}

.dialog_diy>>>.el-dialog__title,
.dialog_diy1>>>.el-dialog__title {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn {
    top: 19px;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
    color: #fff;
}

.dialog_diy1>>>.el-dialog__body {
    padding: 0;
}

.dialog_diy>>>.el-dialog__body,
.dialog_diy>>>.el-dialog__footer {
    background: #fafafa;
}

.a_addBox {
    margin: 10px 0;
    background: #fff;
    padding: 15px;
    max-height: 400px;
    overflow: auto;
}

.a_add_box {
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.a_add_head {
    display: flex;
    align-items: flex-start;
    /* justify-content: space-between; */
    flex-direction: column;
    /* flex-direction: row; */
    margin: 10px 0 20px 0;
    font-size: 18px;
    width: 100%;
}

.a_add_head .a_add_head_input {
    width: 300px;
}

.a_add_head .a_add_head_div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.a_add_body {
    display: flex;
    align-items: center;
}

.a_add_input {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.a_add_input>>>el-radio-group {
    margin: 10px 0;
}

.a_add_input>>>.el-radio,
.a_add_input>>>.el-checkbox {
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.redioStyle>>>.el-radio__label {
    font-size: 18px;
}

.redioStyle>>>.el-checkbox__label {
    font-size: 18px;
}

.radioBox {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.radioBox>div {
    margin: 10px 0 0 10px;
}


.radioBox>>>.el-radio__label,
.radioBox>>>.el-checkbox__label {
    display: flex;
    align-items: center;
}

.inImg {
    width: 100px;
    cursor: pointer;
}

.inImg>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.timuImgBox {
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
}

.timuImg {
    width: 100px;
    margin: 5px 0;
    cursor: pointer;
}

.timuImg>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.showLight{
	color: #0061FF !important;
}
</style>