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

<template>
  <main class="safety-platform-container__main">
    <div v-if="recordData" class="drill-plan-record">
      <div class="item">
        <span class="label">演练内容：</span>
        <span class="text">{{ recordData.drillContent }}</span>
      </div>
      <div class="item">
        <span class="label">演练时间：</span>
        <span class="text">{{ recordData.drillTime }}</span>
      </div>
      <div class="item">
        <span class="label">演练地点：</span>
        <span class="text">{{ recordData.drillLocation }}</span>
      </div>
      <div class="item">
        <span class="label">参与人员描述：</span>
        <span class="text">{{ recordData.participants }}</span>
      </div>
      <div class="item">
        <span class="label">演练描述：</span>
        <span class="text">{{ recordData.drillDescription }}</span>
      </div>
      <div class="item">
        <span class="label">演练照片：</span>
        <ShowImages style="min-height: 100px; flex: 1" :image-list="getImageUrls(recordData.drillImage)" />
      </div>
      <div class="item">
        <span class="label">演练效果评估：</span>
        <span class="text">{{ recordData.drillEffectAssess }}</span>
      </div>
      <div class="item">
        <span class="label">演练问题分析：</span>
        <span class="text">{{ recordData.drillProblemAnalyse }}</span>
      </div>
      <div class="item">
        <span class="label">演练改进措施：</span>
        <span class="text">{{ recordData.drillImproveMethod }}</span>
      </div>
    </div>
    <!-- <div v-else class="empty">
      <img :src="EmptyImg" alt="empty" />
      <span>暂无数据</span>
    </div> -->
  </main>
  <footer
    class="safety-platform-container__footer"
    v-if="status === CONFIRM_STATUS_TYPE.WAIT_CONFIRM && recordData?.approvalStatus === 0"
  >
    <el-button type="primary" @click="drillSignApprovalDialogRef?.openDialog">审批</el-button>
  </footer>
  <DrillSignApprovalDialog
    ref="drillSignApprovalDialogRef"
    :id="id"
    :status="status"
    @success="handleApprovalSuccess"
  />
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { CONFIRM_STATUS_TYPE } from '../constants';
  import { DrillPlanRecord } from '../types';
  import { queryEmergencyDrillRecordInEdit } from '@/api/emergency-drill/emergency-drill';
  import ShowImages from './ShowImages.vue';
  // import EmptyImg from 'assets/images/empty@1X.png';
  import DrillSignApprovalDialog from './DrillSignApprovalDialog.vue';

  const props = defineProps<{
    id: number;
    status: number;
  }>();

  const recordData = ref<DrillPlanRecord>();
  const drillSignApprovalDialogRef = ref();

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

  function handleApprovalSuccess() {
    drillSignApprovalDialogRef.value.closeDialog();
    getData();
  }

  onMounted(() => {
    getData();
  });

  function getImageUrls(imgs: string) {
    if (!imgs) return [];
    return JSON.parse(imgs);
  }
</script>

<style lang="scss" scoped>
  @use '@/styles/page-details-layout.scss' as *;
  .data {
    display: flex;
  }
  .item {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 20px 10px;
  }
  .label {
    width: 150px;
    text-align: end;
  }
  .text {
    flex: 1;
    white-space: pre-wrap;
    /* word-break: break-all; */
  }
  .empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: calc(70vh - 500px);
  }
</style>