ewide/zsxt_nbzs_h5
22
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 表单代码优化

Browse Source
This commit is contained in:
自带大佬气场
2021-06-04 12:02:04 +08:00
parent 61b086ee8f
commit 4c34153d93
10 changed files with 177 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Web/src/main.js
View File

@@ -99,7 +99,7 @@ import './assets/style/app.less'
import { SETTING_KEY } from './common/storage'
const settings = JSON.parse(window.localStorage.getItem(SETTING_KEY))
const settings = JSON.parse(window.localStorage.getItem(SETTING_KEY)) || {}
Object.assign(settings, {
layout: 'top-nav',
container: 'container-fluid',

9
Web/src/pages/business/house/code/form/part.vue
View File

@@ -143,6 +143,8 @@
</a-form-model>
</template>
<script>
import { CITY } from '@/util/global';
/* 表单内容默认值 */
const defaultForm = {
/* ... */
@@ -374,7 +376,7 @@ export default {
onMapInit() {
return new Promise((resolve) => {
const city = '宁波市';
const city = CITY;
const district = new AMap.DistrictSearch({
subdistrict: 0,
@@ -391,7 +393,6 @@ export default {
// 挂载map到this,但不监听
this.map = new AMap.Map(this.$refs.map, {
city,
mask,
zoom: 12,
});
@@ -403,6 +404,8 @@ export default {
});
this.map.on('complete', () => {
this.map.setFitView();
this.map.setZoom(12);
resolve();
});
@@ -420,7 +423,7 @@ export default {
auto.on('select', ({ poi: { name: keywords, adcode } }) => {
this.map.clearMap();
marker = null;
this.marker = null;
placeSearch.search(keywords, (status, result) => {
const {
poiList: { pois },

143
Web/src/pages/business/house/info/form/base/building.vue
View File

@@ -30,7 +30,7 @@
<a-radio-group button-style="solid" v-model="form.houseInfo.landAttribute">
<a-radio-button
:key="item.code"
:value="item.code"
:value="+item.code"
v-for="item in codes.landAttribute"
>{{ item.value }}</a-radio-button>
</a-radio-group>
@@ -81,18 +81,18 @@
>
<a-radio-button
:key="item.code"
:value="item.code"
:value="+item.code"
v-for="item in codes.houseStructureType"
>{{ item.value }}</a-radio-button>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="抗震等级" prop="houseInfo.aseismicGrade">
<a-radio-group button-style="solid" v-model="form.houseInfo.aseismicGrade">
<a-form-model-item class="ant-row-flex" label="抗震等级" prop="houseInfo.seismicGrade">
<a-radio-group button-style="solid" v-model="form.houseInfo.seismicGrade">
<a-radio-button
:key="item.code"
:value="item.code"
:value="+item.code"
v-for="item in codes.houseSseismicGrade"
>{{ item.value }}</a-radio-button>
</a-radio-group>
@@ -103,7 +103,7 @@
<a-radio-group button-style="solid" v-model="form.houseInfo.baseInfo">
<a-radio-button
:key="item.code"
:value="item.code"
:value="+item.code"
v-for="item in codes.houseBaseInfo"
>{{ item.value }}</a-radio-button>
</a-radio-group>
@@ -163,7 +163,7 @@
<a-radio-group button-style="solid" v-model="form.houseInfo.curtainWall">
<a-radio-button
:key="item.code"
:value="item.code"
:value="+item.code"
v-for="item in codes.houseBuildingCurtainWall"
>{{ item.value }}</a-radio-button>
</a-radio-group>
@@ -239,15 +239,16 @@
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="总户数" prop="houseInfo.households">
<a-form-model-item class="ant-row-flex" label="总户数" prop="houseInfo.houseHolds">
<a-row type="flex">
<a-col flex="1">
<a-input-number
:min="0"
:precision="0"
:step="1"
class="w-100-p"
placeholder="请输入总户数"
v-model="form.houseInfo.households"
v-model="form.houseInfo.houseHolds"
/>
</a-col>
<a-col>
@@ -262,6 +263,7 @@
<a-col flex="1">
<a-input-number
:min="0"
:precision="0"
:step="1"
class="w-100-p"
placeholder="请输入房屋单元数"
@@ -280,6 +282,7 @@
<a-col flex="1">
<a-input-number
:min="0"
:precision="0"
:step="1"
class="w-100-p"
placeholder="请输入每层每单元户数"
@@ -334,6 +337,7 @@
<a-col flex="1">
<a-input-number
:min="0"
:precision="0"
:step="1"
class="w-100-p"
placeholder="请输入地上层"
@@ -355,6 +359,7 @@
<a-col flex="1">
<a-input-number
:min="0"
:precision="0"
:step="1"
class="w-100-p"
placeholder="请输入地下层"
@@ -376,6 +381,7 @@
<a-col flex="1">
<a-input-number
:min="0"
:precision="0"
:step="1"
class="w-100-p"
disabled
@@ -483,6 +489,8 @@
</a-form-model>
</template>
<script>
import { CITY } from '@/util/global';
/* 表单内容默认值 */
const defaultForm = {
/* ... */
@@ -496,7 +504,7 @@ const defaultForm = {
buildingName: null,
landAttribute: '1',
structureType: null,
aseismicGrade: null,
seismicGrade: null,
baseInfo: null,
insulationMaterial: null,
keepWarmMaterialRest: null,
@@ -510,7 +518,7 @@ const defaultForm = {
completedDate: null,
usefulYear: null,
totalArea: null,
households: null,
houseHolds: null,
units: null,
unitFloorHolds: null,
buildingUnit: null,
@@ -539,7 +547,9 @@ export default {
wrapperCol: { flex: '1' },
/** 表单数据 */
form: {},
form: {
...defaultForm,
},
/** 验证格式 */
rules: {
/* ... */
@@ -549,23 +559,23 @@ export default {
'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.seismicGrade': [{ 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' }],
'houseInfo.usefulYear': [{ required: true, message: '请输入设计使用年限' }],
'houseInfo.totalArea': [{ required: true, message: '请输入总建筑面积' }],
'houseInfo.houseHolds': [{ required: true, message: '请输入总户数' }],
'houseInfo.units': [{ required: true, message: '请输入房屋单元数' }],
'houseInfo.unitFloorHolds': [{ required: true, message: '请输入每层每单元户数' }],
// '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: '请输入地上层' }],
'houseInfo.underFloorCount': [{ required: true, message: '请输入地下层' }],
},
/** 加载异步数据状态 */
@@ -613,10 +623,7 @@ export default {
},
},
async created() {
this.form = this.$_.cloneDeep(defaultForm);
await this.onInit();
created() {
this.onFillData();
},
@@ -629,36 +636,30 @@ export default {
* 必要的方法
* 在打开编辑页时允许填充数据
*/
onFillData() {
/** 将默认数据覆盖到form */
const record = this.param && this.param.record;
async onFillData() {
this.loading = true;
{
await this.onLoadCodes();
const form = this.$_.cloneDeep(defaultForm);
/** 将默认数据覆盖到form */
const record = this.param && this.param.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];
}
});
if (record) {
this.$_.giveDeep(form, record);
}
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]);
}
});
}
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]);
}
});
this.loading = false;
},
/**
@@ -667,29 +668,24 @@ export default {
*/
onGetData() {
return new Promise((reslove, reject) => {
this.$refs.form.validate((valid) => {
this.$refs.form.validate((valid, err) => {
if (valid) {
const record = this.$_.cloneDeep(this.form);
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
/* ... */
if (record.houseInfo.completedDate && record.houseInfo.completedDate.constructor === Object) {
record.houseInfo.completedDate = record.houseInfo.completedDate.format('YYYY-MM-DD');
}
reslove(record);
} else {
reject();
reject(err);
}
});
});
},
/**
* 必要的方法
* 在外部窗口进行保存时调用表单验证
*/
onValidate(callback) {
this.$refs.form.validate(callback);
},
/**
* 必要的方法
* 在外部窗口关闭或重置时对表单验证进行初始化
@@ -703,18 +699,6 @@ export default {
}, 300);
},
/**
* 必要方法
* 加载当前表单中所需要的异步数据
*/
async onInit() {
this.loading = true;
/** 可以在这里await获取一些异步数据 */
/* ... */
await this.onLoadCodes();
this.loading = false;
},
/** 当前组件的其他方法 */
/* ... */
onLoadCodes() {
@@ -763,7 +747,7 @@ export default {
onMapInit() {
return new Promise((resolve) => {
const city = '宁波市';
const city = CITY;
const district = new AMap.DistrictSearch({
subdistrict: 0,
@@ -780,7 +764,6 @@ export default {
// 挂载map到this,但不监听
this.map = new AMap.Map(this.$refs.map, {
city,
mask,
zoom: 12,
});
@@ -792,6 +775,8 @@ export default {
});
this.map.on('complete', () => {
this.map.setFitView();
this.map.setZoom(12);
resolve();
});
@@ -809,7 +794,7 @@ export default {
auto.on('select', ({ poi: { name: keywords, adcode } }) => {
this.map.clearMap();
marker = null;
this.marker = null;
placeSearch.search(keywords, (status, result) => {
const {
poiList: { pois },

13
Web/src/pages/business/house/info/form/base/index.vue
View File

@@ -51,10 +51,10 @@ export default {
title: '建筑物基本信息',
component: () => import('./building'),
},
// {
// title: '权属情况',
// component: () => import('./ownership'),
// },
{
title: '权属情况',
component: () => import('./ownership'),
},
// {
// title: '管理情况',
// component: () => import('./manager'),
@@ -107,14 +107,13 @@ export default {
...formData,
...data,
};
} catch {
} catch (e) {
flag = false;
reject(e);
}
}
if (flag) {
resolve(formData);
} else {
reject();
}
});
},

50
Web/src/pages/business/house/info/form/base/ownership.vue
View File

@@ -247,7 +247,7 @@ export default {
},
async created() {
await this.onInit();
this.form = this.$_.cloneDeep(defaultForm);
this.onFillData();
},
@@ -256,16 +256,22 @@ export default {
* 必要的方法
* 在打开编辑页时允许填充数据
*/
onFillData() {
/** 将默认数据覆盖到form */
const record = this.param && this.param.record;
async onFillData() {
this.loading = true;
{
await this.onLoadCodes();
this.form = this.$_.cloneDeep({
...defaultForm,
...record,
/** 在此处添加其他默认数据转换 */
/* ... */
});
/** 将默认数据覆盖到form */
const record = this.param && this.param.record;
const form = this.$_.cloneDeep(defaultForm);
if (record) {
this.$_.giveDeep(form, record);
}
this.form = form;
}
this.loading = false;
},
/**
@@ -274,7 +280,7 @@ export default {
*/
onGetData() {
return new Promise((reslove, reject) => {
this.$refs.form.validate((valid) => {
this.$refs.form.validate((valid, err) => {
if (valid) {
const record = this.$_.cloneDeep(this.form);
@@ -283,20 +289,12 @@ export default {
reslove(record);
} else {
reject();
reject(err);
}
});
});
},
/**
* 必要的方法
* 在外部窗口进行保存时调用表单验证
*/
onValidate(callback) {
this.$refs.form.validate(callback);
},
/**
* 必要的方法
* 在外部窗口关闭或重置时对表单验证进行初始化
@@ -310,18 +308,6 @@ export default {
}, 300);
},
/**
* 必要方法
* 加载当前表单中所需要的异步数据
*/
async onInit() {
this.loading = true;
/** 可以在这里await获取一些异步数据 */
/* ... */
await this.onLoadCodes();
this.loading = false;
},
/** 当前组件的其他方法 */
/* ... */
onLoadCodes() {

26
Web/src/pages/business/house/info/form/index.vue
View File

@@ -78,6 +78,9 @@ export default {
data() {
return {
saving: false,
loading: true,
tabs: [
{
title: '房屋基本情况',
@@ -121,8 +124,6 @@ export default {
show: true,
},
],
loading: true,
};
},
@@ -133,7 +134,6 @@ export default {
},
created() {
this.loading = true;
this.$api.houseInfoGetByTaskId({ taskId: this.param.taskId }).then(({ data }) => {
this.$set(this.param, 'record', data);
this.loading = false;
@@ -152,7 +152,12 @@ export default {
...formData,
...data,
};
} catch {
} catch (e) {
if (e) {
Object.keys(e).forEach((p) => {
this.$message.error(e[p][0].message);
});
}
flag = false;
}
}
@@ -164,6 +169,19 @@ export default {
/**
* 对表单提交进行处理
*/
if (formData.houseCode) {
formData.houseCode.id = this.param.record.houseCode.id;
}
if (formData.patrolInfo && this.param.taskId) {
formData.patrolInfo.id = this.param.taskId;
}
this.saving = true;
this.$api.houseInfoSave(formData).finally(() => {
this.saving = false;
});
},
onTabChange(key) {

4
Web/src/pages/business/house/info/form/patrol/base.vue
View File

@@ -106,7 +106,7 @@ export default {
*/
onGetData() {
return new Promise((reslove, reject) => {
this.$refs.form.validate((valid) => {
this.$refs.form.validate((valid, err) => {
if (valid) {
const record = this.$_.cloneDeep(this.form);
@@ -115,7 +115,7 @@ export default {
reslove(record);
} else {
reject();
reject(err);
}
});
});

5
Web/src/pages/business/house/info/form/patrol/index.vue
View File

@@ -108,14 +108,13 @@ export default {
...formData,
...data,
};
} catch {
} catch (e) {
flag = false;
reject(e);
}
}
if (flag) {
resolve(formData);
} else {
reject();
}
});
},

47
Web/src/pages/business/statistics/summary/index.vue Normal file
View File

@@ -0,0 +1,47 @@
<template>
<div class="yo-form-page">
<div class="yo-form-page-layout">
<div class="yo-tab-external-mount">
<a-tabs @change="onTabChange">
<template v-for="(tab, index) in tabs">
<a-tab-pane :force-render="true" :key="index" :tab="tab.title" v-if="tab.show"></a-tab-pane>
</template>
</a-tabs>
<div class="yo-tab-external-mount-content">
<template v-for="(tab, index) in tabs">
<div
:class="tab.active ? 'yo-tab-external-tabpane-active' : 'yo-tab-external-tabpane-inactive'"
:key="index"
class="yo-tab-external-tabpane"
v-if="tab.show"
>
<p :key="n" v-for="n in 100">{{n}}</p>
</div>
</template>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tabs: [
{
title: '按房屋等级',
active: true,
show: true,
},
],
};
},
methods: {
onTabChange(key) {
this.tabs.forEach((p, i) => {
p.active = i === key;
});
},
},
};
</script>

10
Web/src/util/global/index.js
View File

@@ -28,4 +28,12 @@ export const getGlobal = () => {
return JSON.parse(decryptByDES(window.sessionStorage.getItem(GLOBAL_INFO_KEY)))
}
export const RSA_PUBLIC_KEY = '-----BEGIN PUBLIC KEY-----MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC273zAyijb3uX6O66VThrdfHtzZJn3d/SBM8qiETS7PijyNY3zNecAB+F/owxOWSB/6ojBo5Eu0FCiENxfpenTZB7sKrYu6NVH5gkfHLa6jz4pNzlGP93Q6RON4KjMZolAfRevBQ7vD6sOfJfMDnYi8xk+dRXcqc6PWY8fQiGs5QIDAQAB-----END PUBLIC KEY-----'
/**
* RSA公钥
*/
export const RSA_PUBLIC_KEY = '-----BEGIN PUBLIC KEY-----MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC273zAyijb3uX6O66VThrdfHtzZJn3d/SBM8qiETS7PijyNY3zNecAB+F/owxOWSB/6ojBo5Eu0FCiENxfpenTZB7sKrYu6NVH5gkfHLa6jz4pNzlGP93Q6RON4KjMZolAfRevBQ7vD6sOfJfMDnYi8xk+dRXcqc6PWY8fQiGs5QIDAQAB-----END PUBLIC KEY-----'
/**
* 城市名称
*/
export const CITY = '黄石市'