refactor: 将查看授权和编辑授权改为独立页面
This commit is contained in:
@@ -1,236 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ArrowLeft, CheckCheck, Loader2, X } from 'lucide-vue-next'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { toast } from 'vue-sonner'
|
||||
|
||||
import { BasicPage } from '@/components/global-layout'
|
||||
import { API_BASE } from '@/utils/config'
|
||||
|
||||
interface CardType {
|
||||
id: number
|
||||
name: string
|
||||
billing_type: string
|
||||
price: number
|
||||
}
|
||||
|
||||
interface CardTypePermission {
|
||||
card_type_id: number
|
||||
name: string
|
||||
billing_type: string
|
||||
price: number
|
||||
can_generate: boolean
|
||||
}
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const loading = ref(true)
|
||||
const saving = ref(false)
|
||||
const agentAppName = ref('')
|
||||
const cardTypeForm = ref<CardTypePermission[]>([])
|
||||
|
||||
function getBillingTypeText(type: string) {
|
||||
const map: Record<string, string> = {
|
||||
subscription: '订阅',
|
||||
time: '计时',
|
||||
point: '点卡',
|
||||
}
|
||||
return map[type] || type
|
||||
}
|
||||
|
||||
async function fetchData() {
|
||||
loading.value = true
|
||||
try {
|
||||
const token = localStorage.getItem('token')
|
||||
|
||||
const [agentAppRes, cardTypesRes] = await Promise.all([
|
||||
fetch(`${API_BASE}/dev/agent-apps/${route.params.id}`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
}),
|
||||
fetch(`${API_BASE}/dev/card-types`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
}),
|
||||
])
|
||||
|
||||
const [agentAppData, cardTypesData] = await Promise.all([
|
||||
agentAppRes.json(),
|
||||
cardTypesRes.json(),
|
||||
])
|
||||
|
||||
if (agentAppData.code === 200 && agentAppData.agent_app) {
|
||||
agentAppName.value = `${agentAppData.agent_app.agent_name} - ${agentAppData.agent_app.app_name}`
|
||||
const existingPerms = agentAppData.agent_app.card_types || []
|
||||
|
||||
const allCardTypes = cardTypesData.card_types || []
|
||||
cardTypeForm.value = allCardTypes.map((ct: CardType) => {
|
||||
const existing = existingPerms.find((p: any) => p.card_type_id === ct.id)
|
||||
return {
|
||||
card_type_id: ct.id,
|
||||
name: ct.name,
|
||||
billing_type: ct.billing_type,
|
||||
price: ct.price,
|
||||
can_generate: existing ? existing.can_generate : false,
|
||||
}
|
||||
})
|
||||
}
|
||||
else {
|
||||
toast.error('获取授权信息失败')
|
||||
router.push('/admin/agent-apps')
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取数据失败:', error)
|
||||
toast.error('获取数据失败')
|
||||
router.push('/admin/agent-apps')
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function selectAll() {
|
||||
cardTypeForm.value.forEach(ct => ct.can_generate = true)
|
||||
}
|
||||
|
||||
function clearAll() {
|
||||
cardTypeForm.value.forEach(ct => ct.can_generate = false)
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
saving.value = true
|
||||
try {
|
||||
const token = localStorage.getItem('token')
|
||||
const response = await fetch(`${API_BASE}/dev/agent-apps/${route.params.id}/card-types`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
card_types: cardTypeForm.value.map(ct => ({
|
||||
card_type_id: ct.card_type_id,
|
||||
can_generate: ct.can_generate,
|
||||
})),
|
||||
}),
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
if (data.code === 200) {
|
||||
toast.success('保存成功')
|
||||
router.push('/admin/agent-apps')
|
||||
}
|
||||
else {
|
||||
toast.error(data.message || '保存失败')
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
console.error('保存失败:', error)
|
||||
toast.error('保存失败')
|
||||
}
|
||||
finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
router.push('/admin/agent-apps')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicPage
|
||||
title="卡密权限配置"
|
||||
description="配置代理商可生成的卡密类型"
|
||||
>
|
||||
<template #actions>
|
||||
<UiButton variant="outline" @click="goBack">
|
||||
<ArrowLeft class="mr-2 h-4 w-4" />
|
||||
返回
|
||||
</UiButton>
|
||||
</template>
|
||||
|
||||
<div v-if="loading" class="flex items-center justify-center py-12">
|
||||
<Loader2 class="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-6">
|
||||
<UiCard>
|
||||
<UiCardHeader>
|
||||
<UiCardTitle>授权信息</UiCardTitle>
|
||||
<UiCardDescription>
|
||||
{{ agentAppName }}
|
||||
</UiCardDescription>
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="flex gap-2 mb-4">
|
||||
<UiButton variant="outline" size="sm" @click="selectAll">
|
||||
<CheckCheck class="mr-2 h-4 w-4" />
|
||||
全选
|
||||
</UiButton>
|
||||
<UiButton variant="outline" size="sm" @click="clearAll">
|
||||
<X class="mr-2 h-4 w-4" />
|
||||
清空
|
||||
</UiButton>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
|
||||
<UiCard>
|
||||
<UiCardContent class="p-0">
|
||||
<UiTable>
|
||||
<UiTableHeader>
|
||||
<UiTableRow>
|
||||
<UiTableHead class="w-12" />
|
||||
<UiTableHead>卡类名称</UiTableHead>
|
||||
<UiTableHead>计费类型</UiTableHead>
|
||||
<UiTableHead>价格</UiTableHead>
|
||||
</UiTableRow>
|
||||
</UiTableHeader>
|
||||
<UiTableBody>
|
||||
<UiTableRow
|
||||
v-for="cardType in cardTypeForm"
|
||||
:key="cardType.card_type_id"
|
||||
:class="cardType.can_generate ? 'bg-accent/50' : ''"
|
||||
class="cursor-pointer"
|
||||
@click="cardType.can_generate = !cardType.can_generate"
|
||||
>
|
||||
<UiTableCell>
|
||||
<UiCheckbox
|
||||
:checked="cardType.can_generate"
|
||||
@update:checked="cardType.can_generate = $event"
|
||||
@click.stop
|
||||
/>
|
||||
</UiTableCell>
|
||||
<UiTableCell class="font-medium">
|
||||
{{ cardType.name }}
|
||||
</UiTableCell>
|
||||
<UiTableCell>
|
||||
<UiBadge variant="outline">
|
||||
{{ getBillingTypeText(cardType.billing_type) }}
|
||||
</UiBadge>
|
||||
</UiTableCell>
|
||||
<UiTableCell>
|
||||
¥{{ cardType.price }}
|
||||
</UiTableCell>
|
||||
</UiTableRow>
|
||||
</UiTableBody>
|
||||
</UiTable>
|
||||
</UiCardContent>
|
||||
<UiCardFooter class="flex justify-end gap-2">
|
||||
<UiButton variant="outline" @click="goBack">
|
||||
取消
|
||||
</UiButton>
|
||||
<UiButton :disabled="saving" @click="handleSubmit">
|
||||
<Loader2 v-if="saving" class="mr-2 h-4 w-4 animate-spin" />
|
||||
保存
|
||||
</UiButton>
|
||||
</UiCardFooter>
|
||||
</UiCard>
|
||||
</div>
|
||||
</BasicPage>
|
||||
</template>
|
||||
@@ -1,13 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { ArrowLeft, Loader2, Wallet } from 'lucide-vue-next'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { ArrowLeft, Check, CheckCheck, Eye, Loader2, X } from 'lucide-vue-next'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { toast } from 'vue-sonner'
|
||||
|
||||
import type { AgentApp } from '@/pages/admin/agent-apps/data/schema'
|
||||
import type { AgentApp, CardTypeAuth } from '@/pages/admin/agent-apps/data/schema'
|
||||
|
||||
import { BasicPage } from '@/components/global-layout'
|
||||
import { API_BASE } from '@/utils/config'
|
||||
import api from '@/services/api'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
@@ -17,24 +17,56 @@ const saving = ref(false)
|
||||
const agentApp = ref<AgentApp | null>(null)
|
||||
|
||||
const form = ref({
|
||||
discount: 1.0,
|
||||
status: 'active',
|
||||
discount: 1.0,
|
||||
card_types: [] as Array<{
|
||||
card_type_id: number
|
||||
name: string
|
||||
billing_type: string
|
||||
origin_price: number
|
||||
price: number
|
||||
can_generate: boolean
|
||||
}>,
|
||||
})
|
||||
|
||||
const agentAppId = computed(() => route.params.id as string)
|
||||
|
||||
function getBillingTypeText(type: string) {
|
||||
const map: Record<string, string> = {
|
||||
subscription: '订阅',
|
||||
time: '计时',
|
||||
point: '点卡',
|
||||
}
|
||||
return map[type] || type
|
||||
}
|
||||
|
||||
async function fetchAgentApp() {
|
||||
loading.value = true
|
||||
try {
|
||||
const token = localStorage.getItem('token')
|
||||
const response = await fetch(`${API_BASE}/dev/agent-apps/${route.params.id}`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
})
|
||||
const data = await response.json()
|
||||
if (data.code === 200 && data.agent_app) {
|
||||
agentApp.value = data.agent_app
|
||||
form.value = {
|
||||
discount: data.agent_app.discount,
|
||||
status: data.agent_app.status,
|
||||
}
|
||||
const [agentAppRes, cardTypesRes] = await Promise.all([
|
||||
api.get<{ agent_app: AgentApp }>(`/dev/agent-apps/${agentAppId.value}`),
|
||||
api.get<{ card_types: Array<{ id: number, name: string, billing_type: string, price: number }> }>('/dev/card-types'),
|
||||
])
|
||||
|
||||
if (agentAppRes?.agent_app) {
|
||||
agentApp.value = agentAppRes.agent_app
|
||||
form.value.status = agentAppRes.agent_app.status || 'active'
|
||||
form.value.discount = agentAppRes.agent_app.discount || 1.0
|
||||
|
||||
const existingPerms = agentAppRes.agent_app.card_types || []
|
||||
const allCardTypes = cardTypesRes?.card_types || []
|
||||
|
||||
form.value.card_types = allCardTypes.map((ct) => {
|
||||
const existing = existingPerms.find((p: CardTypeAuth) => (p.card_type_id || p.id) === ct.id)
|
||||
return {
|
||||
card_type_id: ct.id,
|
||||
name: ct.name,
|
||||
billing_type: ct.billing_type,
|
||||
origin_price: ct.price,
|
||||
price: existing?.price || ct.price,
|
||||
can_generate: existing ? existing.can_generate : false,
|
||||
}
|
||||
})
|
||||
}
|
||||
else {
|
||||
toast.error('获取授权信息失败')
|
||||
@@ -51,6 +83,14 @@ async function fetchAgentApp() {
|
||||
}
|
||||
}
|
||||
|
||||
function selectAll() {
|
||||
form.value.card_types.forEach(ct => ct.can_generate = true)
|
||||
}
|
||||
|
||||
function clearAll() {
|
||||
form.value.card_types.forEach(ct => ct.can_generate = false)
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (form.value.discount < 0 || form.value.discount > 1) {
|
||||
toast.error('折扣必须在0-1之间')
|
||||
@@ -59,28 +99,25 @@ async function handleSubmit() {
|
||||
|
||||
saving.value = true
|
||||
try {
|
||||
const token = localStorage.getItem('token')
|
||||
const response = await fetch(`${API_BASE}/dev/agent-apps/${route.params.id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(form.value),
|
||||
await api.put(`/dev/agent-apps/${agentAppId.value}`, {
|
||||
status: form.value.status,
|
||||
discount: form.value.discount,
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
if (data.code === 200) {
|
||||
toast.success('保存成功')
|
||||
router.push('/admin/agent-apps')
|
||||
}
|
||||
else {
|
||||
toast.error(data.message || '保存失败')
|
||||
}
|
||||
await api.put(`/dev/agent-apps/${agentAppId.value}/card-types`, {
|
||||
card_types: form.value.card_types.map(ct => ({
|
||||
card_type_id: ct.card_type_id,
|
||||
can_generate: ct.can_generate,
|
||||
price: ct.price,
|
||||
})),
|
||||
})
|
||||
|
||||
toast.success('保存成功')
|
||||
router.push('/admin/agent-apps')
|
||||
}
|
||||
catch (error) {
|
||||
catch (error: any) {
|
||||
console.error('保存失败:', error)
|
||||
toast.error('保存失败')
|
||||
toast.error(error.message || '保存失败')
|
||||
}
|
||||
finally {
|
||||
saving.value = false
|
||||
@@ -91,6 +128,10 @@ function goBack() {
|
||||
router.push('/admin/agent-apps')
|
||||
}
|
||||
|
||||
function goToView() {
|
||||
router.push(`/admin/agent-apps/${agentAppId.value}/view`)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchAgentApp()
|
||||
})
|
||||
@@ -100,94 +141,236 @@ onMounted(() => {
|
||||
<BasicPage
|
||||
title="编辑授权"
|
||||
description="修改代理商授权信息"
|
||||
:breadcrumbs="[
|
||||
{ title: '授权管理', href: '/admin/agent-apps' },
|
||||
{ title: '编辑授权' },
|
||||
]"
|
||||
sticky
|
||||
>
|
||||
<template #actions>
|
||||
<UiButton variant="outline" @click="goBack">
|
||||
<ArrowLeft class="mr-2 h-4 w-4" />
|
||||
返回
|
||||
</UiButton>
|
||||
<UiButton variant="outline" @click="goToView">
|
||||
<Eye class="mr-2 h-4 w-4" />
|
||||
查看授权
|
||||
</UiButton>
|
||||
</template>
|
||||
|
||||
<div v-if="loading" class="flex items-center justify-center py-12">
|
||||
<Loader2 class="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="agentApp" class="max-w-2xl">
|
||||
<UiCard>
|
||||
<UiCardHeader>
|
||||
<UiCardTitle>授权信息</UiCardTitle>
|
||||
<UiCardDescription>
|
||||
代理商: {{ agentApp.agent_name }} | 应用: {{ agentApp.app_name }}
|
||||
</UiCardDescription>
|
||||
</UiCardHeader>
|
||||
<UiCardContent class="space-y-6">
|
||||
<div class="space-y-2">
|
||||
<UiLabel for="status">
|
||||
状态
|
||||
</UiLabel>
|
||||
<UiSelect v-model="form.status">
|
||||
<UiSelectTrigger>
|
||||
<UiSelectValue placeholder="请选择状态" />
|
||||
</UiSelectTrigger>
|
||||
<UiSelectContent>
|
||||
<UiSelectItem value="active">
|
||||
已授权
|
||||
</UiSelectItem>
|
||||
<UiSelectItem value="inactive">
|
||||
已禁用
|
||||
</UiSelectItem>
|
||||
</UiSelectContent>
|
||||
</UiSelect>
|
||||
</div>
|
||||
<div v-else-if="agentApp" class="space-y-6">
|
||||
<div class="grid gap-6 lg:grid-cols-3">
|
||||
<div class="lg:col-span-2 space-y-6">
|
||||
<UiCard>
|
||||
<UiCardHeader>
|
||||
<UiCardTitle>基本信息</UiCardTitle>
|
||||
<UiCardDescription>
|
||||
代理: {{ agentApp.agent_name }} | 应用: {{ agentApp.app_name }}
|
||||
</UiCardDescription>
|
||||
</UiCardHeader>
|
||||
<UiCardContent class="space-y-6">
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
<div class="space-y-2">
|
||||
<UiLabel>代理</UiLabel>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-medium">{{ agentApp.agent_name }}</span>
|
||||
<span v-if="agentApp.agent_email" class="text-xs text-muted-foreground">
|
||||
({{ agentApp.agent_email }})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<UiLabel>应用</UiLabel>
|
||||
<div class="flex items-center gap-2">
|
||||
<UiBadge variant="secondary">
|
||||
{{ agentApp.app_name }}
|
||||
</UiBadge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<UiLabel for="discount">
|
||||
折扣
|
||||
</UiLabel>
|
||||
<div class="flex items-center gap-4">
|
||||
<UiInput
|
||||
id="discount"
|
||||
v-model.number="form.discount"
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0"
|
||||
max="1"
|
||||
class="flex-1"
|
||||
/>
|
||||
<span class="text-sm text-muted-foreground w-20">
|
||||
{{ (form.discount * 10).toFixed(1) }}折
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
代理商购买卡密的折扣，范围0-1
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
<div class="space-y-2">
|
||||
<UiLabel for="status">状态</UiLabel>
|
||||
<UiSelect v-model="form.status">
|
||||
<UiSelectTrigger>
|
||||
<UiSelectValue placeholder="请选择状态" />
|
||||
</UiSelectTrigger>
|
||||
<UiSelectContent>
|
||||
<UiSelectItem value="active">
|
||||
已启用
|
||||
</UiSelectItem>
|
||||
<UiSelectItem value="inactive">
|
||||
已禁用
|
||||
</UiSelectItem>
|
||||
</UiSelectContent>
|
||||
</UiSelect>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<UiLabel>当前余额</UiLabel>
|
||||
<div class="text-2xl font-bold">
|
||||
¥{{ agentApp.balance.toFixed(2) }}
|
||||
</div>
|
||||
<UiButton
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@click="router.push(`/admin/agent-apps/${route.params.id}/recharge`)"
|
||||
>
|
||||
<Wallet class="mr-2 h-4 w-4" />
|
||||
充值余额
|
||||
</UiButton>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
<UiCardFooter class="flex justify-end gap-2">
|
||||
<UiButton variant="outline" @click="goBack">
|
||||
取消
|
||||
</UiButton>
|
||||
<UiButton :disabled="saving" @click="handleSubmit">
|
||||
<Loader2 v-if="saving" class="mr-2 h-4 w-4 animate-spin" />
|
||||
保存
|
||||
</UiButton>
|
||||
</UiCardFooter>
|
||||
</UiCard>
|
||||
<div class="space-y-2">
|
||||
<UiLabel for="discount">折扣</UiLabel>
|
||||
<div class="flex items-center gap-4">
|
||||
<UiNumberField
|
||||
v-model="form.discount"
|
||||
:min="0"
|
||||
:max="1"
|
||||
:step="0.01"
|
||||
class="flex-1"
|
||||
>
|
||||
<UiNumberFieldContent>
|
||||
<UiNumberFieldDecrement />
|
||||
<UiNumberFieldInput />
|
||||
<UiNumberFieldIncrement />
|
||||
</UiNumberFieldContent>
|
||||
</UiNumberField>
|
||||
<span class="text-sm text-muted-foreground w-16">
|
||||
{{ (form.discount * 10).toFixed(1) }}折
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
代理商购买卡密的折扣，范围0-1
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<UiLabel>当前余额</UiLabel>
|
||||
<div class="text-2xl font-bold text-primary">
|
||||
¥{{ (agentApp.balance || 0).toFixed(2) }}
|
||||
</div>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
|
||||
<UiCard>
|
||||
<UiCardHeader>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<UiCardTitle>卡密权限配置</UiCardTitle>
|
||||
<UiCardDescription>配置代理商可生成的卡密类型及价格</UiCardDescription>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<UiButton variant="outline" size="sm" @click="selectAll">
|
||||
<CheckCheck class="mr-2 h-4 w-4" />
|
||||
全选
|
||||
</UiButton>
|
||||
<UiButton variant="outline" size="sm" @click="clearAll">
|
||||
<X class="mr-2 h-4 w-4" />
|
||||
清空
|
||||
</UiButton>
|
||||
</div>
|
||||
</div>
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div v-if="form.card_types.length > 0">
|
||||
<UiTable>
|
||||
<UiTableHeader>
|
||||
<UiTableRow>
|
||||
<UiTableHead class="w-12" />
|
||||
<UiTableHead>卡类名称</UiTableHead>
|
||||
<UiTableHead>计费类型</UiTableHead>
|
||||
<UiTableHead>原价</UiTableHead>
|
||||
<UiTableHead>授权价格</UiTableHead>
|
||||
</UiTableRow>
|
||||
</UiTableHeader>
|
||||
<UiTableBody>
|
||||
<UiTableRow
|
||||
v-for="ct in form.card_types"
|
||||
:key="ct.card_type_id"
|
||||
:class="ct.can_generate ? 'bg-primary/5' : ''"
|
||||
class="cursor-pointer"
|
||||
@click="ct.can_generate = !ct.can_generate"
|
||||
>
|
||||
<UiTableCell>
|
||||
<UiCheckbox
|
||||
:checked="ct.can_generate"
|
||||
@update:checked="ct.can_generate = $event"
|
||||
@click.stop
|
||||
/>
|
||||
</UiTableCell>
|
||||
<UiTableCell class="font-medium">
|
||||
{{ ct.name }}
|
||||
</UiTableCell>
|
||||
<UiTableCell>
|
||||
<UiBadge variant="outline">
|
||||
{{ getBillingTypeText(ct.billing_type) }}
|
||||
</UiBadge>
|
||||
</UiTableCell>
|
||||
<UiTableCell>
|
||||
¥{{ ct.origin_price }}
|
||||
</UiTableCell>
|
||||
<UiTableCell @click.stop>
|
||||
<UiNumberField v-model="ct.price" :min="0" class="w-32">
|
||||
<UiNumberFieldContent>
|
||||
<UiNumberFieldDecrement />
|
||||
<UiNumberFieldInput />
|
||||
<UiNumberFieldIncrement />
|
||||
</UiNumberFieldContent>
|
||||
</UiNumberField>
|
||||
</UiTableCell>
|
||||
</UiTableRow>
|
||||
</UiTableBody>
|
||||
</UiTable>
|
||||
</div>
|
||||
<div v-else class="text-center py-8 text-muted-foreground">
|
||||
暂无卡密类型
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<UiCard>
|
||||
<UiCardHeader>
|
||||
<UiCardTitle>统计信息</UiCardTitle>
|
||||
</UiCardHeader>
|
||||
<UiCardContent class="space-y-4">
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-muted-foreground">卡类总数</span>
|
||||
<span class="font-medium">{{ form.card_types.length }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-muted-foreground">已授权</span>
|
||||
<span class="font-medium text-green-600">
|
||||
{{ form.card_types.filter(ct => ct.can_generate).length }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-muted-foreground">未授权</span>
|
||||
<span class="font-medium text-muted-foreground">
|
||||
{{ form.card_types.filter(ct => !ct.can_generate).length }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
|
||||
<UiCard>
|
||||
<UiCardContent class="pt-6">
|
||||
<div class="flex flex-col gap-3">
|
||||
<UiButton
|
||||
class="w-full"
|
||||
size="lg"
|
||||
:disabled="saving"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
<Loader2 v-if="saving" class="mr-2 h-4 w-4 animate-spin" />
|
||||
<Check v-else class="mr-2 h-4 w-4" />
|
||||
保存修改
|
||||
</UiButton>
|
||||
<UiButton variant="outline" class="w-full" @click="goBack">
|
||||
取消
|
||||
</UiButton>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BasicPage>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,232 @@
|
||||
<script setup lang="ts">
|
||||
import { ArrowLeft, CheckCircle, Key, Loader2, Pencil, XCircle } from 'lucide-vue-next'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { toast } from 'vue-sonner'
|
||||
|
||||
import type { AgentApp } from '@/pages/admin/agent-apps/data/schema'
|
||||
|
||||
import { BasicPage } from '@/components/global-layout'
|
||||
import api from '@/services/api'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const loading = ref(true)
|
||||
const agentApp = ref<AgentApp | null>(null)
|
||||
|
||||
const agentAppId = computed(() => route.params.id as string)
|
||||
|
||||
function getBillingTypeText(type: string) {
|
||||
const map: Record<string, string> = {
|
||||
subscription: '订阅',
|
||||
time: '计时',
|
||||
point: '点卡',
|
||||
}
|
||||
return map[type] || type
|
||||
}
|
||||
|
||||
async function fetchAgentApp() {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await api.get<{ agent_app: AgentApp }>(`/dev/agent-apps/${agentAppId.value}`)
|
||||
if (data?.agent_app) {
|
||||
agentApp.value = data.agent_app
|
||||
}
|
||||
else {
|
||||
toast.error('获取授权信息失败')
|
||||
router.push('/admin/agent-apps')
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取授权信息失败:', error)
|
||||
toast.error('获取授权信息失败')
|
||||
router.push('/admin/agent-apps')
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
router.push('/admin/agent-apps')
|
||||
}
|
||||
|
||||
function goToEdit() {
|
||||
router.push(`/admin/agent-apps/${agentAppId.value}/edit`)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchAgentApp()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicPage
|
||||
title="查看授权"
|
||||
description="查看授权详情信息"
|
||||
:breadcrumbs="[
|
||||
{ title: '授权管理', href: '/admin/agent-apps' },
|
||||
{ title: '查看授权' },
|
||||
]"
|
||||
sticky
|
||||
>
|
||||
<template #actions>
|
||||
<UiButton variant="outline" @click="goBack">
|
||||
<ArrowLeft class="mr-2 h-4 w-4" />
|
||||
返回
|
||||
</UiButton>
|
||||
<UiButton @click="goToEdit">
|
||||
<Pencil class="mr-2 h-4 w-4" />
|
||||
编辑授权
|
||||
</UiButton>
|
||||
</template>
|
||||
|
||||
<div v-if="loading" class="flex items-center justify-center py-12">
|
||||
<Loader2 class="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="agentApp" class="space-y-6">
|
||||
<div class="grid gap-6 lg:grid-cols-3">
|
||||
<div class="lg:col-span-2 space-y-6">
|
||||
<UiCard>
|
||||
<UiCardHeader>
|
||||
<UiCardTitle>基本信息</UiCardTitle>
|
||||
<UiCardDescription>授权的基本信息</UiCardDescription>
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
<div class="space-y-1">
|
||||
<span class="text-sm text-muted-foreground">代理</span>
|
||||
<p class="font-medium">{{ agentApp.agent_name }}</p>
|
||||
<p v-if="agentApp.agent_email" class="text-xs text-muted-foreground">
|
||||
{{ agentApp.agent_email }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<span class="text-sm text-muted-foreground">应用</span>
|
||||
<p class="font-medium">{{ agentApp.app_name }}</p>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<span class="text-sm text-muted-foreground">状态</span>
|
||||
<div>
|
||||
<UiBadge :variant="agentApp.status === 'active' ? 'default' : 'secondary'">
|
||||
<CheckCircle v-if="agentApp.status === 'active'" class="mr-1 h-3 w-3" />
|
||||
<XCircle v-else class="mr-1 h-3 w-3" />
|
||||
{{ agentApp.status === 'active' ? '已启用' : '已禁用' }}
|
||||
</UiBadge>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<span class="text-sm text-muted-foreground">折扣</span>
|
||||
<p class="font-medium">{{ (agentApp.discount * 10).toFixed(1) }}折</p>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<span class="text-sm text-muted-foreground">余额</span>
|
||||
<p class="font-medium text-primary">¥{{ (agentApp.balance || 0).toFixed(2) }}</p>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<span class="text-sm text-muted-foreground">授权时间</span>
|
||||
<p class="font-medium">{{ agentApp.created_at }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
|
||||
<UiCard>
|
||||
<UiCardHeader>
|
||||
<UiCardTitle class="flex items-center gap-2">
|
||||
<Key class="size-5" />
|
||||
卡密权限
|
||||
</UiCardTitle>
|
||||
<UiCardDescription>代理可生成的卡密类型及价格</UiCardDescription>
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div v-if="agentApp.card_types && agentApp.card_types.length > 0">
|
||||
<UiTable>
|
||||
<UiTableHeader>
|
||||
<UiTableRow>
|
||||
<UiTableHead>卡类名称</UiTableHead>
|
||||
<UiTableHead>计费类型</UiTableHead>
|
||||
<UiTableHead>原价</UiTableHead>
|
||||
<UiTableHead>授权价格</UiTableHead>
|
||||
<UiTableHead>状态</UiTableHead>
|
||||
</UiTableRow>
|
||||
</UiTableHeader>
|
||||
<UiTableBody>
|
||||
<UiTableRow v-for="ct in agentApp.card_types" :key="ct.card_type_id || ct.id">
|
||||
<UiTableCell class="font-medium">
|
||||
{{ ct.name }}
|
||||
</UiTableCell>
|
||||
<UiTableCell>
|
||||
<UiBadge variant="outline">
|
||||
{{ getBillingTypeText(ct.billing_type || '') }}
|
||||
</UiBadge>
|
||||
</UiTableCell>
|
||||
<UiTableCell>
|
||||
¥{{ ct.origin_price || 0 }}
|
||||
</UiTableCell>
|
||||
<UiTableCell>
|
||||
¥{{ ct.price || 0 }}
|
||||
</UiTableCell>
|
||||
<UiTableCell>
|
||||
<UiBadge :variant="ct.can_generate ? 'default' : 'secondary'">
|
||||
{{ ct.can_generate ? '已授权' : '未授权' }}
|
||||
</UiBadge>
|
||||
</UiTableCell>
|
||||
</UiTableRow>
|
||||
</UiTableBody>
|
||||
</UiTable>
|
||||
</div>
|
||||
<div v-else class="text-center py-8 text-muted-foreground">
|
||||
暂无卡密权限
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<UiCard>
|
||||
<UiCardHeader>
|
||||
<UiCardTitle>统计信息</UiCardTitle>
|
||||
</UiCardHeader>
|
||||
<UiCardContent class="space-y-4">
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-muted-foreground">卡类总数</span>
|
||||
<span class="font-medium">{{ agentApp.card_types?.length || 0 }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-muted-foreground">已授权</span>
|
||||
<span class="font-medium text-green-600">
|
||||
{{ agentApp.card_types?.filter(ct => ct.can_generate).length || 0 }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-muted-foreground">未授权</span>
|
||||
<span class="font-medium text-muted-foreground">
|
||||
{{ agentApp.card_types?.filter(ct => !ct.can_generate).length || 0 }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
|
||||
<UiCard>
|
||||
<UiCardContent class="pt-6">
|
||||
<div class="flex flex-col gap-3">
|
||||
<UiButton class="w-full" @click="goToEdit">
|
||||
<Pencil class="mr-2 h-4 w-4" />
|
||||
编辑授权
|
||||
</UiButton>
|
||||
<UiButton variant="outline" class="w-full" @click="goBack">
|
||||
返回列表
|
||||
</UiButton>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BasicPage>
|
||||
</template>
|
||||
@@ -17,17 +17,6 @@ const agentApps = ref<AgentApp[]>([])
|
||||
const showRemoveDialog = ref(false)
|
||||
const removingItem = ref<AgentApp | null>(null)
|
||||
|
||||
const viewDialogOpen = ref(false)
|
||||
const viewItem = ref<AgentApp | null>(null)
|
||||
|
||||
const editDialogOpen = ref(false)
|
||||
const editItem = ref<AgentApp | null>(null)
|
||||
const editSaving = ref(false)
|
||||
const editForm = ref({
|
||||
status: 'active',
|
||||
card_types: [] as Array<{ card_type_id: number, can_generate: boolean, price: number, name: string }>,
|
||||
})
|
||||
|
||||
const activeCount = computed(() => agentApps.value.filter(app => app.status === 'active').length)
|
||||
const inactiveCount = computed(() => agentApps.value.filter(app => app.status === 'inactive').length)
|
||||
const totalBalance = computed(() => agentApps.value.reduce((sum, app) => sum + (app.balance || 0), 0))
|
||||
@@ -71,52 +60,11 @@ function goToCreate() {
|
||||
}
|
||||
|
||||
function handleView(item: AgentApp) {
|
||||
viewItem.value = item
|
||||
viewDialogOpen.value = true
|
||||
router.push(`/admin/agent-apps/${item.id}/view`)
|
||||
}
|
||||
|
||||
function handleEdit(item: AgentApp) {
|
||||
editItem.value = item
|
||||
editForm.value = {
|
||||
status: item.status || 'active',
|
||||
card_types: (item.card_types || []).map(ct => ({
|
||||
card_type_id: ct.card_type_id || ct.id,
|
||||
can_generate: ct.can_generate,
|
||||
price: ct.price || 0,
|
||||
name: ct.name || '',
|
||||
})),
|
||||
}
|
||||
editDialogOpen.value = true
|
||||
}
|
||||
|
||||
async function handleEditSubmit() {
|
||||
if (!editItem.value) return
|
||||
|
||||
editSaving.value = true
|
||||
try {
|
||||
await api.put(`/dev/agent-apps/${editItem.value.id}`, {
|
||||
status: editForm.value.status,
|
||||
})
|
||||
|
||||
await api.put(`/dev/agent-apps/${editItem.value.id}/card-types`, {
|
||||
card_types: editForm.value.card_types.map(ct => ({
|
||||
card_type_id: ct.card_type_id,
|
||||
can_generate: ct.can_generate,
|
||||
price: ct.price,
|
||||
})),
|
||||
})
|
||||
|
||||
toast.success('保存成功')
|
||||
editDialogOpen.value = false
|
||||
fetchData()
|
||||
}
|
||||
catch (error: any) {
|
||||
console.error('保存失败:', error)
|
||||
toast.error(error.message || '保存失败')
|
||||
}
|
||||
finally {
|
||||
editSaving.value = false
|
||||
}
|
||||
router.push(`/admin/agent-apps/${item.id}/edit`)
|
||||
}
|
||||
|
||||
function confirmRemove(item: AgentApp) {
|
||||
@@ -346,157 +294,5 @@ onMounted(() => {
|
||||
confirm-text="确定移除"
|
||||
@confirm="handleRemove"
|
||||
/>
|
||||
|
||||
<UiDialog v-model:open="viewDialogOpen">
|
||||
<UiDialogContent class="sm:max-w-lg">
|
||||
<UiDialogHeader>
|
||||
<UiDialogTitle>查看授权</UiDialogTitle>
|
||||
<UiDialogDescription>
|
||||
{{ viewItem?.agent_name }} - {{ viewItem?.app_name }}
|
||||
</UiDialogDescription>
|
||||
</UiDialogHeader>
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<span class="text-sm text-muted-foreground">代理</span>
|
||||
<p class="font-medium">{{ viewItem?.agent_name }}</p>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<span class="text-sm text-muted-foreground">应用</span>
|
||||
<p class="font-medium">{{ viewItem?.app_name }}</p>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<span class="text-sm text-muted-foreground">状态</span>
|
||||
<UiBadge :variant="viewItem?.status === 'active' ? 'default' : 'secondary'">
|
||||
{{ viewItem?.status === 'active' ? '已启用' : '已禁用' }}
|
||||
</UiBadge>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<span class="text-sm text-muted-foreground">余额</span>
|
||||
<p class="font-medium">¥{{ (viewItem?.balance || 0).toFixed(2) }}</p>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<span class="text-sm text-muted-foreground">授权时间</span>
|
||||
<p class="font-medium">{{ viewItem?.created_at }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<span class="text-sm text-muted-foreground">卡密权限</span>
|
||||
<div v-if="viewItem?.card_types && viewItem.card_types.length > 0" class="border rounded-lg">
|
||||
<UiTable>
|
||||
<UiTableHeader>
|
||||
<UiTableRow>
|
||||
<UiTableHead>卡类名称</UiTableHead>
|
||||
<UiTableHead>授权价格</UiTableHead>
|
||||
<UiTableHead>状态</UiTableHead>
|
||||
</UiTableRow>
|
||||
</UiTableHeader>
|
||||
<UiTableBody>
|
||||
<UiTableRow v-for="ct in viewItem.card_types" :key="ct.card_type_id || ct.id">
|
||||
<UiTableCell>{{ ct.name }}</UiTableCell>
|
||||
<UiTableCell>¥{{ ct.price || 0 }}</UiTableCell>
|
||||
<UiTableCell>
|
||||
<UiBadge :variant="ct.can_generate ? 'default' : 'secondary'">
|
||||
{{ ct.can_generate ? '已授权' : '未授权' }}
|
||||
</UiBadge>
|
||||
</UiTableCell>
|
||||
</UiTableRow>
|
||||
</UiTableBody>
|
||||
</UiTable>
|
||||
</div>
|
||||
<p v-else class="text-muted-foreground text-sm">暂无卡密权限</p>
|
||||
</div>
|
||||
</div>
|
||||
<UiDialogFooter>
|
||||
<UiButton variant="outline" @click="viewDialogOpen = false">
|
||||
关闭
|
||||
</UiButton>
|
||||
</UiDialogFooter>
|
||||
</UiDialogContent>
|
||||
</UiDialog>
|
||||
|
||||
<UiDialog v-model:open="editDialogOpen">
|
||||
<UiDialogContent class="sm:max-w-2xl">
|
||||
<UiDialogHeader>
|
||||
<UiDialogTitle>编辑授权</UiDialogTitle>
|
||||
<UiDialogDescription>
|
||||
{{ editItem?.agent_name }} - {{ editItem?.app_name }}
|
||||
</UiDialogDescription>
|
||||
</UiDialogHeader>
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<UiLabel>状态</UiLabel>
|
||||
<UiSelect v-model="editForm.status">
|
||||
<UiSelectTrigger>
|
||||
<UiSelectValue placeholder="请选择状态" />
|
||||
</UiSelectTrigger>
|
||||
<UiSelectContent>
|
||||
<UiSelectItem value="active">
|
||||
已启用
|
||||
</UiSelectItem>
|
||||
<UiSelectItem value="inactive">
|
||||
已禁用
|
||||
</UiSelectItem>
|
||||
</UiSelectContent>
|
||||
</UiSelect>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<UiLabel>卡密权限</UiLabel>
|
||||
<div v-if="editForm.card_types.length > 0" class="border rounded-lg">
|
||||
<UiTable>
|
||||
<UiTableHeader>
|
||||
<UiTableRow>
|
||||
<UiTableHead class="w-12" />
|
||||
<UiTableHead>卡类名称</UiTableHead>
|
||||
<UiTableHead>授权价格</UiTableHead>
|
||||
</UiTableRow>
|
||||
</UiTableHeader>
|
||||
<UiTableBody>
|
||||
<UiTableRow
|
||||
v-for="ct in editForm.card_types"
|
||||
:key="ct.card_type_id"
|
||||
:class="ct.can_generate ? 'bg-primary/10' : ''"
|
||||
class="cursor-pointer"
|
||||
@click="ct.can_generate = !ct.can_generate"
|
||||
>
|
||||
<UiTableCell>
|
||||
<UiCheckbox
|
||||
:checked="ct.can_generate"
|
||||
@update:checked="ct.can_generate = $event"
|
||||
@click.stop
|
||||
/>
|
||||
</UiTableCell>
|
||||
<UiTableCell class="font-medium">
|
||||
{{ ct.name }}
|
||||
</UiTableCell>
|
||||
<UiTableCell @click.stop>
|
||||
<UiNumberField v-model="ct.price" :min="0" class="w-28">
|
||||
<UiNumberFieldContent>
|
||||
<UiNumberFieldDecrement />
|
||||
<UiNumberFieldInput />
|
||||
<UiNumberFieldIncrement />
|
||||
</UiNumberFieldContent>
|
||||
</UiNumberField>
|
||||
</UiTableCell>
|
||||
</UiTableRow>
|
||||
</UiTableBody>
|
||||
</UiTable>
|
||||
</div>
|
||||
<p v-else class="text-muted-foreground text-sm">暂无卡密权限</p>
|
||||
</div>
|
||||
</div>
|
||||
<UiDialogFooter>
|
||||
<UiButton variant="outline" @click="editDialogOpen = false">
|
||||
取消
|
||||
</UiButton>
|
||||
<UiButton :disabled="editSaving" @click="handleEditSubmit">
|
||||
<span v-if="editSaving" class="i-lucide-loader-2 mr-2 h-4 w-4 animate-spin" />
|
||||
保存
|
||||
</UiButton>
|
||||
</UiDialogFooter>
|
||||
</UiDialogContent>
|
||||
</UiDialog>
|
||||
</BasicPage>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user