提交 75ee22f3 编写于 作者: laizhilong's avatar laizhilong

恢复权限表实体多选视图

上级 315af86f
.sys-permissionmpickup-view{ .sys-permissionmpickup-view{
position: relative; position: relative;
.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:calc(100vh - 282px) ;overflow:hidden;overflow-x: hidden;overflow-y: auto;
}
.tre{
margin-left:20px;
}
} }
...@@ -77,7 +32,7 @@ ...@@ -77,7 +32,7 @@
line-height: 1.6; line-height: 1.6;
font-weight: bold; font-weight: bold;
word-spacing: 10px; word-spacing: 10px;
//height: 100%; height: 100%;
overflow: auto; overflow: auto;
} }
.mpicker-select > div { .mpicker-select > div {
...@@ -103,15 +58,11 @@ ...@@ -103,15 +58,11 @@
width: calc(100% - 380px); width: calc(100% - 380px);
.pickupviewpanel { .pickupviewpanel {
width: 100%; width: 100%;
//height: 100%; height: 100%;
} }
} }
} }
>.footer { >.footer {
height: 64px; height: 64px;
} }
} }
\ No newline at end of file
// this is less
<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 : '33%',border:'0px solid red' }">
<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-expand-all="false"
highlight-current
:props="this.defaultProps"
@check-change="handleCheckChange"
>
</el-tree>
</div>
</div>
</context-menu-container>
</div>
<!--数据能力-->
<div class="center" :style="{width : '33%',border:'0px solid red' }">
<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-expand-all="false"
highlight-current
:props="this.defaultProps"
@check-change="handleCheckChange"
>
</el-tree>
</div>
</div>
</context-menu-container>
</div>
<!--统一资源-->
<div class="center" :style="{width : '33%',border:'0px solid red' }">
<context-menu-container class='design-tree-container'>
<div>
<div class="text">统一资源</div>
<div class="roll">
<el-tree
class="tre"
:data="this.ZYdata"
ref="ZYtree"
show-checkbox
node-key="id"
:default-expand-all="false"
highlight-current
:props="this.defaultProps"
@check-change="handleCheckChange"
>
</el-tree>
</div>
</div>
</context-menu-container>
</div>
</div>
<div>
<!--操作按钮-->
<card :dis-hover="true" :bordered="false" class="footer">
<row :style="{ textAlign: 'right',border:'0px solid red' }">
<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>
</div>
</card>
</div>
</template>
<script lang='tsx'> <script lang='tsx'>
import {Component, Vue} from 'vue-property-decorator'; import { Component } from 'vue-property-decorator';
import view_pickupviewpanel import SYS_PERMISSIONMPickupViewBase from './sys-permissionmpickup-view-base.vue';
from '@widgets/sys-permission/mpickup-viewpickupviewpanel-pickupviewpanel/mpickup-viewpickupviewpanel-pickupviewpanel.vue';
import ContextMenuContainer from "@components/context-menu-container/context-menu-container.vue";
import view_pickupviewpanel from '@widgets/sys-permission/mpickup-viewpickupviewpanel-pickupviewpanel/mpickup-viewpickupviewpanel-pickupviewpanel.vue';
@Component({ @Component({
components: { components: {
ContextMenuContainer,
view_pickupviewpanel, view_pickupviewpanel,
}, },
beforeRouteEnter: (to: any, from: any, next: any) => { beforeRouteEnter: (to: any, from: any, next: any) => {
next((vm: any) => { next((vm: any) => {
vm.$store.commit('addCurPageViewtag', {fullPath: to.fullPath, viewtag: vm.viewtag}); vm.$store.commit('addCurPageViewtag', { fullPath: to.fullPath, viewtag: vm.viewtag });
}); });
}, },
}) })
export default class SYS_PERMISSIONMPickupView extends Vue { export default class SYS_PERMISSIONMPickupView extends SYS_PERMISSIONMPickupViewBase {
/*应用菜单数据*/
protected CDdata: any = [];
/*数据能力数据*/
protected QXdata: any = [];
/*统一资源数据*/
protected ZYdata: any = [];
/*默认选中节点*/
protected defaultCheckedNodes: any = [];
/**
* 树显示说明:子树为节点对象的children,节点标签为节点对象的label
*/
protected defaultProps: any = {
children: 'children',
label: 'label'
}
/**
* 选中数据
*/
protected selectData: any = {};
/**
* 初始选中的数据
*/
protected ininselectData: 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) {
// console.log("父主键:" + _this.parentData.srfparentkey);
_this.srfparentkey = _this.parentData.srfparentkey;
}
}
/**
* vue 挂载
*/
public mounted() {
this.initTree();
}
/**
* 初始化树
*/
private initTree() {
const _this = this;
// get全部菜单和数据能力和统一资源的请求路径
const url = `sys_permissions/getallMenuAndPermissionAndUnires?roleid=` + _this.srfparentkey;
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];
_this.ZYdata = response.data[2];
_this.defaultCheckedNodes = response.data[3];
// 设置默认选中节点,即当前角色所有权限
this.$nextTick(()=>{
const CDtree: any = this.$refs.CDtree;
const QXtree: any = this.$refs.QXtree;
const ZYtree: any = this.$refs.ZYtree;
CDtree.setCheckedNodes(_this.defaultCheckedNodes);
QXtree.setCheckedNodes(_this.defaultCheckedNodes);
ZYtree.setCheckedNodes(_this.defaultCheckedNodes);
// 保存初始选中的节点数据,便于后续保存时比较
const arr = CDtree.getCheckedNodes().concat(QXtree.getCheckedNodes()).concat(ZYtree.getCheckedNodes());
this.ininselectData = arr;
});
}
}).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 ZYtree: any = this.$refs.ZYtree;
// 获取选中状态的节点
const arr = CDtree.getCheckedNodes().concat(QXtree.getCheckedNodes()).concat(ZYtree.getCheckedNodes());
this.selectData = arr;
// console.log("选中的node:" + JSON.stringify(this.selectData));
}
/**
* 容器模型
*/
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) {
// 判断选中的数据和初始数据
if (JSON.stringify(this.selectData) == JSON.stringify(this.ininselectData)) {
this.$emit('close', null);
return;
}
// 先删除当前角色的所有角色权限关系
const url = `sys_permissions/deleteRolePermissionByRoleid`;
const param = {roleid: this.srfparentkey};
this.$http.post(url,param).then((response: any) => {
if (!response || response.status !== 200) {
this.$Notice.error({title: '错误', desc: response.message});
return;
} else {
// 再重新添加新选中的权限
this.selectData.forEach((item: any) => {
let _itemTemp: any = JSON.parse(JSON.stringify(item));
let _item: any = {};
if (_itemTemp.sys_permissionId) {// 应用菜单
_item.srfdataaccaction = _itemTemp.sys_permissionId;
_item.srfkey = _itemTemp.sys_permissionId;
_item.sys_permission = _itemTemp.sys_permissionId;
_item.sys_permissionid = _itemTemp.sys_permissionId;
_item.srfmajortext = _itemTemp.label;
_item.sys_permissionname = _itemTemp.label;
Object.assign(_item, {_select: false})
this.viewSelections.push(_item);
} else {
if (!_itemTemp.children) {// 数据能力或者统一资源
_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);
}
}).catch((e) => {
console.log(e);
});
} else {
this.$emit('close', null);
}
}
/**
* 取消
*/
public onClickCancel(): void {
this.$emit('close', null);
}
} }
</script> </script>
\ No newline at end of file
<style lang='less'>
@import './sys-permissionmpickup-view.less';
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册