删除UI调整

src/views/h5editor/overview.vue

@@ -19,7 +19,7 @@
             <span>1</span>
             <div class="page" :class="{ active: pages[0] === editingPage }"
               :style="{ width: 70 + 4 + 'px', height: (70 / canvasWidth) * canvasHeight + 4 + 'px' }"
-              @click="setEditingPage(pages[0],0)">
+              @click="setEditingPage(pages[0],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="pages[0].elements" type="see" />
@@ -38,7 +38,13 @@
                 :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', transform: 'scale(' + 70 / canvasWidth +')',backgroundColor: bodyBackgroundColor }"
                 :elements="page.elements" type="see" />
             </div>
-            <span @click="deletePage(page,index)">删除</span>
+            <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>
+              </el-dropdown-menu>
+            </el-dropdown>
           </div>
           <div class="item-page-add" @click="addPage">添加题目页</div>
         </li>
@@ -54,6 +60,13 @@
                 :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', transform: 'scale(' + 70 / canvasWidth +')',backgroundColor: bodyBackgroundColor }"
                 :elements="page.elements" type="see" />
             </div>
+            <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>
+              </el-dropdown-menu>
+            </el-dropdown>
           </div>
           <div class="item-page-add" @click="addResultPage">添加结论页</div>
         </li>
@@ -169,6 +182,12 @@ export default {
     }
   },
   methods: {
+    operationCommand(command, page, index) {
+      if (command == "del") {
+        console.log("删除", index);
+        this.deletePage(page, index);
+      }
+    },
     isChecked(index) {
       var question = this.questionList[index].questionId;
       var arrTemp = [];
@@ -365,6 +384,15 @@ export default {
       this.$store.dispatch("copyPage", page);
     },
     deletePage(page, index) {
+      var qusetionCount = this.pages.length - this.resultPageCount;
+      if (qusetionCount <= index) {
+        console.log("删除结论页", index, qusetionCount);
+        this.$store.dispatch("delPage", page);
+        this.resultPageCount -= 1;
+        return;
+      }
+
+      console.log("删除提目", index, qusetionCount);
       this.$msgbox({
         title: "删除",
         message: "删除后不可撤回，确定删除？",
@@ -373,8 +401,6 @@ export default {
         cancelButtonText: "取消",
         beforeClose: (action, instance, done) => {
           if (action === "confirm") {
-            instance.confirmButtonLoading = true;
-            instance.confirmButtonText = "执行中...";
             var pageSlelctQ = this.selectQuestions[index - 1] || [];
             var deleteList = [];
             for (var i = 0; i < pageSlelctQ.length; i++) {
@@ -585,6 +611,7 @@ export default {
         color: rgba(255, 255, 255, 1);
       }
       .item-page {
+        position: relative;
         display: flex;
         flex-direction: row;
         justify-content: center;
@@ -601,6 +628,23 @@ export default {
           border: 2px solid rgba(255, 255, 255, 1);
           background: #fff;
         }
+        .operation {
+          position: absolute;
+          top: 30px;
+          left: 40px;
+          .operation_img {
+            width: 16px;
+            height: 16px;
+            background: url(../../assets/images/page_operation.png) center
+              no-repeat;
+            background-size: cover;
+          }
+          .operation_img:hover {
+            background: url(../../assets/images/page_operation_sel.png) center
+              no-repeat;
+            background-size: cover;
+          }
+        }
       }
       .item-page-add {
         width: 70px;