Mars3D-screen_web/src/views/jxjview/lineManagement/components/operateDialog.vue

<template>
	<div class="overview">
		<el-dialog :show-close="false" v-model="visible1" width="60%" @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>
			<el-form ref="formRef" :model="formData" label-width="auto" :rules="rules" class="basic-form" size="default">
				<div class="basic-info">
					<div class="form-content">
						<div class="row">
							<el-form-item label="图层类型:" prop="engineeringName">
								<el-select v-model="formData.engineeringName" placeholder="请选择" style="width: 100%">
									<el-option v-for="item in lineTypeList" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
						</div>
						<div class="row">
							<el-form-item label="线宽度:" prop="engineeringName">
								<el-input-number v-model="formData.engineeringName" placeholder="请输入" controls-position="right" disabled />
							</el-form-item>
						</div>
						<div class="row">
							<el-form-item label="具体参数:" prop="engineeringName">
								<div class="table-head">
									<div class="head-key">键名</div>
									<div class="head-value">键值</div>
								</div>
								<div class="table-body">
									<div class="body-key">
										<el-input v-model="formData.engineeringName" style="width: 100%" placeholder="请输入" />
									</div>
									<div class="body-value">
										<el-input v-model="formData.engineeringName" placeholder="请输入" />
									</div>
									<div class="body-operate">
										<el-button type="danger" link @click="visible1 = false">删除</el-button>
									</div>
								</div>
								<div class="table-operate">
									<div>
										<el-button type="success" @click="visible1 = false">追加</el-button>
									</div>
								</div>
							</el-form-item>
						</div>
						<div class="row">
							<el-form-item label="显示:" prop="engineeringName">
								<el-switch v-model="formData.engineeringName" style="--el-switch-on-color: #13ce66" />
							</el-form-item>
						</div>
						<div class="row">
							<el-form-item label="可视化设置预览:" prop="engineeringName">
								<el-button type="primary" @click="visible1 = false">编辑</el-button>
							</el-form-item>
						</div>
					</div>
				</div>
			</el-form>
			<template #footer>
				<el-button type="primary" @click="visible1 = false">确定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
import { getDicList } from "@/api/modules/jxjview";
import FilesUploadPlus from "@/components/FilesUploadPlus/FilesUpload.vue";
import {
	dangerousEngineerDetails,
	constructionSchemeList,
	constructionSchemeFile,
	constructionProgressList,
	localInspectList,
	engineerAcceptList
} from "@/api/modules/goverment";
import DownLoad from "@/utils/annexDowload.ts";
const lineTypeList = ref([
	{ label: "飞线", value: "飞线" },
	{ label: "道路穿梭", value: "道路穿梭" },
	{ label: "巴士穿梭", value: "巴士穿梭" }
]);
const props = defineProps({
	operateVisible: Boolean,
	relativeId: String
});
const emits = defineEmits(["update:operateVisible"]);
const arrOne = ref<any>([]);
const arrFive = ref<any>([]);
const arrSeven = ref<any>([]);
const arrEight = ref<any>([]);
const tabPosition = ref(0);
const documentDataIndex = ref(0);
const current = ref({
	files: []
});
const typeList = ref([]);
const acceptTypeList = ref([]);
const rules = ref({
	engineeringName: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	type: [
		{
			required: true,
			message: "请输入",
			trigger: "change"
		}
	],
	typeDescribe: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	]
});
const formRef = ref<FormInstance>();
const formData = ref<any>({
	technicalDisclosureFile: [],
	securityConstructionSchemeFile: [],
	specialConstructionSchemeFile: []
});
const visible1 = ref(false);
// 验收类型文本转换;
const textTransform = (id: any) => {
	let findItem: any = acceptTypeList.value.find(item => item.value == id);
	return findItem?.label;
};
// 获取附件列表
const getConstructionSchemeList = async () => {
	const res = await constructionSchemeList({ dangerousEngineeringId: props.relativeId, type: tabPosition.value });
	console.log(res);
	if (res.result && res.result.length > 0) {
		arrOne.value = res.result;
	} else {
		arrOne.value = [];
	}
};
// 获取施工进度列表
const getConstructionProgressList = async () => {
	const res = await constructionProgressList({ dangerousEngineeringId: props.relativeId });
	console.log(res);
	if (res.result && res.result.length > 0) {
		arrFive.value = res.result;
	} else {
		arrFive.value = [];
	}
};
// 获取现场巡视列表
const getLocalInspectList = async () => {
	const res = await localInspectList({ dangerousEngineeringId: props.relativeId });
	console.log(res);
	if (res.result && res.result.length > 0) {
		arrSeven.value = res.result;
	} else {
		arrSeven.value = [];
	}
};
// 获取危大工程验收列表
const getengineerAcceptList = async () => {
	const res = await engineerAcceptList({ dangerousEngineeringId: props.relativeId });
	console.log(res);
	if (res.result && res.result.length > 0) {
		arrEight.value = res.result;
	} else {
		arrEight.value = [];
	}
};
// 获取危大工程详情
const getDetailsData = async () => {
	const res = await dangerousEngineerDetails({ id: props.relativeId });
	console.log(res);
	if (res && res.result) {
		formData.value = { ...res.result };
	}
	if (formData.value.constructionPlanStartTime && formData.value.constructionPlanEndTime) {
		formData.value.planRange = [formData.value.constructionPlanStartTime, formData.value.constructionPlanEndTime];
	}
	if (formData.value.constructionStartTime && formData.value.constructionEndTime) {
		formData.value.constructionRange = [formData.value.constructionStartTime, formData.value.constructionEndTime];
	}
};
// tabs项点击时
const handleClick = (pane: any) => {
	tabPosition.value = pane.props.name;
	const listOperation = [getConstructionSchemeList, getConstructionProgressList, getLocalInspectList, getengineerAcceptList];
	if (tabPosition.value < 5 || tabPosition.value == 8) {
		listOperation[0]();
	} else {
		listOperation[tabPosition.value - 4]();
	}
};
// 附件上传改变
const handlechange = e => {
	console.log(e);
	current.value.files = e.map(item => {
		item.label = current.value.dictLabel;
		return item;
	});
	console.log(current.value.files);
	arrOne.value[documentDataIndex.value].fileList = current.value.files;
};
// 危大工程资料
const onDownLoad = (key: any) => {
	console.log(key);
	console.log(formData.value[key]);
	let val = JSON.parse(formData.value[key]);
	if (val && val.length > 0) {
		DownLoad(val);
	} else {
		ElMessage.error("暂无可下载文件");
	}
};
// 表格附件下载
const onTableDownLoad = async (row: any) => {
	console.log(row);
	let requestData = {
		id: row.id
	};
	const { result } = await constructionSchemeFile(requestData);
	console.log(result);
	if (result && result.length > 0) {
		DownLoad(result);
	} else {
		ElMessage.error("暂无可下载文件");
	}
};
// 获取验收类型字典
const getAcceptTypeList = async () => {
	const { result } = await getDicList({ dictType: "check_accept_type" });
	if (result.length > 0) {
		let arr: any = [];
		result.map(item => {
			arr.push({
				label: item.dictValue,
				value: item.dictLabel
			});
		});
		acceptTypeList.value.length = 0;
		acceptTypeList.value.push(...arr);
	}
};
const getTypeDicMainList = async () => {
	// 获取起重机械设备类型字典
	const { result } = await getDicList({ dictType: "dangerous_engineer_type" });
	if (result.length > 0) {
		let arr: any = [];
		result.map(item => {
			arr.push({
				label: item.dictValue,
				value: item.dictLabel
			});
		});
		typeList.value.length = 0;
		typeList.value.push(...arr);
	}
};
// 关闭两个对话框
const closeMain = () => {
	visible1.value = false;
	emits("update:operateVisible", false);
};
watch(
	() => props.operateVisible,
	n => {
		if (n) {
			getAcceptTypeList();
			getTypeDicMainList();
			getDetailsData();
			getConstructionSchemeList();
			setTimeout(function () {
				formRef.value?.clearValidate();
			}, 200);
			visible1.value = n;
			tabPosition.value = 0;
		}
	}
);
watch(
	() => visible1.value,
	n => {
		emits("update:operateVisible", n);
	}
);
onMounted(() => {});
</script>

<style lang="scss" scoped>
@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;
		> 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;
		}
	}
	.basic-form {
		width: 80%;
		margin: 0 auto;
		margin-bottom: 42px;
		.basic-info {
			.form-content {
				margin: 0 auto;
				margin-top: 25px;
				.row {
					.table-head {
						@include flex;
						.head-key {
							width: 110px;
							color: #333;
							font-weight: 700;
							margin-right: 10px;
						}
						.head-value {
							width: 110px;
							color: #333;
							font-weight: 700;
						}
					}
					.table-body {
						@include flex;
						.body-key {
							width: 110px;
							margin-right: 10px;
						}
						.body-value {
							width: 400px;
						}
						.body-operate {
							margin-left: 5px;
						}
					}
					.table-operate {
						width: 100%;
						@include flex;
						margin-top: 5px;
					}
				}
			}
			.switch-box {
				width: 380px;
				display: flex;
				align-items: center;
				> span {
					margin-right: auto;
					margin-left: 9px;
				}
			}
			.tabs-option {
				width: 100%;
				.table {
					width: 100%;
					// height: 310px;
					margin-top: 15px;
					:deep(.el-table) {
						height: 100%;
					}
					.face-img {
						width: 100%;
						align-self: flex-start;
						: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: 24px;
							color: #8c939d;
							width: 35px;
							height: 35px;
							line-height: 35px;
							text-align: center;
						}
						.face-avatar {
							width: 35px;
							height: 35px;
							display: block;
						}
					}
					.showImg {
						width: 35px;
						height: 35px;
						border-radius: 6px;
					}
					.table-empty {
						display: flex;
						justify-content: center;
						align-items: center;
						height: 150px;
						flex: 1;
						flex-direction: column;
						color: #999;
					}
				}
			}
		}
	}
}
:deep(.el-tabs--card > .el-tabs__header) {
	border-bottom: none;
}
:deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
	width: 100%;
	background: #f8f8f8;
	border: 0;
}
:deep(.el-tabs__nav-scroll) {
	display: flex;
	.el-tabs__item {
		width: 50%;
		text-align: center;
		// background: #f8f8f8;
		color: #333;
		// border: 1px solid #e5e5e5;
		// border-radius: 8px;
	}
	.el-tabs__item.is-active {
		background-color: #008bff;
		color: #fff;
	}
}
:deep(.el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
	border-bottom-color: #008bff !important;
}
:deep(#tab-0) {
	border-radius: 4px 0 0 4px;
	border: 1px solid #e5e5e5;
	border-right: 0;
}
:deep() {
	#tab-1,
	#tab-2,
	#tab-3,
	#tab-4,
	#tab-5,
	#tab-6,
	#tab-7 {
		border: 1px solid #e5e5e5;
		border-right: 0;
	}
}
:deep(#tab-8) {
	border: 1px solid #e5e5e5;
	border-radius: 0 4px 4px 0;
}
</style>