新建表单修改

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

@@ -1,85 +1,187 @@
 <template>
-    <div class="c_box">
-        <div class="mask"></div>
-        <!-- <div v-if="!cJson">暂未设置题目</div> -->
-        <div class="set_box" 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">
-                <div style="display: flex;">
-                    <span style="min-width:fit-content">{{  `（${option[cJson.type].name}）` }}</span><span>{{cJson.title }}</span>
-                    <span style="min-width: fit-content;color: #efa030;">{{ cJson.score ? '（分值：'+cJson.score+'分）' : '' }}</span>
-                </div>
-                 <span style="color: #efa030;display: flex;margin-top: 5px;line-height: 18px;">
-                    <span style="min-width: fit-content;" v-if="!cJson.answer">暂无参考答案</span>
-                    <span style="min-width: fit-content;display: flex;" v-else>
-                        <span style="min-width: fit-content;">参考答案：</span> 
-                        <span>{{ cJson.answer }}</span>
-                    </span> 
-                </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 class="c_box">
+    <div class="mask" v-show="!isOpen"></div>
+    <!-- <div v-if="!cJson">暂未设置题目</div> -->
+    <div class="set_box" 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">
+        <div style="display: flex;">
+          <span
+					 @click.stop="updateTitle()"
+            style="min-width:fit-content"
+            >{{ `（${option[cJson.type].name}）` }}</span
+          >
+          <span
+            v-if="!updateList.title"
+            @click.stop="updateTitle()"
+            >{{ cJson.title }}</span
+          >
+          <input
+            v-if="updateList.title"
+            ref="titleRef"
+            class="editInput"
+            v-model="checkJson.title"
+            @blur="save"
+            @keyup.enter="save"
+            placeholder="请填写标题"
+          />
+          <span style="min-width: fit-content;color: #efa030;">{{
+            cJson.score ? "（分值：" + cJson.score + "分）" : ""
+          }}</span>
         </div>
+        <span
+          style="color: #efa030;display: flex;margin-top: 5px;line-height: 18px;"
+        >
+          <span style="min-width: fit-content;" @click.stop="updateAnswer()" v-if="!cJson.answer && !updateList.answer"
+            >暂无参考答案</span
+          >
+          <span style="min-width: fit-content;display: flex;" v-else>
+            <span style="min-width: fit-content;" @click.stop="updateAnswer()">参考答案：</span>
+            <span v-if="!updateList.answer" @click.stop="updateAnswer()">{{ cJson.answer }}</span>
+          </span>
+
+					<input
+            v-if="updateList.answer"
+            ref="answerRef"
+            class="editInput answerInput"
+            v-model="checkJson.answer"
+            @blur="save"
+            @keyup.enter="save"
+            placeholder="请填写参考答案"
+          />
+        </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,
-        },
+  props: {
+    cJson: {
+      type: Object
     },
-    data() {
-        return {
-            option: {
-                1: { name: '问答题' },
-                // 2: { name: '多选题' }
-            }
-        }
+    isOpen: {
+      type: Boolean,
+      default: false
     },
-}
+		index:{
+			type:String,
+			default:""
+		}
+  },
+  data() {
+    return {
+      option: {
+        1: { name: "问答题" }
+        // 2: { name: '多选题' }
+      },
+      checkJson: {},
+      updateList: {
+        title: false,
+        brief: false,
+        answer: false
+      }
+    };
+  },
+  watch: {
+    checkJson: {
+      handler(newVal) {
+				// console.log("测试测试保存",newVal)
+        this.$emit("setJson", newVal,this.index);
+        console.log("gapW", this.cJson);
+      },
+      deep: true
+    },
+  },
+  methods: {
+    depthCopy(s) {
+      return JSON.parse(JSON.stringify(s));
+    },
+    numberPan() {
+      if (/[^\d]/.test(this.checkJson.score) || this.checkJson.score < 0) {
+        this.$message.error("请输入大于0的数字");
+        this.checkJson.score = "";
+      }
+    },
+    updateTitle() {
+      this.updateList.title = true;
+      this.$nextTick(() => {
+        // 聚焦到输入框
+        this.$refs["titleRef"].focus();
+      });
+    },
+		updateAnswer(){
+			this.updateList.answer = true;
+			this.$nextTick(() => {
+        // 聚焦到输入框
+        this.$refs["answerRef"].focus();
+      });
+		},
+    save() {
+      for (let key in this.updateList) {
+        this.updateList[key] = false;
+      }
+    }
+  },
+  mounted() {
+    if (!this.cJson || Object.keys(this.cJson).length == 0) {
+      this.checkJson = {
+        title: "标题",
+        type: 1,
+        answer: ""
+      };
+    } else {
+      this.checkJson = this.depthCopy(this.cJson);
+    }
+  }
+};
 </script>
 
 <style scoped>
-@import '../../global_styles.css';
-
-
+@import "../../global_styles.css";
 
 .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;
+  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';
+  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;
+  border: 1.5px solid #3681fc !important;
 }
-
-</style>
+</style>

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

@@ -76,46 +76,46 @@
                             <div v-if="item3.ttype == 1 && canEdit.indexOf(item3.type) !== -1 && etype == 'edit'"
                                 class="edit_box">
                                 <div v-if="item3.type == 1">
-                                    <choiceX :cJson="item3.json"></choiceX>
-                                    <choiceDialog v-if="item3.type == 1 && checkC === `x${index1}-${index2}-${index3}`"
+                                    <choiceX :cJson="item3.json" @setJson="setJson" :index="`x${index1}-${index2}-${index3}`" :isOpen="item3.type == 1 && checkC === `x${index1}-${index2}-${index3}`"></choiceX>
+                                    <!-- <choiceDialog v-if="item3.type == 1 && checkC === `x${index1}-${index2}-${index3}`"
                                         :cJson="cJson" @setJson="setJson">
-                                    </choiceDialog>
+                                    </choiceDialog> -->
                                 </div>
                                 <div v-if="item3.type == 3">
-                                    <gapX :cJson="item3.json"></gapX>
-                                    <gapDialog v-if="item3.type == 3 && checkC === `x${index1}-${index2}-${index3}`"
+                                    <gapX :cJson="item3.json" @setJson="setJson" :index="`x${index1}-${index2}-${index3}`" :isOpen="item3.type == 3 && checkC === `x${index1}-${index2}-${index3}`"></gapX>
+                                    <!-- <gapDialog v-if="item3.type == 3 && checkC === `x${index1}-${index2}-${index3}`"
                                         :cJson="cJson" @setJson="setJson">
-                                    </gapDialog>
+                                    </gapDialog> -->
                                 </div>
                                 <div v-if="item3.type == 5">
-                                    <fileX :cJson="item3.json"></fileX>
-                                    <fileDialog v-if="item3.type == 5 && checkC === `x${index1}-${index2}-${index3}`"
+                                    <fileX :cJson="item3.json" @setJson="setJson" :index="`x${index1}-${index2}-${index3}`" :isOpen="item3.type == 5 && checkC === `x${index1}-${index2}-${index3}`"></fileX>
+                                    <!-- <fileDialog v-if="item3.type == 5 && checkC === `x${index1}-${index2}-${index3}`"
                                         :cJson="cJson" @setJson="setJson">
-                                    </fileDialog>
+                                    </fileDialog> -->
                                 </div>
                                 <div v-if="item3.type == 6">
-                                    <courseX :cJson="item3.json"></courseX>
-                                    <courseDialog v-if="item3.type == 6 && checkC === `x${index1}-${index2}-${index3}`"
+                                    <courseX :cJson="item3.json" @setJson="setJson" :index="`x${index1}-${index2}-${index3}`" :isOpen="item3.type == 6 && checkC === `x${index1}-${index2}-${index3}`"></courseX>
+                                    <!-- <courseDialog v-if="item3.type == 6 && checkC === `x${index1}-${index2}-${index3}`"
                                         :cJson="cJson" @setJson="setJson">
-                                    </courseDialog>
+                                    </courseDialog> -->
                                 </div>
                                 <div v-if="item3.type == 7">
-                                    <evaX :cJson="item3.json"></evaX>
-                                    <evaDialog v-if="item3.type == 7 && checkC === `x${index1}-${index2}-${index3}`"
+                                    <evaX :cJson="item3.json" @setJson="setJson" :index="`x${index1}-${index2}-${index3}`" :isOpen="item3.type == 7 && checkC === `x${index1}-${index2}-${index3}`"></evaX>
+                                    <!-- <evaDialog v-if="item3.type == 7 && checkC === `x${index1}-${index2}-${index3}`"
                                         :cJson="cJson" @setJson="setJson">
-                                    </evaDialog>
+                                    </evaDialog> -->
                                 </div>
                                 <div v-if="item3.type == 8">
-                                    <timeX :cJson="item3.json"></timeX>
-                                    <timeDialog v-if="item3.type == 8 && checkC === `x${index1}-${index2}-${index3}`"
+                                    <timeX :cJson="item3.json" @setJson="setJson" :index="`x${index1}-${index2}-${index3}`" :isOpen="item3.type == 8 && checkC === `x${index1}-${index2}-${index3}`"></timeX>
+                                    <!-- <timeDialog v-if="item3.type == 8 && checkC === `x${index1}-${index2}-${index3}`"
                                         :cJson="cJson" @setJson="setJson">
-                                    </timeDialog>
+                                    </timeDialog> -->
                                 </div>
                                 <div v-if="item3.type == 11">
-                                    <courseX2 :cJson="item3.json"></courseX2>
-                                    <courseDialog2 v-if="item3.type == 11 && checkC === `x${index1}-${index2}-${index3}`"
+                                    <courseX2 :cJson="item3.json" @setJson="setJson" :index="`x${index1}-${index2}-${index3}`" :isOpen="item3.type == 11 && checkC === `x${index1}-${index2}-${index3}`"></courseX2>
+                                    <!-- <courseDialog2 v-if="item3.type == 11 && checkC === `x${index1}-${index2}-${index3}`"
                                         :cJson="cJson" @setJson="setJson">
-                                    </courseDialog2>
+                                    </courseDialog2>-->
                                 </div>
                             </div>
                         </div>
@@ -123,78 +123,78 @@
                     <div v-else-if="item2.ttype == 1 && canEdit.indexOf(item2.type) !== -1 && etype == 'edit'"
                         class="edit_box">
                         <div v-if="item2.type == 1">
-                            <choiceX :cJson="item2.json"></choiceX>
-                            <choiceDialog v-if="item2.type == 1 && checkC === `x${index1}-${index2}`" :cJson="cJson"
-                                @setJson="setJson"></choiceDialog>
+                            <choiceX :cJson="item2.json" @setJson="setJson" :index="`x${index1}-${index2}`" :isOpen="item2.type == 1 && checkC === `x${index1}-${index2}`"></choiceX>
+                            <!-- <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>
+                            <gapX :cJson="item2.json" @setJson="setJson" :index="`x${index1}-${index2}`" :isOpen="item2.type == 3 && checkC === `x${index1}-${index2}`"></gapX>
+                            <!-- <gapDialog v-if="item2.type == 3 && checkC === `x${index1}-${index2}`" :cJson="cJson"
+                                @setJson="setJson"></gapDialog> -->
                         </div>
                         <div v-else-if="item2.type == 5">
-                            <fileX :cJson="item2.json"></fileX>
-                            <fileDialog v-if="item2.type == 5 && checkC === `x${index1}-${index2}`" :cJson="cJson"
-                                @setJson="setJson"></fileDialog>
+                            <fileX :cJson="item2.json" @setJson="setJson" :index="`x${index1}-${index2}`" :isOpen="item2.type == 5 && checkC === `x${index1}-${index2}`"></fileX>
+                            <!-- <fileDialog v-if="item2.type == 5 && checkC === `x${index1}-${index2}`" :cJson="cJson"
+                                @setJson="setJson"></fileDialog> -->
                         </div>
                         <div v-else-if="item2.type == 6">
-                            <courseX :cJson="item2.json"></courseX>
-                            <courseDialog v-if="item2.type == 6 && checkC === `x${index1}-${index2}`" :cJson="cJson"
-                                @setJson="setJson"></courseDialog>
+                            <courseX :cJson="item2.json" @setJson="setJson" :index="`x${index1}-${index2}`" :isOpen="item2.type == 6 && checkC === `x${index1}-${index2}`"></courseX>
+                            <!-- <courseDialog v-if="item2.type == 6 && checkC === `x${index1}-${index2}`" :cJson="cJson"
+                                @setJson="setJson"></courseDialog> -->
                         </div>
                         <div v-else-if="item2.type == 7">
-                            <evaX :cJson="item2.json"></evaX>
-                            <evaDialog v-if="item2.type == 7 && checkC === `x${index1}-${index2}`" :cJson="cJson"
-                                @setJson="setJson"></evaDialog>
+                            <evaX :cJson="item2.json" @setJson="setJson" :index="`x${index1}-${index2}`" :isOpen="item2.type == 7 && checkC === `x${index1}-${index2}`"></evaX>
+                            <!-- <evaDialog v-if="item2.type == 7 && checkC === `x${index1}-${index2}`" :cJson="cJson"
+                                @setJson="setJson"></evaDialog> -->
                         </div>
                         <div v-else-if="item2.type == 8">
-                            <timeX :cJson="item2.json"></timeX>
-                            <timeDialog v-if="item2.type == 8 && checkC === `x${index1}-${index2}`" :cJson="cJson"
-                                @setJson="setJson"></timeDialog>
+                            <timeX :cJson="item2.json" @setJson="setJson" :index="`x${index1}-${index2}`" :isOpen="item2.type == 8 && checkC === `x${index1}-${index2}`"></timeX>
+                            <!-- <timeDialog v-if="item2.type == 8 && checkC === `x${index1}-${index2}`" :cJson="cJson"
+                                @setJson="setJson"></timeDialog> -->
                         </div>
                         <div v-else-if="item2.type == 11">
-                            <courseX2 :cJson="item2.json"></courseX2>
-                            <courseDialog2 v-if="item2.type == 11 && checkC === `x${index1}-${index2}`" :cJson="cJson"
-                                @setJson="setJson"></courseDialog2>
+                            <courseX2 :cJson="item2.json" @setJson="setJson" :index="`x${index1}-${index2}`" :isOpen="item2.type == 11 && checkC === `x${index1}-${index2}`"></courseX2>
+                            <!-- <courseDialog2 v-if="item2.type == 11 && checkC === `x${index1}-${index2}`" :cJson="cJson"
+                                @setJson="setJson"></courseDialog2> -->
                         </div>
                     </div>
                 </div>
             </div>
             <div v-else-if="item1.ttype == 1 && canEdit.indexOf(item1.type) !== -1 && etype == 'edit'" class="edit_box">
                 <div v-if="item1.type == 1">
-                    <choiceX :cJson="item1.json"></choiceX>
-                    <choiceDialog v-if="item1.type == 1 && checkC === `x${index1}`" :cJson="cJson" @setJson="setJson">
-                    </choiceDialog>
+                    <choiceX :cJson="item1.json" @setJson="setJson" :index="`x${index1}`" :isOpen="item1.type == 1 && checkC === `x${index1}`"></choiceX>
+                    <!-- <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>
+                    <gapX :cJson="item1.json" @setJson="setJson" :index="`x${index1}`" :isOpen="item1.type == 3 && checkC === `x${index1}`"></gapX>
+                    <!-- <gapDialog v-if="item1.type == 3 && checkC === `x${index1}`" :cJson="cJson" @setJson="setJson">
+                    </gapDialog> -->
                 </div>
                 <div v-else-if="item1.type == 5">
-                    <fileX :cJson="item1.json"></fileX>
-                    <fileDialog v-if="item1.type == 5 && checkC === `x${index1}`" :cJson="cJson" @setJson="setJson">
-                    </fileDialog>
+                    <fileX :cJson="item1.json" @setJson="setJson" :index="`x${index1}`" :isOpen="item1.type == 5 && checkC === `x${index1}`"></fileX>
+                    <!-- <fileDialog v-if="item1.type == 5 && checkC === `x${index1}`" :cJson="cJson" @setJson="setJson">
+                    </fileDialog> -->
                 </div>
                 <div v-else-if="item1.type == 6">
-                    <courseX :cJson="item1.json"></courseX>
-                    <courseDialog v-if="item1.type == 6 && checkC === `x${index1}`" :cJson="cJson" @setJson="setJson">
-                    </courseDialog>
+                    <courseX :cJson="item1.json" @setJson="setJson" :index="`x${index1}`" :isOpen="item1.type == 6 && checkC === `x${index1}`"></courseX>
+                    <!-- <courseDialog v-if="item1.type == 6 && checkC === `x${index1}`" :cJson="cJson" @setJson="setJson">
+                    </courseDialog> -->
                 </div>
                 <div v-else-if="item1.type == 7">
-                    <evaX :cJson="item1.json"></evaX>
-                    <evaDialog v-if="item1.type == 7 && checkC === `x${index1}`" :cJson="cJson" @setJson="setJson">
-                    </evaDialog>
+                    <evaX :cJson="item1.json" @setJson="setJson" :index="`x${index1}`" :isOpen="item1.type == 7 && checkC === `x${index1}`"></evaX>
+                    <!-- <evaDialog v-if="item1.type == 7 && checkC === `x${index1}`" :cJson="cJson" @setJson="setJson">
+                    </evaDialog> -->
                 </div>
                 <div v-else-if="item1.type == 8">
-                    <timeX :cJson="item1.json"></timeX>
-                    <timeDialog v-if="item1.type == 8 && checkC === `x${index1}`" :cJson="cJson" @setJson="setJson">
-                    </timeDialog>
+                    <timeX :cJson="item1.json" @setJson="setJson" :index="`x${index1}`" :isOpen="item1.type == 8 && checkC === `x${index1}`"></timeX>
+                    <!-- <timeDialog v-if="item1.type == 8 && checkC === `x${index1}`" :cJson="cJson" @setJson="setJson">
+                    </timeDialog> -->
                 </div>
                 <div v-else-if="item1.type == 11">
-                    <courseX2 :cJson="item1.json"></courseX2>
-                    <courseDialog2 v-if="item1.type == 11 && checkC === `x${index1}`" :cJson="cJson" @setJson="setJson">
-                    </courseDialog2>
+                    <courseX2 :cJson="item1.json" @setJson="setJson" :index="`x${index1}`" :isOpen="item1.type == 11 && checkC === `x${index1}`"></courseX2>
+                    <!-- <courseDialog2 v-if="item1.type == 11 && checkC === `x${index1}`" :cJson="cJson" @setJson="setJson">
+                    </courseDialog2> -->
                 </div>
             </div>
         </div>
@@ -377,9 +377,15 @@ export default {
             // console.log(this.cJson);
             this.$emit("update:cJson", cJson)
         },
-        setJson(json) {
-            let _index = this.checkC.replace("x", "").split("-");
-            // this.cJson = json
+        setJson(json,index) {
+						let checkC = ""
+						if(index){
+							checkC = index
+						}else{
+							checkC = this.checkC
+						}
+						if(!checkC)return;
+            let _index = checkC.replace("x", "").split("-");
             this.$emit("update:cJson", json)
             if (this.ctype == 1) {
                 this.manualJson[_index[0]].json = json

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

@@ -1,89 +1,291 @@
 <template>
-    <div class="c_box">
-        <div class="mask"></div>
-        <!-- <div v-if="!cJson">暂未设置题目</div> -->
-        <div class="set_box" v-if="!cJson">请设置题目</div>
-        <div v-else class="choice_box">
-            <div class="title"> 
-                <div style="display: flex;">
-                    <span style="min-width:fit-content">{{  `（${option[cJson.type].name}）` }}</span><span>{{cJson.title }}</span>
-                </div>
-                <span style="color: #efa030;" v-if="cJson.score">（{{ '分值：'+cJson.score+'分' }}）</span>
-            </div>
-            <div class="choices">
-                <div class="choice" v-for="(item, index) in cJson.array" :key="index">
-                    <div class="choice_c" v-if="cJson.type == 2"><el-checkbox v-model="cJson.answer" :label="index"></el-checkbox><span :class="{right:cJson.answer.indexOf(index) != -1}">{{ item.option }}</span></div>
-                    <div class="choice_c" v-if="cJson.type == 1"><el-radio v-model="cJson.answer[0]" :label="index"></el-radio><span :class="{right:cJson.answer.indexOf(index) != -1}">{{ item.option }}</span></div>
-                </div>
-            </div>
+  <div class="c_box">
+    <div class="mask" v-if="!isOpen"></div>
+    <!-- <div v-if="!cJson">暂未设置题目</div> -->
+    <div class="set_box" v-if="!cJson">请设置题目</div>
+    <div v-else class="choice_box">
+      <div class="title">
+        <div style="display: flex;">
+          <span @click.stop="updateTitle()" style="min-width:fit-content">{{
+            `（${option[cJson.type].name}）`
+          }}</span
+          ><span @click.stop="updateTitle()" v-if="!updateList.title">{{
+            cJson.title
+          }}</span>
+          <input
+            v-if="updateList.title"
+            ref="titleRef"
+            class="editInput"
+            v-model="checkJson.title"
+            @blur="save"
+            @keyup.enter="save"
+            placeholder="请填写标题"
+          />
         </div>
+        <span style="color: #efa030;" v-if="cJson.score"
+          >（{{ "分值：" + cJson.score + "分" }}）</span
+        >
+      </div>
+      <div class="choices">
+        <div class="choice" v-for="(item, index) in cJson.array" :key="index">
+          <div
+            class="choice_c"
+            v-if="cJson.type == 2"
+            @click.stop="updateAnswer(index)"
+          >
+            <el-checkbox
+              class="choiceInput"
+              v-model="cJson.answer"
+              disabled
+              :label="index"
+            ></el-checkbox
+            ><span
+              v-if="!updateList.answer || updateList.answerIndex != index"
+              :class="{ right: cJson.answer.indexOf(index) != -1 }"
+              @click.stop="updateLabel(index)"
+              >{{ item.option ? item.option : "空选项" }}</span
+            >
+            <input
+              v-if="updateList.answer && updateList.answerIndex == index"
+              style="background: none;color: #000;"
+              class="editInput answerInput"
+              :ref="`answerRef${index}`"
+              v-model="checkJson.array[index].option"
+              @blur="save"
+              @keyup.enter="save"
+              placeholder="请输入选项标题"
+            />
+            <span
+              @click.stop="deleteChoice(index)"
+              class="deleteChoice"
+              >×</span
+            >
+          </div>
+          <div
+            class="choice_c"
+            v-if="cJson.type == 1"
+            @click.stop="updateAnswer(index)"
+          >
+            <el-radio
+              class="choiceInput"
+              v-model="cJson.answer[0]"
+              disabled
+              :label="index"
+            ></el-radio
+            ><span
+              v-if="!updateList.answer || updateList.answerIndex != index"
+              :class="{ right: cJson.answer.indexOf(index) != -1 }"
+              @click.stop="updateLabel(index)"
+              >{{ item.option ? item.option : "空选项" }}</span
+            >
+            <input
+              v-if="updateList.answer && updateList.answerIndex == index"
+              style="background: none;color: #000;"
+              :ref="`answerRef${index}`"
+              class="editInput answerInput"
+              v-model="checkJson.array[index].option"
+              @blur="save"
+              @keyup.enter="save"
+              placeholder="请输入选项标题"
+            />
+            <span
+              @click.stop="deleteChoice(index)"
+              class="deleteChoice"
+              >×</span
+            >
+          </div>
+        </div>
+      </div>
+
+      <div class="choiceBottom">
+				<el-button type="primary" size="mini" @click.stop="addChoice">添加选项</el-button>
+			</div>
     </div>
+  </div>
 </template>
 
 <script>
 export default {
-    props: {
-        cJson: {
-            type: Object,
-        },
+  props: {
+    cJson: {
+      type: Object
+    },
+    isOpen: {
+      type: Boolean,
+      default: false
+    },
+    index: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      option: {
+        1: { name: "单选题" },
+        2: { name: "多选题" }
+      },
+      checkJson: {},
+      updateList: {
+        title: false,
+        answer: false,
+        answerIndex: 0
+      }
+    };
+  },
+  watch: {
+    checkJson: {
+      handler(newVal) {
+        this.$emit("setJson", newVal, this.index);
+      },
+      deep: true
+    }
+  },
+  methods: {
+    depthCopy(s) {
+      return JSON.parse(JSON.stringify(s));
     },
-    data() {
-        return {
-            option: {
-                1: { name: '单选题' },
-                2: { name: '多选题' }
-            }
+    updateTitle() {
+      this.updateList.title = true;
+      this.$nextTick(() => {
+        this.$refs["titleRef"].focus();
+      });
+    },
+    updateLabel(index) {
+      this.updateList.answerIndex = index;
+      this.updateList.answer = true;
+      this.$nextTick(() => {
+        console.log(this.$refs[`answerRef${index}`]);
+        this.$refs[`answerRef${index}`][0].focus();
+      });
+    },
+    save() {
+      for (let key in this.updateList) {
+        if (typeof this.updateList[key] === "boolean") {
+          this.updateList[key] = false;
         }
+      }
     },
-}
+    updateAnswer(index) {
+      if (this.cJson.type == 1) {
+        if (this.checkJson.answer.indexOf(index) == -1) {
+          this.checkJson.answer = [index];
+        }
+      } else if (this.cJson.type == 2) {
+        if (!this.checkJson.answer) {
+          this.checkJson.answer = [];
+        }
+        if (!this.checkJson.answer.includes(index)) {
+          this.checkJson.answer.push(index);
+        } else {
+          this.checkJson.answer.splice(this.checkJson.answer.indexOf(index), 1);
+        }
+      }
+    },
+    deleteChoice(index) {
+      this.checkJson.array.splice(index, 1);
+      if (this.checkJson.answer.indexOf(index) != -1) {
+        this.checkJson.answer.splice(this.checkJson.answer.indexOf(index), 1);
+      }
+    },
+		addChoice(){
+			this.checkJson.array.push({ option: "选项" + (this.checkJson.array.length + 1), img: "" })
+		}
+  },
+  mounted() {
+    if (!this.cJson || Object.keys(this.cJson).length == 0) {
+      this.checkJson = {
+        title: "标题",
+        type: 1,
+        array: [
+          { option: "选项1", img: "" },
+          { option: "选项2", img: "" }
+        ],
+        answer: ""
+      };
+    } else {
+      this.checkJson = this.depthCopy(this.cJson);
+    }
+  }
+};
 </script>
 
 <style scoped>
-@import '../../global_styles.css';
+@import "../../global_styles.css";
 
-.choice_box>.choices >.choice{
-    word-break: break-all;
+.choice_box > .choices > .choice {
+  word-break: break-all;
 }
-.choice_box>.choices >.choice + .choice{
-    margin-top: 5px;
+.choice_box > .choices > .choice + .choice {
+  margin-top: 5px;
 }
-.choice_box>.choices >.choice > .choice_c{
-    display: flex;
-		padding: 10px 0 15px 10px;
-		border: solid 1px #3681FC;
-		background-color: rgba(224, 234, 251, 0.40);
-		border-radius: 50px;
-		display: flex;
-		align-items: center;
-		margin-bottom: 10px;
+.choice_box > .choices > .choice > .choice_c {
+  display: flex;
+  padding: 10px 0 15px 10px;
+  border: solid 1px #3681fc;
+  background-color: rgba(224, 234, 251, 0.4);
+  border-radius: 50px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  position: relative;
+  width: calc(100% - 50px);
 }
-.choice_box>.choices >.choice > .choice_c > span{
-    /* margin-left: 10px; */
+.choice_box > .choices > .choice > .choice_c > span {
+  /* padding-right: 50px; */
+  /* margin-left: 10px; */
 }
-.choice_box>.choices >.choice > .choice_c > .el-checkbox{
-    margin-top: 4px;
-    margin-right: 10px;
+.choice_box > .choices > .choice > .choice_c > .el-checkbox {
+  margin-top: 4px;
+  margin-right: 10px;
 }
-.choice_box>.choices >.choice > .choice_c > .el-radio{
-    margin-top: 4px;
-    margin-right: 10px;
+.choice_box > .choices > .choice > .choice_c > .el-radio {
+  margin-top: 4px;
+  margin-right: 10px;
 }
-.choice_c>>>.el-checkbox__label {
-    display: none;
+.choice_c >>> .el-checkbox__label {
+  display: none;
 }
 
-.choice_c>>>.el-radio__label {
-    display: none;
+.choice_c >>> .el-radio__label {
+  display: none;
 }
 
-.choice_c .right{
-    color: #efa030;
+.choice_c .right {
+  color: #efa030;
 }
-.choice_c .right::after{
-    content: '（正确答案）';
+.choice_c .right::after {
+  content: "（正确答案）";
+}
+
+.choice:hover > .choice_c > .deleteChoice {
+  display: flex;
+}
+
+.deleteChoice {
+  max-width: 25px;
+  max-height: 25px;
+  min-width: 25px;
+  min-height: 25px;
+  position: absolute;
+  right: -30px;
+  transform: translateY(2px);
+  border-radius: 5px;
+  color: #646a73 !important;
+  background-color: #fff;
+  cursor: pointer;
+  font-weight: bold;
+  font-size: 16px;
+  display: none;
+  padding-right: 0 !important;
+  align-items: center;
+  justify-content: center;
+  transition: 0.3s;
+  box-sizing: border-box;
 }
-.c_box{
 
+.deleteChoice:hover {
+  background-color: #e8e9e9;
 }
 
-</style>
+</style>

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

@@ -1,76 +1,276 @@
 <template>
-    <div class="c_box">
-        <div class="mask"></div>
-        <!-- <div v-if="!cJson">暂未设置题目</div> -->
-        <div class="choice_box">
-            <div class="title" style="display: flex;">
-                <span>{{cJson.title }}</span>
+  <div class="c_box">
+    <div class="mask" v-if="!isOpen"></div>
+    <!-- <div v-if="!cJson">暂未设置题目</div> -->
+    <div class="choice_box">
+      <div class="title" style="display: flex;">
+        <span v-if="!updateList.title" @click.stop="updateTitle()">{{
+          cJson.title ? cJson.title : "暂无标题"
+        }}</span>
+        <input
+          v-if="updateList.title"
+          ref="titleRef"
+          class="editInput"
+          v-model="checkJson.title"
+          @blur="save"
+          @keyup.enter="save"
+          placeholder="请填写标题"
+        />
+      </div>
+      <div
+        class="detail"
+        v-if="!updateList.detail"
+        @click.stop="updateDetail()"
+      >{{ cJson.detail ? cJson.detail : "暂无描述" }}
+      </div>
+      <input
+        v-if="updateList.detail"
+        ref="detailRef"
+        class="editInput"
+        v-model="checkJson.detail"
+        @blur="save"
+        style="margin-top: 10px;color: rgb(136, 139, 146);"
+        @keyup.enter="save"
+        placeholder="请填写描述"
+      />
+
+      <div class="course">
+        <el-button type="primary" size="mini" @click="openCourse"
+          >添加课程</el-button
+        >
+        <div class="set_title_list" v-loading="loading">
+          <div
+            v-for="(item, index) in courses"
+            class="set_title_list_item"
+            :key="index"
+            v-if="coursesList.find(i => i.courseId == item)"
+          >
+            <!-- {{ `课程名称：${item.title}     创建人：${item.username}`}} -->
+            <div
+              class="set_title_list_itemBtn el-icon-remove-outline"
+              @click.stop="delCourse(item)"
+            ></div>
+            <div class="set_title_list_itemLabel">
+              <span
+                >课程名称：{{
+                  coursesList.find(i => i.courseId == item) &&
+                    coursesList.find(i => i.courseId == item).title
+                }}</span
+              >
+              <span
+                >创建人：{{
+                  coursesList.find(i => i.courseId == item) &&
+                    coursesList.find(i => i.courseId == item).username
+                }}</span
+              >
             </div>
-            <div class="detail" v-if="cJson.detail">{{ cJson.detail }}</div>
+          </div>
         </div>
+      </div>
     </div>
+    <courseDilogVue
+      :dialogVisibleCourse.sync="dialogVisibleCourse"
+      :courses="courses"
+      @setCourse="setCourse"
+    >
+    </courseDilogVue>
+  </div>
 </template>
 
 <script>
+import courseDilogVue from "./courseDilog.vue";
 export default {
-    props: {
-        cJson: {
-            type: Object,
-        },
+  components: {
+    courseDilogVue
+  },
+  props: {
+    cJson: {
+      type: Object
     },
-    data() {
-        return {
-            option: {
-                1: { name: '附件' },
-                // 2: { name: '多选题' }
-            }
-        }
+    isOpen: {
+      type: Boolean,
+      default: false
     },
-}
+    index: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      option: {
+        1: { name: "附件" }
+        // 2: { name: '多选题' }
+      },
+      checkJson: {},
+      loading: false,
+      dialogVisibleCourse: false,
+      coursesList: [],
+      courses: [],
+      updateList: {
+        title: false,
+        detail: false
+      }
+    };
+  },
+  watch: {
+    checkJson: {
+      handler(newVal) {
+				console.log("修改")
+        this.$emit("setJson", newVal,this.index);
+      },
+      deep: true
+    },
+    async courses(newValue) {
+      this.loading = true;
+      let result = [];
+      let params = {
+        cid: this.courses.join(",")
+      };
+      let data = await this.ajax.get(
+        this.$store.state.api + "getCourseInfoTestAll",
+        params
+      );
+      result = data.data[0];
+      this.coursesList = result;
+      this.loading = false;
+    }
+  },
+  methods: {
+    depthCopy(s) {
+      return JSON.parse(JSON.stringify(s));
+    },
+    save() {
+      for (let key in this.updateList) {
+        this.updateList[key] = false;
+      }
+    },
+    updateTitle() {
+      this.updateList.title = true;
+      this.$nextTick(() => {
+        this.$refs["titleRef"].focus();
+      });
+    },
+    updateDetail() {
+      this.updateList.detail = true;
+      this.$nextTick(() => {
+        this.$refs["detailRef"].focus();
+      });
+    },
+    openCourse() {
+      this.dialogVisibleCourse = true;
+    },
+    setCourse(courses) {
+      this.checkJson.courses = courses;
+      this.courses = courses;
+      this.$forceUpdate();
+    }
+  },
+  mounted() {
+    if (!this.cJson || Object.keys(this.cJson).length == 0) {
+      this.checkJson = {
+        title: "标题",
+        detail: "",
+        courses: []
+      };
+    } else {
+      this.checkJson = this.depthCopy(this.cJson);
+      this.courses = this.checkJson.courses;
+    }
+  }
+};
 </script>
 
 <style scoped>
-@import '../../global_styles.css';
+@import "../../global_styles.css";
 
-.choice_box>.detail {
-    width: 100%;
-    word-break: break-all;
-    color: rgb(136, 139, 146);
-    margin: 10px 0 0;
+.choice_box > .detail {
+  width: 100%;
+  word-break: break-all;
+  color: rgb(136, 139, 146);
+  margin: 10px 0 0;
 }
 
-.choice_box>.choices {
-    margin-top: 10px;
+.choice_box > .choices {
+  margin-top: 10px;
 }
 
 .binfo_input {
-    width: 100%;
-    margin: 0;
-    padding: 10px;
-    display: block;
-    min-width: 0;
-    outline: none;
-    box-sizing: border-box;
-    background: none;
-    border: none;
-    border-radius: 5px;
-    background: #fff;
-    font-size: 16px;
-    resize: none;
-    font-family: 'Microsoft YaHei';
-    min-height: 120px;
-    /* border: 1px solid #3682fc00; */
-    border: 1.5px solid #e0e0e0;
+  width: 100%;
+  margin: 0;
+  padding: 10px;
+  display: block;
+  min-width: 0;
+  outline: none;
+  box-sizing: border-box;
+  background: none;
+  border: none;
+  border-radius: 5px;
+  background: #fff;
+  font-size: 16px;
+  resize: none;
+  font-family: "Microsoft YaHei";
+  min-height: 120px;
+  /* border: 1px solid #3682fc00; */
+  border: 1.5px solid #e0e0e0;
+}
+
+.binfo_input > div {
+  border: 1.5px dashed #dfdfdf;
+  height: 120px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgb(249, 250, 251);
+  color: rgb(124, 124, 124);
+  border-radius: 5px;
+}
+
+.course {
+  width: 100%;
+  margin-top: 10px;
+  height: auto;
+}
+
+
+.set_title_list_item {
+    display: flex;
+    align-items: center;
+    width: auto;
+    height: 40px;
+    margin: 10px 0;
+    border-radius: 10px;
+    padding: 0 20px;
+    transition: all 0.3s;
+}
+
+.set_title_list_item:hover {
+    background-color: #d4dde1;
+}
+
+.set_title_list_item:hover>.set_title_list_itemBtn {
+    opacity: 1;
 }
 
-.binfo_input>div {
-    border: 1.5px dashed #dfdfdf;
-    height: 120px;
-    width: 100%;
+.set_title_list_itemBtn {
+    font-size: 18px;
+    margin-right: 20px;
+    cursor: pointer;
+    opacity: 0;
+}
+
+.set_title_list_itemLabel {
     display: flex;
     align-items: center;
-    justify-content: center;
-    background: rgb(249, 250, 251);
-    color: rgb(124, 124, 124);
-    border-radius: 5px;
-}</style>
+}
+
+.set_title_list_itemLabel>span {
+    margin-right: 20px;
+}
+
+.set_title_list {
+    min-width: 100%;
+    /* min-height: 200px; */
+}
+</style>

src/components/pages/test/add/components/course2/course.vue

@@ -1,76 +1,150 @@
 <template>
-    <div class="c_box">
-        <div class="mask"></div>
-        <!-- <div v-if="!cJson">暂未设置题目</div> -->
-        <div class="choice_box">
-            <div class="title" style="display: flex;">
-                <span>{{cJson.title }}</span>
-            </div>
-            <div class="detail" v-if="cJson.detail">{{ cJson.detail }}</div>
-        </div>
+  <div class="c_box">
+    <div class="mask" v-if="!isOpen"></div>
+    <!-- <div v-if="!cJson">暂未设置题目</div> -->
+    <div class="choice_box">
+      <div class="title" style="display: flex;">
+        <span v-if="!updateList.title" @click.stop="updateTitle()">{{ cJson.title?cJson.title:"暂无标题" }}</span>
+				<input
+            v-if="updateList.title"
+            ref="titleRef"
+            class="editInput"
+            v-model="checkJson.title"
+            @blur="save"
+            @keyup.enter="save"
+            placeholder="请填写标题"
+          />
+      </div>
+      <div class="detail" v-if="!updateList.detail" @click.stop="updateDetail()">{{ cJson.detail?cJson.detail:"暂无描述" }}</div>
+			<input
+        v-if="updateList.detail"
+        ref="detailRef"
+        class="editInput"
+        v-model="checkJson.detail"
+        @blur="save"
+        style="margin-top: 10px;color: rgb(136, 139, 146);"
+        @keyup.enter="save"
+        placeholder="请填写描述"
+      />
     </div>
+  </div>
 </template>
 
 <script>
 export default {
-    props: {
-        cJson: {
-            type: Object,
-        },
+  props: {
+    cJson: {
+      type: Object
     },
-    data() {
-        return {
-            option: {
-                1: { name: '附件' },
-                // 2: { name: '多选题' }
-            }
-        }
+    isOpen: {
+      type: Boolean,
+      default: false
     },
-}
+    index: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      option: {
+        1: { name: "附件" }
+        // 2: { name: '多选题' }
+      },
+      checkJson: {},
+			updateList: {
+        title: false,
+        detail: false,
+      }
+    };
+  },
+  watch: {
+    checkJson: {
+      handler(newVal) {
+        this.$emit("setJson", newVal,this.index);
+      },
+      deep: true
+    }
+  },
+  methods: {
+    depthCopy(s) {
+      return JSON.parse(JSON.stringify(s));
+    },
+		save() {
+      for (let key in this.updateList) {
+        this.updateList[key] = false;
+      }
+    },
+		updateTitle(){
+			this.updateList.title = true;
+			this.$nextTick(()=>{
+				this.$refs["titleRef"].focus();
+			})
+		},
+		updateDetail(){
+			this.updateList.detail = true;
+			this.$nextTick(()=>{
+				this.$refs["detailRef"].focus();
+			})
+		}
+  },	
+  mounted() {
+    if (!this.cJson || Object.keys(this.cJson).length == 0) {
+      this.checkJson = {
+        title: "标题",
+        detail: ""
+      };
+    } else {
+      this.checkJson = this.depthCopy(this.cJson);
+      this.courses = this.checkJson.courses;
+    }
+  }
+};
 </script>
 
 <style scoped>
-@import '../../global_styles.css';
+@import "../../global_styles.css";
 
-.choice_box>.detail {
-    width: 100%;
-    word-break: break-all;
-    color: rgb(136, 139, 146);
-    margin: 10px 0 0;
+.choice_box > .detail {
+  width: 100%;
+  word-break: break-all;
+  color: rgb(136, 139, 146);
+  margin: 10px 0 0;
 }
 
-.choice_box>.choices {
-    margin-top: 10px;
+.choice_box > .choices {
+  margin-top: 10px;
 }
 
 .binfo_input {
-    width: 100%;
-    margin: 0;
-    padding: 10px;
-    display: block;
-    min-width: 0;
-    outline: none;
-    box-sizing: border-box;
-    background: none;
-    border: none;
-    border-radius: 5px;
-    background: #fff;
-    font-size: 16px;
-    resize: none;
-    font-family: 'Microsoft YaHei';
-    min-height: 120px;
-    /* border: 1px solid #3682fc00; */
-    border: 1.5px solid #e0e0e0;
+  width: 100%;
+  margin: 0;
+  padding: 10px;
+  display: block;
+  min-width: 0;
+  outline: none;
+  box-sizing: border-box;
+  background: none;
+  border: none;
+  border-radius: 5px;
+  background: #fff;
+  font-size: 16px;
+  resize: none;
+  font-family: "Microsoft YaHei";
+  min-height: 120px;
+  /* border: 1px solid #3682fc00; */
+  border: 1.5px solid #e0e0e0;
 }
 
-.binfo_input>div {
-    border: 1.5px dashed #dfdfdf;
-    height: 120px;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgb(249, 250, 251);
-    color: rgb(124, 124, 124);
-    border-radius: 5px;
-}</style>
+.binfo_input > div {
+  border: 1.5px dashed #dfdfdf;
+  height: 120px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgb(249, 250, 251);
+  color: rgb(124, 124, 124);
+  border-radius: 5px;
+}
+</style>

src/components/pages/test/add/components/evaBox/eva.vue

@@ -1,77 +1,246 @@
 <template>
-    <div class="c_box">
-        <div class="mask"></div>
-        <div class="choice_box">
-            <div class="title" style="display: flex;">
-                <span>{{cJson.title }}</span>
-            </div>
-            <div class="detail" v-if="cJson.detail">{{ cJson.detail }}</div>
+  <div class="c_box">
+    <div class="mask" v-if="!isOpen"></div>
+    <div class="choice_box">
+      <div class="title" style="display: flex;">
+        <span @click.stop="updateTitle()" v-if="!updateList.title">{{
+          cJson.title ? cJson.title : "暂无标题"
+        }}</span>
+        <input
+          v-if="updateList.title"
+          ref="titleRef"
+          class="editInput"
+          v-model="checkJson.title"
+          @blur="save"
+          @keyup.enter="save"
+          placeholder="请填写标题"
+        />
+      </div>
+      <div
+        class="detail"
+        v-if="!updateList.detail"
+        @click.stop="updateDetail()"
+      >{{cJson.detail ? cJson.detail : "暂无描述"}}</div>
+      <input
+        v-if="updateList.detail"
+        ref="detailRef"
+        class="editInput"
+        v-model="checkJson.detail"
+        @blur="save"
+        style="margin-top: 10px;color: rgb(136, 139, 146);"
+        @keyup.enter="save"
+        placeholder="请填写描述"
+      />
+      <div class="scoreList">
+        <div
+          class="scoreItem"
+          v-for="item in Array.from({length:checkJson.big+1},(_,i)=>i)"
+					v-if="item>=checkJson.small"
+          :key="item"
+        >{{item}}</div>
+      </div>
+      <div class="setScore_box">
+        <input
+          @click.stop=""
+          class="binfo_input"
+          type="value"
+          v-model.number="checkJson.small"
+          @change="numberPan"
+        />
+        <div>
+          <span>~</span>
         </div>
+        <input
+          @click.stop=""
+          class="binfo_input"
+          type="value"
+          @blur="save"
+          @keyup.enter="save"
+          v-model.number="checkJson.big"
+          @change="numberPan2"
+        />
+      </div>
+
+      <!-- <div class="detail" v-if="cJson.detail">{{ cJson.detail }}</div> -->
     </div>
+  </div>
 </template>
 
 <script>
 export default {
-    props: {
-        cJson: {
-            type: Object,
-        },
+  props: {
+    cJson: {
+      type: Object
     },
-    data() {
-        return {
-            option: {
-                1: { name: '附件' },
-                // 2: { name: '多选题' }
-            }
-        }
+    isOpen: {
+      type: Boolean,
+      default: false
     },
-}
+		index:{
+			type:String,
+			default:""
+		}
+  },
+  data() {
+    return {
+      option: {
+        1: { name: "附件" }
+        // 2: { name: '多选题' }
+      },
+      checkJson: {},
+      updateList: {
+        title: false,
+        detail: false
+      }
+    };
+  },
+  watch: {
+    checkJson: {
+      handler(newVal) {
+        this.$emit("setJson", newVal,this.index);
+      },
+      deep: true
+    }
+  },
+  methods: {
+    depthCopy(s) {
+      return JSON.parse(JSON.stringify(s));
+    },
+    save() {
+      for (let key in this.updateList) {
+        this.updateList[key] = false;
+      }
+    },
+    updateTitle() {
+      this.updateList.title = true;
+      this.$nextTick(() => {
+        this.$refs.titleRef.focus();
+      });
+    },
+    updateDetail() {
+      this.updateList.detail = true;
+      this.$nextTick(() => {
+        this.$refs.detailRef.focus();
+      });
+    },
+    numberPan() {
+      this.checkJson.small = Number(this.checkJson.small);
+      if (/[^\d]/.test(this.checkJson.small) || this.checkJson.small < 0) {
+        this.$message.error("请输入大于0的数字");
+        this.checkJson.small = 0;
+      } else if (this.checkJson.small === "") {
+        this.checkJson.small = 0;
+      } else if (this.checkJson.big <= this.checkJson.small) {
+        this.$message.error("请输入小于" + this.checkJson.big + "的数字");
+        this.checkJson.small = this.checkJson.big - 1;
+      }
+    },
+    numberPan2() {
+      this.checkJson.big = Number(this.checkJson.big);
+      if (/[^\d]/.test(this.checkJson.big) || this.checkJson.big < 0) {
+        this.$message.error("请输入大于0的数字");
+        this.checkJson.big = this.checkJson.small + 1;
+      } else if (this.checkJson.big === "") {
+        this.checkJson.big = this.checkJson.small + 1;
+      } else if (this.checkJson.big <= this.checkJson.small) {
+        this.$message.error("请输入大于" + this.checkJson.small + "的数字");
+        this.checkJson.big = this.checkJson.small + 1;
+      }
+    }
+  },
+  mounted() {
+    if (!this.cJson || Object.keys(this.cJson).length == 0) {
+      this.checkJson = {
+        title: "标题",
+        detail: "",
+        small: 0,
+        big: 10
+      };
+    } else {
+      this.checkJson = this.depthCopy(this.cJson);
+    }
+  }
+};
 </script>
 
 <style scoped>
-@import '../../global_styles.css';
+@import "../../global_styles.css";
+
+.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: 1px solid #cad1dc;
+}
 
+.binfo_input:focus-visible {
+  border: 1px solid #3681fc !important;
+}
 
-.choice_box>.detail {
-    width: 100%;
-    word-break: break-all;
-    color: rgb(136, 139, 146);
-    margin: 10px 0 0;
+.setScore_box {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
 }
 
-.choice_box>.choices {
-    margin-top: 10px;
+.setScore_box > div {
+  margin: auto 20px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  font-size: 20px;
+  font-weight: bold;
+  text-align: center;
 }
 
-.binfo_input {
-    width: 100%;
-    margin: 0;
-    padding: 10px;
-    display: block;
-    min-width: 0;
-    outline: none;
-    box-sizing: border-box;
-    background: none;
-    border: none;
-    border-radius: 5px;
-    background: #fff;
-    font-size: 16px;
-    resize: none;
-    font-family: 'Microsoft YaHei';
-    min-height: 120px;
-    /* border: 1px solid #3682fc00; */
-    border: 1.5px solid #e0e0e0;
+.setScore_box > div > span {
+  position: relative;
+  top: 10px;
 }
 
-.binfo_input>div {
-    border: 1.5px dashed #dfdfdf;
-    height: 120px;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgb(249, 250, 251);
-    color: rgb(124, 124, 124);
-    border-radius: 5px;
-}</style>
+.setScore_box > input {
+  width: 100px;
+  height: 40px;
+}
+
+.scoreList {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-wrap: wrap;
+	margin-top: 20px;
+}
+
+.scoreItem{
+	width: 35px;
+	height: 35px;
+	background-color: #DEE0E3;
+	color: white;
+	border-radius: 8px;
+	display: flex;
+  justify-content: center;
+  align-items: center;
+	margin-right: 15px;
+	font-size: 18px;
+	margin-bottom: 15px;
+}
+</style>

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

@@ -1,94 +1,512 @@
 <template>
-    <div class="c_box">
-        <div class="mask"></div>
-        <!-- <div v-if="!cJson">暂未设置题目</div> -->
-        <div class="choices" v-if="!cJson">
-            <div class="binfo_input">
-                <div><span>填写者上传区</span></div>
-            </div>
+  <div class="c_box">
+    <div class="mask" v-if="!isOpen"></div>
+    <!-- <div v-if="!cJson">暂未设置题目</div> -->
+    <div class="choices" v-if="!cJson">
+      <div class="binfo_input">
+        <div><span>填写者上传区</span></div>
+      </div>
+    </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" style="display: flex;">
+        <span @click.stop="updateTitle()" style="min-width:fit-content">{{
+          `（${option[cJson.type].name}）`
+        }}</span>
+        <span @click.stop="updateTitle()" v-if="!updateList.title">{{
+          cJson.title
+        }}</span>
+        <input
+          v-if="updateList.title"
+          ref="titleRef"
+          class="editInput"
+          v-model="checkJson.title"
+          @blur="save"
+          @keyup.enter="save"
+          placeholder="请填写标题"
+        />
+        <span style="color: #efa030;min-width:fit-content" v-if="cJson.score"
+          >（{{ cJson.score ? "分值：" + cJson.score + "分" : "" }}）</span
+        >
+        <!-- </div><div v-html="cJson.title"></div> -->
+      </div>
+      <div
+        class="detail"
+        v-if="!updateList.detail"
+        @click.stop="updateDetail()"
+      >{{ cJson.detail ? cJson.detail : "暂无描述" }}</div>
+      <input
+        v-if="updateList.detail"
+        ref="detailRef"
+        class="editInput"
+        v-model="checkJson.detail"
+        @blur="save"
+        style="margin-top: 10px;color: rgb(136, 139, 146);"
+        @keyup.enter="save"
+        placeholder="请填写描述"
+      />
+      <div class="uploadFileBox">
+        <div v-loading="proVisible">
+          <el-button @click.stop="addFile()" type="primary" size="mini"
+            >上传模板</el-button
+          >
         </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" style="display: flex;">
-                <span style="min-width:fit-content">{{  `（${option[cJson.type].name}）` }}</span>
-                <span>{{cJson.title }}</span>
-                <span style="color: #efa030;min-width:fit-content" v-if="cJson.score">（{{ cJson.score ? '分值：' + cJson.score + '分' : '' }}）</span>
-                <!-- </div><div v-html="cJson.title"></div> -->
-            </div>
-            <div class="detail" v-if="cJson.detail">{{ cJson.detail }}</div>
-            <div class="choices">
-                <div class="binfo_input">
-                    <div><span>填写者上传区</span></div>
-                </div>
-                <!-- <textarea readonly rows="2" class="binfo_input binfo_textarea" cols
-                    placeholder=""></textarea> -->
+        <div
+          class="file_box"
+          v-if="checkJson.mobanFile && checkJson.mobanFile.length"
+          v-loading="loading"
+        >
+          <div
+            class="file_item"
+            v-for="(item, index) in checkJson.mobanFile"
+            :key="index"
+            @click.stop=""
+          >
+            <div class="file_name">{{ item.name }}</div>
+            <div class="file_btns">
+              <div class="file_btn" @click.stop="downloadFile(index)">下载</div>
+              <div class="file_btn" @click.stop="delFile(index)">删除</div>
             </div>
+          </div>
+        </div>
+      </div>
+      <div class="choices">
+        <div class="binfo_input">
+          <div><span>填写者上传区</span></div>
         </div>
+        <!-- <textarea readonly rows="2" class="binfo_input binfo_textarea" cols
+                    placeholder=""></textarea> -->
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
+const getFile = url => {
+  return new Promise((resolve, reject) => {
+    var credentials = {
+      accessKeyId: "AKIATLPEDU37QV5CHLMH",
+      secretAccessKey: "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"
+    }; //秘钥形式的登录上传
+    window.AWS.config.update(credentials);
+    window.AWS.config.region = "cn-northwest-1"; //设置区域
+    let url2 = url;
+    let _url2 = "";
+    if (
+      url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
+    ) {
+      _url2 = url2.split(
+        "https://view.officeapps.live.com/op/view.aspx?src="
+      )[1];
+    } else {
+      _url2 = url2;
+    }
+    var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
+    let name = decodeURIComponent(
+      _url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1]
+    );
+    var params = {
+      Bucket: "ccrb",
+      Key: name
+    };
+    s3.getObject(params, function(err, data) {
+      if (err) {
+        console.log(err, err.stack);
+        resolve({ data: 1 });
+      } else {
+        resolve({ data: data.Body });
+        console.log(data);
+      }
+    });
+  });
+};
+
 export default {
-    props: {
-        cJson: {
-            type: Object,
-        },
+  props: {
+    cJson: {
+      type: Object
+    },
+    isOpen: {
+      type: Boolean,
+      default: false
+    },
+    index: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      option: {
+        1: { name: "附件" }
+        // 2: { name: '多选题' }
+      },
+      updateList: {
+        title: false,
+        detail: false
+      },
+      checkJson: {},
+      proVisible: false,
+      loading: false
+    };
+  },
+  watch: {
+    checkJson: {
+      handler(newVal) {
+        // console.log("测试测试保存",newVal)
+        this.$emit("setJson", newVal, this.index);
+      },
+      deep: true
+    }
+  },
+  methods: {
+    depthCopy(s) {
+      return JSON.parse(JSON.stringify(s));
     },
-    data() {
-        return {
-            option: {
-                1: { name: '附件' },
-                // 2: { name: '多选题' }
-            }
+    updateTitle() {
+      this.updateList.title = true;
+      this.$nextTick(() => {
+        this.$refs.titleRef.focus();
+      });
+    },
+    updateDetail() {
+      this.updateList.detail = true;
+      this.$nextTick(() => {
+        this.$refs.detailRef.focus();
+      });
+    },
+    save() {
+      for (let key in this.updateList) {
+        this.updateList[key] = false;
+      }
+    },
+    addFile() {
+      let input = document.createElement("input");
+      input.type = "file";
+      // input.accept = ".wav";
+      // input.accept = "audio/*, .txt, .pdf, .xlsx";
+      input.accept = ".doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf";
+      input.multiple = true;
+      input.click();
+      input.onchange = async () => {
+        let files = input.files;
+        let file = "";
+        let cfindex2 = 0;
+        for (var cfindex = 0; cfindex < files.length; cfindex++) {
+          file = files[cfindex];
+          if (!/\.(docx|doc|xls|xlsx|ppt|pptx|pdf)$/i.test(file.name)) {
+            return this.$message.error(
+              "请上传.docx,.doc,.xls,.xlsx,.ppt,.pptx,.pdf格式的文件"
+            );
+          }
+          var credentials = {
+            accessKeyId: "AKIATLPEDU37QV5CHLMH",
+            secretAccessKey: "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"
+          }; //秘钥形式的登录上传
+          window.AWS.config.update(credentials);
+          window.AWS.config.region = "cn-northwest-1"; //设置区域
+
+          var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
+          var _this = this;
+
+          // _this.progress = 0;
+          _this.proVisible = true;
+          // _this.isFinishSize = 0;
+          // _this.isAllSize = (file.size / 1024 / 1024).toFixed(2);
+          let _name = file.name;
+          let size = file.size;
+          _this.$forceUpdate();
+          if (file) {
+            var params = {
+              Key:
+                file.name.split(".")[0] +
+                new Date().getTime() +
+                "." +
+                file.name.split(".")[file.name.split(".").length - 1],
+              ContentType: file.type,
+              Body: file,
+              "Access-Control-Allow-Credentials": "*",
+              ACL: "public-read"
+            }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
+            var options = {
+              partSize: 2048 * 1024 * 1024,
+              queueSize: 2,
+              leavePartsOnError: true
+            };
+            bucket
+              .upload(params, options)
+              .on("httpUploadProgress", function(evt) {
+                //这里可以写进度条
+                // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
+                // _this.progress = parseInt((evt.loaded / evt.total) * 100);
+                // _this.isFinishSize = (evt.loaded / 1024 / 1024).toFixed(2);
+                // _this.$forceUpdate();
+              })
+              .send(function(err, data) {
+                cfindex2++;
+
+                // _this.progress = 100;
+                // _this.isFinishSize = _this.isAllSize;
+                // _this.$forceUpdate();
+                // setTimeout(() => {
+                //     _this.proVisible = false;
+                //     _this.$forceUpdate();
+                // }, 1000);
+                setTimeout(() => {
+                  if (cfindex2 == files.length || cfindex2 > files.length) {
+                    _this.proVisible = false;
+                  }
+                }, 1000);
+                // loading.close();
+                if (err) {
+                  _this.$message.error("上传失败");
+                } else {
+                  let _type = 2;
+                  var imgA = [
+                    "png",
+                    "jpg",
+                    "jpeg",
+                    "bmp",
+                    "gif",
+                    "webp",
+                    "psd",
+                    "svg",
+                    "tiff"
+                  ];
+                  var fileA = [
+                    "DOC",
+                    "DOCX",
+                    "DOCM",
+                    "DOTM",
+                    "DOTX",
+                    "PPTX",
+                    "PPSX",
+                    "PPT",
+                    "PPS",
+                    "PPTM",
+                    "POTM",
+                    "PPAM",
+                    "POTX",
+                    "PPSM",
+                    "XLSX",
+                    "XLS"
+                  ];
+                  var videoA = [
+                    "AVI",
+                    "NAVI",
+                    "MPEG",
+                    "ASF",
+                    "MOV",
+                    "WMV",
+                    "3GP",
+                    "RM",
+                    "RMVB",
+                    "FLV",
+                    "F4V",
+                    "H.264",
+                    "H.265",
+                    "REAL VIDEO",
+                    "MKV",
+                    "WebM",
+                    "HDDVD",
+                    "MP4",
+                    "MPG",
+                    "M4V",
+                    "MGV",
+                    "OGV",
+                    "QTM",
+                    "STR",
+                    "AMC",
+                    "DVX",
+                    "EVO",
+                    "DAT",
+                    "OGG",
+                    "OGM"
+                  ];
+                  if (
+                    fileA.indexOf(
+                      data.Location.split(".")[
+                        data.Location.split(".").length - 1
+                      ].toLocaleUpperCase()
+                    ) != -1
+                  ) {
+                    _type = 1; //word 文件
+                  } else if (
+                    videoA.indexOf(
+                      data.Location.split(".")[
+                        data.Location.split(".").length - 1
+                      ].toLocaleUpperCase()
+                    ) != -1
+                  ) {
+                    _type = 2; //视频
+                  } else if (
+                    imgA.indexOf(
+                      data.Location.split(".")[
+                        data.Location.split(".").length - 1
+                      ].toLocaleLowerCase()
+                    ) != -1
+                  ) {
+                    _type = 3; //图片
+                  } else if (
+                    "pdf".indexOf(
+                      data.Location.split(".")[
+                        data.Location.split(".").length - 1
+                      ].toLocaleLowerCase()
+                    ) != -1
+                  ) {
+                    _type = 4; //pdf
+                  } else {
+                    _type = 5; //文件
+                  }
+                  if (_this.checkJson.mobanFile) {
+                    _this.checkJson.mobanFile.push({
+                      name: _name,
+                      url: data.Location,
+                      type: _type
+                    });
+                    _this.$forceUpdate();
+                  } else {
+                    _this.checkJson.mobanFile = [];
+                    _this.checkJson.mobanFile.push({
+                      name: _name,
+                      url: data.Location,
+                      type: _type
+                    });
+                    _this.$forceUpdate();
+                  }
+                  _this.$forceUpdate();
+                  _this.$emit("setJson", _this.checkJson, _this.index);
+                  console.log(data.Location);
+                }
+              });
+          }
         }
+      };
     },
-}
+    delFile(index) {
+      this.checkJson.mobanFile.splice(index, 1);
+      this.$forceUpdate();
+      this.$emit("setJson", this.checkJson, this.index);
+    },
+    downloadFile(index) {
+      this.loading = true;
+      let file = this.checkJson.mobanFile[index];
+      getFile(file.url).then(data => {
+        this.loading = false;
+        if (data.data != 1) {
+          // 下载文件, 并存成ArrayBuffer对象
+          const file_name = file.name; // 获取文件名
+          const file_data = data.data; // 获取文件数据
+          let url = window.URL.createObjectURL(new Blob([file_data]));
+          let a = document.createElement("a");
+          a.name = file_name;
+          a.href = url;
+          a.download = file_name;
+          a.click();
+          console.log(data);
+          this.$message.success("下载成功");
+        } else {
+          this.$message.error("下载失败");
+        }
+      });
+    }
+  },
+  mounted() {
+    if (!this.cJson || Object.keys(this.cJson).length == 0) {
+      this.checkJson = {
+        title: "标题",
+        type: 1,
+        detail: ""
+      };
+    } else {
+      this.checkJson = this.depthCopy(this.cJson);
+    }
+  }
+};
 </script>
 
 <style scoped>
-@import '../../global_styles.css';
+@import "../../global_styles.css";
 
+.choice_box > .choices {
+  margin-top: 10px;
+}
 
+.binfo_input {
+  width: 100%;
+  margin: 0;
+  padding: 10px;
+  display: block;
+  min-width: 0;
+  outline: none;
+  box-sizing: border-box;
+  background: none;
+  border: none;
+  border-radius: 5px;
+  background: #fff;
+  font-size: 16px;
+  resize: none;
+  font-family: "Microsoft YaHei";
+  min-height: 120px;
+  /* border: 1px solid #3682fc00; */
+  border: 1.5px solid #e0e0e0;
+}
 
-.choice_box>.detail {
-    width: 100%;
-    word-break: break-all;
-    color: rgb(136, 139, 146);
-    margin: 10px 0 0;
+.binfo_input > div {
+  border: 1.5px dashed #dfdfdf;
+  height: 120px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgb(249, 250, 251);
+  color: rgb(124, 124, 124);
+  border-radius: 5px;
 }
 
-.choice_box>.choices {
-    margin-top: 10px;
+.uploadFileBox {
+  margin-top: 10px;
 }
 
-.binfo_input {
-    width: 100%;
-    margin: 0;
-    padding: 10px;
-    display: block;
-    min-width: 0;
-    outline: none;
-    box-sizing: border-box;
-    background: none;
-    border: none;
-    border-radius: 5px;
-    background: #fff;
-    font-size: 16px;
-    resize: none;
-    font-family: 'Microsoft YaHei';
-    min-height: 120px;
-    /* border: 1px solid #3682fc00; */
-    border: 1.5px solid #e0e0e0;
+.file_box {
+  width: 100%;
+  box-sizing: border-box;
+  margin: 10px 0;
 }
 
-.binfo_input>div {
-    border: 1.5px dashed #dfdfdf;
-    height: 120px;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgb(249, 250, 251);
-    color: rgb(124, 124, 124);
-    border-radius: 5px;
-}</style>
+.file_item {
+  display: flex;
+  width: 100%;
+  padding: 5px;
+  box-sizing: border-box;
+  border-radius: 5px;
+  transition: 0.2s;
+}
+
+.file_item + .file_item {
+  margin-top: 10px;
+}
+
+.file_name {
+  color: #747474;
+}
+
+.file_item:hover {
+  background: #f0f2f5;
+}
+
+.file_btns {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+}
+
+.file_btn + .file_btn {
+  margin-left: 10px;
+}
+
+.file_btn {
+  color: #3681fc;
+  cursor: pointer;
+}
+</style>

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

@@ -493,7 +493,7 @@ export default {
 
 
 .file_box {
-    padding: 0 0 0 15px;
+   
     width: 100%;
     box-sizing: border-box;
     margin: 10px 0;
@@ -516,7 +516,7 @@ export default {
 }
 
 .file_item:hover{
-    background: #fff;
+  background: #fff;
 }
 
 .file_btns {

src/components/pages/test/add/components/timeBox/time.vue

@@ -1,78 +1,136 @@
 <template>
-    <div class="c_box">
-        <div class="mask"></div>
-        <div class="choice_box">
-            <div class="title" style="display: flex;">
-                <span>{{cJson.title }}</span>
-            </div>
-            <div class="detail" v-if="cJson.detail">{{ cJson.detail }}</div>
-        </div>
-    </div>
+  <div class="c_box">
+    <div class="mask" v-if="!isOpen"></div>
+    <div class="choice_box">
+      <div class="title" style="display: flex;">
+        <span @click.stop="updateTitle()" v-if="!updateList.title">{{ cJson.title }}</span>
+        <input v-if="updateList.title" ref="titleRef" class="editInput" v-model="checkJson.title" @blur="save" @keyup.enter="save" placeholder="请填写标题" />
+      </div>
+      <div class="detail" v-if="!updateList.detail" @click.stop="updateDetail()">{{ cJson.detail ? cJson.detail : "暂无描述" }}</div>
+			<input
+        v-if="updateList.detail"
+        ref="detailRef"
+        class="editInput"
+        v-model="checkJson.detail"
+        @blur="save"
+        style="margin-top: 10px;color: rgb(136, 139, 146);"
+        @keyup.enter="save"
+        placeholder="请填写描述"
+      />
+		</div>
+  </div>
 </template>
 
 <script>
 export default {
-    props: {
-        cJson: {
-            type: Object,
-        },
+  props: {
+    cJson: {
+      type: Object
     },
-    data() {
-        return {
-            option: {
-                1: { name: '附件' },
-                // 2: { name: '多选题' }
-            }
-        }
+    isOpen: {
+      type: Boolean,
+      default: false
     },
-}
+		index:{
+			type:String,
+			default:""
+		}
+  },
+  data() {
+    return {
+      option: {
+        1: { name: "附件" }
+        // 2: { name: '多选题' }
+      },
+      checkJson: {},
+      updateList: {
+        title: false,
+        detail: false
+      }
+    };
+  },
+  watch: {
+    checkJson: {
+      handler(newVal) {
+        // console.log("测试测试保存",newVal)
+        this.$emit("setJson", newVal,this.index);
+        console.log("gapW", this.cJson);
+      },
+      deep: true
+    }
+  },
+  methods: {
+    depthCopy(s) {
+      return JSON.parse(JSON.stringify(s));
+    },
+		updateTitle(){
+			this.updateList.title = true;
+			this.$nextTick(() => {
+        // 聚焦到输入框
+        this.$refs["titleRef"].focus();
+      });
+		},
+		updateDetail(){
+			this.updateList.detail = true;
+			this.$nextTick(() => {
+        // 聚焦到输入框
+        this.$refs["detailRef"].focus();
+      });
+		},
+		save() {
+      for (let key in this.updateList) {
+        this.updateList[key] = false;
+      }
+    }
+  },
+  mounted() {
+    if (!this.cJson || Object.keys(this.cJson).length == 0) {
+      this.checkJson = {
+        title: "标题",
+        detail: ""
+      };
+    } else {
+      this.checkJson = this.depthCopy(this.cJson);
+    }
+  }
+};
 </script>
 
 <style scoped>
-@import '../../global_styles.css';
-
-
-
-
-.choice_box>.detail {
-    width: 100%;
-    word-break: break-all;
-    color: rgb(136, 139, 146);
-    margin: 10px 0 0;
-}
-
-.choice_box>.choices {
-    margin-top: 10px;
+@import "../../global_styles.css";
+.choice_box > .choices {
+  margin-top: 10px;
 }
 
 .binfo_input {
-    width: 100%;
-    margin: 0;
-    padding: 10px;
-    display: block;
-    min-width: 0;
-    outline: none;
-    box-sizing: border-box;
-    background: none;
-    border: none;
-    border-radius: 5px;
-    background: #fff;
-    font-size: 16px;
-    resize: none;
-    font-family: 'Microsoft YaHei';
-    min-height: 120px;
-    /* border: 1px solid #3682fc00; */
-    border: 1.5px solid #e0e0e0;
+  width: 100%;
+  margin: 0;
+  padding: 10px;
+  display: block;
+  min-width: 0;
+  outline: none;
+  box-sizing: border-box;
+  background: none;
+  border: none;
+  border-radius: 5px;
+  background: #fff;
+  font-size: 16px;
+  resize: none;
+  font-family: "Microsoft YaHei";
+  min-height: 120px;
+  /* border: 1px solid #3682fc00; */
+  border: 1.5px solid #e0e0e0;
 }
 
-.binfo_input>div {
-    border: 1.5px dashed #dfdfdf;
-    height: 120px;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgb(249, 250, 251);
-    color: rgb(124, 124, 124);
-    border-radius: 5px;
-}</style>
+.binfo_input > div {
+  border: 1.5px dashed #dfdfdf;
+  height: 120px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgb(249, 250, 251);
+  color: rgb(124, 124, 124);
+  border-radius: 5px;
+}
+</style>

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

@@ -295,7 +295,9 @@ Instruction: Based on the context, follow "Format example", write content
           userId: this.userId,
           file_ids: [fileId],
           model: "gpt-4o-mini"
+          // model: "gpt-4o-2024-08-06"
         };
+				console.log(params)
         this.ajax
           // .post("https://gpt4.cocorobo.cn/chat", params)
           // .post("https://claude3.cocorobo.cn/chat", params)

src/components/pages/test/add/global_styles.css

@@ -28,6 +28,13 @@
 	margin-top:10px;
 }
 
+.choice_box > .detail {
+  width: 100%;
+  word-break: break-all;
+  color: rgb(136, 139, 146);
+  margin: 10px 0 0;
+}
+
 .set_box{
 	border: 1px solid #CAD1DC;
 	padding: 8px;
@@ -35,4 +42,61 @@
 	box-sizing: border-box;
 	width: 100%;
 	color: #828282;
-}
+}
+
+.isOpen_box{
+	z-index: 3;
+	width: 100%;
+	
+}
+
+.isOpen_scoreInput{
+	max-width: 120px;
+}
+
+.editInput {
+  font-size: 16px;
+  font-weight: bold;
+  text-align: left;
+  width: 100%;
+  border: none;
+  outline: none;
+	font-weight: bold;
+}
+
+.editInput::placeholder{
+	font-size: 15px !important;
+	font-weight: bold;
+	text-align: left;
+	line-height: normal;
+  vertical-align: middle;
+}
+
+.answerInput{
+	color: #efa030;
+	font-size: 16px;
+}
+
+.choiceInput>>> .el-checkbox__inner{
+	background-color: #fff !important;
+	border: 1px solid #DCDFE6;
+	cursor: pointer !important;
+}
+
+.choiceInput>>> .is-checked>.el-checkbox__inner{
+	background-color: #409EFF !important;
+	border: 1px solid #409EFF !important;
+	color: #fff !important;
+}
+
+.choiceInput>>> .el-radio__inner{
+	background-color: #fff !important;
+	border: 1px solid #DCDFE6;
+	cursor: pointer !important;
+}
+
+.choiceInput>>> .is-checked>.el-radio__inner{
+	background-color: #409EFF !important;
+	border: 1px solid #409EFF !important;
+	color: #fff !important;
+}