创建了新增+修改二合一页面，写完了新增相关代码，待测试
This commit is contained in:
parent
e88d034f4a
commit
06cada8109
483
src/views/news-management/EditNews.vue
Normal file
483
src/views/news-management/EditNews.vue
Normal file
@ -0,0 +1,483 @@
|
||||
<script setup>
|
||||
import {onMounted, ref} from 'vue';
|
||||
import {ElButton, ElForm, ElFormItem, ElInput, ElMessage, ElOption, ElSelect, ElUpload} from 'element-plus';
|
||||
import {
|
||||
AccessibilityHelp,
|
||||
Alignment,
|
||||
Autoformat,
|
||||
AutoLink,
|
||||
Autosave,
|
||||
BalloonToolbar,
|
||||
BlockQuote,
|
||||
Bold,
|
||||
ClassicEditor,
|
||||
CodeBlock,
|
||||
Essentials,
|
||||
FindAndReplace,
|
||||
GeneralHtmlSupport,
|
||||
Heading,
|
||||
HorizontalLine,
|
||||
Indent,
|
||||
IndentBlock,
|
||||
Italic,
|
||||
Link,
|
||||
Paragraph,
|
||||
SelectAll,
|
||||
Style,
|
||||
Table,
|
||||
TableCaption,
|
||||
TableCellProperties,
|
||||
TableColumnResize,
|
||||
TableProperties,
|
||||
TableToolbar,
|
||||
TextTransformation,
|
||||
Undo
|
||||
} from 'ckeditor5';
|
||||
|
||||
import translations from 'ckeditor5/translations/zh-cn.js';
|
||||
|
||||
import 'ckeditor5/ckeditor5.css';
|
||||
import {Delete, Plus, Refresh, ZoomIn} from "@element-plus/icons-vue";
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
import axios from "axios";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const form = ref({
|
||||
title: '',
|
||||
author: '',
|
||||
content: '',
|
||||
summary: '',
|
||||
tenant: '',
|
||||
imagePath: ''
|
||||
});
|
||||
const createMode = ref(false);
|
||||
const modeTitle = ref('');
|
||||
|
||||
const fileList = ref([]); // 用于存储上传文件的列表
|
||||
const basePath = '/api/news'
|
||||
const uploadUrl = basePath + '/uploadPic'; // 上传的后端地址
|
||||
const dialogImageUrl = ref('');
|
||||
const dialogVisible = ref(false); // 用于图片放大预览
|
||||
|
||||
const beforeUpload = (file) => {
|
||||
// 检查文件类型是否为图片（png, jpg, jpeg）
|
||||
const isImage = file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/jpeg';
|
||||
if (!isImage) {
|
||||
ElMessage.error('只能上传 png/jpg/jpeg 格式的图片文件！');
|
||||
return false;
|
||||
}
|
||||
|
||||
// 检查文件大小是否超过 5MB
|
||||
const isLt5M = file.size / 1024 / 1024 < 5;
|
||||
if (!isLt5M) {
|
||||
ElMessage.error('上传文件大小不能超过 5MB！');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const handleSuccess = (response, file, fileList) => {
|
||||
file.url = response.url;
|
||||
};
|
||||
|
||||
const handleError = (error, file, fileList) => {
|
||||
ElMessage.error('图片上传失败，请重试！');
|
||||
};
|
||||
|
||||
const handleChange = (file, fileList) => {
|
||||
// 处理文件选择变化时的逻辑，确保只选择最新上传的文件
|
||||
if (fileList.length > 1) {
|
||||
fileList.splice(0, fileList.length - 1)
|
||||
}
|
||||
};
|
||||
|
||||
const handlePictureCardPreview = (file) => {
|
||||
dialogImageUrl.value = file.url
|
||||
dialogVisible.value = true
|
||||
}
|
||||
const handleRemove = (file) => {
|
||||
fileList.value = fileList.value.filter((item) => item.uid !== file.uid);
|
||||
console.log(file)
|
||||
}
|
||||
|
||||
const handleCommit = async () => {
|
||||
if (createMode.value) {
|
||||
try {
|
||||
form.value.imagePath = fileList.value[0].url;
|
||||
await axios.post(basePath, form.value);
|
||||
ElMessage.success('添加成功！');
|
||||
router.push('/news');
|
||||
} catch (e) {
|
||||
ElMessage.error('添加失败，请重试！');
|
||||
}
|
||||
|
||||
} else {
|
||||
try {
|
||||
const res = await axios.put(basePath, form.value);
|
||||
ElMessage.success('修改成功！');
|
||||
router.push('/news');
|
||||
} catch (e) {
|
||||
ElMessage.error('修改失败，请重试！');
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
const isLayoutReady = ref(false);
|
||||
const config = ref(null); // CKEditor needs the DOM tree before calculating the configuration.
|
||||
const editor = ClassicEditor;
|
||||
|
||||
onMounted(() => {
|
||||
if (route.query.mode === 'create') {
|
||||
createMode.value = true;
|
||||
modeTitle.value = '添加资讯';
|
||||
}
|
||||
if (route.query.mode === 'edit') {
|
||||
createMode.value = false;
|
||||
modeTitle.value = '修改资讯';
|
||||
fetchNewsDetail();
|
||||
}
|
||||
|
||||
config.value = {
|
||||
toolbar: {
|
||||
items: [
|
||||
'undo',
|
||||
'redo',
|
||||
'|',
|
||||
'heading',
|
||||
'style',
|
||||
'|',
|
||||
'bold',
|
||||
'italic',
|
||||
'|',
|
||||
'link',
|
||||
'insertTable',
|
||||
'blockQuote',
|
||||
'codeBlock',
|
||||
'|',
|
||||
'alignment',
|
||||
'|',
|
||||
'indent',
|
||||
'outdent'
|
||||
],
|
||||
shouldNotGroupWhenFull: false
|
||||
},
|
||||
plugins: [
|
||||
AccessibilityHelp,
|
||||
Alignment,
|
||||
Autoformat,
|
||||
AutoLink,
|
||||
Autosave,
|
||||
BalloonToolbar,
|
||||
BlockQuote,
|
||||
Bold,
|
||||
CodeBlock,
|
||||
Essentials,
|
||||
FindAndReplace,
|
||||
GeneralHtmlSupport,
|
||||
Heading,
|
||||
HorizontalLine,
|
||||
Indent,
|
||||
IndentBlock,
|
||||
Italic,
|
||||
Link,
|
||||
Paragraph,
|
||||
SelectAll,
|
||||
Style,
|
||||
Table,
|
||||
TableCaption,
|
||||
TableCellProperties,
|
||||
TableColumnResize,
|
||||
TableProperties,
|
||||
TableToolbar,
|
||||
TextTransformation,
|
||||
Undo
|
||||
],
|
||||
balloonToolbar: ['bold', 'italic', '|', 'link'],
|
||||
heading: {
|
||||
options: [
|
||||
{
|
||||
model: 'paragraph',
|
||||
title: 'Paragraph',
|
||||
class: 'ck-heading_paragraph'
|
||||
},
|
||||
{
|
||||
model: 'heading1',
|
||||
view: 'h1',
|
||||
title: 'Heading 1',
|
||||
class: 'ck-heading_heading1'
|
||||
},
|
||||
{
|
||||
model: 'heading2',
|
||||
view: 'h2',
|
||||
title: 'Heading 2',
|
||||
class: 'ck-heading_heading2'
|
||||
},
|
||||
{
|
||||
model: 'heading3',
|
||||
view: 'h3',
|
||||
title: 'Heading 3',
|
||||
class: 'ck-heading_heading3'
|
||||
},
|
||||
{
|
||||
model: 'heading4',
|
||||
view: 'h4',
|
||||
title: 'Heading 4',
|
||||
class: 'ck-heading_heading4'
|
||||
},
|
||||
{
|
||||
model: 'heading5',
|
||||
view: 'h5',
|
||||
title: 'Heading 5',
|
||||
class: 'ck-heading_heading5'
|
||||
},
|
||||
{
|
||||
model: 'heading6',
|
||||
view: 'h6',
|
||||
title: 'Heading 6',
|
||||
class: 'ck-heading_heading6'
|
||||
}
|
||||
]
|
||||
},
|
||||
htmlSupport: {
|
||||
allow: [
|
||||
{
|
||||
name: /^.*$/,
|
||||
styles: true,
|
||||
attributes: true,
|
||||
classes: true
|
||||
}
|
||||
]
|
||||
},
|
||||
initialData: '',
|
||||
language: 'zh-cn',
|
||||
link: {
|
||||
addTargetToExternalLinks: true,
|
||||
defaultProtocol: 'https://',
|
||||
decorators: {
|
||||
toggleDownloadable: {
|
||||
mode: 'manual',
|
||||
label: 'Downloadable',
|
||||
attributes: {
|
||||
download: 'file'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
menuBar: {
|
||||
isVisible: true
|
||||
},
|
||||
placeholder: '请在此处输入你的文章',
|
||||
style: {
|
||||
definitions: [
|
||||
{
|
||||
name: 'Article category',
|
||||
element: 'h3',
|
||||
classes: ['category']
|
||||
},
|
||||
{
|
||||
name: 'Title',
|
||||
element: 'h2',
|
||||
classes: ['document-title']
|
||||
},
|
||||
{
|
||||
name: 'Subtitle',
|
||||
element: 'h3',
|
||||
classes: ['document-subtitle']
|
||||
},
|
||||
{
|
||||
name: 'Info box',
|
||||
element: 'p',
|
||||
classes: ['info-box']
|
||||
},
|
||||
{
|
||||
name: 'Side quote',
|
||||
element: 'blockquote',
|
||||
classes: ['side-quote']
|
||||
},
|
||||
{
|
||||
name: 'Marker',
|
||||
element: 'span',
|
||||
classes: ['marker']
|
||||
},
|
||||
{
|
||||
name: 'Spoiler',
|
||||
element: 'span',
|
||||
classes: ['spoiler']
|
||||
},
|
||||
{
|
||||
name: 'Code (dark)',
|
||||
element: 'pre',
|
||||
classes: ['fancy-code', 'fancy-code-dark']
|
||||
},
|
||||
{
|
||||
name: 'Code (bright)',
|
||||
element: 'pre',
|
||||
classes: ['fancy-code', 'fancy-code-bright']
|
||||
}
|
||||
]
|
||||
},
|
||||
table: {
|
||||
contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties']
|
||||
},
|
||||
translations: [translations]
|
||||
};
|
||||
|
||||
isLayoutReady.value = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="form-container">
|
||||
<el-form :model="form" label-width="120px">
|
||||
<h2>{{ modeTitle }}</h2>
|
||||
<el-form-item label="新闻标题">
|
||||
<el-input v-model="form.title" placeholder="请输入新闻标题"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="新闻图片路径">
|
||||
<el-upload
|
||||
:action="uploadUrl"
|
||||
:limit="2"
|
||||
:before-upload="beforeUpload"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:on-change="handleChange"
|
||||
:file-list="fileList"
|
||||
list-type="picture-card"
|
||||
auto-upload
|
||||
v-model:file-list="fileList"
|
||||
>
|
||||
<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
|
||||
class="el-upload-list__item-delete"
|
||||
@click="handleRemove(file)"
|
||||
>
|
||||
<el-icon><Delete/></el-icon>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-icon v-if="fileList.length === 0">
|
||||
<Plus/>
|
||||
</el-icon>
|
||||
<el-icon v-else>
|
||||
<Refresh/>
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
<div class="tip">
|
||||
请上传大小不超过 <span style="color: red;">5MB</span> 格式为 <span style="color: red;">png/jpg/jpeg</span> 的文件
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="新闻内容">
|
||||
<div class="editor-container editor-container_classic-editor editor-container_include-style"
|
||||
ref="editorContainerElement">
|
||||
<div class="editor-container__editor">
|
||||
<div ref="editorElement">
|
||||
<ckeditor v-if="isLayoutReady" v-model="form.content" :editor="editor" :config="config"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="作者">
|
||||
<el-input v-model="form.author" placeholder="请输入作者"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="新闻简介">
|
||||
<el-input v-model="form.summary" placeholder="请输入新闻简介"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="选择租户">
|
||||
<el-select v-model="form.tenant" placeholder="请选择" class="dynamic-width-select">
|
||||
<el-option label="Option 1" value="option1"></el-option>
|
||||
<el-option label="Option 2" value="option2"></el-option>
|
||||
<el-option label="Option 3" value="option3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
||||
<el-button>取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="dialogVisible" class="image-preview">
|
||||
<img w-full :src="dialogImageUrl" alt="Preview Image"/>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.form-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background: white;
|
||||
overflow-y: auto; /* 使容器在内容溢出时出现滚动条 */
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image-preview img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.tip {
|
||||
margin-top: 8px;
|
||||
color: #727272;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-form {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
width: 55%;
|
||||
max-height: 90vh; /* 确保表单不会超过视口高度 */
|
||||
overflow-y: auto; /* 使表单在内容溢出时出现滚动条 */
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 1rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-form-item label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.el-input,
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-button--primary:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.dynamic-width-select {
|
||||
min-width: 30%;
|
||||
max-width: 100%;
|
||||
width: auto; /* 使宽度根据内容调整 */
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user