代理功能+web客户端权限

src/views/system/tenant/index.vue

@@ -73,24 +73,25 @@
     </el-form>
   </ContentWrap>
 
+  <!-- 列表 -->
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" @selection-change="handleRowCheckboxChange">
+    <el-table v-loading="loading" :data="list" row-key="id" lazy :load="loadChildren"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren', checkStrictly: false }"
+      @selection-change="handleRowCheckboxChange" :row-class-name="rowClassName">
       <el-table-column type="selection" width="55" />
-      <el-table-column label="租户编号" align="center" prop="id" />
+      <el-table-column label="租户编号" prop="id" width="100" />
       <el-table-column label="租户名" align="center" prop="name" />
+      <el-table-column label="租户类型" align="center" prop="tenantType" />
       <el-table-column label="租户套餐" align="center" prop="packageId">
         <template #default="scope">
-          <el-tag v-if="scope.row.packageId === 0" type="danger">系统租户</el-tag>
-          <template v-else v-for="item in packageList">
-            <el-tag type="success" :key="item.id" v-if="item.id === scope.row.packageId">
-              {{ item.name }}
-            </el-tag>
-          </template>
+          <el-tag :type="scope.row.packageId === 0 ? 'danger' : 'success'">
+            {{ getPackageName(scope.row.packageId) }}
+          </el-tag>
         </template>
       </el-table-column>
       <el-table-column label="联系人" align="center" prop="contactName" />
-      <el-table-column label="联系手机" align="center" prop="contactMobile" />
+      <el-table-column label="联系手机" align="center" prop="contactMobile" />1
       <el-table-column label="账号额度" align="center" prop="accountCount">
         <template #default="scope">
           <el-tag>{{ scope.row.accountCount }}</el-tag>
@@ -98,7 +99,7 @@
       </el-table-column>
       <el-table-column label="AI时间" align="center" prop="aiExpireTime" width="180" :formatter="dateFormatter" />
       <el-table-column label="爬大哥时间" align="center" prop="brotherExpireTime" width="180" :formatter="dateFormatter" />
-      <el-table-column label="爬虫后台过期时间" align="center" prop="expireTime" width="180" :formatter="dateFormatter" />
+      <el-table-column label="后台管理过期时间" align="center" prop="expireTime" width="180" :formatter="dateFormatter" />
       <el-table-column label="绑定域名" align="center" prop="website" width="180" />
       <el-table-column label="租户状态" align="center" prop="status">
         <template #default="scope">
@@ -107,12 +108,16 @@
       </el-table-column>
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="创建时间" align="center" prop="createTime" width="180" :formatter="dateFormatter" />
-      <el-table-column label="操作" align="center" min-width="110" fixed="right">
+      <el-table-column label="操作" align="center" min-width="160" fixed="right">
         <template #default="scope">
           <el-button link type="primary" @click="openForm('update', scope.row.id)"
             v-hasPermi="['system:tenant:update']">
             编辑
           </el-button>
+          <el-button v-if="userStore.getUser.id != 1" link type="warning" @click="openRenewForm(scope.row.id)"
+            v-hasPermi="['system:tenant:renewal']">
+            续费
+          </el-button>
           <el-button link type="danger" @click="handleDelete(scope.row.id)" v-hasPermi="['system:tenant:delete']">
             删除
           </el-button>
@@ -124,8 +129,10 @@
       @pagination="getList" />
   </ContentWrap>
 
+
   <!-- 表单弹窗：添加/修改 -->
   <TenantForm ref="formRef" @success="getList" />
+  <TenantRenewForm ref="renewFormRef" @success="getList" />
 </template>
 <script lang="ts" setup>
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
@@ -134,9 +141,12 @@ import download from '@/utils/download'
 import * as TenantApi from '@/api/system/tenant'
 import * as TenantPackageApi from '@/api/system/tenantPackage'
 import TenantForm from './TenantForm.vue'
+import { useUserStore } from '@/store/modules/user'
+import { toRaw } from 'vue'   // 🔴 新增
+import TenantRenewForm from './TenantRenewForm.vue'
 
 defineOptions({ name: 'SystemTenant' })
-
+const userStore = useUserStore()
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
@@ -150,6 +160,7 @@ const queryParams = reactive({
   contactName: undefined,
   contactMobile: undefined,
   status: undefined,
+  tenantType: undefined,
   remark: undefined,
   createTime: [],
   aiExpireTime: [],
@@ -157,21 +168,39 @@ const queryParams = reactive({
   expireTime: [],
 })
 const queryFormRef = ref() // 搜索的表单
+const renewFormRef = ref() // 续费弹窗
+
+const openRenewForm = (id: number) => {
+  renewFormRef.value.open(id)
+}
 const exportLoading = ref(false) // 导出的加载中
 const packageList = ref([] as TenantPackageApi.TenantPackageVO[]) //租户套餐列表
+const packageAgencyList = ref([] as TenantPackageApi.TenantPackageVO[]) //租户套餐列表
 
+/** 查询列表 */
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
-    const data = await TenantApi.getTenantPage(queryParams)
-    list.value = data.list
+    let data: any = ''
+    if (userStore.getUser.id === 1) {
+      data = await TenantApi.getTenantPage(queryParams)
+    } else {
+      data = await TenantApi.getTenantPageSelf(queryParams)
+    }
+
+    // 给顶级节点加 level = 1
+    list.value = (data.list || []).map((item: any) => ({
+      ...item,
+      level: 1
+    }))
     total.value = data.total
   } finally {
     loading.value = false
   }
 }
 
+
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
@@ -186,7 +215,7 @@ const resetQuery = () => {
 
 /** 添加/修改操作 */
 const formRef = ref()
-const openForm = (type: string, id?: number) => {
+const openForm = (type: 'create' | 'update' | 'renew', id?: number) => {
   formRef.value.open(type, id)
 }
 
@@ -235,11 +264,96 @@ const handleExport = async () => {
     exportLoading.value = false
   }
 }
+const getPackageName = (packageId: number) => {
+  if (userStore.getUser.id === 0) return '系统租户'
+
+  // 先从 packageList 找
+  const pkg = packageList.value.find((p) => p.id === packageId)
+  if (pkg) return pkg.name
+
+  // packageList 未找到，并且 packageId !== 1 时，再从 packageAgencyList 找
+  if (packageId !== 1) {
+    const agency = packageAgencyList.value.find((a) => a.id === packageId)
+    if (agency) return agency.name
+  }
+
+  return '未知套餐'
+}
+
+// 懒加载子租户（树形表格用）
+const loadChildren = async (
+  row: TenantApi.TenantVO & { level?: number },
+  treeNode: unknown,
+  resolve: (data: TenantApi.TenantVO[]) => void
+) => {
+  try {
+    const baseParams = toRaw(queryParams) as any
+    const params = {
+      ...baseParams,
+      pageNo: 1,
+      pageSize: 999,
+      id: row.id
+    }
+
+    let data: any
+    data = await TenantApi.getTenantChildren(params)
+
+    const parentLevel = row.level ?? 1
+
+    // 子节点 level = 父节点 level + 1
+    const children = (data || []).map((item: any) => ({
+      ...item,
+      level: parentLevel + 1
+    }))
+
+    resolve(children)
+  } catch (e) {
+    console.error('loadChildren error', e)
+    resolve([])
+  }
+}
+
+// 行样式 class
+const rowClassName = ({ row }: { row: any }) => {
+  if (row.level === 2) return 'row-level-2'
+  if (row.level >= 3) return 'row-level-3'
+  return ''
+}
 
 /** 初始化 **/
 onMounted(async () => {
   await getList()
   // 获取租户套餐列表
   packageList.value = await TenantPackageApi.getTenantPackageList()
+  if (userStore.getUser.id === 1) {
+    packageAgencyList.value = await TenantPackageApi.getTenantPackageListagency()
+  }
+
+
 })
 </script>
+<style scoped lang="scss">
+/* 二级行背景色 */
+:deep(.row-level-2) {
+  background-color: #fdf6ec;
+  /* 浅橙色，你可以自己换 */
+}
+
+/* 三级及以下行背景色 */
+:deep(.row-level-3) {
+  background-color: #dedeff;
+  /* 浅灰色 */
+}
+
+/* 可选：加个左边彩色竖条，更醒目 */
+:deep(.row-level-2 td:first-child),
+:deep(.row-level-3 td:first-child) {
+  border-left: 4px solid #e6a23c;
+  /* 二级竖条 */
+}
+
+:deep(.row-level-3 td:first-child) {
+  border-left-color: #3636e0;
+  /* 三级竖条 */
+}
+</style>