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

<template>
  <div class="activity-review admin-page">
    <el-card>
      <div class="admin-page-header">
        <span class="admin-page-title">活动审核</span>
        <div class="admin-page-actions" style="gap:12px;">
          <el-input v-model="filter.keyword" placeholder="搜索活动..." prefix-icon="el-icon-search" clearable @keyup.enter.native="handleSearch" @clear="handleSearch" style="width:200px;margin-right:8px;" />
          <el-select v-model="filter.status" placeholder="活动状态" clearable @change="handleSearch" style="width:130px;">
            <el-option label="全部状态" value="" />
            <el-option label="待审核" value="draft" />
            <el-option label="已发布" value="published" />
            <el-option label="已结束" value="ended" />
          </el-select>
          <el-select v-model="filter.dimensionCode" placeholder="所属维度" clearable @change="handleSearch" style="width:120px;">
            <el-option label="全部维度" value="" />
            <el-option label="身" value="body" />
            <el-option label="心" value="mind" />
            <el-option label="智" value="wisdom" />
            <el-option label="行" value="action" />
            <el-option label="富" value="wealth" />
          </el-select>
          <el-button type="primary" size="mini" @click="handleSearch">查询</el-button>
          <el-button size="mini" @click="resetSearch">重置</el-button>
        </div>
      </div>
        <el-table :data="pendingActivities" v-loading="loading" border stripe style="min-width:900px;" :max-height="tableHeight">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="title" label="活动标题" min-width="200" show-overflow-tooltip />
      <el-table-column prop="applicant" label="申请人" width="120" />
      <el-table-column prop="createdAt" label="申请时间" width="180" />
      <el-table-column label="状态" width="100">
        <template slot-scope="{ row }">
          <el-tag v-if="row.status === 'draft'" type="warning">待审核</el-tag>
          <el-tag v-else-if="row.status === 'published'" type="success">已发布</el-tag>
          <el-tag v-else-if="row.status === 'rejected'" type="danger">已驳回</el-tag>
          <el-tag v-else type="info">{{ row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="{ row }">
            <el-button
              v-if="row.status === 'draft'"
              size="mini"
              type="success"
              @click="approve(row)"
            >通过</el-button>
            <el-button
              v-if="row.status === 'draft'"
              size="mini"
              type="danger"
              @click="reject(row)"
            >驳回</el-button>
            <span v-else class="no-op">—</span>
          </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-if="total > 0"
        @current-change="handlePageChange"
        :current-page="page"
        :page-size="size"
        :total="total"
        layout="total, prev, pager, next"
        class="pagination-wrap"
      />
    </el-card>
  </div>
</template>

<script>
import { getActivityList, reviewActivity } from '@/api/activity'

export default {
  name: 'ActivityReview',
  computed: {
    tableHeight() {
      return window.innerHeight - 300
    }
  },
  data() {
    return {
      loading: false,
      pendingActivities: [],
      filter: {
        keyword: '',
        status: '',
        dimensionCode: ''
      },
      page: 1,
      size: 20,
      total: 0
    }
  },
  created() {
    this.loadPending()
  },
  methods: {
    async loadPending() {
      this.loading = true
      try {
        const params = {
          page: this.page,
          size: this.size,
          status: this.filter.status || 'draft',
          keyword: this.filter.keyword || undefined,
          dimensionCode: this.filter.dimensionCode || undefined
        }
        const res = await getActivityList(params)
        this.pendingActivities = (res.data && res.data.records) || []
        this.total = (res.data && res.data.total) || 0
      } catch (e) {
        this.$message.error('加载待审核活动失败')
      } finally {
        this.loading = false
      }
    },
    handlePageChange(val) {
      this.page = val
      this.loadPending()
    },
    handleSearch() {
      this.page = 1
      this.loadPending()
    },
    resetSearch() {
      this.filter.keyword = ''
      this.filter.status = ''
      this.filter.dimensionCode = ''
      this.page = 1
      this.loadPending()
    },
    async approve(row) {
      try {
        await reviewActivity({ id: row.id, action: 'publish' })
        this.$message.success('审核通过，活动已发布')
        this.loadPending()
      } catch (e) {
        this.$message.error('操作失败')
      }
    },
    async reject(row) {
      try {
        await this.$confirm('确认驳回该活动？驳回后活动将被删除', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await reviewActivity({ id: row.id, action: 'reject' })
        this.$message.success('已驳回并删除')
        this.loadPending()
      } catch (e) {
        // 取消或操作失败均不做处理
      }
    }
  }
}
</script>

<style scoped>
.no-op {
  color: #ccc;
}
</style>