sl-sfy-safety/src/views/production-safety/productionSafetySystem/safetySystemConstructionWorkPlanManagement/safetySystemConstructionWorkPlanManagementItem.vue

<template>
  <div class="safety-platform-container">
    <header class="safety-platform-container__header">
      <BreadcrumbBack />
      <span class="breadcrumb-title">{{ headerTitle }}</span>
    </header>
    <!-- 审核模式 -->
    <SafetySystemConstructionWorkPlanManagementReview v-if="isReviewMode" />
    <SafetySystemConstructionWorkPlanManagementDetail v-else />
  </div>
</template>

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

  const route = useRoute();
  const operate = route.query.operate as string;
  const operate1 = computed(() => (operate ? operate : 'work-plan-create')); // 默认操作为新增
  const isReviewMode = computed(() => operate1.value === 'work-plan-review');

  const headerTitle = computed(() => {
    switch (operate) {
      case 'work-plan-create':
        return '新增年度计划';
      case 'work-plan-edit':
        return '编辑年度计划';
      case 'work-plan-view':
        return '查看年度计划';
      case 'view-work-content-of-sender':
        return '查看年度计划';
      case 'work-plan-review':
        return '审核年度计划';
      default:
        return '未知操作';
    }
  });
</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>