From 90236c1c996ba655230b78537fc5fd95eb8225c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=95=E9=98=B3=E5=BE=AE=E7=AC=911?=
 <12457268+sunset-smile-1@user.noreply.gitee.com>
Date: Sun, 29 Dec 2024 13:48:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E7=AE=A1=E7=90=86=E7=9A=84?=
 =?UTF-8?q?=E6=9B=B4=E6=94=B9=EF=BC=8C=E5=8F=91=E5=B8=83=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E7=9A=84=E5=9B=BE=E7=89=87=E6=A0=B7=E5=BC=8F=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/photos/index.vue         | 198 +++++++++++++++++++----------
 src/views/service/shares/index.vue |   4 +-
 2 files changed, 132 insertions(+), 70 deletions(-)

diff --git a/src/views/photos/index.vue b/src/views/photos/index.vue
index 6588dd6..9ce6a78 100644
--- a/src/views/photos/index.vue
+++ b/src/views/photos/index.vue
@@ -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;
 }
diff --git a/src/views/service/shares/index.vue b/src/views/service/shares/index.vue
index 50dd230..9e30d71 100644
--- a/src/views/service/shares/index.vue
+++ b/src/views/service/shares/index.vue
@@ -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;
 }