225 lines
8.5 KiB
Vue
225 lines
8.5 KiB
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"
|
||
>{{ safetyInspectionDetail?.projectName }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label-align="center" label="巡检标题" :span="2" label-class-name="white">
|
||
{{ safetyInspectionDetail?.inspectionHeadline }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label-align="center" label="整改人" class-name="zebra">
|
||
{{ safetyInspectionDetail?.correctorName }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label-align="center" label="整改日期" class-name="zebra">
|
||
{{ dayjs(safetyInspectionDetail?.rectificationTime).format('YYYY 年 MM 月 DD 日') }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label-align="center" label="巡检类型" label-class-name="white">
|
||
<dict-tag :options="quality_inspection_check_type" :value="safetyInspectionDetail?.inspectionType" />
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label-align="center" label="填报人" label-class-name="white"
|
||
>{{ safetyInspectionDetail?.creatorName }}
|
||
</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?.replyPeriodDate }}
|
||
</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?.inspectionResult }}
|
||
</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?.inspectionStatus)" finish-status="finish">
|
||
<el-step v-for="item in quality_inspection_status_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="整改措施及完成情况" :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?.verificationResult }}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- </el-card> -->
|
||
<div class="dialog-footer">
|
||
<div class="btn-item">
|
||
<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 lang="ts" setup>
|
||
import { getQualityInspection } from '@/api/quality/qualityInspection';
|
||
import { QualityInspectionVO } from '@/api/quality/qualityInspection/types';
|
||
import { listByIds } from '@/api/system/oss';
|
||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||
import { dayjs } from 'element-plus';
|
||
const { quality_inspection_check_type, quality_inspection_status_type } = toRefs<any>(
|
||
proxy?.useDict('quality_inspection_check_type', 'quality_inspection_status_type')
|
||
);
|
||
interface Props {
|
||
qualityInspectionDetailId?: string | number;
|
||
}
|
||
|
||
const props = defineProps<Props>();
|
||
const safetyInspectionDetail = ref<QualityInspectionVO>();
|
||
const checkFileList = ref<any[]>();
|
||
const rectificationFileList = ref<any[]>();
|
||
|
||
//检查状态图片
|
||
const inspectionType = computed(() => {
|
||
let imgName = 'successLogo';
|
||
if (safetyInspectionDetail.value?.inspectionStatus == '2') imgName = 'rectification';
|
||
if (safetyInspectionDetail.value?.inspectionStatus == '1') imgName = 'successVerification';
|
||
if (safetyInspectionDetail.value?.inspectionStatus == '2') imgName = 'danggerVerification';
|
||
return imgName;
|
||
});
|
||
|
||
//获取详情
|
||
const get = async () => {
|
||
const res = await getQualityInspection(props.qualityInspectionDetailId);
|
||
if (res.data && res.code === 200) {
|
||
safetyInspectionDetail.value = res.data;
|
||
|
||
if (res.data.rectificationFileList) {
|
||
const checkFileRes = await listByIds(res.data.inspectionFile.split(','));
|
||
checkFileList.value = checkFileRes.data;
|
||
}
|
||
if (res.data.rectificationFile) {
|
||
const rectificationFileRes = await listByIds(res.data.rectificationFile.split(','));
|
||
rectificationFileList.value = rectificationFileRes.data;
|
||
}
|
||
}
|
||
};
|
||
|
||
onMounted(() => {
|
||
// get();
|
||
});
|
||
|
||
watch(
|
||
() => props.qualityInspectionDetailId,
|
||
(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>
|