wangys/schoolNews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web-资源修改

Browse Source
This commit is contained in:
wangys
2025-10-20 15:08:41 +08:00
parent 16824537d1
commit 6f9244eade
6 changed files with 171 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
schoolNewsWeb/src/views/article/ArticleAddView.vue
View File

@@ -8,21 +8,21 @@
<div class="article-form">
<el-form ref="formRef" :model="articleForm" :rules="rules" label-width="100px" label-position="top">
<!-- 标题 -->
<el-form-item label="文章标题" prop="title">
<el-input v-model="articleForm.title" placeholder="请输入文章标题" maxlength="100" show-word-limit />
<el-form-item label="文章标题" prop="resource.title">
<el-input v-model="articleForm.resource.title" placeholder="请输入文章标题" maxlength="100" show-word-limit />
</el-form-item>
<!-- 分类和标签 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="文章分类" prop="categoryID">
<el-select v-model="articleForm.categoryID" placeholder="请选择分类" style="width: 100%" :loading="categoryLoading">
<el-option
v-for="category in categoryList"
:key="category.categoryID || category.id"
:label="category.name"
:value="category.categoryID || category.id || ''"
/>
<el-form-item label="文章分类" prop="resource.categoryID">
<el-select v-model="articleForm.resource.categoryID" placeholder="请选择分类" style="width: 100%" :loading="categoryLoading">
<el-option
v-for="category in categoryList"
:key="category.categoryID || category.id"
:label="category.name"
:value="category.categoryID || category.id || ''"
/>
</el-select>
</el-form-item>
</el-col>
@@ -44,7 +44,7 @@
<el-form-item label="封面图片">
<!-- 上传区域 - 只在没有封面图片时显示 -->
<FileUpload
v-if="!articleForm.coverImage"
v-if="!articleForm.resource.coverImage"
:as-dialog="false"
accept="image/*"
:max-size="2"
@@ -53,15 +53,15 @@
@success="handleCoverUploadSuccess"
/>
<!-- 封面预览 - 只在有封面图片时显示 -->
<div v-if="articleForm.coverImage" class="cover-preview">
<img :src="articleForm.coverImage" class="cover" />
<div v-if="articleForm.resource.coverImage" class="cover-preview">
<img :src="FILE_DOWNLOAD_URL + articleForm.resource.coverImage" class="cover" />
<el-button type="danger" size="small" @click="removeCover">删除封面</el-button>
</div>
</el-form-item>
<!-- 文章内容 -->
<el-form-item label="文章内容" prop="content">
<RichTextComponent ref="editorRef" v-model="articleForm.content" height="500px"
<el-form-item label="文章内容" prop="resource.content">
<RichTextComponent ref="editorRef" v-model="articleForm.resource.content" height="500px"
placeholder="请输入文章内容..." />
</el-form-item>
@@ -69,13 +69,13 @@
<el-form-item label="发布设置">
<el-row :gutter="20">
<el-col :span="8">
<el-checkbox v-model="articleForm.allowComment">允许评论</el-checkbox>
<el-checkbox v-model="articleForm.resource.allowComment">允许评论</el-checkbox>
</el-col>
<el-col :span="8">
<el-checkbox v-model="articleForm.isTop">置顶文章</el-checkbox>
<el-checkbox v-model="articleForm.resource.isTop">置顶文章</el-checkbox>
</el-col>
<el-col :span="8">
<el-checkbox v-model="articleForm.isRecommend">推荐文章</el-checkbox>
<el-checkbox v-model="articleForm.resource.isRecommend">推荐文章</el-checkbox>
</el-col>
</el-row>
</el-form-item>
@@ -104,7 +104,7 @@
:as-dialog="true"
title="文章预览"
width="900px"
:article-data="articleForm"
:article-data="articleForm.resource"
:category-list="categoryList"
:show-edit-button="false"
@close="previewVisible = false"
@@ -132,7 +132,8 @@ import { RichTextComponent } from '@/components/text';
import { FileUpload } from '@/components/file';
import { ArticleShowView } from './index';
import { resourceCategoryApi, resourceTagApi, resourceApi } from '@/apis/resource';
import { Resource, ResourceCategory, Tag } from '@/types/resource';
import { ResourceVO, ResourceCategory, Tag } from '@/types/resource';
import { FILE_DOWNLOAD_URL } from '@/config';
const router = useRouter();
const route = useRoute();
@@ -153,30 +154,23 @@ const categoryLoading = ref(false);
const tagLoading = ref(false);
// 表单数据
const articleForm = ref<Resource>({
title: '',
content: '',
categoryID: '',
author: '',
source: '',
sourceUrl: '',
viewCount: 0,
coverImage: '',
tags: [] as Tag[],
allowComment: true,
isTop: false,
const articleForm = ref<ResourceVO>({
resource: {
},
category: {},
tags: [],
});
// 表单验证规则
const rules = {
title: [
'resource.title': [
{ required: true, message: '请输入文章标题', trigger: 'blur' },
{ min: 5, max: 100, message: '标题长度在 5 到 100 个字符', trigger: 'blur' }
],
categoryID: [
'resource.categoryID': [
{ required: true, message: '请选择文章分类', trigger: 'change' }
],
content: [
'resource.content': [
{ required: true, message: '请输入文章内容', trigger: 'blur' }
]
};
@@ -234,11 +228,13 @@ async function handlePublish() {
// TODO: 调用API发布文章
console.log('发布文章:', articleForm);
await new Promise(resolve => setTimeout(resolve, 1000));
ElMessage.success(isEdit.value ? '修改成功' : '发布成功');
router.push('/admin/manage/resource/articles');
resourceApi.createResource(articleForm.value).then(res => {
if (res.success) {
ElMessage.success('发布成功');
} else {
ElMessage.error(res.message || '发布失败');
}
});
} catch (error) {
console.error('发布失败:', error);
} finally {
@@ -267,8 +263,8 @@ async function handleSaveDraft() {
// 预览
function handlePreview() {
console.log(articleForm.value.content);
if (!articleForm.value.title) {
console.log(articleForm.value.resource.content);
if (!articleForm.value.resource.title) {
ElMessage.warning('请先输入文章标题');
return;
}
@@ -281,14 +277,14 @@ function handleCoverUploadSuccess(files: any[]) {
const file = files[0];
// 使用文件下载URL构建完整路径
import('@/config').then(config => {
articleForm.value.coverImage = config.FILE_DOWNLOAD_URL + file.id;
articleForm.value.resource.coverImage = config.FILE_DOWNLOAD_URL + file.id;
});
}
}
// 删除封面
function removeCover() {
articleForm.value.coverImage = '';
articleForm.value.resource.coverImage = '';
}

8
schoolNewsWeb/src/views/article/ArticleShowView.vue
View File

@@ -30,7 +30,7 @@
<!-- 封面图片 -->
<div v-if="articleData.coverImage" class="article-cover">
<img :src="articleData.coverImage" class="cover-image" />
<img :src="FILE_DOWNLOAD_URL + articleData.coverImage" class="cover-image" />
</div>
<!-- 文章内容 -->
@@ -66,7 +66,7 @@
<!-- 封面图片 -->
<div v-if="articleData.coverImage" class="article-cover">
<img :src="articleData.coverImage" class="cover-image" />
<img :src="FILE_DOWNLOAD_URL + articleData.coverImage" class="cover-image" />
</div>
<!-- 文章内容 -->
@@ -77,6 +77,8 @@
<script setup lang="ts">
import { computed } from 'vue';
import { ElDialog, ElButton } from 'element-plus';
import { FILE_DOWNLOAD_URL } from '@/config';
import { ResourceCategory } from '@/types/resource';
interface ArticleData {
title?: string;
@@ -94,7 +96,7 @@ interface Props {
title?: string; // Dialog 标题
width?: string; // Dialog 宽度
articleData?: ArticleData; // 文章数据
categoryList?: Array<{ id?: string; categoryID?: string; name?: string }>; // 分类列表
categoryList?: Array<ResourceCategory>; // 分类列表
showEditButton?: boolean; // 是否显示编辑按钮
}