<script setup lang="ts">
|
import { computed, inject, onMounted, reactive, toRefs } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { ScrollContainer } from '@jnpf/ui';
|
|
import { useUserStore } from '@vben/stores';
|
|
import { exitSaas, getSaasInfo } from '#/api/permission/userSetting';
|
import { $t } from '#/locales';
|
|
interface State {
|
tenantInfo: any;
|
}
|
|
const state = reactive<State>({
|
tenantInfo: {},
|
});
|
const { tenantInfo } = toRefs(state);
|
const { createMessage, createConfirm } = useMessage();
|
const userStore = useUserStore();
|
const emitter: any = inject('emitter');
|
|
const getUserInfo: any = computed(() => userStore.getUserInfo || {});
|
|
function initData() {
|
getSaasInfo().then((res) => {
|
state.tenantInfo = res.data || {};
|
});
|
}
|
function handleExitTenant(tenantId, account) {
|
createConfirm({
|
iconType: 'warning',
|
title: $t('common.tipTitle'),
|
content: `确定退出该企业?`,
|
onOk: () => {
|
exitSaas(tenantId, account).then((res) => {
|
createMessage.success(res.msg);
|
initData();
|
emitter.emit('updateSassList');
|
});
|
},
|
});
|
}
|
|
onMounted(() => {
|
initData();
|
});
|
</script>
|
<template>
|
<ScrollContainer>
|
<jnpf-group-title content="企业信息" class="mb-[20px]" />
|
<a-form :colon="false" :model="tenantInfo" :label-col="{ style: { width: '100px' } }" class="tenant-v px-[10px]">
|
<a-row>
|
<a-col :span="24">
|
<div class="tenant-cap">基础信息</div>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="租户号">
|
<p>{{ tenantInfo.enCode }}</p>
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="企业名称">
|
<p>{{ tenantInfo.companyName }}</p>
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="联系人">
|
<p>{{ tenantInfo.userName }}</p>
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="联系电话">
|
<p>{{ tenantInfo.mobile }}</p>
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="有效期">
|
<p>{{ tenantInfo.validTime }}</p>
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="状态">
|
<p>{{ tenantInfo.enabledMark ? '启用' : '禁用' }}</p>
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="企业简介">
|
<p>{{ tenantInfo.description }}</p>
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<div class="mb-[10px] text-base font-semibold">应用信息</div>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="App ID">
|
<p>{{ tenantInfo.appId }}</p>
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="应用成员数量">
|
<p>{{ tenantInfo.memberNum || '不限制' }}</p>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
<template v-if="getUserInfo?.isSaas">
|
<div class="tenant-cap">加入的企业<span>您已加入以下企业</span></div>
|
<div class="px-[10px]">
|
<a-row :gutter="20">
|
<a-col :span="6" v-for="(item, index) in tenantInfo.tenantList" :key="index">
|
<div class="tenant-card">
|
<div class="tenant-card-text">
|
<div>{{ item.companyName }}</div>
|
<div class="tenant-card-desc">{{ item.account }}</div>
|
</div>
|
<span class="tenant-card-btn" v-if="!item.currentTenant" @click="handleExitTenant(item.tenantId, item.account)">退出</span>
|
</div>
|
</a-col>
|
</a-row>
|
</div>
|
</template>
|
</a-form>
|
</ScrollContainer>
|
</template>
|
<style lang="scss" scoped>
|
.tenant-v {
|
.tenant-cap {
|
margin-bottom: 15px;
|
font-size: 16px;
|
font-weight: 600;
|
|
&.tenant-cap-sub {
|
font-size: 14px;
|
}
|
|
span {
|
margin-left: 20px;
|
font-size: 12px;
|
font-weight: 500;
|
color: var(--text-color-label);
|
}
|
}
|
|
.tenant-card {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 16px;
|
margin-bottom: 20px;
|
border: 1px solid var(--border-color-base);
|
border-radius: var(--radius);
|
|
.tenant-card-text {
|
flex: 1;
|
min-width: 0;
|
|
div {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
font-size: 16px;
|
font-weight: 500;
|
line-height: 24px;
|
white-space: nowrap;
|
|
&.tenant-card-desc {
|
font-size: 12px;
|
font-weight: 400;
|
line-height: 20px;
|
color: var(--text-color-label);
|
}
|
}
|
}
|
|
.tenant-card-btn {
|
flex-shrink: 0;
|
margin-left: 10px;
|
color: var(--error-color);
|
cursor: pointer;
|
}
|
}
|
}
|
</style>
|
