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.
356 lines
12 KiB
356 lines
12 KiB
2 months ago
|
<!--
|
||
|
|
@ 作者: 秦东
|
||
|
|
@ 时间: 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 AddRoleGroup from '@/views/system/monitor/online/roleConfig/addRoleGroup.vue'
|
||
|
|
import EditRoleGroup from '@/views/system/monitor/online/roleConfig/editRoleGroup.vue'
|
||
|
|
|
||
|
|
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 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 roleLoading = ref(false)
|
||
|
|
const openRoleGroup = ref(false)
|
||
|
|
const orgLoading = ref(false)
|
||
|
|
const orgPostLoading = ref(false)
|
||
|
|
//搜索角色
|
||
|
|
const onQueryChanged = (query: string) => {
|
||
|
|
treeRef.value!.filter(query)
|
||
|
|
}
|
||
|
|
//搜索行政组织
|
||
|
|
const onQueryChangedOrg = (query: string) => {
|
||
|
|
treeRefOrg.value!.filter(query)
|
||
|
|
}
|
||
|
|
const filterMethod = (query: string, node: any) => node.label!.includes(query)
|
||
|
|
const filterMethodOrg = (query: string, node: any) => node.name!.includes(query)
|
||
|
|
|
||
|
|
//监测赋权组
|
||
|
|
watch(()=>orgWorkRole.value,(val:string)=>{
|
||
|
|
console.log("监测赋权组",val)
|
||
|
|
switch(val){
|
||
|
|
case "org":
|
||
|
|
getOrgTreeAry();
|
||
|
|
break;
|
||
|
|
case "job":
|
||
|
|
getOrgPostisTree()
|
||
|
|
break;
|
||
|
|
case "role":
|
||
|
|
getRoleTree();
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
}
|
||
|
|
},{
|
||
|
|
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)
|
||
|
|
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 }) => {
|
||
|
|
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)
|
||
|
|
orgPostisListdata.value = data
|
||
|
|
orgPostLoading.value=false
|
||
|
|
}).finally(()=>{orgPostLoading.value=false})
|
||
|
|
}else{
|
||
|
|
orgPostLoading.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>
|
||
|
|
<div class="roleBox">
|
||
|
|
<div ref="roleLeft" class="roleLeft">
|
||
|
|
<el-tabs v-model="orgWorkRole" 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="onQueryChangedOrg"/>
|
||
|
|
</div>
|
||
|
|
<el-tree-v2
|
||
|
|
ref="treeRefOrg"
|
||
|
|
style="max-width: 350px;"
|
||
|
|
:data="orgPostisListdata"
|
||
|
|
:props="propsOrgPost"
|
||
|
|
:filter-method="filterMethodOrg"
|
||
|
|
: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"
|
||
|
|
: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-tabs>
|
||
|
|
</div>
|
||
|
|
<div class="roleright">
|
||
|
|
<el-tabs v-model="appSysPick" class="demo-tabs">
|
||
|
|
<el-tab-pane label="平台" name="system">
|
||
|
|
<template #label>
|
||
|
|
<el-text class="tabsTitleCont">平台</el-text>
|
||
|
|
</template>
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="应用" name="app">
|
||
|
|
<template #label>
|
||
|
|
<el-text class="tabsTitleCont">应用</el-text>
|
||
|
|
</template>
|
||
|
|
</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 10px 10px;
|
||
|
|
}
|
||
|
|
.treeBox{
|
||
|
|
height: calc(100vh - 330px);
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.roleright{
|
||
|
|
width: calc(100% - 370px);
|
||
|
|
height: calc(100vh - 185px);
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
}
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|