cfc/cfc-web/src/views/admin/CommentReview.vue

<template>
  <div class="comment-review admin-page">
    <div class="header">
      <h2>评论审核</h2>
      <div class="filters">
        <el-select v-model="listQuery.status" @change="loadList" placeholder="审核状态" style="width:140px" clearable>
          <el-option label="全部" value="" />
          <el-option label="待审核" value="pending" />
          <el-option label="已通过" value="approved" />
          <el-option label="已驳回" value="rejected" />
        </el-select>
        <el-input v-model="listQuery.articleId" placeholder="文章ID" style="width:160px" clearable @keyup.enter.native="loadList" />
        <el-button type="primary" @click="loadList">查询</el-button>
      </div>
    </div>
    <el-table :data="list" v-loading="loading" border stripe>
      <el-table-column prop="id" label="ID" width="60" />
      <el-table-column label="用户" width="120">
        <template slot-scope="{ row }">
          <span>{{ row.userName || '未知' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="文章" min-width="200">
        <template slot-scope="{ row }">
          <span style="font-size:13px">{{ row.articleTitle || ('文章#' + row.articleId) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="评论内容" min-width="300">
        <template slot-scope="{ row }">
          <span v-if="row.parentId" style="color:#999">[回复] </span>{{ row.content }}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template slot-scope="{ row }">
          <el-tag :type="row.status === 'approved' ? 'success' : row.status === 'rejected' ? 'danger' : 'warning'">
            {{ { pending: '待审核', approved: '已通过', rejected: '已驳回' }[row.status] }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="时间" width="160" />
      <el-table-column label="操作" width="200" fixed="right">
        <template slot-scope="{ row }">
          <el-button size="mini" type="success" @click="audit(row.id, 'approved')" :disabled="row.status !== 'pending'">通过</el-button>
          <el-button size="mini" type="danger" @click="handleReject(row)" :disabled="row.status !== 'pending'">驳回</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="total > 0"
      @current-change="handlePageChange"
      :current-page="listQuery.page"
      :page-size="listQuery.size"
      layout="total, prev, pager, next"
      :total="total"
      style="margin-top:20px;text-align:right"
    />
    <el-dialog title="驳回原因" :visible.sync="rejectDialogVisible" width="400px">
      <el-input type="textarea" v-model="rejectReason" :rows="3" placeholder="请输入驳回原因" />
      <span slot="footer">
        <el-button @click="rejectDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="confirmReject">确认驳回</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { adminCommentList } from '@/api/article'
import request from '@/utils/request'
export default {
  data() {
    return {
      list: [],
      loading: false,
      total: 0,
      listQuery: { status: 'pending', articleId: '', page: 1, size: 20 },
      rejectDialogVisible: false,
      rejectTargetId: null,
      rejectReason: ''
    }
  },
  mounted() { this.loadList() },
  methods: {
    async loadList() {
      this.loading = true
      try {
        var params = { page: this.listQuery.page, size: this.listQuery.size }
        if (this.listQuery.status) params.status = this.listQuery.status
        if (this.listQuery.articleId) params.articleId = parseInt(this.listQuery.articleId)
        var res = await adminCommentList(params)
        if (res.code === 200) {
          this.list = res.data.records || []
          this.total = res.data.total || 0
        } else {
          this.$message.error(res.message || '加载失败')
        }
      } catch (e) {
        this.$message.error('网络错误')
      } finally { this.loading = false }
    },
    handlePageChange(page) {
      this.listQuery.page = page
      this.loadList()
    },
    async audit(id, status) {
      var res = await request({ url: '/api/articles/comments/audit', method: 'post', data: { commentId: id, status: status } })
      if (res.code === 200) {
        this.$message.success(status === 'approved' ? '已通过' : '已驳回')
        this.loadList()
      } else {
        this.$message.error(res.message || '操作失败')
      }
    },
    handleReject(row) {
      this.rejectTargetId = row.id
      this.rejectReason = ''
      this.rejectDialogVisible = true
    },
    async confirmReject() {
      if (!this.rejectReason.trim()) {
        this.$message.warning('请填写驳回原因')
        return
      }
      this.rejectDialogVisible = false
      await this.audit(this.rejectTargetId, 'rejected')
    }
  }
}
</script>
<style scoped>
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.filters { display: flex; gap: 10px; align-items: center; }
</style>