完成全部用户管理功能，

同时完成Vue通用页面组件
完成Element-UI 的 ELCascader的重包装

plus-admin/admin-console/src/main/java/com/ibeetl/admin/ConsoleApplication.java

@@ -18,7 +18,6 @@ public class ConsoleApplication extends SpringBootServletInitializer {
   }
 
   public static void main(String[] args) {
-
     SpringApplication.run(ConsoleApplication.class, args);
   }
 }

plus-admin/admin-console/src/main/java/com/ibeetl/admin/console/service/UserConsoleService.java

@@ -40,6 +40,7 @@ public class UserConsoleService extends CoreBaseService<CoreUser> {
   @Autowired FileService fileService;
 
   @Autowired PasswordEncryptService passwordEncryptService;
+
   @Autowired CoreDictService dictService;
 
   @Autowired CorePlatformService platformService;
@@ -175,9 +176,7 @@ public class UserConsoleService extends CoreBaseService<CoreUser> {
   }
 
   public void saveUserRole(CoreUserRole userRole) {
-
     long queryCount = sqlManager.templateCount(userRole);
-
     if (queryCount > 0) {
       throw new PlatformException("已存在用户角色关系");
     }

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

@@ -33,6 +33,7 @@ import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.validation.annotation.Validated;
 import org.springframework.web.bind.annotation.DeleteMapping;
 import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.PutMapping;
 import org.springframework.web.bind.annotation.RequestBody;
@@ -64,6 +65,13 @@ public class UserConsoleElController {
     return JsonResult.success(allUsers);
   }
 
+  @Function("user.query")
+  @GetMapping("/{id}")
+  public JsonResult<CoreUser> users(@PathVariable("id") Long id) {
+    CoreUser coreUser = userConsoleService.queryUserById(id);
+    return JsonResult.success(coreUser);
+  }
+
   @Function("user.add")
   @PostMapping
   public JsonResult<Long> addUser(@Validated(ValidateConfig.ADD.class) @RequestBody CoreUser user) {
@@ -92,6 +100,7 @@ public class UserConsoleElController {
     userConsoleService.batchDelSysUser(Arrays.asList(ids));
     return JsonResult.success();
   }
+
   /** 用户所有授权角色列表 */
   @GetMapping("/roles")
   @Function("user.role")
@@ -109,8 +118,9 @@ public class UserConsoleElController {
   @PostMapping("/roles")
   @Function("user.role")
   @ResponseBody
-  public JsonResult saveUserRole(@Validated CoreUserRole userRole) {
-    userRole.setCreateTime(new Date());
+  public JsonResult saveUserRole(@Validated @RequestBody CoreUserRole userRole) {
+    Date now = new Date();
+    userRole.setCreateTime(now);
     this.userConsoleService.saveUserRole(userRole);
     this.platformService.clearFunctionCache();
     return JsonResult.success(userRole.getId());

plus-admin/admin-core/src/main/java/com/ibeetl/admin/core/conf/CustomErrorController.java

 package com.ibeetl.admin.core.conf;
 
 import static cn.hutool.system.SystemUtil.LINE_SEPRATOR;
-import static java.lang.String.format;
 
 import cn.hutool.core.collection.CollUtil;
 import cn.hutool.core.convert.Convert;
-import cn.hutool.core.map.MapUtil;
-import cn.hutool.core.util.BooleanUtil;
 import cn.hutool.core.util.CharsetUtil;
 import cn.hutool.core.util.StrUtil;
 import cn.hutool.system.SystemUtil;
 import com.fasterxml.jackson.databind.ObjectMapper;
-import com.ibeetl.admin.core.util.FormFieldException;
 import com.ibeetl.admin.core.util.PlatformException;
 import com.ibeetl.admin.core.web.JsonResult;
 import java.io.IOException;
-import java.nio.charset.Charset;
-import java.util.ArrayList;
 import java.util.Collections;
-import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
-import java.util.Optional;
 import java.util.Set;
 import javax.servlet.ServletException;
 import javax.servlet.http.HttpServletRequest;
@@ -33,15 +25,11 @@ import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.boot.autoconfigure.web.servlet.error.AbstractErrorController;
 import org.springframework.boot.web.servlet.error.DefaultErrorAttributes;
-import org.springframework.boot.web.servlet.error.ErrorAttributes;
 import org.springframework.http.HttpHeaders;
 import org.springframework.http.HttpStatus;
 import org.springframework.stereotype.Controller;
-import org.springframework.util.MimeType;
 import org.springframework.util.MimeTypeUtils;
-import org.springframework.validation.FieldError;
 import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.context.request.WebRequest;
 import org.springframework.web.servlet.ModelAndView;
 
 /**

plus-admin/admin-core/src/main/java/com/ibeetl/admin/core/conf/JacksonConfig.java

@@ -7,7 +7,6 @@ import com.fasterxml.jackson.databind.ObjectMapper;
 import com.fasterxml.jackson.databind.PropertyNamingStrategy;
 import com.fasterxml.jackson.databind.SerializationFeature;
 import com.fasterxml.jackson.databind.module.SimpleModule;
-import com.fasterxml.jackson.databind.ser.std.DateSerializer;
 import com.ibeetl.admin.core.conf.jackson.serializer.CustomJsonResultSerializer;
 import com.ibeetl.admin.core.conf.jackson.serializer.CustomLongSerializer;
 import com.ibeetl.admin.core.conf.jackson.serializer.DateToTimestampSerializer;
@@ -44,6 +43,11 @@ public class JacksonConfig {
     simpleModule.addSerializer(JsonResult.class, new CustomJsonResultSerializer());
     simpleModule.addSerializer(DictTypeEnum.class, new DictTypeEnumSerializer());
     simpleModule.addSerializer(Date.class, new DateToTimestampSerializer());
+    /**
+     * todo 关于jackson对于枚举的反序列化，只能通过注解完成了。。
+     * 这些序列化接口配置都是无用的。自有一个{@link com.fasterxml.jackson.databind.deser.std.EnumDeserializer}
+     * */
+    //    simpleModule.addDeserializer(DictTypeEnum.class, new DictTypeEnumDeserializer());
 
     CustomLongSerializer longSerializer = new CustomLongSerializer();
     simpleModule.addSerializer(Long.class, longSerializer);
@@ -53,4 +57,3 @@ public class JacksonConfig {
     return objectMapper;
   }
 }
-

plus-admin/admin-core/src/main/java/com/ibeetl/admin/core/conf/SpringWebMvcConfigurer.java

@@ -7,28 +7,20 @@ import static org.springframework.http.HttpMethod.POST;
 import static org.springframework.http.HttpMethod.PUT;
 
 import cn.hutool.core.collection.CollUtil;
-import cn.hutool.core.convert.Convert;
-import cn.hutool.core.date.DateUtil;
 import com.ibeetl.admin.core.conf.springmvc.convert.DateConditionalGenericConverter;
-import com.ibeetl.admin.core.conf.springmvc.convert.StringToDictTypeEnumConverFactory;
+import com.ibeetl.admin.core.conf.springmvc.convert.StringToDictTypeEnumConverterFactory;
 import com.ibeetl.admin.core.conf.springmvc.interceptor.HttpRequestInterceptor;
 import com.ibeetl.admin.core.conf.springmvc.interceptor.SessionInterceptor;
 import com.ibeetl.admin.core.conf.springmvc.resolve.RequestBodyPlusProcessor;
 import com.ibeetl.admin.core.service.CoreUserService;
-import java.util.Date;
 import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
-import java.util.Optional;
-import java.util.Set;
 import org.beetl.core.GroupTemplate;
 import org.beetl.ext.spring.BeetlGroupUtilConfiguration;
 import org.springframework.beans.factory.InitializingBean;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.context.annotation.Configuration;
-import org.springframework.core.ResolvableType;
-import org.springframework.core.convert.TypeDescriptor;
-import org.springframework.core.convert.converter.ConditionalGenericConverter;
 import org.springframework.core.env.Environment;
 import org.springframework.format.FormatterRegistry;
 import org.springframework.format.datetime.DateFormatter;
@@ -101,7 +93,7 @@ public class SpringWebMvcConfigurer implements WebMvcConfigurer, InitializingBea
     registry.addFormatter(new DateFormatter("yyyy-MM-dd HH:mm:ss"));
     registry.addFormatter(new DateFormatter("yyyy-MM-dd"));
     /*converter 在json传参时无效*/
-    registry.addConverterFactory(new StringToDictTypeEnumConverFactory());
+    registry.addConverterFactory(new StringToDictTypeEnumConverterFactory());
     registry.addConverter(new DateConditionalGenericConverter());
   }
 

plus-admin/admin-core/src/main/java/com/ibeetl/admin/core/conf/beetl/BeetlConf.java

@@ -195,11 +195,12 @@ public class BeetlConf {
      */
     @Override
     protected boolean isSimple(String sqlId) {
-      if (sqlId.indexOf("_gen_") != -1) {
-        return true;
-      } else {
-        return false;
-      }
+      //      if (sqlId.indexOf("_gen_") != -1) {
+      //        return true;
+      //      } else {
+      //        return false;
+      //      }
+      return super.isSimple(sqlId);
     }
   }
 }

plus-admin/admin-core/src/main/java/com/ibeetl/admin/core/conf/beetl/processor/JsonBeanProcessor.java

@@ -3,6 +3,7 @@ package com.ibeetl.admin.core.conf.beetl.processor;
 import cn.hutool.core.collection.CollUtil;
 import cn.hutool.core.convert.Convert;
 import cn.hutool.core.map.MapUtil;
+import cn.hutool.core.util.StrUtil;
 import com.ibeetl.admin.core.conf.beetl.resultmap.DBColumnProperty;
 import com.ibeetl.admin.core.conf.beetl.resultmap.GridCell;
 import com.ibeetl.admin.core.conf.beetl.resultmap.GridHeader;
@@ -90,11 +91,15 @@ public class JsonBeanProcessor extends BeanProcessor {
     ResultSetMetaData rsmd = rs.getMetaData();
     int[] columnToProperty = this.mapColumnsToProperties(type, rsmd, props);
 
-    GridMapping mapping = (GridMapping) CacheUtil.get(sqlId);
-    if (null == mapping) {
+    GridMapping mapping = null;
+    if (StrUtil.isNotBlank(sqlId)) {
+      mapping = (GridMapping) CacheUtil.get(sqlId);
+    }
+    if (mapping == null) {
       /*无映射的情况下使用beetlsql默认自带的映射*/
       do {
-        super.createBean(sqlId, rs, type, props, columnToProperty);
+        T bean = super.createBean(sqlId, rs, type, props, columnToProperty);
+        results.add(bean);
       } while (rs.next());
     } else {
       /*复杂结果集映射，取消TailBean的便利性*/
@@ -131,7 +136,8 @@ public class JsonBeanProcessor extends BeanProcessor {
     if (null == mapping) {
       /*无映射的情况下使用beetlsql默认自带的映射*/
       do {
-        results.add(super.createBean(sqlId, rs, type, props, columnToProperty));
+        T bean = super.createBean(sqlId, rs, type, props, columnToProperty);
+        results.add(bean);
       } while (rs.next());
     } else {
       /*复杂结果集映射，取消TailBean的便利性*/

plus-admin/admin-core/src/main/java/com/ibeetl/admin/core/conf/jackson/serializer/DictTypeEnumDeserializer.java

+package com.ibeetl.admin.core.conf.jackson.serializer;
+
+import cn.hutool.core.util.ReflectUtil;
+import com.fasterxml.jackson.core.JsonGenerator;
+import com.fasterxml.jackson.core.JsonParser;
+import com.fasterxml.jackson.core.JsonProcessingException;
+import com.fasterxml.jackson.databind.DeserializationContext;
+import com.fasterxml.jackson.databind.JsonDeserializer;
+import com.fasterxml.jackson.databind.JsonSerializer;
+import com.fasterxml.jackson.databind.SerializerProvider;
+import com.ibeetl.admin.core.util.enums.DictTypeEnum;
+import java.io.IOException;
+
+public class DictTypeEnumDeserializer extends JsonDeserializer<DictTypeEnum> {
+
+
+  @Override
+  public DictTypeEnum deserialize(JsonParser p, DeserializationContext ctxt)
+      throws IOException, JsonProcessingException {
+    return null;
+  }
+}

plus-admin/admin-core/src/main/java/com/ibeetl/admin/core/conf/springmvc/convert/StringToDictTypeEnumConverFactory.java → plus-admin/admin-core/src/main/java/com/ibeetl/admin/core/conf/springmvc/convert/StringToDictTypeEnumConverterFactory.java

@@ -6,7 +6,13 @@ import java.util.Map;
 import org.springframework.core.convert.converter.Converter;
 import org.springframework.core.convert.converter.ConverterFactory;
 
-public class StringToDictTypeEnumConverFactory implements ConverterFactory<String, DictTypeEnum> {
+/**
+ * 描述：request参数转换分为两种：body传值和非body。这个转换工厂是非body，也就是不加注解{@link
+ * org.springframework.web.bind.annotation.RequestBody}
+ *
+ * @author 一日看尽长安花
+ */
+public class StringToDictTypeEnumConverterFactory implements ConverterFactory<String, DictTypeEnum> {
   private static final Map<Class, Converter> CONVERTERS = MapUtil.newHashMap();
 
   /**

plus-admin/admin-core/src/main/java/com/ibeetl/admin/core/entity/CoreUserRole.java

 package com.ibeetl.admin.core.entity;
 
-import java.time.LocalDateTime;
-import java.time.ZonedDateTime;
 import java.util.Date;
-
 import javax.validation.constraints.NotNull;
-
+import lombok.Data;
 import org.beetl.sql.core.annotatoin.AutoID;
 import org.beetl.sql.core.annotatoin.SeqID;
 
@@ -13,6 +10,7 @@ import org.beetl.sql.core.annotatoin.SeqID;
  *  用户角色关系
  * gen by beetlsql 2016-11-22
  */
+@Data
 public class CoreUserRole extends BaseEntity {
 
   // 自增id
@@ -30,54 +28,4 @@ public class CoreUserRole extends BaseEntity {
   private Long userId;
 
   protected Date createTime;
-
-  protected ZonedDateTime updateTime;
-
-  public Long getId() {
-    return id;
-  }
-
-  public void setId(Long id) {
-    this.id = id;
-  }
-
-  public Long getOrgId() {
-    return orgId;
-  }
-
-  public void setOrgId(Long orgId) {
-    this.orgId = orgId;
-  }
-
-  public Long getRoleId() {
-    return roleId;
-  }
-
-  public void setRoleId(Long roleId) {
-    this.roleId = roleId;
-  }
-
-  public Long getUserId() {
-    return userId;
-  }
-
-  public void setUserId(Long userId) {
-    this.userId = userId;
-  }
-
-  public Date getCreateTime() {
-    return createTime;
-  }
-
-  public void setCreateTime(Date createTime) {
-    this.createTime = createTime;
-  }
-
-  public ZonedDateTime getUpdateTime() {
-    return updateTime;
-  }
-
-  public void setUpdateTime(ZonedDateTime updateTime) {
-    this.updateTime = updateTime;
-  }
 }

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

 /*
  * @Author: 一日看尽长安花
  * @since: 2019-09-04 20:55:14
- * @LastEditTime: 2020-03-15 10:59:27
+ * @LastEditTime: 2020-04-25 19:50:39
  * @LastEditors: 一日看尽长安花
  * @Description:
  */
@@ -14,7 +14,7 @@ export function login(data) {
     data
   });
 }
-
+/*用于vue-store中使用，获取当前用户的信息*/
 export function getInfo(token) {
   return request({
     url: '/user/info',
@@ -30,6 +30,10 @@ export function logout() {
   });
 }
 
+/**
+ * 用户管理页的数据
+ * @param {*} params
+ */
 export function users(params) {
   return request({
     url: '/users',
@@ -37,6 +41,16 @@ export function users(params) {
     params
   });
 }
+/**
+ * 通过用户id获取指定用户数据
+ * @param {*} params
+ */
+export function getUserById(params) {
+  return request({
+    url: `/users/${params.id}`,
+    method: 'get'
+  });
+}
 
 export function usersMetadata() {
   return request({
@@ -60,7 +74,10 @@ export function updateUserData(data) {
     data
   });
 }
-
+/**
+ * 删除用户管理页面的数据
+ * @param {*} data
+ */
 export function deleteUserData(data) {
   return request({
     url: '/users',
@@ -68,7 +85,10 @@ export function deleteUserData(data) {
     data
   });
 }
-
+/**
+ * 导出用户管理页面中符合当前查询条件的数据Excel表格
+ * @param {*} data
+ */
 export function exportExcelUserData(data) {
   return request({
     url: '/users/excel/export',
@@ -76,7 +96,10 @@ export function exportExcelUserData(data) {
     data
   });
 }
-
+/**
+ * 获取用户管理-操作角色页面的数据
+ * @param {*} params
+ */
 export function getUserRoles(params) {
   return request({
     url: '/users/roles',
@@ -84,3 +107,14 @@ export function getUserRoles(params) {
     params
   });
 }
+/**
+ * 用户操作角色授权
+ * @param {Object} data
+ */
+export function addUserRoles(data) {
+  return request({
+    url: '/users/roles',
+    method: 'post',
+    data
+  });
+}

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

 <!--
  * @Author: 一日看尽长安花
  * @since: 2019-10-12 16:14:37
- * @LastEditTime: 2020-03-31 16:31:49
+ * @LastEditTime: 2020-04-10 20:47:33
  * @LastEditors: 一日看尽长安花
  * @Description:
  -->
@@ -11,7 +11,7 @@
     <el-form
       ref="filterForm"
       :size="size"
-      :model="filterData"
+      :model="slots.filterData"
       @submit.native.prevent
     >
       <!-- 循环元数据构建搜索面板：除了下拉框 -->
@@ -23,7 +23,7 @@
         <el-form-item>
           <el-input
             v-if="judgeType(val.type, 'string')"
-            v-model="filterData[key]"
+            v-model="slots.filterData[key]"
             :placeholder="val.name"
             :clearable="true"
             style="width: 200px;"
@@ -34,7 +34,7 @@
             style="display: inline-block;position: relative;top: -0.3rem;"
           >
             <el-date-picker
-              v-model="filterData[key + '_start']"
+              v-model="slots.filterData[key + '_start']"
               type="datetime"
               value-format="timestamp"
               :placeholder="val.name + '开始时间'"
@@ -42,7 +42,7 @@
             </el-date-picker>
 
             <el-date-picker
-              v-model="filterData[key + '_end']"
+              v-model="slots.filterData[key + '_end']"
               type="datetime"
               value-format="timestamp"
               :placeholder="val.name + '结束时间'"
@@ -52,7 +52,7 @@
         </el-form-item>
       </div>
       <!-- 用于面板中的自定义表单，例如级联选择器，并通过作用域插槽的方式将数据传递给自定义表单 -->
-      <slot name="filter-condition" :filter-data="filterData"> </slot>
+      <slot name="filter-condition" :filter-data="slots"> </slot>
       <div class="sp-search-btn-container">
         <el-button
           ref="searchButton"
@@ -79,7 +79,7 @@
         添加
       </el-button>
       <!-- 用于面板中的自定义功能按钮，例如导入导出按钮等，并通过作用域插槽的方式将数据传递给自定义表单 -->
-      <slot name="operation-btn-group" :filter-data="filterData"> </slot>
+      <slot name="operation-btn-group" :filter-data="slots"> </slot>
     </div>
   </div>
 </template>
@@ -100,7 +100,9 @@ export default {
   data() {
     return {
       size: 'mini',
+      slots: {
         filterData: {}
+      }
     };
   },
   computed: {
@@ -122,10 +124,10 @@ export default {
     judgeType(str1, type) {
       return equalsIgnoreCase(str1, type);
     },
-    filterSearch(filterData) {
+    filterSearch(event) {
       this.$refs['filterForm'].validate(valid => {
         if (valid) {
-          this.$emit('filter-search', this.filterData);
+          this.$emit('filter-search', this.slots.filterData);
         } else {
           this.$notify({
             title: 'Faild',

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

 <!--
  * @Author: 一日看尽长安花
  * @since: 2019-10-12 16:14:37
- * @LastEditTime: 2020-03-23 14:24:32
+ * @LastEditTime: 2020-04-16 20:45:56
  * @LastEditors: 一日看尽长安花
  * @Description:
  -->
@@ -24,7 +24,7 @@
       <el-form
         ref="editFormGP"
         :rules="rules"
-        :model="dialogData"
+        :model="slots.dialogData"
         label-position="right"
         label-width="10vw"
         class="sp-form"
@@ -37,7 +37,7 @@
         >
           <el-input
             v-if="judgeType(val.type, 'string')"
-            v-model="dialogData[key]"
+            v-model="slots.dialogData[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="dialogData[key]"
+            v-model="slots.dialogData[key]"
             type="datetime"
             value-format="timestamp"
             :placeholder="val.name + '时间'"
@@ -54,7 +54,7 @@
           </el-date-picker>
         </el-form-item>
         <!-- 用于面板中的自定义表单元素，例如级联选择器，并通过作用域插槽的方式将数据传递给自定义表单 -->
-        <slot :dialog-data="dialogData" name="dialog-form-item"></slot>
+        <slot :dialog-data="slots" name="dialog-form-item"></slot>
       </el-form>
     </div>
     <template v-slot:footer>
@@ -111,7 +111,11 @@ export default {
     }
   },
   data() {
-    return {};
+    return {
+      slots: {
+        dialogData: {}
+      }
+    };
   },
   computed: {
     // 计算属性的 getter
@@ -127,6 +131,11 @@ export default {
       return _metadata;
     }
   },
+  watch: {
+    dialogData: function(newVal, oldVal) {
+      this.slots.dialogData = newVal;
+    }
+  },
   methods: {
     judgeType(str1, type) {
       return equalsIgnoreCase(str1, type);
@@ -134,8 +143,11 @@ export default {
     createData() {
       this.$refs['editFormGP'].validate(valid => {
         if (valid) {
-          this.$emit('create-data', this.dialogData);
+          this.$emit('create-data', this.slots.dialogData);
           this.$emit('update:dialogVisible', false);
+          this.$nextTick(() => {
+            this.slots.dialogData = {};
+          });
         } else {
           this.$notify({
             title: '失败',
@@ -149,8 +161,11 @@ export default {
     updateData() {
       this.$refs['editFormGP'].validate(valid => {
         if (valid) {
-          this.$emit('update-data', this.dialogData);
+          this.$emit('update-data', this.slots.dialogData);
           this.$emit('update:dialogVisible', false);
+          this.$nextTick(() => {
+            this.slots.dialogData = {};
+          });
         } else {
           this.$notify({
             title: '失败',
@@ -162,7 +177,7 @@ export default {
       });
     },
     openDialog() {
-      /* 参照vue中 .sync 修饰符章节，方便的刷新父组件的dialogVisible值*/
+      /** 参照vue中 .sync 修饰符章节，方便的刷新父组件的dialogVisible值 */
       this.$emit('update:dialogVisible', true);
     },
     closeDialog() {

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

 <!--
  * @Author: 一日看尽长安花
  * @since: 2019-10-12 15:43:18
- * @LastEditTime: 2020-03-31 16:55:00
+ * @LastEditTime: 2020-04-11 19:55:13
  * @LastEditors: 一日看尽长安花
  * @Description: 后台管理页面的自动生成，
  * 主要暴露了分页方法、数据表格搜索方法、条件查询方法、增删改方法
@@ -15,8 +15,8 @@
       @filter-search="filterSearch"
       @handle-create="handleCreate"
     >
-      <template #filter-condition="{filterData:filterData}">
-        <slot name="filter-condition" :filter-data="filterData"> </slot>
+      <template #filter-condition="{filterData:slots}">
+        <slot name="filter-condition" :filter-data="slots"> </slot>
       </template>
       <template #operation-btn-group>
         <slot name="operation-btn-group"> </slot>
@@ -45,8 +45,8 @@
     >
       <!-- #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 #dialog-form-item="{dialogData:slots}">
+        <slot :dialog-data="slots" name="dialog-form-item"></slot>
       </template>
     </detail-page>
   </div>
@@ -99,7 +99,8 @@ export default {
       // 对话框标题
       dialogTitle: '创建',
       // 对话框操作类型
-      operationType: 'create'
+      operationType: 'create',
+      testData: {}
     };
   },
   methods: {

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

+<!--
+ * @Author: 一日看尽长安花
+ * @since: 2020-04-06 19:31:15
+ * @LastEditTime: 2020-04-26 12:40:27
+ * @LastEditors: 一日看尽长安花
+ * @Description: 使用时，必须指定一个key。不然多个组件之间会共用生命周期
+ *  请保持jsonPaths和labels数组的长度一致，同时保持和级联器的层级个数一致
+ *  如果jsonPaths是一个元素在其中，会提取出来作为唯一选中值。
+ *  对于级联器的handleChange事件，会同时修改jsonPaths和labels中的节点值，
+ *  确保级联器的效果和labels指定的传值参数
+ -->
+<template>
+  <el-cascader
+    :key="Math.random()"
+    v-model="selectedValue"
+    :props="props"
+    :options="options"
+    :clearable="true"
+    :show-all-levels="false"
+    :placeholder="placeholder"
+    @change="handleChange"
+  ></el-cascader>
+</template>
+<script>
+export default {
+  name: 'SpCascader',
+  model: {
+    prop: 'model',
+    event: 'updateModel'
+  },
+  props: {
+    /**
+     * 因为插槽的传值是无法修改的，绕过这个机制
+     * 插槽传值时往上加一层root节点就行了
+     */
+    model: {
+      type: Object,
+      required: true,
+      default: function() {
+        return {};
+      }
+    },
+    /** 在model中表示级联器选中值的json path数组，参考job_type的使用 */
+    jsonPaths: {
+      type: Array,
+      required: true,
+      default: function() {
+        return undefined;
+      }
+    },
+    props: {
+      type: Object,
+      required: true,
+      default: function() {
+        return null;
+      }
+    },
+    options: {
+      type: Array,
+      required: true,
+      default: function() {
+        return null;
+      }
+    },
+    placeholder: {
+      type: String,
+      default: function() {
+        return undefined;
+      }
+    },
+    /**
+     * 每一级对应的传值参数名，请按照顺序书写
+     * */
+    labels: {
+      type: Array,
+      required: true,
+      default: function() {
+        return null;
+      }
+    }
+  },
+  data() {
+    return {
+      selectedValue: []
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      for (let i = 0; i < this.jsonPaths.length; i++) {
+        const jsonPath = this.jsonPaths[i];
+        const val = this.$lodash.get(this.model, jsonPath);
+        this.selectedValue.push(val);
+      }
+      if (this.selectedValue.length === 1) {
+        this.selectedValue = this.selectedValue[0];
+      }
+    },
+    handleChange() {
+      let convertedValueObj = this.handleCascaderValue();
+      let sp_cascader = this.model['sp_cascader'];
+      convertedValueObj['sp_cascader'] = {
+        ...convertedValueObj['sp_cascader'],
+        ...sp_cascader
+      };
+      const updatedModel = this.$lodash.assignIn(
+        {},
+        this.model,
+        convertedValueObj
+      );
+      this.$emit('updateModel', updatedModel);
+    },
+    handleCascaderValue() {
+      const keyNames = this.labels;
+      let selValArray = this.selectedValue || [];
+      const index =
+        selValArray.length - keyNames.length <= 0
+          ? 0
+          : selValArray.length - keyNames.length;
+      let resObj = {};
+      for (let i = index, j = 0; i < selValArray.length; i++, j++) {
+        this.$lodash.set(resObj, 'sp_cascader.' + keyNames[j], selValArray[i]);
+        this.$lodash.set(resObj, this.jsonPaths[j], selValArray[i]);
+      }
+      return resObj;
+    }
+  }
+};
+</script>

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

 /*
  * @Author: 一日看尽长安花
  * @since: 2020-01-13 23:12:07
- * @LastEditTime: 2020-03-09 19:32:36
+ * @LastEditTime: 2020-04-19 20:32:05
  * @LastEditors: 一日看尽长安花
  * @Description: 与业务有关的非纯api的js
  */
 import { layzyLoadDicts, immaditeLoadDicts } from '@/api/dict';
+import { assignIn, get, omit } from 'lodash';
 
 /**
  * @description: 异步载入级联器的数据
@@ -36,22 +37,22 @@ export function layzyLoadDictTree(node, resolve, type) {
 }
 
 /**
- * @description: 将json中一个key值为数组的每个值转成指定的key-value，主要用于el中的级联选择器
- * @param {obj} 包含选中值的对象
- * @param {arrayKey} 数组的key
- * @param {keyNames} 转换后的 key 名称级，必须按照数组中每个值的顺序对应
- * @returns {Object} 包含转换后的 key-value 值
+ * @description: 用sp-cascader组件，其所有的参数值挂在sp_cascader节点下。
+ * @param keyNames 级联属性key
+ * @returns {Object}
  */
-export function handleCascaderValue(obj, arrayKey, keyNames) {
-  let selValArray = obj[arrayKey] || [];
-  let resObj = {};
-  for (var i in selValArray) {
-    if (keyNames.length === 1) {
-      resObj[keyNames[0]] = selValArray[i];
-    } else {
-      resObj[keyNames[i]] = selValArray[i];
+export function handleCascaderValue(obj, keyNames = []) {
+  const sp_cascader = obj['sp_cascader'];
+  assignIn(obj, sp_cascader);
+  delete obj['sp_cascader'];
+  delete obj['spCascader'];
+  for (let i in keyNames) {
+    const path = keyNames[i];
+    const node = get(obj, path);
+    const node_type = Object.prototype.toString.call(node);
+    if (node_type !== '[object String]') {
+      obj = omit(obj, path);
     }
   }
-  delete obj[arrayKey];
-  return Object.assign({}, obj, resObj);
+  return obj;
 }

ve-admin/admin-web/src/views/users/add-user-role.vue

 <!--
  * @Author: 一日看尽长安花
  * @since: 2020-04-05 13:21:44
- * @LastEditTime: 2020-04-06 11:52:20
+ * @LastEditTime: 2020-04-26 18:32:27
  * @LastEditors: 一日看尽长安花
  * @Description:
  -->
@@ -10,33 +10,48 @@
     <el-dialog
       :fullscreen="true"
       :center="true"
-      :destroy-on-close="false"
+      :destroy-on-close="true"
       :show-close="false"
       :title="title"
       :visible="visible"
       :close-on-click-modal="false"
-      @open="openDialog"
       @close="closeDialog"
     >
-      <div class="dialog-container">
+      <div class="sp-dialog-container">
         <el-form
-          ref="editFormGP"
-          :model="dialogData"
+          ref="editForm"
+          :model="dialogData_"
           label-position="right"
           label-width="10vw"
           class="sp-form"
         >
           <el-form-item label="用户名">
-            <el-input v-model="model"></el-input>
+            <el-input v-model="dialogData_['name']" :disabled="true"></el-input>
           </el-form-item>
           <el-form-item label="用户账号">
-            <el-input v-model="model"></el-input>
+            <el-input v-model="dialogData_['code']" :disabled="true"></el-input>
           </el-form-item>
           <el-form-item label="选择部门">
-            <el-cascader v-model="" :options="" @change=""> </el-cascader>
+            <sp-cascader
+              :key="Math.random()"
+              v-model="dialogData_"
+              :json-paths="['org_id']"
+              :labels="['org_id']"
+              :props="orgIdCascaderProps"
+              :options="orgIdCascaderProps.options"
+              placeholder="选择部门"
+            ></sp-cascader>
           </el-form-item>
           <el-form-item label="选择角色">
-            <el-cascader v-model="" :options="" @change=""> </el-cascader>
+            <sp-cascader
+              :key="Math.random()"
+              v-model="dialogData_"
+              :json-paths="['role_id']"
+              :labels="['role_id']"
+              :props="roleIdCascaderProps"
+              :options="roleIdCascaderProps.options"
+              placeholder="选择角色"
+            ></sp-cascader>
           </el-form-item>
         </el-form>
       </div>
@@ -54,29 +69,79 @@
   </div>
 </template>
 <script>
+import SpCascader from '@/components/Wrapper/SpCascader';
+import { addUserRoles } from '@/api/user';
+import { handleCascaderValue } from '@/services/dict';
 export default {
   name: 'AddUserRole',
+  components: { SpCascader },
   props: {
+    dialogData: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
     title: {
       type: String,
       default: '添加角色'
+    },
+    orgIdCascaderProps: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    },
+    roleIdCascaderProps: {
+      type: Object,
+      default: function() {
+        return {};
+      }
     }
   },
   data() {
     return {
-      visible: false,
-      dialogData: {}
+      dialogData_: { ...this.dialogData }
     };
   },
   methods: {
-    openDialog() {
-      this.visible = true;
+    init() {
+      this.$emit('update:visible', false);
     },
     closeDialog() {
-      this.visible = false;
+      this.init();
     },
-    createUserRole() {}
+    createUserRole() {
+      debugger;
+      const Vue = this;
+      handleCascaderValue(Vue.dialogData_, ['orgId', 'roleId']);
+      let params = {
+        user_id: Vue.dialogData_.id,
+        name: Vue.dialogData_.name,
+        code: Vue.dialogData_.code,
+        org_id: Vue.dialogData_.org_id,
+        role_id: Vue.dialogData_.role_id
+      };
+      addUserRoles(params).then(response => {
+        const { code, message, data } = { ...response };
+        Vue.$nextTick(() => {
+          Vue.init();
+        });
+      });
+    }
   }
 };
 </script>
-<style scoped></style>
+<style scoped>
+.sp-dialog-container {
+  margin: 0 auto;
+  width: 50%;
+}
+.el-cascader {
+  width: 100%;
+}
+</style>

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

 <!--
  * @Author: 一日看尽长安花
  * @since: 2019-10-12 15:43:18
- * @LastEditTime: 2020-04-03 20:52:21
+ * @LastEditTime: 2020-04-26 18:31:56
  * @LastEditors: 一日看尽长安花
  * @Description:
  -->
@@ -19,39 +19,44 @@
       @update-data="updateData"
     >
       <!-- 往搜索栏中添加搜索条件 -->
-      <template #filter-condition="{filterData:filterData}">
+      <template #filter-condition="{filterData:slots}">
         <div class="filter-item-container">
           <el-form-item>
-            <el-cascader
-              v-model="filterData['orgId']"
+            <sp-cascader
+              :key="Math.random()"
+              v-model="slots.filterData"
+              :json-paths="['org.id']"
+              :labels="['org_id']"
               :props="orgIdCascaderProps"
               :options="orgIdCascaderProps.options"
-              :show-all-levels="false"
-              clearable
               placeholder="部门"
-            ></el-cascader>
+            ></sp-cascader>
           </el-form-item>
         </div>
         <div class="filter-item-container">
           <el-form-item>
-            <el-cascader
-              v-model="filterData['jobType']"
+            <sp-cascader
+              :key="Math.random()"
+              v-model="slots.filterData"
+              :json-paths="['job_type0.value', 'job_type1.value']"
+              :labels="['job_type0', 'job_type1']"
               :props="jobTypeCascaderProps"
               :options="jobTypeCascaderProps.options"
-              clearable
               placeholder="岗位/职务"
-            ></el-cascader>
+            ></sp-cascader>
           </el-form-item>
         </div>
         <div class="filter-item-container">
           <el-form-item>
-            <el-cascader
-              v-model="filterData['state']"
+            <sp-cascader
+              :key="Math.random()"
+              v-model="slots.filterData"
+              :json-paths="['state.value']"
+              :labels="['state']"
               :props="stateCascaderProps"
               :options="stateCascaderProps.options"
-              clearable
               placeholder="状态"
-            ></el-cascader>
+            ></sp-cascader>
           </el-form-item>
         </div>
       </template>
@@ -79,45 +84,49 @@
         </el-button>
       </template>
       <!-- 编辑弹窗的插槽 -->
-      <template #dialog-form-item="{dialogData:dialogData}">
+      <template #dialog-form-item="{dialogData:slots}">
         <el-form-item key="orgIdKey" label="所在机构" prop="org_id">
-          <el-cascader
-            v-model="dialogData['org_id_value']"
+          <sp-cascader
+            :key="Math.random()"
+            v-model="slots.dialogData"
+            :json-paths="['org.id']"
+            :labels="['org_id']"
             :props="orgIdCascaderProps"
             :options="orgIdCascaderProps.options"
-            :show-all-levels="false"
-            clearable
             placeholder="所在机构"
             class="sp-form-item"
-          ></el-cascader>
+          ></sp-cascader>
         </el-form-item>
         <el-form-item key="jobTypeKey" label="岗位职务" prop="job_type">
-          <el-cascader
-            v-model="dialogData['job_type_value']"
+          <sp-cascader
+            :key="Math.random()"
+            v-model="slots.dialogData"
+            :json-paths="['job_type0.value', 'job_type1.value']"
+            :labels="['job_type0', 'job_type1']"
             :props="jobTypeCascaderProps"
             :options="jobTypeCascaderProps.options"
-            :show-all-levels="false"
-            clearable
             placeholder="岗位职务"
             class="sp-form-item"
-          ></el-cascader>
+          ></sp-cascader>
         </el-form-item>
         <el-form-item key="stateKey" label="用户状态" prop="state">
-          <el-cascader
-            v-model="dialogData['state_value']"
+          <sp-cascader
+            :key="Math.random()"
+            v-model="slots.dialogData"
+            :json-paths="['state.value']"
+            :labels="['state']"
             :props="stateCascaderProps"
             :options="stateCascaderProps.options"
-            :show-all-levels="false"
-            clearable
             placeholder="用户状态"
             class="sp-form-item"
-          ></el-cascader>
+          ></sp-cascader>
         </el-form-item>
 
         <el-form-item key="fileKey" label="上传文档" prop="file">
           <file-upload
+            :key="Math.random()"
             ref="fileUpload"
-            :file-batch-id="dialogData.attachment_id"
+            :file-batch-id="slots.dialogData.attachment_id"
             :on-success="onUploadSuccess"
           >
             <el-button slot="trigger" size="small" type="primary">
@@ -132,7 +141,7 @@
               上传到服务器
             </el-button>
             <div slot="tip" class="el-upload__tip">
-              只能上传jpg/png文件，且不超过500kb
+              只能上传word/pdf文档，且不超过2MB
             </div>
           </file-upload>
         </el-form-item>
@@ -144,6 +153,7 @@
 <script>
 import GeneralPage from '@/components/GeneralPage';
 import FileUpload from '@/components/Upload/FileUpload';
+import SpCascader from '@/components/Wrapper/SpCascader';
 
 import {
   users,
@@ -161,7 +171,7 @@ import { layzyLoadOrgTree } from '@/services/org';
 
 export default {
   name: 'CoreUsersView',
-  components: { GeneralPage, FileUpload },
+  components: { GeneralPage, FileUpload, SpCascader },
   props: {},
   data() {
     return {
@@ -226,32 +236,16 @@ export default {
         });
     },
     obtainData(queryParams) {
-      this.loading = true;
-      queryParams = handleCascaderValue(queryParams, 'orgId', ['org_id']);
-      queryParams = handleCascaderValue(queryParams, 'jobType', [
+      queryParams = handleCascaderValue(queryParams, [
+        'state',
         'job_type0',
         'job_type1'
       ]);
-      queryParams = handleCascaderValue(queryParams, 'state', ['state']);
+      this.loading = true;
       const _lodash = this.$lodash;
       users(queryParams)
         .then(result => {
           const { code, data } = { ...result };
-          /**
-           * 这一步是因为编辑弹窗在创建时，v-model不能使用json多级获取，不然会报错；
-           * 所以将其处理为一级节点
-           */
-          for (let i in result.data) {
-            let item = result.data[i];
-            item['org_id_value'] = _lodash.get(item, 'org.id');
-            item['state_value'] = _lodash.get(item, 'state.value');
-            if (item['job_type0']) {
-              item['job_type_value'] = _lodash.get(item, 'job_type0.value');
-            }
-            if (item['job_type1']) {
-              item['job_type_value'] = _lodash.get(item, 'job_type1.value');
-            }
-          }
           this.tabledata = Object.assign({}, result);
         })
         .catch(err => {})
@@ -271,16 +265,11 @@ export default {
       this.obtainData(Object.assign({ page: 1, limit: 10 }, queryParams));
     },
     createData(dialogData) {
-      dialogData = this.handleEditorDataObject(dialogData, 'org_id_value', {
-        org_id: 'org.id'
-      });
-      dialogData = this.handleEditorDataObject(dialogData, 'state_value', {
-        state: 'state.value'
-      });
-      dialogData = this.handleEditorDataObject(dialogData, 'job_type_value', {
-        job_type0: 'job_type0.value',
-        job_type1: 'job_type1.value'
-      });
+      dialogData = handleCascaderValue(dialogData, [
+        'state',
+        'job_type0',
+        'job_type1'
+      ]);
       const Vue = this;
       saveUserData(dialogData)
         .then(result => {
@@ -306,16 +295,11 @@ export default {
         });
     },
     updateData(dialogData) {
-      dialogData = this.handleEditorDataObject(dialogData, 'org_id_value', {
-        org_id: 'org.id'
-      });
-      dialogData = this.handleEditorDataObject(dialogData, 'state_value', {
-        state: 'state.value'
-      });
-      dialogData = this.handleEditorDataObject(dialogData, 'job_type_value', {
-        job_type0: 'job_type0.value',
-        job_type1: 'job_type1.value'
-      });
+      dialogData = handleCascaderValue(dialogData, [
+        'state',
+        'job_type0',
+        'job_type1'
+      ]);
       const Vue = this;
       updateUserData(dialogData)
         .then(result => {
@@ -325,8 +309,8 @@ export default {
            *  将回调延迟到下次 DOM 更新循环之后执行。
            * 而数据更新就代表dom更新，所以如果创建成功，数据就会更新
            */
-          this.$nextTick(() => {
-            this.$notify({
+          thVueis.$nextTick(() => {
+            Vue.$notify({
               title: '成功',
               message: '修改成功1',
               type: 'success',
@@ -335,8 +319,8 @@ export default {
           });
         })
         .catch(err => {
-          this.$nextTick(() => {
-            this.$notify({
+          Vue.$nextTick(() => {
+            Vue.$notify({
               title: '失败',
               message: '修改用户失败',
               type: 'error',
@@ -405,12 +389,6 @@ export default {
       let queryParams = this.$lodash.mapValues(
         this.$children[0].$refs.searchPaneGP.$data.filterData
       );
-      queryParams = handleCascaderValue(queryParams, 'orgId', ['org_id']);
-      queryParams = handleCascaderValue(queryParams, 'jobType', [
-        'job_type0',
-        'job_type1'
-      ]);
-      queryParams = handleCascaderValue(queryParams, 'state', ['state']);
       /**
        * 导出Excel文件的两步：
        * 1、通过查询条件由后台生成Excel临时文件，返回临时文件path
@@ -423,8 +401,18 @@ export default {
       });
     },
     editUserRoles() {
+      const _table = this.$children[0].$refs.dataTableGP.$refs.dataTable;
+      const isSelection = _table.selection.length > 0 ? true : false;
+      if (!isSelection) {
+        this.$message({
+          type: 'warning',
+          message: '请选择一行数据'
+        });
+        return;
+      }
+      const _selected = _table.selection[0];
       const _router = this.$router;
-      _router.push({ name: 'ManagerUserRole', params: { id: 1 } });
+      _router.push({ name: 'ManagerUserRole', params: { id: _selected.id } });
     }
   }
 };

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

 <!--
  * @Author: 一日看尽长安花
  * @since: 2020-03-29 16:00:50
- * @LastEditTime: 2020-04-05 18:17:17
+ * @LastEditTime: 2020-04-23 14:06:39
  * @LastEditors: 一日看尽长安花
  * @Description:
  -->
@@ -93,14 +93,23 @@
       :limit.sync="queryParams.limit"
       @pagination="pagination"
     />
-    <add-user-role ref="editDialog" :title="dialogTitle"> </add-user-role>
+    <add-user-role
+      :key="Math.random()"
+      ref="editDialog"
+      :dialog-data="dialogData"
+      :title="dialogTitle"
+      :visible.sync="visible"
+      :org-id-cascader-props="orgIdCascaderProps"
+      :role-id-cascader-props="roleIdCascaderProps"
+    >
+    </add-user-role>
   </div>
 </template>
 <script>
 import Pagination from '@/components/Pagination';
 import { immaditeLoadRoles } from '@/api/role';
 import { immaditeLoadOrgs } from '@/api/org';
-import { getUserRoles } from '@/api/user';
+import { getUserRoles, getUserById } from '@/api/user';
 import AddUserRole from './add-user-role';
 
 export default {
@@ -124,7 +133,9 @@ export default {
         page: 1,
         limit: 10
       },
-      dialogTitle: ''
+      dialogTitle: '',
+      dialogData: {},
+      visible: false
     };
   },
   mounted() {
@@ -146,12 +157,17 @@ export default {
       const { code, data } = { ...result };
       this.tableData = data;
     });
+    getUserById({ id: this.id }).then(result => {
+      const { code, data } = { ...result };
+      this.dialogData = data;
+    });
   },
   methods: {
     filterSearch() {},
     pagination(pageParams) {},
     showDialog() {
-      this.$refs.editDialog.openDialog();
+      this.dialogTitle = '创建角色';
+      this.visible = true;
     },
     deleteUserRole() {
       const _table = this.$refs.dataTable;
@@ -165,7 +181,6 @@ export default {
       }
       const _selList = _table.selection;
       const ids = _selList.map(item => item.id);
-      debugger;
     }
   }
 };