图片管理的更改，发布管理的图片样式更改
This commit is contained in:
夕阳微笑1
parent
46bbea3fe5
commit
90236c1c99
@ -43,16 +43,16 @@
|
||||
</div>
|
||||
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%" class="custom-table">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="name" label="图片名称" show-overflow-tooltip width="180px"></el-table-column>
|
||||
<el-table-column label="素材" width="300px" align="center">
|
||||
<el-table-column prop="name" label="图片名称" show-overflow-tooltip width="150px"></el-table-column>
|
||||
<el-table-column label="素材" width="150px" align="center">
|
||||
<template #default="scope">
|
||||
<el-image lazy :src="jpgFormatter(scope.row)" preview-teleported="true" :preview-src-list="[jpgFormatter(scope.row)]"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="moduleName" label="模块" show-overflow-tooltip width="220px" 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="210px" 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 prop="moduleName" label="模块" show-overflow-tooltip align="center"></el-table-column>
|
||||
<el-table-column prop="labelName" label="标签" show-overflow-tooltip align="center"></el-table-column>
|
||||
<el-table-column prop="uploadName" label="上传者" show-overflow-tooltip align="center"></el-table-column>
|
||||
<el-table-column prop="createtime" label="创建时间" :formatter="dateFormatter" show-overflow-tooltip 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)">
|
||||
@ -233,7 +233,7 @@ const photoApi = photosApi();
|
||||
// 模块列表
|
||||
const moduleList = ref([{
|
||||
id: 2,
|
||||
moduleName: "首页推荐",
|
||||
moduleName: "",
|
||||
moduleRemark: null,
|
||||
moduleLevel: 1,
|
||||
state: "t"
|
||||
@ -282,7 +282,7 @@ const getTableData = async() => {
|
||||
try {
|
||||
state.tableData.loading = true;
|
||||
|
||||
state.tableData.param.moduleName = '首页推荐';
|
||||
// state.tableData.param.moduleName = '首页推荐';
|
||||
|
||||
let res = await photoApi.getPhotosList(state.tableData.param);
|
||||
if(res?.success){
|
||||
@ -311,7 +311,7 @@ const reset = () =>{
|
||||
name: '',
|
||||
current: 1,
|
||||
labelName: '',
|
||||
moduleName: '首页推荐',
|
||||
moduleName: '',
|
||||
size: 10,
|
||||
}
|
||||
getTableData();
|
||||
@ -516,71 +516,118 @@ const deleteBanner = (id: number) => {
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
const lastSelectedModuleName = ref('');
|
||||
const lastSelectedLabelName = ref('');
|
||||
|
||||
//保存
|
||||
const submitForm = (decision) => {
|
||||
ruleFormRef.value?.validate(async(valid: boolean) => {
|
||||
if (valid) {
|
||||
if (decision) {
|
||||
console.log("新增新增新增");
|
||||
loading.value = true;
|
||||
const form = { ...state.formData };
|
||||
try {
|
||||
let res = await photoApi.addPhotos(form);
|
||||
if(res?.success){
|
||||
ElMessage({
|
||||
message: '保存成功！',
|
||||
type: 'success',
|
||||
})
|
||||
loading.value = false;
|
||||
getTableData();
|
||||
dialog.value = false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
ElMessage.error('保存失败！');
|
||||
loading.value = false;
|
||||
}
|
||||
} else {
|
||||
console.log("编辑编辑编辑");
|
||||
const form = { ...state.formData };
|
||||
try {
|
||||
let res = await photoApi.updatePhotos(form);
|
||||
if(res?.success){
|
||||
ElMessage({
|
||||
message: '保存成功！',
|
||||
type: 'success',
|
||||
})
|
||||
loading.value = false;
|
||||
getTableData();
|
||||
dialog.value = false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
ElMessage.error('保存失败！');
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
}else{
|
||||
ElMessage.error('请填写必要信息！');
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
// const submitForm = (decision) => {
|
||||
// ruleFormRef.value?.validate(async(valid: boolean) => {
|
||||
// if (valid) {
|
||||
// if (decision) {
|
||||
// console.log("新增新增新增");
|
||||
// loading.value = true;
|
||||
// const form = { ...state.formData };
|
||||
// try {
|
||||
// let res = await photoApi.addPhotos(form);
|
||||
// if(res?.success){
|
||||
// ElMessage({
|
||||
// message: '保存成功！',
|
||||
// type: 'success',
|
||||
// })
|
||||
// loading.value = false;
|
||||
// getTableData();
|
||||
// dialog.value = false;
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.log(error);
|
||||
// ElMessage.error('保存失败！');
|
||||
// loading.value = false;
|
||||
// }
|
||||
// } else {
|
||||
// console.log("编辑编辑编辑");
|
||||
// const form = { ...state.formData };
|
||||
// try {
|
||||
// let res = await photoApi.updatePhotos(form);
|
||||
// if(res?.success){
|
||||
// ElMessage({
|
||||
// message: '保存成功！',
|
||||
// type: 'success',
|
||||
// })
|
||||
// loading.value = false;
|
||||
// getTableData();
|
||||
// dialog.value = false;
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.log(error);
|
||||
// ElMessage.error('保存失败！');
|
||||
// loading.value = false;
|
||||
// }
|
||||
// }
|
||||
// }else{
|
||||
// ElMessage.error('请填写必要信息！');
|
||||
// loading.value = false;
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
const submitForm = (decision:any) => {
|
||||
ruleFormRef.value?.validate(async (valid) => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
try {
|
||||
const form = { ...state.formData };
|
||||
let res;
|
||||
if (decision) {
|
||||
res = await photoApi.addPhotos(form);
|
||||
} else {
|
||||
res = await photoApi.updatePhotos(form);
|
||||
}
|
||||
if (res?.success) {
|
||||
lastSelectedModuleName.value = state.formData.moduleName;
|
||||
lastSelectedLabelName.value = state.formData.labelName;
|
||||
ElMessage({
|
||||
message: '保存成功！',
|
||||
type: 'success',
|
||||
});
|
||||
loading.value = false;
|
||||
getTableData();
|
||||
dialog.value = false;
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('保存失败！');
|
||||
loading.value = false;
|
||||
}
|
||||
} else {
|
||||
ElMessage.error('请填写必要信息！');
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 表单重置和取消
|
||||
// const resetForm = () => {
|
||||
// dialog.value = false;
|
||||
// ruleFormRef.value?.resetFields();
|
||||
// state.formData.fileList.pop();
|
||||
// uploadDisabled.value = false;
|
||||
// isForbidden.value = false;
|
||||
// }
|
||||
const resetForm = () => {
|
||||
dialog.value = false;
|
||||
ruleFormRef.value?.resetFields();
|
||||
state.formData.fileList.pop();
|
||||
uploadDisabled.value = false;
|
||||
isForbidden.value = false;
|
||||
}
|
||||
dialog.value = false;
|
||||
ruleFormRef.value?.resetFields();
|
||||
state.formData.fileList.pop();
|
||||
uploadDisabled.value = false;
|
||||
isForbidden.value = false;
|
||||
|
||||
// Use last selected values
|
||||
state.formData.moduleName = lastSelectedModuleName.value;
|
||||
state.formData.labelName = lastSelectedLabelName.value;
|
||||
};
|
||||
|
||||
// #endregion
|
||||
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
// getModuleList();
|
||||
getModuleList();
|
||||
})
|
||||
|
||||
</script>
|
||||
@ -602,13 +649,28 @@ onMounted(() => {
|
||||
|
||||
};
|
||||
|
||||
::v-deep .el-table th,
|
||||
::v-deep .el-table td {
|
||||
padding: 13px;
|
||||
text-align: left; // 左对齐文字
|
||||
}
|
||||
|
||||
::v-deep .el-table-column--center {
|
||||
text-align: center; // 居中对齐特定列
|
||||
}
|
||||
|
||||
::v-deep .el-table__header-wrapper {
|
||||
background-color: #f5f7fa; // 为表头设置背景颜色
|
||||
padding: 0; // 减少表头的内边距
|
||||
}
|
||||
|
||||
::v-deep .el-table__body{
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
::v-deep .el-image {
|
||||
width: 250px; // 固定图片宽度
|
||||
height: 150px; // 固定图片高度
|
||||
::v-deep .el-image {
|
||||
width: 75px; // 固定图片宽度
|
||||
height: 75px; // 固定图片高度
|
||||
object-fit: cover; // 图片居中剪裁
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -262,8 +262,8 @@ onMounted(() => {
|
||||
justify-content: center;
|
||||
}
|
||||
::v-deep .el-image {
|
||||
width: 250px; // 固定图片宽度
|
||||
// height: 150px; // 固定图片高度
|
||||
width: 75px; // 固定图片宽度
|
||||
height: 75px; // 固定图片高度
|
||||
object-fit: cover; // 图片居中剪裁
|
||||
// display: block;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user