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

update 完成房屋详情编辑的第一个页签

Browse Source
This commit is contained in:
自带大佬气场
2021-05-14 21:43:20 +08:00
parent c08128cc0f
commit 7c0b4f37af
28 changed files with 3067 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Web/package.json
View File

@@ -19,6 +19,7 @@
"less-loader": "4.1.0",
"lodash": "^4.17.21",
"nprogress": "^0.2.0",
"photoswipe": "^4.1.3",
"swiper": "^6.5.0",
"vue": "^2.6.11",
"vue-awesome-swiper": "^4.1.1",

2
Web/public/index.html
View File

@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=c6a4832b8afbde0361b36630a3fc5bdc"></script>
<script src="https://webapi.amap.com/maps?v=2.0&key=c6a4832b8afbde0361b36630a3fc5bdc"></script>
</head>
<body>
<noscript>

3
Web/src/assets/style/app.less
View File

@@ -27,10 +27,13 @@
@import './lib/select.less';
@import './lib/checkbox.less';
@import './lib/cascader.less';
@import './lib/upload.less';
@import './lib/dropdown.less';
@import './lib/modal.less';
@import './lib/tree-layout.less';
@import './lib/authority-view.less';
@import './lib/icon-selector.less';
@import './lib/anchor.less';
@import './theme/primary.less';
// @import './lib/font-weight.less';
@import './public.less';

11
Web/src/assets/style/lib/anchor.less Normal file
View File

@@ -0,0 +1,11 @@
@import (reference) '~@/assets/style/extend.less';
.ant-anchor-ink-ball {
width: 2px;
height: 28px;
transform: translate(-50%, -10px);
border: 0;
border-radius: 0;
background-color: @primary-color;
}

46
Web/src/assets/style/lib/form.less
View File

@@ -282,3 +282,49 @@
}
}
}
.ant-form-item-required {
@keyframes required-animation {
// 0% {
// transform: translateX(-5px) scale(.1);
// opacity: .1;
// }
// 15% {
// transform: translateX(-3px) scale(.5);
// opacity: .5;
// }
// 30%,
// 70% {
// transform: translateX(0) scale(1);
// opacity: 1;
// }
// 85% {
// transform: translateX(-3px) scale(.5);
// opacity: .5;
// }
// 100% {
// transform: translateX(-5px) scale(.1);
// opacity: .1;
// }
}
&::before {
margin-top: -4px;
content: '';
animation: required-animation 2s linear infinite;
vertical-align: middle;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 5px solid #f5222d;
background: none;
}
}

4
Web/src/assets/style/lib/input.less
View File

@@ -1,6 +1,10 @@
@import (reference) '~@/assets/style/extend.less';
/* input前缀有2个字符的 */
.yo-input-prefix-2 {
.ant-input:not(:first-child) {
padding-left: 45px;
}
}
.yo-addon {
padding: 0 @padding-xs;
}

29
Web/src/assets/style/lib/upload.less Normal file
View File

@@ -0,0 +1,29 @@
@import (reference) '~@/assets/style/extend.less';
.ant-upload-list-text {
display: flex;
flex-wrap: wrap;
.ant-upload-list-item {
height: auto;
margin-right: @padding-xs;
}
.ant-upload-list-item-info {
position: relative;
padding: @padding-xxs @padding-xs;
border: @border-width-base @border-style-base @border-color-split;
.anticon-paper-clip {
top: 7.5px;
}
>span {
display: flex;
}
}
.ant-upload-list-item-card-actions {
position: relative;
margin-left: @padding-xs;
white-space: nowrap;
}
}

47
Web/src/assets/style/lib/width-height.less
View File

@@ -1,25 +1,26 @@
@import (reference) '~@/assets/style/extend.less';
.w-100-p {
width: 100%;
}
.w-100 {
width: 100px;
}
.w-200 {
width: 200px;
}
.w-300 {
width: 300px;
}
.h-100-p {
height: 100%;
}
.h-100 {
height: 100px;
}
.h-200 {
height: 200px;
}
.h-300 {
height: 300px;
.width-height (@i) when (@i <=20) {
@n : @i * 50;
.w-@{n} {
width: @n * 1px;
}
.h-@{n} {
height: @n * 1px;
}
.w-@{n}-p {
width: @n * 1%;
}
.h-@{n}-p {
height: @n * 1%;
}
.width-height(@i + 1);
}
.width-height(0);

32
Web/src/assets/style/public.less Normal file
View File

@@ -0,0 +1,32 @@
@import (reference) './extend.less';
.yo-map {
&-container {
position: relative;
padding: @padding-sm;
border: @border-width-base @border-style-base @border-color-split;
border-radius: @border-radius-base;
background-color: @white;
.amap-icon {
img {
width: 25px;
}
}
}
&--search {
position: absolute;
top: @padding-md;
left: @padding-md;
z-index: 20;
width: 25%;
min-width: 300px;
padding: @padding-xxs @padding-sm;
background: fade(@black, 20%);
box-shadow: @box-shadow-base;
backdrop-filter: blur(5px);
}
}

4
Web/src/common/api/requests/sys/dictManage.js
View File

@@ -19,6 +19,10 @@ export default {
* 获取字典类型下所有字典，举例，返回格式为：[{code:"M",value:"男"},{code:"F",value:"女"}]
*/
sysDictTypeDropDown: ['/sysDictType/dropDown', 'get'],
/**
* 获取字典类型下所有的字典,可批量获取
*/
sysDictTypeDropDowns: ['/sysDictType/dropDowns', 'get'],
/**
* 获取所有字典，启动时加入缓存使用
*/

56
Web/src/components/photoSwipe/index.vue Normal file
View File

@@ -0,0 +1,56 @@
<template>
<div aria-hidden="true" class="pswp" role="dialog" tabindex="-1">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
</template>
<script>
import 'photoswipe/dist/photoswipe.css';
import 'photoswipe/dist/default-skin/default-skin.css';
import PhotoSwipe from 'photoswipe';
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default';
const defaultOptions = {
index: 0,
bgOpacity: 0.75,
};
export default {
methods: {
initPhotoSwipe(items = [], options) {
const pswpElement = this.$el;
const gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, Object.assign(defaultOptions, options));
gallery.init();
},
},
};
</script>

10
Web/src/components/yoImage/index.js
View File

@@ -1,4 +1,4 @@
import { ArrayBufferToBase64 } from '@/util/file'
import { PreviewFileBase64 } from '@/util/file'
export default {
props: {
@@ -31,11 +31,9 @@ export default {
methods: {
getSrc() {
return this.$api.sysFileInfoPreview({ id: this.id }).then(async ({ data }) => {
const base64 = await ArrayBufferToBase64(data)
return base64
})
async getSrc() {
const base64 = await PreviewFileBase64(this.id)
return base64
}
},

217
Web/src/pages/business/house/houseInfo/form/base/aspect.vue Normal file
View File

@@ -0,0 +1,217 @@
<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-form-model-item class="ant-row-flex" label="外立面照片" prop="facadePhoto">
<a-upload
:custom-request="onFileUpload"
:file-list="form.facadePhoto"
:preview-file="onPreviewFile"
@change="onFileChange"
@preview="onFilePreview"
list-type="picture-card"
>
<div>
<a-icon type="plus" />
<div class="ant-upload-text">外立面照片</div>
</div>
</a-upload>
</a-form-model-item>
</a-spin>
<PhotoSwipe ref="photo-swipe" />
</a-form-model>
</template>
<script>
import { PreviewFile, BlobToBase64 } from '@/util/file';
import PhotoSwipe from '@/components/photoSwipe';
/* 表单内容默认值 */
const defaultForm = {
/* ... */
facadePhoto: [],
};
export default {
components: {
PhotoSwipe,
},
props: ['param'],
data() {
return {
labelCol: { flex: '150px' },
wrapperCol: { flex: '1' },
/** 表单数据 */
form: {},
/** 验证格式 */
rules: {
/* ... */
facadePhoto: [{ required: true, message: '请上传外立面照片' }],
},
/** 加载异步数据状态 */
loading: false,
/** 其他成员属性 */
/* ... */
previewVisible: false,
previewImage: '',
};
},
async created() {
await this.onInit();
this.onFillData();
},
methods: {
/**
* 必要的方法
* 在打开编辑页时允许填充数据
*/
async onFillData() {
/** 将默认数据覆盖到form */
const record = this.param && this.param.record,
facadePhoto = [];
// 从数据中的文件id转换成uploader所需的格式
if (record) {
const fileList = record.facadePhoto.split(',');
for (let i = 0; i < fileList.length; i++) {
const file = await PreviewFile(fileList[i]);
const base64 = await BlobToBase64(file);
facadePhoto.push({
uid: fileList[i],
response: fileList[i], // 用于和新上传的文件一同回传
name: file.name,
url: base64,
status: 'done',
});
}
}
this.form = this.$_.cloneDeep({
...defaultForm,
...record,
/** 在此处添加其他默认数据转换 */
/* ... */
facadePhoto,
});
},
/**
* 必要方法
* 验证表单并获取表单数据
*/
onGetData() {
return new Promise((reslove, reject) => {
this.$refs.form.validate((valid) => {
if (valid) {
const record = this.$_.cloneDeep(this.form);
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
/* ... */
record.facadePhoto = record.facadePhoto.map((p) => p.response).join(',');
reslove(record);
} else {
reject();
}
});
});
},
/**
* 必要的方法
* 在外部窗口进行保存时调用表单验证
*/
onValidate(callback) {
this.$refs.form.validate(callback);
},
/**
* 必要的方法
* 在外部窗口关闭或重置时对表单验证进行初始化
*/
onResetFields() {
setTimeout(() => {
this.$refs.form.resetFields();
/** 在这里可以初始化当前组件中其他属性 */
/* ... */
}, 300);
},
/**
* 必要方法
* 加载当前表单中所需要的异步数据
*/
async onInit() {
this.loading = true;
/** 可以在这里await获取一些异步数据 */
/* ... */
this.loading = false;
},
/** 当前组件的其他方法 */
/* ... */
/* 上传图片相关 Begin */
onFileChange({ fileList }) {
this.form.facadePhoto = fileList;
},
onPreviewFile(file) {
return new Promise((resolve) => {
const base64 = BlobToBase64(file);
resolve(base64);
});
},
async onFileUpload({ file, onProgress, onSuccess, onError }) {
onProgress();
const fd = new FormData();
fd.append('file', file);
try {
const { data: fileId } = await this.$api.sysFileInfoUpload(fd);
onSuccess(fileId);
} catch {
onError();
}
},
onFilePreview(file) {
const items = [];
for (let i = 0; i < this.form.facadePhoto.length; i++) {
const _file = this.form.facadePhoto[i];
const img = new Image();
const src = _file.url || _file.thumbUrl;
img.src = src;
items.push({
src,
w: img.naturalWidth,
h: img.naturalHeight,
});
}
this.$refs['photo-swipe'].initPhotoSwipe(items, {
index: this.form.facadePhoto.indexOf(file),
});
},
/* 上传图片相关 End */
},
};
</script>

252
Web/src/pages/business/house/houseInfo/form/base/attachments.vue Normal file
View File

@@ -0,0 +1,252 @@
<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 type="flex">
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="立项文件" prop="anEntryDocument">
<a-upload
:custom-request="onFileUpload"
:file-list="form.anEntryDocument"
:showUploadList=" { showRemoveIcon: true, showDownloadIcon: true }"
@change="(data) => onFileChange(data, 'anEntryDocument')"
@download="onFileDownload"
>
<a-button icon="upload" type="dashed">上传立项文件</a-button>
</a-upload>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="规划许可" prop="planningPermission">
<a-upload
:custom-request="onFileUpload"
:file-list="form.planningPermission"
:showUploadList=" { showRemoveIcon: true, showDownloadIcon: true }"
@change="(data) => onFileChange(data, 'planningPermission')"
@download="onFileDownload"
>
<a-button icon="upload" type="dashed">上传规划许可</a-button>
</a-upload>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="竣工验收备案" prop="completionRecord">
<a-upload
:custom-request="onFileUpload"
:file-list="form.completionRecord"
:showUploadList=" { showRemoveIcon: true, showDownloadIcon: true }"
@change="(data) => onFileChange(data, 'completionRecord')"
@download="onFileDownload"
>
<a-button icon="upload" type="dashed">上传竣工验收备案</a-button>
</a-upload>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="监理文件" prop="monitor">
<a-upload
:custom-request="onFileUpload"
:file-list="form.monitor"
:showUploadList=" { showRemoveIcon: true, showDownloadIcon: true }"
@change="(data) => onFileChange(data, 'monitor')"
@download="onFileDownload"
>
<a-button icon="upload" type="dashed">上传监理文件</a-button>
</a-upload>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="鉴定报告" prop="identificationReport">
<a-upload
:custom-request="onFileUpload"
:file-list="form.identificationReport"
:showUploadList=" { showRemoveIcon: true, showDownloadIcon: true }"
@change="(data) => onFileChange(data, 'identificationReport')"
@download="onFileDownload"
>
<a-button icon="upload" type="dashed">上传鉴定报告</a-button>
</a-upload>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="其他附件" prop="otherDocument">
<a-upload
:custom-request="onFileUpload"
:file-list="form.otherDocument"
:showUploadList=" { showRemoveIcon: true, showDownloadIcon: true }"
@change="(data) => onFileChange(data, 'otherDocument')"
@download="onFileDownload"
>
<a-button icon="upload" type="dashed">上传其他附件</a-button>
</a-upload>
</a-form-model-item>
</a-col>
</a-row>
</a-spin>
</a-form-model>
</template>
<script>
import { GetFileName } from '@/util/file';
/* 表单内容默认值 */
const defaultForm = {
/* ... */
anEntryDocument: [],
planningPermission: [],
completionRecord: [],
monitor: [],
identificationReport: [],
otherDocument: [],
};
export default {
props: ['param'],
data() {
return {
labelCol: { flex: '150px' },
wrapperCol: { flex: '1' },
/** 表单数据 */
form: {},
/** 验证格式 */
rules: {
/* ... */
},
/** 加载异步数据状态 */
loading: false,
/** 其他成员属性 */
/* ... */
};
},
async created() {
await this.onInit();
this.onFillData();
},
methods: {
/**
* 必要的方法
* 在打开编辑页时允许填充数据
*/
onFillData() {
/** 将默认数据覆盖到form */
const record = this.param && this.param.record;
this.form = this.$_.cloneDeep({
...defaultForm,
...record,
/** 在此处添加其他默认数据转换 */
/* ... */
});
},
/**
* 必要方法
* 验证表单并获取表单数据
*/
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获取一些异步数据 */
/* ... */
this.loading = false;
},
/** 当前组件的其他方法 */
/* ... */
/* 上传下载文件相关 Begin */
async onFileUpload({ file, onProgress, onSuccess, onError }) {
onProgress();
const fd = new FormData();
fd.append('file', file);
try {
const { data: fileId } = await this.$api.sysFileInfoUpload(fd);
onSuccess(fileId);
} catch {
onError();
}
},
onFileChange({ fileList }, key) {
this.form[key] = fileList;
},
onFileDownload(file) {
this.$api.sysFileInfoDownload({ id: file.response }).then((res) => {
const url = window.URL.createObjectURL(res.data);
const fileName = GetFileName(res.headers['content-disposition']);
const a = document.createElement('a');
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
a.remove();
});
},
/* 上传图片相关 End */
},
};
</script>

644
Web/src/pages/business/house/houseInfo/form/base/building.vue
View File

@@ -1,8 +1,8 @@
<template>
<!--
普通编辑窗体
v 1.2
2021-04-30
整页表单的分片表单
v 1.0
2021-05-12
Lufthafen
-->
<a-form-model
@@ -47,192 +47,445 @@
</a-col>
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="项目名称" prop="projectName">
<a-input v-model="form.projectName" />
<a-input placeholder="请输入项目名称" v-model="form.projectName" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="幢名称">
<a-input />
<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-form-model-item class="ant-row-flex" label="坐落地址">
<a-input />
<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="坐落地址">
<a-input />
<a-form-model-item class="ant-row-flex" label="土地性质" prop="natureLand">
<a-radio-group button-style="solid" v-model="form.natureLand">
<a-radio-button
:key="item.code"
:value="item.code"
v-for="item in codes.natureLand"
>{{ item.value }}</a-radio-button>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="地理坐标">
<a-form-model-item class="ant-row-flex mb-none" label="地理坐标">
<a-row :gutter="16">
<a-col :span="12">
<a-form-model-item class="mb-none">
<a-input class="yo-input-prefix-2" disabled placeholder="请在地图上选择坐标" prefix="经度" />
<a-form-model-item prop="axisX">
<a-input
class="yo-input-prefix-2"
disabled
placeholder="请在地图上选择坐标"
prefix="经度"
v-model="form.axisX"
/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item class="mb-none">
<a-input class="yo-input-prefix-2" disabled placeholder="请在地图上选择坐标" prefix="纬度" />
<a-form-model-item prop="axisY">
<a-input
class="yo-input-prefix-2"
disabled
placeholder="请在地图上选择坐标"
prefix="纬度"
v-model="form.axisY"
/>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model-item>
<a-form-model-item :colon="false" :label="true" class="ant-row-flex">
<div class="yo-map-container">
缺搜索
<div class="h-300" ref="map"></div>
<div class="yo-map--search">
<a-input-search allow-clear placeholder="请输入关键字" ref="map-search" />
</div>
<div class="h-500" ref="map"></div>
</div>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="结构类型">
<a-select>
<a-form-model-item class="ant-row-flex" label="结构类型" prop="structureType">
<a-select placeholder="请选择结构类型" v-model="form.structureType">
<a-select-option
:key="item.code"
:value="item.code"
v-for="item in houseStructureType"
v-for="item in codes.houseStructureType"
>{{ item.value }}</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="抗震等级">
<a-radio-group button-style="solid">
<a-form-model-item class="ant-row-flex" label="抗震等级" prop="aseismicGrade">
<a-radio-group button-style="solid" v-model="form.aseismicGrade">
<a-radio-button
:key="item.code"
:value="item.code"
v-for="item in houseSseismicGrade"
v-for="item in codes.houseSseismicGrade"
>{{ item.value }}</a-radio-button>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="基础情况">
<a-radio-group button-style="solid">
<a-form-model-item class="ant-row-flex" label="基础情况" prop="baseInfo">
<a-radio-group button-style="solid" v-model="form.baseInfo">
<a-radio-button
:key="item.code"
:value="item.code"
v-for="item in houseBaseInfo"
v-for="item in codes.houseBaseInfo"
>{{ item.value }}</a-radio-button>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="外墙保温材料" prop="insulationMaterial">
<a-checkbox-group button-style="solid" v-model="form.insulationMaterial">
<a-checkbox-group v-model="form.insulationMaterial">
<a-checkbox
:key="item.code"
:value="item.code"
v-for="item in houseInsulationMaterial"
class="mb-xs"
v-for="item in codes.houseInsulationMaterial"
>{{ item.value }}</a-checkbox>
<a-input
class="w-300"
placeholder="请输入其他外墙保温材料"
v-if="form.insulationMaterial && form.insulationMaterial.indexOf(houseInsulationMaterial[houseInsulationMaterial.length - 1].code) >= 0"
v-if="form.insulationMaterial && form.insulationMaterial.indexOf(codes.houseInsulationMaterial[codes.houseInsulationMaterial.length - 1].code) >= 0"
v-model="form.keepWarmMaterialRest"
/>
</a-checkbox-group>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="外墙墙体材料"></a-form-model-item>
<a-form-model-item class="ant-row-flex" label="外墙墙体材料" prop="wallMaterial">
<a-checkbox-group v-model="form.wallMaterial">
<a-checkbox
:key="item.code"
:value="item.code"
class="mb-xs"
v-for="item in codes.houseWallMaterial"
>{{ item.value }}</a-checkbox>
</a-checkbox-group>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="外墙外保温材料防火等级"></a-form-model-item>
<a-form-model-item class="ant-row-flex" label="外墙外保温材料防火等级" prop="fireproofGrade">
<a-radio-group button-style="solid" v-model="form.fireproofGrade">
<a-radio-button
:key="item.code"
:value="item.code"
v-for="item in codes.houseFireproofGrade"
>{{ item.value }}</a-radio-button>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="建筑幕墙"></a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="外墙面砖"></a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="外墙粉刷"></a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="外墙涂料"></a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="电梯"></a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="竣工日期">
<a-date-picker class="w-100-p" />
<a-form-model-item class="ant-row-flex" label="建筑幕墙" prop="curtainWall">
<a-radio-group button-style="solid" v-model="form.curtainWall">
<a-radio-button
:key="item.code"
:value="item.code"
v-for="item in codes.houseBuildingCurtainWall"
>{{ item.value }}</a-radio-button>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="设计使用年限">
<a-input-number :formatter="(number) => `${number}年`" :min="0" class="w-100-p" />
<a-form-model-item class="ant-row-flex" label="有无外墙面砖" prop="exteriorWallTile">
<a-switch v-model="form.exteriorWallTile" />
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="总建筑面积"></a-form-model-item>
<a-form-model-item class="ant-row-flex" label="有无外墙粉刷" prop="whiteWash">
<a-switch v-model="form.whiteWash" />
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="总户数"></a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="房屋单元数"></a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="每层每单元户数"></a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="建设单位"></a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="建设单位联系人"></a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="建设单位联系电话"></a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="设计单位"></a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="施工单位"></a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="监理单位"></a-form-model-item>
<a-form-model-item class="ant-row-flex" label="有无外墙涂料" prop="coating">
<a-switch v-model="form.coating" />
</a-form-model-item>
</a-col>
<a-col :span="24">
<fieldset>
<legend>建筑层数</legend>
<a-row :gutter="16">
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="地上">
<a-input-number
:formatter="(number) => `${number}层`"
:min="0"
:step="1"
class="w-100-p"
/>
</a-form-model-item>
<a-form-model-item class="ant-row-flex" label="电梯" prop="elevator">
<a-radio-group button-style="solid" v-model="form.elevator">
<a-radio-button
:key="item.code"
:value="item.code"
v-for="item in codes.houseElevator"
>{{ item.value }}</a-radio-button>
</a-radio-group>
</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>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="设计使用年限" prop="useYear">
<a-row type="flex">
<a-col flex="1">
<a-input-number
:min="0"
class="w-100-p"
placeholder="请输入设计使用年限"
v-model="form.useYear"
/>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="地下">
<a-input-number
:formatter="(number) => `${number}层`"
:min="0"
:step="1"
class="w-100-p"
/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="总共">
<a-input-number
:formatter="(number) => `${number}层`"
class="w-100-p"
disabled
suffix="层"
/>
</a-form-model-item>
<a-col>
<span class="yo-addon">年</span>
</a-col>
</a-row>
</fieldset>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="总建筑面积" prop="areaCount">
<a-row type="flex">
<a-col flex="1">
<a-input-number
:min="0"
class="w-100-p"
placeholder="请输入总建筑面积"
v-model="form.areaCount"
/>
</a-col>
<a-col>
<span class="yo-addon">m²</span>
</a-col>
</a-row>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="总户数" prop="households">
<a-row type="flex">
<a-col flex="1">
<a-input-number
:min="0"
:step="1"
class="w-100-p"
placeholder="请输入总户数"
v-model="form.households"
/>
</a-col>
<a-col>
<span class="yo-addon">户</span>
</a-col>
</a-row>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="房屋单元数" prop="units">
<a-row type="flex">
<a-col flex="1">
<a-input-number
:min="0"
:step="1"
class="w-100-p"
placeholder="请输入房屋单元数"
v-model="form.units"
/>
</a-col>
<a-col>
<span class="yo-addon">单元</span>
</a-col>
</a-row>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item class="ant-row-flex" label="每层每单元户数" prop="unitHouseholds">
<a-row type="flex">
<a-col flex="1">
<a-input-number
:min="0"
:step="1"
class="w-100-p"
placeholder="请输入每层每单元户数"
v-model="form.unitHouseholds"
/>
</a-col>
<a-col>
<span class="yo-addon">户</span>
</a-col>
</a-row>
</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>
</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>
</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>
</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>
</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>
</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>
</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-row type="flex">
<a-col flex="1">
<a-input-number
:min="0"
:step="1"
class="w-100-p"
placeholder="请输入地上层"
v-model="form.landLevelCount"
/>
</a-col>
<a-col>
<span class="yo-addon">层</span>
</a-col>
</a-row>
</a-form-model-item>
<a-form-model-item
:colon="false"
class="ant-row-flex"
label="地下"
prop="undergroundLevelCount"
>
<a-row type="flex">
<a-col flex="1">
<a-input-number
:min="0"
:step="1"
class="w-100-p"
placeholder="请输入地下层"
v-model="form.undergroundLevelCount"
/>
</a-col>
<a-col>
<span class="yo-addon">层</span>
</a-col>
</a-row>
</a-form-model-item>
<a-form-model-item :colon="false" class="ant-row-flex" label="总共" prop="levelCount">
<a-row type="flex">
<a-col flex="1">
<a-input-number
:min="0"
:step="1"
class="w-100-p"
disabled
placeholder="请输入总层数"
v-model="form.levelCount"
/>
</a-col>
<a-col>
<span class="yo-addon">层</span>
</a-col>
</a-row>
</a-form-model-item>
</a-form-model-item>
<a-form-model-item class="ant-row-flex ant-form-inline" label="其中">
<a-form-model-item class="ant-row-flex">
<a-row type="flex">
<a-col>
<span class="yo-addon">地上第</span>
</a-col>
<a-col flex="1">
<a-form-model-item class="mr-none" prop="landBusiness1">
<a-input-number
:min="0"
:step="1"
placeholder="几"
v-model="form.landBusiness1"
/>
</a-form-model-item>
</a-col>
<a-col>
<span class="yo-addon">层，至</span>
</a-col>
<a-col flex="1">
<a-form-model-item class="mr-none" prop="landBusiness2">
<a-input-number
:min="0"
:step="1"
placeholder="几"
v-model="form.landBusiness2"
/>
</a-form-model-item>
</a-col>
<a-col>
<span class="yo-addon">层为商业用房</span>
</a-col>
</a-row>
</a-form-model-item>
<a-form-model-item class="ant-row-flex">
<a-row type="flex">
<a-col>
<span class="yo-addon">地上</span>
</a-col>
<a-col flex="1">
<a-form-model-item class="mr-none" prop="landBikeshed1">
<a-input-number
:min="0"
:step="1"
placeholder="几"
v-model="form.landBikeshed1"
/>
</a-form-model-item>
</a-col>
<a-col>
<span class="yo-addon">层为车棚层</span>
</a-col>
</a-row>
</a-form-model-item>
<a-form-model-item class="ant-row-flex">
<a-row type="flex">
<a-col>
<span class="yo-addon">地上第</span>
</a-col>
<a-col flex="1">
<a-form-model-item class="mr-none" prop="landResidence1">
<a-input-number
:min="0"
:step="1"
placeholder="几"
v-model="form.landResidence1"
/>
</a-form-model-item>
</a-col>
<a-col>
<span class="yo-addon">层，至</span>
</a-col>
<a-col flex="1">
<a-form-model-item class="mr-none" prop="landResidence2">
<a-input-number
:min="0"
:step="1"
placeholder="几"
v-model="form.landResidence2"
/>
</a-form-model-item>
</a-col>
<a-col>
<span class="yo-addon">层为住宅</span>
</a-col>
</a-row>
</a-form-model-item>
</a-form-model-item>
</a-col>
</a-row>
</a-spin>
@@ -242,6 +495,9 @@
/* 表单内容默认值 */
const defaultForm = {
/* ... */
address: '',
axisX: '',
axisY: '',
};
export default {
@@ -258,6 +514,29 @@ export default {
rules: {
/* ... */
projectName: [{ required: true, message: '请输入项目名称' }],
buildingName: [{ required: true, message: '请输入幢名称' }],
address: [{ required: true, message: '请输入坐落地址' }],
natureLand: [{ required: true, message: '请选择土地性质' }],
axisX: [{ required: true, message: '请在地图上选择坐标' }],
axisY: [{ required: true, message: '请在地图上选择坐标' }],
structureType: [{ required: true, message: '请选择结构类型' }],
aseismicGrade: [{ required: true, message: '请选择抗震等级' }],
baseInfo: [{ required: true, message: '请选择基础情况' }],
curtainWall: [{ required: true, message: '请选择建筑幕墙' }],
elevator: [{ required: true, message: '请选择电梯' }],
completedDate: [{ required: true, message: '请选择竣工日期' }],
useYear: [{ required: true, message: '请输入设计使用年限' }],
areaCount: [{ required: true, message: '请输入总建筑面积' }],
households: [{ required: true, message: '请输入总户数' }],
units: [{ required: true, message: '请输入房屋单元数' }],
unitHouseholds: [{ required: true, message: '请输入每层每单元户数' }],
buildingUnit: [{ required: true, message: '请输入建设单位' }],
buildingUnitUser: [{ required: true, message: '请输入建设单位联系人' }],
buildingUnitTel: [{ required: true, message: '请输入建设单位联系电话' }],
desingerUnit: [{ required: true, message: '请输入设计单位' }],
constructionUnit: [{ required: true, message: '请输入施工单位' }],
landLevelCount: [{ required: true, message: '请输入地上层' }],
undergroundLevelCount: [{ required: true, message: '请输入地下层' }],
},
/** 加载异步数据状态 */
@@ -265,17 +544,24 @@ export default {
/** 其他成员属性 */
/* ... */
houseStructureType: [],
houseSseismicGrade: [],
houseBaseInfo: [],
houseInsulationMaterial: [],
codes: {
natureLand: [],
houseStructureType: [],
houseSseismicGrade: [],
houseBaseInfo: [],
houseInsulationMaterial: [],
houseWallMaterial: [],
houseFireproofGrade: [],
houseBuildingCurtainWall: [],
houseElevator: [],
},
};
},
watch: {
'form.insulationMaterial'(value, oldValue) {
// 选中"无"时全不选,反之取消选择"无"
if ((value.indexOf('0') >= 0 && oldValue.indexOf('0') === -1) || !value.length) {
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);
@@ -289,7 +575,11 @@ export default {
},
mounted() {
new AMap.Map(this.$refs.map);
this.onMapInit();
},
beforeDestroy() {
this.map.destroy();
},
methods: {
@@ -355,7 +645,7 @@ export default {
* 必要方法
* 加载当前表单中所需要的异步数据
*/
async onInit(params) {
async onInit() {
this.loading = true;
/** 可以在这里await获取一些异步数据 */
/* ... */
@@ -367,26 +657,118 @@ export default {
/* ... */
onLoadCodes() {
return this.$api
.$queue([
this.$api.sysDictTypeDropDownAwait({ code: 'dic_house_structure_type' }),
this.$api.sysDictTypeDropDownAwait({ code: 'dic_house_aseismic_grade' }),
this.$api.sysDictTypeDropDownAwait({ code: 'dic_house_base_info' }),
this.$api.sysDictTypeDropDownAwait({ code: 'dic_house_insulation_material' }),
])
.sysDictTypeDropDowns({
code: [
'dic_nature_land',
'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(
([
dic_house_structure_type,
dic_house_aseismic_grade,
dic_house_base_info,
dic_house_insulation_material,
]) => {
this.houseStructureType = dic_house_structure_type.data;
this.houseSseismicGrade = dic_house_aseismic_grade.data;
this.houseBaseInfo = dic_house_base_info.data;
this.houseInsulationMaterial = dic_house_insulation_material.data;
({
data: {
dic_nature_land,
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 = {
natureLand: dic_nature_land,
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,
};
}
);
},
onMapInit() {
const city = '3302';
// 挂载map到this,但不监听
this.map = new AMap.Map(this.$refs.map, { city });
this.map.plugin(['AMap.Geocoder', 'AMap.AutoComplete', 'AMap.PlaceSearch'], () => {
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),
});
}
geocoder.getAddress(position, (status, result) => {
if (status === 'complete' && result.regeocode) {
this.onSetPosition(result.regeocode.formattedAddress, position);
} else {
console.error('根据经纬度查询地址失败');
}
});
};
this.map.on('click', (e) => {
setMarker(e.lnglat);
});
const auto = new AMap.AutoComplete({
input: this.$refs['map-search'].$el.querySelector('input'),
city,
citylimit: true,
});
const placeSearch = new AMap.PlaceSearch({
city,
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) => {
setMarker(p.location);
});
this.map.setFitView();
});
});
});
},
onSetPosition(address, { lng, lat }) {
Object.assign(this.form, {
address,
axisX: lng.toString(),
axisY: lat.toString(),
});
},
},
};
</script>

162
Web/src/pages/business/house/houseInfo/form/base/drawing.vue Normal file
View File

@@ -0,0 +1,162 @@
<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-form-model-item class="ant-row-flex" label="图纸资料存档处" prop="drawingMaterial">
<a-checkbox-group v-model="form.drawingMaterial">
<a-checkbox
:key="item.code"
:value="item.code"
class="mb-xs"
v-for="item in codes.houseStorageOfDrawings"
>{{ item.value }}</a-checkbox>
<a-input
class="w-300"
placeholder="请输入其他图纸资料存档处"
v-if="form.drawingMaterial && form.drawingMaterial.indexOf(codes.houseStorageOfDrawings[codes.houseStorageOfDrawings.length - 1].code) >= 0"
v-model="form.drawingMaterialText"
/>
</a-checkbox-group>
</a-form-model-item>
</a-spin>
</a-form-model>
</template>
<script>
/* 表单内容默认值 */
const defaultForm = {
/* ... */
};
export default {
props: ['param'],
data() {
return {
labelCol: { flex: '150px' },
wrapperCol: { flex: '1' },
/** 表单数据 */
form: {},
/** 验证格式 */
rules: {
/* ... */
drawingMaterial: [{ required: true, message: '请选择图纸资料存档处' }],
},
/** 加载异步数据状态 */
loading: false,
/** 其他成员属性 */
/* ... */
codes: {
houseStorageOfDrawings: [],
},
};
},
async created() {
await this.onInit();
this.onFillData();
},
methods: {
/**
* 必要的方法
* 在打开编辑页时允许填充数据
*/
onFillData() {
/** 将默认数据覆盖到form */
const record = this.param && this.param.record;
this.form = this.$_.cloneDeep({
...defaultForm,
...record,
/** 在此处添加其他默认数据转换 */
/* ... */
});
},
/**
* 必要方法
* 验证表单并获取表单数据
*/
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_house_storage_of_drawings'],
})
.then(({ data: { dic_house_storage_of_drawings } }) => {
this.codes = {
houseStorageOfDrawings: dic_house_storage_of_drawings,
};
});
},
},
};
</script>

202
Web/src/pages/business/house/houseInfo/form/base/fund.vue Normal file
View File

@@ -0,0 +1,202 @@
<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 type="flex">
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="物业保证金" prop="propertySecurity">
<a-switch v-model="form.propertySecurity" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item
class="ant-row-flex"
label="物业保证金余额"
prop="propertySecurity1"
v-if="form.propertySecurity"
>
<a-row type="flex">
<a-col flex="1">
<a-input-number
class="w-100-p"
placeholder="请输入物业保证金余额"
v-model="form.propertySecurity1"
/>
</a-col>
<a-col>
<span class="yo-addon">元</span>
</a-col>
</a-row>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="物业专项维修资金" prop="maintenanceFunds">
<a-switch v-model="form.maintenanceFunds" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item
class="ant-row-flex"
label="物业管理专项资金余额"
prop="maintenanceFunds1"
v-if="form.maintenanceFunds"
>
<a-row type="flex">
<a-col flex="1">
<a-input-number
class="w-100-p"
placeholder="请输入物业管理专项资金余额"
v-model="form.maintenanceFunds1"
/>
</a-col>
<a-col>
<span class="yo-addon">元</span>
</a-col>
</a-row>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="房改房维修资金余额" prop="maintenanceFunds2">
<a-row type="flex">
<a-col flex="1">
<a-input-number
class="w-100-p"
placeholder="请输入房改房维修资金余额"
v-model="form.maintenanceFunds2"
/>
</a-col>
<a-col>
<span class="yo-addon">元</span>
</a-col>
</a-row>
</a-form-model-item>
</a-col>
</a-row>
</a-spin>
</a-form-model>
</template>
<script>
/* 表单内容默认值 */
const defaultForm = {
/* ... */
};
export default {
props: ['param'],
data() {
return {
labelCol: { flex: '150px' },
wrapperCol: { flex: '1' },
/** 表单数据 */
form: {},
/** 验证格式 */
rules: {
/* ... */
propertySecurity1: [{ required: true, message: '请输入物业保证金余额' }],
maintenanceFunds1: [{ required: true, message: '请输入物业管理专项资金余额' }],
},
/** 加载异步数据状态 */
loading: false,
/** 其他成员属性 */
/* ... */
};
},
async created() {
await this.onInit();
this.onFillData();
},
methods: {
/**
* 必要的方法
* 在打开编辑页时允许填充数据
*/
onFillData() {
/** 将默认数据覆盖到form */
const record = this.param && this.param.record;
this.form = this.$_.cloneDeep({
...defaultForm,
...record,
/** 在此处添加其他默认数据转换 */
/* ... */
});
},
/**
* 必要方法
* 验证表单并获取表单数据
*/
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获取一些异步数据 */
/* ... */
this.loading = false;
},
/** 当前组件的其他方法 */
/* ... */
},
};
</script>

206
Web/src/pages/business/house/houseInfo/form/base/identification.vue Normal file
View File

@@ -0,0 +1,206 @@
<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 type="flex">
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="鉴定等级" prop="identification">
<a-radio-group button-style="solid" v-model="form.identification">
<a-radio-button
:key="item.code"
:value="item.code"
v-for="item in codes.houseIdentification"
>{{ item.value }}</a-radio-button>
</a-radio-group>
</a-form-model-item>
<a-form-model-item class="ant-row-flex" label="治理改造措施" prop="government">
<a-radio-group button-style="solid" v-model="form.government">
<a-radio-button
:key="item.code"
:value="item.code"
v-for="item in codes.houseGovernment"
>{{ item.value }}</a-radio-button>
</a-radio-group>
</a-form-model-item>
<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-radio-button
:key="item.code"
:value="item.code"
v-for="item in codes.houseStatus"
>{{ 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-radio-button
:key="item.code"
:value="item.code"
v-for="item in codes.houseComprehensiveGrade"
>{{ item.value }}</a-radio-button>
</a-radio-group>
</a-form-model-item>
</a-col>
</a-row>
</a-spin>
</a-form-model>
</template>
<script>
/* 表单内容默认值 */
const defaultForm = {
/* ... */
};
export default {
props: ['param'],
data() {
return {
labelCol: { flex: '150px' },
wrapperCol: { flex: '1' },
/** 表单数据 */
form: {},
/** 验证格式 */
rules: {
/* ... */
identification: [{ required: true, message: '请选择鉴定等级' }],
houseStatus: [{ required: true, message: '请选择房屋使用状态' }],
comprehensiveGrade: [{ required: true, message: '请选择综合等级' }],
},
/** 加载异步数据状态 */
loading: false,
/** 其他成员属性 */
/* ... */
codes: {
houseIdentification: [],
houseGovernment: [],
houseStatus: [],
houseComprehensiveGrade: [],
},
};
},
async created() {
await this.onInit();
this.onFillData();
},
methods: {
/**
* 必要的方法
* 在打开编辑页时允许填充数据
*/
onFillData() {
/** 将默认数据覆盖到form */
const record = this.param && this.param.record;
this.form = this.$_.cloneDeep({
...defaultForm,
...record,
/** 在此处添加其他默认数据转换 */
/* ... */
});
},
/**
* 必要方法
* 验证表单并获取表单数据
*/
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_house_identification',
'dic_house_government',
'dic_house_status',
'dic_house_comprehensive_grade',
],
})
.then(
({
data: { dic_house_identification, dic_house_government, dic_house_status, dic_house_comprehensive_grade },
}) => {
this.codes = {
houseIdentification: dic_house_identification,
houseGovernment: dic_house_government,
houseStatus: dic_house_status,
houseComprehensiveGrade: dic_house_comprehensive_grade,
};
}
);
},
},
};
</script>

47
Web/src/pages/business/house/houseInfo/form/base/index.vue
View File

@@ -51,7 +51,40 @@ export default {
component: () => import('./building'),
},
{
title: '第二部分',
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'),
},
],
};
@@ -63,7 +96,8 @@ export default {
*/
onGetData() {
return new Promise(async (resolve, reject) => {
let formData = {};
let formData = {},
flag = true;
for (let i = 0; i < this.$refs.forms.length; i++) {
const form = this.$refs.forms[i];
try {
@@ -73,11 +107,14 @@ export default {
...data,
};
} catch {
reject();
return;
flag = false;
}
}
resolve(formData);
if (flag) {
resolve(formData);
} else {
reject();
}
});
},
},

317
Web/src/pages/business/house/houseInfo/form/base/investigation.vue Normal file
View File

@@ -0,0 +1,317 @@
<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 type="flex">
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="房屋场地" prop="houseSite">
<a-checkbox-group v-model="form.houseSite">
<a-checkbox
:key="item.code"
:value="item.code"
class="mb-xs"
v-for="item in codes.houseHouseSite"
>{{ item.value }}</a-checkbox>
</a-checkbox-group>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="相邻施工" prop="adjacentConstruction">
<a-checkbox-group v-model="form.adjacentConstruction">
<a-checkbox
:key="item.code"
:value="item.code"
class="mb-xs"
v-for="item in codes.houseAdjacentConstruction"
>{{ item.value }}</a-checkbox>
</a-checkbox-group>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="化学侵蚀" prop="chemicalErosion">
<a-checkbox-group v-model="form.chemicalErosion">
<a-checkbox
:key="item.code"
:value="item.code"
class="mb-xs"
v-for="item in codes.houseChemicalErosion"
>{{ item.value }}</a-checkbox>
</a-checkbox-group>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="结构拆改" prop="structuralDismantling">
<a-radio-group button-style="solid" v-model="form.structuralDismantling">
<a-radio-button
:key="item.code"
:value="item.code"
v-for="item in codes.houseStructuralDismantling"
>{{ item.value }}</a-radio-button>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="加层改造" prop="addingLayer">
<a-radio-group button-style="solid" v-model="form.addingLayer">
<a-radio-button
:key="item.code"
:value="item.code"
v-for="item in codes.houseAddingLayer"
>{{ item.value }}</a-radio-button>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="修缮加固" prop="repairAndReinforce">
<a-checkbox-group v-model="form.repairAndReinforce">
<a-checkbox
:key="item.code"
:value="item.code"
class="mb-xs"
v-for="item in codes.houseRepairAndReinforce"
>{{ item.value }}</a-checkbox>
</a-checkbox-group>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="历史灾害" prop="historicalCalamity">
<a-checkbox-group v-model="form.historicalCalamity">
<a-checkbox
:key="item.code"
:value="item.code"
class="mb-xs"
v-for="item in codes.houseHistoricalCalamity"
>{{ item.value }}</a-checkbox>
</a-checkbox-group>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="使用功能变更" prop="functionalChange">
<a-checkbox-group v-model="form.functionalChange">
<a-checkbox
:key="item.code"
:value="item.code"
class="mb-xs"
v-for="item in codes.houseFunctionalChange"
>{{ item.value }}</a-checkbox>
</a-checkbox-group>
</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>
</a-col>
</a-row>
</a-spin>
</a-form-model>
</template>
<script>
/* 表单内容默认值 */
const defaultForm = {
/* ... */
};
export default {
props: ['param'],
data() {
return {
labelCol: { flex: '150px' },
wrapperCol: { flex: '1' },
/** 表单数据 */
form: {},
/** 验证格式 */
rules: {
/* ... */
houseSite: [{ required: true, message: '请选择房屋场地' }],
adjacentConstruction: [{ required: true, message: '请选择相邻施工' }],
chemicalErosion: [{ required: true, message: '请选择化学侵蚀' }],
structuralDismantling: [{ required: true, message: '请选择结构拆改' }],
addingLayer: [{ required: true, message: '请选择加层改造' }],
repairAndReinforce: [{ required: true, message: '请选择修缮加固' }],
historicalCalamity: [{ required: true, message: '请选择历史灾害' }],
functionalChange: [{ required: true, message: '请选择使用功能变更' }],
},
/** 加载异步数据状态 */
loading: false,
/** 其他成员属性 */
/* ... */
codes: {
houseHouseSite: [],
houseAdjacentConstruction: [],
houseChemicalErosion: [],
houseStructuralDismantling: [],
houseAddingLayer: [],
houseRepairAndReinforce: [],
houseHistoricalCalamity: [],
houseFunctionalChange: [],
},
};
},
watch: {
'form.adjacentConstruction'(value, oldValue) {
this.onCheckedNone(value, oldValue, 'adjacentConstruction');
},
'form.chemicalErosion'(value, oldValue) {
this.onCheckedNone(value, oldValue, 'chemicalErosion');
},
'form.repairAndReinforce'(value, oldValue) {
this.onCheckedNone(value, oldValue, 'repairAndReinforce');
},
'form.historicalCalamity'(value, oldValue) {
this.onCheckedNone(value, oldValue, 'historicalCalamity');
},
'form.functionalChange'(value, oldValue) {
this.onCheckedNone(value, oldValue, 'functionalChange');
},
},
async created() {
await this.onInit();
this.onFillData();
},
methods: {
/**
* 必要的方法
* 在打开编辑页时允许填充数据
*/
onFillData() {
/** 将默认数据覆盖到form */
const record = this.param && this.param.record;
this.form = this.$_.cloneDeep({
...defaultForm,
...record,
/** 在此处添加其他默认数据转换 */
/* ... */
});
},
/**
* 必要方法
* 验证表单并获取表单数据
*/
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_house_house_site',
'dic_house_adjacent_construction',
'dic_house_chemical_erosion',
'dic_house_structural_dismantling',
'dic_house_adding_layer',
'dic_house_repair_and_reinforce',
'dic_house_historical_calamity',
'dic_house_functional_change',
],
})
.then(
({
data: {
dic_house_house_site,
dic_house_adjacent_construction,
dic_house_chemical_erosion,
dic_house_structural_dismantling,
dic_house_adding_layer,
dic_house_repair_and_reinforce,
dic_house_historical_calamity,
dic_house_functional_change,
},
}) => {
this.codes = {
houseHouseSite: dic_house_house_site,
houseAdjacentConstruction: dic_house_adjacent_construction,
houseChemicalErosion: dic_house_chemical_erosion,
houseStructuralDismantling: dic_house_structural_dismantling,
houseAddingLayer: dic_house_adding_layer,
houseRepairAndReinforce: dic_house_repair_and_reinforce,
houseHistoricalCalamity: dic_house_historical_calamity,
houseFunctionalChange: dic_house_functional_change,
};
}
);
},
onCheckedNone(value, oldValue, key) {
// 选中"无"时全不选,反之取消选择"无"
if (value.indexOf('0') >= 0 && oldValue.indexOf('0') === -1) {
this.form[key] = ['0'];
} else if (value.indexOf('0') >= 0 && value.length > 1) {
this.form[key].splice(value.indexOf('0'), 1);
}
},
},
};
</script>

167
Web/src/pages/business/house/houseInfo/form/base/manager.vue Normal file
View File

@@ -0,0 +1,167 @@
<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 type="flex">
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="物业（经营）单位" prop="wuYeUnit">
<a-input placeholder="请输入物业（经营）单位" v-model="form.wuYeUnit" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="负责人" prop="wuYeUnitUser">
<a-input placeholder="请输入负责人" v-model="form.wuYeUnitUser" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="电话" prop="wuYeUnitUserTel">
<a-input placeholder="请输入负责人电话" v-model="form.wuYeUnitUserTel" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="属地管理社区负责人" prop="manageAreaUser">
<a-input placeholder="请输入属地管理社区负责人" v-model="form.manageAreaUser" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="电话" prop="manageAreaUserTel">
<a-input placeholder="请输入属地管理社区负责人电话" v-model="form.manageAreaUserTel" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="属地管理社区联系人" prop="manageAreaConent">
<a-input placeholder="请输入属地管理社区联系人" v-model="form.manageAreaConent" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="电话" prop="manageAreaConentTel">
<a-input placeholder="请输入属地管理社区联系人电话" v-model="form.manageAreaConentTel" />
</a-form-model-item>
</a-col>
</a-row>
</a-spin>
</a-form-model>
</template>
<script>
/* 表单内容默认值 */
const defaultForm = {
/* ... */
};
export default {
props: ['param'],
data() {
return {
labelCol: { flex: '150px' },
wrapperCol: { flex: '1' },
/** 表单数据 */
form: {},
/** 验证格式 */
rules: {
/* ... */
},
/** 加载异步数据状态 */
loading: false,
/** 其他成员属性 */
/* ... */
};
},
async created() {
await this.onInit();
this.onFillData();
},
methods: {
/**
* 必要的方法
* 在打开编辑页时允许填充数据
*/
onFillData() {
/** 将默认数据覆盖到form */
const record = this.param && this.param.record;
this.form = this.$_.cloneDeep({
...defaultForm,
...record,
/** 在此处添加其他默认数据转换 */
/* ... */
});
},
/**
* 必要方法
* 验证表单并获取表单数据
*/
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获取一些异步数据 */
/* ... */
this.loading = false;
},
/** 当前组件的其他方法 */
/* ... */
},
};
</script>

340
Web/src/pages/business/house/houseInfo/form/base/ownership.vue Normal file
View File

@@ -0,0 +1,340 @@
<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 type="flex">
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="产权性质" prop="propertyRights">
<a-radio-group button-style="solid" v-model="form.propertyRights">
<a-radio-button
:key="item.code"
:value="item.code"
v-for="item in codes.housePropertyRights"
>{{ item.value }}</a-radio-button>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex ant-form-inline" label="房屋包含的住宅总套数">
<section>
<a-form-model-item
:colon="false"
class="ant-row-flex"
label="直管公房"
prop="straightHouseCount"
>
<a-row type="flex">
<a-col flex="1">
<a-input-number
:min="0"
:step="1"
placeholder="几"
v-model="form.straightHouseCount"
/>
</a-col>
<a-col>
<span class="yo-addon">套</span>
</a-col>
</a-row>
</a-form-model-item>
<a-form-model-item
:colon="false"
class="ant-row-flex"
label="单位自管公房"
prop="selfHouseCount"
>
<a-row type="flex">
<a-col flex="1">
<a-input-number
:min="0"
:step="1"
placeholder="几"
v-model="form.selfHouseCount"
/>
</a-col>
<a-col>
<span class="yo-addon">套</span>
</a-col>
</a-row>
</a-form-model-item>
<a-form-model-item :colon="false" class="ant-row-flex" label="其他" props="otherCount">
<a-row type="flex">
<a-col flex="1">
<a-input-number :min="0" :step="1" placeholder="几" v-model="form.otherCount" />
</a-col>
<a-col>
<span class="yo-addon">套</span>
</a-col>
</a-row>
</a-form-model-item>
</section>
<section>
<a-form-model-item
:colon="false"
class="ant-row-flex"
label="商品房"
prop="businessCount"
>
<a-row type="flex">
<a-col flex="1">
<a-input-number
:min="0"
:step="1"
placeholder="几"
v-model="form.businessCount"
/>
</a-col>
<a-col>
<span class="yo-addon">套</span>
</a-col>
</a-row>
</a-form-model-item>
<a-form-model-item
:colon="false"
class="ant-row-flex"
label="房改房"
prop="changeHouseCount"
>
<a-row type="flex">
<a-col flex="1">
<a-input-number
:min="0"
:step="1"
placeholder="几"
v-model="form.changeHouseCount"
/>
</a-col>
<a-col>
<span class="yo-addon">套</span>
</a-col>
</a-row>
</a-form-model-item>
<a-form-model-item
:colon="false"
class="ant-row-flex"
label="拆迁安置房"
prop="resettlementHouseCount"
>
<a-row type="flex">
<a-col flex="1">
<a-input-number
:min="0"
:step="1"
placeholder="几"
v-model="form.resettlementHouseCount"
/>
</a-col>
<a-col>
<span class="yo-addon">套</span>
</a-col>
</a-row>
</a-form-model-item>
</section>
<section>
<a-form-model-item
:colon="false"
class="ant-row-flex"
label="私房"
prop="privateHouseCount"
>
<a-row type="flex">
<a-col flex="1">
<a-input-number
:min="0"
:step="1"
placeholder="几"
v-model="form.privateHouseCount"
/>
</a-col>
<a-col>
<span class="yo-addon">套</span>
</a-col>
</a-row>
</a-form-model-item>
<a-form-model-item :colon="false" class="ant-row-flex" label="总共" prop="houseCount">
<a-row type="flex">
<a-col flex="1">
<a-input-number :min="0" :step="1" placeholder="几" v-model="form.houseCount" />
</a-col>
<a-col>
<span class="yo-addon">套</span>
</a-col>
</a-row>
</a-form-model-item>
</section>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item class="ant-row-flex" label="产权单位" prop="propertyUnit">
<a-input placeholder="请输入产权单位" v-model="form.propertyUnit" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="负责人" prop="propertyUnitUser">
<a-input placeholder="请输入负责人" v-model="form.propertyUnitUser" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="负责人电话" prop="propertyUnitUserTel">
<a-input placeholder="请输入负责人电话" v-model="form.propertyUnitUserTel" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="联系人" prop="propertyUnitConent">
<a-input placeholder="请输入联系人" v-model="form.propertyUnitConent" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="联系人电话" prop="propertyUnitConentTel">
<a-input placeholder="请输入联系人电话" v-model="form.propertyUnitConentTel" />
</a-form-model-item>
</a-col>
</a-row>
</a-spin>
</a-form-model>
</template>
<script>
/* 表单内容默认值 */
const defaultForm = {
/* ... */
};
export default {
props: ['param'],
data() {
return {
labelCol: { flex: '150px' },
wrapperCol: { flex: '1' },
/** 表单数据 */
form: {},
/** 验证格式 */
rules: {
/* ... */
propertyRights: [{ required: true, message: '请选择产权性质' }],
straightHouseCount: [{ required: true, message: '请输入直管公房' }],
selfHouseCount: [{ required: true, message: '请输入单位自管公房' }],
otherCount: [{ required: true, message: '请输入其他' }],
businessCount: [{ required: true, message: '请输入商品房' }],
changeHouseCount: [{ required: true, message: '请输入房改房' }],
resettlementHouseCount: [{ required: true, message: '请输入拆迁安置房' }],
},
/** 加载异步数据状态 */
loading: false,
/** 其他成员属性 */
/* ... */
codes: {
housePropertyRights: [],
},
};
},
async created() {
await this.onInit();
this.onFillData();
},
methods: {
/**
* 必要的方法
* 在打开编辑页时允许填充数据
*/
onFillData() {
/** 将默认数据覆盖到form */
const record = this.param && this.param.record;
this.form = this.$_.cloneDeep({
...defaultForm,
...record,
/** 在此处添加其他默认数据转换 */
/* ... */
});
},
/**
* 必要方法
* 验证表单并获取表单数据
*/
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_house_property_rights'],
})
.then(({ data: { dic_house_property_rights } }) => {
this.codes = {
housePropertyRights: dic_house_property_rights,
};
});
},
},
};
</script>

156
Web/src/pages/business/house/houseInfo/form/base/unit.vue Normal file
View File

@@ -0,0 +1,156 @@
<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 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>
</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>
</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>
</a-col>
<a-col :span="12">
<a-form-model-item class="ant-row-flex" label="主管部门" prop="competentDepartment">
<a-input placeholder="请输入主管部门" v-model="form.competentDepartment" />
</a-form-model-item>
</a-col>
</a-row>
</a-spin>
</a-form-model>
</template>
<script>
/* 表单内容默认值 */
const defaultForm = {
/* ... */
};
export default {
props: ['param'],
data() {
return {
labelCol: { flex: '150px' },
wrapperCol: { flex: '1' },
/** 表单数据 */
form: {},
/** 验证格式 */
rules: {
/* ... */
aegistrationAgency: [{ required: true, message: '请输入调查登记机构' }],
aegistrationUser: [{ required: true, message: '请输入调查人员' }],
checkUser: [{ required: true, message: '请输入审核人员' }],
competentDepartment: [{ required: true, message: '请输入主管部门' }],
},
/** 加载异步数据状态 */
loading: false,
/** 其他成员属性 */
/* ... */
};
},
async created() {
await this.onInit();
this.onFillData();
},
methods: {
/**
* 必要的方法
* 在打开编辑页时允许填充数据
*/
onFillData() {
/** 将默认数据覆盖到form */
const record = this.param && this.param.record;
this.form = this.$_.cloneDeep({
...defaultForm,
...record,
/** 在此处添加其他默认数据转换 */
/* ... */
});
},
/**
* 必要方法
* 验证表单并获取表单数据
*/
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获取一些异步数据 */
/* ... */
this.loading = false;
},
/** 当前组件的其他方法 */
/* ... */
},
};
</script>

1
Web/src/pages/business/house/houseInfo/form/index.vue
View File

@@ -7,7 +7,6 @@
<span>
<!-- 可以在工具栏中增加其他控件(只能在一行内) -->
<!-- ... -->
<a-input />
</span>
<span>
<a-button @click="closeContentWindow()">取消</a-button>

40
Web/src/util/file/index.js
View File

@@ -1,3 +1,5 @@
import app from '@/main'
const _getFileTypeByBase64 = (base64) => {
let arr = base64.split(','),
fileType = arr[0].match(/:(.*?);/)[1]
@@ -82,4 +84,42 @@ export const BlobToBase64 = async (blob) => {
resolve(e.target.result)
}
})
}
export const GetFileName = (disposition) => {
const dispositionSplit = disposition.split(';')
const fileName = decodeURI(
dispositionSplit[1].split('=')[1],
dispositionSplit[2].match(/(?<=\*=).*?(?=\')/)[0]
)
return fileName
}
export const PreviewFileResponse = async (id) => {
return app.$api.sysFileInfoPreview({ id }).then((res) => {
return res
})
}
export const PreviewFileArrayBuffer = async (id) => {
const response = await PreviewFileResponse(id)
return response.data
}
export const PreviewFileBase64 = async (id) => {
const file = await PreviewFile(id)
if (!file) return
const base64 = await BlobToBase64(file)
return base64
}
export const PreviewFile = async (id) => {
const response = await PreviewFileResponse(id)
const arrayBuffer = response.data
const blob = ArrayBufferToBlob(arrayBuffer)
const disposition = response.headers['content-disposition']
if (!disposition) return
const fileName = GetFileName(disposition)
const file = BlobToFile(blob, fileName, response.headers['content-type'])
return file
}

5
Web/yarn.lock
View File

@@ -6438,6 +6438,11 @@ performance-now@^2.1.0:
resolved "https://registry.npm.taobao.org/performance-now/download/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
photoswipe@^4.1.3:
version "4.1.3"
resolved "https://registry.npm.taobao.org/photoswipe/download/photoswipe-4.1.3.tgz#59f49494eeb9ddab5888d03392926a19bc197550"
integrity sha1-WfSUlO653atYiNAzkpJqGbwZdVA=
picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1:
version "2.2.2"
resolved "https://registry.npm.taobao.org/picomatch/download/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"