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

统一代码注释

上级 835b2d2f
<template> <template>
<!-- 消息弹出框绘制开始 --> <!-- 消息弹出框绘制开始 -->
<el-badge :is-dot="showIsDot" class="app-message-popover"> <el-badge :is-dot="showIsDot" class="app-message-popover">
<el-popover <el-popover
placement="bottom" placement="bottom"
trigger="click" trigger="click"
width="400" width="400"
@show="initTabCnt" @show="initTabCnt"
@hide="initTabCnt"> @hide="initTabCnt"
<el-tabs :value="default_tab_pane" :stretch="true"> >
<!-- 待办 --> <el-tabs :value="default_tab_pane" :stretch="true">
<el-tab-pane :label="myTasks.length==0?myTasksLabel:(myTasksLabel+'('+myTasks.length+')')" name="first" style="height: 300px; overflow: auto" :draggable="false"> <!-- 待办 -->
<template v-for="(myTask,index) in myTasks"> <el-tab-pane
<template v-if="index < taskShowCnt"> :label="
<el-row class="Row" :key="index" :draggable="false"> myTasks.length == 0
<el-col :span="3" class="column1" :draggable="false"> ? myTasksLabel
<el-avatar icon="el-icon-s-check" size="small" :draggable="false" style="color: white;background-color: #409eff;"></el-avatar> : myTasksLabel + '(' + myTasks.length + ')'
</el-col> "
<el-col :span="21" class="column2" :draggable="false"> name="first"
<el-row :draggable="false"> style="height: 300px; overflow: auto"
<el-col :span="16" :draggable="false" style="width: 65%;"> :draggable="false"
<div class="process-definition-name" :draggable="false"><strong>{{myTask.processDefinitionName}}</strong></div> >
<div class="description" :draggable="false">{{myTask.description}}</div> <template v-for="(myTask, index) in myTasks">
<div class="createtime" :draggable="false">{{ formatDate(myTask.createTime, 'MM-DD hh:mm') }}</div> <template v-if="index < taskShowCnt">
</el-col> <el-row class="Row" :key="index" :draggable="false">
<el-col :span="5" :draggable="false" style='display: flex; align-items: center'> <el-col :span="3" class="column1" :draggable="false">
<el-tag :type="myTask.name.indexOf('驳回')!=-1?'danger':(myTask.name.indexOf('成功')!=-1?'success':(myTask.name.indexOf('取消')!=-1?'info':'-'))" <el-avatar
size="small" @click="handleTag(myTask)" icon="el-icon-s-check"
style="cursor: pointer;overflow: hidden;text-overflow: ellipsis;" :draggable="false"> size="small"
{{myTask.name}} :draggable="false"
</el-tag> style="color: white; background-color: #409eff"
</el-col> ></el-avatar>
</el-row> </el-col>
</el-col> <el-col :span="21" class="column2" :draggable="false">
</el-row> <el-row :draggable="false">
</template> <el-col :span="16" :draggable="false" style="width: 65%">
</template> <div class="process-definition-name" :draggable="false">
<template> <strong>{{ myTask.processDefinitionName }}</strong>
<div class='show-more' @click="showMore('taskShowCnt')"> </div>
<label v-if="taskShowCnt < myTasks.length ">{{ this.$t('components.appMessagePopover.loadMore') }}</label> <div class="description" :draggable="false">
<label v-else>{{ this.$t('components.appMessagePopover.noMore') }}</label> {{ myTask.description }}
</div> </div>
</template> <div class="createtime" :draggable="false">
</el-tab-pane> {{ formatDate(myTask.createTime, "MM-DD hh:mm") }}
<!-- 消息 --> </div>
<el-tab-pane :label="myMsgs.length==0?myMsgsLabel:(myMsgsLabel+'('+myMsgs.length+')')" name="second" :style="{height: '300px',overflow: 'auto'}" :draggable="false"> </el-col>
<template v-for="(myMsg,index) in myMsgs"> <el-col
<template v-if="index < msgShowCnt"> :span="5"
<el-row class="Row" :key="index" :draggable="false"> :draggable="false"
<el-col :span="3" class="column1" :draggable="false"> style="display: flex; align-items: center"
<el-avatar icon="el-icon-chat-dot-square" size="small" :draggable="false" style="color: white;background-color: orange;"></el-avatar> >
</el-col> <el-tag
<el-col :span="21" class="column2" :draggable="false"> :type="
<el-row :draggable="false"> myTask.name.indexOf('驳回') != -1
<el-col :span="16" :draggable="false" style="width: 65%;"> ? 'danger'
<div class="process-definition-name" :draggable="false"><strong>{{myMsg.processDefinitionName}}</strong></div> : myTask.name.indexOf('成功') != -1
<div class="description" :draggable="false">{{myMsg.description}}</div> ? 'success'
<div class="createtime" :draggable="false">{{ formatDate(myMsg.createTime, 'MM-DD hh:mm') }}</div> : myTask.name.indexOf('取消') != -1
</el-col> ? 'info'
<el-col :span="5" :draggable="false" style='display: flex; align-items: center'> : '-'
<el-tag :type="myMsg.name.indexOf('驳回')!=-1?'danger':(myMsg.name.indexOf('成功')!=-1?'success':(myMsg.name.indexOf('取消')!=-1?'info':'-'))" "
size="small" @click="handleTag(myMsg)" size="small"
style="cursor: pointer;overflow: hidden;text-overflow: ellipsis;" :draggable="false"> @click="handleTag(myTask)"
{{myMsg.name}} style="
</el-tag> cursor: pointer;
</el-col> overflow: hidden;
</el-row> text-overflow: ellipsis;
</el-col> "
</el-row> :draggable="false"
</template> >
</template> {{ myTask.name }}
<template> </el-tag>
<div class='show-more' @click="showMore('msgShowCnt')"> </el-col>
<label v-if="msgShowCnt < myTasks.length ">{{ this.$t('components.appMessagePopover.loadMore') }}</label> </el-row>
<label v-else>{{ this.$t('components.appMessagePopover.noMore') }}</label> </el-col>
</div> </el-row>
</template> </template>
</el-tab-pane> </template>
</el-tabs> <template>
<i id="bellBtn" size="20" slot="reference" class='el-icon-bell'></i> <div class="show-more" @click="showMore('taskShowCnt')">
</el-popover> <label v-if="taskShowCnt < myTasks.length">{{
</el-badge> this.$t("components.appMessagePopover.loadMore")
<!-- 消息弹出框绘制结束 --> }}</label>
<label v-else>{{
this.$t("components.appMessagePopover.noMore")
}}</label>
</div>
</template>
</el-tab-pane>
<!-- 消息 -->
<el-tab-pane
:label="
myMsgs.length == 0
? myMsgsLabel
: myMsgsLabel + '(' + myMsgs.length + ')'
"
name="second"
:style="{ height: '300px', overflow: 'auto' }"
:draggable="false"
>
<template v-for="(myMsg, index) in myMsgs">
<template v-if="index < msgShowCnt">
<el-row class="Row" :key="index" :draggable="false">
<el-col :span="3" class="column1" :draggable="false">
<el-avatar
icon="el-icon-chat-dot-square"
size="small"
:draggable="false"
style="color: white; background-color: orange"
></el-avatar>
</el-col>
<el-col :span="21" class="column2" :draggable="false">
<el-row :draggable="false">
<el-col :span="16" :draggable="false" style="width: 65%">
<div class="process-definition-name" :draggable="false">
<strong>{{ myMsg.processDefinitionName }}</strong>
</div>
<div class="description" :draggable="false">
{{ myMsg.description }}
</div>
<div class="createtime" :draggable="false">
{{ formatDate(myMsg.createTime, "MM-DD hh:mm") }}
</div>
</el-col>
<el-col
:span="5"
:draggable="false"
style="display: flex; align-items: center"
>
<el-tag
:type="
myMsg.name.indexOf('驳回') != -1
? 'danger'
: myMsg.name.indexOf('成功') != -1
? 'success'
: myMsg.name.indexOf('取消') != -1
? 'info'
: '-'
"
size="small"
@click="handleTag(myMsg)"
style="
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
"
:draggable="false"
>
{{ myMsg.name }}
</el-tag>
</el-col>
</el-row>
</el-col>
</el-row>
</template>
</template>
<template>
<div class="show-more" @click="showMore('msgShowCnt')">
<label v-if="msgShowCnt < myTasks.length">{{
this.$t("components.appMessagePopover.loadMore")
}}</label>
<label v-else>{{
this.$t("components.appMessagePopover.noMore")
}}</label>
</div>
</template>
</el-tab-pane>
</el-tabs>
<i id="bellBtn" size="20" slot="reference" class="el-icon-bell"></i>
</el-popover>
</el-badge>
<!-- 消息弹出框绘制结束 -->
</template> </template>
<script lang="ts"> <script lang="ts">
import {Vue, Component, Prop, Model, Emit} from "vue-property-decorator"; import { Vue, Component, Prop, Model, Emit } from "vue-property-decorator";
import {Subject} from "rxjs"; import { Subject } from "rxjs";
import {Environment} from '@/environments/environment'; import { Environment } from "@/environments/environment";
import moment from 'moment'; import moment from "moment";
@Component({})
export default class AppMessagePopover extends Vue {
// 是否显示小圆点
public showIsDot: any = false;
// 默认显示的tab页
public default_tab_pane: any = "first";
// 待办列表
public myTasks: any = [];
// 待办面板标签
public myTasksLabel: any = "待办";
// 待办面板显示条数
public taskShowCnt:number = 0;
// 消息列表
public myMsgs: any = [];
// 消息面板标签
public myMsgsLabel: any = "消息";
// 信息面板显示条数
public msgShowCnt:number = 0;
/**
* vue创建
*/
created(): void {}
/**
* vue挂载
*/
mounted(): void {
// 首次获取待办列表
this.getMyTasks();
// 定时器:每隔1分钟重新获取待办列表
const timer = setInterval(()=>{
this.getMyTasks();
},60000);
// 监听定时器,在vue销毁前清除定时器
this.$once('hook:beforeDestroy',()=>{
// 清除定时器
clearInterval(timer);
});
}
/** @Component({})
* 获取待办列表 export default class AppMessagePopover extends Vue {
*/ /**
public getMyTasks() { * 是否显示小圆点
let url: any = '/wfcore/mytasks'; *
this.$http.get(url).then((response: any) => { * @type {boolean}
if (response && response.status == 200) { * @memberof AppMessagePopover
const data: any = response.data; */
if (data && data.length > 0) { public showIsDot: boolean = false;
this.myTasks = data;
this.showIsDot = true;
} else {
this.myTasks = [];
}
// 获取消息列表
this.getMyMsgs();
}
}).catch((error: any) => {
console.warn("加载数据错误");
})
}
/** /**
* 获取消息列表 * 默认显示的tab页
*/ *
public getMyMsgs(){ * @type {string}
// TODO:接口获取消息列表,这里用的待办数据 * @memberof AppMessagePopover
this.myMsgs = this.myTasks; */
if (this.myMsgs.length > 0 && this.myTasks.length == 0) { public default_tab_pane: string = "first";
// 显示小圆点
this.showIsDot = true;
}
}
/** /**
* 点击标签事件 * 待办列表
*/ *
public handleTag(data: any) { * @type {Array<*>}
if (!data) return this.$message.error("未获取到标签内容"); * @memberof AppMessagePopover
// 拼接要打开的窗口地址 */
const baseUrl:any = Environment.BaseUrl; public myTasks: Array<any> = [];
const openUrl:any = baseUrl + `/wfcore/mytasks/${data.processDefinitionKey}/web/${data.processInstanceBusinessKey}/usertasks/${data.taskDefinitionKey}`;
// 打开新窗口 /**
window.open(openUrl,'_blank'); * 待办面板标签
} *
* @type {string}
* @memberof AppMessagePopover
*/
public myTasksLabel: string = "待办";
/**
* 待办面板显示条数
*
* @type {number}
* @memberof AppMessagePopover
*/
public taskShowCnt: number = 0;
/**
* 消息列表
* @type {Array<*>}
* @memberof AppMessagePopover
*/
public myMsgs: Array<any> = [];
/**
* 消息面板标签
*
* @type {string}
* @memberof AppMessagePopover
*/
public myMsgsLabel: string = "消息";
/**
* 信息面板显示条数
*
* @type {number}
* @memberof AppMessagePopover
*/
public msgShowCnt: number = 0;
/**
* vue创建
*
* @memberof AppMessagePopover
*/
created(): void {}
/** /**
* 销毁之前 * vue挂载
*/ *
beforeDestroy(): void { * @memberof AppMessagePopover
// 清空数据 */
this.showIsDot = false; mounted(): void {
// 首次获取待办列表
this.getMyTasks();
// 定时器:每隔1分钟重新获取待办列表
const timer = setInterval(() => {
this.getMyTasks();
}, 60000);
// 监听定时器,在vue销毁前清除定时器
this.$once("hook:beforeDestroy", () => {
// 清除定时器
clearInterval(timer);
});
}
/**
* 获取待办列表
*
* @memberof AppMessagePopover
*/
public getMyTasks() {
let url: any = "/wfcore/mytasks";
this.$http
.get(url)
.then((response: any) => {
if (response && response.status == 200) {
const data: any = response.data;
if (data && data.length > 0) {
this.myTasks = data;
this.showIsDot = true;
} else {
this.myTasks = []; this.myTasks = [];
this.myMsgs = []; }
// 获取消息列表
this.getMyMsgs();
} }
})
.catch((error: any) => {
console.warn("加载数据错误");
});
}
/** /**
* 时间格式转换 * 获取消息列表
*/ *
public formatDate(date: string, format: string) { * @memberof AppMessagePopover
if(date && format) { */
return moment(date).format(format); public getMyMsgs() {
} // TODO:接口获取消息列表,这里用的待办数据
return date; this.myMsgs = this.myTasks;
} if (this.myMsgs.length > 0 && this.myTasks.length == 0) {
// 显示小圆点
this.showIsDot = true;
}
}
/** /**
* 加载更多 * 点击标签事件
*/ *
public showMore(cnt: string) { * @memberof AppMessagePopover
if(Object.is('taskShowCnt', cnt)) { */
this.taskShowCnt + 10 < this.myTasks.length ? this.taskShowCnt += 10 : this.taskShowCnt += this.myTasks.length-this.taskShowCnt; public handleTag(data: any) {
} if (!data) return this.$message.error("未获取到标签内容");
if(Object.is('msgShowCnt', cnt)) { // 拼接要打开的窗口地址
this.msgShowCnt + 10 < this.myMsgs.length ? this.msgShowCnt += 10 : this.msgShowCnt += this.myMsgs.length-this.msgShowCnt; const baseUrl: any = Environment.BaseUrl;
} const openUrl: any =
} baseUrl +
`/wfcore/mytasks/${data.processDefinitionKey}/web/${data.processInstanceBusinessKey}/usertasks/${data.taskDefinitionKey}`;
// 打开新窗口
window.open(openUrl, "_blank");
}
/** /**
* 弹出框 显示/隐藏 时显示条数初始化 * vue销毁之前
*/ *
public initTabCnt() { * @memberof AppMessagePopover
this.taskShowCnt = this.myTasks.length >= 10 ? 10 : this.myTasks.length; */
this.msgShowCnt = this.myMsgs.length >= 10 ? 10 : this.myMsgs.length; beforeDestroy(): void {
} // 清空数据
this.showIsDot = false;
this.myTasks = [];
this.myMsgs = [];
}
/**
* 时间格式转换
*
* @memberof AppMessagePopover
*/
public formatDate(date: string, format: string) {
if (date && format) {
return moment(date).format(format);
} }
return date;
}
/**
* 加载更多
*
* @memberof AppMessagePopover
*/
public showMore(cnt: string) {
if (Object.is("taskShowCnt", cnt)) {
this.taskShowCnt + 10 < this.myTasks.length
? (this.taskShowCnt += 10)
: (this.taskShowCnt += this.myTasks.length - this.taskShowCnt);
}
if (Object.is("msgShowCnt", cnt)) {
this.msgShowCnt + 10 < this.myMsgs.length
? (this.msgShowCnt += 10)
: (this.msgShowCnt += this.myMsgs.length - this.msgShowCnt);
}
}
/**
* 弹出框 显示/隐藏 时显示条数初始化
*
* @memberof AppMessagePopover
*/
public initTabCnt() {
this.taskShowCnt = this.myTasks.length >= 10 ? 10 : this.myTasks.length;
this.msgShowCnt = this.myMsgs.length >= 10 ? 10 : this.myMsgs.length;
}
}
</script> </script>
<style lang='less'> <style lang='less'>
@import "app-message-popover.less"; @import "app-message-popover.less";
</style> </style>
\ No newline at end of file
<template> <template>
<div class="view-container dempickupview sys-permissionmpickup-view view-permissionmp-center"> <div
<card class='view-card view-no-caption view-no-toolbar' :dis-hover="true" :padding="0" :bordered="false"> class="view-container dempickupview sys-permissionmpickup-view view-permissionmp-center"
<div class="content-container pickup-view"> >
<div class="translate-contant"> <card
<!--应用菜单--> class="view-card view-no-caption view-no-toolbar"
<div class="center" :style="{width : '33%',border:'1px solid #dcdee2', margin: '0 16px 0 0'}"> :dis-hover="true"
<context-menu-container class='design-tree-container'> :padding="0"
<div> :bordered="false"
<div style="margin: 20px 20px 0 20px;"> >
<el-input size="small" placeholder="搜索应用菜单..." v-model="CDtreefilterText" @input="filterChangeCDtree"> <div class="content-container pickup-view">
<i slot="prefix" class="el-input__icon el-icon-search"></i> <div class="translate-contant">
</el-input> <!--应用菜单-->
</div> <div
<div class="roll"> class="center"
<el-tree :style="{
:filter-node-method="fiterNode" width: '33%',
class="tre" border: '1px solid #dcdee2',
:data="this.CDdata" margin: '0 16px 0 0',
ref="CDtree" }"
show-checkbox >
node-key="id" <context-menu-container class="design-tree-container">
:default-expand-all="false" <div>
highlight-current <div style="margin: 20px 20px 0 20px">
:default-expanded-keys="this.CDdataexpandedKeys" <el-input
:props="this.defaultProps" size="small"
@check-change="handleCheckChange" placeholder="搜索应用菜单..."
> v-model="CDtreefilterText"
</el-tree> @input="filterChangeCDtree"
</div> >
</div> <i slot="prefix" class="el-input__icon el-icon-search"></i>
</context-menu-container> </el-input>
</div>
<!--数据能力-->
<div class="center" :style="{width : '33%',border:'1px solid #dcdee2', margin: '0 16px 0 0' }">
<context-menu-container class='design-tree-container'>
<div>
<div style="margin: 20px 20px 0 20px;">
<el-input size="small" placeholder="搜索数据能力..." v-model="QXtreefilterText" @input="filterChangeQXtree">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<div class="roll">
<el-tree
:filter-node-method="fiterNode"
class="tre"
:data="this.QXdata"
ref="QXtree"
show-checkbox
node-key="id"
:default-expand-all="false"
highlight-current
:default-expanded-keys="this.QXdataexpandedKeys"
:props="this.defaultProps"
@check-change="handleCheckChange"
>
</el-tree>
</div>
</div>
</context-menu-container>
</div>
<!--自定义资源-->
<div class="center" :style="{width : '33%',border:'1px solid #dcdee2' }">
<context-menu-container class='design-tree-container'>
<div>
<div style="margin: 20px 20px 0 20px;">
<el-input size="small" placeholder="搜索自定义资源..." v-model="ZYtreefilterText" @input="filterChangeZYtree">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<div class="roll">
<el-tree
:filter-node-method="fiterNode"
class="tre"
:data="this.ZYdata"
ref="ZYtree"
show-checkbox
node-key="id"
:default-expand-all="false"
highlight-current
:default-expanded-keys="this.ZYdataexpandedKeys"
:props="this.defaultProps"
@check-change="handleCheckChange"
>
</el-tree>
</div>
</div>
</context-menu-container>
</div>
</div> </div>
<div class="roll">
</div> <el-tree
</card> :filter-node-method="fiterNode"
</div> class="tre"
:data="this.CDdata"
ref="CDtree"
show-checkbox
node-key="id"
:default-expand-all="false"
highlight-current
:default-expanded-keys="this.CDdataexpandedKeys"
:props="this.defaultProps"
@check-change="handleCheckChange"
>
</el-tree>
</div>
</div>
</context-menu-container>
</div>
<!--数据能力-->
<div
class="center"
:style="{
width: '33%',
border: '1px solid #dcdee2',
margin: '0 16px 0 0',
}"
>
<context-menu-container class="design-tree-container">
<div>
<div style="margin: 20px 20px 0 20px">
<el-input
size="small"
placeholder="搜索数据能力..."
v-model="QXtreefilterText"
@input="filterChangeQXtree"
>
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<div class="roll">
<el-tree
:filter-node-method="fiterNode"
class="tre"
:data="this.QXdata"
ref="QXtree"
show-checkbox
node-key="id"
:default-expand-all="false"
highlight-current
:default-expanded-keys="this.QXdataexpandedKeys"
:props="this.defaultProps"
@check-change="handleCheckChange"
>
</el-tree>
</div>
</div>
</context-menu-container>
</div>
<!--自定义资源-->
<div
class="center"
:style="{ width: '33%', border: '1px solid #dcdee2' }"
>
<context-menu-container class="design-tree-container">
<div>
<div style="margin: 20px 20px 0 20px">
<el-input
size="small"
placeholder="搜索自定义资源..."
v-model="ZYtreefilterText"
@input="filterChangeZYtree"
>
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<div class="roll">
<el-tree
:filter-node-method="fiterNode"
class="tre"
:data="this.ZYdata"
ref="ZYtree"
show-checkbox
node-key="id"
:default-expand-all="false"
highlight-current
:default-expanded-keys="this.ZYdataexpandedKeys"
:props="this.defaultProps"
@check-change="handleCheckChange"
>
</el-tree>
</div>
</div>
</context-menu-container>
</div>
</div>
</div>
</card>
</div>
</template> </template>
<script lang='tsx'> <script lang='tsx'>
import {Component, Prop, Vue} from 'vue-property-decorator'; import { Component, Prop, Vue } from "vue-property-decorator";
import view_pickupviewpanel import view_pickupviewpanel from "@widgets/sys-permission/mpickup-viewpickupviewpanel-pickupviewpanel/mpickup-viewpickupviewpanel-pickupviewpanel.vue";
from '@widgets/sys-permission/mpickup-viewpickupviewpanel-pickupviewpanel/mpickup-viewpickupviewpanel-pickupviewpanel.vue'; import ContextMenuContainer from "@components/context-menu-container/context-menu-container.vue";
import ContextMenuContainer from "@components/context-menu-container/context-menu-container.vue"; import { Subject } from "rxjs";
import {Subject} from "rxjs";
@Component({
@Component({ components: {
components: { ContextMenuContainer,
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", {
vm.$store.commit('addCurPageViewtag', {fullPath: to.fullPath, viewtag: vm.viewtag}); fullPath: to.fullPath,
}); viewtag: vm.viewtag,
}, });
}) });
export default class SYS_ROLE_PERMISSIONCustomView extends Vue { },
})
export default class SYS_ROLE_PERMISSIONCustomView extends Vue {
// 应用菜单树搜索文本 /**
public CDtreefilterText:any = ''; * 应用菜单树搜索文本
// 数据能力树搜索文本 *
public QXtreefilterText:any = ''; * @type {string}
// 自定义资源树搜索文本 * @memberof SYS_ROLE_PERMISSIONCustomView
public ZYtreefilterText:any = ''; */
public CDtreefilterText: string = "";
/**
* 过滤节点 /**
*/ * 数据能力树搜索文本
public fiterNode(value:any,data:any){ *
if (!value) return true; * @type {string}
return data.label.indexOf(value) !==-1; * @memberof SYS_ROLE_PERMISSIONCustomView
} */
/** public QXtreefilterText: string = "";
* 应用菜单树搜索触发
*/ /**
public filterChangeCDtree(){ * 自定义资源树搜索文本
const CDtree:any = this.$refs.CDtree; *
CDtree.filter(this.CDtreefilterText); * @type {string}
} * @memberof SYS_ROLE_PERMISSIONCustomView
/** */
* 数据能力树搜索触发 public ZYtreefilterText: string = "";
*/
public filterChangeQXtree(){ /**
const QXtree:any = this.$refs.QXtree; * 过滤节点
QXtree.filter(this.QXtreefilterText); *
} * @param {value={string}}
/** * @param {data={*}}
* 自定义资源树搜索触发 * @memberof SYS_ROLE_PERMISSIONCustomView
*/ */
public filterChangeZYtree(){ public fiterNode(value: string, data: any) {
const ZYtree:any = this.$refs.ZYtree; if (!value) return true;
ZYtree.filter(this.ZYtreefilterText); return data.label.indexOf(value) !== -1;
} }
/**
/*应用菜单数据*/ * 应用菜单树搜索触发
protected CDdata: any = []; *
/*数据能力数据*/ * @memberof SYS_ROLE_PERMISSIONCustomView
protected QXdata: any = []; */
/*自定义资源数据*/ public filterChangeCDtree() {
protected ZYdata: any = []; const CDtree: any = this.$refs.CDtree;
/*默认选中节点*/ CDtree.filter(this.CDtreefilterText);
protected defaultCheckedNodes: any = []; }
/*应用菜单数据默认展开节点*/
protected CDdataexpandedKeys: any = []; /**
/*数据能力数据默认展开节点*/ * 数据能力树搜索触发
protected QXdataexpandedKeys: any = []; *
/*自定义资源数据默认展开节点*/ * @memberof SYS_ROLE_PERMISSIONCustomView
protected ZYdataexpandedKeys: any = []; */
public filterChangeQXtree() {
/** const QXtree: any = this.$refs.QXtree;
* 树显示说明:子树为节点对象的children,节点标签为节点对象的label QXtree.filter(this.QXtreefilterText);
*/ }
protected defaultProps: any = {
children: 'children', /**
label: 'label' * 自定义资源树搜素触发
} *
/** * @memberof SYS_ROLE_PERMISSIONCustomView
* 选中数据 */
*/ public filterChangeZYtree() {
protected selectData: any = {}; const ZYtree: any = this.$refs.ZYtree;
/** ZYtree.filter(this.ZYtreefilterText);
* 初始选中的数据 }
*/
protected ininselectData: any = {}; /**
* 应用菜单数据
/** *
* 视图选中数据 * @type {Array<*>}
*/ * @memberof SYS_ROLE_PERMISSIONCustomView
public viewSelections: any[] = []; */
protected CDdata: Array<any> = [];
/**
* 父数据 /**
*/ * 数据能力数据
protected parentData: any = {}; *
/** * @type {Array<*>}
* 父数据主键 * @memberof SYS_ROLE_PERMISSIONCustomView
*/ */
protected srfparentkey: any; protected QXdata: Array<any> = [];
/** /**
* 视图标识 * 自定义资源数据
* *
* @type {string} * @type {Array<*>}
* @memberof SYS_ROLE_PERMISSIONCustomViewBase * @memberof SYS_ROLE_PERMISSIONCustomView
*/ */
public viewtag: string = 'e791be173ed0f4bbe9cce942b6edde63'; protected ZYdata: Array<any> = [];
/** /**
* 是否嵌入关系界面 * 默认选中节点
* *
* @type {boolean} * @type {Array<*>}
* @memberof SYS_USER_ROLEGridViewBase * @memberof SYS_ROLE_PERMISSIONCustomView
*/ */
@Prop({default:false}) public isformDruipart?: boolean; protected defaultCheckedNodes: Array<any> = [];
/** /**
* 界面关系通讯对象 * 应用菜单数据默认展开节点
* *
* @type {Subject<ViewState>} * @type {Array<*>}
* @memberof SYS_USER_ROLEGridViewBase * @memberof SYS_ROLE_PERMISSIONCustomView
*/ */
@Prop() public formDruipart?: Subject<ViewState>; protected CDdataexpandedKeys: Array<any> = [];
/** /**
* 应用上下文 * 数据能力数据默认展开节点
* *
* @type {*} * @type {Array<*>}
* @memberof SYS_ROLE_PERMISSIONCustomViewBase * @memberof SYS_ROLE_PERMISSIONCustomView
*/ */
public context:any = {}; protected QXdataexpandedKeys: Array<any> = [];
/** /**
* 视图参数 * 自定义资源数据默认展开节点
* *
* @type {*} * @type {Array<*>}
* @memberof SYS_ROLE_PERMISSIONCustomViewBase * @memberof SYS_ROLE_PERMISSIONCustomView
*/ */
public viewparams:any = {}; protected ZYdataexpandedKeys: Array<any> = [];
/** /**
* 传入视图上下文 * 树显示说明:子树为节点对象的children,节点标签为节点对象的label
* *
* @type {string} * @type {*}
* @memberof SYS_ROLE_PERMISSIONCustomViewBase * @memberof SYS_ROLE_PERMISSIONCustomView
*/ */
@Prop() public viewdata!: string; protected defaultProps: any = {
children: "children",
/** label: "label",
* 视图默认使用 };
*
* @type {boolean} /**
* @memberof SYS_ROLE_PERMISSIONCustomViewBase * 选中数据
*/ *
@Prop({ default: true }) public viewDefaultUsage!: boolean; * @type {*}
* @memberof SYS_ROLE_PERMISSIONCustomView
/** */
* 自定义视图导航上下文集合 protected selectData: any = {};
*
* @type {*} /**
* @memberof SYS_ROLE_PERMISSIONCustomViewBase * 初始选中的数据
*/ *
public customViewNavContexts:any ={}; * @type {*}
/** * @memberof SYS_ROLE_PERMISSIONCustomView
* 自定义视图导航参数集合 */
* protected ininselectData: any = {};
* @type {*}
* @memberof SYS_ROLE_PERMISSIONCustomViewBase /**
*/ * 视图选中数据
public customViewParams:any ={}; *
* @type {Array<*>}
/** * @memberof SYS_ROLE_PERMISSIONCustomView
* 解析视图参数 */
* public viewSelections: any[] = [];
* @public
* @memberof SYS_ROLE_PERMISSIONCustomViewBase /**
*/ * 父数据
public parseViewParam(): void { *
for(let key in this.context){ * @type {*}
delete this.context[key]; * @memberof SYS_ROLE_PERMISSIONCustomView
} */
if (!this.viewDefaultUsage && this.viewdata && !Object.is(this.viewdata, '')) { protected parentData: any = {};
Object.assign(this.context, JSON.parse(this.viewdata));
if(this.context && this.context.srfparentdename){ /**
Object.assign(this.viewparams,{srfparentdename:this.context.srfparentdename}); * 父数据主键
} *
if(this.context && this.context.srfparentkey){ * @type {*}
Object.assign(this.viewparams,{srfparentkey:this.context.srfparentkey}); * @memberof SYS_ROLE_PERMISSIONCustomView
} */
this.handleCustomViewData(); protected srfparentkey: any;
return;
} /**
const path = (this.$route.matched[this.$route.matched.length - 1]).path; * 视图标识
const keys: Array<any> = []; *
const curReg = this.$pathToRegExp.pathToRegexp(path, keys); * @type {string}
const matchArray = curReg.exec(this.$route.path); * @memberof SYS_ROLE_PERMISSIONCustomView
let tempValue: Object = {}; */
keys.forEach((item: any, index: number) => { public viewtag: string = "e791be173ed0f4bbe9cce942b6edde63";
Object.defineProperty(tempValue, item.name, {
enumerable: true, /**
value: matchArray[index + 1] * 是否嵌入关系界面
}); *
}); * @type {boolean}
this.$viewTool.formatRouteParams(tempValue,this.$route,this.context,this.viewparams); * @memberof SYS_ROLE_PERMISSIONCustomView
if(this.$store.getters.getAppData() && this.$store.getters.getAppData().context){ */
Object.assign(this.context,this.$store.getters.getAppData().context); @Prop({ default: false }) public isformDruipart?: boolean;
}
//初始化视图唯一标识 /**
Object.assign(this.context,{srfsessionid:this.$util.createUUID()}); * 界面关系通讯对象
this.handleCustomViewData(); *
} * @type {Subject<ViewState>}
* @memberof SYS_ROLE_PERMISSIONCustomView
/** */
* 处理自定义视图数据 @Prop() public formDruipart?: Subject<ViewState>;
*
* @memberof SYS_ROLE_PERMISSIONCustomViewBase /**
*/ * 应用上下文
public handleCustomViewData(){ *
if(Object.keys(this.customViewNavContexts).length > 0){ * @type {*}
Object.keys(this.customViewNavContexts).forEach((item:any) =>{ * @memberof SYS_ROLE_PERMISSIONCustomView
let tempContext:any = {}; */
let curNavContext:any = this.customViewNavContexts[item]; public context: any = {};
this.handleCustomDataLogic(curNavContext,tempContext,item);
Object.assign(this.context,tempContext); /**
}) * 视图参数
} *
if(Object.keys(this.customViewParams).length > 0){ * @type {*}
Object.keys(this.customViewParams).forEach((item:any) =>{ * @memberof SYS_ROLE_PERMISSIONCustomView
let tempParam:any = {}; */
let curNavParam:any = this.customViewParams[item]; public viewparams: any = {};
this.handleCustomDataLogic(curNavParam,tempParam,item);
Object.assign(this.viewparams,tempParam); /**
}) * 传入视图上下文
} *
} * @type {string}
* @memberof SYS_ROLE_PERMISSIONCustomView
/** */
* 处理自定义视图数据逻辑 @Prop() public viewdata!: string;
*
* @memberof SYS_ROLE_PERMISSIONCustomViewBase /**
*/ * 视图默认使用
public handleCustomDataLogic(curNavData:any,tempData:any,item:string){ *
// 直接值直接赋值 * @type {boolean}
if(curNavData.isRawValue){ * @memberof SYS_ROLE_PERMISSIONCustomView
if(Object.is(curNavData.value,"null") || Object.is(curNavData.value,"")){ */
Object.defineProperty(tempData, item.toLowerCase(), { @Prop({ default: true }) public viewDefaultUsage!: boolean;
value: null,
writable : true, /**
enumerable : true, * 自定义视图导航上下文集合
configurable : true *
}); * @type {*}
}else{ * @memberof SYS_ROLE_PERMISSIONCustomView
Object.defineProperty(tempData, item.toLowerCase(), { */
value: curNavData.value, public customViewNavContexts: any = {};
writable : true, /**
enumerable : true, * 自定义视图导航参数集合
configurable : true *
}); * @type {*}
} * @memberof SYS_ROLE_PERMISSIONCustomView
}else{ */
// 先从导航上下文取数,没有再从导航参数(URL)取数,如果导航上下文和导航参数都没有则为null public customViewParams: any = {};
if(this.context[(curNavData.value).toLowerCase()]){
Object.defineProperty(tempData, item.toLowerCase(), { /**
value: this.context[(curNavData.value).toLowerCase()], * 解析视图参数
writable : true, *
enumerable : true, * @public
configurable : true * @memberof SYS_ROLE_PERMISSIONCustomView
}); */
}else{ public parseViewParam(): void {
if(this.viewparams[(curNavData.value).toLowerCase()]){ for (let key in this.context) {
Object.defineProperty(tempData, item.toLowerCase(), { delete this.context[key];
value: this.viewparams[(curNavData.value).toLowerCase()], }
writable : true, if (
enumerable : true, !this.viewDefaultUsage &&
configurable : true this.viewdata &&
}); !Object.is(this.viewdata, "")
}else{ ) {
Object.defineProperty(tempData, item.toLowerCase(), { Object.assign(this.context, JSON.parse(this.viewdata));
value: null, if (this.context && this.context.srfparentdename) {
writable : true, Object.assign(this.viewparams, {
enumerable : true, srfparentdename: this.context.srfparentdename,
configurable : true });
}); }
} if (this.context && this.context.srfparentkey) {
} Object.assign(this.viewparams, {
} srfparentkey: this.context.srfparentkey,
} });
}
/** this.handleCustomViewData();
* vue 创建 return;
*/ }
public created() { const path = this.$route.matched[this.$route.matched.length - 1].path;
this.afterCreated(); const keys: Array<any> = [];
} const curReg = this.$pathToRegExp.pathToRegexp(path, keys);
const matchArray = curReg.exec(this.$route.path);
/** let tempValue: Object = {};
* 执行created后的逻辑 keys.forEach((item: any, index: number) => {
* Object.defineProperty(tempValue, item.name, {
* @memberof SYS_USER_ROLEGridViewBase enumerable: true,
*/ value: matchArray[index + 1],
public afterCreated(){ });
const secondtag = this.$util.createUUID(); });
this.$store.commit('viewaction/createdView', { viewtag: this.viewtag, secondtag: secondtag }); this.$viewTool.formatRouteParams(
this.viewtag = secondtag; tempValue,
this.parseViewParam(); this.$route,
this.context,
const _this: any = this; this.viewparams
// 获取父数据 );
if (_this && _this.viewdata) { if (
_this.parentData = JSON.parse(_this.viewdata); this.$store.getters.getAppData() &&
} this.$store.getters.getAppData().context
if (_this.parentData && _this.parentData.sysrole) { ) {
// console.log("当前角色id:" + _this.parentData.sysrole); Object.assign(this.context, this.$store.getters.getAppData().context);
_this.srfparentkey = _this.parentData.sysrole; }
} //初始化视图唯一标识
// 监听父页面 Object.assign(this.context, { srfsessionid: this.$util.createUUID() });
if(this.formDruipart){ this.handleCustomViewData();
this.formDruipart.subscribe((res:any) =>{ }
if(Object.is(res.action,'load')){
/**
// 如果是新建角色保存,需要从res中获取父数据主键 * 处理自定义视图数据
if (res.data) { *
let parentData = res.data; * @memberof SYS_ROLE_PERMISSIONCustomView
this.srfparentkey = parentData.srfparentkey; */
} public handleCustomViewData() {
if (Object.keys(this.customViewNavContexts).length > 0) {
// 父数据保存时调用当前视图的事件 Object.keys(this.customViewNavContexts).forEach((item: any) => {
if(this.selectData.length>0){ let tempContext: any = {};
// 选中了数据 let curNavContext: any = this.customViewNavContexts[item];
this.onClickOk(); this.handleCustomDataLogic(curNavContext, tempContext, item);
}else{ Object.assign(this.context, tempContext);
// 没选中数据 });
this.onClear(); }
} if (Object.keys(this.customViewParams).length > 0) {
} Object.keys(this.customViewParams).forEach((item: any) => {
}); let tempParam: any = {};
} let curNavParam: any = this.customViewParams[item];
this.handleCustomDataLogic(curNavParam, tempParam, item);
} Object.assign(this.viewparams, tempParam);
});
}
/** }
* vue 挂载
*/ /**
public mounted() { * 处理自定义视图数据逻辑
this.initTree(); *
} * @memberof SYS_ROLE_PERMISSIONCustomView
*/
/** public handleCustomDataLogic(curNavData: any, tempData: any, item: string) {
* 初始化树 // 直接值直接赋值
*/ if (curNavData.isRawValue) {
private initTree() { if (
const _this = this; Object.is(curNavData.value, "null") ||
// get全部菜单和数据能力和自定义资源的请求路径 Object.is(curNavData.value, "")
const url = `sysroles/`+_this.srfparentkey+`/sysrolepermissions/tree`; ) {
this.$http.get(url).then((response: any) => { Object.defineProperty(tempData, item.toLowerCase(), {
if (!response || response.status !== 200) { value: null,
this.$Notice.error({title: '错误', desc: response.message}); writable: true,
return; enumerable: true,
} else { configurable: true,
// 给树赋值,数据结构在后台已经按照eltree格式化 });
_this.CDdata = response.data.APPMENU; } else {
_this.QXdata = response.data.OPPRIV; Object.defineProperty(tempData, item.toLowerCase(), {
_this.ZYdata = response.data.UNIRES; value: curNavData.value,
_this.defaultCheckedNodes = response.data.SELECTED; writable: true,
enumerable: true,
// 设置默认第一级展开 configurable: true,
for (let i = 0; i < _this.CDdata.length; i++) { });
_this.CDdataexpandedKeys.push(_this.CDdata[i].id); }
} } else {
for (let i = 0; i < _this.QXdata.length; i++) { // 先从导航上下文取数,没有再从导航参数(URL)取数,如果导航上下文和导航参数都没有则为null
_this.QXdataexpandedKeys.push(_this.QXdata[i].id); if (this.context[curNavData.value.toLowerCase()]) {
} Object.defineProperty(tempData, item.toLowerCase(), {
for (let i = 0; i < _this.ZYdata.length; i++) { value: this.context[curNavData.value.toLowerCase()],
_this.ZYdataexpandedKeys.push(_this.ZYdata[i].id); writable: true,
} enumerable: true,
configurable: true,
// 设置默认选中节点,即当前角色所有权限 });
this.$nextTick(()=>{ } else {
const CDtree: any = this.$refs.CDtree; if (this.viewparams[curNavData.value.toLowerCase()]) {
const QXtree: any = this.$refs.QXtree; Object.defineProperty(tempData, item.toLowerCase(), {
const ZYtree: any = this.$refs.ZYtree; value: this.viewparams[curNavData.value.toLowerCase()],
writable: true,
CDtree.setCheckedNodes(_this.defaultCheckedNodes); enumerable: true,
QXtree.setCheckedNodes(_this.defaultCheckedNodes); configurable: true,
ZYtree.setCheckedNodes(_this.defaultCheckedNodes); });
} else {
// 保存初始选中的节点数据,便于后续保存时比较 Object.defineProperty(tempData, item.toLowerCase(), {
const arr = CDtree.getCheckedNodes().concat(QXtree.getCheckedNodes()).concat(ZYtree.getCheckedNodes()); value: null,
this.ininselectData = arr; writable: true,
}); enumerable: true,
configurable: true,
});
}
}).catch((e) => {
console.log(e);
});
} }
}
/** }
* 销毁之前 }
*
* @memberof SYS_ROLE_PERMISSIONCustomViewBase /**
*/ * vue 创建
public beforeDestroy() { *
// 清空选中数据 * @memberof SYS_ROLE_PERMISSIONCustomView
this.selectData = {}; */
// 清空视图选中数据 public created() {
this.viewSelections = []; this.afterCreated();
this.$store.commit('viewaction/removeView', this.viewtag); }
/**
* 执行created后的逻辑
*
* @memberof SYS_ROLE_PERMISSIONCustomView
*/
public afterCreated() {
const secondtag = this.$util.createUUID();
this.$store.commit("viewaction/createdView", {
viewtag: this.viewtag,
secondtag: secondtag,
});
this.viewtag = secondtag;
this.parseViewParam();
const _this: any = this;
// 获取父数据
if (_this && _this.viewdata) {
if (typeof _this.viewdata == "string") {
_this.parentData = JSON.parse(_this.viewdata);
} else {
_this.parentData = _this.viewdata;
}
}
if (_this.parentData && _this.parentData.sysrole) {
// console.log("当前角色id:" + _this.parentData.sysrole);
_this.srfparentkey = _this.parentData.sysrole;
}
// 监听父页面
if (this.formDruipart) {
this.formDruipart.subscribe((res: any) => {
if (Object.is(res.action, "load")) {
// 如果是新建角色保存,需要从res中获取父数据主键
if (res.data) {
let parentData = res.data;
this.srfparentkey = parentData.srfparentkey;
}
// 父数据保存时调用当前视图的事件
if (this.selectData.length > 0) {
// 选中了数据
this.onClickOk();
} else {
// 没选中数据
this.onClear();
}
} }
});
}
/** }
* 处理选中节点
*/ /**
protected handleCheckChange() { * vue 挂载
// console.log("SYS_PERMISSIONMPickupView执行了handleCheckChange") *
// 获取当前三棵树 * @memberof SYS_ROLE_PERMISSIONCustomView
*/
public mounted() {
this.initTree();
}
/**
* 初始化树
*
* @memberof SYS_ROLE_PERMISSIONCustomView
*/
private initTree() {
const _this = this;
// get全部菜单和数据能力和自定义资源的请求路径
const url: string = `sysroles/${_this.srfparentkey}/sysrolepermissions/tree`;
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.APPMENU;
_this.QXdata = response.data.OPPRIV;
_this.ZYdata = response.data.UNIRES;
_this.defaultCheckedNodes = response.data.SELECTED;
// 设置默认第一级展开
for (let i = 0; i < _this.CDdata.length; i++) {
_this.CDdataexpandedKeys.push(_this.CDdata[i].id);
}
for (let i = 0; i < _this.QXdata.length; i++) {
_this.QXdataexpandedKeys.push(_this.QXdata[i].id);
}
for (let i = 0; i < _this.ZYdata.length; i++) {
_this.ZYdataexpandedKeys.push(_this.ZYdata[i].id);
}
// 设置默认选中节点,即当前角色所有权限
this.$nextTick(() => {
const CDtree: any = this.$refs.CDtree; const CDtree: any = this.$refs.CDtree;
const QXtree: any = this.$refs.QXtree; const QXtree: any = this.$refs.QXtree;
const ZYtree: any = this.$refs.ZYtree; 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},
};
/**
* 确定
*/
public onClickOk(): void {
// 处理选中的数据
if (this.selectData && this.selectData.length > 0) {
// 判断选中的数据和初始数据
if (JSON.stringify(this.selectData) == JSON.stringify(this.ininselectData)) {
return;
}
this.selectData.forEach((item: any) => {
let _itemTemp: any = JSON.parse(JSON.stringify(item));
let _item: any = {};
if (_itemTemp.type) {
_item.permissionid = _itemTemp.id;
_item.permissiontype = _itemTemp.type;
_item.permissionname = _itemTemp.fullName;
Object.assign(_item, {_select: false})
this.viewSelections.push(_item);
}
});
// 保存选中的权限信息
let url = '/sysroles/'+this.srfparentkey+'/sysrolepermissions/refreshbatch';
this.$http.post(url,this.viewSelections).then((response: any) => {
if (!(!response || response.status !== 200)) {
} else {
this.$Notice.error({title: '错误', desc: response.message});
return;
}
}).catch((e) => {
});
}
// 清空视图选中数据,避免重复添加
this.viewSelections = [];
}
/** CDtree.setCheckedNodes(_this.defaultCheckedNodes);
* 清除 QXtree.setCheckedNodes(_this.defaultCheckedNodes);
*/ ZYtree.setCheckedNodes(_this.defaultCheckedNodes);
private onClear(){
// 未选中数据,即没有赋予任何权限,需要清除当前角色的所有权限
if (this.selectData.length==0) {
// 保存选中的权限信息
let url = '/sysroles/'+this.srfparentkey+'/sysrolepermissions/refreshbatch';
this.$http.post(url,[]).then((response: any) => {
if (!(!response || response.status !== 200)) {
} else {
this.$Notice.error({title: '错误', desc: response.message});
return;
}
}).catch((e) => {
});
}
// 保存初始选中的节点数据,便于后续保存时比较
const arr = CDtree.getCheckedNodes()
.concat(QXtree.getCheckedNodes())
.concat(ZYtree.getCheckedNodes());
this.ininselectData = arr;
});
} }
})
.catch((e: any) => {
console.error(typeof e == "string" ? e : JSON.stringify(e));
});
}
/**
* vue销毁之前
*
* @memberof SYS_ROLE_PERMISSIONCustomView
*/
public beforeDestroy() {
// 清空选中数据
this.selectData = {};
// 清空视图选中数据
this.viewSelections = [];
this.$store.commit("viewaction/removeView", this.viewtag);
}
/**
* 处理选中节点
*
* @memberof SYS_ROLE_PERMISSIONCustomView
*/
protected 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));
}
/**
* 保存角色权限
*
* @memberof SYS_ROLE_PERMISSIONCustomView
*/
public onClickOk(): void {
// 处理选中的数据
if (this.selectData && this.selectData.length > 0) {
// 判断选中的数据和初始数据
if (
JSON.stringify(this.selectData) == JSON.stringify(this.ininselectData)
) {
return;
}
this.selectData.forEach((item: any) => {
let _itemTemp: any = JSON.parse(JSON.stringify(item));
let _item: any = {};
if (_itemTemp.type) {
_item.permissionid = _itemTemp.id;
_item.permissiontype = _itemTemp.type;
_item.permissionname = _itemTemp.fullName;
Object.assign(_item, { _select: false });
this.viewSelections.push(_item);
}
});
// 保存选中的权限信息
let url: string = `/sysroles/${this.srfparentkey}/sysrolepermissions/refreshbatch`;
this.$http
.post(url, this.viewSelections)
.then((response: any) => {
if (!(!response || response.status !== 200)) {
this.$Notice.error({ title: "错误", desc: response.message });
return;
}
})
.catch((e: any) => {
console.error(
"保存角色权限失败:" + typeof e == "string" ? e : JSON.stringify(e)
);
});
}
// 清空视图选中数据,避免重复添加
this.viewSelections = [];
}
/**
* 清除角色权限
*
* @memberof SYS_ROLE_PERMISSIONCustomView
*/
private onClear() {
// 未选中数据,即没有赋予任何权限,需要清除当前角色的所有权限
if (this.selectData.length == 0) {
// 保存选中的权限信息
let url: string = `/sysroles/${this.srfparentkey}/sysrolepermissions/refreshbatch`;
this.$http
.post(url, [])
.then((response: any) => {
if (!(!response || response.status !== 200)) {
this.$Notice.error({ title: "错误", desc: response.message });
return;
}
})
.catch((e: any) => {
console.error(
"清除角色权限失败," + typeof e == "string" ? e : JSON.stringify(e)
);
});
} }
}
}
</script> </script>
<style lang='less'> <style lang='less'>
@import './sys-role-permission-custom-view'; @import "./sys-role-permission-custom-view";
</style> </style>
\ No newline at end of file
<template> <template>
<div class="design-tree-container"> <div class="design-tree-container">
<context-menu-container> <context-menu-container>
<el-input size="small" placeholder="搜索..." v-model="filerText" @input="filterChange"> <el-input
<i slot="prefix" class="el-input__icon el-icon-search"></i> size="small"
</el-input> placeholder="搜索..."
<el-tree v-model="filerText"
:filter-node-method="filterNode" @input="filterChange"
class="tre" >
:data="this.TreeData" <i slot="prefix" class="el-input__icon el-icon-search"></i>
ref="DeptTree" </el-input>
:show-checkbox="false" <el-tree
node-key="id" :filter-node-method="filterNode"
:default-expand-all="false" class="tre"
highlight-current :data="this.TreeData"
:default-expanded-keys="this.defaultExpandedKeys" ref="DeptTree"
:props="this.defaultProps" :show-checkbox="false"
@node-click="handleNodeClick" node-key="id"
> :default-expand-all="false"
<span class="custom-tree-node" slot-scope="{node, data}"> highlight-current
<i v-if="node.isLeaf" class="fa fa-building-o" style="margin-right: 2px;"></i> :default-expanded-keys="this.defaultExpandedKeys"
<i v-if="!node.isLeaf" class="fa fa-building" style="margin-right: 2px;"></i> :props="this.defaultProps"
<span>{{node.label}}</span> @node-click="handleNodeClick"
</span> >
</el-tree> <span class="custom-tree-node" slot-scope="{ node, data }">
</context-menu-container> <i
</div> v-if="node.isLeaf"
class="fa fa-building-o"
style="margin-right: 2px"
></i>
<i
v-if="!node.isLeaf"
class="fa fa-building"
style="margin-right: 2px"
></i>
<span>{{ node.label }}</span>
</span>
</el-tree>
</context-menu-container>
</div>
</template> </template>
<script lang='tsx'> <script lang='tsx'>
import {Component, Vue} from 'vue-property-decorator'; import { Component, Vue } from "vue-property-decorator";
@Component({
@Component({ components: {},
components: {} })
}) export default class DeptTree extends Vue {
export default class DeptTree extends Vue { /**
* 过滤文本
// 过滤文本 *
public filerText: any = ''; * @type {string}
/** * @memberof DeptTree
* 过滤节点 */
*/ public filerText: string = "";
public filterNode(value:any,data:any){
if (!value) return true; /**
return data.label.indexOf(value) !==-1; * 过滤节点
} *
/** * @param {string} value 过滤文本
* 树搜索触发 * @param {*} data 树数据
*/ * @memberof DeptTree
public filterChange(){ */
const DeptTree:any = this.$refs.DeptTree; public filterNode(value: string, data: any) {
DeptTree.filter(this.filerText); if (!value) return true;
} return data.label.indexOf(value) !== -1;
}
/*树数据*/
public TreeData: any = []; /**
* 树搜索触发
/*树显示说明:子树为节点对象的children,节点标签为节点对象的label*/ *
public defaultProps: any = { * @memberof DeptTree
children: 'children', */
label: 'label' public filterChange() {
} const DeptTree: any = this.$refs.DeptTree;
DeptTree.filter(this.filerText);
/*默认展开节点*/ }
public defaultExpandedKeys: any = [];
/**
/*当前登录人信息*/ * 树数据
public curUserContext: any = {}; *
* @type {Array<*>}
/** * @memberof DeptTree
* vue 创建 */
*/ public TreeData: Array<any> = [];
public created() {
var _this: any = this; /**
// 获取当前登录人信息 * 树显示说明:子树为节点对象的children,节点标签为节点对象的label
if (_this && _this.$attrs && _this.$attrs.context) { *
_this.curUserContext = _this.$attrs.context; * @type {*}
} * @memberof DeptTree
} */
public defaultProps: any = {
/** children: "children",
* vue 挂载 label: "label",
*/ };
public mounted() {
this.initTree(); /**
} * 默认展开节点
* @type {Array<*>}
/** * @memberof DeptTree
* 初始化树 */
*/ public defaultExpandedKeys: Array<any> = [];
private initTree() {
const _this = this; /**
// 获取当前登录人的身份 * 当前登录人信息
const userStr = localStorage.getItem('user'); *
let user: any = {}; * @type {*}
if (userStr) { * @memberof DeptTree
user = JSON.parse(userStr); */
} public curUserContext: any = {};
// 获取当前登录人所处组织的部门及下级组织的部门
let url = ''; /**
// 判断是否超级用户 * vue 创建
if (user.superuser==1) { *
// 获取所有组织的部门及下级组织的部门 * @memberof DeptTree
url = 'sysorganizations/alls/suborg/sysdepartments/picker'; */
}else { public created() {
// 获取当前登录人所在组织的部门及下级组织的部门 var _this: any = this;
if (_this.curUserContext && _this.curUserContext.srforgid) { // 获取当前登录人信息
url = 'sysorganizations/' + _this.curUserContext.srforgid + '/suborg/sysdepartments/picker'; if (_this && _this.$attrs && _this.$attrs.context) {
}else { _this.curUserContext = _this.$attrs.context;
this.$Notice.error({title: '错误', desc: '当前登录人组织为空'}); }
} }
}
this.$http.get(url).then((response: any) => { /**
if (!response || response.status !== 200) { * vue 挂载
this.$Notice.error({title: '错误', desc: response.message}); *
return; * @memberof DeptTree
} else { */
// 给树赋值,数据结构在后台已经按照eltree格式化 public mounted() {
_this.TreeData = response.data; this.initTree();
if (response.data && response.data.length > 0) { }
// 设置默认选中第一个节点,即高亮显示
this.$nextTick(function(){ /**
let deptTree:any = this.$refs.DeptTree; * 初始化树
deptTree.setCurrentKey(response.data[0].id); *
}) * @memberof DeptTree
// 默认加载第一个节点的右侧视图,调用选中数据变更事件 */
_this.selectionChange(response.data[0]); private initTree() {
} const _this = this;
} // 获取当前登录人的身份
}).catch((e:any) => { const userStr = localStorage.getItem("user");
console.log(e); let user: any = {};
if (userStr) {
user = JSON.parse(userStr);
}
// 获取当前登录人所处组织的部门及下级组织的部门
let url: string = "";
// 判断是否超级用户
if (user.superuser == 1) {
// 获取所有组织的部门及下级组织的部门
url = "sysorganizations/alls/suborg/sysdepartments/picker";
} else {
// 获取当前登录人所在组织的部门及下级组织的部门
if (_this.curUserContext && _this.curUserContext.srforgid) {
url =
"sysorganizations/" +
_this.curUserContext.srforgid +
"/suborg/sysdepartments/picker";
} else {
this.$Notice.error({ title: "错误", desc: "当前登录人组织为空" });
}
}
this.$http
.get(url)
.then((response: any) => {
if (!response || response.status !== 200) {
this.$Notice.error({ title: "错误", desc: response.message });
return;
} else {
// 给树赋值,数据结构在后台已经按照eltree格式化
_this.TreeData = response.data;
if (response.data && response.data.length > 0) {
// 设置默认选中第一个节点,即高亮显示
this.$nextTick(function () {
let deptTree: any = this.$refs.DeptTree;
deptTree.setCurrentKey(response.data[0].id);
}); });
// 默认加载第一个节点的右侧视图,调用选中数据变更事件
_this.selectionChange(response.data[0]);
}
} }
})
.catch((e: any) => {
/** console.log(e);
* 处理点击节点 });
*/ }
protected handleNodeClick() {
// 获取当前树 /**
const DeptTree: any = this.$refs.DeptTree; * 处理点击节点
// 获取点击状态的节点 *
let node = DeptTree.getCurrentNode(); * @memberof DeptTree
// console.log("选中的node:" + JSON.stringify(node)); */
// if (node.isLeaf && node.isLeaf == true) protected handleNodeClick() {
// 选中数据变更事件 // 获取当前树
this.selectionChange(node); const DeptTree: any = this.$refs.DeptTree;
} // 获取点击状态的节点
let node = DeptTree.getCurrentNode();
/** // console.log("选中的node:" + JSON.stringify(node));
* 选中数据变更事件
* // 选中数据变更事件
* @public this.selectionChange(node);
* @param {*} node 节点对应node对象 }
* @memberof OrgTree
*/ /**
public selectionChange(node: any) { * 选中数据变更事件
// 获取右侧视图渲染数据需要的参数 *
let temp = JSON.parse(JSON.stringify(node)); * @param {*} 节点对应node对象
let srfappctx: any = {}; * @memberof DeptTree
if (node.disabled == true) {// 单位 */
temp.id = "Dept;" + node.id; public selectionChange(node: any) {
temp.srfparentdename = "SysOrganization"; // 获取右侧视图渲染数据需要的参数
temp.sysorganization = node.id; let temp = JSON.parse(JSON.stringify(node));
srfappctx.sysorganization = temp.sysorganization; let srfappctx: any = {};
}else {// 部门 if (node.disabled == true) {
temp.id = "Dept;" + node.id; // 单位
temp.srfparentdename = "SysDepartment"; temp.id = "Dept;" + node.id;
temp.sysdepartment = node.id; temp.srfparentdename = "SysOrganization";
srfappctx.sysdepartment = temp.sysdepartment; temp.sysorganization = node.id;
} srfappctx.sysorganization = temp.sysorganization;
temp.srfparentkey = node.id; } else {
temp.navparams = "{}"; // 部门
srfappctx.srfparentkey = temp.srfparentkey; temp.id = "Dept;" + node.id;
srfappctx.srfparentdename = temp.srfparentdename; temp.srfparentdename = "SysDepartment";
temp.sysdepartment = node.id;
temp.srfappctx = srfappctx; srfappctx.sysdepartment = temp.sysdepartment;
// 抛出参数
let selectiondata: any = [temp];
this.$emit('selectionchange', selectiondata);
}
} }
temp.srfparentkey = node.id;
temp.navparams = "{}";
srfappctx.srfparentkey = temp.srfparentkey;
srfappctx.srfparentdename = temp.srfparentdename;
temp.srfappctx = srfappctx;
// 抛出参数
let selectiondata: any = [temp];
this.$emit("selectionchange", selectiondata);
}
}
</script> </script>
<style lang='less'> <style lang='less'>
@import './dept-tree-treeview.less'; @import "./dept-tree-treeview.less";
</style> </style>
\ No newline at end of file
<template> <template>
<div class="design-tree-container"> <div class="design-tree-container">
<context-menu-container> <context-menu-container>
<el-input size="small" placeholder="搜索..." v-model="filerText" @input="filterChange"> <el-input
<i slot="prefix" class="el-input__icon el-icon-search"></i> size="small"
</el-input> placeholder="搜索..."
<el-tree v-model="filerText"
:filter-node-method="filterNode" @input="filterChange"
class="tre" >
:data="this.TreeData" <i slot="prefix" class="el-input__icon el-icon-search"></i>
ref="OrgTree" </el-input>
:show-checkbox="false" <el-tree
node-key="id" :filter-node-method="filterNode"
:default-expand-all="false" class="tre"
highlight-current :data="this.TreeData"
:default-expanded-keys="this.defaultExpandedKeys" ref="OrgTree"
:props="this.defaultProps" :show-checkbox="false"
@node-click="handleNodeClick" node-key="id"
> :default-expand-all="false"
<span class="custom-tree-node" slot-scope="{node, data}"> highlight-current
<i v-if="node.isLeaf" class="fa fa-building-o" style="margin-right: 2px;"></i> :default-expanded-keys="this.defaultExpandedKeys"
<i v-if="!node.isLeaf" class="fa fa-building" style="margin-right: 2px;"></i> :props="this.defaultProps"
<span>{{node.label}}</span> @node-click="handleNodeClick"
</span> >
</el-tree> <span class="custom-tree-node" slot-scope="{ node, data }">
</context-menu-container> <i
</div> v-if="node.isLeaf"
class="fa fa-building-o"
style="margin-right: 2px"
></i>
<i
v-if="!node.isLeaf"
class="fa fa-building"
style="margin-right: 2px"
></i>
<span>{{ node.label }}</span>
</span>
</el-tree>
</context-menu-container>
</div>
</template> </template>
<script lang='tsx'> <script lang='tsx'>
import {Component, Vue} from 'vue-property-decorator'; import { Component, Vue } from "vue-property-decorator";
@Component({ @Component({
components: {} components: {},
}) })
export default class OrgTree extends Vue { export default class OrgTree extends Vue {
/**
// 过滤文本 * 过滤文本
public filerText: any = ''; *
/** * @type {string}
* 过滤节点 * @memberof OrgTree
*/ */
public filterNode(value:any,data:any){ public filerText: string = "";
if (!value) return true;
return data.label.indexOf(value) !==-1; /**
} * 过滤节点
/** *
* 树搜索触发 * @param {string} value 过滤文本
*/ * @param {*} data 树数据
public filterChange(){ * @memberof OrgTree
const OrgTree:any = this.$refs.OrgTree; */
OrgTree.filter(this.filerText); public filterNode(value: string, data: any) {
} if (!value) return true;
return data.label.indexOf(value) !== -1;
/*树数据*/ }
public TreeData: any = [];
/**
/*树显示说明:子树为节点对象的children,节点标签为节点对象的label*/ * 树搜索触发
public defaultProps: any = { *
children: 'children', * @memberof OrgTree
label: 'label' */
} public filterChange() {
const OrgTree: any = this.$refs.OrgTree;
/*默认展开节点*/ OrgTree.filter(this.filerText);
public defaultExpandedKeys: any = []; }
/*当前登录人信息*/ /**
public curUserContext: any = {}; * 树数据
*
* @type {Array<*>}
/** * @memberof OrgTree
* vue 创建 */
*/ public TreeData: Array<any> = [];
public created() {
var _this: any = this; /**
// 获取当前登录人信息 * 树显示说明:子树为节点对象的children,节点标签为节点对象的label
if (_this && _this.$attrs && _this.$attrs.context) { *
_this.curUserContext = _this.$attrs.context; * @type {*}
} * @memberof OrgTree
} */
public defaultProps: any = {
/** children: "children",
* vue 挂载 label: "label",
*/ };
public mounted() {
this.initTree(); /**
} * 默认展开节点
*
* @type {Array<*>}
* @memberof OrgTree
*/
public defaultExpandedKeys: Array<any> = [];
/**
* 当前登录人信息
*
* @type {*}
* @memberof OrgTree
*/
public curUserContext: any = {};
/**
* vue 创建
*
* @memberof OrgTree
*/
public created() {
var _this: any = this;
// 获取当前登录人信息
if (_this && _this.$attrs && _this.$attrs.context) {
_this.curUserContext = _this.$attrs.context;
}
}
/**
* vue 挂载
*
* @memberof OrgTree
*/
public mounted() {
this.initTree();
}
/**
* 初始化树
*
* @memberof OrgTree
*/
private initTree() {
const _this = this;
// 获取当前登录人的身份
const userStr = localStorage.getItem("user");
let user: any = {};
if (userStr) {
user = JSON.parse(userStr);
}
// 获取当前登录人所处组织及其下级组织
let url: string = "";
if (user.superuser == 1) {
// 获取所有组织
url = "sysorganizations/alls/suborg/picker";
} else {
if (_this.curUserContext && _this.curUserContext.srforgid) {
url =
"sysorganizations/" +
_this.curUserContext.srforgid +
"/suborg/picker";
} else {
this.$Notice.error({ title: "错误", desc: "当前登录人组织为空" });
}
}
/** this.$http
* 初始化树 .get(url)
*/ .then((response: any) => {
private initTree() { if (!response || response.status !== 200) {
const _this = this; this.$Notice.error({ title: "错误", desc: response.message });
// 获取当前登录人的身份 return;
const userStr = localStorage.getItem('user'); } else {
let user: any = {}; // 给树赋值,数据结构在后台已经按照eltree格式化
if (userStr) { _this.TreeData = response.data;
user = JSON.parse(userStr); if (response.data && response.data.length > 0) {
} // 设置默认选中第一个节点,即高亮显示
// 获取当前登录人所处组织及其下级组织 this.$nextTick(function () {
let url = ''; let orgTree: any = this.$refs.OrgTree;
if (user.superuser==1) { orgTree.setCurrentKey(response.data[0].id);
// 获取所有组织
url = 'sysorganizations/alls/suborg/picker';
}else {
if (_this.curUserContext && _this.curUserContext.srforgid) {
url = 'sysorganizations/' + _this.curUserContext.srforgid + '/suborg/picker';
} else {
this.$Notice.error({title: '错误', desc: '当前登录人组织为空'});
}
}
this.$http.get(url).then((response: any) => {
if (!response || response.status !== 200) {
this.$Notice.error({title: '错误', desc: response.message});
return;
} else {
// 给树赋值,数据结构在后台已经按照eltree格式化
_this.TreeData = response.data;
if (response.data && response.data.length > 0) {
// 设置默认选中第一个节点,即高亮显示
this.$nextTick(function(){
let orgTree:any = this.$refs.OrgTree;
orgTree.setCurrentKey(response.data[0].id);
})
// 默认加载第一个节点的右侧视图,调用选中数据变更事件
_this.selectionChange(response.data[0]);
}
}
}).catch((e:any) => {
console.log(e);
}); });
// 默认加载第一个节点的右侧视图,调用选中数据变更事件
_this.selectionChange(response.data[0]);
}
} }
})
.catch((e: any) => {
/** console.log(e);
* 处理点击节点 });
*/ }
protected handleNodeClick() {
// 获取当前树 /**
const OrgTree: any = this.$refs.OrgTree; * 处理点击节点
// 获取点击状态的节点 *
let node = OrgTree.getCurrentNode(); * @memberof OrgTree
// console.log("选中的node:" + JSON.stringify(node)); */
// if (node.isLeaf && node.isLeaf == true) protected handleNodeClick() {
// 选中数据变更事件 // 获取当前树
this.selectionChange(node); const OrgTree: any = this.$refs.OrgTree;
} // 获取点击状态的节点
let node = OrgTree.getCurrentNode();
/** // console.log("选中的node:" + JSON.stringify(node));
* 选中数据变更事件
* // 选中数据变更事件
* @public this.selectionChange(node);
* @param {*} node 节点对应node对象 }
* @memberof OrgTree
*/ /**
public selectionChange(node: any) { * 选中数据变更事件
// 获取右侧视图渲染数据需要的参数 *
let temp = JSON.parse(JSON.stringify(node)); * @param {*} node 节点对应node对象
temp.id = "Org;" + node.id; * @memberof OrgTree
temp.srfparentdename = "SysOrganization"; */
temp.srfparentkey = node.id; public selectionChange(node: any) {
temp.navparams = "{}"; // 获取右侧视图渲染数据需要的参数
temp.sysorganization = node.id; let temp = JSON.parse(JSON.stringify(node));
let srfappctx: any = {}; temp.id = "Org;" + node.id;
srfappctx.srfparentkey = temp.srfparentkey; temp.srfparentdename = "SysOrganization";
srfappctx.srfparentdename = temp.srfparentdename; temp.srfparentkey = node.id;
srfappctx.sysorganization = temp.sysorganization; temp.navparams = "{}";
temp.srfappctx = srfappctx; temp.sysorganization = node.id;
// 抛出参数 let srfappctx: any = {};
let selectiondata: any = [temp]; srfappctx.srfparentkey = temp.srfparentkey;
this.$emit('selectionchange', selectiondata); srfappctx.srfparentdename = temp.srfparentdename;
} srfappctx.sysorganization = temp.sysorganization;
temp.srfappctx = srfappctx;
} // 抛出参数
let selectiondata: any = [temp];
this.$emit("selectionchange", selectiondata);
}
}
</script> </script>
<style lang='less'> <style lang='less'>
@import './org-tree-treeview.less'; @import "./org-tree-treeview.less";
</style> </style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册