From acf9deebcd2e4be2455586a952dae824352332b5 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, 19 May 2021 15:24:17 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E6=88=BF=E5=B1=8B=E5=9F=BA=E6=9C=AC?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E6=8C=AA=E5=8A=A8=E5=88=B0=E9=A1=B5=E7=AD=BE?=
 =?UTF-8?q?=E4=B8=8A=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Web/src/assets/style/lib/form-page.less       |  80 ++++++++-----
 .../house/houseInfo/form/base/building.vue    |  31 -----
 .../business/house/houseInfo/form/index.vue   | 106 +++++++++---------
 3 files changed, 104 insertions(+), 113 deletions(-)

diff --git a/Web/src/assets/style/lib/form-page.less b/Web/src/assets/style/lib/form-page.less
index a25c706..4809c1a 100644
--- a/Web/src/assets/style/lib/form-page.less
+++ b/Web/src/assets/style/lib/form-page.less
@@ -5,7 +5,7 @@
 
   height: 100%;
 
-  >.yo-tab-external-mount {
+  .yo-tab-external-mount {
     display: flex;
     flex-direction: column;
 
@@ -17,41 +17,44 @@
 
         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-extra-content {
-          padding: (@tabs-card-height + @padding-xs - @btn-height-base) / 2 @padding-md;
-        }
-
-        .ant-tabs-tab {
-          .ant-btn();
-          transition: none;
-
-          &:hover {
-            border-color: @btn-default-border;
+        &.ant-tabs-card-bar {
+          .ant-tabs-nav-container {
+            height: @tabs-card-height + @padding-xs;
+            padding: (@tabs-card-height + @padding-xs - @btn-height-base) / 2 @padding-md;
           }
-        }
 
-        .ant-tabs-tab {
-          line-height: @btn-height-base;
+          .ant-tabs-extra-content {
+            padding: (@tabs-card-height + @padding-xs - @btn-height-base) / 2 @padding-md;
+          }
 
-          margin-right: -1px;
-        }
+          .ant-tabs-tab {
+            transition: none;
 
-        .ant-tabs-tab-active {
-          z-index: 2;
+            .ant-btn();
 
-          color: @btn-primary-color;
-          border-color: @btn-primary-bg;
-          background-color: @btn-primary-bg;
+            &:hover {
+              border-color: @btn-default-border;
+            }
+          }
+
+          .ant-tabs-tab {
+            line-height: @btn-height-base;
+
+            margin-right: -1px;
+          }
+
+          .ant-tabs-tab-active {
+            z-index: 2;
 
-          &:hover {
             color: @btn-primary-color;
-            border-color: color(~`colorPalette('@{btn-primary-bg}', 5) `);
-            background-color: color(~`colorPalette('@{btn-primary-bg}', 5) `);
+            border-color: @btn-primary-bg;
+            background-color: @btn-primary-bg;
+
+            &:hover {
+              color: @btn-primary-color;
+              border-color: color(~`colorPalette('@{btn-primary-bg}', 5) `);
+              background-color: color(~`colorPalette('@{btn-primary-bg}', 5) `);
+            }
           }
         }
       }
@@ -100,7 +103,7 @@
         width: 100%;
       }
 
-      +.yo-tab-external-mount {
+      ~.yo-tab-external-mount {
         >.yo-tab-external-mount-content {
           >.yo-tab-external-tabpane {
             padding-bottom: @padding-xs * 2 + @btn-height-base + @border-width-base * 2;
@@ -145,4 +148,21 @@
       }
     }
   }
+
+  &-layout {
+    display: flex;
+    flex-direction: column;
+
+    height: 100%;
+
+    &--horizontal {
+      flex-direction: row;
+    }
+  }
+
+  &--header {
+    padding: @padding-md 0;
+
+    background-color: @white;
+  }
 }
\ 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
index e61343c..46bb83e 100644
--- a/Web/src/pages/business/house/houseInfo/form/base/building.vue
+++ b/Web/src/pages/business/house/houseInfo/form/base/building.vue
@@ -14,37 +14,6 @@
   >
     <a-spin :spinning="loading">
       <a-icon slot="indicator" spin type="loading" />
-      <a-row :gutter="16" type="flex">
-        <a-col :span="12">
-          <a-form-model-item class="ant-row-flex" label="区县（市）">
-            <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 placeholder="请输入项目名称" v-model="form.projectName" />
diff --git a/Web/src/pages/business/house/houseInfo/form/index.vue b/Web/src/pages/business/house/houseInfo/form/index.vue
index 3b2b61f..932d7e1 100644
--- a/Web/src/pages/business/house/houseInfo/form/index.vue
+++ b/Web/src/pages/business/house/houseInfo/form/index.vue
@@ -1,63 +1,65 @@
 <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>
-            <!-- 可以在工具栏中增加其他控件(只能在一行内) -->
-            <!-- ... -->
-          </span>
-          <span>
-            <a-button @click="closeContentWindow()">取消</a-button>
-            <a-button @click="onSubmit" type="primary">保存</a-button>
-          </span>
-        </div>
-      </container>
-    </div>
+    <div class="yo-form-page-layout">
+      <!-- 底部工具栏(需放在前面) -->
+      <div class="yo-form-page--bar yo-form-page--bar--with-tab">
+        <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 :style="{ paddingBottom: 0 }" class="yo-form-page--header">
+        <container>
+          <a-descriptions :column="4" title>
+            <a-descriptions-item label="区县（市）">测试区</a-descriptions-item>
+            <a-descriptions-item label="街道（乡镇）">测试街道</a-descriptions-item>
+            <a-descriptions-item label="社区">欧阳社区</a-descriptions-item>
+            <a-descriptions-item label="片区">片区一22（明湖片区）</a-descriptions-item>
+            <a-descriptions-item :span="2" label="编号">宁波市-测试区-测试街道-欧阳社区-项目十二(项目十二)-001</a-descriptions-item>
+            <a-descriptions-item :span="2" label="编码">330266066001012001</a-descriptions-item>
+          </a-descriptions>
+        </container>
+      </div>
+
+      <!-- 表单主体 -->
+      <!-- 
       挂载了一个content到tab后面
       如果直接使用antd-vue的tab,将会莫名其妙地做各种多余的渲染,导致卡顿
       现在只使用其tab卡片,重写了一个tab内容
-    -->
-    <div class="yo-tab-external-mount">
-      <a-tabs @change="onTabChange" type="card">
-        <template v-for="(tab, index) in tabs">
-          <a-tab-pane :force-render="true" :key="index" :tab="tab.title" v-if="tab.show"></a-tab-pane>
-        </template>
-        <a-popover placement="bottomRight" slot="tabBarExtraContent">
-          <template slot="content">
-            <p>Content</p>
-            <p>Content</p>
+      -->
+      <div class="yo-tab-external-mount">
+        <a-tabs @change="onTabChange">
+          <template v-for="(tab, index) in tabs">
+            <a-tab-pane :force-render="true" :key="index" :tab="tab.title" v-if="tab.show"></a-tab-pane>
           </template>
-          <template slot="title">
-            <span>Title</span>
+        </a-tabs>
+        <div class="yo-tab-external-mount-content">
+          <template v-for="(tab, index) in tabs">
+            <div
+              :class="tab.active ? 'yo-tab-external-tabpane-active' : 'yo-tab-external-tabpane-inactive'"
+              :key="index"
+              class="yo-tab-external-tabpane"
+              v-if="tab.show"
+            >
+              <component
+                :frame="self"
+                :is="tab.component"
+                :param="param"
+                ref="forms"
+                v-if="tab.component"
+              />
+            </div>
           </template>
-          <a-button class="block">
-            房屋基本情况
-            <a-icon type="down" />
-          </a-button>
-        </a-popover>
-      </a-tabs>
-      <div class="yo-tab-external-mount-content">
-        <template v-for="(tab, index) in tabs">
-          <div
-            :class="tab.active ? 'yo-tab-external-tabpane-active' : 'yo-tab-external-tabpane-inactive'"
-            :key="index"
-            class="yo-tab-external-tabpane"
-            v-if="tab.show"
-          >
-            <component
-              :frame="self"
-              :is="tab.component"
-              :param="param"
-              ref="forms"
-              v-if="tab.component"
-            />
-          </div>
-        </template>
+        </div>
       </div>
     </div>
   </div>