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

<template>
  <div v-if="drillData" class="drill-plan-detail">
    <div>
      <div class="name">演练活动</div>
      <div class="data">
        <div v-for="item in DRILL_VIEW_CONTENT" :key="item.value" class="item">
          <span class="label">{{ item.label }}</span>
          <a v-if="item.link" class="link" :href="item.link">{{ drillData![item.value] }}</a>
          <span v-else class="value"> {{ drillData![item.value] }}</span>
        </div>
      </div>
    </div>
    <div>
      <div class="name">演练实施</div>
      <div class="data">
        <div v-for="item in DRILL_VIEW_EXECUTE" :key="item.value" class="item">
          <span class="label">{{ item.label }}</span>
          <el-popover v-if="item.popover" placement="bottom" trigger="hover" width="224">
            <template #reference>
              <span style="cursor: pointer">查看签到码</span>
            </template>
            <QrCode :value="drillData![item.popover]" :width="200" />
          </el-popover>
          <a v-else-if="item.link" class="link" :href="drillData![item.link]">{{ drillData![item.value] }}</a>
          <span v-else class="value"> {{ drillData![item.value] }}</span>
        </div>
      </div>
    </div>
    <div>
      <div class="name">演练参与部门</div>
      <el-button style="margin-top: 20px" type="primary" :icon="Download" @click=""> 下载签到名单 </el-button>
      <BasicTable style="margin-top: 20px" :tableConfig="tableConfig" :tableData="drillData.planDetailList!">
        <template #drillScriptStatus="scope">
          <span>{{ scope.row.drillScriptStatus === 1 ? '未会签' : '已会签' }}</span>
        </template>
      </BasicTable>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { ElPopover } from 'element-plus';
  import BasicTable from '@/components/BasicTable.vue';
  import { Download } from '@element-plus/icons-vue';
  import { useRoute } from 'vue-router';
  import { DrillPlanItemDetail } from '../types';
  import { DRILL_VIEW_CONTENT, DRILL_VIEW_EXECUTE } from '../constants';
  import useTableConfig from '@/hooks/useTableConfigHook';
  import { getAllApproval } from '@/api/approval/approval';
  import { queryEmergencyDrillPlanDetail, queryEmergencyPlanDetail } from '@/api/emergency-drill/emergency-drill';
  import { DRILL_PLAN_ACTIVITIES_TABLE_OPTIONS, DRILL_PLAN_ACTIVITIES_TABLE_COLUMNS } from '../configs/plan/table';
  import { useEmergencyDrillHook } from '../hook';
  import QrCode from '@/components/Qrcode/src/Qrcode.vue';

  const route = useRoute();
  const id = route.query.id;
  const drillData = ref<DrillPlanItemDetail>();

  const { drillScopeDice, getDrillScopeDict } = useEmergencyDrillHook();

  async function getData() {
    try {
      tableConfig.loading = true;
      drillData.value = await queryEmergencyDrillPlanDetail(id);

      // 解析详情数据
      drillData.value.drillScope = drillScopeDice.value.find(
        (x) => x.itemCode === drillData.value!.drillScope,
      )!.itemValue;

      drillData.value.responsibleDeptNameList = drillData.value.responsibleDeptNameList!.replace(/^\[|\]$/g, '');
      drillData.value.coordinateDeptNameList = drillData.value.coordinateDeptNameList
        ? drillData.value.responsibleDeptNameList!.replace(/^\[|\]$/g, '')
        : undefined;

      if (drillData.value.emergencyPlanId) {
        const emergencyPlan = await queryEmergencyPlanDetail(drillData.value.emergencyPlanId);
        drillData.value.emergencyPlanFile = emergencyPlan.planName + emergencyPlan.appendix;
      }

      const allApprovals = await getAllApproval();
      drillData.value.approvalTemplateName = allApprovals.find(
        (x) => x.id === drillData.value!.approvalTemplateId,
      )?.templateName;

      if (drillData.value.drillScript && drillData.value.drillScript.length > 0) {
        const scriptFile = unformatAttachment(drillData.value.drillScript);
        // console.log(scriptFile);
        drillData.value.drillScriptName = scriptFile.fileName;
        drillData.value.drillScriptUrl = scriptFile.fileUrl;
      }

      drillData.value.qrCode = 'https://cn.bing.com/?id=' + id + '&type=test';

      tableConfig.loading = false;
    } catch (e) {
      console.log(e);
    }
  }

  const { tableConfig } = useTableConfig(
    DRILL_PLAN_ACTIVITIES_TABLE_COLUMNS,
    DRILL_PLAN_ACTIVITIES_TABLE_OPTIONS,
    false,
  );

  onMounted(async () => {
    await getDrillScopeDict();
    getData();
  });

  function unformatAttachment(file?: string) {
    if (!file) return undefined;
    const fileData = JSON.parse(file);
    return fileData;
  }
</script>

<style scoped>
  .name {
    margin-top: 10px;
    padding-left: 12px;
    border-left: 3px #1890ff solid;
  }
  .data {
    display: grid;
    grid-template-columns: repeat(auto-fill, 33%);
  }
  .item {
    padding: 25px 16px;
  }
</style>