XuqmGroup-Web/ops-platform/src/views/services/ServiceRequestsView.vue

<template>
  <div>
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
      <h2>服务开通申请</h2>
      <el-select v-model="statusFilter" placeholder="全部状态" clearable style="width:160px" @change="loadRequests">
        <el-option label="待审核" value="PENDING" />
        <el-option label="已通过" value="APPROVED" />
        <el-option label="已拒绝" value="REJECTED" />
      </el-select>
    </div>

    <el-table :data="requests" v-loading="loading">
      <el-table-column prop="appId" label="AppID" width="180" />
      <el-table-column prop="platform" label="平台" width="100">
        <template #default="{ row }">
          <el-tag size="small">{{ row.platform }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="serviceType" label="服务类型" width="100">
        <template #default="{ row }">
          <el-tag size="small" type="info">{{ row.serviceType }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="applyReason" label="申请原因" show-overflow-tooltip />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="statusType(row.status)">{{ statusLabel(row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="申请时间" width="160">
        <template #default="{ row }">{{ fmt(row.createdAt) }}</template>
      </el-table-column>
      <el-table-column prop="reviewNote" label="审核备注" show-overflow-tooltip />
      <el-table-column label="操作" width="160" fixed="right">
        <template #default="{ row }">
          <template v-if="row.status === 'PENDING'">
            <el-button link type="success" @click="openReview(row, 'approve')">通过</el-button>
            <el-button link type="danger" @click="openReview(row, 'reject')">拒绝</el-button>
          </template>
          <span v-else class="el-text--info" style="font-size:12px">已处理</span>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination style="margin-top:16px"
      :current-page="page + 1" :page-size="size" :total="total"
      layout="prev, pager, next" @current-change="(p: number) => { page = p - 1; loadRequests() }" />

    <el-dialog v-model="showReview" :title="reviewAction === 'approve' ? '通过申请' : '拒绝申请'" width="420px">
      <el-form>
        <el-form-item label="审核备注">
          <el-input v-model="reviewNote" type="textarea" :rows="3" placeholder="可选备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showReview = false">取消</el-button>
        <el-button :type="reviewAction === 'approve' ? 'success' : 'danger'"
          :loading="submitting" @click="submitReview">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { opsApi, type ServiceRequest } from '@/api/ops'

const requests = ref<ServiceRequest[]>([])
const loading = ref(false)
const statusFilter = ref('')
const page = ref(0)
const size = ref(20)
const total = ref(0)

const showReview = ref(false)
const reviewAction = ref<'approve' | 'reject'>('approve')
const reviewNote = ref('')
const currentRequest = ref<ServiceRequest | null>(null)
const submitting = ref(false)

async function loadRequests() {
  loading.value = true
  try {
    const res = await opsApi.listServiceRequests(statusFilter.value, page.value, size.value)
    requests.value = res.data.data.content
    total.value = res.data.data.total
  } catch {
    requests.value = []
  } finally {
    loading.value = false
  }
}

function openReview(row: ServiceRequest, action: 'approve' | 'reject') {
  currentRequest.value = row
  reviewAction.value = action
  reviewNote.value = ''
  showReview.value = true
}

async function submitReview() {
  if (!currentRequest.value) return
  submitting.value = true
  try {
    if (reviewAction.value === 'approve') {
      await opsApi.approveRequest(currentRequest.value.id, reviewNote.value)
      ElMessage.success('已通过申请，服务已开通')
    } else {
      await opsApi.rejectRequest(currentRequest.value.id, reviewNote.value)
      ElMessage.warning('已拒绝申请')
    }
    showReview.value = false
    loadRequests()
  } catch {
    ElMessage.error('操作失败')
  } finally {
    submitting.value = false
  }
}

function statusType(status: string) {
  return status === 'APPROVED' ? 'success' : status === 'REJECTED' ? 'danger' : 'warning'
}

function statusLabel(status: string) {
  return status === 'APPROVED' ? '已通过' : status === 'REJECTED' ? '已拒绝' : '待审核'
}

function fmt(dt: string) {
  return new Date(dt).toLocaleString('zh-CN')
}

onMounted(loadRequests)
</script>