主观题切割完成

src/views/papers/cutPaper.vue

@@ -81,8 +81,10 @@
             <div slot="header" class="clearfix">
               <span>切割主观题</span>
             </div>
-            <div v-if="subImgList.length>0" v-for="(item,index) in subImgList" 
-              style="border:1px solid #ccc;padding:10px;margin-top:10px;">
+            <draggable v-model="subImgList" @start="drag=true" @end="drag=false">
+            <div v-if="subImgList.length>0" v-for="(item,index) in subImgList" :key="index"
+              style="border:1px solid #ccc;padding:10px;margin-top:10px;" 
+              :class="{'activeQueImg':curQueIndex==index}">
               <div style="margin:10px 0px;position: relative;">
                 <div style="cursor:pointer;">
                   <b style="position:absolute;">{{index+1}}.</b>
@@ -91,9 +93,10 @@
                     style="position: absolute;top:8px;right:5px;color:red;cursor: pointer;"></i>
                 </div>
               </div>
-              <el-image style="margin-bottom:20px 0px;border:1px solid #ccc;" width="100%" :src="item.qimg"
-                :preview-src-list="[item.qimg]"></el-image>
+              <el-image v-for="(iitem,iindex) in item.qimg" style="margin-bottom:20px 0px;border:1px solid #ccc;"
+                width="100%" :src="iitem" :preview-src-list="[iitem]"></el-image>
             </div>
+            </draggable>
           </el-card>
         </div>
       </el-col>
@@ -246,6 +249,7 @@
   </section>
 </template>
 <script>
+  import draggable from 'vuedraggable';
   import Page from "../../components/Page";
   import canvasDrawer from "./canvasDrawer";
   import Cropper from 'cropperjs'
@@ -253,7 +257,8 @@
   export default {
     components: {
       Page,
-      canvasDrawer
+      canvasDrawer,
+      draggable
     },
     data() {
       return {
@@ -363,7 +368,9 @@
         subImgList: [],
         activePaper: true,
         curPaperIndex: 0,
-        curQueIndex:0
+        curQueIndex: 0,
+        curPressKey: null,
+        drag: false
       };
     },
     watch: {
@@ -422,10 +429,11 @@
             subQueImgList.push({
               qno: item.qno,
               qimg: item.imgs,
-              point: JSON.parse(item.imgs_points)
+              point: item.imgs_points
             })
           })
           this.subImgList = subQueImgList;
+          this.curQueIndex = this.subImgList.length>0?this.subImgList.length-1:0;
           this.initCropper();
           this.loading = false;
         });
@@ -446,7 +454,7 @@
         this.myCropper = null;
         this.initCropper();
       },
-      activeQue(index){
+      activeQue(index) {
         this.curQueIndex = index;
       },
       editAnsCard(item, curPaperId) {
@@ -559,6 +567,7 @@
                   that.dragMode = "move"
                   e.preventDefault();
                 }
+                that.curPressKey = e.keyCode
               })
               document.addEventListener('keyup', function (e) {
                 if (e.keyCode == 32) {
@@ -566,6 +575,7 @@
                   that.dragMode = "crop"
                   e.preventDefault();
                 }
+                that.curPressKey = null
               })
             },
             cropstart: function (e) {},
@@ -632,27 +642,33 @@
                   khPointsCrop["x"] = khPointsCrop["x"] - that.stdPoints["x"];
                   khPointsCrop["y"] = khPointsCrop["y"] - that.stdPoints["y"];
                   that.ansPointsCrop = khPointsCrop;
-                  // 计算题号
-                  let qno = 0
-                  if(that.subImgList.length==0){
-                    qno = 1
-                  }else{
-                    let curQno = that.subImgList[that.curQueIndex].qno.toString();
-                    curQno = curQno.split("-")[curQno.split("-").length-1]
-                    qno = parseInt(curQno) + 1;
+                  // 按住alt进行合并切割
+                  if (that.curPressKey == 18) {
+                    that.subImgList[that.curQueIndex].qimg.push(cropperImgData)
+                    that.subImgList[that.curQueIndex].point.push(khPointsCrop)
+                  } else {
+                    // 计算题号
+                    let qno = 0
+                    if (that.subImgList.length == 0) {
+                      qno = 1
+                    } else {
+                      let curQno = that.subImgList[that.curQueIndex].qno.toString();
+                      curQno = curQno.split("-")[curQno.split("-").length - 1]
+                      qno = parseInt(curQno) + 1;
+                    }
+                    let imgItem = {
+                      qno: qno,
+                      qimg: [cropperImgData],
+                      point: [khPointsCrop],
+                      pno:that.curPaperIndex
+                    };
+                    if (that.curQueIndex == that.subImgList.length - 1 && that.subImgList.length > 0) {
+                      that.subImgList.push(imgItem);
+                      that.curQueIndex = that.subImgList.length - 1;
+                    } else {
+                      that.subImgList.splice(that.curQueIndex + 1, 0, imgItem)
+                    }
                   }
-                  let imgItem = {
-                    qno: qno,
-                    qimg: cropperImgData,
-                    point: khPointsCrop
-                  };
-                  if(that.curQueIndex == that.subImgList.length-1 && that.subImgList.length>0){
-                    that.subImgList.push(imgItem);
-                    console.log(1111111111)
-                  }else{
-                    console.log(222222222222)
-                    that.subImgList.splice(that.curQueIndex+1,0,imgItem)
-                  } 
                 }
               }
               that.myCropper.clear()
@@ -868,6 +884,14 @@
     mounted() {
       this.getData();
       // this.initCropper();
+      // window.addEventListener("keydown", function (e) {
+      //   this.curPressKey = e.keyCode
+      //   window.event.preventDefault()
+      // })
+      // window.addEventListener("keyup", function (e) {
+      //   this.curPressKey = null
+      //   window.event.preventDefault()
+      // })
     },
   };
 </script>
@@ -879,7 +903,7 @@
 
   /deep/.el-input--mini .el-input__inner {
     width: 85px !important;
-    margin-left:20px;
+    margin-left: 20px;
   }
 
   .choiceImg {
@@ -908,4 +932,7 @@
   .activePaper {
     background: #FFE6E6;
   }
+  .activeQueImg {
+    border:1px solid red !important;
+  }
 </style>