sl-sfy-safety/src/views/production-safety/safetyAssessment/evaluationDepartment/EvaluationDepartmentItem.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" />
  </div>
</template>

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

  const route = useRoute();
  const operate = computed(() => route.query.operate as string);
  const id = computed(() => (route.query.id ? Number(route.query.id) : undefined));

  const headerTitle = computed(() => {
    if (operate.value === 'evaluationDepartment-feedback') {
      return '反馈';
    }
    if (operate.value === 'evaluationDepartment-advanced-person') {
      return '先进个人信息';
    }
    return '安全考核管理(部门)详情';
  });

  const dynamicComponent = computed(() => {
    if (operate.value === 'evaluationDepartment-feedback') {
      return defineAsyncComponent(() => import('./components/EvaluationDepartmentFeedback.vue'));
    }
    if (operate.value === 'evaluationDepartment-advanced-person') {
      return defineAsyncComponent(() => import('./components/EvaluationDepartmentAdvancedPerson.vue'));
    }
    return null;
  });
</script>

<style scoped lang="scss">
  @use '@/styles/page-details-layout.scss' as *;
  @use '@/styles/page-main-layout.scss' as *;

  .safety-platform-container__header {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
</style>