优化

src/views/modules/worklog/icworklog-add-or-update.vue

@@ -42,12 +42,12 @@
               </el-date-picker>
       </el-form-item>
           <el-form-item label="内容" prop="content">
-          <el-input type="textarea" v-model="dataForm.content" placeholder="内容"></el-input>
+          <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" v-model="dataForm.content" placeholder="内容"></el-input>
       </el-form-item>
           <el-form-item label="备注" prop="remark">
           <el-input type="textarea" v-model="dataForm.remark" placeholder="备注"></el-input>
       </el-form-item>
-        <el-form-item class="block"
+        <!-- <el-form-item class="block"
                       label="照片"
                       label-width="150px"
                       prop="attach">
@@ -55,7 +55,7 @@
                        :action="uploadUlr"
                        accept=".jpg,.png,.jpeg,.bmp"
                        :on-success="handleFileSuccess"
-                       :on-remove="handleFileRemove"
+                       :on-remov·e="handleFileRemove"
                        :on-preview="handleFileDownload"
                        :limit="3"
                        :before-upload="beforeUpload"
@@ -66,6 +66,25 @@
                 <div slot="tip"
                      class="el-upload__tip">支持jpg、png、bmp</div>
             </el-upload>
+        </el-form-item> -->
+
+        <el-form-item label="照片"
+                        label-width="150px"
+                        style="display:block">
+            <el-upload :class="['avatar-uploader', {'hide': hideUploadBtn}] "
+                       ref="uploadPic"
+                       :action="uploadUlr"
+                       list-type="picture-card"
+                       :on-exceed="exceedPic"
+                       :on-remove="removePic"
+                       :file-list="dataForm.fileList"
+                       :on-change="handleEditChange"
+                       :on-success="handleSuccess"
+                       :limit="3">
+              <span class="font-14">选择图片</span>
+              <div slot="tip"
+                   class="upload_tip">最多上传3张图片，图片支持jpg、jpeg、bmp、git或png格式</div>
+            </el-upload>
           </el-form-item>
       </el-form>
     <template slot="footer">
@@ -96,8 +115,10 @@ export default {
         content: '',
         remark: '',
         mobile: '',
-        fileList: []
+        fileList: [],
-      }
+        // imageList: [],//	图片集合	
+      },
+      hideUploadBtn: false
     }
   },
   created () {
@@ -184,28 +205,84 @@ export default {
           return this.$message.error('网络错误')
         })
     },
-    beforeUpload (file) {
+    // beforeUpload (file) {
-      const array = file.name.split('.')
+    //   const array = file.name.split('.')
-      const extension = array[array.length - 1]
+    //   const extension = array[array.length - 1]
 
-      const formatarray = ['jpg', 'png', 'jpeg', 'bmp']
+    //   const formatarray = ['jpg', 'png', 'jpeg', 'bmp']
 
-      if (formatarray.indexOf(extension) === -1) {
+    //   if (formatarray.indexOf(extension) === -1) {
-        this.$message.error('只支持图片、word、pdf')
+    //     this.$message.error('只支持图片、word、pdf')
-        return false
+    //     return false
-      }
+    //   }
 
-    },
+    // },
+
+    // handleFileRemove (file) {
+
+    //   if (file && file.status === "success") {
+    //     this.dataForm.fileList.splice(this.dataForm.fileList.findIndex(item => item.uid === file.uid), 1)
+    //   }
+    // },
+
+    // handleFileSuccess (res, file) {
+
+    //   if (res.code === 0 && res.msg === 'success') {
+    //     const array = file.name.split('.')
+    //     const fileType = array[array.length - 1]
+
+    //     const picArray = ['jpg', 'png', 'jpeg', 'bmp']
+    //     const videoarray = ['mp4', 'wma', 'm4a']
+    //     const docArray = ['doc', 'docx', 'xls', 'xlsx', 'pdf']
+    //     const mp3Array = ['mp3']
+
+    //     if (picArray.indexOf(fileType) > -1) {
+    //       file.attachmentFormat = 'image'
+    //     } else if (videoarray.indexOf(fileType) > -1) {
+    //       file.attachmentFormat = 'video'
+    //     } else if (docArray.indexOf(fileType) > -1) {
+    //       file.attachmentFormat = 'doc'
+    //     } else if (mp3Array.indexOf(fileType) > -1) {
+    //       file.attachmentFormat = 'voice'
+    //     }
 
-    handleFileRemove (file) {
+    //     file.url = res.data.url
+    //     file.type = fileType
 
+    //     file.fileName = file.name
+    //     file.fileType = file.type
+
+    //     this.dataForm.fileList.push(file)
+    //     console.log(this.dataForm.fileList)
+    //   } else this.$message.error(res.msg)
+    // },
+    //下载
+    // handleFileDownload (file) {
+
+    //   var a = document.createElement('a');
+    //   var event = new MouseEvent('click');
+    //   a.download = file.name;
+    //   console.log(a)
+    //   a.href = file.url;
+    //   a.dispatchEvent(event);
+
+
+    // },
+
+    exceedPic () {
+      this.$message.warning("最多上传3张预览图片")
+
+    },
+    removePic (file, fileList) {
+
+      // this.formData.imageList.splice(this.formData.imageList.findIndex(item => item === file.url), 1)
       if (file && file.status === "success") {
         this.dataForm.fileList.splice(this.dataForm.fileList.findIndex(item => item.uid === file.uid), 1)
       }
-    },
+      this.hideUploadBtn = fileList.length >= 3;
-
-    handleFileSuccess (res, file) {
 
+    },
+    handleSuccess (res, file) {
       if (res.code === 0 && res.msg === 'success') {
           const array = file.name.split('.')
           const fileType = array[array.length - 1]
@@ -234,18 +311,12 @@ export default {
           this.dataForm.fileList.push(file)
           console.log(this.dataForm.fileList)
         } else this.$message.error(res.msg)
-    },
-    //下载
-    handleFileDownload (file) {
-
-      var a = document.createElement('a');
-      var event = new MouseEvent('click');
-      a.download = file.name;
-      console.log(a)
-      a.href = file.url;
-      a.dispatchEvent(event);
 
+    },
+    // 最多上传3张图，超过时隐藏上传按钮
+    handleEditChange (file, fileList) {
 
+      this.hideUploadBtn = fileList.length >= 3;
     },
     // 表单提交
     dataFormSubmitHandle: debounce(function () {