From b6fde711bf33cede4cb84f85146c32b0c0c61aa5 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期一, 04 十一月 2024 09:06:28 +0800
Subject: [PATCH] 优化需求

---
 company/src/components/common/UploadFile.vue |   79 +++++++++++++++++++++++++++++----------
 1 files changed, 59 insertions(+), 20 deletions(-)

diff --git a/company/src/components/common/UploadFile.vue b/company/src/components/common/UploadFile.vue
index 0ceb06f..8624fa0 100644
--- a/company/src/components/common/UploadFile.vue
+++ b/company/src/components/common/UploadFile.vue
@@ -1,17 +1,19 @@
 <template>
   <div>
     <el-upload
+      ref="uploadFileBtn"
       class="upload-demo"
-      :accept="uploadData.fileTyp"
+      :accept="uploadData.fileType"
       :action="uploadImgUrl"
       :limit="1"
+      :before-remove="removes"
       :on-exceed="handleExceed"
       :on-success="handleFileSuccess"
       :on-error="uploadError"
       :before-upload="beforeFileUpload"
       :file-list="fileList">
-    <el-button size="small" type="primary">鐐瑰嚮涓婁紶</el-button>
-    <div slot="tip" class="el-upload__tip">鍙兘涓婁紶{{ uploadData.fileType }}鏂囦欢锛屼笖涓嶈秴杩�5mb</div>
+    <el-button  size="small" type="primary"  >鐐瑰嚮涓婁紶</el-button>
+    <div style="display: inline-block;position: absolute"  slot="tip" class="el-upload__tip" v-if="showTips">{{'(鍙兘涓婁紶'+uploadData.fileType +'鏂囦欢锛屼笖涓嶈秴杩�5mb)'}}</div>
   </el-upload>
   </div>
 
@@ -20,44 +22,81 @@
 <script>
 export default {
   props: {
+    fileList:{
+      type: Array,
+      default: () => []
+    },
     file: {
       type: Object,
       default: () => {}
     },
-    tipsLabel: '',
+    fileIndex: {
+      type: Number,
+      default: () =>0
+    },
+    showTips: {
+      type: Boolean,
+    default: () => true
+    },
     customStyle: {
       type: String,
-    default: 'width: 190px; height: 190px;'
+      default: 'width: 190px; height: 190px;'
     },
     uploadData: Object
   },
   data() {
     return {
-      fileList:null,
+      uploaded:false,
+      // fileList:[],
       uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/public/upload?folder='+this.uploadData.folder
     }
   },
-
+  watch: {
+    fileList (nv,ov) {
+      if(this.fileList ==null){
+        this.fileList = new Array();
+      }
+      if(this.fileList.length == 0){
+        this.uploaded = false
+      }else{
+        this.uploaded=true
+      }
+     // alert(this.fileList)
+    },
+    tipsLabel (nv,ov) {
+      if(this.tipsLabel ==null){
+        this.tipsLabel = ''
+      }
+    }
+  },
   methods: {
+    removes() {
+      this.uploaded=false
+      this.$emit('remove')
+    },
     // 涓婁紶鍥剧墖
-    handleExceed(){},
+    handleExceed(){
+      this.$message.error('鍙厑璁镐笂浼�1涓枃浠讹紝璇峰垹闄ゅ凡浼犳枃浠讹紝閲嶈瘯锛�')
+    },
     handleFileSuccess(res, file) {
       if (res.code == 200) {
         let { data } = res
+        this.uploaded = true
         // this.fileList = [{name: data.originname, url: data.url }]
         this.$message.success('涓婁紶鎴愬姛')
-        this.$emit('uploadSuccess', { fileurl: data.imgaddr, fileurlFull: data.url, name: data.originname })
+        this.$emit('uploadSuccess', { fileurl: data.imgaddr,  fileurlFull: data.url, name: data.originname ,index:this.fileIndex})
       } else {
-        this.$tip.apiFailed('涓婁紶澶辫触')
+        this.$message.apiFailed('涓婁紶澶辫触')
       }
       this.$emit('uploadEnd')
     },
     uploadError() {
-      this.$tip.apiFailed('涓婁紶澶辫触')
+      this.$message.apiFailed('涓婁紶澶辫触')
       this.$emit('endUpload')
     },
     // // 鎷︽埅
     beforeFileUpload(file) {
+
       this.$emit('uploadBegin')
       return true
     }
@@ -72,12 +111,12 @@
   height: $image-width;
 }
 ::v-deep .el-upload {
-  border: 1px dashed #d9d9d9;
+  //border: 1px dashed #d9d9d9;
   border-radius: 6px;
   cursor: pointer;
   position: relative;
   width: $image-width;
-  height: $image-width;
+  height: auto;
   overflow: hidden;
 }
 .avatar-uploader .el-upload:hover {
@@ -95,7 +134,7 @@
   width: $image-width;
   height: $image-width;
   display: block;
-}
+}#67C23A
 .tips-style {
   height: 13px;
   font-size: 13px;
@@ -109,18 +148,18 @@
   width: 90px !important;
   height: 90px !important;
 }
+::v-deep .el-upload-list__item-name{
+  color: #67C23A;
+}
 ::v-deep .el-upload-list__item {
-  width: 90px !important;
-  height: 90px !important;
+  width: 80% !important;
+  height: 50px !important;
 }
 .icon {
   -webkit-transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
   transform: translate(0%, -85%);
 }
-::v-deep .el-upload-list__item {
-  width: 90px !important;
-  height: 90px !important;
-}
+
 </style>
 

--
Gitblit v1.9.3