主观题切割

src/views/papers/cutPaper.vue

@@ -81,12 +81,15 @@
             <div slot="header" class="clearfix">
               <span>切割主观题</span>
             </div>
-            <div v-if="subImgList.length>0" v-for="(item,index) in subImgList">
-              <div style="margin-bottom:10px;">
-                <el-input size="mini" v-model="item.qno"></el-input>
-                <i class="el-icon-delete" @click="subImgList.splice(index,1)"
-                  style="float:right;color:red;cursor: pointer;"></i>
-                <div class="clear"></div>
+            <div v-if="subImgList.length>0" v-for="(item,index) in subImgList" 
+              style="border:1px solid #ccc;padding:10px;margin-top:10px;">
+              <div style="margin:10px 0px;position: relative;">
+                <div style="cursor:pointer;">
+                  <b style="position:absolute;">{{index+1}}.</b>
+                  <el-input size="mini" v-model="item.qno" @focus="activeQue(index)"></el-input>
+                  <i class="el-icon-delete" @click="subImgList.splice(index,1)"
+                    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>
@@ -359,7 +362,8 @@
         ansPointsCrop: {},
         subImgList: [],
         activePaper: true,
-        curPaperIndex: 0
+        curPaperIndex: 0,
+        curQueIndex:0
       };
     },
     watch: {
@@ -438,8 +442,13 @@
       activaPaper(index) {
         this.curPaperIndex = index
         this.curPaperImg = this.paperImgs[index];
+        this.myCropper.destroy();
+        this.myCropper = null;
         this.initCropper();
       },
+      activeQue(index){
+        this.curQueIndex = index;
+      },
       editAnsCard(item, curPaperId) {
         this.open = true;
         this.curAnsImg = item;
@@ -527,7 +536,6 @@
       },
       initCropper() {
         let that = this;
-        that.myCropper = null;
         this.$nextTick(function () {
           let imgObj = this.$refs.image;
           that.myCropper = new Cropper(imgObj, {
@@ -593,9 +601,7 @@
                     h: cropData.height
                   }
                   khPointsCrop["x"] = khPointsCrop["x"] - that.stdPoints["x"];
-
                   khPointsCrop["y"] = khPointsCrop["y"] - that.stdPoints["y"];
-
                   that.khPointsCrop = khPointsCrop;
                   that.snoImg = cropperImgData;
                   that.snoImgW = cropData.width;
@@ -612,7 +618,6 @@
 
                   khPointsCrop["x"] = khPointsCrop["x"] - that.stdPoints["x"];
                   khPointsCrop["y"] = khPointsCrop["y"] - that.stdPoints["y"];
-
                   that.ansPointsCrop = khPointsCrop;
                   that.ansCardImgList.push(cropperImgData);
                 }
@@ -624,17 +629,30 @@
                     w: cropData.width,
                     h: cropData.height
                   }
-
                   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;
+                  }
                   let imgItem = {
-                    qno: null,
+                    qno: qno,
                     qimg: cropperImgData,
                     point: khPointsCrop
                   };
-                  that.subImgList.push(imgItem);
+                  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()
@@ -861,6 +879,7 @@
 
   /deep/.el-input--mini .el-input__inner {
     width: 85px !important;
+    margin-left:20px;
   }
 
   .choiceImg {