web-学习

schoolNewsWeb/src/views/admin/manage/resource/ArticleManagementView.vue

@@ -24,9 +24,16 @@
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="操作" width="200" fixed="right">
+      <el-table-column label="操作" width="250" fixed="right">
         <template #default="{ row }">
           <el-button size="small" @click="viewArticle(row)">查看</el-button>
+          <el-button 
+            size="small" 
+            :type="getActionButtonType(row.status)"
+            @click="changeArticleStatus(row)"
+          >
+            {{ getActionButtonText(row.status) }}
+          </el-button>
           <el-button size="small" @click="editArticle(row)">编辑</el-button>
           <el-button size="small" type="danger" @click="deleteArticle()">删除</el-button>
         </template>
@@ -64,6 +71,7 @@ import { useRouter } from 'vue-router';
 import { resourceApi, resourceCategoryApi } from '@/apis/resource'
 import type { PageParam, ResourceSearchParams, Resource, ResourceCategory } from '@/types';
 import { ArticleShowView } from '@/views/article';
+import { ArticleStatus } from '@/types/enums';
 
 const router = useRouter();
 const searchKeyword = ref('');
@@ -100,7 +108,7 @@ async function loadArticles() {
   const res = await resourceApi.getResourcePage(pageParam.value, filter.value);
   if (res.success) {
     articles.value = res.pageDomain?.dataList || [];
-    total.value = res.pageDomain?.total || 0;
+    total.value = res.pageDomain?.pageParam.totalElements || 0;
   }
 }
 
@@ -145,6 +153,34 @@ function editArticle(row: any) {
   router.push('/article/add?id=' + row.resourceID);
 }
 
+async function changeArticleStatus(row: Resource) {
+  try {
+    // status: 0-草稿, 1-已发布, 2-已下架
+    if (row.status === ArticleStatus.DRAFT || row.status === ArticleStatus.OFFLINE) {
+      // 草稿或下架状态 -> 发布
+      const res = await resourceApi.publishResource(row.resourceID!);
+      if (res.success) {
+        ElMessage.success('发布成功');
+        loadArticles();
+      } else {
+        ElMessage.error('发布失败');
+      }
+    } else if (row.status === ArticleStatus.PUBLISHED) {
+      // 已发布状态 -> 下架
+      const res = await resourceApi.unpublishResource(row.resourceID!);
+      if (res.success) {
+        ElMessage.success('下架成功');
+        loadArticles();
+      } else {
+        ElMessage.error('下架失败');
+      }
+    }
+  } catch (error) {
+    console.error('操作失败:', error);
+    ElMessage.error('操作失败');
+  }
+}
+
 function handleEditFromView() {
   if (currentArticle.value?.resourceID) {
     showViewDialog.value = false;
@@ -157,22 +193,42 @@ function deleteArticle() {
   ElMessage.info('删除功能开发中');
 }
 
-function getStatusType(status: string) {
-  const typeMap: Record<string, any> = {
-    'published': 'success',
-    'draft': 'info',
-    'pending': 'warning'
+function getStatusType(status: number) {
+  const typeMap: Record<number, any> = {
+    [ArticleStatus.DRAFT]: 'info',
+    [ArticleStatus.PUBLISHED]: 'success',
+    [ArticleStatus.OFFLINE]: 'warning'
   };
   return typeMap[status] || 'info';
 }
 
-function getStatusText(status: string) {
-  const textMap: Record<string, string> = {
-    'published': '已发布',
-    'draft': '草稿',
-    'pending': '待审核'
+function getStatusText(status: number) {
+  const textMap: Record<number, string> = {
+    [ArticleStatus.DRAFT]: '草稿',
+    [ArticleStatus.PUBLISHED]: '已发布',
+    [ArticleStatus.OFFLINE]: '已下架'
   };
-  return textMap[status] || status;
+  return textMap[status] || '未知';
+}
+
+function getActionButtonType(status: number) {
+  // 草稿或下架状态显示主要按钮(发布), 已发布状态显示警告按钮(下架)
+  if (status === ArticleStatus.DRAFT || status === ArticleStatus.OFFLINE) {
+    return 'primary';
+  } else if (status === ArticleStatus.PUBLISHED) {
+    return 'warning';
+  }
+  return '';
+}
+
+function getActionButtonText(status: number) {
+  // 草稿或下架状态显示"发布", 已发布状态显示"下架"
+  if (status === ArticleStatus.DRAFT || status === ArticleStatus.OFFLINE) {
+    return '发布';
+  } else if (status === ArticleStatus.PUBLISHED) {
+    return '下架';
+  }
+  return '操作';
 }
 
 function handleSizeChange(val: number) {