From 2ac52508980a33006a1596c43c4fc8daaaa5d19f Mon Sep 17 00:00:00 2001 From: Tcsm <1377977403@qq.com> Date: 星期日, 08 十月 2023 18:15:33 +0800 Subject: [PATCH] 新增和详情中的两个上传不会同时显示“正在上传”,详情中对图片和附件的修改直接调用接口,上传图片的地方只能上传图片 --- ruoyi-ui/src/views/bignote/familyeventInfo.vue | 147 ++++++++++++++++++++++++++++++++++++++++-------- 1 files changed, 122 insertions(+), 25 deletions(-) diff --git a/ruoyi-ui/src/views/bignote/familyeventInfo.vue b/ruoyi-ui/src/views/bignote/familyeventInfo.vue index 63cdca6..59adf31 100644 --- a/ruoyi-ui/src/views/bignote/familyeventInfo.vue +++ b/ruoyi-ui/src/views/bignote/familyeventInfo.vue @@ -1,8 +1,15 @@ <template> - <div class="app-container"> + <div class="app-container" id="printable-content"> <div class="form-header mt"> - <h4 class="dt h4">瀹跺ぇ浜嬭璇︾粏淇℃伅 </h4> - + <h1 style="font-size:21px;padding-top:30px;display: flex;justify-content: space-between;align-items: center;" > + <span>瀹跺ぇ浜嬭璇︽儏</span> + <div style="display: flex; align-items: center;"> + <el-button size="mini" type="text" v-print="'#printable-content'" v-hasPermi="['person:information:memo']"> + <div class="form" ><el-icon style="padding-right:100px;"></el-icon> + <span class="text" style="width: 69px;height: 26px;font-size: 16px; + font-family: Microsoft YaHei-Regular, Microsoft YaHei; color: #EBA4AA;">鎵撳嵃</span></div> + </el-button></div> + </h1> </div> <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"> @@ -20,7 +27,7 @@ </el-input> </el-form-item> <el-form-item label="鍙戠敓鏃堕棿" prop="happenTime"> - <el-input v-model="formData.happenTime" placeholder="璇疯緭鍏ュ彂鐢熸椂闂�" clearable :style="{width: '100%'}" :disabled="dsb"> + <el-input v-model="formData.happenTime" placeholder="璇疯緭鍏ュ彂鐢熸椂闂�" type="date" clearable :style="{width: '100%'}" :disabled="dsb"> </el-input> </el-form-item> @@ -28,15 +35,25 @@ <el-input v-model="formData.remark" placeholder="璇疯緭鍏ュ娉�" clearable :style="{width: '100%'}" :disabled="dsb"></el-input> </el-form-item> - <h4 class="form-header">鐢靛瓙鏂囦欢 </h4> +<!-- <el-form-item label="鏄惁鏄湰瀹跺涵璁板綍" prop="ownData">--> +<!-- <el-input v-model="formData.ownData=== 1 ? '鏄�':'鍚�'" placeholder=" " clearable :style="{width: '100%'}" :disabled=true></el-input>--> +<!-- </el-form-item>--> + + <h4 class="form-header">鐩稿叧鍥剧墖 </h4> <el-upload action="#" list-type="picture-card" multiple + accept="image/jpeg, image/png,image/jpg, image/WMF,image/gif" :http-request="requestUpload" :file-list="fileList" + :disabled="!btn" + :class="{ hide: !btn }" + + > - <i slot="default" class="el-icon-plus"></i> + <div v-if="uploading1" class="upload-status">姝e湪涓婁紶...</div> + <i v-if="!uploading1" slot="default" class="el-icon-plus"></i> <div slot="file" slot-scope="{file}"> <img class="el-upload-list__item-thumbnail" @@ -48,14 +65,14 @@ > <span class="el-upload-list__item-actions"> <span - v-if="isShow" + class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)" > <i class="el-icon-zoom-in"></i> </span> <span - v-if="isShow" + class="el-upload-list__item-delete" @click="handleDownload(file.url)" > @@ -83,11 +100,13 @@ list-type="picture-card" :on-preview="handleFileCardPreview" :on-remove="handleRemoveFile" - :http-request="requestUpload" + :http-request="requestUpload1" :show-file-list="true" + :disabled="!btn" + :class="{ hide: !btn }" > - - <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" @@ -98,14 +117,14 @@ > <span class="el-upload-list__item-actions"> <span - v-if="isShow" + class="el-upload-list__item-preview" @click="handleFileCardPreview(file)" > <i class="el-icon-zoom-in"></i> </span> <span - v-if="isShow" + class="el-upload-list__item-delete" @click="handleDownload(file.url)" > @@ -160,9 +179,8 @@ dsb:true, btn:false, isShow:true, - - doctorList: [], - + uploading: false, + uploading1:false, formData: { id: undefined, title: undefined, @@ -180,11 +198,7 @@ message: '璇疯緭鍏ュぇ浜嬫爣棰�', trigger: 'blur' }], - familyId: [{ - required: true, - message: '璇疯緭鍏ュ搴彿', - trigger: 'blur' - }], + people: [{ required: true, message: '璇疯緭鍏ヤ汉鐗�', @@ -222,7 +236,8 @@ else{ document.title = "瀹跺ぇ浜嬭璇︾粏淇℃伅"; this.$route.meta.title = "瀹跺ぇ浜嬭璇︾粏淇℃伅";//鍒楄〃鐨勫悕绉� - this.isShow=true + this.btn = false; + this.isShow=false } let _this = this @@ -267,7 +282,7 @@ this.$refs['elForm'].validate(valid => { - + console.log(this.formData) if (valid) { if (this.formData.id != undefined) { updateFamilyevent(this.formData).then(response => { @@ -303,6 +318,18 @@ { if(this.fileListOther[i].url==file.url) this.$delete(this.fileListOther,i); + let ul = this.fileList.map(function (elem){ + return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"") + }).join(",") + let uls = this.fileListOther.map(function (elem){ + return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"") + }).join(",") + this.formData.url = ul+","+uls; + updateFamilyevent(this.formData).then(response => { + this.$modal.msgSuccess("鍒犻櫎鎴愬姛"); + // this.open = false; + // this.btn=false + }); } }, handleRemove(file) { @@ -310,6 +337,19 @@ { if(this.fileList[i].url==file.url) this.$delete(this.fileList,i); + let ul = this.fileList.map(function (elem){ + return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"") + }).join(",") + let uls = this.fileListOther.map(function (elem){ + return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"") + }).join(",") + this.formData.url = ul+","+uls; + updateFamilyevent(this.formData).then(response => { + this.$modal.msgSuccess("鍒犻櫎鎴愬姛"); + // this.open = false; + // this.btn=false + }); + } }, handleFileCardPreview(file){ @@ -338,19 +378,58 @@ handleEdit() { this.dsb = false - // this.btn = true + this.btn = true this.isShow=false }, + requestUpload(params) { var file = params.file; var formData = new FormData(); formData.append('uploadFile', file); let _this = this + this.uploading1 = true; uploadPic(formData).then(response => { let pth = response.data.originalFilename.substr(response.data.originalFilename.length-4, response.data.originalFilename.length) + this.uploading1= false; + console.log(_this.fot.includes(pth)) + // debugger + if(_this.fot.includes(pth) === true) + { + _this.fileList.push({name:response.data.fileName, "url":response.data.url}) + let ul = this.fileList.map(function (elem){ + return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"") + }).join(",") + let uls = this.fileListOther.map(function (elem){ + return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"") + }).join(",") + this.formData.url = ul+","+uls + console.log(this.formData.url) + updateFamilyevent(this.formData).then(response => { + this.$modal.msgSuccess("鍥剧墖涓婁紶鎴愬姛"); + // this.open = false; + // this.btn=false + }); + } + else{ + _this.fileListOther.push({name:response.data.fileName, url:response.data.url}) + } + }) + + }, + requestUpload1(params) + { + var file = params.file; + 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}) @@ -359,7 +438,19 @@ else{ _this.fileListOther.push({name:response.data.fileName, url:response.data.url}) - + let ul = this.fileList.map(function (elem){ + return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"") + }).join(",") + let uls = this.fileListOther.map(function (elem){ + return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"") + }).join(",") + this.formData.url = ul+","+uls + console.log(this.formData.url) + updateFamilyevent(this.formData).then(response => { + this.$modal.msgSuccess("鏂囨。涓婁紶鎴愬姛"); + // this.open = false; + // this.btn=false + }); } }) @@ -389,10 +480,16 @@ display: block; } +.hide .el-upload--picture-card { + display: none; +} .pt{ right: 10px; top:-3px; display: block; position: absolute; } +.form{ + background:center/11% no-repeat url('../../assets/icons/form.png') ; +} </style> -- Gitblit v1.9.1