fix:修改业务员附件下载，删除功能

src/views/operationManagement/modules/addOperation.vue

@@ -134,8 +134,8 @@
                     <el-icon class="btn-icon"><Upload /></el-icon>
                   </el-upload>
                   <el-icon class="btn-icon" @click="imageView(1)"><View /></el-icon>
-                  <el-icon class="btn-icon"><Download /></el-icon>
-                  <el-icon class="btn-icon"><Delete /></el-icon>
+                  <el-icon class="btn-icon" @click="downloadImage(1)"><Download /></el-icon>
+                  <el-icon class="btn-icon" @click="deleteImage(1)"><Delete /></el-icon>
                 </div>
               </div>
             </el-form-item>
@@ -150,7 +150,7 @@
                     <el-icon class="btn-icon"><Upload /></el-icon>
                   </el-upload>
                   <el-icon class="btn-icon" @click="imageView(2)"><View /></el-icon>
-                  <el-icon class="btn-icon"><Download /></el-icon>
+                  <el-icon class="btn-icon" @click="downloadImage(2)"><Download /></el-icon>
                   <el-icon class="btn-icon"><Delete /></el-icon>
                 </div>
               </div>
@@ -166,7 +166,7 @@
                     <el-icon class="btn-icon"><Upload /></el-icon>
                   </el-upload>
                   <el-icon class="btn-icon" @click="imageView(3)"><View /></el-icon>
-                  <el-icon class="btn-icon"><Download /></el-icon>
+                  <el-icon class="btn-icon" @click="downloadImage(3)"><Download /></el-icon>
                   <el-icon class="btn-icon"><Delete /></el-icon>
                 </div>
               </div>
@@ -374,7 +374,7 @@
                     <el-icon class="btn-icon"><Upload /></el-icon>
                   </el-upload>
                   <el-icon class="btn-icon" @click="imageView(4)"><View /></el-icon>
-                  <el-icon class="btn-icon"><Download /></el-icon>
+                  <el-icon class="btn-icon" @click="downloadImage(4)"><Download /></el-icon>
                   <el-icon class="btn-icon"><Delete /></el-icon>
                 </div>
               </div>
@@ -390,7 +390,7 @@
                     <el-icon class="btn-icon"><Upload /></el-icon>
                   </el-upload>
                   <el-icon class="btn-icon" @click="imageView(5)"><View /></el-icon>
-                  <el-icon class="btn-icon"><Download /></el-icon>
+                  <el-icon class="btn-icon" @click="downloadImage(5)"><Download /></el-icon>
                   <el-icon class="btn-icon"><Delete /></el-icon>
                 </div>
               </div>
@@ -406,7 +406,7 @@
                     <el-icon class="btn-icon"><Upload /></el-icon>
                   </el-upload>
                   <el-icon class="btn-icon" @click="imageView(6)"><View /></el-icon>
-                  <el-icon class="btn-icon"><Download /></el-icon>
+                  <el-icon class="btn-icon" @click="downloadImage(6)"><Download /></el-icon>
                   <el-icon class="btn-icon"><Delete /></el-icon>
                 </div>
               </div>
@@ -422,7 +422,7 @@
                     <el-icon class="btn-icon"><Upload /></el-icon>
                   </el-upload>
                   <el-icon class="btn-icon" @click="imageView(7)"><View /></el-icon>
-                  <el-icon class="btn-icon"><Download /></el-icon>
+                  <el-icon class="btn-icon" @click="downloadImage(7)"><Download /></el-icon>
                   <el-icon class="btn-icon"><Delete /></el-icon>
                 </div>
               </div>
@@ -770,6 +770,85 @@ const imageView = (type) => {
       break;
   }
 }
+
+// 图片下载
+const download = (url, name) => {
+  let image = new Image();
+  // 解决跨域 Canvas 污染问题
+  image.setAttribute("crossOrigin", "anonymous");
+  image.onload = function () {
+    let canvas = document.createElement("canvas");
+    canvas.width = image.width;
+    canvas.height = image.height;
+    let context = canvas.getContext("2d");
+    context.drawImage(image, 0, 0, image.width, image.height);
+    let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
+    let a = document.createElement("a"); // 生成一个a元素
+    let event = new MouseEvent("click"); // 创建一个单击事件
+    a.download = name; // 设置图片名称
+    a.href = url; // 将生成的URL设置为a.href属性
+    a.dispatchEvent(event); // 触发a的单击事件
+  }
+  image.src = url
+}
+const downloadImage = (type) => {
+  switch (type) {
+    case 1:
+      download(IDCardFront.value,IDCardFrontName.value)
+      break;
+    case 2:
+      download(IDCardBack.value,IDCardBackName.value)
+      break;
+    case 3:
+      download(certification.value,certificationName.value)
+      break;
+    case 4:
+      download(contract.value,contractName.value)
+      break;
+    case 5:
+      download(applicant.value,applicantName.value)
+      break;
+    case 6:
+      download(decidePay.value,decidePayName.value)
+      break;
+    case 7:
+      download(dimission.value,dimissionName.value)
+      break;
+  }
+}
+// 图片删除
+const deleteImage = (type) => {
+  switch (type) {
+    case 1:
+      IDCardFront.value = ''
+      IDCardFrontName.value = ''
+      break;
+    case 2:
+      IDCardBack.value = ''
+      IDCardBackName.value = ''
+      break;
+    case 3:
+      certification.value = ''
+      certificationName.value = ''
+      break;
+    case 4:
+      contract.value = ''
+      contractName.value = ''
+      break;
+    case 5:
+      applicant.value = ''
+      applicantName.value = ''
+      break;
+    case 6:
+      decidePay.value = ''
+      decidePayName.value = ''
+      break;
+    case 7:
+      dimission.value = ''
+      dimissionName.value = ''
+      break;
+  }
+}
 // 管理人/推荐人
 let userList = ref([])
 const getUser = (id) => {