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

<template>
  <div class="article-management">
    <div class="action-bar">
      <el-button type="primary" @click="showCreateDialog">+ 新增文章</el-button>
      <el-button @click="handleDataCollection">数据采集</el-button>
      <el-input 
        v-model="searchKeyword" 
        placeholder="搜索文章..."
        style="width: 300px"
        clearable
      />
    </div>

    <el-table :data="articles" style="width: 100%">
      <el-table-column prop="title" label="文章标题" min-width="200" />
      <el-table-column prop="category" label="分类" width="120" />
      <el-table-column prop="author" label="作者" width="120" />
      <el-table-column prop="publishTime" label="发布日期" width="120" />
      <el-table-column prop="views" label="阅读量" width="100" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <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>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="pageParam.pageNumber"
      v-model:page-size="pageParam.pageSize"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 文章查看弹窗 -->
    <ArticleShowView
      v-model="showViewDialog"
      :as-dialog="true"
      title="文章详情"
      width="900px"
      :article-data="currentArticle"
      :category-list="categoryList"
      :show-edit-button="true"
      @edit="handleEditFromView"
      @close="showViewDialog = false"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElButton, ElInput, ElTable, ElTableColumn, ElTag, ElPagination, ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { resourceApi, resourceTagApi } from '@/apis/resource'
import type { PageParam, ResourceSearchParams, Resource, Tag } from '@/types';
import { ArticleShowView } from '@/views/article';
import { ArticleStatus } from '@/types/enums';

const router = useRouter();
const searchKeyword = ref('');
const pageParam = ref<PageParam>({
  pageNumber: 1,
  pageSize: 10
});
const filter = ref<ResourceSearchParams>({
  keyword: searchKeyword.value
});
const total = ref<number>(0);
const articles = ref<Resource[]>([]);
const showViewDialog = ref(false);
const currentArticle = ref<any>(null);
const categoryList = ref<Tag[]>([]); // 改为使用Tag类型（tagType=1表示文章分类）

onMounted(() => {
  loadArticles();
  loadCategories();
});

async function loadCategories() {
  try {
    // 使用新的标签API获取文章分类标签（tagType=1）
    const res = await resourceTagApi.getTagsByType(1); // 1 = 文章分类标签
    if (res.success && res.dataList) {
      categoryList.value = res.dataList;
    }
  } catch (error) {
    console.error('加载分类列表失败:', error);
  }
}

async function loadArticles() {
  const res = await resourceApi.getResourcePage(pageParam.value, filter.value);
  if (res.success) {
    articles.value = res.pageDomain?.dataList || [];
    total.value = res.pageDomain?.pageParam.totalElements || 0;
  }
}

function showCreateDialog() {  
  // 尝试跳转
  router.push('/article/add')
    .then(() => {
      console.log('路由跳转成功!');
      console.log('跳转后路由:', router.currentRoute.value.fullPath);
    })
    .catch(err => {
      console.error('路由跳转失败:', err);
    });
}

function handleDataCollection() {
  // TODO: 数据采集功能
  ElMessage.info('数据采集功能开发中');
}

async function viewArticle(row: any) {
  try {
    const res = await resourceApi.getResourceById(row.resourceID);
    if (res.success && res.data) {
      // 将 ResourceVO 转换为 ArticleShowView 期望的格式
      const resourceVO = res.data;
      currentArticle.value = {
        ...resourceVO.resource,
        tags: resourceVO.tags || []
      };
      showViewDialog.value = true;
    } else {
      ElMessage.error('获取文章详情失败');
    }
  } catch (error) {
    ElMessage.error('获取文章详情失败');
    console.error(error);
  }
}

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;
    router.push('/article/add?id=' + currentArticle.value.resourceID);
  }
}

function deleteArticle() {
  // TODO: 删除文章
  ElMessage.info('删除功能开发中');
}

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: number) {
  const textMap: Record<number, string> = {
    [ArticleStatus.DRAFT]: '草稿',
    [ArticleStatus.PUBLISHED]: '已发布',
    [ArticleStatus.OFFLINE]: '已下架'
  };
  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) {
  pageParam.value.pageSize = val;
  loadArticles();
}

function handleCurrentChange(val: number) {
  pageParam.value.pageNumber = val;
  loadArticles();
}
</script>

<style lang="scss" scoped>
.article-management {
  padding: 20px;
}

.action-bar {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  align-items: center;
}

.el-table {
  margin-bottom: 20px;
}
</style>