From 674ef94567464ab112593fa7e1c6fbda466976c2 Mon Sep 17 00:00:00 2001
From: Ky_Gyt <1971574843@qq.com>
Date: Fri, 7 May 2021 10:05:56 +0800
Subject: [PATCH] =?UTF-8?q?Update=E6=9C=BA=E6=9E=84=E5=92=8C=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F=E9=85=8D=E7=BD=AE=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Web/src/pages/system/config/addForm.vue  |  78 ------
 Web/src/pages/system/config/editForm.vue |  74 ------
 Web/src/pages/system/config/form.vue     | 115 +++++++--
 Web/src/pages/system/config/index.vue    | 187 ++++++++++----
 Web/src/pages/system/org/addForm.vue     |  83 ------
 Web/src/pages/system/org/editForm.vue    |  75 ------
 Web/src/pages/system/org/form.vue        |  86 +++++--
 Web/src/pages/system/org/index.vue       | 309 +++++++++++++++--------
 8 files changed, 492 insertions(+), 515 deletions(-)
 delete mode 100644 Web/src/pages/system/config/addForm.vue
 delete mode 100644 Web/src/pages/system/config/editForm.vue
 delete mode 100644 Web/src/pages/system/org/addForm.vue
 delete mode 100644 Web/src/pages/system/org/editForm.vue

diff --git a/Web/src/pages/system/config/addForm.vue b/Web/src/pages/system/config/addForm.vue
deleted file mode 100644
index 1b45ba9..0000000
--- a/Web/src/pages/system/config/addForm.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <a-modal
-    :confirmLoading="confirmLoading"
-    :visible="visible"
-    @cancel="onCancel"
-    @ok="onOk"
-    class="yo-modal-form"
-    title="新增参数"
-  >
-    <FormBody ref="form-body" />
-  </a-modal>
-</template>
-<script>
-import FormBody from './form';
-
-export default {
-  components: {
-    FormBody,
-  },
-  data() {
-    return {
-      visible: false,
-      confirmLoading: false,
-    };
-  },
-   computed: {
-    formBody() {
-      return this.$refs['form-body'];
-    },
-   },
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口
-     */
-    onOpen() {
-      this.visible = true;
-        this.$nextTick(async () => {
-        await this.formBody.onInit();
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.$refs['form-body'].onValidate((valid) => {
-        if (valid) {
-          this.confirmLoading = true;
-          this.$api
-            .sysConfigAdd(this.$refs['form-body'].form)
-            .then(({ success }) => {
-              this.confirmLoading = false;
-              if (success) {
-                this.$message.success('添加成功');
-                this.onCancel();
-                this.$emit('ok');
-              }
-            })
-            .finally(() => {
-              this.confirmLoading = false;
-            });
-        }
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.$refs['form-body'].onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/Web/src/pages/system/config/editForm.vue b/Web/src/pages/system/config/editForm.vue
deleted file mode 100644
index 00400a5..0000000
--- a/Web/src/pages/system/config/editForm.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-  <a-modal
-    :confirmLoading="confirmLoading"
-    :visible="visible"
-    @cancel="onCancel"
-    @ok="onOk"
-    title="编辑用户"
-  >
-    <FormBody ref="form-body" />
-  </a-modal>
-</template>
-<script>
-import FormBody from './form';
-
-export default {
-  components: {
-    FormBody,
-  },
-  data() {
-    return {
-      visible: false,
-
-      confirmLoading: false,
-    };
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口,并填充外部传入的数据
-     */
-    onOpen(record) {
-      this.visible = true;
-      this.$nextTick(async () => {
-        this.$refs['form-body'].onFillData(record);
-
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.$refs['form-body'].onValidate((valid) => {
-        if (valid) {
-          this.confirmLoading = true;
-          this.$api
-            .sysConfigEdit(this.$refs['form-body'].form)
-            .then(({ success }) => {
-              if (success) {
-                this.$message.success('编辑成功');
-                this.onCancel();
-                this.$emit('ok');
-              }
-            })
-            .finally(() => {
-              this.confirmLoading = false;
-            });
-        }
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.$refs['form-body'].onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/Web/src/pages/system/config/form.vue b/Web/src/pages/system/config/form.vue
index e12a41f..93ec7d1 100644
--- a/Web/src/pages/system/config/form.vue
+++ b/Web/src/pages/system/config/form.vue
@@ -1,7 +1,17 @@
 <template>
+  <!-- 
+    普通编辑窗体
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
   <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
-    <div class="yo-form-group">
-      <a-form-model-item label="角色名" prop="name">
+    <a-spin :spinning="loading">
+      <a-icon slot="indicator" spin type="loading" />
+      <div class="yo-form-group">
+        <!-- 表单控件 -->
+        <!-- ... -->
+              <a-form-model-item label="角色名" prop="name">
         <a-input placeholder="请输入角色名" v-model="form.name" />
       </a-form-model-item>
       <a-form-model-item label="唯一编码" prop="code" :disabled="editDisabled">
@@ -33,35 +43,56 @@
       <a-form-model-item label="备注" prop="remark">
         <a-input placeholder="请输入备注" v-model="form.remark" />
       </a-form-model-item>
-    </div>
+      </div>
+    </a-spin>
   </a-form-model>
 </template>
 <script>
+/* 表单内容默认值 */
+const defaultForm = {
+  // editDisabled:false,
+  /* ... */
+};
+
 export default {
   data() {
     return {
-        editDisabled:false,
-    groupCode:[],
-      form: {
-        active: "N",
-      },
+      /** 表单数据 */
+      form: {},
+      /** 验证格式 */
       rules: {
         name: [{ required: true, message: "请输入应用名称" }],
         code: [{ required: true, message: "请输入唯一编码" }],
         sysFlag: [{ required: true, message: "请选择参数类型" }],
         groupCode: [{ required: true, message: "请选择所属分类" }],
         value: [{ required: true, message: "请输入参数值" }],
+        /* ... */
       },
+
+      /** 加载异步数据状态 */
+      loading: false,
+      editDisabled:false,
+      groupCode:[],
+      /** 其他成员属性 */
+      /* ... */
     };
   },
+
   methods: {
     /**
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData(record) {
-      this.form = this.$_.cloneDeep(record);
-      if(record.sysFlag == 'Y')
+    onFillData(params) {
+      /** 将默认数据覆盖到form */
+      this.form = this.$_.cloneDeep({
+        ...defaultForm,
+        ...params.record,
+        /** 在此处添加其他默认数据转换 */
+        /* ... */
+      });
+     
+        if(this.form.sysFlag == 'Y')
       {
           this.editDisabled = true
       }else
@@ -70,12 +101,26 @@ export default {
       }
     },
 
-    async onInit() {
-      this.loading = true;
-      this.groupCode = await this.onLoadgroupCodeData();
-      this.loading = false;
-    },
+    /**
+     * 必要方法
+     * 验证表单并获取表单数据
+     */
+    onGetData() {
+      return new Promise((reslove, reject) => {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            const record = this.$_.cloneDeep(this.form);
 
+            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
+            /* ... */
+
+            reslove(record);
+          } else {
+            reject();
+          }
+        });
+      });
+    },
 
     /**
      * 必要的方法
@@ -84,17 +129,6 @@ export default {
     onValidate(callback) {
       this.$refs.form.validate(callback);
     },
-    
-    /**
-     * 
-     * 获取所属分类字典表的内容
-     */
-    
-    onLoadgroupCodeData() {
-      return this.$api.sysDictTypeDropDown({ code: 'consts_type' }).then(({ data }) => {
-        return data;
-      });
-    },
 
     /**
      * 必要的方法
@@ -102,11 +136,36 @@ export default {
      */
     onResetFields() {
       setTimeout(() => {
-        this.form = {};
         this.$refs.form.resetFields();
+
+        /** 在这里可以初始化当前组件中其他属性 */
+        /* ... */
       }, 300);
     },
 
+    /**
+     * 必要方法
+     * 加载当前表单中所需要的异步数据
+     */
+    async onInit(params) {
+      this.loading = true;
+      /** 可以在这里await获取一些异步数据 */
+      this.groupCode = await this.onLoadgroupCodeData();
+      /* ... */
+      this.loading = false;
+    },
+
+    /** 当前组件的其他方法 */
+    /* ... */
+    /**
+     * 
+     * 获取所属分类字典表的内容
+     */ 
+    onLoadgroupCodeData() {
+      return this.$api.sysDictTypeDropDown({ code: 'consts_type' }).then(({ data }) => {
+        return data;
+      });
+    },
   },
 };
 </script>
\ No newline at end of file
diff --git a/Web/src/pages/system/config/index.vue b/Web/src/pages/system/config/index.vue
index 7169970..c779929 100644
--- a/Web/src/pages/system/config/index.vue
+++ b/Web/src/pages/system/config/index.vue
@@ -1,29 +1,36 @@
 <template>
+  <!-- 
+    普通查询表格
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
   <container>
     <br />
     <a-card :bordered="false">
-      <Auth auth="sysConfig:page">
-        <div class="yo-query-bar">
-          <a-form-model :model="query" layout="inline">
-            <a-form-model-item label="参数名称">
-              <a-input placeholder="请输入参数名称" v-model="query.name" />
-            </a-form-model-item>
-            <a-form-model-item label="唯一编码">
-              <a-input placeholder="请输入唯一编码" v-model="query.code" />
-            </a-form-model-item>
-            <a-form-model-item>
-              <a-button-group>
-                <a-button @click="onQuery" type="primary">查询</a-button>
-                <a-button @click="() => {(query = {}), onQuery();}">重置</a-button>
-              </a-button-group>
-            </a-form-model-item>
-          </a-form-model>
-        </div>
-      </Auth>
-      <yo-table :columns="columns" :load-data="loadData" ref="table">
-        <Auth auth="sysConfig:add" slot="operator">
-          <a-button @click="onOpen('add-form')" icon="plus">新增职位</a-button>
+      <yo-table
+        :columns="columns"
+        :load-data="loadData"
+        @query="onQuery"
+        @resetQuery="onResetQuery"
+        ref="table"
+      >
+        <Auth auth="sysConfig:page" slot="query">
+          <!-- 此处添加查询表单控件 -->
+          <!-- ... -->
+          <a-form-model-item label="参数名称">
+            <a-input placeholder="请输入参数名称" v-model="query.name" />
+          </a-form-model-item>
+          <a-form-model-item label="唯一编码">
+            <a-input placeholder="请输入唯一编码" v-model="query.code" />
+          </a-form-model-item>
         </Auth>
+        <Auth auth="sysConfig: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="sysConfig:edit">
@@ -34,26 +41,50 @@
                 <a>删除</a>
               </a-popconfirm>
             </Auth>
+            <!-- 可在此处添加其他操作控件 -->
+            <!-- ... -->
           </yo-table-actions>
         </span>
       </yo-table>
     </a-card>
-    <br />
-    <edit-form @ok="onReloadData" ref="edit-form" />
-    <add-form @ok="onReloadData" ref="add-form" />
+
+    <!-- 新增表单 -->
+    <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 AddForm from './addForm';
-import editForm from './editForm';
+import FormBody from './form';
+
+/* 在此管理整个页面需要的接口名称 */
+const api = {
+  page: 'sysConfigPage',
+  add: 'sysConfigAdd',
+  edit: 'sysConfigEdit',
+  delete: 'sysConfigDelete',
+  /* ... */
+};
+
 export default {
   components: {
-    AddForm,
-    editForm,
+    FormBody,
   },
   data() {
     return {
+      api,
+
+      name: '配置',
+
+      /* 查询条件 */
       query: {},
+
+      /* 表格字段 */
       columns: [
         {
           title: '参数名称',
@@ -81,18 +112,26 @@ export default {
           sorter: true,
         },
       ],
+
+      /* 字典编码储存格式 */
+      // codes: {
+      //   code1: [],
+      //   code2: [],
+      // },
     };
   },
   created() {
-    const flag = this.$auth({ sysConfig: [['edit'], ['delete']] });
+    /** 按需加载字典编码 */
+    //this.onLoadCodes();
+
+    /** 根据权限添加操作列 */
+    const flag = this.$auth(/* ... */);
     if (flag) {
       this.columns.push({
         title: '操作',
-        width: '200px',
+        width: '150px',
         dataIndex: 'action',
-        scopedSlots: {
-          customRender: 'action',
-        },
+        scopedSlots: { customRender: 'action' },
       });
     }
   },
@@ -102,14 +141,12 @@ export default {
      * 传给yo-table以示意数据接口及其参数和返回的数据结构
      */
     loadData(params) {
-      return this.$api
-        .sysConfigPage({
-          ...params,
-          ...this.query,
-        })
-        .then((res) => {
-          return res.data;
-        });
+      return this.$api[api.page]({
+        ...params,
+        ...this.query,
+      }).then((res) => {
+        return res.data;
+      });
     },
 
     /**
@@ -120,6 +157,16 @@ export default {
       this.$refs.table.onReloadData(true);
     },
 
+    /**
+     * 有查询功能时的必要方法
+     * 重置查询条件
+     */
+    onResetQuery() {
+      /** 在这里重置查询条件时,可对特殊的字段做保留处理 */
+      this.query = {};
+      this.onQuery();
+    },
+
     /**
      * 必要方法
      * 重新列表数据
@@ -129,26 +176,72 @@ export default {
     },
 
     /**
-     * 有编辑新增功能的必要方法
+     * 必要方法
+     * 加载字典数据
+     * 如果不需要获取相应的字典数据,此方法内容可空
+     */
+    //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);
+      this.$refs[formName].onOpen({
+        record,
+        /* 按需添加其他参数 */
+        /* ... */
+      });
     },
 
+    /**
+     * 必要方法
+     * 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
+     */
     onResult(success, successMessage) {
       if (success) {
         this.$message.success(successMessage);
         this.onReloadData();
       }
-      this.$refs.table.onLoaded();
     },
 
+    /**
+     * 必要方法
+     * 删除时调用
+     */
     onDelete(record) {
       this.$refs.table.onLoading();
-      this.$api.sysConfigDelete(record).then(({ success, message }) => {
-        this.onResult(success, '删除成功');
-      });
+      this.$api[api.delete](record)
+        .then(({ success }) => {
+          this.onResult(success, '删除成功');
+        })
+        .finally(() => {
+          this.$refs.table.onLoaded();
+        });
     },
   },
 };
diff --git a/Web/src/pages/system/org/addForm.vue b/Web/src/pages/system/org/addForm.vue
deleted file mode 100644
index 445f09e..0000000
--- a/Web/src/pages/system/org/addForm.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-  <a-modal
-    :confirmLoading="confirmLoading"
-    :visible="visible"
-    @cancel="onCancel"
-    @ok="onOk"
-    class="yo-modal-form"
-    title="新增机构"
-  >
-    <FormBody ref="form-body" />
-  </a-modal>
-</template>
-<script>
-import FormBody from './form';
-
-export default {
-  components: {
-    FormBody,
-  },
-  data() {
-    return {
-      visible: false,
-
-      confirmLoading: false,
-    };
-  },
-
-  computed: {
-    formBody() {
-      return this.$refs['form-body'];
-    },
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口
-     */
-    onOpen(record, orgId) {
-      this.visible = true;
-      this.$nextTick(async () => {
-        await this.formBody.onInit();
-
-        // 获取外部选中的部门id
-        this.formBody.onFillData(record, orgId);
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.$refs['form-body'].onValidate((valid) => {
-        if (valid) {
-          this.confirmLoading = true;
-          this.$api
-            .sysOrgAdd(this.$refs['form-body'].onGetData())
-            .then(({ success }) => {
-              if (success) {
-                this.$message.success('新增成功');
-                this.onCancel();
-                this.$emit('ok');
-              }
-            })
-            .finally(() => {
-              this.confirmLoading = false;
-            });
-        }
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.$refs['form-body'].onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/Web/src/pages/system/org/editForm.vue b/Web/src/pages/system/org/editForm.vue
deleted file mode 100644
index b8fcf2a..0000000
--- a/Web/src/pages/system/org/editForm.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-  <a-modal
-    :confirmLoading="confirmLoading"
-    :visible="visible"
-    @cancel="onCancel"
-    @ok="onOk"
-    class="yo-modal-form"
-    title="编辑机构"
-  >
-    <FormBody ref="form-body" />
-  </a-modal>
-</template>
-<script>
-import FormBody from './form';
-
-export default {
-  components: {
-    FormBody,
-  },
-  data() {
-    return {
-      visible: false,
-
-      confirmLoading: false,
-    };
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口,并填充外部传入的数据
-     */
-    onOpen(record) {
-      this.visible = true;
-      this.$nextTick(async () => {
-        await this.$refs['form-body'].onInit();
-        this.$refs['form-body'].onFillData(record);
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.$refs['form-body'].onValidate((valid) => {
-        if (valid) {
-          this.confirmLoading = true;
-          this.$api
-            .sysOrgEdit(this.$refs['form-body'].onGetData())
-            .then(({ success }) => {
-              if (success) {
-                this.$message.success('编辑成功');
-                this.onCancel();
-                this.$emit('ok');
-              }
-            })
-            .finally(() => {
-              this.confirmLoading = false;
-            });
-        }
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.$refs['form-body'].onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/Web/src/pages/system/org/form.vue b/Web/src/pages/system/org/form.vue
index f415c22..ae1f515 100644
--- a/Web/src/pages/system/org/form.vue
+++ b/Web/src/pages/system/org/form.vue
@@ -1,9 +1,17 @@
 <template>
+  <!-- 
+    普通编辑窗体
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
   <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">
-        <a-form-model-item label="机构名称" prop="name">
+        <!-- 表单控件 -->
+        <!-- ... -->
+                <a-form-model-item label="机构名称" prop="name">
           <a-input placeholder="请输入机构名称" v-model="form.name" />
         </a-form-model-item>
         <a-form-model-item label="唯一编码" prop="code">
@@ -46,45 +54,55 @@
 <script>
 import { EMPTY_ID } from '@/util/global';
 
+/* 表单内容默认值 */
+const defaultForm = {
+  /* ... */
+};
+
 export default {
   data() {
     return {
+      /** 表单数据 */
       form: {
         pid: undefined,
         sort: 100,
       },
+      /** 验证格式 */
       rules: {
         name: [{ required: true, message: '请输入机构名称' }],
         code: [{ required: true, message: '请输入唯一编码' }],
         pid: [{ required: true, message: '请选择上级机构' }],
         areaCode: [{ required: true, message: '请选择所属区域' }],
+        /* ... */
       },
 
+      /** 加载异步数据状态 */
       loading: false,
-
       orgData: [],
       areaData: [],
+      /** 其他成员属性 */
+      /* ... */
     };
   },
+
   methods: {
     /**
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData(record, orgId) {
-      if (orgId) {
+    onFillData(params,orgId) {
+      if(orgId){
         this.form.pid = orgId;
-      } else if (record) {
+      }else if(params){
         // 从字符串areaCode查找到整个层级
         const areaCode = [];
         const findCode = (data, level) => {
           level = level || 0;
           for (let i = 0; i < data.length; i++) {
             const item = data[i];
-
             areaCode[level] = item.code;
 
-            if (item.code === record.areaCode) {
+            if (item.code === params.areaCode) {
               areaCode.length = level + 1;
               return true;
             }
@@ -98,21 +116,41 @@ export default {
           }
         };
 
-        if (record.areaCode) {
+        if (params.areaCode) {
           findCode(this.areaData);
         }
-
-        this.form = this.$_.cloneDeep({
-          ...record,
-          areaCode,
-        });
+   
+      /** 将默认数据覆盖到form */
+      this.form = this.$_.cloneDeep({
+        ...defaultForm,
+        ...params,
+        areaCode,
+        /** 在此处添加其他默认数据转换 */
+        /* ... */
+      });
       }
     },
 
+    /**
+     * 必要方法
+     * 验证表单并获取表单数据
+     */
     onGetData() {
-      const submitForm = this.$_.cloneDeep(this.form);
-      submitForm.areaCode = submitForm.areaCode[submitForm.areaCode.length - 1];
-      return submitForm;
+      return new Promise((reslove, reject) => {
+        
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            const record = this.$_.cloneDeep(this.form);
+            record.areaCode = record.areaCode[record.areaCode.length - 1];
+            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
+            /* ... */
+          
+            reslove(record);
+          } else {
+            reject();
+          }
+        });
+      });
     },
 
     /**
@@ -130,16 +168,27 @@ export default {
     onResetFields() {
       setTimeout(() => {
         this.$refs.form.resetFields();
+
+        /** 在这里可以初始化当前组件中其他属性 */
+        /* ... */
       }, 300);
     },
 
-    async onInit() {
+    /**
+     * 必要方法
+     * 加载当前表单中所需要的异步数据
+     */
+    async onInit(params) {
       this.loading = true;
+      /** 可以在这里await获取一些异步数据 */
       await this.onLoadOrgData();
-      await this.onLoadAreaData();
+      await this.onLoadAreaData();     
+      /* ... */
       this.loading = false;
     },
 
+    /** 当前组件的其他方法 */
+    /* ... */
     onLoadOrgData() {
       return this.$api.getOrgTree().then(({ data }) => {
         this.orgData = [
@@ -154,7 +203,6 @@ export default {
         ];
       });
     },
-
     onLoadAreaData() {
       return this.$api.getAreaTree().then(({ data }) => {
         // 为了防止出现空的层级选择,删除所有空children节点
diff --git a/Web/src/pages/system/org/index.vue b/Web/src/pages/system/org/index.vue
index 34a72cd..190d6bc 100644
--- a/Web/src/pages/system/org/index.vue
+++ b/Web/src/pages/system/org/index.vue
@@ -1,67 +1,96 @@
 <template>
-  <yo-tree-layout
+  <!-- 
+    普通查询表格
+    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">
-        <Auth auth="sysOrg:page">
-          <div class="yo-query-bar">
-            <a-form-model :model="query" layout="inline">
-              <a-form-model-item label="机构名称">
-                <a-input allow-clear placeholder="请输入机构名称" v-model="query.name" />
-              </a-form-model-item>
-              <a-form-model-item>
-                <a-button-group>
-                  <a-button @click="onQuery" type="primary">查询</a-button>
-                  <a-button @click="onReset">重置</a-button>
-                </a-button-group>
-              </a-form-model-item>
-            </a-form-model>
-          </div>
-
-          <yo-table :columns="columns" :load-data="loadData" ref="table">
-            <Auth auth="sysOrg: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="sysOrg:edit">
-                  <a @click="onOpen('edit-form', record)">编辑</a>
-                </Auth>
-                <Auth auth="sysOrg:delete">
-                  <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
-                    <a>删除</a>
-                  </a-popconfirm>
-                </Auth>
-              </yo-table-actions>
-            </span>
-          </yo-table>
+  <container>
+    <br />
+    <a-card :bordered="false">
+      <yo-table
+        :columns="columns"
+        :load-data="loadData"
+        @query="onQuery"
+        @resetQuery="onResetQuery"
+        ref="table"
+      >
+        <Auth auth="sysOrg:page" slot="query">
+          <!-- 此处添加查询表单控件 -->
+          <!-- ... -->
+          <a-form-model-item label="机构名称">
+            <a-input allow-clear placeholder="请输入机构名称" v-model="query.name" />
+          </a-form-model-item>
         </Auth>
-      </a-card>
-    </container>
-    <add-form @ok="onReloadData" ref="add-form" />
-    <edit-form @ok="onReloadData" ref="edit-form" />
-  </yo-tree-layout>
+        <Auth auth="sysOrg: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="sysOrg:edit">
+              <a @click="onOpen('edit-form', record)">编辑</a>
+            </Auth>
+            <Auth auth="sysOrg: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>
+</yo-tree-layout>
 </template>
 <script>
+import FormBody from './form';
 import YoTreeLayout from '@/components/yoTreeLayout';
 
-import AddForm from './addForm';
-import EditForm from './editForm';
+/* 在此管理整个页面需要的接口名称 */
+const api = {
+  page: 'getOrgPage',
+  add: 'sysOrgAdd',
+  edit: 'sysOrgEdit',
+  delete: 'sysOrgDelete',
+  /* ... */
+};
 
 export default {
   components: {
+    FormBody,
     YoTreeLayout,
-    AddForm,
-    EditForm,
   },
-
   data() {
     return {
+      api,
+
+      name: '机构',
+
+      /* 查询条件 */
       query: {},
+
+      /* 表格字段 */
       columns: [
         {
           title: '机构名称',
@@ -87,14 +116,20 @@ export default {
           sorter: true,
         },
       ],
+
+      /* 字典编码储存格式 */
+      // codes: {
+      //   code1: [],
+      //   code2: [],
+      // },
     };
   },
-
   created() {
-    const flag = this.$auth({
-      sysOrg: [['edit'], ['delete']],
-    });
+    /** 按需加载字典编码 */
+    //this.onLoadCodes();
 
+    /** 根据权限添加操作列 */
+    const flag = this.$auth(/* ... */);
     if (flag) {
       this.columns.push({
         title: '操作',
@@ -104,8 +139,121 @@ export default {
       });
     }
   },
-
   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() {
+      /** 在这里重置查询条件时,可对特殊的字段做保留处理 */
+        Object.keys(this.query).forEach((p) => {
+        if (p !== 'pid') {
+          this.query[p] = undefined;
+        }
+      });
+      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,
+        /* 按需添加其他参数 */
+        /* ... */
+
+        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();
+        });
+    },
+
     /**
      * 树形选择界面必要的方法
      * 传给yo-table-layout以示意数据接口
@@ -122,67 +270,6 @@ export default {
       };
       this.onQuery();
     },
-
-    /**
-     * 必要的方法
-     * 传给yo-table以示意数据接口及其参数和返回的数据结构
-     */
-    loadData(params) {
-      return this.$api
-        .getOrgPage({
-          ...params,
-          ...this.query,
-        })
-        .then((res) => {
-          return res.data;
-        });
-    },
-
-    /**
-     * 有查询功能时的必要方法
-     * 加载数据时初始化分页信息
-     */
-    onQuery() {
-      this.$refs.table.onReloadData(true);
-    },
-
-    onReset() {
-      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();
-    },
-
-    /**
-     * 有编辑新增功能的必要方法
-     * 从列表页调用窗口的打开方法
-     */
-    onOpen(formName, record) {
-      this.$refs[formName].onOpen(record, this.query['pid']);
-    },
-
-    onDelete(record) {
-      this.$api.sysOrgDelete(record).then(({ success }) => {
-        if (success) {
-          this.$message.success('删除成功');
-          this.onReloadData();
-          if (this.query['pid'] == record.id) {
-            delete this.query.pid;
-          }
-        }
-      });
-    },
   },
 };
 </script>
\ No newline at end of file