sl-sfy-safety/src/views/disaster/disaster-precaution/PageTaskTemplateDetail.vue

<template>
  <div class="disaster-precaution-container">
    <header class="disaster-precaution-container__header">
      <img :src="BackIcon" alt="back" class="back-icon" @click="router.back()" />
      <span class="disaster-precaution-container__title">{{ name }}</span>
    </header>
    <main class="disaster-precaution-container__main">
      <TemplateTableMerge :operation-type="operationType" :main-table="data!" height="calc(70vh - 40px)" />
    </main>
  </div>
</template>

<script lang="ts" setup>
  import { ref, computed, onMounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import BackIcon from 'assets/svg/back.svg';
  import { TASK_TEMPLATE_LIST } from './src/constants/template-detail';
  import TemplateTableMerge from './src/components/TemplateTableMerge.vue';

  const route = useRoute();
  const router = useRouter();
  const id = route.params.id;
  const operationType = ref<'view' | 'edit'>('view');
  const name = computed(() => {
    return TASK_TEMPLATE_LIST.find((item) => item.id === Number(id))?.name;
  });
  const data = computed(() => {
    return TASK_TEMPLATE_LIST.find((item) => item.id === Number(id))?.data;
  });
  onMounted(() => {
    operationType.value = route.query.operate as unknown as 'view' | 'edit';
  });
</script>

<style lang="scss" scoped>
  @use '../style/disaster.scss' as *;
  .disaster-precaution-container__header {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 8cpx !important;
  }
</style>