|
|
@@ -0,0 +1,353 @@
|
|
|
+<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'">
|
|
|
+ <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 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'">
|
|
|
+ <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 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,
|
|
|
+ },
|
|
|
+ taskCount: {
|
|
|
+ type: Number,
|
|
|
+ },
|
|
|
+ toolindex: {
|
|
|
+ type: Number,
|
|
|
+ },
|
|
|
+ videoTime: {
|
|
|
+ type: Number,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ },
|
|
|
+ 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.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).replaceAll(/%/g, "%25"),
|
|
|
+ // 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;
|
|
|
+}
|
|
|
+</style>
|
