1. 确定通用管理页面组件完成，通用组件中无法通用部分：下拉选择器；改为自定义插槽中自行添加

2. 更新element-ui版本 至2.13.0
3. 修复jwt 没有刷新过期时间。最终设置为10分钟过期时间窗口，以最后一次网络请求时间开始计算

ve-admin/admin-web/package.json

@@ -50,7 +50,7 @@
     "driver.js": "0.9.5",
     "dropzone": "5.5.1",
     "echarts": "4.2.1",
-    "element-ui": "2.7.0",
+    "element-ui": "2.13.0",
     "file-saver": "2.0.1",
     "fuse.js": "3.4.4",
     "js-cookie": "2.2.0",

ve-admin/admin-web/src/api/dict.js

+/*
+ * @Author: 一日看尽长安花
+ * @since: 2019-09-04 20:55:14
+ * @LastEditTime : 2020-01-11 20:47:10
+ * @LastEditors  : 一日看尽长安花
+ * @Description:
+ */
+import request from '@/utils/request';
+
+export function getDictsByParent(params) {
+  return request({
+    url: '/core/dicts',
+    method: 'get',
+    params: params
+  });
+}

ve-admin/admin-web/src/api/user.js

@@ -38,9 +38,9 @@ export function users(params) {
   });
 }
 
-export function usersMetedata() {
+export function usersMetadata() {
   return request({
-    url: '/users/metedata',
+    url: '/users/metadata',
     method: 'get'
   });
 }

ve-admin/admin-web/src/components/TableViews/DataTable.vue

@@ -23,7 +23,7 @@
       <el-table-column :key="Math.random()" type="index"></el-table-column>
 
       <el-table-column
-        v-for="(val, key) in metedata"
+        v-for="(val, key) in metadata"
         :key="key"
         :prop="val.type === 'dict' ? key + '.name' : key"
         :label="val.name"
@@ -76,7 +76,7 @@ export default {
   components: { Pagination },
   props: {
     // 表格元数据
-    metedata: {
+    metadata: {
       type: Object,
       default() {
         return {};
@@ -92,6 +92,7 @@ export default {
         };
       }
     },
+    // 搜索数据表格中数据的方法
     searchMethod: {
       type: Function,
       default() {
@@ -114,12 +115,17 @@ export default {
     };
   },
   updated() {
-    console.log(this.metedata);
+    console.log('以下是元数据和结果数据');
+    console.log(this.metadata);
     console.log(this.tabledata);
   },
   methods: {
     searchTable() {
-      // 要用一个临时数据将当前页面的数据保存下来，不然 $emit 会将原数据修改
+      /*
+      要用一个临时数据将当前页面的数据保存下来。
+      不然 $emit 会将原数据修改，
+      会造成第二次搜索是基于第一次搜索的结果数据进行搜索的
+      */
       this.cloneTableData = !this.cloneTableData
         ? Object.assign({}, this.tabledata)
         : this.cloneTableData;
@@ -134,6 +140,7 @@ export default {
       this.cloneTable = null;
     },
     handleEdit(index, row) {
+      /* index 行号；row 行数据 */
       this.$emit('handle-edit', index, row);
     },
     handleDelete(index, row) {

ve-admin/admin-web/src/components/TableViews/EditDialog.vue

@@ -7,7 +7,9 @@
  -->
 <template>
   <div class="dialog-container">
-    <!-- 对话框 -->
+    <!--
+      对话框：通过$emit 继续提交open和close事件改变对话框的显示和隐藏
+    -->
     <el-dialog
       :title="dialogTitle"
       :visible="dialogVisible"
@@ -24,7 +26,7 @@
         style="width: 400px; margin-left:50px;"
       >
         <el-form-item
-          v-for="(val, key) in metedata"
+          v-for="(val, key) in metadata"
           :key="key"
           :label="val.name"
           :prop="key"
@@ -45,17 +47,8 @@
             :placeholder="val.name + '时间'"
           >
           </el-date-picker>
-
-          <el-select
-            v-else-if="judgeType(val.type, 'dict')"
-            :placeholder="val.name"
-            :clearable="true"
-            class="filter-item"
-          >
-            <el-option />
-          </el-select>
         </el-form-item>
-        <!-- 给某些无法自动生成表单域的插槽，并将数据向插槽传递 -->
+        <!-- 用于面板中的自定义表单元素，例如级联选择器，并通过作用域插槽的方式将数据传递给自定义表单 -->
         <slot :dialog-data="dialogData" name="dialog-form-item"></slot>
       </el-form>
       <template v-slot:footer>
@@ -81,7 +74,7 @@ import { equalsIgnoreCase } from '@/utils/str-util';
 export default {
   name: 'EditDialog',
   props: {
-    metedata: {
+    metadata: {
       type: Object,
       default() {
         return {};
@@ -123,6 +116,8 @@ export default {
       this.$refs['editForm'].validate(valid => {
         if (valid) {
           this.$emit('create-data', this.dialogData);
+          /* 将回调延迟到下次 DOM 更新循环之后执行。
+          而数据更新就代表dom更新，所以如果创建成功，数据就会更新 */
           this.$nextTick(() => {
             this.$emit('update:dialogVisible', false);
             this.$notify({
@@ -166,6 +161,7 @@ export default {
       });
     },
     openDialog() {
+      /* 参照vue中 .sync 修饰符章节，方便的刷新父组件的dialogVisible值*/
       this.$emit('update:dialogVisible', true);
     },
     closeDialog() {

ve-admin/admin-web/src/components/TableViews/SearchPane.vue

 <!--
  * @Author: 一日看尽长安花
  * @since: 2019-10-12 16:14:37
- * @LastEditTime: 2019-12-17 14:41:14
- * @LastEditors: 一日看尽长安花
+ * @LastEditTime : 2020-01-09 23:16:28
+ * @LastEditors  : 一日看尽长安花
  * @Description:
  -->
 <template>
   <div class="filter-container">
+    <!-- 取消表单的提交动作 -->
     <el-form
       ref="filterForm"
       :size="size"
       :model="filterData"
       @submit.native.prevent
     >
+      <!-- 循环元数据构建搜索面板：除了下拉框 -->
       <div
-        v-for="(val, key) in metedata"
+        v-for="(val, key) in metadata"
         :key="key"
         class="filter-item-container"
       >
@@ -45,17 +47,9 @@
             >
             </el-date-picker>
           </div>
-
-          <el-select
-            v-else-if="judgeType(val.type, 'dict')"
-            :placeholder="val.name"
-            :clearable="true"
-            class="filter-item"
-          >
-            <el-option />
-          </el-select>
         </el-form-item>
       </div>
+      <!-- 用于面板中的自定义表单，例如级联选择器，并通过作用域插槽的方式将数据传递给自定义表单 -->
       <slot name="filter-condition" :filter-data="filterData"> </slot>
       <div class="filter-item-container">
         <el-button
@@ -81,6 +75,7 @@
       >
         添加
       </el-button>
+      <!-- 用于面板中的自定义功能按钮，例如导入导出按钮等，并通过作用域插槽的方式将数据传递给自定义表单 -->
       <slot name="operation-btn-group" :filter-data="filterData"> </slot>
     </div>
   </div>
@@ -92,7 +87,7 @@ import { equalsIgnoreCase } from '@/utils/str-util';
 export default {
   name: 'SearchPane',
   props: {
-    metedata: {
+    metadata: {
       type: Object,
       default() {
         return {};
@@ -129,16 +124,3 @@ export default {
   }
 };
 </script>
-<style>
-.filter-container {
-  margin-top: 1rem;
-}
-
-.filter-item-container {
-  display: inline-block;
-  margin: 0.15em;
-}
-.filter-btn-group {
-  margin: 0.15em;
-}
-</style>

ve-admin/admin-web/src/components/TableViews/index.vue

 <!--
  * @Author: 一日看尽长安花
  * @since: 2019-10-12 15:43:18
- * @LastEditTime: 2019-11-30 22:23:06
- * @LastEditors: 一日看尽长安花
+ * @LastEditTime : 2020-01-08 22:51:466
+ * @LastEditors  : 一日看尽长安花安花
  * @Description: 后台管理页面的自动生成，
- * 主要暴露了分页方法、过滤表格（单纯前端过滤）、条件查询、增删改方法
+ * 主要暴露了分页方法、数据表格搜索方法、条件查询方法、增删改方法
+ * 以及 查询面板插槽，功能按钮组插槽，编辑对话框插槽
  -->
 <template>
   <div>
     <search-pane
-      :metedata="metedata"
+      :metadata="metadata"
       @filter-search="filterSearch"
       @handle-create="handleCreate"
     >
@@ -22,7 +23,7 @@
     </search-pane>
     <data-table
       :loading="loading"
-      :metedata="metedata"
+      :metadata="metadata"
       :tabledata="tabledata"
       :search-method="searchMethod"
       @update:tabledata="$emit('update:tabledata', $event)"
@@ -31,7 +32,7 @@
       @delete-data="$emit('delete-data')"
     ></data-table>
     <edit-dialog
-      :metedata="metedata"
+      :metadata="metadata"
       :dialog-visible.sync="dialogVisible"
       :dialog-title="dialogTitle"
       :operation-type="operationType"
@@ -39,6 +40,8 @@
       @create-data="$emit('create-data')"
       @update-data="$emit('update-data')"
     >
+      <!-- #dialog-form-item等价v-slot:dialog-form-item 语法
+      详情参照 解构插槽 Prop 章节 -->
       <template #dialog-form-item="{dialogData:dialogData}">
         <slot :dialog-data="dialogData" name="dialog-form-item"></slot>
       </template>
@@ -56,7 +59,7 @@ export default {
   components: { SearchPane, DataTable, EditDialog },
   props: {
     // 表格元数据
-    metedata: {
+    metadata: {
       type: Object,
       default() {
         return {};
@@ -72,7 +75,6 @@ export default {
         };
       }
     },
-
     // 加载中的遮罩层
     loading: {
       type: Boolean,
@@ -121,3 +123,21 @@ export default {
   }
 };
 </script>
+<style>
+.filter-container {
+  margin-top: 1rem;
+}
+
+.filter-item-container {
+  display: inline-block;
+  margin: 0.15em;
+}
+
+.filter-item-container .el-cascader {
+  top: -4px;
+}
+
+.filter-btn-group {
+  margin: 0.15em;
+}
+</style>

ve-admin/admin-web/src/utils/request.js

@@ -2,13 +2,13 @@
  * @Description: In User Settings Edit
  * @Author: your name
  * @Date: 2019-09-09 12:16:28
- * @LastEditTime: 2019-10-27 23:12:07
- * @LastEditors: 一日看尽长安花
+ * @LastEditTime : 2020-01-11 23:24:40
+ * @LastEditors  : 一日看尽长安花
  */
 import axios from 'axios';
 import { MessageBox, Message } from 'element-ui';
 import store from '@/store';
-import { getToken } from '@/utils/auth';
+import { getToken, setToken } from '@/utils/auth';
 
 // create an axios instance
 const service = axios.create({
@@ -21,7 +21,6 @@ const service = axios.create({
 service.interceptors.request.use(
   config => {
     // do something before request is sent
-
     if (store.getters.token) {
       // let each request carry token
       // ['Authorization'] see to MDN explain about "HTTP Authorization"
@@ -49,9 +48,8 @@ service.interceptors.response.use(
    * Here is just an example
    * You can also judge the status by HTTP Status Code
    */
-  response => {
+  (response, b, c, d) => {
     const res = response.data;
-
     // if the custom code is not 20000, it is judged as an error.
     if (res.code !== 200) {
       Message({
@@ -79,6 +77,8 @@ service.interceptors.response.use(
       }
       return Promise.reject(new Error(res.message || 'Error'));
     } else {
+      const authorization = response.headers['authorization'];
+      setToken(authorization);
       return res;
     }
   },

ve-admin/admin-web/src/views/users/index.vue

 <!--
  * @Author: 一日看尽长安花
  * @since: 2019-10-12 15:43:18
- * @LastEditTime: 2019-12-17 20:56:50
- * @LastEditors: 一日看尽长安花
+ * @LastEditTime : 2020-01-11 21:15:32
+ * @LastEditors  : 一日看尽长安花
  * @Description:
  -->
 <template>
   <div>
     <table-views
-      :metedata="metedata"
+      :metadata="metadata"
       :tabledata.sync="tabledata"
       :loading="loading"
       :search-method="searchMethod"
@@ -18,19 +18,13 @@
       @delete-data="deleteData"
       @update-data="updateData"
     >
-      <!-- fixed 待解决的问题：样式问题。猜测原因：应该是样式穿透问题，不能是scope -->
       <!-- 往搜索栏中添加搜索条件 -->
       <template #filter-condition="{filterData:filterData}">
         <div class="filter-item-container">
-          <el-form-item>
-            <el-input
-              v-model="filterData['test']"
-              placeholder="test"
-              :clearable="true"
-              style="width: 200px;"
-              class="filter-item"
-            />
-          </el-form-item>
+          <el-cascader
+            v-model="filterData['jobType']"
+            :props="jobTypeCascaderProps"
+          ></el-cascader>
         </div>
       </template>
       <!-- 往操作按钮组中添加自定义操作按钮 -->
@@ -62,35 +56,58 @@
 
 <script>
 import TableViews from '@/components/TableViews';
-import { users, usersMetedata } from '@/api/user';
+import { users, usersMetadata } from '@/api/user';
+import { getDictsByParent } from '@/api/dict';
 
 export default {
-  name: 'CoreUsers',
+  name: 'CoreUsersView',
   components: { TableViews },
   props: {},
   data() {
     return {
       // 整个页面的数据
-      metedata: {},
+      metadata: {},
       tabledata: {
         data: [],
         total: 0
       },
-      loading: true
+      loading: true,
+      jobTypeCascaderProps: {
+        checkStrictly: true,
+        lazy: true,
+        lazyLoad(node, resolve) {
+          const { root, data } = node;
+          const { id } = data || {};
+          let datas = [],
+            type;
+          if (root) {
+            type = 'job_type';
+          }
+          let reqParam = {
+            parentId: id,
+            type: type
+          };
+          getDictsByParent(reqParam).then(result => {
+            const { code, data } = { ...result };
+            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
+            resolve(data);
+          });
+        }
+      }
     };
   },
   computed: {},
   mounted() {
-    this.obtainMetedata();
+    this.obtainMetadata();
     this.obtainData({ page: 1, limit: 10 });
   },
   methods: {
-    obtainMetedata() {
+    obtainMetadata() {
       this.loading = true;
-      usersMetedata()
+      usersMetadata()
         .then(result => {
           const { code, data } = { ...result };
-          this.metedata = Object.assign({}, data);
+          this.metadata = Object.assign({}, data);
         })
         .catch(err => {})
         .finally(() => {