Merge branch 'main' of http://129.211.33.98:3210/hjq/mart-admin

src/api/attachment/index.ts

@@ -9,6 +9,7 @@ import { baseUrlHost } from '../baseUrlHost';
  * @method getAttachmentList 分页查询附件
  * @method getAttachmentDetail 查看单个附件
  * @method downloadFiles 批量文件下载
+ * @method uploadByType 公开附件上传
  */
 
 export function attachmentApi() {
@@ -32,6 +33,14 @@ export function attachmentApi() {
 				method: 'get',
 				responseType: 'blob',
 			})
+		},
+		uploadByType: (data: object) => {
+			return request({
+				url: baseUrlHost + '/enAttachment/uploadByType',
+				method: 'post',
+				data,
+				headers: { 'Content-Type': 'application/x-www-form-urlencoded'}
+			})
 		}
 	};
 }

src/api/photos/index.ts

@@ -14,6 +14,7 @@ import { baseUrlHost } from '../baseUrlHost';
  * @method updatePhotos 更新图片
  * @method deletePhotos 删除图片
  * @method uploadFile 上传图片
+ * @method uploadPictrue 公开图片上传，返回图片id
  */
 
 export function photosApi() {
@@ -70,6 +71,14 @@ export function photosApi() {
 				data,
 				headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
 			})
-		}
+		},
+		uploadPictrue:(data: object) => {
+			return request({
+				url: baseUrlHost + '/cpPhoto/uploadPictrue',
+				method: 'post',
+				data,
+				headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
+			})
+		},
 	};
 }

src/api/service/recommend/index.ts

@@ -7,6 +7,9 @@ import { pixelUrlHost } from '/@/api/baseUrlHost';
  * 
  * 登录api接口集合
  * @method getRecommendList 获取推荐作品列表
+ * @method saveRecommend 保存推荐作品
+ * @method deleteRecommend 删除推荐作品
+ * @method updateRecommend 修改推荐作品
  */
 
 export function recommendApi() {
@@ -18,5 +21,25 @@ export function recommendApi() {
 				params,
 			});
 		},
+		saveRecommend: (data: object) => {
+			return request({
+				url: pixelUrlHost + '/paRecommend',
+				method: 'post',
+				data,
+			})
+		},
+		deleteRecommend: (id: Number) => {
+			return request({
+				url: pixelUrlHost + `/paRecommend/${id}`,
+				method: 'delete',
+			})
+		},
+		updateRecommend: (data: object) => {
+			return request({
+				url: pixelUrlHost + '/paRecommend',
+				method: 'put',
+				data,
+			})
+		},
 	};
 }

src/api/service/wall/index.ts

@@ -0,0 +1,52 @@
+import request from '/@/utils/request';
+import { pixelUrlHost } from '/@/api/baseUrlHost';
+
+/**
+ * （不建议写成 request.post(xxx)，因为这样 post 时，无法 params 与 data 同时传参）
+ * 注意在写get请求时，参数是params，而不是data，要标注好
+ * 
+ * 登录api接口集合
+ * @method getWallList 获取作品墙列表
+ * @method saveWall 保存作品墙推荐作品
+ * @method deleteWall 删除作品墙推荐作品
+ * @method updateWall 修改作品墙推荐作品
+ * @method singleWall 获取作品墙作品详情
+ */
+
+export function recommendWallApi() {
+	return {
+		getWallList: (params: object) => {
+			return request({
+				url: pixelUrlHost + '/paPictureWall',
+				method: 'get',
+				params,
+			});
+		},
+		saveWall: (data: object) => {
+			return request({
+				url: pixelUrlHost + '/paPictureWall',
+				method: 'post',
+				data,
+			})
+		},
+		deleteWall: (id: Number) => {
+			return request({
+				url: pixelUrlHost + `/paPictureWall/${id}`,
+				method: 'delete',
+			})
+		},
+		updateWall: (data: object) => {
+			return request({
+				url: pixelUrlHost + '/paPictureWall',
+				method: 'put',
+				data,
+			})
+		},
+        singleWall: (id: Number) => {
+			return request({
+				url: pixelUrlHost + `/paPictureWall/${id}`,
+				method: 'get',
+			})
+		},
+	};
+}

src/i18n/lang/en.ts

@@ -108,6 +108,7 @@ export default {
 		apply: 'apply',
 		shares: 'shares',
 		recommend: 'recommend',
+		recommendWall: 'recommendWall',
 
 		/**
 		 * 业务模块end

src/i18n/lang/zh-cn.ts

@@ -111,6 +111,7 @@ export default {
 		apply: '应用管理',
 		shares: '发布管理',
 		recommend: '推荐管理',
+		recommendWall: '作品墙',
 
 		/**
 		 * 业务模块end

src/i18n/lang/zh-tw.ts

@@ -108,6 +108,7 @@ export default {
 		apply: '應用管理',
 		shares: '發佈管理',
 		recommend: '推薦管理',
+		recommendWall: '作品墻',
 
 		/**
 		 * 业务模块end

src/router/route.ts

@@ -306,6 +306,23 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 					icon: 'ele-Upload',
 				},
 			},
+			// 推荐管理
+			{
+				path: '/recommendWall',
+				name: 'recommendWall',
+				component: () => import('/@/views/service/wall/index.vue'),
+				meta: {
+					title: 'message.router.recommendWall',
+					isLink: '',
+					isHide: false,
+					isKeepAlive: true,
+					isAffix: false,
+					isIframe: false,
+					roles: ['admin', 'user'],
+					icon: 'ele-Upload',
+				},
+			},
+
 
 			/**
 			 * 业务模块end

src/views/article/component/upload.vue

@@ -245,7 +245,7 @@ const articleFormRef = ref();
 // 保存文章
 const onSubmitForm = () => {
 	articleFormRef.value.validate((valid: boolean) => {
-        if (valid && state.coverHide){
+        if (valid){
 			const form = {...state.data,top:state.data.top ? 1 : 0};
 			if(state.coverFile.type === undefined){
 				realSubmit(form);

src/views/article/index.vue

@@ -74,7 +74,7 @@
 </template>
 
 <script setup lang="ts" name="article">
-import { onMounted, reactive, ref } from 'vue';
+import { onActivated, onMounted, reactive, ref } from 'vue';
 import { articleApi } from '/@/api/article';
 import { ElMessage, ElMessageBox, TableColumnCtx } from 'element-plus';
 import { useRouter } from 'vue-router';
@@ -190,7 +190,7 @@ const toEditArticle = (row: any) => {
 const copyLink = (row: any) => {
 	if(row.id == null||row.id == ''){ ElMessage.warning('链接为空');return;}
       var aux = document.createElement("input"); 
-      aux.setAttribute("value", `${viteUrl}vueAdmin/#article/content?id=${row.id}`); 
+      aux.setAttribute("value", `${viteUrl}pixelAdmin/#article/content?id=${row.id}`); 
       document.body.appendChild(aux); 
       aux.select();
       document.execCommand("copy"); 
@@ -206,7 +206,7 @@ const toShowDetail = (row: any) => {
 
 // 预览
 const toPreview = (row: any) => {
-	window.open(`${viteUrl}vueAdmin/#article/content?id=${row.id}`);
+	window.open(`${viteUrl}pixelAdmin/#article/content?id=${row.id}`);
 }
 
 // 文章删除
@@ -255,6 +255,10 @@ const onHandleCurrentChange = (val: number) => {
 	getTableData();
 };
 
+onActivated(() => {
+	getTableData();
+})
+
 onMounted(() => {
 	getTableData();
 	getModuleList();

src/views/photos/index.vue

@@ -328,7 +328,7 @@ const jpgFormatter = (row: any) => {
 	// } else {
 	// 	newPath = row.path.replaceAll('\\\\', '/')	
 	// }
-	newPath = newPath.includes('://')?newPath : encodeURI(newPath);
+	newPath = newPath.includes('://')?newPath : newPath;
 	
   	return `${newPath}`;
 }

src/views/service/apply/dialog.vue

@@ -72,7 +72,7 @@
 					<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16" class="mb20" v-if="state.data.options&&state.data.options.length>0">
 						<el-form-item label="选项：">
 							<div class="tags-option">
-								<el-tag v-for="option in state.data.options" :key="option.id" :disable-transitions="false">{{ option.optionName }}</el-tag>
+								<el-tag v-for="option in state.data.options" :title="option.optionName" :key="option.id" :disable-transitions="false">{{ option.optionName }}</el-tag>
 							</div>
 						</el-form-item>
 					</el-col>
@@ -119,7 +119,7 @@ const state:any = reactive({
 		name: { required: true, message: '请输入应用名称', trigger: 'blur' },
 		api: { required: true, message: '请输入接口名', trigger: 'blur' },
 		tips: { required: true, message: '请输入提示词', trigger: 'blur' },
-		price: { required: true, message: '请输入价格', trigger: 'blur' },
+		// price: { required: true, message: '请输入价格', trigger: 'blur' },
 		position: { required: true, message: '请输入排序号', trigger: 'blur' },
         type: { required: true, message: '请选择应用类型', trigger: 'blur' },
 	},
@@ -320,5 +320,10 @@ defineExpose({
 	grid-template-columns: repeat(auto-fill, minmax(50px,100px) );
 	grid-gap: 0.4em 0.8em;
 	// grid-auto-flow: column dense;
+	::v-deep .el-tag__content{
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: nowrap;
+	}
 }
 </style>

src/views/service/apply/index.vue

@@ -129,8 +129,8 @@ const state: any = reactive({
 			id: 1,
 			children: [
 				{id: '-1',label: '全部',active: true,},
-				{id: '0',label: '上架',active: false,},
+				{id: '1',label: '上架',active: false,},
-				{id: '1',label: '下架',active: false,}
+				{id: '0',label: '下架',active: false,}
 			],
 		}
 	],
@@ -154,9 +154,19 @@ const onSelItem = (val: FilteringRowType, v: FilteringChilType) => {
 	val.children.map((v: FilteringChilType) => (v.active = false));
 	v.active = true;
 	state.tableData.loading = true;
-	setTimeout(() => {
+	const isd = Number(v.id);
-		state.tableData.loading = false;
+	if(val.id === 0){
-	}, 500);
+		state.tableData.param.type = isd;
+		isd === -1 ? delete state.tableData.param.type : '' ;
+	}else{
+		state.tableData.param.publish = isd;
+		isd === -1 ? delete state.tableData.param.publish : '' ;
+	}
+	state.tableData.param.current = 1;
+	getTableData();
+	// setTimeout(() => {
+	// 	state.tableData.loading = false;
+	// }, 500);
 };
 // 当前列表项点击
 const onTableItemClick = (v: FilterListType) => {
@@ -311,7 +321,7 @@ onMounted(() => {
 				}
 
 				.card-item-left{
-					width: 80px;
+					width: 84px;
 					height: 80px;
 					img{
 						width: 100%;
@@ -327,6 +337,7 @@ onMounted(() => {
 					overflow: hidden;
 					white-space: nowrap;
 					.cir-one{
+						line-height: 1.3em;
 						font-size: 1.3em;
 						font-weight: bold;
 						color: rgba($color: #000000, $alpha: 0.8);

src/views/service/recommend/index.vue

@@ -4,9 +4,9 @@
 			<div class="system-dept-search mb15">
                 <!-- 发布者：<el-input size="default" placeholder="请输入发布用户名称" v-model="state.tableData.param.userName" 
 				class="ml10 mr10" style="max-width: 180px" clearable></el-input> -->
-                作品类型：<el-select size="default" v-model="state.tableData.param.serviceId" placeholder="请选择作品类型" 
+                作品类型：<el-select size="default" v-model="state.tableData.param.serviceName" placeholder="请选择作品类型" 
-                clearable class="ml10 mr10" style="max-width: 180px">
+                clearable class="ml10 mr10" style="max-width: 180px" filterable>
-					<el-option v-for="(item,index) in state.special.data" :key="index" :label="item.name" :value="item.id"></el-option>
+					<el-option v-for="(item,index) in state.special.data" :key="index" :label="item.name" :value="item.name"></el-option>
                 </el-select>
                 
 				<el-button @click="getTableData" size="default" type="primary" class="ml10">
@@ -21,21 +21,35 @@
 					</el-icon>
 					重置
 				</el-button>
+				<el-button @click="state.recommend.show = true" size="default" type="success" class="ml10">
+					<el-icon>
+						<ele-FolderAdd />
+					</el-icon>
+					添加推荐作品
+				</el-button>
 			</div>
 			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
 				<el-table-column align="center" type="index" label="序号"  width="100"/>
-				<el-table-column align="center" prop="name" label="作品">
+				<el-table-column align="center" prop="sourcePath" label="原图">
 					<template #default="scope">
-						<el-image :src="scope.row.path" lazy
+						<el-image v-if="scope.row.sourcePath" :src="getImagePath(scope.row.sourcePath)" lazy
-						preview-teleported="true" :preview-src-list="[scope.row.path]"/>
+						preview-teleported="true" :preview-src-list="[getImagePath(scope.row.sourcePath)]"/>
+						<div v-else>暂无</div>
 					</template>
 				</el-table-column>
-				<el-table-column prop="serviceName" align="center" label="服务名" show-overflow-tooltip></el-table-column>
+				<el-table-column align="center" prop="path" label="作品">
+					<template #default="scope">
+						<el-image :src="getImagePath(scope.row.path)" lazy
+						preview-teleported="true" :preview-src-list="[getImagePath(scope.row.path)]"/>
+					</template>
+				</el-table-column>
+				<el-table-column prop="serviceName" align="center" label="作品类型" show-overflow-tooltip></el-table-column>
 				<el-table-column prop="createtime" align="center" label="时间" :formatter="dateFormatter" show-overflow-tooltip></el-table-column>
 				<el-table-column label="操作" width="200" align="center">
 					<template #default="scope">
 						<!-- <el-button size="small" text type="primary" @click="toShowDetail(scope.row.id)">查看详情</el-button> -->
-						<el-button  size="small" text type="danger" @click="toPublic(scope.row)">取消推荐</el-button>
+						 <el-button size="small" text type="primary" @click="reviewRecommend(scope.row)">修改</el-button>
+						<el-button  size="small" text type="danger" @click="deleteRecommend(scope.row.id)">删除</el-button>
 						<!-- <el-button size="small" v-else text type="primary" @click="audit(scope.row)">重新审核</el-button> -->
 					</template>
 				</el-table-column>
@@ -69,6 +83,83 @@
 				</el-form>
 			</div>
 		</el-dialog>
+		<!-- 添加推荐作品 -->
+		<el-dialog :title="state.recommend.title" v-model="state.recommend.show" width="400px">
+			<el-form v-loading="state.recommend.loading" ref="recommendFormRef" :model="state.recommend.form" :rules="state.recommend.rules" size="default" label-width="100px">
+				<el-row :gutter="35">
+					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+						<el-form-item label="作品类型：" prop="serviceName">
+							<el-select size="default" v-model="state.recommend.form.serviceName" placeholder="请选择作品类型" clearable filterable>
+                                <el-option v-for="(item,index) in state.special.data" :key="index" :label="item.name" :value="item.name"></el-option>
+                            </el-select>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+						<el-form-item label="排序号：" prop="number">
+							<el-input placeholder="请输入排序号" min="0" v-model="state.recommend.form.number" type="number"></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+						<el-form-item label="原图：" class="iconImg">
+							<!-- 上传文件 -->
+							<el-upload ref="ordUploadRef" class="h100 personal-user-left-upload" action="#" list-type="picture-card"
+								:auto-upload="false" :limit="1" :class="{ hide: state.recommend.picture.ordHide }" @change="handleOrdUploadChange" accept='image/*'>
+								<template #default>
+									<el-icon><Plus /></el-icon>
+								</template>
+								<template #file="{ file }">
+									<div>
+										<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+										<span class="el-upload-list__item-actions">
+											<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
+												<el-icon><zoom-in /></el-icon>
+											</span>
+											<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleOrdRemove(file)">
+												<el-icon><Delete /></el-icon>
+											</span>
+										</span>
+									</div>
+								</template>
+							</el-upload>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+						<el-form-item label="效果图：" class="iconImg">
+							<!-- 上传文件 -->
+							<el-upload ref="effUploadRef" class="h100 personal-user-left-upload" action="#" list-type="picture-card"
+								:auto-upload="false" :limit="1" :class="{ hide: state.recommend.picture.effHide }" @change="handleEffUploadChange" accept='image/*'>
+								<template #default>
+									<el-icon><Plus /></el-icon>
+								</template>
+								<template #file="{ file }">
+									<div>
+										<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+										<span class="el-upload-list__item-actions">
+											<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
+												<el-icon><zoom-in /></el-icon>
+											</span>
+											<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleEffRemove(file)">
+												<el-icon><Delete /></el-icon>
+											</span>
+										</span>
+									</div>
+								</template>
+							</el-upload>
+						</el-form-item>
+					</el-col>
+				</el-row>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="onCancel" size="default">取 消</el-button>
+					<el-button type="primary" @click="onSubmit" size="default">确 定</el-button>
+				</span>
+			</template>
+		</el-dialog>
+		<!-- 封面预览弹窗 -->
+        <el-dialog v-model="dialogVisible">
+            <img width="100%" w-full :src="dialogImageUrl" alt="预览" />
+        </el-dialog>
 	</div>
 </template>
 
@@ -76,7 +167,9 @@
 import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { recommendApi } from '/@/api/service/recommend';
 import { applyApi } from '/@/api/service/apply';
-import { ElMessage, ElMessageBox, TableColumnCtx } from 'element-plus';
+import { photosApi } from '/@/api/photos';
+import { ElMessage, ElMessageBox, TableColumnCtx, UploadFile, UploadFiles } from 'element-plus';
+import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue';
 
 // 表格数据
 const state = reactive<any>({
@@ -87,7 +180,9 @@ const state = reactive<any>({
 		param: {
 			current: 1,
 			size: 10,
-			serviceId: ''
+			serviceName: '',
+			isBackend: 1,
+			number: ''
 		},
 	},
 	special: {
@@ -101,13 +196,43 @@ const state = reactive<any>({
 		},
 		show: false,
 		title: '作品审核',
-		message: '',
+	},
+	recommend: {
+		loading: false,
+		form: {},
+		rules: {
+			// photoSourceId: { required: true, message: '请输入应用名称', trigger: 'blur' },
+			photoTargetId: { required: false, message: '请上传推荐作品', trigger: 'blur' },
+			serviceName: { required: true, message: '请选择作品类型', trigger: 'blur' },
+			number: { required: true, message: '请输入排序号', trigger: 'blur' }
+		},
+		show: false,
+		title: '新增推荐作品',
+		picture:{
+			ordFile: {},
+			ordHide: false,
+			effFile: {},
+			effHide: false
+		}
 	}
 });
 
 // 引入 api 请求接口
 const redApi = recommendApi();
 const aplApi = applyApi();
+const photoApi = photosApi();
+
+// 图标弹窗
+const dialogImageUrl = ref('');
+const dialogVisible = ref(false);
+
+// 定义变量内容
+const recommendFormRef = ref();
+const ordUploadRef = ref();
+const effUploadRef = ref();
+
+// 图标上传禁用
+const disabled = ref(false);
 
 // 获取专题列表
 const getSpecialList = async() => {
@@ -125,6 +250,13 @@ const getSpecialList = async() => {
 	}
 };
 
+// 图片格式化
+const getImagePath = (path: string) => {
+	if(!path) return;
+	let index = path?.indexOf('?');
+	return path?.includes('://') ? path.substring(0,(!index||index===-1) ? path.length : index) : encodeURI(path);
+}
+
 // 获取表格数据
 const getTableData = async() => {
 	try {
@@ -137,23 +269,179 @@ const getTableData = async() => {
 			ElMessage.error('推荐作品列表获取失败！');
 		}
 	} catch (error) {
+		ElMessage.error('推荐作品列表获取失败！');
 	} finally {
 		state.tableData.loading = false;
 	}
 };
 
+// 修改排序号
+const reviewRecommend = (row:any) => {
+	ElMessageBox.prompt('排序号','编辑',{
+		inputValue: `${row.number}`,
+		inputPattern:/^(0|[1-9][0-9]*)$/,
+		inputErrorMessage: '请输入大于等于0的数字',
+		inputPlaceholder: '请输入排序号'
+	}).then(async({ value }) => {
+		let res = await redApi.updateRecommend({id: row.id,number: Number(value)});
+		if(res?.success){
+			// getTableData();
+			row.number = Number(value);
+			ElMessage.success('修改成功！');
+		}else{
+			ElMessage.error('修改失败！');
+		}
+    })
+    .catch(() => {})
+}
+
+// 删除推荐
+const deleteRecommend = (id:Number) =>{
+	ElMessageBox.confirm('是否确定删除该推荐?', '提示', {
+		confirmButtonText: '确定',
+		cancelButtonText: '取消',
+		type: 'warning',
+	})
+	.then(async() => {
+		try {
+			state.tableData.loading = true;
+			let res = await redApi.deleteRecommend(id);
+			if(res?.success){ 
+				await getTableData();
+				ElMessage.success('推荐作品删除成功！');
+			} else ElMessage.error('推荐作品删除失败！');
+		} catch(e) {
+			ElMessage.error('处理失败！');
+		} finally {
+			state.tableData.loading = false;
+		}
+	})
+}
+
 // 重置
 const reset = () =>{
 	state.tableData.param = {
 		current: 1,
 		size: 10,
-		serviceId: ''
+		serviceName: '',
+		isBackend: 1
 	}
 	getTableData();
 }
 
+// 关闭弹窗
+const closeDialog = () => {
+    setTimeout(() => {
+		state.recommend.show = false;
+        state.recommend.form = {};
+        handleOrdRemove();
+		handleEffRemove();
+	}, 300)
+};
+
+// 取消
+const onCancel = () => {
+	closeDialog();
+};
+
+// 上传文件
+const uploadImageFile = async(file: any,type: any) => {
+	try {
+		state.recommend.loading = true;
+		const formdata = new FormData();
+		formdata.append('file', file);
+		let res = await photoApi.uploadPictrue(formdata);
+		if(res?.success){
+			type === 'ord' ? state.recommend.form.photoSourceId = res.data.id : state.recommend.form.photoTargetId = res.data.id ;
+			state.recommend.loading = false;
+		}else{
+			ElMessage.error('图片上传失败！');
+			state.recommend.loading = false;
+		}
+	} catch (error) {
+		state.recommend.loading = false;
+		ElMessage.error('图片上传失败！');
+	}
+}
+
+
+// 图标删除——原图
+const handleOrdRemove = (file?: UploadFile) => {
+  state.recommend.picture.ordFile = {};
+  state.recommend.form.photoSourceId = '';
+  ordUploadRef.value.clearFiles();
+  state.recommend.picture.ordHide = false;
+}
+
+// 图标删除——效果图
+const handleEffRemove = (file?: UploadFile) => {
+  state.recommend.picture.effFile = {};
+  state.recommend.form.photoTargetId = '';
+  effUploadRef.value.clearFiles();
+  state.recommend.picture.effHide = false;
+}
+
+// 图标图片更改——原图
+const handleOrdUploadChange = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+	if(uploadFile.raw.type.includes('image')){
+		const file:any = uploadFile.raw;
+		state.recommend.picture.ordFile = file;
+		state.recommend.picture.ordHide = true;
+		uploadImageFile(file,'ord');
+	}else{
+		ElMessage.error('请上传图片文件！');
+		ordUploadRef.value.clearFiles();
+	}
+}
+
+// 图标图片更改——效果图
+const handleEffUploadChange = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+	if(uploadFile.raw.type.includes('image')){
+		const file:any = uploadFile.raw;
+		state.recommend.picture.effFile = file;
+		state.recommend.picture.effHide = true;
+		uploadImageFile(file,'eff');
+	}else{
+		ElMessage.error('请上传图片文件！');
+		effUploadRef.value.clearFiles();
+	}
+}
+
+// 图标预览
+const handlePictureCardPreview = (file: UploadFile) => {
+  dialogImageUrl.value = file.url!
+  dialogVisible.value = true
+}
+
 const replayFormRef = ref();
 
+// 提交
+const onSubmit = () => {
+	recommendFormRef.value.validate(async(valid: boolean) => {
+        if (valid && state.recommend.picture.effHide){
+			try {
+				state.recommend.loading = true;
+				let res = await redApi.saveRecommend(state.recommend.form);
+				if(res?.success){
+					ElMessage.success('推荐作品新增成功！');
+					closeDialog(); // 关闭弹窗
+					state.tableData.param.current = 1;
+					getTableData();
+				}else{
+					ElMessage.error('推荐作品新增失败！');
+				}
+			} catch (error) {
+				ElMessage.error('处理失败！');
+			} finally {
+				state.recommend.loading = false;
+			}
+        }else{
+            ElMessage.error(state.recommend.form.number ? '请上传效果图！' : 
+			(state.recommend.form.serviceName ? '请输入排序号！' : '请选择作品类型！'));
+		}
+    });
+};
+
 // 取消推荐
 const toPublic = (row: any) => {
 	ElMessageBox.confirm('确定要取消该作品推荐吗?', '提示', {
@@ -181,12 +469,13 @@ const toPublic = (row: any) => {
 // 日期格式化
 const dateFormatter = (row: any, column: TableColumnCtx<String>) => {
     if(row.createtime === null) return '暂无';
-	let mount = row.createtime[1];
+	let date = new Date(row.createtime);
-	let day = row.createtime[2];
+	let mount = date.getMonth() + 1;
-	let hour = row.createtime[3];
+	let day = date.getDate();
-	let minute = row.createtime[4];
+	let hour = date.getHours();
-	let second = row.createtime[5];
+	let minute = date.getMinutes();
-  	return `${row.createtime[0]}-${mount < 10 ? '0' : ''}${mount}-${day < 10 ? '0' : ''}${day} ${hour < 10 ? '0' : ''}${hour}:${minute < 10 ? '0' : ''}${minute}:${second < 10 ? '0' : ''}${second}`;
+	let second = date.getSeconds();
+  	return `${date.getFullYear()}-${mount < 10 ? '0' : ''}${mount}-${day < 10 ? '0' : ''}${day} ${hour < 10 ? '0' : ''}${hour}:${minute < 10 ? '0' : ''}${minute}:${second < 10 ? '0' : ''}${second}`;
 }
 
 // 分页改变
@@ -220,6 +509,9 @@ onMounted(() => {
 		}
 	}
 }
+.iconImg :deep(.hide .el-upload--picture-card) {
+    display: none;
+}
 .dialog-content{
 	padding: 0;
 	display: flex;

src/views/service/shares/index.vue

@@ -35,9 +35,11 @@
 				<el-table-column prop="reviewStatus" align="center" label="审核结果" show-overflow-tooltip>
 					<template #default="scope">
 						<el-tag v-if="scope.row.reviewStatus === 1" type="warning">审核中</el-tag>
-						<el-tag v-else-if="scope.row.reviewStatus === 2" type="success">通过</el-tag>
 						<el-tag v-else-if="scope.row.reviewStatus === 3" type="danger">未通过</el-tag>
-						<el-tag v-else>未发布</el-tag>
+						<el-tag v-else-if="scope.row.reviewStatus === null||scope.row.reviewStatus === 0">未发布</el-tag>
+						<el-tag v-else-if="scope.row.reviewStatus === 2" type="success">通过</el-tag>
+						<el-tag v-else-if="scope.row.reviewStatus === 4" type="success">已推荐</el-tag>
+						<el-tag v-else-if="scope.row.reviewStatus === 5" type="warning">取消推荐</el-tag>
 					</template>
 				</el-table-column>
 				<el-table-column prop="createtime" align="center" label="时间" :formatter="dateFormatter" show-overflow-tooltip></el-table-column>
@@ -46,8 +48,9 @@
 						<!-- <el-button size="small" text type="primary" @click="toShowDetail(scope.row.id)">查看详情</el-button> -->
 						<el-button size="small" v-if="scope.row.reviewStatus === 1" text type="primary" @click="audit(scope.row)">审核</el-button>
 						<el-button size="small" v-else-if="scope.row.reviewStatus === null||scope.row.reviewStatus === 0" text type="primary" @click="toPublic(scope.row)">发布</el-button>
-						<el-button size="small" v-else text type="primary" @click="audit(scope.row)">重新审核</el-button>
+						<el-button size="small" v-else-if="scope.row.reviewStatus === 2||scope.row.reviewStatus === 3||scope.row.reviewStatus === 5" text type="primary" @click="audit(scope.row)">重新审核</el-button>
-						<!-- <el-button size="small" v-if="scope.row.reviewStatus === 2" text type="primary" @click="toPublicHome(scope.row)">首页推荐</el-button> -->
+						<el-button size="small" v-if="scope.row.reviewStatus === 2||scope.row.reviewStatus === 5" text type="primary" @click="toPublicHome(scope.row)">首页推荐</el-button>
+						<el-button size="small" v-else-if="scope.row.reviewStatus === 4" text type="danger" @click="toCancelPublic(scope.row)">取消推荐</el-button>
 					</template>
 				</el-table-column>
 			</el-table>
@@ -123,6 +126,8 @@ const statusList = ref([
 	{label: '审核中', value: 1},
     {label: '通过', value: 2},
     {label: '未通过', value: 3},
+	{label: '已推荐', value: 4},
+	{label: '取消推荐', value: 5},
 ]);
 
 // 引入 api 请求接口
@@ -185,6 +190,32 @@ const toPublic = (row: any) => {
 	})
 }
 
+// 取消推荐
+const toCancelPublic = (row: any) => {
+	ElMessageBox.confirm('是否确定取消推荐该作品?', '提示', {
+		confirmButtonText: '确定',
+		cancelButtonText: '取消',
+		type: 'warning',
+	})
+	.then(async() => {
+		try {
+			state.auditDialog.form.id = row.id;
+			state.auditDialog.form.status = 5;
+			state.tableData.loading = true;
+			let res = await shareApi.auditRelease(state.auditDialog.form);
+			if(res?.success){
+				ElMessage.success('作品取消推荐成功！');
+				state.auditDialog.show = false;
+				getTableData();
+			}else{ElMessage.error('作品取消推荐失败！');}
+		} catch(e) {
+			ElMessage.error('处理失败！');
+		} finally {
+			state.tableData.loading = false;
+		}
+	})
+}
+
 // 首页推荐
 const toPublicHome = (row: any) => {
 	ElMessageBox.confirm('确定要推荐该作品吗?', '提示', {
@@ -194,18 +225,15 @@ const toPublicHome = (row: any) => {
 	})
 	.then(async() => {
 		try {
+			state.auditDialog.form.id = row.id;
+			state.auditDialog.form.status = 4;
 			state.tableData.loading = true;
-			const form = {
+			let res = await shareApi.auditRelease(state.auditDialog.form);
-					labelName: '首页推荐',
+			if(res?.success){
-					moduleName: '首页推荐',
+				ElMessage.success('作品推荐成功！');
-					path: row.path
+				state.auditDialog.show = false;
-				}
+				getTableData();
-				console.log(form);
+			}else{ElMessage.error('作品推荐失败！');}
-				
-			// let res = await shareApi.saveRelease({ creationId: row.creationId });
-			// if(res?.success){ 
-			// 	ElMessage.success('推荐成功！');
-			// } else ElMessage.error('推荐失败！');
 		} catch(e) {
 			ElMessage.error('处理失败！');
 		} finally {
@@ -244,7 +272,12 @@ const commitAudit = async() => {
 const dateFormatter = (row: any, column: TableColumnCtx<String>) => {
     if(row.createtime === null) return '暂无';
 	let date = new Date(row.createtime);
-  	return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+	let mount = date.getMonth() + 1;
+	let day = date.getDate();
+	let hour = date.getHours();
+	let minute = date.getMinutes();
+	let second = date.getSeconds();
+  	return `${date.getFullYear()}-${mount < 10 ? '0' : ''}${mount}-${day < 10 ? '0' : ''}${day} ${hour < 10 ? '0' : ''}${hour}:${minute < 10 ? '0' : ''}${minute}:${second < 10 ? '0' : ''}${second}`;
 }
 
 // 分页改变

src/views/service/wall/index.vue

@@ -0,0 +1,670 @@
+<template>
+    <div class="system-dept-container layout-padding">
+		<el-card shadow="hover" class="layout-padding-auto">
+			<div class="system-dept-search mb15">
+				<span>标签:</span>
+                <el-select @change="handleChangeLabel" size="default" v-model="state.tableData.param.labelName" placeholder="请选择" filterable clearable class="ml10" style="max-width: 180px;margin:0 10px;">
+					<el-option v-for="(item,index) in labelList" :key="index" :label="item.name" :value="item.name" />
+                </el-select>
+				<span>应用服务:</span>
+				<el-select size="default" v-model="state.tableData.param.serviceName" placeholder="请选择" filterable clearable class="ml10" style="max-width: 180px;margin:0 10px;">
+					<el-option v-for="(item,index) in state.special.data" :key="index" :label="item.name" :value="item.name" />
+                </el-select>
+				<el-button @click="getTableData" size="default" type="primary" class="ml10" style="margin-right: 15px;">
+					<el-icon>
+						<ele-Search />
+					</el-icon>
+					查询
+				</el-button>
+				<el-button @click="reset" size="default" type="primary" class="ml10"  style="margin-right: 15px;">
+					<el-icon>
+						<ele-RefreshRight />
+					</el-icon>
+					重置
+				</el-button>
+				<el-button @click="switchDrawer(0)" size="default" type="primary" class="ml10">
+					<el-icon>
+						<ele-FolderAdd />
+					</el-icon>
+					添加图片
+				</el-button>
+			</div>
+			<div class="system-dept-search mb15" style="cursor: pointer;" @click="copyAddress" title="点击复制">
+				栏目地址：{{ viteUrl + state.lamAddress + (state.lamAddressId ? ('?id=' + state.lamAddressId) : '') }}
+			</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="图片名称" :formatter="commonFormatter" show-overflow-tooltip></el-table-column>
+				<el-table-column  label="水印图" align="center">
+					<template #default="scope">
+						<el-image lazy :src="jpgFormatter(scope.row.watermarkPath)" preview-teleported="true" :preview-src-list="[jpgFormatter(scope.row.watermarkPath)]"/>
+					</template>
+				</el-table-column>
+                <el-table-column  label="原图" align="center">
+					<template #default="scope">
+						<el-image lazy :src="jpgFormatter(scope.row.originalPath)" preview-teleported="true" :preview-src-list="[jpgFormatter(scope.row.originalPath)]"/>
+					</template>
+				</el-table-column>
+				<el-table-column prop="serviceName" label="应用服务"  show-overflow-tooltip  align="center"></el-table-column>		
+				<el-table-column prop="number" label="排序" :formatter="commonFormatter" show-overflow-tooltip  align="center"></el-table-column>		
+				<el-table-column prop="price" label="价格" show-overflow-tooltip  align="center"></el-table-column>		
+                <el-table-column prop="uploadName" label="上传者" :formatter="commonFormatter" 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="操作" align="center">
+					<template #default="scope">
+						<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="deleteBanner(scope.row.id)">
+							<el-icon>
+								<ele-Delete />
+							</el-icon>
+						</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+			<!-- 新增或编辑弹窗  -->
+			<el-drawer
+				v-model="dialog"
+				:title="changeTitle()"
+				@close="resetForm"
+				direction="rtl"
+				size="45%"
+			>
+				<div class="demo-drawer__content">
+					<el-form  
+						ref="ruleFormRef"
+						style="max-width: 85%"
+						:model="state.formData"
+						:rules="state.rules"
+						label-width="110px"
+						class="demo-ruleForm"
+						:size="formSize"
+						status-icon
+						v-loading="state.formData.loading"
+						:disabled="isForbidden"
+					>
+						<el-form-item label="标签:" prop="cpLabelId">
+							<el-select size="default" v-model="state.formData.cpLabelId" placeholder="请选择" clearable filterable>
+								<el-option 
+									v-for="(item,index) in labelList" 
+									:key="index" 
+									:label="item.name" 
+									:value="item.id">
+								</el-option>
+							</el-select>
+						</el-form-item>
+                        <el-form-item label="应用服务:" prop="serviceId">
+                            <el-select size="default" v-model="state.formData.serviceId" placeholder="请选择服务类型" 
+                            clearable filterable>
+                                <el-option v-for="(item,index) in state.special.data" :key="index" :label="item.name" :value="item.id"></el-option>
+                            </el-select>
+                        </el-form-item>
+						<el-form-item label="图片名称:" prop="name" >
+							<el-input v-model="state.formData.name" />
+						</el-form-item>
+						<el-form-item label="水印图:" prop="fileList">
+							<el-upload ref="uploadRef" action="#" list-type="picture-card" :class="{disabled:uploadDisabled}" 
+							:limit="1" :file-list="state.formData.fileList" :on-change="handleChange" :auto-upload="false">
+								<el-icon><Plus /></el-icon>
+								<template #file="{ file }">
+								<div>
+									<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+									<span class="el-upload-list__item-actions">
+									<span
+										class="el-upload-list__item-preview"
+										@click="handlePictureCardPreview(file)"
+									>
+										<el-icon><zoom-in /></el-icon>
+									</span>
+									<span
+										v-if="!disabled"
+										class="el-upload-list__item-delete"
+										@click="handleRemove(file)"
+									>
+										<el-icon><Delete /></el-icon>
+									</span>
+									</span>
+								</div>
+								</template>
+							</el-upload>
+						</el-form-item>
+						<el-form-item label="原图:" prop="ordFileList">
+							<el-upload ref="ordUploadRef" action="#" list-type="picture-card" :class="{disabled:ordUploadDisabled}" 
+							:limit="1" :file-list="state.formData.ordFileList" :on-change="handleOrdChange" :auto-upload="false">
+								<el-icon><Plus /></el-icon>
+								<template #file="{ file }">
+								<div>
+									<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+									<span class="el-upload-list__item-actions">
+									<span
+										class="el-upload-list__item-preview"
+										@click="handlePictureCardPreview(file)"
+									>
+										<el-icon><zoom-in /></el-icon>
+									</span>
+									<span
+										v-if="!disabled"
+										class="el-upload-list__item-delete"
+										@click="handleOrdRemove(file)"
+									>
+										<el-icon><Delete /></el-icon>
+									</span>
+									</span>
+								</div>
+								</template>
+							</el-upload>
+						</el-form-item>
+						<el-form-item label="排序号：" prop="number">
+							<el-input placeholder="请输入排序号" min="0" v-model="state.formData.number" type="number"></el-input>
+						</el-form-item>
+						<el-form-item label="价格：" prop="price">
+							<el-input placeholder="请输入价格" min="0" v-model="state.formData.price" type="number"></el-input>
+						</el-form-item>
+						<el-dialog v-model="dialogVisible">
+							<img :src="dialogImageUrl"  style="width: 100%"  alt="Preview Image" />
+						</el-dialog>
+					</el-form>
+					<div class="demo-drawer__footer">
+						<el-button v-show="isHide" @click="submitForm(flag)" :loading="loading" style="margin-right: 30px;" >
+							{{ loading ? '保存 ...' : '保存' }}
+						</el-button>
+						<el-button type="primary" @click="resetForm">取消</el-button>
+					</div>
+				</div>
+			</el-drawer>
+			<!-- 分页器 -->
+			<el-pagination
+				@size-change="onHandleSizeChange"
+				@current-change="onHandleCurrentChange"
+				class="mt15"
+				:pager-count="5"
+				:page-sizes="[10, 20, 30]"
+				v-model:current-page="state.tableData.param.current"
+				background
+				v-model:page-size="state.tableData.param.size"
+				layout="total, sizes, prev, pager, next, jumper"
+				:total="state.tableData.total"
+			>
+			</el-pagination>
+		</el-card>
+	</div>
+</template>
+
+<script setup lang="ts" name="recommendWall">
+import { onMounted, reactive, ref } from 'vue';
+import { ElDrawer, ElMessage, ElMessageBox, TableColumnCtx, timePickerDefaultProps } from 'element-plus';
+import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue'
+import type { ComponentSize, FormInstance, FormRules, UploadFile, UploadProps, UploadUserFile } from 'element-plus'
+import { photosApi } from '/@/api/photos';
+import { recommendWallApi } from '/@/api/service/wall';
+import { applyApi } from '/@/api/service/apply';
+import { attachmentApi } from '/@/api/attachment';
+
+// 数据
+const state = reactive({
+	tableData: {
+		data: [],
+		total: 0,
+		loading: false,
+		param: {
+			labelName: '',
+			serviceName: '',
+			current: 1,
+			size: 10,
+		},
+	},
+    special: {
+		data: [],
+	},
+	formData: {
+		cpLabelId: '',
+        serviceId: '',
+        number: '',
+        name: '',
+        originalPath: '',
+        watermarkPath: '',
+        price: '',
+		fileList: [],
+		ordFileList: [],
+		loading: false
+	},
+	rules: {
+		name: [
+    		{ required: true, message: '请输入名称', trigger: 'blur' }
+		],
+		fileList: [
+			{ required: true, message: '请选择水印图', trigger: 'blur' }
+		],
+		ordFileList: [
+			{ required: true, message: '请选择原图', trigger: 'blur' }
+		],
+        serviceId: [
+			{ required: true, message: '请选择应用服务', trigger: 'blur' },
+		],
+		cpLabelId: [
+			{ required: true, message: '请选择标签', trigger: 'blur' },
+		],
+		number: [{ required: true, message: '请输入排序号', trigger: 'blur' }],
+		price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
+	},
+	lamAddress: '#/pages/mobile_web/wall/detail',
+	lamAddressId: '',
+});
+
+// 图片基本路径
+const viteUrl = import.meta.env.DEV ? 'http://8.138.171.103/pixel/' : import.meta.env.VITE_API_URL;
+
+// 引入 api 请求接口
+const photoApi = photosApi();
+const wallApi = recommendWallApi();
+const aplApi = applyApi();
+const attApi = attachmentApi();
+
+// 标签列表
+const labelList = ref([]);
+
+// 复制地址
+const copyAddress = () =>{
+      var aux = document.createElement("input"); 
+      aux.setAttribute("value", viteUrl + state.lamAddress + (state.lamAddressId ? ('?id=' + state.lamAddressId) : '')); 
+      document.body.appendChild(aux); 
+      aux.select();
+      document.execCommand("copy"); 
+      document.body.removeChild(aux);
+	  ElMessage.success('复制成功');
+	  aux.remove();
+}
+
+// 切换搜索label
+const handleChangeLabel = (name:any) => {
+	state.lamAddressId = labelList.value.find((item:any)=>item.name === name)?.id;
+};
+
+// 获取专题列表
+const getSpecialList = async() => {
+	try {
+		state.tableData.loading = true;
+		let res = await aplApi.getAllServices();
+		if(res?.success){
+			state.special.data = res.data;
+		}else{
+			ElMessage.error('应用服务获取失败！');
+		}
+	} catch (error) {
+	} finally {
+		state.tableData.loading = false;
+	}
+};
+
+// 获取表格数据
+const getTableData = async() => {
+	try {
+		state.tableData.loading = true;
+
+		let res = await wallApi.getWallList(state.tableData.param);
+		if(res?.success){
+			state.tableData.data = res.data.records;
+			state.tableData.total = res.data.total;
+		}else{
+			ElMessage.error('推荐作品获取失败！');
+		}
+	} catch (error) {
+	} finally {
+		state.tableData.loading = false;
+	}
+};
+
+// 重置
+const reset = () =>{
+	state.tableData.param = {
+		current: 1,
+		serviceName: '',
+		labelName: '',
+		size: 10,
+	}
+	getTableData();
+}
+
+// 图片链接格式化
+const jpgFormatter = (path: any) => {
+  	return path?.includes('://')?path : path;
+}
+
+// 通用格式化
+const commonFormatter = (row: any, column: TableColumnCtx<String>) => {
+    return row[column.property] || '暂无';
+}
+
+// 日期格式化
+const dateFormatter = (row: any, column: TableColumnCtx<String>) => {
+	let date = new Date(row.createtime);
+  	return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+}
+
+// 分页改变
+const onHandleSizeChange = (val: number) => {
+	state.tableData.param.size = val;
+	getTableData();
+};
+
+// 分页改变
+const onHandleCurrentChange = (val: number) => {
+	state.tableData.param.current = val;
+	getTableData();
+};
+// #endregion
+
+// #region
+const dialog = ref(false)
+const flag = ref(false)
+
+
+const formSize = ref<ComponentSize>('large')
+const ruleFormRef = ref<FormInstance>()
+const uploadDisabled = ref(false)
+const ordUploadDisabled = ref(false)
+const isHide = ref(false)
+const headTitle = ref("")
+
+const changeTitle = () => {
+	if (flag.value) {
+		headTitle.value="新增图片"
+	} else {
+		headTitle.value="编辑图片"
+	}
+	if (!isHide.value) {
+		headTitle.value="查看图片"
+	}
+	return headTitle.value;
+}
+
+// 获取图片详情
+const singleWall = async (id: number) => {
+	state.formData.loading = true;
+		let res = await wallApi.singleWall(id)
+		if (res?.success) {
+			state.formData.fileList.push({ url: jpgFormatter(res.data.watermarkPath) });
+			state.formData.ordFileList.push({ url: jpgFormatter(res.data.originalPath) });
+			Object.assign(state.formData, res.data);
+			uploadDisabled.value = true;
+			ordUploadDisabled.value = true;
+			state.formData.loading = false;
+		} else {
+			ElMessage.error('获取图片详情失败！')
+			state.formData.loading = false;
+		}
+}
+
+const isForbidden = ref(false)
+
+// 切换右侧边栏
+const switchDrawer = async (staus:any,id: number) => {
+	if (staus == 1) {
+		flag.value = false;
+		isHide.value = true;
+		disabled.value = false;
+		singleWall(id);
+	} else {
+		console.log("添加图片");
+		flag.value = true;
+		isHide.value = true;
+	}
+	dialog.value = true;
+}
+
+// 添加图片
+const disabled = ref(false)
+
+const handleChange: UploadProps['onChange'] = async (file: uploadFile, uploadFiles) => {
+	state.formData.loading = true;
+	if (file.raw.type === 'image/png' || file.raw.type === 'image/jpeg' || file.raw.type === 'image/jpg' || file.raw.type === 'image/gif') {
+		state.formData.fileList = uploadFiles;
+		uploadDisabled.value = true;
+		try {
+			const formdata = new FormData();
+			formdata.append('file', file.raw);
+			formdata.append('type', 'picture');
+			let res = await attApi.uploadByType(formdata);
+			if(res?.success){
+				state.formData.watermarkPath = jpgFormatter(res.data);
+				ElMessage({message: '图片上传成功！',type: 'success',})
+				state.formData.loading = false;
+			}else{
+				ElMessage.error('图片上传失败！');
+			}
+		} catch (error) {
+			state.formData.loading = false;
+			ElMessage.error('图片上传失败！');
+		}
+	} else {
+		ElMessageBox.alert('图片的格式不正确，请重新选择！', '提示', {
+			confirmButtonText: '确定',
+		})
+		uploadFiles.pop()
+		uploadDisabled.value = false;
+	}
+}
+
+const handleOrdChange: UploadProps['onChange'] = async (file: uploadFile, uploadFiles) => {
+	state.formData.loading = true;
+	if (file.raw.type === 'image/png' || file.raw.type === 'image/jpeg' || file.raw.type === 'image/jpg' || file.raw.type === 'image/gif') {
+		state.formData.ordFileList = uploadFiles;
+		ordUploadDisabled.value = true;
+		try {
+			const formdata = new FormData();
+			formdata.append('file', file.raw);
+			formdata.append('type', 'picture');
+			let res = await attApi.uploadByType(formdata);
+			if(res?.success){
+				state.formData.originalPath = jpgFormatter(res.data);
+				ElMessage({message: '图片上传成功！',type: 'success',})
+				state.formData.loading = false;
+			}else{
+				ElMessage.error('图片上传失败！');
+			}
+		} catch (error) {
+			state.formData.loading = false;
+			ElMessage.error('图片上传失败！');
+		}
+	} else {
+		ElMessageBox.alert('图片的格式不正确，请重新选择！', '提示', {
+			confirmButtonText: '确定',
+		})
+		uploadFiles.pop()
+		ordUploadDisabled.value = false;
+	}
+}
+
+const dialogImageUrl = ref('')
+const dialogVisible = ref(false)
+
+const handlePictureCardPreview = (file: UploadFile,uploadFiles) => {
+  dialogImageUrl.value = file.url!
+  dialogVisible.value = true
+}
+
+const uploadRef = ref();
+const ordUploadRef = ref();
+const handleRemove = (file: UploadFile, uploadFiles) => {
+	uploadRef.value.clearFiles();
+	state.formData.watermarkPath = "";
+	state.formData.fileList = [];
+	uploadDisabled.value = false;
+};
+
+const handleOrdRemove = (file: UploadFile, uploadFiles) => {
+	ordUploadRef.value.clearFiles();
+	state.formData.originalPath = "";
+	state.formData.ordFileList = [];
+	ordUploadDisabled.value = false;
+};
+
+// 作品墙模块下的标签
+const getLabelList = async() => {
+    try {
+		let res = await photoApi.getLabelList(4);
+		if(res?.success){
+			labelList.value = res.data;
+		}else{
+			ElMessage.error('标签列表获取失败！');
+		}
+	} catch (error) {
+		ElMessage.error('标签列表获取失败！');
+	} finally {
+	}
+}
+
+// 删除图片
+const deleteBanner = (id: number) => {
+	ElMessageBox.confirm('确定要删除该作品吗?', '提示', {
+		confirmButtonText: '确定',
+		cancelButtonText: '取消',
+		type: 'warning',
+	})
+	.then(async() => {
+		try {
+			state.tableData.loading = true;
+			let res = await wallApi.deleteWall(id);
+			if(res?.success){ 
+				await getTableData();
+				ElMessage.success('图片删除成功！');
+			} else ElMessage.error('图片删除失败！');
+		} catch(e) {
+			ElMessage.error('删除失败！');
+		} finally {
+			state.tableData.loading = false;
+		}
+	})
+} 
+
+const loading = ref(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 wallApi.saveWall(form);
+        } else {
+          res = await wallApi.updateWall(form);
+        }
+        if (res?.success) {
+          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();
+  state.formData.ordFileList.pop();
+  uploadDisabled.value = false;
+  ordUploadDisabled.value = false;
+  isForbidden.value = false;
+};
+
+// #endregion
+
+onMounted(() => {
+	getTableData();
+    getLabelList();
+    getSpecialList();
+})
+
+</script>
+
+<style scoped lang="scss">
+.system-dept-container {
+	:deep(.el-card__body) {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		overflow: auto;
+		
+		.el-table {
+			flex: 1;
+			width: 100%;
+			table-layout: fixed;
+		}
+	}
+	
+};
+
+::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: 75px; // 固定图片宽度
+  height: 75px; // 固定图片高度
+  object-fit: cover; // 图片居中剪裁
+  display: block;
+}
+
+::v-deep .el-drawer .el-drawer__header {
+	margin: 15px 0 20px 0!important;
+    border-bottom: 0!important;
+}
+::v-deep .el-drawer__title {
+    font-size: 28px!important;
+}
+::v-deep .el-form-item--large{
+    --font-size: 18px;
+    margin-bottom: 28px!important;
+}
+
+.demo-drawer__footer{
+	margin:40px 0 0 150px!important;
+}
+
+::v-deep .disabled{
+    .el-upload--picture-card{
+      display: none;
+    }
+}
+
+::v-deep .el-select--large .el-select__wrapper {
+    padding: 5px 10px;
+    min-height: 30px;
+}
+
+::v-deep .el-form {
+    margin: 0 19px;
+}
+</style>

src/views/statistics/index.vue

@@ -9,8 +9,9 @@
 				:xl="6"
 				v-for="(v, k) in state.homeOne"
 				:key="k"
-				:class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }"
+				class="home-media-sm"
 			>
+			<!-- :class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }" -->
 				<div class="home-card-item flex">
 					<div class="flex-margin flex w100" :class="` home-one-animation${k}`">
 						<div class="flex-auto">
@@ -77,7 +78,7 @@
 					:sm="24"
 					:md="24"
 					:lg="24"
-					:xl="20"
+					:xl="24"
 					>
 					<div class="home-card-item">
 					<!-- 添加日期范围选择框 -->