tcy
26e922d0ea
在安全巡检类型中新增整改单位名称字段，用于记录整改责任单位。同时优化安全巡检详情对话框的显示： 1. 为整改期限添加空值判断 2. 调整部分字段的显示格式 3. 修复班组字段显示错误问题
251 lines
9.9 KiB
Vue
251 lines
9.9 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">{{ 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">
|
||
<span v-if="safetyInspectionDetail?.rectificationDeadline">{{
|
||
dayjs(safetyInspectionDetail?.rectificationDeadline).format('YYYY 年 MM 月 DD 日') }}</span>
|
||
<span v-else></span>
|
||
</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?.rectificationName }}
|
||
</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 'element-plus';
|
||
|
||
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>
|