Merge branch 'develop' of https://gitee.com/youlaiorg/vue3-element-admin into develop
This commit is contained in:
Ray.Hao
@@ -23,7 +23,7 @@ type ToolbarTable = "edit" | "view" | "delete";
|
||||
export type IToolsButton = {
|
||||
name: string; // 按钮名称
|
||||
text?: string; // 按钮文本
|
||||
perm?: Array<string> | string; // 权限标识(可以是完整权限字符串如'sys:user:add'或操作权限如'add')
|
||||
perm?: Array<string> | string; // 权限标识(可以是完整权限字符串如'sys:user:create'或操作权限如'create')
|
||||
attrs?: Partial<ButtonProps> & { style?: CSSProperties }; // 按钮属性
|
||||
render?: (row: IObject) => boolean; // 条件渲染
|
||||
};
|
||||
|
||||
152
src/components/TenantSelect/index.vue
Normal file
152
src/components/TenantSelect/index.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<el-dropdown trigger="click" @command="handleTenantSwitch">
|
||||
<div class="tenant-select">
|
||||
<el-icon class="tenant-select__icon"><OfficeBuilding /></el-icon>
|
||||
<span class="tenant-select__name">{{ currentTenantName }}</span>
|
||||
<el-icon class="tenant-select__arrow"><ArrowDown /></el-icon>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
v-for="tenant in tenantList"
|
||||
:key="tenant.id"
|
||||
:command="tenant.id"
|
||||
:class="{ 'is-active': tenant.id === currentTenantId }"
|
||||
>
|
||||
<div class="tenant-item">
|
||||
<span class="tenant-item__name">{{ tenant.name }}</span>
|
||||
<el-icon v-if="tenant.id === currentTenantId" class="tenant-item__check">
|
||||
<Check />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted } from "vue";
|
||||
import { useTenantStoreHook } from "@/store/modules/tenant-store";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { OfficeBuilding, ArrowDown, Check } from "@element-plus/icons-vue";
|
||||
|
||||
const tenantStore = useTenantStoreHook();
|
||||
|
||||
// 当前租户名称
|
||||
const currentTenantName = computed(() => {
|
||||
if (tenantStore.currentTenant?.name) {
|
||||
return tenantStore.currentTenant.name;
|
||||
}
|
||||
// 如果当前租户信息不存在，尝试从租户列表中查找
|
||||
if (tenantStore.currentTenantId) {
|
||||
const tenant = tenantStore.tenantList.find((t) => t.id === tenantStore.currentTenantId);
|
||||
if (tenant) {
|
||||
return tenant.name;
|
||||
}
|
||||
}
|
||||
return "未选择租户";
|
||||
});
|
||||
|
||||
// 当前租户ID
|
||||
const currentTenantId = computed(() => tenantStore.currentTenantId);
|
||||
|
||||
// 租户列表
|
||||
const tenantList = computed(() => tenantStore.tenantList);
|
||||
|
||||
/**
|
||||
* 切换租户
|
||||
*/
|
||||
async function handleTenantSwitch(tenantId: number) {
|
||||
if (tenantId === currentTenantId.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await tenantStore.switchTenant(tenantId);
|
||||
ElMessage.success("切换租户成功");
|
||||
// 刷新页面以重新加载菜单和权限
|
||||
window.location.reload();
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message || "切换租户失败");
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化：获取租户列表
|
||||
onMounted(() => {
|
||||
tenantStore.fetchTenantList().catch((error) => {
|
||||
console.error("获取租户列表失败:", error);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tenant-select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 8px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&__icon {
|
||||
margin-right: 6px;
|
||||
font-size: 18px;
|
||||
color: inherit;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
&__name {
|
||||
max-width: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 14px;
|
||||
color: inherit;
|
||||
white-space: nowrap;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
margin-left: 6px;
|
||||
font-size: 12px;
|
||||
color: inherit;
|
||||
opacity: 0.7;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
|
||||
.tenant-select__icon,
|
||||
.tenant-select__name {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.tenant-select__arrow {
|
||||
color: var(--el-color-primary);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tenant-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
&__name {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__check {
|
||||
margin-left: 8px;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-dropdown-menu__item.is-active) {
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
}
|
||||
</style>
|
||||
187
src/components/TenantSelectDialog/index.vue
Normal file
187
src/components/TenantSelectDialog/index.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
title="选择租户"
|
||||
width="400px"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
:show-close="false"
|
||||
>
|
||||
<div v-if="loading" class="tenant-dialog-loading">
|
||||
<el-icon class="is-loading"><Loading /></el-icon>
|
||||
<span>加载租户列表...</span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="tenantList.length === 0" class="tenant-dialog-empty">
|
||||
<el-empty description="暂无可用租户" />
|
||||
</div>
|
||||
|
||||
<el-radio-group v-else v-model="selectedTenantId" class="tenant-radio-group">
|
||||
<el-radio
|
||||
v-for="tenant in tenantList"
|
||||
:key="tenant.id"
|
||||
:label="tenant.id"
|
||||
class="tenant-radio-item"
|
||||
>
|
||||
<div class="tenant-radio-content">
|
||||
<div class="tenant-radio-content__name">{{ tenant.name }}</div>
|
||||
<div v-if="tenant.code" class="tenant-radio-content__code">{{ tenant.code }}</div>
|
||||
</div>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" :loading="switching" @click="handleConfirm">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from "vue";
|
||||
import { useTenantStoreHook } from "@/store/modules/tenant-store";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { Loading } from "@element-plus/icons-vue";
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
"update:modelValue": [value: boolean];
|
||||
confirm: [];
|
||||
}>();
|
||||
|
||||
const tenantStore = useTenantStoreHook();
|
||||
|
||||
const visible = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => emit("update:modelValue", value),
|
||||
});
|
||||
|
||||
const loading = ref(false);
|
||||
const switching = ref(false);
|
||||
const selectedTenantId = ref<number | null>(null);
|
||||
const tenantList = computed(() => tenantStore.tenantList);
|
||||
|
||||
// 监听对话框打开，加载租户列表
|
||||
watch(visible, (newVal) => {
|
||||
if (newVal) {
|
||||
loadTenantList();
|
||||
// 默认选择当前租户或第一个租户
|
||||
selectedTenantId.value = tenantStore.currentTenantId || tenantList.value[0]?.id || null;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 加载租户列表
|
||||
*/
|
||||
async function loadTenantList() {
|
||||
loading.value = true;
|
||||
try {
|
||||
await tenantStore.fetchTenantList();
|
||||
// 如果列表为空，自动关闭对话框
|
||||
if (tenantList.value.length === 0) {
|
||||
visible.value = false;
|
||||
ElMessage.warning("您暂无可用租户");
|
||||
}
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message || "获取租户列表失败");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 确认选择
|
||||
*/
|
||||
async function handleConfirm() {
|
||||
if (!selectedTenantId.value) {
|
||||
ElMessage.warning("请选择租户");
|
||||
return;
|
||||
}
|
||||
|
||||
switching.value = true;
|
||||
try {
|
||||
await tenantStore.switchTenant(selectedTenantId.value);
|
||||
ElMessage.success("切换租户成功");
|
||||
visible.value = false;
|
||||
emit("confirm");
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message || "切换租户失败");
|
||||
} finally {
|
||||
switching.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消
|
||||
*/
|
||||
function handleCancel() {
|
||||
// 如果用户没有租户，不允许取消
|
||||
if (tenantList.value.length === 0) {
|
||||
return;
|
||||
}
|
||||
visible.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tenant-dialog-loading {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 0;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.tenant-dialog-empty {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.tenant-radio-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tenant-radio-item {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
margin: 0;
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-radio__input.is-checked) {
|
||||
.el-radio__inner {
|
||||
background-color: var(--el-color-primary);
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tenant-radio-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
&__name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
&__code {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user