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/honor/honorInfo.vue | 168 +++++++++++++++++++++++++++++++++++++++----------------- 1 files changed, 117 insertions(+), 51 deletions(-) diff --git a/ruoyi-ui/src/views/honor/honorInfo.vue b/ruoyi-ui/src/views/honor/honorInfo.vue index 2e1edb2..5b5a8b9 100644 --- a/ruoyi-ui/src/views/honor/honorInfo.vue +++ b/ruoyi-ui/src/views/honor/honorInfo.vue @@ -1,11 +1,15 @@ <template> - <div class="app-container"> + <div class="app-container" id="printable-content"> <div class="form-header mt"> - <h4 class="dt h4">鑽h獕璇佷功璇︾粏淇℃伅 </h4> - <!-- <el-button v-if="isShow" type="primary" class="pt" icon="el-icon-edit" @click="handleEdit()" >缂栬緫</el-button>--> - <!-- <br>--> - <!-- <el-button type="primary" class="pt" @click="handleExport"--> - <!-- v-hasPermi="['self:user:export']" >瀵煎嚭</el-button>--> + <h1 style="font-size:21px;padding-top:30px;display: flex;justify-content: space-between;align-items: center;" > + <span>鑽h獕璇佷功璇︾粏淇℃伅</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> <div> <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-position="left" label-width="100px"> @@ -17,26 +21,12 @@ <div> <el-container> <el-row> -<!-- <el-cow :span="8">--> -<!-- <el-form-item label="鏃堕棿" prop="createTime" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">--> -<!-- <el-input v-model="formData.createTime" placeholder="璇疯緭鍏ユ椂闂�" clearable :style="{width: '100%'}" :disabled="dsb">--> -<!-- </el-input>--> -<!-- </el-form-item>--> -<!-- </el-cow>--> <el-cow :span="8"> <el-form-item label="绫诲埆" prop="type" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;" :disabled="dsb"> - <template v-if="!isEditing" > - <el-input v-if="formData.type===0" placeholder="璇佷欢"></el-input> - <el-input v-if="formData.type===1" placeholder="鑽h獕"></el-input> - <el-input v-if="formData.type===2" placeholder="璧勮川"></el-input> - </template> - <template v-else> - <el-select v-model="types" placeholder="璇烽�夋嫨绫诲埆" clearable :style="{width: '100%'}" > - <el-option label="璇佷欢" value='0'></el-option> - <el-option label="鑽h獕" value='1'></el-option> - <el-option label="璧勮川" value='2'></el-option> + <el-select v-model="formData.type" placeholder="璇烽�夋嫨绫诲埆" clearable :style="{width: '100%'}" :disabled="dsb"> + <el-option v-for="(item, index) in typeOption" :key="index" :label="item.label" :value="item.value" + ></el-option> </el-select> - </template> </el-form-item> </el-cow> <el-cow :span="8"> @@ -74,14 +64,16 @@ <el-row> <el-cow :span="8"> <el-form-item label="鏈夋晥鏃堕棿" prop="validityDate" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;"> - <el-input v-model="formData.validityDate" type="date" placeholder="璇疯緭鍏ユ湁鏁堟椂闂�" clearable :style="{width: '100%'}" :disabled="dsb"> - </el-input> + <el-date-picker v-model="formData.validityDate" type="date" placeholder="璇烽�夋嫨鏃ユ湡" + :editable="false" :clearable="false" :style="{width: '100%'}" :disabled="dsb" value-format="yyyy-MM-dd" + ></el-date-picker> </el-form-item> </el-cow> <el-cow :span="8"> <el-form-item label="鑾峰緱鏃堕棿" prop="getDate" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;"> - <el-input v-model="formData.getDate" type="date" placeholder="璇疯緭鍏ヨ幏寰楁椂闂�" clearable :style="{width: '100%'}" :disabled="dsb"> - </el-input> + <el-date-picker v-model="formData.getDate" type="date" placeholder="璇烽�夋嫨鏃ユ湡" + :editable="false" :clearable="false" :style="{width: '100%'}" :disabled="dsb" value-format="yyyy-MM-dd" + ></el-date-picker> </el-form-item> </el-cow> <el-cow :span="8"> @@ -94,13 +86,16 @@ </el-container> </div> </el-container> - <h4 class="form-header">鐢靛瓙鏂囦欢 </h4> + <h4 class="form-header">鐩稿叧鍥剧墖 </h4> <el-upload action="#" + accept="image/jpeg, image/png,image/jpg, image/WMF,image/gif" list-type="picture-card" multiple :http-request="requestUpload" :file-list="fileList" + :disabled="!btn" + :class="{ hide: !btn }" > <div v-if="uploading" class="upload-status">姝e湪涓婁紶...</div> <i v-if="!uploading" slot="default" class="el-icon-plus"></i> @@ -109,7 +104,7 @@ class="el-upload-list__item-thumbnail" :src="file.url" alt="" - style="width: 147px; height: 147px" + style="width: 100%; height: 100%; object-fit: cover;" fit="cover" :preview-src-list="[file.url]" > @@ -136,8 +131,6 @@ <i class="el-icon-delete"></i> </span> </span> - - </div> </el-upload> @@ -150,17 +143,19 @@ 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 }" > - <div v-if="uploading" class="upload-status">姝e湪涓婁紶...</div> - <i v-if="!uploading" 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" src="../../assets/401_images/401.gif" alt="" - style="width: 147px; height: 147px" + style="width: 100%; height: 100%; object-fit: cover;" fit="cover" > <span class="el-upload-list__item-actions"> @@ -211,6 +206,7 @@ import {Message} from "element-ui"; import { download,uploadPic} from "@/api/doctor/index"; import {updateHonor,getHonor,getCategory, listType} from "@/api/honor/index"; +import {updateCollection} from "@/api/collection"; export default { components: {}, @@ -219,8 +215,7 @@ return { cdi:"鑽h獕璇佷功璇︾粏淇℃伅", udi:"鑽h獕璇佷功淇℃伅璇︽儏", - fot:['.bmp','.jpg','.jpeg','.png','.tif','.gif','.pcx','.tga','.exif','.fpx', - '.svg','.psd','.cdr','.pcd','.dxf','.ufo','.eps','.ai','.aw','.WMF','.webp','.apng'], + fot:[".jpg",".jif"], fileList:[], fileListOther:[], dsb:true, @@ -228,6 +223,7 @@ isShow:true, isEditing: false, uploading: false, + uploading1: false, // 鑽h獕琛ㄦ牸鏁版嵁 honorList: [], typeList:[], @@ -245,6 +241,7 @@ remark:undefined, url: undefined, }, + desurl:'', dialogImageUrl: '', dialogVisible: false, disabled: false, @@ -299,9 +296,9 @@ newOption: undefined, showInput: false, typeOption:[ - {value:'0',label:'璇佷欢'}, - {value:'1',label:'鑽h獕'}, - {value:'2',label:'璧勮川'},], + {value:'璇佷欢',label:'璇佷欢'}, + {value:'鑽h獕',label:'鑽h獕'}, + {value:'璧勮川',label:'璧勮川'},], types:undefined } }, @@ -331,6 +328,7 @@ document.title = "鏌ョ湅鑽h獕璇佷功璇︾粏淇℃伅"; this.$route.meta.title = "鏌ョ湅鑽h獕璇佷功璇︾粏淇℃伅";//鍒楄〃鐨勫悕绉� this.isShow=false + this.btn = false; } let _this = this @@ -491,6 +489,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; + updateHonor(this.formData).then(response => { + this.$modal.msgSuccess("鍒犻櫎鎴愬姛"); + // this.open = false; + // this.btn=false + }); } }, handleRemove(file) { @@ -498,6 +508,18 @@ { 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; + updateHonor(this.formData).then(response => { + this.$modal.msgSuccess("鍒犻櫎鎴愬姛"); + // this.open = false; + // this.btn=false + }); } }, handleFileCardPreview(file){ @@ -526,7 +548,7 @@ handleEdit() { this.dsb = false - // this.btn = true + this.btn = true this.isShow=false }, requestUpload(params) @@ -536,10 +558,44 @@ 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}) + 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) + updateHonor(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.uploading1 = true; + uploadPic(formData).then(response => { + let pth = response.data.originalFilename.substr(response.data.originalFilename.length-4, response.data.originalFilename.length) + this.uploading1 = false; + // this.$modal.msgSuccess("涓婁紶鎴愬姛"); if(_this.fot.includes(pth) === true) { _this.fileList.push({name:response.data.fileName, "url":response.data.url}) @@ -548,18 +604,22 @@ 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) + updateHonor(this.formData).then(response => { + this.$modal.msgSuccess("鏂囨。涓婁紶鎴愬姛"); + // this.open = false; + // this.btn=false + }); } }) - }, - - /** 瀵煎嚭鎸夐挳鎿嶄綔 */ - handleExport() { - this.download('/zHonor/export', { - ...this.queryParams - }, `zfHonor_${new Date().getTime()}.xlsx`) - } } } @@ -584,4 +644,10 @@ display: block; position: absolute; } +.hide .el-upload--picture-card { + display: none; +} +.form{ + background:center/11% no-repeat url('../../assets/icons/form.png') ; +} </style> -- Gitblit v1.9.1