图片上传和删除和放大

src/views/maintenance/maintain/index.vue

@@ -1249,15 +1249,12 @@ export default {
       this.width = width + 'px'
     },
     // 图片保存
-    async handleSaveImg() {
-      if(this.seeTemp.scenePhoto1 == -1 && this.seeTemp.scenePhoto2 == -1 && this.seeTemp.scenePhoto3 == -1){
-        this.$notify({ title: '提示', message: '请上传保养图片', type: 'warning', duration: 3000 })
-        return false
-      }
-      const obj = { name: "upkeepImage", parammaps: { id: this.seeTemp.id, picId1: this.seeTemp.scenePhoto1.toString() , picId2: this.seeTemp.scenePhoto2.toString(), picId3: this.seeTemp.scenePhoto3.toString() }}
+    async handleSaveImg(type) {
+      console.log('====hss',this.seeTemp)
+      const obj = { name: "upkeepImage", parammaps: { id: this.seeTemp.id, picId1: this.seeTemp.scenePhoto1 , picId2: this.seeTemp.scenePhoto2, picId3: this.seeTemp.scenePhoto3 }}
       const { data, code } = await saveImgIds(obj)
       if(code == 200){
-        this.$notify({ title: '提示', message: '保养图片上传成功', type: 'success', duration: 3000 })
+       type == 1? this.$notify({ title: '提示', message: '保养图片上传成功', type: 'success', duration: 3000 }) : this.$notify({ title: '提示', message: '保养图片删除成功', type: 'success', duration: 3000 })
       }
       console.log(data, '图片确认发布到保养中')
     },
@@ -1278,49 +1275,47 @@ export default {
         document.getElementById('uploadPic').lastChild.style.display = "inline-block"
       }
 
-      if (this.seeTemp.scenePhoto1 === undefined || this.seeTemp.scenePhoto1 == -1) {
+      if (this.seeTemp.scenePhoto1 === undefined || this.seeTemp.scenePhoto1 == '-1') {
         console.log("111")
-        this.seeTemp.scenePhoto1 = response.execresult.LastInsertId
-      } else if (this.seeTemp.scenePhoto2 === undefined || this.seeTemp.scenePhoto2 == -1) {
+        this.seeTemp.scenePhoto1 = response.execresult.LastInsertId.toString()
+      } else if (this.seeTemp.scenePhoto2 === undefined || this.seeTemp.scenePhoto2 == '-1') {
         console.log("222")
-        this.seeTemp.scenePhoto2 = response.execresult.LastInsertId
-      } else if (this.seeTemp.scenePhoto3 === undefined || this.seeTemp.scenePhoto3 == -1) {
+        this.seeTemp.scenePhoto2 = response.execresult.LastInsertId.toString()
+      } else if (this.seeTemp.scenePhoto3 === undefined || this.seeTemp.scenePhoto3 == '-1') {
         console.log("333")
-        this.seeTemp.scenePhoto3 = response.execresult.LastInsertId
+        this.seeTemp.scenePhoto3 = response.execresult.LastInsertId.toString()
       }
       console.log('this.picArr1', this.picArr1)
       console.log('this.seeTemp', this.seeTemp)
       // 上传成功后 在调用图片保定合同的接口
-      this.handleSaveImg()
+      this.handleSaveImg(1)
     },
     handlePicRemove(file, fileList) {
       console.log(file, '文件列表移除文件时的钩子file---')
       console.log(fileList, '文件列表移除文件时的钩子fileList--')
-      //3张图片时，关闭新增的按钮
+    
+      this.seeTemp.scenePhoto1 = '-1';
+      this.seeTemp.scenePhoto2 = '-1';
+      this.seeTemp.scenePhoto3 = '-1';
+
       if (fileList.length == 3) {
+        this.seeTemp.scenePhoto1 = (fileList[0].response && fileList[0].response.execresult.LastInsertId) || fileList[0].imgId
+        this.seeTemp.scenePhoto2 = (fileList[1].response && fileList[1].response.execresult.LastInsertId) || fileList[1].imgId
+        this.seeTemp.scenePhoto3 = (fileList[2].response && fileList[2].response.execresult.LastInsertId) || fileList[2].imgId
+      } else if (fileList.length == 2) {
+        this.seeTemp.scenePhoto1 = (fileList[0].response && fileList[0].response.execresult.LastInsertId) || fileList[0].imgId
+        this.seeTemp.scenePhoto2 = (fileList[1].response && fileList[1].response.execresult.LastInsertId) || fileList[1].imgId
+      } else if (fileList.length == 1) {
+        this.seeTemp.scenePhoto1 = (fileList[0].response && fileList[0].response.execresult.LastInsertId) || fileList[0].imgId
+      } 
+       //3张图片时，关闭新增的按钮
+       if (fileList.length == 3) {
         document.getElementById('uploadPic').lastChild.style.display = "none"
       } else {
         document.getElementById('uploadPic').lastChild.style.display = "inline-block"
       }
-      this.seeTemp.scenePhoto1 = -1;
-      this.seeTemp.scenePhoto2 = -1;
-      this.seeTemp.scenePhoto3 = -1;
-     
-      if (fileList.length == 3) {
-        this.seeTemp.scenePhoto1 = fileList[0].response.execresult.LastInsertId || fileList[0].picId1
-        this.seeTemp.scenePhoto2 = fileList[1].response.execresult.LastInsertId || fileList[1].picId2
-        this.seeTemp.scenePhoto3 = fileList[2].response.execresult.LastInsertId || fileList[2].picId3
-
-      } else if (fileList.length == 2) {
-        this.seeTemp.scenePhoto1 = fileList[0].response.execresult.LastInsertId || fileList[0].picId1
-        this.seeTemp.scenePhoto2 = fileList[1].response.execresult.LastInsertId || fileList[1].picId2
-
-      } else if (fileList.length == 1) {
-        this.seeTemp.scenePhoto1 = fileList[0].response.execresult.LastInsertId || fileList[0].picId1
-      }
-      console.log(this.fileList,'图片的fileList',this.seeTemp)
       // 删除后更新图数量
-      this.handleSaveImg()
+      this.handleSaveImg(2)
     },
     handlePicPreview(file) {
       console.log(file,'放大查看')
@@ -1559,7 +1554,26 @@ export default {
     },
     form_see(row) {
       this.seeTemp = Object.assign({}, row)
-      console.log('查看--图片1',this.seeTemp.SHStatue, this.seeTemp)
+      console.log('查看----图片1', row)
+        // 只要有图片就全部展示出来
+        // row.picId1 = "21018"
+        // row.picpath1 = "uploads/thumbnail/insertcustompic/f3c5fa6b459ca3b2c29de8c33ea30ad6.jpg"
+        if( row.picId1 !== '-1' && row.picId1 !== '') {
+          this.seeTemp.scenePhoto1 = row.picId1
+          this.$set(this.fileList, 0, { name: "picImg1", url: process.env.VUE_APP_BASE_API + row.picpath1 , imgId : row.picId1 }
+          ) 
+        } 
+        if( row.picId2 !== '-1' && row.picId2 !== '') {
+          this.seeTemp.scenePhoto2 = row.picId2
+          this.$set(this.fileList, 1, { name: "picImg2", url: process.env.VUE_APP_BASE_API + row.picpath2, imgId : row.picId2 }
+          )
+        }
+        if( row.picId3 !== '-1' && row.picId3 !== '') {
+          this.seeTemp.scenePhoto3 = row.picId3
+          this.$set(this.fileList, 2, { name: "picImg3", url: process.env.VUE_APP_BASE_API + row.picpath3, imgId : row.picId3 }
+          )
+        }
+        console.log('查看-------图片2', this.fileList)
       // 流程图
       var reason = '未通过原因:' + this.seeTemp.workflowNote
       var scores = '评分:' + this.seeTemp.scores + '分'
@@ -1609,25 +1623,10 @@ export default {
       this.getCollarUse()
       this.getOldProductsList()
 
-      // 只要有图片就全部展示出来
-        // row.picId1 = "21018"
-        // row.picpath1 = "uploads/thumbnail/insertcustompic/f3c5fa6b459ca3b2c29de8c33ea30ad6.jpg"
-        if( row.picId1 !== '-1' && row.picId1 !== '') {
-          this.seeTemp.scenePhoto1 = row.picId1
-          // "uploads/thumbnail/insertcustompic/8e22df6c34c89686212997255c1ae5fe.jpeg"
-          this.fileList[0] = { name: "picImg1", url: process.env.VUE_APP_BASE_API + row.picpath1 , picId1 : row.picId1 }
-        } 
-        if( row.picId2 !== '-1' && row.picId2 !== '') {
-          this.seeTemp.scenePhoto2 = row.picId2
-          this.fileList[1] = { name: "picImg2", url: process.env.VUE_APP_BASE_API + row.picpath2, picId2 : row.picId2 }
-        } 
-        if( row.picId3 !== '-1' && row.picId3 !== '') {
-          this.seeTemp.scenePhoto3 = row.picId3
-          this.fileList[2] = { name: "picImg3", url: process.env.VUE_APP_BASE_API + row.picpath3, picId3 : row.picId3 }
-        } 
-        console.log('查看--图片2', this.fileList)
+     
+
       this.$nextTick(()=>{
-        if(this.seeTemp.SHStatue !== 2){
+        if(this.seeTemp.SHStatue !== 2 ||  this.fileList.length >= 3){
             document.getElementById('uploadPic').lastChild.style.display = "none"
         }else{
             document.getElementById('uploadPic').lastChild.style.display = "inline-block"