sl-sfy-safety/src/views/emergency/emergency-drill/PageDrillSignItem.vue

<template>
  <div class="safety-platform-container">
    <header class="safety-platform-container__header">
      <BreadcrumbBack />
      <span class="breadcrumb-title">{{ headerTitle }}</span>
    </header>
    <component :is="dynamicComponent" :id="id" :status="status" />
  </div>
</template>

<script setup lang="ts">
  import { useRoute } from 'vue-router';
  import { computed, defineAsyncComponent } from 'vue';
  import { DRILL_SIGN_TYPE } from './constants';

  const route = useRoute();
  const id = route.params.id;
  const type = Number(route.query.type);
  const status = Number(route.query.status);
  const headerTitle = computed(() => {
    let title;
    if (type === DRILL_SIGN_TYPE.SCRIPT) {
      title = '脚本';
    } else if (type === DRILL_SIGN_TYPE.RECORD) {
      title = '评估报告';
    } else {
      title = '';
    }
    return `演练${title}确认`;
  });
  const dynamicComponent = computed(() => {
    if (type === DRILL_SIGN_TYPE.SCRIPT) {
      return defineAsyncComponent(() => import('./components/DrillSignScriptItem.vue'));
    } else if (type === DRILL_SIGN_TYPE.RECORD) {
      return defineAsyncComponent(() => import('./components/DrillSignRecordItem.vue'));
    } else {
      return '';
    }
  });
</script>

<style lang="scss" scoped>
  @use '@/styles/page-details-layout.scss' as *;
  .safety-platform-container__header {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
</style>