编辑新闻页面功能已经基本实现，除了和租户关联的问题
This commit is contained in:
parent
ef793edd6b
commit
a1aee89ae7
@ -1,6 +1,16 @@
|
||||
<script setup>
|
||||
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 {
|
||||
AccessibilityHelp,
|
||||
Alignment,
|
||||
@ -45,6 +55,7 @@ import axios from "axios";
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
const token = ref('')
|
||||
const form = ref({
|
||||
token: '',
|
||||
title: '',
|
||||
@ -63,6 +74,9 @@ const uploadUrl = basePath + '/uploadPic'; // 上传的后端地址
|
||||
const dialogImageUrl = ref('');
|
||||
const dialogVisible = ref(false); // 用于图片放大预览
|
||||
|
||||
//下面是编辑模式需要的一些变量
|
||||
const id = ref('');
|
||||
|
||||
const beforeUpload = (file) => {
|
||||
// 检查文件类型是否为图片（png, jpg, 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 () => {
|
||||
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) {
|
||||
try {
|
||||
form.value.imagePath = fileList.value[0].url;
|
||||
await axios.post(basePath, form.value);
|
||||
const response = await axios.post(basePath, form.value);
|
||||
ElMessage.success('添加成功！');
|
||||
router.push('/news');
|
||||
} catch (e) {
|
||||
ElMessage.error('添加失败，请重试！');
|
||||
await ElMessageBox.alert(e.response.data.message);
|
||||
}
|
||||
|
||||
} else {
|
||||
try {
|
||||
const res = await axios.put(basePath, form.value);
|
||||
const response = await axios.put(`${basePath}/${id.value}`, form.value);
|
||||
ElMessage.success('修改成功！');
|
||||
router.push('/news');
|
||||
} 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 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(() => {
|
||||
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;
|
||||
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;
|
||||
modeTitle.value = '修改资讯';
|
||||
fetchNewsDetail();
|
||||
@ -335,12 +374,12 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<div class="form-container">
|
||||
<el-form :model="form" label-width="120px">
|
||||
<ElForm :model="form" label-width="120px" @submit.prevent="handleCommit">
|
||||
<h2>{{ modeTitle }}</h2>
|
||||
<el-form-item label="新闻标题">
|
||||
<el-input v-model="form.title" placeholder="请输入新闻标题"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="新闻图片路径">
|
||||
<ElFormItem label="新闻标题" required>
|
||||
<ElInput v-model="form.title" placeholder="请输入新闻标题" required></ElInput>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="新闻图片路径" required>
|
||||
<el-upload
|
||||
:action="uploadUrl"
|
||||
:limit="2"
|
||||
@ -352,6 +391,7 @@ onMounted(() => {
|
||||
list-type="picture-card"
|
||||
auto-upload
|
||||
v-model:file-list="fileList"
|
||||
required
|
||||
>
|
||||
<template #file="{ file }">
|
||||
<div>
|
||||
@ -382,8 +422,8 @@ onMounted(() => {
|
||||
<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="新闻内容">
|
||||
</ElFormItem>
|
||||
<ElFormItem label="新闻内容" required>
|
||||
<div class="editor-container editor-container_classic-editor editor-container_include-style"
|
||||
ref="editorContainerElement">
|
||||
<div class="editor-container__editor">
|
||||
@ -392,25 +432,25 @@ onMounted(() => {
|
||||
</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="handleCommit">确定</el-button>
|
||||
<el-button>取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="作者" required>
|
||||
<ElInput v-model="form.author" placeholder="请输入作者" required></ElInput>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="新闻简介" required>
|
||||
<ElInput v-model="form.summary" placeholder="请输入新闻简介" required></ElInput>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="选择租户" required>
|
||||
<ElSelect v-model="form.tenant" placeholder="请选择" class="dynamic-width-select">
|
||||
<ElOption label="Option 1" value="option1"></ElOption>
|
||||
<ElOption label="Option 2" value="option2"></ElOption>
|
||||
<ElOption label="Option 3" value="option3"></ElOption>
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
<ElFormItem>
|
||||
<ElButton type="primary" native-type="submit">确定</ElButton>
|
||||
<ElButton @click="router.push('/news')">取消</ElButton>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="dialogVisible" class="image-preview">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user