From a1aee89ae70c385636364a8ca54095c19e470b50 Mon Sep 17 00:00:00 2001
From: heshunme <heshunme@outlook.com>
Date: Thu, 4 Jul 2024 16:47:51 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BC=96=E8=BE=91=E6=96=B0=E9=97=BB=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=8A=9F=E8=83=BD=E5=B7=B2=E7=BB=8F=E5=9F=BA=E6=9C=AC?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0=EF=BC=8C=E9=99=A4=E4=BA=86=E5=92=8C=E7=A7=9F?=
 =?UTF-8?q?=E6=88=B7=E5=85=B3=E8=81=94=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/news-management/EditNews.vue | 112 +++++++++++++++++--------
 1 file changed, 76 insertions(+), 36 deletions(-)

diff --git a/src/views/news-management/EditNews.vue b/src/views/news-management/EditNews.vue
index 0130a25..899d9ea 100644
--- a/src/views/news-management/EditNews.vue
+++ b/src/views/news-management/EditNews.vue
@@ -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">