Revert "Revert "update 构成表单页的种子""

This reverts commit 43a3184bba.

Web/public/doc-code/seed/form-page/only-form/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <!-- 
+    整页表单的外框架
+    v 1.0
+    2021-05-12
+    Lufthafen
+  -->
+  <div class="yo-form-page">
+    <!-- 表单主体 -->
+    <!-- 如果不想使用锚点,删除a-row->a-col,只留内部的a-card层即可 -->
+    <container>
+      <a-row :gutter="16" type="flex">
+        <a-col flex="1">
+          <br />
+          <a-card class="yo-form-page--body">
+            <template v-for="(part, index) in parts">
+              <section :id="`form-${index}`" :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"
+            :wrapper-style="{ backgroundColor: 'transparent' }"
+            @click.prevent
+          >
+            <a-anchor-link
+              :href="`#form-${index}`"
+              :key="index"
+              :title="part.title"
+              v-for="(part, index) in parts"
+            />
+          </a-anchor>
+        </a-col>
+      </a-row>
+    </container>
+
+    <!-- 底部工具栏 -->
+    <div class="yo-form-page--bar">
+      <container>
+        <div class="yo-form-page--bar-inner">
+          <span>
+            <!-- 可以在工具栏中增加其他控件(只能在一行内) -->
+            <!-- ... -->
+          </span>
+          <span>
+            <a-button @click="closeContentWindow()">取消</a-button>
+            <a-button @click="onSubmit" type="primary">保存</a-button>
+          </span>
+        </div>
+      </container>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['param'],
+
+  data() {
+    return {
+      parts: [
+        /**
+         * {
+         *    title: '标题',
+         *    component: () => import('...'),
+         * }
+         */
+      ],
+    };
+  },
+
+  methods: {
+    async onSubmit() {
+      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 {
+          return;
+        }
+      }
+
+      /**
+       * 对表单提交进行处理
+       */
+    },
+  },
+};
+</script>

Web/public/doc-code/seed/form-page/only-form/part.vue

@@ -1,17 +1,21 @@
 <template>
   <!-- 
-    普通编辑窗体
+    整页表单的分片表单
-    v 1.2
+    v 1.0
-    2021-04-30
+    2021-05-12
     Lufthafen
   -->
-  <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
+  <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" />
-      <div class="yo-form-group">
       <!-- 表单控件 -->
       <!-- ... -->
-      </div>
     </a-spin>
   </a-form-model>
 </template>
@@ -22,8 +26,13 @@ const defaultForm = {
 };
 
 export default {
+  props: ['param'],
+
   data() {
     return {
+      labelCol: { flex: '150px' },
+      wrapperCol: { flex: '1' },
+
       /** 表单数据 */
       form: {},
       /** 验证格式 */
@@ -39,16 +48,23 @@ export default {
     };
   },
 
+  async created() {
+    await this.onInit();
+    this.onFillData();
+  },
+
   methods: {
     /**
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData(params) {
+    onFillData() {
       /** 将默认数据覆盖到form */
+      const record = this.param && this.param.record;
+
       this.form = this.$_.cloneDeep({
         ...defaultForm,
-        ...params.record,
+        ...record,
         /** 在此处添加其他默认数据转换 */
         /* ... */
       });
@@ -100,7 +116,7 @@ export default {
      * 必要方法
      * 加载当前表单中所需要的异步数据
      */
-    async onInit(params) {
+    async onInit() {
       this.loading = true;
       /** 可以在这里await获取一些异步数据 */
       /* ... */

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

@@ -0,0 +1,73 @@
+<template>
+  <!-- 
+    整页表单的页签外框架
+    v 1.0
+    2021-05-12
+    Lufthafen
+  -->
+  <div class="yo-form-page">
+    <!-- 底部工具栏(需放在前面) -->
+    <div class="yo-form-page--bar yo-form-page--bar--with-tab">
+      <container>
+        <div class="yo-form-page--bar-inner">
+          <span>
+            <!-- 可以在工具栏中增加其他控件(只能在一行内) -->
+            <!-- ... -->
+            <a-input />
+          </span>
+          <span>
+            <a-button @click="closeContentWindow()">取消</a-button>
+            <a-button @click="onSubmit" type="primary">保存</a-button>
+          </span>
+        </div>
+      </container>
+    </div>
+
+    <!-- 表单主体 -->
+    <a-tabs type="card">
+      <a-tab-pane :force-render="true" :key="index" :tab="tab.title" v-for="(tab, index) in tabs">
+        <component :is="tab.component" :param="param" ref="forms" v-if="tab.component" />
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+<script>
+export default {
+  props: ['param'],
+
+  data() {
+    return {
+      tabs: [
+        /**
+         * {
+         *    title: '标题',
+         *    component: () => import('...'),
+         * }
+         */
+      ],
+    };
+  },
+
+  methods: {
+    async onSubmit() {
+      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 {
+          return;
+        }
+      }
+
+      /**
+       * 对表单提交进行处理
+       */
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,90 @@
+<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-${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-${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('...'),
+         * }
+         */
+      ],
+    };
+  },
+
+  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/assets/style/app.less

@@ -21,8 +21,11 @@
 @import './lib/table.less';
 @import './lib/list.less';
 @import './lib/form.less';
+@import './lib/form-page.less';
 @import './lib/description.less';
+@import './lib/input.less';
 @import './lib/select.less';
+@import './lib/checkbox.less';
 @import './lib/cascader.less';
 @import './lib/dropdown.less';
 @import './lib/modal.less';

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

@@ -0,0 +1,10 @@
+@import (reference) '~@/assets/style/extend.less';
+.ant-checkbox-wrapper {
+  margin-right: @padding-xs;
+  &:last-child {
+    margin-right: 0;
+  }
+  +.ant-checkbox-wrapper {
+    margin-left: 0;
+  }
+}

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

@@ -37,3 +37,7 @@
 .container-fluid {
   .container-base();
 }
+.container-flex {
+  display: flex;
+  justify-content: space-between;
+}

Web/src/assets/style/lib/font-size.less

@@ -17,9 +17,9 @@ h4,
 }
 h5,
 .h5 {
-  font-size: 14px;
+  font-size: 16px;
 }
 h6,
 .h6 {
-  font-size: 12px;
+  font-size: 14px;
 }

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

@@ -0,0 +1,134 @@
+@import (reference) '~@/assets/style/extend.less';
+
+.yo-form-page {
+  position: relative;
+
+  height: 100%;
+
+  >.ant-tabs {
+    display: flex;
+    flex-direction: column;
+
+    height: 100%;
+
+    >.ant-tabs-bar {
+      margin-bottom: 0;
+
+      background-color: @white;
+
+      .ant-tabs-nav-container {
+        height: @tabs-card-height + @padding-xs;
+        padding: (@tabs-card-height + @padding-xs - @btn-height-base) / 2 @padding-md;
+      }
+
+      .ant-tabs-tab {
+        .ant-btn();
+
+        &:hover {
+          border-color: @btn-default-border;
+        }
+      }
+
+      .ant-tabs-tab {
+        line-height: @btn-height-base;
+
+        margin-right: -1px;
+      }
+
+      .ant-tabs-tab-active {
+        z-index: 2;
+
+        color: @btn-primary-color;
+        border-color: @btn-primary-bg;
+        background-color: @btn-primary-bg;
+
+        &:hover {
+          color: @btn-primary-color;
+          border-color: color(~`colorPalette('@{btn-primary-bg}', 5) `);
+          background-color: color(~`colorPalette('@{btn-primary-bg}', 5) `);
+        }
+      }
+    }
+
+    >.ant-tabs-content {
+      position: relative;
+
+      flex: 1;
+
+      >.ant-tabs-tabpane {
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        overflow: auto;
+
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  &--bar {
+    position: sticky;
+    bottom: 0;
+    z-index: 200;
+
+    &--with-tab {
+      position: absolute;
+
+      display: flex;
+      align-items: flex-end;
+
+      width: 100%;
+      height: 0;
+      padding-right: 7px;
+
+      >.container-fluid {
+        width: 100%;
+      }
+
+      +.ant-tabs {
+        >.ant-tabs-content {
+          >.ant-tabs-tabpane {
+            padding-bottom: @padding-xs * 2 + @btn-height-base + @border-width-base * 2;
+          }
+        }
+      }
+    }
+  }
+
+  &--bar-inner {
+    display: flex;
+    justify-content: space-between;
+
+    padding: @padding-xs @padding-md;
+
+    border: @border-width-base @border-style-base @border-color-split;
+    background-color: fade(@white, 80%);
+
+    backdrop-filter: blur(5px);
+
+    >:first-child {
+      flex: 1;
+    }
+
+    .ant-btn {
+      margin-left: @padding-sm;
+    }
+  }
+
+  &--body {
+    >.ant-card-body {
+      padding: 0;
+
+      >section {
+        padding: @padding-lg;
+
+        >h5 {
+          border-left: @padding-xs @border-style-base @primary-color;
+          padding-left: @padding-md;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,6 @@
+@import (reference) '~@/assets/style/extend.less';
+.yo-input-prefix-2 {
+  .ant-input:not(:first-child) {
+    padding-left: 45px;
+  }
+}

Web/src/components/container/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <section :class="mode || $root.global.settings.container || 'container-fluid'">
+  <section
+    :class="{
+    [mode || $root.global.settings.container || 'container-fluid']: true,
+    'container-flex': flex
+  }"
+  >
     <slot />
   </section>
 </template>
@@ -9,6 +14,10 @@ export default {
     mode: {
       type: String,
     },
+    flex: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 </script>

Web/src/main.js

@@ -82,6 +82,8 @@ import YoModalForm from './components/yoModalForm'
 Vue.component('YoModalForm', YoModalForm)
 import YoImage from './components/yoImage'
 Vue.component('YoImage', YoImage)
+import YoFormLink from './components/yoFormLink'
+Vue.component('YoFormLink', YoFormLink)
 
 /**
  * 引入主题样式

Web/src/pages/business/house/houseCode/form.vue

@@ -1,281 +0,0 @@
-<template>
-  <!-- 
-    普通编辑窗体
-    v 1.2
-    2021-04-30
-    Lufthafen
-  -->
-  <container mode="container-sm">
-    <br />
-    <div class="yo-form">
-      <div class="yo-form-group">
-        <yo-form-link content="对片区信息进行管理" title="片区管理" />
-        <yo-form-link content="对项目信息进行管理" title="项目管理" />
-      </div>
-    </div>
-    <a-card>
-      <a-form-model
-        :label-col="labelCol"
-        :model="form"
-        :rules="rules"
-        :wrapper-col="wrapperCol"
-        ref="form"
-      >
-        <a-spin :spinning="loading">
-          <a-icon slot="indicator" spin type="loading" />
-          <a-form-model-item class="ant-row-flex" label="房屋编码">
-            <a-row align="top" type="flex">
-              <a-col flex="50px">
-                <span>宁波市 -</span>
-              </a-col>
-              <a-col flex="auto">
-                <a-form-model-item class="mb-none" prop="areaCode">
-                  <a-cascader
-                    :display-render="({labels}) => labels.join(' - ')"
-                    :options="options"
-                    placeholder="请选择项目"
-                    v-model="form.areaCode"
-                  />
-                </a-form-model-item>
-              </a-col>
-              <a-col class="text-center" flex="20px">
-                <span>-</span>
-              </a-col>
-              <a-col flex="150px">
-                <a-form-model-item class="mb-none" prop="code">
-                  <a-input-number
-                    :formatter="(number) => `000${number}`.slice(-3)"
-                    :max="999"
-                    :min="1"
-                    :precision="0"
-                    :step="1"
-                    class="w-100-p"
-                    placeholder="请输入房屋序号"
-                    v-model="form.code"
-                  />
-                </a-form-model-item>
-              </a-col>
-            </a-row>
-          </a-form-model-item>
-          <a-form-model-item class="ant-row-flex" label="地理坐标">
-            <a-row :gutter="16">
-              <a-col :span="12">
-                <a-form-model-item class="mb-none">
-                  <a-input disabled placeholder="请在地图上选择坐标" prefix="经度" />
-                </a-form-model-item>
-              </a-col>
-              <a-col :span="12">
-                <a-form-model-item class="mb-none">
-                  <a-input disabled placeholder="请在地图上选择坐标" prefix="纬度" />
-                </a-form-model-item>
-              </a-col>
-            </a-row>
-          </a-form-model-item>
-          <a-form-model-item :colon="false" :label="true" class="ant-row-flex">
-            <div class="yo-map-container">
-              缺搜索
-              <div class="h-300" ref="map"></div>
-            </div>
-          </a-form-model-item>
-          <a-form-model-item class="ant-row-flex" label="房屋地址" prop="address">
-            <a-input placeholder="请输入房屋地址或在地图上选择地点" v-model="form.address" />
-          </a-form-model-item>
-          <a-form-model-item class="ant-row-flex" label="所属片区">
-            <a-select placeholder="请选择所属片区"></a-select>
-          </a-form-model-item>
-          <a-form-model-item class="ant-row-flex" label="房屋性质">
-            <a-radio-group button-style="solid" v-model="form.nature">
-              <a-radio-button
-                :key="item.code"
-                :value="item.code"
-                v-for="item in houseType"
-              >{{ item.value }}</a-radio-button>
-            </a-radio-group>
-          </a-form-model-item>
-          <a-form-model-item
-            class="ant-row-flex"
-            label="所属行业、系统"
-            prop="industry"
-            v-if="form.nature == 2"
-          >
-            <a-select placeholder="请选择所属行业、系统" v-model="form.industry">
-              <a-select-option
-                :key="item.code"
-                :value="item.code"
-                v-for="item in houseIndustry"
-              >{{ item.value }}</a-select-option>
-            </a-select>
-          </a-form-model-item>
-        </a-spin>
-      </a-form-model>
-    </a-card>
-  </container>
-</template>
-<script>
-import YoFormLink from '@/components/yoFormLink';
-
-/* 表单内容默认值 */
-const defaultForm = {
-  /* ... */
-  nature: '1',
-};
-
-export default {
-  props: ['param'],
-
-  components: {
-    YoFormLink,
-  },
-
-  data() {
-    return {
-      labelCol: { flex: '150px' },
-      wrapperCol: { flex: 'auto' },
-
-      /** 表单数据 */
-      form: {},
-      /** 验证格式 */
-      rules: {
-        /* ... */
-        areaCode: [{ required: true, message: '请选择房屋所在区域' }],
-        code: [{ required: true, message: '请输入房屋序号' }],
-      },
-
-      /** 加载异步数据状态 */
-      loading: false,
-
-      /** 其他成员属性 */
-      /* ... */
-      houseType: [],
-      houseIndustry: [],
-      options: [
-        {
-          value: 'zhejiang',
-          label: 'Zhejiang',
-          children: [
-            {
-              value: 'hangzhou',
-              label: 'Hangzhou',
-              children: [
-                {
-                  value: 'xihu',
-                  label: 'West Lake',
-                },
-              ],
-            },
-          ],
-        },
-        {
-          value: 'jiangsu',
-          label: 'Jiangsu',
-          children: [
-            {
-              value: 'nanjing',
-              label: 'Nanjing',
-              children: [
-                {
-                  value: 'zhonghuamen',
-                  label: 'Zhong Hua Men',
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    };
-  },
-
-  async created() {
-    await this.onInit();
-    this.onFillData({});
-  },
-
-  mounted() {
-    new AMap.Map(this.$refs.map);
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 在打开编辑页时允许填充数据
-     */
-    onFillData(params) {
-      /** 将默认数据覆盖到form */
-      this.form = this.$_.cloneDeep({
-        ...defaultForm,
-        ...params.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(params) {
-      this.loading = true;
-      /** 可以在这里await获取一些异步数据 */
-      /* ... */
-      await this.onLoadCodes();
-      this.loading = false;
-    },
-
-    /** 当前组件的其他方法 */
-    /* ... */
-    onLoadCodes() {
-      return this.$api
-        .$queue([
-          this.$api.sysDictTypeDropDownAwait({ code: 'dic_house_type' }),
-          this.$api.sysDictTypeDropDownAwait({ code: 'dic_house_industry' }),
-        ])
-        .then(([dic_house_type, dic_house_industry]) => {
-          this.houseType = dic_house_type.data;
-          this.houseIndustry = dic_house_industry.data;
-        });
-    },
-  },
-};
-</script>

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

@@ -0,0 +1,114 @@
+<template>
+  <!-- 
+    整页表单的页签外框架
+    v 1.0
+    2021-05-12
+    Lufthafen
+  -->
+  <div class="yo-form-page">
+    <!-- 表单主体 -->
+    <!-- 如果不想使用固钉,删除a-row->a-col,只留内部的template层即可 -->
+    <container>
+      <a-row :gutter="16" type="flex">
+        <a-col flex="1">
+          <br />
+          <div class="yo-form">
+            <div class="yo-form-group">
+              <yo-form-link content="对片区信息进行管理" title="片区管理" />
+              <yo-form-link content="对项目信息进行管理" title="项目管理" />
+            </div>
+          </div>
+          <a-card class="yo-form-page--body">
+            <template v-for="(part, index) in parts">
+              <section :id="`form-${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"
+            :wrapper-style="{ backgroundColor: 'transparent' }"
+            @click.prevent
+          >
+            <a-anchor-link
+              :href="`#form-${index}`"
+              :key="index"
+              :title="part.title"
+              v-for="(part, index) in parts"
+            />
+          </a-anchor>
+        </a-col>
+      </a-row>
+    </container>
+
+    <!-- 底部工具栏 -->
+    <div class="yo-form-page--bar">
+      <container>
+        <div class="yo-form-page--bar-inner">
+          <span>
+            <!-- 可以在工具栏中增加其他控件(只能在一行内) -->
+            <!-- ... -->
+          </span>
+          <span>
+            <a-button @click="closeContentWindow()">取消</a-button>
+            <a-button @click="onSubmit" type="primary">保存</a-button>
+          </span>
+        </div>
+      </container>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['param'],
+
+  data() {
+    return {
+      parts: [
+        /**
+         * {
+         *    title: '标题',
+         *    component: () => import('...'),
+         * }
+         */
+        {
+          component: () => import('./part'),
+        },
+      ],
+    };
+  },
+
+  methods: {
+    async onSubmit() {
+      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 {
+          return;
+        }
+      }
+
+      /**
+       * 对表单提交进行处理
+       */
+    },
+  },
+};
+</script>

Web/src/pages/business/house/houseCode/form/part.vue

@@ -0,0 +1,268 @@
+<template>
+  <!-- 
+    整页表单的分片表单
+    v 1.0
+    2021-05-12
+    Lufthafen
+  -->
+  <a-form-model
+    :label-col="labelCol"
+    :model="form"
+    :rules="rules"
+    :wrapper-col="wrapperCol"
+    ref="form"
+  >
+    <a-spin :spinning="loading">
+      <a-icon slot="indicator" spin type="loading" />
+      <!-- 表单控件 -->
+      <!-- ... -->
+      <a-form-model-item class="ant-row-flex" label="房屋编码">
+        <a-row align="top" type="flex">
+          <a-col flex="50px">
+            <span>宁波市 -</span>
+          </a-col>
+          <a-col flex="auto">
+            <a-form-model-item class="mb-none" prop="areaCode">
+              <a-cascader
+                :display-render="({labels}) => labels.join(' - ')"
+                :options="options"
+                placeholder="请选择项目"
+                v-model="form.areaCode"
+              />
+            </a-form-model-item>
+          </a-col>
+          <a-col class="text-center" flex="20px">
+            <span>-</span>
+          </a-col>
+          <a-col flex="150px">
+            <a-form-model-item class="mb-none" prop="code">
+              <a-input-number
+                :formatter="(number) => `000${number}`.slice(-3)"
+                :max="999"
+                :min="1"
+                :precision="0"
+                :step="1"
+                class="w-100-p"
+                placeholder="请输入房屋序号"
+                v-model="form.code"
+              />
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+      </a-form-model-item>
+      <a-form-model-item class="ant-row-flex" label="地理坐标">
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-model-item class="mb-none">
+              <a-input class="yo-input-prefix-2" disabled placeholder="请在地图上选择坐标" prefix="经度" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item class="mb-none">
+              <a-input class="yo-input-prefix-2" disabled placeholder="请在地图上选择坐标" prefix="纬度" />
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+      </a-form-model-item>
+      <a-form-model-item :colon="false" :label="true" class="ant-row-flex">
+        <div class="yo-map-container">
+          缺搜索
+          <div class="h-300" ref="map"></div>
+        </div>
+      </a-form-model-item>
+      <a-form-model-item class="ant-row-flex" label="房屋地址" prop="address">
+        <a-input placeholder="请输入房屋地址或在地图上选择地点" v-model="form.address" />
+      </a-form-model-item>
+      <a-form-model-item class="ant-row-flex" label="所属片区">
+        <a-select placeholder="请选择所属片区"></a-select>
+      </a-form-model-item>
+      <a-form-model-item class="ant-row-flex" label="房屋性质">
+        <a-radio-group button-style="solid" v-model="form.nature">
+          <a-radio-button
+            :key="item.code"
+            :value="item.code"
+            v-for="item in houseType"
+          >{{ item.value }}</a-radio-button>
+        </a-radio-group>
+      </a-form-model-item>
+      <a-form-model-item
+        class="ant-row-flex"
+        label="所属行业、系统"
+        prop="industry"
+        v-if="form.nature == 2"
+      >
+        <a-select placeholder="请选择所属行业、系统" v-model="form.industry">
+          <a-select-option
+            :key="item.code"
+            :value="item.code"
+            v-for="item in houseIndustry"
+          >{{ item.value }}</a-select-option>
+        </a-select>
+      </a-form-model-item>
+    </a-spin>
+  </a-form-model>
+</template>
+<script>
+/* 表单内容默认值 */
+const defaultForm = {
+  /* ... */
+  nature: '1',
+};
+
+export default {
+  props: ['param'],
+
+  data() {
+    return {
+      labelCol: { flex: '150px' },
+      wrapperCol: { flex: '1' },
+
+      /** 表单数据 */
+      form: {},
+      /** 验证格式 */
+      rules: {
+        /* ... */
+        areaCode: [{ required: true, message: '请选择房屋所在区域' }],
+        code: [{ required: true, message: '请输入房屋序号' }],
+      },
+
+      /** 加载异步数据状态 */
+      loading: false,
+
+      /** 其他成员属性 */
+      /* ... */
+      houseType: [],
+      houseIndustry: [],
+      options: [
+        {
+          value: 'zhejiang',
+          label: 'Zhejiang',
+          children: [
+            {
+              value: 'hangzhou',
+              label: 'Hangzhou',
+              children: [
+                {
+                  value: 'xihu',
+                  label: 'West Lake',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          value: 'jiangsu',
+          label: 'Jiangsu',
+          children: [
+            {
+              value: 'nanjing',
+              label: 'Nanjing',
+              children: [
+                {
+                  value: 'zhonghuamen',
+                  label: 'Zhong Hua Men',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+  },
+
+  async created() {
+    await this.onInit();
+    this.onFillData();
+  },
+
+  mounted() {
+    new AMap.Map(this.$refs.map);
+  },
+
+  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.onLoadCodes();
+      this.loading = false;
+    },
+
+    /** 当前组件的其他方法 */
+    /* ... */
+    onLoadCodes() {
+      return this.$api
+        .$queue([
+          this.$api.sysDictTypeDropDownAwait({ code: 'dic_house_type' }),
+          this.$api.sysDictTypeDropDownAwait({ code: 'dic_house_industry' }),
+        ])
+        .then(([dic_house_type, dic_house_industry]) => {
+          this.houseType = dic_house_type.data;
+          this.houseIndustry = dic_house_industry.data;
+        });
+    },
+  },
+};
+</script>

Web/src/pages/business/house/houseCode/index.vue

@@ -1,206 +1,10 @@
 <template>
-  <!-- 
+  <div>
-    普通查询表格
+    <a-button
-    v 1.2
+      @click="openContentWindow({
-    2021-04-30
+        title: '编码表单',
-    Lufthafen
-  -->
-  <container>
-    <div ref="test"></div>
-    <br />
-    <a-card :bordered="false">
-      <yo-table
-        :columns="columns"
-        :load-data="loadData"
-        @query="onQuery"
-        @resetQuery="onResetQuery"
-        ref="table"
-      >
-        <Auth auth="authCode:page" slot="query">
-          <!-- 此处添加查询表单控件 -->
-          <!-- ... -->
-        </Auth>
-        <Auth auth="authCode:add" slot="operator">
-          <a-button @click="onOpen('add-form')" icon="plus">新增房屋编码</a-button>
-        </Auth>
-        <!-- 格式化字段内容 -->
-        <!-- ... -->
-        <!-- 添加操作控件 -->
-        <span slot="action" slot-scope="text, record">
-          <yo-table-actions>
-            <Auth auth="authCode:edit">
-              <a @click="onOpen('edit-form', record)">编辑</a>
-            </Auth>
-            <Auth auth="authCode:delete">
-              <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
-                <a>删除</a>
-              </a-popconfirm>
-            </Auth>
-            <!-- 可在此处添加其他操作控件 -->
-            <!-- ... -->
-          </yo-table-actions>
-        </span>
-      </yo-table>
-    </a-card>
-  </container>
-</template>
-<script>
-/* 在此管理整个页面需要的接口名称 */
-const api = {
-  page: 'testPageApi...',
-  add: 'testAddApi',
-  edit: 'testEditApi',
-  delete: 'testDeleteApi...',
-  /* ... */
-};
-
-export default {
-  props: ['paneKey'],
-  data() {
-    return {
-      api,
-
-      name: '...',
-
-      /* 查询条件 */
-      query: {},
-
-      /* 表格字段 */
-      columns: [],
-
-      /* 字典编码储存格式 */
-      codes: {
-        code1: [],
-        code2: [],
-      },
-    };
-  },
-  created() {
-    /** 按需加载字典编码 */
-    this.onLoadCodes();
-
-    /** 根据权限添加操作列 */
-    const flag = this.$auth(/* ... */);
-    if (flag) {
-      this.columns.push({
-        title: '操作',
-        width: '150px',
-        dataIndex: 'action',
-        scopedSlots: { customRender: 'action' },
-      });
-    }
-  },
-  methods: {
-    /**
-     * 必要的方法
-     * 传给yo-table以示意数据接口及其参数和返回的数据结构
-     */
-    loadData(params) {
-      return this.$api[api.page]({
-        ...params,
-        ...this.query,
-      }).then((res) => {
-        return res.data;
-      });
-    },
-
-    /**
-     * 有查询功能时的必要方法
-     * 加载数据时初始化分页信息
-     */
-    onQuery() {
-      this.$refs.table.onReloadData(true);
-    },
-
-    /**
-     * 有查询功能时的必要方法
-     * 重置查询条件
-     */
-    onResetQuery() {
-      /** 在这里重置查询条件时,可对特殊的字段做保留处理 */
-      this.query = {};
-      this.onQuery();
-    },
-
-    /**
-     * 必要方法
-     * 重新列表数据
-     */
-    onReloadData() {
-      this.$refs.table.onReloadData();
-    },
-
-    /**
-     * 必要方法
-     * 加载字典数据
-     * 如果不需要获取相应的字典数据,此方法内容可空
-     */
-    onLoadCodes() {
-      this.$api
-        .$queue([
-          this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
-          this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
-          /* ... */
-        ])
-        .then(([code1, code2]) => {
-          this.codes.code1 = code1.data;
-          this.codes.code2 = code2.data;
-          /* ... */
-        });
-    },
-
-    /**
-     * 必要方法
-     * 绑定数据字典值
-     */
-    bindCodeValue(code, name) {
-      const c = this.codes[name].find((p) => p.code == code);
-      if (c) {
-        return c.value;
-      }
-      return null;
-    },
-
-    /**
-     * 必要方法
-     * 从列表页调用窗口的打开方法
-     */
-    onOpen(formName, record) {
-      this.openContentWindow({
-        title: '新建房屋编码',
         path: 'business/house/houseCode/form',
-        param: {
+      });"
-          parent: this,
+    >打开表单</a-button>
-          record,
+  </div>
-        },
+</template>
-      });
-    },
-
-    /**
-     * 必要方法
-     * 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
-     */
-    onResult(success, successMessage) {
-      if (success) {
-        this.$message.success(successMessage);
-        this.onReloadData();
-      }
-    },
-
-    /**
-     * 必要方法
-     * 删除时调用
-     */
-    onDelete(record) {
-      this.$refs.table.onLoading();
-      this.$api[api.delete](record)
-        .then(({ success }) => {
-          this.onResult(success, '删除成功');
-        })
-        .finally(() => {
-          this.$refs.table.onLoaded();
-        });
-    },
-  },
-};
-</script>

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

@@ -0,0 +1,392 @@
+<template>
+  <!-- 
+    普通编辑窗体
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
+  <a-form-model
+    :label-col="labelCol"
+    :model="form"
+    :rules="rules"
+    :wrapper-col="wrapperCol"
+    ref="form"
+  >
+    <a-spin :spinning="loading">
+      <a-icon slot="indicator" spin type="loading" />
+      <a-row type="flex">
+        <a-col :span="12">
+          <a-form-model-item class="ant-row-flex" label="区县（市）">
+            <span>测试区</span>
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item class="ant-row-flex" label="街道（乡镇）">
+            <span>测试街道</span>
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item class="ant-row-flex" label="社区">
+            <span>欧阳社区</span>
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item class="ant-row-flex" label="片区">
+            <span>片区一22（明湖片区）</span>
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item class="ant-row-flex" label="编号">
+            <span>宁波市-测试区-测试街道-欧阳社区-项目十二(项目十二)-001</span>
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item class="ant-row-flex" label="编码">
+            <span>330266066001012001</span>
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item class="ant-row-flex" label="项目名称" prop="projectName">
+            <a-input v-model="form.projectName" />
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item class="ant-row-flex" label="幢名称">
+            <a-input />
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-model-item class="ant-row-flex" label="坐落地址">
+            <a-input />
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-model-item class="ant-row-flex" label="坐落地址">
+            <a-input />
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-model-item class="ant-row-flex" label="地理坐标">
+            <a-row :gutter="16">
+              <a-col :span="12">
+                <a-form-model-item class="mb-none">
+                  <a-input class="yo-input-prefix-2" disabled placeholder="请在地图上选择坐标" prefix="经度" />
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-model-item class="mb-none">
+                  <a-input class="yo-input-prefix-2" disabled placeholder="请在地图上选择坐标" prefix="纬度" />
+                </a-form-model-item>
+              </a-col>
+            </a-row>
+          </a-form-model-item>
+          <a-form-model-item :colon="false" :label="true" class="ant-row-flex">
+            <div class="yo-map-container">
+              缺搜索
+              <div class="h-300" ref="map"></div>
+            </div>
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item class="ant-row-flex" label="结构类型">
+            <a-select>
+              <a-select-option
+                :key="item.code"
+                :value="item.code"
+                v-for="item in houseStructureType"
+              >{{ item.value }}</a-select-option>
+            </a-select>
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item class="ant-row-flex" label="抗震等级">
+            <a-radio-group button-style="solid">
+              <a-radio-button
+                :key="item.code"
+                :value="item.code"
+                v-for="item in houseSseismicGrade"
+              >{{ item.value }}</a-radio-button>
+            </a-radio-group>
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-model-item class="ant-row-flex" label="基础情况">
+            <a-radio-group button-style="solid">
+              <a-radio-button
+                :key="item.code"
+                :value="item.code"
+                v-for="item in houseBaseInfo"
+              >{{ item.value }}</a-radio-button>
+            </a-radio-group>
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-model-item class="ant-row-flex" label="外墙保温材料" prop="insulationMaterial">
+            <a-checkbox-group button-style="solid" v-model="form.insulationMaterial">
+              <a-checkbox
+                :key="item.code"
+                :value="item.code"
+                v-for="item in houseInsulationMaterial"
+              >{{ item.value }}</a-checkbox>
+              <a-input
+                placeholder="请输入其他外墙保温材料"
+                v-if="form.insulationMaterial && form.insulationMaterial.indexOf(houseInsulationMaterial[houseInsulationMaterial.length - 1].code) >= 0"
+                v-model="form.keepWarmMaterialRest"
+              />
+            </a-checkbox-group>
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-model-item class="ant-row-flex" label="外墙墙体材料"></a-form-model-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-model-item class="ant-row-flex" label="外墙外保温材料防火等级"></a-form-model-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-model-item class="ant-row-flex" label="建筑幕墙"></a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item class="ant-row-flex" label="外墙面砖"></a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item class="ant-row-flex" label="外墙粉刷"></a-form-model-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-model-item class="ant-row-flex" label="外墙涂料"></a-form-model-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-model-item class="ant-row-flex" label="电梯"></a-form-model-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-model-item class="ant-row-flex" label="竣工日期">
+            <a-date-picker class="w-100-p" />
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-model-item class="ant-row-flex" label="设计使用年限">
+            <a-input-number :formatter="(number) => `${number}年`" :min="0" class="w-100-p" />
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-model-item class="ant-row-flex" label="总建筑面积"></a-form-model-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-model-item class="ant-row-flex" label="总户数"></a-form-model-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-model-item class="ant-row-flex" label="房屋单元数"></a-form-model-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-model-item class="ant-row-flex" label="每层每单元户数"></a-form-model-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-model-item class="ant-row-flex" label="建设单位"></a-form-model-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-model-item class="ant-row-flex" label="建设单位联系人"></a-form-model-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-model-item class="ant-row-flex" label="建设单位联系电话"></a-form-model-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-model-item class="ant-row-flex" label="设计单位"></a-form-model-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-model-item class="ant-row-flex" label="施工单位"></a-form-model-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-model-item class="ant-row-flex" label="监理单位"></a-form-model-item>
+        </a-col>
+        <a-col :span="24">
+          <fieldset>
+            <legend>建筑层数</legend>
+            <a-row :gutter="16">
+              <a-col :span="8">
+                <a-form-model-item class="ant-row-flex" label="地上">
+                  <a-input-number
+                    :formatter="(number) => `${number}层`"
+                    :min="0"
+                    :step="1"
+                    class="w-100-p"
+                  />
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="8">
+                <a-form-model-item class="ant-row-flex" label="地下">
+                  <a-input-number
+                    :formatter="(number) => `${number}层`"
+                    :min="0"
+                    :step="1"
+                    class="w-100-p"
+                  />
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="8">
+                <a-form-model-item class="ant-row-flex" label="总共">
+                  <a-input-number
+                    :formatter="(number) => `${number}层`"
+                    class="w-100-p"
+                    disabled
+                    suffix="层"
+                  />
+                </a-form-model-item>
+              </a-col>
+            </a-row>
+          </fieldset>
+        </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: {
+        /* ... */
+        projectName: [{ required: true, message: '请输入项目名称' }],
+      },
+
+      /** 加载异步数据状态 */
+      loading: false,
+
+      /** 其他成员属性 */
+      /* ... */
+      houseStructureType: [],
+      houseSseismicGrade: [],
+      houseBaseInfo: [],
+      houseInsulationMaterial: [],
+    };
+  },
+
+  watch: {
+    'form.insulationMaterial'(value, oldValue) {
+      // 选中"无"时全不选,反之取消选择"无"
+      if ((value.indexOf('0') >= 0 && oldValue.indexOf('0') === -1) || !value.length) {
+        this.form.insulationMaterial = ['0'];
+      } else if (value.indexOf('0') >= 0 && value.length > 1) {
+        this.form.insulationMaterial.splice(value.indexOf('0'), 1);
+      }
+    },
+  },
+
+  async created() {
+    await this.onInit();
+    this.onFillData();
+  },
+
+  mounted() {
+    new AMap.Map(this.$refs.map);
+  },
+
+  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(params) {
+      this.loading = true;
+      /** 可以在这里await获取一些异步数据 */
+      /* ... */
+      await this.onLoadCodes();
+      this.loading = false;
+    },
+
+    /** 当前组件的其他方法 */
+    /* ... */
+    onLoadCodes() {
+      return this.$api
+        .$queue([
+          this.$api.sysDictTypeDropDownAwait({ code: 'dic_house_structure_type' }),
+          this.$api.sysDictTypeDropDownAwait({ code: 'dic_house_aseismic_grade' }),
+          this.$api.sysDictTypeDropDownAwait({ code: 'dic_house_base_info' }),
+          this.$api.sysDictTypeDropDownAwait({ code: 'dic_house_insulation_material' }),
+        ])
+        .then(
+          ([
+            dic_house_structure_type,
+            dic_house_aseismic_grade,
+            dic_house_base_info,
+            dic_house_insulation_material,
+          ]) => {
+            this.houseStructureType = dic_house_structure_type.data;
+            this.houseSseismicGrade = dic_house_aseismic_grade.data;
+            this.houseBaseInfo = dic_house_base_info.data;
+            this.houseInsulationMaterial = dic_house_insulation_material.data;
+          }
+        );
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,85 @@
+<template>
+  <container>
+    <!-- 如果不想使用锚点,删除a-row->a-col,只留内部的template层即可 -->
+    <a-row :gutter="16" type="flex">
+      <a-col flex="1">
+        <br />
+        <a-card class="yo-form-page--body">
+          <template v-for="(part, index) in parts">
+            <section :id="`form-${index}`" :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-${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('./building'),
+        },
+        {
+          title: '第二部分',
+        },
+      ],
+    };
+  },
+
+  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/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="yo-form-page">
+    <!-- 底部工具栏(需放在前面) -->
+    <div class="yo-form-page--bar yo-form-page--bar--with-tab">
+      <container>
+        <div class="yo-form-page--bar-inner">
+          <span>
+            <!-- 可以在工具栏中增加其他控件(只能在一行内) -->
+            <!-- ... -->
+            <a-input />
+          </span>
+          <span>
+            <a-button @click="closeContentWindow()">取消</a-button>
+            <a-button @click="onSubmit" type="primary">保存</a-button>
+          </span>
+        </div>
+      </container>
+    </div>
+
+    <!-- 表单主体 -->
+    <a-tabs type="card">
+      <a-tab-pane :force-render="true" :key="index" :tab="tab.title" v-for="(tab, index) in tabs">
+        <component :is="tab.component" :param="param" ref="forms" v-if="tab.component" />
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+<script>
+export default {
+  props: ['param'],
+
+  data() {
+    return {
+      tabs: [
+        {
+          title: '房屋基本情况',
+          component: () => import('./base'),
+        },
+        {
+          title: '测试',
+        },
+        {
+          title: '第三个',
+        },
+      ],
+    };
+  },
+
+  methods: {
+    async onSubmit() {
+      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 {
+          return;
+        }
+      }
+
+      /**
+       * 对表单提交进行处理
+       */
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <a-button
+      @click="openContentWindow({
+        title: '房屋表单',
+        path: 'business/house/houseInfo/form',
+      });"
+    >打开表单</a-button>
+  </div>
+</template>

Web/src/pages/system/_seed/README.md

@@ -1,5 +0,0 @@
-/** 
-基本上所有列表页都可以通过拷贝此处的种子文件实现增删改查的功能
-所有带 ... 的注释是可以依据当前业务添加内容的地方
-其他所有尽量不要修改
-**/

Web/src/pages/system/_seed/index.vue

@@ -1,216 +0,0 @@
-<template>
-  <!-- 
-    普通查询表格
-    v 1.2
-    2021-04-30
-    Lufthafen
-  -->
-  <container>
-    <br />
-    <a-card :bordered="false">
-      <yo-table
-        :columns="columns"
-        :load-data="loadData"
-        @query="onQuery"
-        @resetQuery="onResetQuery"
-        ref="table"
-      >
-        <Auth auth="authCode:page" slot="query">
-          <!-- 此处添加查询表单控件 -->
-          <!-- ... -->
-        </Auth>
-        <Auth auth="authCode:add" slot="operator">
-          <a-button @click="onOpen('add-form')" icon="plus">新增...</a-button>
-        </Auth>
-        <!-- 格式化字段内容 -->
-        <!-- ... -->
-        <!-- 添加操作控件 -->
-        <span slot="action" slot-scope="text, record">
-          <yo-table-actions>
-            <Auth auth="authCode:edit">
-              <a @click="onOpen('edit-form', record)">编辑</a>
-            </Auth>
-            <Auth auth="authCode:delete">
-              <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
-                <a>删除</a>
-              </a-popconfirm>
-            </Auth>
-            <!-- 可在此处添加其他操作控件 -->
-            <!-- ... -->
-          </yo-table-actions>
-        </span>
-      </yo-table>
-    </a-card>
-
-    <!-- 新增表单 -->
-    <yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
-      <form-body />
-    </yo-modal-form>
-
-    <!-- 编辑表单 -->
-    <yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
-      <form-body />
-    </yo-modal-form>
-  </container>
-</template>
-<script>
-import FormBody from './form';
-
-/* 在此管理整个页面需要的接口名称 */
-const api = {
-  page: 'testPageApi...',
-  add: 'testAddApi',
-  edit: 'testEditApi',
-  delete: 'testDeleteApi...',
-  /* ... */
-};
-
-export default {
-  components: {
-    FormBody,
-  },
-  data() {
-    return {
-      api,
-
-      name: '...',
-
-      /* 查询条件 */
-      query: {},
-
-      /* 表格字段 */
-      columns: [],
-
-      /* 字典编码储存格式 */
-      codes: {
-        code1: [],
-        code2: [],
-      },
-    };
-  },
-  created() {
-    /** 按需加载字典编码 */
-    this.onLoadCodes();
-
-    /** 根据权限添加操作列 */
-    const flag = this.$auth(/* ... */);
-    if (flag) {
-      this.columns.push({
-        title: '操作',
-        width: '150px',
-        dataIndex: 'action',
-        scopedSlots: { customRender: 'action' },
-      });
-    }
-  },
-  methods: {
-    /**
-     * 必要的方法
-     * 传给yo-table以示意数据接口及其参数和返回的数据结构
-     */
-    loadData(params) {
-      return this.$api[api.page]({
-        ...params,
-        ...this.query,
-      }).then((res) => {
-        return res.data;
-      });
-    },
-
-    /**
-     * 有查询功能时的必要方法
-     * 加载数据时初始化分页信息
-     */
-    onQuery() {
-      this.$refs.table.onReloadData(true);
-    },
-
-    /**
-     * 有查询功能时的必要方法
-     * 重置查询条件
-     */
-    onResetQuery() {
-      /** 在这里重置查询条件时,可对特殊的字段做保留处理 */
-      this.query = {};
-      this.onQuery();
-    },
-
-    /**
-     * 必要方法
-     * 重新列表数据
-     */
-    onReloadData() {
-      this.$refs.table.onReloadData();
-    },
-
-    /**
-     * 必要方法
-     * 加载字典数据
-     * 如果不需要获取相应的字典数据,此方法内容可空
-     */
-    onLoadCodes() {
-      this.$api
-        .$queue([
-          this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
-          this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
-          /* ... */
-        ])
-        .then(([code1, code2]) => {
-          this.codes.code1 = code1.data;
-          this.codes.code2 = code2.data;
-          /* ... */
-        });
-    },
-
-    /**
-     * 必要方法
-     * 绑定数据字典值
-     */
-    bindCodeValue(code, name) {
-      const c = this.codes[name].find((p) => p.code == code);
-      if (c) {
-        return c.value;
-      }
-      return null;
-    },
-
-    /**
-     * 必要方法
-     * 从列表页调用窗口的打开方法
-     */
-    onOpen(formName, record) {
-      this.$refs[formName].onOpen({
-        record,
-        /* 按需添加其他参数 */
-        /* ... */
-      });
-    },
-
-    /**
-     * 必要方法
-     * 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
-     */
-    onResult(success, successMessage) {
-      if (success) {
-        this.$message.success(successMessage);
-        this.onReloadData();
-      }
-    },
-
-    /**
-     * 必要方法
-     * 删除时调用
-     */
-    onDelete(record) {
-      this.$refs.table.onLoading();
-      this.$api[api.delete](record)
-        .then(({ success }) => {
-          this.onResult(success, '删除成功');
-        })
-        .finally(() => {
-          this.$refs.table.onLoaded();
-        });
-    },
-  },
-};
-</script>

Web/src/pages/system/_seed/treeLayout.vue

@@ -1,256 +0,0 @@
-<template>
-  <!-- 
-    普通树查询表格
-    v 1.2
-    2021-04-30
-    Lufthafen
-  -->
-  <yo-tree-layout
-    :load-data="loadTreeData"
-    @select="onSelect"
-    default-expanded-keys
-    ref="tree-layout"
-  >
-    <container>
-      <a-card :bordered="false">
-        <yo-table
-          :columns="columns"
-          :load-data="loadData"
-          @query="onQuery"
-          @resetQuery="onResetQuery"
-          ref="table"
-        >
-          <Auth auth="authCode:page" slot="query">
-            <!-- 此处添加查询表单控件 -->
-            <!-- ... -->
-          </Auth>
-          <Auth auth="authCode:add" slot="operator">
-            <a-button @click="onOpen('add-form')" icon="plus">新增机构</a-button>
-          </Auth>
-          <!-- 格式化字段内容 -->
-          <!-- ... -->
-          <!-- 添加操作控件 -->
-          <span slot="action" slot-scope="text, record">
-            <yo-table-actions>
-              <Auth auth="authCode:edit">
-                <a @click="onOpen('edit-form', record)">编辑</a>
-              </Auth>
-              <Auth auth="authCode:delete">
-                <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
-                  <a>删除</a>
-                </a-popconfirm>
-              </Auth>
-              <!-- 可在此处添加其他操作控件 -->
-              <!-- ... -->
-            </yo-table-actions>
-          </span>
-        </yo-table>
-      </a-card>
-    </container>
-
-    <!-- 新增表单 -->
-    <yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
-      <form-body />
-    </yo-modal-form>
-
-    <!-- 编辑表单 -->
-    <yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
-      <form-body />
-    </yo-modal-form>
-  </yo-tree-layout>
-</template>
-<script>
-/* 需要引用YoTreeLayout组件 */
-import YoTreeLayout from '@/components/yoTreeLayout';
-import FormBody from './form';
-
-/* 在此管理整个页面需要的接口名称 */
-const api = {
-  tree: 'testTreeApi...',
-  page: 'testPageApi...',
-  add: 'testAddApi',
-  edit: 'testEditApi',
-  delete: 'testDeleteApi...',
-  /* ... */
-};
-
-export default {
-  components: {
-    YoTreeLayout,
-    FormBody,
-  },
-
-  data() {
-    return {
-      api,
-
-      name: '...',
-
-      /* 查询条件 */
-      query: {},
-
-      /* 表格字段 */
-      columns: [],
-
-      /* 字典编码储存格式 */
-      codes: {
-        code1: [],
-        code2: [],
-      },
-    };
-  },
-
-  created() {
-    this.onLoadCodes();
-
-    /** 根据权限添加操作列 */
-    const flag = this.$auth(/* ... */);
-    if (flag) {
-      this.columns.push({
-        title: '操作',
-        width: '150px',
-        dataIndex: 'action',
-        scopedSlots: { customRender: 'action' },
-      });
-    }
-  },
-
-  methods: {
-    /**
-     * 树形选择界面必要的方法
-     * 传给yo-table-layout以示意数据接口
-     */
-    loadTreeData() {
-      return this.$api[api.tree]().then((res) => {
-        return res.data;
-      });
-    },
-
-    /**
-     * 树形选择界面必要的方法
-     * 选择树节点事件
-     */
-    onSelect([id]) {
-      /** 在选择事件中可以对右侧表格添加父节点id的查询条件 */
-      this.query = {
-        pid: id,
-      };
-      this.onQuery();
-    },
-
-    /**
-     * 必要的方法
-     * 传给yo-table以示意数据接口及其参数和返回的数据结构
-     */
-    loadData(params) {
-      return this.$api[api.page]({
-        ...params,
-        ...this.query,
-      }).then((res) => {
-        return res.data;
-      });
-    },
-
-    /**
-     * 有查询功能时的必要方法
-     * 加载数据时初始化分页信息
-     */
-    onQuery() {
-      this.$refs.table.onReloadData(true);
-    },
-
-    /**
-     * 必要方法
-     * 重新列表数据
-     */
-    onResetQuery() {
-      /* 与普通查询页不同的是,这里的父节点参数不应该在重置后被清空 */
-      Object.keys(this.query).forEach((p) => {
-        if (p !== 'pid') {
-          this.query[p] = undefined;
-        }
-      });
-      this.onQuery();
-    },
-
-    /**
-     * 必要方法
-     * 重新列表数据
-     */
-    onReloadData() {
-      this.$refs.table.onReloadData();
-      this.$refs['tree-layout'].onReloadData();
-    },
-
-    /**
-     * 必要方法
-     * 加载字典数据
-     * 如果不需要获取相应的字典数据,此方法内容可空
-     */
-    onLoadCodes() {
-      this.$api
-        .$queue([
-          this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
-          this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
-          /* ... */
-        ])
-        .then(([code1, code2]) => {
-          this.codes.code1 = code1.data;
-          this.codes.code2 = code2.data;
-          /* ... */
-        });
-    },
-
-    /**
-     * 必要方法
-     * 绑定数据字典值
-     */
-    bindCodeValue(code, name) {
-      const c = this.codes[name].find((p) => p.code == code);
-      if (c) {
-        return c.value;
-      }
-      return null;
-    },
-
-    /**
-     * 有编辑新增功能的必要方法
-     * 从列表页调用窗口的打开方法
-     */
-    onOpen(formName, record) {
-      this.$refs[formName].onOpen({
-        record,
-        pid: this.query.pid,
-        /* 按需添加其他参数 */
-        /* ... */
-      });
-    },
-
-    /**
-     * 必要方法
-     * 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
-     */
-    onResult(success, successMessage) {
-      if (success) {
-        this.$message.success(successMessage);
-        this.onReloadData();
-      }
-    },
-
-    /**
-     * 必要方法
-     * 删除时调用
-     */
-    onDelete(record) {
-      this.$refs.table.onLoading();
-      this.$api[api.delete](record)
-        .then(({ success }) => {
-          this.onResult(success, '删除成功');
-        })
-        .finally(() => {
-          this.$refs.table.onLoaded();
-        });
-    },
-  },
-};
-</script>

Web/src/pages/system/doc/highlight.js

@@ -32,7 +32,7 @@ export default {
             this.baseCopy(this.code)
         },
         onCopyTemplate() {
-            const code = '"' +
+            let code = '"' +
                 this.code
                     // 转义双引号 => \"
                     .replace(/"/g, '\\"')
@@ -43,6 +43,15 @@ export default {
                     // 替换行末 = ",
                     .replace(/\r/g, '",\r') +
                 '"'
+            let flag = true
+            while (flag) {
+                const p = code.match(/\$\${.*?}/)
+                if (p && p[0]) {
+                    code = code.replace(p[0], `\$\{${p[0].slice(1)}\}`)
+                } else {
+                    flag = false
+                }
+            }
             this.baseCopy(code)
         },
     },

Web/src/pages/system/doc/index.vue

@@ -176,6 +176,10 @@ const docs = [
         title: '树-查询表格',
         path: '/seed/treeLayout',
       },
+      {
+        title: '表单页',
+        path: '/seed/pageForm',
+      },
     ],
   },
   {

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

@@ -4,7 +4,7 @@
       当前版本
       <a-tag>1.2</a-tag>
     </p>
-    <Highlight :code="codes['/seed/form.vue']" copy-template language="html" />
+    <Highlight :code="codes['/seed/query-form/form.vue']" copy-template language="html" />
   </section>
 </template>
 <script>

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

@@ -0,0 +1,44 @@
+<template>
+  <section>
+    <h5>1.带标签页的复杂表单页外部架构</h5>
+    <p>标签页从外到里需要添加三层，包括【外部标签框架】、【内部标签框架】和【分片表单】</p>
+    <p>
+      外部标签框架
+      <a-tag>1.0</a-tag>
+    </p>
+    <p>构成tabs标签页，在内调用每个标签页的pane组件</p>
+    <Highlight :code="codes['/seed/form-page/tab-form/tab.vue']" copy-template language="html" />
+    <p>
+      内部标签框架
+      <a-tag>1.0</a-tag>
+    </p>
+    <p>标签页pane的内容，在内将分片表单进行组合</p>
+    <Highlight :code="codes['/seed/form-page/tab-form/tabPane.vue']" copy-template language="html" />
+    <h5>2.单页表单外部结构</h5>
+    <p>
+      <a-tag>1.0</a-tag>
+    </p>
+    <p>该表单单页面展示，从外到里需要添加两层，包括【表单外部结构】和【分片表单】</p>
+    <Highlight :code="codes['/seed/form-page/only-form/index.vue']" copy-template language="html" />
+    <h5>3.分片表单</h5>
+    <p>
+      <a-tag>1.0</a-tag>
+    </p>
+    <p>表单核心，再该组件中放入表单控件</p>
+    <Highlight :code="codes['/seed/form-page/only-form/part.vue']" copy-template language="html" />
+  </section>
+</template>
+<script>
+import Highlight from '../highlight';
+
+export default {
+  components: {
+    Highlight,
+  },
+  props: {
+    codes: {
+      type: Object,
+    },
+  },
+};
+</script>

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

@@ -4,7 +4,7 @@
       当前版本
       <a-tag>1.2</a-tag>
     </p>
-    <Highlight :code="codes['/seed/query.vue']" copy-template language="html" />
+    <Highlight :code="codes['/seed/query-form//query.vue']" copy-template language="html" />
   </section>
 </template>
 <script>

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

@@ -4,7 +4,7 @@
       当前版本
       <a-tag>1.1</a-tag>
     </p>
-    <Highlight :code="codes['/seed/treeLayout.vue']" copy-template language="html" />
+    <Highlight :code="codes['/seed/query-form/treeLayout.vue']" copy-template language="html" />
   </section>
 </template>
 <script>