bloggingplatform/Frontend/src/views/ArticleView.vue

<template>
  <el-container>
    <!-- Main Section (Right Content) -->
    <el-main>
      <el-table :data="articles" style="width: 100%">
        <!-- 文章标题 -->
        <el-table-column prop="title" label="文章标题" width="180"></el-table-column>
        <!-- 文章作者 -->
        <el-table-column prop="author" label="作者" width="120"></el-table-column>
        <!-- 审核状态 -->
        <el-table-column label="审核状态" width="120">
          <template v-slot="scope">
            <el-tag :type="getAuditStatusType(scope.row.status)" effect="dark">
              <i :class="getAuditStatusIcon(scope.row.status)"></i>
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 推荐状态 -->
        <el-table-column label="推荐状态" width="120">
          <template v-slot="scope">
            <el-tag :type="getLikeStatusType(scope.row.like)" effect="dark">
              <i :class="getLikeStatusIcon(scope.row.like)"></i>
              {{ scope.row.like ? '已推荐' : '未推荐' }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 操作按钮 -->
        <el-table-column label="操作">
            <template v-slot="scope">
              <el-button @click="showAuditView(scope.row)" type="primary">审核</el-button>
              <el-button @click="confirmDeleteArticle(scope.row)" type="danger">删除</el-button>
              <el-button @click="handleRecommendClick(scope.row)" class="recommend-button" type="info">推荐</el-button>
            </template>
          </el-table-column>

      </el-table>
    </el-main>

    <!-- 审核视图 -->
    <div v-if="auditViewVisible" class="audit-view-overlay">
      <div class="audit-view-content">
        <h3>文章标题: {{ auditForm.title }}</h3>
        <p>作者: {{ auditForm.author }}</p>
        <p>提交时间: {{ auditForm.publishTime || '未提供' }}</p>
        <p>文章内容:</p>
        <p>{{ auditForm.content }}</p>
        <el-form :model="auditForm" label-width="140px">
          <el-form-item label="请输入审批未通过的理由：">
            <el-input v-model="auditForm.reason" autocomplete="off" type="textarea"></el-input>
          </el-form-item>
        </el-form>
        <div class="audit-actions">
          <el-button @click="handleAuditSubmit('审核未通过')">审核未通过</el-button>
          <el-button type="primary" @click="handleAuditSubmit('审核通过')">审核通过</el-button>
          <el-button @click="closeAuditView">取消</el-button>
        </div>
      </div>
    </div>
  </el-container>

  <!-- 推荐对话框 -->
  <el-dialog title="推荐文章" v-model:visible="recommendDialogVisible" width="30%" @close="resetRecommendForm">
    <el-form :model="recommendForm">
      <el-form-item label="请输入推荐理由：" :label-width="formLabelWidth">
        <el-input v-model="recommendForm.reason" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="recommendDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleRecommendSubmit">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue';


// 文章数据
const articles = ref([
  { id: 1, title: 'Vue 3入门', author: 'John Doe', status: '待审核', like: false, publishTime: '2024-11-01', content: '本文将介绍如何使用 Vue 3 构建高效的前端应用...' },
  { id: 2, title: 'JavaScript基础', author: 'Jane Doe', status: '审核通过', like: true, publishTime: '2024-11-02', content: '本文将介绍JavaScript的基础知识...' },
  { id: 3, title: '前端工程化', author: 'Alice Smith', status: '待审核', like: false, publishTime: '2024-11-03', content: '本文将介绍前端工程化的概念和技术...' },
]);

// 获取审核状态样式类型
const getAuditStatusType = (status: string) => {
  if (status === '审核通过') return 'success';
  if (status === '审核未通过') return 'error';
  return 'default';
};

// 获取审核状态对应的图标
const getAuditStatusIcon = (status: string) => {
  if (status === '审核通过') return 'el-icon-check';
  if (status === '审核未通过') return 'el-icon-close';
  return '';
};

// 获取推荐状态样式类型
const getLikeStatusType = (like: boolean) => {
  return like ? 'warning' : 'deault';
};

// 获取推荐状态对应的图标
const getLikeStatusIcon = (like: boolean) => {
  return like ? 'el-icon-star-on' : '';
};

// 显示审核视图
const auditViewVisible = ref(false);
const auditForm = ref({ id: null, title: '', author: '', publishTime: '', content: '', reason: '' });

const showAuditView = (article: any) => {
  console.log('审核按钮点击', article); // 调试信息
  auditViewVisible.value = true;
  // 设置当前文章的信息，并复制对象以避免直接修改原始数据
  auditForm.value = { ...article, reason: '' };
};

const handleAuditSubmit = (status: string) => {
  const article = articles.value.find((a) => a.id === auditForm.value.id);
  if (article) {
    article.status = status;
    if (status === '审核未通过') {
      article.reason = auditForm.value.reason;
       ElMessage({
           type: 'error',
           message: `${article.title}  ${status}`
         });// 如果审核未通过，保存原因
    }
  else{  ElMessage({
      type: 'success',
      message: `${article.title} 已${status}`
    });
  }
  }
  closeAuditView();
};

const closeAuditView = () => {
  auditViewVisible.value = false;
  resetAuditForm();
};

const resetAuditForm = () => {
  auditForm.value = { id: null, title: '', author: '', publishTime: '', content: '', reason: '' };
};

// 确认删除文章
const confirmDeleteArticle = (article: any) => {
  ElMessageBox.confirm(
    `确定要删除 "${article.title}" 吗？`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 删除逻辑
    const index = articles.value.indexOf(article);
    if (index !== -1) {
      articles.value.splice(index, 1);  // 删除该文章
      ElMessage({
        type: 'success',
        message: '删除成功!'
      });
    }
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    });
  });
};

// 处理推荐点击事件
const handleRecommendClick = (article: any) => {
  const action = article.like ? '取消推荐' : '推荐';
  const message = article.like ? `确定要取消推荐 "${article.title}" 吗？` : `确定要推荐 "${article.title}" 吗？`;
  const messageType = article.like ? 'warning' : 'info';

  ElMessageBox.confirm(
    message,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: messageType
    }
  ).then(() => {
    // 更新推荐状态
    article.like = !article.like;

    if (article.like) {
      // 如果是推荐，则显示推荐对话框
      showRecommendDialog(article);
      ElMessage({
        type: 'success',
        message: '已推荐'
      });
    } else {
      // 如果是取消推荐，则直接给出消息通知
      ElMessage({
        type: 'info',
        message: '已取消推荐'
      });
    }
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: `已保留${action}状态`
    });
  });
};

// 显示推荐对话框
const recommendDialogVisible = ref(false);
const recommendForm = ref({ id: null, reason: '' });
const formLabelWidth = ref('120px');

const showRecommendDialog = (article: any) => {
  recommendDialogVisible.value = true;
  recommendForm.value = { id: article.id, reason: '' }; // 设置当前文章的id并清空输入框
};

const handleRecommendSubmit = () => {
  const article = articles.value.find((a) => a.id === recommendForm.value.id);
  if (article && article.like) { // 只有当文章被设置为推荐时才进行推荐操作
    article.reason = recommendForm.value.reason; // 保存推荐理由
    ElMessage({
      type: 'success',
      message: `${article.title} 已成功推荐`
    });
  }
  recommendDialogVisible.value = false;
};

const resetRecommendForm = () => {
  recommendForm.value.reason = '';
};
</script>

<style scoped>
.el-header {
  padding: 0;
}

.el-button {
  margin-left: 10px;
}

/* 审核视图样式 */
.audit-view-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.audit-view-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  width: 60%; /* 增加宽度 */
  max-width: 800px; /* 增加最大宽度 */
  height: auto; /* 自适应高度 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.audit-actions {
  margin-top: 20px;
  text-align: right;
}

/* 新增：定义推荐按钮的样式 */
.el-button.recommend-button {
  background-color: #e6a23c; /* 黄色背景 */
  border-color: #e6a23c;     /* 黄色边框 */
}

.el-button.recommend-button:hover {
  background-color: darken(#e6a23c, 10%); /* 悬停时加深颜色 */
  border-color: darken(#e6a23c, 10%);
}
</style>