update 表单数据结构

This commit is contained in:
2021-06-02 15:33:24 +08:00
parent 6e87e8add7
commit 8a0d1286e7
5 changed files with 369 additions and 269 deletions

View File

@@ -392,7 +392,6 @@ export default {
// 挂载map到this,但不监听
this.map = new AMap.Map(this.$refs.map, {
city,
viewMode: '3D',
mask,
zoom: 12,
});

View File

@@ -16,18 +16,18 @@
<a-icon slot="indicator" spin type="loading" />
<a-row :gutter="16" type="flex">
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="幢名称" prop="buildingName">
<a-input placeholder="请输入幢名称" v-model="form.buildingName" />
<a-form-model-item class="ant-row-flex" label="幢名称" prop="houseInfo.buildingName">
<a-input placeholder="请输入幢名称" v-model="form.houseInfo.buildingName" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="坐落地址" prop="address">
<a-input placeholder="请输入坐落地址" v-model="form.address" />
<a-form-model-item class="ant-row-flex" label="坐落地址" prop="houseCode.address">
<a-input placeholder="请输入坐落地址" v-model="form.houseCode.address" />
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="土地性质" prop="landAttribute">
<a-radio-group button-style="solid" v-model="form.landAttribute">
<a-form-model-item class="ant-row-flex" label="土地性质" prop="houseInfo.landAttribute">
<a-radio-group button-style="solid" v-model="form.houseInfo.landAttribute">
<a-radio-button
:key="item.code"
:value="item.code"
@@ -40,24 +40,24 @@
<a-form-model-item class="ant-row-flex mb-none" label="地理坐标">
<a-row :gutter="16">
<a-col :span="12">
<a-form-model-item prop="axisX">
<a-form-model-item prop="houseCode.lng">
<a-input
class="yo-input-prefix-2"
disabled
placeholder="请在地图上选择坐标"
prefix="经度"
v-model="form.axisX"
v-model="form.houseCode.lng"
/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item prop="axisY">
<a-form-model-item prop="houseCode.lat">
<a-input
class="yo-input-prefix-2"
disabled
placeholder="请在地图上选择坐标"
prefix="纬度"
v-model="form.axisY"
v-model="form.houseCode.lat"
/>
</a-form-model-item>
</a-col>
@@ -73,8 +73,12 @@
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="结构类型" prop="structureType">
<a-radio-group button-style="solid" placeholder="请选择结构类型" v-model="form.structureType">
<a-form-model-item class="ant-row-flex" label="结构类型" prop="houseInfo.structureType">
<a-radio-group
button-style="solid"
placeholder="请选择结构类型"
v-model="form.houseInfo.structureType"
>
<a-radio-button
:key="item.code"
:value="item.code"
@@ -84,8 +88,8 @@
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="抗震等级" prop="aseismicGrade">
<a-radio-group button-style="solid" v-model="form.aseismicGrade">
<a-form-model-item class="ant-row-flex" label="抗震等级" prop="houseInfo.aseismicGrade">
<a-radio-group button-style="solid" v-model="form.houseInfo.aseismicGrade">
<a-radio-button
:key="item.code"
:value="item.code"
@@ -95,8 +99,8 @@
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="基础情况" prop="baseInfo">
<a-radio-group button-style="solid" v-model="form.baseInfo">
<a-form-model-item class="ant-row-flex" label="基础情况" prop="houseInfo.baseInfo">
<a-radio-group button-style="solid" v-model="form.houseInfo.baseInfo">
<a-radio-button
:key="item.code"
:value="item.code"
@@ -106,8 +110,12 @@
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="外墙保温材料" prop="insulationMaterial">
<a-checkbox-group v-model="form.insulationMaterial">
<a-form-model-item
class="ant-row-flex"
label="外墙保温材料"
prop="houseInfo.insulationMaterial"
>
<a-checkbox-group v-model="form.houseInfo.insulationMaterial">
<a-checkbox
:key="item.code"
:value="item.code"
@@ -117,15 +125,15 @@
<a-input
class="w-300"
placeholder="请输入其他外墙保温材料"
v-if="form.insulationMaterial && form.insulationMaterial.indexOf(codes.houseInsulationMaterial[codes.houseInsulationMaterial.length - 1].code) >= 0"
v-model="form.keepWarmMaterialRest"
v-if="form.houseInfo.insulationMaterial && form.houseInfo.insulationMaterial.indexOf(codes.houseInsulationMaterial[codes.houseInsulationMaterial.length - 1].code) >= 0"
v-model="form.houseInfo.keepWarmMaterialRest"
/>
</a-checkbox-group>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="外墙墙体材料" prop="wallMaterial">
<a-checkbox-group v-model="form.wallMaterial">
<a-form-model-item class="ant-row-flex" label="外墙墙体材料" prop="houseInfo.wallMaterial">
<a-checkbox-group v-model="form.houseInfo.wallMaterial">
<a-checkbox
:key="item.code"
:value="item.code"
@@ -136,12 +144,12 @@
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" prop="fireproofGrade">
<a-form-model-item class="ant-row-flex" prop="houseInfo.fireproofGrade">
<span slot="label">
外墙外保温材料
<br />防火等级
</span>
<a-radio-group button-style="solid" v-model="form.fireproofGrade">
<a-radio-group button-style="solid" v-model="form.houseInfo.fireproofGrade">
<a-radio-button
:key="item.code"
:value="item.code"
@@ -151,8 +159,8 @@
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="建筑幕墙" prop="curtainWall">
<a-radio-group button-style="solid" v-model="form.curtainWall">
<a-form-model-item class="ant-row-flex" label="建筑幕墙" prop="houseInfo.curtainWall">
<a-radio-group button-style="solid" v-model="form.houseInfo.curtainWall">
<a-radio-button
:key="item.code"
:value="item.code"
@@ -162,23 +170,23 @@
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="有无外墙面砖" prop="faceBrick">
<a-switch v-model="form.faceBrick" />
<a-form-model-item class="ant-row-flex" label="有无外墙面砖" prop="houseInfo.faceBrick">
<a-switch v-model="form.houseInfo.faceBrick" />
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="有无外墙粉刷" prop="whiteWash">
<a-switch v-model="form.whiteWash" />
<a-form-model-item class="ant-row-flex" label="有无外墙粉刷" prop="houseInfo.whiteWash">
<a-switch v-model="form.houseInfo.whiteWash" />
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="有无外墙涂料" prop="coating">
<a-switch v-model="form.coating" />
<a-form-model-item class="ant-row-flex" label="有无外墙涂料" prop="houseInfo.coating">
<a-switch v-model="form.houseInfo.coating" />
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="电梯" prop="elevator">
<a-radio-group button-style="solid" v-model="form.elevator">
<a-form-model-item class="ant-row-flex" label="电梯" prop="houseInfo.elevator">
<a-radio-group button-style="solid" v-model="form.houseInfo.elevator">
<a-radio-button
:key="item.code"
:value="item.code"
@@ -188,19 +196,23 @@
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="竣工日期" prop="completedDate">
<a-date-picker class="w-100-p" placeholder="请选择竣工日期" v-model="form.completedDate" />
<a-form-model-item class="ant-row-flex" label="竣工日期" prop="houseInfo.completedDate">
<a-date-picker
class="w-100-p"
placeholder="请选择竣工日期"
v-model="form.houseInfo.completedDate"
/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="设计使用年限" prop="usefulYear">
<a-form-model-item class="ant-row-flex" label="设计使用年限" prop="houseInfo.usefulYear">
<a-row type="flex">
<a-col flex="1">
<a-input-number
:min="0"
class="w-100-p"
placeholder="请输入设计使用年限"
v-model="form.usefulYear"
v-model="form.houseInfo.usefulYear"
/>
</a-col>
<a-col>
@@ -210,14 +222,14 @@
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="总建筑面积" prop="totalArea">
<a-form-model-item class="ant-row-flex" label="总建筑面积" prop="houseInfo.totalArea">
<a-row type="flex">
<a-col flex="1">
<a-input-number
:min="0"
class="w-100-p"
placeholder="请输入总建筑面积"
v-model="form.totalArea"
v-model="form.houseInfo.totalArea"
/>
</a-col>
<a-col>
@@ -227,7 +239,7 @@
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="总户数" prop="households">
<a-form-model-item class="ant-row-flex" label="总户数" prop="houseInfo.households">
<a-row type="flex">
<a-col flex="1">
<a-input-number
@@ -235,7 +247,7 @@
:step="1"
class="w-100-p"
placeholder="请输入总户数"
v-model="form.households"
v-model="form.houseInfo.households"
/>
</a-col>
<a-col>
@@ -245,7 +257,7 @@
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="房屋单元数" prop="units">
<a-form-model-item class="ant-row-flex" label="房屋单元数" prop="houseInfo.units">
<a-row type="flex">
<a-col flex="1">
<a-input-number
@@ -253,7 +265,7 @@
:step="1"
class="w-100-p"
placeholder="请输入房屋单元数"
v-model="form.units"
v-model="form.houseInfo.units"
/>
</a-col>
<a-col>
@@ -263,7 +275,7 @@
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="每层每单元户数" prop="unitFloorHolds">
<a-form-model-item class="ant-row-flex" label="每层每单元户数" prop="houseInfo.unitFloorHolds">
<a-row type="flex">
<a-col flex="1">
<a-input-number
@@ -271,7 +283,7 @@
:step="1"
class="w-100-p"
placeholder="请输入每层每单元户数"
v-model="form.unitFloorHolds"
v-model="form.houseInfo.unitFloorHolds"
/>
</a-col>
<a-col>
@@ -281,38 +293,43 @@
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="建设单位" prop="buildingUnit">
<a-input placeholder="请输入建设单位" v-model="form.buildingUnit" />
<a-form-model-item class="ant-row-flex" label="建设单位" prop="houseInfo.buildingUnit">
<a-input placeholder="请输入建设单位" v-model="form.houseInfo.buildingUnit" />
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="建设单位联系人" prop="buildingUnitUser">
<a-input placeholder="请输入建设单位联系人" v-model="form.buildingUnitUser" />
<a-form-model-item class="ant-row-flex" label="建设单位联系人" prop="houseInfo.buildingUnitUser">
<a-input placeholder="请输入建设单位联系人" v-model="form.houseInfo.buildingUnitUser" />
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="建设单位联系电话" prop="buildingUnitTel">
<a-input placeholder="请输入建设单位联系电话" v-model="form.buildingUnitTel" />
<a-form-model-item class="ant-row-flex" label="建设单位联系电话" prop="houseInfo.buildingUnitTel">
<a-input placeholder="请输入建设单位联系电话" v-model="form.houseInfo.buildingUnitTel" />
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="设计单位" prop="desingerUnit">
<a-input placeholder="请输入设计单位" v-model="form.desingerUnit" />
<a-form-model-item class="ant-row-flex" label="设计单位" prop="houseInfo.desingerUnit">
<a-input placeholder="请输入设计单位" v-model="form.houseInfo.desingerUnit" />
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="施工单位" prop="constructionUnit">
<a-input placeholder="请输入施工单位" v-model="form.constructionUnit" />
<a-form-model-item class="ant-row-flex" label="施工单位" prop="houseInfo.constructionUnit">
<a-input placeholder="请输入施工单位" v-model="form.houseInfo.constructionUnit" />
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="监理单位" prop="monitorUnit">
<a-input placeholder="请输入监理单位" v-model="form.monitorUnit" />
<a-form-model-item class="ant-row-flex" label="监理单位" prop="houseInfo.monitorUnit">
<a-input placeholder="请输入监理单位" v-model="form.houseInfo.monitorUnit" />
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex ant-form-inline mb-none" label="建筑层数">
<a-form-model-item :colon="false" class="ant-row-flex" label="地上" prop="landFloorCount">
<a-form-model-item
:colon="false"
class="ant-row-flex"
label="地上"
prop="houseInfo.landFloorCount"
>
<a-row type="flex">
<a-col flex="1">
<a-input-number
@@ -320,7 +337,7 @@
:step="1"
class="w-100-p"
placeholder="请输入地上层"
v-model="form.landFloorCount"
v-model="form.houseInfo.landFloorCount"
/>
</a-col>
<a-col>
@@ -332,7 +349,7 @@
:colon="false"
class="ant-row-flex"
label="地下"
prop="underFloorCount"
prop="houseInfo.underFloorCount"
>
<a-row type="flex">
<a-col flex="1">
@@ -341,7 +358,7 @@
:step="1"
class="w-100-p"
placeholder="请输入地下层"
v-model="form.underFloorCount"
v-model="form.houseInfo.underFloorCount"
/>
</a-col>
<a-col>
@@ -349,7 +366,12 @@
</a-col>
</a-row>
</a-form-model-item>
<a-form-model-item :colon="false" class="ant-row-flex" label="总共" prop="totalFloor">
<a-form-model-item
:colon="false"
class="ant-row-flex"
label="总共"
prop="houseInfo.totalFloor"
>
<a-row type="flex">
<a-col flex="1">
<a-input-number
@@ -358,7 +380,7 @@
class="w-100-p"
disabled
placeholder="请输入总层数"
v-model="form.totalFloor"
v-model="form.houseInfo.totalFloor"
/>
</a-col>
<a-col>
@@ -374,12 +396,12 @@
<span class="yo-addon">地上第</span>
</a-col>
<a-col flex="1">
<a-form-model-item class="mr-none" prop="landBsFloorStart">
<a-form-model-item class="mr-none" prop="houseInfo.landBsFloorStart">
<a-input-number
:min="0"
:step="1"
placeholder="几"
v-model="form.landBsFloorStart"
v-model="form.houseInfo.landBsFloorStart"
/>
</a-form-model-item>
</a-col>
@@ -387,12 +409,12 @@
<span class="yo-addon"></span>
</a-col>
<a-col flex="1">
<a-form-model-item class="mr-none" prop="landBsFloorEnd">
<a-form-model-item class="mr-none" prop="houseInfo.landBsFloorEnd">
<a-input-number
:min="0"
:step="1"
placeholder="几"
v-model="form.landBsFloorEnd"
v-model="form.houseInfo.landBsFloorEnd"
/>
</a-form-model-item>
</a-col>
@@ -407,12 +429,12 @@
<span class="yo-addon">地上</span>
</a-col>
<a-col flex="1">
<a-form-model-item class="mr-none" prop="landBikeFloorStart">
<a-form-model-item class="mr-none" prop="houseInfo.landBikeFloorStart">
<a-input-number
:min="0"
:step="1"
placeholder="几"
v-model="form.landBikeFloorStart"
v-model="form.houseInfo.landBikeFloorStart"
/>
</a-form-model-item>
</a-col>
@@ -427,12 +449,12 @@
<span class="yo-addon">地上第</span>
</a-col>
<a-col flex="1">
<a-form-model-item class="mr-none" prop="landResidenceFloorStart">
<a-form-model-item class="mr-none" prop="houseInfo.landResidenceFloorStart">
<a-input-number
:min="0"
:step="1"
placeholder="几"
v-model="form.landResidenceFloorStart"
v-model="form.houseInfo.landResidenceFloorStart"
/>
</a-form-model-item>
</a-col>
@@ -440,12 +462,12 @@
<span class="yo-addon"></span>
</a-col>
<a-col flex="1">
<a-form-model-item class="mr-none" prop="landResidenceFloorEnd">
<a-form-model-item class="mr-none" prop="houseInfo.landResidenceFloorEnd">
<a-input-number
:min="0"
:step="1"
placeholder="几"
v-model="form.landResidenceFloorEnd"
v-model="form.houseInfo.landResidenceFloorEnd"
/>
</a-form-model-item>
</a-col>
@@ -464,14 +486,48 @@
/* 表单内容默认值 */
const defaultForm = {
/* ... */
address: '',
axisX: '',
axisY: '',
houseCode: {
address: null,
lng: null,
lat: null,
},
curtainWall: '0',
faceBrick: false,
whiteWash: false,
coating: false,
houseInfo: {
buildingName: null,
landAttribute: '1',
structureType: null,
aseismicGrade: null,
baseInfo: null,
insulationMaterial: null,
keepWarmMaterialRest: null,
wallMaterial: null,
fireproofGrade: null,
curtainWall: null,
faceBrick: null,
whiteWash: null,
coating: null,
elevator: null,
completedDate: null,
usefulYear: null,
totalArea: null,
households: null,
units: null,
unitFloorHolds: null,
buildingUnit: null,
buildingUnitUser: null,
buildingUnitTel: null,
desingerUnit: null,
constructionUnit: null,
monitorUnit: null,
landFloorCount: null,
underFloorCount: null,
totalFloor: null,
landBsFloorStart: null,
landBsFloorEnd: null,
landBikeFloorStart: null,
landResidenceFloorStart: null,
landResidenceFloorEnd: null,
},
};
export default {
@@ -487,30 +543,29 @@ export default {
/** 验证格式 */
rules: {
/* ... */
projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
buildingName: [{ required: true, message: '请输入幢名称', trigger: 'blur' }],
address: [{ required: true, message: '请输入坐落地址', trigger: 'blur' }],
landAttribute: [{ required: true, message: '请选择土地性质', trigger: 'blur' }],
axisX: [{ required: true, message: '请在地图上选择坐标', trigger: 'blur' }],
axisY: [{ required: true, message: '请在地图上选择坐标', trigger: 'blur' }],
structureType: [{ required: true, message: '请选择结构类型', trigger: 'blur' }],
aseismicGrade: [{ required: true, message: '请选择抗震等级', trigger: 'blur' }],
baseInfo: [{ required: true, message: '请选择基础情况', trigger: 'blur' }],
curtainWall: [{ required: true, message: '请选择建筑幕墙', trigger: 'blur' }],
elevator: [{ required: true, message: '请选择电梯', trigger: 'blur' }],
completedDate: [{ required: true, message: '请选择竣工日期', trigger: 'blur' }],
usefulYear: [{ required: true, message: '请输入设计使用年限', trigger: 'blur' }],
totalArea: [{ required: true, message: '请输入总建筑面积', trigger: 'blur' }],
households: [{ required: true, message: '请输入总户数', trigger: 'blur' }],
units: [{ required: true, message: '请输入房屋单元数', trigger: 'blur' }],
unitFloorHolds: [{ required: true, message: '请输入每层每单元户数', trigger: 'blur' }],
buildingUnit: [{ required: true, message: '请输入建设单位', trigger: 'blur' }],
buildingUnitUser: [{ required: true, message: '请输入建设单位联系', trigger: 'blur' }],
buildingUnitTel: [{ required: true, message: '请输入建设单位联系电话', trigger: 'blur' }],
desingerUnit: [{ required: true, message: '请输入设计单位', trigger: 'blur' }],
constructionUnit: [{ required: true, message: '请输入施工单位', trigger: 'blur' }],
landFloorCount: [{ required: true, message: '请输入地层', trigger: 'blur' }],
underFloorCount: [{ required: true, message: '请输入地下层', trigger: 'blur' }],
'houseInfo.buildingName': [{ required: true, message: '请输入名称', trigger: 'blur' }],
'houseCode.address': [{ required: true, message: '请输入坐落地址', trigger: 'blur' }],
'houseInfo.landAttribute': [{ required: true, message: '请选择土地性质' }],
'houseCode.lng': [{ required: true, message: '请在地图上选择坐标', trigger: 'blur' }],
'houseCode.lat': [{ required: true, message: '请在地图上选择坐标', trigger: 'blur' }],
'houseInfo.structureType': [{ required: true, message: '请选择结构类型' }],
'houseInfo.aseismicGrade': [{ required: true, message: '请选择抗震等级' }],
'houseInfo.baseInfo': [{ required: true, message: '请选择基础情况' }],
'houseInfo.curtainWall': [{ required: true, message: '请选择建筑幕墙' }],
'houseInfo.elevator': [{ required: true, message: '请选择电梯' }],
'houseInfo.completedDate': [{ required: true, message: '请选择竣工日期' }],
'houseInfo.usefulYear': [{ required: true, message: '请输入设计使用年限', trigger: 'blur' }],
'houseInfo.totalArea': [{ required: true, message: '请输入总建筑面积', trigger: 'blur' }],
'houseInfo.households': [{ required: true, message: '请输入总户数', trigger: 'blur' }],
'houseInfo.units': [{ required: true, message: '请输入房屋单元数', trigger: 'blur' }],
'houseInfo.unitFloorHolds': [{ required: true, message: '请输入每层每单元数', trigger: 'blur' }],
'houseInfo.buildingUnit': [{ required: true, message: '请输入建设单位', trigger: 'blur' }],
'houseInfo.buildingUnitUser': [{ required: true, message: '请输入建设单位联系人', trigger: 'blur' }],
'houseInfo.buildingUnitTel': [{ required: true, message: '请输入建设单位联系电话', trigger: 'blur' }],
'houseInfo.desingerUnit': [{ required: true, message: '请输入设计单位', trigger: 'blur' }],
'houseInfo.constructionUnit': [{ required: true, message: '请输入施工单位', trigger: 'blur' }],
'houseInfo.landFloorCount': [{ required: true, message: '请输入地上层', trigger: 'blur' }],
'houseInfo.underFloorCount': [{ required: true, message: '请输入地层', trigger: 'blur' }],
},
/** 加载异步数据状态 */
@@ -533,38 +588,38 @@ export default {
},
watch: {
'form.insulationMaterial'(value, oldValue) {
'form.houseInfo.insulationMaterial'(value, oldValue) {
// 选中"无"时全不选,反之取消选择"无"
if (value.indexOf('0') >= 0 && oldValue.indexOf('0') === -1) {
this.form.insulationMaterial = ['0'];
} else if (value.indexOf('0') >= 0 && value.length > 1) {
this.form.insulationMaterial.splice(value.indexOf('0'), 1);
if (value) {
if (value.indexOf('0') >= 0 && oldValue.indexOf('0') === -1) {
this.form.houseInfo.insulationMaterial = ['0'];
} else if (value.indexOf('0') >= 0 && value.length > 1) {
this.form.houseInfo.insulationMaterial.splice(value.indexOf('0'), 1);
}
}
},
'form.curtainWall'(value) {
'form.houseInfo.curtainWall'(value) {
this.frame.onTogglePane(!!+value, 'curtainWall');
},
'form.faceBrick'(value) {
'form.houseInfo.faceBrick'(value) {
this.frame.onTogglePane(value, 'faceBrick');
},
'form.whiteWash'(value) {
'form.houseInfo.whiteWash'(value) {
this.frame.onTogglePane(value, 'whiteWash');
},
'form.coating'(value) {
'form.houseInfo.coating'(value) {
this.frame.onTogglePane(value, 'coating');
},
},
async created() {
this.form = this.$_.cloneDeep(defaultForm);
await this.onInit();
this.onFillData();
},
mounted() {
this.onMapInit();
},
beforeDestroy() {
if (this.map) this.map.destroy();
},
@@ -578,11 +633,31 @@ export default {
/** 将默认数据覆盖到form */
const record = this.param && this.param.record;
this.form = this.$_.cloneDeep({
...defaultForm,
...record,
/** 在此处添加其他默认数据转换 */
/* ... */
const form = this.$_.cloneDeep(defaultForm);
if (record) {
// 此处因业务复杂, 所有数据必定包裹在单独节点中, 所以需要两层循环
Object.keys(form).forEach((p) => {
if (record.hasOwnProperty(p) && record[p]) {
const _form = form[p],
_record = record[p];
Object.keys(form[p]).forEach((q) => {
if (_record.hasOwnProperty(q) && (_record[q] !== null) & (_record[q] !== undefined)) {
_form[q] = _record[q];
}
});
}
});
}
this.form = form;
this.$nextTick(async () => {
await this.onMapInit();
if (this.form.houseCode.lng && this.form.houseCode.lat) {
this.setMarker([this.form.houseCode.lng, this.form.houseCode.lat]);
this.map.setCenter([this.form.houseCode.lng, this.form.houseCode.lat]);
}
});
},
@@ -687,95 +762,106 @@ export default {
},
onMapInit() {
const city = '宁波市';
return new Promise((resolve) => {
const city = '宁波市';
const district = new AMap.DistrictSearch({
subdistrict: 0,
extensions: 'all',
level: 'city',
});
const district = new AMap.DistrictSearch({
subdistrict: 0,
extensions: 'all',
level: 'city',
});
district.search(city, (status, result) => {
const bounds = result.districtList[0].boundaries;
const mask = [];
for (let i = 0; i < bounds.length; i += 1) {
mask.push([bounds[i]]);
}
// 挂载map到this,但不监听
this.map = new AMap.Map(this.$refs.map, { city, viewMode: '3D', mask });
const geocoder = new AMap.Geocoder({ city });
let marker;
const setMarker = (position) => {
if (marker) {
marker.setPosition(position);
} else {
marker = new AMap.Marker({
map: this.map,
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
position,
offset: new AMap.Pixel(-13, -30),
});
district.search(city, (status, result) => {
const bounds = result.districtList[0].boundaries;
const mask = [];
for (let i = 0; i < bounds.length; i += 1) {
mask.push([bounds[i]]);
}
geocoder.getAddress(position, (status, result) => {
if (status === 'complete' && result.regeocode) {
this.onSetPosition(result.regeocode.formattedAddress, position);
} else {
console.error('根据经纬度查询地址失败');
}
// 挂载map到this,但不监听
this.map = new AMap.Map(this.$refs.map, {
city,
mask,
zoom: 12,
});
};
this.map.on('click', (e) => {
setMarker(e.lnglat);
});
const geocoder = new AMap.Geocoder({ city });
const auto = new AMap.AutoComplete({
input: this.$refs['map-search'].$el.querySelector('input'),
city,
citylimit: true,
});
this.map.on('click', (e) => {
this.setMarker(e.lnglat, geocoder);
});
const placeSearch = new AMap.PlaceSearch({
city,
citylimit: true,
pageSize: 1,
});
this.map.on('complete', () => {
resolve();
});
auto.on('select', ({ poi: { name: keywords, adcode } }) => {
this.map.clearMap();
marker = null;
placeSearch.search(keywords, (status, result) => {
const {
poiList: { pois },
} = result;
pois.forEach((p) => {
setMarker(p.location);
const auto = new AMap.AutoComplete({
input: this.$refs['map-search'].$el.querySelector('input'),
city,
citylimit: true,
});
const placeSearch = new AMap.PlaceSearch({
city,
citylimit: true,
pageSize: 1,
});
auto.on('select', ({ poi: { name: keywords, adcode } }) => {
this.map.clearMap();
marker = null;
placeSearch.search(keywords, (status, result) => {
const {
poiList: { pois },
} = result;
pois.forEach((p) => {
this.setMarker(p.location, geocoder);
});
this.map.setFitView();
});
this.map.setFitView();
});
for (let i = 0; i < bounds.length; i += 1) {
new AMap.Polyline({
path: bounds[i],
strokeColor: '#ccc',
strokeWeight: 4,
map: this.map,
});
}
});
for (let i = 0; i < bounds.length; i += 1) {
new AMap.Polyline({
path: bounds[i],
strokeColor: '#ccc',
strokeWeight: 4,
map: this.map,
});
}
});
},
setMarker(position, geocoder) {
if (this.marker) {
this.marker.setPosition(position);
} else {
this.marker = new AMap.Marker({
map: this.map,
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
position,
offset: new AMap.Pixel(-13, -30),
});
}
if (geocoder) {
geocoder.getAddress(position, (status, result) => {
if (status === 'complete' && result.regeocode) {
this.onSetPosition(result.regeocode.formattedAddress, position);
} else {
console.error('根据经纬度查询地址失败');
}
});
}
},
onSetPosition(address, { lng, lat }) {
Object.assign(this.form, {
Object.assign(this.form.houseCode, {
address,
axisX: lng.toString(),
axisY: lat.toString(),
lng: lng.toString(),
lat: lat.toString(),
});
},
},

View File

@@ -51,42 +51,42 @@ export default {
title: '建筑物基本信息',
component: () => import('./building'),
},
{
title: '权属情况',
component: () => import('./ownership'),
},
{
title: '管理情况',
component: () => import('./manager'),
},
{
title: '调查情况',
component: () => import('./investigation'),
},
{
title: '鉴定治理',
component: () => import('./identification'),
},
{
title: '图纸资料存档处',
component: () => import('./drawing'),
},
{
title: '相关附件资料',
component: () => import('./attachments'),
},
{
title: '物业维修资金',
component: () => import('./fund'),
},
{
title: '建筑概貌',
component: () => import('./aspect'),
},
{
title: '调查单位',
component: () => import('./unit'),
},
// {
// title: '权属情况',
// component: () => import('./ownership'),
// },
// {
// title: '管理情况',
// component: () => import('./manager'),
// },
// {
// title: '调查情况',
// component: () => import('./investigation'),
// },
// {
// title: '鉴定治理',
// component: () => import('./identification'),
// },
// {
// title: '图纸资料存档处',
// component: () => import('./drawing'),
// },
// {
// title: '相关附件资料',
// component: () => import('./attachments'),
// },
// {
// title: '物业维修资金',
// component: () => import('./fund'),
// },
// {
// title: '建筑概貌',
// component: () => import('./aspect'),
// },
// {
// title: '调查单位',
// component: () => import('./unit'),
// },
],
};
},

View File

@@ -1,6 +1,10 @@
<template>
<div class="yo-form-page">
<div class="yo-form-page-layout">
<a-spin :spinning="loading" class="w-100-p h-100-p" tip="表单加载中..." v-if="loading">
<a-icon slot="indicator" spin type="loading" />
<div title="用于撑高spin"></div>
</a-spin>
<div class="yo-form-page-layout" v-else>
<!-- 底部工具栏(需放在前面) -->
<div class="yo-form-page--bar yo-form-page--bar--with-tab">
<container>
@@ -20,12 +24,15 @@
<div :style="{ paddingBottom: 0 }" class="yo-form-page--header">
<container>
<a-descriptions :column="4" title>
<a-descriptions-item label="区县(市)">测试区</a-descriptions-item>
<a-descriptions-item label="街道(乡镇)">测试街道</a-descriptions-item>
<a-descriptions-item label="社区">欧阳社区</a-descriptions-item>
<a-descriptions-item label="片区">片区一22明湖片区</a-descriptions-item>
<a-descriptions-item :span="2" label="编号">宁波市-测试区-测试街道-欧阳社区-项目十二(项目十二)-001</a-descriptions-item>
<a-descriptions-item :span="2" label="编码">330266066001012001</a-descriptions-item>
<a-descriptions-item label="区县(市)">{{param.record.houseCode.areaName}}</a-descriptions-item>
<a-descriptions-item label="街道(乡镇)">{{param.record.houseCode.roadName}}</a-descriptions-item>
<a-descriptions-item label="社区">{{param.record.houseCode.commName}}</a-descriptions-item>
<a-descriptions-item label="片区">{{param.record.houseCode.zoneName}}</a-descriptions-item>
<a-descriptions-item
:span="2"
label="编号"
>{{`${param.record.houseCode.areaName}-${param.record.houseCode.roadName}-${param.record.houseCode.commName}-${param.record.houseCode.projectFullName}-${`000${param.record.houseCode.no}`.slice(-3)}`}}</a-descriptions-item>
<a-descriptions-item :span="2" label="编码">{{param.record.houseCode.houseCode}}</a-descriptions-item>
</a-descriptions>
</container>
</div>
@@ -115,7 +122,7 @@ export default {
},
],
loading: false,
loading: true,
};
},
@@ -127,10 +134,10 @@ export default {
created() {
this.loading = true;
setTimeout(() => {
this.$set(this.param, 'record', {});
this.$api.houseInfoGetByTaskId({ taskId: this.param.taskId }).then(({ data }) => {
this.$set(this.param, 'record', data);
this.loading = false;
}, 3000);
});
},
methods: {

View File

@@ -16,13 +16,17 @@
<a-icon slot="indicator" spin type="loading" />
<a-row :gutter="16" type="flex">
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="巡查日期" prop="patrolDate">
<a-date-picker class="w-100-p" placeholder="请选择巡查日期" v-model="form.patrolDate" />
<a-form-model-item class="ant-row-flex" label="巡查日期" prop="patrolInfo.patrolDate">
<a-date-picker
class="w-100-p"
placeholder="请选择巡查日期"
v-model="form.patrolInfo.patrolDate"
/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="巡查人/单位" prop="patrolUser">
<a-input placeholder="请输入巡查人/单位" v-model="form.patrolUser" />
<a-form-model-item class="ant-row-flex" label="巡查人/单位" prop="patrolInfo.patrolUser">
<a-input placeholder="请输入巡查人/单位" v-model="form.patrolInfo.patrolUser" />
</a-form-model-item>
</a-col>
</a-row>
@@ -31,7 +35,12 @@
</template>
<script>
/* 表单内容默认值 */
const defaultForm = {};
const defaultForm = {
patrolInfo: {
patrolDate: null,
patrolUser: null,
},
};
export default {
props: ['param', 'frame'],
data() {
@@ -44,8 +53,8 @@ export default {
/** 验证格式 */
rules: {
/* ... */
patrolDate: [{ required: true, message: '请选择巡查日期', trigger: 'blur' }],
patrolUser: [{ required: true, message: '请输入巡查人/单位', trigger: 'blur' }],
'patrolInfo.patrolDate': [{ required: true, message: '请选择巡查日期', trigger: 'blur' }],
'patrolInfo.patrolUser': [{ required: true, message: '请输入巡查人/单位', trigger: 'blur' }],
},
/** 加载异步数据状态 */
loading: false,
@@ -54,25 +63,14 @@ export default {
codes: {},
};
},
async created() {
this.form = this.$_.cloneDeep(defaultForm);
await this.onInit();
this.onFillData();
},
mounted() {},
async created() {
await this.onInit();
this.onFillData();
},
mounted() {
this.onMapInit();
},
beforeDestroy() {
if (this.map) this.map.destroy();
},
methods: {
/**
* 必要的方法
@@ -83,11 +81,21 @@ export default {
const record = this.param && this.param.record;
const form = this.$_.cloneDeep(defaultForm);
Object.keys(form).forEach((p) => {
if (record.hasOwnProperty(p)) {
form[p] = record[p];
}
});
if (record) {
// 此处因业务复杂, 所有数据必定包裹在单独节点中, 所以需要两层循环
Object.keys(form).forEach((p) => {
if (record.hasOwnProperty(p) && record[p]) {
const _form = form[p],
_record = record[p];
Object.keys(form[p]).forEach((q) => {
if (_record.hasOwnProperty(q) && (_record[q] !== null) & (_record[q] !== undefined)) {
_form[q] = _record[q];
}
});
}
});
}
this.form = form;
},