From 2c712ddd0470cc8438ffa2e8b9245a0ff8c0af50 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: Thu, 3 Jun 2021 17:52:45 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E6=9B=B4=E6=96=B0=E7=A7=8D=E5=AD=90?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../seed/form-page/only-form/index.vue        |  20 +--
 .../seed/form-page/only-form/part.vue         |  45 +++---
 .../doc-code/seed/form-page/tab-form/tab.vue  | 136 +++++++++++-------
 .../seed/form-page/tab-form/tabPane.vue       |  19 +--
 4 files changed, 128 insertions(+), 92 deletions(-)

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
index 36c1566..30b96d9 100644
--- a/Web/public/doc-code/seed/form-page/only-form/index.vue
+++ b/Web/public/doc-code/seed/form-page/only-form/index.vue
@@ -1,8 +1,8 @@
 <template>
   <!-- 
     整页表单的外框架
-    v 1.0
-    2021-05-12
+    v 1.2
+    2021-06-03
     Lufthafen
   -->
   <div class="yo-form-page">
@@ -56,7 +56,7 @@
           </span>
           <span>
             <a-button @click="closeContentWindow()">取消</a-button>
-            <a-button @click="onSubmit" type="primary">保存</a-button>
+            <a-button :loading="saving" @click="onSubmit" type="primary">保存</a-button>
           </span>
         </div>
       </container>
@@ -69,12 +69,14 @@ export default {
 
   data() {
     return {
+      saving: false,
+
       parts: [
         /**
-         * {
-         *    title: '标题',
-         *    component: () => import('...'),
-         * }
+          {
+            title: '标题',
+            component: () => import('...'),
+          }
          */
       ],
     };
@@ -91,14 +93,16 @@ export default {
             ...formData,
             ...data,
           };
-        } catch {
+        } catch (e) {
           return;
         }
       }
 
+      this.saving = true;
       /**
        * 对表单提交进行处理
        */
+      this.saving = false;
     },
   },
 };
diff --git a/Web/public/doc-code/seed/form-page/only-form/part.vue b/Web/public/doc-code/seed/form-page/only-form/part.vue
index 98dcf89..f6e55de 100644
--- a/Web/public/doc-code/seed/form-page/only-form/part.vue
+++ b/Web/public/doc-code/seed/form-page/only-form/part.vue
@@ -1,8 +1,8 @@
 <template>
   <!-- 
     整页表单的分片表单
-    v 1.0
-    2021-05-12
+    v 1.2
+    2021-06-03
     Lufthafen
   -->
   <a-form-model
@@ -26,7 +26,7 @@ const defaultForm = {
 };
 
 export default {
-  props: ['param'],
+  props: ['param', 'frame'],
 
   data() {
     return {
@@ -34,7 +34,9 @@ export default {
       wrapperCol: { flex: '1' },
 
       /** 表单数据 */
-      form: {},
+      form: {
+        ...defaultForm,
+      },
       /** 验证格式 */
       rules: {
         /* ... */
@@ -48,8 +50,7 @@ export default {
     };
   },
 
-  async created() {
-    await this.onInit();
+  created() {
     this.onFillData();
   },
 
@@ -58,16 +59,19 @@ export default {
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData() {
-      /** 将默认数据覆盖到form */
-      const record = this.param && this.param.record;
+    async onFillData() {
+      this.loading = true;
+      {
+        const record = this.param && this.param.record;
+        const form = this.$_.cloneDeep(defaultForm);
 
-      this.form = this.$_.cloneDeep({
-        ...defaultForm,
-        ...record,
-        /** 在此处添加其他默认数据转换 */
-        /* ... */
-      });
+        if (record) {
+          this.$_.giveDeep(form, record);
+        }
+
+        this.form = form;
+      }
+      this.loading = false;
     },
 
     /**
@@ -112,17 +116,6 @@ export default {
       }, 300);
     },
 
-    /**
-     * 必要方法
-     * 加载当前表单中所需要的异步数据
-     */
-    async onInit() {
-      this.loading = true;
-      /** 可以在这里await获取一些异步数据 */
-      /* ... */
-      this.loading = false;
-    },
-
     /** 当前组件的其他方法 */
     /* ... */
   },
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
index 36a80a2..e789c96 100644
--- a/Web/public/doc-code/seed/form-page/tab-form/tab.vue
+++ b/Web/public/doc-code/seed/form-page/tab-form/tab.vue
@@ -1,56 +1,69 @@
 <template>
   <!-- 
     整页表单的页签外框架
-    v 1.1
-    2021-05-17
+    v 1.2
+    2021-06-03
     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>
-            <!-- 可以在工具栏中增加其他控件(只能在一行内) -->
-            <!-- ... -->
-          </span>
-          <span>
-            <a-button @click="closeContentWindow()">取消</a-button>
-            <a-button @click="onSubmit" type="primary">保存</a-button>
-          </span>
-        </div>
-      </container>
-    </div>
+    <a-spin :spinning="loading" class="w-100-p h-100-p" tip="表单加载中..." v-if="loading">
+      <a-icon slot="indicator" spin type="loading" />
+      <div title="用于撑高spin"></div>
+    </a-spin>
 
-    <!-- 表单主体 -->
-    <!-- 
+    <div class="yo-form-page-layout" v-else>
+      <!-- 底部工具栏(需放在前面) -->
+      <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 :loading="saving" @click="onSubmit" type="primary">保存</a-button>
+            </span>
+          </div>
+        </container>
+      </div>
+
+      <!-- 头部,默认不使用 -->
+      <!-- <div :style="{ paddingBottom: 0 }" class="yo-form-page--header">
+        <container>
+        </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"></a-tab-pane>
-        </template>
-      </a-tabs>
-      <div class="yo-tab-external-mount-content">
-        <template v-for="(tab, index) in tabs">
-          <div
-            :class="tab.active ? 'yo-tab-external-tabpane-active' : 'yo-tab-external-tabpane-inactive'"
-            :key="index"
-            class="yo-tab-external-tabpane"
-          >
-            <component
-              :frame="self"
-              :id="id"
-              :is="tab.component"
-              :param="param"
-              ref="forms"
-              v-if="tab.component"
-            />
-          </div>
-        </template>
+      -->
+      <div class="yo-tab-external-mount">
+        <a-tabs @change="onTabChange" type="card">
+          <template v-for="(tab, index) in tabs">
+            <a-tab-pane :force-render="true" :key="index" :tab="tab.title"></a-tab-pane>
+          </template>
+        </a-tabs>
+        <div class="yo-tab-external-mount-content">
+          <template v-for="(tab, index) in tabs">
+            <div
+              :class="tab.active ? 'yo-tab-external-tabpane-active' : 'yo-tab-external-tabpane-inactive'"
+              :key="index"
+              class="yo-tab-external-tabpane"
+            >
+              <component
+                :frame="self"
+                :id="id"
+                :is="tab.component"
+                :param="param"
+                ref="forms"
+                v-if="tab.component"
+              />
+            </div>
+          </template>
+        </div>
       </div>
     </div>
   </div>
@@ -61,18 +74,31 @@ export default {
 
   data() {
     return {
+      saving: false,
+      loading: true,
+
       tabs: [
         /**
-         * {
-         *    title: '标题',
-         *    component: () => import('...'),
-         *    active: false,
-         * }
+          {
+            title: '标题',
+            component: () => import('...'),
+            active: false,
+          }
          */
       ],
     };
   },
 
+  computed: {
+    self() {
+      return this;
+    },
+  },
+
+  created() {
+    this.loading = false;
+  },
+
   methods: {
     async onSubmit() {
       let formData = {},
@@ -85,7 +111,7 @@ export default {
             ...formData,
             ...data,
           };
-        } catch {
+        } catch (e) {
           flag = false;
         }
       }
@@ -94,9 +120,11 @@ export default {
         return;
       }
 
+      this.saving = true;
       /**
        * 对表单提交进行处理
        */
+      this.saving = false;
     },
 
     onTabChange(key) {
@@ -104,6 +132,16 @@ export default {
         p.active = i === key;
       });
     },
+
+    /**
+     * 控制标签页的显隐性
+     */
+    onTogglePane(show, name) {
+      const pane = this.tabs.find((p) => p.name === name);
+      if (pane) {
+        pane.show = show;
+      }
+    },
   },
 };
 </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
index db7a336..a792867 100644
--- a/Web/public/doc-code/seed/form-page/tab-form/tabPane.vue
+++ b/Web/public/doc-code/seed/form-page/tab-form/tabPane.vue
@@ -1,8 +1,8 @@
 <template>
   <!-- 
     整页表单的页签内框架,整合分片表单
-    v 1.0
-    2021-05-12
+    v 1.2
+    2021-06-03
     Lufthafen
   -->
   <container>
@@ -15,6 +15,7 @@
             <section :id="`form-${index}-${id}`" :key="index">
               <h5 v-if="part.title">{{part.title}}</h5>
               <component
+                :frame="frame"
                 :is="part.component"
                 :key="index"
                 :param="param"
@@ -47,16 +48,16 @@
 </template>
 <script>
 export default {
-  props: ['id', 'param'],
+  props: ['id', 'param', 'frame'],
 
   data() {
     return {
       parts: [
         /**
-         * {
-         *    title: '标题',
-         *    component: () => import('...'),
-         * }
+          {
+            title: '标题',
+            component: () => import('...'),
+          }
          */
       ],
     };
@@ -77,8 +78,8 @@ export default {
               ...formData,
               ...data,
             };
-          } catch {
-            reject();
+          } catch (e) {
+            reject(e);
             return;
           }
         }