sl-sfy-safety/src/views/traffic/regulation/RegulationItem.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" ref="dynamicComponentRef" @record-submitted="handleRecordSubmitted" />
  </div>
</template>

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

  const route = useRoute();
  const operate = route.query.operate;
  const id = Number(route.query.id);
  const headerTitle = computed(() => {
    switch (operate) {
      case 'regulation-create':
        return `创建管理规定`;
      case 'regulation-edit':
        return `编辑管理规定`;
      case 'notice-create':
        return `创建通知`;
      case 'notice-edit':
        return `编辑通知`;
      case 'notice-view':
        return `通知详情`;
      default:
        return '未知操作';
    }
  });

  const dynamicComponent = computed(() => {
    switch (operate) {
      case 'regulation-create':
        return defineAsyncComponent(() => import('./components/RegulationCreate.vue'));
      case 'regulation-edit':
        return defineAsyncComponent(() => import('./components/RegulationEdit.vue'));
      case 'notice-create':
        return defineAsyncComponent(() => import('./components/NoticeView.vue'));
      // return defineAsyncComponent(() => import('./components/NoticeCreate.vue'));
      case 'notice-edit':
        return defineAsyncComponent(() => import('./components/NoticeEdit.vue'));
      case 'notice-view':
        return defineAsyncComponent(() => import('./components/NoticeView.vue'));
      default:
        return '';
    }
  });

  const dynamicComponentRef = ref();

  function handleRecordSubmitted() {}
</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>