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">
|
<script setup lang="ts">
|
||||||
import { ArrowLeft, Loader2, Wallet } from 'lucide-vue-next'
|
import { ArrowLeft, Check, CheckCheck, Eye, Loader2, X } from 'lucide-vue-next'
|
||||||
import { onMounted, ref } from 'vue'
|
import { computed, onMounted, ref } from 'vue'
|
||||||
import { useRoute, useRouter } from 'vue-router'
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
import { toast } from 'vue-sonner'
|
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 { BasicPage } from '@/components/global-layout'
|
||||||
import { API_BASE } from '@/utils/config'
|
import api from '@/services/api'
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
@@ -17,24 +17,56 @@ const saving = ref(false)
|
|||||||
const agentApp = ref<AgentApp | null>(null)
|
const agentApp = ref<AgentApp | null>(null)
|
||||||
|
|
||||||
const form = ref({
|
const form = ref({
|
||||||
discount: 1.0,
|
|
||||||
status: 'active',
|
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() {
|
async function fetchAgentApp() {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
try {
|
try {
|
||||||
const token = localStorage.getItem('token')
|
const [agentAppRes, cardTypesRes] = await Promise.all([
|
||||||
const response = await fetch(`${API_BASE}/dev/agent-apps/${route.params.id}`, {
|
api.get<{ agent_app: AgentApp }>(`/dev/agent-apps/${agentAppId.value}`),
|
||||||
headers: { Authorization: `Bearer ${token}` },
|
api.get<{ card_types: Array<{ id: number, name: string, billing_type: string, price: number }> }>('/dev/card-types'),
|
||||||
})
|
])
|
||||||
const data = await response.json()
|
|
||||||
if (data.code === 200 && data.agent_app) {
|
if (agentAppRes?.agent_app) {
|
||||||
agentApp.value = data.agent_app
|
agentApp.value = agentAppRes.agent_app
|
||||||
form.value = {
|
form.value.status = agentAppRes.agent_app.status || 'active'
|
||||||
discount: data.agent_app.discount,
|
form.value.discount = agentAppRes.agent_app.discount || 1.0
|
||||||
status: data.agent_app.status,
|
|
||||||
}
|
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 {
|
else {
|
||||||
toast.error('获取授权信息失败')
|
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() {
|
async function handleSubmit() {
|
||||||
if (form.value.discount < 0 || form.value.discount > 1) {
|
if (form.value.discount < 0 || form.value.discount > 1) {
|
||||||
toast.error('折扣必须在0-1之间')
|
toast.error('折扣必须在0-1之间')
|
||||||
@@ -59,28 +99,25 @@ async function handleSubmit() {
|
|||||||
|
|
||||||
saving.value = true
|
saving.value = true
|
||||||
try {
|
try {
|
||||||
const token = localStorage.getItem('token')
|
await api.put(`/dev/agent-apps/${agentAppId.value}`, {
|
||||||
const response = await fetch(`${API_BASE}/dev/agent-apps/${route.params.id}`, {
|
status: form.value.status,
|
||||||
method: 'PUT',
|
discount: form.value.discount,
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${token}`,
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify(form.value),
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const data = await response.json()
|
await api.put(`/dev/agent-apps/${agentAppId.value}/card-types`, {
|
||||||
if (data.code === 200) {
|
card_types: form.value.card_types.map(ct => ({
|
||||||
toast.success('保存成功')
|
card_type_id: ct.card_type_id,
|
||||||
router.push('/admin/agent-apps')
|
can_generate: ct.can_generate,
|
||||||
}
|
price: ct.price,
|
||||||
else {
|
})),
|
||||||
toast.error(data.message || '保存失败')
|
})
|
||||||
}
|
|
||||||
|
toast.success('保存成功')
|
||||||
|
router.push('/admin/agent-apps')
|
||||||
}
|
}
|
||||||
catch (error) {
|
catch (error: any) {
|
||||||
console.error('保存失败:', error)
|
console.error('保存失败:', error)
|
||||||
toast.error('保存失败')
|
toast.error(error.message || '保存失败')
|
||||||
}
|
}
|
||||||
finally {
|
finally {
|
||||||
saving.value = false
|
saving.value = false
|
||||||
@@ -91,6 +128,10 @@ function goBack() {
|
|||||||
router.push('/admin/agent-apps')
|
router.push('/admin/agent-apps')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function goToView() {
|
||||||
|
router.push(`/admin/agent-apps/${agentAppId.value}/view`)
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
fetchAgentApp()
|
fetchAgentApp()
|
||||||
})
|
})
|
||||||
@@ -100,94 +141,236 @@ onMounted(() => {
|
|||||||
<BasicPage
|
<BasicPage
|
||||||
title="编辑授权"
|
title="编辑授权"
|
||||||
description="修改代理商授权信息"
|
description="修改代理商授权信息"
|
||||||
|
:breadcrumbs="[
|
||||||
|
{ title: '授权管理', href: '/admin/agent-apps' },
|
||||||
|
{ title: '编辑授权' },
|
||||||
|
]"
|
||||||
|
sticky
|
||||||
>
|
>
|
||||||
<template #actions>
|
<template #actions>
|
||||||
<UiButton variant="outline" @click="goBack">
|
<UiButton variant="outline" @click="goBack">
|
||||||
<ArrowLeft class="mr-2 h-4 w-4" />
|
<ArrowLeft class="mr-2 h-4 w-4" />
|
||||||
返回
|
返回
|
||||||
</UiButton>
|
</UiButton>
|
||||||
|
<UiButton variant="outline" @click="goToView">
|
||||||
|
<Eye class="mr-2 h-4 w-4" />
|
||||||
|
查看授权
|
||||||
|
</UiButton>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<div v-if="loading" class="flex items-center justify-center py-12">
|
<div v-if="loading" class="flex items-center justify-center py-12">
|
||||||
<Loader2 class="h-8 w-8 animate-spin text-muted-foreground" />
|
<Loader2 class="h-8 w-8 animate-spin text-muted-foreground" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else-if="agentApp" class="max-w-2xl">
|
<div v-else-if="agentApp" class="space-y-6">
|
||||||
<UiCard>
|
<div class="grid gap-6 lg:grid-cols-3">
|
||||||
<UiCardHeader>
|
<div class="lg:col-span-2 space-y-6">
|
||||||
<UiCardTitle>授权信息</UiCardTitle>
|
<UiCard>
|
||||||
<UiCardDescription>
|
<UiCardHeader>
|
||||||
代理商: {{ agentApp.agent_name }} | 应用: {{ agentApp.app_name }}
|
<UiCardTitle>基本信息</UiCardTitle>
|
||||||
</UiCardDescription>
|
<UiCardDescription>
|
||||||
</UiCardHeader>
|
代理: {{ agentApp.agent_name }} | 应用: {{ agentApp.app_name }}
|
||||||
<UiCardContent class="space-y-6">
|
</UiCardDescription>
|
||||||
<div class="space-y-2">
|
</UiCardHeader>
|
||||||
<UiLabel for="status">
|
<UiCardContent class="space-y-6">
|
||||||
状态
|
<div class="grid grid-cols-2 gap-6">
|
||||||
</UiLabel>
|
<div class="space-y-2">
|
||||||
<UiSelect v-model="form.status">
|
<UiLabel>代理</UiLabel>
|
||||||
<UiSelectTrigger>
|
<div class="flex items-center gap-2">
|
||||||
<UiSelectValue placeholder="请选择状态" />
|
<span class="font-medium">{{ agentApp.agent_name }}</span>
|
||||||
</UiSelectTrigger>
|
<span v-if="agentApp.agent_email" class="text-xs text-muted-foreground">
|
||||||
<UiSelectContent>
|
({{ agentApp.agent_email }})
|
||||||
<UiSelectItem value="active">
|
</span>
|
||||||
已授权
|
</div>
|
||||||
</UiSelectItem>
|
</div>
|
||||||
<UiSelectItem value="inactive">
|
<div class="space-y-2">
|
||||||
已禁用
|
<UiLabel>应用</UiLabel>
|
||||||
</UiSelectItem>
|
<div class="flex items-center gap-2">
|
||||||
</UiSelectContent>
|
<UiBadge variant="secondary">
|
||||||
</UiSelect>
|
{{ agentApp.app_name }}
|
||||||
</div>
|
</UiBadge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="space-y-2">
|
<div class="grid grid-cols-2 gap-6">
|
||||||
<UiLabel for="discount">
|
<div class="space-y-2">
|
||||||
折扣
|
<UiLabel for="status">状态</UiLabel>
|
||||||
</UiLabel>
|
<UiSelect v-model="form.status">
|
||||||
<div class="flex items-center gap-4">
|
<UiSelectTrigger>
|
||||||
<UiInput
|
<UiSelectValue placeholder="请选择状态" />
|
||||||
id="discount"
|
</UiSelectTrigger>
|
||||||
v-model.number="form.discount"
|
<UiSelectContent>
|
||||||
type="number"
|
<UiSelectItem value="active">
|
||||||
step="0.01"
|
已启用
|
||||||
min="0"
|
</UiSelectItem>
|
||||||
max="1"
|
<UiSelectItem value="inactive">
|
||||||
class="flex-1"
|
已禁用
|
||||||
/>
|
</UiSelectItem>
|
||||||
<span class="text-sm text-muted-foreground w-20">
|
</UiSelectContent>
|
||||||
{{ (form.discount * 10).toFixed(1) }}折
|
</UiSelect>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
|
||||||
<p class="text-xs text-muted-foreground">
|
|
||||||
代理商购买卡密的折扣，范围0-1
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<UiLabel>当前余额</UiLabel>
|
<UiLabel for="discount">折扣</UiLabel>
|
||||||
<div class="text-2xl font-bold">
|
<div class="flex items-center gap-4">
|
||||||
¥{{ agentApp.balance.toFixed(2) }}
|
<UiNumberField
|
||||||
</div>
|
v-model="form.discount"
|
||||||
<UiButton
|
:min="0"
|
||||||
variant="outline"
|
:max="1"
|
||||||
size="sm"
|
:step="0.01"
|
||||||
@click="router.push(`/admin/agent-apps/${route.params.id}/recharge`)"
|
class="flex-1"
|
||||||
>
|
>
|
||||||
<Wallet class="mr-2 h-4 w-4" />
|
<UiNumberFieldContent>
|
||||||
充值余额
|
<UiNumberFieldDecrement />
|
||||||
</UiButton>
|
<UiNumberFieldInput />
|
||||||
</div>
|
<UiNumberFieldIncrement />
|
||||||
</UiCardContent>
|
</UiNumberFieldContent>
|
||||||
<UiCardFooter class="flex justify-end gap-2">
|
</UiNumberField>
|
||||||
<UiButton variant="outline" @click="goBack">
|
<span class="text-sm text-muted-foreground w-16">
|
||||||
取消
|
{{ (form.discount * 10).toFixed(1) }}折
|
||||||
</UiButton>
|
</span>
|
||||||
<UiButton :disabled="saving" @click="handleSubmit">
|
</div>
|
||||||
<Loader2 v-if="saving" class="mr-2 h-4 w-4 animate-spin" />
|
<p class="text-xs text-muted-foreground">
|
||||||
保存
|
代理商购买卡密的折扣，范围0-1
|
||||||
</UiButton>
|
</p>
|
||||||
</UiCardFooter>
|
</div>
|
||||||
</UiCard>
|
</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>
|
</div>
|
||||||
</BasicPage>
|
</BasicPage>
|
||||||
</template>
|
</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 showRemoveDialog = ref(false)
|
||||||
const removingItem = ref<AgentApp | null>(null)
|
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 activeCount = computed(() => agentApps.value.filter(app => app.status === 'active').length)
|
||||||
const inactiveCount = computed(() => agentApps.value.filter(app => app.status === 'inactive').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))
|
const totalBalance = computed(() => agentApps.value.reduce((sum, app) => sum + (app.balance || 0), 0))
|
||||||
@@ -71,52 +60,11 @@ function goToCreate() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function handleView(item: AgentApp) {
|
function handleView(item: AgentApp) {
|
||||||
viewItem.value = item
|
router.push(`/admin/agent-apps/${item.id}/view`)
|
||||||
viewDialogOpen.value = true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleEdit(item: AgentApp) {
|
function handleEdit(item: AgentApp) {
|
||||||
editItem.value = item
|
router.push(`/admin/agent-apps/${item.id}/edit`)
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function confirmRemove(item: AgentApp) {
|
function confirmRemove(item: AgentApp) {
|
||||||
@@ -346,157 +294,5 @@ onMounted(() => {
|
|||||||
confirm-text="确定移除"
|
confirm-text="确定移除"
|
||||||
@confirm="handleRemove"
|
@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>
|
</BasicPage>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user