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

<template>
	<div class="overview">
		<el-dialog :show-close="false" v-model="visible1" :style="dialogStyle" width="1305" @close="closeMain">
			<template #title>
				<div class="title-detail">
					<span>{{ title }}</span>
					<el-icon>
						<close @click="closeMain" />
					</el-icon>
				</div>
			</template>
			<div class="search-select">
				<span style="margin: 0 10px 2px 0px">验收阶段</span>
				<el-input style="width: 200px" :disabled="title == '详情'" v-model="allForm.stage" clearable placeholder="请输入" />
				<span style="margin: 0 10px 2px 10px">类型</span>
				<el-select style="width: 200px" :disabled="title == '详情'" v-model="allForm.type" clearable placeholder="请选择">
					<el-option v-for="item in typeList" :key="item.dictLabel" :label="item.dictValue" :value="item.dictLabel" />
				</el-select>
				<span style="margin: 0 10px 2px 20px">备注</span>
				<el-input style="width: 200px" :disabled="title == '详情'" v-model="allForm.remark" clearable placeholder="请输入" />
			</div>
			<!-- 验收内容 -->
			<div class="detail-table">
				<div class="content-title">验收内容</div>
				<div class="content-button">
					<el-button class="addButtonStyle" v-if="title != '详情'" @click="addPlan">新增</el-button>
					<span v-if="title == '详情'">{{
						allForm.state == 1
							? "审批中"
							: allForm.state == 2
							? "资料验收通过"
							: allForm.state == 3
							? "已驳回"
							: allForm.state == 4
							? "已验收通过"
							: ""
					}}</span>
				</div>
				<div class="table">
					<el-table
						:data="recordData"
						class="el-table"
						max-height="300"
						:row-style="{ height: '40px' }"
						:header-cell-style="{ backgroundColor: '#F5F7FA', textAlign: 'center', height: '40px' }"
						:cell-style="{ textAlign: 'center', height: '40px' }"
					>
						<el-table-column type="index" label="序号" width="100" />
						<el-table-column prop="singleId" label="单体工程" width="200">
							<template #default="{ row }">
								<el-select v-if="row.isEdit" style="width: 100%" v-model="row.singleId" clearable placeholder="请选择">
									<el-option v-for="item in singleEngineerList" :key="item.singleId" :label="item.name" :value="item.singleId" />
								</el-select>
								<!-- <span v-else>{{ singleEngText() }}</span> -->
								<span v-else>{{ row.singleProject }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="planCheckDate" label="计划验收时间" width="200">
							<template #default="{ row }">
								<el-date-picker
									v-if="row.isEdit"
									v-model="row.planCheckDate"
									style="width: 100%"
									format="YYYY-MM-DD"
									value-format="YYYY-MM-DD"
									type="date"
									placeholder="请选择"
								/>
								<span v-else>{{ row.planCheckDate }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="startFlag" label="起始标识" width="200">
							<template #default="{ row }">
								<el-input v-model="row.startFlag" v-if="row.isEdit" />
								<span v-else>{{ row.startFlag }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="endFlag" label="截止标识" width="200">
							<template #default="{ row }">
								<el-input v-model="row.endFlag" v-if="row.isEdit" />
								<span v-else>{{ row.endFlag }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="headPerson" label="验收负责人" width="200">
							<template #default="{ row }">
								<el-input v-model="row.headPerson" v-if="row.isEdit" />
								<span v-else>{{ row.headPerson }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="headPersonPhone" label="负责人电话" width="200">
							<template #default="{ row, $index }">
								<el-input v-model="row.headPersonPhone" v-if="row.isEdit" @blur="e => validatorPhone(e, $index)" />
								<span v-else>{{ row.headPersonPhone }}</span>
							</template>
						</el-table-column>
						<!-- <el-table-column prop="type8" label="状态" width="150">
							<template #default="{ row }">
								<el-input v-model="row.type1" v-if="!row.id" />
								<span v-else>{{ row.type1 }}</span>
							</template>
						</el-table-column> -->
						<el-table-column prop="remark" label="备注" width="200">
							<template #default="{ row }">
								<el-input v-model="row.remark" v-if="row.isEdit" />
								<span v-else>{{ row.remark }}</span>
							</template>
						</el-table-column>
						<el-table-column align="center" fixed="right" width="180" label="操作" v-if="title != '详情'">
							<template #default="scope">
								<el-button type="primary" v-if="scope.row.isEdit" link @click="scope.row.isEdit = false">
									<img src="@/assets/images/tableIcon/save.png" alt="" class="configureIcon" />
									<span>保存</span>
								</el-button>
								<el-button type="primary" v-if="!scope.row.isEdit" link @click="scope.row.isEdit = true">
									<img src="@/assets/images/tableIcon/updateIcon.png" alt="" class="configureIcon" />
									<span>编辑</span>
								</el-button>
								<el-button type="danger" v-if="!scope.row.isEdit" link :icon="Delete" @click="handleDeleteItem(scope.$index)"
									>删除</el-button
								>
							</template>
						</el-table-column>
						<template #empty>
							<div class="table-empty">
								<slot name="empty">
									<img src="@/assets/images/notData.png" alt="notData" />
									<div>暂无数据</div>
								</slot>
							</div>
						</template>
					</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="detail-table">
				<div class="content-title">资料附件</div>
				<div class="table">
					<el-table
						:data="documentData"
						border
						max-height="300"
						class="el-table"
						:row-style="{ height: '40px', textAlign: 'center' }"
						:header-cell-style="{ height: '40px', backgroundColor: '#e1eeff', textAlign: 'center' }"
						:cell-style="{ height: '40px', textAlign: 'center' }"
					>
						<el-table-column type="index" label="序号" width="200" />
						<el-table-column prop="annexName" label="附件名称">
							<template #default="{ row, $index }">
								<span v-if="title == '详情'">{{ row.annexName }}</span>
								<el-input v-else class="test" v-model="row.annexName" />
							</template>
						</el-table-column>
						<el-table-column prop="fileList" label="操作" v-if="title != '详情'">
							<template #default="{ row, $index }">
								<!-- <el-button v-if="title == '详情'" type="primary" @click="onDownLoad(row)" link>下载附件</el-button> -->
								<el-button type="primary" @click="onUpload(row)" link>上传附件</el-button>
							</template>
						</el-table-column>
						<el-table-column fixed="right" v-if="title != '详情'">
							<template #header>
								<el-button type="primary" round @click="addEngineeringSingle"> 添加 </el-button>
							</template>

							<template #default="{ row, $index }">
								<el-button type="danger" link @click="removeEngineeringSingle($index)">删除</el-button>
							</template>
						</el-table-column>
						<template #empty>
							<div class="table-empty">
								<slot name="empty">
									<img src="@/assets/images/notData.png" alt="notData" />
									<div>暂无数据</div>
								</slot>
							</div>
						</template>
					</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="back-reason" v-if="allForm.state == 3">
				<div class="content-title">驳回原因</div>
				<div class="form-content">
					<el-input disabled v-model="allForm.rejectReason" :rows="4" type="textarea" placeholder="请输入" />
				</div>
			</div>
			<!-- 现场检查 -->
			<div class="detail-table" v-if="allForm.state == 2 || allForm.state == 4">
				<div class="content-title">现场检查</div>
				<div class="table">
					<el-table
						:data="checkData"
						class="el-table"
						max-height="300"
						:row-style="{ height: '40px' }"
						:header-cell-style="{ backgroundColor: '#F5F7FA', textAlign: 'center', height: '40px' }"
						:cell-style="{ textAlign: 'center', height: '40px' }"
					>
						<el-table-column type="index" label="序号" width="100" />
						<el-table-column prop="inspectUserName" label="监督员" width="150" />
						<el-table-column prop="createTime" label="检查时间" width="180" />
						<el-table-column prop="buildEnt" label="建设单位" width="150" />
						<el-table-column prop="supervisorEnt" label="监理单位" width="150" />
						<el-table-column prop="opEnt" label="施工单位" width="150" />
						<el-table-column prop="surveyEnt" label="勘察单位" width="150" />
						<el-table-column prop="designEnt" label="设计单位" width="150" />
						<el-table-column prop="state" label="状态" width="150">
							<template #default="{ row }">
								<span>{{
									row.state == 0
										? "待执法"
										: row.state == 1
										? "执法中"
										: row.state == 2
										? "待整改"
										: row.state == 3
										? "待审核"
										: row.state == 4
										? "已闭合"
										: row.state == 5
										? "已驳回"
										: ""
								}}</span>
							</template>
						</el-table-column>
						<el-table-column align="center" fixed="right" width="100" label="操作">
							<template #default="{ row }">
								<el-button type="primary" link @click="handleLookItem(row)">
									<img src="@/assets/images/tableIcon/look.png" alt="" class="configureIcon" />
									<span>查看</span>
								</el-button>
							</template>
						</el-table-column>
						<template #empty>
							<div class="table-empty">
								<slot name="empty">
									<img src="@/assets/images/notData.png" alt="notData" />
									<div>暂无数据</div>
								</slot>
							</div>
						</template>
					</el-table>
				</div>
			</div>
			<template #footer>
				<div>
					<el-button type="primary" @click="visible1 = false" v-if="title == '详情'">关闭</el-button>
					<el-button type="primary" @click="confirm()" v-if="title != '详情'">提交申请</el-button>
				</div>
			</template>
		</el-dialog>
		<!-- 附件上传 -->
		<FilesUploadPlus v-model="showFilesUpload" @update:files="handlechange" :files="current.files" :reset="true" />
		<!-- 现场检查详情 -->
		<transformInfo v-model:detailsDialog="detailsDialog" :relativeId="checkRowId" @confirm="confirmReform"></transformInfo>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch, reactive } from "vue";
import { ElMessage } from "element-plus";
import { submitAll, acceptanceApplyAdd, acceptanceApplyDetails } from "@/api/modules/project";
import { Delete } from "@element-plus/icons-vue";
import { jxj_User } from "@/api/types";
import { useHandleData } from "@/hooks/useHandleData";
import { GlobalStore } from "@/stores";
import { getDicList } from "@/api/modules/jxjview";
import { singleEngineer } from "@/api/modules/common";
import FilesUploadPlus from "@/components/FilesUploadPlus/FilesUpload.vue";
import transformInfo from "./transformInfo.vue";
const current = ref({
	files: []
});
const showFilesUpload = ref(false);
const singleEngineerList = ref([]);
const typeList = ref([]);
const detailsDialog = ref(false);
const checkData = ref([]);
const checkRowId = ref("");
const globalStore = GlobalStore();
const headers = ref({ Authorization: "Bearer " + globalStore.token });
const documentData = ref<any>([]);
const baseUrl = import.meta.env.VITE_API_URL;
const props = defineProps({
	dialogVisible: Boolean,
	relativeId: String,
	title: String
});
const emits = defineEmits(["update:dialogVisible", "confirm"]);
const visible1 = ref(false);
const transformDialog = ref(false); // 整改记录对话框
const recordData = ref<any>([]); // 整改记录表格数据
const recordRowData = ref(); // 整改记录表格行数据
const basicData = ref(); // 基础信息
const dialogStyle = ref({
	"min-width": "824px"
});
const allForm = ref({
	stage: "",
	type: null,
	remark: "",
	rejectReason: "",
	state: null
});
const handleLookItem = row => {
	console.log(row);
	checkRowId.value = row.id;
	detailsDialog.value = true;
};
const validatorPhone = (e: any, index: any) => {
	// 校验手机号码
	let pattern = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
	let dataValue = recordData.value[index].headPersonPhone;
	if (!pattern.test(dataValue)) {
		ElMessage.error("请输入正确的手机号码");
		recordData.value[index].headPersonPhone = "";
	}
};
// 下载附件按钮
const onDownLoad = (row: any) => {
	console.log(row);
	// if (row.url) {
	// 	window.open(baseUrl + "/xmgl/file/preview?fileUrl=" + row.url);
	// } else {
	// 	ElMessage.error("暂无可下载文件");
	// }
};
// 上传附件按钮
const onUpload = async row => {
	showFilesUpload.value = true;
	if (row.fileList.length > 0) {
		current.value.files = row.fileList;
	} else {
		current.value.files = [];
	}
};
const handlechange = e => {
	console.log(e);
	current.value.files = e.map(item => {
		item.label = current.value.dictLabel;
		return item;
	});
	console.log(current.value);
};
// 单体工程名称转换
// const singleEngText = (id: any) => {
// 	let findItem: any = singleEngineerList.value.find(item => item.singleId == id);
// 	return findItem?.name;
// };
// 整改完成，全部已提交审核
const confirmReform = () => {
	getInfo();
};
const confirm = async () => {
	console.log(allForm.value);
	console.log(recordData.value);
	console.log(documentData.value);
	let requestData = {
		...allForm.value,
		detailList: recordData.value,
		annexList: documentData.value,
		engineeringSn: globalStore.engineeringSn
	};
	if (props.title == "重新发起") {
		requestData.id = props.relativeId;
	}
	requestData.detailList.map(item => {
		delete item.id;
	});
	requestData.annexList.map(item => {
		if (item.files && item.files.length > 0) {
			item.files.map(item2 => {
				item.fileList.push({
					createTime: item2.response.createTime,
					extendName: item2.response.ext,
					fileId: item2.response.id,
					fileName: item2.response.filename,
					fileSize: item2.response.size,
					fileUrl: item2.response.url,
					contentType: item2.response.contentType
				});
			});
		} else if (item.fileList && item.fileList.length > 0) {
			item.fileList.map(item2 => {
				delete item2.fileId;
			});
		}
		delete item.id;
	});
	delete requestData.state;
	const res = await acceptanceApplyAdd(requestData);
	if (res.message) {
		ElMessage.success("操作成功");
	} else {
		ElMessage({
			showClose: true,
			message: "操作失败",
			type: "error"
		});
	}
	visible1.value = false;
};
const getSingleEngineerData = async () => {
	const res = await singleEngineer({ engineeringSn: globalStore.engineeringSn });
	singleEngineerList.value = res.result;
	console.log(res);
};
const getDicMainList = async () => {
	// 获取学历字典
	const { result } = await getDicList({ dictType: "check_accept_type" });
	typeList.value.length = 0;
	typeList.value.push(...result);
};
// 导入文件
const uploadFileSuccess = (response: any) => {
	console.log(response);
};
const removeEngineeringSingle = (index: any) => {
	documentData.value.splice(index, 1);
};
const addEngineeringSingle = () => {
	documentData.value.push({
		annexName: "",
		fileList: []
	});
};
// 删除用户信息
const handleDeleteItem = async (index: any) => {
	// await useHandleData(deleteBigItem, { id: params.id }, `删除【${params.name}】`);
	recordData.value.splice(index, 1);
};
const addPlan = () => {
	recordData.value.push({
		singleId: "",
		singleProject: "",
		planCheckDate: "",
		startFlag: "",
		endFlag: "",
		headPerson: "",
		headPersonPhone: "",
		remark: "",
		isEdit: true
	});
};
// 修改数据按钮
const handleEditItem = async (row: any) => {
	console.log(row);
};
// 全部整改完成，提交
const allSubmit = async () => {
	const res = await submitAll({ id: basicData.value.id });
	closeMain();
	ElMessage.success("提交成功");
};
// 关闭两个对话框
const closeMain = () => {
	visible1.value = false;
	transformDialog.value = false;
	dialogStyle.value = {
		"min-width": "824px",
		transform: "translateX(0px)"
	};
};
// 相关信息接口调用
const getInfo = async () => {
	const res = await acceptanceApplyDetails({ id: props.relativeId });
	console.log(res);
	if (res && res.result) {
		for (let i in allForm.value) {
			allForm.value[i] = res.result[i];
		}
		recordData.value = res.result.detailList;
		documentData.value = res.result.annexList;
		checkData.value = res.result.acceptInspectRecordList;
	}
};
const timelineList = ref([{ name: 1 }]);
const auditVisible = ref(false);
// 监听父组件的visible，用来简介控制el-dialog的弹框开关，一般是用于开
watch(
	() => props.dialogVisible,
	(n, o) => {
		visible1.value = n;
		if (n) {
			if (props.title == "新增") {
				allForm.value = {
					stage: "",
					type: null,
					remark: "",
					rejectReason: ""
				};
				recordData.value = [];
				documentData.value = [];
			} else if (props.title == "详情" || props.title == "重新发起") {
				getInfo();
			}
		} else {
			emits("confirm");
		}
	}
);
// 监听el-dialog显示状态，再通过@update:visible 通知父组件，一般是用于关
watch(visible1, (n, o) => {
	emits("update:dialogVisible", n);
});
onMounted(() => {
	getDicMainList();
	getSingleEngineerData();
});
</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 {
	:deep() {
		.el-dialog__body {
			padding-top: 0;
			padding-bottom: 0;
		}
	}
	.title-detail {
		@include flex;
		border-left: 3px solid #0f81ff;
		> span {
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			margin-left: 12px;
			margin-right: auto;
			font-size: 18px;
		}
		:deep(.el-icon) {
			cursor: pointer;
			color: #a8abb2;
		}
	}
	.search-select {
		@include flex;
		box-shadow: none;
	}
	.detail-table {
		// height: 391px;
		margin-top: 18px;
		.content-title {
			@include title;
		}
		.content-button {
			@include flex;
			justify-content: flex-end;
			> span {
				font-size: 14px;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #008bff;
			}
		}
		.table {
			width: 100%;
			// height: 310px;
			margin-top: 20px;
			:deep(.el-table) {
				height: 100%;
			}
			.table-empty {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 150px;
				flex: 1;
				flex-direction: column;
				color: #999;
			}
		}
		.operation-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20px;
		}
	}
	.back-reason {
		// height: 391px;
		margin-top: 18px;
		.content-title {
			@include title;
		}
		.form-content {
			margin-top: 20px;
		}
	}
}
</style>