update 增加了房屋安全的幕墙和面砖表单,未匹配字段
This commit is contained in:
@@ -26,6 +26,7 @@
|
||||
@import './lib/input.less';
|
||||
@import './lib/select.less';
|
||||
@import './lib/checkbox.less';
|
||||
@import './lib/radio.less';
|
||||
@import './lib/cascader.less';
|
||||
@import './lib/upload.less';
|
||||
@import './lib/dropdown.less';
|
||||
|
||||
@@ -5,57 +5,64 @@
|
||||
|
||||
height: 100%;
|
||||
|
||||
>.ant-tabs {
|
||||
>.yo-tab-external-mount {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
height: 100%;
|
||||
|
||||
>.ant-tabs-bar {
|
||||
margin-bottom: 0;
|
||||
>.ant-tabs {
|
||||
>.ant-tabs-bar {
|
||||
margin-bottom: 0;
|
||||
|
||||
background-color: @white;
|
||||
background-color: @white;
|
||||
|
||||
.ant-tabs-nav-container {
|
||||
height: @tabs-card-height + @padding-xs;
|
||||
padding: (@tabs-card-height + @padding-xs - @btn-height-base) / 2 @padding-md;
|
||||
}
|
||||
|
||||
.ant-tabs-tab {
|
||||
.ant-btn();
|
||||
|
||||
&:hover {
|
||||
border-color: @btn-default-border;
|
||||
.ant-tabs-nav-container {
|
||||
height: @tabs-card-height + @padding-xs;
|
||||
padding: (@tabs-card-height + @padding-xs - @btn-height-base) / 2 @padding-md;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs-tab {
|
||||
line-height: @btn-height-base;
|
||||
.ant-tabs-extra-content {
|
||||
padding: (@tabs-card-height + @padding-xs - @btn-height-base) / 2 @padding-md;
|
||||
}
|
||||
|
||||
margin-right: -1px;
|
||||
}
|
||||
.ant-tabs-tab {
|
||||
.ant-btn();
|
||||
transition: none;
|
||||
|
||||
.ant-tabs-tab-active {
|
||||
z-index: 2;
|
||||
&:hover {
|
||||
border-color: @btn-default-border;
|
||||
}
|
||||
}
|
||||
|
||||
color: @btn-primary-color;
|
||||
border-color: @btn-primary-bg;
|
||||
background-color: @btn-primary-bg;
|
||||
.ant-tabs-tab {
|
||||
line-height: @btn-height-base;
|
||||
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.ant-tabs-tab-active {
|
||||
z-index: 2;
|
||||
|
||||
&:hover {
|
||||
color: @btn-primary-color;
|
||||
border-color: color(~`colorPalette('@{btn-primary-bg}', 5) `);
|
||||
background-color: color(~`colorPalette('@{btn-primary-bg}', 5) `);
|
||||
border-color: @btn-primary-bg;
|
||||
background-color: @btn-primary-bg;
|
||||
|
||||
&:hover {
|
||||
color: @btn-primary-color;
|
||||
border-color: color(~`colorPalette('@{btn-primary-bg}', 5) `);
|
||||
background-color: color(~`colorPalette('@{btn-primary-bg}', 5) `);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>.ant-tabs-content {
|
||||
>.yo-tab-external-mount-content {
|
||||
position: relative;
|
||||
|
||||
flex: 1;
|
||||
|
||||
>.ant-tabs-tabpane {
|
||||
>.yo-tab-external-tabpane {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -64,6 +71,12 @@
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&.yo-tab-external-tabpane-inactive {
|
||||
pointer-events: none;
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -87,9 +100,9 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
+.ant-tabs {
|
||||
>.ant-tabs-content {
|
||||
>.ant-tabs-tabpane {
|
||||
+.yo-tab-external-mount {
|
||||
>.yo-tab-external-mount-content {
|
||||
>.yo-tab-external-tabpane {
|
||||
padding-bottom: @padding-xs * 2 + @btn-height-base + @border-width-base * 2;
|
||||
}
|
||||
}
|
||||
@@ -125,8 +138,9 @@
|
||||
padding: @padding-lg;
|
||||
|
||||
>h5 {
|
||||
border-left: @padding-xs @border-style-base @primary-color;
|
||||
padding-left: @padding-md;
|
||||
|
||||
border-left: @padding-xs @border-style-base @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -282,44 +282,39 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-form-item-required {
|
||||
@keyframes required-animation {
|
||||
// 0% {
|
||||
// transform: translateX(-5px) scale(.1);
|
||||
.ant-form {
|
||||
fieldset {
|
||||
margin-bottom: @padding-lg;
|
||||
padding: @padding-md;
|
||||
|
||||
// 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;
|
||||
// }
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
}
|
||||
legend {
|
||||
display: inline-block;
|
||||
|
||||
width: auto;
|
||||
margin-bottom: 0;
|
||||
padding: 0 @padding-md;
|
||||
|
||||
border: 0;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
}
|
||||
.ant-form-horizontal {
|
||||
.ant-form-item-label {
|
||||
line-height: 1.5;
|
||||
|
||||
margin-right: @padding-xs;
|
||||
padding-top: @padding-sm - 2px;
|
||||
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
.ant-form-item-required {
|
||||
&::before {
|
||||
margin-top: -4px;
|
||||
|
||||
content: '';
|
||||
animation: required-animation 2s linear infinite;
|
||||
vertical-align: middle;
|
||||
|
||||
border-top: 4px solid transparent;
|
||||
|
||||
10
Web/src/assets/style/lib/radio.less
Normal file
10
Web/src/assets/style/lib/radio.less
Normal file
@@ -0,0 +1,10 @@
|
||||
@import (reference) '~@/assets/style/extend.less';
|
||||
.ant-radio-button-wrapper {
|
||||
margin-right: @padding-xs;
|
||||
margin-bottom: @padding-xs;
|
||||
&:not(:first-child) {
|
||||
&::before {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -142,7 +142,7 @@
|
||||
}
|
||||
.ant-layout-content {
|
||||
position: relative;
|
||||
>.ant-tabs {
|
||||
>.yo-tab-external-mount {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -152,73 +152,76 @@
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
>.ant-tabs-bar {
|
||||
>.ant-tabs {
|
||||
z-index: 5;
|
||||
|
||||
margin-bottom: 0;
|
||||
|
||||
border-bottom: 0;
|
||||
background-color: @white;
|
||||
box-shadow: 0 2px 12px fade(@black, 8%);
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
.ant-tabs-nav-container {
|
||||
height: 30px;
|
||||
overflow: visible;
|
||||
>.ant-tabs-bar {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ant-tabs-tab {
|
||||
line-height: 30px;
|
||||
|
||||
height: 30px;
|
||||
margin-right: 0;
|
||||
padding: 0;
|
||||
border-bottom: 0;
|
||||
background-color: @white;
|
||||
box-shadow: 0 2px 12px fade(@black, 8%);
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
.ant-tabs-nav-container {
|
||||
height: 30px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ant-tabs-tab {
|
||||
line-height: 30px;
|
||||
|
||||
transition: none;
|
||||
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
&:hover {
|
||||
color: @black;
|
||||
}
|
||||
&.ant-tabs-tab-active {
|
||||
color: @white;
|
||||
border-color: darken(@primary-color, 10%);
|
||||
background-color: @primary-color;
|
||||
.ant-tabs-close-x {
|
||||
color: fade(@white, 70%);
|
||||
&:hover {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
}
|
||||
+.ant-tabs-tab {
|
||||
margin-left: 0;
|
||||
}
|
||||
.ant-dropdown-trigger {
|
||||
padding: 0 @padding-md * 2 0 @padding-md;
|
||||
}
|
||||
.ant-tabs-tab-unclosable {
|
||||
.ant-dropdown-trigger {
|
||||
padding: 0 @padding-lg 0 @padding-md;
|
||||
}
|
||||
}
|
||||
.ant-tabs-close-x {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: 9px;
|
||||
|
||||
margin: 0;
|
||||
height: 30px;
|
||||
margin-right: 0;
|
||||
padding: 0;
|
||||
|
||||
transition: none;
|
||||
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
&:hover {
|
||||
color: @black;
|
||||
}
|
||||
&.ant-tabs-tab-active {
|
||||
color: @white;
|
||||
border-color: darken(@primary-color, 10%);
|
||||
background-color: @primary-color;
|
||||
.ant-tabs-close-x {
|
||||
color: fade(@white, 70%);
|
||||
&:hover {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
}
|
||||
+.ant-tabs-tab {
|
||||
margin-left: 0;
|
||||
}
|
||||
.ant-dropdown-trigger {
|
||||
padding: 0 @padding-md * 2 0 @padding-md;
|
||||
}
|
||||
.ant-tabs-tab-unclosable {
|
||||
.ant-dropdown-trigger {
|
||||
padding: 0 @padding-lg 0 @padding-md;
|
||||
}
|
||||
}
|
||||
.ant-tabs-close-x {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: 9px;
|
||||
|
||||
margin: 0;
|
||||
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
>.ant-tabs-content {
|
||||
>.yo-tab-external-mount-content {
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
>.ant-tabs-tabpane {
|
||||
>.yo-tab-external-tabpane {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -228,18 +231,10 @@
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
>.ant-spin {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
&.yo-tab-external-tabpane-inactive {
|
||||
pointer-events: none;
|
||||
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -539,11 +534,13 @@
|
||||
}
|
||||
}
|
||||
.ant-layout-content {
|
||||
>.ant-tabs {
|
||||
>.ant-tabs-bar {
|
||||
.ant-tabs-nav-container {
|
||||
width: @container-width - @padding-md * 2;
|
||||
margin: 0 auto;
|
||||
.yo-tab-external-mount {
|
||||
>.ant-tabs {
|
||||
>.ant-tabs-bar {
|
||||
.ant-tabs-nav-container {
|
||||
width: @container-width - @padding-md * 2;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -185,12 +185,6 @@ export default {
|
||||
|
||||
return (
|
||||
<section>
|
||||
<a-alert type="warning" closable>
|
||||
<template slot="message">
|
||||
字段固定应该遵循左侧固定到最左,右侧固定到最右(此逻辑难以实现)
|
||||
</template>
|
||||
</a-alert>
|
||||
<br />
|
||||
{
|
||||
this.$scopedSlots.query &&
|
||||
<div class="yo-query-bar">
|
||||
|
||||
@@ -16,21 +16,25 @@
|
||||
<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-row :gutter="16" type="flex">
|
||||
<a-col :span="24">
|
||||
<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-col>
|
||||
</a-row>
|
||||
</a-spin>
|
||||
<PhotoSwipe ref="photo-swipe" />
|
||||
</a-form-model>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<!-- 表单控件 -->
|
||||
<!-- ... -->
|
||||
<a-row type="flex">
|
||||
<a-row :gutter="16" type="flex">
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="立项文件" prop="anEntryDocument">
|
||||
<a-upload
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
>
|
||||
<a-spin :spinning="loading">
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<a-row type="flex">
|
||||
<a-row :gutter="16" type="flex">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="区县（市）">
|
||||
<span>测试区</span>
|
||||
@@ -107,15 +107,15 @@
|
||||
</div>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="结构类型" prop="structureType">
|
||||
<a-select placeholder="请选择结构类型" v-model="form.structureType">
|
||||
<a-select-option
|
||||
<a-radio-group button-style="solid" placeholder="请选择结构类型" v-model="form.structureType">
|
||||
<a-radio-button
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in codes.houseStructureType"
|
||||
>{{ item.value }}</a-select-option>
|
||||
</a-select>
|
||||
>{{ item.value }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
@@ -129,7 +129,7 @@
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="基础情况" prop="baseInfo">
|
||||
<a-radio-group button-style="solid" v-model="form.baseInfo">
|
||||
<a-radio-button
|
||||
@@ -171,7 +171,11 @@
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="外墙外保温材料防火等级" prop="fireproofGrade">
|
||||
<a-form-model-item class="ant-row-flex" prop="fireproofGrade">
|
||||
<span slot="label">
|
||||
外墙外保温材料
|
||||
<br />防火等级
|
||||
</span>
|
||||
<a-radio-group button-style="solid" v-model="form.fireproofGrade">
|
||||
<a-radio-button
|
||||
:key="item.code"
|
||||
@@ -193,8 +197,8 @@
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="有无外墙面砖" prop="exteriorWallTile">
|
||||
<a-switch v-model="form.exteriorWallTile" />
|
||||
<a-form-model-item class="ant-row-flex" label="有无外墙面砖" prop="faceBrick">
|
||||
<a-switch v-model="form.faceBrick" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
@@ -498,10 +502,15 @@ const defaultForm = {
|
||||
address: '',
|
||||
axisX: '',
|
||||
axisY: '',
|
||||
|
||||
curtainWall: '1',
|
||||
faceBrick: true,
|
||||
whiteWash: true,
|
||||
coating: true,
|
||||
};
|
||||
|
||||
export default {
|
||||
props: ['param'],
|
||||
props: ['param', 'frame'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
@@ -513,30 +522,30 @@ 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: '请输入地下层' }],
|
||||
projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
|
||||
buildingName: [{ required: true, message: '请输入幢名称', trigger: 'blur' }],
|
||||
address: [{ required: true, message: '请输入坐落地址', trigger: 'blur' }],
|
||||
natureLand: [{ required: true, message: '请选择土地性质', trigger: 'blur' }],
|
||||
axisX: [{ required: true, message: '请在地图上选择坐标', trigger: 'blur' }],
|
||||
axisY: [{ required: true, message: '请在地图上选择坐标', trigger: 'blur' }],
|
||||
structureType: [{ required: true, message: '请选择结构类型', trigger: 'blur' }],
|
||||
aseismicGrade: [{ required: true, message: '请选择抗震等级', trigger: 'blur' }],
|
||||
baseInfo: [{ required: true, message: '请选择基础情况', trigger: 'blur' }],
|
||||
curtainWall: [{ required: true, message: '请选择建筑幕墙', trigger: 'blur' }],
|
||||
elevator: [{ required: true, message: '请选择电梯', trigger: 'blur' }],
|
||||
completedDate: [{ required: true, message: '请选择竣工日期', trigger: 'blur' }],
|
||||
useYear: [{ required: true, message: '请输入设计使用年限', trigger: 'blur' }],
|
||||
areaCount: [{ required: true, message: '请输入总建筑面积', trigger: 'blur' }],
|
||||
households: [{ required: true, message: '请输入总户数', trigger: 'blur' }],
|
||||
units: [{ required: true, message: '请输入房屋单元数', trigger: 'blur' }],
|
||||
unitHouseholds: [{ 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' }],
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
@@ -567,6 +576,19 @@ export default {
|
||||
this.form.insulationMaterial.splice(value.indexOf('0'), 1);
|
||||
}
|
||||
},
|
||||
|
||||
'form.curtainWall'(value) {
|
||||
this.frame.onTogglePane(!!+value, 'curtainWall');
|
||||
},
|
||||
'form.faceBrick'(value) {
|
||||
this.frame.onTogglePane(value, 'faceBrick');
|
||||
},
|
||||
'form.whiteWash'(value) {
|
||||
this.frame.onTogglePane(value, 'whiteWash');
|
||||
},
|
||||
'form.coating'(value) {
|
||||
this.frame.onTogglePane(value, 'coating');
|
||||
},
|
||||
},
|
||||
|
||||
async created() {
|
||||
@@ -579,7 +601,7 @@ export default {
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.map.destroy();
|
||||
if (this.map) this.map.destroy();
|
||||
},
|
||||
|
||||
methods: {
|
||||
@@ -700,12 +722,24 @@ export default {
|
||||
},
|
||||
|
||||
onMapInit() {
|
||||
const city = '3302';
|
||||
const city = '宁波市';
|
||||
|
||||
// 挂载map到this,但不监听
|
||||
this.map = new AMap.Map(this.$refs.map, { city });
|
||||
const district = new AMap.DistrictSearch({
|
||||
subdistrict: 0,
|
||||
extensions: 'all',
|
||||
level: 'city',
|
||||
});
|
||||
|
||||
district.search(city, (status, result) => {
|
||||
const bounds = result.districtList[0].boundaries;
|
||||
const mask = [];
|
||||
for (let i = 0; i < bounds.length; i += 1) {
|
||||
mask.push([bounds[i]]);
|
||||
}
|
||||
|
||||
// 挂载map到this,但不监听
|
||||
this.map = new AMap.Map(this.$refs.map, { city, viewMode: '3D', mask });
|
||||
|
||||
this.map.plugin(['AMap.Geocoder', 'AMap.AutoComplete', 'AMap.PlaceSearch'], () => {
|
||||
const geocoder = new AMap.Geocoder({ city });
|
||||
|
||||
let marker;
|
||||
@@ -742,6 +776,7 @@ export default {
|
||||
|
||||
const placeSearch = new AMap.PlaceSearch({
|
||||
city,
|
||||
citylimit: true,
|
||||
pageSize: 1,
|
||||
});
|
||||
|
||||
@@ -759,6 +794,15 @@ export default {
|
||||
this.map.setFitView();
|
||||
});
|
||||
});
|
||||
|
||||
for (let i = 0; i < bounds.length; i += 1) {
|
||||
new AMap.Polyline({
|
||||
path: bounds[i],
|
||||
strokeColor: '#ccc',
|
||||
strokeWeight: 4,
|
||||
map: this.map,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
@@ -16,22 +16,26 @@
|
||||
<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-row :gutter="16" type="flex">
|
||||
<a-col :span="24">
|
||||
<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-col>
|
||||
</a-row>
|
||||
</a-spin>
|
||||
</a-form-model>
|
||||
</template>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<!-- 表单控件 -->
|
||||
<!-- ... -->
|
||||
<a-row type="flex">
|
||||
<a-row :gutter="16" type="flex">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="物业保证金" prop="propertySecurity">
|
||||
<a-switch v-model="form.propertySecurity" />
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<!-- 表单控件 -->
|
||||
<!-- ... -->
|
||||
<a-row type="flex">
|
||||
<a-row :gutter="16" 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">
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
<section :id="`form-${index}`" :key="index">
|
||||
<h5 v-if="part.title">{{part.title}}</h5>
|
||||
<component
|
||||
:frame="frame"
|
||||
:is="part.component"
|
||||
:key="index"
|
||||
:param="param"
|
||||
@@ -41,7 +42,7 @@
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['param'],
|
||||
props: ['param', 'frame'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<!-- 表单控件 -->
|
||||
<!-- ... -->
|
||||
<a-row type="flex">
|
||||
<a-row :gutter="16" type="flex">
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="房屋场地" prop="houseSite">
|
||||
<a-checkbox-group v-model="form.houseSite">
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<!-- 表单控件 -->
|
||||
<!-- ... -->
|
||||
<a-row type="flex">
|
||||
<a-row :gutter="16" type="flex">
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="物业（经营）单位" prop="wuYeUnit">
|
||||
<a-input placeholder="请输入物业（经营）单位" v-model="form.wuYeUnit" />
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<!-- 表单控件 -->
|
||||
<!-- ... -->
|
||||
<a-row type="flex">
|
||||
<a-row :gutter="16" 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">
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<!-- 表单控件 -->
|
||||
<!-- ... -->
|
||||
<a-row type="flex">
|
||||
<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" />
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
504
Web/src/pages/business/house/houseInfo/form/curtainWall/base.vue
Normal file
504
Web/src/pages/business/house/houseInfo/form/curtainWall/base.vue
Normal file
@@ -0,0 +1,504 @@
|
||||
<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="treatmentProposal">
|
||||
<a-checkbox-group v-model="form.treatmentProposal">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
class="mb-xs"
|
||||
v-for="item in codes.housePosition"
|
||||
>{{ item.value }}</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="幕墙类型" prop="treatmentProposal">
|
||||
<a-radio-group v-model="form.treatmentProposal">
|
||||
<a-radio-button
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in codes.curtainWallType"
|
||||
>{{ 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="treatmentProposal">
|
||||
<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="12">
|
||||
<a-form-model-item class="ant-row-flex" prop="treatmentProposal">
|
||||
<span slot="label">
|
||||
幕墙缓冲区域
|
||||
<br />及防护措施
|
||||
</span>
|
||||
<a-checkbox-group v-model="form.treatmentProposal">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
class="mb-xs"
|
||||
v-for="item in codes.wallBuffer"
|
||||
>{{ item.value }}</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="幕墙竣工日期" prop="treatmentProposal">
|
||||
<a-date-picker class="w-100-p" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12"></a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="幕墙设计使用年限" prop="treatmentProposal">
|
||||
<a-row type="flex">
|
||||
<a-col flex="1">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:step="1"
|
||||
class="w-100-p"
|
||||
placeholder="请输入幕墙设计使用年限"
|
||||
v-model="form.areaCount"
|
||||
/>
|
||||
</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="treatmentProposal">
|
||||
<a-row type="flex">
|
||||
<a-col flex="1">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:step="1"
|
||||
class="w-100-p"
|
||||
placeholder="请输入幕墙质量保修期"
|
||||
v-model="form.areaCount"
|
||||
/>
|
||||
</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="treatmentProposal">
|
||||
<a-input />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="幕墙设计单位联系人" prop="treatmentProposal">
|
||||
<a-input />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="幕墙设计单位电话" prop="treatmentProposal">
|
||||
<a-input />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="幕墙施工单位" prop="treatmentProposal">
|
||||
<a-input />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="幕墙施工单位联系人" prop="treatmentProposal">
|
||||
<a-input />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="幕墙施工单位电话" prop="treatmentProposal">
|
||||
<a-input />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<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.storageOfDrawings"
|
||||
>{{ item.value }}</a-checkbox>
|
||||
<a-input
|
||||
class="w-300"
|
||||
placeholder="请输入其他图纸资料存档处"
|
||||
v-if="form.drawingMaterial && form.drawingMaterial.indexOf(codes.storageOfDrawings[codes.storageOfDrawings.length - 1].code) >= 0"
|
||||
v-model="form.drawingMaterialText"
|
||||
/>
|
||||
</a-checkbox-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<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-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="建筑高度" prop="treatmentProposal">
|
||||
<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="24">
|
||||
<a-form-model-item class="ant-row-flex ant-form-inline" 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">m</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">m</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex ant-form-inline" 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">m</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">m</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<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.structuralAnchor"
|
||||
>{{ item.value }}</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-spin>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
/* 表单内容默认值 */
|
||||
const defaultForm = {
|
||||
/* ... */
|
||||
facadePhoto: [],
|
||||
};
|
||||
|
||||
export default {
|
||||
props: ['param'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
labelCol: { flex: '150px' },
|
||||
wrapperCol: { flex: '1' },
|
||||
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
/* ... */
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
codes: {
|
||||
housePosition: [],
|
||||
curtainWallType: [],
|
||||
wallBuffer: [],
|
||||
storageOfDrawings: [],
|
||||
structuralAnchor: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
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);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/* ... */
|
||||
|
||||
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_position',
|
||||
'dic_house_curtain_wall_type',
|
||||
'dic_house_wall_buffer',
|
||||
'dic_house_storage_of_drawings',
|
||||
'dic_house_structural_anchor',
|
||||
],
|
||||
})
|
||||
.then(
|
||||
({
|
||||
data: {
|
||||
dic_house_position,
|
||||
dic_house_curtain_wall_type,
|
||||
dic_house_wall_buffer,
|
||||
dic_house_storage_of_drawings,
|
||||
dic_house_structural_anchor,
|
||||
},
|
||||
}) => {
|
||||
this.codes = {
|
||||
housePosition: dic_house_position,
|
||||
curtainWallType: dic_house_curtain_wall_type,
|
||||
wallBuffer: dic_house_wall_buffer,
|
||||
storageOfDrawings: dic_house_storage_of_drawings,
|
||||
structuralAnchor: dic_house_structural_anchor,
|
||||
};
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
/* 上传图片相关 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>
|
||||
@@ -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="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">m²</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="unitHouseholds">
|
||||
<a-switch />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="结构、构造类型" prop="treatmentProposal">
|
||||
<a-checkbox-group v-model="form.treatmentProposal">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
class="mb-xs"
|
||||
v-for="item in codes.canopyStructureType"
|
||||
>{{ 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="treatmentProposal">
|
||||
<a-checkbox-group v-model="form.treatmentProposal">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
class="mb-xs"
|
||||
v-for="item in codes.hollowGlass"
|
||||
>{{ item.value }}</a-checkbox>
|
||||
</a-checkbox-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: {
|
||||
/* ... */
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
codes: {
|
||||
canopyStructureType: [],
|
||||
hollowGlass: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
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_canopy_structure_type', 'dic_house_hollow_glass'],
|
||||
})
|
||||
.then(({ data: { dic_house_canopy_structure_type, dic_house_hollow_glass } }) => {
|
||||
this.codes = {
|
||||
canopyStructureType: dic_house_canopy_structure_type,
|
||||
hollowGlass: dic_house_hollow_glass,
|
||||
};
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -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 :gutter="16" type="flex">
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="结构类型" prop="treatmentProposal">
|
||||
<a-checkbox-group v-model="form.treatmentProposal">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
class="mb-xs"
|
||||
v-for="item in codes.glassStructureType"
|
||||
>{{ 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 ant-form-inline" 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">m²</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">m²</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">m²</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">m²</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">m²</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">m²</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="中空玻璃外片" prop="treatmentProposal">
|
||||
<a-checkbox-group v-model="form.treatmentProposal">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
class="mb-xs"
|
||||
v-for="item in codes.hollowGlass"
|
||||
>{{ item.value }}</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="非中空玻璃外片" prop="treatmentProposal">
|
||||
<a-checkbox-group v-model="form.treatmentProposal">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
class="mb-xs"
|
||||
v-for="item in codes.noHollowGlass"
|
||||
>{{ item.value }}</a-checkbox>
|
||||
</a-checkbox-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: {
|
||||
/* ... */
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
codes: {
|
||||
glassStructureType: [],
|
||||
hollowGlass: [],
|
||||
noHollowGlass: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
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_glass_structure_type', 'dic_house_hollow_glass', 'dic_house_no_hollow_glass'],
|
||||
})
|
||||
.then(({ data: { dic_house_glass_structure_type, dic_house_hollow_glass, dic_house_no_hollow_glass } }) => {
|
||||
this.codes = {
|
||||
glassStructureType: dic_house_glass_structure_type,
|
||||
hollowGlass: dic_house_hollow_glass,
|
||||
noHollowGlass: dic_house_no_hollow_glass,
|
||||
};
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<!--
|
||||
整页表单的页签内框架,整合分片表单
|
||||
v 1.0
|
||||
2021-05-12
|
||||
Lufthafen
|
||||
-->
|
||||
<container>
|
||||
<!-- 如果不想使用锚点,删除a-row->a-col,只留内部的a-card层即可 -->
|
||||
<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-curtainwall-${index}`" :key="index">
|
||||
<h5 v-if="part.title">{{part.title}}</h5>
|
||||
<component
|
||||
: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-curtainwall-${index}`"
|
||||
:key="index"
|
||||
:title="part.title"
|
||||
v-for="(part, index) in parts"
|
||||
/>
|
||||
</a-anchor>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['param'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
parts: [
|
||||
/**
|
||||
* {
|
||||
* title: '标题',
|
||||
* component: () => import('...'),
|
||||
* }
|
||||
*/
|
||||
{
|
||||
title: '基本资料',
|
||||
component: () => import('./base'),
|
||||
},
|
||||
{
|
||||
title: '玻璃幕墙',
|
||||
component: () => import('./glass'),
|
||||
},
|
||||
{
|
||||
title: '采光顶',
|
||||
component: () => import('./skylight'),
|
||||
},
|
||||
{
|
||||
title: '雨棚',
|
||||
component: () => import('./cnopy'),
|
||||
},
|
||||
{
|
||||
title: '石材',
|
||||
component: () => import('./stone'),
|
||||
},
|
||||
{
|
||||
title: '金属',
|
||||
component: () => import('./metal'),
|
||||
},
|
||||
{
|
||||
title: '其他幕墙',
|
||||
component: () => import('./other'),
|
||||
},
|
||||
{
|
||||
title: '调查单位',
|
||||
component: () => import('./unit'),
|
||||
},
|
||||
{
|
||||
title: '安全检查',
|
||||
component: () => import('./patrol'),
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 循环子组件中的onGetData
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
let formData = {};
|
||||
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 {
|
||||
reject();
|
||||
return;
|
||||
}
|
||||
}
|
||||
resolve(formData);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,191 @@
|
||||
<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="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">m²</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="金属类型" prop="treatmentProposal">
|
||||
<a-checkbox-group v-model="form.treatmentProposal">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
class="mb-xs"
|
||||
v-for="item in codes.metalType"
|
||||
>{{ item.value }}</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="密封类型" prop="treatmentProposal">
|
||||
<a-checkbox-group v-model="form.treatmentProposal">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
class="mb-xs"
|
||||
v-for="item in codes.metalSealType"
|
||||
>{{ item.value }}</a-checkbox>
|
||||
</a-checkbox-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: {
|
||||
/* ... */
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
codes: {
|
||||
metalType: [],
|
||||
metalSealType: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
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_metal_type', 'dic_house_metal_seal_type'],
|
||||
})
|
||||
.then(({ data: { dic_house_metal_type, dic_house_metal_seal_type } }) => {
|
||||
this.codes = {
|
||||
metalType: dic_house_metal_type,
|
||||
metalSealType: dic_house_metal_seal_type,
|
||||
};
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,301 @@
|
||||
<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="24">
|
||||
<a-form-model-item class="ant-row-flex" label="幕墙类型" prop="treatmentProposal">
|
||||
<a-checkbox-group v-model="form.treatmentProposal">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
class="mb-xs"
|
||||
v-for="item in codes.ortherWallType"
|
||||
>{{ item.value }}</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<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">m²</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12"></a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="幕墙施工图审核单位" prop="unitHouseholds">
|
||||
<a-input />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="幕墙四性检测单位" prop="unitHouseholds">
|
||||
<a-input />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="幕墙维护单位" prop="unitHouseholds">
|
||||
<a-input />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12"></a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="负责人" prop="unitHouseholds">
|
||||
<a-input />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="负责人电话" prop="unitHouseholds">
|
||||
<a-input />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="联系人" prop="unitHouseholds">
|
||||
<a-input />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="联系人电话" prop="unitHouseholds">
|
||||
<a-input />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="幕墙鉴定情况" prop="treatmentProposal">
|
||||
<a-radio-group button-style="solid" v-model="form.treatmentProposal">
|
||||
<a-radio-button
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in codes.wallIdentification"
|
||||
>{{ 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="unitHouseholds">
|
||||
<a-textarea auto-size />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="幕墙使用维护说明书" prop="unitHouseholds">
|
||||
<a-row :gutter="16" type="flex">
|
||||
<a-col>
|
||||
<a-switch />
|
||||
</a-col>
|
||||
<a-col flex="1">
|
||||
<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-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="幕墙安全使用管理制度" prop="unitHouseholds">
|
||||
<a-row :gutter="16" type="flex">
|
||||
<a-col>
|
||||
<a-switch />
|
||||
</a-col>
|
||||
<a-col flex="1">
|
||||
<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-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: {
|
||||
/* ... */
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
codes: {
|
||||
ortherWallType: [],
|
||||
wallIdentification: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
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_orther_wall_type', 'dic_house_wall_identification'],
|
||||
})
|
||||
.then(({ data: { dic_house_orther_wall_type, dic_house_wall_identification } }) => {
|
||||
this.codes = {
|
||||
ortherWallType: dic_house_orther_wall_type,
|
||||
wallIdentification: dic_house_wall_identification,
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
/* 上传下载文件相关 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>
|
||||
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
@@ -0,0 +1,210 @@
|
||||
<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="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">m²</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="unitHouseholds">
|
||||
<a-switch />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="结构、构造类型" prop="treatmentProposal">
|
||||
<a-checkbox-group v-model="form.treatmentProposal">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
class="mb-xs"
|
||||
v-for="item in codes.skylightStructureType"
|
||||
>{{ item.value }}</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="中空玻璃外片" prop="treatmentProposal">
|
||||
<a-checkbox-group v-model="form.treatmentProposal">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
class="mb-xs"
|
||||
v-for="item in codes.hollowGlass"
|
||||
>{{ item.value }}</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="非中空玻璃外片" prop="treatmentProposal">
|
||||
<a-checkbox-group v-model="form.treatmentProposal">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
class="mb-xs"
|
||||
v-for="item in codes.noHollowGlass"
|
||||
>{{ item.value }}</a-checkbox>
|
||||
</a-checkbox-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: {
|
||||
/* ... */
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
codes: {
|
||||
skylightStructureType: [],
|
||||
hollowGlass: [],
|
||||
noHollowGlass: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
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_skylight_structure_type', 'dic_house_hollow_glass', 'dic_house_no_hollow_glass'],
|
||||
})
|
||||
.then(({ data: { dic_house_skylight_structure_type, dic_house_hollow_glass, dic_house_no_hollow_glass } }) => {
|
||||
this.codes = {
|
||||
skylightStructureType: dic_house_skylight_structure_type,
|
||||
hollowGlass: dic_house_hollow_glass,
|
||||
noHollowGlass: dic_house_no_hollow_glass,
|
||||
};
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,205 @@
|
||||
<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="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">m²</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="构造类型" prop="treatmentProposal">
|
||||
<a-checkbox-group v-model="form.treatmentProposal">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
class="mb-xs"
|
||||
v-for="item in codes.stoneStructureType"
|
||||
>{{ item.value }}</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="密封类型" prop="treatmentProposal">
|
||||
<a-checkbox-group v-model="form.treatmentProposal">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
class="mb-xs"
|
||||
v-for="item in codes.stoneSealType"
|
||||
>{{ item.value }}</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="面板种类" prop="treatmentProposal">
|
||||
<a-checkbox-group v-model="form.treatmentProposal">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
class="mb-xs"
|
||||
v-for="item in codes.stonePanelType"
|
||||
>{{ item.value }}</a-checkbox>
|
||||
</a-checkbox-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: {
|
||||
/* ... */
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
codes: {
|
||||
stoneStructureType: [],
|
||||
stoneSealType: [],
|
||||
stonePanelType: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
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_stone_structure_type', 'dic_house_stone_seal_type', 'dic_house_stone_panel_type'],
|
||||
})
|
||||
.then(({ data: { dic_house_stone_structure_type, dic_house_stone_seal_type, dic_house_stone_panel_type } }) => {
|
||||
this.codes = {
|
||||
stoneStructureType: dic_house_stone_structure_type,
|
||||
stoneSealType: dic_house_stone_seal_type,
|
||||
stonePanelType: dic_house_stone_panel_type,
|
||||
};
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
156
Web/src/pages/business/house/houseInfo/form/curtainWall/unit.vue
Normal file
156
Web/src/pages/business/house/houseInfo/form/curtainWall/unit.vue
Normal 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 :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>
|
||||
</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>
|
||||
260
Web/src/pages/business/house/houseInfo/form/faceBrick/base.vue
Normal file
260
Web/src/pages/business/house/houseInfo/form/faceBrick/base.vue
Normal file
@@ -0,0 +1,260 @@
|
||||
<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="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="24">
|
||||
<a-form-model-item class="ant-row-flex" label="粘贴基层做法" prop="treatmentProposal">
|
||||
<a-checkbox-group v-model="form.treatmentProposal">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in codes.stickup"
|
||||
>{{ 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="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-col>
|
||||
</a-row>
|
||||
</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: {
|
||||
/* ... */
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
codes: {
|
||||
stickup: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
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);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/* ... */
|
||||
|
||||
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_facebrick_stickup'],
|
||||
})
|
||||
.then(({ data: { dic_house_facebrick_stickup } }) => {
|
||||
this.codes = {
|
||||
stickup: dic_house_facebrick_stickup,
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
/* 上传图片相关 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>
|
||||
106
Web/src/pages/business/house/houseInfo/form/faceBrick/index.vue
Normal file
106
Web/src/pages/business/house/houseInfo/form/faceBrick/index.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<!--
|
||||
整页表单的页签内框架,整合分片表单
|
||||
v 1.0
|
||||
2021-05-12
|
||||
Lufthafen
|
||||
-->
|
||||
<container>
|
||||
<!-- 如果不想使用锚点,删除a-row->a-col,只留内部的a-card层即可 -->
|
||||
<a-row :gutter="16" type="flex">
|
||||
<a-col flex="1">
|
||||
<br />
|
||||
<a-alert message="所有字段未绑定" type="warning"></a-alert>
|
||||
<br />
|
||||
<a-card class="yo-form-page--body">
|
||||
<template v-for="(part, index) in parts">
|
||||
<section :id="`form-facebrick-${index}`" :key="index">
|
||||
<h5 v-if="part.title">{{part.title}}</h5>
|
||||
<component
|
||||
: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-facebrick-${index}`"
|
||||
:key="index"
|
||||
:title="part.title"
|
||||
v-for="(part, index) in parts"
|
||||
/>
|
||||
</a-anchor>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['param'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
parts: [
|
||||
/**
|
||||
* {
|
||||
* title: '标题',
|
||||
* component: () => import('...'),
|
||||
* }
|
||||
*/
|
||||
{
|
||||
title: '基本情况',
|
||||
component: () => import('./base'),
|
||||
},
|
||||
{
|
||||
title: '调查单位',
|
||||
component: () => import('./unit'),
|
||||
},
|
||||
{
|
||||
title: '安全检查',
|
||||
component: () => import('./patrol'),
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 循环子组件中的onGetData
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
let formData = {};
|
||||
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 {
|
||||
reject();
|
||||
return;
|
||||
}
|
||||
}
|
||||
resolve({
|
||||
faceBrick: formData,
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
386
Web/src/pages/business/house/houseInfo/form/faceBrick/patrol.vue
Normal file
386
Web/src/pages/business/house/houseInfo/form/faceBrick/patrol.vue
Normal file
@@ -0,0 +1,386 @@
|
||||
<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="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="检查日期" prop="projectName">
|
||||
<a-date-picker class="w-100-p" placeholder="请选择检查日期" v-model="form.projectName" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" prop="projectName">
|
||||
<span slot="label">
|
||||
是否发生过使用
|
||||
<br />安全问题
|
||||
</span>
|
||||
<a-row :gutter="16" type="flex">
|
||||
<a-col>
|
||||
<a-switch v-model="form.exteriorWallTile" />
|
||||
</a-col>
|
||||
<a-col flex="1">
|
||||
<a-textarea auto-size placeholder="请输入安全问题备注" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="是否有日常维护" prop="projectName">
|
||||
<a-row :gutter="16" type="flex">
|
||||
<a-col>
|
||||
<a-switch v-model="form.exteriorWallTile" />
|
||||
</a-col>
|
||||
<a-col flex="1">
|
||||
<a-textarea auto-size placeholder="请输入日常维护备注" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="是否存在安全隐患" prop="projectName">
|
||||
<a-row :gutter="16" type="flex">
|
||||
<a-col>
|
||||
<a-switch v-model="form.exteriorWallTile" />
|
||||
</a-col>
|
||||
<a-col flex="1">
|
||||
<a-textarea auto-size placeholder="请输入安全隐患备注" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<fieldset>
|
||||
<legend>检查情况</legend>
|
||||
<a-form-model-item class="ant-row-flex" label="雨水渗漏情况" prop="projectName">
|
||||
<a-row :gutter="16" type="flex">
|
||||
<a-col :span="12">
|
||||
<a-textarea auto-size placeholder="请输入安全隐患备注" />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<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-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item class="ant-row-flex" label="面砖空鼓、脱落情况" prop="projectName">
|
||||
<a-row :gutter="16" type="flex">
|
||||
<a-col :span="12">
|
||||
<a-textarea auto-size placeholder="请输入安全隐患备注" />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<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-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item class="ant-row-flex" prop="projectName">
|
||||
<span slot="label">
|
||||
装饰保温层空鼓、
|
||||
<br />脱落情况
|
||||
</span>
|
||||
<a-row :gutter="16" type="flex">
|
||||
<a-col :span="12">
|
||||
<a-textarea auto-size placeholder="请输入安全隐患备注" />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<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-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item class="ant-row-flex" label="其他情况" prop="projectName">
|
||||
<a-row :gutter="16" type="flex">
|
||||
<a-col :span="12">
|
||||
<a-textarea auto-size placeholder="请输入安全隐患备注" />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<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-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
</fieldset>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="主要安全隐患综述" prop="mainSafety">
|
||||
<a-checkbox-group v-model="form.mainSafety">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in codes.mainSafety"
|
||||
>{{ 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" prop="mainSafety">
|
||||
<span slot="label">
|
||||
主要安全隐患综述
|
||||
<br />备注
|
||||
</span>
|
||||
<a-textarea />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="处理建议" prop="treatmentProposal">
|
||||
<a-checkbox-group v-model="form.treatmentProposal">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in codes.treatmentProposal"
|
||||
>{{ 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="mainSafety">
|
||||
<a-textarea />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="整改情况" prop="mainSafety">
|
||||
<a-textarea />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="填表人" prop="mainSafety">
|
||||
<a-input />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="填表日期" prop="mainSafety">
|
||||
<a-date-picker class="w-100-p" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="审核人" prop="mainSafety">
|
||||
<a-input />
|
||||
</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: {
|
||||
/* ... */
|
||||
mainSafety: [{ required: true, message: '请选择主要安全隐患综述', trigger: 'blur' }],
|
||||
treatmentProposal: [{ required: true, message: '请选择处理意见', trigger: 'blur' }],
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
codes: {
|
||||
mainSafety: [],
|
||||
treatmentProposal: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
'form.mainSafety'(value, oldValue) {
|
||||
this.onCheckedNone(value, oldValue, 'mainSafety');
|
||||
},
|
||||
|
||||
'form.treatmentProposal'(value, oldValue) {
|
||||
this.onCheckedNone(value, oldValue, 'treatmentProposal');
|
||||
},
|
||||
},
|
||||
|
||||
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_facebrick_mainsafety', 'dic_house_facebrick_treatment_proposal'],
|
||||
})
|
||||
.then(({ data: { dic_house_facebrick_mainsafety, dic_house_facebrick_treatment_proposal } }) => {
|
||||
this.codes = {
|
||||
mainSafety: dic_house_facebrick_mainsafety,
|
||||
treatmentProposal: dic_house_facebrick_treatment_proposal,
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
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);
|
||||
}
|
||||
},
|
||||
|
||||
/* 上传下载文件相关 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>
|
||||
156
Web/src/pages/business/house/houseInfo/form/faceBrick/unit.vue
Normal file
156
Web/src/pages/business/house/houseInfo/form/faceBrick/unit.vue
Normal 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 :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>
|
||||
</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>
|
||||
@@ -17,11 +17,49 @@
|
||||
</div>
|
||||
|
||||
<!-- 表单主体 -->
|
||||
<a-tabs type="card">
|
||||
<a-tab-pane :force-render="true" :key="index" :tab="tab.title" v-for="(tab, index) in tabs">
|
||||
<component :is="tab.component" :param="param" ref="forms" v-if="tab.component" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<!--
|
||||
挂载了一个content到tab后面
|
||||
如果直接使用antd-vue的tab,将会莫名其妙地做各种多余的渲染,导致卡顿
|
||||
现在只使用其tab卡片,重写了一个tab内容
|
||||
-->
|
||||
<div class="yo-tab-external-mount">
|
||||
<a-tabs @change="onTabChange" type="card">
|
||||
<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-popover placement="bottomRight" slot="tabBarExtraContent">
|
||||
<template slot="content">
|
||||
<p>Content</p>
|
||||
<p>Content</p>
|
||||
</template>
|
||||
<template slot="title">
|
||||
<span>Title</span>
|
||||
</template>
|
||||
<a-button class="block">
|
||||
房屋基本情况
|
||||
<a-icon type="down" />
|
||||
</a-button>
|
||||
</a-popover>
|
||||
</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"
|
||||
>
|
||||
<component
|
||||
:frame="self"
|
||||
:is="tab.component"
|
||||
:param="param"
|
||||
ref="forms"
|
||||
v-if="tab.component"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -34,20 +72,51 @@ export default {
|
||||
{
|
||||
title: '房屋基本情况',
|
||||
component: () => import('./base'),
|
||||
active: true,
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
title: '测试',
|
||||
title: '幕墙信息',
|
||||
name: 'curtainWall',
|
||||
component: () => import('./curtainWall'),
|
||||
active: false,
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
title: '第三个',
|
||||
title: '面砖信息',
|
||||
name: 'faceBrick',
|
||||
component: () => import('./faceBrick'),
|
||||
active: false,
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
title: '墙面粉刷信息',
|
||||
name: 'whiteWash',
|
||||
component: () => import('./whiteWash'),
|
||||
active: false,
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
title: '墙面涂料信息',
|
||||
name: 'coating',
|
||||
component: () => import('./coating'),
|
||||
active: false,
|
||||
show: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
self() {
|
||||
return this;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
async onSubmit() {
|
||||
let formData = {};
|
||||
let formData = {},
|
||||
flag = true;
|
||||
for (let i = 0; i < this.$refs.forms.length; i++) {
|
||||
const form = this.$refs.forms[i];
|
||||
try {
|
||||
@@ -57,14 +126,31 @@ export default {
|
||||
...data,
|
||||
};
|
||||
} catch {
|
||||
return;
|
||||
flag = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (!flag) {
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* 对表单提交进行处理
|
||||
*/
|
||||
},
|
||||
|
||||
onTabChange(key) {
|
||||
this.tabs.forEach((p, i) => {
|
||||
p.active = i === key;
|
||||
});
|
||||
},
|
||||
|
||||
onTogglePane(show, name) {
|
||||
const pane = this.tabs.find((p) => p.name === name);
|
||||
if (pane) {
|
||||
pane.show = show;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
@@ -4,7 +4,7 @@
|
||||
<p>标签页从外到里需要添加三层，包括【外部标签框架】、【内部标签框架】和【分片表单】</p>
|
||||
<p>
|
||||
外部标签框架
|
||||
<a-tag>1.0</a-tag>
|
||||
<a-tag>1.1</a-tag>
|
||||
</p>
|
||||
<p>构成tabs标签页，在内调用每个标签页的pane组件</p>
|
||||
<Highlight :code="codes['/seed/form-page/tab-form/tab.vue']" copy-template language="html" />
|
||||
|
||||
@@ -1,56 +1,75 @@
|
||||
<template>
|
||||
<a-layout-content>
|
||||
<a-tabs @change="onChange" @edit="onClose" hide-add type="editable-card" v-model="actived">
|
||||
<a-tab-pane
|
||||
:closable="pane.closable"
|
||||
:forceRender="true"
|
||||
:key="pane.key"
|
||||
v-for="pane in panes"
|
||||
>
|
||||
<a-dropdown :trigger="['contextmenu']" slot="tab">
|
||||
<div>
|
||||
<a-icon :type="pane.icon" v-if="pane.icon" />
|
||||
{{ pane.title }}
|
||||
</div>
|
||||
<a-menu slot="overlay">
|
||||
<template v-if="mode === 'development'">
|
||||
<a-menu-item @click="onCopyComponent(pane)" key="-1">
|
||||
复制组件地址
|
||||
<a-tag color="red">dev</a-tag>
|
||||
</a-menu-item>
|
||||
<div class="yo-tab-external-mount">
|
||||
<a-tabs @change="onChange" @edit="onClose" hide-add type="editable-card" v-model="actived">
|
||||
<a-tab-pane
|
||||
:closable="pane.closable"
|
||||
:force-render="true"
|
||||
:key="pane.key"
|
||||
v-for="pane in panes"
|
||||
>
|
||||
<a-dropdown :trigger="['contextmenu']" slot="tab">
|
||||
<div>
|
||||
<a-icon :type="pane.icon" v-if="pane.icon" />
|
||||
{{ pane.title }}
|
||||
</div>
|
||||
<a-menu slot="overlay">
|
||||
<template v-if="mode === 'development'">
|
||||
<a-menu-item @click="onCopyComponent(pane)" key="-1">
|
||||
复制组件地址
|
||||
<a-tag color="red">dev</a-tag>
|
||||
</a-menu-item>
|
||||
<a-menu-divider />
|
||||
</template>
|
||||
<a-menu-item @click="onLoadContentWindow(pane.key)" key="0">重新加载</a-menu-item>
|
||||
<a-menu-divider />
|
||||
</template>
|
||||
<a-menu-item @click="onLoadContentWindow(pane.key)" key="0">重新加载</a-menu-item>
|
||||
<a-menu-divider />
|
||||
<a-menu-item :disabled="!pane.closable" @click="$emit('close', pane.key);" key="1">关闭</a-menu-item>
|
||||
<a-menu-item
|
||||
:disabled="!hasOther(pane)"
|
||||
@click="$emit('close-other', pane.key)"
|
||||
key="2"
|
||||
>关闭其他标签页</a-menu-item>
|
||||
<a-menu-item
|
||||
:disabled="!hasRight(pane)"
|
||||
@click="$emit('close-right', pane.key)"
|
||||
key="3"
|
||||
>关闭右侧标签页</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
<component
|
||||
<a-menu-item :disabled="!pane.closable" @click="$emit('close', pane.key);" key="1">关闭</a-menu-item>
|
||||
<a-menu-item
|
||||
:disabled="!hasOther(pane)"
|
||||
@click="$emit('close-other', pane.key)"
|
||||
key="2"
|
||||
>关闭其他标签页</a-menu-item>
|
||||
<a-menu-item
|
||||
:disabled="!hasRight(pane)"
|
||||
@click="$emit('close-right', pane.key)"
|
||||
key="3"
|
||||
>关闭右侧标签页</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
<!-- <component
|
||||
:is="pane.component"
|
||||
:key="pane.key"
|
||||
:param="pane.param"
|
||||
ref="panes"
|
||||
v-if="pane.loaded"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
/>-->
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
<div class="yo-tab-external-mount-content">
|
||||
<div
|
||||
:class="pane.key === actived ? 'yo-tab-external-tabpane-active' : 'yo-tab-external-tabpane-inactive'"
|
||||
:key="pane.key"
|
||||
class="yo-tab-external-tabpane"
|
||||
v-for="pane in panes"
|
||||
>
|
||||
<component
|
||||
:is="pane.component"
|
||||
:key="pane.key"
|
||||
:param="pane.param"
|
||||
ref="panes"
|
||||
v-if="pane.loaded"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-layout-content>
|
||||
</template>
|
||||
<script>
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
|
||||
NProgress.configure({ parent: '.ant-layout-content > .ant-tabs > .ant-tabs-content' });
|
||||
NProgress.configure({ parent: '.ant-layout-content > .yo-tab-external-mount > .yo-tab-external-mount-content' });
|
||||
|
||||
export default {
|
||||
props: {
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
<a-drawer
|
||||
:body-style="{ padding: 0 }"
|
||||
:closable="false"
|
||||
:get-container="'.ant-layout-content > .ant-tabs'"
|
||||
:get-container="'.ant-layout-content > .yo-tab-external-mount'"
|
||||
:visible="showNav"
|
||||
:wrap-style="{ position: 'absolute' }"
|
||||
@close="showNav = false"
|
||||
|
||||
Reference in New Issue
Block a user