wisdomisitezwfront-web/src/views/project/supervision/ProjectSupervision/overview.vue

<template>
	<div class="overview">
		<el-form ref="ruleFormRef" :model="form" label-width="150px" :rules="rules" class="form" size="default">
			<!-- <el-form ref="ruleFormRef" :model="form" label-width="150px" class="form" size="default"> -->
			<el-form-item label="项目名称:" prop="projectName">
				<el-input placeholder="请输入" v-model="form.projectName" disabled />
			</el-form-item>
			<el-form-item label="工程名称:" prop="engineeringName">
				<el-input placeholder="请输入" v-model="form.engineeringName" />
			</el-form-item>
			<div class="row">
				<el-form-item label="工程编码:" prop="engineeringCode">
					<el-input placeholder="请输入" v-model="form.engineeringCode" />
				</el-form-item>
				<el-form-item label="工程类别:" prop="engineeringType">
					<el-select class="select" placeholder="请选择" v-model="form.engineeringType">
						<el-option
							v-for="item in engineeringTypeOptions"
							:key="item.dictCode"
							:label="item.dictValue"
							:value="item.dictLabel"
						/>
					</el-select>
				</el-form-item>
			</div>
			<div class="row">
				<el-form-item label="工程用途:" prop="engineeringUse">
					<el-select class="select" placeholder="请选择" v-model="form.engineeringUse">
						<el-option v-for="item in engineeringPurpose" :key="item.dictCode" :label="item.dictValue" :value="item.dictLabel" />
					</el-select>
				</el-form-item>
				<el-form-item label="工程造价（万元）:" prop="engineeringCost">
					<el-input placeholder="请输入" v-model="form.engineeringCost" />
				</el-form-item>
			</div>
			<div class="row">
				<el-form-item label="工程总面积（㎡）:" prop="engineeringArea">
					<el-input placeholder="请输入" v-model="form.engineeringArea" />
				</el-form-item>
				<el-form-item label="工程总长度（m）:" prop="engineeringLength">
					<el-input placeholder="请输入" v-model="form.engineeringLength" />
				</el-form-item>
			</div>
			<div class="row">
				<el-form-item label="是否重点工程:" prop="isImportant">
					<el-radio-group placeholder="请选择" v-model="form.isImportant">
						<el-radio :label="1">是</el-radio>
						<el-radio :label="0">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="工程位置:" prop="position">
					<!-- <label class="label"><span>经度</span> <el-input disabled v-model="form.longitude" size="small" /></label>
						<label class="label"><span>纬度</span> <el-input disabled v-model="form.latitude" size="small" /></label> -->
					<el-input placeholder="请选择" v-model="form.position">
						<template #append>
							<el-icon size="22" @click="openMap"><Location /></el-icon>
						</template>
					</el-input>

					<!-- <el-icon style="background-color: #008bff; color: #fff; height: 42px; width: 36px" size="22" @click="openMap"
						><Location
					/></el-icon> -->
				</el-form-item>
			</div>
			<!-- 标记校验 -->
			<el-form-item label="所属管辖区域:">
				<area-selected v-model="addressList" @get-address="handleGetAdress"></area-selected>
			</el-form-item>
			<el-form-item label="建设地址:" prop="address">
				<el-input placeholder="请输入" v-model="form.address" />
			</el-form-item>
			<div class="row">
				<el-form-item label="施工许可证号:" prop="licenseKey">
					<el-input placeholder="请输入" v-model="form.licenseKey" />
				</el-form-item>
				<el-form-item label="施工许可发放时间:" prop="licenseCreateTime">
					<el-date-picker
						ref="licenseCreateTimeRef"
						class="date"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						v-model="form.licenseCreateTime"
						type="date"
						placeholder="选择日期"
						style="wdith: 100%"
					/>
					<div class="calendar" @click="licenseCreateTimeRef?.focus()">
						<el-icon class="icon"><Calendar /></el-icon>
					</div>
				</el-form-item>
			</div>
			<div class="row">
				<el-form-item label="安全监督站:" prop="safetySupervision">
					<el-input placeholder="请输入" v-model="form.safetySupervision" />
				</el-form-item>
				<el-form-item label="质量监督站:" prop="qualitySupervision">
					<el-input placeholder="请输入" v-model="form.qualitySupervision" />
				</el-form-item>
			</div>
			<div class="row">
				<el-form-item label="监督编号（安全）:" prop="safetySupervisionCode">
					<el-input placeholder="请输入" v-model="form.safetySupervisionCode" />
				</el-form-item>
				<el-form-item label="监督编号（质量）:" prop="qualitySupervisionCode">
					<el-input placeholder="请输入" v-model="form.qualitySupervisionCode" />
				</el-form-item>
			</div>
			<div class="row">
				<el-form-item label="安全监督员:" prop="safetySupervisionPerson">
					<el-input placeholder="请输入" v-model="form.safetySupervisionPerson" />
				</el-form-item>
				<el-form-item label="质量监督员:" prop="qualitySupervisionPerson">
					<el-input placeholder="请输入" v-model="form.qualitySupervisionPerson" />
				</el-form-item>
			</div>
			<div class="row">
				<el-form-item label="安全监督工程状态:" prop="safetySupervisionState">
					<el-input placeholder="请输入" v-model="form.safetySupervisionState"> </el-input>
					<!-- <el-select class="select" v-model="form.safetySupervisionState">
						<el-option
							v-for="item in engineeringUseOptions"
							:key="item.dictCode"
							:label="item.dictValue"
							:value="item.dictLabel"
						/>
					</el-select> -->
				</el-form-item>
				<el-form-item label="质量监督工程状态:" prop="qualitySupervisionState">
					<el-input placeholder="请输入" v-model="form.qualitySupervisionState"> </el-input>
				</el-form-item>
			</div>
			<div class="row">
				<el-form-item label="安全监督形象进度:" prop="safetySupervisionPlan">
					<el-input placeholder="请输入" v-model="form.safetySupervisionPlan"> </el-input>
				</el-form-item>
				<el-form-item label="质量监督形象进度:" prop="qualitySupervisionPlan">
					<el-input placeholder="请输入" v-model="form.qualitySupervisionPlan"> </el-input>
					<!-- <el-select class="select" v-model="form.qualitySupervisionPlan">
						<el-option
							v-for="item in engineeringUseOptions"
							:key="item.dictCode"
							:label="item.dictValue"
							:value="item.dictLabel"
						/>
					</el-select> -->
				</el-form-item>
			</div>
			<div class="row">
				<el-form-item label="合同开工日期:" prop="startTime">
					<el-date-picker
						ref="startTimeRef"
						class="date"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						v-model="form.startTime"
						type="date"
						placeholder="选择日期"
					/>
					<div class="calendar" @click="startTimeRef?.focus()">
						<el-icon class="icon"><Calendar /></el-icon>
					</div>
				</el-form-item>
				<el-form-item label="合同竣工日期:" prop="endTime">
					<el-date-picker
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						ref="endTimeRef"
						class="date"
						v-model="form.endTime"
						type="date"
						placeholder="选择日期"
					/>
					<div class="calendar" @click="endTimeRef?.focus()">
						<el-icon class="icon"><Calendar /></el-icon>
					</div>
				</el-form-item>
			</div>
		</el-form>

		<div class="table">
			<h4>单体工程</h4>
			<el-table
				:data="form.engineeringSingles"
				border
				max-height="340"
				class="el-table"
				:header-cell-style="{ backgroundColor: '#e1eeff', textAlign: 'center' }"
				:cell-style="{ textAlign: 'center' }"
			>
				<el-table-column prop="name" label="*单体工程名称">
					<template #default="{ row }">
						<el-input class="test" v-model="row.name" />
					</template>
				</el-table-column>
				<el-table-column prop="shape" label="结构形式">
					<template #default="{ row }">
						<el-select class="select" v-model="row.shape" size="small">
							<el-option v-for="item in structuralStyle" :key="item.dictCode" :label="item.dictValue" :value="item.dictLabel" />
						</el-select>
					</template>
				</el-table-column>
				<el-table-column prop="area" label="工程面积（㎡）">
					<template #default="{ row, $index }">
						<el-input class="test" v-model="row.area" @blur="e => validatorNumber(e, $index, 'area')" />
					</template>
				</el-table-column>
				<el-table-column prop="floorNum" label="地面层数">
					<template #default="{ row, $index }">
						<el-input class="test" v-model="row.floorNum" @blur="e => validatorNumber(e, $index, 'floorNum')" />
					</template>
				</el-table-column>
				<el-table-column prop="underNum" label="地下层数">
					<template #default="{ row, $index }">
						<el-input class="test" v-model="row.underNum" @blur="e => validatorNumber(e, $index, 'underNum')" />
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="备注">
					<template #default="{ row }">
						<el-input class="test" v-model="row.remark" />
					</template>
				</el-table-column>
				<el-table-column fixed="right">
					<template #header>
						<el-button type="primary" round @click="addEngineeringSingle"> 新增 </el-button>
					</template>

					<template #default="{ row }">
						<el-button type="danger" link @click="removeEngineeringSingle(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<footer class="footer">
				<el-button type="primary" @click="next(ruleFormRef)">下一步</el-button>
			</footer>
		</div>
		<AMap v-model="isOpen" @get-address="getAddress" />
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from "vue";
import { form, reset, rules } from "./overview";
import { getDicList } from "@/api/modules/jxjview";
import { getEngineeringName } from "@/api/modules/project";
import { ElDatePicker } from "element-plus";
import type { ReqQueryDictData, EngineeringSingle } from "@/api/types";
import { ElMessage, FormInstance, ElForm } from "element-plus";
import type { OverviewForm } from "./overview";
import AreaSelected from "@/components/ChinaAreaData/index.vue";
import AMap from "@/components/AMap/AMap.vue";
import { GlobalStore } from "@/stores";
import { DatetimeFormat } from "vue-i18n";

const ruleFormRef = ref<FormInstance>();

const store = GlobalStore();
const isOpen = ref(false);
const addressList = ref({
	province: "",
	city: "",
	area: "",
	district: ""
});
const emit = defineEmits<{
	(e: "next", data: OverviewForm): void;
}>();

type DictDataList = Array<ReqQueryDictData>;
type ElDatePickerType = typeof ElDatePicker;

const licenseCreateTimeRef = ref<ElDatePickerType>(),
	startTimeRef = ref<ElDatePickerType>(),
	endTimeRef = ref<ElDatePickerType>();

const engineeringTypeOptions = ref<DictDataList>([]),
	engineeringUseOptions = ref<DictDataList>([]);

const engineeringPurpose = ref<DictDataList>([]);
const structuralStyle = ref<DictDataList>([]);
const validatorNumber = (e: any, index: any, key: string) => {
	// 校验数字
	let pattern = /^[0-9][0-9]*$/;
	let dataValue = form.value.engineeringSingles[index][key];
	if (!pattern.test(dataValue)) {
		ElMessage.error("请输入纯数字");
		form.value.engineeringSingles[index][key] = "";
	}
	console.log(e, index);
};
const addEngineeringSingle = () => {
	form.value.engineeringSingles?.push({
		area: "",
		engineeringSn: "",
		floorNum: "",
		name: "",
		remark: "",
		shape: undefined,
		underNum: ""
	});
};
const projectName = ref("");

const handleGetAdress = (data: any) => {
	// form.value.address = data;
	form.value.province = data.name[0];
	form.value.city = data.name[1];
	form.value.district = data.name[2];
};

const openMap = () => {
	isOpen.value = true;
};

const getAddress = (e: any) => {
	isOpen.value = false;
	form.value.position = "经度：" + e.lng + " 纬度：" + e.lat;
	form.value.latitude = e.lat;
	form.value.longitude = e.lng;
	ElMessage.success("已获取地址");
};

const removeEngineeringSingle = (row: EngineeringSingle) => {
	const i = form.value.engineeringSingles?.indexOf(row);
	i != null && form.value.engineeringSingles?.splice(i, 1);
};

const next = async (formEl: FormInstance | undefined, params: any) => {
	let validatorBool = true;
	if (!formEl) return;
	console.log(form.value);
	await formEl.validate(async (valid, fields) => {
		if (valid) {
			if (new Date(form.value.endTime).getTime() < new Date(form.value.startTime).getTime()) {
				ElMessage({
					message: "竣工日期需大于等于开工日期",
					type: "error"
				});
				return;
			}
			if (form.value.engineeringSingles?.length == 0) {
				ElMessage({
					message: "请添加单体工程",
					type: "error"
				});
				return;
			}
			form.value.engineeringSingles?.map(item => {
				if (!item.name) {
					validatorBool = false;
				}
			});
			if (!validatorBool) {
				ElMessage({
					message: "请填写单体工程列表的工程名称",
					type: "error"
				});
				return;
			}
			emit("next", form.value);
		} else {
			console.log("error submit!", fields);
			ElMessage({
				showClose: true,
				message: "请完善表单信息！",
				type: "error"
			});
		}
	});
};

onMounted(async () => {
	const res2 = await getEngineeringName();
	form.value.projectName = res2.result.projectName; //获取项目名称
	const data = await getDicList({ dictType: "engineering_type" });
	engineeringTypeOptions.value = data.result;
	const res = await getDicList({ dictType: "engineering_purpose" }); //工程用途
	engineeringPurpose.value = res.result;
	const res1 = await getDicList({ dictType: "structural_style" });
	structuralStyle.value = res1.result;

	if (store.Message) {
		form.value = store.Message;
		form.value.position = "经度：" + store.Message.longitude + " 纬度：" + store.Message.latitude;
		addressList.value = store.Message;
	}
});

onUnmounted(() => reset());
</script>

<style lang="scss" scoped>
@import "./overview.scss";
.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>