From fcd9788f561b8b81bf5aa45bbc3db035b9786f2c Mon Sep 17 00:00:00 2001 From: feige <feige@qq.com> Date: 星期五, 08 十一月 2024 11:10:00 +0800 Subject: [PATCH] 修改图像bug --- ruoyi-ui/src/views/pet/petInfo.vue | 253 +++++++++++++++++++++++++++++++++++++------------ 1 files changed, 189 insertions(+), 64 deletions(-) diff --git a/ruoyi-ui/src/views/pet/petInfo.vue b/ruoyi-ui/src/views/pet/petInfo.vue index 4b1ca0a..4f5c950 100644 --- a/ruoyi-ui/src/views/pet/petInfo.vue +++ b/ruoyi-ui/src/views/pet/petInfo.vue @@ -96,7 +96,7 @@ <el-input v-model="petList.sex === 1 ? '闆勬��':'闆屾��'" :disabled="true"></el-input> </template> <template v-else> - <el-select v-model="petList.sex" placeholder="璇烽�夋嫨淇濇磥/鏀剁撼" clearable :style="{width: '100%'}"> + <el-select v-model="petList.sex" placeholder="璇烽�夋嫨鎬у埆" clearable :style="{width: '100%'}"> <el-option label="闆屾��" value="0"></el-option> <el-option label="闆勬��" value="1"></el-option> </el-select> @@ -110,7 +110,7 @@ </el-form-item> </el-row> <el-row :span="5"> - <el-form-item label="楗涔犳儻(鎭�)" prop="disEatHabit" label-width="100px" style="background: #FAD1E0;border-radius: 6px 6px 0px 6px;opacity: 1;"> + <el-form-item label="楗涔犳儻(鎭�)" prop="disEatHabit" label-width="120px" style="background: #FAD1E0;border-radius: 6px 6px 0px 6px;opacity: 1;"> <el-input v-model="petList.disEatHabit" placeholder="" clearable :style="{width: '100%'}" :disabled="dsb"> </el-input> </el-form-item> @@ -139,16 +139,37 @@ <el-col :span="6" :data="petList"> <div class="block" :model="petList" > <el-col v-model="petList.headPicture" prop="headPicture"> - <el-avatar shape="square" :size=200 > + <!-- <el-avatar shape="square" :size=200 > <el-image - :src="'http://47.93.189.255:8080/'+ petList.headPicture" + :src="'https://www.bendudu.com:8080/'+ petList.headPicture" :fit="fit" style="width: 100%;height: 100%;border-radius: 0px 0px 0px 0px;opacity: 1;border: 1px solid rgba(0,0,0,0.5);" ></el-image> - </el-avatar> + </el-avatar> --> + <el-upload ref="upload1" + action="" + :file-list="fileListOther" + list-type="picture-card" + accept="image/*" + :multiple="false" + :http-request="requestUpload1" + :on-success="handleSucess" + :limit="1"> + + <el-avatar shape="square" style="width: 200px;;height: 200px;" > + <el-image + :src="'https://www.bendudu.com:8080/'+ petList.headPicture" + :fit="fit" style="width: 100%;height: 100%;border-radius: 0px 0px 0px 0px;opacity: 1;border: 1px solid rgba(0,0,0,0.5);" + ></el-image> + + + </el-avatar> + </el-upload> </el-col> </div> - <el-button v-if="isShow" type="primary" @click="submitForm" :disabled="dsb">淇敼榄呭疇淇℃伅</el-button> + +<!-- <el-button v-if="isShow" type="primary" @click="submitForm" :disabled="dsb">淇敼榄呭疇淇℃伅</el-button> --> </el-col> + </div> </el-container> @@ -212,25 +233,43 @@ <el-col :span="6" :data="petList"> <div class="block" :model="petList" > <el-col v-model="petList.fullPicture" prop="fullPicture"> - <el-avatar shape="square" style="width: 1000px;;height: 500px;" > - <el-image - :src="'http://47.93.189.255:8080/'+ petList.fullPicture" - :fit="fit" style="width: 100%;height: 100%;border-radius: 0px 0px 0px 0px;opacity: 1;border: 1px solid rgba(0,0,0,0.5);" - ></el-image> - <el-upload class="upload-demo" action="/uploadImage" :on-success="handleUploadSuccess"> - <el-button slot="trigger">鐐瑰嚮涓婁紶鏂板浘鐗�</el-button> + + <el-upload ref="upload" + action="" + :file-list="fileList" + list-type="picture-card" + accept="image/*" + :multiple="false" + :http-request="requestUpload" + :on-success="handleSucess" + :limit="1"> + + <el-avatar shape="square" style="width: 1000px;;height: 500px;" > + <el-image + :src="'https://www.bendudu.com:8080/'+ petList.fullPicture" + :fit="fit" style="width: 100%;height: 100%;border-radius: 0px 0px 0px 0px;opacity: 1;border: 1px solid rgba(0,0,0,0.5);" + ></el-image> + + + </el-avatar> </el-upload> - </el-avatar> + + + </el-col> </div> - <el-button>淇敼</el-button> + </el-col> + </div> + <div class="form-header mt"> - - +</div> + <div> + <el-button v-if="isShow" type="primary" @click="submitForm" :disabled="dsb">淇敼榄呭疇淇℃伅</el-button> + </div> <el-dialog :visible.sync="dialogVisible"> <img w-full :src="dialogImageUrl" alt="Preview Image" /> @@ -348,7 +387,7 @@ </div> </template> <script> -import {getPetList, listPetnote,uploadPic, download,updatePet} from "@/api/pet/index"; +import {getPetList, listPetnote,uploadPic1, download,updatePet} from "@/api/pet/index"; import {addRole, updateRole} from "@/api/system/role"; import {blobValidate} from "@/utils/ruoyi"; import errorCode from "@/utils/errorCode"; @@ -361,7 +400,10 @@ return { cdi:"榄呭疇璇︾粏淇℃伅", udi:"榄呭疇淇℃伅淇敼", - fot:[".jpg",".jif"], + // 鏁版嵁鑼冨洿閫夐」 + fot:['.bmp','.jpg','.jpeg','.png','.tif','.gif','.pcx','.tga','.exif','.fpx', + '.svg','.psd','.cdr','.pcd','.dxf','.ufo','.eps','.ai','.aw','.WMF','.webp','.apng'], + fileList:[ ], fileListOther:[ @@ -405,7 +447,7 @@ dialect: undefined, address:undefined, eatHabit:undefined, - diseatHabit: undefined, + disEatHabit: undefined, LifeHabit: undefined, disLifeHabit: undefined, url: undefined, @@ -416,6 +458,7 @@ dialogImageUrl: '', dialogVisible: false, disabled: false, + btn: false, // 琛ㄥ崟鏍¢獙 rules: { animal: [{ @@ -477,9 +520,9 @@ trigger: 'blur' }], - diseatHabit: [{ + disEatHabit: [{ required: true, - message: '璇疯緭鍏ラギ椋熶範鎯�(鍠�)', + message: '璇疯緭鍏ラギ椋熶範鎯�(鎭�)', trigger: 'blur' }], masterName: [{ @@ -520,13 +563,16 @@ jd = this.$route.query.detail this.btn= jd this.dsb = !jd - document.title = "淇敼榄呭疇璇︾粏淇℃伅"; - this.$route.meta.title = "淇敼榄呭疇璇︾粏淇℃伅";//鍒楄〃鐨勫悕绉� + this.isShow = true + + // document.title = "淇敼榄呭疇璇︾粏淇℃伅"; + this.$route.meta.title = "淇敼瀹犵墿璇︾粏淇℃伅";//鍒楄〃鐨勫悕绉� } else{ - document.title = "鏌ョ湅榄呭疇璇︾粏淇℃伅"; - this.$route.meta.title = "鏌ョ湅榄呭疇璇︾粏淇℃伅";//鍒楄〃鐨勫悕绉� + // document.title = "鏌ョ湅榄呭疇璇︾粏淇℃伅"; + this.$route.meta.title = "鏌ョ湅瀹犵墿璇︾粏淇℃伅";//鍒楄〃鐨勫悕绉� this.btn = false; + this.isShow = false; } let _this = this @@ -535,7 +581,12 @@ this.loading = true; getPetList(id).then((response) => { this.petList = response.data; + if(this.petList.sex==1) + this.petList.sex = '闆勬��' + else + this.petList.sex = '闆屾��' console.log(this.petList) + // alert(this.petList.headPicture) this.loading = false; }); // getPetowner(id).then((response) => { @@ -553,71 +604,68 @@ this.loading = true; // this.queryParams.happenStartTime = this.dateRange.length > 0 && this.dateRange[0] // this.queryParams.happenEndTime = this.dateRange.length > 0 && this.dateRange[1] - - // console.log(this.queryParams) this.queryParams.pid = this.pid; // listProperty(this.addDateRange(this.queryParams, this.dateRange)).then(response => { listPetnote(this.queryParams).then(response => { - // alert(123) - // console.log(response.data) this.PetNoteList = response.data.data; + this.total = response.data.total; this.loading = false; } ); }, - requestUpload(params) - { - var file = params.file; - var formData = new FormData(); - formData.append('uploadFile', file); - let _this = this + // requestUpload2(params) + // { + // var file = params.file; + // var formData = new FormData(); - uploadPic(formData).then(response => { - let pth = response.data.originalFilename.substr(response.data.originalFilename.length-4, response.data.originalFilename.length) - _this.fileList1.push({name:response.data.fileName, url:response.data.url}) - console("ok") - }) + // formData.append('uploadFile', file); + // let _this = this - }, - requestUpload2(params) - { - var file = params.file; - var formData = new FormData(); - formData.append('uploadFile', file); - let _this = this + // uploadPic1(formData).then(response => { + // let pth = response.data.originalFilename.substr(response.data.originalFilename.length-4, response.data.originalFilename.length) + // _this.fileList2.push({name:response.data.fileName, url:response.data.url}) + // console("ok") + // }) - uploadPic(formData).then(response => { - let pth = response.data.originalFilename.substr(response.data.originalFilename.length-4, response.data.originalFilename.length) - _this.fileList2.push({name:response.data.fileName, url:response.data.url}) - console("ok") - }) - }, + // }, submitForm() { - let ul = this.fileList1.map(function (elem){ - return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"") - }).join(",") - let uls = this.fileList2.map(function (elem){ - return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"") - }).join(",") - this.petList.headPicture = ul, - this.petList.fullPicture = uls, + // let ul = this.fileList1.map(function (elem){ + // return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"") + // }).join(",") + // let uls = this.fileList2.map(function (elem){ + // return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"") + // }).join(",") + // this.petList.headPicture = ul, + // this.petList.fullPicture = uls, this.$refs['elForm'].validate(valid => { if (valid) { if (this.petList.id != undefined) { + if(this.petList.sex=='闆勬��') + this.petList.sex = 1 + else + this.petList.sex = 0 updatePet(this.petList).then(response => { this.$modal.msgSuccess("淇敼鎴愬姛"); // this.open = false; + if(this.petList.sex==1) + this.petList.sex = '闆勬��' + else + this.petList.sex = '闆屾��' this.btn=false }); } else { this.$modal.msgSuccess("淇敼澶辫触"); + if(this.petList.sex==1) + this.petList.sex = '闆勬��' + else + this.petList.sex = '闆屾��' } } @@ -708,13 +756,90 @@ this.dsb = false this.btn = true }, + handleSucess() + { + // alert(15) + this.$refs.upload.clearFiles(); + }, + requestUpload(params) + { + var file = params.file; + var formData = new FormData(); + formData.append('uploadFile', file); + let _this = this + this.$refs.upload.clearFiles(); + // this.uploading1 = true; + //alert(100) + uploadPic1(formData).then(response => { + // alert(18) + // let pth = response.data.originalFilename.substr(response.data.originalFilename.length-4, response.data.originalFilename.length) + // _this.fileList1.push({name:response.data.fileName, url:response.data.url}) + // console("ok") + // alert(90) + // alert(response.data.url) + if(this.petList.sex=='闆勬��') + this.petList.sex = 1 + else + this.petList.sex = 0 + _this.petList.fullPicture = response.data.url.replace(process.env.VUE_APP_BASE_TRUE_API,"") + updatePet(_this.petList).then(response => { + _this.$modal.msgSuccess("鍥惧儚淇敼鎴愬姛"); + if(this.petList.sex==1) + this.petList.sex = '闆勬��' + else + this.petList.sex = '闆屾��' + // this.open = false; + _this.btn=false + }); + // alert(100) + }) + + //alert(90) + }, +requestUpload1(params) + { + + var file = params.file; + var formData = new FormData(); + formData.append('uploadFile', file); + let _this = this + + this.$refs.upload1.clearFiles(); + // this.uploading1 = true; + //alert(100) + uploadPic1(formData).then(response => { + // alert(18) + // let pth = response.data.originalFilename.substr(response.data.originalFilename.length-4, response.data.originalFilename.length) + // _this.fileList1.push({name:response.data.fileName, url:response.data.url}) + // console("ok") + // alert(90) + // alert(response.data.url) + if(this.petList.sex=='闆勬��') + this.petList.sex = 1 + else + this.petList.sex = 0 + _this.petList.headPicture = response.data.url.replace(process.env.VUE_APP_BASE_TRUE_API,"") + updatePet(_this.petList).then(response => { + _this.$modal.msgSuccess("淇敼鎴愬姛"); + // this.open = false; + if(this.petList.sex==1) + this.petList.sex = '闆勬��' + else + this.petList.sex = '闆屾��' + _this.btn=false + }); + // alert(100) + }) + + //alert(90) + }, } } </script> -<style scoped lang="scss"> +<style scoped> .mt { position: relative; @@ -723,7 +848,7 @@ display: block; } -.hide .el-upload--picture-card { +.hide /deep/ .el-upload--picture-card { display: none; } .form{ -- Gitblit v1.9.1