图片管理样式修改

src/views/photos/index.vue

@@ -43,16 +43,40 @@
 			</div>
 			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
 				<el-table-column type="selection" width="55" />
-				<el-table-column prop="name" label="图片名称"  show-overflow-tooltip width="250px"></el-table-column>
+				<el-table-column prop="name" label="图片名称"  show-overflow-tooltip width="180px"></el-table-column>
-				<el-table-column prop="moduleName" label="模块"  show-overflow-tooltip width="250px" align="center"></el-table-column>		
+				<el-table-column  label="素材"  width="300px" align="center">
-				<el-table-column prop="labelName" label="标签"  show-overflow-tooltip width="250px" align="center"></el-table-column>		
-				<el-table-column prop="uploadName" label="上传者"  show-overflow-tooltip width="250px" align="center"></el-table-column>		
-				<el-table-column prop="createtime" label="创建时间" :formatter="dateFormatter" show-overflow-tooltip width="350px" align="center"></el-table-column>
-				<el-table-column label="操作" width="300" align="center">
 					<template #default="scope">
-						<el-button size="small" text type="primary" @click="switchDrawer(2,scope.row.id)">查看</el-button>
+						<el-image :src="jpgFormatter(scope.row)" />
-						<el-button size="small" text type="primary" @click="switchDrawer(1,scope.row.id)">编辑</el-button>
+						<!-- <a :href="jpgFormatter(scope.row)">{{ jpgFormatter(scope.row) }}</a> -->
-						<el-button size="small" text type="primary" @click="deleteBanner(scope.row.id)">删除</el-button>
+						 <!-- <el-button @click="jpgJump(scope.row)" text type="primary">{{ jpgFormatter(scope.row) }}</el-button> -->
+					</template>
+				</el-table-column>
+				<el-table-column prop="moduleName" label="模块"  show-overflow-tooltip width="200px" align="center"></el-table-column>		
+				<el-table-column prop="labelName" label="标签"  show-overflow-tooltip width="200px" align="center"></el-table-column>		
+				<el-table-column prop="uploadName" label="上传者"  show-overflow-tooltip width="200px" align="center"></el-table-column>		
+				<el-table-column prop="createtime" label="创建时间" :formatter="dateFormatter" show-overflow-tooltip width="200px" align="center"></el-table-column>
+				<el-table-column label="操作" width="250" align="center">
+					<template #default="scope">
+						<el-button  text type="primary" @click="switchDrawer(2,scope.row.id)">
+							<el-icon>
+								<ele-View />
+							</el-icon>
+						</el-button>
+						<el-button  text type="primary" @click="switchDrawer(1,scope.row.id)">
+							<el-icon>
+								<ele-Edit />
+							</el-icon>
+						</el-button>
+						<el-button  text type="primary" @click="download(scope.row)">
+							<el-icon>
+								<ele-Download />
+							</el-icon>
+						</el-button>
+						<el-button  text type="primary" @click="deleteBanner(scope.row.id)">
+							<el-icon>
+								<ele-Delete />
+							</el-icon>
+						</el-button>
 					</template>
 				</el-table-column>
 			</el-table>
@@ -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;