From 1a55d5008d2484e4730a5e8919cdb95e14da98d5 Mon Sep 17 00:00:00 2001 From: Tcsm <1377977403@qq.com> Date: 星期三, 09 八月 2023 23:51:37 +0800 Subject: [PATCH] 完善各模块的视频上传功能,显示正在上传和上传完成提示 --- ruoyi-ui/src/views/clean/cleanInfo.vue | 105 ++++++++++++++++++++++++++++------------------------ 1 files changed, 57 insertions(+), 48 deletions(-) diff --git a/ruoyi-ui/src/views/clean/cleanInfo.vue b/ruoyi-ui/src/views/clean/cleanInfo.vue index cb42a11..f02f731 100644 --- a/ruoyi-ui/src/views/clean/cleanInfo.vue +++ b/ruoyi-ui/src/views/clean/cleanInfo.vue @@ -2,7 +2,7 @@ <div class="app-container"> <div class="form-header mt"> <h4 class="dt h4">淇濇磥鏀剁撼淇℃伅 </h4> - <el-button type="primary" class="pt" icon="el-icon-edit" @click="handleEdit()" :disabled="btn">缂栬緫</el-button> +<!-- <el-button type="primary" class="pt" icon="el-icon-edit" @click="handleEdit()" :disabled="btn">缂栬緫</el-button>--> </div> <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px"> @@ -49,7 +49,8 @@ :http-request="requestUpload" :file-list="fileList" > - <i slot="default" class="el-icon-plus"></i> + <div v-if="uploading" class="upload-status">姝e湪涓婁紶...</div> + <i v-if="!uploading" slot="default" class="el-icon-plus"></i> <div slot="file" slot-scope="{file}"> <img class="el-upload-list__item-thumbnail" @@ -59,29 +60,28 @@ fit="cover" :preview-src-list="[file.url]" > - <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 - - class="el-upload-list__item-delete" - @click="handleDownload(file.url)" - > - <i class="el-icon-download"></i> - </span> - <span - v-if="isShow" - class="el-upload-list__item-delete" - @click="handleRemove(file)" - > - <i class="el-icon-delete"></i> - </span> + <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 + + class="el-upload-list__item-delete" + @click="handleDownload(file.url)" + > + <i class="el-icon-download"></i> + </span> + <span + v-if="isShow" + class="el-upload-list__item-delete" + @click="handleRemove(file)" + > + <i class="el-icon-delete"></i> + </span> + </span> </div> @@ -99,8 +99,8 @@ :http-request="requestUpload" :show-file-list="true" > - - <i slot="default" class="el-icon-plus"></i> + <div v-if="uploading" class="upload-status">姝e湪涓婁紶...</div> + <i v-if="!uploading" slot="default" class="el-icon-plus"></i> <div slot="file" slot-scope="{file}"> <img class="el-upload-list__item-thumbnail" @@ -110,27 +110,28 @@ fit="cover" > <span class="el-upload-list__item-actions"> - <span - class="el-upload-list__item-preview" - @click="handleFileCardPreview(file)" - > - <i class="el-icon-zoom-in"></i> - </span> - <span + <span - class="el-upload-list__item-delete" - @click="handleDownload(file.url)" - > + class="el-upload-list__item-preview" + @click="handleFileCardPreview(file)" + > + <i class="el-icon-zoom-in"></i> + </span> + <span + + class="el-upload-list__item-delete" + @click="handleDownload(file.url)" + > <i class="el-icon-download"></i> </span> - <span - v-if="isShow" - class="el-upload-list__item-delete" - @click="handleRemoveFile(file)" - > - <i class="el-icon-delete"></i> - </span> - </span> + <span + v-if="isShow" + class="el-upload-list__item-delete" + @click="handleRemoveFile(file)" + > + <i class="el-icon-delete"></i> + </span> + </span> </div> @@ -139,7 +140,7 @@ </el-upload> <el-form-item size="large"> - <el-button type="primary" @click="submitForm" :disabled="dsb">淇敼</el-button> + <el-button v-if="isShow" type="primary" @click="submitForm" :disabled="dsb">淇敼</el-button> </el-form-item> </el-form> @@ -170,6 +171,8 @@ ], dsb:true, btn:false, + isShow:true, + uploading: false, formData: { type: undefined, kind: undefined, @@ -241,12 +244,14 @@ jd = this.$route.query.detail this.btn= jd this.dsb = !jd + this.isShow=true document.title = "淇敼淇濇磥鏀剁撼璇︾粏淇℃伅"; this.$route.meta.title = "淇敼淇濇磥鏀剁撼璇︾粏淇℃伅";//鍒楄〃鐨勫悕绉� } else{ document.title = "淇濇磥鏀剁撼璇︾粏淇℃伅"; this.$route.meta.title = "淇濇磥鏀剁撼璇︾粏淇℃伅";//鍒楄〃鐨勫悕绉� + this.isShow=false } let _this = this @@ -347,11 +352,14 @@ handlePictureCardPreview(file) { + this.dialogImageUrl = file.url; + this.dialogVisible = true; + }, + handleFileCardPreview(file){ this.dialogFileUrl = file.url; const Base64 = require('js-base64').Base64 this.desurl = process.env.VUE_APP_BASE_OTHER_API+'onlinePreview?url='+encodeURIComponent(Base64.encode(this.dialogFileUrl)); myWindow=window.open(this.desurl,'','width=1200,height=800,top=150,left=300'); - }, //鍒犻櫎鍥剧墖 handleRemoveFile(file,) { @@ -386,10 +394,11 @@ var formData = new FormData(); formData.append('uploadFile', file); let _this = this - + this.uploading = true; uploadPic(formData).then(response => { let pth = response.data.originalFilename.substr(response.data.originalFilename.length-4, response.data.originalFilename.length) - + this.uploading = false; + this.$modal.msgSuccess("涓婁紶鎴愬姛"); if(_this.fot.includes(pth) === true) { _this.fileList.push({name:response.data.fileName, "url":response.data.url}) -- Gitblit v1.9.1