smart-web.git - Gitblit

			@@ -24,24 +24,27 @@
			</ul>
			<div class="role-main-title">权限管理</div>
			</div>
			<el-tabs tab-position="top">
			<el-tabs tab-position="top" class="topStyle" @tab-click="topHandleClick">
			<el-tab-pane label="菜单">
			<div class="treeMain">
			<el-tabs tab-position="left" class="demo-tabs" v-model="menuActiveName" @tab-click="menuHandleClick">
			<el-tab-pane v-for="item in menuGrantList" :label="item.title" :name="item.title">
			<el-tree ref="tree" v-if="showtree" :data="treeData" :props="{ label: 'title',children: 'children'}" node-key="id" show-checkbox @check-change="treeHandleCheckChange" :default-checked-keys="treeCheck" default-expand-all />
			<el-tabs tab-position="left" class="demo-tabs" v-model="menuActiveName" @tab-click="(tab,event)=>menuHandleClick(tab,event,'0')">
			<el-tab-pane v-for="(item,index) in menuGrantList" :label="item.title" :name="item.title">
			<el-tree ref="tree0" v-if="showtree" :data="treeData" :props="{ label: 'title',children: 'children'}" node-key="id" show-checkbox @check-change="(item,isCheck)=>treeHandleCheckChange(item,isCheck,index)" :default-checked-keys="treeCheck" default-expand-all :check-strictly="true"/>
			</el-tab-pane>
			</el-tabs>
			<div class="roleSubmit"><el-button type="primary" :loading="submitIsSaveing" @click="roleSubmit()">保存</el-button></div>
			</div>
			</el-tab-pane>
			<el-tab-pane label="卡片">
			<div class="treeMain">
			<!-- <el-tree ref="grid" node-key="key" :data="grid.list" :props="grid.props" :default-checked-keys="grid.checked" show-checkbox></el-tree> -->
			123
			<el-tabs tab-position="left" class="demo-tabs" v-model="menuActiveName" @tab-click="(tab,event)=>menuHandleClick(tab,event,'1')">
			<el-tab-pane v-for="(item,index) in menuGrantList" :label="item.title" :name="item.title">
			<el-tree ref="tree1" v-if="showtree" :data="treeData1" :props="{ label: 'title',children: 'children'}" node-key="id" show-checkbox @check-change="(item,isCheck)=>treeHandleCheckChange(item,isCheck,index)" :default-checked-keys="treeCheck" default-expand-all :check-strictly="true"/>
			</el-tab-pane>
			</el-tabs>
			</div>
			</el-tab-pane>
			</el-tabs>
			<div class="roleSubmit"><el-button type="primary" :loading="submitIsSaveing" @click="roleSubmit()">保存</el-button></div>
			</div>

			<el-dialog title="人员选择" v-model="userVisible" :width="500" destroy-on-close>
			@@ -75,10 +78,13 @@
			},
			data() {
			return {
			templateGrantTreeCard: [], //临时存储/menu/grant-tree中的card
			menuHandleText: "",
			showtree: true,
			treeCheck: [],
			menuActiveName: "",
			treeData: [],
			treeData1: [],
			menuGrantList: [],
			total: 0,
			searchData: {
			@@ -127,10 +133,20 @@
			},
			methods: {
			roleSubmit() { //保存
			var cardIdArrId = []; //默认增加全局卡片
			this.templateGrantTreeCard.forEach(item=> {
			if(item.code == "desk") {
			cardIdArrId.push(item.id);
			item.children.forEach(item1=> {
			cardIdArrId.push(item1.id);
			})
			}
			})
			var list = [...new Set([...cardIdArrId, ...this.treeCheck])];; //新数组，cardIdArr和this.treeCheck合并
			var obj = {
			apiScopeIds: [],
			dataScopeIds: [],
			menuIds: this.$refs.tree[0].getCheckedKeys(),
			menuIds: list,
			roleIds: [this.tableLiId]
			}
			this.isSaveing = true;
			@@ -141,17 +157,79 @@
			}
			})
			},
			menuHandleClick(tab, event) {
			this.setTreeList(this.menuGrantList,event.target.innerText); //tree
			topHandleClick(tab,event) {
			if(this.menuHandleText == "") {
			this.menuHandleText = this.menuGrantList[0].title;
			}
			if(event.target.innerText == "菜单") {
			this.setTreeList(this.menuGrantList,this.menuHandleText,'0'); //tree
			}
			if(event.target.innerText == "卡片") {
			this.setTreeList(this.menuGrantList1,this.menuHandleText,'1'); //tree
			}
			},
			treeHandleCheckChange() {

			menuHandleClick(tab, event,index) {
			if(index == 0) {
			this.setTreeList(this.menuGrantList,event.target.innerText,index); //tree
			}
			if(index == 1) {
			this.setTreeList(this.menuGrantList1,event.target.innerText,index); //tree
			}
			this.menuHandleText = event.target.innerText;
			},
			setTreeList(arr,name) {
			treeHandleCheckChange(item,isCheck,index) {
			var that = this;
			if(isCheck) {
			function checkoutId(val){
			if(!that.treeCheck.includes(val.id)) {
			that.treeCheck.push(val.id);
			}
			if(val.children) {
			val.children.forEach(item1=> {
			checkoutId(item1);
			})
			}
			}
			checkoutId(item);
			that.$refs.tree0[index].setCheckedKeys(this.treeCheck,false);
			}else { //取消选中
			if(item.children) { //有children
			function delCheckoutId(val){
			that.treeCheck.forEach((val1,valIndex)=> {
			if(val1 == val.id) {
			that.treeCheck.splice(valIndex,1);
			}
			})
			if(val.children) {
			val.children.forEach(item1=> {
			delCheckoutId(item1);
			})
			}
			}
			delCheckoutId(item);
			that.$refs.tree0[index].setCheckedKeys(this.treeCheck,false);
			}else { //没有children
			if(this.treeCheck.length != 0) {
			this.treeCheck.forEach((val,valIndex)=> {
			if(val == item.id) {
			this.treeCheck.splice(valIndex,1);
			}
			})
			}
			}
			}
			},
			setTreeList(arr,name,index=0) {
			this.treeData = [];
			this.treeData1 = [];
			arr.forEach(item=> {
			if(item.title == name) {
			this.treeData = item.children;
			if(index == '0') {
			this.treeData = item.children;
			}
			if(index == '1') {
			this.treeData1 = item.children;
			}
			}
			})
			},
			@@ -180,24 +258,42 @@
			},
			getSelectTree(res,id,index) {//获取已选数据
			this.$HTTP.get(`/api/blade-system/menu/role-tree-keys?roleIds=${id}`).then(resp=> {
			if(res.code == 200) {
			if(resp.code == 200) {
			this.tableData.forEach(item=> {
			item.active = false;
			})
			this.tableData[index].active = true; //选中
			this.tableData[index].active = true; //左侧切换角色选中
			this.showtree = false;
			this.tableLiId = id; //角色id
			this.$nextTick(()=> {
			this.showtree = true;
			this.menuGrantList = res.data.menu.filter(item=> { //过滤掉没有children的
			//菜单
			this.menuGrantList = res.data.menu.filter(item=> { //过滤掉没有children的,这里是res，不是resp，是菜单tree左侧的选项
			return item.children;
			});
			//卡片
			this.menuGrantList1 = []; //card的tree左侧的选项
			res.data.card.forEach(item=> {
			this.menuGrantList.forEach(item1=> {
			if(item.id == item1.id) {
			this.menuGrantList1.push(item);
			}
			})
			})
			this.menuActiveName = this.menuGrantList[0].title;//默认第一个菜单
			this.setTreeList(this.menuGrantList,this.menuActiveName);//展示树（左侧菜单list，左侧菜单名字）
			var lastId = [],idarr = [];
			var lastId = this.extractLastLevelIds(this.menuGrantList); //获取最后一级id
			var idarr = this.findOverlap(lastId,resp.data.menu); //找出两个数组重合的部分
			this.treeCheck = idarr; //获取选中数据

			var idarr = resp.data.menu.concat(resp.data.card);
			this.treeCheck = [...new Set(idarr)]; //获取选中数据
			// var lastId = [];
			// var lastId = this.extractLastLevelIds(this.menuGrantList); //获取最后一级id
			// var idarr = this.findOverlap(lastId,resp.data.menu); //找出两个数组重合的部分

			// var lastId1 = [];
			// var lastId1 = this.extractLastLevelIds(this.menuGrantList1); //获取最后一级id
			// var idarr1 = this.findOverlap(lastId1,resp.data.card); //找出两个数组重合的部分

			// this.treeCheck = [...idarr,...idarr1]; //获取选中数据
			})
			}
			})
			@@ -205,6 +301,7 @@
			getMenuGrant(row,index) {
			this.$HTTP.get(`/api/blade-system/menu/grant-tree`).then(res=> {
			if(res.code == 200) {
			this.templateGrantTreeCard = res.data.card; //临时存储/menu/grant-tree中的card
			//获取已选数据 (树的数据，角色id)
			this.getSelectTree(res,row.id,index);
			}
			@@ -453,3 +550,8 @@
			z-index: 11;
			}
			</style>
			<style>
			.topStyle .el-tabs__header .el-tabs__nav-scroll .el-tabs__item{
			padding-left: 20px;
			}
			</style>