tkNewAdmin/src/views/system/tenant/index.vue

<template>
  <doc-alert title="SaaS 多租户" url="https://doc.iocoder.cn/saas-tenant/" />

  <!-- 搜索 -->
  <ContentWrap>
    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
      <el-form-item label="租户名" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入租户名" clearable @keyup.enter="handleQuery"
          class="!w-240px" />
      </el-form-item>
      <el-form-item label="联系人" prop="contactName">
        <el-input v-model="queryParams.contactName" placeholder="请输入联系人" clearable @keyup.enter="handleQuery"
          class="!w-240px" />
      </el-form-item>
      <el-form-item label="联系手机" prop="contactMobile">
        <el-input v-model="queryParams.contactMobile" placeholder="请输入联系手机" clearable @keyup.enter="handleQuery"
          class="!w-240px" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="queryParams.remark" placeholder="请输入备注" clearable @keyup.enter="handleQuery"
          class="!w-240px" />
      </el-form-item>
      <el-form-item label="租户状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择租户状态" clearable class="!w-240px">
          <el-option v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker v-model="queryParams.createTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
          start-placeholder="开始日期" end-placeholder="结束日期"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" class="!w-240px" />
      </el-form-item>
      <el-form-item label="AI到期时间" prop="aiExpireTime">
        <el-date-picker v-model="queryParams.aiExpireTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
          start-placeholder="开始日期" end-placeholder="结束日期"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" class="!w-240px" />
      </el-form-item>
      <el-form-item label="大哥到期时间" prop="brotherExpireTime">
        <el-date-picker v-model="queryParams.brotherExpireTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
          start-placeholder="开始日期" end-placeholder="结束日期"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" class="!w-240px" />
      </el-form-item>
      <el-form-item label="爬虫到期时间" prop="expireTime">
        <el-date-picker v-model="queryParams.expireTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
          start-placeholder="开始日期" end-placeholder="结束日期"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" class="!w-240px" />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px" />
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px" />
          重置
        </el-button>
        <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['system:tenant:create']">
          <Icon icon="ep:plus" class="mr-5px" />
          新增
        </el-button>
        <el-button type="success" plain @click="handleExport" :loading="exportLoading"
          v-hasPermi="['system:tenant:export']">
          <Icon icon="ep:download" class="mr-5px" />
          导出
        </el-button>
        <el-button type="danger" plain :disabled="checkedIds.length === 0" @click="handleDeleteBatch"
          v-hasPermi="['system:tenant:delete']">
          <Icon icon="ep:delete" class="mr-5px" />
          批量删除
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <!-- 列表 -->
  <ContentWrap>
    <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="租户编号" 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 :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" />1
      <el-table-column label="账号额度" align="center" prop="accountCount">
        <template #default="scope">
          <el-tag>{{ scope.row.accountCount }}</el-tag>
        </template>
      </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="website" width="180" />
      <el-table-column label="租户状态" align="center" prop="status">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
        </template>
      </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="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>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
      @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'
import { dateFormatter } from '@/utils/formatTime'
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() // 国际化

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: undefined,
  contactName: undefined,
  contactMobile: undefined,
  status: undefined,
  tenantType: undefined,
  remark: undefined,
  createTime: [],
  aiExpireTime: [],
  brotherExpireTime: [],
  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 {
    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
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: 'create' | 'update' | 'renew', id?: number) => {
  formRef.value.open(type, id)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await TenantApi.deleteTenant(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch { }
}

/** 批量删除按钮操作 */
const checkedIds = ref<number[]>([])
const handleRowCheckboxChange = (rows: TenantApi.TenantVO[]) => {
  checkedIds.value = rows.map((row) => row.id)
}

const handleDeleteBatch = async () => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起批量删除
    await TenantApi.deleteTenantList(checkedIds.value)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch { }
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await TenantApi.exportTenant(queryParams)
    download.excel(data, '租户列表.xls')
  } catch {
  } finally {
    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>