mirror of
https://github.com/continew-org/continew-admin-ui.git
synced 2025-09-18 08:57:08 +08:00
refactor(tenant): 优化租户相关代码
This commit is contained in:
@@ -5,11 +5,6 @@ export type * from './type'
|
||||
|
||||
const BASE_URL = '/captcha'
|
||||
|
||||
/** @desc 获取图片验证码 */
|
||||
export function getCaptchaConfig() {
|
||||
return http.get<boolean>(`${BASE_URL}/config`)
|
||||
}
|
||||
|
||||
/** @desc 获取图片验证码 */
|
||||
export function getImageCaptcha() {
|
||||
return http.get<T.ImageCaptchaResp>(`${BASE_URL}/image`)
|
||||
|
||||
@@ -24,6 +24,16 @@ export function listRoleDict(query?: { name: string, status: number }) {
|
||||
return http.get<LabelValueState[]>(`${BASE_URL}/dict/role`, query)
|
||||
}
|
||||
|
||||
/** @desc 查询租户套餐列表 */
|
||||
export function listTenantPackageDict(query?: { description: string, status: number }) {
|
||||
return http.get<LabelValueState[]>(`${BASE_URL}/dict/package`, query)
|
||||
}
|
||||
|
||||
/** @desc 查询租户数据源列表 */
|
||||
export function listTenantDatasourceDict(query?: { description: string }) {
|
||||
return http.get<LabelValueState[]>(`${BASE_URL}/dict/datasource`, query)
|
||||
}
|
||||
|
||||
/** @desc 查询字典列表 */
|
||||
export function listCommonDict(code: string) {
|
||||
return http.get<LabelValueState[]>(`${BASE_URL}/dict/${code}`)
|
||||
@@ -35,6 +45,6 @@ export function listSiteOptionDict() {
|
||||
}
|
||||
|
||||
/** @desc 上传文件 */
|
||||
export function uploadFile(data: FormData) {
|
||||
export function upload(data: FormData) {
|
||||
return http.post(`${BASE_URL}/file`, data)
|
||||
}
|
||||
|
||||
@@ -3,13 +3,17 @@ export * from './auth'
|
||||
export * from './common'
|
||||
export * from './monitor'
|
||||
export * from './system'
|
||||
export * from './code'
|
||||
export * from './open'
|
||||
export * from './tenant'
|
||||
export * from './schedule'
|
||||
export * from './code'
|
||||
|
||||
export * from './area/type'
|
||||
export * from './auth/type'
|
||||
export * from './common/type'
|
||||
export * from './monitor/type'
|
||||
export * from './system/type'
|
||||
export * from './code/type'
|
||||
export * from './open/type'
|
||||
export * from './tenant/type'
|
||||
export * from './schedule/type'
|
||||
export * from './code/type'
|
||||
|
||||
1
src/apis/open/index.ts
Normal file
1
src/apis/open/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './app'
|
||||
36
src/apis/tenant/datasource.ts
Normal file
36
src/apis/tenant/datasource.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import type * as T from './type'
|
||||
import http from '@/utils/http'
|
||||
|
||||
export type * from './type'
|
||||
|
||||
const BASE_URL = '/tenant/datasource'
|
||||
|
||||
/** @desc 查询租户数据源列表 */
|
||||
export function listTenantDatasource(query: T.TenantDatasourcePageQuery) {
|
||||
return http.get<PageRes<T.TenantDatasourceResp[]>>(`${BASE_URL}`, query)
|
||||
}
|
||||
|
||||
/** @desc 查询租户数据源详情 */
|
||||
export function getTenantDatasource(id: string) {
|
||||
return http.get<T.TenantDatasourceResp>(`${BASE_URL}/${id}`)
|
||||
}
|
||||
|
||||
/** @desc 新增租户数据源 */
|
||||
export function addTenantDatasource(data: any) {
|
||||
return http.post(`${BASE_URL}`, data)
|
||||
}
|
||||
|
||||
/** @desc 修改租户数据源 */
|
||||
export function updateTenantDatasource(data: any, id: string) {
|
||||
return http.put(`${BASE_URL}/${id}`, data)
|
||||
}
|
||||
|
||||
/** @desc 删除租户数据源 */
|
||||
export function deleteTenantDatasource(id: string) {
|
||||
return http.del(`${BASE_URL}/${id}`)
|
||||
}
|
||||
|
||||
/** @desc 测试租户数据源连接 */
|
||||
export function testTenantDatasourceConnection(id: string) {
|
||||
return http.post(`${BASE_URL}/${id}/test/connection`)
|
||||
}
|
||||
2
src/apis/tenant/index.ts
Normal file
2
src/apis/tenant/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export * from './package'
|
||||
export * from './datasource'
|
||||
42
src/apis/tenant/management.ts
Normal file
42
src/apis/tenant/management.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
import type * as T from './type'
|
||||
import http from '@/utils/http'
|
||||
import type { TenantCommon } from '@/utils/tenant'
|
||||
|
||||
export type * from './type'
|
||||
|
||||
const BASE_URL = '/tenant/management'
|
||||
|
||||
/** @desc 查询租户列表 */
|
||||
export function listTenant(query: T.TenantPageQuery) {
|
||||
return http.get<PageRes<T.TenantResp[]>>(`${BASE_URL}`, query)
|
||||
}
|
||||
|
||||
/** @desc 查询租户详情 */
|
||||
export function getTenant(id: string) {
|
||||
return http.get<T.TenantResp>(`${BASE_URL}/${id}`)
|
||||
}
|
||||
|
||||
/** @desc 新增租户 */
|
||||
export function addTenant(data: any) {
|
||||
return http.post(`${BASE_URL}`, data)
|
||||
}
|
||||
|
||||
/** @desc 修改租户 */
|
||||
export function updateTenant(data: any, id: string) {
|
||||
return http.put(`${BASE_URL}/${id}`, data)
|
||||
}
|
||||
|
||||
/** @desc 删除租户 */
|
||||
export function deleteTenant(id: string) {
|
||||
return http.del(`${BASE_URL}/${id}`)
|
||||
}
|
||||
|
||||
/** @desc 多租户通用信息查询 */
|
||||
export const getTenantCommon = () => {
|
||||
return http.get<TenantCommon>(`${BASE_URL}/common`)
|
||||
}
|
||||
|
||||
/** @desc 修改租户管理员密码 */
|
||||
export const updateTenantAdminUserPwd = (data: any, id: string) => {
|
||||
return http.put(`${BASE_URL}/${id}/admin/pwd`, data)
|
||||
}
|
||||
41
src/apis/tenant/package.ts
Normal file
41
src/apis/tenant/package.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import type * as T from './type'
|
||||
import http from '@/utils/http'
|
||||
|
||||
export type * from './type'
|
||||
|
||||
const BASE_URL = '/tenant/package'
|
||||
|
||||
/** @desc 查询租户套餐列表 */
|
||||
export function listTenantPackage(query: T.TenantPackagePageQuery) {
|
||||
return http.get<PageRes<T.TenantPackageResp[]>>(`${BASE_URL}`, query)
|
||||
}
|
||||
|
||||
/** @desc 查询租户套餐详情 */
|
||||
export function getTenantPackage(id: string) {
|
||||
return http.get<T.TenantPackageResp>(`${BASE_URL}/${id}`)
|
||||
}
|
||||
|
||||
/** @desc 新增租户套餐 */
|
||||
export function addTenantPackage(data: any) {
|
||||
return http.post(`${BASE_URL}`, data)
|
||||
}
|
||||
|
||||
/** @desc 修改租户套餐 */
|
||||
export function updateTenantPackage(data: any, id: string) {
|
||||
return http.put(`${BASE_URL}/${id}`, data)
|
||||
}
|
||||
|
||||
/** @desc 删除租户套餐 */
|
||||
export function deleteTenantPackage(id: string) {
|
||||
return http.del(`${BASE_URL}/${id}`)
|
||||
}
|
||||
|
||||
/** @desc 查询所有套餐 */
|
||||
export function listAllTenantPackage() {
|
||||
return http.get<T.TenantPackageResp[]>(`${BASE_URL}/list`)
|
||||
}
|
||||
|
||||
/** @desc 查询套餐菜单 */
|
||||
export function listTenantPackageMenu() {
|
||||
return http.get<any>(`${BASE_URL}/menu/tree`)
|
||||
}
|
||||
@@ -1,94 +0,0 @@
|
||||
import http from '@/utils/http'
|
||||
import type { TenantCommon } from '@/utils/tenant'
|
||||
|
||||
const BASE_URL = '/tenant/user'
|
||||
|
||||
export interface TenantResp {
|
||||
id: string
|
||||
name: string
|
||||
domain: string
|
||||
packageId: string
|
||||
status: string
|
||||
expireTime: string
|
||||
createTime: string
|
||||
createUserString: string
|
||||
updateUserString: string
|
||||
}
|
||||
export interface TenantDetailResp {
|
||||
id: string
|
||||
name: string
|
||||
domain: string
|
||||
packageId: string
|
||||
status: string
|
||||
expireTime: string
|
||||
createUser: string
|
||||
createTime: string
|
||||
updateUser: string
|
||||
updateTime: string
|
||||
createUserString: string
|
||||
updateUserString: string
|
||||
packageName: string
|
||||
menuIds: []
|
||||
}
|
||||
export interface TenantQuery {
|
||||
name: string
|
||||
packageId: string
|
||||
status: string
|
||||
sort: Array<string>
|
||||
}
|
||||
export interface TenantPageQuery extends TenantQuery, PageQuery {}
|
||||
|
||||
/** @desc 查询租户列表 */
|
||||
export function listTenant(query: TenantPageQuery) {
|
||||
return http.get<PageRes<TenantResp[]>>(`${BASE_URL}`, query)
|
||||
}
|
||||
|
||||
/** @desc 查询租户详情 */
|
||||
export function getTenant(id: string) {
|
||||
return http.get<TenantDetailResp>(`${BASE_URL}/${id}`)
|
||||
}
|
||||
|
||||
/** @desc 新增租户 */
|
||||
export function addTenant(data: any) {
|
||||
return http.post(`${BASE_URL}`, data)
|
||||
}
|
||||
|
||||
/** @desc 修改租户 */
|
||||
export function updateTenant(data: any, id: string) {
|
||||
return http.put(`${BASE_URL}/${id}`, data)
|
||||
}
|
||||
|
||||
/** @desc 删除租户 */
|
||||
export function deleteTenant(id: string) {
|
||||
return http.del(`${BASE_URL}/${id}`)
|
||||
}
|
||||
|
||||
/** @desc 导出租户 */
|
||||
export function exportTenant(query: TenantQuery) {
|
||||
return http.download<any>(`${BASE_URL}/export`, query)
|
||||
}
|
||||
|
||||
/** @desc 多租户通用信息查询 */
|
||||
export const getTenantCommon = () => {
|
||||
return http.get<TenantCommon>(`${BASE_URL}/common`)
|
||||
}
|
||||
|
||||
/** @desc 获取租户管理账号用户名 */
|
||||
export const getTenantLoginUser = (tenantId: string) => {
|
||||
return http.get<string>(`${BASE_URL}/loginUser/${tenantId}`)
|
||||
}
|
||||
|
||||
/** @desc 租户管理账号信息更新 */
|
||||
export const updateTenantLoginUser = (data: any) => {
|
||||
return http.put(`${BASE_URL}/loginUser`, data)
|
||||
}
|
||||
|
||||
/** @desc 获取套餐列表 */
|
||||
export const listAllPackage = () => {
|
||||
return http.get<any>(`${BASE_URL}/all/package`)
|
||||
}
|
||||
|
||||
/** @desc 获取数据连接列表 */
|
||||
export const listAllDbConnect = () => {
|
||||
return http.get<any>(`${BASE_URL}/all/dbConnect`)
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
import http from '@/utils/http'
|
||||
|
||||
const BASE_URL = '/tenant/dbConnect'
|
||||
|
||||
export interface TenantDbConnectResp {
|
||||
id: string
|
||||
connectName: string
|
||||
type: string
|
||||
host: string
|
||||
port: string
|
||||
username: string
|
||||
password: string
|
||||
createUserString: string
|
||||
updateUserString: string
|
||||
}
|
||||
export interface TenantDbConnectDetailResp {
|
||||
id: string
|
||||
connectName: string
|
||||
type: string
|
||||
host: string
|
||||
port: string
|
||||
username: string
|
||||
password: string
|
||||
createUser: string
|
||||
createTime: string
|
||||
updateUser: string
|
||||
updateTime: string
|
||||
createUserString: string
|
||||
updateUserString: string
|
||||
}
|
||||
export interface TenantDbConnectQuery {
|
||||
connectName: string
|
||||
sort: Array<string>
|
||||
}
|
||||
export interface TenantDbConnectPageQuery extends TenantDbConnectQuery, PageQuery {}
|
||||
|
||||
/** @desc 查询租户数据连接列表 */
|
||||
export function listTenantDbConnect(query: TenantDbConnectPageQuery) {
|
||||
return http.get<PageRes<TenantDbConnectResp[]>>(`${BASE_URL}`, query)
|
||||
}
|
||||
|
||||
/** @desc 查询租户数据连接详情 */
|
||||
export function getTenantDbConnect(id: string) {
|
||||
return http.get<TenantDbConnectDetailResp>(`${BASE_URL}/${id}`)
|
||||
}
|
||||
|
||||
/** @desc 新增租户数据连接 */
|
||||
export function addTenantDbConnect(data: any) {
|
||||
return http.post(`${BASE_URL}`, data)
|
||||
}
|
||||
|
||||
/** @desc 修改租户数据连接 */
|
||||
export function updateTenantDbConnect(data: any, id: string) {
|
||||
return http.put(`${BASE_URL}/${id}`, data)
|
||||
}
|
||||
|
||||
/** @desc 删除租户数据连接 */
|
||||
export function deleteTenantDbConnect(id: string) {
|
||||
return http.del(`${BASE_URL}/${id}`)
|
||||
}
|
||||
|
||||
/** @desc 导出租户数据连接 */
|
||||
export function exportTenantDbConnect(query: TenantDbConnectQuery) {
|
||||
return http.download<any>(`${BASE_URL}/export`, query)
|
||||
}
|
||||
@@ -1,73 +0,0 @@
|
||||
import http from '@/utils/http'
|
||||
|
||||
const BASE_URL = '/tenant/package'
|
||||
|
||||
export interface TenantPackageResp {
|
||||
id: string
|
||||
name: string
|
||||
menuIds: string
|
||||
menuCheckStrictly: string
|
||||
status: string
|
||||
createTime: string
|
||||
createUserString: string
|
||||
updateUserString: string
|
||||
}
|
||||
export interface TenantPackageDetailResp {
|
||||
id: string
|
||||
name: string
|
||||
menuIds: []
|
||||
menuCheckStrictly: string
|
||||
status: string
|
||||
createUser: string
|
||||
createTime: string
|
||||
updateUser: string
|
||||
updateTime: string
|
||||
createUserString: string
|
||||
updateUserString: string
|
||||
}
|
||||
export interface TenantPackageQuery {
|
||||
name: string
|
||||
status: string
|
||||
sort: Array<string>
|
||||
}
|
||||
export interface TenantPackagePageQuery extends TenantPackageQuery, PageQuery {}
|
||||
|
||||
/** @desc 查询租户套餐列表 */
|
||||
export function listTenantPackage(query: TenantPackagePageQuery) {
|
||||
return http.get<PageRes<TenantPackageResp[]>>(`${BASE_URL}`, query)
|
||||
}
|
||||
|
||||
/** @desc 查询租户套餐详情 */
|
||||
export function getTenantPackage(id: string) {
|
||||
return http.get<TenantPackageDetailResp>(`${BASE_URL}/${id}`)
|
||||
}
|
||||
|
||||
/** @desc 新增租户套餐 */
|
||||
export function addTenantPackage(data: any) {
|
||||
return http.post(`${BASE_URL}`, data)
|
||||
}
|
||||
|
||||
/** @desc 修改租户套餐 */
|
||||
export function updateTenantPackage(data: any, id: string) {
|
||||
return http.put(`${BASE_URL}/${id}`, data)
|
||||
}
|
||||
|
||||
/** @desc 删除租户套餐 */
|
||||
export function deleteTenantPackage(id: string) {
|
||||
return http.del(`${BASE_URL}/${id}`)
|
||||
}
|
||||
|
||||
/** @desc 导出租户套餐 */
|
||||
export function exportTenantPackage(query: TenantPackageQuery) {
|
||||
return http.download<any>(`${BASE_URL}/export`, query)
|
||||
}
|
||||
|
||||
/** @desc 查询所有套餐 */
|
||||
export function listAllTenantPackage() {
|
||||
return http.get<TenantPackageResp[]>(`${BASE_URL}/list`)
|
||||
}
|
||||
|
||||
/** @desc 查询套餐菜单 */
|
||||
export function listTenantPackageMenu() {
|
||||
return http.get<any>(`${BASE_URL}/menuTree`)
|
||||
}
|
||||
73
src/apis/tenant/type.ts
Normal file
73
src/apis/tenant/type.ts
Normal file
@@ -0,0 +1,73 @@
|
||||
/** 租户 */
|
||||
export interface TenantResp {
|
||||
id: string
|
||||
name: string
|
||||
code: string
|
||||
domain: string
|
||||
expireTime: string
|
||||
isolationLevel: number
|
||||
description: number
|
||||
status: string
|
||||
packageId: string
|
||||
datasourceId: string
|
||||
createUser: string
|
||||
createTime: string
|
||||
updateUser: string
|
||||
updateTime: string
|
||||
createUserString: string
|
||||
updateUserString: string
|
||||
packageName: string
|
||||
datasourceName: string
|
||||
}
|
||||
export interface TenantQuery {
|
||||
description?: string
|
||||
packageId?: string
|
||||
status?: string
|
||||
sort: Array<string>
|
||||
}
|
||||
export interface TenantPageQuery extends TenantQuery, PageQuery {}
|
||||
|
||||
/** 租户套餐 */
|
||||
export interface TenantPackageResp {
|
||||
id: string
|
||||
name: string
|
||||
sort: number
|
||||
menuCheckStrictly: string
|
||||
description: string
|
||||
status: string
|
||||
menuIds: []
|
||||
createUser: string
|
||||
createTime: string
|
||||
updateUser: string
|
||||
updateTime: string
|
||||
createUserString: string
|
||||
updateUserString: string
|
||||
}
|
||||
export interface TenantPackageQuery {
|
||||
description?: string
|
||||
status?: string
|
||||
sort: Array<string>
|
||||
}
|
||||
export interface TenantPackagePageQuery extends TenantPackageQuery, PageQuery {}
|
||||
|
||||
/** 租户数据源 */
|
||||
export interface TenantDatasourceResp {
|
||||
id: string
|
||||
name: string
|
||||
databaseType: string
|
||||
host: string
|
||||
port: string
|
||||
username: string
|
||||
description: string
|
||||
createUser: string
|
||||
createTime: string
|
||||
updateUser: string
|
||||
updateTime: string
|
||||
createUserString: string
|
||||
updateUserString: string
|
||||
}
|
||||
export interface TenantDatasourceQuery {
|
||||
description?: string
|
||||
sort: Array<string>
|
||||
}
|
||||
export interface TenantDatasourcePageQuery extends TenantDatasourceQuery, PageQuery {}
|
||||
1
src/assets/icons/block-storage.svg
Normal file
1
src/assets/icons/block-storage.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="#000000"><path fill-rule="evenodd" clip-rule="evenodd" d="M45 25a1 1 0 011 1v16a1 1 0 01-1 1H23a1 1 0 01-1-1V26a1 1 0 011-1h22zM28 6c9.62 0 17.477 7.546 17.975 17.042h-4.007C41.475 15.757 35.41 10 28 10a14.007 14.007 0 00-13.312 9.65l-.673 2.06-2.094.562A8.005 8.005 0 006 30a8 8 0 008 8h4.999v4H14C7.373 42 2 36.627 2 30c0-5.55 3.768-10.22 8.886-11.592C13.238 11.205 20.01 6 28 6zm14 23H26v10h16V29zm-9 3v4h-4v-4h4zm7 0v4h-4v-4h4z" fill="#000000"/></svg>
|
||||
|
After Width: | Height: | Size: 509 B |
1
src/assets/icons/project.svg
Normal file
1
src/assets/icons/project.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M24.958 3.522l19.433 10.6a1 1 0 010 1.756l-19.433 10.6a2 2 0 01-1.916 0L3.61 15.878a1 1 0 010-1.756l19.433-10.6a2 2 0 011.916 0zM5.93 22.23l-.14-.067a2 2 0 00-1.723 3.607l18.991 9.995.146.07.143.056.138.042.145.033.11.017.187.016.108.001.128-.006.172-.022.135-.028.078-.02.175-.06.103-.043c.039-.017.077-.036.115-.056l18.99-9.995a2 2 0 00-1.864-3.54L24 31.74 5.93 22.23zm0 9l-.14-.067a2 2 0 00-1.723 3.607l19 10 .142.067c.42.182.873.207 1.29.1.465.12.974.074 1.431-.167l19-10a2 2 0 00-1.862-3.54l-18.57 9.772L5.932 31.23zM10.353 15L24 7.556 37.647 15 24 22.444 10.353 15z" fill="currentColor"/></svg>
|
||||
|
After Width: | Height: | Size: 717 B |
1
src/assets/icons/user-management.svg
Normal file
1
src/assets/icons/user-management.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23 26a1 1 0 011 1v2a1 1 0 01-1 1h-7c-3.73 0-6.86 2.55-7.75 6A8.226 8.226 0 008 38v2h15a1 1 0 011 1v2a1 1 0 01-1 1H6c-1.1 0-2-.895-2-2v-4c0-6.627 5.37-12 12-12h7zm11.5 0c.672 0 1.326.075 1.955.218l.971 2.23a1.2 1.2 0 001.231.712l2.386-.262A9.014 9.014 0 0143 32.32l-1.431 1.976a1.2 1.2 0 000 1.408L43 37.68a9.014 9.014 0 01-1.957 3.422l-2.386-.262a1.2 1.2 0 00-1.23.713l-.972 2.23a8.838 8.838 0 01-3.91 0l-.971-2.23a1.2 1.2 0 00-1.232-.713l-2.385.262A9.014 9.014 0 0126 37.68l1.431-1.976a1.2 1.2 0 000-1.408L26 32.32a9.014 9.014 0 011.957-3.422l2.386.262a1.2 1.2 0 001.23-.713l.972-2.23A8.838 8.838 0 0134.5 26zm0 5.727c-1.788 0-3.238 1.466-3.238 3.273 0 1.807 1.45 3.273 3.238 3.273s3.238-1.466 3.238-3.273c0-1.807-1.45-3.273-3.238-3.273zM21 3c5.52 0 10 4.477 10 10s-4.48 10-10 10-10-4.477-10-10S15.48 3 21 3zm0 4c-3.31 0-6 2.686-6 6s2.69 6 6 6 6-2.686 6-6-2.69-6-6-6z" fill="currentColor"/></svg>
|
||||
|
After Width: | Height: | Size: 1015 B |
@@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<a-row align="stretch" :gutter="14" class="gi-left-right-pane">
|
||||
<a-col
|
||||
:xs="0" :sm="8" :md="7" :lg="6" :xl="5" :xxl="4" flex="260px" v-bind="props.leftColProps"
|
||||
class="h-full overflow-hidden"
|
||||
>
|
||||
<div class="gi-left-right-pane__left">
|
||||
<slot name="left"></slot>
|
||||
</div>
|
||||
</a-col>
|
||||
|
||||
<a-col
|
||||
:xs="24" :sm="16" :md="17" :lg="18" :xl="19" :xxl="20" flex="1" v-bind="props.rightColProps"
|
||||
class="h-full overflow-hidden"
|
||||
>
|
||||
<div class="gi-left-right-pane__right">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import type { ColProps } from '@arco-design/web-vue'
|
||||
|
||||
interface Props {
|
||||
leftColProps?: ColProps
|
||||
rightColProps?: ColProps
|
||||
}
|
||||
|
||||
defineOptions({ name: 'GiLeftRightPane' })
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
leftColProps: () => ({}),
|
||||
rightColProps: () => ({}),
|
||||
})
|
||||
|
||||
// 一般用于左树右表结构页面
|
||||
|
||||
defineSlots<{
|
||||
left: () => void
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.gi-left-right-pane {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: $margin;
|
||||
box-sizing: border-box;
|
||||
|
||||
&__left,
|
||||
&__right {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -51,7 +51,7 @@
|
||||
import { useWindowSize } from '@vueuse/core'
|
||||
import { Message } from '@arco-design/web-vue'
|
||||
import { getTenantId, setTenantId } from '@/utils/tenant'
|
||||
import { getTenantCommon } from '@/apis/tenant/tenant'
|
||||
import { getTenantCommon } from '@/apis/tenant/management'
|
||||
|
||||
const { width } = useWindowSize()
|
||||
const visible = ref(false)
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { ref } from 'vue'
|
||||
import type { TreeNodeData } from '@arco-design/web-vue'
|
||||
import { listMenuTree } from '@/apis'
|
||||
import { listTenantPackageMenu } from '@/apis/tenant/tenantPackage'
|
||||
import { listTenantPackageMenu } from '@/apis/tenant/package'
|
||||
|
||||
/** 菜单模块 */
|
||||
export function useMenu(options?: { onSuccess?: () => void }) {
|
||||
|
||||
1
src/types/components.d.ts
vendored
1
src/types/components.d.ts
vendored
@@ -30,7 +30,6 @@ declare module 'vue' {
|
||||
GiIconBox: typeof import('./../components/GiIconBox/index.vue')['default']
|
||||
GiIconSelector: typeof import('./../components/GiIconSelector/index.vue')['default']
|
||||
GiIframe: typeof import('./../components/GiIframe/index.vue')['default']
|
||||
GiLeftRightPane: typeof import('./../components/GiLeftRightPane/index.vue')['default']
|
||||
GiOption: typeof import('./../components/GiOption/index.vue')['default']
|
||||
GiOptionItem: typeof import('./../components/GiOptionItem/index.vue')['default']
|
||||
GiPageLayout: typeof import('./../components/GiPageLayout/index.vue')['default']
|
||||
|
||||
@@ -105,7 +105,7 @@ import has from '@/utils/has'
|
||||
defineOptions({ name: 'OpenApp' })
|
||||
|
||||
const queryForm = reactive<AppQuery>({
|
||||
sort: ['id,desc'],
|
||||
sort: ['createTime,desc'],
|
||||
})
|
||||
|
||||
const {
|
||||
|
||||
@@ -1,146 +0,0 @@
|
||||
<template>
|
||||
<div class="gi_table_page">
|
||||
<GiTable
|
||||
row-key="id"
|
||||
title="消息中心"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
:loading="loading"
|
||||
:scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
|
||||
:pagination="pagination"
|
||||
:disabled-tools="['size', 'setting']"
|
||||
:disabled-column-keys="['name']"
|
||||
:row-selection="{ type: 'checkbox', showCheckedAll: true }"
|
||||
:selected-keys="selectedKeys"
|
||||
@select-all="selectAll"
|
||||
@select="select"
|
||||
@refresh="search"
|
||||
>
|
||||
<template #toolbar-left>
|
||||
<a-input v-model="queryForm.title" placeholder="请输入标题" allow-clear @change="search">
|
||||
<template #prefix><icon-search /></template>
|
||||
</a-input>
|
||||
<a-select
|
||||
v-model="queryForm.isRead"
|
||||
placeholder="请选择状态"
|
||||
allow-clear
|
||||
style="width: 150px"
|
||||
@change="search"
|
||||
>
|
||||
<a-option :value="false">未读</a-option>
|
||||
<a-option :value="true">已读</a-option>
|
||||
</a-select>
|
||||
<a-button @click="reset">
|
||||
<template #icon><icon-refresh /></template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<template #toolbar-right>
|
||||
<a-button type="primary" status="danger" :disabled="!selectedKeys.length" :title="!selectedKeys.length ? '请选择' : ''" @click="onDelete">
|
||||
<template #icon><icon-delete /></template>
|
||||
<template #default>删除</template>
|
||||
</a-button>
|
||||
<a-button type="primary" :disabled="!selectedKeys.length" :title="!selectedKeys.length ? '请选择' : ''" @click="onRead">
|
||||
<template #default>标记为已读</template>
|
||||
</a-button>
|
||||
<a-button type="primary" :disabled="selectedKeys.length" :title="!selectedKeys.length ? '请选择' : ''" @click="onReadAll">
|
||||
<template #default>全部已读</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<template #title="{ record }">
|
||||
<a-tooltip :content="record.content"><span>{{ record.title }}</span></a-tooltip>
|
||||
</template>
|
||||
<template #isRead="{ record }">
|
||||
<a-tag :color="record.isRead ? '' : 'arcoblue'">
|
||||
{{ record.isRead ? '已读' : '未读' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template #type="{ record }">
|
||||
<GiCellTag :value="record.type" :dict="message_type" />
|
||||
</template>
|
||||
</GiTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Message, Modal } from '@arco-design/web-vue'
|
||||
import { type MessageQuery, deleteMessage, listMessage, readMessage } from '@/apis'
|
||||
import type { TableInstanceColumns } from '@/components/GiTable/type'
|
||||
import { useTable } from '@/hooks'
|
||||
import { useDict } from '@/hooks/app'
|
||||
|
||||
defineOptions({ name: 'SystemMessage' })
|
||||
|
||||
const { message_type } = useDict('message_type')
|
||||
|
||||
const queryForm = reactive<MessageQuery>({
|
||||
sort: ['createTime,desc'],
|
||||
})
|
||||
|
||||
const {
|
||||
tableData: dataList,
|
||||
loading,
|
||||
pagination,
|
||||
selectedKeys,
|
||||
select,
|
||||
selectAll,
|
||||
search,
|
||||
handleDelete,
|
||||
} = useTable((page) => listMessage({ ...queryForm, ...page }), { immediate: true })
|
||||
|
||||
const columns: TableInstanceColumns[] = [
|
||||
{
|
||||
title: '序号',
|
||||
width: 66,
|
||||
align: 'center',
|
||||
render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
|
||||
},
|
||||
{ title: '标题', dataIndex: 'title', slotName: 'title', minWidth: 100, ellipsis: true, tooltip: true },
|
||||
{ title: '状态', dataIndex: 'isRead', slotName: 'isRead', align: 'center' },
|
||||
{ title: '时间', dataIndex: 'createTime', width: 180 },
|
||||
{ title: '类型', dataIndex: 'type', slotName: 'type', width: 180, ellipsis: true, tooltip: true },
|
||||
]
|
||||
|
||||
// 重置
|
||||
const reset = () => {
|
||||
queryForm.title = undefined
|
||||
queryForm.type = undefined
|
||||
queryForm.isRead = undefined
|
||||
search()
|
||||
}
|
||||
|
||||
// 删除
|
||||
const onDelete = () => {
|
||||
if (!selectedKeys.value.length) {
|
||||
return Message.warning('请选择数据')
|
||||
}
|
||||
return handleDelete(() => deleteMessage(selectedKeys.value), { showModal: false })
|
||||
}
|
||||
|
||||
// 标记为已读
|
||||
const onRead = async () => {
|
||||
if (!selectedKeys.value.length) {
|
||||
return Message.warning('请选择数据')
|
||||
}
|
||||
await readMessage(selectedKeys.value)
|
||||
Message.success('操作成功')
|
||||
search()
|
||||
}
|
||||
|
||||
// 全部已读
|
||||
const onReadAll = async () => {
|
||||
Modal.warning({
|
||||
title: '全部已读',
|
||||
content: '确定要标记全部消息为已读吗？',
|
||||
hideCancel: false,
|
||||
maskClosable: false,
|
||||
onOk: async () => {
|
||||
await readMessage([])
|
||||
Message.success('操作成功')
|
||||
search()
|
||||
},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@@ -1,151 +0,0 @@
|
||||
<template>
|
||||
<a-spin :loading="loading">
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
auto-label-width
|
||||
label-align="left"
|
||||
:layout="width >= 500 ? 'horizontal' : 'vertical'"
|
||||
:disabled="!isUpdate"
|
||||
scroll-to-first-error>
|
||||
<a-form-item
|
||||
field="NEED_CAPTCHA"
|
||||
:label="captchaSetting.NEED_CAPTCHA.name"
|
||||
>
|
||||
<a-switch v-model="form.NEED_CAPTCHA" type="round" :checked-value="1" :unchecked-value="0">
|
||||
<template #checked>是</template>
|
||||
<template #unchecked>否</template>
|
||||
</a-switch>
|
||||
</a-form-item>
|
||||
|
||||
<a-space style="margin-bottom: 16px">
|
||||
<a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
|
||||
<template #icon>
|
||||
<icon-edit/>
|
||||
</template>
|
||||
修改
|
||||
</a-button>
|
||||
<a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
|
||||
<template #icon>
|
||||
<icon-undo/>
|
||||
</template>
|
||||
恢复默认
|
||||
</a-button>
|
||||
<a-button v-if="isUpdate" type="primary" @click="handleSave">
|
||||
<template #icon>
|
||||
<icon-save/>
|
||||
</template>
|
||||
保存
|
||||
</a-button>
|
||||
<a-button v-if="isUpdate" @click="reset">
|
||||
<template #icon>
|
||||
<icon-refresh/>
|
||||
</template>
|
||||
重置
|
||||
</a-button>
|
||||
<a-button v-if="isUpdate" @click="handleCancel">
|
||||
<template #icon>
|
||||
<icon-undo/>
|
||||
</template>
|
||||
取消
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {useWindowSize} from '@vueuse/core'
|
||||
import {type FormInstance, Message, Modal} from '@arco-design/web-vue'
|
||||
import {type CaptchaSetting, listOption, type OptionResp, resetOptionValue, updateOption} from '@/apis/system'
|
||||
import {useResetReactive} from '@/hooks'
|
||||
|
||||
defineOptions({name: 'CaptchaSetting'})
|
||||
const {width} = useWindowSize()
|
||||
|
||||
const loading = ref<boolean>(false)
|
||||
const formRef = ref<FormInstance>()
|
||||
const [form] = useResetReactive({
|
||||
NEED_CAPTCHA: 1,
|
||||
})
|
||||
|
||||
const captchaSetting = ref<CaptchaSetting>({
|
||||
NEED_CAPTCHA: {},
|
||||
})
|
||||
// 重置
|
||||
const reset = () => {
|
||||
formRef.value?.resetFields()
|
||||
form.NEED_CAPTCHA = captchaSetting.value.NEED_CAPTCHA.value
|
||||
}
|
||||
|
||||
const isUpdate = ref(false)
|
||||
// 修改
|
||||
const onUpdate = () => {
|
||||
isUpdate.value = true
|
||||
}
|
||||
|
||||
// 取消
|
||||
const handleCancel = () => {
|
||||
reset()
|
||||
isUpdate.value = false
|
||||
}
|
||||
|
||||
const queryForm = {
|
||||
category: 'CAPTCHA',
|
||||
}
|
||||
// 查询列表数据
|
||||
const getDataList = async () => {
|
||||
loading.value = true
|
||||
const {data} = await listOption(queryForm)
|
||||
captchaSetting.value = data.reduce((obj: CaptchaSetting, option: OptionResp) => {
|
||||
obj[option.code] = {...option, value: Number.parseInt(option.value)}
|
||||
return obj
|
||||
}, {})
|
||||
|
||||
handleCancel()
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
// 保存
|
||||
const handleSave = async () => {
|
||||
const isInvalid = await formRef.value?.validate()
|
||||
if (isInvalid) return false
|
||||
await updateOption(
|
||||
Object.entries(form).map(([key, value]) => {
|
||||
return {id: captchaSetting.value[key].id, code: key, value}
|
||||
}),
|
||||
)
|
||||
await getDataList()
|
||||
Message.success('保存成功')
|
||||
}
|
||||
|
||||
// 恢复默认
|
||||
const handleResetValue = async () => {
|
||||
await resetOptionValue(queryForm)
|
||||
Message.success('恢复成功')
|
||||
await getDataList()
|
||||
}
|
||||
const onResetValue = () => {
|
||||
Modal.warning({
|
||||
title: '警告',
|
||||
content: '确认恢复安全配置为默认值吗？',
|
||||
hideCancel: false,
|
||||
maskClosable: false,
|
||||
onOk: handleResetValue,
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getDataList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.arco-form-item.arco-form-item-has-help) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.input-width {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
@@ -56,7 +56,7 @@ const data = [
|
||||
{ name: '登录配置', key: 'login', icon: 'lock', permissions: ['system:loginConfig:get'], value: LoginConfig },
|
||||
{ name: '邮件配置', key: 'mail', icon: 'email', permissions: ['system:mailConfig:get'], value: MailConfig },
|
||||
{ name: '短信配置', key: 'sms', icon: 'message', permissions: ['system:smsConfig:list'], value: SmsConfig },
|
||||
{ name: '存储配置', key: 'storage', icon: 'storage', permissions: ['system:storage:list'], value: StorageConfig },
|
||||
{ name: '存储配置', key: 'storage', icon: 'block-storage', permissions: ['system:storage:list'], value: StorageConfig },
|
||||
{ name: '客户端配置', key: 'client', icon: 'mobile', permissions: ['system:client:list'], value: ClientConfig },
|
||||
]
|
||||
|
||||
|
||||
@@ -1,299 +0,0 @@
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
title="新增角色"
|
||||
:mask-closable="false"
|
||||
:esc-to-close="true"
|
||||
draggable
|
||||
:width="width >= 600 ? 600 : '100%'"
|
||||
@close="reset"
|
||||
>
|
||||
<a-steps :current="current" class="mb-15" @change="onChangeCurrent">
|
||||
<a-step>基础信息</a-step>
|
||||
<a-step>功能权限</a-step>
|
||||
<a-step>数据权限</a-step>
|
||||
</a-steps>
|
||||
<a-form ref="formRef" :model="form" :rules="rules" size="large" auto-label-width>
|
||||
<fieldset v-show="current === 1">
|
||||
<a-form-item label="名称" field="name">
|
||||
<a-input v-model.trim="form.name" placeholder="请输入名称" />
|
||||
</a-form-item>
|
||||
<a-form-item label="编码" field="code">
|
||||
<a-input v-model.trim="form.code" placeholder="请输入编码" />
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" field="sort">
|
||||
<a-input-number v-model="form.sort" placeholder="请输入排序" :min="1" mode="button" />
|
||||
</a-form-item>
|
||||
<a-form-item label="描述" field="description">
|
||||
<a-textarea
|
||||
v-model.trim="form.description"
|
||||
placeholder="请输入描述"
|
||||
show-word-limit
|
||||
:max-length="200"
|
||||
:auto-size="{ minRows: 3, maxRows: 5 }"
|
||||
/>
|
||||
</a-form-item>
|
||||
</fieldset>
|
||||
<fieldset v-show="current === 2">
|
||||
<a-form-item hide-label :disabled="form.isSystem" class="w-full">
|
||||
<a-space>
|
||||
<a-checkbox v-model="isMenuExpanded" @change="onExpanded('menu')">展开/折叠</a-checkbox>
|
||||
<a-checkbox v-model="isMenuCheckAll" @change="onCheckAll('menu')">全选/全不选</a-checkbox>
|
||||
<a-checkbox v-model="form.menuCheckStrictly">父子联动</a-checkbox>
|
||||
</a-space>
|
||||
<template #extra>
|
||||
<a-tree
|
||||
ref="menuTreeRef"
|
||||
v-model:checked-keys="form.menuIds"
|
||||
class="w-full menu-tree"
|
||||
:data="menuList"
|
||||
:default-expand-all="isMenuExpanded"
|
||||
:check-strictly="!form.menuCheckStrictly"
|
||||
:virtual-list-props="{ height: 400 }"
|
||||
checkable
|
||||
/>
|
||||
</template>
|
||||
</a-form-item>
|
||||
</fieldset>
|
||||
<fieldset v-show="current === 3">
|
||||
<a-form-item hide-label field="dataScope">
|
||||
<a-select
|
||||
v-model.trim="form.dataScope"
|
||||
:options="data_scope_enum"
|
||||
placeholder="请选择数据权限"
|
||||
:disabled="form.isSystem"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="form.dataScope === 5" hide-label :disabled="form.isSystem">
|
||||
<a-space>
|
||||
<a-checkbox v-model="isDeptExpanded" @change="onExpanded('dept')">展开/折叠</a-checkbox>
|
||||
<a-checkbox v-model="isDeptCheckAll" @change="onCheckAll('dept')">全选/全不选</a-checkbox>
|
||||
<a-checkbox v-model="form.deptCheckStrictly">父子联动</a-checkbox>
|
||||
</a-space>
|
||||
<template #extra>
|
||||
<a-tree
|
||||
ref="deptTreeRef"
|
||||
v-model:checked-keys="form.deptIds"
|
||||
class="w-full"
|
||||
:data="deptList"
|
||||
:default-expand-all="isDeptExpanded"
|
||||
:check-strictly="!form.deptCheckStrictly"
|
||||
:virtual-list-props="{ height: 350 }"
|
||||
checkable
|
||||
/>
|
||||
</template>
|
||||
</a-form-item>
|
||||
</fieldset>
|
||||
</a-form>
|
||||
<template #footer>
|
||||
<a-space size="large">
|
||||
<a-button :disabled="current === 1" type="secondary" @click="onPrev">
|
||||
<IconLeft />
|
||||
上一步
|
||||
</a-button>
|
||||
<a-button v-if="current !== 3" :disabled="current === 3" type="primary" @click="onNext">
|
||||
下一步
|
||||
<IconRight />
|
||||
</a-button>
|
||||
<a-button v-if="current === 3" type="primary" @click="onClickOk">确定</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type FormInstance, Message, type TreeNodeData } from '@arco-design/web-vue'
|
||||
import { useWindowSize } from '@vueuse/core'
|
||||
import { addRole } from '@/apis/system/role'
|
||||
import { useResetReactive } from '@/hooks'
|
||||
import { useDept, useDict, useMenu } from '@/hooks/app'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'save-success'): void
|
||||
}>()
|
||||
|
||||
const { width } = useWindowSize()
|
||||
|
||||
const dataId = ref('')
|
||||
const visible = ref(false)
|
||||
const formRef = ref<FormInstance>()
|
||||
const { data_scope_enum } = useDict('data_scope_enum')
|
||||
const { deptList, getDeptList } = useDept()
|
||||
const { menuList, getMenuList } = useMenu()
|
||||
|
||||
const rules: FormInstance['rules'] = {
|
||||
name: [{ required: true, message: '请输入名称' }],
|
||||
code: [{ required: true, message: '请输入编码' }],
|
||||
dataScope: [{ required: true, message: '请选择数据权限' }],
|
||||
}
|
||||
|
||||
const [form, resetForm] = useResetReactive({
|
||||
menuCheckStrictly: true,
|
||||
deptCheckStrictly: true,
|
||||
sort: 999,
|
||||
dataScope: 4,
|
||||
})
|
||||
|
||||
const menuTreeRef = ref()
|
||||
const deptTreeRef = ref()
|
||||
const isMenuExpanded = ref(false)
|
||||
const isDeptExpanded = ref(true)
|
||||
const isMenuCheckAll = ref(false)
|
||||
const isDeptCheckAll = ref(false)
|
||||
const current = ref<number>(1)
|
||||
// 重置
|
||||
const reset = () => {
|
||||
isMenuExpanded.value = false
|
||||
isMenuCheckAll.value = false
|
||||
isDeptExpanded.value = true
|
||||
isDeptCheckAll.value = false
|
||||
menuTreeRef.value?.expandAll(isMenuExpanded.value)
|
||||
deptTreeRef.value?.expandAll(isDeptExpanded.value)
|
||||
current.value = 1
|
||||
formRef.value?.resetFields()
|
||||
resetForm()
|
||||
}
|
||||
|
||||
// 上一步
|
||||
const onPrev = () => {
|
||||
current.value = Math.max(1, current.value - 1)
|
||||
}
|
||||
// 下一步
|
||||
const onNext = async () => {
|
||||
try {
|
||||
if (current.value === 1) {
|
||||
const isInvalid = await formRef.value?.validateField(['name', 'code', 'sort', 'description'])
|
||||
if (isInvalid) return
|
||||
}
|
||||
current.value = Math.min(3, current.value + 1)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
// 当前页
|
||||
const onChangeCurrent = (page: number) => {
|
||||
current.value = page
|
||||
}
|
||||
|
||||
// 获取所有选中的菜单
|
||||
const getMenuAllCheckedKeys = () => {
|
||||
// 获取目前被选中的菜单
|
||||
const checkedNodes = menuTreeRef.value?.getCheckedNodes()
|
||||
const checkedKeys = checkedNodes.map((item: TreeNodeData) => item.key)
|
||||
// 获取半选中的菜单
|
||||
const halfCheckedNodes = menuTreeRef.value?.getHalfCheckedNodes()
|
||||
const halfCheckedKeys = halfCheckedNodes.map((item: TreeNodeData) => item.key)
|
||||
checkedKeys.unshift(...halfCheckedKeys)
|
||||
return checkedKeys
|
||||
}
|
||||
|
||||
// 获取所有选中的部门
|
||||
const getDeptAllCheckedKeys = () => {
|
||||
if (!deptTreeRef.value) {
|
||||
return []
|
||||
}
|
||||
// 获取目前被选中的部门
|
||||
const checkedNodes = deptTreeRef.value?.getCheckedNodes()
|
||||
const checkedKeys = checkedNodes.map((item: TreeNodeData) => item.key)
|
||||
// 获取半选中的部门
|
||||
const halfCheckedNodes = deptTreeRef.value?.getHalfCheckedNodes()
|
||||
const halfCheckedKeys = halfCheckedNodes.map((item: TreeNodeData) => item.key)
|
||||
checkedKeys.unshift(...halfCheckedKeys)
|
||||
return checkedKeys
|
||||
}
|
||||
|
||||
// 操作树
|
||||
const handleTreeAction = (type, action) => {
|
||||
const refMap = {
|
||||
menu: menuTreeRef,
|
||||
dept: deptTreeRef,
|
||||
}
|
||||
const ref = refMap[type]
|
||||
if (ref && action === 'expand') {
|
||||
ref.value?.expandAll(type === 'menu' ? isMenuExpanded.value : isDeptExpanded.value)
|
||||
} else if (ref && action === 'check') {
|
||||
ref.value?.checkAll(type === 'menu' ? isMenuCheckAll.value : isDeptCheckAll.value)
|
||||
}
|
||||
}
|
||||
|
||||
// 调用时
|
||||
const onExpanded = (type) => handleTreeAction(type, 'expand')
|
||||
const onCheckAll = (type) => handleTreeAction(type, 'check')
|
||||
|
||||
// 保存
|
||||
const save = async () => {
|
||||
try {
|
||||
const isInvalid = await formRef.value?.validate()
|
||||
if (isInvalid) return false
|
||||
form.menuIds = getMenuAllCheckedKeys()
|
||||
form.deptIds = getDeptAllCheckedKeys()
|
||||
await addRole(form)
|
||||
Message.success('新增成功')
|
||||
emit('save-success')
|
||||
return true
|
||||
} catch (error) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// 确认
|
||||
const onClickOk = () => {
|
||||
if (unref(current) === 3) {
|
||||
save()
|
||||
visible.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 打开
|
||||
const onOpen = async () => {
|
||||
reset()
|
||||
if (!menuList.value.length) {
|
||||
await getMenuList()
|
||||
}
|
||||
if (!deptList.value.length) {
|
||||
await getDeptList()
|
||||
}
|
||||
dataId.value = ''
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
defineExpose({ onOpen })
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
fieldset {
|
||||
padding: 15px 15px 0 15px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid var(--color-neutral-3);
|
||||
border-radius: 3px;
|
||||
height: 440px;
|
||||
}
|
||||
|
||||
fieldset legend {
|
||||
color: rgb(var(--gray-10));
|
||||
padding: 2px 5px 2px 5px;
|
||||
border: 1px solid var(--color-neutral-3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.mb-15 {
|
||||
margin-bottom: 15px
|
||||
}
|
||||
|
||||
:deep(.arco-form-item-extra) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.arco-modal-footer){
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.menu-tree{
|
||||
:deep(.arco-tree-node-is-leaf) {
|
||||
display: inline-flex;
|
||||
}
|
||||
:deep(.arco-tree-node-indent-block){
|
||||
width: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
187
src/views/tenant/datasource/AddModal.vue
Normal file
187
src/views/tenant/datasource/AddModal.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
:title="title"
|
||||
:mask-closable="false"
|
||||
:esc-to-close="false"
|
||||
:width="width >= 500 ? 500 : '100%'"
|
||||
draggable
|
||||
@before-ok="save"
|
||||
@close="reset"
|
||||
>
|
||||
<GiForm ref="formRef" v-model="form" :columns="columns">
|
||||
<template #password>
|
||||
<a-input-password
|
||||
v-model="form.password"
|
||||
:placeholder="!isUpdate ? '请输入密码' : '保持密码为空将不更改密码'"
|
||||
/>
|
||||
</template>
|
||||
</GiForm>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Message } from '@arco-design/web-vue'
|
||||
import { useWindowSize } from '@vueuse/core'
|
||||
import { addTenantDatasource, getTenantDatasource, updateTenantDatasource } from '@/apis/tenant/datasource'
|
||||
import { type ColumnItem, GiForm } from '@/components/GiForm'
|
||||
import { useResetReactive } from '@/hooks'
|
||||
import { useDict } from '@/hooks/app'
|
||||
import { encryptByRsa } from '@/utils/encrypt'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'save-success'): void
|
||||
}>()
|
||||
|
||||
const { width } = useWindowSize()
|
||||
|
||||
const dataId = ref('')
|
||||
const visible = ref(false)
|
||||
const isUpdate = computed(() => !!dataId.value)
|
||||
const title = computed(() => (isUpdate.value ? '修改数据源' : '新增数据源'))
|
||||
const formRef = ref<InstanceType<typeof GiForm>>()
|
||||
const { datasource_database_type_enum } = useDict('datasource_database_type_enum')
|
||||
|
||||
const [form, resetForm] = useResetReactive({
|
||||
databaseType: 1,
|
||||
port: 3306,
|
||||
})
|
||||
|
||||
const columns: ColumnItem[] = reactive([
|
||||
{
|
||||
label: '名称',
|
||||
field: 'name',
|
||||
type: 'input',
|
||||
span: 24,
|
||||
required: true,
|
||||
props: {
|
||||
maxLength: 30,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '数据库类型',
|
||||
field: 'databaseType',
|
||||
type: 'radio-group',
|
||||
span: 24,
|
||||
required: true,
|
||||
props: {
|
||||
type: 'button',
|
||||
options: datasource_database_type_enum,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '主机',
|
||||
field: 'host',
|
||||
type: 'input',
|
||||
span: 24,
|
||||
required: true,
|
||||
props: {
|
||||
maxLength: 128,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '端口',
|
||||
field: 'port',
|
||||
type: 'input-number',
|
||||
span: 24,
|
||||
required: true,
|
||||
props: {
|
||||
min: 0,
|
||||
max: 65535,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '用户名',
|
||||
field: 'username',
|
||||
type: 'input',
|
||||
span: 24,
|
||||
required: true,
|
||||
props: {
|
||||
maxLength: 128,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '密码',
|
||||
field: 'password',
|
||||
type: 'input-password',
|
||||
span: 24,
|
||||
required: true,
|
||||
props: {
|
||||
maxLength: 128,
|
||||
},
|
||||
show: () => {
|
||||
return !isUpdate.value
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '密码',
|
||||
field: 'password',
|
||||
type: 'input-password',
|
||||
span: 24,
|
||||
props: {
|
||||
maxLength: 128,
|
||||
},
|
||||
show: () => {
|
||||
return isUpdate.value
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '描述',
|
||||
field: 'description',
|
||||
type: 'textarea',
|
||||
span: 24,
|
||||
},
|
||||
])
|
||||
|
||||
// 重置
|
||||
const reset = () => {
|
||||
formRef.value?.formRef?.resetFields()
|
||||
resetForm()
|
||||
}
|
||||
|
||||
// 保存
|
||||
const save = async () => {
|
||||
try {
|
||||
const isInvalid = await formRef.value?.formRef?.validate()
|
||||
if (isInvalid) return false
|
||||
if (isUpdate.value) {
|
||||
await updateTenantDatasource({
|
||||
...form,
|
||||
password: form.password === undefined ? undefined : encryptByRsa(form.password),
|
||||
}, dataId.value)
|
||||
Message.success('修改成功')
|
||||
} else {
|
||||
await addTenantDatasource({
|
||||
...form,
|
||||
password: encryptByRsa(form.password),
|
||||
})
|
||||
Message.success('新增成功')
|
||||
}
|
||||
emit('save-success')
|
||||
return true
|
||||
} catch (error) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// 新增
|
||||
const onAdd = async () => {
|
||||
reset()
|
||||
dataId.value = ''
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
// 修改
|
||||
const onUpdate = async (id: string) => {
|
||||
reset()
|
||||
dataId.value = id
|
||||
const { data } = await getTenantDatasource(id)
|
||||
Object.assign(form, data)
|
||||
form.password = undefined
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
defineExpose({ onAdd, onUpdate })
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@@ -1,29 +1,32 @@
|
||||
<template>
|
||||
<a-drawer v-model:visible="visible" title="租户数据连接详情" :width="width >= 600 ? 600 : '100%'" :footer="false">
|
||||
<a-drawer v-model:visible="visible" title="数据源详情" :width="width >= 600 ? 600 : '100%'" :footer="false">
|
||||
<a-descriptions :column="2" size="large" class="general-description">
|
||||
<a-descriptions-item label="ID">{{ dataDetail?.id }}</a-descriptions-item>
|
||||
<a-descriptions-item label="连接名称">{{ dataDetail?.connectName }}</a-descriptions-item>
|
||||
<a-descriptions-item label="连接类型">{{ dataDetail?.type }}</a-descriptions-item>
|
||||
<a-descriptions-item label="主机连接地址">{{ dataDetail?.host }}</a-descriptions-item>
|
||||
<a-descriptions-item label="连接端口">{{ dataDetail?.port }}</a-descriptions-item>
|
||||
<a-descriptions-item label="连接用户名">{{ dataDetail?.username }}</a-descriptions-item>
|
||||
<a-descriptions-item label="名称">{{ dataDetail?.name }}</a-descriptions-item>
|
||||
<a-descriptions-item label="数据库类型"><GiCellTag :value="dataDetail?.databaseType" :dict="datasource_database_type_enum" /></a-descriptions-item>
|
||||
<a-descriptions-item label="主机">{{ dataDetail?.host }}</a-descriptions-item>
|
||||
<a-descriptions-item label="端口">{{ dataDetail?.port }}</a-descriptions-item>
|
||||
<a-descriptions-item label="用户名">{{ dataDetail?.username }}</a-descriptions-item>
|
||||
<a-descriptions-item label="创建人">{{ dataDetail?.createUserString }}</a-descriptions-item>
|
||||
<a-descriptions-item label="创建时间">{{ dataDetail?.createTime }}</a-descriptions-item>
|
||||
<a-descriptions-item label="修改人">{{ dataDetail?.updateUserString }}</a-descriptions-item>
|
||||
<a-descriptions-item label="修改时间">{{ dataDetail?.updateTime }}</a-descriptions-item>
|
||||
<a-descriptions-item label="描述" :span="2">{{ dataDetail?.description }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useWindowSize } from '@vueuse/core'
|
||||
import { type TenantDbConnectDetailResp, getTenantDbConnect as getDetail } from '@/apis/tenant/tenantDbConnect'
|
||||
import { type TenantDatasourceResp, getTenantDatasource as getDetail } from '@/apis/tenant/datasource'
|
||||
import { useDict } from '@/hooks/app'
|
||||
|
||||
const { width } = useWindowSize()
|
||||
|
||||
const dataId = ref('')
|
||||
const dataDetail = ref<TenantDbConnectDetailResp>()
|
||||
const dataDetail = ref<TenantDatasourceResp>()
|
||||
const visible = ref(false)
|
||||
const { datasource_database_type_enum } = useDict('datasource_database_type_enum')
|
||||
|
||||
// 查询详情
|
||||
const getDataDetail = async () => {
|
||||
161
src/views/tenant/datasource/index.vue
Normal file
161
src/views/tenant/datasource/index.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<GiPageLayout>
|
||||
<GiTable
|
||||
row-key="id"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
:loading="loading"
|
||||
:scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
|
||||
:pagination="pagination"
|
||||
:disabled-tools="['size']"
|
||||
:disabled-column-keys="['name']"
|
||||
@refresh="search"
|
||||
>
|
||||
<template #toolbar-left>
|
||||
<a-input-search v-model="queryForm.description" placeholder="搜索名称/描述" allow-clear @search="search" />
|
||||
<a-button @click="reset">
|
||||
<template #icon><icon-refresh /></template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<template #toolbar-right>
|
||||
<a-button v-permission="['tenant:datasource:create']" type="primary" @click="onAdd">
|
||||
<template #icon><icon-plus /></template>
|
||||
<template #default>新增</template>
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<template #databaseType="{ record }">
|
||||
<GiCellTag :value="record.databaseType" :dict="datasource_database_type_enum" />
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-link v-permission="['tenant:datasource:get']" title="详情" @click="onDetail(record)">详情</a-link>
|
||||
<a-link v-permission="['tenant:datasource:update']" title="修改" @click="onUpdate(record)">修改</a-link>
|
||||
<a-dropdown>
|
||||
<a-button v-if="has.hasPermOr(['tenant:datasource:testConnection', 'tenant:datasource:delete'])" type="text" size="mini" title="更多">
|
||||
<template #icon>
|
||||
<icon-more :size="16" />
|
||||
</template>
|
||||
</a-button>
|
||||
<template #content>
|
||||
<a-doption v-permission="['tenant:datasource:testConnection']" title="测试连接" @click="onTestConnection(record)">测试连接</a-doption>
|
||||
<a-doption
|
||||
v-permission="['tenant:datasource:delete']"
|
||||
:disabled="record.disabled"
|
||||
:title="record.disabled ? '禁止删除' : '删除'"
|
||||
@click="onDelete(record)"
|
||||
>
|
||||
删除
|
||||
</a-doption>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
</template>
|
||||
</GiTable>
|
||||
|
||||
<AddModal ref="AddModalRef" @save-success="search" />
|
||||
<DetailDrawer ref="DetailDrawerRef" />
|
||||
</GiPageLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Message, type TableInstance } from '@arco-design/web-vue'
|
||||
import AddModal from './AddModal.vue'
|
||||
import DetailDrawer from './DetailDrawer.vue'
|
||||
import {
|
||||
type TenantDatasourceQuery,
|
||||
type TenantDatasourceResp,
|
||||
deleteTenantDatasource,
|
||||
listTenantDatasource,
|
||||
testTenantDatasourceConnection,
|
||||
} from '@/apis/tenant/datasource'
|
||||
import { useTable } from '@/hooks'
|
||||
import { isMobile } from '@/utils'
|
||||
import has from '@/utils/has'
|
||||
import { useDict } from '@/hooks/app'
|
||||
|
||||
defineOptions({ name: 'TenantDatasource' })
|
||||
|
||||
const { datasource_database_type_enum } = useDict('datasource_database_type_enum')
|
||||
|
||||
const queryForm = reactive<TenantDatasourceQuery>({
|
||||
description: undefined,
|
||||
sort: ['createTime,desc'],
|
||||
})
|
||||
|
||||
const {
|
||||
tableData: dataList,
|
||||
loading,
|
||||
pagination,
|
||||
search,
|
||||
handleDelete,
|
||||
} = useTable((page) => listTenantDatasource({ ...queryForm, ...page }), { immediate: true })
|
||||
const columns: TableInstance['columns'] = [
|
||||
{
|
||||
title: '序号',
|
||||
width: 66,
|
||||
align: 'center',
|
||||
render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
|
||||
fixed: !isMobile() ? 'left' : undefined,
|
||||
},
|
||||
{ title: '名称', dataIndex: 'name', slotName: 'name', ellipsis: true, tooltip: true, fixed: !isMobile() ? 'left' : undefined },
|
||||
{ title: '数据库类型', dataIndex: 'databaseType', slotName: 'databaseType', align: 'center' },
|
||||
{ title: '主机', dataIndex: 'host', slotName: 'host', align: 'center' },
|
||||
{ title: '端口', dataIndex: 'port', slotName: 'port', align: 'center' },
|
||||
{ title: '用户名', dataIndex: 'username', slotName: 'username', align: 'center' },
|
||||
{ title: '描述', dataIndex: 'description', ellipsis: true, tooltip: true },
|
||||
{ title: '创建人', dataIndex: 'createUserString', ellipsis: true, tooltip: true, show: false },
|
||||
{ title: '创建时间', dataIndex: 'createTime', width: 180 },
|
||||
{ title: '修改人', dataIndex: 'updateUserString', ellipsis: true, tooltip: true, show: false },
|
||||
{ title: '修改时间', dataIndex: 'updateTime', width: 180, show: false },
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
slotName: 'action',
|
||||
width: 160,
|
||||
align: 'center',
|
||||
fixed: !isMobile() ? 'right' : undefined,
|
||||
show: has.hasPermOr(['tenant:datasource:get', 'tenant:datasource:update', 'tenant:datasource:delete']),
|
||||
},
|
||||
]
|
||||
|
||||
// 重置
|
||||
const reset = () => {
|
||||
queryForm.description = undefined
|
||||
search()
|
||||
}
|
||||
|
||||
// 删除
|
||||
const onDelete = (record: TenantDatasourceResp) => {
|
||||
return handleDelete(() => deleteTenantDatasource(record.id), {
|
||||
content: `是否确定删除数据源「${record.name}」？`,
|
||||
showModal: true,
|
||||
})
|
||||
}
|
||||
|
||||
// 测试连接
|
||||
const onTestConnection = async (record: TenantDatasourceResp) => {
|
||||
await testTenantDatasourceConnection(record.id)
|
||||
Message.success('测试连接成功')
|
||||
}
|
||||
|
||||
const AddModalRef = ref<InstanceType<typeof AddModal>>()
|
||||
// 新增
|
||||
const onAdd = () => {
|
||||
AddModalRef.value?.onAdd()
|
||||
}
|
||||
|
||||
// 修改
|
||||
const onUpdate = (record: TenantDatasourceResp) => {
|
||||
AddModalRef.value?.onUpdate(record.id)
|
||||
}
|
||||
|
||||
const DetailDrawerRef = ref<InstanceType<typeof DetailDrawer>>()
|
||||
// 详情
|
||||
const onDetail = (record: TenantDatasourceResp) => {
|
||||
DetailDrawerRef.value?.onOpen(record.id)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@@ -4,23 +4,25 @@
|
||||
:title="title"
|
||||
:mask-closable="false"
|
||||
:esc-to-close="false"
|
||||
draggable
|
||||
:width="width >= 500 ? 500 : '100%'"
|
||||
draggable
|
||||
@before-ok="save"
|
||||
@close="reset"
|
||||
>
|
||||
<GiForm ref="formRef" v-model="form" :options="options" :columns="columns" />
|
||||
<GiForm ref="formRef" v-model="form" :columns="columns" />
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Message } from '@arco-design/web-vue'
|
||||
import { useWindowSize } from '@vueuse/core'
|
||||
import { addTenant, getTenant, listAllDbConnect, listAllPackage, updateTenant } from '@/apis/tenant/tenant'
|
||||
import { type Columns, GiForm, type Options } from '@/components/GiForm'
|
||||
import { addTenant, getTenant, updateTenant } from '@/apis/tenant/management'
|
||||
import { type ColumnItem, GiForm } from '@/components/GiForm'
|
||||
import { useResetReactive } from '@/hooks'
|
||||
import { useDict } from '@/hooks/app'
|
||||
import { encryptByRsa } from '@/utils/encrypt'
|
||||
import { listTenantDatasourceDict, listTenantPackageDict } from '@/apis'
|
||||
import { useDict } from '@/hooks/app'
|
||||
import type { LabelValueState } from '@/types/global'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'save-success'): void
|
||||
@@ -33,138 +35,48 @@ const visible = ref(false)
|
||||
const isUpdate = computed(() => !!dataId.value)
|
||||
const title = computed(() => (isUpdate.value ? '修改租户' : '新增租户'))
|
||||
const formRef = ref<InstanceType<typeof GiForm>>()
|
||||
const { dis_enable_status_enum } = useDict('dis_enable_status_enum')
|
||||
const { tenant_isolation_level_enum } = useDict('tenant_isolation_level_enum')
|
||||
|
||||
const options: Options = {
|
||||
form: { size: 'large' },
|
||||
btns: { hide: true },
|
||||
const packageList = ref<LabelValueState[]>([])
|
||||
const datasourceList = ref<LabelValueState[]>([])
|
||||
// 查询租户套餐
|
||||
const getPackageList = async () => {
|
||||
const { data } = await listTenantPackageDict()
|
||||
packageList.value = data
|
||||
}
|
||||
|
||||
const tenantListOptions = ref([])
|
||||
const dbConnectListOptions = ref([])
|
||||
|
||||
const getListAllTenantPackage = async () => {
|
||||
const data = await listAllPackage()
|
||||
tenantListOptions.value = []
|
||||
data.data.forEach((item: any) => {
|
||||
tenantListOptions.value.push({ label: item.name, value: item.id, disabled: item.status != 1 })
|
||||
})
|
||||
}
|
||||
|
||||
const getListAllDbConnect = async () => {
|
||||
const data = await listAllDbConnect()
|
||||
dbConnectListOptions.value = []
|
||||
data.data.forEach((item: any) => {
|
||||
dbConnectListOptions.value.push({ label: item.connectName, value: item.id })
|
||||
})
|
||||
// 查询租户数据源
|
||||
const getDatasourceList = async () => {
|
||||
const { data } = await listTenantDatasourceDict()
|
||||
datasourceList.value = data
|
||||
}
|
||||
|
||||
const [form, resetForm] = useResetReactive({
|
||||
status: 2,
|
||||
plaintextPwd: undefined,
|
||||
isolationLevel: 1,
|
||||
status: 1,
|
||||
})
|
||||
|
||||
const columns: Columns = reactive([
|
||||
const columns: ColumnItem[] = reactive([
|
||||
{
|
||||
label: '租户名称',
|
||||
label: '名称',
|
||||
field: 'name',
|
||||
type: 'input',
|
||||
span: 24,
|
||||
rules: [{ required: true, message: '请输入租户名称' }],
|
||||
},
|
||||
{
|
||||
label: '登陆用户',
|
||||
field: 'username',
|
||||
type: 'input',
|
||||
span: 24,
|
||||
required: true,
|
||||
props: {
|
||||
placeholder: '请输入用户名',
|
||||
maxLength: 64,
|
||||
showWordLimit: true,
|
||||
},
|
||||
rules: [{ required: true, message: '请输入登陆用户名' }],
|
||||
hide: () => {
|
||||
return isUpdate.value
|
||||
maxLength: 30,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '登陆密码',
|
||||
field: 'plaintextPwd',
|
||||
span: 24,
|
||||
type: 'input-password',
|
||||
props: {
|
||||
placeholder: '请输入密码',
|
||||
maxLength: 32,
|
||||
showWordLimit: true,
|
||||
},
|
||||
rules: [{ required: true, message: '请输入登陆密码' }],
|
||||
hide: () => {
|
||||
return isUpdate.value
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '绑定域名',
|
||||
field: 'domain',
|
||||
span: 24,
|
||||
type: 'input',
|
||||
},
|
||||
{
|
||||
label: '租户套餐',
|
||||
label: '套餐',
|
||||
field: 'packageId',
|
||||
span: 24,
|
||||
type: 'select',
|
||||
rules: [{ required: true, message: '请选择租户套餐' }],
|
||||
span: 24,
|
||||
required: true,
|
||||
hide: () => {
|
||||
return isUpdate.value
|
||||
},
|
||||
props: {
|
||||
options: tenantListOptions,
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
label: '隔离级别',
|
||||
field: 'isolationLevel',
|
||||
type: 'radio-group',
|
||||
span: 24,
|
||||
rules: [{ required: true, message: '请选择隔离级别' }],
|
||||
props: {
|
||||
type: 'button',
|
||||
size: 'small',
|
||||
options: [
|
||||
{ label: '行级', value: 0 },
|
||||
{ label: '数据源级', value: 1 },
|
||||
],
|
||||
},
|
||||
hide: () => {
|
||||
return isUpdate.value
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '数据连接',
|
||||
field: 'dbConnectId',
|
||||
type: 'select',
|
||||
span: 24,
|
||||
rules: [{ required: true, message: '请选择数据连接' }],
|
||||
hide: () => {
|
||||
return isUpdate.value || form.isolationLevel !== 1
|
||||
},
|
||||
props: {
|
||||
options: dbConnectListOptions,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '状态',
|
||||
field: 'status',
|
||||
type: 'switch',
|
||||
span: 24,
|
||||
options: dis_enable_status_enum,
|
||||
props: {
|
||||
type: 'round',
|
||||
checkedValue: 1,
|
||||
uncheckedValue: 2,
|
||||
checkedText: '启用',
|
||||
uncheckedText: '禁用',
|
||||
options: packageList,
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -173,18 +85,95 @@ const columns: Columns = reactive([
|
||||
type: 'date-picker',
|
||||
span: 24,
|
||||
props: {
|
||||
placeholder: '请选择过期时间',
|
||||
showTime: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '域名',
|
||||
field: 'domain',
|
||||
type: 'input',
|
||||
span: 24,
|
||||
},
|
||||
{
|
||||
label: '管理员用户',
|
||||
field: 'username',
|
||||
type: 'input',
|
||||
span: 24,
|
||||
required: true,
|
||||
props: {
|
||||
maxLength: 64,
|
||||
},
|
||||
hide: () => {
|
||||
return isUpdate.value
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '管理员密码',
|
||||
field: 'password',
|
||||
type: 'input-password',
|
||||
span: 24,
|
||||
required: true,
|
||||
props: {
|
||||
maxLength: 32,
|
||||
},
|
||||
hide: () => {
|
||||
return isUpdate.value
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '隔离级别',
|
||||
field: 'isolationLevel',
|
||||
type: 'radio-group',
|
||||
span: 24,
|
||||
required: true,
|
||||
props: {
|
||||
type: 'button',
|
||||
options: tenant_isolation_level_enum,
|
||||
},
|
||||
hide: () => {
|
||||
return isUpdate.value
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '数据源',
|
||||
field: 'dbConnectId',
|
||||
type: 'select',
|
||||
span: 24,
|
||||
required: true,
|
||||
hide: () => {
|
||||
return isUpdate.value || form.isolationLevel !== 2
|
||||
},
|
||||
props: {
|
||||
options: datasourceList,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '描述',
|
||||
field: 'description',
|
||||
type: 'textarea',
|
||||
span: 24,
|
||||
},
|
||||
{
|
||||
label: '状态',
|
||||
field: 'status',
|
||||
type: 'switch',
|
||||
span: 24,
|
||||
props: {
|
||||
type: 'round',
|
||||
checkedValue: 1,
|
||||
uncheckedValue: 2,
|
||||
checkedText: '启用',
|
||||
uncheckedText: '禁用',
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
// 重置
|
||||
const reset = () => {
|
||||
formRef.value?.formRef?.resetFields()
|
||||
getListAllTenantPackage()
|
||||
getListAllDbConnect()
|
||||
resetForm()
|
||||
getPackageList()
|
||||
getDatasourceList()
|
||||
}
|
||||
|
||||
// 保存
|
||||
@@ -196,9 +185,10 @@ const save = async () => {
|
||||
await updateTenant(form, dataId.value)
|
||||
Message.success('修改成功')
|
||||
} else {
|
||||
const data = form
|
||||
data.password = encryptByRsa(form.plaintextPwd) || ''
|
||||
await addTenant(data)
|
||||
await addTenant({
|
||||
...form,
|
||||
password: encryptByRsa(form.password),
|
||||
})
|
||||
Message.success('新增成功')
|
||||
}
|
||||
emit('save-success')
|
||||
@@ -1,23 +1,23 @@
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
title="修改租户登录信息"
|
||||
title="修改租户管理员密码"
|
||||
:mask-closable="false"
|
||||
:esc-to-close="false"
|
||||
draggable
|
||||
:width="width >= 500 ? 500 : '100%'"
|
||||
draggable
|
||||
@before-ok="save"
|
||||
@close="reset"
|
||||
>
|
||||
<GiForm ref="formRef" v-model="form" :options="options" :columns="columns" />
|
||||
<GiForm ref="formRef" v-model="form" :columns="columns" />
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Message } from '@arco-design/web-vue'
|
||||
import { useWindowSize } from '@vueuse/core'
|
||||
import { getTenantLoginUser, updateTenantLoginUser } from '@/apis/tenant/tenant'
|
||||
import { type Columns, GiForm, type Options } from '@/components/GiForm'
|
||||
import { updateTenantAdminUserPwd } from '@/apis/tenant/management'
|
||||
import { type ColumnItem, GiForm } from '@/components/GiForm'
|
||||
import { useResetReactive } from '@/hooks'
|
||||
import { encryptByRsa } from '@/utils/encrypt'
|
||||
|
||||
@@ -31,37 +31,19 @@ const dataId = ref('')
|
||||
const visible = ref(false)
|
||||
const formRef = ref<InstanceType<typeof GiForm>>()
|
||||
|
||||
const options: Options = {
|
||||
form: { size: 'large' },
|
||||
btns: { hide: true },
|
||||
}
|
||||
|
||||
const [form, resetForm] = useResetReactive({
|
||||
plaintextPwd: undefined,
|
||||
password: undefined,
|
||||
})
|
||||
|
||||
const columns: Columns = reactive([
|
||||
const columns: ColumnItem[] = reactive([
|
||||
{
|
||||
label: '登陆用户',
|
||||
field: 'username',
|
||||
type: 'input',
|
||||
span: 24,
|
||||
props: {
|
||||
placeholder: '请输入用户名',
|
||||
maxLength: 64,
|
||||
showWordLimit: true,
|
||||
},
|
||||
rules: [{ required: true, message: '请输入登陆用户名' }],
|
||||
},
|
||||
{
|
||||
label: '登陆密码',
|
||||
field: 'plaintextPwd',
|
||||
label: '新密码',
|
||||
field: 'password',
|
||||
type: 'input-password',
|
||||
span: 24,
|
||||
required: true,
|
||||
props: {
|
||||
placeholder: '请输入密码',
|
||||
maxLength: 32,
|
||||
showWordLimit: true,
|
||||
},
|
||||
},
|
||||
])
|
||||
@@ -77,11 +59,9 @@ const save = async () => {
|
||||
try {
|
||||
const isInvalid = await formRef.value?.formRef?.validate()
|
||||
if (isInvalid) return false
|
||||
await updateTenantLoginUser({
|
||||
tenantId: dataId.value,
|
||||
username: form.username,
|
||||
password: encryptByRsa(form.plaintextPwd) || '',
|
||||
})
|
||||
await updateTenantAdminUserPwd({
|
||||
password: encryptByRsa(form.password) || '',
|
||||
}, dataId.value)
|
||||
Message.success('修改成功')
|
||||
emit('save-success')
|
||||
return true
|
||||
@@ -93,8 +73,6 @@ const save = async () => {
|
||||
const open = async (id: string) => {
|
||||
reset()
|
||||
dataId.value = id
|
||||
const { data } = await getTenantLoginUser(id)
|
||||
Object.assign(form, { username: data })
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
<template>
|
||||
<a-drawer v-model:visible="visible" title="租户详情" :width="width >= 600 ? 600 : '100%'" :footer="false">
|
||||
<a-descriptions title="基础信息" :column="2" size="large" class="general-description">
|
||||
<a-descriptions-item label="ID">{{ dataDetail?.id }}</a-descriptions-item>
|
||||
<a-descriptions-item label="租户名称">{{ dataDetail?.name }}</a-descriptions-item>
|
||||
<a-descriptions-item label="绑定的域名">
|
||||
<a v-if="dataDetail?.domain" style="color: rgb(var(--arcoblue-7))" :text="dataDetail?.domain" :href="formatDomain(dataDetail?.domain)" />
|
||||
<span v-else style="color: red" class="text-red-4">未设置</span>
|
||||
<a-descriptions :column="2" size="large" class="general-description">
|
||||
<a-descriptions-item label="ID" :span="2">
|
||||
<a-typography-paragraph copyable>{{ dataDetail?.id }}</a-typography-paragraph>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="租户套餐">{{ dataDetail?.packageName }}</a-descriptions-item>
|
||||
<a-descriptions-item label="编码">
|
||||
<a-typography-paragraph copyable>{{ dataDetail?.code }}</a-typography-paragraph>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="名称">{{ dataDetail?.name }}</a-descriptions-item>
|
||||
<a-descriptions-item label="套餐">{{ dataDetail?.packageName }}</a-descriptions-item>
|
||||
<a-descriptions-item label="状态">
|
||||
<a-tag v-if="dataDetail?.status === 1" color="green">启用</a-tag>
|
||||
<a-tag v-else color="red">禁用</a-tag>
|
||||
@@ -19,43 +20,33 @@
|
||||
</span>
|
||||
<span v-else>{{ dataDetail?.expireTime }}</span>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="域名">
|
||||
<a v-if="dataDetail?.domain" style="color: rgb(var(--arcoblue-7))">{{ dataDetail?.domain }}</a>
|
||||
<span v-else style="color: red" class="text-red-4">未设置</span>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="隔离级别"><GiCellTag :value="dataDetail?.isolationLevel" :dict="tenant_isolation_level_enum" /></a-descriptions-item>
|
||||
<a-descriptions-item label="数据源">{{ dataDetail?.datasourceName }}</a-descriptions-item>
|
||||
<a-descriptions-item label="创建人">{{ dataDetail?.createUserString }}</a-descriptions-item>
|
||||
<a-descriptions-item label="创建时间">{{ dataDetail?.createTime }}</a-descriptions-item>
|
||||
<a-descriptions-item label="修改人">{{ dataDetail?.updateUserString }}</a-descriptions-item>
|
||||
<a-descriptions-item label="修改时间">{{ dataDetail?.updateTime }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
|
||||
<a-descriptions
|
||||
title="租户权限"
|
||||
:column="2"
|
||||
size="large"
|
||||
class="permission general-description"
|
||||
style="margin-top: 20px; position: relative"
|
||||
>
|
||||
<a-descriptions-item :span="2">
|
||||
<a-tree
|
||||
:checked-keys="dataDetail?.menuIds"
|
||||
:data="menuList"
|
||||
default-expand-all
|
||||
check-strictly
|
||||
checkable
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="描述" :span="2">{{ dataDetail?.description }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useWindowSize } from '@vueuse/core'
|
||||
import { type TenantDetailResp, getTenant as getDetail } from '@/apis/tenant/tenant'
|
||||
import { useMenu } from '@/hooks/app'
|
||||
import { type TenantResp, getTenant as getDetail } from '@/apis/tenant/management'
|
||||
import { useDict, useMenu } from '@/hooks/app'
|
||||
|
||||
const { menuList, getTenantPackageMenuList } = useMenu()
|
||||
const { width } = useWindowSize()
|
||||
|
||||
const dataId = ref('')
|
||||
const dataDetail = ref<TenantDetailResp>()
|
||||
const dataDetail = ref<TenantResp>()
|
||||
const visible = ref(false)
|
||||
const { tenant_isolation_level_enum } = useDict('tenant_isolation_level_enum')
|
||||
|
||||
// 查询详情
|
||||
const getDataDetail = async () => {
|
||||
@@ -73,14 +64,6 @@ const onOpen = async (id: string) => {
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
const formatDomain = (domain: string): string => {
|
||||
if (domain.startsWith('http')) {
|
||||
return domain
|
||||
} else {
|
||||
return `http://${domain}`
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ onOpen })
|
||||
</script>
|
||||
|
||||
202
src/views/tenant/management/index.vue
Normal file
202
src/views/tenant/management/index.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<GiPageLayout>
|
||||
<GiTable
|
||||
row-key="id"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
:loading="loading"
|
||||
:scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
|
||||
:pagination="pagination"
|
||||
:disabled-tools="['size']"
|
||||
:disabled-column-keys="['name']"
|
||||
@refresh="search"
|
||||
>
|
||||
<template #toolbar-left>
|
||||
<a-input-search v-model="queryForm.description" placeholder="搜索名称/描述" allow-clear @search="search" />
|
||||
<a-select
|
||||
v-model="queryForm.packageId"
|
||||
:options="packageList"
|
||||
placeholder="请选择套餐"
|
||||
style="width: 200px"
|
||||
allow-clear
|
||||
@change="search"
|
||||
/>
|
||||
<a-button @click="reset">
|
||||
<template #icon><icon-refresh /></template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<template #toolbar-right>
|
||||
<a-button v-permission="['tenant:management:create']" type="primary" @click="onAdd">
|
||||
<template #icon><icon-plus /></template>
|
||||
<template #default>新增</template>
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<template #code="{ record }">
|
||||
<CellCopy :content="record.code" />
|
||||
</template>
|
||||
<template #status="{ record }">
|
||||
<GiCellStatus :status="record.status" />
|
||||
</template>
|
||||
<template #expireTime="{ record }">
|
||||
<span v-if="!record.expireTime">
|
||||
<icon-check-circle-fill class="success" />
|
||||
<span>永不过期</span>
|
||||
</span>
|
||||
<span v-else>{{ record.expireTime }}</span>
|
||||
</template>
|
||||
<template #domain="{ record }">
|
||||
<a v-if="record.domain" style="color: rgb(var(--arcoblue-7))" :href="record.domain">{{ record.domain }}</a>
|
||||
<span v-else style="color: red" class="text-red-4">未设置</span>
|
||||
</template>
|
||||
<template #isolationLevel="{ record }">
|
||||
<GiCellTag :value="record.isolationLevel" :dict="tenant_isolation_level_enum" />
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-link v-permission="['tenant:management:get']" title="详情" @click="onDetail(record)">详情</a-link>
|
||||
<a-link v-permission="['tenant:management:update']" title="修改" @click="onUpdate(record)">修改</a-link>
|
||||
<a-dropdown>
|
||||
<a-button v-if="has.hasPermOr(['tenant:management:updateAdminUserPwd', 'tenant:management:delete'])" type="text" size="mini" title="更多">
|
||||
<template #icon>
|
||||
<icon-more :size="16" />
|
||||
</template>
|
||||
</a-button>
|
||||
<template #content>
|
||||
<a-doption v-permission="['tenant:management:updateAdminUserPwd']" title="修改管理员密码" @click="onUpdateAdminUserPwd(record)">修改管理员密码</a-doption>
|
||||
<a-doption
|
||||
v-permission="['tenant:management:delete']"
|
||||
:disabled="record.disabled"
|
||||
:title="record.disabled ? '禁止删除' : '删除'"
|
||||
@click="onDelete(record)"
|
||||
>
|
||||
删除
|
||||
</a-doption>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
</template>
|
||||
</GiTable>
|
||||
|
||||
<AddModal ref="AddModalRef" @save-success="search" />
|
||||
<DetailDrawer ref="DetailDrawerRef" />
|
||||
<AdminUserPwdUpdateModal ref="AdminUserPwdUpdateModalRef" @save-success="search" />
|
||||
</GiPageLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { TableInstance } from '@arco-design/web-vue'
|
||||
import AddModal from './AddModal.vue'
|
||||
import AdminUserPwdUpdateModal from './AdminUserPwdUpdateModal.vue'
|
||||
import DetailDrawer from './DetailDrawer.vue'
|
||||
import { type TenantQuery, type TenantResp, deleteTenant, listTenant } from '@/apis/tenant/management'
|
||||
import { useTable } from '@/hooks'
|
||||
import { isMobile } from '@/utils'
|
||||
import has from '@/utils/has'
|
||||
import { useDict } from '@/hooks/app'
|
||||
import { listTenantPackageDict } from '@/apis'
|
||||
import type { LabelValueState } from '@/types/global'
|
||||
|
||||
defineOptions({ name: 'TenantManagement' })
|
||||
|
||||
const { tenant_isolation_level_enum } = useDict('tenant_isolation_level_enum')
|
||||
|
||||
const queryForm = reactive<TenantQuery>({
|
||||
description: undefined,
|
||||
packageId: undefined,
|
||||
status: undefined,
|
||||
sort: ['createTime,desc'],
|
||||
})
|
||||
|
||||
const {
|
||||
tableData: dataList,
|
||||
loading,
|
||||
pagination,
|
||||
search,
|
||||
handleDelete,
|
||||
} = useTable((page) => listTenant({ ...queryForm, ...page }), { immediate: true })
|
||||
const columns: TableInstance['columns'] = [
|
||||
{
|
||||
title: '序号',
|
||||
width: 66,
|
||||
align: 'center',
|
||||
render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
|
||||
fixed: !isMobile() ? 'left' : undefined,
|
||||
},
|
||||
{ title: '编码', dataIndex: 'code', slotName: 'code', width: 150 },
|
||||
{ title: '名称', dataIndex: 'name', slotName: 'name', ellipsis: true, tooltip: true },
|
||||
{ title: '套餐', dataIndex: 'packageName', slotName: 'packageName' },
|
||||
{ title: '状态', dataIndex: 'status', slotName: 'status' },
|
||||
{ title: '过期时间', dataIndex: 'expireTime', slotName: 'expireTime', width: 180 },
|
||||
{ title: '域名', dataIndex: 'domain', slotName: 'domain', ellipsis: true, tooltip: true },
|
||||
{ title: '隔离级别', dataIndex: 'isolationLevel', slotName: 'isolationLevel', align: 'center' },
|
||||
{ title: '数据源', dataIndex: 'datasourceName', slotName: 'datasourceName', align: 'center' },
|
||||
{ title: '描述', dataIndex: 'description', ellipsis: true, tooltip: true },
|
||||
{ title: '创建人', dataIndex: 'createUserString', ellipsis: true, tooltip: true, show: false },
|
||||
{ title: '创建时间', dataIndex: 'createTime', width: 180 },
|
||||
{ title: '修改人', dataIndex: 'updateUserString', ellipsis: true, tooltip: true, show: false },
|
||||
{ title: '修改时间', dataIndex: 'updateTime', width: 180, show: false },
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
slotName: 'action',
|
||||
width: 160,
|
||||
align: 'center',
|
||||
fixed: !isMobile() ? 'right' : undefined,
|
||||
show: has.hasPermOr(['tenant:management:get', 'tenant:management:update', 'tenant:management:delete', 'tenant:management:updateAdminUserPwd']),
|
||||
},
|
||||
]
|
||||
|
||||
// 重置
|
||||
const reset = () => {
|
||||
queryForm.description = undefined
|
||||
queryForm.packageId = undefined
|
||||
queryForm.status = undefined
|
||||
search()
|
||||
}
|
||||
|
||||
// 删除
|
||||
const onDelete = (record: TenantResp) => {
|
||||
return handleDelete(() => deleteTenant(record.id), {
|
||||
content: `是否确定删除租户「${record.name}(${record.code})」？`,
|
||||
showModal: true,
|
||||
})
|
||||
}
|
||||
|
||||
const AddModalRef = ref<InstanceType<typeof AddModal>>()
|
||||
// 新增
|
||||
const onAdd = () => {
|
||||
AddModalRef.value?.onAdd()
|
||||
}
|
||||
|
||||
// 修改
|
||||
const onUpdate = (record: TenantResp) => {
|
||||
AddModalRef.value?.onUpdate(record.id)
|
||||
}
|
||||
|
||||
const DetailDrawerRef = ref<InstanceType<typeof DetailDrawer>>()
|
||||
// 详情
|
||||
const onDetail = (record: TenantResp) => {
|
||||
DetailDrawerRef.value?.onOpen(record.id)
|
||||
}
|
||||
|
||||
const AdminUserPwdUpdateModalRef = ref<InstanceType<typeof AdminUserPwdUpdateModal>>()
|
||||
// 修改管理员密码
|
||||
const onUpdateAdminUserPwd = (record: TenantResp) => {
|
||||
AdminUserPwdUpdateModalRef.value?.open(record.id)
|
||||
}
|
||||
|
||||
const packageList = ref<LabelValueState[]>([])
|
||||
// 查询套餐列表
|
||||
const getPackageList = async () => {
|
||||
const { data } = await listTenantPackageDict()
|
||||
packageList.value = data
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getPackageList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@@ -1,20 +1,31 @@
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
:esc-to-close="false"
|
||||
:mask-closable="false"
|
||||
:title="title"
|
||||
:mask-closable="false"
|
||||
:esc-to-close="false"
|
||||
:width="width >= 500 ? 500 : '100%'"
|
||||
:hi
|
||||
draggable
|
||||
@close="reset"
|
||||
@before-ok="save"
|
||||
@close="reset"
|
||||
>
|
||||
<a-form ref="formRef" :model="form" :rules="rules" auto-label-width size="large">
|
||||
<a-form-item field="name" label="套餐名称">
|
||||
<a-input v-model.trim="form.name" placeholder="请输入套餐名称" />
|
||||
<a-form-item field="name" label="名称">
|
||||
<a-input v-model.trim="form.name" placeholder="请输入名称" />
|
||||
</a-form-item>
|
||||
<a-form-item field="status" label="套餐状态">
|
||||
<a-form-item label="排序" field="sort">
|
||||
<a-input-number v-model="form.sort" placeholder="请输入排序" :min="1" mode="button" />
|
||||
</a-form-item>
|
||||
<a-form-item label="描述" field="description">
|
||||
<a-textarea
|
||||
v-model.trim="form.description"
|
||||
placeholder="请输入描述"
|
||||
show-word-limit
|
||||
:max-length="200"
|
||||
:auto-size="{ minRows: 3, maxRows: 5 }"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item field="status" label="状态">
|
||||
<a-switch
|
||||
v-model="form.status" type="round" :checked-value="1" :unchecked-value="2" checked-text="启用"
|
||||
unchecked-text="禁用"
|
||||
@@ -42,29 +53,33 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { type FormInstance, Message } from '@arco-design/web-vue'
|
||||
import type { FormInstance, TreeNodeData } from '@arco-design/web-vue'
|
||||
import { Message } from '@arco-design/web-vue'
|
||||
import { useWindowSize } from '@vueuse/core'
|
||||
import { addTenantPackage, getTenantPackage, updateTenantPackage } from '@/apis/tenant/tenantPackage'
|
||||
import { addTenantPackage, getTenantPackage, updateTenantPackage } from '@/apis/tenant/package'
|
||||
import { useResetReactive } from '@/hooks'
|
||||
import { useMenu } from '@/hooks/app'
|
||||
|
||||
const emit = defineEmits<{ (e: 'save-success'): void }>()
|
||||
const emit = defineEmits<{
|
||||
(e: 'save-success'): void
|
||||
}>()
|
||||
const { width } = useWindowSize()
|
||||
|
||||
const dataId = ref('')
|
||||
const visible = ref(false)
|
||||
const isUpdate = computed(() => !!dataId.value)
|
||||
const title = computed(() => (isUpdate.value ? '修改租户套餐' : '新增租户套餐'))
|
||||
const title = computed(() => (isUpdate.value ? '修改套餐' : '新增套餐'))
|
||||
const formRef = ref<FormInstance>()
|
||||
const { menuList, getTenantPackageMenuList } = useMenu()
|
||||
const rules: FormInstance['rules'] = {
|
||||
name: [{ required: true, message: '请输入套餐名称' }],
|
||||
status: [{ required: true, message: '请选择套餐状态' }],
|
||||
name: [{ required: true, message: '请输入名称' }],
|
||||
status: [{ required: true, message: '请选择状态' }],
|
||||
}
|
||||
|
||||
const [form, resetForm] = useResetReactive({
|
||||
sort: 999,
|
||||
menuCheckStrictly: true,
|
||||
status: 2,
|
||||
status: 1,
|
||||
})
|
||||
|
||||
const menuTreeRef = ref()
|
||||
@@ -1,8 +1,11 @@
|
||||
<template>
|
||||
<a-drawer v-model:visible="visible" title="租户套餐详情" :width="width >= 600 ? 600 : '100%'" :footer="false">
|
||||
<a-drawer v-model:visible="visible" title="套餐详情" :width="width >= 600 ? 600 : '100%'" :footer="false">
|
||||
<a-descriptions title="基础信息" :column="2" size="large" class="general-description">
|
||||
<a-descriptions-item label="ID">{{ dataDetail?.id }}</a-descriptions-item>
|
||||
<a-descriptions-item label="套餐名称">{{ dataDetail?.name }}</a-descriptions-item>
|
||||
<a-descriptions-item label="ID" :span="2">
|
||||
<a-typography-paragraph copyable>{{ dataDetail?.id }}</a-typography-paragraph>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="名称">{{ dataDetail?.name }}</a-descriptions-item>
|
||||
<a-descriptions-item label="排序">{{ dataDetail?.sort }}</a-descriptions-item>
|
||||
<a-descriptions-item label="状态">
|
||||
<a-tag v-if="dataDetail?.status === 1" color="green">启用</a-tag>
|
||||
<a-tag v-else color="red">禁用</a-tag>
|
||||
@@ -12,10 +15,11 @@
|
||||
<a-descriptions-item label="创建时间">{{ dataDetail?.createTime }}</a-descriptions-item>
|
||||
<a-descriptions-item label="修改人">{{ dataDetail?.updateUserString }}</a-descriptions-item>
|
||||
<a-descriptions-item label="修改时间">{{ dataDetail?.updateTime }}</a-descriptions-item>
|
||||
<a-descriptions-item label="描述" :span="2">{{ dataDetail?.description }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
|
||||
<a-descriptions
|
||||
title="套餐权限"
|
||||
title="关联菜单"
|
||||
:column="2"
|
||||
size="large"
|
||||
class="permission general-description"
|
||||
@@ -36,15 +40,16 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useWindowSize } from '@vueuse/core'
|
||||
import { type TenantPackageDetailResp, getTenantPackage as getDetail } from '@/apis/tenant/tenantPackage'
|
||||
import { type TenantPackageResp, getTenantPackage as getDetail } from '@/apis/tenant/package'
|
||||
import { useMenu } from '@/hooks/app'
|
||||
|
||||
const { width } = useWindowSize()
|
||||
|
||||
const dataId = ref('')
|
||||
const dataDetail = ref<TenantPackageDetailResp>()
|
||||
const dataDetail = ref<TenantPackageResp>()
|
||||
const visible = ref(false)
|
||||
const { menuList, getTenantPackageMenuList } = useMenu()
|
||||
|
||||
// 查询详情
|
||||
const getDataDetail = async () => {
|
||||
const { data } = await getDetail(dataId.value)
|
||||
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div class="gi_table_page">
|
||||
<GiPageLayout>
|
||||
<GiTable
|
||||
title="租户套餐管理"
|
||||
row-key="id"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
@@ -13,16 +12,14 @@
|
||||
@refresh="search"
|
||||
>
|
||||
<template #toolbar-left>
|
||||
<a-input v-model="queryForm.name" placeholder="请输入套餐名称" allow-clear @change="search">
|
||||
<template #prefix><icon-search /></template>
|
||||
</a-input>
|
||||
<a-input-search v-model="queryForm.description" placeholder="搜索名称/描述" allow-clear @search="search" />
|
||||
<a-button @click="reset">
|
||||
<template #icon><icon-refresh /></template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<template #toolbar-right>
|
||||
<a-button v-permission="['tenant:package:add']" type="primary" @click="onAdd">
|
||||
<a-button v-permission="['tenant:package:create']" type="primary" @click="onAdd">
|
||||
<template #icon><icon-plus /></template>
|
||||
<template #default>新增</template>
|
||||
</a-button>
|
||||
@@ -32,7 +29,7 @@
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-link v-permission="['tenant:package:detail']" title="详情" @click="onDetail(record)">详情</a-link>
|
||||
<a-link v-permission="['tenant:package:get']" title="详情" @click="onDetail(record)">详情</a-link>
|
||||
<a-link v-permission="['tenant:package:update']" title="修改" @click="onUpdate(record)">修改</a-link>
|
||||
<a-link
|
||||
v-permission="['tenant:package:delete']"
|
||||
@@ -47,21 +44,21 @@
|
||||
</template>
|
||||
</GiTable>
|
||||
|
||||
<TenantPackageAddModal ref="TenantPackageAddModalRef" @save-success="search" />
|
||||
<TenantPackageDetailDrawer ref="TenantPackageDetailDrawerRef" />
|
||||
</div>
|
||||
<AddModal ref="AddModalRef" @save-success="search" />
|
||||
<DetailDrawer ref="DetailDrawerRef" />
|
||||
</GiPageLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TenantPackageAddModal from './TenantPackageAddModal.vue'
|
||||
import TenantPackageDetailDrawer from './TenantPackageDetailDrawer.vue'
|
||||
import type { TableInstance } from '@arco-design/web-vue'
|
||||
import AddModal from './AddModal.vue'
|
||||
import DetailDrawer from './DetailDrawer.vue'
|
||||
import {
|
||||
type TenantPackageQuery,
|
||||
type TenantPackageResp,
|
||||
deleteTenantPackage,
|
||||
listTenantPackage,
|
||||
} from '@/apis/tenant/tenantPackage'
|
||||
import type { TableInstanceColumns } from '@/components/GiTable/type'
|
||||
} from '@/apis/tenant/package'
|
||||
import { useTable } from '@/hooks'
|
||||
import { isMobile } from '@/utils'
|
||||
import has from '@/utils/has'
|
||||
@@ -69,9 +66,9 @@ import has from '@/utils/has'
|
||||
defineOptions({ name: 'TenantPackage' })
|
||||
|
||||
const queryForm = reactive<TenantPackageQuery>({
|
||||
name: undefined,
|
||||
description: undefined,
|
||||
status: undefined,
|
||||
sort: ['id,desc'],
|
||||
sort: ['createTime,desc'],
|
||||
})
|
||||
|
||||
const {
|
||||
@@ -81,11 +78,22 @@ const {
|
||||
search,
|
||||
handleDelete,
|
||||
} = useTable((page) => listTenantPackage({ ...queryForm, ...page }), { immediate: true })
|
||||
const columns: TableInstanceColumns[] = [
|
||||
{ title: '套餐ID', dataIndex: 'id', slotName: 'id' },
|
||||
{ title: '套餐名称', dataIndex: 'name', slotName: 'name' },
|
||||
{ title: '套餐状态', dataIndex: 'status', slotName: 'status' },
|
||||
{ title: '创建时间', dataIndex: 'createTime', slotName: 'createTime' },
|
||||
const columns: TableInstance['columns'] = [
|
||||
{
|
||||
title: '序号',
|
||||
width: 66,
|
||||
align: 'center',
|
||||
render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
|
||||
fixed: !isMobile() ? 'left' : undefined,
|
||||
},
|
||||
{ title: '名称', dataIndex: 'name', slotName: 'name', ellipsis: true, tooltip: true, fixed: !isMobile() ? 'left' : undefined },
|
||||
{ title: '状态', dataIndex: 'status', slotName: 'status' },
|
||||
{ title: '排序', dataIndex: 'sort', align: 'center' },
|
||||
{ title: '描述', dataIndex: 'description', ellipsis: true, tooltip: true },
|
||||
{ title: '创建人', dataIndex: 'createUserString', ellipsis: true, tooltip: true, show: false },
|
||||
{ title: '创建时间', dataIndex: 'createTime', width: 180 },
|
||||
{ title: '修改人', dataIndex: 'updateUserString', ellipsis: true, tooltip: true, show: false },
|
||||
{ title: '修改时间', dataIndex: 'updateTime', width: 180, show: false },
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
@@ -93,13 +101,13 @@ const columns: TableInstanceColumns[] = [
|
||||
width: 160,
|
||||
align: 'center',
|
||||
fixed: !isMobile() ? 'right' : undefined,
|
||||
show: has.hasPermOr(['tenant:package:detail', 'tenant:package:update', 'tenant:package:delete']),
|
||||
show: has.hasPermOr(['tenant:package:get', 'tenant:package:update', 'tenant:package:delete']),
|
||||
},
|
||||
]
|
||||
|
||||
// 重置
|
||||
const reset = () => {
|
||||
queryForm.name = undefined
|
||||
queryForm.description = undefined
|
||||
queryForm.status = undefined
|
||||
search()
|
||||
}
|
||||
@@ -107,26 +115,26 @@ const reset = () => {
|
||||
// 删除
|
||||
const onDelete = (record: TenantPackageResp) => {
|
||||
return handleDelete(() => deleteTenantPackage(record.id), {
|
||||
content: `是否确定删除该条数据？`,
|
||||
content: `是否确定删除套餐「${record.name}」？`,
|
||||
showModal: true,
|
||||
})
|
||||
}
|
||||
|
||||
const TenantPackageAddModalRef = ref<InstanceType<typeof TenantPackageAddModal>>()
|
||||
const AddModalRef = ref<InstanceType<typeof AddModal>>()
|
||||
// 新增
|
||||
const onAdd = () => {
|
||||
TenantPackageAddModalRef.value?.onAdd()
|
||||
AddModalRef.value?.onAdd()
|
||||
}
|
||||
|
||||
// 修改
|
||||
const onUpdate = (record: TenantPackageResp) => {
|
||||
TenantPackageAddModalRef.value?.onUpdate(record.id)
|
||||
AddModalRef.value?.onUpdate(record.id)
|
||||
}
|
||||
|
||||
const TenantPackageDetailDrawerRef = ref<InstanceType<typeof TenantPackageDetailDrawer>>()
|
||||
const DetailDrawerRef = ref<InstanceType<typeof DetailDrawer>>()
|
||||
// 详情
|
||||
const onDetail = (record: TenantPackageResp) => {
|
||||
TenantPackageDetailDrawerRef.value?.onOpen(record.id)
|
||||
DetailDrawerRef.value?.onOpen(record.id)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,142 +0,0 @@
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
:title="title"
|
||||
:mask-closable="false"
|
||||
:esc-to-close="false"
|
||||
draggable
|
||||
:width="width >= 500 ? 500 : '100%'"
|
||||
@before-ok="save"
|
||||
@close="reset"
|
||||
>
|
||||
<GiForm ref="formRef" v-model="form" :options="options" :columns="columns" />
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Message } from '@arco-design/web-vue'
|
||||
import { useWindowSize } from '@vueuse/core'
|
||||
import { addTenantDbConnect, getTenantDbConnect, updateTenantDbConnect } from '@/apis/tenant/tenantDbConnect'
|
||||
import { type Columns, GiForm, type Options } from '@/components/GiForm'
|
||||
import { useResetReactive } from '@/hooks'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'save-success'): void
|
||||
}>()
|
||||
|
||||
const { width } = useWindowSize()
|
||||
|
||||
const dataId = ref('')
|
||||
const visible = ref(false)
|
||||
const isUpdate = computed(() => !!dataId.value)
|
||||
const title = computed(() => (isUpdate.value ? '修改租户数据连接' : '新增租户数据连接'))
|
||||
const formRef = ref<InstanceType<typeof GiForm>>()
|
||||
|
||||
const options: Options = {
|
||||
form: { size: 'large' },
|
||||
btns: { hide: true },
|
||||
}
|
||||
|
||||
const [form, resetForm] = useResetReactive({
|
||||
type: 0,
|
||||
})
|
||||
|
||||
const columns: Columns = reactive([
|
||||
{
|
||||
label: '连接名称',
|
||||
field: 'connectName',
|
||||
type: 'input',
|
||||
span: 24,
|
||||
rules: [{ required: true, message: '请输入连接名称' }],
|
||||
},
|
||||
{
|
||||
label: '连接类型',
|
||||
field: 'type',
|
||||
type: 'radio-group',
|
||||
span: 24,
|
||||
rules: [{ required: true, message: '请选择连接类型' }],
|
||||
props: {
|
||||
type: 'button',
|
||||
size: 'small',
|
||||
options: [
|
||||
{ label: 'mysql', value: 0 },
|
||||
{ label: 'postgresql(暂未支持)', disabled: true },
|
||||
],
|
||||
},
|
||||
|
||||
},
|
||||
{
|
||||
label: '主机连接地址',
|
||||
field: 'host',
|
||||
type: 'input',
|
||||
span: 24,
|
||||
rules: [{ required: true, message: '请输入主机连接地址' }],
|
||||
},
|
||||
{
|
||||
label: '连接端口',
|
||||
field: 'port',
|
||||
type: 'input-number',
|
||||
span: 24,
|
||||
rules: [{ required: true, message: '请输入连接端口' }],
|
||||
},
|
||||
{
|
||||
label: '连接用户名',
|
||||
field: 'username',
|
||||
type: 'input',
|
||||
span: 24,
|
||||
rules: [{ required: true, message: '请输入连接用户名' }],
|
||||
},
|
||||
{
|
||||
label: '连接密码',
|
||||
field: 'password',
|
||||
type: 'input-password',
|
||||
span: 24,
|
||||
rules: [{ required: true, message: '请输入连接密码' }],
|
||||
},
|
||||
])
|
||||
|
||||
// 重置
|
||||
const reset = () => {
|
||||
formRef.value?.formRef?.resetFields()
|
||||
resetForm()
|
||||
}
|
||||
|
||||
// 保存
|
||||
const save = async () => {
|
||||
try {
|
||||
const isInvalid = await formRef.value?.formRef?.validate()
|
||||
if (isInvalid) return false
|
||||
if (isUpdate.value) {
|
||||
await updateTenantDbConnect(form, dataId.value)
|
||||
Message.success('修改成功')
|
||||
} else {
|
||||
await addTenantDbConnect(form)
|
||||
Message.success('新增成功')
|
||||
}
|
||||
emit('save-success')
|
||||
return true
|
||||
} catch (error) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// 新增
|
||||
const onAdd = async () => {
|
||||
reset()
|
||||
dataId.value = ''
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
// 修改
|
||||
const onUpdate = async (id: string) => {
|
||||
reset()
|
||||
dataId.value = id
|
||||
const { data } = await getTenantDbConnect(id)
|
||||
Object.assign(form, data)
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
defineExpose({ onAdd, onUpdate })
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@@ -1,142 +0,0 @@
|
||||
<template>
|
||||
<div class="gi_table_page">
|
||||
<GiTable
|
||||
title="租户数据连接管理"
|
||||
row-key="id"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
:loading="loading"
|
||||
:scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
|
||||
:pagination="pagination"
|
||||
:disabled-tools="['size']"
|
||||
:disabled-column-keys="['name']"
|
||||
@refresh="search"
|
||||
>
|
||||
<template #toolbar-left>
|
||||
<a-input v-model="queryForm.connectName" placeholder="请输入连接名称" allow-clear @change="search">
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
<a-button @click="reset">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<template #toolbar-right>
|
||||
<a-button v-permission="['tenant:tenantDbConnect:add']" type="primary" @click="onAdd">
|
||||
<template #icon>
|
||||
<icon-plus />
|
||||
</template>
|
||||
<template #default>新增</template>
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<template #type="{ record }">
|
||||
<a-tag v-if="record.type === 0" color="green" size="small">
|
||||
<template #default>MYSQL</template>
|
||||
</a-tag>
|
||||
</template>
|
||||
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-link v-permission="['tenant:tenantDbConnect:detail']" title="详情" @click="onDetail(record)">详情</a-link>
|
||||
<a-link v-permission="['tenant:tenantDbConnect:update']" title="修改" @click="onUpdate(record)">修改</a-link>
|
||||
<a-link
|
||||
v-permission="['tenant:tenantDbConnect:delete']"
|
||||
status="danger"
|
||||
:disabled="record.disabled"
|
||||
:title="record.disabled ? '不可删除' : '删除'"
|
||||
@click="onDelete(record)"
|
||||
>
|
||||
删除
|
||||
</a-link>
|
||||
</a-space>
|
||||
</template>
|
||||
</GiTable>
|
||||
|
||||
<TenantDbConnectAddModal ref="TenantDbConnectAddModalRef" @save-success="search" />
|
||||
<TenantDbConnectDetailDrawer ref="TenantDbConnectDetailDrawerRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TenantDbConnectAddModal from './TenantDbConnectAddModal.vue'
|
||||
import TenantDbConnectDetailDrawer from './TenantDbConnectDetailDrawer.vue'
|
||||
import {
|
||||
type TenantDbConnectQuery,
|
||||
type TenantDbConnectResp,
|
||||
deleteTenantDbConnect,
|
||||
listTenantDbConnect,
|
||||
} from '@/apis/tenant/tenantDbConnect'
|
||||
import type { TableInstanceColumns } from '@/components/GiTable/type'
|
||||
import { useTable } from '@/hooks'
|
||||
import { isMobile } from '@/utils'
|
||||
import has from '@/utils/has'
|
||||
|
||||
defineOptions({ name: 'TenantDbConnect' })
|
||||
|
||||
const queryForm = reactive<TenantDbConnectQuery>({
|
||||
connectName: undefined,
|
||||
sort: ['id,desc'],
|
||||
})
|
||||
|
||||
const {
|
||||
tableData: dataList,
|
||||
loading,
|
||||
pagination,
|
||||
search,
|
||||
handleDelete,
|
||||
} = useTable((page) => listTenantDbConnect({ ...queryForm, ...page }), { immediate: true })
|
||||
const columns: TableInstanceColumns[] = [
|
||||
{ title: '连接ID', dataIndex: 'id', slotName: 'id' },
|
||||
{ title: '连接名称', dataIndex: 'connectName', slotName: 'connectName', align: 'center' },
|
||||
{ title: '连接类型', dataIndex: 'type', slotName: 'type', align: 'center' },
|
||||
{ title: '主机连接地址', dataIndex: 'host', slotName: 'host', align: 'center' },
|
||||
{ title: '连接端口', dataIndex: 'port', slotName: 'port', align: 'center' },
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
slotName: 'action',
|
||||
width: 160,
|
||||
align: 'center',
|
||||
fixed: !isMobile() ? 'right' : undefined,
|
||||
show: has.hasPermOr(['tenant:tenantDbConnect:detail', 'tenant:tenantDbConnect:update', 'tenant:tenantDbConnect:delete']),
|
||||
},
|
||||
]
|
||||
|
||||
// 重置
|
||||
const reset = () => {
|
||||
queryForm.connectName = undefined
|
||||
search()
|
||||
}
|
||||
|
||||
// 删除
|
||||
const onDelete = (record: TenantDbConnectResp) => {
|
||||
return handleDelete(() => deleteTenantDbConnect(record.id), {
|
||||
content: `是否确定删除该条数据？`,
|
||||
showModal: true,
|
||||
})
|
||||
}
|
||||
|
||||
const TenantDbConnectAddModalRef = ref<InstanceType<typeof TenantDbConnectAddModal>>()
|
||||
// 新增
|
||||
const onAdd = () => {
|
||||
TenantDbConnectAddModalRef.value?.onAdd()
|
||||
}
|
||||
|
||||
// 修改
|
||||
const onUpdate = (record: TenantDbConnectResp) => {
|
||||
TenantDbConnectAddModalRef.value?.onUpdate(record.id)
|
||||
}
|
||||
|
||||
const TenantDbConnectDetailDrawerRef = ref<InstanceType<typeof TenantDbConnectDetailDrawer>>()
|
||||
// 详情
|
||||
const onDetail = (record: TenantDbConnectResp) => {
|
||||
TenantDbConnectDetailDrawerRef.value?.onOpen(record.id)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@@ -1,200 +0,0 @@
|
||||
<template>
|
||||
<div class="gi_table_page">
|
||||
<GiTable
|
||||
title="租户管理"
|
||||
row-key="id"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
:loading="loading"
|
||||
:scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
|
||||
:pagination="pagination"
|
||||
:disabled-tools="['size']"
|
||||
:disabled-column-keys="['name']"
|
||||
@refresh="search"
|
||||
>
|
||||
<template #toolbar-left>
|
||||
<a-input v-model="queryForm.name" placeholder="请输入租户名称" allow-clear @change="search">
|
||||
<template #prefix><icon-search /></template>
|
||||
</a-input>
|
||||
<a-select
|
||||
v-model="queryForm.packageId"
|
||||
style="width: 200px"
|
||||
:options="tenantListOptions"
|
||||
placeholder="请选择套餐"
|
||||
allow-clear
|
||||
@change="search"
|
||||
/>
|
||||
<a-button @click="reset">
|
||||
<template #icon><icon-refresh /></template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<template #toolbar-right>
|
||||
<a-button v-permission="['tenant:user:add']" type="primary" @click="onAdd">
|
||||
<template #icon><icon-plus /></template>
|
||||
<template #default>新增</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<template #status="{ record }">
|
||||
<GiCellStatus :status="record.status" />
|
||||
</template>
|
||||
<template #domain="{ record }">
|
||||
<a v-if="record.domain" style="color: rgb(var(--arcoblue-7))" :text="record.domain" :href="formatDomain(record.domain)" />
|
||||
<span v-else style="color: red" class="text-red-4">未设置</span>
|
||||
</template>
|
||||
<template #expireTime="{ record }">
|
||||
<span v-if="!record.expireTime">
|
||||
<icon-check-circle-fill class="success" />
|
||||
<span>永不过期</span>
|
||||
</span>
|
||||
<span v-else>{{ record.expireTime }}</span>
|
||||
</template>
|
||||
|
||||
<template #isolationLevel="{ record }">
|
||||
<a-tag v-if="record.isolationLevel === 0" color="arcoblue">行级租户</a-tag>
|
||||
<a-tag v-if="record.isolationLevel === 1" color="green">数据源级</a-tag>
|
||||
</template>
|
||||
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-link v-permission="['tenant:user:detail']" title="详情" @click="onDetail(record)">详情</a-link>
|
||||
<a-link v-permission="['tenant:user:update']" title="修改" @click="onUpdate(record)">修改</a-link>
|
||||
<a-link
|
||||
v-permission="['tenant:user:delete']"
|
||||
status="danger"
|
||||
:disabled="record.disabled"
|
||||
:title="record.disabled ? '不可删除' : '删除'"
|
||||
@click="onDelete(record)"
|
||||
>
|
||||
删除
|
||||
</a-link>
|
||||
|
||||
<a-dropdown>
|
||||
<a-button v-if="has.hasPermOr(['tenant:user:editLoginUserInfo'])" type="text" size="mini" title="更多">
|
||||
<template #icon>
|
||||
<icon-more :size="16" />
|
||||
</template>
|
||||
</a-button>
|
||||
<template #content>
|
||||
<a-doption v-permission="['tenant:user:editLoginUserInfo']" title="修改登录信息" @click="editLoginUserInfo(record)">修改登录信息</a-doption>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
</template>
|
||||
</GiTable>
|
||||
|
||||
<TenantAddModal ref="TenantAddModalRef" @save-success="search" />
|
||||
<TenantDetailDrawer ref="TenantDetailDrawerRef" />
|
||||
<TenantUserEditModal ref="TenantUserEditModalRef" @save-success="search" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TenantAddModal from './TenantAddModal.vue'
|
||||
import TenantUserEditModal from './TenantUserEditModal.vue'
|
||||
import TenantDetailDrawer from './TenantDetailDrawer.vue'
|
||||
import { type TenantQuery, type TenantResp, deleteTenant, listTenant } from '@/apis/tenant/tenant'
|
||||
import type { TableInstanceColumns } from '@/components/GiTable/type'
|
||||
import { useTable } from '@/hooks'
|
||||
import { isMobile } from '@/utils'
|
||||
import has from '@/utils/has'
|
||||
import { listAllTenantPackage } from '@/apis/tenant/tenantPackage'
|
||||
|
||||
defineOptions({ name: 'Tenant' })
|
||||
|
||||
const queryForm = reactive<TenantQuery>({
|
||||
name: undefined,
|
||||
packageId: undefined,
|
||||
status: undefined,
|
||||
sort: ['id,desc'],
|
||||
})
|
||||
|
||||
const {
|
||||
tableData: dataList,
|
||||
loading,
|
||||
pagination,
|
||||
search,
|
||||
handleDelete,
|
||||
} = useTable((page) => listTenant({ ...queryForm, ...page }), { immediate: true })
|
||||
const columns: TableInstanceColumns[] = [
|
||||
{ title: '租户编码', dataIndex: 'tenantSn', slotName: 'tenantSn' },
|
||||
{ title: '租户名称', dataIndex: 'name', slotName: 'name' },
|
||||
{ title: '隔离级别', dataIndex: 'isolationLevel', slotName: 'isolationLevel', align: 'center' },
|
||||
{ title: '绑定域名', dataIndex: 'domain', slotName: 'domain' },
|
||||
{ title: '绑定套餐', dataIndex: 'packageName', slotName: 'packageName' },
|
||||
{ title: '租户状态', dataIndex: 'status', slotName: 'status' },
|
||||
{ title: '租户过期时间', dataIndex: 'expireTime', slotName: 'expireTime' },
|
||||
{ title: '创建时间', dataIndex: 'createTime', slotName: 'createTime' },
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
slotName: 'action',
|
||||
width: 190,
|
||||
align: 'center',
|
||||
fixed: !isMobile() ? 'right' : undefined,
|
||||
show: has.hasPermOr(['tenant:user:detail', 'tenant:user:update', 'tenant:user:delete']),
|
||||
},
|
||||
]
|
||||
|
||||
// 重置
|
||||
const reset = () => {
|
||||
queryForm.name = undefined
|
||||
queryForm.packageId = undefined
|
||||
queryForm.status = undefined
|
||||
search()
|
||||
}
|
||||
|
||||
// 删除
|
||||
const onDelete = (record: TenantResp) => {
|
||||
return handleDelete(() => deleteTenant(record.id), {
|
||||
content: `是否确定删除该条数据？`,
|
||||
showModal: true,
|
||||
})
|
||||
}
|
||||
|
||||
const TenantAddModalRef = ref<InstanceType<typeof TenantAddModal>>()
|
||||
const TenantUserEditModalRef = ref<InstanceType<typeof TenantUserEditModal>>()
|
||||
// 新增
|
||||
const onAdd = () => {
|
||||
TenantAddModalRef.value?.onAdd()
|
||||
}
|
||||
|
||||
// 修改
|
||||
const onUpdate = (record: TenantResp) => {
|
||||
TenantAddModalRef.value?.onUpdate(record.id)
|
||||
}
|
||||
|
||||
// 修改登录信息
|
||||
const editLoginUserInfo = (record: TenantResp) => {
|
||||
TenantUserEditModalRef.value?.open(record.id)
|
||||
}
|
||||
|
||||
const TenantDetailDrawerRef = ref<InstanceType<typeof TenantDetailDrawer>>()
|
||||
// 详情
|
||||
const onDetail = (record: TenantResp) => {
|
||||
TenantDetailDrawerRef.value?.onOpen(record.id)
|
||||
}
|
||||
|
||||
const tenantListOptions = ref([])
|
||||
|
||||
const getListAllTenantPackage = async () => {
|
||||
const data = await listAllTenantPackage()
|
||||
data.data.forEach((item: any) => {
|
||||
tenantListOptions.value.push({ label: item.name, value: item.id })
|
||||
})
|
||||
}
|
||||
|
||||
const formatDomain = (domain: string): string => {
|
||||
if (domain.startsWith('http')) {
|
||||
return domain
|
||||
} else {
|
||||
return `http://${domain}`
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getListAllTenantPackage()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
Reference in New Issue
Block a user