hjq/mart-admin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

图片管理样式修改

Browse Source
This commit is contained in:
夕阳微笑1 2024-12-16 13:44:38 +08:00
parent 91f4cd1487
commit ca02a903ce
1 changed files with 80 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
src/views/photos/index.vue
View File

@ -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="moduleName" label="模块" show-overflow-tooltip width="250px" align="center"></el-table-column>
<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">
<el-table-column prop="name" label="图片名称" show-overflow-tooltip width="180px"></el-table-column>
<el-table-column label="素材" width="300px" align="center">
<template #default="scope">
<el-button size="small" text type="primary" @click="switchDrawer(2,scope.row.id)">查看</el-button>
<el-button size="small" text type="primary" @click="switchDrawer(1,scope.row.id)">编辑</el-button>
<el-button size="small" text type="primary" @click="deleteBanner(scope.row.id)">删除</el-button>
<el-image :src="jpgFormatter(scope.row)" />
<!-- <a :href="jpgFormatter(scope.row)">{{ jpgFormatter(scope.row) }}</a> -->
<!-- <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;