hvac-web/src/views/log-center/LogCenter.vue

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';

import { useRefreshView } from '@/hooks/refresh-view';
import { useUserInfoStore } from '@/stores/user-info';
import { t } from '@/i18n';
import { ViewPermission } from '@/utils/permission-type';

import OperateLog from './OperateLog.vue';
import SmartCtrlLog from './SmartCtrlLog.vue';

import type { TabComponent } from '@/types';

const { booleanPermission } = useUserInfoStore();
const { renderView, refreshView } = useRefreshView();
const activeKey = ref('');

const logTabs = computed<TabComponent[]>(() => {
  const smartCtrlLog = booleanPermission(ViewPermission.智控日志);
  const operateLog = booleanPermission(ViewPermission.操作日志);
  const result: TabComponent[] = [];
  const data = [
    {
      key: 'smartCtrlLog',
      name: t('logCenter.smartControlLogs'),
      component: SmartCtrlLog,
    },
    {
      key: 'operateLog',
      name: t('logCenter.operationLogs'),
      component: OperateLog,
    },
  ];

  if (smartCtrlLog) {
    result.push(data.find((item) => item.key === 'smartCtrlLog') as TabComponent);
  }

  if (operateLog) {
    result.push(data.find((item) => item.key === 'operateLog') as TabComponent);
  }

  return result;
});

onMounted(() => {
  activeKey.value = logTabs.value[0].key;
  refreshView();
});
</script>

<template>
  <ATabs
    class="button-tabs-compact"
    v-model:active-key="activeKey"
    type="card"
    @tab-click="refreshView"
    v-if="logTabs.length"
  >
    <ATabPane v-for="item in logTabs" :key="item.key" :tab="item.name">
      <component v-if="activeKey === item.key && renderView" :is="item.component" />
    </ATabPane>
  </ATabs>
</template>

<style lang="scss" scoped>
:deep(.ant-tabs-content-holder) {
  .ant-card {
    border-radius: 16px;
    box-shadow: none;
  }
}
</style>