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

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

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="success" @click="router.push('/news/edit?mode=create')">新增</el-button>
-      <el-button type="warning">修改</el-button>
+      <el-button type="warning" @click="handleEditButton">修改</el-button>
-      <el-button type="danger">删除</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="handleEditInTable(scope.$index)" type="text">修改</el-button>
-          <el-button @click="handleDelete(scope.$index)" type="text">删除</el-button>
+          <el-button @click="handleDeleteInTable(scope.$index)" type="text">删除</el-button>
         </template>
       </el-table-column>
     </el-table>