wisdomisitezwfront-web/src/views/goverment/huizhou/preProjectManagement/components/ProjectSupervisionDiv/overview2.vue

<template>
	<div class="overview">
		<el-form ref="ruleFormRef" :model="form" label-width="160px" :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="项目名称2:" prop="engineeringName">
				<el-input placeholder="请输入" v-model="form.engineeringName" />
			</el-form-item>
			<div class="row">
				<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>
				<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>
			</div>
			<div class="row">
				<el-form-item label="项目总投资:" prop="engineeringCost">
					<el-input placeholder="请输入" v-model="form.engineeringCost" />
				</el-form-item>
				<el-form-item label="项目总面积（㎡）:" prop="engineeringArea">
					<el-input placeholder="请输入" v-model="form.engineeringArea" />
				</el-form-item>
			</div>
			<div class="row">
				<el-form-item label="项目状态:" prop="state">
					<el-select class="select" placeholder="请选择" v-model="form.state">
						<el-option v-for="item in engineeringState" :key="item.dictCode" :label="item.dictValue" :value="item.dictLabel" />
					</el-select>
				</el-form-item>
				<el-form-item label="项目概况:" prop="engineeringArea">
					<el-input placeholder="请输入" v-model="form.engineeringArea" />
				</el-form-item>
			</div>
			<div class="row">
				<el-form-item label="项目总长度（m）:" prop="engineeringLength">
					<el-input placeholder="请输入" v-model="form.engineeringLength" />
				</el-form-item>
				<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>
			</div>
			<div class="row">
				<el-form-item label="是否纳入三年滚动计划:" prop="engineeringLength">
					<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="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>
			</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="licenseCreateTime">
					<el-date-picker
						ref="licenseCreateTimeRef"
						class="date"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						v-model="form.licenseCreateTime"
						type="date"
						placeholder="选择日期"
					/>
					<div class="calendar" @click="licenseCreateTimeRef?.focus()">
						<el-icon class="icon"><Calendar /></el-icon>
					</div>
				</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="选择日期"
					/>
					<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="state">
					<el-select class="select" placeholder="请选择" v-model="form.state">
						<el-option v-for="item in engineeringState" :key="item.dictCode" :label="item.dictValue" :value="item.dictLabel" />
					</el-select>
				</el-form-item>
			</div>
		</el-form>

		<div class="table">
			<h4>附件</h4>
			<el-table
				:data="form.engineeringSingles"
				border
				class="el-table"
				:header-cell-style="{ textAlign: 'center' }"
				:cell-style="{ textAlign: 'center' }"
			>
				<el-table-column type="index" label="序号" width="200" />
				<el-table-column prop="dictValue" label="附件名称" />
				<el-table-column label="操作" width="200">
					<template #default="{ row }">
						<el-button type="primary" link size="small" @click="addAnnexFile(row)">添加</el-button>
					</template>
				</el-table-column>
			</el-table>

			<FileUpload v-model="showFilesUpload" @update:files="handlechange" :files="current.files" :reset="true" />
		</div>
		<footer class="footer">
			<el-button type="primary" @click="prev">上一步</el-button>
			<el-button type="primary" @click="next(ruleFormRef)">下一步</el-button>
		</footer>
		<AMap v-model="isOpen" @get-address="getAddress" />
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, onActivated, onDeactivated } 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 type { Options } from "@/views/goverment/approve/company/components/unit-table.vue";
import type { UploadFile } from "@/components/FilesUpload/FilesUpload.vue";
import FileUpload from "@/components/FilesUpload/FilesUpload.vue";
type AnnexFilesOptions = Options & {
	files: UploadFile[];
};
const ruleFormRef = ref<FormInstance>();

const showFilesUpload = ref(false);

const current = ref<AnnexFilesOptions>({} as AnnexFilesOptions);

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

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

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

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

const engineeringPurpose = ref<any>([]);
const engineeringState = ref<any>([]);
const engineeringNature = ref<any>([]);
const structuralStyle = ref<any>([]);
const addAnnexFile = (row: AnnexFilesOptions) => {
	// console.log(row);

	showFilesUpload.value = true;
	current.value = row;
	dictLabel.value = row.dictLabel;
};
const handlechange = e => {
	current.value.files = e.map(item => {
		item.label = current.value.dictLabel;
		return item;
	});
};
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 next = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate(async (valid, fields) => {
		if (valid) {
			emit("next", form.value);
		} else {
			console.log("error submit!", fields);
			ElMessage({
				showClose: true,
				message: "请完善表单信息！",
				type: "error"
			});
		}
	});
};
const prev = async () => {
	emit("prev");
};
onMounted(async () => {
	ruleFormRef.value?.clearValidate();
	// 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;
	}
	const res2 = await getDicList({ dictType: "engineering_state" });
	engineeringState.value = res2.result;
	const res3 = await getDicList({ dictType: "engineering_nature" });
	engineeringNature.value = res3.result;
	// if (store.Message) {
	// 	form.value = store.Message;
	// 	addressList.value = store.Message;
	// } else {
	// 	form.value = {};
	// 	addressList.value = {
	// 		province: "",
	// 		city: "",
	// 		area: "",
	// 		district: ""
	// 	};
	// }
});
onUnmounted(() => {
	ruleFormRef.value?.clearValidate();
	reset();
});
</script>

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