渠道客诉填写任务增加上传照片功能

src/components/deletComplaintImg.vue

@@ -0,0 +1,81 @@
+<template>
+  <div v-if="itemData.fileInfoList">
+    <van-col span="6" v-for="(urls, index) in itemData.fileInfoList" :key="index">
+      <div class="imgview2">
+        <van-icon name="close" size="16" v-on:click="deleteImg(index, urls.id)" />
+        <img :src="urls.fileUrl" width="100px" height="100px" @click="previewsImg(index)" />
+      </div>
+    </van-col>
+  </div>
+</template>
+
+<script>
+import { ImagePreview } from 'vant';
+import { removeSummaryPhoto, removePhoto } from '@/api/index';
+
+export default {
+  name: 'deleteUploadImg',
+  props: {
+    itemData: {
+      type: Object,
+      default: {},
+    },
+  },
+  data() {
+    return {
+      url: process.env.VUE_APP_Target1 + process.env.VUE_APP_BASE_API,
+    };
+  },
+  methods: {
+    deleteImg(index, id) {
+      var fileName = {
+        fileId: id,
+      };
+      removeSummaryPhoto(fileName).then((res) => {
+        if (res.code == 200) {
+          this.$toast('删除成功！');
+          this.$emit('deleteImg', { itemData: itemData, index: index });
+          // this.imgs.splice(index, 1);
+        } else {
+          this.$toast('删除失败！');
+        }
+      });
+    },
+    previewsImg(index) {
+      var arrimg = [];
+      for (var imgi = 0; imgi < this.itemData.fileInfoList.length; imgi++) {
+        arrimg.push(this.itemData.fileInfoList[imgi].fileUrl);
+      }
+      ImagePreview({
+        images: arrimg,
+        startPosition: index,
+        onClose() {
+          // do something
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.imgview2 {
+  width: 100%;
+  height: 80px;
+  position: relative;
+  display: inline-block;
+  i {
+    position: absolute;
+    right: -2px;
+    top: -3px;
+    color: white;
+    background: red;
+    overflow: hidden;
+    border-radius: 50%;
+  }
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/clew/complaintDetail/radioGroup.vue

@@ -86,17 +86,17 @@
             <!-- <van-icon color="#666" name="photograph" size="24" @click="imgClick(val)" /> -->
           </template>
         </van-cell>
-        <deleteUploadImg2 :imgs="val.fileInfoList"></deleteUploadImg2>
+        <deletComplaintImg :itemData="val" @deleteImg="deleteImg"></deletComplaintImg>
       </template>
     </template>
   </div>
 </template>
 <script>
 import taskTips from '@/views/deviceWithin/taskTips';
-import deleteUploadImg2 from '@/components/deleteUploadImg2';
+import deletComplaintImg from '@/components/deletComplaintImg';
 import complaintImg from '@/components/complaintImg';
 export default {
-  components: { deleteUploadImg2, taskTips, complaintImg },
+  components: { deletComplaintImg, taskTips, complaintImg },
   name: 'radioGroup',
   props: {
     clueOptionList: {
@@ -169,9 +169,19 @@ export default {
       let fileInfoList = [{ fileUrl: val.fileUrl, id: val.id }].concat(
         val.itemData.fileInfoList ? val.itemData.fileInfoList : []
       );
-      // let fileIdList = val.itemData.fileIdList.push(val.id);
       this.$set(val.itemData, 'fileInfoList', fileInfoList);
-      // this.$set(val.itemData, 'fileIdList', fileIdList);
+      this.setFileIdList(val.itemData.fileInfoList || []);
+    },
+    setFileIdList(fileInfoList) {
+      let fileIdList = [];
+      fileInfoList.forEach((val) => {
+        fileIdList.push(val.id);
+      });
+      this.$set(val.itemData, 'fileIdList', fileIdList);
+    },
+    deleteImg(val) {
+      val.itemData.fileInfoList.splice(val.index, 1);
+      this.setFileIdList(val.itemData.fileInfoList);
     },
   },
 };