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

<template>
  <div class="drill-activity-container">
    <div class="drill-container__title">
      <div class="drill-container--line"></div>
      <span>演练活动</span>
    </div>
    <div class="drill-container__content">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="drill-container__content--item">
            <span class="label">演练规模：</span>
            <span class="value">{{ getDrillScope(drillPlanItemDetail.drillScope) }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="drill-container__content--item">
            <span class="label">演练内容：</span>
            <span class="value">{{ drillPlanItemDetail.drillContent }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="drill-container__content--item">
            <span class="label">计划完成时间：</span>
            <span class="value">{{ drillPlanItemDetail.dueCompleteTime }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="drill-container__content--item">
            <span class="label">责任部门：</span>
            <template
              v-for="(dept, index) in safatyJsonParse(drillPlanItemDetail.responsibleDeptNameList)"
              :key="index"
            >
              <span class="value">
                {{ dept }}
                <span v-if="index !== safatyJsonParse(drillPlanItemDetail.responsibleDeptNameList).length - 1">、</span>
              </span>
            </template>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="drill-container__content--item" v-if="drillPlanItemDetail.coordinateDeptNameList">
            <span class="label">配合部门：</span>
            <template v-for="(dept, index) in safatyJsonParse(drillPlanItemDetail.coordinateDeptNameList)" :key="index">
              <span class="value">
                {{ dept }}
                <span v-if="index !== safatyJsonParse(drillPlanItemDetail.coordinateDeptNameList).length - 1">、</span>
              </span>
            </template>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="drill-container__content--item">
            <span class="label">关联应急预案：</span>
            <span class="value font-primary">应急预案还没做</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col>
          <div class="drill-container__content--item">
            <span class="label">审批流程：</span>
            <span class="value">{{ getApprovalName(drillPlanItemDetail.approvalTemplateId) }}</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { useEmergencyDrillHook } from '../hook';
  import { DrillPlanItemDetail } from '../types';
  import { ApprovalInstanceType } from '@/views/system/approval/types';
  import { getAllApproval } from '@/api/approval/approval';

  const approvalList = ref<ApprovalInstanceType[]>([]);
  const { getDrillScopeDict, getDrillScope } = useEmergencyDrillHook();
  const safatyJsonParse = (str: string) => {
    return str.slice(1, -1).split(',');
  };
  const getApprovalList = async () => {
    approvalList.value = await getAllApproval();
  };
  const getApprovalName = (id: number) => {
    return approvalList.value.find((item) => item.id === id)?.templateName;
  };
  defineProps<{
    drillPlanItemDetail: DrillPlanItemDetail;
  }>();
  onMounted(() => {
    getDrillScopeDict();
    getApprovalList();
  });
</script>

<style lang="scss" scoped>
  @use '../style/common.scss' as *;
</style>