update 增加了房屋安全的幕墙和面砖表单,未匹配字段

Api/Ewide.Core/Ewide.Core.xml

@@ -680,16 +680,6 @@
             字典类型表
             </summary>
         </member>
-        <member name="P:Ewide.Core.SysDictType.Pid">
-            <summary>
-            父Id
-            </summary>
-        </member>
-        <member name="P:Ewide.Core.SysDictType.Pids">
-            <summary>
-            父Ids
-            </summary>
-        </member>
         <member name="P:Ewide.Core.SysDictType.Name">
             <summary>
             名称
@@ -4004,11 +3994,6 @@
             状态（字典 0正常 1停用 2删除）
             </summary>
         </member>
-        <member name="P:Ewide.Core.Service.AddDictTypeInput.Pid">
-            <summary>
-            父id
-            </summary>
-        </member>
         <member name="P:Ewide.Core.Service.AddDictTypeInput.Name">
             <summary>
             名称
@@ -4177,22 +4162,6 @@
             </summary>
             <returns></returns>
         </member>
-        <member name="M:Ewide.Core.Service.SysDictTypeService.CreateNewPids(System.String)">
-            <summary>
-            创建Pids格式 
-            如果pid是0顶级节点，pids就是 [0];
-            如果pid不是顶级节点，pids就是 pid菜单的 pids + [pid] + ,
-            </summary>
-            <param name="pid"></param>
-            <returns></returns>
-        </member>
-        <member name="M:Ewide.Core.Service.SysDictTypeService.GetChildIdListWithSelfById(System.String)">
-            <summary>
-            根据节点Id获取所有子节点Id集合，包含自己
-            </summary>
-            <param name="id"></param>
-            <returns></returns>
-        </member>
         <member name="T:Ewide.Core.Service.EmpExtOrgPosOutput">
             <summary>
             附属机构和职位参数

Api/Ewide.Core/Extension/PageExtensions.cs

@@ -23,12 +23,12 @@ namespace Ewide.Core.Extension
             var defaultField = hasSort ? "Sort" : (hasId ? "Id" : "");
 
             // 约定默认每张表都有Id排序
-            var orderStr = string.IsNullOrEmpty(defaultField) ? "" : defaultField + (descSort ? " Desc" : " Asc");
+            var orderStr = string.IsNullOrEmpty(defaultField) ? "" : defaultField + (descSort ? " Asc" : " Desc");
 
             // 排序是否可用-排序字段和排序顺序都为非空才启用排序            
             if (!string.IsNullOrEmpty(pageInput.SortField) && !string.IsNullOrEmpty(pageInput.SortOrder))
             {
-                orderStr = $"{pageInput.SortField} {(pageInput.SortOrder == pageInput.DescStr ? "Desc" : "Asc")}";
+                orderStr = $"{pageInput.SortField} {(pageInput.SortOrder == pageInput.DescStr ? "Asc" : "Desc")}";
             }
             return orderStr;
         }

Api/Ewide.Core/applicationconfig.json

@@ -25,7 +25,7 @@
   "WriteXmlPath": {
     "SeedData": "SeedDataXml",
     "DataBase": "DataBaseXml",
-    "ReadSelect": "DataBase" // SeedData 和 DataBase 两个中间选
+    "ReadSelect": "SeedData" // SeedData 和 DataBase 两个中间选
   },
   "RSA": {
     "publickey": "<RSAKeyValue><Modulus>tu98wMoo297l+juulU4a3Xx7c2SZ93f0gTPKohE0uz4o8jWN8zXnAAfhf6MMTlkgf+qIwaORLtBQohDcX6Xp02Qe7Cq2LujVR+YJHxy2uo8+KTc5Rj/d0OkTjeCozGaJQH0XrwUO7w+rDnyXzA52IvMZPnUV3KnOj1mPH0IhrOU=</Modulus><Exponent>AQAB</Exponent></RSAKeyValue>",

Web/.env.production

@@ -1,3 +1,3 @@
 VUE_APP_NODE_ENV=production
-VUE_APP_BASE_URL=http://localhost:60161
+VUE_APP_BASE_URL=http://localhost:5566
 VUE_APP_DEV_KEY=%0!qF2BpcVorlNceu#kP4SVS1bPiMUqI71%rITatPIosNOCrot@mV7PJ&br$CVvF

Web/public/doc-code/seed/form-page/tab-form/tab.vue

@@ -1,8 +1,8 @@
 <template>
   <!-- 
     整页表单的页签外框架
-    v 1.0
+    v 1.1
-    2021-05-12
+    2021-05-17
     Lufthafen
   -->
   <div class="yo-form-page">
@@ -23,11 +23,35 @@
     </div>
 
     <!-- 表单主体 -->
-    <a-tabs type="card">
+    <!-- 
-      <a-tab-pane :force-render="true" :key="index" :tab="tab.title" v-for="(tab, index) in tabs">
+      挂载了一个content到tab后面
-        <component :is="tab.component" :param="param" ref="forms" v-if="tab.component" />
+      如果直接使用antd-vue的tab,将会莫名其妙地做各种多余的渲染,导致卡顿
-      </a-tab-pane>
+      现在只使用其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"></a-tab-pane>
+        </template>
       </a-tabs>
+      <div class="yo-tab-external-mount-content">
+        <template v-for="(tab, index) in tabs">
+          <div
+            :class="tab.active ? 'yo-tab-external-tabpane-active' : 'yo-tab-external-tabpane-inactive'"
+            :key="index"
+            class="yo-tab-external-tabpane"
+          >
+            <component
+              :frame="self"
+              :is="tab.component"
+              :param="param"
+              ref="forms"
+              v-if="tab.component"
+            />
+          </div>
+        </template>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -41,6 +65,7 @@ export default {
          * {
          *    title: '标题',
          *    component: () => import('...'),
+         *    active: false,
          * }
          */
       ],
@@ -49,7 +74,8 @@ export default {
 
   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 {
@@ -59,14 +85,24 @@ export default {
             ...data,
           };
         } catch {
-          return;
+          flag = false;
         }
       }
 
+      if (!flag) {
+        return;
+      }
+
       /**
        * 对表单提交进行处理
        */
     },
+
+    onTabChange(key) {
+      this.tabs.forEach((p, i) => {
+        p.active = i === key;
+      });
+    },
   },
 };
 </script>

Web/public/index.html

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

Web/src/assets/style/app.less

@@ -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';

Web/src/assets/style/lib/form-page.less

@@ -5,12 +5,13 @@
 
   height: 100%;
 
-  >.ant-tabs {
+  >.yo-tab-external-mount {
     display: flex;
     flex-direction: column;
 
     height: 100%;
 
+    >.ant-tabs {
       >.ant-tabs-bar {
         margin-bottom: 0;
 
@@ -21,8 +22,13 @@
           padding: (@tabs-card-height + @padding-xs - @btn-height-base) / 2 @padding-md;
         }
 
+        .ant-tabs-extra-content {
+          padding: (@tabs-card-height + @padding-xs - @btn-height-base) / 2 @padding-md;
+        }
+
         .ant-tabs-tab {
           .ant-btn();
+          transition: none;
 
           &:hover {
             border-color: @btn-default-border;
@@ -49,13 +55,14 @@
           }
         }
       }
+    }
 
-    >.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 {
+      +.yo-tab-external-mount {
-        >.ant-tabs-content {
+        >.yo-tab-external-mount-content {
-          >.ant-tabs-tabpane {
+          >.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;
         }
       }
     }

Web/src/assets/style/lib/form.less

@@ -282,44 +282,39 @@
     }
   }
 }
-.ant-form-item-required {
+.ant-form {
-  @keyframes required-animation {
+  fieldset {
-    // 0% {
+    margin-bottom: @padding-lg;
-    //   transform: translateX(-5px) scale(.1);
+    padding: @padding-md;
 
-    //   opacity: .1;
+    border: @border-width-base @border-style-base @border-color-split;
-    // }
-
-    // 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;
-    // }
   }
+  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;

Web/src/assets/style/lib/radio.less

@@ -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;
+    }
+  }
+}

Web/src/assets/style/main.less

@@ -142,7 +142,7 @@
   }
   .ant-layout-content {
     position: relative;
-    >.ant-tabs {
+    >.yo-tab-external-mount {
       position: absolute;
       top: 0;
       left: 0;
@@ -152,9 +152,11 @@
       flex-direction: column;
 
       width: 100%;
-      >.ant-tabs-bar {
+      >.ant-tabs {
         z-index: 5;
 
+        overflow: visible;
+        >.ant-tabs-bar {
           margin-bottom: 0;
 
           border-bottom: 0;
@@ -214,11 +216,12 @@
             }
           }
         }
-      >.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 {
+          &.yo-tab-external-tabpane-inactive {
-            position: absolute;
+            pointer-events: none;
-            top: 0;
-            left: 0;
 
-            display: flex;
+            opacity: 0;
-            overflow: auto;
-            align-items: center;
-            justify-content: center;
-
-            width: 100%;
-            height: 100%;
           }
         }
       }
@@ -539,6 +534,7 @@
         }
       }
       .ant-layout-content {
+        .yo-tab-external-mount {
           >.ant-tabs {
             >.ant-tabs-bar {
               .ant-tabs-nav-container {
@@ -549,6 +545,7 @@
           }
         }
       }
+    }
     &--container-fluid {
       .ant-layout-header {
         .ant-menu-horizontal {

Web/src/components/yoTable/index.js

@@ -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">

Web/src/pages/business/house/houseInfo/form/base/aspect.vue

@@ -16,6 +16,8 @@
       <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="facadePhoto">
             <a-upload
               :custom-request="onFileUpload"
@@ -31,6 +33,8 @@
               </div>
             </a-upload>
           </a-form-model-item>
+        </a-col>
+      </a-row>
     </a-spin>
     <PhotoSwipe ref="photo-swipe" />
   </a-form-model>

Web/src/pages/business/house/houseInfo/form/base/attachments.vue

@@ -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

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

@@ -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-radio-group button-style="solid" placeholder="请选择结构类型" v-model="form.structureType">
-              <a-select-option
+              <a-radio-button
                 :key="item.code"
                 :value="item.code"
                 v-for="item in codes.houseStructureType"
-              >{{ item.value }}</a-select-option>
+              >{{ item.value }}</a-radio-button>
-            </a-select>
+            </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-form-model-item class="ant-row-flex" label="有无外墙面砖" prop="faceBrick">
-            <a-switch v-model="form.exteriorWallTile" />
+            <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: '请输入项目名称' }],
+        projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
-        buildingName: [{ required: true, message: '请输入幢名称' }],
+        buildingName: [{ required: true, message: '请输入幢名称', trigger: 'blur' }],
-        address: [{ required: true, message: '请输入坐落地址' }],
+        address: [{ required: true, message: '请输入坐落地址', trigger: 'blur' }],
-        natureLand: [{ required: true, message: '请选择土地性质' }],
+        natureLand: [{ required: true, message: '请选择土地性质', trigger: 'blur' }],
-        axisX: [{ required: true, message: '请在地图上选择坐标' }],
+        axisX: [{ required: true, message: '请在地图上选择坐标', trigger: 'blur' }],
-        axisY: [{ required: true, message: '请在地图上选择坐标' }],
+        axisY: [{ required: true, message: '请在地图上选择坐标', trigger: 'blur' }],
-        structureType: [{ required: true, message: '请选择结构类型' }],
+        structureType: [{ required: true, message: '请选择结构类型', trigger: 'blur' }],
-        aseismicGrade: [{ required: true, message: '请选择抗震等级' }],
+        aseismicGrade: [{ required: true, message: '请选择抗震等级', trigger: 'blur' }],
-        baseInfo: [{ required: true, message: '请选择基础情况' }],
+        baseInfo: [{ required: true, message: '请选择基础情况', trigger: 'blur' }],
-        curtainWall: [{ required: true, message: '请选择建筑幕墙' }],
+        curtainWall: [{ required: true, message: '请选择建筑幕墙', trigger: 'blur' }],
-        elevator: [{ required: true, message: '请选择电梯' }],
+        elevator: [{ required: true, message: '请选择电梯', trigger: 'blur' }],
-        completedDate: [{ required: true, message: '请选择竣工日期' }],
+        completedDate: [{ required: true, message: '请选择竣工日期', trigger: 'blur' }],
-        useYear: [{ required: true, message: '请输入设计使用年限' }],
+        useYear: [{ required: true, message: '请输入设计使用年限', trigger: 'blur' }],
-        areaCount: [{ required: true, message: '请输入总建筑面积' }],
+        areaCount: [{ required: true, message: '请输入总建筑面积', trigger: 'blur' }],
-        households: [{ required: true, message: '请输入总户数' }],
+        households: [{ required: true, message: '请输入总户数', trigger: 'blur' }],
-        units: [{ required: true, message: '请输入房屋单元数' }],
+        units: [{ required: true, message: '请输入房屋单元数', trigger: 'blur' }],
-        unitHouseholds: [{ required: true, message: '请输入每层每单元户数' }],
+        unitHouseholds: [{ required: true, message: '请输入每层每单元户数', trigger: 'blur' }],
-        buildingUnit: [{ required: true, message: '请输入建设单位' }],
+        buildingUnit: [{ required: true, message: '请输入建设单位', trigger: 'blur' }],
-        buildingUnitUser: [{ required: true, message: '请输入建设单位联系人' }],
+        buildingUnitUser: [{ required: true, message: '请输入建设单位联系人', trigger: 'blur' }],
-        buildingUnitTel: [{ required: true, message: '请输入建设单位联系电话' }],
+        buildingUnitTel: [{ required: true, message: '请输入建设单位联系电话', trigger: 'blur' }],
-        desingerUnit: [{ required: true, message: '请输入设计单位' }],
+        desingerUnit: [{ required: true, message: '请输入设计单位', trigger: 'blur' }],
-        constructionUnit: [{ required: true, message: '请输入施工单位' }],
+        constructionUnit: [{ required: true, message: '请输入施工单位', trigger: 'blur' }],
-        landLevelCount: [{ required: true, message: '请输入地上层' }],
+        landLevelCount: [{ required: true, message: '请输入地上层', trigger: 'blur' }],
-        undergroundLevelCount: [{ required: true, message: '请输入地下层' }],
+        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 = '宁波市';
+
+      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 });
+        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,
+          });
+        }
       });
     },
 

Web/src/pages/business/house/houseInfo/form/base/drawing.vue

@@ -16,6 +16,8 @@
       <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="drawingMaterial">
             <a-checkbox-group v-model="form.drawingMaterial">
               <a-checkbox
@@ -32,6 +34,8 @@
               />
             </a-checkbox-group>
           </a-form-model-item>
+        </a-col>
+      </a-row>
     </a-spin>
   </a-form-model>
 </template>

Web/src/pages/business/house/houseInfo/form/base/fund.vue

@@ -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" />

Web/src/pages/business/house/houseInfo/form/base/identification.vue

@@ -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">

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

@@ -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 {

Web/src/pages/business/house/houseInfo/form/base/investigation.vue

@@ -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">

Web/src/pages/business/house/houseInfo/form/base/manager.vue

@@ -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" />

Web/src/pages/business/house/houseInfo/form/base/ownership.vue

@@ -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">

Web/src/pages/business/house/houseInfo/form/base/unit.vue

@@ -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" />

Web/src/pages/business/house/houseInfo/form/coating/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>

Web/src/pages/business/house/houseInfo/form/curtainWall/base.vue

@@ -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>

Web/src/pages/business/house/houseInfo/form/curtainWall/cnopy.vue

@@ -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>

Web/src/pages/business/house/houseInfo/form/curtainWall/glass.vue

@@ -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>

Web/src/pages/business/house/houseInfo/form/curtainWall/index.vue

@@ -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>

Web/src/pages/business/house/houseInfo/form/curtainWall/metal.vue

@@ -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>

Web/src/pages/business/house/houseInfo/form/curtainWall/other.vue

@@ -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>

Web/src/pages/business/house/houseInfo/form/curtainWall/patrol.vue

@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>

Web/src/pages/business/house/houseInfo/form/curtainWall/skylight.vue

@@ -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>

Web/src/pages/business/house/houseInfo/form/curtainWall/stone.vue

@@ -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>

Web/src/pages/business/house/houseInfo/form/curtainWall/unit.vue

@@ -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>

Web/src/pages/business/house/houseInfo/form/faceBrick/base.vue

@@ -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>

Web/src/pages/business/house/houseInfo/form/faceBrick/index.vue

@@ -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>

Web/src/pages/business/house/houseInfo/form/faceBrick/patrol.vue

@@ -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>

Web/src/pages/business/house/houseInfo/form/faceBrick/unit.vue

@@ -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>

Web/src/pages/business/house/houseInfo/form/index.vue

@@ -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">
+      挂载了一个content到tab后面
-        <component :is="tab.component" :param="param" ref="forms" v-if="tab.component" />
+      如果直接使用antd-vue的tab,将会莫名其妙地做各种多余的渲染,导致卡顿
-      </a-tab-pane>
+      现在只使用其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>

Web/src/pages/business/house/houseInfo/form/whiteWash/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>

Web/src/pages/system/doc/seed/pageForm.vue

@@ -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" />

Web/src/views/main/_layout/content.vue

@@ -1,9 +1,10 @@
 <template>
   <a-layout-content>
+    <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"
-        :forceRender="true"
+          :force-render="true"
           :key="pane.key"
           v-for="pane in panes"
         >
@@ -35,6 +36,23 @@
               >关闭右侧标签页</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>
+
+      <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"
@@ -42,15 +60,16 @@
             ref="panes"
             v-if="pane.loaded"
           />
-      </a-tab-pane>
+        </div>
-    </a-tabs>
+      </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: {

Web/src/views/main/_layout/header/index.vue

@@ -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"