调研宝

在已有的题目页中间插入增加新的题目页 https://www.xiaopiu.com/h5/byId?type=project&id=5df1b5a78a345d79dde97211&isprd=true

src/views/h5editor/overview.vue

@@ -2,10 +2,18 @@
   <div class="overview">
     <!-- 顶部tag -->
     <div class="preview-tag">
-      <div class="page-tag-btn tagPage" :class="{ active: viewState === 0 }" @click="function () { viewState = 0 }">
+      <div
+        class="page-tag-btn tagPage"
+        :class="{ active: viewState === 0 }"
+        @click="function () { viewState = 0 }"
+      >
         <div class="page-tag-btn-tip">页面</div>
       </div>
-      <div class="page-tag-btn tagElement" :class="{ active: viewState === 1 }" @click="function () { viewState = 1 }">
+      <div
+        class="page-tag-btn tagElement"
+        :class="{ active: viewState === 1 }"
+        @click="function () { viewState = 1 }"
+      >
         <div class="page-tag-btn-tip">元素</div>
       </div>
     </div>
@@ -13,35 +21,58 @@
     <div class="page-preview" style="z-index: 1;">
       <ul class="list custom-scrollbar">
         <li class="cover">
-          <img class="page_preview_tag" src="../../assets/images/page_preview_tag.png" alt="">
+          <img class="page_preview_tag" src="../../assets/images/page_preview_tag.png" alt />
           <div class="page_preview_tag_title">封面</div>
           <div class="item-page" v-for="(page,index) in pages" v-show="index==0">
             <span>1</span>
-            <div class="page" :class="{ active: page === editingPage }"
+            <div
+              class="page"
+              :class="{ active: page === editingPage }"
               :style="{ width: 70 + 4 + 'px', height: (70 / canvasWidth) * canvasHeight + 4 + 'px' }"
-              @click="setEditingPage(page,0)" @click.right="rightEvent()">
-              <Page :isOverView="true" class="content" :hideFoot="true"
+              @click="setEditingPage(page,0)"
+              @click.right="rightEvent()"
+            >
+              <Page
+                :isOverView="true"
+                class="content"
+                :hideFoot="true"
                 :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', transform: 'scale(' + 70 / canvasWidth +')',backgroundColor: bodyBackgroundColor }"
-                :elements="page.elements" type="see" />
+                :elements="page.elements"
+                type="see"
+              />
             </div>
           </div>
         </li>
         <li class="cover">
-          <img class="page_preview_tag" src="../../assets/images/page_preview_tag.png" alt="">
+          <img class="page_preview_tag" src="../../assets/images/page_preview_tag.png" alt />
           <div class="page_preview_tag_title">题目</div>
           <div class="item-page" v-for="(page,index) in pages" v-show="isShow(index)">
             <span>{{index + 1 }}</span>
-            <div class="page" :class="{ active: page === editingPage }"
+            <div
+              class="page"
+              :class="{ active: page === editingPage }"
               :style="{ width: 70 + 4 + 'px', height: (70 / canvasWidth) * canvasHeight + 4 + 'px' }"
-              @click="setEditingPage(page,index)">
-              <Page :isOverView="true" class="content" :hideFoot="true"
+              @click="setEditingPage(page,index)"
+            >
+              <Page
+                :isOverView="true"
+                class="content"
+                :hideFoot="true"
                 :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', transform: 'scale(' + 70 / canvasWidth +')',backgroundColor: bodyBackgroundColor }"
-                :elements="page.elements" type="see" />
+                :elements="page.elements"
+                type="see"
+              />
             </div>
-            <el-dropdown placement="bottom" trigger="click" class="operation"
-              @command="command=>operationCommand(command, page, index)">
+            <el-dropdown
+              placement="bottom"
+              trigger="click"
+              class="operation"
+              @command="command=>operationCommand(command, page, index)"
+            >
               <div class="operation_img"></div>
               <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item command="insertBottom">向下插入新页面</el-dropdown-item>
+                <el-dropdown-item command="insertTop">向上插入新页面</el-dropdown-item>
                 <el-dropdown-item command="del">删除</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
@@ -49,19 +80,31 @@
           <div class="item-page-add" @click="addPage">添加题目页</div>
         </li>
         <li class="cover">
-          <img class="page_preview_tag" src="../../assets/images/page_preview_tag.png" alt="">
+          <img class="page_preview_tag" src="../../assets/images/page_preview_tag.png" alt />
           <div class="page_preview_tag_title">结论</div>
           <div class="item-page" v-for="(page,index) in pages" v-show="isShowResult(index)">
             <span>{{index + 1}}</span>
-            <div class="page" :class="{ active: page === editingPage }"
+            <div
+              class="page"
+              :class="{ active: page === editingPage }"
               :style="{ width: 70 + 4 + 'px', height: (70 / canvasWidth) * canvasHeight + 4 + 'px' }"
-              @click="setEditingPage(page,index)">
-              <Page :isOverView="true" class="content" :hideFoot="true"
+              @click="setEditingPage(page,index)"
+            >
+              <Page
+                :isOverView="true"
+                class="content"
+                :hideFoot="true"
                 :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', transform: 'scale(' + 70 / canvasWidth +')',backgroundColor: bodyBackgroundColor }"
-                :elements="page.elements" type="see" />
+                :elements="page.elements"
+                type="see"
+              />
             </div>
-            <el-dropdown placement="bottom" trigger="click" class="operation"
-              @command="command=>operationCommand(command, page, index)">
+            <el-dropdown
+              placement="bottom"
+              trigger="click"
+              class="operation"
+              @command="command=>operationCommand(command, page, index)"
+            >
               <div class="operation_img"></div>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item command="del">删除</el-dropdown-item>
@@ -73,32 +116,52 @@
       </ul>
     </div>
     <!-- 图层 -->
-    <div class="list custom-scrollbar" style="z-index: 2;" v-show="viewState === 1"
-      :class="{ dragging: dragState === 1 }">
+    <div
+      class="list custom-scrollbar"
+      style="z-index: 2;"
+      v-show="viewState === 1"
+      :class="{ dragging: dragState === 1 }"
+    >
       <ul>
         <li v-for="(layer, index) in layersNoBg" :key="index">
-          <div class="layer" :class="{ active: editingLayer === layer}" @mousedown="moveLayer($event,layer)">
-            <span class="thumb" :style="{ backgroundImage: 'url(' + layer.imgSrc + ')' }"></span>{{ layer.type }}
+          <div
+            class="layer"
+            :class="{ active: editingLayer === layer}"
+            @mousedown="moveLayer($event,layer)"
+          >
+            <span class="thumb" :style="{ backgroundImage: 'url(' + layer.imgSrc + ')' }"></span>
+            {{ layer.type }}
           </div>
         </li>
       </ul>
-      <div v-for="(layer, index) in layersBg" :key="index" class="layer" :class="{ active: editingLayer === layer}"
-        @click="setEditingLayer(layer)">
-        <span class="thumb" :style="{ backgroundImage: 'url(' + layer.imgSrc + ')' }"></span>{{ layer.type }}
+      <div
+        v-for="(layer, index) in layersBg"
+        :key="index"
+        class="layer"
+        :class="{ active: editingLayer === layer}"
+        @click="setEditingLayer(layer)"
+      >
+        <span class="thumb" :style="{ backgroundImage: 'url(' + layer.imgSrc + ')' }"></span>
+        {{ layer.type }}
       </div>
     </div>
     <!-- 题目 -->
     <div class="topic-list" v-if="isShowQuestion">
       <div class="topic-top" @click="showTopic = !showTopic">
         <span>题目列表</span>
-        <img class="topic-top-arrow" :src="topicIcon" alt="">
+        <img class="topic-top-arrow" :src="topicIcon" alt />
       </div>
       <el-collapse-transition>
         <div v-show="showTopic">
           <div class="topic-group">
-            <el-checkbox v-model="item.isChecked" v-for="(item, index) in questionList" :label="item.name" :key="index"
-              @change="checked=>selectCheckbox(checked,item,index)" :disabled="isDisabled(index)">
-            </el-checkbox>
+            <el-checkbox
+              v-model="item.isChecked"
+              v-for="(item, index) in questionList"
+              :label="item.name"
+              :key="index"
+              @change="checked=>selectCheckbox(checked,item,index)"
+              :disabled="isDisabled(index)"
+            ></el-checkbox>
           </div>
         </div>
       </el-collapse-transition>
@@ -177,14 +240,34 @@ export default {
     },
     editingLayer() {
       return this.vxEditor["editorElement"];
-    },
+    }
   },
   methods: {
     operationCommand(command, page, index) {
       if (command == "del") {
         console.log("删除", index);
         this.deletePage(page, index);
+      } else if (command == "insertTop") {
+        console.log("插入", index);
+        this.insertPage(page, index, true);
+      } else if (command == "insertBottom") {
+        this.insertPage(page, index, false);
+      }
+    },
+    //插入题目页
+    insertPage(page, index, isTop) {
+      this.bodyBackgroundColor =
+        this.$store.state.editor.editorTheme.bodyBackgroundColor ||
+        "rgba(255,255,255,0)";
+      if (isTop) {
+        var position = index ;
+      } else {
+        var position = index + 1;
       }
+      this.$store.dispatch("addPagePosition", position);
+      this.isShowQuestion = true;
+      this.selectQuestions.push([]);
+      this.currentPage += 1;
     },
     isChecked(index) {
       var question = this.questionList[index].questionId;
@@ -475,7 +558,7 @@ export default {
       this.$store.dispatch("sortElementsByZindex");
     }
   },
-  components: { Page},
+  components: { Page },
   watch: {
     showTopic: function(val) {
       if (val) {