From 54191df33c3ab8c283c823bd5f080e9dd8bb1554 Mon Sep 17 00:00:00 2001
From: xiaoxiaoyang <yangzx1282@@qq.com>
Date: Sat, 30 Jul 2022 11:32:49 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=9B=BE=E7=89=87=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E7=BB=84=E4=BB=B6=E4=B8=AD=E9=A2=84=E8=A7=88=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E6=97=A0=E6=95=88BUG=EF=BC=8C=E5=B9=B6=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8el-image=E8=BF=9B=E8=A1=8C=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../field-widget/picture-upload-widget.vue    | 74 ++++++++++++++-----
 1 file changed, 55 insertions(+), 19 deletions(-)

diff --git a/src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue b/src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue
index 74db269..28e60c0 100644
--- a/src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue
@@ -10,23 +10,46 @@
                list-type="picture-card" :class="{'hideUploadDiv': uploadBtnHidden}"
                :limit="field.options.limit" :on-exceed="handlePictureExceed"
                :before-upload="beforePictureUpload"
-               :on-success="handlePictureUpload" :on-error="handleUploadError"
-               :before-remove="handleBeforeRemove" :on-remove="handlePictureRemove">
+               :on-preview="handlePictureCardPreview"
+               :on-success="handlePictureUpload" :on-error="handleUploadError" >
+      <template #file="{ file }">
+        <el-image
+          ref="imageRef"
+          style="width: 100%; height: 100%"
+          :src="file.url"
+          :preview-src-list="previewList"
+          :initial-index="previewIndex"
+          fit="cover"
+          preview-teleported
+        />
+        <!-- 上传成功状态 -->
+        <label class="el-upload-list__item-status-label">
+          <i class="el-icon--upload-success" style="color: #FFF"><svg-icon class="" icon-class="el-check" /></i>
+        </label>
+        <!-- 图片操作按钮 -->
+        <span class="el-upload-list__item-actions">
+          <!-- 预览 -->
+          <span
+            class="el-upload-list__item-preview"
+            @click="handlePictureCardPreview(file)"
+          >
+            <svg-icon icon-class="el-zoom-in" />
+          </span>
+          <!-- 删除 -->
+          <span
+            class="el-upload-list__item-delete"
+            @click="handlePictureRemove(file)"
+          >
+            <svg-icon icon-class="el-delete" />
+          </span>
+        </span>
+      </template>
       <template #tip>
         <div class="el-upload__tip"
              v-if="!!field.options.uploadTip">{{field.options.uploadTip}}</div>
       </template>
       <div class="uploader-icon"><svg-icon icon-class="el-plus" /></div>
     </el-upload>
-
-    <div v-if="showPreviewDialogFlag" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
-      <el-dialog title="" v-model="showPreviewDialogFlag"
-                 append-to-body width="60%"
-                 :show-close="true" custom-class="drag-dialog small-padding-dialog"
-                 :close-on-click-modal="true" :close-on-press-escape="true" :destroy-on-close="true">
-        <img :src="previewUrl" style="width: 100%" alt="" />
-      </el-dialog>
-    </div>
   </form-item-wrapper>
 </template>
 
@@ -88,12 +111,13 @@
         fileListBeforeRemove: [],  //删除前的文件列表
         uploadBtnHidden: false,
 
-        previewUrl: '',
-        showPreviewDialogFlag: false,
+        previewIndex: 1,  // 初始预览图像索引
       }
     },
     computed: {
-
+      previewList() {
+        return this.fileList.map(el => el.url);
+      }
     },
     beforeCreate() {
       /* 这里不能访问方法和属性！！ */
@@ -202,7 +226,7 @@
         }
       },
 
-      updateFieldModelAndEmitDataChangeForRemove(file, fileList) {
+      updateFieldModelAndEmitDataChangeForRemove(file) {
         let oldValue = deepClone(this.fieldModel)
         let foundFileIdx = -1
         this.fileListBeforeRemove.map((fi, idx) => {  /* 跟element-ui不同，element-plus删除文件时this.fileList数组对应元素已被删除！！ */
@@ -218,14 +242,17 @@
         this.emitFieldDataChange(this.fieldModel, oldValue)
       },
 
-      handleBeforeRemove(file, fileList) {
+      handleBeforeRemove(fileList) {
         /* 保留删除之前的文件列表！！ */
         this.fileListBeforeRemove = deepClone(fileList)
       },
 
-      handlePictureRemove(file, fileList) {
-        this.updateFieldModelAndEmitDataChangeForRemove(file, fileList)
-        this.fileList = deepClone(fileList)  //this.fileList = fileList
+      handlePictureRemove(file) {
+        this.handleBeforeRemove(this.fileList) // 由于自定义了 #file slot，需要手动调用 handleBeforeRemove，并移除 @before-remove 和 @remove
+        this.fileList.splice(this.fileList.indexOf(file), 1) // 删除所点击的文件
+        this.updateFieldModelAndEmitDataChangeForRemove(file)
+        // this.fileList = deepClone(fileList  // 由于是在自身进行的操作，故不需要重新赋值
+        let fileList = deepClone(this.fileList); // 进行深拷贝，避免用户自定义函数对 fileList 进行修改时，影响组件内的数据
         this.uploadBtnHidden = fileList.length >= this.field.options.limit
 
         if (!!this.field.options.onFileRemove) {
@@ -246,6 +273,13 @@
           })
         }
       },
+      
+      handlePictureCardPreview({ url }) {
+        // 设置图片索引为当前点击的图片
+        this.previewIndex = this.previewList.indexOf(url)
+        // 模拟点击 <el-image> 组件下的 img 标签（点击事件被绑定在的每张 img 上）
+        this.$refs['imageRef'].$el.children[0].click()
+      }
 
     }
   }
@@ -282,3 +316,5 @@
   }
 
 </style>
+
+