完成了页面嵌入适配，列表上方的创建、修改、删除

NewsList和EditNews之间的数据传递
完全是巨大的工程

src/views/news-management/EditNews.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {onMounted, ref} from 'vue';
+import {defineEmits, defineProps, onMounted, ref} from 'vue';
 import {
   ElButton,
   ElForm,
@@ -66,6 +66,7 @@ const form = ref({
   imagePath: ''
 });
 const createMode = ref(false);
+const componentMode = ref(false);
 const modeTitle = ref('');
 
 const fileList = ref([]); // 用于存储上传文件的列表
@@ -73,6 +74,22 @@ const basePath = '/api/news'
 const uploadUrl = basePath + '/uploadPic'; // 上传的后端地址
 const dialogImageUrl = ref('');
 const dialogVisible = ref(false);  // 用于图片放大预览
+const props = defineProps({
+  mode: {
+    type: String,
+    required: false
+  },
+  id: {
+    type: String,
+    required: false
+  }
+});
+const containerStyle = ref('form-container')
+
+const emit = defineEmits(['setNewsDialogInvisible']);
+const setNewsDialogInvisible = (changed) => {
+  emit('setNewsDialogInvisible', changed);
+};
 
 //下面是编辑模式需要的一些变量
 const id = ref('');
@@ -121,8 +138,7 @@ const handleRemove = (file) => {
 
 const handleCommit = async () => {
   // 判断form中的每一个字段都不为空字符串且不为null
-  if (form.value.title === '' || form.value.author === '' || form.value.content === '' || form.value.summary === '' || form.value.tenant === '')
+  if (form.value.title === '' || form.value.author === '' || form.value.content === '' || form.value.summary === '' || form.value.tenant === '') {
-  {
     await ElMessageBox.alert('请填写完整信息！');
     return;
   }
@@ -135,7 +151,12 @@ const handleCommit = async () => {
     try {
       const response = await axios.post(basePath, form.value);
       ElMessage.success('添加成功！');
+      if (componentMode){
+        setNewsDialogInvisible(true);
+      }
+      else{
         router.push('/news');
+      }
     } catch (e) {
       await ElMessageBox.alert(e.response.data.message);
     }
@@ -143,7 +164,12 @@ const handleCommit = async () => {
     try {
       const response = await axios.put(`${basePath}/${id.value}`, form.value);
       ElMessage.success('修改成功！');
+      if (componentMode){
+        setNewsDialogInvisible(true);
+      }
+      else{
         router.push('/news');
+      }
     } catch (e) {
       await ElMessageBox.alert(e.response.data.message);
     }
@@ -151,6 +177,15 @@ const handleCommit = async () => {
   }
 };
 
+const handleCancel = () => {
+  if (componentMode){
+    setNewsDialogInvisible(false);
+  }
+  else{
+    router.push('/news');
+  }
+};
+
 const isLayoutReady = ref(false);
 const config = ref(null); // CKEditor needs the DOM tree before calculating the configuration.
 const editor = ClassicEditor;
@@ -172,11 +207,24 @@ const fetchNewsDetail = async () => {
 onMounted(() => {
   token.value = store.getters['authentication/token'];
   form.value.token = token.value;
-  if (route.query.mode === 'create' || route.params.mode === 'create') {
+  if (props.mode !== undefined){
+    componentMode.value = true;
+    containerStyle.value = 'form-container-component'
+    if (props.mode === 'create'){
       createMode.value = true;
       modeTitle.value = '添加资讯';
     }
-  if (route.query.mode === 'edit' || route.params.mode === 'edit') {
+    else if (props.mode === 'edit'){
+      createMode.value = false;
+      id.value = props.id;
+      modeTitle.value = '修改资讯';
+      fetchNewsDetail();
+    }
+  }
+  else if (route.query.mode === 'create' || route.params.mode === 'create') {
+    createMode.value = true;
+    modeTitle.value = '添加资讯';
+  } else 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 = '修改资讯';
@@ -373,7 +421,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="form-container">
+  <div :class="containerStyle">
     <ElForm :model="form" label-width="120px" @submit.prevent="handleCommit">
       <h2>{{ modeTitle }}</h2>
       <ElFormItem label="新闻标题" required>
@@ -448,7 +496,7 @@ onMounted(() => {
       </ElFormItem>
       <ElFormItem>
         <ElButton type="primary" native-type="submit">确定</ElButton>
-        <ElButton @click="router.push('/news')">取消</ElButton>
+        <ElButton @click="handleCancel">取消</ElButton>
       </ElFormItem>
     </ElForm>
   </div>
@@ -524,4 +572,23 @@ onMounted(() => {
   max-width: 100%;
   width: auto; /* 使宽度根据内容调整 */
 }
+
+.form-container-component {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: auto;
+  background: white;
+  overflow-y: auto; /* 使容器在内容溢出时出现滚动条 */
+}
+
+.form-container-component .el-form {
+  background: white;
+  padding: 2rem;
+
+  width: 100%;
+  height: 100%;
+  max-height: 90vh; /* 确保表单不会超过视口高度 */
+  overflow-y: auto; /* 使表单在内容溢出时出现滚动条 */
+}
 </style>

src/views/news-management/NewsList.vue

@@ -1,9 +1,20 @@
 <script setup>
 import {onMounted, ref} from 'vue';
-import {ElButton, ElForm, ElFormItem, ElInput, ElMessage, ElPagination, ElTable, ElTableColumn} from 'element-plus';
+import {
+  ElButton,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessage,
+  ElMessageBox,
+  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();
 
@@ -25,6 +36,10 @@ const newsCount = ref(0);
 const firstTimeLoad = ref(true);
 
 const selections = ref([]);
+
+const editNewsDialogVisible = ref(false);
+const editNewsDialogMode = ref('create');
+const editId = 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)
@@ -38,6 +53,7 @@ const loadNews = async () => {
       const data = response.data
       newsCount.value = data.newsCount;
       allNewsData.value.push(...data.newsList);
+      ElMessage.success('列表已刷新');
     } catch (e) {
       console.log(e)
     }
@@ -65,7 +81,18 @@ const handleReset = () => {
   sortOrder.value = '';
 };
 
+const handleCreateButton = () => {
+  editNewsDialogMode.value = 'create'
+  openEditNewsDialog()
+};
+
 const handleEditButton = () => {
+  if (selections.value.length === 1) {
+    editNewsDialogMode.value = 'edit'
+    editId.value = selections.value[0].id
+    openEditNewsDialog()
+    return
+  }
   //读取每一个selection中的选项id并新建标签页分别跳转打开编辑页面
   selections.value.forEach(selection => {
     const url = router.resolve({name: 'editNews', query: {mode: 'edit', id: selection.id}}).href;
@@ -73,16 +100,48 @@ const handleEditButton = () => {
   });
 };
 
+// 删除按钮的处理方法
 const handleDeleteButton = () => {
-  // 删除逻辑
+  if (selections.value.length === 0) {
+    ElMessage.warning('请选择要删除的资讯');
+    return;
+  }
+
+  ElMessageBox.confirm(
+      `你是否确认要删除<span style="color: red; ">${selections.value.length}</span>条资讯`,
+      '警告',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }
+  ).then(async () => {
+    try {
+      for (const selection of selections.value) {
+        await axios.delete(`/api/news/${selection.id}`, {params: {token: token}});
+      }
+      ElMessage.success('删除成功');
+      // 刷新列表
+      await refreshNewsList()
+    } catch (e) {
+      ElMessage.error('删除失败');
+      console.error(e);
+    }
+  }).catch(() => {
+    ElMessage.info('已取消删除');
+  });
 };
 
 const handleSelectionChange = (newSelections) => {
   selections.value = newSelections
 }
 
-const handleEditInTable = (index) => {
+const handleEditInTable = async (index) => {
-  router.push({name: 'editNews', query: {mode: 'edit', id: newsData.value[index].id}})
+  // router.push({name: 'editNews', query: {mode: 'edit', id: newsData.value[index].id}})
+    editNewsDialogMode.value = 'edit'
+    editId.value = newsData.value[index].id
+    openEditNewsDialog()
 };
 
 const handleDeleteInTable = async (index) => {
@@ -96,6 +155,25 @@ const handleDeleteInTable = async (index) => {
     console.error(e)
   }
 };
+const refreshNewsList = async () => {
+  newsData.value = [];
+  allNewsData.value = [];
+  newsCount.value = 0;
+  currentPage.value = 1;
+  firstTimeLoad.value = true;
+  await loadNews();
+};
+
+const openEditNewsDialog = () => {
+  editNewsDialogVisible.value = true;
+};
+
+const setNewsDialogInvisible = (changed) => {
+  editNewsDialogVisible.value = false;
+  if (changed){
+    refreshNewsList();
+  }
+}
 </script>
 
 <template>
@@ -127,7 +205,7 @@ 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" @click="handleCreateButton">新增</el-button>
       <el-button type="warning" @click="handleEditButton">修改</el-button>
       <el-button type="danger" @click="handleDeleteButton">删除</el-button>
       <el-button type="info">导出</el-button>
@@ -160,6 +238,14 @@ const handleDeleteInTable = async (index) => {
       </el-pagination>
     </div>
   </div>
+  <el-dialog
+      v-model="editNewsDialogVisible"
+      width="60%"
+      top="8vh"
+      destroy-on-close
+  >
+    <EditNews :mode="editNewsDialogMode" :id="editId" @setNewsDialogInvisible="setNewsDialogInvisible"/>
+  </el-dialog>
 </template>
 
 <style scoped>