sl-sfy-safety/src/views/emergency/emergency-drill/components/DrillPlanViewRecords.vue

<template>
  <div v-if="recordData" class="drill-plan-record">
    <div v-for="item in DRILL_VIEW_RECORD" :key="item.value" class="item">
      <span class="label">{{ item.label }}</span>
      <span class="text"> {{ recordData![item.value] }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { useRoute } from 'vue-router';
  import { DrillPlanRecord } from '../types';
  import { DRILL_VIEW_RECORD } from '../constants';
  import { queryEmergencyDrillRecord } from '@/api/emergency-drill/emergency-drill';

  const route = useRoute();
  const id = route.query.id;
  const recordData = ref<DrillPlanRecord>();

  async function getData() {
    try {
      recordData.value = await queryEmergencyDrillRecord(id);
    } catch (e) {
      console.log(e);
    }
  }

  onMounted(() => {
    getData();
  });
</script>

<style scoped>
  .data {
    display: flex;
  }
  .item {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 20px 10px;
  }
  .label {
    width: 150px;
    text-align: end;
  }
  .text {
    flex: 1;
    word-break: break-all;
  }
</style>