From ca02a903ce36aa157d748a7475db27c4552d866a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=95=E9=98=B3=E5=BE=AE=E7=AC=911?= <12457268+sunset-smile-1@user.noreply.gitee.com> Date: Mon, 16 Dec 2024 13:44:38 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E7=AE=A1=E7=90=86=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/photos/index.vue | 95 ++++++++++++++++++++++++++++++++------ 1 file changed, 80 insertions(+), 15 deletions(-) diff --git a/src/views/photos/index.vue b/src/views/photos/index.vue index 7e0ed47..3bb25e7 100644 --- a/src/views/photos/index.vue +++ b/src/views/photos/index.vue @@ -43,16 +43,40 @@ - - - - - - + + + + + + + + + @@ -70,7 +94,7 @@ style="max-width: 85%" :model="state.formData" :rules="state.rules" - label-width="100px" + label-width="110px" class="demo-ruleForm" :size="formSize" status-icon @@ -164,6 +188,7 @@ import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue' import type { ComponentSize, FormInstance, FormRules, UploadFile, UploadProps, UploadUserFile } from 'element-plus' import { baseUrlHost } from '../../api/baseUrlHost'; import { photosApi } from '/@/api/photos'; +import { downloadPhoto } from '../../api/download'; const router = useRouter(); @@ -280,19 +305,19 @@ const viteUrl = import.meta.env.VITE_API_URL; // 图片链接格式化 const jpgFormatter = (row: any) => { - console.log("44444444444",row); + // console.log("44444444444",row); let newPath; if (row?.data) { newPath = row.data.path.replaceAll('\\', '/') - console.log("11111111111",newPath); + // console.log("11111111111",newPath); } else { newPath = row.path.replaceAll('\\\\', '/') - console.log("333333333333",newPath); + // console.log("333333333333",newPath); } newPath = newPath.includes('http://8.138.171.103/') ? newPath : 'http://8.138.171.103/' + newPath - console.log("22222222222222222",newPath); + // console.log("22222222222222222",newPath); return `${newPath}`; } @@ -431,7 +456,39 @@ const handleRemove = (file: UploadFile, uploadFiles) => { state.formData.path = ""; uploadDisabled.value = false; -} +}; + +//下载图片 +const download = async(row:any) =>{ + state.formData.loading = true; + // console.log("44444444444",row); + let newPath; + if (row?.data) { + newPath = row.data.path.replaceAll('\\', '/') + // console.log("11111111111",newPath); + + } else { + newPath = row.path.replaceAll('\\\\', '/') + // console.log("333333333333",newPath); + + } + newPath = newPath.includes('http://localhost:8888/') ? newPath : viteUrl + newPath + // console.log("22222222222222222",newPath); + try{ + await downloadPhoto(newPath); + + ElMessage({ + message: '图片下载成功！', + type: 'success', + }); + }catch(error){ + console.error(error); + ElMessage.error('图片下载失败！') + }finally{ + state.formData.loading = false; + } +}; + // 删除图片 const deleteBanner = (id: number) => { ElMessageBox.confirm('确定要删除该图片吗?', '提示', { @@ -537,7 +594,15 @@ onMounted(() => { flex: 1; } } +}; + +::v-deep .el-image { + width: 250px; // 固定图片宽度 + height: 150px; // 固定图片高度 + object-fit: cover; // 图片居中剪裁 + display: block; } + ::v-deep .el-drawer .el-drawer__header { margin: 15px 0 20px 0!important; border-bottom: 0!important;