You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1070 lines
37 KiB
1070 lines
37 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-11-17 08:08:01
|
|
@ 备注:
|
|
-->
|
|
<script lang='ts' setup>
|
|
import { giveRoleTree,getOrgPostTree } from '@/api/role/index'
|
|
import type { TreeInstance } from 'element-plus'
|
|
import type {RoleListTree,RoleFormInfo,orgAndPostisListTree} from '@/api/role/types'
|
|
import { getOrgTreeList } from "@/api/hr/org/index";
|
|
import { appPowerUnit } from "@/api/system/roleapi/power";
|
|
import type { getSystemPower,AppPowerTree,systemList } from "@/api/system/roleapi/types";
|
|
import { gainAppList,gainAppTableListNew,getPowerPageUser,systemAppAuthorization } from "@/api/system/roleapi/postrole";
|
|
import { appTableBut, appListBut } from "@/utils/workflow/const";
|
|
import { Search } from '@element-plus/icons-vue'
|
|
|
|
import SetRolePeople from '@/views/system/monitor/online/roleConfig/setRolePeople.vue'
|
|
import AddRoleGroup from '@/views/system/monitor/online/roleConfig/addRoleGroup.vue'
|
|
import EditRoleGroup from '@/views/system/monitor/online/roleConfig/editRoleGroup.vue'
|
|
const squareUrl = ref<string>(
|
|
"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
|
|
);
|
|
|
|
const roleGroupOrInfo = ref(1)
|
|
const orgTree = ref<orgInfo[]>([]) //行政组织树
|
|
const roleLeft = ref() //左侧控件
|
|
const searchQuery = ref('') //行政组织搜索
|
|
const treeRefOrg = ref<TreeInstance>()
|
|
const treeRefOrgPost = ref<TreeInstance>() //岗位
|
|
const roleListdata = ref<RoleListTree[]>([]) //角色树
|
|
const editRoleCont = ref<RoleFormInfo>()
|
|
const appList = ref<custerAppInfo[]>([]);
|
|
const openEditRoleGroup = ref(false)
|
|
const roleLoading = ref(false)
|
|
const orgPostLoading = ref(false)
|
|
const openRoleGroup = ref(false)
|
|
const treeBoxHeight = ref(300)
|
|
const treeBoxHeightOrg = ref(300)
|
|
const systemPowerTree = ref<AppPowerTree[]>([])
|
|
const orgPostisListdata = ref<orgAndPostisListTree[]>([]) ///行政组织岗位树
|
|
const userPowerList = ref<systemList>({}) //人员树
|
|
const activeAppId = ref<string>("");
|
|
const appTableList = ref<custerAppTablePower[]>([]);
|
|
const myAppTableLoad = ref(false)
|
|
|
|
const props = {
|
|
value: 'id',
|
|
label: 'label',
|
|
disabled:'status',
|
|
children: 'children',
|
|
}
|
|
//获取系统权限控制项
|
|
const systemPower = ref<getSystemPower>({
|
|
powerType:"org",
|
|
appId:"",
|
|
appSystem:"system",
|
|
roleId:"",
|
|
isPick:false,
|
|
})
|
|
//行政组织树字段约束
|
|
const propsOrg = {
|
|
value: 'id',
|
|
label: 'name',
|
|
// disabled:'status',
|
|
children: 'child',
|
|
}
|
|
const propsOrgPost = {
|
|
value: 'id',
|
|
label: 'label',
|
|
disabled:'status',
|
|
children: 'children',
|
|
}
|
|
const systemMenuTreePropsing = {
|
|
children: "child",
|
|
label: "name",
|
|
value: "id",
|
|
};
|
|
//搜索人员
|
|
const searchUserQuery =reactive<searchUser>({
|
|
page:1,
|
|
pagesize:20,
|
|
name:"",
|
|
}); //搜索人员
|
|
const filterMethod = (query: string, node: any) => node.label!.includes(query)
|
|
const filterMethodOrg = (query: string, node: any) => {
|
|
return node.name!.includes(query)
|
|
}
|
|
//搜索行政组织
|
|
const onQueryChangedOrg = (query: string) => {
|
|
treeRefOrg.value!.filter(query)
|
|
}
|
|
//搜索行政组织岗位
|
|
const onQuedOrg = (query: string) => {
|
|
treeRefOrgPost.value!.filter(query)
|
|
}
|
|
//获取行政组织树
|
|
const getOrgTreeAry = () => {
|
|
roleLoading.value = true
|
|
if(!Array.isArray(orgTree.value) || orgTree.value.length<=0){
|
|
|
|
getOrgTreeList({ orgid: 0 })
|
|
.then(({ data }) => {
|
|
console.log("获取行政组织树------->",data)
|
|
if(Array.isArray(data) && data.length>0){
|
|
systemPower.value.roleId=data[0].id.toString()
|
|
console.log("获取行政组织树------->",systemPower.value)
|
|
}
|
|
orgTree.value = data
|
|
roleLoading.value = false
|
|
getSystemPowerSub();
|
|
}).finally(()=>{roleLoading.value = false})
|
|
}else{
|
|
roleLoading.value = false
|
|
}
|
|
|
|
}
|
|
//获取行政组织及岗位
|
|
const getOrgPostisTree = () => {
|
|
orgPostLoading.value=true
|
|
if(!Array.isArray(orgPostisListdata.value) || orgPostisListdata.value.length<=0){
|
|
|
|
getOrgPostTree({id:"313"}).then(({data})=>{
|
|
console.log("获取行政组织及岗位--------->",data)
|
|
if(Array.isArray(data) && data.length>0){
|
|
systemPower.value.roleId=data[0].id.toString()
|
|
}
|
|
orgPostisListdata.value = data
|
|
orgPostLoading.value=false
|
|
}).finally(()=>{orgPostLoading.value=false})
|
|
}else{
|
|
orgPostLoading.value=true
|
|
}
|
|
}
|
|
//获取平台授权项目
|
|
const getSystemPowerSub = () => {
|
|
appPowerUnit(systemPower.value).then(({data})=>{
|
|
console.log("获取平台授权项目------->",data)
|
|
systemPowerTree.value = data
|
|
|
|
})
|
|
}
|
|
//选择行政组织
|
|
const pickOrgTree = (data:any) => {
|
|
console.log("监测赋权组----2222--->",systemPower.value.powerType,"---------->",data)
|
|
if((systemPower.value.powerType=="job" && data.types == "9") || systemPower.value.powerType!="job"){
|
|
systemPower.value.appId=""
|
|
systemPower.value.appSystem="system"
|
|
systemPower.value.roleId=""
|
|
systemPower.value.roleId=data.id.toString()
|
|
getSystemPowerSub();
|
|
}
|
|
|
|
}
|
|
//监测赋权组
|
|
watch(()=>systemPower.value.powerType,(val:string)=>{
|
|
console.log("监测赋权组",val)
|
|
systemPower.value.appId=""
|
|
systemPower.value.appSystem="system"
|
|
systemPower.value.roleId=""
|
|
switch(val){
|
|
case "org":
|
|
getOrgTreeAry();
|
|
|
|
break;
|
|
case "job":
|
|
getOrgPostisTree()
|
|
break;
|
|
case "role":
|
|
getRoleTree();
|
|
break;
|
|
case "person":
|
|
getPowerPageUserSub()
|
|
break;
|
|
default:
|
|
}
|
|
|
|
if(systemPower.value.appSystem=="app"){
|
|
getAppList();
|
|
}else{
|
|
getSystemPowerSub();
|
|
}
|
|
|
|
},{
|
|
deep:true
|
|
})
|
|
//添加角色组
|
|
const addRoleGroup = (types:number) => {
|
|
|
|
roleGroupOrInfo.value = types
|
|
openRoleGroup.value = true
|
|
}
|
|
//搜索角色
|
|
const onQueryChanged = (query: string) => {
|
|
treeRef.value!.filter(query)
|
|
}
|
|
//获取角色树
|
|
const getRoleTree = () => {
|
|
roleLoading.value = true
|
|
giveRoleTree().then(({data})=>{
|
|
console.log("监测赋权组------->",data)
|
|
if(Array.isArray(data) && data.length>0){
|
|
systemPower.value.roleId=data[0].id.toString()
|
|
}
|
|
roleListdata.value=data;
|
|
roleLoading.value = false;
|
|
}).finally(()=>{roleLoading.value = false})
|
|
}
|
|
//选中角色节点
|
|
const pickRoleTree = (data:any) => {
|
|
console.log("监测赋权组------->",data)
|
|
if(data.status && data.types==1){
|
|
console.log("监测赋权组------->",data)
|
|
systemPower.value.appId=""
|
|
systemPower.value.appSystem="system"
|
|
systemPower.value.roleId=""
|
|
systemPower.value.roleId=data.id.toString()
|
|
getSystemPowerSub();
|
|
}
|
|
}
|
|
//编辑角色信息
|
|
const editMyInfoIcon = (data:RoleListTree,types:number) => {
|
|
|
|
switch(types){
|
|
case 1:
|
|
editRoleStatusBut(data.id,2)
|
|
break;
|
|
case 2:
|
|
editRoleStatusBut(data.id,1)
|
|
break;
|
|
case 3:
|
|
editRoleCont.value = {
|
|
id:data.id,
|
|
name:data.label,
|
|
type:data.types,
|
|
superior:data.superior,
|
|
sort:data.sort
|
|
}
|
|
openEditRoleGroup.value = true
|
|
break;
|
|
case 4:
|
|
ElMessageBox.confirm(
|
|
"您确定要删除此信息吗？一经删除！数据将不可恢复！请慎重操作！",
|
|
"警告",
|
|
{
|
|
confirmButtonText: '确定删除',
|
|
cancelButtonText: '取消删除',
|
|
type: 'warning',
|
|
}
|
|
).then(()=>{
|
|
editRoleStatusBut(data.id,3)
|
|
})
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
//编辑角色状态
|
|
const editRoleStatusBut = (id:string|number,types:number) => {
|
|
// console.log("编辑角色状态--->",id)
|
|
({id:id.toString(),status:types}).then((data:any)=>{
|
|
if(data.code==0){
|
|
ElMessage({
|
|
message: data.msg,
|
|
type: 'success',
|
|
})
|
|
getRoleTree()
|
|
}else{
|
|
ElMessage({
|
|
message: data.msg,
|
|
type: 'success',
|
|
})
|
|
}
|
|
})
|
|
}
|
|
//获取平台授权项目用户
|
|
const getPowerPageUserSub = () => {
|
|
console.log("获取平台授权项目用户---searchUserQuery---->",searchUserQuery)
|
|
getPowerPageUser(searchUserQuery).then(({data})=>{
|
|
console.log("获取平台授权项目用户------->",data)
|
|
userPowerList.value = data
|
|
})
|
|
}
|
|
//查询
|
|
const onQueryChangedOrgUser = (query: string) => {
|
|
console.log("获取平台授权项目用户---查询--->",query)
|
|
searchUserQuery.page=1
|
|
searchUserQuery.name = query
|
|
getPowerPageUserSub()
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-05-13 14:20:47
|
|
@ 功能: 获取自定义App
|
|
*/
|
|
const getAppList = () => {
|
|
|
|
gainAppList({appType:systemPower.value.appSystem,powerType:systemPower.value.powerType,roleId:systemPower.value.roleId}).then((data: any) => {
|
|
console.log("获取自定义App", data);
|
|
appList.value = data.data;
|
|
if (data.data && data.data.length > 0) {
|
|
if (data.data[0] && data.data[0].signCode) {
|
|
activeAppId.value = data.data[0].signCode;
|
|
nextTick(()=>{
|
|
getAppTableList(false);
|
|
})
|
|
}
|
|
}
|
|
console.log("获取自定义App", activeAppId.value);
|
|
});
|
|
};
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-05-13 16:00:19
|
|
@ 功能: 获取对应App下边的表单
|
|
*/
|
|
const getAppTableList = (number:boolean) => {
|
|
myAppTableLoad.value = true
|
|
console.log("获取对应App下边的表单---number---->",number,activeAppId.value)
|
|
if(activeAppId.value){
|
|
systemPower.value.appId = activeAppId.value.toString()
|
|
gainAppTableListNew({id:activeAppId.value,appType:systemPower.value.appSystem,powerType:systemPower.value.powerType,roleId:systemPower.value.roleId}).then(
|
|
(data: any) => {
|
|
// console.log("获取对应App下边的表单", data);
|
|
if (Array.isArray(data.data)) {
|
|
if(number){
|
|
data.data.forEach((item:any)=>{
|
|
item.tableIsAll = true
|
|
item.tablePower = [ "zc", "tj", "dy", "sc", "fz"]
|
|
item.listPower = [ "xz", "dr", "dc", "sc", "dy", "dyewm"]
|
|
})
|
|
}
|
|
appTableList.value = data.data;
|
|
} else {
|
|
appTableList.value = [];
|
|
}
|
|
myAppTableLoad.value = false
|
|
}
|
|
);
|
|
}else{
|
|
myAppTableLoad.value = false
|
|
}
|
|
|
|
};
|
|
watch(()=>systemPower.value.appSystem,(val:string)=>{
|
|
if(val=="app"){
|
|
getAppList();
|
|
}else{
|
|
getSystemPowerSub()
|
|
}
|
|
systemPower.value.isPick = false
|
|
},{
|
|
immediate:true
|
|
})
|
|
const pickAppList = (val: custerAppInfo) => {
|
|
activeAppId.value = val.signCode
|
|
// systemPower.value.roleId = val.id
|
|
// appTableList.value = []
|
|
systemPower.value.isPick = val.pickAll
|
|
console.log("选择应用---111111->",val)
|
|
getAppTableList(val.pickAll);
|
|
// let cureePick =!val.isPick
|
|
// val.isPick = cureePick
|
|
// activeAppId.value = val.signCode;
|
|
val.isPick = !val.isPick
|
|
if(appList.value && Array.isArray(appList.value)){
|
|
appList.value.forEach((item:custerAppInfo)=>{
|
|
if(val.signCode!=item.signCode){
|
|
item.isPick = false
|
|
}
|
|
// item.isPick = false
|
|
})
|
|
}
|
|
|
|
};
|
|
const pickAppTableList = (val: custerAppInfo) =>{
|
|
console.log("选择应用-22222--111111->",val,appTableList.value)
|
|
systemPower.value.isPick = !val.pickAll
|
|
if(val.isPick){
|
|
appTableList.value.forEach((item:any)=>{
|
|
// console.log("选择应用-22222--333333->",val.isPick)
|
|
item.tableIsAll = !val.pickAll
|
|
if(!val.pickAll){
|
|
item.listIsAll = true
|
|
item.tablePower = [ "zc", "tj", "dy", "sc", "fz"]
|
|
item.listPower = [ "xz", "dr", "dc", "sc", "dy", "dyewm"]
|
|
}else{
|
|
item.listIsAll = false
|
|
item.tablePower = []
|
|
item.listPower = []
|
|
}
|
|
})
|
|
}
|
|
|
|
}
|
|
//选择应用-22222--333333->
|
|
const pickOneAppTableList = (item: any) =>{
|
|
console.log("选择应用-22222--333333->",item.listIsAll,item)
|
|
// item.listIsAll = !item.listIsAll
|
|
if(!item.listIsAll){
|
|
item.tablePower = [ "zc", "tj", "dy", "sc", "fz"]
|
|
item.listPower = [ "xz", "dr", "dc", "sc", "dy", "dyewm"]
|
|
}else{
|
|
item.tablePower = []
|
|
item.listPower = []
|
|
}
|
|
|
|
}
|
|
//监听莹莹binh
|
|
// watch(
|
|
// () => activeAppId.value,
|
|
// (val) => {
|
|
// getAppTableList(2);
|
|
// },
|
|
// {
|
|
// immediate:true
|
|
// }
|
|
// );
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-11-18 08:38:06
|
|
@ 功能: 提交应用授权
|
|
*/
|
|
const savePowerUserSub = () => {
|
|
console.log("提交应用授权---1---->",systemPower.value)
|
|
console.log("提交应用授权---2---->",systemPowerTree.value)
|
|
let sendInfo = {
|
|
powerType: systemPower.value.powerType,
|
|
appId: systemPower.value.appId,
|
|
appSystem: systemPower.value.appSystem,
|
|
roleId: systemPower.value.roleId,
|
|
isPick: systemPower.value.isPick,
|
|
sysstemPowerInfo: systemPowerTree.value,
|
|
CustomizeApp:appTableList.value
|
|
}
|
|
console.log("提交应用授权---3---->",sendInfo)
|
|
systemAppAuthorization(sendInfo).then((data)=>{
|
|
console.log("提交应用授权-data--3---->",data)
|
|
if(data.code==0){
|
|
ElMessage({
|
|
message: "提交成功",
|
|
type: "success",
|
|
})
|
|
}else{
|
|
ElMessage({
|
|
message: "提交失败",
|
|
type: "error",
|
|
})
|
|
}
|
|
})
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-11-18 09:15:12
|
|
@ 功能: 提交自定义应用内授权
|
|
*/
|
|
const savePowerAppSub = () => {
|
|
console.log("提交应用授权--app-1---->",systemPower.value)
|
|
console.log("提交应用授权--app-2---->",appTableList.value)
|
|
let sendInfo = {
|
|
powerType: systemPower.value.powerType,
|
|
appId: systemPower.value.appId,
|
|
appSystem: systemPower.value.appSystem,
|
|
roleId: systemPower.value.roleId,
|
|
isPick: systemPower.value.isPick,
|
|
sysstemPowerInfo: systemPowerTree.value,
|
|
CustomizeApp:appTableList.value
|
|
}
|
|
console.log("提交应用授权--app-3---->",sendInfo)
|
|
systemAppAuthorization(sendInfo).then((data)=>{
|
|
console.log("提交应用授权--data---app-3---->",data)
|
|
if(data.code==0){
|
|
ElMessage({
|
|
message: "提交成功",
|
|
type: "success",
|
|
})
|
|
}else{
|
|
ElMessage({
|
|
message: "提交失败",
|
|
type: "error",
|
|
})
|
|
}
|
|
})
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-11-18 17:00:46
|
|
@ 功能: 选择用户陪权
|
|
*/
|
|
const pickUser = (item:any) =>{
|
|
console.log("选择用户陪权--111111->",item)
|
|
item.isPick = true
|
|
systemPower.value.roleId = item.id.toString()
|
|
// systemPower.value.powerType="user"
|
|
console.log("选择用户陪权--2222->",userPowerList)
|
|
if(userPowerList.value.list && Array.isArray(userPowerList.value.list)){
|
|
userPowerList.value.list.forEach((items:any)=>{
|
|
// console.log("选择用户陪权--111111->",items.id)
|
|
if(items.id!=item.id){
|
|
items.isPick = false
|
|
}
|
|
})
|
|
}
|
|
getSystemPowerSub()
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-11-19 08:25:41
|
|
@ 功能: 选择系统菜单授权
|
|
*/
|
|
const pickSystemMenuInfo = (item:AppPowerTree) =>{
|
|
console.log("选择系统菜单授权--111111->",item)
|
|
if(item.isTrue){
|
|
if(item.buttenPower && Array.isArray(item.buttenPower)){
|
|
item.buttenPower.forEach((child:any)=>{
|
|
child.isTrue = false
|
|
})
|
|
}
|
|
childPickSystemMenuInfo(item.children,false)
|
|
}else{
|
|
if(item.buttenPower && Array.isArray(item.buttenPower)){
|
|
item.buttenPower.forEach((child:any)=>{
|
|
child.isTrue = true
|
|
})
|
|
}
|
|
childPickSystemMenuInfo(item.children,true)
|
|
}
|
|
}
|
|
|
|
const childPickSystemMenuInfo = (menuList:AppPowerTree[],isTrue:boolean) =>{
|
|
if(menuList && Array.isArray(menuList)){
|
|
menuList.forEach((item:AppPowerTree)=>{
|
|
item.isTrue = isTrue
|
|
if(item.buttenPower && Array.isArray(item.buttenPower)){
|
|
item.buttenPower.forEach((child:any)=>{
|
|
child.isTrue = isTrue
|
|
})
|
|
}
|
|
childPickSystemMenuInfo(item.children,isTrue)
|
|
})
|
|
}
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-11-26 10:09:42
|
|
@ 功能: 编辑角色人员
|
|
*/
|
|
const setRolePople = ref(false)
|
|
const setRoleManInfo = ref<RoleListTree>()
|
|
const editRolePeopel = (item:RoleListTree) =>{
|
|
console.log("编辑角色人员--111111->",item)
|
|
setRoleManInfo.value = item
|
|
setRolePople.value = true
|
|
}
|
|
|
|
//组件渲染完毕
|
|
onMounted(()=>{
|
|
getOrgTreeAry();
|
|
|
|
console.log("高度-----1---->",roleLeft.value?.offsetHeight)
|
|
nextTick(()=>{
|
|
treeBoxHeight.value = roleLeft.value?.offsetHeight - 140
|
|
treeBoxHeightOrg.value = roleLeft.value?.offsetHeight - 100
|
|
})
|
|
|
|
})
|
|
</script>
|
|
<template><SetRolePeople v-model:show="setRolePople" :org="orgTree" :role-info="setRoleManInfo" />
|
|
<div class="app-content">
|
|
<div ref="roleLeft" class="roleLeft">
|
|
<el-tabs v-model="systemPower.powerType" class="demo-tabs">
|
|
<el-tab-pane label="组织" name="org">
|
|
<template #label>
|
|
<el-text class="tabsTitle">组织</el-text>
|
|
</template>
|
|
<div class="searchBox">
|
|
<el-input v-model="searchQuery" placeholder="请输入要查找的行政组织" :suffix-icon="Search" @input="onQueryChangedOrg"/>
|
|
</div>
|
|
<el-tree-v2
|
|
ref="treeRefOrg"
|
|
style="max-width: 350px;"
|
|
:data="orgTree"
|
|
:props="propsOrg"
|
|
:filter-method="filterMethodOrg"
|
|
:height="treeBoxHeightOrg"
|
|
:v-loading="roleLoading"
|
|
:highlight-current="true"
|
|
:check-on-click-node="true"
|
|
:expand-on-click-node="false"
|
|
@node-click="pickOrgTree"
|
|
>
|
|
</el-tree-v2>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="岗位" name="job">
|
|
<template #label>
|
|
<el-text class="tabsTitle">岗位</el-text>
|
|
</template>
|
|
<div class="searchBox">
|
|
<el-input v-model="searchQuery" placeholder="请输入要查找的行政组织" :suffix-icon="Search" @input="onQuedOrg"/>
|
|
</div>
|
|
<el-tree-v2
|
|
ref="treeRefOrgPost"
|
|
style="max-width: 350px;"
|
|
:data="orgPostisListdata"
|
|
:props="propsOrgPost"
|
|
:filter-method="filterMethod"
|
|
:height="treeBoxHeightOrg"
|
|
:v-loading="orgPostLoading"
|
|
:highlight-current="true"
|
|
:check-on-click-node="true"
|
|
:expand-on-click-node="false"
|
|
@node-click="pickOrgTree"
|
|
>
|
|
</el-tree-v2>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="角色" name="role">
|
|
<template #label>
|
|
<el-text class="tabsTitle">角色</el-text>
|
|
</template>
|
|
<div class="butBox">
|
|
<el-button type="primary" @click="addRoleGroup(1)">新建角色组</el-button>
|
|
<el-button type="primary" @click="addRoleGroup(2)">新建角色</el-button>
|
|
</div>
|
|
<div class="searchBox">
|
|
<el-input v-model="searchQuery" placeholder="请输入要查找的角色" :suffix-icon="Search" @input="onQueryChanged"/>
|
|
</div>
|
|
<el-tree-v2
|
|
ref="treeRef"
|
|
style="max-width: 350px;"
|
|
:data="roleListdata"
|
|
:props="props"
|
|
:filter-method="filterMethod"
|
|
:height="treeBoxHeight"
|
|
:v-loading="roleLoading"
|
|
@node-click="pickRoleTree"
|
|
>
|
|
<template #default="{ node }" >
|
|
<div class="treeRoleBox">
|
|
<span>{{ node.label }}</span>
|
|
<div class="spanButBox">
|
|
<el-text v-if="node.data.types == 1" type="danger" size="small" @click.stop="editRolePeopel(node.data)">人员</el-text>
|
|
<el-text v-if="node.disabled" type="warning" size="small" @click.stop="editMyInfoIcon(node.data,1)">禁用</el-text>
|
|
<el-text v-else type="success" size="small" @click.stop="editMyInfoIcon(node.data,2)">启用</el-text>
|
|
<el-text type="primary" size="small" @click.stop="editMyInfoIcon(node.data,3)">编辑</el-text>
|
|
<el-text type="danger" size="small" @click.stop="editMyInfoIcon(node.data,4)">删除</el-text>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-tree-v2>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="用户" name="person">
|
|
<div class="searchBox">
|
|
<el-input v-model="searchUserQuery.name" placeholder="请输入要查找的人" :suffix-icon="Search" @input="onQueryChangedOrgUser" clearable />
|
|
</div>
|
|
<el-scrollbar class="tab_pane_bodyes">
|
|
<div v-for="item in userPowerList.list" :key="item.id" :class="item.isPick?'userBox active':'userBox'" @click="pickUser(item)">
|
|
<el-avatar shape="square" :size="size" :src="item.icon?item.icon:squareUrl" />
|
|
<div>
|
|
<el-text type="primary" >{{item.name}}{{ '('+item.code+')' }}</el-text>
|
|
<el-text type="primary" >{{item.org}}</el-text>
|
|
</div>
|
|
</div>
|
|
</el-scrollbar>
|
|
<div style="width: 100%; display: flex; justify-content: center; margin-top: 5px;">
|
|
<el-pagination
|
|
v-model:current-page="searchUserQuery.page"
|
|
:page-size="searchUserQuery.pageSize"
|
|
:pager-count="7"
|
|
layout="prev, pager, next"
|
|
:total="userPowerList.total"
|
|
@change="getPowerPageUserSub"
|
|
/>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
<div class="roleright">
|
|
<el-tabs v-model="systemPower.appSystem" class="demo-tabs">
|
|
<el-tab-pane label="平台" name="system">
|
|
<template #label>
|
|
<el-text class="tabsTitleCont">平台</el-text>
|
|
</template>
|
|
<el-table
|
|
:data="systemPowerTree"
|
|
style="width: 100%; height: calc(100vh - 277px)"
|
|
:cell-style="{ padding: '10px 0' }"
|
|
:header-cell-style="{ background: '#F5F7FA', color: '#909399' }"
|
|
border
|
|
row-key="id"
|
|
>
|
|
<el-table-column fixed prop="name" label="目录/菜单" width="380" >
|
|
<template #default="scope">
|
|
<span class="tree_sapn">{{ scope.row.name }}</span>
|
|
<el-tag v-if="scope.row.types === 2" type="warning" size="small">目录</el-tag>
|
|
<el-tag v-if="scope.row.types === 1" type="success" size="small">菜单</el-tag>
|
|
<el-tag v-if="scope.row.types === 4" type="danger" size="small">按钮</el-tag>
|
|
<el-tag v-if="scope.row.types === 3" type="info" size="small">外链</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="isTrue" label="授权" width="80" align="center" >
|
|
<template #default="scope">
|
|
<el-checkbox v-model="scope.row.isTrue" label="" @click.stop="pickSystemMenuInfo(scope.row)" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="isTrue" label="操作按钮" min-width="380" align="center" >
|
|
<template #default="scope">
|
|
|
|
<template v-for="item in scope.row.buttenPower" :key="item.id" >
|
|
<el-checkbox v-model="item.isTrue" :label="item.name" :value="item.isTrue" />
|
|
</template>
|
|
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column fixed="right" prop="buttenPower" label="操作按钮" min-width="220" >
|
|
<template #header>
|
|
<div class="pickButBox">
|
|
<el-text >数据权限</el-text>
|
|
<el-button type="primary" size="small" @click="savePowerUserSub">确定授权</el-button>
|
|
</div>
|
|
</template>
|
|
<template #default="scope">
|
|
<el-radio-group
|
|
v-model="scope.row.visibleRange.typrs"
|
|
|
|
>
|
|
<el-row>
|
|
<el-col :span="24"><el-radio :value="1">本人</el-radio></el-col>
|
|
<el-col :span="24"><el-radio :value="2">本岗位</el-radio></el-col>
|
|
<el-col :span="24"><el-radio :value="3">本部门</el-radio></el-col>
|
|
<el-col :span="24"><el-radio :value="4">本分部</el-radio></el-col>
|
|
<el-col :span="24">
|
|
<el-radio :value="5">指定行政组织</el-radio>
|
|
<el-tree-select
|
|
v-if="scope.row.visibleRange.typrs == 5"
|
|
v-model="scope.row.visibleRange.val"
|
|
:data="orgTree"
|
|
style="width: 100%"
|
|
node-key="id"
|
|
:props="systemMenuTreePropsing"
|
|
clearable
|
|
multiple
|
|
:render-after-expand="false"
|
|
show-checkbox
|
|
collapse-tags
|
|
collapse-tags-tooltip
|
|
/>
|
|
</el-col>
|
|
<el-col :span="24"><el-radio :value="6">所有</el-radio></el-col>
|
|
</el-row>
|
|
</el-radio-group>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="应用" name="app">
|
|
<template #label>
|
|
<el-text class="tabsTitleCont">应用</el-text>
|
|
</template>
|
|
<table class="table_body">
|
|
<thead>
|
|
|
|
<tr >
|
|
<td align="center" width="20%">应用</td>
|
|
<td width="80%">
|
|
<div class="appPickPower">
|
|
应用详情
|
|
<el-button type="primary" size="small" @click="savePowerAppSub">确定授权</el-button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr >
|
|
<td valign="top">
|
|
<el-scrollbar class="tab_pane_box">
|
|
<ul class="appListBox">
|
|
<li v-for="item in appList" :key="item" @click="pickAppList(item)" :class="{'active':item.isPick}">
|
|
<el-checkbox @click.stop="pickAppTableList(item)" v-model="item.pickAll" :value="item.pickAll" :disabled="!item.isPick" ></el-checkbox>
|
|
{{ item.name }}
|
|
</li>
|
|
</ul>
|
|
</el-scrollbar>
|
|
</td>
|
|
<td valign="top">
|
|
<el-row class="row_head">
|
|
<el-col class="roe_col_head left_line" :span="6">
|
|
页面
|
|
</el-col>
|
|
<el-col class="roe_col_head left_line" :span="6">
|
|
表单权力
|
|
</el-col>
|
|
<el-col class="roe_col_head left_line" :span="6">
|
|
列表权限
|
|
</el-col>
|
|
<el-col class="roe_col_head" :span="6">
|
|
数据权限
|
|
</el-col>
|
|
</el-row>
|
|
<el-scrollbar v-loading="myAppTableLoad" class="tab_pane_body">
|
|
<el-row class="left_right" v-for="item in appTableList" :key="item.id">
|
|
<el-col class="roe_col_head left_line" :span="6">
|
|
<el-checkbox @click.stop="pickOneAppTableList(item)" v-model="item.listIsAll" :value="item.listIsAll"></el-checkbox>
|
|
{{ item.name }}
|
|
</el-col>
|
|
<el-col class="roe_col_head left_line" :span="6">
|
|
<el-checkbox-group v-model="item.tablePower">
|
|
<el-checkbox
|
|
v-for="city in appTableBut"
|
|
:key="city.key"
|
|
:label="city.label"
|
|
:value="city.value"
|
|
>
|
|
{{ city.label }}
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-col>
|
|
<el-col class="roe_col_head left_line" :span="6">
|
|
<el-checkbox-group v-if="item.istIsTrue" v-model="item.listPower">
|
|
<el-checkbox
|
|
v-for="city in appListBut"
|
|
:key="city.key"
|
|
:label="city.label"
|
|
:value="city.value"
|
|
>
|
|
{{ city.label }}
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-col>
|
|
<el-col class="roe_col_head" :span="6">
|
|
<el-radio-group
|
|
v-model="item.datePower.types"
|
|
|
|
>
|
|
<el-row>
|
|
<el-col :span="24"><el-radio :value="1">本人</el-radio></el-col>
|
|
<el-col :span="24"><el-radio :value="2">本岗位</el-radio></el-col>
|
|
<el-col :span="24"><el-radio :value="3">本部门</el-radio></el-col>
|
|
<el-col :span="24"><el-radio :value="4">本分部</el-radio></el-col>
|
|
<el-col :span="24">
|
|
<el-radio :value="5">指定行政组织</el-radio>
|
|
<el-tree-select
|
|
v-if="item.datePower.types == 5"
|
|
v-model="item.datePower.attribute"
|
|
:data="orgTree"
|
|
style="width: 100%"
|
|
node-key="id"
|
|
:props="systemMenuTreePropsing"
|
|
clearable
|
|
multiple
|
|
:render-after-expand="false"
|
|
show-checkbox
|
|
collapse-tags
|
|
collapse-tags-tooltip
|
|
/>
|
|
</el-col>
|
|
<el-col :span="24"><el-radio :value="6">所有</el-radio></el-col>
|
|
</el-row>
|
|
</el-radio-group>
|
|
</el-col>
|
|
</el-row>
|
|
</el-scrollbar>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
|
|
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
|
|
|
|
<AddRoleGroup v-if="openRoleGroup" v-model:show="openRoleGroup" :group-info="roleGroupOrInfo" @resthandel="getRoleTree" />
|
|
<EditRoleGroup v-if="openEditRoleGroup" v-model:show="openEditRoleGroup" :group-info="roleGroupOrInfo" :data="editRoleCont" @resthandel="getRoleTree" />
|
|
</div>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
.app-content{
|
|
display: flex;
|
|
width: 100%;
|
|
height: calc(100vh - 170px);
|
|
padding: 15px 20px 0 20px;
|
|
justify-content: space-between;
|
|
.roleLeft{
|
|
width: 350px;
|
|
height: calc(100vh - 185px);
|
|
background-color: #FFFFFF;
|
|
.butBox{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 10px 10px 10px;
|
|
}
|
|
.searchBox{
|
|
padding: 0 10px 5px 10px;
|
|
}
|
|
.treeBox{
|
|
height: calc(100vh - 330px);
|
|
|
|
}
|
|
}
|
|
.roleright{
|
|
width: calc(100% - 370px);
|
|
height: calc(100vh - 185px);
|
|
background-color: #FFFFFF;
|
|
overflow: hidden;
|
|
:deep .el-tabs__content{
|
|
padding: 15px 15px 15px 15px;
|
|
}
|
|
:deep .el-main{
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.userTitleBox{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0px 0px 15px 0px;
|
|
border-bottom: 1px solid rgba($color: #000000, $alpha: 0.2);
|
|
}
|
|
.userTitleBoxes{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.pickButBox{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.scrollBox{
|
|
margin-top: 5px;
|
|
height: calc(100vh - 320px);
|
|
}
|
|
|
|
}
|
|
.tabsTitle{
|
|
padding: 0 15px;
|
|
}
|
|
.tabsTitleCont{
|
|
padding: 0 35px;
|
|
}
|
|
.treeRoleBox{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
align-items: center;
|
|
}
|
|
.spanButBox{
|
|
span{
|
|
padding: 0 5px;
|
|
}
|
|
}
|
|
}
|
|
.tree_sapn {
|
|
padding: 0 10px 0 0;
|
|
}
|
|
|
|
|
|
.table_body {
|
|
background-color: #ffffff;
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
/*
|
|
* 设置边框
|
|
*/
|
|
td,
|
|
th {
|
|
border: 1px solid #cccccc;
|
|
padding: 5px;
|
|
table {
|
|
width: 100%;
|
|
td,
|
|
th {
|
|
border: 0px solid #cccccc;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.appListBox {
|
|
width: 100%;
|
|
li {
|
|
padding: 10px 2px;
|
|
border-bottom: 1px solid #ececec;
|
|
cursor: pointer;
|
|
}
|
|
li.active {
|
|
background-color: #a0cfff;
|
|
}
|
|
}
|
|
.tab_pane_box {
|
|
height: calc(100vh - 310px);
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
.table_body {
|
|
background-color: #ffffff;
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
/*
|
|
* 设置边框
|
|
*/
|
|
td,
|
|
th {
|
|
border: 1px solid #cccccc;
|
|
padding: 5px;
|
|
table {
|
|
width: 100%;
|
|
td,
|
|
th {
|
|
border: 0px solid #cccccc;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.row_head{
|
|
background-color: #f5f7fa;
|
|
color: #000000;
|
|
text-align: center;
|
|
border: 1px solid #E4E7ED;
|
|
}
|
|
.roe_col_head{
|
|
padding: 5px 5px;
|
|
}
|
|
.left_right{
|
|
border-left: 1px solid #E4E7ED;
|
|
border-right: 1px solid #E4E7ED;
|
|
border-bottom: 1px solid #E4E7ED;
|
|
}
|
|
.left_line{
|
|
border-right: 1px solid #E4E7ED;
|
|
}
|
|
.tab_pane_body {
|
|
height: calc(100vh - 340px);
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
.tab_pane_bodyes {
|
|
height: calc(100vh - 320px);
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
.appPickPower{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.userBox{
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-items: space-between;
|
|
padding: 5px 10px;
|
|
border-bottom: 1px dashed rgba($color: #000000, $alpha: 0.2);
|
|
cursor: pointer;
|
|
div{
|
|
span{
|
|
display: flex;
|
|
width: 100%;
|
|
padding: 0 5px;
|
|
color:rgba($color: #000000, $alpha: 0.6);
|
|
}
|
|
}
|
|
}
|
|
.userBox.active {
|
|
background-color: #a0cfff;
|
|
}
|
|
</style>
|
|
|