td_official/src/views/safety/safetyInspection/component/SafetyInspectionDetailDialog.vue

<template>
  <!-- <el-card v-loading="loading" body-class="printMe"> -->
  <div class="w75% m-a">
    <div id="printMe" class="pos-relative">
      <div class="resultIcon"><img :src="'../../../../../src/assets/icons/svg/' + inspectionType + '.png'" alt="" /></div>
      <h2 style="text-align: center; margin-top: 5px; font-weight: bold">安全生产监督检查通知书</h2>
      <el-row>
        <el-col :span="12" style="text-align: left">填报人：{{ safetyInspectionDetail?.creatorName }}</el-col>
        <el-col :span="12" style="text-align: right">填报时间：{{ safetyInspectionDetail?.createTime }}</el-col>
      </el-row>
      <el-descriptions :column="2" border style="margin-top: 8px" label-width="160px" size="large">
        <el-descriptions-item label-align="center" label="检查项目" :span="2" class-name="zebra">{{ currentProject?.name }} </el-descriptions-item>
        <el-descriptions-item label-align="center" label="检查类型" label-class-name="white">
          <dict-tag :options="safety_inspection_check_type" :value="safetyInspectionDetail?.checkType" />
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="违章类型" label-class-name="white">
          <dict-tag :options="safety_inspection_violation_type" :value="safetyInspectionDetail?.violationType" />
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="检查时间" class-name="zebra">{{ safetyInspectionDetail?.checkTime }} </el-descriptions-item>
        <el-descriptions-item label-align="center" label="检查人" class-name="zebra">{{ safetyInspectionDetail?.creatorName }} </el-descriptions-item>
        <el-descriptions-item label-align="center" label="整改人" label-class-name="white"
          >{{ safetyInspectionDetail?.correctorName }}
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="要求整改期限" label-class-name="white">
          {{ dayjs(safetyInspectionDetail?.rectificationDeadline).format('YYYY 年 MM 月 DD 日') }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions border direction="vertical" size="large">
        <el-descriptions-item label-align="center" label="巡检结果" class-name="none"></el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="2" border label-width="160px" size="large">
        <el-descriptions-item label-align="center" label="内容" :span="2" label-class-name="white"
          >{{ safetyInspectionDetail?.hiddenDanger }}
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="检查附件" :span="2" label-class-name="white">
          <el-space wrap>
            <div v-for="item in checkFileList" :key="item.ossId">
              <span v-if="['.png', '.jpg', '.jpeg'].includes(item.fileSuffix)">
                <image-preview :src="item.url" width="200px" />
              </span>
              <span v-else>
                <el-link :href="`${item.url}`" type="primary" :underline="false" target="_blank">
                  <span> {{ item.originalName }} </span>
                </el-link>
              </span>
            </div>
          </el-space>
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="检查状态" :span="2" label-class-name="white">
          <el-steps style="max-width: 200px" :active="Number(safetyInspectionDetail?.status)" finish-status="finish">
            <el-step v-for="item in safety_inspection_type" :key="item.value" :title="item.label" />
          </el-steps>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions border direction="vertical" size="large">
        <el-descriptions-item label-align="center" label="整改情况" class-name="none"></el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="2" border label-width="160px" size="large">
        <el-descriptions-item label-align="center" label="班组" label-class-name="white"
          >{{ safetyInspectionDetail?.teamName }}
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="整改日期" label-class-name="white"
          >{{ safetyInspectionDetail?.rectificationTime }}
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="整改措施及完成情况" :span="2" label-class-name="white">
          {{ safetyInspectionDetail?.measure }}
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="整改附件" :span="2" label-class-name="white">
          <el-space wrap>
            <div v-for="item in rectificationFileList" :key="item.ossId">
              <span v-if="['.png', '.jpg', '.jpeg'].includes(item.fileSuffix)">
                <image-preview :src="item.url" width="200px" />
              </span>
              <span v-else>
                <el-link :href="`${item.url}`" :underline="false" target="_blank">
                  <span> {{ item.originalName }} </span>
                </el-link>
              </span>
            </div>
          </el-space>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions border direction="vertical" size="large">
        <el-descriptions-item label-align="center" label="复查结果" class-name="none"></el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="2" border label-width="160px" size="large">
        <el-descriptions-item label-align="center" label="复查人" label-class-name="white"
          >{{ safetyInspectionDetail?.creatorName }}
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="复查日期" label-class-name="white"
          >{{ safetyInspectionDetail?.reviewTime }}
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="复查情况" :span="2" label-class-name="white"
          >{{ safetyInspectionDetail?.review }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>

  <!-- </el-card> -->
  <div class="dialog-footer">
    <div class="btn-item" @click="handleExport">
      <img src="../../../../assets/icons/svg/derived.png" />
      <span>导出</span>
    </div>
    <div class="btn-item" v-print="'#printMe'">
      <img src="../../../../assets/icons/svg/print.png" />
      <span>打印</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserStoreHook } from '@/store/modules/user';
import { SafetyInspectionVO } from '@/api/safety/safetyInspection/types';
import { getSafetyInspection } from '@/api/safety/safetyInspection';
import { downLoadOss, listByIds } from '@/api/system/oss';
import { OssVO } from '@/api/system/oss/types';
import dayjs from 'dayjs';

interface Props {
  safetyInspectionId?: string | number;
}

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { safety_inspection_violation_type, safety_inspection_type, safety_inspection_check_type } = toRefs<any>(
  proxy?.useDict('safety_inspection_violation_type', 'review_type', 'reply_type', 'safety_inspection_type', 'safety_inspection_check_type')
);
// 获取用户 store
const userStore = useUserStoreHook();
// 从 store 中获取项目列表和当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const props = defineProps<Props>();
const loading = ref<boolean>(false);
const safetyInspectionDetail = ref<SafetyInspectionVO>();
const checkFileList = ref<OssVO[]>();
const rectificationFileList = ref<OssVO[]>();
//检查状态图片
const inspectionType = computed(() => {
  let imgName = 'successLogo';
  if (safetyInspectionDetail.value?.status == '2') imgName = 'rectification';
  if (safetyInspectionDetail.value?.reviewType == '1') imgName = 'successful';
  if (safetyInspectionDetail.value?.reviewType == '2') imgName = 'failure';
  console.log('🚀 ~ inspectionType ~ imgName:', imgName);

  return imgName;
});

const get = async () => {
  loading.value = true;
  const res = await getSafetyInspection(props.safetyInspectionId);
  if (res.data && res.code === 200) {
    safetyInspectionDetail.value = res.data;
    if (res.data.checkFile) {
      const checkFileRes = await listByIds(res.data.checkFile.split(','));
      checkFileList.value = checkFileRes.data;
    }
    if (res.data.rectificationFile) {
      const rectificationFileRes = await listByIds(res.data.rectificationFile.split(','));
      rectificationFileList.value = rectificationFileRes.data;
    }
  }
  loading.value = false;
};

const handleExport = async () => {
  await downLoadOss({ id: safetyInspectionDetail.value.id }, '/safety/safetyInspection/export/word', '安全生产监督检查通知书.zip');
};

onMounted(() => {
  console.log('🚀 ~ onMounted ~ props.safetyInspectionId:', props.safetyInspectionId);
  get();
});

watch(
  () => props.safetyInspectionId,
  (newId, oldId) => {
    if (newId !== oldId) {
      checkFileList.value = undefined;
      rectificationFileList.value = undefined;
      get();
    }
  }
);
</script>

<style scoped lang="scss">
#printMe {
  padding: 15px 20px 20px 20px !important;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
}

:deep(.white) {
  background: #fff !important;
}

:deep(.none) {
  display: none !important;
}

:deep(.zebra) {
  background: #f5f7fa;
}

@page {
  size: auto;
  margin: 0mm;
}

.dialog-footer {
  height: 200px;
  display: flex;

  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 14%;
  right: 6%;
  background: #fff;
  box-shadow: 0 0 10px #ddd;
  text-align: center;
  padding: 20px 10px;

  .btn-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
  }
}

.resultIcon {
  position: absolute;
  top: 100px;
  right: 50px;
  z-index: 10;
  width: 105px;
  height: 105px;
  img {
    width: 105px;
  }
}
</style>