opsx-licence/frontend/src/views/Entitlements.vue

<template>
  <div>
    <el-card shadow="never">
      <div class="toolbar">
        <div class="filters">
          <el-select v-model="customerFilter" placeholder="客户" clearable filterable style="width: 180px" @change="loadData">
            <el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" />
          </el-select>
          <el-select v-model="productFilter" placeholder="产品" clearable filterable style="width: 180px" @change="loadData">
            <el-option v-for="p in products" :key="p.id" :label="p.name" :value="p.id" />
          </el-select>
        </div>
      </div>

      <el-table :data="list" v-loading="loading" stripe>
        <el-table-column prop="customer_name" label="客户" min-width="110" />
        <el-table-column prop="product_name" label="产品" min-width="110" />
        <el-table-column prop="plan_name" label="计划" min-width="110" />
        <el-table-column label="类型" width="90">
          <template #default="{ row }">{{ planTypeLabel(row.plan_type) }}</template>
        </el-table-column>
        <el-table-column prop="license_key" label="License Key" min-width="200" />
        <el-table-column label="状态" width="80">
          <template #default="{ row }">
            <el-tag :type="entStatusTag(row.status)" size="small">{{ entStatusLabel(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="有效期" min-width="160">
          <template #default="{ row }">
            <div>{{ row.valid_from }}</div>
            <div style="color: #909399">至 {{ row.valid_until || '永久' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="剩余" width="80">
          <template #default="{ row }">
            <span :style="{ color: row.days_left <= 7 ? '#f56c6c' : '' }">{{ row.days_left >= 9999 ? '永久' : row.days_left + '天' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="设备" width="80">
          <template #default="{ row }">{{ row.current_devices }}/{{ row.max_devices }}</template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <el-button size="small" :disabled="!row.renewable" @click="renew(row)">续费</el-button>
            <el-button size="small" type="danger" @click="revoke(row)">吊销</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="page" v-model:page-size="pageSize"
        :total="total" layout="total, prev, pager, next" style="margin-top: 16px"
        @current-change="loadData"
      />
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getEntitlements, revokeEntitlement, renewEntitlement } from '@/api/entitlement'
import { getAllProducts } from '@/api/product'
import { getAllCustomers } from '@/api/customer'

const list = ref([])
const products = ref([])
const customers = ref([])
const loading = ref(false)
const customerFilter = ref('')
const productFilter = ref('')
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)

function planTypeLabel(t) { return { perpetual: '买断', lifetime: '终身', monthly: '月订阅', yearly: '年订阅' }[t] || t }
function entStatusLabel(s) { return { active: '有效', expired: '过期', revoked: '已吊销' }[s] || s }
function entStatusTag(s) { return { active: 'success', expired: 'warning', revoked: 'danger' }[s] || '' }

async function loadData() {
  loading.value = true
  try {
    const res = await getEntitlements({
      page: page.value, page_size: pageSize.value,
      customer_id: customerFilter.value, product_id: productFilter.value,
    })
    list.value = res.data.list || []
    total.value = res.data.total
  } finally { loading.value = false }
}

async function revoke(row) {
  await ElMessageBox.confirm(`确定吊销「${row.customer_name}」对「${row.product_name}」的权益？`, '提示', { type: 'warning' })
  await revokeEntitlement(row.id)
  loadData()
}

async function renew(row) {
  await ElMessageBox.confirm('将按原计划续费，是否继续？', '续费', { type: 'info' })
  try {
    await renewEntitlement(row.id, row.plan_id)
    ElMessage.success('续费成功')
    loadData()
  } catch { /* */ }
}

onMounted(async () => {
  const [p, c] = await Promise.all([getAllProducts(), getAllCustomers()])
  products.value = p.data
  customers.value = c.data
  loadData()
})
</script>

<style scoped>
.toolbar { margin-bottom: 16px; }
.filters { display: flex; gap: 10px; }
</style>