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="publishDate" 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="200" fixed="right">
        <template #default="{ row }">
          <el-button size="small" @click="editArticle(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteArticle(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </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';

const router = useRouter();
const searchKeyword = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const articles = ref<any[]>([]);

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

function loadArticles() {
  // TODO: 加载文章数据
}

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('数据采集功能开发中');
}

function editArticle(row: any) {
  // TODO: 编辑文章
}

function deleteArticle(row: any) {
  // TODO: 删除文章
}

function getStatusType(status: string) {
  const typeMap: Record<string, any> = {
    'published': 'success',
    'draft': 'info',
    'pending': 'warning'
  };
  return typeMap[status] || 'info';
}

function getStatusText(status: string) {
  const textMap: Record<string, string> = {
    'published': '已发布',
    'draft': '草稿',
    'pending': '待审核'
  };
  return textMap[status] || status;
}

function handleSizeChange(val: number) {
  pageSize.value = val;
  loadArticles();
}

function handleCurrentChange(val: number) {
  currentPage.value = 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>