提交 d68ac05b 编写于 作者: lzlhxj's avatar lzlhxj

权限表数据多项选择视图使用自定义eltree展示菜单及权限数据

上级 3d8fb398
......@@ -66,3 +66,51 @@
height: 64px;
}
}
.tree-right-menu {
.ivu-divider-horizontal {
width: calc(100% - 32px);
min-width: calc(100% - 32px);
margin: 0 auto;
}
.ivu-dropdown-item {
position: relative;
padding-left: 32px;
> i {
position: absolute;
left: 16px;
top: 10px;
}
.ivu-icon-ios-arrow-forward {
left: initial;
right: 4px;
}
}
.ivu-dropdown {
.ivu-select-dropdown {
margin: 0;
}
}
}
.text{
font-weight: 700;color: #303133;font-size: 15px;margin-left:10px;margin-top:20px;
}
.col{
display: inline-block;
width: 400px;
}
.search{
width:200px;margin-left:20px;margin-top:30px;margin-bottom:20px;
}
.save{
margin-top:30px;margin-bottom:20px;margin-left:40px;
}
.roll{
height:680px;overflow:hidden;overflow-x: hidden;overflow-y: auto;
}
.tre{
margin-left:20px;
}
// this is less
<script lang='tsx'>
import { Component } from 'vue-property-decorator';
import SYS_PERMISSIONMPickupViewBase from './sys-permissionmpickup-view-base.vue';
<template>
<div class="view-container dempickupview sys-permissionmpickup-view">
<card class='view-card view-no-caption view-no-toolbar' :dis-hover="true" :padding="0" :bordered="false">
<div class="content-container pickup-view">
<div class="translate-contant">
<!--菜单分配-->
<div class="center" :style="{width : '50%' }">
<context-menu-container class='design-tree-container' >
<div >
<div class="text">菜单分配</div>
<div class="roll">
<el-tree
class="tre"
:data="this.CDdata"
ref="CDtree"
show-checkbox
node-key="id"
:default-expanded-keys="this.CDdataexpandedKeys"
highlight-current
:props="this.defaultProps"
@check-change="handleCheckChange"
>
</el-tree>
</div>
</div>
</context-menu-container>
</div>
<!--权限分配-->
<div class="center" :style="{width : '50%' }">
<context-menu-container class='design-tree-container' >
<div >
<div class="text">权限分配</div>
<div class="roll">
<el-tree
class="tre"
:data="this.QXdata"
ref="QXtree"
show-checkbox
node-key="id"
:default-expanded-keys="this.QXdataexpandedKeys"
highlight-current
:props="this.defaultProps"
@check-change="handleCheckChange"
>
</el-tree>
</div>
</div>
</context-menu-container>
</div>
</div>
<!--操作按钮-->
<card :dis-hover="true" :bordered="false" class="footer">
<row :style="{ textAlign: 'right' }">
<i-button type="primary" :disabled="this.selectData.length > 0 ? false : true" @click="onClickOk">{{this.containerModel.view_okbtn.text}}</i-button>
&nbsp;&nbsp;
<i-button @click="onClickCancel">{{this.containerModel.view_cancelbtn.text}}</i-button>
</row>
</card>
</div>
</card>
</div>
</template>
import view_pickupviewpanel from '@widgets/sys-permission/mpickup-viewpickupviewpanel-pickupviewpanel/mpickup-viewpickupviewpanel-pickupviewpanel.vue';
@Component({
<script lang='tsx'>
import {Vue, Component, Emit, Prop, Watch, Provide} from 'vue-property-decorator';
import view_pickupviewpanel from '@widgets/sys-permission/mpickup-viewpickupviewpanel-pickupviewpanel/mpickup-viewpickupviewpanel-pickupviewpanel.vue';
import {Subject, Subscription} from "rxjs";
import {Util} from "@/utils";
import { ControlInterface } from '@/interface/control';
import ContextMenuContainer from "@components/context-menu-container/context-menu-container.vue";
@Component({
components: {
ContextMenuContainer,
view_pickupviewpanel,
},
beforeRouteEnter: (to: any, from: any, next: any) => {
......@@ -12,8 +78,158 @@ import view_pickupviewpanel from '@widgets/sys-permission/mpickup-viewpickupview
vm.$store.commit('addCurPageViewtag', { fullPath: to.fullPath, viewtag: vm.viewtag });
});
},
})
export default class SYS_PERMISSIONMPickupView extends SYS_PERMISSIONMPickupViewBase {
})
export default class SYS_PERMISSIONMPickupView extends Vue{
/*菜单分配数据*/
protected CDdata: any = [];
/*菜单分配数据默认展开节点*/
protected CDdataexpandedKeys:any =[];
/*权限分配数据*/
protected QXdata: any = [];
/*权限分配数据默认展开节点*/
protected QXdataexpandedKeys:any =[];
/**
* 树显示说明:子树为节点对象的children,节点标签为节点对象的label
*/
protected defaultProps:any= {
children: 'children',
label: 'label'
}
/**
* 选中数据
*/
protected selectData: any = {};
/**
* 视图选中数据
*/
public viewSelections:any[] = [];
/**
* 父数据
*/
protected parentData: any = {};
/**
* 父数据主键
*/
protected srfparentkey:any ;
/**
* vue 创建
*/
public created(){
const _this: any = this;
// 获取父数据
if (_this.$attrs && _this.$attrs.viewdata) {
_this.parentData = JSON.parse(_this.$attrs.viewdata);
}
if(_this.parentData && _this.parentData.srfparentkey){
_this.srfparentkey = _this.parentData.srfparentkey;
console.log("父主键:" + _this.srfparentkey);
}
}
/**
* vue 挂载
*/
public mounted(){
this.initTree();
}
/**
* 初始化树
*/
private initTree(){
const _this = this;
// get全部菜单和权限的请求路径
const url = `uaa/sys_role/custom/getallMenuAndPermission`;
this.$http.get(url).then((response: any)=>{
if (!response || response.status !== 200) {
this.$Notice.error({ title: '错误', desc: response.message });
return;
}else{
// 给树赋值,数据结构在后台已经按照eltree格式化
_this.CDdata = response.data[0];
_this.QXdata = response.data[1];
// 树视图默认展开一级节点
if (_this.CDdata && _this.CDdata.length>0){
_this.CDdata.forEach((item:any, index:any)=> {
_this.CDdataexpandedKeys.push(item[index].id);
})
}
if (_this.QXdata && _this.QXdata.length>0){
_this.QXdata.forEach((item:any, index:any)=> {
_this.QXdataexpandedKeys.push(item[index]);
})
}
}
}).catch((e) => {
console.log(e);
});
}
/**
* 处理选中节点
*/
protected handleCheckChange() {
console.log("SYS_PERMISSIONMPickupView执行了handleCheckChange")
// 两棵树
const CDtree: any = this.$refs.CDtree;
const QXtree: any = this.$refs.QXtree;
// 获取选中状态的节点
const arr = CDtree.getCheckedNodes().concat(QXtree.getCheckedNodes());
// console.group("选中的node:" + arr);
this.selectData = arr;
}
/**
* 容器模型
*/
public containerModel: any = {
view_okbtn: { name: 'okbtn', type: 'button', text: '确定', disabled: true },
view_cancelbtn: { name: 'cancelbtn', type: 'button', text: '取消', disabled: false },
};
/**
* 确定
*/
public onClickOk(): void {
// 处理选中的数据
if(this.selectData && this.selectData.length > 0){
this.selectData.forEach((item: any) => {
let _itemTemp: any = JSON.parse(JSON.stringify(item));
let _item:any = {};
if(!_itemTemp.children){// 是末节点则为库中存在的权限数据,添加到viewSelections
_item.srfdataaccaction = _itemTemp.id;
_item.srfkey = _itemTemp.id;
_item.sys_permission = _itemTemp.id;
_item.sys_permissionid = _itemTemp.id;
_item.srfmajortext = _itemTemp.label;
_item.sys_permissionname = _itemTemp.label;
Object.assign(_item, { _select: false })
this.viewSelections.push(_item);
}
});
}
}
// 交给viewdataschange进行后续保存进库操作
this.$emit('viewdataschange', this.viewSelections);
this.$emit('close', null);
}
/**
* 取消
*/
public onClickCancel(): void {
this.$emit('close', null);
}
}
</script>
<style lang='less'>
@import './sys-permissionmpickup-view.less';
</style>
\ No newline at end of file
package cn.ibizlab.api.rest.extensions;
import cn.ibizlab.core.extensions.service.UAACoreService;
import com.alibaba.fastjson.JSONArray;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class UAACoreResource {
@Autowired
private UAACoreService uaaCoreService;
/**
* 获取全部权限列表或菜单列表
*
* @return
*/
@GetMapping(value = "/uaa/sys_role/custom/getallMenuAndPermission")
public ResponseEntity<JSONArray> getAllPermission() {
JSONArray treeNode = new JSONArray();
// 获取菜单
treeNode.add(uaaCoreService.getAppMenu());
//获取数据能力
treeNode.add(uaaCoreService.getDEOppriv());
return ResponseEntity.ok().body(treeNode);
}
}
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册