From 6afb98b81fa4b4b3223d53d42a891fb89862d38b Mon Sep 17 00:00:00 2001 From: Tcsm <1377977403@qq.com> Date: 星期一, 14 八月 2023 16:36:29 +0800 Subject: [PATCH] 新增家谱图,完善各模块新增时的电子文件上传功能,在上传期间显示正在上传 --- ruoyi-ui/src/views/self/show.vue | 129 ++++++++++++++++++++++++++++++++----------- 1 files changed, 96 insertions(+), 33 deletions(-) diff --git a/ruoyi-ui/src/views/self/show.vue b/ruoyi-ui/src/views/self/show.vue index 9bd7f95..df1df64 100644 --- a/ruoyi-ui/src/views/self/show.vue +++ b/ruoyi-ui/src/views/self/show.vue @@ -118,37 +118,50 @@ </div> <div style="padding-left:30px;padding-top:30px"> <el-col :span="6" :data="individualList"> - <div class="block" :model="individualList" > - <el-col v-model="individualList.img" prop="img"> - <el-avatar shape="square" style="width: 200px;height: 150px;" > + <div class="block" :model="individualList"> + <div v-if="!isEditing"> + <el-avatar shape="square" style="width: 200px; height: 150px;"> <el-image - :src="'http://47.93.189.255:8080/'+ individualList.img" + class="el-upload-list__item-thumbnail" + v-if="!individualList.img" + src="default-avatar-url" :fit="fit" - style="width: 100%;height: 100%;" + style="width: 100%; height: 100%;" + ></el-image> + <el-image + v-else + :src="'http://47.93.189.255:8080/' + individualList.img" + :fit="fit" + style="width: 100%; height: 100%;" ></el-image> </el-avatar> -<!-- <el-upload--> -<!-- action="#"--> -<!-- list-type="picture-card"--> -<!-- multiple--> -<!-- :http-request="requestUpload"--> -<!-- :file-list="fileList"--> -<!-- >--> -<!-- <i slot="default" class="el-icon-plus"></i>--> -<!-- <div slot="file" slot-scope="{file}">--> -<!-- <img--> -<!-- class="el-upload-list__item-thumbnail"--> -<!-- :src="file.url"--> -<!-- alt=""--> -<!-- style="width: 147px; height: 147px"--> -<!-- fit="cover"--> -<!-- :preview-src-list="[file.url]"--> -<!-- >--> -<!-- </div>--> -<!-- </el-upload>--> - </el-col> + </div> + <el-upload v-else + class="upload-demo" + action="#" + :auto-upload="false" + :http-request="requestUpload" + :limit="1" + :file-list="fileList" + > + <el-avatar shape="square" style="width: 200px; height: 150px;"> + <el-image + class="el-upload-list__item-thumbnail" + v-if="!individualList.img" + src="default-avatar-url" + :fit="fit" + style="width: 100%; height: 100%;" + ></el-image> + <el-image + v-else + :src="'http://47.93.189.255:8080/' + individualList.img" + :fit="fit" + style="width: 100%; height: 100%;" + ></el-image> + </el-avatar> + </el-upload> + <div class="edit-text" v-if="isEditing" @click="uploadImage">鐐瑰嚮鏇存崲鍥剧墖</div> </div> - </el-col> </div> @@ -278,13 +291,13 @@ <el-table-column label="寮�濮嬫棩鏈�" prop="startDate" sortable width="250" align="center" > <template slot-scope="scope"> <template v-if="!scope.row.isEdit">{{ scope.row.startDate }}</template> - <template v-else><el-input v-model="scope.row.startDate"></el-input></template> + <template v-else><el-input v-model="scope.row.startDate" type="date" placeholder="閫夋嫨鏃ユ湡"></el-input></template> </template> </el-table-column> <el-table-column label="缁撴潫鏃ユ湡" prop="endDate" sortable width="250" align="center" > <template slot-scope="scope"> <template v-if="!scope.row.isEdit">{{ scope.row.endDate }}</template> - <template v-else><el-input v-model="scope.row.endDate"></el-input></template> + <template v-else><el-input v-model="scope.row.endDate" type="date" placeholder="閫夋嫨鏃ユ湡"></el-input></template> </template> </el-table-column> <el-table-column label="涓昏瀛︿範缁忓巻銆佸伐浣滃崟浣嶅強浠昏亴鎯呭喌" prop="content" sortable width="350" align="center" > @@ -404,13 +417,13 @@ <el-table-column label="寮�濮嬫椂闂�" prop="startTime" sortable width="230" align="center"> <template slot-scope="scope"> <template v-if="!scope.row.isEdit">{{ scope.row.startTime }}</template> - <template v-else><el-input v-model="scope.row.startTime"></el-input></template> + <template v-else><el-input v-model="scope.row.startTime" type="date" placeholder="閫夋嫨鏃ユ湡"></el-input></template> </template> </el-table-column> <el-table-column label="缁撴潫鏃堕棿" prop="endTime" sortable width="230" align="center"> <template slot-scope="scope"> <template v-if="!scope.row.isEdit">{{ scope.row.endTime }}</template> - <template v-else><el-input v-model="scope.row.endTime"></el-input></template> + <template v-else><el-input v-model="scope.row.endTime" type="date" placeholder="閫夋嫨鏃ユ湡"></el-input></template> </template> </el-table-column> <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width"> @@ -439,13 +452,13 @@ <el-table-column label="寮�濮嬫椂闂�" prop="startTime" sortable width="200" align="center"> <template slot-scope="scope"> <template v-if="!scope.row.isEdit">{{ scope.row.startTime }}</template> - <template v-else><el-input v-model="scope.row.startTime"></el-input></template> + <template v-else><el-input v-model="scope.row.startTime" type="date" placeholder="閫夋嫨鏃ユ湡"></el-input></template> </template> </el-table-column> <el-table-column label="缁撴潫鏃堕棿" prop="endTime" sortable width="200" align="center"> <template slot-scope="scope"> <template v-if="!scope.row.isEdit">{{ scope.row.endTime }}</template> - <template v-else><el-input v-model="scope.row.endTime"></el-input></template> + <template v-else><el-input v-model="scope.row.endTime" type="date" placeholder="閫夋嫨鏃ユ湡"></el-input></template> </template> </el-table-column> <el-table-column label="鎵�鍒板浗瀹舵垨鑰呭湴鍖�" prop="destination" sortable width="300" align="center" > @@ -733,7 +746,7 @@ //涓汉淇℃伅鏁版嵁 individualList:[], isEditing: false, - // fit:['fill'], + fit:['cover'], // 涓汉缁忓巻鏁版嵁 experienceList: [], // isEdit:true, @@ -1001,6 +1014,11 @@ this.formDat[key] = ''; }); }, + handleUploadSuccess(response, file) { + // 澶勭悊鏂囦欢涓婁紶鎴愬姛鍚庣殑鍥炶皟 + this.individualList.img = response.url; + }, + //涓嬫媺 handleChange(activeNames) { // console.log(val); @@ -1409,6 +1427,7 @@ this.btn=false this.isShow_2=false this.isShow=true + this.isEditing = false }); } else { this.$modal.msgSuccess("淇敼澶辫触"); @@ -1419,6 +1438,50 @@ // 鍒锋柊椤甸潰 // window.location.reload(); }, + uploadImage() { + const inputElement = document.createElement("input"); + inputElement.type = "file"; + inputElement.accept = "image/*"; + inputElement.style.display = "none"; + document.body.appendChild(inputElement); + + inputElement.addEventListener("change", () => { + const file = inputElement.files[0]; + if (file) { + const formData = new FormData(); + formData.append("image", file); + + // 璋冪敤uploadPic鎺ュ彛涓婁紶鍥剧墖 + axios.post("/common/upload", formData, { + headers: { + "Content-Type": "multipart/form-data" + } + }).then(response => { + // 涓婁紶鎴愬姛锛岃幏鍙栨柊鍥剧墖鐨刄RL + const newImageUrl = response.data.img; + + // 鍋囪individualList鏄竴涓璞★紝鏇存柊individualList.img + this.individualList.img = newImageUrl; + + // 鍋囪fileList鏄竴涓暟缁勶紝鏇存柊fileList涓搴旂殑鍥剧墖URL + // const index = this.fileList.findIndex(item => item.id === fileId); + // this.fileList[index].url = newImageUrl; + + // 娓呴櫎input鍏冪礌骞剁Щ闄や簨浠剁洃鍚� + document.body.removeChild(inputElement); + inputElement.removeEventListener("change", null); + }).catch(error => { + console.error("涓婁紶澶辫触:", error); + // 娓呴櫎input鍏冪礌骞剁Щ闄や簨浠剁洃鍚� + document.body.removeChild(inputElement); + inputElement.removeEventListener("change", null); + }); + } + }); + + // 瑙﹀彂鐐瑰嚮浜嬩欢锛屾樉绀烘枃浠堕�夋嫨瀵硅瘽妗� + inputElement.click(); + }, //涓昏缁忓巻 saveRowExperienceList(row) { this.$refs['elForm'].validate(valid => { -- Gitblit v1.9.1