rongshu/工作空间/产研/权益/汇丰全行/产品原型/pc-demo/src/views/CampaignAuditDetail.vue

<template>
  <div class="campaign-audit-detail" v-if="audit">
    <el-card>
      <template #header>
        <div class="header">
          <span class="title">发放计划审核详情</span>
        </div>
      </template>

      <el-card shadow="never" class="section-card">
        <template #header>
          <div class="section-title">发放计划信息</div>
        </template>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="发放计划 ID">{{ audit.bizId }}</el-descriptions-item>
          <el-descriptions-item label="发放计划名称">{{ audit.bizName }}</el-descriptions-item>
          <el-descriptions-item label="审核类型">
            <el-tag :type="auditTypeTag(audit.auditType)" size="small">
              {{ auditTypeLabel(audit.auditType) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="auditStatusTag(audit.auditStatus)" size="small">
              {{ auditStatusLabel(audit.auditStatus) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="获取方式">
            <el-tag :type="snapshot.grantMode === 'direct' ? 'warning' : 'success'" size="small">
              {{ snapshot.grantMode === 'direct' ? '直接发放' : '用户领取' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="单客户权益数量">{{ grantSummary }}</el-descriptions-item>
          <el-descriptions-item label="开始时间">{{ snapshot.startTime || '-' }}</el-descriptions-item>
          <el-descriptions-item label="结束时间">{{ snapshot.endTime || '-' }}</el-descriptions-item>
          <el-descriptions-item label="选择客群" :span="2">
            <template v-if="(snapshot.crowdList || []).length">
              <el-tag
                v-for="cid in snapshot.crowdList"
                :key="cid"
                size="small"
                type="info"
                style="margin-right:6px;margin-top:4px"
              >{{ crowdLabel(cid) }}</el-tag>
            </template>
            <span v-else>-</span>
          </el-descriptions-item>
          <el-descriptions-item label="选择权益" :span="2">
            <template v-if="(snapshot.equityList || []).length">
              <el-tag
                v-for="pid in snapshot.equityList"
                :key="pid"
                size="small"
                style="margin-right:6px;margin-top:4px"
              >{{ equityLabel(pid) }}</el-tag>
            </template>
            <span v-else>-</span>
          </el-descriptions-item>
          <el-descriptions-item label="权益有效期" :span="2">{{ validitySummary }}</el-descriptions-item>
          <el-descriptions-item label="短信通知" :span="2">
            <div class="sms-info-row">
              <span class="sms-tpl-name">{{ smsTemplateName }}</span>
            </div>
            <div v-if="snapshot.smsTemplate" class="sms-template-preview">{{ snapshot.smsTemplate }}</div>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <el-card shadow="never" class="section-card">
        <template #header>
          <div class="section-title">提交信息</div>
        </template>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="提交人">{{ audit.submitterName }}</el-descriptions-item>
          <el-descriptions-item label="提交时间">{{ audit.submitTime }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <div class="action-bar">
        <el-button @click="goBack">返回</el-button>
        <template v-if="audit.auditStatus === 'pending'">
          <el-button type="danger" @click="handleReject">驳回</el-button>
          <el-button type="primary" @click="handleApprove">通过</el-button>
        </template>
      </div>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request'
import { ElMessage, ElMessageBox } from 'element-plus'
import crowdTaskStore from '@/store/crowdTaskStore'

const grantCycleLabelMap = { total: '整个周期', monthly: '每月', quarterly: '每季度', yearly: '每年' }
const SMS_TEMPLATE_NAME_MAP = {
  GRANT_SMS_001: '发放成功通用模板',
  GRANT_SMS_002: '发放成功-含查看入口',
  GRANT_SMS_003: '发放成功-简洁版'
}

export default {
  name: 'CampaignAuditDetail',
  data() {
    return { audit: null, equityOptions: [] }
  },
  computed: {
    crowdOptions() {
      return crowdTaskStore.list
    },
    snapshot() {
      return (this.audit && this.audit.snapshot) || {}
    },
    grantSummary() {
      const cycle = grantCycleLabelMap[this.snapshot.grantCycle] || '整个周期'
      return `${cycle} ${this.snapshot.grantQuantity || 0} 个`
    },
    validitySummary() {
      const v = this.snapshot.validity
      if (!v) return '-'
      if (v.type === 'fixed') {
        if (!v.fixedRange || v.fixedRange.length !== 2) return '固定日期'
        return `${v.fixedRange[0]} 至 ${v.fixedRange[1]}`
      }
      if (v.type === 'relative') return `自发放起 ${v.relativeDays || 0} 天内有效`
      return '-'
    },
    smsTemplateName() {
      return SMS_TEMPLATE_NAME_MAP[this.snapshot.smsTemplateId] || this.snapshot.smsTemplateId || '-'
    }
  },
  async created() {
    await this.fetchEquityOptions()
    this.loadAudit()
  },
  methods: {
    async fetchEquityOptions() {
      const res = await request.get('/api/equity/list', { params: { shelfStatus: '已上架' } })
      this.equityOptions = res.data || []
    },
    equityLabel(productId) {
      const m = this.equityOptions.find(i => i.productId === productId)
      return m ? `${m.equityName} (${m.productId})` : productId
    },
    crowdLabel(crowdId) {
      const m = this.crowdOptions.find(i => i.id === crowdId)
      return m ? `${m.name} (${m.id})` : crowdId
    },
    loadAudit() {
      const id = this.$route.params.id
      request.get('/api/campaign-audit/detail', { params: { id } }).then(res => {
        this.audit = res.data
        if (!this.audit) {
          ElMessage.error('审核单不存在')
          this.$router.replace('/customization/hsbc/campaign-audit')
        }
      }).catch(() => {})
    },
    auditTypeLabel(t) {
      return { new: '新增', end: '结束' }[t] || t
    },
    auditTypeTag(t) {
      return { new: 'success', end: 'warning' }[t] || ''
    },
    auditStatusLabel(s) {
      return { pending: '待审核', approved: '已通过', rejected: '已驳回' }[s] || s
    },
    auditStatusTag(s) {
      return { pending: 'warning', approved: 'success', rejected: 'danger' }[s] || ''
    },
    handleApprove() {
      ElMessageBox.confirm('确定通过该发放计划审核吗？', '提示', {
        confirmButtonText: '通过',
        cancelButtonText: '取消',
        type: 'success'
      }).then(() => {
        request.post('/api/campaign-audit/approve', { id: this.audit.id }).then(() => {
          ElMessage.success('审核通过')
          this.$router.push('/customization/hsbc/campaign-audit')
        }).catch(() => {})
      }).catch(() => {})
    },
    handleReject() {
      ElMessageBox.confirm('确定驳回该发放计划审核吗？', '提示', {
        confirmButtonText: '驳回',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.post('/api/campaign-audit/reject', { id: this.audit.id }).then(() => {
          ElMessage.success('已驳回')
          this.$router.push('/customization/hsbc/campaign-audit')
        }).catch(() => {})
      }).catch(() => {})
    },
    goBack() {
      this.$router.push('/customization/hsbc/campaign-audit')
    }
  }
}
</script>

<style scoped>
.campaign-audit-detail { padding: 0; }
.header { display: flex; align-items: center; justify-content: center; }
.title { font-size: 16px; font-weight: 600; color: #409EFF; }
.section-card { margin-bottom: 16px; border: none; }
.section-card >>> .el-card__header {
  padding: 12px 20px;
  background: #fafafa;
  border-bottom: 1px solid #ebeef5;
}
.section-title { font-size: 14px; font-weight: 600; color: #303133; }
.sms-info-row { display: flex; align-items: center; gap: 8px; }
.sms-tpl-name { color: #303133; }
.sms-template-preview {
  margin-top: 8px;
  padding: 10px 12px;
  background: #f5f7fa;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  color: #606266;
  line-height: 1.6;
  word-break: break-all;
}
.action-bar {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}
</style>