hjq/PixelAI-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-29 13:48:37 +08:00
parent 46bbea3fe5
commit 90236c1c99
2 changed files with 132 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;
} }

4
src/views/service/shares/index.vue
View File

@ -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;
} }