todo: 确立代码生成逻辑。

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

plus-admin/admin-console/src/main/java/com/ibeetl/admin/console/util/VOUtil.java

 package com.ibeetl.admin.console.util;
 
 import cn.hutool.core.annotation.AnnotationUtil;
-import cn.hutool.core.collection.CollUtil;
-import cn.hutool.core.map.MapBuilder;
 import cn.hutool.core.map.MapUtil;
 import cn.hutool.core.util.StrUtil;
 import com.ibeetl.admin.core.annotation.ElColumn;
-import com.ibeetl.admin.core.entity.CoreDict;
-import com.ibeetl.admin.core.entity.ElCascaderData;
 import java.lang.reflect.Field;
 import java.util.ArrayList;
+import java.util.Comparator;
 import java.util.List;
 import java.util.Map;
-import java.util.Map.Entry;
-import java.util.Optional;
-import java.util.Set;
+import java.util.stream.Collectors;
 
 /**
  * 视图工具类
@@ -22,37 +17,37 @@ import java.util.Set;
  * @author 一日看尽长安花
  */
 public class VOUtil {
+
   static final String JSON_PATH_KEY = "json_path";
+
   /**
    * Method resolveElColumn ... todo 预计重新定义一个类用来转换，而不是用map
    *
-   * @param cls of type Class ，一个专门存放元数据的ElQuery类
+   * @param cls
+   *     of type Class ，一个专门存放元数据的ElQuery类
    * @return Map
    */
-  public static Map resolveElColumn(Class cls) {
+  public static List<Map<String, Object>> resolveElColumn(Class cls) {
 
-    MapBuilder<String, Map> mapBuilder = MapUtil.<String, Map>builder();
+    List<Map<String, Object>> metedataList = new ArrayList<>();
     Field[] declaredFields = cls.getDeclaredFields();
     for (Field field : declaredFields) {
-      Map<String, Object> annotationValueMap =
+      Map<String, Object> elcolumnValMap =
           AnnotationUtil.getAnnotationValueMap(field, ElColumn.class);
-      if (MapUtil.isEmpty(annotationValueMap)) continue;
-      Set<Entry<String, Object>> entrySet = annotationValueMap.entrySet();
-      MapBuilder<Object, Object> camelKeyValueMap = MapUtil.builder();
-      for (Entry<String, Object> entry : entrySet) {
-        String key = entry.getKey();
-        Object value = entry.getValue();
-        camelKeyValueMap.put(StrUtil.toUnderlineCase(key), value);
+      if (MapUtil.isEmpty(elcolumnValMap)) {
+        continue;
       }
+      Map<String, Object> camelKeyValueMap = elcolumnValMap.entrySet().stream().collect(Collectors
+          .toMap(k -> StrUtil.toUnderlineCase(k.getKey()), v -> v.getValue(), (o, n) -> n));
       String camelKey = StrUtil.toUnderlineCase(field.getName());
-      Map<Object, Object> buildMap = camelKeyValueMap.build();
-      String jsonPath = buildMap.getOrDefault(JSON_PATH_KEY, StrUtil.EMPTY).toString();
-      if (StrUtil.isBlank(jsonPath)) {
-        jsonPath = camelKey;
+      camelKeyValueMap
+          .compute(JSON_PATH_KEY, (k, v) -> StrUtil.isEmpty(v.toString()) ? camelKey : v);
+      camelKeyValueMap.put("key", camelKey);
+      metedataList.add(camelKeyValueMap);
     }
-      buildMap.put(JSON_PATH_KEY, jsonPath);
-      mapBuilder.put(camelKey, buildMap);
-    }
-    return mapBuilder.build();
+    return metedataList.stream()
+        .sorted(Comparator.comparing(v -> ((Integer) v.get("order")))).collect(
+            Collectors.toList());
   }
+
 }

plus-admin/admin-console/src/main/java/com/ibeetl/admin/console/web/DictCascaderElController.java

@@ -2,7 +2,7 @@ package com.ibeetl.admin.console.web;
 
 import cn.hutool.core.util.StrUtil;
 import com.ibeetl.admin.core.entity.CoreDict;
-import com.ibeetl.admin.core.entity.ElCascaderData;
+import com.ibeetl.admin.core.model.ElCascaderData;
 import com.ibeetl.admin.core.service.CoreDictService;
 import com.ibeetl.admin.core.web.JsonResult;
 import java.util.ArrayList;

plus-admin/admin-console/src/main/java/com/ibeetl/admin/console/web/OrgCascaderElController.java

 package com.ibeetl.admin.console.web;
 
 import com.ibeetl.admin.core.entity.CoreOrg;
-import com.ibeetl.admin.core.entity.ElCascaderData;
+import com.ibeetl.admin.core.model.ElCascaderData;
 import com.ibeetl.admin.console.service.CoreOrgConsoleElService;
 import com.ibeetl.admin.core.service.CoreOrgService;
 import com.ibeetl.admin.core.service.CorePlatformService;

plus-admin/admin-console/src/main/java/com/ibeetl/admin/console/web/RoleCascaderElController.java

@@ -2,7 +2,7 @@ package com.ibeetl.admin.console.web;
 
 import com.ibeetl.admin.console.service.CoreOrgConsoleElService;
 import com.ibeetl.admin.core.entity.CoreRole;
-import com.ibeetl.admin.core.entity.ElCascaderData;
+import com.ibeetl.admin.core.model.ElCascaderData;
 import com.ibeetl.admin.core.service.CorePlatformService;
 import com.ibeetl.admin.core.service.CoreRoleService;
 import com.ibeetl.admin.core.util.enums.RoleTypeEnum;

plus-admin/admin-console/src/main/java/com/ibeetl/admin/console/web/RoleConsoleElController.java

@@ -16,7 +16,7 @@ import com.ibeetl.admin.core.annotation.RequestBodyPlus;
 import com.ibeetl.admin.core.entity.CoreFunction;
 import com.ibeetl.admin.core.entity.CoreRole;
 import com.ibeetl.admin.core.entity.CoreUser;
-import com.ibeetl.admin.core.entity.ElCascaderData;
+import com.ibeetl.admin.core.model.ElCascaderData;
 import com.ibeetl.admin.core.rbac.DataAccess;
 import com.ibeetl.admin.core.rbac.DataAccessFactory;
 import com.ibeetl.admin.core.service.CorePlatformService;

plus-admin/admin-console/src/main/java/com/ibeetl/admin/console/web/UserConsoleElController.java

@@ -44,21 +44,26 @@ import org.springframework.web.bind.annotation.RestController;
 @RestController
 public class UserConsoleElController {
 
-  @Autowired private UserConsoleService userConsoleService;
+  @Autowired
+  private UserConsoleService userConsoleService;
 
-  @Autowired private CorePlatformService platformService;
+  @Autowired
+  private CorePlatformService platformService;
 
-  @Autowired FileService fileService;
+  @Autowired
+  FileService fileService;
 
   @Function("user.query")
   @GetMapping("/metadata")
-  public JsonResult<Map> usersMetedata() {
+  public JsonResult<List<Map<String, Object>>> usersMetedata() {
+
     return JsonResult.success(VOUtil.resolveElColumn(CoreUserElMetadata.class));
   }
 
   @Function("user.query")
   @GetMapping
   public JsonResult<PageQuery<CoreUser>> users(CoreUserParam coreUserParam) {
+
     PageQuery<CoreUser> allUsers = userConsoleService.getUsersByComplexSelect(coreUserParam);
     return JsonResult.success(allUsers);
   }
@@ -66,6 +71,7 @@ public class UserConsoleElController {
   @Function("user.query")
   @GetMapping("/{id}")
   public JsonResult<CoreUser> users(@PathVariable("id") Long id) {
+
     CoreUser coreUser = userConsoleService.queryUserById(id);
     return JsonResult.success(coreUser);
   }
@@ -73,6 +79,7 @@ public class UserConsoleElController {
   @Function("user.add")
   @PostMapping
   public JsonResult<Long> addUser(@Validated(ValidateConfig.ADD.class) @RequestBody CoreUser user) {
+
     if (!platformService.isAllowUserName(user.getCode())) {
       return JsonResult.failMessage("不允许的注册名字 " + user.getCode());
     }
@@ -83,6 +90,7 @@ public class UserConsoleElController {
   @Function("user.update")
   @PutMapping
   public JsonResult update(@Validated(ValidateConfig.UPDATE.class) @RequestBody CoreUser user) {
+
     boolean success = userConsoleService.updateTemplate(user);
     if (success) {
       this.platformService.clearFunctionCache();
@@ -95,28 +103,31 @@ public class UserConsoleElController {
   @Function("user.delete")
   @DeleteMapping
   public JsonResult delete(@RequestBodyPlus("ids") Long[] ids) {
+
     userConsoleService.batchDelSysUser(Arrays.asList(ids));
     return JsonResult.success();
   }
 
-  /** 用户所有授权角色列表 */
+  /**
+   * 用户所有授权角色列表
+   */
   @GetMapping("/roles")
   @Function("user.role")
   @ResponseBody
   public JsonResult<List<CoreUserRole>> getRoleList(UserRoleQuery roleQuery) {
+
     List<CoreUserRole> list = userConsoleService.getUserRoles(roleQuery);
     return JsonResult.success(list);
   }
 
   /**
    * 用户添加授权角色页
-   *
-   * @return
    */
   @PostMapping("/roles")
   @Function("user.role")
   @ResponseBody
   public JsonResult saveUserRole(@Validated @RequestBody CoreUserRole userRole) {
+
     Date now = new Date();
     userRole.setCreateTime(now);
     this.userConsoleService.saveUserRole(userRole);
@@ -126,13 +137,12 @@ public class UserConsoleElController {
 
   /**
    * 删除用户角色授权
-   *
-   * @return
    */
   @DeleteMapping("/roles")
   @Function("user.role")
   @ResponseBody
   public JsonResult delUserRole(@RequestBodyPlus("ids") ArrayList<Long> ids) {
+
     userConsoleService.deleteUserRoles(ids);
     this.platformService.clearFunctionCache();
     return JsonResult.success();
@@ -140,14 +150,13 @@ public class UserConsoleElController {
 
   /**
    * 管理员重置用户密码
-   *
-   * @return
    */
   @PostMapping("/changePassword")
   @Function("user.reset")
   @ResponseBody
   public JsonResult changePassword(
       @RequestBodyPlus("id") Long id, @RequestBodyPlus("password") String password) {
+
     userConsoleService.resetPassword(id, password);
     return JsonResult.success();
   }
@@ -155,6 +164,7 @@ public class UserConsoleElController {
   @PostMapping("/excel/export")
   @Function("user.export")
   public JsonResult<String> export(@RequestBody CoreUserParam coreUserParam) {
+
     String excelTemplate = "excelTemplates/admin/user/user_collection_template.xls";
     List<UserExcelExportData> users = userConsoleService.queryExcel(coreUserParam);
     try (InputStream is =
@@ -173,4 +183,5 @@ public class UserConsoleElController {
       throw new PlatformException(e.getMessage());
     }
   }
+
 }

plus-admin/admin-console/src/main/java/com/ibeetl/admin/console/web/mo/CoreUserElMetadata.java

@@ -2,6 +2,7 @@ package com.ibeetl.admin.console.web.mo;
 
 import static com.ibeetl.admin.core.util.enums.ElColumnType.DATE;
 import static com.ibeetl.admin.core.util.enums.ElColumnType.DICT;
+import static com.ibeetl.admin.core.util.enums.ElColumnType.OTHER;
 import static com.ibeetl.admin.core.util.enums.ElColumnType.STRING;
 
 import com.ibeetl.admin.core.annotation.ElColumn;
@@ -9,8 +10,7 @@ import java.util.Date;
 import lombok.Data;
 
 /**
- * Class CoreUserElMetadata : <br>
- * 描述：用户管理页面的metadata元数据
+ * Class CoreUserElMetadata : <br> 描述：用户管理页面的metadata元数据
  *
  * @author 一日看尽长安花 Created on 2019/12/29
  */
@@ -22,16 +22,17 @@ public class CoreUserElMetadata {
       type = STRING,
       isShowSearchPanel = false,
       isShowTablePanel = false,
-      isShowEditorPanel = false)
+      isShowEditorPanel = false,
+      order = 1)
   protected Long id;
 
-  @ElColumn(name = "创建时间", type = DATE, isShowEditorPanel = false)
+  @ElColumn(name = "创建时间", type = DATE, isShowEditorPanel = false, order = 8)
   protected Date createTime;
 
-  @ElColumn(name = "用户名", type = STRING, isShowSearchPanel = false)
+  @ElColumn(name = "用户名", type = STRING, isShowSearchPanel = false, order = 2)
   private String code;
 
-  @ElColumn(name = "姓名", type = STRING)
+  @ElColumn(name = "姓名", type = STRING, order = 3)
   private String name;
 
   @ElColumn(
@@ -39,15 +40,16 @@ public class CoreUserElMetadata {
       type = STRING,
       jsonPath = "org.name",
       isShowSearchPanel = false,
-      isShowEditorPanel = false)
+      isShowEditorPanel = false, order = 4)
   private Long orgId;
 
-  @ElColumn(name = "状态", type = DICT, isShowEditorPanel = false)
+  @ElColumn(name = "状态", type = DICT, dictType = "user_state", isShowEditorPanel = false, order = 7)
   private String state;
 
-  @ElColumn(name = "职务", type = DICT, isShowEditorPanel = false)
+  @ElColumn(name = "职务", type = OTHER, isShowEditorPanel = false, order = 5)
   private String jobType0;
 
-  @ElColumn(name = "岗位", type = DICT, isShowEditorPanel = false)
+  @ElColumn(name = "岗位", type = DICT, dictType = "job_type", isShowEditorPanel = false, order = 6)
   private String jobType1;
+
 }

plus-admin/admin-console/src/main/java/com/ibeetl/admin/console/web/vo/RoleDataFunctionVO.java

 package com.ibeetl.admin.console.web.vo;
 
-import com.ibeetl.admin.core.entity.ElCascaderData;
+import com.ibeetl.admin.core.model.ElCascaderData;
 import java.util.List;
 import lombok.Data;
 

plus-admin/admin-core/src/main/java/com/ibeetl/admin/core/annotation/ElColumn.java

@@ -17,15 +17,11 @@ public @interface ElColumn {
 
   /**
    * 数据表格列头显示名称
-   *
-   * @return
    */
   String name();
 
   /**
    * 该列的类型。查看 {@link com.ibeetl.admin.core.util.enums.ElColumnType}
-   *
-   * @return
    */
   String type();
 
@@ -38,36 +34,42 @@ public @interface ElColumn {
 
   /**
    * 开启element-ui 中数据表格列的手动排序
-   *
-   * @return
    */
   boolean sortable() default false;
 
   /**
    * 是否在前端页面的查询条件区显示
-   *
-   * @return
    */
   boolean isShowSearchPanel() default true;
 
   /**
    * 是否在前端页面的数据表格列中显示
-   *
-   * @return
    */
   boolean isShowTablePanel() default true;
 
   /**
    * 是否在前端页面的编辑窗显示
-   *
-   * @return
    */
   boolean isShowEditorPanel() default true;
 
   /**
    * 是否在表单中是必填。暂时没做规则的生成功能，暂定没有
-   *
-   * @return
    */
   boolean required() default false;
+
+  /**
+   * 序号
+   */
+  int order() default 999;
+
+  /**
+   * 只有在type为dict时设置有效
+   */
+  String dictType() default StrUtil.EMPTY;
+
+  /**
+   * 只有在type为dict时设置有效
+   */
+  long dictParentId() default 0;
+
 }

plus-admin/admin-core/src/main/java/com/ibeetl/admin/core/entity/ElCascaderData.java → plus-admin/admin-core/src/main/java/com/ibeetl/admin/core/model/ElCascaderData.java

-package com.ibeetl.admin.core.entity;
+package com.ibeetl.admin.core.model;
 
 import java.util.List;
 import lombok.Data;
@@ -12,5 +12,9 @@ public class ElCascaderData {
   private String label;
   private Object value;
   private List<ElCascaderData> children;
+
+  /**
+   * 附加数据
+   */
   private Object tail;
 }

plus-admin/admin-core/src/main/java/com/ibeetl/admin/core/model/ElTreeData.java

+package com.ibeetl.admin.core.model;
+
+import java.util.List;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+/**
+ * element-ui前端树形组件的数据格式类
+ */
+@Data
+@NoArgsConstructor
+public class ElTreeData {
+
+  private Object id;
+
+  private String label;
+
+  private Object value;
+
+  private List<ElTreeData> children;
+
+}

plus-admin/admin-core/src/main/java/com/ibeetl/admin/core/util/enums/ElColumnType.java

@@ -2,17 +2,26 @@ package com.ibeetl.admin.core.util.enums;
 
 import com.ibeetl.admin.core.annotation.ElColumn;
 
-/** 注解{@link ElColumn#type()} 字段的常量值 */
+/**
+ * 注解{@link ElColumn#type()} 字段的常量值
+ */
 public interface ElColumnType {
-  /** 前端页面输入框 */
+
+  /**
+   * 前端页面输入框
+   */
   String STRING = "string";
 
   /**
-   * 不出现在搜索面板中，只出现在数据表格中。
-   * 建议下拉选择器通过级联选择器实现
-   * */
+   * 不出现在搜索面板中，只出现在数据表格中。 建议下拉选择器通过级联选择器实现
+   */
   String DICT = "dict";
 
-  /** 前端页面的日期选择器 */
+  /**
+   * 前端页面的日期选择器
+   */
   String DATE = "date";
+
+  String OTHER = "other";
+
 }

plus-admin/admin-core/src/main/java/com/ibeetl/admin/core/web/CoreDictElController.java

+package com.ibeetl.admin.core.web;
+
+import cn.hutool.core.util.StrUtil;
+import com.ibeetl.admin.core.entity.CoreDict;
+import com.ibeetl.admin.core.model.ElTreeData;
+import com.ibeetl.admin.core.service.CoreDictService;
+import java.util.ArrayList;
+import java.util.List;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+@Slf4j
+@RequestMapping("**/core/dicts")
+@RestController
+public class CoreDictElController {
+
+  @Autowired
+  CoreDictService coreDictService;
+
+  @GetMapping("/getDictTree")
+  public JsonResult<List<ElTreeData>> getDictTree(Long parentId, String type) {
+
+    if (StrUtil.isBlank(type) && parentId == null) {
+      return JsonResult.failMessage("parentId and type should have at least one.");
+    }
+    List<CoreDict> childDictList = coreDictService.findChildrenNodes(parentId, type);
+    return JsonResult.success(coreDictToElCascaderData(childDictList));
+  }
+
+  /**
+   * .将字典树转成element树组件的格式
+   *
+   * @return List<ElCascaderData>
+   * @author 一日看尽长安花
+   */
+  private List<ElTreeData> coreDictToElCascaderData(List<CoreDict> coreDicts) {
+
+    List<ElTreeData> elCascaderDatas = new ArrayList<ElTreeData>(coreDicts.size());
+    for (CoreDict dict : coreDicts) {
+      ElTreeData data = new ElTreeData();
+      data.setId(dict.getId());
+      data.setLabel(dict.getName());
+      data.setValue(dict.getValue());
+      List<ElTreeData> children = coreDictToElCascaderData(dict.getChildren());
+      data.setChildren(children);
+      elCascaderDatas.add(data);
+    }
+    return elCascaderDatas.isEmpty() ? null : elCascaderDatas;
+  }
+
+}

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

 /*
  * @Author: 一日看尽长安花
  * @since: 2019-09-04 20:55:14
- * @LastEditTime: 2020-08-02 14:16:39
+ * @LastEditTime: 2020-08-16 19:23:51
  * @LastEditors: 一日看尽长安花
  * @Description:
  */
@@ -22,3 +22,11 @@ export function immaditeLoadDicts(params) {
     params: params
   });
 }
+
+export function getDictTree(params) {
+  return request({
+    url: '/core/dicts/getDictTree',
+    method: 'get',
+    params
+  });
+}

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

 <!--
  * @Author: 一日看尽长安花
  * @since: 2019-10-12 16:14:37
- * @LastEditTime: 2020-03-16 16:01:20
+ * @LastEditTime: 2020-08-16 16:23:52
  * @LastEditors: 一日看尽长安花
  * @Description:
  -->
@@ -23,8 +23,8 @@
       <el-table-column :key="Math.random()" type="index"></el-table-column>
 
       <el-table-column
-        v-for="(val, key) in visibleMetadata"
-        :key="key"
+        v-for="(val, idx) in visibleMetadatas"
+        :key="idx"
         :prop="val.json_path + '$' + val.type"
         :label="val.name"
         :sortable="val.sortable"
@@ -80,10 +80,10 @@ export default {
   components: { Pagination },
   props: {
     // 表格元数据
-    metadata: {
-      type: Object,
+    metadatas: {
+      type: Array,
       default() {
-        return {};
+        return [];
       }
     },
     // 表格数据
@@ -120,16 +120,11 @@ export default {
   },
   computed: {
     // 计算属性的 getter
-    visibleMetadata: function() {
-      // `this` 指向 vm 实例
-      let _metadata = {};
-      for (let dict in this.metadata) {
-        const t = this.metadata[dict];
-        if (t.is_show_table_panel) {
-          _metadata[dict] = t;
-        }
-      }
-      return _metadata;
+    visibleMetadatas: function() {
+      let allowTypes = ['string', 'date', 'dict'];
+      return this.metadatas.filter(
+        (v, i) => v.is_show_table_panel && allowTypes.includes(v.type)
+      );
     }
   },
   updated() {

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

 <!--
  * @Author: 一日看尽长安花
  * @since: 2019-10-12 16:14:37
- * @LastEditTime: 2020-04-10 20:47:33
+ * @LastEditTime: 2020-08-16 21:41:57
  * @LastEditors: 一日看尽长安花
  * @Description:
  -->
@@ -14,43 +14,76 @@
       :model="slots.filterData"
       @submit.native.prevent
     >
-      <!-- 循环元数据构建搜索面板：除了下拉框 -->
-      <div
-        v-for="(val, key) in visibleMetadata"
-        :key="key"
-        class="filter-item-container"
+      <el-row
+        v-for="(items, idx) in visibleMetadatas"
+        :key="idx + 'row'"
+        type="flex"
+        justify="start"
+        align="bottom"
+      >
+        <el-col
+          v-for="(item, i) in items"
+          :key="i + 'col'"
+          :span="item.type === 'date' ? 10 : 6"
         >
           <el-form-item>
+            <el-row
+              v-if="judgeType(item.type, 'string')"
+              type="flex"
+              justify="start"
+              align="bottom"
+            >
+              <el-col :span="24">
                 <el-input
-            v-if="judgeType(val.type, 'string')"
-            v-model="slots.filterData[key]"
-            :placeholder="val.name"
+                  v-model="slots.filterData[item.key]"
+                  :placeholder="item.name"
                   :clearable="true"
-            style="width: 200px;"
-            class="filter-item"
-          />
-          <div
-            v-else-if="judgeType(val.type, 'date')"
-            style="display: inline-block;position: relative;top: -0.3rem;"
+                ></el-input>
+              </el-col>
+            </el-row>
+            <el-row
+              v-else-if="judgeType(item.type, 'dict')"
+              type="flex"
+              justify="start"
+              align="bottom"
             >
+              <el-col :span="24">
+                <sp-tree-select
+                  v-model="treeObj[item.key + 'Value']"
+                  :data="treeObj[item.key + 'Data']"
+                  :props="treeObj[item.key + 'Props']"
+                  :filterable="true"
+                ></sp-tree-select>
+              </el-col>
+            </el-row>
+            <el-row
+              v-else-if="judgeType(item.type, 'date')"
+              type="flex"
+              justify="start"
+              align="bottom"
+            >
+              <el-col :span="12">
                 <el-date-picker
-              v-model="slots.filterData[key + '_start']"
+                  v-model="slots.filterData[item.key + '_start']"
                   type="datetime"
                   value-format="timestamp"
-              :placeholder="val.name + '开始时间'"
+                  :placeholder="item.name + '开始时间'"
                 >
                 </el-date-picker>
-
+              </el-col>
+              <el-col :span="12">
                 <el-date-picker
-              v-model="slots.filterData[key + '_end']"
+                  v-model="slots.filterData[item.key + '_end']"
                   type="datetime"
                   value-format="timestamp"
-              :placeholder="val.name + '结束时间'"
+                  :placeholder="item.name + '结束时间'"
                 >
                 </el-date-picker>
-          </div>
+              </el-col>
+            </el-row>
           </el-form-item>
-      </div>
+        </el-col>
+      </el-row>
       <!-- 用于面板中的自定义表单，例如级联选择器，并通过作用域插槽的方式将数据传递给自定义表单 -->
       <slot name="filter-condition" :filter-data="slots"> </slot>
       <div class="sp-search-btn-container">
@@ -85,15 +118,19 @@
 </template>
 
 <script>
+import SpTreeSelect from '@/components/Wrapper/SpTreeSelect';
+
 import { equalsIgnoreCase } from '@/utils/str-util';
+import { getDictTree } from '@/api/core_dict';
 
 export default {
   name: 'SearchPane',
+  components: { SpTreeSelect },
   props: {
-    metadata: {
-      type: Object,
+    metadatas: {
+      type: Array,
       default() {
-        return {};
+        return [];
       }
     }
   },
@@ -102,25 +139,78 @@ export default {
       size: 'mini',
       slots: {
         filterData: {}
+      },
+      // 树组件的options 和props挂载对象
+      treeObj: {
+        job_type1Data: [],
+        stateData: []
       }
     };
   },
   computed: {
     // 计算属性的 getter
-    visibleMetadata: function() {
+    visibleMetadatas: function() {
       // `this` 指向 vm 实例
-      let _metadata = {};
-      let allowTypes = ['string', 'date'];
-      for (let dict in this.metadata) {
-        const t = this.metadata[dict];
-        if (t.is_show_search_panel && allowTypes.includes(t.type)) {
-          _metadata[dict] = t;
+      let allowTypes = ['string', 'date', 'datetime', 'dict'];
+      let _metadataPartition = []; //二维数组，每行对应四列
+      let count = 0,
+        tempArr = [];
+      for (let i = 0; i < this.metadatas.length; i++) {
+        const v = this.metadatas[i];
+        if (v.is_show_search_panel && allowTypes.includes(v.type)) {
+          tempArr.push(v);
+          count++;
+          if (count % 4 === 0) {
+            _metadataPartition.push(tempArr);
+            tempArr = [];
           }
         }
-      return _metadata;
+      }
+      if (tempArr.length !== 0) {
+        _metadataPartition.push(tempArr);
+        tempArr = [];
+      }
+      return _metadataPartition;
     }
   },
+  watch: {
+    metadatas: {
+      handler: function(a, b) {
+        // 解决数据变动监控
+        const _that = this;
+        const params = [];
+        _that.metadatas
+          .filter(
+            (item, i) => item.is_show_search_panel && item.type === 'dict'
+          )
+          .forEach((v, i) => {
+            const obj = {};
+            obj.key = v.key;
+            obj.dict_type = v.dict_type;
+            obj.dict_parent_id = v.dict_parent_id;
+            params.push(obj);
+          });
+        this.recursiveHanldTree(params, this);
+      },
+      deep: true
+    }
+  },
+  mounted() {},
   methods: {
+    recursiveHanldTree(paramArr, _that) {
+      if (paramArr.length) {
+        const item = paramArr.shift();
+        getDictTree({
+          type: item.dict_type,
+          parent_id: item.dict_parent_id
+        }).then(res => {
+          const { code, message, data } = { ...res };
+          _that.treeObj[item.key + 'Data'] = data;
+          console.log(data);
+          _that.recursiveHanldTree(paramArr, _that);
+        });
+      }
+    },
     judgeType(str1, type) {
       return equalsIgnoreCase(str1, type);
     },

ve-admin/admin-web/src/components/GeneralPage/components/DetailPage.vue

 <!--
  * @Author: 一日看尽长安花
  * @since: 2019-10-12 16:14:37
- * @LastEditTime: 2020-04-16 20:45:56
+ * @LastEditTime: 2020-08-16 16:34:38
  * @LastEditors: 一日看尽长安花
  * @Description:
  -->
@@ -30,14 +30,14 @@
         class="sp-form"
       >
         <el-form-item
-          v-for="(val, key) in visibleMetadata"
-          :key="key"
+          v-for="(val, idx) in visibleMetadatas"
+          :key="idx"
           :label="val.name"
-          :prop="key"
+          :prop="val.key"
         >
           <el-input
             v-if="judgeType(val.type, 'string')"
-            v-model="slots.dialogData[key]"
+            v-model="slots.dialogData[val.key]"
             :placeholder="val.name"
             :clearable="true"
             class="sp-form-item"
@@ -45,7 +45,7 @@
 
           <el-date-picker
             v-else-if="judgeType(val.type, 'date')"
-            v-model="slots.dialogData[key]"
+            v-model="slots.dialogData[val.key]"
             type="datetime"
             value-format="timestamp"
             :placeholder="val.name + '时间'"
@@ -79,10 +79,10 @@ import { equalsIgnoreCase } from '@/utils/str-util';
 export default {
   name: 'EditDialog',
   props: {
-    metadata: {
-      type: Object,
+    metadatas: {
+      type: Array,
       default() {
-        return {};
+        return [];
       }
     },
     dialogData: {
@@ -119,16 +119,11 @@ export default {
   },
   computed: {
     // 计算属性的 getter
-    visibleMetadata: function() {
-      // `this` 指向 vm 实例
-      let _metadata = {};
-      for (let dict in this.metadata) {
-        const t = this.metadata[dict];
-        if (t.is_show_editor_panel) {
-          _metadata[dict] = t;
-        }
-      }
-      return _metadata;
+    visibleMetadatas: function() {
+      let allowTypes = ['string', 'date', 'dict'];
+      return this.metadatas.filter(
+        (v, i) => v.is_show_editor_panel && allowTypes.includes(v.type)
+      );
     }
   },
   watch: {

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

 <!--
  * @Author: 一日看尽长安花
  * @since: 2019-10-12 15:43:18
- * @LastEditTime: 2020-04-11 19:55:13
+ * @LastEditTime: 2020-08-16 16:06:37
  * @LastEditors: 一日看尽长安花
  * @Description: 后台管理页面的自动生成，
  * 主要暴露了分页方法、数据表格搜索方法、条件查询方法、增删改方法
@@ -11,7 +11,7 @@
   <div>
     <search-pane
       ref="searchPaneGP"
-      :metadata="metadata"
+      :metadatas="metadatas"
       @filter-search="filterSearch"
       @handle-create="handleCreate"
     >
@@ -25,7 +25,7 @@
     <data-table
       ref="dataTableGP"
       :loading="loading"
-      :metadata="metadata"
+      :metadatas="metadatas"
       :tabledata="tabledata"
       :search-method="searchMethod"
       @update:tabledata="$emit('update:tabledata', $event)"
@@ -35,7 +35,7 @@
     ></data-table>
     <detail-page
       ref="detailPageGP"
-      :metadata="metadata"
+      :metadatas="metadatas"
       :dialog-visible.sync="dialogVisible"
       :dialog-title="dialogTitle"
       :operation-type="operationType"
@@ -62,10 +62,10 @@ export default {
   components: { SearchPane, DataTable, DetailPage },
   props: {
     // 表格元数据
-    metadata: {
-      type: Object,
+    metadatas: {
+      type: Array,
       default() {
-        return {};
+        return [];
       }
     },
     // 表格数据

ve-admin/admin-web/src/components/Wrapper/SpTreeSelect.vue

@@ -51,8 +51,9 @@
                 class="sp-select-tag"
                 :title="item[selfProps.label]"
                 @close="tabClose(item[nodeKey])"
-              >{{ item[selfProps.label] }}</el-tag
               >
+                {{ item[selfProps.label] }}
+              </el-tag>
             </template>
             <template v-else>
               <el-tag
@@ -61,14 +62,16 @@
                 class="sp-select-tag"
                 :title="collapseTagsItem[selfProps.label]"
                 @close="tabClose(collapseTagsItem[nodeKey])"
-              >{{ collapseTagsItem[selfProps.label] }}</el-tag
               >
+                {{ collapseTagsItem[selfProps.label] }}
+              </el-tag>
               <el-tag
                 v-if="selecteds.length > 1"
                 :size="size"
                 class="sp-select-tag"
-              >+{{ selecteds.length - 1 }}</el-tag
               >
+                +{{ selecteds.length - 1 }}
+              </el-tag>
             </template>
           </div>
           <p v-show="selecteds.length == 0" class="sp-placeholder-box">
@@ -137,7 +140,7 @@ export default {
     // 宽度
     width: {
       type: String,
-      default: 'auto'
+      default: '100%'
     },
     // 触发方式 click/focus/hover/manual
     trigger: {
@@ -165,7 +168,7 @@ export default {
     },
     size: {
       type: String,
-      default: 'medium'
+      default: 'mini'
     },
     //是否展开全部
     defaultExpandAll: {
@@ -214,6 +217,7 @@ export default {
       };
     },
     sizeClass() {
+      /* eslint-disable */
       let size_class = 'size-medium';
       switch (this.size) {
         case 'medium':
@@ -232,6 +236,7 @@ export default {
           size_class = 'size-medium';
           break;
       }
+
       return size_class;
     },
     // 开启collapseTags时首个选中值
@@ -246,6 +251,12 @@ export default {
     // 树节点搜索
     filterText(val) {
       this.$refs['tree-select'].filter(val);
+    },
+    data: {
+      handler: function(a, b) {
+        // 解决数据变动监控
+      },
+      deep: true
     }
   },
   created() {

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

 <!--
  * @Author: 一日看尽长安花
  * @since: 2020-07-12 16:32:51
- * @LastEditTime: 2020-07-26 17:18:21
+ * @LastEditTime: 2020-08-16 12:36:24
  * @LastEditors: 一日看尽长安花
  * @Description:
 -->
@@ -9,30 +9,50 @@
   <div class="sp-view-page">
     <div class="sp-search-inline-pane">
       <el-form :inline="true" :model="searchData">
+        <el-row type="flex" justify="space-between" align="middle">
+          <el-col>
             <el-form-item label="字典值">
-          <el-input
-            v-model="searchData.value"
-            placeholder="请输入字典值"
-          ></el-input>
+              <el-input v-model="searchData.value" placeholder="请输入字典值">
+              </el-input>
             </el-form-item>
+          </el-col>
+          <el-col>
             <el-form-item label="字典名称">
-          <el-input
-            v-model="searchData.name"
-            placeholder="请输入字典名称"
-          ></el-input>
+              <el-input v-model="searchData.name" placeholder="请输入字典名称">
+              </el-input>
             </el-form-item>
+          </el-col>
+          <el-col>
             <el-form-item label="字典类型">
               <el-input
                 v-model="searchData.typeName"
                 placeholder="请输入字典类型"
-          ></el-input>
+              >
+              </el-input>
             </el-form-item>
+          </el-col>
+          <el-col>
             <el-form-item label="上级字典">
               <el-input
                 v-model.number="searchData.parent"
                 placeholder="请输入上级字典"
-          ></el-input>
+              >
+              </el-input>
             </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="space-between" align="middle">
+          <el-col>
+            <el-form-item label="测试下拉树">
+              <sp-tree-select
+                v-model="treeData.value"
+                :data="treeData.data"
+                :props="treeData.props"
+                :filterable="true"
+              ></sp-tree-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
     </div>
     <div class="sp-opr-btn-group">
@@ -119,6 +139,7 @@
 import FileUpload from '@/components/Upload/FileUpload';
 import Pagination from '@/components/Pagination'; // secondary package based on el-pagination
 import EditPopup from './edit_popup';
+import SpTreeSelect from '@/components/Wrapper/SpTreeSelect';
 
 import {
   getDicts,
@@ -131,7 +152,7 @@ import { download } from '@/api/core_file';
 
 export default {
   name: 'DictManager',
-  components: { Pagination, EditPopup, FileUpload },
+  components: { Pagination, EditPopup, FileUpload, SpTreeSelect },
   props: {},
   data() {
     return {
@@ -140,7 +161,15 @@ export default {
       loading: true,
       pageQuery: { page: 1, limit: 10, total: 0 },
       editVisible: false,
-      rowData: {}
+      rowData: {},
+      treeData: {
+        data: [
+          { id: 1, label: 'A', children: [{ id: 11, label: 'aa' }] },
+          { id: 2, label: 'B', children: [{ id: 22, label: 'bb' }] }
+        ],
+        props: {},
+        value: undefined
+      }
     };
   },
   mounted() {