update 前端页面字段更新

add 登记页面读取信息接口
This commit is contained in:
2021-06-02 14:29:57 +08:00
parent 1488a0ef2d
commit 6e87e8add7
17 changed files with 985 additions and 92 deletions

View File

@@ -46,12 +46,12 @@
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="竣工验收备案" prop="completionRecord">
<a-form-model-item class="ant-row-flex" label="竣工验收备案" prop="completedRecord">
<a-upload
:custom-request="onFileUpload"
:file-list="form.completionRecord"
:file-list="form.completedRecord"
:showUploadList=" { showRemoveIcon: true, showDownloadIcon: true }"
@change="(data) => onFileChange(data, 'completionRecord')"
@change="(data) => onFileChange(data, 'completedRecord')"
@download="onFileDownload"
>
<a-button icon="upload" type="dashed">上传竣工验收备案</a-button>
@@ -60,12 +60,12 @@
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="监理文件" prop="monitor">
<a-form-model-item class="ant-row-flex" label="监理文件" prop="monitorDocument">
<a-upload
:custom-request="onFileUpload"
:file-list="form.monitor"
:file-list="form.monitorDocument"
:showUploadList=" { showRemoveIcon: true, showDownloadIcon: true }"
@change="(data) => onFileChange(data, 'monitor')"
@change="(data) => onFileChange(data, 'monitorDocument')"
@download="onFileDownload"
>
<a-button icon="upload" type="dashed">上传监理文件</a-button>

View File

@@ -15,28 +15,23 @@
<a-spin :spinning="loading">
<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="projectName">
<a-input name="projectName" placeholder="请输入项目名称" v-model="form.projectName" />
</a-form-model-item>
</a-col>
<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>
</a-col>
<a-col :span="24">
<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>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="土地性质" prop="natureLand">
<a-radio-group button-style="solid" v-model="form.natureLand">
<a-form-model-item class="ant-row-flex" label="土地性质" prop="landAttribute">
<a-radio-group button-style="solid" v-model="form.landAttribute">
<a-radio-button
:key="item.code"
:value="item.code"
v-for="item in codes.natureLand"
v-for="item in codes.landAttribute"
>{{ item.value }}</a-radio-button>
</a-radio-group>
</a-form-model-item>
@@ -198,14 +193,14 @@
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="设计使用年限" prop="useYear">
<a-form-model-item class="ant-row-flex" label="设计使用年限" prop="usefulYear">
<a-row type="flex">
<a-col flex="1">
<a-input-number
:min="0"
class="w-100-p"
placeholder="请输入设计使用年限"
v-model="form.useYear"
v-model="form.usefulYear"
/>
</a-col>
<a-col>
@@ -215,14 +210,14 @@
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="总建筑面积" prop="areaCount">
<a-form-model-item class="ant-row-flex" label="总建筑面积" prop="totalArea">
<a-row type="flex">
<a-col flex="1">
<a-input-number
:min="0"
class="w-100-p"
placeholder="请输入总建筑面积"
v-model="form.areaCount"
v-model="form.totalArea"
/>
</a-col>
<a-col>
@@ -268,7 +263,7 @@
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="每层每单元户数" prop="unitHouseholds">
<a-form-model-item class="ant-row-flex" label="每层每单元户数" prop="unitFloorHolds">
<a-row type="flex">
<a-col flex="1">
<a-input-number
@@ -276,7 +271,7 @@
:step="1"
class="w-100-p"
placeholder="请输入每层每单元户数"
v-model="form.unitHouseholds"
v-model="form.unitFloorHolds"
/>
</a-col>
<a-col>
@@ -317,7 +312,7 @@
</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="landLevelCount">
<a-form-model-item :colon="false" class="ant-row-flex" label="地上" prop="landFloorCount">
<a-row type="flex">
<a-col flex="1">
<a-input-number
@@ -325,7 +320,7 @@
:step="1"
class="w-100-p"
placeholder="请输入地上层"
v-model="form.landLevelCount"
v-model="form.landFloorCount"
/>
</a-col>
<a-col>
@@ -337,7 +332,7 @@
:colon="false"
class="ant-row-flex"
label="地下"
prop="undergroundLevelCount"
prop="underFloorCount"
>
<a-row type="flex">
<a-col flex="1">
@@ -346,7 +341,7 @@
:step="1"
class="w-100-p"
placeholder="请输入地下层"
v-model="form.undergroundLevelCount"
v-model="form.underFloorCount"
/>
</a-col>
<a-col>
@@ -354,7 +349,7 @@
</a-col>
</a-row>
</a-form-model-item>
<a-form-model-item :colon="false" class="ant-row-flex" label="总共" prop="levelCount">
<a-form-model-item :colon="false" class="ant-row-flex" label="总共" prop="totalFloor">
<a-row type="flex">
<a-col flex="1">
<a-input-number
@@ -363,7 +358,7 @@
class="w-100-p"
disabled
placeholder="请输入总层数"
v-model="form.levelCount"
v-model="form.totalFloor"
/>
</a-col>
<a-col>
@@ -379,12 +374,12 @@
<span class="yo-addon">地上第</span>
</a-col>
<a-col flex="1">
<a-form-model-item class="mr-none" prop="landBusiness1">
<a-form-model-item class="mr-none" prop="landBsFloorStart">
<a-input-number
:min="0"
:step="1"
placeholder="几"
v-model="form.landBusiness1"
v-model="form.landBsFloorStart"
/>
</a-form-model-item>
</a-col>
@@ -392,12 +387,12 @@
<span class="yo-addon"></span>
</a-col>
<a-col flex="1">
<a-form-model-item class="mr-none" prop="landBusiness2">
<a-form-model-item class="mr-none" prop="landBsFloorEnd">
<a-input-number
:min="0"
:step="1"
placeholder="几"
v-model="form.landBusiness2"
v-model="form.landBsFloorEnd"
/>
</a-form-model-item>
</a-col>
@@ -412,12 +407,12 @@
<span class="yo-addon">地上</span>
</a-col>
<a-col flex="1">
<a-form-model-item class="mr-none" prop="landBikeshed1">
<a-form-model-item class="mr-none" prop="landBikeFloorStart">
<a-input-number
:min="0"
:step="1"
placeholder="几"
v-model="form.landBikeshed1"
v-model="form.landBikeFloorStart"
/>
</a-form-model-item>
</a-col>
@@ -432,12 +427,12 @@
<span class="yo-addon">地上第</span>
</a-col>
<a-col flex="1">
<a-form-model-item class="mr-none" prop="landResidence1">
<a-form-model-item class="mr-none" prop="landResidenceFloorStart">
<a-input-number
:min="0"
:step="1"
placeholder="几"
v-model="form.landResidence1"
v-model="form.landResidenceFloorStart"
/>
</a-form-model-item>
</a-col>
@@ -445,12 +440,12 @@
<span class="yo-addon"></span>
</a-col>
<a-col flex="1">
<a-form-model-item class="mr-none" prop="landResidence2">
<a-form-model-item class="mr-none" prop="landResidenceFloorEnd">
<a-input-number
:min="0"
:step="1"
placeholder="几"
v-model="form.landResidence2"
v-model="form.landResidenceFloorEnd"
/>
</a-form-model-item>
</a-col>
@@ -473,10 +468,10 @@ const defaultForm = {
axisX: '',
axisY: '',
curtainWall: '1',
faceBrick: true,
whiteWash: true,
coating: true,
curtainWall: '0',
faceBrick: false,
whiteWash: false,
coating: false,
};
export default {
@@ -495,7 +490,7 @@ export default {
projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
buildingName: [{ required: true, message: '请输入幢名称', trigger: 'blur' }],
address: [{ required: true, message: '请输入坐落地址', trigger: 'blur' }],
natureLand: [{ 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' }],
@@ -504,18 +499,18 @@ export default {
curtainWall: [{ required: true, message: '请选择建筑幕墙', trigger: 'blur' }],
elevator: [{ required: true, message: '请选择电梯', trigger: 'blur' }],
completedDate: [{ required: true, message: '请选择竣工日期', trigger: 'blur' }],
useYear: [{ required: true, message: '请输入设计使用年限', trigger: 'blur' }],
areaCount: [{ 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' }],
unitHouseholds: [{ 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' }],
landLevelCount: [{ required: true, message: '请输入地上层', trigger: 'blur' }],
undergroundLevelCount: [{ required: true, message: '请输入地下层', trigger: 'blur' }],
landFloorCount: [{ required: true, message: '请输入地上层', trigger: 'blur' }],
underFloorCount: [{ required: true, message: '请输入地下层', trigger: 'blur' }],
},
/** 加载异步数据状态 */
@@ -524,7 +519,7 @@ export default {
/** 其他成员属性 */
/* ... */
codes: {
natureLand: [],
landAttribute: [],
houseStructureType: [],
houseSseismicGrade: [],
houseBaseInfo: [],
@@ -651,7 +646,7 @@ export default {
return this.$api
.sysDictTypeDropDowns({
code: [
'dic_nature_land',
'dic_land_attribute',
'dic_house_structure_type',
'dic_house_aseismic_grade',
'dic_house_base_info',
@@ -665,7 +660,7 @@ export default {
.then(
({
data: {
dic_nature_land,
dic_land_attribute,
dic_house_structure_type,
dic_house_aseismic_grade,
dic_house_base_info,
@@ -677,7 +672,7 @@ export default {
},
}) => {
this.codes = {
natureLand: dic_nature_land,
landAttribute: dic_land_attribute,
houseStructureType: dic_house_structure_type,
houseSseismicGrade: dic_house_aseismic_grade,
houseBaseInfo: dic_house_base_info,

View File

@@ -39,21 +39,21 @@
<a-form-model-item class="ant-row-flex" label="是否已通过解危鉴定" prop="fireproofGrade">
<a-switch />
</a-form-model-item>
<a-form-model-item class="ant-row-flex" label="房屋使用状态" prop="houseStatus">
<a-radio-group button-style="solid" v-model="form.houseStatus">
<a-form-model-item class="ant-row-flex" label="房屋使用状态" prop="usedStatus">
<a-radio-group button-style="solid" v-model="form.usedStatus">
<a-radio-button
:key="item.code"
:value="item.code"
v-for="item in codes.houseStatus"
v-for="item in codes.usedStatus"
>{{ item.value }}</a-radio-button>
</a-radio-group>
</a-form-model-item>
<a-form-model-item class="ant-row-flex" label="综合等级" prop="comprehensiveGrade">
<a-radio-group button-style="solid" v-model="form.comprehensiveGrade">
<a-form-model-item class="ant-row-flex" label="综合等级" prop="houseLevel">
<a-radio-group button-style="solid" v-model="form.houseLevel">
<a-radio-button
:key="item.code"
:value="item.code"
v-for="item in codes.houseComprehensiveGrade"
v-for="item in codes.houseLevel"
>{{ item.value }}</a-radio-button>
</a-radio-group>
</a-form-model-item>

View File

@@ -112,8 +112,8 @@
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="其他调查内容">
<a-textarea auto-size placeholder="请输入其他调查内容" />
<a-form-model-item class="ant-row-flex" label="其他调查内容" prop="otherContents">
<a-textarea auto-size placeholder="请输入其他调查内容" v-model="form.otherContents" />
</a-form-model-item>
</a-col>
</a-row>

View File

@@ -18,18 +18,18 @@
<!-- ... -->
<a-row :gutter="16" type="flex">
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="调查登记机构" prop="aegistrationAgency">
<a-input placeholder="请输入登记机构" v-model="form.aegistrationAgency" />
<a-form-model-item class="ant-row-flex" label="调查登记机构" prop="investigateAgency">
<a-input placeholder="请输入登记机构" v-model="form.investigateAgency" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="调查人员" prop="aegistrationUser">
<a-input placeholder="请输入调查人员" v-model="form.aegistrationUser" />
<a-form-model-item class="ant-row-flex" label="调查人员" prop="investigateUser">
<a-input placeholder="请输入调查人员" v-model="form.investigateUser" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="审核人员" prop="checkUser">
<a-input placeholder="请输入审核人员" v-model="form.checkUser" />
<a-form-model-item class="ant-row-flex" label="审核人员" prop="offlineAuditor">
<a-input placeholder="请输入审核人员" v-model="form.offlineAuditor" />
</a-form-model-item>
</a-col>
<a-col :span="12">
@@ -60,9 +60,9 @@ export default {
/** 验证格式 */
rules: {
/* ... */
aegistrationAgency: [{ required: true, message: '请输入调查登记机构' }],
aegistrationUser: [{ required: true, message: '请输入调查人员' }],
checkUser: [{ required: true, message: '请输入审核人员' }],
investigateAgency: [{ required: true, message: '请输入调查登记机构' }],
investigateUser: [{ required: true, message: '请输入调查人员' }],
offlineAuditor: [{ required: true, message: '请输入审核人员' }],
competentDepartment: [{ required: true, message: '请输入主管部门' }],
},

View File

@@ -106,6 +106,13 @@ export default {
active: false,
show: false,
},
{
title: '巡查登记',
name: 'patrol',
component: () => import('./patrol'),
active: false,
show: true,
},
],
loading: false,
@@ -121,7 +128,7 @@ export default {
created() {
this.loading = true;
setTimeout(() => {
this.$set(this.param, 'data', {});
this.$set(this.param, 'record', {});
this.loading = false;
}, 3000);
},

View File

@@ -0,0 +1,196 @@
<template>
<!--
整页表单的分片表单
v 1.0
2021-05-12
Lufthafen
-->
<a-form-model
:label-col="labelCol"
:model="form"
:rules="rules"
:wrapper-col="wrapperCol"
ref="form"
>
<a-spin :spinning="loading">
<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>
</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>
</a-col>
</a-row>
</a-spin>
</a-form-model>
</template>
<script>
/* 表单内容默认值 */
const defaultForm = {};
export default {
props: ['param', 'frame'],
data() {
return {
labelCol: { flex: '150px' },
wrapperCol: { flex: '1' },
/** 表单数据 */
form: {},
/** 验证格式 */
rules: {
/* ... */
patrolDate: [{ required: true, message: '请选择巡查日期', trigger: 'blur' }],
patrolUser: [{ required: true, message: '请输入巡查人/单位', trigger: 'blur' }],
},
/** 加载异步数据状态 */
loading: false,
/** 其他成员属性 */
codes: {},
};
},
async created() {
await this.onInit();
this.onFillData();
},
mounted() {},
async created() {
await this.onInit();
this.onFillData();
},
mounted() {
this.onMapInit();
},
beforeDestroy() {
if (this.map) this.map.destroy();
},
methods: {
/**
* 必要的方法
* 在打开编辑页时允许填充数据
*/
onFillData() {
/** 将默认数据覆盖到form */
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];
}
});
this.form = form;
},
/**
* 必要方法
* 验证表单并获取表单数据
*/
onGetData() {
return new Promise((reslove, reject) => {
this.$refs.form.validate((valid) => {
if (valid) {
const record = this.$_.cloneDeep(this.form);
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
/* ... */
reslove(record);
} else {
reject();
}
});
});
},
/**
* 必要的方法
* 在外部窗口进行保存时调用表单验证
*/
onValidate(callback) {
this.$refs.form.validate(callback);
},
/**
* 必要的方法
* 在外部窗口关闭或重置时对表单验证进行初始化
*/
onResetFields() {
setTimeout(() => {
this.$refs.form.resetFields();
/** 在这里可以初始化当前组件中其他属性 */
/* ... */
}, 300);
},
/**
* 必要方法
* 加载当前表单中所需要的异步数据
*/
async onInit() {
this.loading = true;
/** 可以在这里await获取一些异步数据 */
/* ... */
await this.onLoadCodes();
this.loading = false;
},
/** 当前组件的其他方法 */
/* ... */
onLoadCodes() {
return this.$api
.sysDictTypeDropDowns({
code: [
'dic_land_attribute',
'dic_house_structure_type',
'dic_house_aseismic_grade',
'dic_house_base_info',
'dic_house_insulation_material',
'dic_house_wall_material',
'dic_house_fireproof_grade',
'dic_house_building_curtain_wall',
'dic_house_elevator',
],
})
.then(
({
data: {
dic_land_attribute,
dic_house_structure_type,
dic_house_aseismic_grade,
dic_house_base_info,
dic_house_insulation_material,
dic_house_wall_material,
dic_house_fireproof_grade,
dic_house_building_curtain_wall,
dic_house_elevator,
},
}) => {
this.codes = {
landAttribute: dic_land_attribute,
houseStructureType: dic_house_structure_type,
houseSseismicGrade: dic_house_aseismic_grade,
houseBaseInfo: dic_house_base_info,
houseInsulationMaterial: dic_house_insulation_material,
houseWallMaterial: dic_house_wall_material,
houseFireproofGrade: dic_house_fireproof_grade,
houseBuildingCurtainWall: dic_house_building_curtain_wall,
houseElevator: dic_house_elevator,
};
}
);
},
},
};
</script>

View File

@@ -0,0 +1,124 @@
<template>
<container>
<!-- 如果不想使用锚点,删除a-row->a-col,只留内部的template层即可 -->
<a-row :gutter="16" type="flex">
<a-col flex="1">
<br />
<a-card class="yo-form-page--body">
<template v-for="(part, index) in parts">
<section :id="`form-${index}-${id}`" :key="index">
<h5 v-if="part.title">{{part.title}}</h5>
<component
:frame="frame"
:is="part.component"
:key="index"
:param="param"
ref="forms"
v-if="part.component"
/>
</section>
<a-divider :key="`divider-${index}`" v-if="index < parts.length - 1" />
</template>
</a-card>
</a-col>
<a-col flex="240px">
<a-anchor
:get-container="()=> $el.parentNode"
:offset-top="24"
:target-offset="48"
:wrapper-style="{ backgroundColor: 'transparent' }"
@click.prevent
>
<a-anchor-link
:href="`#form-${index}-${id}`"
:key="index"
:title="part.title"
v-for="(part, index) in parts"
/>
</a-anchor>
</a-col>
</a-row>
</container>
</template>
<script>
export default {
props: ['id', 'param', 'frame'],
data() {
return {
parts: [
{
title: '巡查基本情况',
component: () => import('./base'),
},
// {
// 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'),
// },
],
};
},
methods: {
/**
* 循环子组件中的onGetData
*/
onGetData() {
return new Promise(async (resolve, reject) => {
let formData = {},
flag = true;
for (let i = 0; i < this.$refs.forms.length; i++) {
const form = this.$refs.forms[i];
try {
const data = await form.onGetData();
formData = {
...formData,
...data,
};
} catch {
flag = false;
}
}
if (flag) {
resolve(formData);
} else {
reject();
}
});
},
},
};
</script>