From f8c0d1066d39ade2c027989b0639261e487ecd28 Mon Sep 17 00:00:00 2001
From: heshunme <heshunme@outlook.com>
Date: Thu, 4 Jul 2024 18:02:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E9=97=BB=E5=88=97=E8=A1=A8=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=8D=8A=E6=88=90=E5=93=81=EF=BC=8C=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E5=BE=85=E5=AE=8C=E6=88=90=E3=80=82=20=E4=B8=8A=E6=96=B94?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=BE=85=E5=AE=8C=E6=88=90=E3=80=82=20?=
 =?UTF-8?q?=E6=9D=83=E9=99=90=E9=97=AE=E9=A2=98=E3=80=82=E3=80=82=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/news-management/NewsList.vue | 55 ++++++++++++++++++++------
 1 file changed, 43 insertions(+), 12 deletions(-)

diff --git a/src/views/news-management/NewsList.vue b/src/views/news-management/NewsList.vue
index 0ee9acd..9163c20 100644
--- a/src/views/news-management/NewsList.vue
+++ b/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>