|
|
|
@ -3,248 +3,274 @@ |
|
|
|
@ 时间: 2023-05-30 13:52:12 |
|
|
|
@ 备注: 配置权限 |
|
|
|
--> |
|
|
|
<script lang='ts' setup> |
|
|
|
import { setupPage,systemCont,systemMenusTypeTree,submintPostPower } from "@/api/system/roleapi/types"; |
|
|
|
import { getSystemType,getSystemPoewrTreeForRole,getGrantRolePowers,grantSystemRolePoewr } from "@/api/system/roleapi/postrole"; |
|
|
|
<script lang="ts" setup> |
|
|
|
import { |
|
|
|
setupPage, |
|
|
|
systemCont, |
|
|
|
systemMenusTypeTree, |
|
|
|
submintPostPower, |
|
|
|
} from "@/api/system/roleapi/types"; |
|
|
|
import { |
|
|
|
getSystemType, |
|
|
|
getSystemPoewrTreeForRole, |
|
|
|
getGrantRolePowers, |
|
|
|
grantSystemRolePoewr, |
|
|
|
} from "@/api/system/roleapi/postrole"; |
|
|
|
const props = defineProps({ |
|
|
|
powerIsShow:{ |
|
|
|
type:Boolean, |
|
|
|
default:false |
|
|
|
}, |
|
|
|
roleId:{ |
|
|
|
type:String, |
|
|
|
default:'' |
|
|
|
}, |
|
|
|
roleTitle:{ |
|
|
|
type:String, |
|
|
|
default:'配置权限' |
|
|
|
} |
|
|
|
powerIsShow: { |
|
|
|
type: Boolean, |
|
|
|
default: false, |
|
|
|
}, |
|
|
|
roleId: { |
|
|
|
type: String, |
|
|
|
default: "", |
|
|
|
}, |
|
|
|
roleTitle: { |
|
|
|
type: String, |
|
|
|
default: "配置权限", |
|
|
|
}, |
|
|
|
}); |
|
|
|
/** |
|
|
|
* 树形组件 |
|
|
|
*/ |
|
|
|
const menuRef = ref(ElTree); |
|
|
|
const powerLoading = ref(false); |
|
|
|
const powerLoadingSub = ref(false); |
|
|
|
const emits = defineEmits(["update:powerIsShow"]); //父级元素 |
|
|
|
const powerLoadingSub = ref(false); |
|
|
|
const emits = defineEmits(["update:powerIsShow"]); //父级元素 |
|
|
|
/** |
|
|
|
* 系统选择标签 |
|
|
|
*/ |
|
|
|
const systemTabs = ref('') |
|
|
|
* 系统选择标签 |
|
|
|
*/ |
|
|
|
const systemTabs = ref(""); |
|
|
|
/** |
|
|
|
* 系统列表 |
|
|
|
*/ |
|
|
|
const orgPostTreeContList = ref<systemCont[]>([]); |
|
|
|
const orgPostTreeContList = ref<systemCont[]>([]); |
|
|
|
/** |
|
|
|
* 管理范围 |
|
|
|
*/ |
|
|
|
const manageScope = ref(1) |
|
|
|
const manageScope = ref(0); |
|
|
|
/** |
|
|
|
* 树形结构约束 |
|
|
|
*/ |
|
|
|
const systemMenuTreeProps = { |
|
|
|
children: "child", |
|
|
|
label: "name", |
|
|
|
} |
|
|
|
children: "child", |
|
|
|
label: "name", |
|
|
|
}; |
|
|
|
/** |
|
|
|
* 分页参数 |
|
|
|
*/ |
|
|
|
const setupPageCont = reactive<setupPage>({ |
|
|
|
page:1, |
|
|
|
pagesize:100000 |
|
|
|
const setupPageCont = reactive<setupPage>({ |
|
|
|
page: 1, |
|
|
|
pagesize: 100000, |
|
|
|
}); |
|
|
|
/** |
|
|
|
* 弹窗显示控制 |
|
|
|
*/ |
|
|
|
const power_is_Show = computed({ |
|
|
|
get: () => props.powerIsShow, |
|
|
|
set: (val) => { |
|
|
|
emits("update:powerIsShow", val); |
|
|
|
}, |
|
|
|
const power_is_Show = computed({ |
|
|
|
get: () => props.powerIsShow, |
|
|
|
set: (val) => { |
|
|
|
emits("update:powerIsShow", val); |
|
|
|
}, |
|
|
|
}); |
|
|
|
/** |
|
|
|
* 关闭弹窗回调 |
|
|
|
*/ |
|
|
|
function handleClosePower () { |
|
|
|
emits("update:powerIsShow", false); |
|
|
|
initData(); |
|
|
|
function handleClosePower() { |
|
|
|
emits("update:powerIsShow", false); |
|
|
|
initData(); |
|
|
|
} |
|
|
|
/** |
|
|
|
* 初始化数据 |
|
|
|
*/ |
|
|
|
function initData(){ |
|
|
|
powerLoading.value = false; |
|
|
|
powerLoadingSub.value = false |
|
|
|
setupPageCont.page = 1; |
|
|
|
setupPageCont.pagesize = 100000; |
|
|
|
systemTabs.value = ""; |
|
|
|
manageScope.value = 1; |
|
|
|
gainPowerAry.value=[]; |
|
|
|
function initData() { |
|
|
|
powerLoading.value = false; |
|
|
|
powerLoadingSub.value = false; |
|
|
|
setupPageCont.page = 1; |
|
|
|
setupPageCont.pagesize = 100000; |
|
|
|
systemTabs.value = ""; |
|
|
|
manageScope.value = 0; |
|
|
|
gainPowerAry.value = []; |
|
|
|
} |
|
|
|
/** |
|
|
|
* 监听数据 |
|
|
|
*/ |
|
|
|
watch(() => props.powerIsShow,() => { |
|
|
|
if(props.powerIsShow){ |
|
|
|
getSystemTypeList() |
|
|
|
}else{ |
|
|
|
initData() |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
watch( |
|
|
|
() => props.powerIsShow, |
|
|
|
() => { |
|
|
|
if (props.powerIsShow) { |
|
|
|
getSystemTypeList(); |
|
|
|
} else { |
|
|
|
initData(); |
|
|
|
} |
|
|
|
} |
|
|
|
); |
|
|
|
|
|
|
|
/** |
|
|
|
* 获取系统分类 |
|
|
|
*/ |
|
|
|
function getSystemTypeList() { |
|
|
|
getSystemType(setupPageCont) |
|
|
|
.then((data)=>{ |
|
|
|
// console.log(data); |
|
|
|
orgPostTreeContList.value = data.data.list; |
|
|
|
if(data.data.list[0]){ |
|
|
|
systemTabs.value = data.data.list[0].coder |
|
|
|
} |
|
|
|
}) |
|
|
|
function getSystemTypeList() { |
|
|
|
getSystemType(setupPageCont).then((data) => { |
|
|
|
// console.log(data); |
|
|
|
orgPostTreeContList.value = data.data.list; |
|
|
|
if (data.data.list[0]) { |
|
|
|
systemTabs.value = data.data.list[0].coder; |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
/** |
|
|
|
* 权限菜单列表 |
|
|
|
*/ |
|
|
|
const systemPowerMenusTree = ref<systemMenusTypeTree[]>([]); |
|
|
|
const systemPowerMenusTree = ref<systemMenusTypeTree[]>([]); |
|
|
|
/** |
|
|
|
* 已授权的权限 |
|
|
|
*/ |
|
|
|
const gainPowerAry = ref<String[]>([]) |
|
|
|
const gainPowerAry = ref<String[]>([]); |
|
|
|
/** |
|
|
|
* 获取菜单 |
|
|
|
*/ |
|
|
|
function getSysMenuTree(sysKey:string){ |
|
|
|
powerLoading.value = true; |
|
|
|
systemPowerMenusTree.value =[] |
|
|
|
getSystemPoewrTreeForRole({name:sysKey,roleid:props.roleId}) |
|
|
|
.then(({ data })=>{ |
|
|
|
systemPowerMenusTree.value = data; |
|
|
|
getGrantRolePowers({name:sysKey,roleid:props.roleId}) |
|
|
|
.then(({data})=>{ |
|
|
|
// console.log("获取菜单====>",data); |
|
|
|
manageScope.value = data.level |
|
|
|
if(data != null){ |
|
|
|
gainPowerAry.value= data.powerList |
|
|
|
} |
|
|
|
}) |
|
|
|
.finally(()=>{ |
|
|
|
powerLoading.value = false; |
|
|
|
setCheckedKeys(); |
|
|
|
}) |
|
|
|
}) |
|
|
|
.finally(()=>{powerLoading.value=false}) |
|
|
|
|
|
|
|
function getSysMenuTree(sysKey: string) { |
|
|
|
powerLoading.value = true; |
|
|
|
systemPowerMenusTree.value = []; |
|
|
|
getSystemPoewrTreeForRole({ name: sysKey, roleid: props.roleId }) |
|
|
|
.then(({ data }) => { |
|
|
|
systemPowerMenusTree.value = data; |
|
|
|
getGrantRolePowers({ name: sysKey, roleid: props.roleId }) |
|
|
|
.then(({ data }) => { |
|
|
|
// console.log("获取菜单====>",data); |
|
|
|
manageScope.value = data.level; |
|
|
|
if (data != null) { |
|
|
|
gainPowerAry.value = data.powerList; |
|
|
|
} |
|
|
|
}) |
|
|
|
.finally(() => { |
|
|
|
powerLoading.value = false; |
|
|
|
setCheckedKeys(); |
|
|
|
}); |
|
|
|
}) |
|
|
|
.finally(() => { |
|
|
|
powerLoading.value = false; |
|
|
|
}); |
|
|
|
} |
|
|
|
/** |
|
|
|
* 设置已经授权的权限 |
|
|
|
*/ |
|
|
|
function setCheckedKeys(){ |
|
|
|
// console.log("设置已经授权的权限",gainPowerAry.value) |
|
|
|
gainPowerAry.value.forEach((menuId) => |
|
|
|
menuRef.value.setChecked(menuId, true, false) |
|
|
|
); |
|
|
|
function setCheckedKeys() { |
|
|
|
// console.log("设置已经授权的权限",gainPowerAry.value) |
|
|
|
gainPowerAry.value.forEach((menuId) => menuRef.value.setChecked(menuId, true, false)); |
|
|
|
} |
|
|
|
watch(() => systemTabs.value,() => { |
|
|
|
powerLoading.value = true; |
|
|
|
if(systemTabs.value != "" && systemTabs.value != null){ |
|
|
|
getSysMenuTree(systemTabs.value) |
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
watch( |
|
|
|
() => systemTabs.value, |
|
|
|
() => { |
|
|
|
powerLoading.value = true; |
|
|
|
if (systemTabs.value != "" && systemTabs.value != null) { |
|
|
|
getSysMenuTree(systemTabs.value); |
|
|
|
} |
|
|
|
} |
|
|
|
); |
|
|
|
/** |
|
|
|
* 授权 |
|
|
|
*/ |
|
|
|
function enterEmpowerClick(){ |
|
|
|
powerLoadingSub.value = true; |
|
|
|
const checkedMenuTrue:systemMenusTypeTree[] = menuRef.value |
|
|
|
.getCheckedNodes(false, true) |
|
|
|
.map((node: any) => node); |
|
|
|
// console.log("确定授权", checkedMenuTrue); |
|
|
|
checkedMenuTrue.forEach(item=>{ |
|
|
|
item.child=[]; |
|
|
|
}) |
|
|
|
grantSystemRolePoewr({systemname:systemTabs.value,roleid:props.roleId,level:manageScope.value*1,power:checkedMenuTrue}) |
|
|
|
.then((data)=>{ |
|
|
|
// console.log("确定授权返回----》", data); |
|
|
|
ElMessage.success("授权成功"); |
|
|
|
handleClosePower(); |
|
|
|
}).finally(()=>{powerLoadingSub.value = false;}) |
|
|
|
function enterEmpowerClick() { |
|
|
|
powerLoadingSub.value = true; |
|
|
|
const checkedMenuTrue: systemMenusTypeTree[] = menuRef.value |
|
|
|
.getCheckedNodes(false, true) |
|
|
|
.map((node: any) => node); |
|
|
|
// console.log("确定授权", checkedMenuTrue); |
|
|
|
checkedMenuTrue.forEach((item) => { |
|
|
|
item.child = []; |
|
|
|
}); |
|
|
|
grantSystemRolePoewr({ |
|
|
|
systemname: systemTabs.value, |
|
|
|
roleid: props.roleId, |
|
|
|
level: manageScope.value * 1, |
|
|
|
power: checkedMenuTrue, |
|
|
|
}) |
|
|
|
.then((data) => { |
|
|
|
// console.log("确定授权返回----》", data); |
|
|
|
ElMessage.success("授权成功"); |
|
|
|
handleClosePower(); |
|
|
|
}) |
|
|
|
.finally(() => { |
|
|
|
powerLoadingSub.value = false; |
|
|
|
}); |
|
|
|
} |
|
|
|
</script> |
|
|
|
<template> |
|
|
|
<el-dialog v-model="power_is_Show" custom-class="dialog_box" :title="roleTitle" top="50px" :before-close="handleClosePower"> |
|
|
|
<el-container> |
|
|
|
<el-aside width="125px"> |
|
|
|
<el-tabs v-model="systemTabs" tab-position="left" class="demo-tabs tabs_box" > |
|
|
|
<el-tab-pane v-for="item in orgPostTreeContList" :key="item.key" :label="item.title" :name="item.coder"></el-tab-pane> |
|
|
|
</el-tabs> |
|
|
|
</el-aside> |
|
|
|
<el-main> |
|
|
|
<el-radio-group v-model="manageScope" style="margin-bottom: 10px"> |
|
|
|
<el-radio-button label="1">本岗位</el-radio-button> |
|
|
|
<el-radio-button label="2">本部门</el-radio-button> |
|
|
|
<el-radio-button label="3">本分部</el-radio-button> |
|
|
|
<el-radio-button label="4" disabled>指定行政组织</el-radio-button> |
|
|
|
<el-radio-button label="5">所有</el-radio-button> |
|
|
|
</el-radio-group> |
|
|
|
<el-scrollbar v-loading="powerLoading" class="tab_pane_box"> |
|
|
|
<el-tree |
|
|
|
ref="menuRef" |
|
|
|
node-key="menukey" |
|
|
|
:data="systemPowerMenusTree" |
|
|
|
show-checkbox |
|
|
|
:default-expand-all="true" |
|
|
|
:props="systemMenuTreeProps" |
|
|
|
> |
|
|
|
<template #default="{ node,data }"> |
|
|
|
<span class="tree_sapn">{{ node.label }}</span> |
|
|
|
<el-tag |
|
|
|
v-if="data.attribute === 2" |
|
|
|
type="warning" |
|
|
|
>目录</el-tag> |
|
|
|
<el-tag v-if="data.attribute === 1" type="success" |
|
|
|
>菜单</el-tag> |
|
|
|
<el-tag v-if="data.attribute ===4" type="danger" |
|
|
|
>按钮</el-tag> |
|
|
|
<el-tag v-if="data.attribute === 3" type="info" |
|
|
|
>外链</el-tag> |
|
|
|
|
|
|
|
</template> |
|
|
|
</el-tree> |
|
|
|
</el-scrollbar> |
|
|
|
</el-main> |
|
|
|
</el-container> |
|
|
|
<template #footer> |
|
|
|
<span class="dialog-footer"> |
|
|
|
<el-button type="danger" @click="handleClosePower">取消</el-button> |
|
|
|
<el-button type="primary" :loading="powerLoadingSub" @click="enterEmpowerClick">授权</el-button> |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
|
<el-dialog |
|
|
|
v-model="power_is_Show" |
|
|
|
custom-class="dialog_box" |
|
|
|
:title="roleTitle" |
|
|
|
top="50px" |
|
|
|
:before-close="handleClosePower" |
|
|
|
> |
|
|
|
<el-container> |
|
|
|
<el-aside width="125px"> |
|
|
|
<el-tabs v-model="systemTabs" tab-position="left" class="demo-tabs tabs_box"> |
|
|
|
<el-tab-pane |
|
|
|
v-for="item in orgPostTreeContList" |
|
|
|
:key="item.key" |
|
|
|
:label="item.title" |
|
|
|
:name="item.coder" |
|
|
|
></el-tab-pane> |
|
|
|
</el-tabs> |
|
|
|
</el-aside> |
|
|
|
<el-main> |
|
|
|
<el-radio-group v-model="manageScope" style="margin-bottom: 10px"> |
|
|
|
<el-radio-button label="0">默认</el-radio-button> |
|
|
|
<el-radio-button label="1">本岗位</el-radio-button> |
|
|
|
<el-radio-button label="2">本部门</el-radio-button> |
|
|
|
<el-radio-button label="3">本分部</el-radio-button> |
|
|
|
<el-radio-button label="4" disabled>指定行政组织</el-radio-button> |
|
|
|
<el-radio-button label="5">所有</el-radio-button> |
|
|
|
</el-radio-group> |
|
|
|
<el-scrollbar v-loading="powerLoading" class="tab_pane_box"> |
|
|
|
<el-tree |
|
|
|
ref="menuRef" |
|
|
|
node-key="menukey" |
|
|
|
:data="systemPowerMenusTree" |
|
|
|
show-checkbox |
|
|
|
:default-expand-all="true" |
|
|
|
:props="systemMenuTreeProps" |
|
|
|
> |
|
|
|
<template #default="{ node, data }"> |
|
|
|
<span class="tree_sapn">{{ node.label }}</span> |
|
|
|
<el-tag v-if="data.attribute === 2" type="warning">目录</el-tag> |
|
|
|
<el-tag v-if="data.attribute === 1" type="success">菜单</el-tag> |
|
|
|
<el-tag v-if="data.attribute === 4" type="danger">按钮</el-tag> |
|
|
|
<el-tag v-if="data.attribute === 3" type="info">外链</el-tag> |
|
|
|
</template> |
|
|
|
</el-tree> |
|
|
|
</el-scrollbar> |
|
|
|
</el-main> |
|
|
|
</el-container> |
|
|
|
<template #footer> |
|
|
|
<span class="dialog-footer"> |
|
|
|
<el-button type="danger" @click="handleClosePower">取消</el-button> |
|
|
|
<el-button type="primary" :loading="powerLoadingSub" @click="enterEmpowerClick" |
|
|
|
>授权</el-button |
|
|
|
> |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
|
</template> |
|
|
|
<style lang='scss' scoped> |
|
|
|
.el-dialog__body{ |
|
|
|
padding: 0; |
|
|
|
<style lang="scss" scoped> |
|
|
|
.el-dialog__body { |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
.tabs_box{ |
|
|
|
height: calc(100vh - 500px); |
|
|
|
.tab_pane_box{ |
|
|
|
height: calc(100vh - 550px); |
|
|
|
overflow: hidden; |
|
|
|
overflow-y: auto; |
|
|
|
} |
|
|
|
.tabs_box { |
|
|
|
height: calc(100vh - 500px); |
|
|
|
.tab_pane_box { |
|
|
|
height: calc(100vh - 550px); |
|
|
|
overflow: hidden; |
|
|
|
overflow-y: auto; |
|
|
|
} |
|
|
|
} |
|
|
|
.tab_pane_box{ |
|
|
|
height: calc(100vh - 550px); |
|
|
|
overflow: hidden; |
|
|
|
overflow-y: auto; |
|
|
|
.tab_pane_box { |
|
|
|
height: calc(100vh - 550px); |
|
|
|
overflow: hidden; |
|
|
|
overflow-y: auto; |
|
|
|
} |
|
|
|
.tree_sapn{ |
|
|
|
padding: 0 15px; |
|
|
|
.tree_sapn { |
|
|
|
padding: 0 15px; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
|
herenshan112
7 months ago