完善

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

@@ -47,34 +47,26 @@
           <el-form-item label="备注" prop="remark">
           <el-input type="textarea" v-model="dataForm.remark" placeholder="备注"></el-input>
       </el-form-item>
-        <el-form-item label="合同附件" prop="fileList" label-width="140px">
+        <el-form-item class="block"
-            <template>
+                      label="附件"
-                <upload-image :defaultFileList="dataForm.fileList" :limit="6" @change="onChangeFileList"></upload-image>
+                      label-width="150px"
-            </template>
+                      prop="attach">
+            <el-upload class="upload-demo"
+                       :action="uploadUlr"
+                       accept=".doc,.pdf,.xls,.docx,.xlsx,.jpg,.png,.jpeg,.bmp,.mp4,.wma,.m4a,.mp3"
+                       :on-success="handleFileSuccess"
+                       :on-remove="handleFileRemove"
+                       :on-preview="handleFileDownload"
+                       :limit="3"
+                       :before-upload="beforeUpload"
+                       :file-list="dataForm.fileList">
+                <el-button size="small"
+                           :disabled="dataForm.fileList.length===3"
+                           type="primary">点击上传</el-button>
+                <div slot="tip"
+                     class="el-upload__tip">支持图片、word、pdf</div>
+            </el-upload>
         </el-form-item>
-<!--        <el-form-item-->
-<!--                label="图片/附件"-->
-<!--                label-width="150px"-->
-<!--                style="display: block"-->
-<!--                prop="fileList"-->
-<!--        >-->
-<!--            <el-upload-->
-<!--                    class="avatar-uploader"-->
-<!--                    :action="uploadUrl"-->
-<!--                    :data="{ customerId: customerId }"-->
-<!--                    :show-file-list="true"-->
-<!--                    :file-list="dataForm.fileList"-->
-<!--                    :on-preview="handleImgPreview"-->
-<!--                    :on-success="handleImgSuccess"-->
-<!--                    :on-remove="handleImgRemove"-->
-<!--                    :on-exceed="handleImgExceed"-->
-<!--                    :before-upload="beforeImgUpload"-->
-<!--                    :limit="3"-->
-<!--            >-->
-<!--                <i class="el-icon-plus avatar-uploader-icon"></i>-->
-<!--                <span style="color: #999"> 点击上传，支持图片、word、pdf格式</span>-->
-<!--            </el-upload>-->
-<!--        </el-form-item>-->
       </el-form>
     <template slot="footer">
       <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
@@ -86,13 +78,11 @@
 <script>
 import debounce from 'lodash/debounce'
 import { requestPost } from "@/js/dai/request"
-import UploadImage from './upload-image.vue'
 export default {
   data () {
     return {
       visible: false,
-      uploadUrl: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2",
+      uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadvariedfile',
-      customerId: localStorage.getItem("customerId"),
       logTypeArr: [],
       optionsG: [],
       dataForm: {
@@ -117,9 +107,6 @@ export default {
       }
     }
   },
-  components: {
-    UploadImage
-  },
   created () {
     this.getGridList()
     this.getCategrayList()
@@ -209,94 +196,75 @@ export default {
           return this.$message.error('网络错误')
         })
     },
-    onChangeFileList (e, rowIndex=0) {
+    beforeUpload (file) {
-      console.log('onChangeFileList', e)
+      const array = file.name.split('.')
-      if (e.length > 0) {
+      const extension = array[array.length - 1]
-        this.dataForm.fileList = []
+
-        e.forEach(item => {
+      const formatarray = ['jpg', 'png', 'jpeg', 'bmp', 'mp4', 'wma', 'm4a', 'mp3', 'doc', 'docx', 'xls', 'xlsx', 'pdf']
-          let ob = {
+
-            fileType: '0',
+      if (formatarray.indexOf(extension) === -1) {
-            fileUrl: item.response.data.url
+        this.$message.error('只支持图片、word、pdf')
-          }
+        return false
-          this.dataForm.fileList.push(ob)
-        })
       }
+
     },
-    beforeImgUpload(file) {
-      console.log(file);
-      const isLt1M = file.size / 1024 / 1024 < 10;
-      const srcType = file.type;
-      const format = file.name.split(".").pop();
 
-      if (!isLt1M) {
+    handleFileRemove (file) {
-        this.$message.error("上传文件大小不能超过 10MB!");
+
-        return false;
+      if (file && file.status === "success") {
-      }
+        this.dataForm.fileList.splice(this.dataForm.fileList.findIndex(item => item.uid === file.uid), 1)
-      if (
-        srcType.indexOf("image") == -1 &&
-        srcType.indexOf("video") == -1 &&
-        ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "pdf"].indexOf(format) ==
-        -1
-      ) {
-        this.$message.error("仅限图片、word和pdf文件!");
-        return false;
       }
-      return true;
     },
 
-    handleImgSuccess(res, file, fileList) {
+    handleFileSuccess (res, file) {
-      console.log("handleImgSuccess", file);
+
-      if (res.code === 0 && res.msg === "success") {
+      if (res.code === 0 && res.msg === 'success') {
-        let format = file.name.split(".").pop();
+        const array = file.name.split('.')
-        let srcType = file.raw.type;
+        const fileType = array[array.length - 1]
-        let type = "file";
+
-        console.log("==============================srcType: ", srcType);
+        const picArray = ['jpg', 'png', 'jpeg', 'bmp']
-        if (srcType.indexOf("image") != -1) {
+        const videoarray = ['mp4', 'wma', 'm4a']
-          type = "image";
+        const docArray = ['doc', 'docx', 'xls', 'xlsx', 'pdf']
-        } else if (srcType.indexOf("video") != -1) {
+        const mp3Array = ['mp3']
-          type = "video";
+
+        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'
         }
-        this.dataForm.fileList.push({
-          format,
-          name: file.name,
-          size: file.size,
-          type,
-          url: res.data.url,
-        });
-        console.log(this.dataForm.fileList);
-      } else {
-        this.$message.error(res.msg);
-      }
-    },
 
-    handleImgPreview(file) {
+        file.url = res.data.url
-      console.log(file);
+        file.type = fileType
-      window.open(file.url || file.response.data.url);
-    },
 
-    handleImgRemove(file) {
+        file.fileName = file.name
-      console.log("handleImgRemove", file);
+        file.fileType = file.type
-      if (file.response) {
+        file.url = file.url
-        let index = this.dataForm.fileList.findIndex(
+
-          (item) => item.url == file.response.data.url
+        this.dataForm.fileList.push(file)
-        );
+        console.log(this.dataForm.fileList)
-        this.dataForm.fileList.splice(index, 1);
+      } else this.$message.error(res.msg)
-      } else if (file.url) {
-        let index = this.dataForm.fileList.findIndex(
-          (item) => item.url == file.url
-        );
-        this.dataForm.fileList.splice(index, 1);
-      }
     },
+    //下载
+    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);
+
 
-    handleImgExceed() {
-      this.$message({
-        type: "warning",
-        message: "文件数量最多不超过三个",
-      });
     },
     // 表单提交
     dataFormSubmitHandle: debounce(function () {
+      if (this.dataForm.content.length < 70) {
+        return this.$message.error("内容不能少于70字")
+      }
       this.$refs['dataForm'].validate((valid) => {
         if (!valid) {
           return false

src/views/modules/worklog/upload-image.vue

@@ -1,130 +0,0 @@
-<template>
-    <div class="upload-image">
-        <el-upload list-type="picture-card"
-            :action="uploadUrl"
-            :data="{ customerId: customerId }"
-            :file-list="fileList"
-            :limit="limit"
-            :on-success="(res, file) => handleImgSuccess(res, file)"
-            :on-error="(res, file) => handleImgError(res, file)"
-            :on-remove="(res) => handleImgRemove(res)"
-            :on-exceed="(res) => handleImgExceed(res)"
-            :before-upload="(file) => beforeImgUpload(file)">
-            <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="">
-                <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="handleRemove(file)">
-                        <i class="el-icon-delete"></i>
-                    </span>
-                </span>
-            </div>
-        </el-upload>
-        <el-dialog :visible.sync="dialogVisible">
-            <img width="100%" :src="dialogImageUrl" alt="">
-        </el-dialog>
-    </div>
-</template>
-
-<script>
-export default {
-    props: {
-        limit: {
-            type: Number,
-            default: 3
-        },
-        rowIndex: {
-            type: Number,
-            default: 0
-        },
-        defaultFileList: {
-            type: Array
-        }
-    },
-    watch: {
-        defaultFileList: {
-            handler (newVal) {
-                newVal.forEach(item => {
-                    item.url = item.fileUrl
-                })
-                this.fileList = newVal
-            },
-            deep: true,
-            immediate: true          
-        }
-
-    },
-    data () {
-        return {
-            dialogImageUrl: '',
-            dialogVisible: false,
-            disabled: false,
-            uploadUrl: `${window.SITE_CONFIG['apiURL']}/oss/file/uploadqrcodeV2`,
-            customerId: localStorage.getItem("customerId"),
-            fileList: [],
-            imageUrls: []
-        }
-    },
-    created() {
-        console.log('xxxxxx', this.rowIndex)
-    },
-    methods: {
-        handleRemove(file) {
-            const delFile = file.url
-            this.fileList.forEach((item, key) => {
-                if (delFile == item.url) {
-                    this.fileList.splice(key, 1)
-                }
-            })
-        },
-        handlePictureCardPreview(file) {
-            this.dialogImageUrl = file.url
-            this.dialogVisible = true
-        },
-        beforeImgUpload(file) {
-            // console.log(file)
-        },
-        handleImgExceed(res) {
-            console.log(res)
-            this.$message({
-              type: "warning",
-              message: `文件数量最多不超过${this.limit}个`,
-            })
-        },
-        handleImgRemove(file) {
-            console.log("handleImgRemove", file)
-        },
-        handleImgSuccess(res, file) {
-            // console.log("handleImgSuccess", res, file)
-            if (res.code === 0 && res.msg === "success") {
-                this.fileList.push(file)
-                this.$emit('change', this.fileList, this.rowIndex)
-            } else {
-                this.$message.error(res.msg)
-            }
-        },
-
-        handleImgError(res, file) {
-            console.log(res)
-        },
-    }
-}
-</script>
-<style lang="scss" scoped>
-.upload-image {
-    // min-width: 120px;
-    // height: 80px;
-}
-/deep/ .el-upload--picture-card {
-    width: 60px;
-    height: 60px;
-    line-height: 70px;
-}
-/deep/ .el-upload-list--picture-card .el-upload-list__item {
-    width: 60px;
-    height: 60px;
-}
-</style>