合并

CODE/smart-community/operate-api/src/main/java/com/community/huiju/OperateApplication.java

 	public HttpMessageConverters fastJsonConfigure(){
 		FastJsonHttpMessageConverter converter = new FastJsonHttpMessageConverter();
 		FastJsonConfig fastJsonConfig = new FastJsonConfig();
-		fastJsonConfig.setSerializerFeatures(SerializerFeature.PrettyFormat);
+		fastJsonConfig.setSerializerFeatures(SerializerFeature.PrettyFormat,SerializerFeature.DisableCircularReferenceDetect,SerializerFeature.WriteMapNullValue);
 		//日期格式化
 		//fastJsonConfig.setDateFormat("yyyy-MM-dd HH:mm:ss");
 		converter.setFastJsonConfig(fastJsonConfig);

CODE/smart-community/operate-api/src/main/java/com/community/huiju/controller/SysRoleController.java

 package com.community.huiju.controller;
 
 import com.community.commom.mode.ResponseBean;
+import com.community.commom.session.UserElement;
 import com.community.huiju.common.base.BaseController;
 import com.community.huiju.service.IToSysRoleService;
 import io.swagger.annotations.Api;
         return responseBean;
     }
 
+    @RequestMapping(value = "/role/add", method = RequestMethod.POST)
+    @ApiOperation(value = "添加角色", notes = "添加角色")
+    @ApiImplicitParams({
+            @ApiImplicitParam(dataTypeClass = String.class, paramType = "header", name = "X-Auth-Token", value = "Token"),
+            @ApiImplicitParam(dataTypeClass = String.class, paramType = "body", name = "parameter", value = "roleName角色名称;description描述;menuArray菜单id集合")
+    })
+    public ResponseBean addRole(@RequestBody String parameter,
+                                   HttpSession session){
+        ResponseBean responseBean = new ResponseBean();
+        UserElement userElement = getUserElement(session);
+        responseBean = iToSysRoleService.addRole(parameter, userElement);
+        return responseBean;
+    }
+
 
 }

CODE/smart-community/operate-api/src/main/java/com/community/huiju/dao/ToSysMenuMapper.java

      * @return
      */
     List<ToSysMenu> selectParentId(@Param("parentId") Integer parentId, @Param("menuType") Integer menuType);
+
+    /**
+     * 批量添加 菜单
+     * @param menuList
+     * @return
+     */
+    int banchInsert (List<ToSysMenu> menuList);
 }

CODE/smart-community/operate-api/src/main/java/com/community/huiju/dao/ToSysRoleMapper.java

 package com.community.huiju.dao;
 
+import com.community.huiju.model.ToSysMenu;
 import com.community.huiju.model.ToSysRole;
 import org.apache.ibatis.annotations.Mapper;
 import org.apache.ibatis.annotations.Param;
      * @return
      */
     List<ToSysRole> selectAll(@Param("roleName") String roleName);
+
+    /**
+     * 根据 角色名称 查询
+     * @param roleName
+     * @return
+     */
+    ToSysRole selectByRoleName(@Param("roleName") String roleName);
+
+
 }

CODE/smart-community/operate-api/src/main/java/com/community/huiju/dao/ToSysRoleMenuMapper.java

 import com.community.huiju.model.ToSysRoleMenu;
 import org.apache.ibatis.annotations.Mapper;
 
+import java.util.List;
+
 @Mapper
 public interface ToSysRoleMenuMapper {
     int deleteByPrimaryKey(Integer id);
     int updateByPrimaryKeySelective(ToSysRoleMenu record);
 
     int updateByPrimaryKey(ToSysRoleMenu record);
+
+    /**
+     * 批量插入
+     * @param list
+     * @return
+     */
+    int banchInsert(List<ToSysRoleMenu> list);
 }

CODE/smart-community/operate-api/src/main/java/com/community/huiju/service/IToSysRoleService.java

 package com.community.huiju.service;
 
 import com.community.commom.mode.ResponseBean;
+import com.community.commom.session.UserElement;
 import com.community.huiju.model.ToSysRole;
 
 import java.util.List;
      * @return
      */
     ResponseBean getAll(String parameter);
+
+    /**
+     * 添加角色
+     * @param parameter
+     * @param userElement 用户登录信息体
+     * @return
+     */
+    ResponseBean addRole(String parameter, UserElement userElement);
 }

CODE/smart-community/operate-api/src/main/java/com/community/huiju/service/impl/ToSysMenuServiceImpl.java

     private List<ToSysMenu> getMenu (Integer parentId, Integer menuType){
         List<ToSysMenu> sysMenuList = toSysMenuMapper.selectParentId(parentId, menuType);
         if (CollectionUtils.isNotEmpty(sysMenuList)) {
-            sysMenuList.forEach(e -> getMenu(e.getId(), menuType));
+            sysMenuList.forEach(e -> e.setChildren(getMenu(e.getId(), menuType)));
         }
         return sysMenuList;
     }

CODE/smart-community/operate-api/src/main/java/com/community/huiju/service/impl/ToSysRoleServiceImpl.java

 
 import com.alibaba.fastjson.JSONObject;
 import com.community.commom.mode.ResponseBean;
-import com.community.huiju.dao.TaUserMapper;
-import com.community.huiju.dao.ToSysRoleMapper;
-import com.community.huiju.dao.ToUserMapper;
-import com.community.huiju.model.TaUser;
-import com.community.huiju.model.ToSysRole;
-import com.community.huiju.model.ToUser;
+import com.community.commom.session.UserElement;
+import com.community.huiju.dao.*;
+import com.community.huiju.exception.WisdomException;
+import com.community.huiju.model.*;
 import com.community.huiju.service.IToSysRoleService;
 import com.github.pagehelper.Page;
 import com.github.pagehelper.PageHelper;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
 
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
+import java.util.*;
 
+/**
+ * 角色业务
+ * @author weiximei
+ */
 @Service("iToSysRoleService")
 @Slf4j
 public class ToSysRoleServiceImpl implements IToSysRoleService {
     @Autowired
     private ToSysRoleMapper toSysRoleMapper;
 
+    @Autowired
+    private ToSysRoleMenuMapper toSysRoleMenuMapper;
+
     @Autowired
     private ToUserMapper toUserMapper;
 
         responseBean.addSuccess(resMap);
         return responseBean;
     }
+
+
+    @Override
+    @Transactional(rollbackFor = Exception.class)
+    public ResponseBean addRole(String parameter, UserElement userElement) {
+        ResponseBean responseBean = new ResponseBean();
+
+        JSONObject jsonObject = JSONObject.parseObject(parameter);
+        String roleName = jsonObject.getString("roleName");
+        String description = jsonObject.getString("description");
+        Integer [] menuIdArray = jsonObject.getJSONArray("menuArray").toArray(new Integer[] {});
+
+        // 校验这个角色是否存在
+        ToSysRole toSysRole = toSysRoleMapper.selectByRoleName(roleName);
+        if (toSysRole != null) {
+            responseBean.addError("角色已存在!");
+            return responseBean;
+        }
+
+        ToSysRole createRole = new ToSysRole();
+        createRole.setRoleName(roleName);
+        createRole.setDescription(description);
+        createRole.setUpdateUser(userElement.getId());
+        createRole.setCreateUser(userElement.getId());
+        createRole.setCreateDate(new Date());
+        createRole.setUpdateDate(new Date());
+        createRole.setStatus("1");
+        int rows = toSysRoleMapper.insertSelective(createRole);
+
+        List<ToSysRoleMenu> roleMenuList = new ArrayList<>();
+        for (Integer menuId : menuIdArray) {
+            ToSysRoleMenu toSysRoleMenu = new ToSysRoleMenu();
+            toSysRoleMenu.setMenuId(menuId);
+            toSysRoleMenu.setRoleId(createRole.getId());
+            roleMenuList.add(toSysRoleMenu);
+        }
+
+        rows = toSysRoleMenuMapper.banchInsert(roleMenuList);
+        if (rows <= 0) {
+            throw new WisdomException("创建角色失败!");
+        }
+        responseBean.addSuccess("操作成功!");
+        return responseBean;
+    }
 }

CODE/smart-community/operate-api/src/main/resources/mapper/ToSysMenuMapper.xml

       </if>
     </trim>
   </select>
+  <insert id="banchInsert" parameterType="list" >
+    insert into to_sys_menu (id, menu_name, menu_url,
+      menu_icon, parent_id, sort,
+      menu_type, status)
+    values
+    <foreach collection="menuList" index="index" item="item" separator=",">
+      (#{item.menuName,jdbcType=VARCHAR}, #{item.menuUrl,jdbcType=VARCHAR},
+      #{item.menuIcon,jdbcType=VARCHAR}, #{item.parentId,jdbcType=INTEGER}, #{item.sort,jdbcType=INTEGER},
+      #{item.menuType,jdbcType=CHAR}, #{item.status,jdbcType=CHAR})
+    </foreach>
+  </insert>
 </mapper>

CODE/smart-community/operate-api/src/main/resources/mapper/ToSysRoleMapper.xml

       #{status,jdbcType=CHAR}, #{createUser,jdbcType=INTEGER}, #{createDate,jdbcType=TIMESTAMP}, 
       #{updateUser,jdbcType=INTEGER}, #{updateDate,jdbcType=TIMESTAMP})
   </insert>
-  <insert id="insertSelective" parameterType="com.community.huiju.model.ToSysRole" >
+  <insert id="insertSelective" parameterType="com.community.huiju.model.ToSysRole" useGeneratedKeys="true" keyProperty="id" keyColumn="id">
     insert into to_sys_role
     <trim prefix="(" suffix=")" suffixOverrides="," >
       <if test="id != null" >
       </if>
     </where>
   </select>
+
+  <select id="selectByRoleName" parameterType="string" resultMap="BaseResultMap">
+    select
+    <include refid="Base_Column_List"/>
+    from to_sys_role
+    <where>
+        role_name = #{roleName,jdbcType=VARCHAR}
+    </where>
+  </select>
 </mapper>

CODE/smart-community/operate-api/src/main/resources/mapper/ToSysRoleMenuMapper.xml

       menu_id = #{menuId,jdbcType=INTEGER}
     where id = #{id,jdbcType=INTEGER}
   </update>
+
+  <insert id="banchInsert" parameterType="list">
+    insert into to_sys_role_menu (role_id, menu_id
+      )
+    values
+    <foreach collection="list" index="index" item="item" separator=",">
+      (#{item.roleId,jdbcType=INTEGER}, #{item.menuId,jdbcType=INTEGER})
+    </foreach>
+  </insert>
 </mapper>

CODE/smart-community/property-api/src/main/java/com/community/huiju/controller/RoleController.java

 	@Autowired
 	private RoleServiceI roleService;
 	
-	@ApiOperation(value = "根据搜索条件获取二手租赁列表", notes = "根据搜索条件获取二手租赁列表")
+	@ApiOperation(value = "根据搜索条件获取角色列表", notes = "根据搜索条件获取角色列表")
 	@ApiImplicitParams({
 			@ApiImplicitParam(paramType = "query", dataType = "String", name = "roleName", value = "帖子标题（模糊查询）"),
 			@ApiImplicitParam(paramType = "query", dataType = "integer", name = "pageNum", value = "分页第几页"),

CODE/smart-community/property-api/src/main/java/com/community/huiju/controller/SysMenuController.java

+package com.community.huiju.controller;
+
+
+import com.community.commom.mode.ResponseBean;
+import com.community.commom.session.UserElement;
+import com.community.huiju.common.base.BaseController;
+import com.community.huiju.service.ISysMenuService;
+import io.swagger.annotations.Api;
+import io.swagger.annotations.ApiImplicitParam;
+import io.swagger.annotations.ApiImplicitParams;
+import io.swagger.annotations.ApiOperation;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.cloud.context.config.annotation.RefreshScope;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestMethod;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+
+import javax.servlet.http.HttpSession;
+
+/**
+ * <p>
+ * 物业web端菜单表 前端控制器
+ * </p>
+ *
+ * @author jobob
+ * @since 2019-01-17
+ */
+@RestController
+@RefreshScope
+@RequestMapping("/")
+@Api(value = "物业端菜单API", description = "物业端菜单API")
+public class SysMenuController extends BaseController {
+	
+	@Autowired
+	private ISysMenuService sysMenuService;
+	
+	@ApiOperation(value = "根据搜索条件获取菜单列表", notes = "根据搜索条件获取菜单列表")
+	@ApiImplicitParams({
+	})
+	@RequestMapping(value = "/menus",method = RequestMethod.GET)
+	public ResponseBean getInfo(HttpSession session) {
+		ResponseBean responseBean = new ResponseBean();
+		UserElement userElement = getUserElement(session);
+		responseBean = sysMenuService.getMenuList(userElement);
+		return responseBean;
+	}
+}

CODE/smart-community/property-api/src/main/java/com/community/huiju/dao/SysMenuMapper.java

+package com.community.huiju.dao;
+
+import com.baomidou.mybatisplus.core.mapper.BaseMapper;
+import com.community.huiju.model.SysMenu;
+
+/**
+ * <p>
+ * 物业web端菜单表 Mapper 接口
+ * </p>
+ *
+ * @author jobob
+ * @since 2019-01-17
+ */
+public interface SysMenuMapper extends BaseMapper<SysMenu> {
+
+}

CODE/smart-community/property-api/src/main/java/com/community/huiju/model/SysMenu.java

+package com.community.huiju.model;
+
+import com.baomidou.mybatisplus.annotation.TableName;
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+import lombok.experimental.Accessors;
+
+import java.io.Serializable;
+import java.util.List;
+
+/**
+ * <p>
+ * 物业web端菜单表
+ * </p>
+ *
+ * @author jobob
+ * @since 2019-01-17
+ */
+@Data
+@EqualsAndHashCode(callSuper = false)
+@Accessors(chain = true)
+@TableName("tp_sys_menu")
+public class SysMenu implements Serializable {
+
+    private static final long serialVersionUID = 1L;
+
+    private Integer id;
+    /**
+     * 小区id
+     */
+    private Integer communityId;
+
+    /**
+     * 菜单名称
+     */
+    private String menuName;
+
+    /**
+     * 菜单链接
+     */
+    private String menuUrl;
+
+    /**
+     * 菜单图标
+     */
+    private String menuIcon;
+
+    /**
+     * 父级菜单ID
+     */
+    private Integer parentId;
+
+    /**
+     * 排序
+     */
+    private Integer sort;
+
+    /**
+     * 菜单类型 0 页面菜单  1功能菜单
+     */
+    private String menuType;
+
+    /**
+     * 状态 0正常 9 删除
+     */
+    private String status;
+    
+    /**
+     * 子节点
+     */
+    private List<SysMenu> children;
+}

CODE/smart-community/property-api/src/main/java/com/community/huiju/service/ISysMenuService.java

+package com.community.huiju.service;
+
+import com.baomidou.mybatisplus.extension.service.IService;
+import com.community.commom.mode.ResponseBean;
+import com.community.commom.session.UserElement;
+import com.community.huiju.model.SysMenu;
+
+/**
+ * <p>
+ * 物业web端菜单表 服务类
+ * </p>
+ *
+ * @author jobob
+ * @since 2019-01-17
+ */
+public interface ISysMenuService extends IService<SysMenu> {
+	
+	/**
+	 * 获取递归菜单
+	 * @param userElement
+	 * @return
+	 */
+	ResponseBean getMenuList(UserElement userElement);
+}

CODE/smart-community/property-api/src/main/java/com/community/huiju/service/impl/SysMenuServiceImpl.java

+package com.community.huiju.service.impl;
+
+
+import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
+import com.community.commom.mode.ResponseBean;
+import com.community.commom.session.UserElement;
+import com.community.huiju.dao.SysMenuMapper;
+import com.community.huiju.model.SysMenu;
+import com.community.huiju.service.ISysMenuService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+import java.util.ArrayList;
+import java.util.List;
+
+/**
+ * <p>
+ * 物业web端菜单表 服务实现类
+ * </p>
+ *
+ * @author jobob
+ * @since 2019-01-17
+ */
+@Service
+public class SysMenuServiceImpl extends ServiceImpl<SysMenuMapper, SysMenu> implements ISysMenuService {
+	
+	@Autowired
+	private SysMenuMapper sysMenuMapper;
+	/**
+	 * 获取递归菜单
+	 *
+	 * @param userElement
+	 * @return
+	 */
+	@Override
+	public ResponseBean getMenuList(UserElement userElement) {
+		ResponseBean responseBean = new ResponseBean();
+		List<SysMenu> sysMenuList = sysMenuMapper.selectList(null);
+		List<SysMenu> menuList = new ArrayList<SysMenu>();
+		sysMenuList.stream().forEach(sysMenu -> {
+			//父节点是0的，为根节点。
+			if(sysMenu.getParentId().equals("0")){
+				menuList.add(sysMenu);
+			}
+		});
+		
+		//递归
+		menuList.stream().forEach(sysMenu -> {
+			List<SysMenu> childList = getChild(sysMenu.getId(), sysMenuList);
+			sysMenu.setChildren(childList);
+		});
+		responseBean.addSuccess(menuList);
+		return responseBean;
+	}
+	
+	public List<SysMenu> getChild(Integer id,List<SysMenu> allMenuList){
+		//子菜单
+		List<SysMenu> childList = new ArrayList<SysMenu>();
+		allMenuList.stream().forEach(sysMenu -> {
+			//相等说明：为该根节点的子节点。
+			if(sysMenu.getParentId().equals(id)){
+				childList.add(sysMenu);
+			}
+		});
+		//递归
+		childList.stream().forEach(sysMenu -> {
+			sysMenu.setChildren(getChild(sysMenu.getId(), allMenuList));
+		});
+		//如果节点下没有子节点，返回一个空List（递归退出）
+		if(childList.size() == 0){
+			return new ArrayList<SysMenu>();
+		}
+		return childList;
+	}
+}

CODE/smart-community/property-api/src/main/resources/mapper/SysMenuMapper.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.community.huiju.dao.SysMenuMapper">
+
+</mapper>

VUECODE/smart-operate-manage/src/api/role.js

     data
   })
 }
+
+// 获取所有 菜单列表
+export function getMenuList() {
+  return request({
+    url: '/menu/list',
+    method: 'get'
+  })
+}
+
+// 添加 角色
+export function addRole(data) {
+  return request({
+    url: '/role/add',
+    method: 'post',
+    data
+  })
+}

VUECODE/smart-operate-manage/src/store/modules/role.js

-import { getRoleList } from '@/api/role'
+import { getRoleList, getMenuList, addRole } from '@/api/role'
 
 const role = {
 
   actions: {
     GetRoleList({ commit }, data) { // 根据条件获取所有的角色列表
-      console.log('角色列表请求参数: ', data)
       return new Promise((resolve, reject) => {
         getRoleList(data).then(response => {
           resolve(response)
           reject(err)
         })
       })
+    },
+    GetMenuList({ commit }, data) { // 获取所有菜单
+      return new Promise((resolve, reject) => {
+        getMenuList(data).then(response => {
+          resolve(response)
+        }).catch((err) => {
+          reject(err)
+        })
+      })
+    },
+    AddRole({ commit }, data) { // 添加角色
+      return new Promise((resolve, reject) => {
+        addRole(data).then(response => {
+          resolve(response)
+        }).catch((err) => {
+          reject(err)
+        })
+      })
     }
   }
 }

VUECODE/smart-operate-manage/src/views/account/role/add/index.vue

         <el-input v-model="ruleForm.description"/>
       </el-form-item>
       <el-form-item label="权限资源" prop="menuArray">
+        <!-- default-expanded-keys 展示选中的
+             default-checked-keys 勾上选中的-->
         <el-tree
+          ref="tree"
           :data="menuData"
-          :default-expanded-keys="[2, 3]"
-          :default-checked-keys="[5]"
+          :default-expanded-keys="ruleForm.menuArray"
+          :default-checked-keys="ruleForm.menuArray"
           :props="defaultProps"
           show-checkbox
           node-key="id"
       defaultProps: { // 设置树形节点的渲染的属性
         id: 'id',
         children: 'children',
-        label: 'label'
+        label: 'menuName'
       },
       rules: {
         roleName: [
       }
     }
   },
+  mounted() {
+    this.getMenuList()
+  },
   methods: {
     submitForm(formName) {
+      // 获取选中的树形节点 key
+      this.ruleForm.menuArray = this.$refs.tree.getCheckedKeys()
       this.$refs[formName].validate((valid) => {
+        const loading = this.$loading({
+          lock: true,
+          text: 'Loading',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
         if (valid) {
-          alert('submit!')
+          this.$store.dispatch('AddRole', this.ruleForm).then((res) => {
+            const resCode = res.code
+            if (resCode === '0') {
+              this.$message({
+                message: res.message,
+                type: 'success'
+              })
+              loading.close()
+              this.$router.push({ name: 'role-index' })
+            }
+          }).catch(() => {
+            console.log('error AddRole')
+            loading.close()
+          })
         } else {
           console.log('error submit!!')
+          loading.close()
           return false
         }
       })
     },
     handleCheckChange(data, checked, indeterminate) { // 树形图选择事件
       console.log(data, checked, indeterminate)
+    },
+    getMenuList() { // 获取 菜单列表
+      this.$store.dispatch('GetMenuList').then((res) => {
+        this.menuData = res.data
+      }).catch(() => {
+        console.log('error GetMenuList')
+      })
     }
   }
 }
 </script>
 
 <style scoped>
-
+.demo-ruleForm {
+  width: 500px;
+  margin-top: 20px;
+  margin-left: auto;
+  margin-right: auto;
+}
 </style>

VUECODE/smart-operate-manage/src/views/account/role/edi/index.vue

 <template>
   <div id="root">
     <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
-      <el-form-item label="活动名称" prop="name">
-        <el-input v-model="ruleForm.name"/>
+      <el-form-item label="角色名称" prop="roleName">
+        <el-input v-model="ruleForm.roleName"/>
       </el-form-item>
-      <el-form-item label="活动区域" prop="region">
-        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
-          <el-option label="区域一" value="shanghai"/>
-          <el-option label="区域二" value="beijing"/>
-        </el-select>
+      <el-form-item label="角色描述" prop="description">
+        <el-input v-model="ruleForm.description"/>
       </el-form-item>
-      <el-form-item label="活动时间" required>
-        <el-col :span="11">
-          <el-form-item prop="date1">
-            <el-date-picker v-model="ruleForm.date1" type="date" placeholder="选择日期" style="width: 100%;"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="2" class="line">-</el-col>
-        <el-col :span="11">
-          <el-form-item prop="date2">
-            <el-time-picker v-model="ruleForm.date2" type="fixed-time" placeholder="选择时间" style="width: 100%;"/>
-          </el-form-item>
-        </el-col>
-      </el-form-item>
-      <el-form-item label="即时配送" prop="delivery">
-        <el-switch v-model="ruleForm.delivery"/>
-      </el-form-item>
-      <el-form-item label="活动性质" prop="type">
-        <el-checkbox-group v-model="ruleForm.type">
-          <el-checkbox label="美食/餐厅线上活动" name="type"/>
-          <el-checkbox label="地推活动" name="type"/>
-          <el-checkbox label="线下主题活动" name="type"/>
-          <el-checkbox label="单纯品牌曝光" name="type"/>
-        </el-checkbox-group>
-      </el-form-item>
-      <el-form-item label="特殊资源" prop="resource">
-        <el-radio-group v-model="ruleForm.resource">
-          <el-radio label="线上品牌商赞助"/>
-          <el-radio label="线下场地免费"/>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="活动形式" prop="desc">
-        <el-input v-model="ruleForm.desc" type="textarea"/>
+      <el-form-item label="权限资源" prop="menuArray">
+        <!-- default-expanded-keys 展示选中的
+             default-checked-keys 勾上选中的-->
+        <el-tree
+          :data="menuData"
+          :default-expanded-keys="ruleForm.menuArray"
+          :default-checked-keys="ruleForm.menuArray"
+          :props="defaultProps"
+          show-checkbox
+          node-key="id"
+          @check-change="handleCheckChange"/>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
   data() {
     return {
       ruleForm: {
-        name: '',
-        region: '',
-        date1: '',
-        date2: '',
-        delivery: false,
-        type: [],
-        resource: '',
-        desc: ''
+        roleName: '',
+        description: '',
+        menuArray: [] // 已选中的权限资源
+      },
+      menuData: [], // 所有权限资源
+      defaultProps: { // 设置树形节点的渲染的属性
+        id: 'id',
+        children: 'children',
+        label: 'menuName'
       },
       rules: {
-        name: [
-          { required: true, message: '请输入活动名称', trigger: 'blur' },
-          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
-        ],
-        region: [
-          { required: true, message: '请选择活动区域', trigger: 'change' }
+        roleName: [
+          { required: true, message: '请输入角色名称', trigger: 'blur' }
         ],
-        date1: [
-          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
+        description: [
+          { required: true, message: '请输入角色描述', trigger: 'blur' }
         ],
-        date2: [
-          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
-        ],
-        type: [
+        menuArray: [
           { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
-        ],
-        resource: [
-          { required: true, message: '请选择活动资源', trigger: 'change' }
-        ],
-        desc: [
-          { required: true, message: '请填写活动形式', trigger: 'blur' }
         ]
       }
     }
   },
+  mounted() {
+    this.getMenuList()
+  },
   methods: {
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
     },
     resetForm(formName) {
       this.$refs[formName].resetFields()
+    },
+    handleCheckChange(data, checked, indeterminate) { // 树形图选择事件
+      console.log(data, checked, indeterminate)
+    },
+    getMenuList() { // 获取 菜单列表
+      this.$store.dispatch('GetMenuList').then((res) => {
+        this.menuData = res.data
+      }).catch(() => {
+        console.log('error GetMenuList')
+      })
     }
   }
 }
 </script>
 
 <style scoped>
-
+.demo-ruleForm {
+  width: 500px;
+  margin-top: 20px;
+  margin-left: auto;
+  margin-right: auto;
+}
 </style>

VUECODE/smart-operate-manage/src/views/account/role/index.vue

       console.log(rows)
     },
     formatDate(val) {
+      if (val === null) {
+        return
+      }
       var value = new Date(val)
       var year = value.getFullYear()
       var month = value.getMonth() + 1
     deleteRole() { // 删除角色
     },
     updateRole() { // 修改角色
+      this.$router.push({ name: 'role-edi' })
     },
     addRole() { // 添加角色
       this.$router.push({ name: 'role-add' })

VUECODE/smart-operate-manage/src/views/account/role/info/index.vue

 <template>
   <div id="root">
     <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
-      <el-form-item label="活动名称" prop="name">
-        <el-input v-model="ruleForm.name"/>
+      <el-form-item label="角色名称" prop="roleName">
+        <el-input v-model="ruleForm.roleName"/>
       </el-form-item>
-      <el-form-item label="活动区域" prop="region">
-        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
-          <el-option label="区域一" value="shanghai"/>
-          <el-option label="区域二" value="beijing"/>
-        </el-select>
+      <el-form-item label="角色描述" prop="description">
+        <el-input v-model="ruleForm.description"/>
       </el-form-item>
-      <el-form-item label="活动时间" required>
-        <el-col :span="11">
-          <el-form-item prop="date1">
-            <el-date-picker v-model="ruleForm.date1" type="date" placeholder="选择日期" style="width: 100%;"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="2" class="line">-</el-col>
-        <el-col :span="11">
-          <el-form-item prop="date2">
-            <el-time-picker v-model="ruleForm.date2" type="fixed-time" placeholder="选择时间" style="width: 100%;"/>
-          </el-form-item>
-        </el-col>
-      </el-form-item>
-      <el-form-item label="即时配送" prop="delivery">
-        <el-switch v-model="ruleForm.delivery"/>
-      </el-form-item>
-      <el-form-item label="活动性质" prop="type">
-        <el-checkbox-group v-model="ruleForm.type">
-          <el-checkbox label="美食/餐厅线上活动" name="type"/>
-          <el-checkbox label="地推活动" name="type"/>
-          <el-checkbox label="线下主题活动" name="type"/>
-          <el-checkbox label="单纯品牌曝光" name="type"/>
-        </el-checkbox-group>
-      </el-form-item>
-      <el-form-item label="特殊资源" prop="resource">
-        <el-radio-group v-model="ruleForm.resource">
-          <el-radio label="线上品牌商赞助"/>
-          <el-radio label="线下场地免费"/>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="活动形式" prop="desc">
-        <el-input v-model="ruleForm.desc" type="textarea"/>
+      <el-form-item label="权限资源" prop="menuArray">
+        <!-- default-expanded-keys 展示选中的
+             default-checked-keys 勾上选中的-->
+        <el-tree
+          :data="menuData"
+          :default-expanded-keys="ruleForm.menuArray"
+          :default-checked-keys="ruleForm.menuArray"
+          :props="defaultProps"
+          show-checkbox
+          node-key="id"
+          @check-change="handleCheckChange"/>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
   data() {
     return {
       ruleForm: {
-        name: '',
-        region: '',
-        date1: '',
-        date2: '',
-        delivery: false,
-        type: [],
-        resource: '',
-        desc: ''
+        roleName: '',
+        description: '',
+        menuArray: [] // 已选中的权限资源
+      },
+      menuData: [], // 所有权限资源
+      defaultProps: { // 设置树形节点的渲染的属性
+        id: 'id',
+        children: 'children',
+        label: 'menuName'
       },
       rules: {
-        name: [
-          { required: true, message: '请输入活动名称', trigger: 'blur' },
-          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
-        ],
-        region: [
-          { required: true, message: '请选择活动区域', trigger: 'change' }
+        roleName: [
+          { required: true, message: '请输入角色名称', trigger: 'blur' }
         ],
-        date1: [
-          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
+        description: [
+          { required: true, message: '请输入角色描述', trigger: 'blur' }
         ],
-        date2: [
-          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
-        ],
-        type: [
+        menuArray: [
           { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
-        ],
-        resource: [
-          { required: true, message: '请选择活动资源', trigger: 'change' }
-        ],
-        desc: [
-          { required: true, message: '请填写活动形式', trigger: 'blur' }
         ]
       }
     }
   },
+  mounted() {
+    this.getMenuList()
+  },
   methods: {
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
     },
     resetForm(formName) {
       this.$refs[formName].resetFields()
+    },
+    handleCheckChange(data, checked, indeterminate) { // 树形图选择事件
+      console.log(data, checked, indeterminate)
+    },
+    getMenuList() { // 获取 菜单列表
+      this.$store.dispatch('GetMenuList').then((res) => {
+        this.menuData = res.data
+      }).catch(() => {
+        console.log('error GetMenuList')
+      })
     }
   }
 }
 </script>
 
 <style scoped>
-
+.demo-ruleForm {
+  width: 500px;
+  margin-top: 20px;
+  margin-left: auto;
+  margin-right: auto;
+}
 </style>

VUECODE/smart-property-manage/src/api/role.js

     params: query
   })
 }
+
+export function fetchMenuList() {
+  return request({
+    url: '/menus',
+    method: 'get'
+  })
+}

VUECODE/smart-property-manage/src/store/modules/role.js

-import { fetchList } from '@/api/role'
+import { fetchList, fetchMenuList } from '@/api/role'
 
 const transaction = {
   namespaced: true,
   state: {
     total: '',
-    roleList: []
+    roleList: [],
+    menuList: []
   },
 
   mutations: {
     },
     SET_TOTAL: (state, total) => {
       state.total = total
+    },
+    SET_MENU_LIST: (state, data) => {
+      state.menuList = data
     }
   },
 
         })
       })
     }
+  },
+  FetchMenuList({ commit }) {
+    console.log(1)
+    return new Promise((resolve, reject) => {
+      fetchMenuList().then(response => {
+        const data = response.data
+        commit('SET_MENU_LIST', data)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
   }
 }
 

VUECODE/smart-property-manage/src/views/account/add/role-add.vue

       <el-form-item label="角色描述" prop="building">
         <el-input v-model="ruleForm.building"/>
       </el-form-item>
+      <el-tree
+        :data="menuList"
+        show-checkbox
+        node-key="id"
+        :props="defaultProps">
+      </el-tree>
       <el-form-item>
         <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
         <el-button @click="resetForm('ruleForm')">重置</el-button>
 </template>
 
 <script>
+import { mapState, mapActions, mapMutations } from 'vuex'
+import waves from '@/directive/waves' // Waves directive
+import { parseTime } from '@/utils'
+
 export default {
+  computed: {
+    ...mapState('role', {
+      menuList: s => s.menuList
+    })
+  },
   data() {
     return {
       ruleForm: {
         phase: [
           { required: true, message: '请输入角色名称', trigger: 'blur' }
         ]
+      },
+      defaultProps: {
+        children: 'children',
+        label: 'menuName'
       }
     }
   },
+  created(){
+    this.getMenuList()
+  },
   methods: {
+    ...mapMutations('role', {
+    }),
+    ...mapActions('role', [
+      'FetchMenuList'
+    ]),
     submitForm(formName) { // 提交
       this.$refs[formName].validate((valid) => {
         if (valid) {
         }
       })
     },
+    getMenuList() {
+      this.FetchMenuList().then(() => {
+      }).catch(() => {
+        console.log('get list error')
+      })
+    },
     resetForm(formName) { // 重置
       this.$refs[formName].resetFields()
     },