tiantian-system/app/pages/admin/developers/audit.vue

<template>
  <div class="developer-audit-page">
    <a-card :bordered="false" title="权限审核">
      <div class="filter-bar">
        <a-select v-model:value="filterType" placeholder="权限类型" style="width: 150px" allow-clear>
          <a-select-option value="api">API 权限</a-select-option>
          <a-select-option value="plugin">插件权限</a-select-option>
          <a-select-option value="admin">管理权限</a-select-option>
        </a-select>
        <a-select v-model:value="filterStatus" placeholder="审核状态" style="width: 140px" allow-clear>
          <a-select-option value="pending">待审核</a-select-option>
          <a-select-option value="approved">已通过</a-select-option>
          <a-select-option value="rejected">已拒绝</a-select-option>
        </a-select>
        <a-button type="primary" @click="auditModalVisible = true">新增审核</a-button>
      </div>

      <a-table :columns="columns" :data-source="data" row-key="id">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'type'">
            <a-tag :color="typeColor[record.type]">{{ typeMap[record.type] }}</a-tag>
          </template>
          <template v-else-if="column.key === 'level'">
            <a-tag :color="levelColor[record.level]">{{ levelMap[record.level] }}</a-tag>
          </template>
          <template v-else-if="column.key === 'status'">
            <a-badge :status="statusBadge[record.status]" :text="statusText[record.status]" />
          </template>
          <template v-else-if="column.key === 'actions'">
            <a-space>
              <a-button v-if="record.status === 'pending'" type="primary" size="small" @click="handleAudit(record)">审核</a-button>
              <a-button type="link" size="small" @click="handleView(record)">详情</a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>

    <a-modal v-model:open="auditModalVisible" title="权限审核" width="520px" @ok="handleSubmit">
      <a-form :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="申请人">
          <a-input v-model:value="form.name" />
        </a-form-item>
        <a-form-item label="权限类型">
          <a-select v-model:value="form.type">
            <a-select-option value="api">API 权限</a-select-option>
            <a-select-option value="plugin">插件权限</a-select-option>
            <a-select-option value="admin">管理权限</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="权限等级">
          <a-select v-model:value="form.level">
            <a-select-option value="basic">基础</a-select-option>
            <a-select-option value="standard">标准</a-select-option>
            <a-select-option value="advance">高级</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="审核结果">
          <a-radio-group v-model:value="form.result">
            <a-radio value="approved">通过</a-radio>
            <a-radio value="rejected">拒绝</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="审核备注">
          <a-textarea v-model:value="form.remark" :rows="3" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue'

definePageMeta({ layout: 'admin' })

const filterType = ref<string | undefined>()
const filterStatus = ref<string | undefined>()
const auditModalVisible = ref(false)
const form = reactive({ name: '', type: 'api', level: 'basic', result: 'approved', remark: '' })

const typeMap: Record<string, string> = { api: 'API 权限', plugin: '插件权限', admin: '管理权限' }
const typeColor: Record<string, string> = { api: 'blue', plugin: 'green', admin: 'purple' }
const levelMap: Record<string, string> = { basic: '基础', standard: '标准', advance: '高级' }
const levelColor: Record<string, string> = { basic: 'default', standard: 'blue', advance: 'red' }
const statusText: Record<string, string> = { pending: '待审核', approved: '已通过', rejected: '已拒绝' }
const statusBadge: Record<string, any> = { pending: 'warning', approved: 'success', rejected: 'error' }

const columns = [
  { title: '申请人', dataIndex: 'name', key: 'name', width: 140 },
  { title: '企业', dataIndex: 'enterprise', key: 'enterprise', width: 160 },
  { title: '权限类型', key: 'type', width: 110 },
  { title: '权限等级', key: 'level', width: 100 },
  { title: '申请时间', dataIndex: 'date', key: 'date', width: 120 },
  { title: '审核人', dataIndex: 'auditor', key: 'auditor', width: 100 },
  { title: '状态', key: 'status', width: 100 },
  { title: '操作', key: 'actions', width: 140 },
]

const data = ref([
  { id: 1, name: '陈志远', enterprise: '腾云科技', type: 'api', level: 'standard', date: '2026-04-08', auditor: '李明', status: 'pending' },
  { id: 2, name: '吴浩宇', enterprise: '数智科技', type: 'plugin', level: 'advance', date: '2026-04-05', auditor: '李明', status: 'pending' },
  { id: 3, name: '林晓东', enterprise: '华创数据', type: 'plugin', level: 'standard', date: '2026-04-07', auditor: '李明', status: 'approved' },
  { id: 4, name: '周文博', enterprise: '云智科技', type: 'api', level: 'basic', date: '2026-04-06', auditor: '李明', status: 'approved' },
])

const handleAudit = (r: any) => { Object.assign(form, { name: r.name, type: r.type }); auditModalVisible.value = true }
const handleView = (r: any) => message.info('查看：' + r.name)
const handleSubmit = () => { auditModalVisible.value = false; message.success('审核成功') }
</script>

<style scoped>
.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
</style>