index.vue 2.84 KB
<template>
  <div class="platform flex">
    <Card class="tab-card" :bordered="false">
      <Tabs v-model:activeKey="activeKey" tab-position="left">
        <Tabs.TabPane
          v-if="
            isWhereAdmin == 'TENANT_ADMIN' ||
            isWhereAdmin == 'SYS_ADMIN' ||
            isWhereAdmin == 'CUSTOMER_USER'
          "
          key="system.platform.enterpriseInfoText"
          :tab="t('system.platform.enterpriseInfoText')"
        />
        <Tabs.TabPane
          v-if="isWhereAdmin !== 'CUSTOMER_USER' && isWhereAdmin !== 'TENANT_ADMIN'"
          key="system.platform.platformInfoText"
          :tab="t('system.platform.platformInfoText')"
        />
        <Tabs.TabPane
          v-if="isWhereAdmin !== 'CUSTOMER_USER' && isWhereAdmin !== 'TENANT_ADMIN'"
          key="system.platform.appInfoText"
          :tab="t('system.platform.appInfoText')"
        />
      </Tabs>
    </Card>

    <div style="width: 100%">
      <Card class="card" :title="t(activeKey)" :bordered="false" :bodyStyle="{ display: 'none' }" />
      <EnterpriseInfo
        v-if="
          (activeKey === 'system.platform.enterpriseInfoText' && isWhereAdmin == 'SYS_ADMIN') ||
          isWhereAdmin == 'TENANT_ADMIN' ||
          isWhereAdmin == 'CUSTOMER_USER'
        "
      />
      <CVIDraw
        v-if="
          activeKey === 'system.platform.platformInfoText' &&
          isWhereAdmin == 'SYS_ADMIN' &&
          isWhereAdmin !== 'CUSTOMER_USER' &&
          isWhereAdmin !== 'TENANT_ADMIN'
        "
      />
      <AppDraw
        v-if="
          activeKey === 'system.platform.appInfoText' &&
          isWhereAdmin == 'SYS_ADMIN' &&
          isWhereAdmin !== 'CUSTOMER_USER' &&
          isWhereAdmin !== 'TENANT_ADMIN'
        "
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { Tabs, Card } from 'ant-design-vue';
  import { ref, computed } from 'vue';
  import EnterpriseInfo from './cpns/EnterpriseInfo.vue';
  import CVIDraw from './cpns/CVIDraw.vue';
  import AppDraw from './cpns/AppDraw.vue';
  import { USER_INFO_KEY } from '/@/enums/cacheEnum';
  import { getAuthCache } from '/@/utils/auth';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();

  const activeKey = ref('system.platform.enterpriseInfoText');
  const userInfo: any = getAuthCache(USER_INFO_KEY);
  const isWhereAdmin: any = computed(() => {
    if (userInfo.roles.includes('TENANT_ADMIN')) {
      return 'TENANT_ADMIN';
    } else if (userInfo.roles.includes('CUSTOMER_USER')) {
      return 'CUSTOMER_USER';
    } else {
      return 'SYS_ADMIN';
    }
  });
</script>

<style lang="less" scoped>
  .title {
    width: 97.4%;
    height: 50px;
    margin: 1rem;
    line-height: 50px;
    font-size: 18px;
    padding-left: 10px;
    background-color: #fff;
  }

  .tab-card {
    margin: 1rem 0 1rem 1rem;
  }

  .card {
    margin: 1rem;
  }
</style>