qzyReal
/
pco


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
							
<!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"

							show-checkbox 

							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">&emsp;———— {{s.data.info}} </span>
							</span>
						</el-tree>
					</el-form>
				</div>
			</div>
			<!-- ------- 底部按钮 ------- -->
			<div class="s-foot">
				<el-button type="success" @click="checkedAll()">全选</el-button>
				<el-button type="primary" @click="ok()">确定</el-button>
				<el-button @click="sa.closeCurrIframe()">取消</el-button>
			</div>
		</div>
		<script src="../../sa-frame/menu-list.js"></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;

								console.log(item);

								console.log(this.haveList);

							}

						}.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) {

						console.log(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){

						return menu_list.filter(item => {

						    return menuCode.indexOf(item.id) > -1

						}).map(item => {

						    item = Object.assign({}, item)

						    if (item.children) {

						        item.children = filterMenu(item.children, menuCode)

						    }

						    return item

						})

					},

					getCurrPer(){

						sa.ajax('/SpRolePermission/getCustomerPcCode',function(resp){

							let cuList=resp.data;

							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>