文章管理——新增文章去除封面必上传限制，完善推荐管理和应用管理

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/service/apply/index.vue

@@ -321,7 +321,7 @@ onMounted(() => {
 				}
 
 				.card-item-left{
-					width: 80px;
+					width: 84px;
 					height: 80px;
 					img{
 						width: 100%;

src/views/service/recommend/index.vue

@@ -5,7 +5,7 @@
                 <!-- 发布者：<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.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.name"></el-option>
                 </el-select>
                 
@@ -21,7 +21,7 @@
 					</el-icon>
 					重置
 				</el-button>
-				<el-button  size="default" type="success" class="ml10">
+				<el-button @click="state.recommend.show = true" size="default" type="success" class="ml10">
 					<el-icon>
 						<ele-FolderAdd />
 					</el-icon>
@@ -82,6 +82,30 @@
 				</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-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>
 
@@ -89,7 +113,7 @@
 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 { ElMessage, ElMessageBox, TableColumnCtx, UploadFile } from 'element-plus';
 
 // 表格数据
 const state = reactive<any>({
@@ -114,7 +138,19 @@ const state = reactive<any>({
 		},
 		show: false,
 		title: '作品审核',
-		message: '',
+	},
+	recommend: {
+		loading: false,
+		form: {},
+		rules: {
+			// photoSourceId: { required: true, message: '请输入应用名称', trigger: 'blur' },
+			photoTargetId: { required: true, message: '请上传推荐作品', trigger: 'blur' },
+			serviceName: { required: true, message: '请选择作品类型', trigger: 'blur' },
+		},
+		show: false,
+		title: '新增推荐作品',
+		coverFile: {},
+		coverHide: false
 	}
 });
 
@@ -122,6 +158,13 @@ const state = reactive<any>({
 const redApi = recommendApi();
 const aplApi = applyApi();
 
+// 图标弹窗
+const dialogImageUrl = ref('');
+const dialogVisible = ref(false);
+
+// 定义变量内容
+const recommendFormRef = ref();
+
 // 获取专题列表
 const getSpecialList = async() => {
 	try {
@@ -196,8 +239,61 @@ const reset = () =>{
 	getTableData();
 }
 
+// 关闭弹窗
+const closeDialog = () => {
+    setTimeout(() => {
+		state.recommend.show = false;
+        state.recommend.form = {};
+        handleRemove();
+	}, 300)
+};
+
+// 取消
+const onCancel = () => {
+	closeDialog();
+};
+
+// 图标删除
+const handleRemove = (file?: UploadFile) => {
+  state.recommend.coverFile = {};
+//   uploadRef.value.clearFiles();
+  state.recommend.coverHide = false;
+}
+
+// 图标预览
+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.coverHide){
+			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('请完善信息！');
+		}
+    });
+};
+
 // 取消推荐
 const toPublic = (row: any) => {
 	ElMessageBox.confirm('确定要取消该作品推荐吗?', '提示', {
@@ -265,6 +361,9 @@ onMounted(() => {
 		}
 	}
 }
+.iconImg :deep(.hide .el-upload--picture-card) {
+    display: none;
+}
 .dialog-content{
 	padding: 0;
 	display: flex;