todo: 确立代码生成逻辑。

1、前端采用通用页面，通过元数据生成
2、后端使用元数据
3、前端页面采用tabs组件显示
4、引入代码高亮js，封装vue组件

ve-admin/admin-web/src/views/roles/role_data_auth.vue

 <!--
  * @Author: 一日看尽长安花
  * @since: 2020-05-30 12:53:38
- * @LastEditTime: 2020-08-15 21:13:05
+ * @LastEditTime: 2020-08-15 21:51:18
  * @LastEditors: 一日看尽长安花
  * @Description:
 -->
@@ -63,34 +63,35 @@ export default {
       this.getRoleDataFunctions(roleId);
     },
     init() {
+      const _that = this;
       getRoles().then(res => {
         const { data, code, message } = { ...res };
-        this.rolesDatas = data;
+        _that.rolesDatas = data;
         if (data.length > 0) {
-          this.selectRoleId = data[0].id;
-          this.getRoleDataFunctions(this.selectRoleId);
+          _that.selectRoleId = data[0].id;
+          _that.getRoleDataFunctions(_that.selectRoleId);
         }
       });
     },
     getRoleDataFunctions(roleId) {
+      const _that = this;
       getRoleDataFunctions({ role_id: roleId }).then(res => {
         const { data, code, message } = { ...res };
-        this.roleDataFunctions = data;
-        const _that = this;
-        this.roleDataFunctions.forEach((v, i) => {
+        _that.roleDataFunctions = data;
+        _that.roleDataFunctions.forEach((v, i) => {
           _that.cascaderValues['val' + i] = v.accesses[0].tail.data_access_type;
           _that.allOptions['options' + i] = v.accesses;
         });
       });
     },
     changeSelect(refName) {
-      const node = this.$refs[refName][0].getCheckedNodes()[0];
       const _that = this;
+      const node = _that.$refs[refName][0].getCheckedNodes()[0];
       if (node) {
         // 选中
         const _data = node.data;
         const params = {
-          role_id: this.selectRoleId,
+          role_id: _that.selectRoleId,
           fn_id: _data.tail.id,
           access_type: _data.value
         };
@@ -105,7 +106,7 @@ export default {
         // 不选择
         _that.$message({
           message: '不允许为空',
-          type: 'warn'
+          type: 'warning'
         });
       }
     }

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

 <!--
  * @Author: 一日看尽长安花
  * @since: 2019-10-12 15:43:18
- * @LastEditTime: 2020-04-27 15:02:24
+ * @LastEditTime: 2020-08-16 17:06:01
  * @LastEditors: 一日看尽长安花
  * @Description:
  -->
 <template>
   <div>
     <general-page
-      :metadata="metadata"
+      :metadatas="metadatas"
       :tabledata.sync="tabledata"
       :loading="loading"
       :search-method="searchMethod"
@@ -20,7 +20,8 @@
     >
       <!-- 往搜索栏中添加搜索条件 -->
       <template #filter-condition="{filterData:slots}">
-        <div class="filter-item-container">
+        <el-row type="flex" justify="start" align="middle">
+          <el-col :span="4">
             <el-form-item>
               <sp-cascader
                 :key="Math.random()"
@@ -30,10 +31,11 @@
                 :props="orgIdCascaderProps"
                 :options="orgIdCascaderProps.options"
                 placeholder="部门"
-            ></sp-cascader>
+              >
+              </sp-cascader>
             </el-form-item>
-        </div>
-        <div class="filter-item-container">
+          </el-col>
+          <el-col :span="4">
             <el-form-item>
               <sp-cascader
                 :key="Math.random()"
@@ -45,8 +47,8 @@
                 placeholder="岗位/职务"
               ></sp-cascader>
             </el-form-item>
-        </div>
-        <div class="filter-item-container">
+          </el-col>
+          <el-col :span="4">
             <el-form-item>
               <sp-cascader
                 :key="Math.random()"
@@ -58,7 +60,8 @@
                 placeholder="状态"
               ></sp-cascader>
             </el-form-item>
-        </div>
+          </el-col>
+        </el-row>
       </template>
       <!-- 往操作按钮组中添加自定义操作按钮 -->
       <template #operation-btn-group>
@@ -195,12 +198,12 @@ export default {
   data() {
     return {
       // 整个页面的数据
-      metadata: {},
+      metadatas: [],
       tabledata: {
         data: [],
         total: 0
       },
-      loading: true,
+      loading: false,
       orgIdCascaderProps: {
         checkStrictly: true,
         options: []
@@ -244,16 +247,29 @@ export default {
     this.obtainData({ page: 1, limit: 10 });
   },
   methods: {
+    loader() {
+      return this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+    },
     obtainMetadata() {
-      this.loading = true;
+      const loading = this.loader();
       usersMetadata()
         .then(result => {
           const { code, data } = { ...result };
-          this.metadata = Object.assign({}, data);
+          this.metadatas = data;
+        })
+        .catch(err => {
+          this.$message({
+            message: '加载元数据出错',
+            type: 'warning'
+          });
         })
-        .catch(err => {})
         .finally(() => {
-          this.loading = false;
+          loading.close();
         });
     },
     obtainData(queryParams) {
@@ -262,7 +278,7 @@ export default {
         'job_type0',
         'job_type1'
       ]);
-      this.loading = true;
+      const loading = this.loader();
       const _lodash = this.$lodash;
       users(queryParams)
         .then(result => {
@@ -271,7 +287,7 @@ export default {
         })
         .catch(err => {})
         .finally(() => {
-          this.loading = false;
+          loading.close();
         });
     },
     pagination(queryParams) {