<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<title>权限组管理</title>
<link href="http://www.17sucai.com/preview/1474877/2018-11-18/3365/assets/css/bootstrap.min.css" rel="stylesheet">
<link href="../../css/style/style.css" rel="stylesheet">
<link href="http://127.0.0.1:8020/hadmin-master/css/style/zan.css" rel="stylesheet" />
</head>
<style>
background-color: rgba(0,0,0,.5);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 200;
}
background:
border: 1px solid
box-shadow: 10px 10px 5px 3px
left: 50%;
margin-left: -240px;
position: fixed;
top: 15%;
width: 480px;
border-radius: 6px;
}
margin: 15px auto;
overflow: hidden;
clear: both;
}
.el-select-dropdown{
z-index: 9999!important;
}
@font-face {
font-family: element-icons;
src: url(../../fonts/element-icons.woff?t=1472440741) format('woff'), url(../../fonts/element-icons.ttf?t=1472440741) format('truetype');
font-weight: 400;
font-style: normal
}
</style>
<body class="gray-bg" >
<div class="row" id="myVue">
<div class="col-sm-12">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="ibox-content m-b-sm border-bottom">
<h2 class="page-header">权限组管理
<div class="ibox-tools">
<span class="btn btn-primary btn-xs" id="btn_add" @click="handleBtnClick" style="font-size: 16px;">+新增权限组</span>
</div>
</h2>
<div class="form-group">
<div class="form-inline">
<div class="form-group" style="margin-left: 15px ;">
<label class="control-label hidden-xs">按权限组选择：</label>
<input type="text" class="form-control" id="dt_stime" placeholder="请输入名称" v-model="searchname">
</div>
<div class="form-group">
<button class="btn btn-primary" @click="searchmore()">搜索</button>
<button class="btn btn-primary">清空</button>
</div>
</div>
</div>
</div>
<div class="ibox-content forum-container">
<div id="DataTables_Table_0_wrapper" class="dataTables_wrapper form-inline" style="margin-top: 20px;">
<div v-for="intem in maindata">{{intem.roleName}}</div>
<el-table id="mytable" :data="maindata" border >
<el-table-column label="ID"
width="80%"
prop="roleId"
:resizable="resizable"
>
</el-table-column>
<el-table-column prop="roleName" label="权限组名称" show-overflow-tooltip :resizable="resizable" >
</el-table-column>
<el-table-column prop="roleName" label="权限" show-overflow-tooltip :resizable="resizable" >
</el-table-column>
<el-table-column prop="roleName" label="手机" show-overflow-tooltip :resizable="resizable" >
</el-table-column>
<el-table-column prop="addTime" label="创建时间" show-overflow-tooltip :resizable="resizable" >
</el-table-column>
<el-table-column prop="state" label="操作" :resizable="resizable" align="center" filter-placement="bottom-end">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑 </el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
<!--弹出的内容是什么-->
<div class="modal fade" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">新增</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">权限组名称：</label>
<div class="col-sm-8">
<input type="text" v-model="groupName" placeholder="请填写权限名称" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">权限列表：</label>
<div class="col-sm-8">
<el-tree
:data="dataset"
ref="rootTree"
show-checkbox
node-key="resourceId"
:props="defaultProps"
default-expand-all
node-key="resourceId"
show-checkbox
@check="currentChecked"
>
<!--default-expand-all全部展开的控制-->
</el-tree>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-8">
<div type="submit" @click="makesure()">保存</div>
<div @click="getKeys">获取选中节点Key</div>
<div @click="getCheckedNodes">getCheckedNodes</div>
</div>
</div>
</form>
<div style="margin-top: 15px;">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://www.17sucai.com/preview/1474877/2018-11-18/3365/assets/js/jquery.min.js"></script>
<script src="http://www.17sucai.com/preview/1474877/2018-11-18/3365/assets/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script type="text/javascript" src="../../js/vue/element.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#myVue',
data() {
return {
groupName:'',
infoS:'',
total:'',
idShow:false,
resizable:false,
tableData:[],
tableDatas:[],
maindata:[],
surecheck:false,
searchname:'',
defaultProps: {
children: 'children',
label: 'resourceName'
},
defaultExpand:false, //默认展开所有节点
dataset:[],
Infoshow:false,
}
},
methods: {
gitList(){
let myData ={
uuid:1,
state: 2,
page:1,
max:10,
};
axios({
method: 'GET',
url:`http://192.168.124.45:8080/web/sysadmin/sysrole/query-all/do`,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(res=>{
console.log(typeof(res.data))
this.maindata = res.data
})
},
//编辑开始
handleEdit(a,b){
$("#myModalLabel").text("新增");
$('#myModal').modal();
this.groupName = b.roleName //权限组名称：
//alert(this.dataset)
//table数据里面对应的children
//b.resourceDtoList
let data = b.resourceDtoList;
let newdata=[];
for (let item of data) {
var chiSel = item.children
for(let list of chiSel ){
var babySel = list.children
if(babySel){
newdata.push(list.resourceId)
console.log(list.resourceId)
console.log(babySel)
}
}
}
this.$refs.rootTree.setCheckedKeys(newdata);
//this.$refs.tree[0].setCheckedKeys(newdata);//获取已经设置的资源后渲染
},
currentChecked(data, currentChecked) {
const { checkedNodes, halfCheckedNodes } = currentChecked
console.log(checkedNodes, halfCheckedNodes)
},
searchmore(){
console.log(this.searchname)
},
checkGroupNode(data, checked, indeterminate) {
this.surecheck = checked
console.log(data, checked, indeterminate);
},
handleBtnClick:function(){
$("#myModalLabel").text("新增");
$('#myModal').modal();
},
cartView:function () {
var _this = this;
axios.get("http://192.168.124.45:8080/web/sysadmin/sysresource-relation/query-all/do").then(function (res){
alert(res)
console.log(res)
_this.dataset = res.data
})// 获取result.list 然后赋值给productList 数组
},
makesure(){
var data =[]
console.log(this.surecheck)
},
getCheckedNodes() {
console.log(this.$refs.rootTree.getCheckedNodes());
},
getKeys () {
var datacon = [];
var aKey = this.getCheckedKeys(this.dataset, this.$refs.rootTree.getCheckedKeys(), 'resourceId');
console.log(aKey);
console.log(typeof(datacon))
},
getCheckedKeys (data, keys, key) {
var res = [];
recursion(data, false);
return res;
function recursion (arr, isChild) { // arr -> 树形总数据 // keys -> getCheckedKeys获取到的选中key值 // isChild -> 用来判断是否是子节点
var aCheck = [];
for ( var i = 0; i < arr.length; i++ ) {
var obj = arr[i];
aCheck[i] = false;
if ( obj.children ) {
aCheck[i] = recursion(obj.children, true) ? true : aCheck[i];
if ( aCheck[i] ) {
res.push(obj[key]);
}
}
for ( var j = 0; j < keys.length; j++ ) {
if ( obj[key] == keys[j] ) {
aCheck[i] = true;
if ( res.indexOf(obj[key]) == -1 ) {
res.push(obj[key]);
}
break;
}
}
}
if ( isChild ) {
return aCheck.indexOf(true) != -1;
}
}
},
},
mounted:function(){
this.cartView();
this.gitList()
},
})
</script>
</body>
</html>
