update

src/components/pages/synergyCourse/addCourse.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pb_content" style="background: #F0F2F5;">
+  <div class="pb_content" style="background: #F0F2F5;" v-loading="isLoading2">
     <div class="pb_content_body" style="position: relative; margin: 0">
       <div class="right">
         <!-- <div style="display: flex; margin-top: 20px; position: relative"> -->
@@ -2941,6 +2941,7 @@ export default {
       pageSize: 20,
       total: 0,
       page: 0,
+      isLoading2: false,
     };
   },
   directives: {
@@ -4861,6 +4862,7 @@ export default {
       if (cPan == 2) {
         return;
       }
+      this.isLoading2 = true
       for (var i = 0; i < this.unitJson.length; i++) {
         delete this.unitJson[i].isUpdate;
       }
@@ -4895,6 +4897,7 @@ export default {
       this.ajax
         .post(this.$store.state.api + "addSynergyCourse", params)
         .then((res) => {
+          this.isLoading2 = false
           console.log(this.steps);
           // if (this.steps != 1 && this.steps != 2 && this.steps != 3) {
           this.$message({

src/components/pages/test/add/components/GapFilling/gap.vue

@@ -0,0 +1,89 @@
+<template>
+    <div class="c_box">
+        <div class="mask"></div>
+        <div v-if="!cJson">暂未设置题目</div>
+        <div v-else class="choice_box">
+            <!-- <div class="title"><div>{{ `（${option[cJson.type].name}）` }}</div><div v-html="cJson.title"></div></div> -->
+            <div class="title">
+                {{ `（${option[cJson.type].name}）` + cJson.title }} <span style="color: #efa030;">（{{ cJson.answer ? '参考答案：'+cJson.answer : '暂无参考答案' }}）</span>
+                <!-- </div><div v-html="cJson.title"></div> -->
+            </div>
+            <div class="choices">
+                <textarea readonly rows="2" class="binfo_input binfo_textarea" cols
+                    placeholder=""></textarea>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        cJson: {
+            type: Object,
+        },
+    },
+    data() {
+        return {
+            option: {
+                1: { name: '问答题' },
+                // 2: { name: '多选题' }
+            }
+        }
+    },
+}
+</script>
+
+<style scoped>
+.c_box {
+    width: 100%;
+    position: relative;
+}
+.mask{
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    z-index: 2;
+}
+.choice_box {}
+
+.choice_box>.title {
+    font-weight: bold;
+    width: 100%;
+    word-break: break-all;
+}
+.choice_box>.choices {
+   margin-top:10px;
+}
+.binfo_input {
+    width: 100%;
+    margin: 0;
+    padding: 12px 14px;
+    display: block;
+    min-width: 0;
+    outline: none;
+    box-sizing: border-box;
+    background: none;
+    border: none;
+    border-radius: 4px;
+    background: #fff;
+    font-size: 16px;
+    resize: none;
+    font-family: 'Microsoft YaHei';
+    min-height: 48px;
+    /* border: 1px solid #3682fc00; */
+    border: 1.5px solid #CAD1DC;
+}
+
+.binfo_textarea {
+    border: 1.5px solid #CAD1DC;
+    font-size: 16px;
+    resize: none;
+    /* background: #f6f6f6; */
+    font-family: 'Microsoft YaHei';
+}
+
+.binfo_input:focus-visible {
+    border: 1.5px solid #3681FC !important;
+}
+</style>

src/components/pages/test/add/components/GapFilling/index.vue

@@ -0,0 +1,183 @@
+<template>
+    <div class="choice_box" @click.stop="">
+        <div class="title">设置填空题</div>
+        <div class="box">
+            <div class="set_type">
+                <span>填空题类型：</span>
+                <el-select v-model="checkJson.type" @change="changeAnswer">
+                    <el-option v-for="item in options" :key="item.type" :label="item.name" :value="item.type">
+                    </el-option>
+                </el-select>
+            </div>
+            <div class="set_title">
+                <span>填空题题目：</span>
+                <!-- <el-input v-model="checkJson.title" class="input" placeholder="请输入标题"></el-input> -->
+                <textarea v-autoHeight="68" rows="2" class="binfo_input binfo_textarea" cols v-model="checkJson.title"
+                    placeholder=""></textarea>
+                <!-- <editor-bar v-model="checkJson.title" @change="change"></editor-bar> -->
+            </div>
+            <div class="set_title">
+                <span>填空题答案：</span>
+                <textarea v-autoHeight="68" rows="2" class="binfo_input binfo_textarea" cols v-model="checkJson.answer"
+                    placeholder="请输入答案"></textarea>
+            </div>
+            <!-- <div class="set_options">
+                <div class="title">填空题答案：</div>
+                <div class="xuan_body">
+                    <el-input v-model="checkJson.answer" class="input" placeholder="请输入答案"></el-input>
+                </div>
+            </div> -->
+        </div>
+    </div>
+</template>
+
+<script>
+import EditorBar from "../../../../../tools/wangEnduit";
+export default {
+    components: {
+        EditorBar,
+    },
+    props: {
+        cJson: {
+            type: Object,
+        },
+    },
+    data() {
+        return {
+            ctype: 1,
+            options: [
+                { type: 1, name: '问答题' },
+                // { type: 2, name: '多选题' }
+            ],
+            checkJson: {}
+        }
+    },
+    directives: {
+        autoHeight: {
+            update(el, binding) {
+                const { value } = binding
+                if (value && typeof value === 'number') {
+                    el.style.height = `${value}px`
+                } else {
+                    el.style.height = 'auto'
+                }
+            },
+            componentUpdated(el) {
+                el.style.height = `${el.scrollHeight + 5}px`
+            },
+        },
+    },
+    watch: {
+        checkJson: {
+            handler(newVal) {
+                this.$emit("setJson", newVal)
+            },
+            deep: true
+        }
+    },
+    methods: {
+        depthCopy(s) {
+            return JSON.parse(JSON.stringify(s));
+        },
+        changeAnswer() {
+            this.checkJson.answer = []
+        },
+        change(val) {
+            this.checkJson.title = val
+            this.$forceUpdate();
+            console.log(val);
+        },
+
+    },
+    mounted() {
+        console.log(1);
+        // console.log(this.cJson);
+        if (!this.cJson) {
+            this.checkJson = {
+                title: "标题",
+                type: 1,
+                answer: ""
+            };
+        } else {
+            this.checkJson = this.depthCopy(this.cJson);
+        }
+
+    },
+}
+</script>
+
+<style scoped>
+.choice_box {
+    margin-top: 10px;
+    width: 100%;
+    background: #f6f6f6;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.choice_box>.box {}
+
+.set_type {
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+}
+
+.set_title {
+    margin-top: 10px;
+    display: flex;
+    align-items: flex-start;
+    /* flex-direction: column; */
+}
+
+.set_type>span,
+.set_title>span {
+    min-width: fit-content;
+    font-size: 15px;
+}
+
+.set_options {
+    margin-top: 10px;
+}
+
+.set_options>.title {
+    font-size: 15px;
+}
+
+.xuan_body {
+    margin-top: 10px;
+    font-size: 14px;
+}
+
+.binfo_input {
+    width: 100%;
+    margin: 0;
+    padding: 12px 14px;
+    display: block;
+    min-width: 0;
+    outline: none;
+    box-sizing: border-box;
+    background: none;
+    border: none;
+    border-radius: 4px;
+    background: #fff;
+    font-size: 16px;
+    resize: none;
+    font-family: 'Microsoft YaHei';
+    min-height: 48px;
+    /* border: 1px solid #3682fc00; */
+    border: 1.5px solid #CAD1DC;
+}
+
+.binfo_textarea {
+    border: 1.5px solid #CAD1DC;
+    font-size: 16px;
+    resize: none;
+    /* background: #f6f6f6; */
+    font-family: 'Microsoft YaHei';
+}
+
+.binfo_input:focus-visible {
+    border: 1.5px solid #3681FC !important;
+}
+</style>

src/components/pages/test/add/components/checkOrder.vue

@@ -48,6 +48,12 @@
                                         :cJson="cJson" @setJson="setJson">
                                     </choiceDialog>
                                 </div>
+                                <div v-if="item3.type == 3">
+                                    <gapX :cJson="item3.json"></gapX>
+                                    <gapDialog v-if="item3.type == 3 && checkC === `x${index1}-${index2}-${index3}`"
+                                        :cJson="cJson" @setJson="setJson">
+                                    </gapDialog>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -58,6 +64,11 @@
                             <choiceDialog v-if="item2.type == 1 && checkC === `x${index1}-${index2}`" :cJson="cJson"
                                 @setJson="setJson"></choiceDialog>
                         </div>
+                        <div v-else-if="item2.type == 3">
+                            <gapX :cJson="item2.json"></gapX>
+                            <gapDialog v-if="item2.type == 3 && checkC === `x${index1}-${index2}`" :cJson="cJson"
+                                @setJson="setJson"></gapDialog>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -67,6 +78,11 @@
                     <choiceDialog v-if="item1.type == 1 && checkC === `x${index1}`" :cJson="cJson" @setJson="setJson">
                     </choiceDialog>
                 </div>
+                <div v-else-if="item1.type == 3">
+                    <gapX :cJson="item1.json"></gapX>
+                    <gapDialog v-if="item1.type == 3 && checkC === `x${index1}`" :cJson="cJson" @setJson="setJson">
+                    </gapDialog>
+                </div>
             </div>
         </div>
     </div>
@@ -76,12 +92,16 @@
 import minxinVue from '../minxins/minxin';
 import choiceDialog from './choice/index.vue'
 import choiceX from './choice/choice.vue'
+import gapDialog from './GapFilling/index.vue'
+import gapX from './GapFilling/gap.vue'
 
 export default {
     mixins: [minxinVue],
     components: {
         choiceDialog,
-        choiceX
+        choiceX,
+        gapDialog,
+        gapX,
     },
     props: {
         checkJson: {
@@ -99,7 +119,7 @@ export default {
         return {
             manualJson: [],
             isdrag: "",
-            canEdit: [1],
+            canEdit: [1, 3],
             ctype: "",
             cJson: {}
         }
@@ -269,6 +289,7 @@ export default {
     font-size: 18px;
     display: flex;
     align-items: center;
+    word-break: break-all;
 }
 
 

src/components/pages/test/add/edit/check/choice.vue

@@ -6,8 +6,8 @@
             <div class="title">{{ `（${option[checkJson.type].name}）` + checkJson.title }}</div>
             <div class="choices">
                 <div class="choice" v-for="(item, index) in checkJson.array" :key="index">
-                    <div class="choice_c" v-if="checkJson.type == 2"><el-checkbox v-model="checkJson.answer2" :label="index"></el-checkbox><span>{{ item.option }}</span></div>
-                    <div class="choice_c" v-if="checkJson.type == 1"><el-radio v-model="checkJson.answer2[0]" :label="index"></el-radio><span>{{ item.option }}</span></div>
+                    <div class="choice_c" v-if="checkJson.type == 2"><el-checkbox v-model="checkJson.answer2" :label="index" :disabled="checktype == 2"></el-checkbox><span @click="check(checkJson.type,index)">{{ item.option }}</span></div>
+                    <div class="choice_c" v-if="checkJson.type == 1"><el-radio v-model="checkJson.answer2[0]" :label="index" :disabled="checktype == 2"></el-radio><span @click="check(checkJson.type,index)">{{ item.option }}</span></div>
                 </div>
             </div>
         </div>
@@ -20,6 +20,10 @@ export default {
         cJson: {
             type: Object,
         },
+        checktype: {
+            type: Number,
+            default: 1
+        }
     },
     data() {
         return {
@@ -42,6 +46,21 @@ export default {
         depthCopy(s) {
             return JSON.parse(JSON.stringify(s));
         },
+        check(type,index){
+            if(this.checktype == 2){
+                return;
+            }
+            if(type == 2){
+                if(this.checkJson.answer2.indexOf(index) == -1){
+                    this.checkJson.answer2.push(index)
+                }else{
+                    this.checkJson.answer2.splice(this.checkJson.answer2.indexOf(index),1)
+                }
+            }else if(type == 1){
+                this.checkJson.answer2[0] = index
+            }
+            this.$forceUpdate()
+        }
     },
     mounted(){
         this.checkJson = this.cJson ? this.depthCopy(this.cJson) : undefined
@@ -84,6 +103,7 @@ export default {
 }
 .choice_box>.choices >.choice > .choice_c > span{
     /* margin-left: 10px; */
+    cursor: pointer;
 }
 .choice_box>.choices >.choice > .choice_c > .el-checkbox{
     margin-top: 4px;
@@ -107,4 +127,22 @@ export default {
 .choice_c .right::after{
     content: '（正确答案）';
 }
+
+.choice_box>.choices >.choice >>> .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{
+    border-color: #fff !important;
+}
+
+.choice_box>.choices >.choice >>> .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{
+    background-color: #409EFF !important;
+    border-color: #409EFF !important;
+}
+
+.choice_box>.choices >.choice >>> .el-radio__input.is-disabled.is-checked .el-radio__inner{
+    background-color: #409EFF !important;
+    border-color: #409EFF !important;
+}
+
+.choice_box>.choices >.choice >>> .el-radio__input.is-disabled.is-checked .el-radio__inner::after{
+    background-color: #fff !important;
+}
 </style>

src/components/pages/test/add/edit/check/gap.vue

@@ -0,0 +1,135 @@
+<template>
+    <div class="c_box">
+        <!-- <div class="mask"></div> -->
+        <div v-if="!checkJson">暂未设置题目</div>
+        <div v-else class="choice_box">
+            <!-- <div class="title"><div>{{ `（${option[checkJson.type].name}）` }}</div><div v-html="checkJson.title"></div></div> -->
+            <div class="title">
+                {{ `（${option[checkJson.type].name}）` + checkJson.title }}
+                <!-- <span>（{{ checkJson.answer ? '参考答案：'+checkJson.answer : '暂无参考答案' }}）</span> -->
+                <!-- </div><div v-html="checkJson.title"></div> -->
+            </div>
+            <div class="choices">
+                <textarea  :readonly="checktype == 2" rows="2" v-autoHeight="68" class="binfo_input binfo_textarea" cols v-model="checkJson.answer2"
+                    placeholder=""></textarea>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        cJson: {
+            type: Object,
+        },
+        checktype: {
+            type: Number,
+            default: 1
+        }
+    },
+    data() {
+        return {
+            option: {
+                1: { name: '问答题' },
+            },
+            checkJson: undefined
+        }
+    },
+    watch: {
+        checkJson: {
+            handler(newValue) {
+                this.$emit('update:cJson', newValue)
+            },
+            deep: true
+        },
+    },
+    directives: {
+        autoHeight: {
+            update(el, binding) {
+                const { value } = binding
+                if (value && typeof value === 'number') {
+                    el.style.height = `${value}px`
+                } else {
+                    el.style.height = 'auto'
+                }
+            },
+            componentUpdated(el) {
+                el.style.height = `${el.scrollHeight + 5}px`
+            },
+        },
+    },
+    methods: {
+        depthCopy(s) {
+            return JSON.parse(JSON.stringify(s));
+        },
+    },
+    mounted() {
+        this.checkJson = this.cJson ? this.depthCopy(this.cJson) : undefined
+        setTimeout(() => {
+            this.checkJson.answer2 += "*0*%*";
+            setTimeout(() => {
+                this.checkJson.answer2 = this.checkJson.answer2.replaceAll("*0*%*", "");
+            }, 0);
+        }, 100);
+    }
+}
+</script>
+
+<style scoped>
+.c_box {
+    width: 100%;
+    position: relative;
+}
+
+.mask {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    z-index: 2;
+}
+
+.choice_box {}
+
+.choice_box>.title {
+    font-weight: bold;
+    width: 100%;
+    word-break: break-all;
+}
+
+.choice_box>.choices {
+    margin-top: 10px;
+}
+
+.binfo_input {
+    width: 100%;
+    margin: 0;
+    padding: 12px 14px;
+    display: block;
+    min-width: 0;
+    outline: none;
+    box-sizing: border-box;
+    background: none;
+    border: none;
+    border-radius: 4px;
+    background: #fff;
+    font-size: 16px;
+    resize: none;
+    font-family: 'Microsoft YaHei';
+    min-height: 48px;
+    /* border: 1px solid #3682fc00; */
+    border: 1.5px solid #CAD1DC;
+}
+
+.binfo_textarea {
+    border: 1.5px solid #CAD1DC;
+    font-size: 16px;
+    resize: none;
+    /* background: #f6f6f6; */
+    font-family: 'Microsoft YaHei';
+}
+
+.binfo_input:focus-visible {
+    border: 1.5px solid #3681FC !important;
+}
+</style>

src/components/pages/test/add/edit/check/index.vue

@@ -5,20 +5,35 @@
       <div v-if="type == 3">
         <div v-for="(item, index) in checkArray[page].array" :key="index" class="check_box">
           <div class="title">{{ selectType(item, index) }}</div>
-          <div v-if="item.ttype == 1" class="answerBox"><choiceV :cJson.sync="item.json"></choiceV></div>
+          <div v-if="item.ttype == 1" class="answerBox">
+            <choiceV :cJson.sync="item.json" v-if="item.type == 1"></choiceV>
+            <gapV :cJson.sync="item.json" v-if="item.type == 3"></gapV>
+            <span v-else>暂未设置题目</span>
+          </div>
           <div v-for="(item2, index2) in item.array" :key="`${index}-${index2}`" class="check_box_xia">
             <div class="title">{{ selectType(item2, index2) }}</div>
-            <div v-if="item2.ttype == 1" class="answerBox"><choiceV :cJson.sync="item2.json"></choiceV></div>
+            <div v-if="item2.ttype == 1" class="answerBox">
+              <choiceV :cJson.sync="item2.json" v-if="item2.type == 1"></choiceV>
+              <gapV :cJson.sync="item2.json" v-if="item2.type == 3"></gapV>
+              <span v-else>暂未设置题目</span></div>
           </div>
         </div>
       </div>
       <div v-else>
         <div v-for="(item, index) in checkArray" :key="index" class="check_box">
           <div class="title">{{ selectType(item, index) }}</div>
-          <div v-if="item.ttype == 1" class="answerBox"><choiceV :cJson.sync="item.json"></choiceV></div>
+          <div v-if="item.ttype == 1" class="answerBox">
+            <choiceV :cJson.sync="item.json" v-if="item.type == 1"></choiceV>
+            <gapV :cJson.sync="item.json" v-if="item.type == 3"></gapV>
+            <span v-else>暂未设置题目</span>
+          </div>
           <div v-for="(item2, index2) in item.array" :key="`${index}-${index2}`" class="check_box_xia">
             <div class="title">{{ selectType(item2, index2) }}</div>
-            <div v-if="item2.ttype == 1" class="answerBox"><choiceV :cJson.sync="item2.json"></choiceV></div>
+            <div v-if="item2.ttype == 1" class="answerBox">
+              <choiceV :cJson.sync="item2.json" v-if="item2.type == 1"></choiceV>
+              <gapV :cJson.sync="item2.json" v-if="item2.type == 3"></gapV>
+              <span v-else>暂未设置题目</span>
+            </div>
           </div>
         </div>
       </div>
@@ -35,6 +50,7 @@
 
 <script>
 import choiceV from './choice.vue';
+import gapV from './gap.vue';
 export default {
   props: {
     cJson: {
@@ -45,7 +61,8 @@ export default {
     }
   },
   components: {
-    choiceV
+    choiceV,
+    gapV
   },
   data() {
     return {

src/components/pages/test/add/minxins/minxin.js

@@ -6,10 +6,10 @@ const minxin = {
           value: 1,
           label: "选择题"
         },
-        {
-          value: 2,
-          label: "问答题"
-        },
+        // {
+        //   value: 2,
+        //   label: "问答题"
+        // },
         {
           value: 3,
           label: "填空题"

src/components/pages/testStudent/view/check.vue

@@ -28,7 +28,7 @@
             <div class="op_btn">
             </div>
           </div>
-          <topicVue :cJson="cJson" :title="title" :checktype='2'></topicVue>
+          <topicVue :cJson="cJson" :title="title" :checktype='2' :see="see"></topicVue>
         </div>
       </div>
     </div>
@@ -86,7 +86,7 @@ export default {
           // this.cJson = JSON.parse(res.data[0][0].chapters);
           this.$forceUpdate();
           this.title = res.data[0][0].title;
-
+          this.see = res.data[0][0].open == 1 ? true : false;
           this.testType = [];
           for (var i = 0; i < res.data[1].length; i++) {
             this.testType.push(res.data[1][i].typeid);

src/components/pages/testStudent/view/component/choice.vue

@@ -6,8 +6,14 @@
             <div class="title">{{ `（${option[checkJson.type].name}）` + checkJson.title }}</div>
             <div class="choices">
                 <div class="choice" v-for="(item, index) in checkJson.array" :key="index">
-                    <div class="choice_c" v-if="checkJson.type == 2"><el-checkbox v-model="checkJson.answer2" :label="index" :disabled="checktype == 2"></el-checkbox><span @click="check(checkJson.type,index)">{{ item.option }}</span></div>
-                    <div class="choice_c" v-if="checkJson.type == 1"><el-radio v-model="checkJson.answer2[0]" :label="index" :disabled="checktype == 2"></el-radio><span @click="check(checkJson.type,index)">{{ item.option }}</span></div>
+                    <div class="choice_c" v-if="checkJson.type == 2"><el-checkbox v-model="checkJson.answer2" :label="index"
+                            :disabled="checktype == 2"></el-checkbox><span
+                            :class="{ right: see && cJson.answer.indexOf(index) != -1 }"
+                            @click="check(checkJson.type, index)">{{ item.option }}</span></div>
+                    <div class="choice_c" v-if="checkJson.type == 1"><el-radio v-model="checkJson.answer2[0]" :label="index"
+                            :disabled="checktype == 2"></el-radio><span
+                            :class="{ right: see && cJson.answer.indexOf(index) != -1 }"
+                            @click="check(checkJson.type, index)">{{ item.option }}</span></div>
                 </div>
             </div>
         </div>
@@ -23,6 +29,10 @@ export default {
         checktype: {
             type: Number,
             default: 1
+        },
+        see: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
@@ -31,12 +41,12 @@ export default {
                 1: { name: '单选题' },
                 2: { name: '多选题' }
             },
-            checkJson:undefined
+            checkJson: undefined
         }
     },
     watch: {
         checkJson: {
-            handler(newValue){
+            handler(newValue) {
                 this.$emit('update:cJson', newValue)
             },
             deep: true
@@ -46,23 +56,23 @@ export default {
         depthCopy(s) {
             return JSON.parse(JSON.stringify(s));
         },
-        check(type,index){
-            if(this.checktype == 2){
+        check(type, index) {
+            if (this.checktype == 2) {
                 return;
             }
-            if(type == 2){
-                if(this.checkJson.answer2.indexOf(index) == -1){
+            if (type == 2) {
+                if (this.checkJson.answer2.indexOf(index) == -1) {
                     this.checkJson.answer2.push(index)
-                }else{
-                    this.checkJson.answer2.splice(this.checkJson.answer2.indexOf(index),1)
+                } else {
+                    this.checkJson.answer2.splice(this.checkJson.answer2.indexOf(index), 1)
                 }
-            }else if(type == 1){
+            } else if (type == 1) {
                 this.checkJson.answer2[0] = index
             }
             this.$forceUpdate()
         }
     },
-    mounted(){
+    mounted() {
         this.checkJson = this.cJson ? this.depthCopy(this.cJson) : undefined
     }
 }
@@ -73,46 +83,54 @@ export default {
     width: 100%;
     position: relative;
 }
-.mask{
+
+.mask {
     position: absolute;
     height: 100%;
     width: 100%;
     z-index: 2;
 }
-.choice_box {
-    
-}
+
+.choice_box {}
 
 .choice_box>.title {
     font-weight: bold;
     width: 100%;
     word-break: break-all;
 }
+
 .choice_box>.choices {
-   margin-top:10px;
-   padding: 0 10px;
+    margin-top: 10px;
+    padding: 0 10px;
 }
-.choice_box>.choices >.choice{
+
+.choice_box>.choices>.choice {
     word-break: break-all;
 }
-.choice_box>.choices >.choice + .choice{
+
+.choice_box>.choices>.choice+.choice {
     margin-top: 5px;
 }
-.choice_box>.choices >.choice > .choice_c{
+
+.choice_box>.choices>.choice>.choice_c {
     display: flex;
 }
-.choice_box>.choices >.choice > .choice_c > span{
+
+.choice_box>.choices>.choice>.choice_c>span {
     /* margin-left: 10px; */
     cursor: pointer;
 }
-.choice_box>.choices >.choice > .choice_c > .el-checkbox{
+
+.choice_box>.choices>.choice>.choice_c>.el-checkbox {
     margin-top: 4px;
     margin-right: 10px;
 }
-.choice_box>.choices >.choice > .choice_c > .el-radio{
+
+.choice_box>.choices>.choice>.choice_c>.el-radio {
     margin-top: 4px;
     margin-right: 10px;
 }
+
 .choice_c>>>.el-checkbox__label {
     display: none;
 }
@@ -121,28 +139,28 @@ export default {
     display: none;
 }
 
-.choice_c .right{
+.choice_c .right {
     color: #efa030;
 }
-.choice_c .right::after{
+
+.choice_c .right::after {
     content: '（正确答案）';
 }
 
-.choice_box>.choices >.choice >>> .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{
+.choice_box>.choices>.choice>>>.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
     border-color: #fff !important;
 }
 
-.choice_box>.choices >.choice >>> .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{
+.choice_box>.choices>.choice>>>.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
     background-color: #409EFF !important;
     border-color: #409EFF !important;
 }
 
-.choice_box>.choices >.choice >>> .el-radio__input.is-disabled.is-checked .el-radio__inner{
+.choice_box>.choices>.choice>>>.el-radio__input.is-disabled.is-checked .el-radio__inner {
     background-color: #409EFF !important;
     border-color: #409EFF !important;
 }
 
-.choice_box>.choices >.choice >>> .el-radio__input.is-disabled.is-checked .el-radio__inner::after{
+.choice_box>.choices>.choice>>>.el-radio__input.is-disabled.is-checked .el-radio__inner::after {
     background-color: #fff !important;
-}
-</style>
+}</style>

src/components/pages/testStudent/view/component/gap.vue

@@ -0,0 +1,138 @@
+<template>
+    <div class="c_box">
+        <!-- <div class="mask"></div> -->
+        <div v-if="!checkJson">暂未设置题目</div>
+        <div v-else class="choice_box">
+            <!-- <div class="title"><div>{{ `（${option[checkJson.type].name}）` }}</div><div v-html="checkJson.title"></div></div> -->
+            <div class="title">
+                {{ `（${option[checkJson.type].name}）` + checkJson.title }}<span v-if="see" style="color: #efa030;">（{{ checkJson.answer ? '参考答案：'+checkJson.answer : '暂无参考答案' }}）</span>
+                <!-- </div><div v-html="checkJson.title"></div> -->
+            </div>
+            <div class="choices">
+                <textarea  :readonly="checktype == 2" rows="2" v-autoHeight="68" class="binfo_input binfo_textarea" cols v-model="checkJson.answer2"
+                    placeholder=""></textarea>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        cJson: {
+            type: Object,
+        },
+        checktype: {
+            type: Number,
+            default: 1
+        },
+        see:{
+            type:Boolean,
+            default:false
+        }
+    },
+    data() {
+        return {
+            option: {
+                1: { name: '问答题' },
+            },
+            checkJson: undefined
+        }
+    },
+    watch: {
+        checkJson: {
+            handler(newValue) {
+                this.$emit('update:cJson', newValue)
+            },
+            deep: true
+        },
+    },
+    directives: {
+        autoHeight: {
+            update(el, binding) {
+                const { value } = binding
+                if (value && typeof value === 'number') {
+                    el.style.height = `${value}px`
+                } else {
+                    el.style.height = 'auto'
+                }
+            },
+            componentUpdated(el) {
+                el.style.height = `${el.scrollHeight + 5}px`
+            },
+        },
+    },
+    methods: {
+        depthCopy(s) {
+            return JSON.parse(JSON.stringify(s));
+        },
+    },
+    mounted() {
+        this.checkJson = this.cJson ? this.depthCopy(this.cJson) : undefined
+        setTimeout(() => {
+            this.checkJson.answer2 += "*0*%*";
+            setTimeout(() => {
+                this.checkJson.answer2 = this.checkJson.answer2.replaceAll("*0*%*", "");
+            }, 0);
+        }, 100);
+    }
+}
+</script>
+
+<style scoped>
+.c_box {
+    width: 100%;
+    position: relative;
+}
+
+.mask {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    z-index: 2;
+}
+
+.choice_box {}
+
+.choice_box>.title {
+    font-weight: bold;
+    width: 100%;
+    word-break: break-all;
+}
+
+.choice_box>.choices {
+    margin-top: 10px;
+}
+
+.binfo_input {
+    width: 100%;
+    margin: 0;
+    padding: 12px 14px;
+    display: block;
+    min-width: 0;
+    outline: none;
+    box-sizing: border-box;
+    background: none;
+    border: none;
+    border-radius: 4px;
+    background: #fff;
+    font-size: 16px;
+    resize: none;
+    font-family: 'Microsoft YaHei';
+    min-height: 48px;
+    /* border: 1px solid #3682fc00; */
+    border: 1.5px solid #CAD1DC;
+}
+
+.binfo_textarea {
+    border: 1.5px solid #CAD1DC;
+    font-size: 16px;
+    resize: none;
+    /* background: #f6f6f6; */
+    font-family: 'Microsoft YaHei';
+}
+
+.binfo_input:focus-visible {
+    border: 1.5px solid #3681FC !important;
+}
+</style>

src/components/pages/testStudent/view/component/topic.vue

@@ -3,23 +3,19 @@
     <div class="c_box_title">{{ title }}</div>
     <div class="c_body">
       <div v-if="type == 3">
-        <div
-          v-for="(item, index) in checkArray[page].array"
-          :key="index"
-          class="check_box"
-        >
+        <div v-for="(item, index) in checkArray[page].array" :key="index" class="check_box">
           <div class="title">{{ selectType(item, index) }}</div>
           <div v-if="item.ttype == 1" class="answerBox">
-            <choiceV :cJson.sync="item.json" :checktype="checktype"></choiceV>
+            <choiceV :cJson.sync="item.json" :checktype="checktype" v-if="item.type == 1" :see="see"></choiceV>
+            <gapV :cJson.sync="item.json" :checktype="checktype" v-else-if="item.type == 3" :see="see"></gapV>
+            <span v-else>暂未设置题目</span>
           </div>
-          <div
-            v-for="(item2, index2) in item.array"
-            :key="`${index}-${index2}`"
-            class="check_box_xia"
-          >
+          <div v-for="(item2, index2) in item.array" :key="`${index}-${index2}`" class="check_box_xia">
             <div class="title">{{ selectType(item2, index2) }}</div>
             <div v-if="item2.ttype == 1" class="answerBox">
-              <choiceV :cJson.sync="item2.json" :checktype="checktype"></choiceV>
+              <choiceV :cJson.sync="item2.json" :checktype="checktype" v-if="item2.type == 1" :see="see"></choiceV>
+              <gapV :cJson.sync="item2.json" :checktype="checktype" v-else-if="item2.type == 3" :see="see"></gapV>
+              <span v-else>暂未设置题目</span>
             </div>
           </div>
         </div>
@@ -28,40 +24,27 @@
         <div v-for="(item, index) in checkArray" :key="index" class="check_box">
           <div class="title">{{ selectType(item, index) }}</div>
           <div v-if="item.ttype == 1" class="answerBox">
-            <choiceV :cJson.sync="item.json" :checktype="checktype"></choiceV>
+            <choiceV :cJson.sync="item.json" :checktype="checktype" v-if="item.type == 1" :see="see"></choiceV>
+            <gapV :cJson.sync="item.json" :checktype="checktype" v-else-if="item.type == 3" :see="see"></gapV>
+            <span v-else>暂未设置题目</span>
           </div>
-          <div
-            v-for="(item2, index2) in item.array"
-            :key="`${index}-${index2}`"
-            class="check_box_xia"
-          >
+          <div v-for="(item2, index2) in item.array" :key="`${index}-${index2}`" class="check_box_xia">
             <div class="title">{{ selectType(item2, index2) }}</div>
             <div v-if="item2.ttype == 1" class="answerBox">
-              <choiceV :cJson.sync="item2.json" :checktype="checktype"></choiceV>
+              <choiceV :cJson.sync="item2.json" :checktype="checktype" v-if="item2.type == 1" :see="see"></choiceV>
+              <gapV :cJson.sync="item2.json" :checktype="checktype" v-else-if="item2.type == 3" :see="see"></gapV>
+              <span v-else>暂未设置题目</span>
             </div>
           </div>
         </div>
       </div>
 
       <div v-if="checkArray.length > 1 && type == 3" class="page">
-        <el-button
-          type="primary"
-          size="mini"
-          :disabled="page == 0"
-          @click="page--"
-          >上一页</el-button
-        >
+        <el-button type="primary" size="mini" :disabled="page == 0" @click="page--">上一页</el-button>
         <div class="p_page">
-          <span>{{ page + 1 }}</span
-          ><span>/</span><span>{{ checkArray.length }}</span>
+          <span>{{ page + 1 }}</span><span>/</span><span>{{ checkArray.length }}</span>
         </div>
-        <el-button
-          type="primary"
-          size="mini"
-          :disabled="page == checkArray.length - 1"
-          @click="page++"
-          >下一页</el-button
-        >
+        <el-button type="primary" size="mini" :disabled="page == checkArray.length - 1" @click="page++">下一页</el-button>
       </div>
     </div>
   </div>
@@ -69,6 +52,7 @@
 
 <script>
 import choiceV from "./choice.vue";
+import gapV from './gap.vue';
 export default {
   props: {
     cJson: {
@@ -81,9 +65,14 @@ export default {
       type: Number,
       default: 1,
     },
+    see: {
+      type: Boolean,
+      default: false
+    }
   },
   components: {
     choiceV,
+    gapV
   },
   data() {
     return {
@@ -190,34 +179,40 @@ export default {
   margin: 0 auto;
 }
 
-.check_box {
-}
-.check_box + .check_box {
+.check_box {}
+
+.check_box+.check_box {
   margin-top: 10px;
 }
-.check_box > .title {
+
+.check_box>.title {
   font-size: 20px;
   word-break: break-all;
   font-weight: bold;
 }
-.check_box > .answerBox {
+
+.check_box>.answerBox {
   margin-top: 10px;
 }
-.check_box > .noanswerBox {
+
+.check_box>.noanswerBox {
   margin-top: 10px;
 }
+
 .check_box_xia {
   margin-top: 10px;
 }
 
-.check_box_xia > .title {
+.check_box_xia>.title {
   font-size: 18px;
   font-weight: bold;
 }
-.check_box_xia > .answerBox {
+
+.check_box_xia>.answerBox {
   margin-top: 10px;
 }
-.check_box_xia > .noanswerBox {
+
+.check_box_xia>.noanswerBox {
   margin-top: 10px;
 }