dengjie : 上传图片组件的图片放大和删除

Reviewed-on: http://git.hchyun.com/clay/workflow-engine-web/pulls/12

flowable-engine-web/src/components/common/Comment.vue

@@ -48,6 +48,12 @@
             <i class="el-icon-upload-success el-icon-check"></i>
           </label>
           <span class="el-upload-list__item-actions">
+             <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
+                <i class="el-icon-zoom-in"></i>
+              </span>
+              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
+                <i class="el-icon-download"></i>
+              </span>
             <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                 <i class="el-icon-delete"></i>
               </span>
@@ -55,6 +61,11 @@
         </div>
         <div slot="tip" class="el-upload__tip">添加图片 {{ sizeTip }}</div>
       </el-upload>
+      <el-dialog  :visible.sync="dialogVisible" center append-to-body>
+        <div>
+          <img width="100%" :src="dialogImageUrl" alt="" style="z-index: 3435">
+        </div>
+      </el-dialog>
     </div>
     <el-upload :file-list="attachmentList"
                :limit="attachmentMaxSize" with-credentials
@@ -75,7 +86,7 @@
 
 <script>
 import {deleteFile} from "@/api/common";
-import {getBaseUrl} from "../../api/request";
+import {getBaseUrl} from "@/api/request";
 
 export default {
   name: "Comment",
@@ -130,6 +141,8 @@ export default {
       },
       context: null,
       backNode: null,
+      dialogImageUrl: '',
+      dialogVisible: false
     };
   },
   methods: {
@@ -173,15 +186,19 @@ export default {
       return false;
     },
     handlePictureCardPreview(file) {
-      console.log(file, this._value);
+      this.dialogVisible = true;
+      this.dialogImageUrl = file.url;
     },
     handleDownload(file) {
       console.log(file);
     },
-    handleRemove(file, imageList) {
+    handleRemove(file) {
       deleteFile(file.id).then(res => {
-        this.$message.success("删除成功");
-      });
+        if (res.code === 1000) {
+          this.$message.success("删除成功")
+          this.fileList.splice( this.fileList.findIndex((item)=>item.id===file.id),1)
+        }
+      })
     },
     selectConfirm() {
       let fileList = []

flowable-engine-web/src/views/common/form/components/ImageUpload.vue

@@ -21,6 +21,9 @@
           <i slot="default" class="el-icon-plus"></i>
           <div slot="file" slot-scope="{file}">
             <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
+            <label class="el-upload-list__item-status-label">
+              <i class="el-icon-upload-success el-icon-check"></i>
+            </label>
             <span class="el-upload-list__item-actions">
               <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                 <i class="el-icon-zoom-in"></i>
@@ -35,6 +38,11 @@
           </div>
           <div slot="tip" class="el-upload__tip">{{ placeholder }} {{ sizeTip }}</div>
         </el-upload>
+        <el-dialog  :visible.sync="dialogVisible" center append-to-body>
+          <div>
+            <img width="100%" :src="dialogImageUrl" alt="" style="z-index: 3435">
+          </div>
+        </el-dialog>
       </template>
       <template v-else-if="perm === 'R'">
         <div v-for="(item , index) in _value" :key="index">
@@ -99,7 +107,10 @@ export default {
       headers: {
         authorization: localStorage.getItem("token")
       },
-      uploadParams: {}
+      uploadParams: {},
+      dialogImageUrl: '',
+      dialogVisible: false,
+      imageUrl:[]
     }
   },
   created() {
@@ -127,13 +138,17 @@ export default {
       this.$emit("input", this.fileList)
       console.log(res, file, this.fileList)
     },
-    handleRemove(file, fileList) {
+    handleRemove(file) {
       deleteFile(file.id).then(res => {
+        if (res.code === 1000) {
           this.$message.success("删除成功")
+          this.fileList.splice( this.fileList.findIndex((item)=>item.id===file.id),1)
+        }
       })
     },
     handlePictureCardPreview(file) {
-      console.log(file,this._value)
+      this.dialogVisible = true;
+      this.dialogImageUrl = file.url;
     },
     handleDownload(file) {
       console.log(file);
@@ -151,14 +166,17 @@ export default {
     border: 1px dashed #8c8c8c;
   }
 }
+
 /deep/ .el-upload--picture-card {
   width: 80px;
   height: 80px;
   line-height: 87px;
 }
+
 /deep/ .el-upload-list__item {
   width: 80px;
   height: 80px;
+
   .el-upload-list__item-actions {
     & > span + span {
       margin: 1px;