XuqmGroup-Web/ops-platform/src/views/tenants/TenantDetailView.vue

<template>
  <div v-if="tenant">
    <el-page-header @back="$router.back()" :content="tenant.nickname || tenant.username" style="margin-bottom: 20px" />

    <el-row :gutter="16" style="margin-bottom: 16px">
      <el-col :xs="24" :sm="8">
        <el-card shadow="hover">
          <el-statistic title="应用数" :value="tenant.appCount" />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="8">
        <el-card shadow="hover">
          <el-statistic title="子账号数" :value="tenant.subAccountCount" />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="8">
        <el-card shadow="hover">
          <el-statistic title="已开通服务" :value="tenant.activeServiceCount" />
        </el-card>
      </el-col>
    </el-row>

    <el-card style="margin-bottom: 16px">
      <template #header>
        <div class="header-row">
          <span>租户信息</span>
          <el-button :type="tenant.status === 'ACTIVE' ? 'danger' : 'success'" @click="toggleStatus">
            {{ tenant.status === 'ACTIVE' ? '禁用租户' : '启用租户' }}
          </el-button>
        </div>
      </template>
      <el-descriptions :column="isMobile ? 1 : 2" border>
        <el-descriptions-item label="用户名">{{ tenant.username }}</el-descriptions-item>
        <el-descriptions-item label="昵称">{{ tenant.nickname }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ tenant.email }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ tenant.phone || '-' }}</el-descriptions-item>
        <el-descriptions-item label="类型">{{ tenant.type === 'MAIN' ? '主账号' : '子账号' }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ tenant.status === 'ACTIVE' ? '正常' : '禁用' }}</el-descriptions-item>
        <el-descriptions-item label="父租户ID">{{ tenant.parentId || '-' }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ fmt(tenant.createdAt) }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card>
      <template #header>租户应用</template>
      <el-table :data="tenant.apps" border stripe>
        <el-table-column prop="name" label="应用名称" min-width="160" />
        <el-table-column prop="packageName" label="包名" min-width="180" />
        <el-table-column prop="appKey" label="AppKey" min-width="220" show-overflow-tooltip />
        <el-table-column prop="createdAt" label="创建时间" width="180">
          <template #default="{ row }">{{ fmt(row.createdAt) }}</template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="{ row }">
            <el-button link type="primary" @click="$router.push(`/apps/${row.appKey}`)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { opsApi, type TenantDetail } from '@/api/ops'

const route = useRoute()
const tenant = ref<TenantDetail | null>(null)
const isMobile = computed(() => window.innerWidth < 768)

async function loadDetail() {
  const res = await opsApi.getTenant(route.params.id as string)
  tenant.value = res.data.data
}

async function toggleStatus() {
  if (!tenant.value) return
  await ElMessageBox.confirm(
    `确认${tenant.value.status === 'ACTIVE' ? '禁用' : '启用'}该租户？`,
    '提示',
    { type: 'warning' },
  )
  await opsApi.toggleStatus(tenant.value.id)
  ElMessage.success('状态已更新')
  await loadDetail()
}

function fmt(value: string) {
  return value ? new Date(value).toLocaleString('zh-CN') : '-'
}

onMounted(loadDetail)
</script>

<style scoped>
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
</style>