feat(fengling): add routes and pages for Fengling Console management
This commit is contained in:
Sam
parent
e5bbe101c9
commit
87db42b5db
72
apps/web-ele/src/router/routes/modules/fengling.ts
Normal file
72
apps/web-ele/src/router/routes/modules/fengling.ts
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
import type { RouteRecordRaw } from 'vue-router';
|
||||||
|
|
||||||
|
const routes: RouteRecordRaw[] = [
|
||||||
|
{
|
||||||
|
meta: {
|
||||||
|
icon: 'lucide:building-2',
|
||||||
|
order: 1,
|
||||||
|
title: 'Fengling Console',
|
||||||
|
},
|
||||||
|
name: 'Fengling',
|
||||||
|
path: '/fengling',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
name: 'FenglingDashboard',
|
||||||
|
path: '/fengling/dashboard',
|
||||||
|
component: () => import('#/views/fengling/dashboard/index.vue'),
|
||||||
|
meta: {
|
||||||
|
affixTab: true,
|
||||||
|
icon: 'lucide:layout-dashboard',
|
||||||
|
title: 'Dashboard',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'TenantManagement',
|
||||||
|
path: '/fengling/tenants',
|
||||||
|
component: () => import('#/views/fengling/tenants/index.vue'),
|
||||||
|
meta: {
|
||||||
|
icon: 'lucide:building',
|
||||||
|
title: 'Tenant Management',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'UserManagement',
|
||||||
|
path: '/fengling/users',
|
||||||
|
component: () => import('#/views/fengling/users/index.vue'),
|
||||||
|
meta: {
|
||||||
|
icon: 'lucide:users',
|
||||||
|
title: 'User Management',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'RoleManagement',
|
||||||
|
path: '/fengling/roles',
|
||||||
|
component: () => import('#/views/fengling/roles/index.vue'),
|
||||||
|
meta: {
|
||||||
|
icon: 'lucide:shield',
|
||||||
|
title: 'Role Management',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'OAuthClientManagement',
|
||||||
|
path: '/fengling/oauth',
|
||||||
|
component: () => import('#/views/fengling/oauth/index.vue'),
|
||||||
|
meta: {
|
||||||
|
icon: 'lucide:key',
|
||||||
|
title: 'OAuth Clients',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Logs',
|
||||||
|
path: '/fengling/logs',
|
||||||
|
component: () => import('#/views/fengling/logs/index.vue'),
|
||||||
|
meta: {
|
||||||
|
icon: 'lucide:scroll-text',
|
||||||
|
title: 'Logs',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default routes;
|
||||||
66
apps/web-ele/src/views/fengling/dashboard/index.vue
Normal file
66
apps/web-ele/src/views/fengling/dashboard/index.vue
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
|
||||||
|
import { ElCard, ElRow, ElCol, ElStatistic } from 'element-plus';
|
||||||
|
|
||||||
|
const stats = ref({
|
||||||
|
totalTenants: 0,
|
||||||
|
activeTenants: 0,
|
||||||
|
totalUsers: 0,
|
||||||
|
activeUsers: 0,
|
||||||
|
totalRoles: 0,
|
||||||
|
totalOAuthClients: 0,
|
||||||
|
auditLogsToday: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="p-5">
|
||||||
|
<h1 class="mb-5 text-2xl font-bold">Fengling Console Dashboard</h1>
|
||||||
|
|
||||||
|
<ElRow :gutter="20">
|
||||||
|
<ElCol :span="6">
|
||||||
|
<ElCard shadow="hover">
|
||||||
|
<ElStatistic title="Total Tenants" :value="stats.totalTenants" />
|
||||||
|
</ElCard>
|
||||||
|
</ElCol>
|
||||||
|
<ElCol :span="6">
|
||||||
|
<ElCard shadow="hover">
|
||||||
|
<ElStatistic title="Active Tenants" :value="stats.activeTenants" />
|
||||||
|
</ElCard>
|
||||||
|
</ElCol>
|
||||||
|
<ElCol :span="6">
|
||||||
|
<ElCard shadow="hover">
|
||||||
|
<ElStatistic title="Total Users" :value="stats.totalUsers" />
|
||||||
|
</ElCard>
|
||||||
|
</ElCol>
|
||||||
|
<ElCol :span="6">
|
||||||
|
<ElCard shadow="hover">
|
||||||
|
<ElStatistic title="Active Users" :value="stats.activeUsers" />
|
||||||
|
</ElCard>
|
||||||
|
</ElCol>
|
||||||
|
</ElRow>
|
||||||
|
|
||||||
|
<ElRow :gutter="20" class="mt-5">
|
||||||
|
<ElCol :span="6">
|
||||||
|
<ElCard shadow="hover">
|
||||||
|
<ElStatistic title="Total Roles" :value="stats.totalRoles" />
|
||||||
|
</ElCard>
|
||||||
|
</ElCol>
|
||||||
|
<ElCol :span="6">
|
||||||
|
<ElCard shadow="hover">
|
||||||
|
<ElStatistic title="OAuth Clients" :value="stats.totalOAuthClients" />
|
||||||
|
</ElCard>
|
||||||
|
</ElCol>
|
||||||
|
<ElCol :span="12">
|
||||||
|
<ElCard shadow="hover">
|
||||||
|
<ElStatistic title="Audit Logs Today" :value="stats.auditLogsToday" />
|
||||||
|
</ElCard>
|
||||||
|
</ElCol>
|
||||||
|
</ElRow>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
245
apps/web-ele/src/views/fengling/oauth/index.vue
Normal file
245
apps/web-ele/src/views/fengling/oauth/index.vue
Normal file
@ -0,0 +1,245 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
|
||||||
|
import {
|
||||||
|
ElTable,
|
||||||
|
ElTableColumn,
|
||||||
|
ElButton,
|
||||||
|
ElDialog,
|
||||||
|
ElForm,
|
||||||
|
ElFormItem,
|
||||||
|
ElInput,
|
||||||
|
ElTag,
|
||||||
|
ElMessage,
|
||||||
|
ElPopconfirm,
|
||||||
|
} from 'element-plus';
|
||||||
|
|
||||||
|
import { OAuthApi, type FenglingApi } from '#/api/fengling';
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
|
const tableData = ref<FenglingApi.OAuth.OAuthClient[]>([]);
|
||||||
|
const dialogVisible = ref(false);
|
||||||
|
const dialogTitle = ref('Create OAuth Client');
|
||||||
|
const formData = ref<Partial<FenglingApi.OAuth.CreateOAuthClientDto>>({});
|
||||||
|
const searchKeyword = ref('');
|
||||||
|
|
||||||
|
const pagination = ref({
|
||||||
|
page: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const loadClients = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
const response = await OAuthApi.getClientList({
|
||||||
|
page: pagination.value.page,
|
||||||
|
pageSize: pagination.value.pageSize,
|
||||||
|
keyword: searchKeyword.value || undefined,
|
||||||
|
});
|
||||||
|
tableData.value = response.items;
|
||||||
|
pagination.value.total = response.totalCount;
|
||||||
|
} catch (error) {
|
||||||
|
ElMessage.error('Failed to load OAuth clients');
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCreate = () => {
|
||||||
|
dialogTitle.value = 'Create OAuth Client';
|
||||||
|
formData.value = {
|
||||||
|
redirectUris: [],
|
||||||
|
postLogoutRedirectUris: [],
|
||||||
|
scopes: [],
|
||||||
|
grantTypes: [],
|
||||||
|
clientType: 'confidential',
|
||||||
|
consentType: 'explicit',
|
||||||
|
status: 'active',
|
||||||
|
};
|
||||||
|
dialogVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (row: FenglingApi.OAuth.OAuthClient) => {
|
||||||
|
dialogTitle.value = 'Edit OAuth Client';
|
||||||
|
formData.value = {
|
||||||
|
displayName: row.displayName,
|
||||||
|
redirectUris: row.redirectUris,
|
||||||
|
postLogoutRedirectUris: row.postLogoutRedirectUris,
|
||||||
|
scopes: row.scopes,
|
||||||
|
grantTypes: row.grantTypes,
|
||||||
|
clientType: row.clientType,
|
||||||
|
consentType: row.consentType,
|
||||||
|
status: row.status,
|
||||||
|
description: row.description,
|
||||||
|
};
|
||||||
|
dialogVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = async (id: number) => {
|
||||||
|
try {
|
||||||
|
await OAuthApi.deleteClient(id);
|
||||||
|
ElMessage.success('OAuth client deleted successfully');
|
||||||
|
loadClients();
|
||||||
|
} catch (error) {
|
||||||
|
ElMessage.error('Failed to delete OAuth client');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSave = async () => {
|
||||||
|
try {
|
||||||
|
if (dialogTitle.value === 'Create OAuth Client') {
|
||||||
|
await OAuthApi.createClient(formData.value as FenglingApi.OAuth.CreateOAuthClientDto);
|
||||||
|
ElMessage.success('OAuth client created successfully');
|
||||||
|
} else {
|
||||||
|
await OAuthApi.updateClient(tableData.value[0].id, formData.value as FenglingApi.OAuth.UpdateOAuthClientDto);
|
||||||
|
ElMessage.success('OAuth client updated successfully');
|
||||||
|
}
|
||||||
|
dialogVisible.value = false;
|
||||||
|
loadClients();
|
||||||
|
} catch (error) {
|
||||||
|
ElMessage.error('Failed to save OAuth client');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadClients();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="p-5">
|
||||||
|
<div class="mb-4 flex items-center justify-between">
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<el-input
|
||||||
|
v-model="searchKeyword"
|
||||||
|
placeholder="Search by keyword"
|
||||||
|
clearable
|
||||||
|
@clear="loadClients"
|
||||||
|
@keyup.enter="loadClients"
|
||||||
|
/>
|
||||||
|
<el-button type="primary" @click="loadClients">Search</el-button>
|
||||||
|
</div>
|
||||||
|
<el-button type="primary" @click="handleCreate">Create OAuth Client</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-table :data="tableData" v-loading="loading" border stripe>
|
||||||
|
<el-table-column prop="id" label="ID" width="80" />
|
||||||
|
<el-table-column prop="clientId" label="Client ID" width="200" />
|
||||||
|
<el-table-column prop="displayName" label="Display Name" width="200" />
|
||||||
|
<el-table-column label="Redirect URIs" width="250">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<div v-for="uri in row.redirectUris" :key="uri" class="mb-1 text-xs">
|
||||||
|
{{ uri }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="Scopes" width="200">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag v-for="scope in row.scopes" :key="scope" class="mr-1 mb-1" size="small">
|
||||||
|
{{ scope }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="clientType" label="Client Type" width="120" />
|
||||||
|
<el-table-column prop="consentType" label="Consent Type" width="120" />
|
||||||
|
<el-table-column label="Status" width="100">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag :type="row.status === 'active' ? 'success' : 'danger'">
|
||||||
|
{{ row.status }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="updatedAt" label="Updated At" width="180" />
|
||||||
|
<el-table-column label="Actions" width="250" fixed="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button size="small" @click="handleEdit(row)">Edit</el-button>
|
||||||
|
<el-popconfirm title="Are you sure to delete this OAuth client?" @confirm="handleDelete(row.id)">
|
||||||
|
<template #reference>
|
||||||
|
<el-button size="small" type="danger">Delete</el-button>
|
||||||
|
</template>
|
||||||
|
</el-popconfirm>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<div class="mt-4 flex justify-end">
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="pagination.page"
|
||||||
|
v-model:page-size="pagination.pageSize"
|
||||||
|
:total="pagination.total"
|
||||||
|
:page-sizes="[10, 20, 50, 100]"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
@change="loadClients"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="700px">
|
||||||
|
<el-form :model="formData" label-width="160px">
|
||||||
|
<el-form-item label="Client ID" v-if="dialogTitle === 'Create OAuth Client'">
|
||||||
|
<el-input v-model="formData.clientId" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Display Name">
|
||||||
|
<el-input v-model="formData.displayName" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Client Secret" v-if="dialogTitle === 'Create OAuth Client'">
|
||||||
|
<el-input v-model="formData.clientSecret" type="password" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Redirect URIs">
|
||||||
|
<el-input
|
||||||
|
v-model="formData.redirectUris"
|
||||||
|
type="textarea"
|
||||||
|
placeholder="Enter redirect URIs separated by commas"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Post Logout Redirect URIs">
|
||||||
|
<el-input
|
||||||
|
v-model="formData.postLogoutRedirectUris"
|
||||||
|
type="textarea"
|
||||||
|
placeholder="Enter post logout redirect URIs separated by commas"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Scopes">
|
||||||
|
<el-input
|
||||||
|
v-model="formData.scopes"
|
||||||
|
type="textarea"
|
||||||
|
placeholder="Enter scopes separated by commas"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Grant Types">
|
||||||
|
<el-input
|
||||||
|
v-model="formData.grantTypes"
|
||||||
|
type="textarea"
|
||||||
|
placeholder="Enter grant types separated by commas (e.g., authorization_code, client_credentials, refresh_token)"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Client Type">
|
||||||
|
<el-select v-model="formData.clientType">
|
||||||
|
<el-option label="Confidential" value="confidential" />
|
||||||
|
<el-option label="Public" value="public" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Consent Type">
|
||||||
|
<el-select v-model="formData.consentType">
|
||||||
|
<el-option label="Explicit" value="explicit" />
|
||||||
|
<el-option label="Implicit" value="implicit" />
|
||||||
|
<el-option label="External" value="external" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Status">
|
||||||
|
<el-select v-model="formData.status">
|
||||||
|
<el-option label="Active" value="active" />
|
||||||
|
<el-option label="Inactive" value="inactive" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Description">
|
||||||
|
<el-input v-model="formData.description" type="textarea" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="dialogVisible = false">Cancel</el-button>
|
||||||
|
<el-button type="primary" @click="handleSave">Save</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
175
apps/web-ele/src/views/fengling/roles/index.vue
Normal file
175
apps/web-ele/src/views/fengling/roles/index.vue
Normal file
@ -0,0 +1,175 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
|
||||||
|
import {
|
||||||
|
ElTable,
|
||||||
|
ElTableColumn,
|
||||||
|
ElButton,
|
||||||
|
ElDialog,
|
||||||
|
ElForm,
|
||||||
|
ElFormItem,
|
||||||
|
ElInput,
|
||||||
|
ElTag,
|
||||||
|
ElMessage,
|
||||||
|
ElPopconfirm,
|
||||||
|
} from 'element-plus';
|
||||||
|
|
||||||
|
import { RoleApi, type FenglingApi } from '#/api/fengling';
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
|
const tableData = ref<FenglingApi.Role.Role[]>([]);
|
||||||
|
const dialogVisible = ref(false);
|
||||||
|
const dialogTitle = ref('Create Role');
|
||||||
|
const formData = ref<Partial<FenglingApi.Role.CreateRoleDto>>({});
|
||||||
|
const searchKeyword = ref('');
|
||||||
|
|
||||||
|
const pagination = ref({
|
||||||
|
page: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const loadRoles = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
const response = await RoleApi.getRoleList({
|
||||||
|
page: pagination.value.page,
|
||||||
|
pageSize: pagination.value.pageSize,
|
||||||
|
keyword: searchKeyword.value || undefined,
|
||||||
|
});
|
||||||
|
tableData.value = response.items;
|
||||||
|
pagination.value.total = response.totalCount;
|
||||||
|
} catch (error) {
|
||||||
|
ElMessage.error('Failed to load roles');
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCreate = () => {
|
||||||
|
dialogTitle.value = 'Create Role';
|
||||||
|
formData.value = {
|
||||||
|
permissions: [],
|
||||||
|
};
|
||||||
|
dialogVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (row: FenglingApi.Role.Role) => {
|
||||||
|
dialogTitle.value = 'Edit Role';
|
||||||
|
formData.value = {
|
||||||
|
displayName: row.displayName,
|
||||||
|
description: row.description,
|
||||||
|
permissions: row.permissions,
|
||||||
|
};
|
||||||
|
dialogVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = async (id: number) => {
|
||||||
|
try {
|
||||||
|
await RoleApi.deleteRole(id);
|
||||||
|
ElMessage.success('Role deleted successfully');
|
||||||
|
loadRoles();
|
||||||
|
} catch (error) {
|
||||||
|
ElMessage.error('Failed to delete role');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSave = async () => {
|
||||||
|
try {
|
||||||
|
if (dialogTitle.value === 'Create Role') {
|
||||||
|
await RoleApi.createRole(formData.value as FenglingApi.Role.CreateRoleDto);
|
||||||
|
ElMessage.success('Role created successfully');
|
||||||
|
} else {
|
||||||
|
await RoleApi.updateRole(tableData.value[0].id, formData.value as FenglingApi.Role.UpdateRoleDto);
|
||||||
|
ElMessage.success('Role updated successfully');
|
||||||
|
}
|
||||||
|
dialogVisible.value = false;
|
||||||
|
loadRoles();
|
||||||
|
} catch (error) {
|
||||||
|
ElMessage.error('Failed to save role');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadRoles();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="p-5">
|
||||||
|
<div class="mb-4 flex items-center justify-between">
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<el-input
|
||||||
|
v-model="searchKeyword"
|
||||||
|
placeholder="Search by keyword"
|
||||||
|
clearable
|
||||||
|
@clear="loadRoles"
|
||||||
|
@keyup.enter="loadRoles"
|
||||||
|
/>
|
||||||
|
<el-button type="primary" @click="loadRoles">Search</el-button>
|
||||||
|
</div>
|
||||||
|
<el-button type="primary" @click="handleCreate">Create Role</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-table :data="tableData" v-loading="loading" border stripe>
|
||||||
|
<el-table-column prop="id" label="ID" width="80" />
|
||||||
|
<el-table-column prop="name" label="Name" width="150" />
|
||||||
|
<el-table-column prop="displayName" label="Display Name" width="200" />
|
||||||
|
<el-table-column prop="description" label="Description" width="250" />
|
||||||
|
<el-table-column label="Permissions" width="300">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag v-for="perm in row.permissions" :key="perm" class="mr-1 mb-1" size="small">
|
||||||
|
{{ perm }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="createdAt" label="Created At" width="180" />
|
||||||
|
<el-table-column label="Actions" width="200" fixed="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button size="small" @click="handleEdit(row)">Edit</el-button>
|
||||||
|
<el-popconfirm title="Are you sure to delete this role?" @confirm="handleDelete(row.id)">
|
||||||
|
<template #reference>
|
||||||
|
<el-button size="small" type="danger">Delete</el-button>
|
||||||
|
</template>
|
||||||
|
</el-popconfirm>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<div class="mt-4 flex justify-end">
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="pagination.page"
|
||||||
|
v-model:page-size="pagination.pageSize"
|
||||||
|
:total="pagination.total"
|
||||||
|
:page-sizes="[10, 20, 50, 100]"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
@change="loadRoles"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px">
|
||||||
|
<el-form :model="formData" label-width="120px">
|
||||||
|
<el-form-item label="Name" v-if="dialogTitle === 'Create Role'">
|
||||||
|
<el-input v-model="formData.name" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Display Name">
|
||||||
|
<el-input v-model="formData.displayName" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Description">
|
||||||
|
<el-input v-model="formData.description" type="textarea" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Permissions">
|
||||||
|
<el-input
|
||||||
|
v-model="formData.permissions"
|
||||||
|
type="textarea"
|
||||||
|
placeholder="Enter permissions separated by commas"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="dialogVisible = false">Cancel</el-button>
|
||||||
|
<el-button type="primary" @click="handleSave">Save</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
209
apps/web-ele/src/views/fengling/tenants/index.vue
Normal file
209
apps/web-ele/src/views/fengling/tenants/index.vue
Normal file
@ -0,0 +1,209 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
|
||||||
|
import {
|
||||||
|
ElTable,
|
||||||
|
ElTableColumn,
|
||||||
|
ElButton,
|
||||||
|
ElDialog,
|
||||||
|
ElForm,
|
||||||
|
ElFormItem,
|
||||||
|
ElInput,
|
||||||
|
ElSelect,
|
||||||
|
ElOption,
|
||||||
|
ElInputNumber,
|
||||||
|
ElDatePicker,
|
||||||
|
ElTag,
|
||||||
|
ElMessage,
|
||||||
|
ElPopconfirm,
|
||||||
|
} from 'element-plus';
|
||||||
|
|
||||||
|
import { TenantApi, type FenglingApi } from '#/api/fengling';
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
|
const tableData = ref<FenglingApi.Tenant.Tenant[]>([]);
|
||||||
|
const dialogVisible = ref(false);
|
||||||
|
const dialogTitle = ref('Create Tenant');
|
||||||
|
const formData = ref<Partial<FenglingApi.Tenant.CreateTenantDto>>({});
|
||||||
|
const searchKeyword = ref('');
|
||||||
|
const searchStatus = ref('');
|
||||||
|
|
||||||
|
const pagination = ref({
|
||||||
|
page: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const loadTenants = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
const response = await TenantApi.getTenantList({
|
||||||
|
page: pagination.value.page,
|
||||||
|
pageSize: pagination.value.pageSize,
|
||||||
|
keyword: searchKeyword.value || undefined,
|
||||||
|
status: searchStatus.value || undefined,
|
||||||
|
});
|
||||||
|
tableData.value = response.items;
|
||||||
|
pagination.value.total = response.totalCount;
|
||||||
|
} catch (error) {
|
||||||
|
ElMessage.error('Failed to load tenants');
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCreate = () => {
|
||||||
|
dialogTitle.value = 'Create Tenant';
|
||||||
|
formData.value = {
|
||||||
|
status: 'active',
|
||||||
|
};
|
||||||
|
dialogVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (row: FenglingApi.Tenant.Tenant) => {
|
||||||
|
dialogTitle.value = 'Edit Tenant';
|
||||||
|
formData.value = {
|
||||||
|
name: row.name,
|
||||||
|
contactName: row.contactName,
|
||||||
|
contactEmail: row.contactEmail,
|
||||||
|
contactPhone: row.contactPhone,
|
||||||
|
maxUsers: row.maxUsers,
|
||||||
|
expiresAt: row.expiresAt,
|
||||||
|
status: row.status === 'expired' ? 'inactive' : row.status,
|
||||||
|
description: row.description,
|
||||||
|
};
|
||||||
|
dialogVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = async (id: number) => {
|
||||||
|
try {
|
||||||
|
await TenantApi.deleteTenant(id);
|
||||||
|
ElMessage.success('Tenant deleted successfully');
|
||||||
|
loadTenants();
|
||||||
|
} catch (error) {
|
||||||
|
ElMessage.error('Failed to delete tenant');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSave = async () => {
|
||||||
|
try {
|
||||||
|
if (dialogTitle.value === 'Create Tenant') {
|
||||||
|
await TenantApi.createTenant(formData.value as FenglingApi.Tenant.CreateTenantDto);
|
||||||
|
ElMessage.success('Tenant created successfully');
|
||||||
|
} else {
|
||||||
|
await TenantApi.updateTenant(tableData.value[0].id, formData.value as FenglingApi.Tenant.UpdateTenantDto);
|
||||||
|
ElMessage.success('Tenant updated successfully');
|
||||||
|
}
|
||||||
|
dialogVisible.value = false;
|
||||||
|
loadTenants();
|
||||||
|
} catch (error) {
|
||||||
|
ElMessage.error('Failed to save tenant');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadTenants();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="p-5">
|
||||||
|
<div class="mb-4 flex items-center justify-between">
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<el-input
|
||||||
|
v-model="searchKeyword"
|
||||||
|
placeholder="Search by keyword"
|
||||||
|
clearable
|
||||||
|
@clear="loadTenants"
|
||||||
|
@keyup.enter="loadTenants"
|
||||||
|
/>
|
||||||
|
<el-select v-model="searchStatus" placeholder="Status" clearable @change="loadTenants">
|
||||||
|
<el-option label="Active" value="active" />
|
||||||
|
<el-option label="Inactive" value="inactive" />
|
||||||
|
<el-option label="Expired" value="expired" />
|
||||||
|
</el-select>
|
||||||
|
<el-button type="primary" @click="loadTenants">Search</el-button>
|
||||||
|
</div>
|
||||||
|
<el-button type="primary" @click="handleCreate">Create Tenant</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-table :data="tableData" v-loading="loading" border stripe>
|
||||||
|
<el-table-column prop="id" label="ID" width="80" />
|
||||||
|
<el-table-column prop="tenantId" label="Tenant ID" width="150" />
|
||||||
|
<el-table-column prop="name" label="Name" width="200" />
|
||||||
|
<el-table-column prop="contactName" label="Contact Name" width="150" />
|
||||||
|
<el-table-column prop="contactEmail" label="Contact Email" width="200" />
|
||||||
|
<el-table-column prop="contactPhone" label="Contact Phone" width="150" />
|
||||||
|
<el-table-column prop="userCount" label="User Count" width="100" />
|
||||||
|
<el-table-column label="Status" width="100">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag :type="row.status === 'active' ? 'success' : row.status === 'expired' ? 'danger' : 'warning'">
|
||||||
|
{{ row.status }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="expiresAt" label="Expires At" width="180" />
|
||||||
|
<el-table-column prop="createdAt" label="Created At" width="180" />
|
||||||
|
<el-table-column label="Actions" width="200" fixed="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button size="small" @click="handleEdit(row)">Edit</el-button>
|
||||||
|
<el-popconfirm title="Are you sure to delete this tenant?" @confirm="handleDelete(row.id)">
|
||||||
|
<template #reference>
|
||||||
|
<el-button size="small" type="danger">Delete</el-button>
|
||||||
|
</template>
|
||||||
|
</el-popconfirm>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<div class="mt-4 flex justify-end">
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="pagination.page"
|
||||||
|
v-model:page-size="pagination.pageSize"
|
||||||
|
:total="pagination.total"
|
||||||
|
:page-sizes="[10, 20, 50, 100]"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
@change="loadTenants"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
|
||||||
|
<el-form :model="formData" label-width="120px">
|
||||||
|
<el-form-item label="Tenant ID">
|
||||||
|
<el-input v-model="formData.tenantId" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Name">
|
||||||
|
<el-input v-model="formData.name" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Contact Name">
|
||||||
|
<el-input v-model="formData.contactName" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Contact Email">
|
||||||
|
<el-input v-model="formData.contactEmail" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Contact Phone">
|
||||||
|
<el-input v-model="formData.contactPhone" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Max Users">
|
||||||
|
<el-input-number v-model="formData.maxUsers" :min="1" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Expires At">
|
||||||
|
<el-date-picker v-model="formData.expiresAt" type="datetime" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Status">
|
||||||
|
<el-select v-model="formData.status">
|
||||||
|
<el-option label="Active" value="active" />
|
||||||
|
<el-option label="Inactive" value="inactive" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Description">
|
||||||
|
<el-input v-model="formData.description" type="textarea" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="dialogVisible = false">Cancel</el-button>
|
||||||
|
<el-button type="primary" @click="handleSave">Save</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
185
apps/web-ele/src/views/fengling/users/index.vue
Normal file
185
apps/web-ele/src/views/fengling/users/index.vue
Normal file
@ -0,0 +1,185 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
|
||||||
|
import {
|
||||||
|
ElTable,
|
||||||
|
ElTableColumn,
|
||||||
|
ElButton,
|
||||||
|
ElDialog,
|
||||||
|
ElForm,
|
||||||
|
ElFormItem,
|
||||||
|
ElInput,
|
||||||
|
ElTag,
|
||||||
|
ElMessage,
|
||||||
|
ElPopconfirm,
|
||||||
|
ElSwitch,
|
||||||
|
} from 'element-plus';
|
||||||
|
|
||||||
|
import { UserApi, type FenglingApi } from '#/api/fengling';
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
|
const tableData = ref<FenglingApi.User.User[]>([]);
|
||||||
|
const dialogVisible = ref(false);
|
||||||
|
const dialogTitle = ref('Create User');
|
||||||
|
const formData = ref<Partial<FenglingApi.User.CreateUserDto>>({});
|
||||||
|
const searchKeyword = ref('');
|
||||||
|
|
||||||
|
const pagination = ref({
|
||||||
|
page: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const loadUsers = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
const response = await UserApi.getUserList({
|
||||||
|
page: pagination.value.page,
|
||||||
|
pageSize: pagination.value.pageSize,
|
||||||
|
keyword: searchKeyword.value || undefined,
|
||||||
|
});
|
||||||
|
tableData.value = response.items;
|
||||||
|
pagination.value.total = response.totalCount;
|
||||||
|
} catch (error) {
|
||||||
|
ElMessage.error('Failed to load users');
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCreate = () => {
|
||||||
|
dialogTitle.value = 'Create User';
|
||||||
|
formData.value = {
|
||||||
|
roleIds: [],
|
||||||
|
};
|
||||||
|
dialogVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (row: FenglingApi.User.User) => {
|
||||||
|
dialogTitle.value = 'Edit User';
|
||||||
|
formData.value = {
|
||||||
|
email: row.email,
|
||||||
|
realName: row.realName,
|
||||||
|
isActive: row.isActive,
|
||||||
|
roleIds: [],
|
||||||
|
};
|
||||||
|
dialogVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = async (id: number) => {
|
||||||
|
try {
|
||||||
|
await UserApi.deleteUser(id);
|
||||||
|
ElMessage.success('User deleted successfully');
|
||||||
|
loadUsers();
|
||||||
|
} catch (error) {
|
||||||
|
ElMessage.error('Failed to delete user');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSave = async () => {
|
||||||
|
try {
|
||||||
|
if (dialogTitle.value === 'Create User') {
|
||||||
|
await UserApi.createUser(formData.value as FenglingApi.User.CreateUserDto);
|
||||||
|
ElMessage.success('User created successfully');
|
||||||
|
} else {
|
||||||
|
await UserApi.updateUser(tableData.value[0].id, formData.value as FenglingApi.User.UpdateUserDto);
|
||||||
|
ElMessage.success('User updated successfully');
|
||||||
|
}
|
||||||
|
dialogVisible.value = false;
|
||||||
|
loadUsers();
|
||||||
|
} catch (error) {
|
||||||
|
ElMessage.error('Failed to save user');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadUsers();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="p-5">
|
||||||
|
<div class="mb-4 flex items-center justify-between">
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<el-input
|
||||||
|
v-model="searchKeyword"
|
||||||
|
placeholder="Search by keyword"
|
||||||
|
clearable
|
||||||
|
@clear="loadUsers"
|
||||||
|
@keyup.enter="loadUsers"
|
||||||
|
/>
|
||||||
|
<el-button type="primary" @click="loadUsers">Search</el-button>
|
||||||
|
</div>
|
||||||
|
<el-button type="primary" @click="handleCreate">Create User</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-table :data="tableData" v-loading="loading" border stripe>
|
||||||
|
<el-table-column prop="id" label="ID" width="80" />
|
||||||
|
<el-table-column prop="userName" label="Username" width="150" />
|
||||||
|
<el-table-column prop="email" label="Email" width="200" />
|
||||||
|
<el-table-column prop="realName" label="Real Name" width="150" />
|
||||||
|
<el-table-column prop="tenantId" label="Tenant ID" width="150" />
|
||||||
|
<el-table-column label="Roles" width="200">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag v-for="role in row.roles" :key="role" class="mr-1">{{ role }}</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="Active" width="100">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag :type="row.isActive ? 'success' : 'info'">
|
||||||
|
{{ row.isActive ? 'Yes' : 'No' }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="createdAt" label="Created At" width="180" />
|
||||||
|
<el-table-column label="Actions" width="200" fixed="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button size="small" @click="handleEdit(row)">Edit</el-button>
|
||||||
|
<el-popconfirm title="Are you sure to delete this user?" @confirm="handleDelete(row.id)">
|
||||||
|
<template #reference>
|
||||||
|
<el-button size="small" type="danger">Delete</el-button>
|
||||||
|
</template>
|
||||||
|
</el-popconfirm>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<div class="mt-4 flex justify-end">
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="pagination.page"
|
||||||
|
v-model:page-size="pagination.pageSize"
|
||||||
|
:total="pagination.total"
|
||||||
|
:page-sizes="[10, 20, 50, 100]"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
@change="loadUsers"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
|
||||||
|
<el-form :model="formData" label-width="120px">
|
||||||
|
<el-form-item label="Username">
|
||||||
|
<el-input v-model="formData.userName" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Email">
|
||||||
|
<el-input v-model="formData.email" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Real Name">
|
||||||
|
<el-input v-model="formData.realName" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Password" v-if="dialogTitle === 'Create User'">
|
||||||
|
<el-input v-model="formData.password" type="password" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Tenant ID">
|
||||||
|
<el-input v-model="formData.tenantId" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Active">
|
||||||
|
<el-switch v-model="formData.isActive" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="dialogVisible = false">Cancel</el-button>
|
||||||
|
<el-button type="primary" @click="handleSave">Save</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
Loading…
Reference in New Issue
Block a user