页面修改

src/components/editor/UeEditor.vue

@@ -145,10 +145,17 @@
           `${this.ViewDomain + '/read.html?fileName=' + item.fileName + '&url=' + fileUrl + '&fileType=' + iconObj.fileType}`;
         var linkAttr = "";
         if (iconObj.fileType == 1 || iconObj.fileType == 2 || iconObj.fileType == 3) {
-          linkAttr = ` class='attachNew' dataUrl='${dataUrl}'`;
+          linkAttr = ` class='attachNew' accessKey='${dataUrl}'`;
         }
-        return `<p '${linkAttr}'><span contenteditable="false" style="display:-webkit-box;margin-top:10px;background: #F7F8FA;padding: 14px 16px;max-width: 572px;overflow: hidden;cursor:pointer;-webkit-box-align: center;text-align:left;cursor:pointer;" name="${iconObj.dataType}" data="${item.fileName}">` +
-          `<img src="${iconObj.iconUrl}" style="width:42px; height:42px; overflow:hidden; margin-right:14px;border-radius:4px;"><span style="font-size:14px; color:#181E33; line-height:20px; display:block; overflow:hidden;  text-overflow:ellipsis;">${item.fileName}</span></span></p>`;
+       var str=
+        `<p ${linkAttr}>
+          <span ${linkAttr} contenteditable="false" style="display:-webkit-box;margin-top:10px;background: #F7F8FA;padding: 14px 16px;max-width: 572px;overflow: hidden;cursor:pointer;-webkit-box-align: center;text-align:left;cursor:pointer;" name="${iconObj.dataType}" data="${item.fileName}">
+            <img ${linkAttr} src="${iconObj.iconUrl}" style="width:42px; height:42px; overflow:hidden; margin-right:14px;border-radius:4px;">
+            <span ${linkAttr} style="font-size:14px; color:#181E33; line-height:20px; display:block; overflow:hidden;  text-overflow:ellipsis;">${item.fileName}</span>
+          </span>
+         </p>`;
+         console.log("str",str);
+         return str;
       },
       //获取文件图标和类型
       getIcon(fileName) {

src/components/questiontype/v-cloze.vue

+<!--完型填空-->
+<style>
+  .clozeQuestion {
+    width: 100%;
+  }
+
+  .clozeQuestion .question_Title {
+    color: #A8A8B3;
+    font-size: 12px;
+    margin-top: 20px;
+  }
+
+  .clozeQuestion .clozeTest_question_tit {
+    width: 100%;
+    height: 40px;
+    background: #F7F8FA;
+    padding: 0 20px;
+    line-height: 40px;
+    font-size: 14px;
+    color: #646873;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .clozeQuestion .clozeTest_question_tit i {
+    color: #acbfd9;
+    cursor: pointer;
+  }
+
+  .clozeQuestion .add_LiteBtn {
+    width: 100px;
+    height: 30px;
+    display: inline-block;
+    box-shadow: 0 3px 12px 0 rgba(39, 125, 255, 0.30);
+    color: #FFFFFF;
+    text-align: center;
+    line-height: 30px;
+    border-radius: 20px;
+    cursor: pointer;
+    background-color: #2961fe;
+    margin-bottom: 20px;
+  }
+
+  .clozeQuestion .add_LiteBtn:hover {
+    opacity: 0.8;
+  }
+
+</style>
+<template>
+  <div class="clozeQuestion">
+    <div class="question_Title">小题数：{{data.length}}</div>
+    <template v-if="data&&data.length>0" v-for="(item,index) in data">
+      <table class="common_TiTable">
+        <thead>
+          <tr>
+            <th colspan="3">
+              <div class="clozeTest_question_tit" @click="showNav(index)">
+                <div>
+                  <i class="iconfont icon-arrowdown2" v-if="(commonIndex==index)&&!isShow"></i>
+                  <i class="iconfont icon-arrowright" v-else></i>
+                  第{{index+1}}小题
+                </div>
+                <div>
+                  <i class="iconfont icon-img_delete_small" @click.stop="deleteQuestion(index)"></i>
+                </div>
+              </div>
+            </th>
+          </tr>
+        </thead>
+        <tbody class="contant" v-if="(commonIndex==index)&&!isShow">
+          <tr v-for="(subItem,subIndex) in item">
+            <td style="width:40px;text-align:center;">
+              <div class="Answer_List" @click="ChangeItem(item,subItem)" :class="{'Is_Answer':subItem.IsAnswer}">
+                {{subItem.Name}}
+              </div>
+            </td>
+            <td>
+              <div class="InpDIV" v-html="subItem.Content" v-if="childIndex!=subIndex" @click="changeEdit(subIndex)">
+              </div>
+              <UeEditor v-model="subItem.Content" :config="config" v-else></UeEditor>
+            </td>
+            <td style="width:40px;text-align:center;">
+              <i class="iconfont icon-guanbi Tiku_DelIcon" @click="deleteOpion(item,subIndex)"></i>
+            </td>
+          </tr>
+        </tbody>
+        <tfoot>
+          <tr>
+            <td colspan="3">
+              <a class="addTiMuList" @click="addOption(item)">
+                <i class="iconfont icon-add"></i>添加选项
+              </a>
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </template>
+    <a class="add_LiteBtn" @click="addQuestion()">
+      +添加小题
+    </a>
+  </div>
+</template>
+<script>
+  import {
+    getOptionList, //获取选择标签【A,B,C,D....】
+    optionListConfig,
+  } from '../../api/question/questionconfig'
+  import UeEditor from '../editor/UeEditor'
+  export default {
+    props: {
+      questionData: {
+        type: Array,
+      },
+      setOption: {
+        type: Object,
+      }
+    },
+    components: {
+      UeEditor
+    },
+    data() {
+      return {
+        data: this.questionData,
+        config: {
+          initialFrameWidth: null,
+          initialFrameHeight: 80,
+        },
+        optionTitleList: [],
+        showTag: true,
+        commonIndex: -1,
+        childIndex: -1,
+        isShow: true,
+        commonIndex2: -2,
+      };
+    },
+    created() {
+      this.initConfig();
+    },
+    methods: {
+      initConfig() {
+        this.optionTitleList = getOptionList();
+      },
+      //删除小问题
+      deleteQuestion(index) {
+        this.$q.dialog({
+          title: "删除小题",
+          message: "确实要删除该小题吗？",
+          persistent: true,
+          cancel: {
+            label: "取消",
+            flat: true
+          },
+          ok: {
+            label: "确认",
+            flat: true,
+            focus: true
+          }
+        }).onOk(() => {
+          this.data.splice(index, 1);
+        });
+      },
+      //删除选项
+      deleteOpion(item, index) {
+        this.$q.dialog({
+          title: "删除小题",
+          message: "确实要删除该选项吗？",
+          persistent: true,
+          cancel: {
+            label: "取消",
+            flat: true
+          },
+          ok: {
+            label: "确认",
+            flat: true,
+            focus: true
+          }
+        }).onOk(() => {
+          item.splice(index, 1);
+          this.childIndex = -1;
+          this.calcOptionTitle();
+        });
+      },
+      //新增选项
+      addOption(item) {
+        if (item.length < 7) {
+          item.push({
+            Name: "",
+            Content: "",
+            IsAnswer: false
+          });
+          this.calcOptionTitle()
+        } else {
+          this.$q.notify({
+            type: 'warning',
+            position: 'center',
+            timeout: 1500,
+            message: `最多只能添加7个选项`
+          })
+          return
+        }
+      },
+      //添加小题
+      addQuestion() {
+        this.data.push(optionListConfig());
+      },
+      //重新计算选择Title[A,B,C,D....]
+      calcOptionTitle() {
+        if (this.data && this.data.length > 0) {
+          this.data.forEach((item, index) => {
+            item.forEach((subItem, subIndex) => {
+              subItem.Name = this.optionTitleList[subIndex];
+            })
+          })
+        }
+      },
+      //返回数据到父组件
+      returnDataToParent() {
+        this.getAnswer();
+        this.$emit('getChild', this.data);
+      },
+      //获取答案
+      getAnswer() {
+        this.setOption.Answer = "";
+        if (this.data && this.data.length > 0) {
+          var answer = "";
+          this.data.forEach((item) => {
+            item.forEach((subItem) => {
+              if (subItem.IsAnswer) {
+                answer += "," + subItem.Name;
+              }
+            })
+          })
+          if (answer != "") {
+            answer = answer.substring(1);
+          }
+          this.setOption.Answer = answer;
+        }
+      },
+      ChangeItem(item, subItem) {
+        if (item && item.length > 0) {
+          item.forEach(childItem => {
+            childItem.IsAnswer = false;
+          })
+        }
+        subItem.IsAnswer = true;
+      },
+      //点击展开收起
+      showNav(index) {
+        if (this.commonIndex2 == index) {
+          this.commonIndex = index;
+          this.isShow = !this.isShow;
+        } else {
+          this.commonIndex = index;
+          this.isShow = false;
+          this.commonIndex2 = index;
+        }
+      },
+      //点击切换输入
+      changeEdit(index) {
+        this.childIndex = index;
+      }
+    },
+    mounted() {
+
+    },
+    watch: {
+      data: {
+        handler(newValue) {
+          this.returnDataToParent();
+        },
+        deep: true
+      },
+    }
+  };
+
+</script>