407 lines
14 KiB
Vue
407 lines
14 KiB
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>
|