From 60088ea4b7d56fd9127cf12dfdb193467e587c2e 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, 6 May 2021 10:19:18 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E5=BE=AE=E8=B0=83=E7=A7=8D=E5=AD=90?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6,=E5=BA=94=E7=94=A8=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E6=96=B0=E7=89=88=E7=A7=8D=E5=AD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Web/public/doc-code/seed/query.vue        |   6 +-
 Web/public/doc-code/seed/treeLayout.vue   |   6 +-
 Web/src/pages/system/_seed/index.vue      |   6 +-
 Web/src/pages/system/_seed/treeLayout.vue |   6 +-
 Web/src/pages/system/app/form.vue         | 132 ++++++++++++----
 Web/src/pages/system/app/index.vue        | 183 ++++++++++++++--------
 Web/src/pages/system/doc/index.vue        |   7 +-
 7 files changed, 236 insertions(+), 110 deletions(-)

diff --git a/Web/public/doc-code/seed/query.vue b/Web/public/doc-code/seed/query.vue
index 842a52d..f30ce6d 100644
--- a/Web/public/doc-code/seed/query.vue
+++ b/Web/public/doc-code/seed/query.vue
@@ -43,12 +43,12 @@
     </a-card>
 
     <!-- 新增表单 -->
-    <yo-modal-form :action="$api[api.add]" :title="`新增${name}`" @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">
+    <yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
       <form-body />
     </yo-modal-form>
   </container>
@@ -71,7 +71,7 @@ export default {
   },
   data() {
     return {
-      ...api,
+      api,
 
       name: '...',
 
diff --git a/Web/public/doc-code/seed/treeLayout.vue b/Web/public/doc-code/seed/treeLayout.vue
index 5af15c2..2b360b9 100644
--- a/Web/public/doc-code/seed/treeLayout.vue
+++ b/Web/public/doc-code/seed/treeLayout.vue
@@ -49,12 +49,12 @@
     </container>
 
     <!-- 新增表单 -->
-    <yo-modal-form :action="$api[api.add]" :title="`新增${name}`" @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">
+    <yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
       <form-body />
     </yo-modal-form>
   </yo-tree-layout>
@@ -82,7 +82,7 @@ export default {
 
   data() {
     return {
-      ...api,
+      api,
 
       name: '...',
 
diff --git a/Web/src/pages/system/_seed/index.vue b/Web/src/pages/system/_seed/index.vue
index 157a2c1..f65a377 100644
--- a/Web/src/pages/system/_seed/index.vue
+++ b/Web/src/pages/system/_seed/index.vue
@@ -43,12 +43,12 @@
     </a-card>
 
     <!-- 新增表单 -->
-    <yo-modal-form :action="$api[api.add]" :title="`新增${name}`" @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">
+    <yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
       <form-body />
     </yo-modal-form>
   </container>
@@ -71,7 +71,7 @@ export default {
   },
   data() {
     return {
-      ...api,
+      api,
 
       name: '...',
 
diff --git a/Web/src/pages/system/_seed/treeLayout.vue b/Web/src/pages/system/_seed/treeLayout.vue
index 5af15c2..2b360b9 100644
--- a/Web/src/pages/system/_seed/treeLayout.vue
+++ b/Web/src/pages/system/_seed/treeLayout.vue
@@ -49,12 +49,12 @@
     </container>
 
     <!-- 新增表单 -->
-    <yo-modal-form :action="$api[api.add]" :title="`新增${name}`" @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">
+    <yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
       <form-body />
     </yo-modal-form>
   </yo-tree-layout>
@@ -82,7 +82,7 @@ export default {
 
   data() {
     return {
-      ...api,
+      api,
 
       name: '...',
 
diff --git a/Web/src/pages/system/app/form.vue b/Web/src/pages/system/app/form.vue
index 52d2220..e98639e 100644
--- a/Web/src/pages/system/app/form.vue
+++ b/Web/src/pages/system/app/form.vue
@@ -1,31 +1,42 @@
 <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-input placeholder="请输入应用名称" v-model="form.name" />
-      </a-form-model-item>
-      <a-form-model-item label="唯一编码" prop="code">
-        <a-input placeholder="请输入唯一编码" v-model="form.code" />
-      </a-form-model-item>
-      <a-form-model-item label="图标" prop="icon">
-        <a-input :disabled="true" placeholder="请选择图标" v-model="form.icon">
-          <a-icon :type="form.icon" slot="addonBefore" v-if="form.icon" />
-          <a-icon @click="onOpenSelectIcon" slot="addonAfter" type="setting" />
-        </a-input>
-      </a-form-model-item>
-      <a-form-model-item prop="color">
-        <chrome-picker v-model="form.color" />
-      </a-form-model-item>
-      <a-form-model-item label="排序" prop="sort">
-        <a-input-number
-          :max="1000"
-          :min="0"
-          class="w-100-p"
-          placeholder="请输入排序"
-          v-model="form.sort"
-        />
-      </a-form-model-item>
-    </div>
+    <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">
+          <a-input placeholder="请输入唯一编码" v-model="form.code" />
+        </a-form-model-item>
+        <a-form-model-item label="图标" prop="icon">
+          <a-input :disabled="true" placeholder="请选择图标" v-model="form.icon">
+            <a-icon :type="form.icon" slot="addonBefore" v-if="form.icon" />
+            <a-icon @click="onOpenSelectIcon" slot="addonAfter" type="setting" />
+          </a-input>
+        </a-form-model-item>
+        <a-form-model-item label="图标颜色" prop="color">
+          <chrome-picker v-model="form.color" />
+        </a-form-model-item>
+        <a-form-model-item label="排序" prop="sort">
+          <a-input-number
+            :max="1000"
+            :min="0"
+            class="w-100-p"
+            placeholder="请输入排序"
+            v-model="form.sort"
+          />
+        </a-form-model-item>
+      </div>
+    </a-spin>
 
     <yo-icon-selector ref="icon-selector" v-model="form.icon" />
   </a-form-model>
@@ -34,30 +45,75 @@
 import YoIconSelector from '@/components/yoIconSelector';
 import { Chrome } from 'vue-color';
 
+/* 表单内容默认值 */
+const defaultForm = {
+  /* ... */
+  color: '#ffffff',
+  active: false,
+};
+
 export default {
   components: {
     YoIconSelector,
     ChromePicker: Chrome,
   },
+
   data() {
     return {
+      /** 表单数据 */
       form: {
-        color: '#fff',
-        active: false,
+        ...defaultForm,
       },
+      /** 验证格式 */
       rules: {
+        /* ... */
         name: [{ required: true, message: '请输入应用名称' }],
         code: [{ required: true, message: '请输入唯一编码' }],
       },
+
+      /** 加载异步数据状态 */
+      loading: false,
+
+      /** 其他成员属性 */
+      /* ... */
     };
   },
+
   methods: {
     /**
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData(record) {
-      this.form = this.$_.cloneDeep(record);
+    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);
+
+            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
+            /* ... */
+            record.color = record.color.constructor === Object ? record.color.hex : record.color;
+
+            reslove(record);
+          } else {
+            reject();
+          }
+        });
+      });
     },
 
     /**
@@ -75,9 +131,25 @@ export default {
     onResetFields() {
       setTimeout(() => {
         this.$refs.form.resetFields();
+
+        /** 在这里可以初始化当前组件中其他属性 */
+        /* ... */
       }, 300);
     },
 
+    /**
+     * 必要方法
+     * 加载当前表单中所需要的异步数据
+     */
+    async onInit(params) {
+      this.loading = true;
+      /** 可以在这里await获取一些异步数据 */
+      /* ... */
+      this.loading = false;
+    },
+
+    /** 当前组件的其他方法 */
+    /* ... */
     onOpenSelectIcon() {
       this.$refs['icon-selector'].onOpen(this.form.icon);
     },
diff --git a/Web/src/pages/system/app/index.vue b/Web/src/pages/system/app/index.vue
index c1cf183..36aa180 100644
--- a/Web/src/pages/system/app/index.vue
+++ b/Web/src/pages/system/app/index.vue
@@ -1,30 +1,35 @@
 <template>
+  <!-- 
+    普通查询表格
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
   <container>
     <br />
     <a-card :bordered="false">
-      <Auth auth="sysApp: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">
+      <yo-table
+        :columns="columns"
+        :load-data="loadData"
+        @query="onQuery"
+        @resetQuery="onResetQuery"
+        ref="table"
+      >
+        <Auth auth="sysApp: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="sysApp:add" slot="operator">
           <a-button @click="onOpen('add-form')" icon="plus">新增应用</a-button>
         </Auth>
+        <!-- 格式化字段内容 -->
+        <!-- ... -->
         <span slot="active" slot-scope="text, record">
           {{ text ? '是' : '否' }}
           <Auth auth="sysApp:setAsDefault" v-if="!record.active">
@@ -40,7 +45,9 @@
             </yo-table-actions>
           </Auth>
         </span>
-        <span slot="status" slot-scope="text">{{ bindCodeValue(text, 'common_status') }}</span>
+        <span slot="status" slot-scope="text">{{ bindCodeValue(text, 'commonStatus') }}</span>
+
+        <!-- 添加操作控件 -->
         <span slot="action" slot-scope="text, record">
           <yo-table-actions>
             <Auth auth="sysApp:edit">
@@ -51,27 +58,50 @@
                 <a>删除</a>
               </a-popconfirm>
             </Auth>
+            <!-- 可在此处添加其他操作控件 -->
+            <!-- ... -->
           </yo-table-actions>
         </span>
       </yo-table>
     </a-card>
-    <br />
-    <add-form @ok="onReloadData" ref="add-form" />
-    <edit-form @ok="onReloadData" ref="edit-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: 'getAppPage',
+  add: 'sysAppAdd',
+  edit: 'sysAppEdit',
+  delete: 'sysAppDelete',
+  /* ... */
+};
 
 export default {
   components: {
-    AddForm,
-    EditForm,
+    FormBody,
   },
   data() {
     return {
+      api,
+
+      name: '应用',
+
+      /* 查询条件 */
       query: {},
+
+      /* 表格字段 */
       columns: [
         {
           title: '应用名称',
@@ -105,25 +135,22 @@ export default {
           sorter: true,
         },
       ],
-      codes: [
-        {
-          code: 'yes_or_no',
-          values: [],
-        },
-        {
-          code: 'common_status',
-          values: [],
-        },
-      ],
+
+      /* 字典编码储存格式 */
+      codes: {
+        yesOrNo: [],
+        commonStatus: [],
+      },
     };
   },
   created() {
+    /** 按需加载字典编码 */
     this.onLoadCodes();
 
+    /** 根据权限添加操作列 */
     const flag = this.$auth({
       sysApp: [['edit'], ['delete']],
     });
-
     if (flag) {
       this.columns.push({
         title: '操作',
@@ -139,14 +166,12 @@ export default {
      * 传给yo-table以示意数据接口及其参数和返回的数据结构
      */
     loadData(params) {
-      return this.$api
-        .getAppPage({
-          ...params,
-          ...this.query,
-        })
-        .then((res) => {
-          return res.data;
-        });
+      return this.$api[api.page]({
+        ...params,
+        ...this.query,
+      }).then((res) => {
+        return res.data;
+      });
     },
 
     /**
@@ -157,6 +182,16 @@ export default {
       this.$refs.table.onReloadData(true);
     },
 
+    /**
+     * 有查询功能时的必要方法
+     * 重置查询条件
+     */
+    onResetQuery() {
+      /** 在这里重置查询条件时,可对特殊的字段做保留处理 */
+      this.query = {};
+      this.onQuery();
+    },
+
     /**
      * 必要方法
      * 重新列表数据
@@ -166,21 +201,30 @@ export default {
     },
 
     /**
-     * 加载字典数据时的必要方法
+     * 必要方法
+     * 加载字典数据
+     * 如果不需要获取相应的字典数据,此方法内容可空
      */
     onLoadCodes() {
       this.$api
         .$queue([
           this.$api.sysDictTypeDropDownAwait({ code: 'yes_or_no' }),
           this.$api.sysDictTypeDropDownAwait({ code: 'common_status' }),
+          /* ... */
         ])
-        .then(([yesOrNo, commonStatus]) => {
-          this.codes.find((p) => p.code === 'yes_or_no').values = yesOrNo.data;
-          this.codes.find((p) => p.code === 'common_status').values = commonStatus.data;
+        .then(([code1, code2]) => {
+          this.codes.yesOrNo = code1.data;
+          this.codes.commonStatus = code2.data;
+          /* ... */
         });
     },
+
+    /**
+     * 必要方法
+     * 绑定数据字典值
+     */
     bindCodeValue(code, name) {
-      const c = this.codes.find((p) => p.code == name).values.find((p) => p.code == code);
+      const c = this.codes[name].find((p) => p.code == code);
       if (c) {
         return c.value;
       }
@@ -188,19 +232,41 @@ export default {
     },
 
     /**
-     * 有编辑新增功能的必要方法
+     * 必要方法
      * 从列表页调用窗口的打开方法
      */
     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[api.delete](record)
+        .then(({ success }) => {
+          this.onResult(success, '删除成功');
+        })
+        .finally(() => {
+          this.$refs.table.onLoaded();
+        });
     },
 
     onSetDefault(record) {
@@ -209,13 +275,6 @@ export default {
         this.onResult(success, '设置成功');
       });
     },
-
-    onDelete(record) {
-      this.$refs.table.onLoading();
-      this.$api.sysAppDelete(record).then(({ success }) => {
-        this.onResult(success, '删除成功');
-      });
-    },
   },
 };
 </script>
\ No newline at end of file
diff --git a/Web/src/pages/system/doc/index.vue b/Web/src/pages/system/doc/index.vue
index 9b5949b..ccce3fd 100644
--- a/Web/src/pages/system/doc/index.vue
+++ b/Web/src/pages/system/doc/index.vue
@@ -3,12 +3,7 @@
     <container>
       <a-row :gutter="16" type="flex">
         <a-col flex="auto">
-          <container
-            :id="`doc-${index}`"
-            :key="index"
-            mode="container"
-            v-for="(doc, index) in docs"
-          >
+          <container :id="`doc-${index}`" :key="index" v-for="(doc, index) in docs">
             <section>
               <h1>{{ doc.title }}</h1>
               <component :codes="codes" :is="doc.component" v-if="doc.path" />