权限管理重构

src/router/index.js

@@ -5,7 +5,9 @@ import Main from '@/view/Main'
 import Welcome from '@/view/Welcome'
 import Menu from '@/view/frame/Menu'
 import Role from '@/view/frame/Role'
+import RoleMenu from '@/view/frame/RoleMenu'
 import User from '@/view/frame/User'
+import UserMenu from '@/view/frame/UserMenu'
 
 Vue.use(Router)
 
@@ -40,6 +42,16 @@ export default new Router({
           path:'/frame/Role',
           name:'role',
           component:Role
+        },
+        {
+          path:'/frame/RoleMenu',
+          name:'roleMenu',
+          component:RoleMenu
+        },
+        {
+          path:'/frame/UserMenu',
+          name:'userMenu',
+          component:UserMenu
         }
       ]
     }

src/view/frame/Menu.vue

@@ -62,7 +62,7 @@ export default {
 			menuPid:null,
 			menuName:"",
 			menuDesc:"",
-			menuOrder:0,
+			menuOrder: null,
 			menuUrl:"",
 			avatar:""
 		},
@@ -73,7 +73,9 @@ export default {
 		},
 		operDailog:false,
 		operDailogTitle:"",
-		menuIcons : menuData
+    menuIcons : menuData,
+    isupdate:false,
+    treeRef:null
 	};
   },
   components: {
@@ -86,17 +88,76 @@ export default {
   methods: {
 	  addMenu:function(node, isupdate){
 		  this.operDailogTitle = isupdate?"修改菜单":"创建菜单";
-		  this.$refs.operForm.showDailog();
+      this.$refs.operForm.showDailog();
+      this.isupdate = isupdate;
+      if(isupdate){
+        const node = this.treeRef.get_selected(true)[0];
+        //回写值
+        let ts = this;
+        ajax({
+          url:"frame/menu/get.action",
+						data:{menuId:node.id},
+						dataType:"json",
+						success:function(dt){
+							dt = dt.rows;
+							for(let v in ts.menu){
+								ts.menu[v] = dt[v];
+              }
+              ts.showPic(dt.avatar);
+						}
+        }, ts);
+      }else{
+        //清空值
+        for(let v in this.menu){
+          this.menu[v] = null;
+        }
+      }
 	  },
 	  delMenu:function(node){
-
+      let ts = this;
+      if(confirm("是否确认?")){
+        ajax({
+          type:"GET",
+          data:{menuId:node.id},
+          postJSON:false,
+          url:"frame/menu/delete.action",
+          success:function(){
+            ts.treeRef.delete_node(node);
+          }
+        }, ts);
+      }
 	  },
 	  showPic:function(cls){
-		  $("#picview").html(`<i class='${cls}'></i>`);
+      $("#picview").html(`<i class='${cls}'></i>`);
+      this.menu.avatar = cls;
 	  },
-	  //在 operationDailog 里面进行回掉的函数
+	  //在 operationDailog 里面进行回调的函数
 	  saveMenu:function(){
-		  return true;
+      const node = this.treeRef.get_selected(true)[0];
+      this.menu.menuPid = node.id;
+      let ts = this;
+      let ret = true;
+				this.$refs['menuForm'].validate((valid) => {
+					if (valid) {
+						ajax({
+							type:"POST",
+							data: ts.menu,
+							postJSON:false,
+							url:ts.isupdate?"frame/menu/update.action":"frame/menu/save.action",
+							success:function(resp){
+                if(ts.isupdate){
+                  ts.treeRef.rename_node(node, ts.menu.menuName);
+                }else{
+                  ts.treeRef.create_node(node.id, {id:resp.rows,text:ts.menu.menuName, icon:'fa fa-file-o'});
+					        ts.treeRef.open_node(node);
+                }
+							}
+						}, ts);
+					}else{
+            ret = false;
+          }
+				});
+		  return ret;
 	  },
     //初始化 jstree
     initTree: function () {
@@ -194,6 +255,7 @@ export default {
           const ref = $("#menuTree").jstree(true);
           ref.set_icon(b.node, "fa fa-folder-o");
         });
+        this.treeRef = $("#menuTree").jstree(true);
     },
   },
   watch: {},

src/view/frame/Role.vue

@@ -33,7 +33,7 @@
 						<el-table-column align="center" prop="ord" label="排序"></el-table-column>
 						<el-table-column align="center" prop="roleId" label="操作">
 							<template slot-scope="scope">
-								<a class="btn btn-primary btn-xs" @click="userRole(scope.roleId)"> 授权菜单 </a>
+								<a class="btn btn-primary btn-xs" @click="userRole(scope.row.roleId)"> 授权菜单 </a>
 							</template>
 						</el-table-column>
 					</el-table>
@@ -170,6 +170,9 @@
 						}
 					}, this);
 				}
+			},
+			userRole:function(roleId) {
+				this.$router.push({name:"roleMenu", params: {roleId}});
 			}
 		},
 		watch: {

src/view/frame/RoleMenu.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="wrapper-content">
+    <div class="ibox" id="mainDiv">
+      <div class="ibox-title">角色管理 >> 所辖菜单</div>
+      <div class="ibox-content">
+        <div class="row">
+          <div class="col-sm-6">
+           <a href="javascript:;" @click="openall">全部展开</a> &nbsp;&nbsp; <a href="javascript:;" @click="closeall">全部关闭</a>
+           <div id="menuTree"></div>
+          </div>
+          <div class="col-sm-6" align="right">
+            <el-button type="primary" @click="save()">确 定</el-button>
+			    	<el-button @click="backpage()">取 消</el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { baseUrl, ajax } from "@/common/biConfig";
+import $ from "jquery";
+import "jstree";
+import "jstree/dist/themes/default/style.min.css";
+
+export default {
+  data() {
+    return {
+  	}
+  },
+  components: {
+	},
+  mounted() {
+    this.initTree();
+  },
+  computed: {},
+  methods: {
+    //初始化 jstree
+    initTree: function () {
+		let ts = this;
+      $("#menuTree")
+        .jstree({
+          core: {
+            check_callback: true,
+            data: function (obj, callback) {
+                ajax({
+                  type: "GET",
+                  data: {roleId:ts.$route.params.roleId},
+                  postJSON: false,
+                  url: 'frame/role/roleMenu.action',
+                  success: function (resp) {
+                    callback.call(this, resp.rows);
+                  },
+                }, ts);
+            },
+          },
+          plugins: ["checkbox","wholerow"],
+        })
+        .bind("open_node.jstree", function (a, b) {
+          if (b.node.id == "0") {
+            return;
+          }
+          const ref = $("#menuTree").jstree(true);
+          ref.set_icon(b.node, "fa fa-folder-open-o");
+        })
+        .bind("close_node.jstree", function (a, b) {
+          if (b.node.id == "0") {
+            return;
+          }
+          const ref = $("#menuTree").jstree(true);
+          ref.set_icon(b.node, "fa fa-folder-o");
+        });
+        this.treeRef = $("#menuTree").jstree(true);
+    },
+    save:function(){
+      const ts = this;
+      let ids = "";
+      let nodes = ts.treeRef.get_selected(false);
+      for(let i=0; nodes&&i<nodes.length; i++){
+        ids = ids + nodes[i] + ",";
+      }
+      $("#menutree").find(".jstree-undetermined").each(function (i, element) {
+          ids = ids + $(element).closest('.jstree-node').attr("id") + ",";
+      });
+      if(ids.length > 0){
+        ids = ids.replace(",root", "");
+        ids = ids.substring(0, ids.length - 1);
+      }
+      ajax({
+        type:"POST",
+        url:"frame/role/menuSave.action",
+        dataType:"JSON",
+        data:{roleId:ts.$route.params.roleId, menuIds:ids},
+        success:function(resp){
+           ts.$notify.success({title: '角色授权成功',offset: 50});
+           ts.backpage();
+        }
+      }, ts);
+    },
+    backpage:function(){
+      this.$router.push('Role')
+    },
+    openall:function(){
+      this.treeRef.open_all();
+    },
+    closeall:function(){
+        this.treeRef.close_all();
+    }
+  },
+  watch: {},
+  beforeRouteLeave: function(to, from, next) {
+    this.$destroy();
+    next();
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@import "../../style/mixin";
+</style>

src/view/frame/User.vue

@@ -33,8 +33,8 @@
 					<el-table-column align="center" prop="loginTime" label="登录时间"></el-table-column>
 					<el-table-column align="center" prop="userId" label="操作">
 						<template slot-scope="scope">
-								<a class="btn btn-primary btn-xs" @click="userRole(scope.userId)"> 授权角色 </a>
-								<a class="btn btn-primary btn-xs" @click="userMenu(scope.userId)"> 授权菜单 </a>
+								<a class="btn btn-primary btn-xs" @click="addUserRole(scope.row.userId)"> 授权角色 </a>
+								<a class="btn btn-primary btn-xs" @click="userMenu(scope.row.userId)"> 授权菜单 </a>
 						</template>
 					</el-table-column>
 				</el-table>
@@ -97,6 +97,16 @@
 				<el-button @click="addUserDailog = false">取 消</el-button>
 			  </div>
 			</el-dialog>
+
+			<el-dialog title="授权角色" :visible.sync="userRoleDailog">
+				  <el-checkbox-group v-model="checkList">
+					<el-checkbox v-for="r in roles" :label="r.roleId" :key="r.roleId">{{r.roleName}}</el-checkbox>
+				  </el-checkbox-group>
+			  <div slot="footer" class="dialog-footer">
+			    <el-button type="primary" @click="saveUserRole()">确 定</el-button>
+				<el-button @click="userRoleDailog = false">取 消</el-button>
+			  </div>
+			</el-dialog>
   	</div>
 </template>
 
@@ -161,8 +171,10 @@
 						label:"停用",
 						value:"0"
 					}]
-				}
-				
+				},
+				userRoleDailog:false,
+				roles:[],
+				checkList:[]
 			}
 		},
 		mounted(){
@@ -277,6 +289,28 @@
 						}
 					}, this);
 				}
+			},
+			userMenu:function(userId) {
+				this.$router.push({name:"userMenu", params: {userId}});
+			},
+			addUserRole:function(userId) {
+				this.userRoleDailog = true;
+				let ts = this;
+				ajax({
+					type:"GET",
+					data:{userId:userId},
+					postJSON:false,
+					url:"frame/role/userRolelist.action",
+					success:function(resp){
+						ts.roles = resp.rows;
+						ts.checkList = resp.rows.filter(r=>r.userId).map(r=>{
+							return r.roleId
+						});
+					}
+				}, ts);
+			},
+			saveUserRole:function(){
+				alert(this.checkList);
 			}
 		},
 		watch: {

src/view/frame/UserMenu.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="wrapper-content">
+    <div class="ibox" id="mainDiv">
+      <div class="ibox-title">用户管理 >> 所辖菜单</div>
+      <div class="ibox-content">
+        <div class="row">
+          <div class="col-sm-6">
+           <a href="javascript:;" @click="openall">全部展开</a> &nbsp;&nbsp; <a href="javascript:;" @click="closeall">全部关闭</a>
+           <div id="menuTree"></div>
+          </div>
+          <div class="col-sm-6" align="right">
+            <el-button type="primary" @click="save()">确 定</el-button>
+			    	<el-button @click="backpage()">取 消</el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { baseUrl, ajax } from "@/common/biConfig";
+import $ from "jquery";
+import "jstree";
+import "jstree/dist/themes/default/style.min.css";
+
+export default {
+  data() {
+    return {
+  	}
+  },
+  components: {
+	},
+  mounted() {
+    this.initTree();
+  },
+  computed: {},
+  methods: {
+    //初始化 jstree
+    initTree: function () {
+		let ts = this;
+      $("#menuTree")
+        .jstree({
+          core: {
+            check_callback: true,
+            data: function (obj, callback) {
+                ajax({
+                  type: "GET",
+                  data: {userId:ts.$route.params.userId},
+                  postJSON: false,
+                  url: 'frame/user/userMenu.action',
+                  success: function (resp) {
+                    callback.call(this, resp.rows);
+                  },
+                }, ts);
+            },
+          },
+          plugins: ["checkbox","wholerow"],
+        })
+        .bind("open_node.jstree", function (a, b) {
+          if (b.node.id == "0") {
+            return;
+          }
+          const ref = $("#menuTree").jstree(true);
+          ref.set_icon(b.node, "fa fa-folder-open-o");
+        })
+        .bind("close_node.jstree", function (a, b) {
+          if (b.node.id == "0") {
+            return;
+          }
+          const ref = $("#menuTree").jstree(true);
+          ref.set_icon(b.node, "fa fa-folder-o");
+        });
+        this.treeRef = $("#menuTree").jstree(true);
+    },
+    save:function(){
+      const ts = this;
+      
+    },
+    backpage:function(){
+      this.$router.push('user')
+    },
+    openall:function(){
+      this.treeRef.open_all();
+    },
+    closeall:function(){
+        this.treeRef.close_all();
+    }
+  },
+  watch: {},
+  beforeRouteLeave: function(to, from, next) {
+    this.$destroy();
+    next();
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@import "../../style/mixin";
+.jstree-default .jstree-disabled.jstree-clicked {
+	background:none;
+	text-decoration: line-through;
+}
+</style>