删除导出

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('添加成功！');
-      router.push('/news');
+      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('修改成功！');
-      router.push('/news');
+      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 = '添加资讯';
+    }
+    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 = '添加资讯';
-  }
-  if (route.query.mode === 'edit' || route.params.mode === 'edit') {
+  } 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,11 +421,11 @@ 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>
-        <ElInput v-model="form.title" placeholder="请输入新闻标题"  required></ElInput>
+        <ElInput v-model="form.title" placeholder="请输入新闻标题" required></ElInput>
       </ElFormItem>
       <ElFormItem label="新闻图片路径" required>
         <el-upload
@@ -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,6 +1,16 @@
 <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";
@@ -26,7 +36,17 @@ const newsCount = ref(0);
 const firstTimeLoad = ref(true);
 
 const selections = ref([]);
+
+const editNewsDialogVisible = ref(false);
+const editNewsDialogMode = ref('create');
+const editId = ref("");
+
+const searchMode = ref(false);
 const loadNews = async () => {
+  if (searchMode.value) {
+    newsData.value = allNewsData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value);
+    return;
+  }
   if (firstTimeLoad.value || allNewsData.value.length < (currentPage.value * pageSize) && (currentPage.value * pageSize) <= newsCount) {
     // console.error(allNewsData.value.length, currentPage.value, pageSize.value, newsCount.value)
     let params = {
@@ -39,6 +59,7 @@ const loadNews = async () => {
       const data = response.data
       newsCount.value = data.newsCount;
       allNewsData.value.push(...data.newsList);
+      ElMessage.success('列表已刷新');
     } catch (e) {
       console.log(e)
     }
@@ -54,36 +75,102 @@ onMounted(() => {
 })
 
 
-const handleSearch = () => {
-  // 搜索逻辑
+const handleSearch = async () => {
+  const params = {
+    token: token,
+    title: searchTitle.value,
+    author: searchAuthor.value,
+    summary: searchSummary.value,
+    imagePath: searchPath.value
+  }
+
+  try {
+    const response = await axios.post('/api/news/search', params);
+    const data = response.data;
+    allNewsData.value = data.newsList;
+    newsCount.value = data.newsCount;
+    newsData.value = allNewsData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value);
+    searchMode.value = true;
+    ElMessage.success('搜索成功');
+  } catch (e) {
+    ElMessage.error('搜索失败');
+    console.error(e);
+  }
 };
 
-const handleReset = () => {
+
+const handleReset = async () => {
   searchTitle.value = '';
   searchPath.value = '';
   searchAuthor.value = '';
   searchSummary.value = '';
   sortOrder.value = '';
+
+  searchMode.value = false;
+  await refreshNewsList();
+};
+
+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 => {
-    // TODO：待修改
-    router.push({name: 'EditNews', params: {id: selection.id}})
-  })
+    const url = router.resolve({name: 'editNews', query: {mode: 'edit', id: selection.id}}).href;
+    window.open(url, '_blank');
+  });
 };
 
+// 删除按钮的处理方法
 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) => {
-  router.push({name: 'editNews', query: {mode: 'edit', id: newsData.value[index].id}})
+const handleEditInTable = async (index) => {
+  // 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) => {
@@ -97,6 +184,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>
@@ -128,10 +234,9 @@ 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>
     </div>
 
     <el-table :data="newsData" style="width: 100%;"
@@ -161,6 +266,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>