src/views/news-management/EditNews.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {defineEmits, defineProps, onMounted, ref} from 'vue';
+import {onMounted, ref} from 'vue';
 import {
   ElButton,
   ElForm,
@@ -66,7 +66,6 @@ const form = ref({
   imagePath: ''
 });
 const createMode = ref(false);
-const componentMode = ref(false);
 const modeTitle = ref('');
 
 const fileList = ref([]); // 用于存储上传文件的列表
@@ -74,22 +73,6 @@ 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('');
@@ -138,7 +121,8 @@ 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;
   }
@@ -151,12 +135,7 @@ 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);
     }
@@ -164,12 +143,7 @@ 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);
     }
@@ -177,15 +151,6 @@ 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;
@@ -207,24 +172,11 @@ const fetchNewsDetail = async () => {
 onMounted(() => {
   token.value = store.getters['authentication/token'];
   form.value.token = token.value;
-  if (props.mode !== undefined){
+  if (route.query.mode === 'create' || route.params.mode === 'create') {
-    componentMode.value = true;
-    containerStyle.value = 'form-container-component'
-    if (props.mode === 'create'){
     createMode.value = true;
     modeTitle.value = '添加资讯';
   }
-    else if (props.mode === 'edit'){
+  if (route.query.mode === 'edit' || route.params.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 = '修改资讯';
@@ -421,7 +373,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div :class="containerStyle">
+  <div class="form-container">
     <ElForm :model="form" label-width="120px" @submit.prevent="handleCommit">
       <h2>{{ modeTitle }}</h2>
       <ElFormItem label="新闻标题" required>
@@ -496,7 +448,7 @@ onMounted(() => {
       </ElFormItem>
       <ElFormItem>
         <ElButton type="primary" native-type="submit">确定</ElButton>
-        <ElButton @click="handleCancel">取消</ElButton>
+        <ElButton @click="router.push('/news')">取消</ElButton>
       </ElFormItem>
     </ElForm>
   </div>
@@ -572,23 +524,4 @@ 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,16 +1,6 @@
 <script setup>
 import {onMounted, ref} from 'vue';
-import {
+import {ElButton, ElForm, ElFormItem, ElInput, ElMessage, ElPagination, ElTable, ElTableColumn} from 'element-plus';
-  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";
@@ -36,17 +26,7 @@ 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 = {
@@ -59,7 +39,6 @@ const loadNews = async () => {
       const data = response.data
       newsCount.value = data.newsCount;
       allNewsData.value.push(...data.newsList);
-      ElMessage.success('列表已刷新');
     } catch (e) {
       console.log(e)
     }
@@ -75,102 +54,36 @@ onMounted(() => {
 })
 
 
-const handleSearch = async () => {
+const handleSearch = () => {
-  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 => {
-    const url = router.resolve({name: 'editNews', query: {mode: 'edit', id: selection.id}}).href;
+    // TODO：待修改
-    window.open(url, '_blank');
+    router.push({name: 'EditNews', params: {id: selection.id}})
-  });
+  })
 };
 
-// 删除按钮的处理方法
 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 = async (index) => {
+const handleEditInTable = (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) => {
@@ -184,25 +97,6 @@ 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>
@@ -234,9 +128,10 @@ const setNewsDialogInvisible = (changed) => {
     </div>
 
     <div class="button-container">
-      <el-button type="success" @click="handleCreateButton">新增</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%;"
@@ -266,14 +161,6 @@ const setNewsDialogInvisible = (changed) => {
       </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>