wisdomisitezwfront-web/src/views/project/engineeringAcceptance/acceptanceApply/components/transformInfo.vue

<template>
	<div class="overview">
		<el-dialog :show-close="false" v-model="visible1" :style="dialogStyle" @close="closeMain">
			<template #title>
				<div class="title-detail">
					<img src="@/assets/images/tableIcon/look.png" alt="" />
					<span>查看隐患整改信息</span>
					<el-icon>
						<close @click="closeMain" />
					</el-icon>
				</div>
			</template>
			<div class="detail-content">
				<div class="content-title">隐患记录</div>
				<div class="row">
					<el-row :gutter="20">
						<el-col :span="8">
							<span class="row-span"
								>检查情况：
								<span>{{
									basicData?.state == 0
										? "待检查"
										: basicData?.state == 1
										? "执法中"
										: basicData?.state == 2
										? "待整改"
										: basicData?.state == 3
										? "待审核"
										: basicData?.state == 4
										? "已闭合"
										: basicData?.state == 5
										? "已驳回"
										: ""
								}}</span>
							</span>
						</el-col>
						<el-col :span="8">
							<span class="row-span">工程名称：{{ basicData?.engineeringName }}</span></el-col
						>
						<el-col :span="8">
							<span class="row-span">检查人员：{{ basicData?.inspectUserName }}</span></el-col
						>
					</el-row>
				</div>
				<div class="row">
					<el-row :gutter="20">
						<el-col :span="8">
							<span class="row-span">检查时间：{{ basicData?.createTime }}</span>
						</el-col>
						<el-col :span="8">
							<span class="row-span">建设单位：{{ basicData?.buildEnt }}</span></el-col
						>
						<el-col :span="8">
							<span class="row-span">监理单位：{{ basicData?.supervisorEnt }}</span></el-col
						>
					</el-row>
				</div>
				<div class="row">
					<el-row :gutter="20">
						<el-col :span="8">
							<span class="row-span">施工单位：{{ basicData?.opEnt }}</span>
						</el-col>
						<el-col :span="8">
							<span class="row-span">勘察单位：{{ basicData?.surveyEnt }}</span></el-col
						>
						<el-col :span="8">
							<span class="row-span">设计单位：{{ basicData?.designEnt }}</span></el-col
						>
					</el-row>
				</div>
				<div class="row">
					<el-row :gutter="20">
						<el-col :span="8">
							<span class="row-span">责任区域：{{ basicData?.address }}</span>
						</el-col>
						<el-col :span="8">
							<span class="row-span">整改类型：{{ basicData?.requireType == 1 ? "限期整改" : "停工整改" }}</span></el-col
						>
						<el-col :span="8">
							<span class="row-span">整改期限：{{ basicData?.deadline }}</span></el-col
						>
					</el-row>
				</div>
			</div>
			<div class="detail-table">
				<div class="content-title">整改/复查记录</div>
				<div class="table">
					<el-table
						:data="recordData"
						class="el-table"
						:row-style="{ height: '40px' }"
						:header-cell-style="{ backgroundColor: '#F5F7FA', textAlign: 'center', height: '40px' }"
						:cell-style="{ textAlign: 'center', height: '40px' }"
						@row-click="rowClick"
					>
						<el-table-column prop="createByName" label="创建人" />
						<el-table-column prop="questionDesc" label="隐患问题" :show-overflow-tooltip="true" />
						<el-table-column label="隐患照片">
							<template #default="scope">
								<el-image
									v-if="scope.row.image && scope.row.image.length > 0"
									style="width: 38px; height: 28px"
									:src="scope.row.image[0].url"
									fit="fill"
								></el-image>
							</template>
						</el-table-column>
						<el-table-column prop="state" label="整改状态">
							<template #default="scope">
								<span>{{
									scope.row.state == 1
										? "待整改"
										: scope.row.state == 2
										? "待审核"
										: scope.row.state == 3
										? "已闭合"
										: scope.row.state == 4
										? "已驳回"
										: ""
								}}</span>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<!-- <div class="operation-btn" v-if="basicData?.state != 4">
					<el-button type="info" style="margin-right: 98px">驳回,请尽快整改</el-button>
					<el-button type="primary">整改完成,全部合格</el-button>
					<el-button type="primary" @click="allSubmit">全部整改完成,提交审核</el-button>
				</div> -->
			</div>
			<div class="transform-record" v-if="transformDialog">
				<div class="title-detail">
					<img src="@/assets/images/tableIcon/look.png" alt="" />
					<span>整改记录</span>
					<el-icon>
						<close @click="closeSecondary" />
					</el-icon>
				</div>
				<div class="content-title">隐患问题</div>
				<div class="row">
					<span>创建人:</span>
					<span>{{ recordRowData.createByName }}</span>
				</div>
				<div class="row">
					<span>创建时间:</span>
					<span>{{ recordRowData.createTime }}</span>
				</div>
				<div class="row">
					<span>隐患问题:</span>
					<span>{{ recordRowData.questionDesc }}</span>
				</div>
				<div class="row">
					<span>备注:</span>
					<span>{{ recordRowData.remark }}</span>
				</div>
				<div class="row">
					<span>隐患照片:</span>
					<div class="imgList" v-if="recordRowData.image">
						<el-image
							:src="item.url"
							fit="fill"
							v-for="(item, index) in recordRowData.image"
							:key="index"
							:preview-src-list="[item.url]"
						>
						</el-image>
					</div>
				</div>
				<div class="situation">
					<span>整改情况</span>
					<el-button type="success" @click="addSituation" v-if="recordRowData.state === 1 || recordRowData.state === 4"
						>新增整改记录</el-button
					>
				</div>
				<div class="situation-step">
					<el-timeline>
						<el-timeline-item :timestamp="item.createTime" placement="top" v-for="(item, index) in timelineList" :key="index">
							<div class="row">
								<span>整改人:</span>
								<template v-if="item.type && item.type == 'insert'">
									<el-input v-model="reformInfo.solveBy" placeholder="请输入" />
								</template>
								<span v-else>{{ item.solveBy }}</span>
							</div>
							<div class="row">
								<span>整改日期:</span>
								<template v-if="item.type && item.type == 'insert'">
									<el-date-picker
										v-model="reformInfo.solveTime"
										type="datetime"
										style="width: 100%"
										placeholder="请选择日期"
										format="YYYY-MM-DD HH:mm:ss"
										value-format="YYYY-MM-DD HH:mm:ss"
									/>
								</template>
								<span v-else>{{ item.solveTime }}</span>
							</div>
							<div class="row">
								<span>整改回复:</span>
								<template v-if="item.type && item.type == 'insert'">
									<el-input v-model="reformInfo.solveDesc" type="textarea" :rows="2" placeholder="请输入" />
								</template>
								<span v-else>{{ item.solveDesc }}</span>
							</div>
							<div class="row">
								<span>整改照片:</span>
								<div class="face-img" v-if="item.type && item.type == 'insert'">
									<div class="imgList" v-if="reformInfo.solveImage.length > 0">
										<img :src="item.url" class="face-avatar" v-for="(item, index) in reformInfo.solveImage" :key="index" />
									</div>
									<el-upload
										class="face-uploader"
										:action="`${baseUrl}` + '/xmgl/file/upload'"
										:show-file-list="false"
										:on-success="handleAvatarSuccess"
										accept="image/jpg, image/jpeg, image/png"
									>
										<el-icon><plus /></el-icon>
									</el-upload>
								</div>
								<div class="imgList" v-else-if="Array.isArray(item.solveImage)">
									<img :src="item.url" alt="" v-for="(item, index) in item.solveImage" :key="index" />
								</div>
							</div>
							<div class="row" v-if="item.suggest">
								<span>审核意见:</span>
								<span>{{ item.suggest }}</span>
							</div>
							<div
								class="status-name"
								:style="{ color: item.examineState === 0 ? '#008BFF' : item.examineState === 1 ? '#30AC7C' : '#F64D31' }"
								v-if="!item.type"
							>
								{{ item.examineState == 0 ? "待审核" : item.examineState == 1 ? "已通过" : "已驳回" }}
							</div>
							<!-- <div class="status-operate" v-if="item.examineState === 0">
								<el-button type="primary" @click="auditVisible = true">审核</el-button>
							</div> -->
							<div class="status-operate" v-if="item.type">
								<el-button type="primary" @click="submitForm">提交</el-button>
							</div>
						</el-timeline-item>
					</el-timeline>
				</div>
			</div>
		</el-dialog>
		<el-dialog v-model="auditVisible" :append-to-body="true">
			<template #title>
				<div style="border-left: 2px solid #0f81ff; font-size: 20px; color: #333333">
					<span style="margin-left: 5px">审核意见</span>
				</div>
			</template>
			<el-input type="textarea" :rows="2" placeholder="请输入内容" />
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="auditVisible = false">驳 回</el-button>
					<el-button type="primary" @click="auditVisible = false">通 过</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { FormInstance, UploadProps } from "element-plus";
import { locationCheckDetails, locationUpdateDetails, locationSubmitReform, locationSubmitAll } from "@/api/modules/project";
const baseUrl = import.meta.env.VITE_API_URL;
const props = defineProps({
	detailsDialog: Boolean,
	relativeId: String
});
const emits = defineEmits(["update:detailsDialog", "confirm"]);
const visible1 = ref(false);
const transformDialog = ref(false); // 整改记录对话框
const recordData = ref([]); // 整改记录表格数据
const recordRowData = ref(); // 整改记录表格行数据
const basicData = ref(); // 基础信息
const dialogStyle = ref({
	"min-width": "824px"
});
const reformInfo = ref({
	solveBy: "",
	solveTime: "",
	solveDesc: "",
	solveImage: []
});
// 全部整改完成，提交
const allSubmit = async () => {
	const res = await locationSubmitAll({ id: basicData.value.id });
	closeMain();
	ElMessage.success("提交成功");
};
// 关闭两个对话框
const closeMain = () => {
	visible1.value = false;
	transformDialog.value = false;
	dialogStyle.value = {
		"min-width": "824px",
		transform: "translateX(0px)"
	};
};
// 关闭整改记录辅弹框
const closeSecondary = () => {
	transformDialog.value = false;
	dialogStyle.value = {
		"min-width": "824px",
		transform: "translateX(0px)"
	};
};
// 提交整改情况
const submitForm = async () => {
	reformInfo.value.solveImage = JSON.stringify(reformInfo.value.solveImage);
	let requestData = {
		...reformInfo.value,
		inspectQuestionId: recordRowData.value.id
	};
	const res = await locationSubmitReform(requestData);
	timelineList.value.shift();
	getInfo();
	getTimeLineList();
	closeSecondary();
	ElMessage.success("提交成功");
};
// 图片上传成功后的钩子
const handleAvatarSuccess: UploadProps["onSuccess"] = (response, uploadFile) => {
	console.log(response.result.url);
	reformInfo.value.solveImage.push({
		url: response.result.url
	});
};
// 点击表格任意一行时
const rowClick = row => {
	recordRowData.value = row;
	transformDialog.value = true;
	dialogStyle.value = {
		"min-width": "824px",
		transform: "translateX(-170px)"
	};
	reformInfo.value = reactive({
		solveBy: "",
		solveTime: "",
		solveDesc: "",
		solveImage: []
	});
	// 全部
	getTimeLineList();
};
// 相关信息接口调用
const getInfo = async () => {
	const res = await locationCheckDetails({ id: props.relativeId });
	basicData.value = res.result;
	recordData.value = res.result.acceptInspectQuestionList;
	recordData.value.map(item => {
		item.image = eval(item.image);
	});
	console.log(recordData);
};
const timelineList = ref([{ name: 1 }]);
// 获取整改情况时间轴列表
const getTimeLineList = async () => {
	const res = await locationUpdateDetails({ inspectQuestionId: recordRowData.value.id });

	res.result.map(item => {
		item.solveImage = eval(item.solveImage);
	});
	timelineList.value = res.result;
};
const addSituation = () => {
	let findItem = timelineList.value.find(item => {
		return item.type == "insert";
	});
	if (!findItem) {
		timelineList.value.unshift({
			type: "insert"
		});
	}
};
const auditVisible = ref(false);
// 监听父组件的visible，用来简介控制el-dialog的弹框开关，一般是用于开
watch(
	() => props.detailsDialog,
	(n, o) => {
		visible1.value = n;
		if (n) {
			getInfo();
		} else {
			emits("confirm");
		}
	}
);
// 监听el-dialog显示状态，再通过@update:visible 通知父组件，一般是用于关
watch(visible1, (n, o) => {
	emits("update:detailsDialog", n);
});
onMounted(() => {});
</script>

<style lang="scss" scoped>
@mixin fullwidth {
	width: -webkit-fill-available;
	width: -moz-available;
	width: stretch;
}
@mixin flex {
	display: flex;
	align-items: center;
}
@mixin title {
	font-size: 14px;
	font-family: Source Han Sans CN-Regular, Source Han Sans CN;
	font-weight: 400;
	color: #333333;
	border-left: 2px solid #008bff;
	padding-left: 5px;
}
.overview {
	// background-color: #fff;
	flex: 1;
	:deep(.el-dialog) {
		position: relative;
	}
	.title-detail {
		@include flex;
		> img {
			width: 16px;
			height: 18px;
		}
		> span {
			font-size: 18px;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			margin-left: 5px;
			margin-right: auto;
		}
		:deep(.el-icon) {
			cursor: pointer;
			color: #a8abb2;
		}
	}
	.detail-content {
		.content-title {
			@include title;
		}
		.row {
			margin-top: 14px;
			.row-span {
				font-size: 12px;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #333333;
				> span {
					font-weight: 400;
					color: #008bff;
				}
			}
		}
	}
	.detail-table {
		height: 391px;
		margin-top: 20px;
		.content-title {
			@include title;
		}
		.table {
			height: 300px;
			margin-top: 20px;
			:deep(.el-table) {
				height: 100%;
			}
		}
		.operation-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 10px;
		}
	}
	.transform-record {
		position: absolute;
		top: 0;
		right: -460px;
		width: 380px;
		height: calc(100% - 31px);
		min-width: 420px;
		background: #ffffff;
		box-shadow: 0px 4px 8px 0px rgba(48, 62, 100, 0.2);
		border-radius: 8px 8px 8px 8px;
		padding: 15px 20px;
		overflow: hidden;
		.content-title {
			@include title;
			margin-top: 45px;
			margin-bottom: 24px;
		}
		.row {
			display: flex;
			margin-bottom: 12px;
			span:nth-child(1) {
				width: 56px;
				text-align: right;
				font-size: 12px;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #333333;
				white-space: nowrap;
				margin-right: 10px;
			}
			span:nth-child(2) {
				font-size: 12px;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				overflow-wrap: anywhere;
			}
			.imgList {
				display: flex;
				flex-wrap: wrap;
				img {
					width: 95px;
					height: 53px;
					margin-bottom: 10px;
					margin-right: 15px;
				}
				:deep(.el-image) {
					width: 95px;
					height: 53px;
					margin-bottom: 10px;
					margin-right: 15px;
				}
			}
			.face-img {
				width: 100%;
				align-self: flex-start;
				@include flex;
				flex-wrap: wrap;
				:deep(.face-uploader .el-upload) {
					border: 1px dashed #d9d9d9 !important;
					border-radius: 6px !important;
					cursor: pointer !important;
					position: relative !important;
					overflow: hidden !important;
				}
				.face-uploader .el-upload:hover {
					border-color: #409eff !important;
				}
				:deep(.el-icon) {
					font-size: 28px;
					color: #8c939d;
					width: 53px;
					height: 53px;
					line-height: 53px;
					text-align: center;
				}
				.face-avatar {
					width: 53px;
					height: 53px;
					display: block;
				}
			}
		}
		.situation {
			@include flex;
			border-left: 2px solid #008bff;
			margin-top: 20px;
			span {
				margin-right: auto;
				margin-left: 5px;
			}
		}
		.situation-step {
			margin-top: 20px;
			overflow-y: scroll;
			height: 210px;
			.row {
				span:nth-child(1) {
					text-align: left;
				}
			}
			:deep(.el-timeline-item) {
				position: relative;
				padding-bottom: 14px !important;
			}
			:deep(.el-timeline) {
				padding: 0;
			}
			.status-name {
				position: absolute;
				right: 0;
				top: 0;
				font-size: 12px;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
			}
			.status-operate {
				position: absolute;
				right: 0;
				bottom: -10px;
			}
		}
	}
	.audit-title {
		border-left: 2px solid #0f81ff !important;
	}
}

.test :deep(.el-input__wrapper) {
	box-shadow: 0 0 0 0;
}
.test :deep(.el-input__inner) {
	text-align: center;
}
:deep(.el-table__empty-text) {
	min-height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>