cfc/cfc-web/src/views/admin/review/PackageAudit.vue

<template>
  <div>
    <div class="filter-bar">
      <el-select v-model="statusFilter" placeholder="审核状态" @change="loadData">
        <el-option label="全部" value="" />
        <el-option label="待审核" value="pending" />
        <el-option label="已通过" value="approved" />
        <el-option label="已拒绝" value="rejected" />
      </el-select>
      <el-button size="small" @click="loadData" :loading="loading">刷新</el-button>
      <el-button v-if="selectedRows.length > 0 && statusFilter === 'pending'" size="small" type="success" @click="handleBatchApprove">批量通过({{ selectedRows.length }})</el-button>
      <el-button v-if="selectedRows.length > 0 && statusFilter === 'pending'" size="small" type="danger" @click="showBatchRejectDialog">批量驳回({{ selectedRows.length }})</el-button>
    </div>
    <el-table :data="list" v-loading="loading" border stripe style="min-width:900px;" :max-height="tableHeight" @selection-change="onSelectionChange">
      <el-table-column type="selection" width="40" v-if="statusFilter === 'pending'" />
      <el-table-column prop="id" label="ID" width="60" />
      <el-table-column prop="name" label="任务模板名称" min-width="180" show-overflow-tooltip />
      <el-table-column prop="cycleDays" label="周期" width="70">
        <template slot-scope="{ row }">{{ row.cycleDays }}天</template>
      </el-table-column>
      <el-table-column prop="price" label="价格" width="90">
        <template slot-scope="{ row }">{{ formatPrice(row.price) }}</template>
      </el-table-column>
      <el-table-column label="审核状态" width="90">
        <template slot-scope="{ row }">
          <el-tag :type="statusType(row.status)" size="small">{{ statusLabel(row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="rejectReason" label="拒绝原因" min-width="150" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span v-if="row.rejectReason" style="color:#f56c6c;">{{ row.rejectReason }}</span>
          <span v-else style="color:#999;">-</span>
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="申请时间" width="160" />
      <el-table-column label="操作" width="200" fixed="right">
        <template slot-scope="{ row }">
          <template v-if="row.status === 'pending'">
            <el-button size="mini" type="primary" @click="showDetail(row)">查看</el-button>
            <el-button size="mini" type="success" @click="handleApprove(row)">通过</el-button>
            <el-button size="mini" type="danger" @click="showRejectDialog(row)">驳回</el-button>
          </template>
          <el-button v-else size="mini" type="primary" @click="showDetail(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-if="total > 0"
      :current-page="page"
      :page-size="size"
      :total="total"
      layout="total, prev, pager, next"
      @current-change="onPageChange"
      style="margin-top:12px;text-align:right;"
    />

    <el-dialog title="任务模板详情" :visible.sync="detailVisible" width="700px" top="5vh">
      <div v-if="currentRow" style="max-height:60vh;overflow-y:auto;">
        <el-form label-width="110px" size="small">
          <el-form-item label="ID">{{ currentRow.id }}</el-form-item>
          <el-form-item label="任务模板名称">{{ currentRow.name }}</el-form-item>
          <el-form-item label="状态"><el-tag :type="statusType(currentRow.status)">{{ statusLabel(currentRow.status) }}</el-tag></el-form-item>
          <el-form-item label="周期">{{ currentRow.cycleDays }} 天</el-form-item>
          <el-form-item label="价格">{{ formatPrice(currentRow.price) }}</el-form-item>
          <el-form-item label="创建时间">{{ currentRow.createdAt }}</el-form-item>
          <el-form-item label="详细介绍" v-if="currentRow.description">
            <div style="border:1px solid #eee;padding:10px;border-radius:4px;background:#fafafa;white-space:pre-wrap;">{{ currentRow.description }}</div>
          </el-form-item>
          <el-form-item label="拒绝原因" v-if="currentRow.rejectReason" style="color:#f56c6c;">
            {{ currentRow.rejectReason }}
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" v-if="currentRow && currentRow.status === 'pending'">
        <el-button @click="detailVisible = false">取消</el-button>
        <el-button type="success" @click="handleApproveFromDialog">通过</el-button>
        <el-button type="danger" @click="showRejectFromDialog">驳回</el-button>
      </span>
      <span slot="footer" v-else>
        <el-button @click="detailVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <el-dialog title="驳回原因" :visible.sync="rejectDialogVisible" width="450px">
      <el-input v-model="rejectReason" type="textarea" :rows="3" placeholder="请输入驳回原因" />
      <span slot="footer">
        <el-button @click="rejectDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmReject">确认驳回</el-button>
      </span>
    </el-dialog>

    <el-dialog title="批量驳回" :visible.sync="batchRejectDialogVisible" width="450px">
      <el-input v-model="batchRejectReason" type="textarea" :rows="3" placeholder="请输入驳回原因" />
      <span slot="footer">
        <el-button @click="batchRejectDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="confirmBatchReject">确认批量驳回({{ selectedRows.length }}条)</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getPackageList, reviewPackage } from '@/api/package'

export default {
  name: 'PackageAudit',
  computed: {
    tableHeight() {
      return window.innerHeight - 300
    }
  },
  data() {
    return {
      list: [],
      loading: false,
      statusFilter: '',
      page: 1,
      size: 20,
      total: 0,
      selectedRows: [],
      detailVisible: false,
      rejectDialogVisible: false,
      batchRejectDialogVisible: false,
      rejectReason: '',
      batchRejectReason: '',
      currentRow: null
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    async loadData() {
      this.loading = true
      try {
        const res = await getPackageList({})
        if (res.code === 200) {
          let data = Array.isArray(res.data) ? res.data : (res.data && res.data.records) || []
          if (this.statusFilter) {
            data = data.filter(item => item.status === this.statusFilter)
          }
          this.list = data
          this.total = data.length
        }
      } catch (e) {
        this.$message.error('加载失败')
      } finally {
        this.loading = false
      }
    },
    onPageChange(p) {
      this.page = p
      this.loadData()
    },
    onSelectionChange(rows) {
      this.selectedRows = rows
    },
    showDetail(row) {
      this.currentRow = row
      this.rejectReason = ''
      this.detailVisible = true
    },
    handleApproveFromDialog() {
      if (!this.currentRow) return
      this.handleApprove(this.currentRow)
      this.detailVisible = false
    },
    showRejectFromDialog() {
      this.detailVisible = false
      this.rejectDialogVisible = true
    },
    async handleApprove(row) {
      try {
        await this.$confirm('确认通过该任务模板？', '提示', { type: 'warning' })
        await reviewPackage({ id: row.id, action: 'approve' })
        this.$message.success('已通过')
        this.loadData()
      } catch (e) {
        if (e !== 'cancel') this.$message.error('操作失败')
      }
    },
    showRejectDialog(row) {
      this.currentRow = row
      this.rejectReason = ''
      this.rejectDialogVisible = true
    },
    async confirmReject() {
      if (!this.rejectReason.trim()) return this.$message.warning('请填写驳回原因')
      if (!this.currentRow) return
      this.rejectDialogVisible = false
      try {
        await reviewPackage({ id: this.currentRow.id, action: 'reject', reason: this.rejectReason })
        this.$message.success('已驳回')
        this.loadData()
      } catch (e) {
        this.$message.error('操作失败')
      }
    },
    showBatchRejectDialog() {
      this.batchRejectReason = ''
      this.batchRejectDialogVisible = true
    },
    async handleBatchApprove() {
      try {
        await this.$confirm(`确认通过所选 ${this.selectedRows.length} 个任务模板？`, '提示', { type: 'warning' })
        for (const row of this.selectedRows) {
          await reviewPackage({ id: row.id, action: 'approve' })
        }
        this.$message.success('已批量通过')
        this.selectedRows = []
        this.loadData()
      } catch (e) {
        if (e !== 'cancel') this.$message.error('操作失败')
      }
    },
    async confirmBatchReject() {
      if (!this.batchRejectReason.trim()) return this.$message.warning('请填写驳回原因')
      this.batchRejectDialogVisible = false
      try {
        for (const row of this.selectedRows) {
          await reviewPackage({ id: row.id, action: 'reject', reason: this.batchRejectReason })
        }
        this.$message.success('已批量驳回')
        this.selectedRows = []
        this.loadData()
      } catch (e) {
        this.$message.error('操作失败')
      }
    },
    formatPrice(val) {
      if (val == null) return '-'
      return '¥' + (val / 100).toFixed(2)
    },
    statusType(s) {
      return { approved: 'success', pending: 'warning', rejected: 'danger' }[s] || 'info'
    },
    statusLabel(s) {
      return { approved: '已通过', pending: '待审核', rejected: '已驳回' }[s] || s
    }
  }
}
</script>

<style scoped>
.filter-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; padding: 12px; background: #fff; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.08); flex-wrap: wrap; }
</style>