update 更新种子文件

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

@@ -1,8 +1,8 @@
 <template>
   <!-- 
     整页表单的外框架
-    v 1.0
+    v 1.2
-    2021-05-12
+    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: '标题',
+            title: '标题',
-         *    component: () => import('...'),
+            component: () => import('...'),
-         * }
+          }
          */
       ],
     };
@@ -91,14 +93,16 @@ export default {
             ...formData,
             ...data,
           };
-        } catch {
+        } catch (e) {
           return;
         }
       }
 
+      this.saving = true;
       /**
        * 对表单提交进行处理
        */
+      this.saving = false;
     },
   },
 };

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

@@ -1,8 +1,8 @@
 <template>
   <!-- 
     整页表单的分片表单
-    v 1.0
+    v 1.2
-    2021-05-12
+    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() {
+  created() {
-    await this.onInit();
     this.onFillData();
   },
 
@@ -58,16 +59,19 @@ export default {
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData() {
+    async onFillData() {
-      /** 将默认数据覆盖到form */
+      this.loading = true;
+      {
         const record = this.param && this.param.record;
+        const form = this.$_.cloneDeep(defaultForm);
 
-      this.form = this.$_.cloneDeep({
+        if (record) {
-        ...defaultForm,
+          this.$_.giveDeep(form, record);
-        ...record,
+        }
-        /** 在此处添加其他默认数据转换 */
+
-        /* ... */
+        this.form = form;
-      });
+      }
+      this.loading = false;
     },
 
     /**
@@ -112,17 +116,6 @@ export default {
       }, 300);
     },
 
-    /**
-     * 必要方法
-     * 加载当前表单中所需要的异步数据
-     */
-    async onInit() {
-      this.loading = true;
-      /** 可以在这里await获取一些异步数据 */
-      /* ... */
-      this.loading = false;
-    },
-
     /** 当前组件的其他方法 */
     /* ... */
   },

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

@@ -1,11 +1,17 @@
 <template>
   <!-- 
     整页表单的页签外框架
-    v 1.1
+    v 1.2
-    2021-05-17
+    2021-06-03
     Lufthafen
   -->
   <div class="yo-form-page">
+    <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>
@@ -16,12 +22,18 @@
             </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>
       </div>
 
+      <!-- 头部,默认不使用 -->
+      <!-- <div :style="{ paddingBottom: 0 }" class="yo-form-page--header">
+        <container>
+        </container>
+      </div>-->
+
       <!-- 表单主体 -->
       <!-- 
       挂载了一个content到tab后面
@@ -54,6 +66,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 <script>
 export default {
@@ -61,18 +74,31 @@ export default {
 
   data() {
     return {
+      saving: false,
+      loading: true,
+
       tabs: [
         /**
-         * {
+          {
-         *    title: '标题',
+            title: '标题',
-         *    component: () => import('...'),
+            component: () => import('...'),
-         *    active: false,
+            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>

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

@@ -1,8 +1,8 @@
 <template>
   <!-- 
     整页表单的页签内框架,整合分片表单
-    v 1.0
+    v 1.2
-    2021-05-12
+    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: '标题',
+            title: '标题',
-         *    component: () => import('...'),
+            component: () => import('...'),
-         * }
+          }
          */
       ],
     };
@@ -77,8 +78,8 @@ export default {
               ...formData,
               ...data,
             };
-          } catch {
+          } catch (e) {
-            reject();
+            reject(e);
             return;
           }
         }