RyanGoodwill/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

编辑新闻页面功能已经基本实现，除了和租户关联的问题

Browse Source
This commit is contained in:
高子兴 2024-07-04 16:47:51 +08:00
parent ef793edd6b
commit a1aee89ae7
1 changed files with 76 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
src/views/news-management/EditNews.vue
View File

@ -1,6 +1,16 @@
<script setup> <script setup>
import {onMounted, ref} from 'vue'; import {onMounted, ref} from 'vue';
import {ElButton, ElForm, ElFormItem, ElInput, ElMessage, ElOption, ElSelect, ElUpload} from 'element-plus'; import {
ElButton,
ElForm,
ElFormItem,
ElInput,
ElMessage,
ElMessageBox,
ElOption,
ElSelect,
ElUpload
} from 'element-plus';
import { import {
AccessibilityHelp, AccessibilityHelp,
Alignment, Alignment,
@ -45,6 +55,7 @@ import axios from "axios";
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const store = useStore(); const store = useStore();
const token = ref('')
const form = ref({ const form = ref({
token: '', token: '',
title: '', title: '',
@ -63,6 +74,9 @@ const uploadUrl = basePath + '/uploadPic'; // 上传的后端地址
const dialogImageUrl = ref(''); const dialogImageUrl = ref('');
const dialogVisible = ref(false); // 用于图片放大预览 const dialogVisible = ref(false); // 用于图片放大预览
//下面是编辑模式需要的一些变量
const id = ref('');
const beforeUpload = (file) => { const beforeUpload = (file) => {
// 检查文件类型是否为图片（png, jpg, jpeg） // 检查文件类型是否为图片（png, jpg, jpeg）
const isImage = file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/jpeg'; const isImage = file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/jpeg';
@ -106,24 +120,32 @@ const handleRemove = (file) => {
} }
const handleCommit = async () => { const handleCommit = async () => {
form.value.token = store.getters['authentication/token']; // 判断form中的每一个字段都不为空字符串且不为null
if (form.value.title === '' || form.value.author === '' || form.value.content === '' || form.value.summary === '' || form.value.tenant === '')
{
await ElMessageBox.alert('请填写完整信息！');
return;
}
if (fileList.value.length === 0) {
await ElMessageBox.alert('请选择图片！');
return;
}
form.value.imagePath = fileList.value[0].url;
if (createMode.value) { if (createMode.value) {
try { try {
form.value.imagePath = fileList.value[0].url; const response = await axios.post(basePath, form.value);
await axios.post(basePath, form.value);
ElMessage.success('添加成功！'); ElMessage.success('添加成功！');
router.push('/news'); router.push('/news');
} catch (e) { } catch (e) {
ElMessage.error('添加失败，请重试！'); await ElMessageBox.alert(e.response.data.message);
} }
} else { } else {
try { try {
const res = await axios.put(basePath, form.value); const response = await axios.put(`${basePath}/${id.value}`, form.value);
ElMessage.success('修改成功！'); ElMessage.success('修改成功！');
router.push('/news'); router.push('/news');
} catch (e) { } catch (e) {
ElMessage.error('修改失败，请重试！'); await ElMessageBox.alert(e.response.data.message);
} }
} }
@ -133,12 +155,29 @@ const isLayoutReady = ref(false);
const config = ref(null); // CKEditor needs the DOM tree before calculating the configuration. const config = ref(null); // CKEditor needs the DOM tree before calculating the configuration.
const editor = ClassicEditor; const editor = ClassicEditor;
const fetchNewsDetail = async () => {
let params = {
token: token.value,
}
const res = await axios.get(basePath + '/' + id.value, {params});
form.value.title = res.data.title;
form.value.author = res.data.author;
form.value.content = res.data.content;
form.value.summary = res.data.summary;
form.value.tenant = res.data.tenant;
form.value.imagePath = res.data.imagePath;
fileList.value.push({url: res.data.imagePath});
}
onMounted(() => { onMounted(() => {
if (route.query.mode === 'create') { token.value = store.getters['authentication/token'];
form.value.token = token.value;
if (route.query.mode === 'create' || route.params.mode === 'create') {
createMode.value = true; createMode.value = true;
modeTitle.value = '添加资讯'; modeTitle.value = '添加资讯';
} }
if (route.query.mode === 'edit') { if (route.query.mode === 'edit' || route.params.mode === 'edit') {
id.value = route.params.id === undefined ? route.query.id : route.params.id;
createMode.value = false; createMode.value = false;
modeTitle.value = '修改资讯'; modeTitle.value = '修改资讯';
fetchNewsDetail(); fetchNewsDetail();
@ -335,12 +374,12 @@ onMounted(() => {
<template> <template>
<div class="form-container"> <div class="form-container">
<el-form :model="form" label-width="120px"> <ElForm :model="form" label-width="120px" @submit.prevent="handleCommit">
<h2>{{ modeTitle }}</h2> <h2>{{ modeTitle }}</h2>
<el-form-item label="新闻标题"> <ElFormItem label="新闻标题" required>
<el-input v-model="form.title" placeholder="请输入新闻标题"></el-input> <ElInput v-model="form.title" placeholder="请输入新闻标题" required></ElInput>
</el-form-item> </ElFormItem>
<el-form-item label="新闻图片路径"> <ElFormItem label="新闻图片路径" required>
<el-upload <el-upload
:action="uploadUrl" :action="uploadUrl"
:limit="2" :limit="2"
@ -352,6 +391,7 @@ onMounted(() => {
list-type="picture-card" list-type="picture-card"
auto-upload auto-upload
v-model:file-list="fileList" v-model:file-list="fileList"
required
> >
<template #file="{ file }"> <template #file="{ file }">
<div> <div>
@ -382,8 +422,8 @@ onMounted(() => {
<div class="tip"> <div class="tip">
请上传大小不超过 <span style="color: red;">5MB</span> 格式为 <span style="color: red;">png/jpg/jpeg</span> 的文件 请上传大小不超过 <span style="color: red;">5MB</span> 格式为 <span style="color: red;">png/jpg/jpeg</span> 的文件
</div> </div>
</el-form-item> </ElFormItem>
<el-form-item label="新闻内容"> <ElFormItem label="新闻内容" required>
<div class="editor-container editor-container_classic-editor editor-container_include-style" <div class="editor-container editor-container_classic-editor editor-container_include-style"
ref="editorContainerElement"> ref="editorContainerElement">
<div class="editor-container__editor"> <div class="editor-container__editor">
@ -392,25 +432,25 @@ onMounted(() => {
</div> </div>
</div> </div>
</div> </div>
</el-form-item> </ElFormItem>
<el-form-item label="作者"> <ElFormItem label="作者" required>
<el-input v-model="form.author" placeholder="请输入作者"></el-input> <ElInput v-model="form.author" placeholder="请输入作者" required></ElInput>
</el-form-item> </ElFormItem>
<el-form-item label="新闻简介"> <ElFormItem label="新闻简介" required>
<el-input v-model="form.summary" placeholder="请输入新闻简介"></el-input> <ElInput v-model="form.summary" placeholder="请输入新闻简介" required></ElInput>
</el-form-item> </ElFormItem>
<el-form-item label="选择租户"> <ElFormItem label="选择租户" required>
<el-select v-model="form.tenant" placeholder="请选择" class="dynamic-width-select"> <ElSelect v-model="form.tenant" placeholder="请选择" class="dynamic-width-select">
<el-option label="Option 1" value="option1"></el-option> <ElOption label="Option 1" value="option1"></ElOption>
<el-option label="Option 2" value="option2"></el-option> <ElOption label="Option 2" value="option2"></ElOption>
<el-option label="Option 3" value="option3"></el-option> <ElOption label="Option 3" value="option3"></ElOption>
</el-select> </ElSelect>
</el-form-item> </ElFormItem>
<el-form-item> <ElFormItem>
<el-button type="primary" @click="handleCommit">确定</el-button> <ElButton type="primary" native-type="submit">确定</ElButton>
<el-button>取消</el-button> <ElButton @click="router.push('/news')">取消</ElButton>
</el-form-item> </ElFormItem>
</el-form> </ElForm>
</div> </div>
<el-dialog v-model="dialogVisible" class="image-preview"> <el-dialog v-model="dialogVisible" class="image-preview">