图片模板单选多选增加多个选项 录入和预览效果

src/components/Adult/common/HzModule.vue

@@ -12,7 +12,67 @@
         :uploadType="'image'"
       />
     </div>
-    <template>
+    <template v-if="type == 'image_single' || type == 'image_checkBox'">
+      <div v-for="(item, i) in curQueItem.option" :key="'op' + i">
+        <div class="adult-book-input-item">
+          <span class="adult-book-lable">内容：</span>
+          <el-input
+            type="textarea"
+            class="adult-book-input"
+            :autosize="{ minRows: 2 }"
+            placeholder="请输入文字"
+            v-model="item.hanzi"
+            @blur="onBlur(item, 'hanzi')"
+            maxlength="200"
+            show-word-limit
+          ></el-input>
+          <div v-if="checkList.indexOf('image_single') > -1">
+            <el-radio
+              @change="changeIsAnswer('single',i)"
+              v-model="item.isAnswer"
+              :label="i"
+              >答案</el-radio
+            >
+          </div>
+          <div v-if="checkList.indexOf('image_checkBox') > -1">
+            <el-checkbox
+              @change="changeIsAnswer('checkBox',i)"
+              v-model="item.isChecked"
+              :label="i"
+              >答案</el-checkbox
+            >
+          </div>
+          <img
+            @click="childdeleteoption(index, i)"
+            class="close"
+            src="../../../assets/adult/del-close.png"
+            alt=""
+          />
+        </div>
+        <div class="adult-book-input-item">
+          <span class="adult-book-lable">拼音：</span>
+          <el-input
+            type="textarea"
+            class="adult-book-input"
+            :autosize="{ minRows: 2 }"
+            placeholder="请输入拼音"
+            v-model="item.pinyin"
+            @blur="onBlur(item, 'pinyin')"
+            maxlength="200"
+            show-word-limit
+          ></el-input>
+          <el-button @click="getPinyin(item)">生成拼音</el-button>
+        </div>
+      </div>
+      <div
+        v-if="type == 'image_single' || type == 'image_checkBox'"
+        class="addoption"
+        @click="childaddOption(index)"
+      >
+        添加选项
+      </div>
+    </template>
+    <template v-else>
       <div class="adult-book-input-item">
         <span class="adult-book-lable">内容：</span>
         <el-input
@@ -66,13 +126,6 @@
         </div>
       </div>
       <div class="adult-book-input-item">
-        <span class="adult-book-lable">文字位置：</span>
-        <el-radio-group v-model="curQueItem.hanziSite">
-          <el-radio label="top">图片上方</el-radio>
-          <el-radio label="bottom">图片下方</el-radio>
-        </el-radio-group>
-      </div>
-      <div class="adult-book-input-item">
         <span class="adult-book-lable">拼音：</span>
         <el-input
           type="textarea"
@@ -86,14 +139,21 @@
         ></el-input>
         <el-button @click="getPinyin(curQueItem)">生成拼音</el-button>
       </div>
-      <div class="adult-book-input-item">
-        <span class="adult-book-lable">拼音位置：</span>
-        <el-radio-group v-model="curQueItem.pinyinSite">
-          <el-radio label="top">文字上方</el-radio>
-          <el-radio label="bottom">文字下方</el-radio>
-        </el-radio-group>
-      </div>
     </template>
+    <div class="adult-book-input-item">
+      <span class="adult-book-lable">文字位置：</span>
+      <el-radio-group v-model="curQueItem.hanziSite">
+        <el-radio label="top">图片上方</el-radio>
+        <el-radio label="bottom">图片下方</el-radio>
+      </el-radio-group>
+    </div>
+    <div class="adult-book-input-item">
+      <span class="adult-book-lable">拼音位置：</span>
+      <el-radio-group v-model="curQueItem.pinyinSite">
+        <el-radio label="top">文字上方</el-radio>
+        <el-radio label="bottom">文字下方</el-radio>
+      </el-radio-group>
+    </div>
     <div
       style="margin-top: 10px"
       class="adult-book-input-item"
@@ -191,6 +251,8 @@ export default {
     "deleteOptionOne",
     "checkList",
     "type",
+    "addOption",
+    "deleteoption",
   ],
   data() {
     return {
@@ -216,6 +278,12 @@ export default {
   },
   //方法集合
   methods: {
+    childaddOption(index) {
+      this.addOption(index);
+    },
+    childdeleteoption(index, i) {
+      this.deleteoption(index, i);
+    },
     onBlur(item, field) {
       item[field] = item[field] ? item[field].trim() : "";
     },
@@ -229,19 +297,9 @@ export default {
         this.$forceUpdate();
       }
     },
-    //   删除当前选项
-    deleteOption() {
-      this.$confirm("确定要删除此选项吗?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      }).then(() => {
-        // this.deleteOptionOne(this.index);
-      });
-    },
     //   修改正确答案
-    changeIsAnswer(type) {
-      this.changAnswer(this.index, type);
+    changeIsAnswer(type,i) {
+      this.changAnswer(this.index, type,i);
     },
     // 点击生成拼音
     getPinyin(item) {
@@ -368,7 +426,7 @@ export default {
     // align-items: center;
 
     > div {
-      display: flex;
+      // display: flex;
       justify-content: flex-start;
       align-items: center;
       margin-right: 10px;
@@ -394,6 +452,19 @@ export default {
       width: 50px;
     }
   }
+  .addoption {
+    width: 148px;
+    height: 40px;
+    background: #f3f3f3;
+    border: 1px dashed rgba(0, 0, 0, 0.15);
+    box-sizing: border-box;
+    border-radius: 4px;
+    text-align: center;
+    line-height: 40px;
+    cursor: pointer;
+    font-size: 14px;
+    color: #000000;
+  }
 }
 </style>
 <style lang="scss">

src/components/Adult/inputModules/Picture.vue

@@ -27,9 +27,22 @@
         :checkList="checkList"
         :deleteOptionOne="deleteOptionOne"
         :type="type"
+        :addOption="addOption"
+        :deleteoption="deleteoption"
       />
+      <div v-if="type == 'image_single' || type == 'image_checkBox'">
+        <span style="margin: 0 10px">请选择每行选项数量</span>
+        <el-select v-model="curQue.numberList.con" placeholder="请选择">
+          <el-option
+            v-for="(item, i) in curQue.numberList.arr"
+            :key="i"
+            :label="item.value"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </div>
     </div>
-    <!-- <div class="addoption" @click="addOption">添加</div> -->
     <!-- <div class="Big-Book-divide">
       <el-divider content-position="center">功能设置</el-divider>
     </div>
@@ -72,6 +85,18 @@ export default {
             pinyinSite: "",
             hanziSite: "",
             RecordControl: "", //选择 音频控件
+            option: [
+              {
+                hanzi: "",
+                pinyin: "",
+                isAnswer: "",
+              },
+              {
+                hanzi: "",
+                pinyin: "",
+                isAnswer: "",
+              },
+            ],
           },
         ],
         correct: [
@@ -163,19 +188,33 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    // 删除一个选项
+    deleteoption(index, i) {
+      if (this.curQue.option[index].option.length <= 2) {
+        this.$message.warning("至少保留两个选项");
+        return;
+      }
+      this.$confirm("确定要删除此选项吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        this.curQue.option[index].option.splice(i, 1);
+      });
+    },
     //添加一个选项
-    addOption() {
-      let leg = this.curQue.option.length;
-      let last = this.curQue.option[leg - 1];
-      // if (!last.hanzi && !last.pinyin && !last.definition_list[0]) {
-      //   this.$message.warning("数据不能全是空");
-      //   return;
-      // }
-      let type = this.curQue.type;
-      let cur_fn_data_arr = this.fn_data.filter((item) => item.type == type);
-      let cur_fn_data = JSON.parse(JSON.stringify(cur_fn_data_arr[0]));
-      let obj = cur_fn_data.data_structure.option[0];
-      this.curQue.option.push(obj);
+    addOption(index) {
+      // let leg = this.curQue.option.length;
+      // let last = this.curQue.option[leg - 1];
+      // // if (!last.hanzi && !last.pinyin && !last.definition_list[0]) {
+      // //   this.$message.warning("数据不能全是空");
+      // //   return;
+      // // }
+      // let type = this.curQue.type;
+      // let cur_fn_data_arr = this.fn_data.filter((item) => item.type == type);
+      // let cur_fn_data = JSON.parse(JSON.stringify(cur_fn_data_arr[0]));
+      let obj = this.data_structure.option[0].option[0];
+      this.curQue.option[index].option.push(obj);
     },
     //选择功能设置
     handleCheckedFnChange(value) {
@@ -248,20 +287,28 @@ export default {
       this.curQue.correct = JSON.parse(JSON.stringify(correct));
     },
     // 修改正确选项中得某一个为正确答案
-    changAnswer(index, type) {
+    changAnswer(index, type, opi) {
       if (type == "single") {
         this.curQue.option.forEach((item, i) => {
           if (index == i) {
-            this.curQue.correct[0].single = [i];
-          } else {
-            item.isAnswer = "";
+            item.option.forEach((it, ii) => {
+              if (opi == ii) {
+                this.curQue.correct[0].single = [ii];
+              } else {
+                it.isAnswer = "";
+              }
+            });
           }
         });
       } else if (type == "checkBox") {
         let correct = [];
         this.curQue.option.forEach((item, i) => {
-          if (item.isChecked) {
-            correct.push(i);
+          if (index == i) {
+            item.option.forEach((it, ii) => {
+              if (it.isChecked) {
+                correct.push(ii);
+              }
+            });
           }
         });
         this.curQue.correct[0].checkBox = correct;

src/components/Adult/preview/Picture.vue

@@ -3,23 +3,77 @@
   <div :class="['Big-Book-PictureBox']" v-if="curQue && curQue.Bookanswer">
     <!-- <ul class="Big-Book-PictureBox-item" v-for="(item,index) in curQue.queList" :key="index"> -->
     <li v-for="(items, indexs) in curQue.option" :key="indexs">
-      <template v-if="ChildType != 'image_gdcy' && items.hanziSite == 'top'">
-        <div class="hanzi-box hanzi-box-top" v-if="items.pinyin || items.hanzi">
-          <span
-            v-if="
-              items.pinyin && (!items.pinyinSite || items.pinyinSite == 'top')
-            "
-            class="pinyin"
-            >{{ items.pinyin }}</span
-          >
-          <p v-if="items.hanzi">{{ items.hanzi }}</p>
-          <span
-            v-if="items.pinyin && items.pinyinSite == 'bottom'"
-            class="pinyin"
-            >{{ items.pinyin }}</span
+      <template
+        v-if="ChildType == 'image_single' || ChildType == 'image_checkBox'"
+      >
+        <div class="option_main">
+          <div
+            v-for="(itemss, indexss) in items.option"
+            :key="'op' + indexss"
+            :class="['xxoption', 'option' + curQue.numberList.con]"
           >
+            <!-- 单选 -->
+            <template v-if="ChildType == 'image_single'">
+              <el-radio
+                v-model="curQue.Bookanswer[0].singleRadio"
+                :label="indexss"
+                :disabled="TaskModel == 'ANSWER'"
+                ><span></span
+              ></el-radio>
+            </template>
+            <!-- 复选 -->
+            <template v-if="ChildType == 'image_checkBox'">
+              <el-checkbox
+                v-model="curQue.Bookanswer[0].singlechecked"
+                :label="indexss"
+                :disabled="TaskModel == 'ANSWER'"
+                ><span></span
+              ></el-checkbox>
+            </template>
+            <div
+              class="hanzi-box hanzi-box-top"
+              v-if="itemss.pinyin || itemss.hanzi"
+            >
+              <span
+                v-if="
+                  itemss.pinyin &&
+                  (!items.pinyinSite || items.pinyinSite == 'top')
+                "
+                class="pinyin"
+                >{{ itemss.pinyin }}</span
+              >
+              <p v-if="itemss.hanzi">{{ itemss.hanzi }}</p>
+              <span
+                v-if="itemss.pinyin && items.pinyinSite == 'bottom'"
+                class="pinyin"
+                >{{ itemss.pinyin }}</span
+              >
+            </div>
+          </div>
         </div>
       </template>
+      <template v-else>
+        <template v-if="ChildType != 'image_gdcy' && items.hanziSite == 'top'">
+          <div
+            class="hanzi-box hanzi-box-top"
+            v-if="items.pinyin || items.hanzi"
+          >
+            <span
+              v-if="
+                items.pinyin && (!items.pinyinSite || items.pinyinSite == 'top')
+              "
+              class="pinyin"
+              >{{ items.pinyin }}</span
+            >
+            <p v-if="items.hanzi">{{ items.hanzi }}</p>
+            <span
+              v-if="items.pinyin && items.pinyinSite == 'bottom'"
+              class="pinyin"
+              >{{ items.pinyin }}</span
+            >
+          </div>
+        </template>
+      </template>
       <div v-for="(itemss, indexss) in items.img_list" :key="indexss">
         <el-image
           :src="itemss.url"
@@ -125,23 +179,6 @@
           ></a>
         </div>
       </template>
-      <!-- 单选 -->
-      <template v-if="ChildType == 'image_single'">
-        <el-radio
-          v-model="curQue.Bookanswer[0].singleRadio"
-          label="1"
-          :disabled="TaskModel == 'ANSWER'"
-          ><span></span
-        ></el-radio>
-      </template>
-      <!-- 复选 -->
-      <template v-if="ChildType == 'image_checkBox'">
-        <el-checkbox
-          v-model="curQue.Bookanswer[0].singlechecked"
-          :disabled="TaskModel == 'ANSWER'"
-          ><span></span
-        ></el-checkbox>
-      </template>
       <!-- 三件套 -->
       <div
         class="luyinVoice-box"
@@ -189,7 +226,7 @@ export default {
         // dInput: ["", ""], //双输入
         judge: "", // 判断
         singleRadio: "",
-        singlechecked: false,
+        singlechecked: [],
         recordList: [],
       }, // 记录用户答题内容
       recorder: new Recorder({
@@ -343,6 +380,28 @@ export default {
     border-radius: 8px;
     border: 1px solid rgba(0, 0, 0, 0.1);
     background: #fff;
+    .option_main {
+      display: flex;
+      flex-wrap: wrap;
+      .xxoption {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .option1 {
+        width: 100%;
+      }
+      .option2 {
+        width: 50%;
+      }
+      .option3 {
+        width: 33.33%;
+      }
+      .option4 {
+        width: 25%;
+      }
+    }
+
     .hanzi-box {
       margin-top: 8px;
       &.hanzi-box-top {
@@ -464,11 +523,12 @@ export default {
     }
     .el-radio,
     .el-checkbox {
-      width: 100%;
-      margin: 8px 0 0;
-      text-align: center;
-      height: 32px;
-      line-height: 32px;
+      // width: 100%;
+      // margin: 8px 0 0;
+      // text-align: center;
+      // height: 32px;
+      // line-height: 32px;
+      margin-right: 8px;
     }
     .judge-box {
       margin-top: 8px;