<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>分配权限</title>
|
<meta name="renderer" content="webkit">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1,charset=utf-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
<link rel="stylesheet" type="text/css" href="../../../vueJs/dist/styles/iview.css"/>
|
<link rel="stylesheet" type="text/css" href="../../../layui-2.6.8/dist/css/layui.css"/>
|
</head>
|
<style type="text/css">
|
.divflex{
|
display: flex;
|
justify-content: space-between;
|
}
|
</style>
|
<body>
|
<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px;">
|
<div id="app">
|
<!-- 树结构 -->
|
<div class="divflex">
|
<div id="" style=" width: 380px;">
|
<p>菜单权限</p>
|
<div >
|
<Tree :data="data2"
|
ref="roleTree"
|
show-checkbox
|
check-strictly
|
expand-node
|
@on-check-change="treeCheck"
|
></Tree>
|
</div>
|
</div>
|
<div style="width: 280px">
|
<p>仓库权限</p>
|
<div id="">
|
<div id="test2"></div>
|
</div>
|
</div>
|
</div>
|
|
<div style="padding-bottom: 5px; position: fixed; right:30px; bottom: 10px;" >
|
<button class="layui-btn layui-btn-sm " @click="btn">保存</button>
|
<button class="layui-btn layui-btn-sm " lay-submit lay-filter="close">取消</button>
|
</div>
|
|
</div>
|
</div>
|
<script src="../../../vueJs/vue.js"></script>
|
<script src="../../../vueJs/dist/iview.js"></script>
|
<script src="../../../layui-2.6.8/dist/layui.js"></script>
|
<script src="../../../js/public.js"></script>
|
<script src="../../../js/jquery-3.5.1.min.js"></script>
|
<script src="../../../js/jquery.cookie.js"></script>
|
<script>
|
|
layui.config({
|
base: '../../../layuiadmin/' //静态资源所在路径
|
}).extend({
|
index: 'lib/index' //主入口模块
|
}).use(['index','tree', 'form', 'layer'], function() {
|
var $ = layui.$,
|
form = layui.form,
|
layer = layui.layer;
|
var tree = layui.tree
|
var laneWayData=[];
|
var ids = getQueryString('id');
|
var param = {
|
msg: ids,
|
};
|
new Vue({
|
el: '#app',
|
data: {
|
data2:[],
|
doing:true,
|
},
|
methods: {
|
btn: function () {
|
if (this.doing) {
|
this.doing = false;
|
var menu = getChecked_list2(this.$refs.roleTree.getCheckedNodes());
|
var laneway = getChecked_list(tree.getChecked('demoId2'));
|
if (!$.cookie('userId')) {
|
layer.msg('登陆失效，请重新登陆', {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function() {
|
window.parent.location.href = "../Login.html";
|
});
|
}
|
var param = {
|
Id: ids,
|
MenuIds:menu,
|
LanewayIds:laneway,
|
UserId: $.cookie('userId') //当前登录人
|
};
|
synData(IP + "/Role/SaveAuth", param, 'post', function(res) {
|
console.log(res);
|
if (res.code == 1) { //成功
|
layer.msg(res.msg, {
|
icon: 1,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function() {
|
var index = parent.layer.getFrameIndex(window.name)
|
parent.layer.close(index); //关闭弹层
|
this.doing = true;
|
});
|
|
} else { //不成功
|
layer.msg(res.msg, {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
},function(){this.doing = true;});
|
}
|
});
|
}else{
|
console.log("重复点击");
|
}
|
},
|
treeCheck(list,data){
|
// console.log(list,data);
|
this.childNodes(data);
|
console.log(data.checked);
|
if (data.checked == true) {
|
var asd = this.parentNode(this.data2,data.id);
|
console.log(asd);
|
|
this.demo(asd);
|
}
|
|
|
},
|
//查找子节点
|
childNodes(node){
|
// console.log(node.children == null);
|
if (node.children != null) {
|
let len = node.children.length;
|
// console.log(len);
|
for(let i = 0; i < len; i++){
|
// node.children[i].checked = node.checked;
|
this.$set(node.children[i],'checked',node.checked)
|
this.childNodes(node.children[i]);
|
}
|
}
|
|
},
|
|
//查找父节点
|
parentNode (arr1, id) {
|
var temp = []
|
var forFn = function (arr, id) {
|
for (var i = 0; i < arr.length; i++) {
|
var item = arr[i]
|
if (item.id === id) {
|
temp.push(item)
|
forFn(arr1, item.parentId)
|
break
|
} else {
|
if (item.children) {
|
forFn(item.children, id)
|
}
|
}
|
}
|
}
|
forFn(arr1, id)
|
return temp
|
},
|
demo(asd){
|
if (asd != null) {
|
console.log(asd[0]);
|
for(let i = 0; i < asd.length; i++){
|
this.$set(asd[i],'checked',true)
|
// this.demo(asd[i]);
|
}
|
}
|
}
|
|
},
|
created:function(){
|
|
console.log(this.data2)
|
var text1 =[];
|
synData(IP + "/Role/GetRolesd", param, 'post', function(res) {
|
console.log(res);
|
if (res.code == 1) { //成功
|
//页面赋值
|
text1 = res.data;
|
console.log(text1);
|
} else { //不成功
|
layer.msg(res.msg, {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
});
|
}
|
});
|
this.data2 = text1;
|
|
}
|
})
|
|
function init2(datas){
|
tree.render({
|
id:'demoId2',
|
elem: '#test2', //绑定元素
|
showCheckbox: true, //是否显示复选框
|
data :datas,
|
oncheck:function(obj){
|
// console.log(obj.data); //得到当前点击的节点数据
|
// console.log(obj.checked); //得到当前节点的展开状态：open、close、normal
|
check(obj.data.id,obj.checked);
|
}
|
});
|
}
|
function check(id, ischeck){
|
|
if(id ==-1){
|
if(ischeck){
|
// console.log("选中点击了")
|
$("#test2 .layui-tree-pack .layui-tree-set[data-id='1'] .layui-unselect").attr('class'," layui-unselect layui-form-checkbox layui-disabled layui-form-checked");
|
$("#test2 .layui-tree-pack .layui-tree-set[data-id='2'] .layui-unselect").attr('class'," layui-unselect layui-form-checkbox layui-disabled layui-form-checked");
|
$("#test2 .layui-tree-pack .layui-tree-set[data-id='3'] .layui-unselect").attr('class'," layui-unselect layui-form-checkbox layui-disabled layui-form-checked");
|
for (let item of laneWayData){
|
if(item.id == "-1"){
|
item.checked = true;
|
}
|
}
|
}else{
|
// console.log("取消点击了")
|
$("#test2 .layui-tree-pack .layui-tree-set[data-id='1'] .layui-unselect").attr('class'," layui-unselect layui-disabled layui-form-checkbox");
|
$("#test2 .layui-tree-pack .layui-tree-set[data-id='2'] .layui-unselect").attr('class'," layui-unselect layui-disabled layui-form-checkbox");
|
$("#test2 .layui-tree-pack .layui-tree-set[data-id='3'] .layui-unselect").attr('class'," layui-unselect layui-disabled layui-form-checkbox");
|
for (let item of laneWayData){
|
if(item.id == "-1"){
|
item.checked = false;
|
}
|
}
|
}
|
}else{
|
for (let item of laneWayData) {
|
|
if(item.checked){
|
for (let s of item.children) {
|
$("#test2 .layui-tree-pack .layui-tree-set[data-id='"+s.id+"'] .layui-unselect").attr('class'," layui-unselect layui-disabled layui-form-checkbox layui-form-checked");
|
}
|
}
|
}
|
}
|
}
|
|
|
sendData(IP + "/Role/GetLanewayByRoleId", param, 'post', function(res) {
|
console.log(res);
|
if (res.code == 1) { //成功
|
//页面赋值
|
var text2 = res.data;
|
laneWayData = res.data;
|
console.log(text2)
|
console.log(laneWayData)
|
init2(text2);
|
// 获取结果赋值默认选中选中
|
for (let item of text2) {
|
if(item.checked){
|
for (let s of item.children) {
|
$("#test2 .layui-tree-pack .layui-tree-set[data-id='"+s.id+"'] .layui-unselect").attr('class'," layui-unselect layui-disabled layui-form-checkbox layui-form-checked");
|
}
|
}
|
}
|
|
} else { //不成功
|
layer.msg(res.msg, {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
});
|
}
|
});
|
|
//关闭弹窗事件
|
form.on('submit(close)', function(data){
|
var index = parent.layer.getFrameIndex(window.name)
|
parent.layer.close(index);
|
return false;
|
});
|
|
function getChecked_list(data) {
|
console.log(data);
|
var id = "";
|
$.each(data, function (index, item) {
|
if (id != "") {
|
id = id + "," + item.id;
|
}
|
else {
|
id = item.id;
|
}
|
var i = getChecked_list(item.children);
|
if (i != "") {
|
id = id + "," + i;
|
}
|
});
|
return id;
|
}
|
function getChecked_list2(data) {
|
console.log(data);
|
var id = "";
|
$.each(data, function (index, item) {
|
if (id != "") {
|
id = id + "," + item.id;
|
}
|
else {
|
id = item.id;
|
}
|
});
|
return id;
|
}
|
|
//获取浏览器参数
|
function getQueryString(name) {
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
var r = window.location.search.substr(1).match(reg);
|
if (r != null) return unescape(r[2]);
|
return null;
|
}
|
})
|
</script>
|
</body>
|
</html>
|
