mfx/tkNewAdmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新代理套餐优化

Browse Source
This commit is contained in:
没复习
2026-03-26 11:26:44 +08:00
parent 8dd1cd54aa
commit 1f75a682ef
2 changed files with 270 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

435
src/views/system/tenant/TenantForm.vue
View File

@@ -1,19 +1,18 @@
<template>
<Dialog v-model="dialogVisible" :title="dialogTitle" width="50%">
<Dialog v-model="dialogVisible" :title="dialogTitle" width="50%" :draggable="false">
<el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="120px">
<!-- ========== 1. 基础信息 ========== -->
<el-divider>基础信息</el-divider>
<el-form-item label="租户名" prop="name">
<el-input v-model="formData.name" placeholder="请输入租户名" />
</el-form-item>
<el-form-item v-if="tenantLevel <= 1" label="租户类型" prop="tenantType">
<el-radio-group v-model="formData.tenantType">
<el-radio-group v-model="formData.tenantType" @change="handleTenantTypeChange">
<el-radio value="代理">代理</el-radio>
<el-radio value="用户">用户</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="联系人" prop="contactName">
<el-input v-model="formData.contactName" placeholder="请输入联系人" />
</el-form-item>
@@ -43,23 +42,20 @@
<el-date-picker v-model="formData.brotherExpireTime" clearable placeholder="请选择爬大哥过期时间" type="date"
value-format="x" />
</el-form-item>
<el-form-item v-if="tenantLevel == 0" label="爬虫过期时间" prop="crawlExpireTime">
<el-date-picker v-model="formData.crawlExpireTime" clearable placeholder="请选择爬虫过期时间" type="date"
value-format="x" />
</el-form-item>
<el-form-item v-if="tenantLevel == 0" label="后台过期时间" prop="expireTime">
<el-date-picker v-model="formData.expireTime" clearable placeholder="请选择过期时间" type="date" value-format="x" />
</el-form-item>
<el-form-item v-else label="后台过期时间" prop="expireTime">
<el-date-picker v-model="formData.expireTime" clearable placeholder="请选择过期时间" disabled type="date"
value-format="x" />
</el-form-item>
<el-form-item label="绑定域名" prop="website">
<el-input v-model="formData.website" placeholder="请输入绑定域名" />
</el-form-item>
@@ -82,105 +78,110 @@
</el-select>
</el-form-item>
<!-- 爬虫：不受限制 -->
<el-form-item v-if="userData.id" label="爬虫" prop="status">
<el-radio-group v-model="userData.crawl">
<el-radio :value="1">开启</el-radio>
<el-radio :value="0">关闭</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="userData.id">
<el-form-item label="爬虫" prop="status">
<el-radio-group v-model="userData.crawl">
<el-radio :value="1">开启</el-radio>
<el-radio :value="0">关闭</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="爬大哥" prop="status">
<el-radio-group v-model="userData.bigBrother" :disabled="!formData.brotherExpireTime">
<el-radio :value="1">开启</el-radio>
<el-radio :value="0">关闭</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="ios自动化" prop="status">
<el-radio-group v-model="userData.aiChat" :disabled="!formData.aiExpireTime">
<el-radio :value="1">开启</el-radio>
<el-radio :value="0">关闭</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="ai回复" prop="status">
<el-radio-group v-model="userData.aiReplay" :disabled="!formData.aiExpireTime">
<el-radio :value="1">开启</el-radio>
<el-radio :value="0">关闭</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="即时消息" prop="status">
<el-radio-group v-model="userData.webAi" :disabled="!formData.aiExpireTime">
<el-radio :value="1">开启</el-radio>
<el-radio :value="0">关闭</el-radio>
</el-radio-group>
</el-form-item>
</template>
<!-- 爬大哥：依赖爬大哥过期时间 -->
<el-form-item v-if="userData.id" label="爬大哥" prop="status">
<el-radio-group v-model="userData.bigBrother" :disabled="!formData.brotherExpireTime">
<el-radio :value="1">开启</el-radio>
<el-radio :value="0">关闭</el-radio>
</el-radio-group>
</el-form-item>
<!-- ai自动化：依赖 AI 过期时间 -->
<el-form-item v-if="userData.id" label="ai自动化" prop="status">
<el-radio-group v-model="userData.aiChat" :disabled="!formData.aiExpireTime">
<el-radio :value="1">开启</el-radio>
<el-radio :value="0">关闭</el-radio>
</el-radio-group>
</el-form-item>
<!-- ai回复：依赖 AI 过期时间 -->
<el-form-item v-if="userData.id" label="ai回复" prop="status">
<el-radio-group v-model="userData.aiReplay" :disabled="!formData.aiExpireTime">
<el-radio :value="1">开启</el-radio>
<el-radio :value="0">关闭</el-radio>
</el-radio-group>
</el-form-item>
<!--WEB回复：依赖 AI 过期时间 -->
<el-form-item v-if="userData.id" label="WEB客户端" prop="status">
<el-radio-group v-model="userData.webAi" :disabled="!formData.aiExpireTime">
<el-radio :value="1">开启</el-radio>
<el-radio :value="0">关闭</el-radio>
</el-radio-group>
</el-form-item>
<!-- ========== 2. 套餐 & 权限 ========== -->
<el-divider>套餐 & 权限</el-divider>
<el-form-item label="租户套餐" prop="packageId">
<!-- 顶层租户或无 parentId，走原来的下拉选择 -->
<el-select v-if="(formData.parentId == 1 || formData.parentId == null) && tenantLevel == 0"
v-model="formData.packageId" clearable placeholder="请选择租户套餐">
v-model="formData.packageId" clearable placeholder="请选择租户套餐" style="width: 100%;">
<el-option v-for="item in packageList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
<!-- 代理租户：用功能勾选 + 套餐单选 -->
<div v-else style="display: block;">
<!-- 功能勾选：1=爬大哥，2=爬主播，3=AI套餐 -->
<el-checkbox-group v-model="selectedFeatures">
<el-checkbox :label="1">爬主播</el-checkbox>
<el-checkbox :label="2">爬大哥</el-checkbox>
<el-checkbox :label="3">AI套餐</el-checkbox>
<el-checkbox :label="9">代理</el-checkbox>
</el-checkbox-group>
<div v-else class="package-selection-container">
<el-radio-group v-model="activePackageCategory" class="category-tabs">
<el-radio-button label="normal" :disabled="formData.tenantType === '代理'">常规套餐</el-radio-button>
<!-- 按天数过滤：30 / 180 / 360 天 -->
<div style="margin-top: 8px;">
<el-radio-group v-model="selectedDays">
<el-radio-button :label="30">30 天</el-radio-button>
<el-radio-button :label="180">180 天</el-radio-button>
<el-radio-button :label="365">365 天</el-radio-button>
</el-radio-group>
</div>
<!-- 根据勾选结果筛选套餐，用单选框选择一个套餐 -->
<div class="package-radio-wrapper">
<el-radio-group v-model="formData.packageId">
<el-radio-button v-for="item in filteredAgencyPackages" :key="item.id" :label="item.id"
class="package-radio">
<el-radio-button label="agent" :disabled="formData.tenantType === '用户'">代理套餐</el-radio-button>
{{ item.name }}
<el-radio-button label="test" :disabled="formData.tenantType === '代理'">测试套餐</el-radio-button>
</el-radio-group>
</el-radio-button>
</el-radio-group>
<div v-if="filteredAgencyPackages.length === 0" class="package-empty-tip">
暂无匹配套餐，请调整上方功能勾选
<div v-show="activePackageCategory === 'normal'" class="filter-section">
<div class="filter-row">
<span class="filter-label">包含功能：</span>
<el-checkbox-group v-model="selectedFeatures">
<el-checkbox :label="1">爬主播</el-checkbox>
<el-checkbox :label="2">爬大哥</el-checkbox>
<el-checkbox :label="4">AI套餐</el-checkbox>
<el-checkbox :label="9">代理</el-checkbox>
</el-checkbox-group>
</div>
<div class="filter-row" style="margin-top: 8px;">
<span class="filter-label">套餐周期：</span>
<el-radio-group v-model="selectedDays" size="small">
<el-radio-button :label="null">全部</el-radio-button>
<el-radio-button :label="30">30 天</el-radio-button>
<el-radio-button :label="180">185 天</el-radio-button>
<el-radio-button :label="365">365 天</el-radio-button>
</el-radio-group>
</div>
</div>
<div class="package-card-grid">
<div v-for="item in filteredAgencyPackages" :key="item.id" class="package-card"
:class="{ 'is-active': formData.packageId === item.id }" @click="formData.packageId = item.id">
<div v-if="formData.packageId === item.id" class="active-badge">
<el-icon>
<Check />
</el-icon>
</div>
<div class="card-title">{{ item.name }}</div>
<div class="card-price">
<span class="currency">¥</span>
<span class="amount">{{ item.price }}</span>
</div>
<div class="card-desc">时长: {{ item.days === 9999 ? '永久有效' : item.days + ' 天' }}</div>
</div>
</div>
<el-empty v-if="filteredAgencyPackages.length === 0" description="暂无匹配的套餐，请调整筛选条件" :image-size="60" />
</div>
</el-form-item>
</el-form>
<template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm">
确 定
</el-button>
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, computed } from 'vue'
import { Check } from '@element-plus/icons-vue' // 引入对号图标
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as TenantApi from '@/api/system/tenant'
import { getUserByTenant, updateRoleUser } from '@/api/system/user'
@@ -188,13 +189,17 @@ import { CommonStatusEnum } from '@/utils/constants'
import * as TenantPackageApi from '@/api/system/tenantPackage'
import * as userApi from '@/api/system/user'
import { useUserStore } from '@/store/modules/user'
// 假设有 useI18n 和 useMessage 的全局引入或在此处补全引入
import { useI18n } from 'vue-i18n'
import { useMessage } from '@/hooks/web/useMessage'
defineOptions({ name: 'SystemTenantForm' })
const tenantLevel = ref(3)
TenantApi.getSelfTenantLevel().then(res => {
tenantLevel.value = res.tenantLevel
console.log(tenantLevel.value)
})
const { t } = useI18n()
const message = useMessage()
const dialogVisible = ref(false)
@@ -202,6 +207,7 @@ const dialogTitle = ref('')
const formLoading = ref(false)
const formType = ref<'create' | 'update'>('create')
const userStore = useUserStore()
const formData = ref({
id: 0,
name: undefined as string | undefined,
@@ -218,21 +224,12 @@ const formData = ref({
aiExpireTime: undefined as number | undefined,
brotherExpireTime: undefined as number | undefined,
crawlExpireTime: undefined as number | undefined,
tenantType: undefined as number | undefined,
tenantType: undefined as string | number | undefined, // 修改为兼容 string，因 radio 值是'代理'
parentId: undefined as number | undefined,
})
const userData = ref({} as userApi.UserVO)
const userList = ref<userApi.UserVO[]>([
{
id: 0,
aiChat: 0,
bigBrother: 0,
crawl: 0
} as any
])
const userList = ref<userApi.UserVO[]>([{ id: 0, aiChat: 0, bigBrother: 0, crawl: 0 } as any])
const formRules = reactive({
name: [{ required: true, message: '租户名不能为空', trigger: 'blur' }],
@@ -252,60 +249,73 @@ const formRules = reactive({
const formRef = ref()
const packageList = ref([] as TenantPackageApi.TenantPackageVO[])
const packageAgencyList = ref([] as TenantPackageApi.TenantPackageVO[])
// 代理套餐功能勾选：1=爬大哥，2=爬主播，3=AI套餐
const selectedFeatures = ref<number[]>([])
// 按套餐天数筛选：30 / 180 / 360（不选则不过滤）
const selectedDays = ref<number | null>(null)
// 二级代理套餐的 ID
const SECOND_AGENT_PACKAGE_ID = 10001
// 根据 selectedFeatures + packageAgencyList 计算可选套餐
const filteredAgencyPackages = computed(() => {
// 1. 根据创建/编辑确定基础套餐列表
let list: any[] = []
if (formType.value === 'create') {
list = packageList.value || []
} else {
list = packageAgencyList.value || []
// ====== 新增：UI 交互状态 ======
const activePackageCategory = ref('normal') // 套餐大类：'normal' | 'agent' | 'test'
const selectedFeatures = ref<number[]>([]) // 代理套餐功能勾选
const selectedDays = ref<number | null>(null) // 按套餐天数筛选
const SECOND_AGENT_PACKAGE_ID = 10001 // 二级代理套餐的 ID
// 当选择租户类型时，智能切换 Tab
const handleTenantTypeChange = (val: string) => {
if (val === '代理') {
activePackageCategory.value = 'agent' // 自动跳到代理套餐 Tab
formData.value.packageId = undefined // 清空之前选的错误套餐
} else if (val === '用户') {
activePackageCategory.value = 'normal' // 自动跳到常规套餐 Tab
formData.value.packageId = undefined // 清空之前选的错误套餐
}
}
// ====== 核心：计算最终展示的套餐列表 ======
const filteredAgencyPackages = computed(() => {
let list: any[] = formType.value === 'create' ? packageList.value || [] : packageAgencyList.value || []
if (!list.length) return []
const selected = selectedFeatures.value
// 2. 先按功能勾选过滤（保持你原来的逻辑）
let result: any[] = []
if (!selected.length) {
// 一个功能都没勾选时，直接返回全部套餐
result = list
} else {
// 有勾选时才进行过滤
result = list.filter((item: any) => {
const typeStr = String(item.packageType ?? '')
// 要求选中的功能全部包含在 packageType 里
// 例如勾选 [1,2] -> 匹配 '12'、'123' 等
return selected.every(flag => typeStr.includes(String(flag)))
})
// 1. 根据顶部 Tab 进行大类粗筛
if (activePackageCategory.value === 'agent') {
// 假设代理套餐特征：名称含'代理' 或 天数9999 或 ID是二级代理
result = list.filter(item => item.name.includes('代理') || item.days === 9999 || item.id === SECOND_AGENT_PACKAGE_ID)
}
else if (activePackageCategory.value === 'test') {
// 假设测试套餐特征：名称含'测试'
result = list.filter(item => item.name.includes('测试'))
}
else {
// 常规套餐：排除代理和测试套餐
result = list.filter(item => !item.name.includes('代理') && !item.name.includes('测试') && item.days !== 9999)
// 2. 常规套餐继续应用「功能勾选」过滤
if (selectedFeatures.value.length > 0) {
result = result.filter(item => {
const typeStr = String(item.packageType ?? '')
return selectedFeatures.value.every(flag => typeStr.includes(String(flag)))
})
}
// 3. 常规套餐继续应用「天数过滤」
if (selectedDays.value != null) {
result = result.filter(item => item.days === selectedDays.value)
}
}
// 3. 按天数过滤：item.days === 30 / 180 / 360
if (selectedDays.value != null) {
result = result.filter((item: any) => item.days === selectedDays.value)
}
// 4. 再根据租户类型进行限制
// 4. 原有的租户类型强制限制逻辑 (兜底保护)
// 4. 最终兜底：利用后端的 packageType 进行限制
const tenantType = formData.value.tenantType
if (tenantType === '代理') {
// 只能选二级代理套餐（10001）
result = result.filter(item => item.id === SECOND_AGENT_PACKAGE_ID)
} else if (tenantType === '租户') {
// 租户不能选二级代理套餐
result = result.filter(item => item.id !== SECOND_AGENT_PACKAGE_ID)
// 租户类型选了“代理”，强制只能看到 packageType 为 999 的套餐
result = result.filter(item => item.packageType === 999)
} else if (tenantType === '用户') {
// 租户类型选了“用户”，强制不能看到代理(999)和测试(99)的套餐
result = result.filter(item => item.packageType !== 999)
}
return result
})
/** 打开弹窗 */
const open = async (type: 'create' | 'update', id?: number) => {
dialogVisible.value = true
@@ -316,14 +326,9 @@ const open = async (type: 'create' | 'update', id?: number) => {
if (id) {
formLoading.value = true
try {
// 1. 租户基础信息
formData.value = await TenantApi.getTenant(id)
// 2. 拉取租户用户列表
const res = await getUserByTenant(id)
userList.value = res || []
// 3. 默认选中第一个用户（有的话）
if (userList.value.length > 0) {
userData.value = userList.value[0]
; (userData.value as any).tenantId = formData.value.id
@@ -333,7 +338,6 @@ const open = async (type: 'create' | 'update', id?: number) => {
}
}
// 套餐列表
packageList.value = await TenantPackageApi.getTenantPackageList()
if (userStore.getUser.id === 1) {
packageAgencyList.value = await TenantPackageApi.getTenantPackageListagency()
@@ -382,24 +386,21 @@ const resetForm = () => {
password: undefined,
remark: undefined,
aiExpireTime: undefined,
brotherExpireTime: undefined
brotherExpireTime: undefined,
tenantType: undefined,
parentId: undefined
}
userData.value = {} as any
userList.value = [
{
id: 0,
aiChat: 0,
bigBrother: 0,
crawl: 0
} as any
]
// ⭐ 每次打开弹窗时都清空功能选择
userList.value = [{ id: 0, aiChat: 0, bigBrother: 0, crawl: 0 } as any]
// 重置筛选条件
selectedFeatures.value = []
selectedDays.value = null
activePackageCategory.value = 'normal' // 回到默认Tab
formRef.value?.resetFields?.()
}
/** 切换用户 */
function changeUser(val: number) {
userList.value.forEach((item) => {
@@ -410,18 +411,18 @@ function changeUser(val: number) {
})
}
/** 联动：AI 过期时间 -> AI 权限 */
/** 联动逻辑 */
watch(
() => formData.value.aiExpireTime,
(val) => {
if (!val && userData.value) {
userData.value.aiChat = 0
userData.value.aiReplay = 0
userData.value.webAi = 0
}
}
)
/** 联动：爬大哥过期时间 -> bigBrother 权限 */
watch(
() => formData.value.brotherExpireTime,
(val) => {
@@ -431,35 +432,125 @@ watch(
}
)
</script>
<style scoped>
.package-radio-wrapper {
margin-top: 10px;
}
/* 让按钮自动换行，并留点间隔 */
.package-radio-wrapper :deep(.el-radio-group) {
/* ================= 卡片与筛选样式 ================= */
.package-selection-container {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 8px;
flex-direction: column;
gap: 16px;
}
/* 美化每个 radio-button 的外观（胶囊 + 内边距） */
.package-radio-wrapper :deep(.el-radio-button__inner) {
border-radius: 999px;
padding: 4px 10px;
.category-tabs {
margin-bottom: 4px;
}
/* 过滤区域样式 */
.filter-section {
background-color: #f8f9fa;
padding: 12px 16px;
border-radius: 6px;
border: 1px solid #ebeef5;
}
.filter-row {
display: flex;
align-items: center;
}
.filter-label {
font-size: 13px;
color: #606266;
width: 80px;
flex-shrink: 0;
font-weight: 500;
}
/* 卡片网格布局：自适应排列 */
.package-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 16px;
margin-top: 8px;
}
/* 单个套餐卡片 */
.package-card {
position: relative;
background: #ffffff;
border: 1px solid #dcdfe6;
height: 30px;
border-radius: 8px;
padding: 16px;
cursor: pointer;
transition: all 0.2s ease;
overflow: hidden;
}
/* 选中状态可以稍微加粗/加边框，Element Plus 自带选中样式，这里可选 */
.package-radio-wrapper :deep(.is-active .el-radio-button__inner) {
.package-card:hover {
border-color: #c0c4cc;
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05);
transform: translateY(-2px);
}
/* 选中状态 */
.package-card.is-active {
border-color: #409eff;
background-color: #ecf5ff;
box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.1);
}
/* 空数据提示 */
.package-empty-tip {
color: #999;
/* 选中时的右上角角标 */
.active-badge {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-top: 36px solid #409eff;
border-left: 36px solid transparent;
}
.active-badge .el-icon {
position: absolute;
top: -32px;
right: 2px;
color: #fff;
font-size: 14px;
}
/* 卡片内部排版 */
.card-title {
font-size: 14px;
font-weight: bold;
color: #303133;
margin-bottom: 12px;
line-height: 1.4;
height: 40px;
/* 固定高度防止因名称长短不同导致卡片高度不一 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.card-price {
color: #f56c6c;
margin-bottom: 6px;
}
.card-price .currency {
font-size: 14px;
margin-right: 2px;
}
.card-price .amount {
font-size: 24px;
font-weight: bold;
}
.card-desc {
font-size: 12px;
margin-top: 5px;
color: #909399;
}
</style>

10
src/views/system/tenantagencypackage/TenantAgencyPackageForm.vue
View File

@@ -55,21 +55,21 @@
</el-form-item>
<!-- ai回复：必须先选“AI过期时间” -->
<el-form-item label="AI客户端">
<!-- <el-form-item label="IOS权限>
<el-radio-group v-model="formData.aiClient">
<el-radio :value="1">开启</el-radio>
<el-radio :value="0">关闭</el-radio>
</el-radio-group>
</el-form-item>
</el-form-item> -->
<!-- ai回复：必须先选“AI过期时间” -->
<el-form-item label="AI回复">
<!-- <el-form-item label="AI回复">
<el-radio-group v-model="formData.aiReplay">
<el-radio :value="1">开启</el-radio>
<el-radio :value="0">关闭</el-radio>
</el-radio-group>
</el-form-item>
</el-form-item> -->
<!-- WEB回复：必须先选“AI过期时间” -->
<el-form-item label="WEB客户端">
<el-form-item label="即时消息">
<el-radio-group v-model="formData.webAi">
<el-radio :value="1">开启</el-radio>
<el-radio :value="0">关闭</el-radio>