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.
903 lines
32 KiB
903 lines
32 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-10-21 10:06:51
|
|
@ 备注: 在线人数
|
|
-->
|
|
<script lang='ts' setup>
|
|
import { giveRoleTree,editRoleStatus,getOrgPostTree } from '@/api/role/index'
|
|
import type {RoleListTree,RoleFormInfo,orgAndPostisListTree} from '@/api/role/types'
|
|
import type { TreeNode,TreeInstance } from 'element-plus'
|
|
import { Search } from '@element-plus/icons-vue'
|
|
import { orgInfo } from "@/api/hr/org/type";
|
|
import { getOrgTreeList } from "@/api/hr/org/index";
|
|
import { appPowerUnit } from "@/api/system/roleapi/power";
|
|
import type { getSystemPower,AppPowerTree } from "@/api/system/roleapi/types";
|
|
import { appTableBut, appListBut } from "@/utils/workflow/const";
|
|
import {
|
|
gainAppList,
|
|
gainAppTableListNew,
|
|
getMyPeoplceAndSunOrg,
|
|
getMyPeopleAndSunOrgPost,
|
|
getPowerPageUser
|
|
} from "@/api/system/roleapi/postrole";
|
|
import {
|
|
custerAppInfo
|
|
} from "@/api/system/roleapi/types";
|
|
import type { LoadFunction } from 'element-plus'
|
|
|
|
|
|
|
|
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 orgTree = ref<orgInfo[]>([])
|
|
const roleGroupOrInfo = ref(1)
|
|
const searchQuery = ref('')
|
|
const orgWorkRole = ref("org")
|
|
const appSysPick = ref("system")
|
|
const treeRef = ref<TreeInstance>()
|
|
const treeRefOrg = ref<TreeInstance>()
|
|
const roleListdata = ref<RoleListTree[]>([])
|
|
const orgPostisListdata = ref<orgAndPostisListTree[]>([])
|
|
const treeBoxHeight = ref(300)
|
|
const treeBoxHeightOrg = ref(300)
|
|
const roleLeft = ref()
|
|
const systemPowerTree = ref<AppPowerTree[]>([])
|
|
const ownerPeople = ref<any>([])
|
|
|
|
const props = {
|
|
value: 'id',
|
|
label: 'label',
|
|
disabled:'status',
|
|
children: 'children',
|
|
}
|
|
const propsOrg = {
|
|
value: 'id',
|
|
label: 'name',
|
|
disabled:'status',
|
|
children: 'child',
|
|
}
|
|
const propsOrgPost = {
|
|
value: 'id',
|
|
label: 'label',
|
|
disabled:'status',
|
|
children: 'children',
|
|
}
|
|
const searchUser = reactive({
|
|
page:1,
|
|
pageSize:19,
|
|
name:"",
|
|
total:0,
|
|
});
|
|
const systemPower = ref<getSystemPower>({
|
|
powerType:"org",
|
|
appType:"appsystem",
|
|
appSystem:"system",
|
|
roleId:"",
|
|
})
|
|
const roleLoading = ref(false)
|
|
const openRoleGroup = ref(false)
|
|
const orgLoading = ref(false)
|
|
const orgPostLoading = ref(false)
|
|
|
|
const appList = ref<custerAppInfo[]>([]);
|
|
//搜索角色
|
|
const onQueryChanged = (query: string) => {
|
|
treeRef.value!.filter(query)
|
|
}
|
|
//搜索行政组织
|
|
const onQueryChangedOrg = (query: string) => {
|
|
// treeRefOrg.value!.filter(query)
|
|
searchUser.page = 1
|
|
searchUser.total = 0
|
|
fpickUserTabs()
|
|
}
|
|
const filterMethod = (query: string, node: any) => node.label!.includes(query)
|
|
const filterMethodOrg = (query: string, node: any) => node.name!.includes(query)
|
|
|
|
//监测赋权组
|
|
watch(()=>systemPower.value.powerType,(val:string)=>{
|
|
console.log("监测赋权组",val)
|
|
getSystemPowerSub();
|
|
switch(val){
|
|
case "org":
|
|
getOrgTreeAry();
|
|
break;
|
|
case "job":
|
|
getOrgPostisTree()
|
|
break;
|
|
case "role":
|
|
getRoleTree();
|
|
break;
|
|
case "person":
|
|
fpickUserTabs();
|
|
break;
|
|
default:
|
|
}
|
|
|
|
if(systemPower.value.appSystem=="app"){
|
|
getAppList();
|
|
}else{
|
|
getSystemPowerSub();
|
|
}
|
|
|
|
},{
|
|
deep:true
|
|
})
|
|
//选中角色节点
|
|
const pickRoleTree = (data:any) => {
|
|
if(data.status && data.types==1){
|
|
console.log("监测赋权组------->",data)
|
|
}
|
|
}
|
|
//选择行政组织
|
|
const pickOrgTree = (data:any) => {
|
|
console.log("监测赋权组------->",data)
|
|
}
|
|
//获取角色树
|
|
const getRoleTree = () => {
|
|
roleLoading.value = true
|
|
giveRoleTree().then(({data})=>{
|
|
console.log("监测赋权组------->",data)
|
|
if(Array.isArray(data) && data.length>0){
|
|
systemPower.value.roleId=data[0].id
|
|
}
|
|
roleListdata.value=data;
|
|
roleLoading.value = false;
|
|
}).finally(()=>{roleLoading.value = false})
|
|
}
|
|
const editRoleCont = ref<RoleFormInfo>()
|
|
const openEditRoleGroup = ref(false)
|
|
//编辑角色信息
|
|
const editMyInfoIcon = (data:RoleListTree,types:number) => {
|
|
console.log("编辑角色信息------->",data)
|
|
console.log("编辑角色信息---types---->",types)
|
|
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)
|
|
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',
|
|
})
|
|
}
|
|
})
|
|
}
|
|
//添加角色组
|
|
const addRoleGroup = (types:number) => {
|
|
|
|
roleGroupOrInfo.value = types
|
|
openRoleGroup.value = true
|
|
}
|
|
//获取行政组织树
|
|
const getOrgTreeAry = () => {
|
|
roleLoading.value = true
|
|
if(!Array.isArray(orgTree.value) || orgTree.value.length<=0){
|
|
|
|
getOrgTreeList({ orgid: 0 })
|
|
.then(({ data }) => {
|
|
if(Array.isArray(data) && data.length>0){
|
|
systemPower.value.roleId=data[0].id
|
|
}
|
|
orgTree.value = data
|
|
roleLoading.value = false
|
|
}).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
|
|
}
|
|
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 activeAppId = ref<string>("");
|
|
const appTableList = ref<custerAppTablePower[]>([]);
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-05-13 14:20:47
|
|
@ 功能: 获取自定义App
|
|
*/
|
|
const getAppList = () => {
|
|
gainAppList().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;
|
|
getAppTableList();
|
|
}
|
|
}
|
|
console.log("获取自定义App", activeAppId.value);
|
|
});
|
|
};
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-05-13 16:00:19
|
|
@ 功能: 获取对应App下边的表单
|
|
*/
|
|
const getAppTableList = () => {
|
|
systemPower.value.roleId = activeAppId.value
|
|
gainAppTableListNew({id:activeAppId.value,appType:systemPower.value.appType,powerType:systemPower.value.powerType,roleId:systemPower.value.roleId}).then(
|
|
(data: any) => {
|
|
console.log("获取对应App下边的表单", data);
|
|
if (Array.isArray(data.data)) {
|
|
appTableList.value = data.data;
|
|
} else {
|
|
appTableList.value = [];
|
|
}
|
|
}
|
|
);
|
|
};
|
|
watch(()=>systemPower.value.appSystem,(val:string)=>{
|
|
if(val=="app"){
|
|
getAppList();
|
|
}
|
|
},{
|
|
immediate:true
|
|
})
|
|
onMounted(()=>{
|
|
// getOrgTreeAry();
|
|
getSystemPowerSub();
|
|
console.log("高度-----1---->",roleLeft.value?.offsetHeight)
|
|
nextTick(()=>{
|
|
treeBoxHeight.value = roleLeft.value?.offsetHeight - 140
|
|
treeBoxHeightOrg.value = roleLeft.value?.offsetHeight - 100
|
|
})
|
|
|
|
})
|
|
watch(
|
|
() => activeAppId.value,
|
|
(val) => {
|
|
getAppTableList();
|
|
},
|
|
{
|
|
immediate:true
|
|
}
|
|
);
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-05-14 15:01:26
|
|
@ 功能: 选择App数据
|
|
*/
|
|
const pickAppList = (val: custerAppInfo) => {
|
|
activeAppId.value = val.signCode;
|
|
};
|
|
const systemMenuTreePropsing = {
|
|
children: "child",
|
|
label: "name",
|
|
value: "id",
|
|
};
|
|
interface Tree {
|
|
name: string
|
|
leaf?: boolean
|
|
}
|
|
|
|
const propsLoading = {
|
|
label: 'name',
|
|
children: 'zones',
|
|
isLeaf: 'isLeaf',
|
|
}
|
|
const loadNode: LoadFunction<Tree> = (node, resolve, reject) => {
|
|
console.log("node============>",node)
|
|
console.log("resolve===>",resolve)
|
|
if (node.level === 0) {
|
|
getMyPeoplceAndSunOrg({id:"313",level:node.level}).then((res) => {
|
|
console.log("res================>",res)
|
|
resolve(res.data)
|
|
})
|
|
}
|
|
|
|
if (node.level > 0){
|
|
getMyPeoplceAndSunOrg({id:node.data.id.toString(),level:1}).then((res) => {
|
|
console.log("res=========1=======>",res.data)
|
|
if(res.data && Array.isArray(res.data) && res.data.length > 0){
|
|
resolve(res.data)
|
|
}else{
|
|
resolve([])
|
|
}
|
|
}).catch(() => {
|
|
return reject()
|
|
})
|
|
}
|
|
}
|
|
|
|
const loadNodePost: LoadFunction<Tree> = (node, resolve, reject) => {
|
|
console.log("node============>",node)
|
|
console.log("resolve===>",resolve)
|
|
if (node.level === 0) {
|
|
getMyPeopleAndSunOrgPost({id:"313",level:node.level,types:node.data.types}).then((res) => {
|
|
console.log("res================>",res)
|
|
resolve(res.data)
|
|
})
|
|
}
|
|
|
|
if (node.level > 0){
|
|
getMyPeopleAndSunOrgPost({id:node.data.id.toString(),level:1,types:node.data.types}).then((res) => {
|
|
console.log("res=========1=======>",res.data)
|
|
if(res.data && Array.isArray(res.data) && res.data.length > 0){
|
|
resolve(res.data)
|
|
}else{
|
|
resolve([])
|
|
}
|
|
}).catch(() => {
|
|
return reject()
|
|
})
|
|
}
|
|
}
|
|
//获取人员信息
|
|
const fpickUserTabs = () => {
|
|
getPowerPageUser(searchUser).then((res) => {
|
|
console.log("res================>",res)
|
|
ownerPeople.value = res.data.list
|
|
searchUser.total = res.data.total
|
|
})
|
|
}
|
|
//分页
|
|
const pageCurrentChange = (val:number) => {
|
|
searchUser.page = val
|
|
fpickUserTabs()
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="roleBox">
|
|
<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>
|
|
<el-scrollbar class="tab_pane_bodyLoading">
|
|
<el-tree
|
|
ref="treeRefOrg"
|
|
style="max-width: 350px;"
|
|
:props="propsLoading"
|
|
:load="loadNode"
|
|
:highlight-current="true"
|
|
:expand-on-click-node="false"
|
|
:filter-method="filterMethodOrg"
|
|
:height="treeBoxHeightOrg"
|
|
node-key="id"
|
|
lazy
|
|
show-checkbox
|
|
@node-click="pickOrgTree"
|
|
/>
|
|
</el-scrollbar>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="岗位" name="job">
|
|
<template #label>
|
|
<el-text class="tabsTitle">岗位</el-text>
|
|
</template>
|
|
<el-scrollbar class="tab_pane_bodyLoading">
|
|
<el-tree
|
|
ref="treeRefOrg"
|
|
style="max-width: 350px;"
|
|
:props="propsLoading"
|
|
:load="loadNodePost"
|
|
:highlight-current="true"
|
|
:expand-on-click-node="false"
|
|
:filter-method="filterMethodOrg"
|
|
:height="treeBoxHeightOrg"
|
|
node-key="id"
|
|
lazy
|
|
show-checkbox
|
|
@node-click="pickOrgTree"
|
|
/>
|
|
</el-scrollbar>
|
|
|
|
</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"
|
|
:highlight-current="true"
|
|
:check-on-click-node="true"
|
|
:expand-on-click-node="false"
|
|
@node-click="pickRoleTree"
|
|
>
|
|
<template #default="{ node }" >
|
|
<div class="treeRoleBox">
|
|
<span>{{ node.label }}</span>
|
|
<div class="spanButBox">
|
|
<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="searchUser.name" placeholder="请输入要查找的人" :suffix-icon="Search" @input="onQueryChangedOrg"/>
|
|
</div>
|
|
<el-scrollbar class="tab_pane_bodyes">
|
|
<div class="userBox" v-for="item in ownerPeople" :key="item.id">
|
|
<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
|
|
:page-size="searchUser.pageSize"
|
|
|
|
:pager-count="7"
|
|
layout="prev, pager, next"
|
|
:total="searchUser.total"
|
|
@current-change="pageCurrentChange"
|
|
/>
|
|
</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="" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="buttenPower" label="操作按钮" min-width="380" >
|
|
<template #header>
|
|
<div class="pickButBox">
|
|
<el-text >操作按钮</el-text>
|
|
<el-button type="primary" size="small">确定授权</el-button>
|
|
</div>
|
|
</template>
|
|
<template #default="scope">
|
|
<el-checkbox v-for="item in scope.row.buttenPower" :key="item" v-model="scope.row.isTrue" :label="item.name" />
|
|
</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 v-if="systemPower.powerType == 'role'">
|
|
<td align="center" width="20%">应用</td>
|
|
<td align="center" width="50%">应用详情</td>
|
|
</tr>
|
|
<tr v-else>
|
|
<td align="center" width="20%">应用</td>
|
|
<td width="80%">
|
|
<div class="appPickPower">
|
|
应用详情
|
|
<el-button type="primary" size="small">确定授权</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)">{{ 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 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">
|
|
{{ 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"
|
|
@change="pickAppDataPower(item.datePower)"
|
|
>
|
|
<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>
|
|
.roleBox{
|
|
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 0px;
|
|
}
|
|
: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;
|
|
}
|
|
.tab_pane_bodyLoading {
|
|
height: calc(100vh - 250px);
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
.appPickPower{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.userBox{
|
|
width: 100%;
|
|
min-height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-items: space-between;
|
|
padding: 0 10px;
|
|
border-bottom: 1px dashed rgba($color: #000000, $alpha: 0.2);
|
|
div{
|
|
span{
|
|
display: flex;
|
|
width: 100%;
|
|
padding: 0 5px;
|
|
color:rgba($color: #000000, $alpha: 0.6);
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|