118 lines
3.8 KiB
Vue
118 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { ElMessage } from 'element-plus'
|
|
import DataTablePage from '@/components/DataTablePage.vue'
|
|
import { createTenant, getTenants, type Tenant } from '@/api/modules/tenant'
|
|
|
|
const router = useRouter()
|
|
const loading = ref(false)
|
|
const tenants = ref<Tenant[]>([])
|
|
|
|
async function load() {
|
|
loading.value = true
|
|
try {
|
|
tenants.value = await getTenants()
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const dialogVisible = ref(false)
|
|
const form = ref({ name: '', code: '', status: 'active', owner_user_id: '', max_projects: 5, retention_policy_id: '' })
|
|
|
|
function openCreate() {
|
|
form.value = { name: '', code: '', status: 'active', owner_user_id: '', max_projects: 5, retention_policy_id: '' }
|
|
dialogVisible.value = true
|
|
}
|
|
|
|
async function submitCreate() {
|
|
await createTenant({
|
|
name: form.value.name,
|
|
code: form.value.code || undefined,
|
|
status: form.value.status,
|
|
owner_user_id: form.value.owner_user_id || undefined,
|
|
quota: { max_projects: Number(form.value.max_projects) },
|
|
retention_policy_id: form.value.retention_policy_id || undefined,
|
|
})
|
|
ElMessage.success('创建成功')
|
|
dialogVisible.value = false
|
|
load()
|
|
}
|
|
|
|
function openDetail(row: Tenant) {
|
|
router.push(`/tenants/${row.id}`)
|
|
}
|
|
|
|
onMounted(load)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page-wrap">
|
|
<DataTablePage
|
|
title="租户管理"
|
|
:data="tenants"
|
|
:loading="loading"
|
|
searchable
|
|
:search-fields="['name', 'code']"
|
|
create-text="新建租户"
|
|
@create="openCreate"
|
|
>
|
|
<template #columns>
|
|
<el-table-column prop="name" label="名称" min-width="120" />
|
|
<el-table-column prop="code" label="编码" min-width="120" />
|
|
<el-table-column prop="status" label="状态" width="100">
|
|
<template #default="{ row }">
|
|
<el-tag :type="row.status === 'active' ? 'success' : 'info'">{{ row.status }}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="owner_user_id" label="拥有者" min-width="120" />
|
|
<el-table-column prop="retention_policy_id" label="留存策略" min-width="120" />
|
|
</template>
|
|
<template #actions="{ row }">
|
|
<div class="action-buttons">
|
|
<el-button link type="primary" @click="openDetail(row as Tenant)">详情</el-button>
|
|
</div>
|
|
</template>
|
|
</DataTablePage>
|
|
|
|
<el-dialog v-model="dialogVisible" title="新建租户" width="480px">
|
|
<el-form :model="form" label-width="90px">
|
|
<el-form-item label="名称" required>
|
|
<el-input v-model="form.name" placeholder="租户名称" />
|
|
</el-form-item>
|
|
<el-form-item label="编码">
|
|
<el-input v-model="form.code" placeholder="留空自动生成" />
|
|
</el-form-item>
|
|
<el-form-item label="状态">
|
|
<el-select v-model="form.status">
|
|
<el-option label="启用" value="active" />
|
|
<el-option label="停用" value="disabled" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="拥有者ID">
|
|
<el-input v-model="form.owner_user_id" placeholder="用户 ID" />
|
|
</el-form-item>
|
|
<el-form-item label="最大项目数">
|
|
<el-input-number v-model="form.max_projects" :min="1" />
|
|
</el-form-item>
|
|
<el-form-item label="留存策略ID">
|
|
<el-input v-model="form.retention_policy_id" placeholder="retention_policy ID" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="submitCreate">确定</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.page-wrap {
|
|
height: 100%;
|
|
padding: 16px;
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|