Compare commits
1 Commits
| Author | SHA1 | Date |
|---|---|---|
herenshan112
|
a9e4d032eb | 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> |
|||
import { giveRoleTree,editRoleStatus,getOrgPostTree } from '@/api/role/index' |
|||
import type {RoleListTree,RoleFormInfo,orgAndPostisListTree} from '@/api/role/types' |
|||
import type { TreeNode,TreeInstance } from 'element-plus' |
|||
import { Search } from '@element-plus/icons-vue' |
|||
import { orgInfo } from "@/api/hr/org/type"; |
|||
import { getOrgTreeList } from "@/api/hr/org/index"; |
|||
|
|||
import AddRoleGroup from '@/views/system/monitor/online/roleConfig/addRoleGroup.vue' |
|||
import EditRoleGroup from '@/views/system/monitor/online/roleConfig/editRoleGroup.vue' |
|||
|
|||
const orgTree = ref<orgInfo[]>([]) |
|||
const roleGroupOrInfo = ref(1) |
|||
const searchQuery = ref('') |
|||
const orgWorkRole = ref("org") |
|||
const appSysPick = ref("system") |
|||
const treeRef = ref<TreeInstance>() |
|||
const treeRefOrg = ref<TreeInstance>() |
|||
const roleListdata = ref<RoleListTree[]>([]) |
|||
const orgPostisListdata = ref<orgAndPostisListTree[]>([]) |
|||
const treeBoxHeight = ref(300) |
|||
const treeBoxHeightOrg = ref(300) |
|||
const roleLeft = ref() |
|||
const props = { |
|||
value: 'id', |
|||
label: 'label', |
|||
disabled:'status', |
|||
children: 'children', |
|||
} |
|||
const propsOrg = { |
|||
value: 'id', |
|||
label: 'name', |
|||
disabled:'status', |
|||
children: 'child', |
|||
} |
|||
const propsOrgPost = { |
|||
value: 'id', |
|||
label: 'label', |
|||
disabled:'status', |
|||
children: 'children', |
|||
} |
|||
const roleLoading = ref(false) |
|||
const openRoleGroup = ref(false) |
|||
const orgLoading = ref(false) |
|||
const orgPostLoading = ref(false) |
|||
//搜索角色 |
|||
const onQueryChanged = (query: string) => { |
|||
treeRef.value!.filter(query) |
|||
} |
|||
//搜索行政组织 |
|||
const onQueryChangedOrg = (query: string) => { |
|||
treeRefOrg.value!.filter(query) |
|||
} |
|||
const filterMethod = (query: string, node: any) => node.label!.includes(query) |
|||
const filterMethodOrg = (query: string, node: any) => node.name!.includes(query) |
|||
|
|||
//监测赋权组 |
|||
watch(()=>orgWorkRole.value,(val:string)=>{ |
|||
console.log("监测赋权组",val) |
|||
switch(val){ |
|||
case "org": |
|||
getOrgTreeAry(); |
|||
break; |
|||
case "job": |
|||
getOrgPostisTree() |
|||
break; |
|||
case "role": |
|||
getRoleTree(); |
|||
break; |
|||
default: |
|||
} |
|||
},{ |
|||
deep:true |
|||
}) |
|||
//选中角色节点 |
|||
const pickRoleTree = (data:any) => { |
|||
if(data.status && data.types==1){ |
|||
console.log("监测赋权组------->",data) |
|||
} |
|||
} |
|||
//选择行政组织 |
|||
const pickOrgTree = (data:any) => { |
|||
console.log("监测赋权组------->",data) |
|||
} |
|||
//获取角色树 |
|||
const getRoleTree = () => { |
|||
roleLoading.value = true |
|||
giveRoleTree().then(({data})=>{ |
|||
console.log("监测赋权组------->",data) |
|||
roleListdata.value=data; |
|||
roleLoading.value = false; |
|||
}).finally(()=>{roleLoading.value = false}) |
|||
} |
|||
const editRoleCont = ref<RoleFormInfo>() |
|||
const openEditRoleGroup = ref(false) |
|||
//编辑角色信息 |
|||
const editMyInfoIcon = (data:RoleListTree,types:number) => { |
|||
console.log("编辑角色信息------->",data) |
|||
console.log("编辑角色信息---types---->",types) |
|||
switch(types){ |
|||
case 1: |
|||
editRoleStatusBut(data.id,2) |
|||
break; |
|||
case 2: |
|||
editRoleStatusBut(data.id,1) |
|||
break; |
|||
case 3: |
|||
editRoleCont.value = { |
|||
id:data.id, |
|||
name:data.label, |
|||
type:data.types, |
|||
superior:data.superior, |
|||
sort:data.sort |
|||
} |
|||
openEditRoleGroup.value = true |
|||
break; |
|||
case 4: |
|||
ElMessageBox.confirm( |
|||
"您确定要删除此信息吗？一经删除！数据将不可恢复！请慎重操作！", |
|||
"警告", |
|||
{ |
|||
confirmButtonText: '确定删除', |
|||
cancelButtonText: '取消删除', |
|||
type: 'warning', |
|||
} |
|||
).then(()=>{ |
|||
editRoleStatusBut(data.id,3) |
|||
}) |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
} |
|||
//编辑角色状态 |
|||
const editRoleStatusBut = (id:string|number,types:number) => { |
|||
// console.log("编辑角色状态--->",id) |
|||
editRoleStatus({id:id.toString(),status:types}).then((data:any)=>{ |
|||
if(data.code==0){ |
|||
ElMessage({ |
|||
message: data.msg, |
|||
type: 'success', |
|||
}) |
|||
getRoleTree() |
|||
}else{ |
|||
ElMessage({ |
|||
message: data.msg, |
|||
type: 'success', |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
//添加角色组 |
|||
const addRoleGroup = (types:number) => { |
|||
|
|||
roleGroupOrInfo.value = types |
|||
openRoleGroup.value = true |
|||
} |
|||
//获取行政组织树 |
|||
const getOrgTreeAry = () => { |
|||
roleLoading.value = true |
|||
if(!Array.isArray(orgTree.value) || orgTree.value.length<=0){ |
|||
|
|||
getOrgTreeList({ orgid: 0 }) |
|||
.then(({ data }) => { |
|||
orgTree.value = data |
|||
roleLoading.value = false |
|||
}).finally(()=>{roleLoading.value = false}) |
|||
}else{ |
|||
roleLoading.value = false |
|||
} |
|||
|
|||
} |
|||
//获取行政组织及岗位 |
|||
const getOrgPostisTree = () => { |
|||
orgPostLoading.value=true |
|||
if(!Array.isArray(orgPostisListdata.value) || orgPostisListdata.value.length<=0){ |
|||
|
|||
getOrgPostTree({id:"313"}).then(({data})=>{ |
|||
console.log("获取行政组织及岗位--------->",data) |
|||
orgPostisListdata.value = data |
|||
orgPostLoading.value=false |
|||
}).finally(()=>{orgPostLoading.value=false}) |
|||
}else{ |
|||
orgPostLoading.value=true |
|||
} |
|||
} |
|||
onMounted(()=>{ |
|||
getOrgTreeAry(); |
|||
console.log("高度-----1---->",roleLeft.value?.offsetHeight) |
|||
nextTick(()=>{ |
|||
treeBoxHeight.value = roleLeft.value?.offsetHeight - 140 |
|||
treeBoxHeightOrg.value = roleLeft.value?.offsetHeight - 100 |
|||
}) |
|||
|
|||
}) |
|||
</script> |
|||
<template> |
|||
<div class="roleBox"> |
|||
<div ref="roleLeft" class="roleLeft"> |
|||
<el-tabs v-model="orgWorkRole" class="demo-tabs"> |
|||
<el-tab-pane label="行政组织" name="org"> |
|||
<template #label> |
|||
<el-text class="tabsTitle">行政组织</el-text> |
|||
</template> |
|||
<div class="searchBox"> |
|||
<el-input v-model="searchQuery" placeholder="请输入要查找的行政组织" :suffix-icon="Search" @input="onQueryChangedOrg"/> |
|||
</div> |
|||
<el-tree-v2 |
|||
ref="treeRefOrg" |
|||
style="max-width: 350px;" |
|||
:data="orgTree" |
|||
:props="propsOrg" |
|||
:filter-method="filterMethodOrg" |
|||
:height="treeBoxHeightOrg" |
|||
v-loading="roleLoading" |
|||
:highlight-current="true" |
|||
:check-on-click-node="true" |
|||
:expand-on-click-node="false" |
|||
@node-click="pickOrgTree" |
|||
> |
|||
</el-tree-v2> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="岗位" name="job"> |
|||
<template #label> |
|||
<el-text class="tabsTitle">岗位</el-text> |
|||
</template> |
|||
<div class="searchBox"> |
|||
<el-input v-model="searchQuery" placeholder="请输入要查找的行政组织" :suffix-icon="Search" @input="onQueryChangedOrg"/> |
|||
</div> |
|||
<el-tree-v2 |
|||
ref="treeRefOrg" |
|||
style="max-width: 350px;" |
|||
:data="orgPostisListdata" |
|||
:props="propsOrgPost" |
|||
:filter-method="filterMethodOrg" |
|||
:height="treeBoxHeightOrg" |
|||
v-loading="orgPostLoading" |
|||
:highlight-current="true" |
|||
:check-on-click-node="true" |
|||
:expand-on-click-node="false" |
|||
@node-click="pickOrgTree" |
|||
> |
|||
</el-tree-v2> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="角色" name="role"> |
|||
<template #label> |
|||
<el-text class="tabsTitle">角色</el-text> |
|||
</template> |
|||
<div class="butBox"> |
|||
<el-button type="primary" @click="addRoleGroup(1)">新建角色组</el-button> |
|||
<el-button type="primary" @click="addRoleGroup(2)">新建角色</el-button> |
|||
</div> |
|||
<div class="searchBox"> |
|||
<el-input v-model="searchQuery" placeholder="请输入要查找的角色" :suffix-icon="Search" @input="onQueryChanged"/> |
|||
</div> |
|||
<el-tree-v2 |
|||
ref="treeRef" |
|||
style="max-width: 350px;" |
|||
:data="roleListdata" |
|||
:props="props" |
|||
:filter-method="filterMethod" |
|||
:height="treeBoxHeight" |
|||
v-loading="roleLoading" |
|||
:highlight-current="true" |
|||
:check-on-click-node="true" |
|||
:expand-on-click-node="false" |
|||
@node-click="pickRoleTree" |
|||
> |
|||
<template #default="{ node }" > |
|||
<div class="treeRoleBox"> |
|||
<span>{{ node.label }}</span> |
|||
<div class="spanButBox"> |
|||
<el-text v-if="node.disabled" type="warning" size="small" @click.stop="editMyInfoIcon(node.data,1)">禁用</el-text> |
|||
<el-text v-else type="success" size="small" @click.stop="editMyInfoIcon(node.data,2)">启用</el-text> |
|||
<el-text type="primary" size="small" @click.stop="editMyInfoIcon(node.data,3)">编辑</el-text> |
|||
<el-text type="danger" size="small" @click.stop="editMyInfoIcon(node.data,4)">删除</el-text> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</el-tree-v2> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
<div class="roleright"> |
|||
<el-tabs v-model="appSysPick" class="demo-tabs"> |
|||
<el-tab-pane label="平台" name="system"> |
|||
<template #label> |
|||
<el-text class="tabsTitleCont">平台</el-text> |
|||
</template> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="应用" name="app"> |
|||
<template #label> |
|||
<el-text class="tabsTitleCont">应用</el-text> |
|||
</template> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
<AddRoleGroup v-if="openRoleGroup" v-model:show="openRoleGroup" :group-info="roleGroupOrInfo" @resthandel="getRoleTree" /> |
|||
<EditRoleGroup v-if="openEditRoleGroup" v-model:show="openEditRoleGroup" :group-info="roleGroupOrInfo" :data="editRoleCont" @resthandel="getRoleTree" /> |
|||
</div> |
|||
<div class="app-content"> |
|||
|
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.roleBox{ |
|||
display: flex; |
|||
width: 100%; |
|||
height: calc(100vh - 170px); |
|||
padding: 15px 20px 0 20px; |
|||
justify-content: space-between; |
|||
.roleLeft{ |
|||
width: 350px; |
|||
height: calc(100vh - 185px); |
|||
background-color: #FFFFFF; |
|||
.butBox{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 0 10px 10px 10px; |
|||
} |
|||
.searchBox{ |
|||
padding: 0 10px 10px 10px; |
|||
} |
|||
.treeBox{ |
|||
height: calc(100vh - 330px); |
|||
|
|||
} |
|||
} |
|||
.roleright{ |
|||
width: calc(100% - 370px); |
|||
height: calc(100vh - 185px); |
|||
background-color: #FFFFFF; |
|||
} |
|||
.tabsTitle{ |
|||
padding: 0 15px; |
|||
} |
|||
.tabsTitleCont{ |
|||
padding: 0 35px; |
|||
} |
|||
.treeRoleBox{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
width: 100%; |
|||
align-items: center; |
|||
} |
|||
.spanButBox{ |
|||
span{ |
|||
padding: 0 5px; |
|||
} |
|||
} |
|||
.app-content { |
|||
|
|||
} |
|||
|
|||
</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