herenshan112
14 hours ago
6 changed files with 735 additions and 7 deletions
@ -0,0 +1,616 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-23 13:29:28 |
|||
@ 备注: App应用授权 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { appTableBut, appListBut,appDetailBut,formBaseBut,appGroupBut } from "@/utils/workflow/const"; |
|||
import { AppMenuPowerTree, AppPowerTreeMaster, SetupAppMenuPower } from "@/api/system/roleapi/types"; |
|||
import { getAppGroupo,getGroupAppList,getAppMenuList,appGroupPowerConfig,appPowerConfig } from "@/api/system/roleapi/postrole"; |
|||
import { orgInfo } from "@/api/displayboardapi/types"; |
|||
|
|||
const props = defineProps({ |
|||
appType: { |
|||
type: String, |
|||
default: "app" |
|||
}, |
|||
powerType: { |
|||
type: String, |
|||
default: "org" |
|||
}, |
|||
roleId: { |
|||
type: String, |
|||
default: "313" |
|||
}, |
|||
orgTree: { |
|||
type: Array as PropType<orgInfo[]>, |
|||
default: () => [] |
|||
} |
|||
}) |
|||
const orgTree = computed(() => props.orgTree); |
|||
const oneGroupActiveTab = ref<string>("first"); //单个分组权限选择 |
|||
const oneAppActiveTab = ref<string>("first"); //单个分组权限选择 |
|||
const appGroupPower = reactive<SetupAppMenuPower>({ |
|||
groupButPower:[], |
|||
appList:[] |
|||
}); //应用分组权限 |
|||
const oneGroupAppList = ref<AppPowerTreeMaster[]>([]); |
|||
const oneAppMenuList = ref<AppMenuPowerTree[]>([]); |
|||
const systemMenuTreePropsing = { |
|||
children: "child", |
|||
label: "name", |
|||
value: "id", |
|||
}; |
|||
const groupLoading = ref<boolean>(false); |
|||
const appLoading = ref<boolean>(false); |
|||
const menuLoading = ref<boolean>(false); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-25 10:36:22 |
|||
@ 功能: 初始化获取数据 |
|||
*/ |
|||
const getAppList = () => { |
|||
groupLoading.value = true; |
|||
let sendData = { |
|||
powerId: props.roleId, |
|||
powerType: props.powerType, |
|||
} |
|||
getAppGroupo(sendData).then((res:any) => { |
|||
console.log("初始化获取数据--->",res) |
|||
if(res.code == 0){ |
|||
appGroupPower.groupButPower = res.data.groupButPower; |
|||
appGroupPower.appList = res.data.groupList; |
|||
if(res.data.groupList && Array.isArray(res.data.groupList) && res.data.groupList.length > 0){ |
|||
oneGroupActiveTab.value = res.data.groupList[0].id; |
|||
nextTick(() => { |
|||
getGroupAppListOne(); |
|||
}) |
|||
} |
|||
} |
|||
groupLoading.value = false; |
|||
}).finally(() => { |
|||
groupLoading.value = false; |
|||
}) |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-25 11:07:44 |
|||
@ 功能: 获取App列表 |
|||
*/ |
|||
const getGroupAppListOne = () => { |
|||
appLoading.value = true; |
|||
menuLoading.value = true; |
|||
let sendData = { |
|||
roleId: props.roleId, |
|||
powerType: props.powerType, |
|||
group: oneGroupActiveTab.value, |
|||
} |
|||
getGroupAppList(sendData).then((res:any) => { |
|||
console.log("获取App列表--->",res) |
|||
if(res.code == 0){ |
|||
oneGroupAppList.value = res.data; |
|||
if(res.data && Array.isArray(res.data) && res.data.length > 0){ |
|||
oneAppActiveTab.value = res.data[0].id; |
|||
nextTick(() => { |
|||
getAppMenuListOne(); |
|||
}) |
|||
} |
|||
} |
|||
appLoading.value = false; |
|||
}).finally(() => { |
|||
appLoading.value = false; |
|||
}) |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-25 13:36:45 |
|||
@ 功能: 获取菜单列表 |
|||
*/ |
|||
const getAppMenuListOne = () => { |
|||
menuLoading.value = true; |
|||
let sendData = { |
|||
roleId: props.roleId, |
|||
powerType: props.powerType, |
|||
group: oneGroupActiveTab.value, |
|||
appId: oneAppActiveTab.value, |
|||
} |
|||
getAppMenuList(sendData).then((res:any) => { |
|||
console.log("获取菜单列表--->",res) |
|||
if(res.code == 0){ |
|||
// oneGroupAppList.value = res.data; |
|||
oneAppMenuList.value = res.data; |
|||
} |
|||
menuLoading.value = false; |
|||
}).finally(() => { |
|||
menuLoading.value = false; |
|||
}) |
|||
} |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-25 16:21:19 |
|||
@ 功能: 监听变化App分组 |
|||
*/ |
|||
watch(() => oneGroupActiveTab.value, (newVal, oldVal) => { |
|||
if(newVal != oldVal){ |
|||
getGroupAppListOne(); |
|||
} |
|||
},{ |
|||
deep: true |
|||
}) |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-25 16:30:05 |
|||
@ 功能: 监听变化App应用 |
|||
*/ |
|||
watch(() => oneAppActiveTab.value, (newVal, oldVal) => { |
|||
if(newVal != oldVal){ |
|||
getAppMenuListOne(); |
|||
} |
|||
},{ |
|||
deep: true |
|||
}) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-25 16:40:07 |
|||
@ 功能: app权限全选 |
|||
*/ |
|||
const pickAppAllPower = (item:AppPowerTreeMaster) => { |
|||
console.log("app权限全选--->",item) |
|||
if(item.isPick){ |
|||
item.operationButton = ["bjapp","scapp","xzfg","scfg","yzfg","xz","bj","sc","yz","jczdh","yysz","yyfb"] |
|||
}else{ |
|||
item.operationButton = []; |
|||
} |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-18 13:58:21 |
|||
@ 功能: 选择App菜单是选中状态下，关联操作按钮 |
|||
*/ |
|||
const handleAppMenuChange = (item:any) => { |
|||
console.log("----------------选择App菜单---------->",item) |
|||
if(item.isTrue){ |
|||
item.formPower = [ "zc", "tj", "dy", "sc", "fz"] |
|||
item.formPowerIsAll = true |
|||
item.listPower = [ "newAdd", "import", "export", "sc", "dy", "showQrCode","del","bj"] |
|||
item.listPowerIsAll = true |
|||
}else{ |
|||
item.formPower = [] |
|||
item.listPower = [] |
|||
item.listPowerIsAll = false |
|||
item.formPowerIsAll = false |
|||
} |
|||
if(item.children && Array.isArray(item.children)){ |
|||
item.children = handleAppChange(item.children,item.isTrue) |
|||
} |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-18 11:23:40 |
|||
@ 功能: 循环递归联动赋值 |
|||
*/ |
|||
const handleAppChange = (item:any,isTrue:boolean) => { |
|||
// console.log("--------循环递归联动赋值------------------>",item) |
|||
if(item && Array.isArray(item)){ |
|||
item.forEach((menu:any) => { |
|||
menu.isTrue = isTrue |
|||
if(isTrue){ |
|||
menu.formPower = [ "zc", "tj", "dy", "sc", "fz"] |
|||
menu.listPower = [ "newAdd", "import", "export", "sc", "dy", "showQrCode","del","bj"] |
|||
menu.listPowerIsAll = true |
|||
menu.formPowerIsAll = true |
|||
}else{ |
|||
menu.formPower = [] |
|||
menu.listPower = [] |
|||
menu.listPowerIsAll = false |
|||
menu.formPowerIsAll = false |
|||
} |
|||
if(menu.children && Array.isArray(menu.children)){ |
|||
menu.children = handleAppChange(menu.children,isTrue) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
return item |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-20 15:33:37 |
|||
@ 功能: 全选 |
|||
*/ |
|||
const pickAllBut = (item:any,types:number) => { |
|||
console.log("--全选------------------------>",item,types) |
|||
// item.isTrue = !item.isTrue |
|||
switch(types){ |
|||
case 1: |
|||
// item.pagePowerIsAll = item.isTrue |
|||
item.pagePower = item.pagePowerIsAll ? ["lc","lb","sj","dy","nc"] : [] |
|||
|
|||
break |
|||
case 2: |
|||
// item.formPowerIsAll = item.isTrue |
|||
item.formPower = item.formPowerIsAll ? ["zc", "tj", "dy", "sc", "fz"] : [] |
|||
break |
|||
case 3: |
|||
// item.listPowerIsAll = item.isTrue |
|||
item.listPower = item.listPowerIsAll ? ["newAdd", "import", "export", "sc", "dy", "showQrCode","del","bj"] : [] |
|||
break |
|||
case 4: |
|||
// item.isTrue = item.isTrue |
|||
item.operationButton = item.isPick ? ["bjapp","scapp","xzfg","scfg","yzfg","xz","bj","sc","yz","jczdh","yysz","yyfb"] : [] |
|||
break |
|||
} |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-26 15:50:20 |
|||
@ 功能: 分组全选全选 |
|||
*/ |
|||
const pickAllGroupBut = (item:any) => { |
|||
console.log("分组全选全选--->",item) |
|||
if(item){ |
|||
appGroupPower.groupButPower = ["xz","dl","bj","xzapp"] |
|||
}else{ |
|||
appGroupPower.groupButPower = [] |
|||
} |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-25 16:53:11 |
|||
@ 功能: 页面授权联动 |
|||
*/ |
|||
const changePageButBox = (item:any,types:number) => { |
|||
console.log("页面授权联动--->",item.pagePower.length,item,types) |
|||
if(item.pagePower.length == types){ |
|||
item.pagePowerIsAll = true |
|||
}else{ |
|||
item.pagePowerIsAll = false |
|||
} |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-26 15:47:23 |
|||
@ 功能: 分组授权 |
|||
*/ |
|||
const changeGroupPageButBox = () => { |
|||
groupLoading.value = true |
|||
let sendData = { |
|||
powerId: props.roleId, |
|||
powerType: props.powerType, |
|||
groupButPower: appGroupPower.groupButPower, |
|||
} |
|||
appGroupPowerConfig(sendData).then((res:any) => { |
|||
if(res.code == 0){ |
|||
ElMessage({ |
|||
message: "分组授权成功", |
|||
type: "success", |
|||
}); |
|||
}else{ |
|||
ElMessage({ |
|||
message: res.msg, |
|||
type: "error", |
|||
}); |
|||
} |
|||
groupLoading.value = false |
|||
}).finally(() => { |
|||
groupLoading.value = false |
|||
}) |
|||
console.log("分组授权--->",sendData) |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-26 16:31:11 |
|||
@ 功能: 提交应用授权 |
|||
*/ |
|||
const submintAppPower = (appCont:AppPowerTreeMaster) => { |
|||
menuLoading.value = true |
|||
let sendData = { |
|||
powerId: props.roleId, |
|||
powerType: props.powerType, |
|||
appId: appCont.id, |
|||
appIsTrue: appCont.isTrue, |
|||
appPower: appCont.operationButton, |
|||
menuList: oneAppMenuList.value, |
|||
} |
|||
appPowerConfig(sendData).then((res:any) => { |
|||
if(res.code == 0){ |
|||
ElMessage({ |
|||
message: "应用授权成功", |
|||
type: "success", |
|||
}); |
|||
}else{ |
|||
ElMessage({ |
|||
message: res.msg, |
|||
type: "error", |
|||
}); |
|||
} |
|||
menuLoading.value = false |
|||
}).finally(() => { |
|||
menuLoading.value = false |
|||
}) |
|||
|
|||
console.log("提交应用授权--->",sendData) |
|||
console.log("提交应用授权--appCont->",appCont) |
|||
} |
|||
defineExpose({ |
|||
getAppList |
|||
}) |
|||
</script> |
|||
<template> |
|||
<div class="app-tabs-content"> |
|||
<div class="appGroupPowerBut"> |
|||
<div class="appGroupPowerButTitle">应用分组权限</div> |
|||
<div class="appGroupPowerButList"> |
|||
<el-checkbox label="全选" @change="pickAllGroupBut" /> |
|||
<el-checkbox-group v-model="appGroupPower.groupButPower"> |
|||
<el-checkbox |
|||
v-for="city in appGroupBut" |
|||
:key="city.key" |
|||
:label="city.label" |
|||
:value="city.value" |
|||
> |
|||
{{ city.label }} |
|||
</el-checkbox> |
|||
</el-checkbox-group> |
|||
</div> |
|||
<div class="appGroupPowerButAuth"> |
|||
<el-button type="primary" v-loading="groupLoading" element-loading-text="Loading..." @click="changeGroupPageButBox">分组授权</el-button> |
|||
</div> |
|||
</div> |
|||
<div class="appGroupTabs"> |
|||
<el-tabs v-model="oneGroupActiveTab" class="demo-tabs" v-loading="groupLoading" element-loading-text="Loading..."> |
|||
<el-tab-pane v-for="item in appGroupPower.appList " :key="item.id" label="应用权限" :name="item.id"> |
|||
<template #label> |
|||
<div class="appTabsCheckbox"> |
|||
<el-checkbox v-model="item.isTrue" /><span>{{item.name}}</span> |
|||
</div> |
|||
</template> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
<div class="appMenuBox"> |
|||
<div class="appInfoBox"> |
|||
<el-tabs v-model="oneAppActiveTab" class="demo-tabs left_hight" tab-position="left" v-loading="appLoading" element-loading-text="Loading..."> |
|||
<el-tab-pane v-for="item in oneGroupAppList " :key="item.id" label="应用权限" :name="item.id"> |
|||
<template #label> |
|||
<div class="apptitle"> |
|||
<el-checkbox v-model="item.isTrue" /><span>{{item.name}}</span> |
|||
</div> |
|||
</template> |
|||
<div class="oneAppPower" v-loading="menuLoading" element-loading-text="Loading..."> |
|||
|
|||
<div class="appGroupPowerButTitle">App应用权限</div> |
|||
<div style="width:100%; padding:0 5px;"> |
|||
<el-checkbox label="全选" v-model="item.isPick" @change="pickAppAllPower(item)" /> |
|||
</div> |
|||
<div class="app-form-checkbox"> |
|||
<el-checkbox-group v-model="item.operationButton"> |
|||
<el-checkbox |
|||
v-for="city in appDetailBut" |
|||
:key="city.key" |
|||
:label="city.label" |
|||
:value="city.value" |
|||
> |
|||
{{ city.label }} |
|||
</el-checkbox> |
|||
</el-checkbox-group> |
|||
</div> |
|||
<div class="shouquan"> |
|||
<el-button type="primary" v-loading="menuLoading" element-loading-text="Loading..." @click="submintAppPower(item)">提交App权限</el-button> |
|||
</div> |
|||
</div> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
<div class="appMenuBody"> |
|||
|
|||
<el-table |
|||
:data="oneAppMenuList" |
|||
style="width: 100%;" |
|||
class="tableScrollbar" |
|||
row-key="id" |
|||
border |
|||
default-expand-all |
|||
v-loading="menuLoading" element-loading-text="Loading..." |
|||
> |
|||
<el-table-column prop="name" label="栏目名称" > |
|||
<template #default="scope"> |
|||
<el-checkbox v-model="scope.row.isTrue" :value="scope.row.isTrue" @change="handleAppMenuChange(scope.row)"></el-checkbox> |
|||
{{ scope.row.name }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="pagePower" label="页面权力" > |
|||
<template #header> |
|||
<el-text>页面权限</el-text> |
|||
</template> |
|||
<template #default="scope"> |
|||
<el-checkbox label="全选" v-model="scope.row.pagePowerIsAll" @change="pickAllBut(scope.row,1)" /> |
|||
<el-checkbox-group v-model="scope.row.pagePower"> |
|||
<el-checkbox |
|||
v-for="city in formBaseBut" |
|||
:key="city.key" |
|||
:label="city.label" |
|||
:value="city.value" |
|||
@change="changePageButBox(scope.row,formBaseBut.length)" |
|||
> |
|||
{{ city.label }} |
|||
</el-checkbox> |
|||
</el-checkbox-group> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="formPower" label="表单权限" > |
|||
<template #header> |
|||
<el-text>表单权限</el-text> |
|||
</template> |
|||
<template #default="scope"> |
|||
<el-checkbox label="全选" v-model="scope.row.formPowerIsAll" @change="pickAllBut(scope.row,2)" /> |
|||
<el-checkbox-group v-model="scope.row.formPower"> |
|||
<el-checkbox |
|||
v-for="city in appTableBut" |
|||
:key="city.value" |
|||
:label="city.label" |
|||
:value="city.value" |
|||
> |
|||
{{ city.label }} |
|||
</el-checkbox> |
|||
</el-checkbox-group> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="listPower" label="listPower" > |
|||
<template #header> |
|||
<el-text>列表权限</el-text> |
|||
</template> |
|||
<template #default="scope"> |
|||
<el-checkbox v-model="scope.row.listPowerIsAll" label="全选" @change="pickAllBut(scope.row,3)" /> |
|||
<el-checkbox-group v-model="scope.row.listPower"> |
|||
<el-checkbox |
|||
v-for="city in appListBut" |
|||
:key="city.key" |
|||
:label="city.label" |
|||
:value="city.value" |
|||
> |
|||
{{ city.label }} |
|||
</el-checkbox> |
|||
</el-checkbox-group> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="visibleRange" label="数据权限" > |
|||
<template #header> |
|||
<el-text>数据权限</el-text> |
|||
</template> |
|||
<template #default="scope"> |
|||
<el-radio-group |
|||
v-model="scope.row.visibleRange.types" |
|||
> |
|||
<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="scope.row.visibleRange.types == 5" |
|||
v-model="scope.row.visibleRange.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> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.app-tabs-content { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.appGroupPowerBut{ |
|||
width: 120px; |
|||
border: 1px solid #e4e7ed; |
|||
|
|||
.appGroupPowerButList{ |
|||
padding: 5px; |
|||
} |
|||
.appGroupPowerButAuth{ |
|||
padding: 5px; |
|||
text-align: center; |
|||
button{ |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
.appGroupTabs{ |
|||
width: calc(100% - 140px); |
|||
.appTabsCheckbox{ |
|||
display: flex; |
|||
align-items: center; |
|||
label{ |
|||
padding:0 5px 0 10px; |
|||
} |
|||
span{ |
|||
padding:0 10px 0 0; |
|||
} |
|||
} |
|||
:deep .el-tabs__content{ |
|||
padding: 0; |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
.left_hight{ |
|||
height: calc(100vh - 350px); |
|||
} |
|||
.appGroupPowerButTitle{ |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
background-color: #f5f7fa; |
|||
padding: 5px; |
|||
border-radius: 5px; |
|||
} |
|||
.oneAppPower{ |
|||
width: 120px; |
|||
border: 1px solid #e4e7ed; |
|||
.app-form-checkbox{ |
|||
padding:0 5px; |
|||
} |
|||
} |
|||
.tableScrollbar{ |
|||
width: 100%; |
|||
height: calc(100vh - 365px); |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
margin-top: 15px; |
|||
} |
|||
.appMenuBox{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.appInfoBox{ |
|||
width: 410px; |
|||
::deep .el-tabs__content{ |
|||
padding: 0; |
|||
} |
|||
} |
|||
.appMenuBody{ |
|||
width: calc(100% - 410px); |
|||
} |
|||
} |
|||
.apptitle{ |
|||
width: 200px; |
|||
text-align: left; |
|||
padding: 0 10px; |
|||
display: flex; |
|||
align-items: center; |
|||
overflow-x: auto; |
|||
word-wrap: break-word; /* 旧版浏览器兼容 */ |
|||
overflow-wrap: break-word; /* 标准属性 */ |
|||
word-break: break-all; /* 强制任意字符断行 */ |
|||
white-space: pre-wrap; /* 保留空格换行 */ |
|||
span{ |
|||
margin-left: 5px; |
|||
} |
|||
} |
|||
.shouquan{ |
|||
width: 100%; |
|||
text-align: center; |
|||
padding: 5px 0 10px 0; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue