rongshu/pc-v3/src/views/CampaignAuditList.vue

<template>
  <div class="campaign-audit-list">
    <el-card>
      <el-tabs v-model="activeTab" @tab-click="loadData">
        <el-tab-pane label="待审核" name="pending"></el-tab-pane>
        <el-tab-pane label="审核通过" name="approved"></el-tab-pane>
        <el-tab-pane label="审核驳回" name="rejected"></el-tab-pane>
      </el-tabs>
      <div class="search-section">
        <div class="search-row">
          <el-form :model="searchForm" label-width="120px" inline>
            <el-form-item label="发放计划名称:">
              <el-input v-model="searchForm.bizName" placeholder="关键字" style="width: 200px" />
            </el-form-item>
            <div class="button-group" style="margin-left: 20px;">
              <el-button type="primary" @click="loadData">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
            </div>
          </el-form>
        </div>
      </div>

      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column label="操作" min-width="100" fixed="left">
          <template #default="scope">
            <el-button
              v-if="activeTab === 'pending'"
              type="text"
              size="small"
              @click="goDetail(scope.row.id)"
            >审批</el-button>
            <el-button
              v-else
              type="text"
              size="small"
              @click="goDetail(scope.row.id)"
            >查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="bizName" label="发放计划名称" min-width="160" show-overflow-tooltip />
        <el-table-column prop="bizId" label="发放计划 ID" width="160" align="center" />
        <el-table-column label="审核类型" width="120" align="center">
          <template #default="scope">
            <el-tag :type="auditTypeTag(scope.row.auditType)" size="small">
              {{ auditTypeLabel(scope.row.auditType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="submitterName" label="提交人" width="120" align="center" />
        <el-table-column prop="submitTime" label="提交时间" width="180" align="center" />
        <el-table-column prop="auditorName" label="审核人" width="120" align="center">
          <template #default="scope">
            <span>{{ scope.row.auditorName || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="auditTime" label="审核时间" width="180" align="center">
          <template #default="scope">
            <span>{{ scope.row.auditTime || '-' }}</span>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-section">
        <span>Total {{ tableData.length }}</span>
        <el-pagination
          layout="prev, pager, next, sizes, jumper"
          :page-size="10"
          :page-sizes="[10, 20, 50]"
          :total="tableData.length"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'CampaignAuditList',
  data() {
    return {
      activeTab: 'pending',
      searchForm: { bizName: '' },
      tableData: []
    }
  },
  created() {
    this.loadData()
  },
  activated() {
    this.loadData()
  },
  watch: {
    $route(to) {
      if (to.path === '/customization/hsbc/campaign-audit') {
        this.loadData()
      }
    }
  },
  methods: {
    loadData() {
      const params = new URLSearchParams()
      params.append('auditStatus', this.activeTab)
      if (this.searchForm.bizName) params.append('bizName', this.searchForm.bizName)
      request.get('/api/campaign-audit/list?' + params.toString()).then(res => {
        this.tableData = res.data || []
      }).catch(() => {})
    },
    handleReset() {
      this.searchForm = { bizName: '' }
      this.loadData()
    },
    auditTypeLabel(t) {
      return { new: '新增', end: '结束' }[t] || t
    },
    auditTypeTag(t) {
      return { new: 'success', end: 'warning' }[t] || ''
    },
    goDetail(id) {
      this.$router.push(`/customization/hsbc/campaign-audit/${id}`)
    }
  }
}
</script>

<style scoped>
.campaign-audit-list { padding: 0; }
.search-section { display: flex; flex-direction: column; }
.search-row { margin-bottom: 0; }
.search-row .el-form { display: flex; flex-wrap: wrap; gap: 0; }
.search-row .el-form-item { margin-right: 0; margin-bottom: 8px; }
.button-group { display: flex; gap: 5px; }
.pagination-section {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}
</style>