From 43a3184bba52092efa06e7f880206b5aef821773 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=87=AA=E5=B8=A6=E5=A4=A7=E4=BD=AC=E6=B0=94=E5=9C=BA?=
 <188633308@qq.com>
Date: Wed, 12 May 2021 23:20:00 +0800
Subject: [PATCH] =?UTF-8?q?Revert=20"update=20=E6=9E=84=E6=88=90=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E9=A1=B5=E7=9A=84=E7=A7=8D=E5=AD=90"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit c74448b1fcb3ff2b0251260d444ff1ae55302d6b.
---
 .../seed/form-page/only-form/index.vue        | 105 -----
 .../doc-code/seed/form-page/tab-form/tab.vue  |  73 ----
 .../seed/form-page/tab-form/tabPane.vue       |  90 ----
 .../doc-code/seed/{query-form => }/form.vue   |   0
 .../doc-code/seed/{query-form => }/query.vue  |   0
 .../seed/{query-form => }/treeLayout.vue      |   0
 Web/src/assets/style/app.less                 |   3 -
 Web/src/assets/style/lib/checkbox.less        |  10 -
 Web/src/assets/style/lib/container.less       |   4 -
 Web/src/assets/style/lib/font-size.less       |   4 +-
 Web/src/assets/style/lib/form-page.less       | 134 ------
 Web/src/assets/style/lib/input.less           |   6 -
 Web/src/components/container/index.vue        |  11 +-
 Web/src/main.js                               |   2 -
 .../pages/business/house/houseCode/form.vue   | 281 +++++++++++++
 .../business/house/houseCode/form/index.vue   | 114 -----
 .../business/house/houseCode/form/part.vue    | 268 ------------
 .../pages/business/house/houseCode/index.vue  | 212 +++++++++-
 .../house/houseInfo/form/base/building.vue    | 392 ------------------
 .../house/houseInfo/form/base/index.vue       |  85 ----
 .../business/house/houseInfo/form/index.vue   |  71 ----
 .../pages/business/house/houseInfo/index.vue  |  10 -
 Web/src/pages/system/_seed/README.md          |   5 +
 .../pages/system/_seed/form.vue}              |  38 +-
 Web/src/pages/system/_seed/index.vue          | 216 ++++++++++
 Web/src/pages/system/_seed/treeLayout.vue     | 256 ++++++++++++
 Web/src/pages/system/doc/highlight.js         |  11 +-
 Web/src/pages/system/doc/index.vue            |   4 -
 Web/src/pages/system/doc/seed/form.vue        |   2 +-
 Web/src/pages/system/doc/seed/pageForm.vue    |  44 --
 Web/src/pages/system/doc/seed/query.vue       |   2 +-
 Web/src/pages/system/doc/seed/treeLayout.vue  |   2 +-
 32 files changed, 980 insertions(+), 1475 deletions(-)
 delete mode 100644 Web/public/doc-code/seed/form-page/only-form/index.vue
 delete mode 100644 Web/public/doc-code/seed/form-page/tab-form/tab.vue
 delete mode 100644 Web/public/doc-code/seed/form-page/tab-form/tabPane.vue
 rename Web/public/doc-code/seed/{query-form => }/form.vue (100%)
 rename Web/public/doc-code/seed/{query-form => }/query.vue (100%)
 rename Web/public/doc-code/seed/{query-form => }/treeLayout.vue (100%)
 delete mode 100644 Web/src/assets/style/lib/checkbox.less
 delete mode 100644 Web/src/assets/style/lib/form-page.less
 delete mode 100644 Web/src/assets/style/lib/input.less
 create mode 100644 Web/src/pages/business/house/houseCode/form.vue
 delete mode 100644 Web/src/pages/business/house/houseCode/form/index.vue
 delete mode 100644 Web/src/pages/business/house/houseCode/form/part.vue
 delete mode 100644 Web/src/pages/business/house/houseInfo/form/base/building.vue
 delete mode 100644 Web/src/pages/business/house/houseInfo/form/base/index.vue
 delete mode 100644 Web/src/pages/business/house/houseInfo/form/index.vue
 delete mode 100644 Web/src/pages/business/house/houseInfo/index.vue
 create mode 100644 Web/src/pages/system/_seed/README.md
 rename Web/{public/doc-code/seed/form-page/only-form/part.vue => src/pages/system/_seed/form.vue} (80%)
 create mode 100644 Web/src/pages/system/_seed/index.vue
 create mode 100644 Web/src/pages/system/_seed/treeLayout.vue
 delete mode 100644 Web/src/pages/system/doc/seed/pageForm.vue

diff --git a/Web/public/doc-code/seed/form-page/only-form/index.vue b/Web/public/doc-code/seed/form-page/only-form/index.vue
deleted file mode 100644
index 71cc94d..0000000
--- a/Web/public/doc-code/seed/form-page/only-form/index.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/Web/public/doc-code/seed/form-page/tab-form/tab.vue b/Web/public/doc-code/seed/form-page/tab-form/tab.vue
deleted file mode 100644
index d907105..0000000
--- a/Web/public/doc-code/seed/form-page/tab-form/tab.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/Web/public/doc-code/seed/form-page/tab-form/tabPane.vue b/Web/public/doc-code/seed/form-page/tab-form/tabPane.vue
deleted file mode 100644
index 98deaf0..0000000
--- a/Web/public/doc-code/seed/form-page/tab-form/tabPane.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/Web/public/doc-code/seed/query-form/form.vue b/Web/public/doc-code/seed/form.vue
similarity index 100%
rename from Web/public/doc-code/seed/query-form/form.vue
rename to Web/public/doc-code/seed/form.vue
diff --git a/Web/public/doc-code/seed/query-form/query.vue b/Web/public/doc-code/seed/query.vue
similarity index 100%
rename from Web/public/doc-code/seed/query-form/query.vue
rename to Web/public/doc-code/seed/query.vue
diff --git a/Web/public/doc-code/seed/query-form/treeLayout.vue b/Web/public/doc-code/seed/treeLayout.vue
similarity index 100%
rename from Web/public/doc-code/seed/query-form/treeLayout.vue
rename to Web/public/doc-code/seed/treeLayout.vue
diff --git a/Web/src/assets/style/app.less b/Web/src/assets/style/app.less
index 3049253..7919e32 100644
--- a/Web/src/assets/style/app.less
+++ b/Web/src/assets/style/app.less
@@ -21,11 +21,8 @@
 @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';
diff --git a/Web/src/assets/style/lib/checkbox.less b/Web/src/assets/style/lib/checkbox.less
deleted file mode 100644
index 1913738..0000000
--- a/Web/src/assets/style/lib/checkbox.less
+++ /dev/null
@@ -1,10 +0,0 @@
-@import (reference) '~@/assets/style/extend.less';
-.ant-checkbox-wrapper {
-  margin-right: @padding-xs;
-  &:last-child {
-    margin-right: 0;
-  }
-  +.ant-checkbox-wrapper {
-    margin-left: 0;
-  }
-}
diff --git a/Web/src/assets/style/lib/container.less b/Web/src/assets/style/lib/container.less
index d7443e4..162aff0 100644
--- a/Web/src/assets/style/lib/container.less
+++ b/Web/src/assets/style/lib/container.less
@@ -37,7 +37,3 @@
 .container-fluid {
   .container-base();
 }
-.container-flex {
-  display: flex;
-  justify-content: space-between;
-}
diff --git a/Web/src/assets/style/lib/font-size.less b/Web/src/assets/style/lib/font-size.less
index d9497af..08c8ffc 100644
--- a/Web/src/assets/style/lib/font-size.less
+++ b/Web/src/assets/style/lib/font-size.less
@@ -17,9 +17,9 @@ h4,
 }
 h5,
 .h5 {
-  font-size: 16px;
+  font-size: 14px;
 }
 h6,
 .h6 {
-  font-size: 14px;
+  font-size: 12px;
 }
diff --git a/Web/src/assets/style/lib/form-page.less b/Web/src/assets/style/lib/form-page.less
deleted file mode 100644
index e083e86..0000000
--- a/Web/src/assets/style/lib/form-page.less
+++ /dev/null
@@ -1,134 +0,0 @@
-@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;
-        }
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/Web/src/assets/style/lib/input.less b/Web/src/assets/style/lib/input.less
deleted file mode 100644
index 2220f7c..0000000
--- a/Web/src/assets/style/lib/input.less
+++ /dev/null
@@ -1,6 +0,0 @@
-@import (reference) '~@/assets/style/extend.less';
-.yo-input-prefix-2 {
-  .ant-input:not(:first-child) {
-    padding-left: 45px;
-  }
-}
diff --git a/Web/src/components/container/index.vue b/Web/src/components/container/index.vue
index a400420..549d3e3 100644
--- a/Web/src/components/container/index.vue
+++ b/Web/src/components/container/index.vue
@@ -1,10 +1,5 @@
 <template>
-  <section
-    :class="{
-    [mode || $root.global.settings.container || 'container-fluid']: true,
-    'container-flex': flex
-  }"
-  >
+  <section :class="mode || $root.global.settings.container || 'container-fluid'">
     <slot />
   </section>
 </template>
@@ -14,10 +9,6 @@ export default {
     mode: {
       type: String,
     },
-    flex: {
-      type: Boolean,
-      default: false,
-    },
   },
 };
 </script>
\ No newline at end of file
diff --git a/Web/src/main.js b/Web/src/main.js
index 1ab253b..d5a3c78 100644
--- a/Web/src/main.js
+++ b/Web/src/main.js
@@ -82,8 +82,6 @@ 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)
 
 /**
  * 引入主题样式
diff --git a/Web/src/pages/business/house/houseCode/form.vue b/Web/src/pages/business/house/houseCode/form.vue
new file mode 100644
index 0000000..b93d05f
--- /dev/null
+++ b/Web/src/pages/business/house/houseCode/form.vue
@@ -0,0 +1,281 @@
+<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>
\ No newline at end of file
diff --git a/Web/src/pages/business/house/houseCode/form/index.vue b/Web/src/pages/business/house/houseCode/form/index.vue
deleted file mode 100644
index 2942068..0000000
--- a/Web/src/pages/business/house/houseCode/form/index.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/Web/src/pages/business/house/houseCode/form/part.vue b/Web/src/pages/business/house/houseCode/form/part.vue
deleted file mode 100644
index e4a7052..0000000
--- a/Web/src/pages/business/house/houseCode/form/part.vue
+++ /dev/null
@@ -1,268 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/Web/src/pages/business/house/houseCode/index.vue b/Web/src/pages/business/house/houseCode/index.vue
index a2e4ffc..a10161b 100644
--- a/Web/src/pages/business/house/houseCode/index.vue
+++ b/Web/src/pages/business/house/houseCode/index.vue
@@ -1,10 +1,206 @@
 <template>
-  <div>
-    <a-button
-      @click="openContentWindow({
-        title: '编码表单',
+  <!-- 
+    普通查询表格
+    v 1.2
+    2021-04-30
+    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',
-      });"
-    >打开表单</a-button>
-  </div>
-</template>
\ No newline at end of file
+        param: {
+          parent: this,
+          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>
\ No newline at end of file
diff --git a/Web/src/pages/business/house/houseInfo/form/base/building.vue b/Web/src/pages/business/house/houseInfo/form/base/building.vue
deleted file mode 100644
index dbe0c88..0000000
--- a/Web/src/pages/business/house/houseInfo/form/base/building.vue
+++ /dev/null
@@ -1,392 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/Web/src/pages/business/house/houseInfo/form/base/index.vue b/Web/src/pages/business/house/houseInfo/form/base/index.vue
deleted file mode 100644
index fcd9e5d..0000000
--- a/Web/src/pages/business/house/houseInfo/form/base/index.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/Web/src/pages/business/house/houseInfo/form/index.vue b/Web/src/pages/business/house/houseInfo/form/index.vue
deleted file mode 100644
index 2729df5..0000000
--- a/Web/src/pages/business/house/houseInfo/form/index.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/Web/src/pages/business/house/houseInfo/index.vue b/Web/src/pages/business/house/houseInfo/index.vue
deleted file mode 100644
index d7fceb3..0000000
--- a/Web/src/pages/business/house/houseInfo/index.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <div>
-    <a-button
-      @click="openContentWindow({
-        title: '房屋表单',
-        path: 'business/house/houseInfo/form',
-      });"
-    >打开表单</a-button>
-  </div>
-</template>
\ No newline at end of file
diff --git a/Web/src/pages/system/_seed/README.md b/Web/src/pages/system/_seed/README.md
new file mode 100644
index 0000000..3dbb9d7
--- /dev/null
+++ b/Web/src/pages/system/_seed/README.md
@@ -0,0 +1,5 @@
+/** 
+基本上所有列表页都可以通过拷贝此处的种子文件实现增删改查的功能
+所有带 ... 的注释是可以依据当前业务添加内容的地方
+其他所有尽量不要修改
+**/
\ No newline at end of file
diff --git a/Web/public/doc-code/seed/form-page/only-form/part.vue b/Web/src/pages/system/_seed/form.vue
similarity index 80%
rename from Web/public/doc-code/seed/form-page/only-form/part.vue
rename to Web/src/pages/system/_seed/form.vue
index 98dcf89..fb4579d 100644
--- a/Web/public/doc-code/seed/form-page/only-form/part.vue
+++ b/Web/src/pages/system/_seed/form.vue
@@ -1,21 +1,17 @@
 <template>
   <!-- 
-    整页表单的分片表单
-    v 1.0
-    2021-05-12
+    普通编辑窗体
+    v 1.2
+    2021-04-30
     Lufthafen
   -->
-  <a-form-model
-    :label-col="labelCol"
-    :model="form"
-    :rules="rules"
-    :wrapper-col="wrapperCol"
-    ref="form"
-  >
+  <a-form-model :model="form" :rules="rules" class="yo-form" 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>
@@ -26,13 +22,8 @@ const defaultForm = {
 };
 
 export default {
-  props: ['param'],
-
   data() {
     return {
-      labelCol: { flex: '150px' },
-      wrapperCol: { flex: '1' },
-
       /** 表单数据 */
       form: {},
       /** 验证格式 */
@@ -48,23 +39,16 @@ export default {
     };
   },
 
-  async created() {
-    await this.onInit();
-    this.onFillData();
-  },
-
   methods: {
     /**
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData() {
+    onFillData(params) {
       /** 将默认数据覆盖到form */
-      const record = this.param && this.param.record;
-
       this.form = this.$_.cloneDeep({
         ...defaultForm,
-        ...record,
+        ...params.record,
         /** 在此处添加其他默认数据转换 */
         /* ... */
       });
@@ -116,7 +100,7 @@ export default {
      * 必要方法
      * 加载当前表单中所需要的异步数据
      */
-    async onInit() {
+    async onInit(params) {
       this.loading = true;
       /** 可以在这里await获取一些异步数据 */
       /* ... */
diff --git a/Web/src/pages/system/_seed/index.vue b/Web/src/pages/system/_seed/index.vue
new file mode 100644
index 0000000..f30ce6d
--- /dev/null
+++ b/Web/src/pages/system/_seed/index.vue
@@ -0,0 +1,216 @@
+<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>
\ No newline at end of file
diff --git a/Web/src/pages/system/_seed/treeLayout.vue b/Web/src/pages/system/_seed/treeLayout.vue
new file mode 100644
index 0000000..91e861f
--- /dev/null
+++ b/Web/src/pages/system/_seed/treeLayout.vue
@@ -0,0 +1,256 @@
+<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>
\ No newline at end of file
diff --git a/Web/src/pages/system/doc/highlight.js b/Web/src/pages/system/doc/highlight.js
index 25bea35..9b86ab0 100644
--- a/Web/src/pages/system/doc/highlight.js
+++ b/Web/src/pages/system/doc/highlight.js
@@ -32,7 +32,7 @@ export default {
             this.baseCopy(this.code)
         },
         onCopyTemplate() {
-            let code = '"' +
+            const code = '"' +
                 this.code
                     // 转义双引号 => \"
                     .replace(/"/g, '\\"')
@@ -43,15 +43,6 @@ 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)
         },
     },
diff --git a/Web/src/pages/system/doc/index.vue b/Web/src/pages/system/doc/index.vue
index 9275b0e..674f4db 100644
--- a/Web/src/pages/system/doc/index.vue
+++ b/Web/src/pages/system/doc/index.vue
@@ -176,10 +176,6 @@ const docs = [
         title: '树-查询表格',
         path: '/seed/treeLayout',
       },
-      {
-        title: '表单页',
-        path: '/seed/pageForm',
-      },
     ],
   },
   {
diff --git a/Web/src/pages/system/doc/seed/form.vue b/Web/src/pages/system/doc/seed/form.vue
index f2db59b..c7287d0 100644
--- a/Web/src/pages/system/doc/seed/form.vue
+++ b/Web/src/pages/system/doc/seed/form.vue
@@ -4,7 +4,7 @@
       当前版本
       <a-tag>1.2</a-tag>
     </p>
-    <Highlight :code="codes['/seed/query-form/form.vue']" copy-template language="html" />
+    <Highlight :code="codes['/seed/form.vue']" copy-template language="html" />
   </section>
 </template>
 <script>
diff --git a/Web/src/pages/system/doc/seed/pageForm.vue b/Web/src/pages/system/doc/seed/pageForm.vue
deleted file mode 100644
index d622f25..0000000
--- a/Web/src/pages/system/doc/seed/pageForm.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<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>
diff --git a/Web/src/pages/system/doc/seed/query.vue b/Web/src/pages/system/doc/seed/query.vue
index 94b29c4..e9cebd3 100644
--- a/Web/src/pages/system/doc/seed/query.vue
+++ b/Web/src/pages/system/doc/seed/query.vue
@@ -4,7 +4,7 @@
       当前版本
       <a-tag>1.2</a-tag>
     </p>
-    <Highlight :code="codes['/seed/query-form//query.vue']" copy-template language="html" />
+    <Highlight :code="codes['/seed/query.vue']" copy-template language="html" />
   </section>
 </template>
 <script>
diff --git a/Web/src/pages/system/doc/seed/treeLayout.vue b/Web/src/pages/system/doc/seed/treeLayout.vue
index 2305a55..6b789ea 100644
--- a/Web/src/pages/system/doc/seed/treeLayout.vue
+++ b/Web/src/pages/system/doc/seed/treeLayout.vue
@@ -4,7 +4,7 @@
       当前版本
       <a-tag>1.1</a-tag>
     </p>
-    <Highlight :code="codes['/seed/query-form/treeLayout.vue']" copy-template language="html" />
+    <Highlight :code="codes['/seed/treeLayout.vue']" copy-template language="html" />
   </section>
 </template>
 <script>