新闻列表页面半成品，搜索待完成。

上方4按钮待完成。
权限问题。。。

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 },
+    { path: '/news/edit', component: EditNews, name: 'editNews' },
     // { path: '/news/:id', component: NewsDetail },
     // { path: '/news/:id/edit', component: NewsEdit }
 ]

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">

src/views/news-management/NewsList.vue

@@ -1,8 +1,12 @@
 <script setup>
 import {onMounted, ref} from 'vue';
-import {ElButton, ElForm, ElFormItem, ElInput, ElPagination, ElTable, ElTableColumn} from 'element-plus';
+import {ElButton, ElForm, ElFormItem, ElInput, ElMessage, 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']
@@ -20,9 +24,11 @@ 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,
@@ -39,7 +45,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(() => {
@@ -60,13 +66,37 @@ const handleReset = () => {
   sortOrder.value = '';
 };
 
-const handleEdit = (index) => {
-  // 编辑逻辑
+const handleEditButton = () => {
+  //读取每一个selection中的选项id并新建标签页分别跳转打开编辑页面
+  selections.value.forEach(selection => {
+    // TODO：待修改
+    router.push({name: 'EditNews', params: {id: selection.id}})
+  })
 };
 
-const handleDelete = (index) => {
+const handleDeleteButton = () => {
   // 删除逻辑
 };
+
+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>
@@ -98,21 +128,22 @@ const handleDelete = (index) => {
     </div>
 
     <div class="button-container">
-      <el-button type="success">新增</el-button>
-      <el-button type="warning">修改</el-button>
-      <el-button type="danger">删除</el-button>
+      <el-button type="success" @click="router.push('/news/edit?mode=create')">新增</el-button>
+      <el-button type="warning" @click="handleEditButton">修改</el-button>
+      <el-button type="danger" @click="handleDeleteButton">删除</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="handleEdit(scope.$index)" type="text">修改</el-button>
-          <el-button @click="handleDelete(scope.$index)" type="text">删除</el-button>
+          <el-button @click="handleEditInTable(scope.$index)" type="text">修改</el-button>
+          <el-button @click="handleDeleteInTable(scope.$index)" type="text">删除</el-button>
         </template>
       </el-table-column>
     </el-table>