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.
945 lines
32 KiB
945 lines
32 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-12-17 13:24:58
|
|
@ 备注: 设置系统权限
|
|
-->
|
|
<script lang='ts' setup>
|
|
import { getOrgTreeList } from "@/api/hr/org/index";
|
|
import { appInitAuthorization,gainAppTableListNew,getPowerPageUser,systemAppAuthorization,gainAppEmpowerPower } from "@/api/system/roleapi/postrole";
|
|
import { appPowerUnit } from "@/api/system/roleapi/power";
|
|
import { giveRoleTree,editRoleStatus,getOrgPostTree } from '@/api/role/index'
|
|
import type { getSystemPower,AppPowerTree,systemList,custerAppInfo, custerAppTablePower, searchUser } from "@/api/system/roleapi/types";
|
|
import type { TreeInstance } from 'element-plus'
|
|
import type {RoleListTree,RoleFormInfo,orgAndPostisListTree} from '@/api/role/types'
|
|
import { appTableBut, appListBut,appDetailBut,formBaseBut,appGroupBut } from "@/utils/workflow/const";
|
|
|
|
import { Search } from '@element-plus/icons-vue'
|
|
|
|
import SvgIcon from "@/components/SvgIcon/index.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'
|
|
import { orgInfo } from '@/api/displayboardapi/types';
|
|
const squareUrl = ref<string>(
|
|
"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
|
|
);
|
|
import AppTablePower from '@/views/system/monitor/online/powerPage/apptablepower.vue'
|
|
import AppTabsPower from '@/views/system/monitor/online/powerPage/appTabsPower.vue'
|
|
|
|
|
|
|
|
const appTabsPowerPage = ref()
|
|
const appLoading = ref(false)
|
|
const setRolePople = ref(false)
|
|
const orgTree = ref<orgInfo[]>([]) //行政组织树
|
|
const setRoleManInfo = ref<RoleListTree>()
|
|
const roleGroupOrInfo = ref(1)
|
|
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 treeRef = ref()
|
|
const appSystemConfig = ref<any[]>([])
|
|
const appFormButConfig = ref<any[]>([])
|
|
const grouTabsLoading = ref(false)
|
|
const props = {
|
|
value: 'id',
|
|
label: 'label',
|
|
disabled:'status',
|
|
children: 'children',
|
|
}
|
|
//获取系统权限控制项
|
|
const systemPower = ref<getSystemPower>({
|
|
powerType: "org",
|
|
appId: "",
|
|
appSystem: "system",
|
|
roleId: "",
|
|
isPick: false,
|
|
appType: ""
|
|
})
|
|
//行政组织树字段约束
|
|
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 onQueryChanged = (query: string) => {
|
|
treeRef.value!.filter(query)
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-11-26 10:09:42
|
|
@ 功能: 编辑角色人员
|
|
*/
|
|
const editRolePeopel = (item:RoleListTree) =>{
|
|
console.log("编辑角色人员--111111->",item)
|
|
setRoleManInfo.value = item
|
|
setRolePople.value = true
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-12-17 13:32:54
|
|
@ 功能: 获取角色树
|
|
*/
|
|
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
|
|
grouTabsLoading.value=false
|
|
})
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-12-17 13:37:28
|
|
@ 功能: 添加角色组
|
|
*/
|
|
const addRoleGroup = (types:number) => {
|
|
roleGroupOrInfo.value = types
|
|
openRoleGroup.value = true
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-12-17 13:40:53
|
|
@ 功能: 获取平台授权项目
|
|
*/
|
|
const getSystemPowerSub = () => {
|
|
appPowerUnit(systemPower.value).then(({data})=>{
|
|
console.log("获取平台授权项目------->",data)
|
|
systemPowerTree.value = data
|
|
grouTabsLoading.value=false
|
|
})
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-12-17 13:40:01
|
|
@ 功能: 选中角色
|
|
*/
|
|
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();
|
|
}
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-12-17 13:47:01
|
|
@ 功能: 编辑角色信息
|
|
*/
|
|
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;
|
|
}
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-12-17 13:47:30
|
|
@ 功能: 编辑角色状态
|
|
*/
|
|
const editRoleStatusBut = (id:string|number,types:number) => {
|
|
// console.log("编辑角色状态--->",id)
|
|
editRoleStatus({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',
|
|
})
|
|
}
|
|
})
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-12-17 13:52:17
|
|
@ 功能: 获取行政组织
|
|
*/
|
|
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();
|
|
}
|
|
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-12-17 13:55:39
|
|
@ 功能: 获取平台授权项目用户
|
|
*/
|
|
const getPowerPageUserSub = () => {
|
|
console.log("获取平台授权项目用户---searchUserQuery---->",searchUserQuery)
|
|
getPowerPageUser(searchUserQuery).then(({data})=>{
|
|
console.log("获取平台授权项目用户------->",data)
|
|
userPowerList.value = data
|
|
grouTabsLoading.value=false
|
|
})
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-12-17 13:55:02
|
|
@ 功能: 查询用户
|
|
*/
|
|
const onQueryChangedOrgUser = (query: string) => {
|
|
console.log("获取平台授权项目用户---查询--->",query)
|
|
searchUserQuery.page=1
|
|
searchUserQuery.name = query
|
|
getPowerPageUserSub()
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 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-12-17 14:07:34
|
|
@ 功能: 获取行政组织树
|
|
*/
|
|
const getOrgTreeAry = () => {
|
|
roleLoading.value = true
|
|
if(!Array.isArray(orgTree.value) || orgTree.value.length<=0){
|
|
|
|
getOrgTreeList({ orgid: 0 })
|
|
.then(( data:any ) => {
|
|
if(Array.isArray(data.data) && data.data.length>0){
|
|
systemPower.value.roleId=data.data[0].id.toString()
|
|
}
|
|
orgTree.value = data.data
|
|
roleLoading.value = false
|
|
getSystemPowerSub();
|
|
}).finally(()=>{
|
|
roleLoading.value = false
|
|
grouTabsLoading.value=false
|
|
})
|
|
}else{
|
|
roleLoading.value = false
|
|
}
|
|
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-12-17 14:12:36
|
|
@ 功能: 获取行政组织及岗位
|
|
*/
|
|
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
|
|
grouTabsLoading.value=false
|
|
})
|
|
}else{
|
|
orgPostLoading.value=true
|
|
}
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-05-13 14:20:47
|
|
@ 功能: 获取自定义App
|
|
*/
|
|
const appGroupButAry = ref<string[]>([])
|
|
const appPowerArt = ref<any>([])
|
|
const getAppList = () => {
|
|
appLoading.value=true
|
|
appInitAuthorization({appType:systemPower.value.appSystem,powerType:systemPower.value.powerType,roleId:systemPower.value.roleId}).then((data: any) => {
|
|
console.log("获取自定义App", data);
|
|
// appList.value = data.data;
|
|
appPowerArt.value = data.data.appList
|
|
appGroupButAry.value = data.data.groupButton
|
|
// if (data.data && data.data.length > 0) {
|
|
// if (data.data[0] && data.data[0].signCode) {
|
|
// activeAppId.value = data.data[0].signCode;
|
|
|
|
// }
|
|
// }
|
|
// console.log("获取自定义App", activeAppId.value);
|
|
grouTabsLoading.value=false
|
|
}).finally(()=>{
|
|
appLoading.value=false
|
|
})
|
|
};
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-12-17 14:11:19
|
|
@ 功能: 检测赋权组
|
|
*/
|
|
watch(()=>systemPower.value.powerType,(val:string)=>{
|
|
systemPower.value.appId=""
|
|
systemPower.value.appSystem="system"
|
|
systemPower.value.roleId=""
|
|
grouTabsLoading.value=true
|
|
switch(val){
|
|
case "org":
|
|
getOrgTreeAry();
|
|
|
|
break;
|
|
case "job":
|
|
getOrgPostisTree()
|
|
break;
|
|
case "role":
|
|
getRoleTree();
|
|
break;
|
|
case "person":
|
|
getPowerPageUserSub()
|
|
break;
|
|
default:
|
|
}
|
|
|
|
if(systemPower.value.appSystem=="app"){
|
|
appTabsPowerPage.value.getAppList();
|
|
}else{
|
|
getSystemPowerSub();
|
|
}
|
|
},{
|
|
immediate:true
|
|
})
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-12-17 14:44:08
|
|
@ 功能: 监听系统选择
|
|
*/
|
|
watch(()=>systemPower.value.appSystem,(val:string)=>{
|
|
console.log("监听系统选择--111111->",val)
|
|
if(val=="app"){
|
|
// getAppList();
|
|
appTabsPowerPage.value.getAppList()
|
|
}else{
|
|
getSystemPowerSub()
|
|
|
|
}
|
|
systemPower.value.isPick = false
|
|
},{
|
|
immediate:true
|
|
})
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 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-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:any)=>{
|
|
console.log("提交应用授权-data--3---->",data)
|
|
if(data.code==0){
|
|
ElMessage({
|
|
message: "提交成功",
|
|
type: "success",
|
|
})
|
|
}else{
|
|
ElMessage({
|
|
message: "提交失败",
|
|
type: "error",
|
|
})
|
|
}
|
|
})
|
|
}
|
|
//组件渲染完毕
|
|
onMounted(()=>{
|
|
getOrgTreeAry();
|
|
|
|
console.log("高度-----1---->",roleLeft.value?.offsetHeight)
|
|
nextTick(()=>{
|
|
treeBoxHeight.value = roleLeft.value?.offsetHeight - 140
|
|
treeBoxHeightOrg.value = roleLeft.value?.offsetHeight - 100
|
|
})
|
|
|
|
})
|
|
</script>
|
|
<template>
|
|
<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||grouTabsLoading"
|
|
: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||grouTabsLoading"
|
|
: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>
|
|
<div class="treeBoxClass">
|
|
<el-tree-v2
|
|
ref="treeRef"
|
|
style="max-width: 350px;"
|
|
:data="roleListdata"
|
|
:props="props"
|
|
:filter-method="filterMethod"
|
|
:height="treeBoxHeight"
|
|
:v-loading="roleLoading||grouTabsLoading"
|
|
:expand-on-click-node="false"
|
|
:highlight-current="true"
|
|
class="treebox"
|
|
@node-click="pickRoleTree"
|
|
>
|
|
<template #default="{ node }" >
|
|
<div class="treeRoleBox">
|
|
<span>{{ node.label }}</span>
|
|
<div class="spanButBox">
|
|
<el-dropdown trigger="click">
|
|
<svg-icon icon-class="xiala1" style="margin-right: 20px;" />
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item v-if="node.data.types == 1">
|
|
<el-text size="small" @click.stop="editRolePeopel(node.data)">人员</el-text>
|
|
</el-dropdown-item>
|
|
<el-dropdown-item v-if="node.disabled">
|
|
<el-text size="small" @click.stop="editMyInfoIcon(node.data,1)">禁用</el-text>
|
|
</el-dropdown-item>
|
|
<el-dropdown-item v-else>
|
|
<el-text size="small" @click.stop="editMyInfoIcon(node.data,2)">启用</el-text>
|
|
</el-dropdown-item>
|
|
<el-dropdown-item>
|
|
<el-text size="small" @click.stop="editMyInfoIcon(node.data,3)">编辑</el-text>
|
|
</el-dropdown-item >
|
|
<el-dropdown-item divided>
|
|
<el-text type="danger" size="small" @click.stop="editMyInfoIcon(node.data,4)">删除</el-text>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-tree-v2>
|
|
</div>
|
|
</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" :v-loading="grouTabsLoading">
|
|
<div v-for="item in userPowerList.list" :key="item.id" :class="item.isPick?'userBox active':'userBox'" @click="pickUser(item)">
|
|
<el-avatar shape="square" :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="目录/菜单" min-width="300" >
|
|
<template #default="scope">
|
|
<el-checkbox v-model="scope.row.isTrue" label="" @click.stop="pickSystemMenuInfo(scope.row)" />
|
|
<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>
|
|
|
|
|
|
|
|
|
|
<!--appPowerArt.value = data.data.appList
|
|
appGroupBut.value = data.data.groupButton-->
|
|
</el-tab-pane>
|
|
<el-tab-pane label="应用" name="app">
|
|
<template #label>
|
|
<el-text class="tabsTitleCont">应用</el-text>
|
|
</template>
|
|
|
|
<AppTabsPower ref="appTabsPowerPage" :app-type="systemPower.appSystem" :power-type="systemPower.powerType" :role-id="systemPower.roleId" :org-tree="orgTree" />
|
|
|
|
<!--AppTablePower :app-type="systemPower.appSystem" :power-type="systemPower.powerType" :role-id="systemPower.roleId" /-->
|
|
|
|
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
|
|
<AddRoleGroup v-if="openRoleGroup" v-model:show="openRoleGroup" :group-info="roleGroupOrInfo" @resthandel="getRoleTree" />
|
|
<SetRolePeople v-model:show="setRolePople" :org="orgTree" :role-info="setRoleManInfo" />
|
|
<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;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
.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%;
|
|
min-width: 100px;
|
|
td,
|
|
th {
|
|
min-width: 100px;
|
|
// border: 0px solid #cccccc;
|
|
border-bottom: 1px solid #cccccc;
|
|
padding: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
|
|
}
|
|
.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;
|
|
}
|
|
.tableScrollbar{
|
|
width: 100%;
|
|
height: calc(100vh - 260px);
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
.treeBoxClass{
|
|
:deep .el-tree--highlight-current
|
|
.el-tree-node.is-current
|
|
> .el-tree-node__content{
|
|
background-color: rgba(135,206,235,0.2);
|
|
color: #409eff;
|
|
font-size: bold;
|
|
}
|
|
:deep
|
|
.el-tree-node :hover{
|
|
background-color: rgba(135,206,235,0.2);
|
|
color: #409eff;
|
|
font-size: bold;
|
|
}
|
|
}
|
|
</style>
|
|
|