图片管理的更改,发布管理的图片样式更改
This commit is contained in:
parent
46bbea3fe5
commit
90236c1c99
@ -43,16 +43,16 @@
|
|||||||
</div>
|
</div>
|
||||||
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%" class="custom-table">
|
<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 type="selection" width="55" />
|
||||||
<el-table-column prop="name" label="图片名称" show-overflow-tooltip width="180px"></el-table-column>
|
<el-table-column prop="name" label="图片名称" show-overflow-tooltip width="150px"></el-table-column>
|
||||||
<el-table-column label="素材" width="300px" align="center">
|
<el-table-column label="素材" width="150px" align="center">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-image lazy :src="jpgFormatter(scope.row)" preview-teleported="true" :preview-src-list="[jpgFormatter(scope.row)]"/>
|
<el-image lazy :src="jpgFormatter(scope.row)" preview-teleported="true" :preview-src-list="[jpgFormatter(scope.row)]"/>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="moduleName" label="模块" show-overflow-tooltip width="220px" 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 width="200px" 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 width="210px" 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 width="200px" 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">
|
<el-table-column label="操作" width="250" align="center">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-button text type="primary" @click="switchDrawer(2,scope.row.id)">
|
<el-button text type="primary" @click="switchDrawer(2,scope.row.id)">
|
||||||
@ -233,7 +233,7 @@ const photoApi = photosApi();
|
|||||||
// 模块列表
|
// 模块列表
|
||||||
const moduleList = ref([{
|
const moduleList = ref([{
|
||||||
id: 2,
|
id: 2,
|
||||||
moduleName: "首页推荐",
|
moduleName: "",
|
||||||
moduleRemark: null,
|
moduleRemark: null,
|
||||||
moduleLevel: 1,
|
moduleLevel: 1,
|
||||||
state: "t"
|
state: "t"
|
||||||
@ -282,7 +282,7 @@ const getTableData = async() => {
|
|||||||
try {
|
try {
|
||||||
state.tableData.loading = true;
|
state.tableData.loading = true;
|
||||||
|
|
||||||
state.tableData.param.moduleName = '首页推荐';
|
// state.tableData.param.moduleName = '首页推荐';
|
||||||
|
|
||||||
let res = await photoApi.getPhotosList(state.tableData.param);
|
let res = await photoApi.getPhotosList(state.tableData.param);
|
||||||
if(res?.success){
|
if(res?.success){
|
||||||
@ -311,7 +311,7 @@ const reset = () =>{
|
|||||||
name: '',
|
name: '',
|
||||||
current: 1,
|
current: 1,
|
||||||
labelName: '',
|
labelName: '',
|
||||||
moduleName: '首页推荐',
|
moduleName: '',
|
||||||
size: 10,
|
size: 10,
|
||||||
}
|
}
|
||||||
getTableData();
|
getTableData();
|
||||||
@ -516,71 +516,118 @@ const deleteBanner = (id: number) => {
|
|||||||
|
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
|
|
||||||
|
const lastSelectedModuleName = ref('');
|
||||||
|
const lastSelectedLabelName = ref('');
|
||||||
|
|
||||||
//保存
|
//保存
|
||||||
const submitForm = (decision) => {
|
// const submitForm = (decision) => {
|
||||||
ruleFormRef.value?.validate(async(valid: boolean) => {
|
// ruleFormRef.value?.validate(async(valid: boolean) => {
|
||||||
if (valid) {
|
// if (valid) {
|
||||||
if (decision) {
|
// if (decision) {
|
||||||
console.log("新增新增新增");
|
// console.log("新增新增新增");
|
||||||
loading.value = true;
|
// loading.value = true;
|
||||||
const form = { ...state.formData };
|
// const form = { ...state.formData };
|
||||||
try {
|
// try {
|
||||||
let res = await photoApi.addPhotos(form);
|
// let res = await photoApi.addPhotos(form);
|
||||||
if(res?.success){
|
// if(res?.success){
|
||||||
ElMessage({
|
// ElMessage({
|
||||||
message: '保存成功!',
|
// message: '保存成功!',
|
||||||
type: 'success',
|
// type: 'success',
|
||||||
})
|
// })
|
||||||
loading.value = false;
|
// loading.value = false;
|
||||||
getTableData();
|
// getTableData();
|
||||||
dialog.value = false;
|
// dialog.value = false;
|
||||||
}
|
// }
|
||||||
} catch (error) {
|
// } catch (error) {
|
||||||
console.log(error);
|
// console.log(error);
|
||||||
ElMessage.error('保存失败!');
|
// ElMessage.error('保存失败!');
|
||||||
loading.value = false;
|
// loading.value = false;
|
||||||
}
|
// }
|
||||||
} else {
|
// } else {
|
||||||
console.log("编辑编辑编辑");
|
// console.log("编辑编辑编辑");
|
||||||
const form = { ...state.formData };
|
// const form = { ...state.formData };
|
||||||
try {
|
// try {
|
||||||
let res = await photoApi.updatePhotos(form);
|
// let res = await photoApi.updatePhotos(form);
|
||||||
if(res?.success){
|
// if(res?.success){
|
||||||
ElMessage({
|
// ElMessage({
|
||||||
message: '保存成功!',
|
// message: '保存成功!',
|
||||||
type: 'success',
|
// type: 'success',
|
||||||
})
|
// })
|
||||||
loading.value = false;
|
// loading.value = false;
|
||||||
getTableData();
|
// getTableData();
|
||||||
dialog.value = false;
|
// dialog.value = false;
|
||||||
}
|
// }
|
||||||
} catch (error) {
|
// } catch (error) {
|
||||||
console.log(error);
|
// console.log(error);
|
||||||
ElMessage.error('保存失败!');
|
// ElMessage.error('保存失败!');
|
||||||
loading.value = false;
|
// loading.value = false;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}else{
|
// }else{
|
||||||
ElMessage.error('请填写必要信息!');
|
// ElMessage.error('请填写必要信息!');
|
||||||
loading.value = false;
|
// 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 = () => {
|
const resetForm = () => {
|
||||||
dialog.value = false;
|
dialog.value = false;
|
||||||
ruleFormRef.value?.resetFields();
|
ruleFormRef.value?.resetFields();
|
||||||
state.formData.fileList.pop();
|
state.formData.fileList.pop();
|
||||||
uploadDisabled.value = false;
|
uploadDisabled.value = false;
|
||||||
isForbidden.value = false;
|
isForbidden.value = false;
|
||||||
}
|
|
||||||
|
// Use last selected values
|
||||||
|
state.formData.moduleName = lastSelectedModuleName.value;
|
||||||
|
state.formData.labelName = lastSelectedLabelName.value;
|
||||||
|
};
|
||||||
|
|
||||||
// #endregion
|
// #endregion
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getTableData();
|
getTableData();
|
||||||
// getModuleList();
|
getModuleList();
|
||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</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{
|
::v-deep .el-table__body{
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .el-image {
|
::v-deep .el-image {
|
||||||
width: 250px; // 固定图片宽度
|
width: 75px; // 固定图片宽度
|
||||||
height: 150px; // 固定图片高度
|
height: 75px; // 固定图片高度
|
||||||
object-fit: cover; // 图片居中剪裁
|
object-fit: cover; // 图片居中剪裁
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
@ -262,8 +262,8 @@ onMounted(() => {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
::v-deep .el-image {
|
::v-deep .el-image {
|
||||||
width: 250px; // 固定图片宽度
|
width: 75px; // 固定图片宽度
|
||||||
// height: 150px; // 固定图片高度
|
height: 75px; // 固定图片高度
|
||||||
object-fit: cover; // 图片居中剪裁
|
object-fit: cover; // 图片居中剪裁
|
||||||
// display: block;
|
// display: block;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user