feat: 新建授权改为独立页面，修复代理列表获取和卡片颜色
This commit is contained in:
@@ -0,0 +1,365 @@
|
||||
<script setup lang="ts">
|
||||
import { CheckCheck, Eye, Key, Loader2, Share2, X } from 'lucide-vue-next'
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { toast } from 'vue-sonner'
|
||||
|
||||
import { BasicPage } from '@/components/global-layout'
|
||||
import api from '@/services/api'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
interface Agent {
|
||||
id: number
|
||||
username: string
|
||||
email?: string
|
||||
status: string
|
||||
}
|
||||
|
||||
interface Application {
|
||||
id: number
|
||||
name: string
|
||||
}
|
||||
|
||||
interface CardType {
|
||||
id: number
|
||||
name: string
|
||||
billing_type: string
|
||||
price: number
|
||||
}
|
||||
|
||||
const saving = ref(false)
|
||||
const agents = ref<Agent[]>([])
|
||||
const applications = ref<Application[]>([])
|
||||
const cardTypes = ref<CardType[]>([])
|
||||
|
||||
const form = ref({
|
||||
agent_id: '',
|
||||
application_id: '',
|
||||
discount: 1.0,
|
||||
card_types: [] as Array<{ card_type_id: number, can_generate: boolean }>,
|
||||
})
|
||||
|
||||
async function fetchAgents() {
|
||||
try {
|
||||
const data = await api.get<{ agents: Agent[] }>('/dev/agents')
|
||||
agents.value = Array.isArray(data?.agents) ? data.agents : []
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取代理列表失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchApplications() {
|
||||
try {
|
||||
const data = await api.get<{ applications: Application[] }>('/dev/applications')
|
||||
applications.value = Array.isArray(data?.applications) ? data.applications : []
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取应用列表失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchCardTypes(applicationId: string) {
|
||||
if (!applicationId) {
|
||||
cardTypes.value = []
|
||||
form.value.card_types = []
|
||||
return
|
||||
}
|
||||
try {
|
||||
const data = await api.get<{ card_types: CardType[] }>(`/dev/card-types?application_id=${applicationId}`)
|
||||
cardTypes.value = Array.isArray(data?.card_types) ? data.card_types : []
|
||||
form.value.card_types = cardTypes.value.map(ct => ({
|
||||
card_type_id: ct.id,
|
||||
can_generate: false,
|
||||
}))
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取卡类列表失败:', error)
|
||||
cardTypes.value = []
|
||||
form.value.card_types = []
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => form.value.application_id, (newVal) => {
|
||||
fetchCardTypes(newVal)
|
||||
})
|
||||
|
||||
const selectedAgent = computed(() => {
|
||||
if (form.value.agent_id) {
|
||||
return agents.value.find(a => String(a.id) === form.value.agent_id)
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
const selectedApplication = computed(() => {
|
||||
if (form.value.application_id) {
|
||||
return applications.value.find(app => String(app.id) === form.value.application_id)
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
const enabledCardTypesCount = computed(() => {
|
||||
return form.value.card_types.filter(ct => ct.can_generate).length
|
||||
})
|
||||
|
||||
function getBillingTypeText(type: string) {
|
||||
const map: Record<string, string> = {
|
||||
subscription: '订阅',
|
||||
time: '计时',
|
||||
point: '点卡',
|
||||
}
|
||||
return map[type] || type
|
||||
}
|
||||
|
||||
function selectAllCardTypes() {
|
||||
form.value.card_types.forEach(ct => ct.can_generate = true)
|
||||
}
|
||||
|
||||
function clearAllCardTypes() {
|
||||
form.value.card_types.forEach(ct => ct.can_generate = false)
|
||||
}
|
||||
|
||||
const isFormValid = computed(() => {
|
||||
return form.value.agent_id && form.value.application_id
|
||||
})
|
||||
|
||||
async function handleSave() {
|
||||
if (!form.value.agent_id) {
|
||||
toast.error('请选择代理')
|
||||
return
|
||||
}
|
||||
if (!form.value.application_id) {
|
||||
toast.error('请选择应用')
|
||||
return
|
||||
}
|
||||
|
||||
saving.value = true
|
||||
try {
|
||||
await api.post('/dev/agent-apps/authorize', {
|
||||
agent_id: Number(form.value.agent_id),
|
||||
application_id: Number(form.value.application_id),
|
||||
discount: form.value.discount,
|
||||
card_types: form.value.card_types,
|
||||
})
|
||||
toast.success('授权成功')
|
||||
router.push('/admin/agent-apps')
|
||||
}
|
||||
catch (error: any) {
|
||||
console.error('授权失败:', error)
|
||||
toast.error(error.message || '授权失败')
|
||||
}
|
||||
finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchAgents()
|
||||
fetchApplications()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicPage
|
||||
title="新建授权"
|
||||
description="为代理分配应用卡密权限"
|
||||
:breadcrumbs="[
|
||||
{ title: '授权管理', href: '/admin/agent-apps' },
|
||||
{ title: '新建授权' },
|
||||
]"
|
||||
sticky
|
||||
>
|
||||
<div 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 class="flex items-center gap-2">
|
||||
<Share2 class="size-5" />
|
||||
基本信息
|
||||
</UiCardTitle>
|
||||
<UiCardDescription>选择要授权的代理和应用</UiCardDescription>
|
||||
</UiCardHeader>
|
||||
<UiCardContent class="space-y-6">
|
||||
<div class="space-y-2">
|
||||
<UiLabel>选择代理</UiLabel>
|
||||
<UiSelect v-model="form.agent_id">
|
||||
<UiSelectTrigger>
|
||||
<UiSelectValue placeholder="请选择代理" />
|
||||
</UiSelectTrigger>
|
||||
<UiSelectContent>
|
||||
<UiSelectItem
|
||||
v-for="agent in agents"
|
||||
:key="agent.id"
|
||||
:value="String(agent.id)"
|
||||
>
|
||||
{{ agent.username }}
|
||||
<span v-if="agent.email" class="text-muted-foreground ml-1">({{ agent.email }})</span>
|
||||
</UiSelectItem>
|
||||
</UiSelectContent>
|
||||
</UiSelect>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<UiLabel>选择应用</UiLabel>
|
||||
<UiSelect v-model="form.application_id">
|
||||
<UiSelectTrigger>
|
||||
<UiSelectValue placeholder="请选择应用" />
|
||||
</UiSelectTrigger>
|
||||
<UiSelectContent>
|
||||
<UiSelectItem
|
||||
v-for="app in applications"
|
||||
:key="app.id"
|
||||
:value="String(app.id)"
|
||||
>
|
||||
{{ app.name }}
|
||||
</UiSelectItem>
|
||||
</UiSelectContent>
|
||||
</UiSelect>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<UiLabel>折扣</UiLabel>
|
||||
<div class="flex items-center gap-4">
|
||||
<UiInput
|
||||
v-model.number="form.discount"
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0.01"
|
||||
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.01-1
|
||||
</p>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
|
||||
<UiCard v-if="cardTypes.length > 0">
|
||||
<UiCardHeader>
|
||||
<UiCardTitle class="flex items-center gap-2">
|
||||
<Key class="size-5" />
|
||||
卡密权限
|
||||
</UiCardTitle>
|
||||
<UiCardDescription>配置代理可生成的卡密类型</UiCardDescription>
|
||||
</UiCardHeader>
|
||||
<UiCardContent class="space-y-4">
|
||||
<div class="flex gap-2">
|
||||
<UiButton variant="outline" size="sm" @click="selectAllCardTypes">
|
||||
<CheckCheck class="mr-2 h-4 w-4" />
|
||||
全选
|
||||
</UiButton>
|
||||
<UiButton variant="outline" size="sm" @click="clearAllCardTypes">
|
||||
<X class="mr-2 h-4 w-4" />
|
||||
清空
|
||||
</UiButton>
|
||||
</div>
|
||||
|
||||
<div class="border rounded-lg">
|
||||
<UiTable>
|
||||
<UiTableHeader>
|
||||
<UiTableRow>
|
||||
<UiTableHead class="w-12" />
|
||||
<UiTableHead>卡类名称</UiTableHead>
|
||||
<UiTableHead>计费类型</UiTableHead>
|
||||
<UiTableHead>价格</UiTableHead>
|
||||
</UiTableRow>
|
||||
</UiTableHeader>
|
||||
<UiTableBody>
|
||||
<UiTableRow
|
||||
v-for="(ct, index) in form.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">
|
||||
{{ cardTypes[index]?.name || `卡类 #${ct.card_type_id}` }}
|
||||
</UiTableCell>
|
||||
<UiTableCell>
|
||||
<UiBadge variant="outline">
|
||||
{{ getBillingTypeText(cardTypes[index]?.billing_type || '') }}
|
||||
</UiBadge>
|
||||
</UiTableCell>
|
||||
<UiTableCell>
|
||||
¥{{ cardTypes[index]?.price || 0 }}
|
||||
</UiTableCell>
|
||||
</UiTableRow>
|
||||
</UiTableBody>
|
||||
</UiTable>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<UiCard>
|
||||
<UiCardHeader>
|
||||
<UiCardTitle class="flex items-center gap-2">
|
||||
<Eye class="size-5" />
|
||||
预览
|
||||
</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>{{ selectedAgent?.username || '-' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-muted-foreground">应用</span>
|
||||
<span>{{ selectedApplication?.name || '-' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-muted-foreground">折扣</span>
|
||||
<span>{{ (form.discount * 10).toFixed(1) }}折</span>
|
||||
</div>
|
||||
<div v-if="cardTypes.length > 0" class="flex justify-between text-sm">
|
||||
<span class="text-muted-foreground">卡密权限</span>
|
||||
<span class="text-primary">{{ enabledCardTypesCount }}/{{ cardTypes.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 || !isFormValid"
|
||||
@click="handleSave"
|
||||
>
|
||||
<Loader2 v-if="saving" class="mr-2 h-4 w-4 animate-spin" />
|
||||
<Share2 v-else class="mr-2 h-4 w-4" />
|
||||
确认授权
|
||||
</UiButton>
|
||||
<UiButton
|
||||
variant="outline"
|
||||
class="w-full"
|
||||
@click="router.back()"
|
||||
>
|
||||
取消
|
||||
</UiButton>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BasicPage>
|
||||
</template>
|
||||
@@ -1,7 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { CheckCircle, Key, Plus, Share2, Wallet, XCircle } from 'lucide-vue-next'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { toast } from 'vue-sonner'
|
||||
|
||||
@@ -11,26 +10,12 @@ import ConfirmDialog from '@/components/confirm-dialog.vue'
|
||||
import { BasicPage } from '@/components/global-layout'
|
||||
import api from '@/services/api'
|
||||
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
|
||||
const loading = ref(true)
|
||||
const agentApps = ref<AgentApp[]>([])
|
||||
const showRemoveDialog = ref(false)
|
||||
const removingItem = ref<AgentApp | null>(null)
|
||||
const showAuthorizeDialog = ref(false)
|
||||
const authorizing = ref(false)
|
||||
|
||||
const agents = ref<Array<{ id: number, username: string, email?: string }>>([])
|
||||
const applications = ref<Array<{ id: number, name: string }>>([])
|
||||
const cardTypes = ref<Array<{ id: number, name: string, billing_type: string, price: number }>>([])
|
||||
|
||||
const authorizeForm = ref({
|
||||
agent_id: '' as string | number,
|
||||
application_id: '' as string | number,
|
||||
discount: 1.0,
|
||||
card_types: [] as Array<{ card_type_id: number, can_generate: boolean }>,
|
||||
})
|
||||
|
||||
const activeCount = computed(() => agentApps.value.filter(app => app.status === 'active').length)
|
||||
const inactiveCount = computed(() => agentApps.value.filter(app => app.status === 'inactive').length)
|
||||
@@ -55,13 +40,6 @@ const filteredApps = computed(() => {
|
||||
return result
|
||||
})
|
||||
|
||||
const selectedAppCardTypes = computed(() => {
|
||||
if (!authorizeForm.value.application_id)
|
||||
return []
|
||||
const appId = Number(authorizeForm.value.application_id)
|
||||
return cardTypes.value.filter(ct => ct.id && true)
|
||||
})
|
||||
|
||||
async function fetchData() {
|
||||
loading.value = true
|
||||
try {
|
||||
@@ -77,83 +55,8 @@ async function fetchData() {
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchDialogData() {
|
||||
try {
|
||||
const [agentsData, appsData] = await Promise.all([
|
||||
api.get<{ agents: Array<{ id: number, username: string, email?: string }> }>('/dev/agents'),
|
||||
api.get<{ applications: Array<{ id: number, name: string }> }>('/dev/applications'),
|
||||
])
|
||||
agents.value = agentsData?.agents || []
|
||||
applications.value = appsData?.applications || []
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取数据失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
async function onApplicationChange() {
|
||||
const appId = Number(authorizeForm.value.application_id)
|
||||
if (!appId) {
|
||||
cardTypes.value = []
|
||||
authorizeForm.value.card_types = []
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const data = await api.get<{ card_types: Array<{ id: number, name: string, billing_type: string, price: number }> }>('/dev/card-types')
|
||||
const allTypes = data?.card_types || []
|
||||
cardTypes.value = allTypes
|
||||
authorizeForm.value.card_types = allTypes.map(ct => ({
|
||||
card_type_id: ct.id,
|
||||
can_generate: false,
|
||||
}))
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取卡类失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
function openAuthorizeDialog() {
|
||||
authorizeForm.value = {
|
||||
agent_id: '',
|
||||
application_id: '',
|
||||
discount: 1.0,
|
||||
card_types: [],
|
||||
}
|
||||
cardTypes.value = []
|
||||
showAuthorizeDialog.value = true
|
||||
fetchDialogData()
|
||||
}
|
||||
|
||||
async function handleAuthorize() {
|
||||
if (!authorizeForm.value.agent_id) {
|
||||
toast.error('请选择代理')
|
||||
return
|
||||
}
|
||||
if (!authorizeForm.value.application_id) {
|
||||
toast.error('请选择应用')
|
||||
return
|
||||
}
|
||||
|
||||
authorizing.value = true
|
||||
try {
|
||||
await api.post('/dev/agent-apps/authorize', {
|
||||
agent_id: Number(authorizeForm.value.agent_id),
|
||||
application_id: Number(authorizeForm.value.application_id),
|
||||
discount: authorizeForm.value.discount,
|
||||
card_types: authorizeForm.value.card_types,
|
||||
})
|
||||
toast.success('授权成功')
|
||||
showAuthorizeDialog.value = false
|
||||
fetchData()
|
||||
}
|
||||
catch (error: any) {
|
||||
console.error('授权失败:', error)
|
||||
toast.error(error.message || '授权失败')
|
||||
}
|
||||
finally {
|
||||
authorizing.value = false
|
||||
}
|
||||
function goToCreate() {
|
||||
router.push('/admin/agent-apps/create')
|
||||
}
|
||||
|
||||
function confirmRemove(item: AgentApp) {
|
||||
@@ -177,15 +80,6 @@ async function handleRemove() {
|
||||
}
|
||||
}
|
||||
|
||||
function getBillingTypeText(type: string) {
|
||||
const map: Record<string, string> = {
|
||||
subscription: '订阅',
|
||||
time: '计时',
|
||||
point: '点卡',
|
||||
}
|
||||
return map[type] || type
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
})
|
||||
@@ -198,7 +92,7 @@ onMounted(() => {
|
||||
sticky
|
||||
>
|
||||
<template #actions>
|
||||
<UiButton @click="openAuthorizeDialog">
|
||||
<UiButton @click="goToCreate">
|
||||
<Plus class="mr-2 h-4 w-4" />
|
||||
新建授权
|
||||
</UiButton>
|
||||
@@ -225,7 +119,7 @@ onMounted(() => {
|
||||
<UiCardTitle class="text-sm font-medium">
|
||||
已启用
|
||||
</UiCardTitle>
|
||||
<CheckCircle class="size-4 text-muted-foreground" />
|
||||
<CheckCircle class="size-4 text-green-500" />
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="text-2xl font-bold text-green-600">
|
||||
@@ -239,10 +133,10 @@ onMounted(() => {
|
||||
<UiCardTitle class="text-sm font-medium">
|
||||
已禁用
|
||||
</UiCardTitle>
|
||||
<XCircle class="size-4 text-muted-foreground" />
|
||||
<XCircle class="size-4 text-orange-500" />
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="text-2xl font-bold text-muted-foreground">
|
||||
<div class="text-2xl font-bold text-orange-600">
|
||||
{{ inactiveCount }}
|
||||
</div>
|
||||
</UiCardContent>
|
||||
@@ -253,10 +147,10 @@ onMounted(() => {
|
||||
<UiCardTitle class="text-sm font-medium">
|
||||
代理余额总计
|
||||
</UiCardTitle>
|
||||
<Wallet class="size-4 text-muted-foreground" />
|
||||
<Wallet class="size-4 text-blue-500" />
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
<div class="text-2xl font-bold text-blue-600">
|
||||
¥{{ totalBalance.toFixed(2) }}
|
||||
</div>
|
||||
</UiCardContent>
|
||||
@@ -349,7 +243,10 @@ onMounted(() => {
|
||||
<span class="font-medium">¥{{ (item.balance || 0).toFixed(2) }}</span>
|
||||
</UiTableCell>
|
||||
<UiTableCell>
|
||||
<UiBadge :variant="item.status === 'active' ? 'default' : 'secondary'">
|
||||
<UiBadge
|
||||
:variant="item.status === 'active' ? 'default' : 'secondary'"
|
||||
:class="item.status === 'active' ? 'bg-green-500/10 text-green-600 hover:bg-green-500/20' : 'bg-orange-500/10 text-orange-600 hover:bg-orange-500/20'"
|
||||
>
|
||||
{{ item.status === 'active' ? '已启用' : '已禁用' }}
|
||||
</UiBadge>
|
||||
</UiTableCell>
|
||||
@@ -391,140 +288,6 @@ onMounted(() => {
|
||||
</UiCard>
|
||||
</div>
|
||||
|
||||
<UiDialog v-model:open="showAuthorizeDialog">
|
||||
<UiDialogContent class="max-w-2xl max-h-[85vh] overflow-y-auto">
|
||||
<UiDialogHeader>
|
||||
<UiDialogTitle>新建授权</UiDialogTitle>
|
||||
<UiDialogDescription>
|
||||
为代理分配应用卡密权限
|
||||
</UiDialogDescription>
|
||||
</UiDialogHeader>
|
||||
|
||||
<div class="space-y-6 py-4">
|
||||
<div class="space-y-2">
|
||||
<UiLabel>选择代理</UiLabel>
|
||||
<UiSelect v-model="authorizeForm.agent_id">
|
||||
<UiSelectTrigger>
|
||||
<UiSelectValue placeholder="请选择代理" />
|
||||
</UiSelectTrigger>
|
||||
<UiSelectContent>
|
||||
<UiSelectItem
|
||||
v-for="agent in agents"
|
||||
:key="agent.id"
|
||||
:value="String(agent.id)"
|
||||
>
|
||||
{{ agent.username }}
|
||||
<span v-if="agent.email" class="text-muted-foreground ml-1">({{ agent.email }})</span>
|
||||
</UiSelectItem>
|
||||
</UiSelectContent>
|
||||
</UiSelect>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<UiLabel>选择应用</UiLabel>
|
||||
<UiSelect v-model="authorizeForm.application_id" @update:model-value="onApplicationChange">
|
||||
<UiSelectTrigger>
|
||||
<UiSelectValue placeholder="请选择应用" />
|
||||
</UiSelectTrigger>
|
||||
<UiSelectContent>
|
||||
<UiSelectItem
|
||||
v-for="app in applications"
|
||||
:key="app.id"
|
||||
:value="String(app.id)"
|
||||
>
|
||||
{{ app.name }}
|
||||
</UiSelectItem>
|
||||
</UiSelectContent>
|
||||
</UiSelect>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<UiLabel>折扣</UiLabel>
|
||||
<div class="flex items-center gap-4">
|
||||
<UiInput
|
||||
v-model.number="authorizeForm.discount"
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0.01"
|
||||
max="1"
|
||||
class="flex-1"
|
||||
/>
|
||||
<span class="text-sm text-muted-foreground w-20">
|
||||
{{ (authorizeForm.discount * 10).toFixed(1) }}折
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
代理购买卡密的折扣，范围0.01-1
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="authorizeForm.card_types.length > 0" class="space-y-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<UiLabel>卡密权限</UiLabel>
|
||||
<div class="flex gap-2">
|
||||
<UiButton variant="outline" size="sm" @click="authorizeForm.card_types.forEach(ct => ct.can_generate = true)">
|
||||
全选
|
||||
</UiButton>
|
||||
<UiButton variant="outline" size="sm" @click="authorizeForm.card_types.forEach(ct => ct.can_generate = false)">
|
||||
清空
|
||||
</UiButton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border rounded-lg">
|
||||
<UiTable>
|
||||
<UiTableHeader>
|
||||
<UiTableRow>
|
||||
<UiTableHead class="w-12" />
|
||||
<UiTableHead>卡类名称</UiTableHead>
|
||||
<UiTableHead>计费类型</UiTableHead>
|
||||
<UiTableHead>价格</UiTableHead>
|
||||
</UiTableRow>
|
||||
</UiTableHeader>
|
||||
<UiTableBody>
|
||||
<UiTableRow
|
||||
v-for="(ct, index) in authorizeForm.card_types"
|
||||
:key="ct.card_type_id"
|
||||
:class="ct.can_generate ? 'bg-accent/50' : ''"
|
||||
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">
|
||||
{{ cardTypes[index]?.name || `卡类 #${ct.card_type_id}` }}
|
||||
</UiTableCell>
|
||||
<UiTableCell>
|
||||
<UiBadge variant="outline">
|
||||
{{ getBillingTypeText(cardTypes[index]?.billing_type || '') }}
|
||||
</UiBadge>
|
||||
</UiTableCell>
|
||||
<UiTableCell>
|
||||
¥{{ cardTypes[index]?.price || 0 }}
|
||||
</UiTableCell>
|
||||
</UiTableRow>
|
||||
</UiTableBody>
|
||||
</UiTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UiDialogFooter>
|
||||
<UiButton variant="outline" @click="showAuthorizeDialog = false">
|
||||
取消
|
||||
</UiButton>
|
||||
<UiButton :disabled="authorizing" @click="handleAuthorize">
|
||||
<div v-if="authorizing" class="i-lucide-loader-2 mr-2 h-4 w-4 animate-spin" />
|
||||
确认授权
|
||||
</UiButton>
|
||||
</UiDialogFooter>
|
||||
</UiDialogContent>
|
||||
</UiDialog>
|
||||
|
||||
<ConfirmDialog
|
||||
v-model:open="showRemoveDialog"
|
||||
title="移除授权"
|
||||
|
||||
@@ -173,6 +173,12 @@ const routes: RouteRecordRaw[] = [
|
||||
component: () => import('@/pages/admin/agent-apps/index.vue'),
|
||||
meta: { title: '授权管理 - 管理后台' },
|
||||
},
|
||||
{
|
||||
path: 'agent-apps/create',
|
||||
name: 'AdminAgentAppsCreate',
|
||||
component: () => import('@/pages/admin/agent-apps/create.vue'),
|
||||
meta: { title: '新建授权 - 管理后台' },
|
||||
},
|
||||
{
|
||||
path: 'agents',
|
||||
name: 'AdminAgents',
|
||||
|
||||
Reference in New Issue
Block a user