|
@@ -0,0 +1,204 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+ <head>
|
|
|
+ <title>权限分配</title>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="viewport"
|
|
|
+ content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
|
|
+ <!-- 所有的 css & js 资源 -->
|
|
|
+ <link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
|
|
|
+ <link rel="stylesheet" href="../../static/sa.css">
|
|
|
+ <script src="../../static/kj/vue.min.js"></script>
|
|
|
+ <script src="../../static/kj/element-ui/index.js"></script>
|
|
|
+ <script src="../../static/kj/jquery.min.js"></script>
|
|
|
+ <script src="../../static/kj/layer/layer.js"></script>
|
|
|
+ <script src="../../static/sa.js"></script>
|
|
|
+ <style>
|
|
|
+ body,
|
|
|
+ .el-tree {
|
|
|
+ background-color: #eee;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tree-node {
|
|
|
+ margin: 0.15em 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 悬浮时颜色更深一点 */
|
|
|
+ .el-tree-node__content:hover {
|
|
|
+ background-color: #CFE8FC !important;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div class="vue-box sbot" style="display: none;" :style="'display: block;'">
|
|
|
+ <!-- ------- 内容部分 ------- -->
|
|
|
+ <div class="s-body">
|
|
|
+ <!-- 表格 -->
|
|
|
+ <div style="padding: 1em 2em;">
|
|
|
+ <el-form>
|
|
|
+ <div class="c-title">所有权限</div>
|
|
|
+ <!-- 此扩展能递归渲染一个权限树,点击深层次节点,父级节点中没有被选中的节点会被自动选中,单独点击父节点,子节点会全部 选中/去选中 -->
|
|
|
+ <el-tree ref="tree" :data="dataList" node-key="id" :default-expand-all="true"
|
|
|
+ :default-checked-keys="selectList" :expand-on-click-node="false" :check-on-click-node="true"
|
|
|
+ :check-strictly="true" @node-click="node_click" @check="node_click">
|
|
|
+ <span class="custom-tree-node" slot-scope="s">
|
|
|
+ <span style="color: #2D8CF0;"
|
|
|
+ v-if="s.data.isShow == undefined || s.data.isShow == true">{{ s.data.name }}</span>
|
|
|
+ <span style="color: #999;" v-if="s.data.isShow == false">{{ s.data.name }} </span>
|
|
|
+ <span style="color: #999;" v-if="s.data.info"> ———— {{s.data.info}} </span>
|
|
|
+ </span>
|
|
|
+ </el-tree>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <script src="../../sa-frame/menu-list.js?v=32648732"></script>
|
|
|
+ <script src="../../sa-frame/menu-list-sp.js"></script>
|
|
|
+ <script src="../../sa-frame/index/admin-util.js"></script>
|
|
|
+ <script>
|
|
|
+ var roleId = sa.p('roleId');
|
|
|
+ var app = new Vue({
|
|
|
+ el: '.vue-box',
|
|
|
+ data: {
|
|
|
+ p: [],
|
|
|
+ dataList: [], // 数据集合
|
|
|
+ selectList: [], // 默认选中
|
|
|
+ ywList: [], // 一维数组
|
|
|
+ haveList: [] // 这个角色用的权限id,拷贝
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 保存
|
|
|
+ ok: function(clickCount) {
|
|
|
+ if (clickCount === undefined) {
|
|
|
+ clickCount = 5;
|
|
|
+ }
|
|
|
+ // 判断是否改掉了关键权限
|
|
|
+ var keys = this.$refs.tree.getCheckedKeys(); // 设置完拥有的id列表
|
|
|
+ var rArr = ['1', '99', 'auth', 'role-list']; // 敏感菜单id列表
|
|
|
+ var isR = false; // 是否给改掉了
|
|
|
+ rArr.forEach(function(item) {
|
|
|
+ // 只有原先有,现在没有,才会被这样判定
|
|
|
+ if (this.haveList.indexOf(item) > -1 && keys.indexOf(item) == -1) {
|
|
|
+ isR = true;
|
|
|
+ }
|
|
|
+ }.bind(this))
|
|
|
+ // 提示
|
|
|
+ if (isR) {
|
|
|
+ var tipStr = '危险!系统检测到您取消了此角色的重要权限,这将导致与之关联的账号可能会无法正常使用后台,您无论如何都要这样设置吗?';
|
|
|
+ tipStr += '<br/>为保证您不是误操作,您还需要继续点击按钮: ' + clickCount + '次'
|
|
|
+ tipStr = '<b style="color: red;">' + tipStr + '</b>';
|
|
|
+ sa.confirm(tipStr, function(res) {
|
|
|
+ if (clickCount <= 1) {
|
|
|
+ this.ok2();
|
|
|
+ } else {
|
|
|
+ clickCount--;
|
|
|
+ this.ok(clickCount);
|
|
|
+ }
|
|
|
+ }.bind(this))
|
|
|
+ } else {
|
|
|
+ this.ok2();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 开始设置
|
|
|
+ ok2: function() {
|
|
|
+ var str = '';
|
|
|
+ var keys = this.$refs.tree.getCheckedKeys();
|
|
|
+ keys.forEach(function(ts) {
|
|
|
+ str += 'code=' + ts + '&';
|
|
|
+ })
|
|
|
+ var url = '/SpRolePermission/updatePcodeByRid?roleId=' + roleId;
|
|
|
+ sa.ajax(url, str, function(res) {
|
|
|
+ sa.alert('设置成功', function() {
|
|
|
+ sa.closeCurrIframe();
|
|
|
+ });
|
|
|
+ // 如果设置的角色与当前登录者的角色一致,则立即显示出来
|
|
|
+ if (roleId == sa.$sys.getCurrUser().roleId) {
|
|
|
+ top.sa_admin.initMenu(keys);
|
|
|
+ }
|
|
|
+ }.bind(this))
|
|
|
+ },
|
|
|
+ // 点击回调, 处理其子节点跟随父节点的选中
|
|
|
+ node_click: function(node) {
|
|
|
+ var is_select = this.$refs.tree.getCheckedKeys().indexOf(node.id) != -1; // 此节点现在是否被选中
|
|
|
+ if (node.children) {
|
|
|
+ node.children.forEach(function(item) {
|
|
|
+ this.$refs.tree.setChecked(item.id, is_select);
|
|
|
+ // 递归
|
|
|
+ if (item.children) {
|
|
|
+ this.node_click(item);
|
|
|
+ }
|
|
|
+ }.bind(this))
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 全选/ 取消全选
|
|
|
+ checkedAll: function() {
|
|
|
+ // console.log(this.$refs.tree.getCheckedKeys().length);
|
|
|
+ // console.log(this.ywList.length);
|
|
|
+ if (this.$refs.tree.getCheckedKeys().length != this.ywList.length) {
|
|
|
+ this.$refs['tree'].setCheckedNodes(this.ywList);
|
|
|
+ } else {
|
|
|
+ this.$refs['tree'].setCheckedNodes([]);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filterMenu(menu_list, menuCode) {
|
|
|
+ let oneList = menu_list.filter(item => menuCode.indexOf(item.id) !== -1)
|
|
|
+ for (let i in oneList) {
|
|
|
+ let one = oneList[i];
|
|
|
+ let childrenList = one.childList.filter(item => menuCode.indexOf(item.id) !== -1);
|
|
|
+ for (let j in childrenList) {
|
|
|
+ let two = childrenList[j];
|
|
|
+ if (!two.childList) {
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ let cList = two.childList.filter(item => menuCode.indexOf(item.id) !== -1);
|
|
|
+ for (let k in cList) {
|
|
|
+ let three = cList[k];
|
|
|
+ if (!three.childList) {
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ let list = three.childList.filter(item => menuCode.indexOf(item.id) !== -1);
|
|
|
+ for (let l in list) {
|
|
|
+ let item = list[l];
|
|
|
+ if (!item.childList) {
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ let itemList = item.childList.filter(item => menuCode.indexOf(item.id) !== -1);
|
|
|
+ item.childList = itemList;
|
|
|
+ }
|
|
|
+ three.childList = list;
|
|
|
+ }
|
|
|
+ two.childList = cList;
|
|
|
+ }
|
|
|
+ one.childList = childrenList;
|
|
|
+ }
|
|
|
+ return oneList;
|
|
|
+ },
|
|
|
+ getCurrPer() {
|
|
|
+ sa.ajax('/TbInitPermission/getList',{pageSize:200,pageNo:1}, function(resp) {
|
|
|
+ let cuList = resp.data.filter(obj=>obj.type=='0').map(obj=>obj.code);
|
|
|
+ console.log(cuList)
|
|
|
+ let menu_list = this.filterMenu(menuList, cuList);
|
|
|
+ this.handler(menu_list);
|
|
|
+ }.bind(this))
|
|
|
+ },
|
|
|
+ handler(menu_list) {
|
|
|
+ // 全部
|
|
|
+ menu_list = sa_admin_code_util.arrayToTree(menu_list); // 一维转tree
|
|
|
+ menu_list = sa_admin_code_util.refMenuList(menu_list); // 属性处理
|
|
|
+ this.dataList = menu_list; // 数据
|
|
|
+ this.ywList = sa_admin_code_util.treeToArray(this.dataList);
|
|
|
+
|
|
|
+ // 拉取此 roleId 的
|
|
|
+ sa.ajax('/SpRolePermission/getPcodeByRid?roleId=' + roleId, function(res) {
|
|
|
+ this.selectList = res.data; // 选中的列表
|
|
|
+ this.haveList = [].concat(this.selectList);
|
|
|
+ }.bind(this))
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created: function() {
|
|
|
+ this.getCurrPer();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|