400 lines
12 KiB
Vue
400 lines
12 KiB
Vue
<template>
|
||
<div class="article-add-view">
|
||
<div class="page-header">
|
||
<el-button @click="handleBack" :icon="ArrowLeft">返回</el-button>
|
||
<h1 class="page-title">{{ isEdit ? '编辑文章' : '创建文章' }}</h1>
|
||
</div>
|
||
|
||
<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>
|
||
|
||
<!-- 分类和标签 -->
|
||
<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-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="标签" prop="tags">
|
||
<el-select v-model="articleForm.tags" multiple placeholder="请选择标签" style="width: 100%" :loading="tagLoading">
|
||
<el-option
|
||
v-for="tag in tagList"
|
||
:key="tag.id || tag.tagID"
|
||
:label="tag.name"
|
||
:value="tag.id || tag.tagID || ''"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 封面图 -->
|
||
<el-form-item label="封面图片">
|
||
<!-- 上传区域 - 只在没有封面图片时显示 -->
|
||
<FileUpload
|
||
v-if="!articleForm.coverImage"
|
||
:as-dialog="false"
|
||
accept="image/*"
|
||
:max-size="2"
|
||
:multiple="false"
|
||
tip="建议尺寸：800x450px，支持jpg、png格式"
|
||
@success="handleCoverUploadSuccess"
|
||
/>
|
||
<!-- 封面预览 - 只在有封面图片时显示 -->
|
||
<div v-if="articleForm.coverImage" class="cover-preview">
|
||
<img :src="articleForm.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"
|
||
placeholder="请输入文章内容..." />
|
||
</el-form-item>
|
||
|
||
<!-- 发布设置 -->
|
||
<el-form-item label="发布设置">
|
||
<el-row :gutter="20">
|
||
<el-col :span="8">
|
||
<el-checkbox v-model="articleForm.allowComment">允许评论</el-checkbox>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-checkbox v-model="articleForm.isTop">置顶文章</el-checkbox>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-checkbox v-model="articleForm.isRecommend">推荐文章</el-checkbox>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form-item>
|
||
|
||
<!-- 操作按钮 -->
|
||
<el-form-item>
|
||
<el-button type="primary" @click="handlePublish" :loading="publishing">
|
||
{{ isEdit ? '保存修改' : '立即发布' }}
|
||
</el-button>
|
||
<el-button @click="handleSaveDraft" :loading="savingDraft">
|
||
保存草稿
|
||
</el-button>
|
||
<el-button @click="handlePreview">
|
||
预览
|
||
</el-button>
|
||
<el-button @click="handleBack">
|
||
取消
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
|
||
<!-- 文章预览组件 -->
|
||
<ArticleShowView
|
||
v-model="previewVisible"
|
||
:as-dialog="true"
|
||
title="文章预览"
|
||
width="900px"
|
||
:article-data="articleForm"
|
||
:category-list="categoryList"
|
||
:show-edit-button="false"
|
||
@close="previewVisible = false"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue';
|
||
import { useRouter, useRoute } from 'vue-router';
|
||
import {
|
||
ElForm,
|
||
ElFormItem,
|
||
ElInput,
|
||
ElSelect,
|
||
ElOption,
|
||
ElButton,
|
||
ElRow,
|
||
ElCol,
|
||
ElCheckbox,
|
||
ElMessage
|
||
} from 'element-plus';
|
||
import { ArrowLeft } from '@element-plus/icons-vue';
|
||
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';
|
||
|
||
const router = useRouter();
|
||
const route = useRoute();
|
||
|
||
const formRef = ref();
|
||
const editorRef = ref();
|
||
const publishing = ref(false);
|
||
const savingDraft = ref(false);
|
||
const previewVisible = ref(false);
|
||
|
||
// 是否编辑模式
|
||
const isEdit = ref(false);
|
||
|
||
// 数据状态
|
||
const categoryList = ref<ResourceCategory[]>([]);
|
||
const tagList = ref<Tag[]>([]);
|
||
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 rules = {
|
||
title: [
|
||
{ required: true, message: '请输入文章标题', trigger: 'blur' },
|
||
{ min: 5, max: 100, message: '标题长度在 5 到 100 个字符', trigger: 'blur' }
|
||
],
|
||
categoryID: [
|
||
{ required: true, message: '请选择文章分类', trigger: 'change' }
|
||
],
|
||
content: [
|
||
{ required: true, message: '请输入文章内容', trigger: 'blur' }
|
||
]
|
||
};
|
||
|
||
|
||
// 加载分类列表
|
||
async function loadCategoryList() {
|
||
try {
|
||
categoryLoading.value = true;
|
||
const result = await resourceCategoryApi.getCategoryList();
|
||
if (result.success) {
|
||
// 数组数据从 dataList 获取
|
||
categoryList.value = result.dataList || [];
|
||
} else {
|
||
ElMessage.error(result.message || '加载分类失败');
|
||
}
|
||
} catch (error) {
|
||
console.error('加载分类失败:', error);
|
||
ElMessage.error('加载分类失败');
|
||
} finally {
|
||
categoryLoading.value = false;
|
||
}
|
||
}
|
||
|
||
// 加载标签列表
|
||
async function loadTagList() {
|
||
try {
|
||
tagLoading.value = true;
|
||
const result = await resourceTagApi.getTagList();
|
||
if (result.success) {
|
||
// 数组数据从 dataList 获取
|
||
tagList.value = result.dataList || [];
|
||
} else {
|
||
ElMessage.error(result.message || '加载标签失败');
|
||
}
|
||
} catch (error) {
|
||
console.error('加载标签失败:', error);
|
||
ElMessage.error('加载标签失败');
|
||
} finally {
|
||
tagLoading.value = false;
|
||
}
|
||
}
|
||
|
||
// 返回
|
||
function handleBack() {
|
||
router.back();
|
||
}
|
||
|
||
// 发布文章
|
||
async function handlePublish() {
|
||
try {
|
||
await formRef.value?.validate();
|
||
|
||
publishing.value = true;
|
||
|
||
// TODO: 调用API发布文章
|
||
console.log('发布文章:', articleForm);
|
||
|
||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||
|
||
ElMessage.success(isEdit.value ? '修改成功' : '发布成功');
|
||
router.push('/admin/manage/resource/articles');
|
||
} catch (error) {
|
||
console.error('发布失败:', error);
|
||
} finally {
|
||
publishing.value = false;
|
||
}
|
||
}
|
||
|
||
// 保存草稿
|
||
async function handleSaveDraft() {
|
||
savingDraft.value = true;
|
||
|
||
try {
|
||
// TODO: 调用API保存草稿
|
||
console.log('保存草稿:', articleForm);
|
||
|
||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||
|
||
ElMessage.success('草稿已保存');
|
||
} catch (error) {
|
||
console.error('保存失败:', error);
|
||
ElMessage.error('保存失败');
|
||
} finally {
|
||
savingDraft.value = false;
|
||
}
|
||
}
|
||
|
||
// 预览
|
||
function handlePreview() {
|
||
console.log(articleForm.value.content);
|
||
if (!articleForm.value.title) {
|
||
ElMessage.warning('请先输入文章标题');
|
||
return;
|
||
}
|
||
previewVisible.value = true;
|
||
}
|
||
|
||
// 封面上传成功
|
||
function handleCoverUploadSuccess(files: any[]) {
|
||
if (files && files.length > 0) {
|
||
const file = files[0];
|
||
// 使用文件下载URL构建完整路径
|
||
import('@/config').then(config => {
|
||
articleForm.value.coverImage = config.FILE_DOWNLOAD_URL + file.id;
|
||
});
|
||
}
|
||
}
|
||
|
||
// 删除封面
|
||
function removeCover() {
|
||
articleForm.value.coverImage = '';
|
||
}
|
||
|
||
|
||
onMounted(async () => {
|
||
// 并行加载分类和标签数据
|
||
await Promise.all([
|
||
loadCategoryList(),
|
||
loadTagList()
|
||
]);
|
||
|
||
// 如果是编辑模式，加载文章数据
|
||
const id = route.query.id;
|
||
if (id) {
|
||
try {
|
||
isEdit.value = true;
|
||
const result = await resourceApi.getResourceById(id as string);
|
||
if (result.success && result.data) {
|
||
articleForm.value = result.data;
|
||
} else {
|
||
ElMessage.error(result.message || '加载文章失败');
|
||
}
|
||
} catch (error) {
|
||
console.error('加载文章失败:', error);
|
||
ElMessage.error('加载文章失败');
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.article-add-view {
|
||
min-height: 100vh;
|
||
background: #f5f7fa;
|
||
padding: 24px;
|
||
}
|
||
|
||
.page-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
margin-bottom: 24px;
|
||
|
||
.page-title {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
.article-form {
|
||
background: white;
|
||
border-radius: 8px;
|
||
padding: 32px;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.cover-uploader {
|
||
:deep(.el-upload) {
|
||
border: 1px dashed #d9d9d9;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: all 0.2s;
|
||
|
||
&:hover {
|
||
border-color: #409eff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.cover-uploader-icon {
|
||
font-size: 28px;
|
||
color: #8c939d;
|
||
width: 178px;
|
||
height: 178px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.cover {
|
||
width: 178px;
|
||
height: 178px;
|
||
display: block;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.upload-tip {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.cover-preview {
|
||
margin-top: 16px;
|
||
position: relative;
|
||
|
||
.cover {
|
||
width: 200px;
|
||
height: auto;
|
||
border-radius: 4px;
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
}
|
||
}
|
||
</style>
|