herenshan112
1 week ago
12 changed files with 3187 additions and 345 deletions
@ -0,0 +1,13 @@ |
|||||
|
import request from "@/utils/request"; |
||||
|
import { getSystemPower } from "./types"; |
||||
|
|
||||
|
/** |
||||
|
* 获取平台授权项目 |
||||
|
*/ |
||||
|
export function appPowerUnit(data: getSystemPower){ |
||||
|
return request({ |
||||
|
url: '/systemapi/authorize/appPowerUnit', |
||||
|
method: 'post', |
||||
|
data:data |
||||
|
}); |
||||
|
} |
||||
@ -0,0 +1,865 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 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 |
||||
|
} from "@/api/system/roleapi/postrole"; |
||||
|
import { |
||||
|
custerAppInfo |
||||
|
} from "@/api/system/roleapi/types"; |
||||
|
|
||||
|
|
||||
|
|
||||
|
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 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) |
||||
|
} |
||||
|
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; |
||||
|
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", |
||||
|
}; |
||||
|
</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> |
||||
|
<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-tab-pane label="个人" name="person"> |
||||
|
<div class="searchBox"> |
||||
|
<el-input v-model="searchQuery" placeholder="请输入要查找的人" :suffix-icon="Search" @input="onQueryChangedOrg"/> |
||||
|
</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-container v-if="systemPower.powerType == 'role'"> |
||||
|
<el-main> |
||||
|
|
||||
|
<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="操作按钮" > |
||||
|
<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-main> |
||||
|
<el-aside width="200px"> |
||||
|
<div class="userTitleBox"> |
||||
|
<el-text type="info" >使用人员</el-text> |
||||
|
<el-button type="primary" size="small">添加使用人</el-button> |
||||
|
</div> |
||||
|
<el-scrollbar class="scrollBox"> |
||||
|
<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.orgName}}</el-text> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</el-scrollbar> |
||||
|
</el-aside> |
||||
|
</el-container> |
||||
|
|
||||
|
<el-table |
||||
|
v-else |
||||
|
: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="操作按钮" > |
||||
|
<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> |
||||
|
<td align="center" width="30%"> |
||||
|
<div class="userTitleBoxes"> |
||||
|
<el-text type="info" >使用人员</el-text> |
||||
|
<el-button type="primary" size="small">添加使用人</el-button> |
||||
|
</div> |
||||
|
</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> |
||||
|
<td v-if="systemPower.powerType == 'role'" valign="top"> |
||||
|
<el-scrollbar class="tab_pane_bodyes"> |
||||
|
<div class="userBox" v-for="item in 30" :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.orgName}}</el-text> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</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 10px 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); |
||||
|
} |
||||
|
.userBox{ |
||||
|
width: 100%; |
||||
|
height: 50px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-items: space-between; |
||||
|
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); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.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; |
||||
|
} |
||||
|
</style> |
||||
@ -1,355 +1,18 @@ |
|||||
<!-- |
<!-- |
||||
@ 作者: 秦东 |
@ 作者: 秦东 |
||||
@ 时间: 2025-10-21 10:06:51 |
@ 时间: 2025-11-17 08:08:01 |
||||
@ 备注: 在线人数 |
@ 备注: |
||||
--> |
--> |
||||
<script lang='ts' setup> |
<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> |
</script> |
||||
<template> |
<template> |
||||
<div class="roleBox"> |
<div class="app-content"> |
||||
<div ref="roleLeft" class="roleLeft"> |
|
||||
<el-tabs v-model="orgWorkRole" class="demo-tabs"> |
</div> |
||||
<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> |
</template> |
||||
<style lang='scss' scoped> |
<style lang='scss' scoped> |
||||
.roleBox{ |
.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 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> |
</style> |
||||
|
|||||
@ -0,0 +1,903 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 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> |
||||
@ -0,0 +1,823 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 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 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 treeRefOrgPost = 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 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) |
||||
|
} |
||||
|
const filterMethod = (query: string, node: any) => node.label!.includes(query) |
||||
|
const filterMethodOrg = (query: string, node: any) => node.label!.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; |
||||
|
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.toString() |
||||
|
} |
||||
|
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.toString() |
||||
|
} |
||||
|
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.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 activeAppId = ref<string>(""); |
||||
|
const appTableList = ref<custerAppTablePower[]>([]); |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-05-13 14:20:47 |
||||
|
@ 功能: 获取自定义App |
||||
|
*/ |
||||
|
const getAppList = () => { |
||||
|
gainAppList().then((datassssssssssssssssssssssssssssssssssssssssssssssssssssss: 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.toString() |
||||
|
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", |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
//搜索行政组织岗位 |
||||
|
const onQuedOrg = (query: string) => { |
||||
|
treeRefOrgPost.value!.filter(query) |
||||
|
} |
||||
|
</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> |
||||
|
<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" |
||||
|
show-checkbox |
||||
|
@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="filterMethodOrg" |
||||
|
:height="treeBoxHeightOrg" |
||||
|
v-loading="roleLoading" |
||||
|
:highlight-current="true" |
||||
|
:check-on-click-node="true" |
||||
|
:expand-on-click-node="false" |
||||
|
show-checkbox |
||||
|
@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" |
||||
|
|
||||
|
show-checkbox |
||||
|
@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="searchQuery" placeholder="请输入要查找的人" :suffix-icon="Search" @input="onQueryChangedOrg"/> |
||||
|
</div> |
||||
|
<el-scrollbar class="tab_pane_bodyes"> |
||||
|
<div class="userBox" v-for="item in 30" :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.orgName}}</el-text> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</el-scrollbar> |
||||
|
<div style="width: 100%; display: flex; justify-content: center; margin-top: 5px;"> |
||||
|
<el-pagination |
||||
|
:page-size="19" |
||||
|
:pager-count="7" |
||||
|
layout="prev, pager, next" |
||||
|
:total="2" |
||||
|
|
||||
|
/> |
||||
|
</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; |
||||
|
} |
||||
|
.appPickPower{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.userBox{ |
||||
|
width: 100%; |
||||
|
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> |
||||
@ -0,0 +1,283 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-10-21 10:06:51 |
||||
|
@ 备注: 在线人数 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
|
||||
|
import { |
||||
|
getMyPeoplceAndSunOrg |
||||
|
} from "@/api/system/roleapi/postrole"; |
||||
|
import type { LoadFunction } from 'element-plus' |
||||
|
|
||||
|
interface Tree { |
||||
|
name: string |
||||
|
leaf?: boolean |
||||
|
} |
||||
|
|
||||
|
const props = { |
||||
|
label: 'name', |
||||
|
children: 'zones', |
||||
|
isLeaf: 'isLeaf', |
||||
|
} |
||||
|
let time = 0 |
||||
|
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() |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
// time++ |
||||
|
// if (node.level > 0){ |
||||
|
// setTimeout(() => { |
||||
|
|
||||
|
// if (time > 3) { |
||||
|
// console.log("node.id============>",node.id) |
||||
|
// console.log("node.level============>",node.level) |
||||
|
// getMyPeoplceAndSunOrg({id:node.data.id.toString(),level:1}).then((res) => { |
||||
|
// console.log("res=========1=======>",res.data) |
||||
|
// // resolve(res.data.data?.map((item: any) => ({ |
||||
|
// // name: item.orgName, |
||||
|
// // id: item.orgId, |
||||
|
// // isLeaf: item.isLeaf, |
||||
|
// // zones: [] |
||||
|
// // })) || []) |
||||
|
// if(res.data && Array.isArray(res.data) && res.data.length > 0){ |
||||
|
// resolve(res.data) |
||||
|
// }else{ |
||||
|
// resolve([]) |
||||
|
// } |
||||
|
// }) |
||||
|
// }else{ |
||||
|
// return reject() |
||||
|
// } |
||||
|
// }, 3000) |
||||
|
// } |
||||
|
} |
||||
|
//选择行政组织 |
||||
|
const pickOrgTree = (data:any) => { |
||||
|
console.log("监测赋权组------->",data) |
||||
|
} |
||||
|
</script> |
||||
|
<template> |
||||
|
<div class="roleBox"> |
||||
|
<el-tree |
||||
|
style="max-width: 100%" |
||||
|
:props="props" |
||||
|
:load="loadNode" |
||||
|
:highlight-current="true" |
||||
|
:expand-on-click-node="false" |
||||
|
node-key="id" |
||||
|
lazy |
||||
|
@node-click="pickOrgTree" |
||||
|
/> |
||||
|
</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; |
||||
|
} |
||||
|
.appPickPower{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.userBox{ |
||||
|
width: 100%; |
||||
|
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> |
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue