Merge branch 'master' of http://192.168.4.246:3000/zhangs/surveyMaker

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,28 +384,57 @@ export default {
       this.$store.dispatch("copyPage", page);
     },
     deletePage(page, index) {
-      var pageSlelctQ = this.selectQuestions[index - 1] || [];
-      var deleteList = [];
-      for (var i = 0; i < pageSlelctQ.length; i++) {
-        var question = this.questionList.filter(
-          item => item.questionId == pageSlelctQ[i]
-        );
-        if (question.length > 0) {
-          var selectIndex = this.questionList.findIndex(
-            itemTemp => itemTemp.questionId == question[0].questionId
-          );
-          this.questionList[selectIndex].isChecked = false;
-          deleteList.push({ index: selectIndex, item: question[0] });
+      this.$msgbox({
+        title: "删除",
+        message: "删除后不可撤回，确定删除？",
+        showCancelButton: true,
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        beforeClose: (action, instance, done) => {
+          if (action === "confirm") {
+            var qusetionCount = this.pages.length - this.resultPageCount;
+            if (qusetionCount <= index) {
+              console.log("删除结论页", index, qusetionCount);
+              this.$store.dispatch("delPage", page);
+              this.resultPageCount -= 1;
+            } else {
+              console.log("删除题目", index, qusetionCount);
+              var pageSlelctQ = this.selectQuestions[index - 1] || [];
+              var deleteList = [];
+              for (var i = 0; i < pageSlelctQ.length; i++) {
+                var question = this.questionList.filter(
+                  item => item.questionId == pageSlelctQ[i]
+                );
+                if (question.length > 0) {
+                  var selectIndex = this.questionList.findIndex(
+                    itemTemp => itemTemp.questionId == question[0].questionId
+                  );
+                  this.questionList[selectIndex].isChecked = false;
+                  deleteList.push({ index: selectIndex, item: question[0] });
+                }
+              }
+              for (var i = 0; i < deleteList.length; i++) {
+                console.log("WWWWWWWWW", deleteList[i]);
+                this.selectCheckbox(
+                  false,
+                  deleteList[i].item,
+                  deleteList[i].index
+                );
+              }
+              this.questions.splice(index, 1);
+              this.$store.dispatch("delPage", page);
+              var editingPage = this.pages[index - 1];
+              this.setEditingPage(editingPage, index - 1);
+            }
+            this.$message.success("删除成功");
+            done();
+          } else {
+            done();
+          }
         }
-      }
-      for (var i = 0; i < deleteList.length; i++) {
-        console.log("WWWWWWWWW", deleteList[i]);
-        this.selectCheckbox(false, deleteList[i].item, deleteList[i].index);
-      }
-      this.questions.splice(index, 1);
-      this.$store.dispatch("delPage", page);
-      var editingPage = this.pages[index - 1];
-      this.setEditingPage(editingPage, index - 1);
+      })
+        .then(() => {})
+        .catch(() => {});
     },
     addPage() {
       this.bodyBackgroundColor =
@@ -562,6 +610,7 @@ export default {
         color: rgba(255, 255, 255, 1);
       }
       .item-page {
+        position: relative;
         display: flex;
         flex-direction: row;
         justify-content: center;
@@ -578,6 +627,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;