sl-sfy-safety/src/views/disaster/disaster-control/PageLossReport.vue

<template>
  <div class="disaster-precaution-container">
    <header class="disaster-precaution-container__header">
      <span class="disaster-precaution-container__title">灾害损失上报</span>
      <el-tabs v-model="activeName">
        <el-tab-pane v-for="item in LOSS_REPORT_TABS" :key="item.value" :label="item.label" :name="item.value" />
      </el-tabs>
    </header>
    <main class="disaster-precaution-container__main">
      <component :is="dynamicComponent" />
    </main>
  </div>
</template>

<script setup lang="ts">
  import { LOSS_REPORT_TABS } from './src/constant';
  import { computed, ref, defineAsyncComponent, onUnmounted } from 'vue';
  const activeName = ref(sessionStorage.getItem('loss-report-active') || LOSS_REPORT_TABS[0].value);
  const dynamicComponent = computed(() => {
    switch (activeName.value) {
      case LOSS_REPORT_TABS[0].value:
        return defineAsyncComponent(() => import('./src/components/ReportTask.vue'));
      case LOSS_REPORT_TABS[1].value:
        return defineAsyncComponent(() => import('./src/components/LossRecord.vue'));
    }
  });
  onUnmounted(() => {
    sessionStorage.setItem('loss-report-active', activeName.value);
  });
</script>

<style scoped lang="scss">
  @use '../style/disaster.scss' as *;
  .disaster-precaution-container__header {
    padding-bottom: 0 !important;
  }
  :deep(.el-tabs__header) {
    margin: 0;
  }
  :deep(.el-tabs__item) {
    font-size: 14px !important;
  }
</style>