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="'template'"
        :main-table="templateDetail"
        :opinion-data="{} as ContentItem"
        :result-data="{} as ContentItem"
        height="calc(70vh - 25px)"
      />
    </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';
  import { getTaskTemplateDetail } from '@/api/disaster-precaution';
  import type { SpanTableData } from '@/views/disaster/disaster-precaution/src/type';
  import type { ContentItem } from '@/types/disaster-precaution';

  const route = useRoute();
  const router = useRouter();
  const id = Number(route.params.id);
  const name = computed(() => {
    return TASK_TEMPLATE_LIST.find((item) => item.id === Number(id))?.name;
  });
  const templateDetail = ref<SpanTableData[]>([]);
  onMounted(async () => {
    const res = await getTaskTemplateDetail(id);
    templateDetail.value = res;
  });
</script>

<style lang="scss" scoped>
  @use '../style/disaster.scss' as *;
  .disaster-precaution-container__header {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  .disaster-precaution-container__main {
    width: calc(100vw - 300px);
  }
</style>