Merge pull request 'dengjie : 上传图片组件的图片放大和删除' (#13) from DJ into master

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

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">
@@ -59,7 +67,7 @@ export default {
   name: "ImageUpload",
   components: {},
   props: {
-    value:{
+    value: {
       type: Array,
       default: () => {
         return []
@@ -77,7 +85,7 @@ export default {
       type: Number,
       default: 5
     },
-    maxNumber:{
+    maxNumber: {
       type: Number,
       default: 10
     },
@@ -93,47 +101,54 @@ export default {
   },
   data() {
     return {
-      fileList:[],
+      fileList: [],
       disabled: false,
-      uploadFileUrl: getBaseUrl()+"/flowable/process/file",
+      uploadFileUrl: getBaseUrl() + "/flowable/process/file",
       headers: {
         authorization: localStorage.getItem("token")
       },
-      uploadParams: {}
+      uploadParams: {},
+      dialogImageUrl: '',
+      dialogVisible: false,
+      imageUrl:[]
     }
   },
   created() {
     this.fileList = this._value
-    console.log(this.value,"images")
+    console.log(this.value, "images")
   },
   methods: {
-    beforeUpload(file){
+    beforeUpload(file) {
       const alows = ['image/jpeg', 'image/png', 'image/gif', 'image/jpg'];
-      if (alows.indexOf(file.type) === -1){
+      if (alows.indexOf(file.type) === -1) {
         this.$message.warning("存在不支持的图片格式")
-      }else if(this.maxSize > 0 && file.size / 1024 / 1024 > this.maxSize){
+      } else if (this.maxSize > 0 && file.size / 1024 / 1024 > this.maxSize) {
         this.$message.warning(`单张图片最大不超过 ${this.maxSize}MB`)
-      }else {
+      } else {
         return true
       }
       return false
     },
-    handleUploadSuccess(res, file){
+    handleUploadSuccess(res, file) {
-      if (res.code !== 1000){
+      if (res.code !== 1000) {
         this.$message.error("上传失败")
       }
       let data = res.data
       this.fileList.push(data)
-      this.$emit("input",this.fileList)
+      this.$emit("input", this.fileList)
-      console.log(res,file,this.fileList)
+      console.log(res, file, this.fileList)
     },
-    handleRemove(file, fileList) {
+    handleRemove(file) {
-      deleteFile(file.id).then(res=>{
+      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,16 +166,19 @@ export default {
     border: 1px dashed #8c8c8c;
   }
 }
-/deep/ .el-upload--picture-card{
+
+/deep/ .el-upload--picture-card {
   width: 80px;
   height: 80px;
   line-height: 87px;
 }
-/deep/ .el-upload-list__item{
+
+/deep/ .el-upload-list__item {
   width: 80px;
   height: 80px;
-  .el-upload-list__item-actions{
+
-    &> span+span{
+  .el-upload-list__item-actions {
+    & > span + span {
       margin: 1px;
     }
   }