src/router/newsManagement.js

@@ -5,7 +5,7 @@ import EditNews from "@views/news-management/EditNews.vue";
 
 export default [
     { path: '/news', component: NewsList },
-    { path: '/news/edit', component: EditNews, name: 'editNews' },
+    { path: '/news/edit', component: EditNews },
     // { path: '/news/:id', component: NewsDetail },
     // { path: '/news/:id/edit', component: NewsEdit }
 ]

src/views/news-management/EditNews.vue

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

src/views/news-management/NewsList.vue

@@ -1,12 +1,8 @@
 <script setup>
 import {onMounted, ref} from 'vue';
-import {ElButton, ElForm, ElFormItem, ElInput, ElMessage, ElPagination, ElTable, ElTableColumn} from 'element-plus';
+import {ElButton, ElForm, ElFormItem, ElInput, ElPagination, ElTable, ElTableColumn} from 'element-plus';
 import axios from "axios";
 import {useStore} from "vuex";
-import {useRouter} from "vue-router";
-import EditNews from "@views/news-management/EditNews.vue";
-
-const router = useRouter();
 
 const store = useStore();
 const token = store.getters['authentication/token']
@@ -24,11 +20,9 @@ const currentPage = ref(1);
 const pageSize = ref(10);
 const newsCount = ref(0);
 const firstTimeLoad = ref(true);
-
-const selections = ref([]);
 const loadNews = async () => {
   if (firstTimeLoad.value || allNewsData.value.length < (currentPage.value * pageSize) && (currentPage.value * pageSize) <= newsCount) {
-    // console.error(allNewsData.value.length, currentPage.value, pageSize.value, newsCount.value)
+    console.error(allNewsData.value.length, currentPage.value, pageSize.value, newsCount.value)
     let params = {
       token: token,
       start: allNewsData.value.length,
@@ -45,7 +39,7 @@ const loadNews = async () => {
     firstTimeLoad.value = false;
   }
   newsData.value = allNewsData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
-  // console.error((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value, newsData.value);
+  console.error((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value, newsData.value);
 };
 
 onMounted(() => {
@@ -66,37 +60,13 @@ const handleReset = () => {
   sortOrder.value = '';
 };
 
-const handleEditButton = () => {
+const handleEdit = (index) => {
-  //读取每一个selection中的选项id并新建标签页分别跳转打开编辑页面
+  // 编辑逻辑
-  selections.value.forEach(selection => {
-    // TODO：待修改
-    router.push({name: 'EditNews', params: {id: selection.id}})
-  })
 };
 
-const handleDeleteButton = () => {
+const handleDelete = (index) => {
   // 删除逻辑
 };
-
-const handleSelectionChange = (newSelections) => {
-  selections.value = newSelections
-}
-
-const handleEditInTable = (index) => {
-  router.push({name: 'editNews', query: {mode: 'edit', id: newsData.value[index].id}})
-};
-
-const handleDeleteInTable = async (index) => {
-  try {
-    await axios.delete(`/api/news/${newsData.value[index].id}`, {params: {token: token,}})
-    newsData.value.splice(index, 1);
-    allNewsData.value.splice(index, 1);
-    newsCount.value--;
-  } catch (e) {
-    ElMessage.error('删除失败')
-    console.error(e)
-  }
-};
 </script>
 
 <template>
@@ -128,22 +98,21 @@ const handleDeleteInTable = async (index) => {
     </div>
 
     <div class="button-container">
-      <el-button type="success" @click="router.push('/news/edit?mode=create')">新增</el-button>
+      <el-button type="success">新增</el-button>
-      <el-button type="warning" @click="handleEditButton">修改</el-button>
+      <el-button type="warning">修改</el-button>
-      <el-button type="danger" @click="handleDeleteButton">删除</el-button>
+      <el-button type="danger">删除</el-button>
       <el-button type="info">导出</el-button>
     </div>
 
-    <el-table :data="newsData" style="width: 100%;"
+    <el-table :data="newsData" style="width: 100%;">
-              @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55"></el-table-column>
       <el-table-column prop="title" label="新闻标题" align="center"></el-table-column>
       <el-table-column prop="author" label="作者" align="center"></el-table-column>
       <el-table-column prop="summary" label="新闻简介" align="center"></el-table-column>
       <el-table-column label="操作" align="center">
         <template #default="scope">
-          <el-button @click="handleEditInTable(scope.$index)" type="text">修改</el-button>
+          <el-button @click="handleEdit(scope.$index)" type="text">修改</el-button>
-          <el-button @click="handleDeleteInTable(scope.$index)" type="text">删除</el-button>
+          <el-button @click="handleDelete(scope.$index)" type="text">删除</el-button>
         </template>
       </el-table-column>
     </el-table>