You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
444 lines
18 KiB
444 lines
18 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-12-17 16:53:07
|
|
@ 备注:
|
|
-->
|
|
<script lang='ts' setup>
|
|
import { appTableBut, appListBut,appDetailBut,formBaseBut,appGroupBut } from "@/utils/workflow/const";
|
|
import { orgInfo } from '@/api/displayboardapi/types';
|
|
import { appInitAuthorization,tabsAuthorizationMode } from "@/api/system/roleapi/postrole";
|
|
import type { TabsPaneContext } from 'element-plus'
|
|
|
|
const props = defineProps({
|
|
appType: {
|
|
type: String,
|
|
default: "app"
|
|
},
|
|
powerType: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
roleId: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
orgTree: {
|
|
type: Array as PropType<orgInfo[]>,
|
|
default: () => []
|
|
}
|
|
})
|
|
const appLoading = ref(false)
|
|
const submitLoading = ref(false)
|
|
const appPowerArt = ref<any>([])
|
|
const appGroupButAry = ref<string[]>([])
|
|
const powerActiveName = reactive({
|
|
group:"",
|
|
app:""
|
|
})
|
|
const systemMenuTreePropsing = {
|
|
children: "child",
|
|
label: "name",
|
|
value: "id",
|
|
};
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-05-13 14:20:47
|
|
@ 功能: 获取自定义App
|
|
*/
|
|
|
|
const getAppList = () => {
|
|
appLoading.value=true
|
|
appPowerArt.value = []
|
|
appGroupButAry.value = []
|
|
appInitAuthorization({appType:"app",powerType:props.powerType,roleId:props.roleId}).then((data: any) => {
|
|
console.log("获取自定义App", data);
|
|
// appList.value = data.data;
|
|
appPowerArt.value = data.data.appList
|
|
appGroupButAry.value = data.data.groupButPower
|
|
appLoading.value=false
|
|
if(data.data.appList && Array.isArray(data.data.appList)){
|
|
powerActiveName.group = data.data.appList[0].id
|
|
if(data.data.appList[0].appList && Array.isArray(data.data.appList[0].appList)){
|
|
powerActiveName.app = data.data.appList[0].appList[0].id
|
|
}
|
|
}
|
|
}).finally(()=>{
|
|
appLoading.value=false
|
|
submitLoading.value = false
|
|
})
|
|
};
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-12-18 10:17:07
|
|
@ 功能: 标签被选择
|
|
*/
|
|
const handleTabClick = (val:any) => {
|
|
|
|
if(appPowerArt.value && Array.isArray(appPowerArt.value)){
|
|
appPowerArt.value.find((item:any) => {
|
|
if(item.id === powerActiveName.group){
|
|
powerActiveName.app = item.appList[0].id
|
|
}
|
|
})
|
|
|
|
// powerActiveName.app = appPowerArt.value.find((item:any) => item.id === powerActiveName.group)?.appList[0].id
|
|
}
|
|
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-12-18 11:14:56
|
|
@ 功能: 选择分组
|
|
*/
|
|
const handleGroupChange = (item:any) => {
|
|
console.log("-------------------------->",item)
|
|
// if(item.isTrue){
|
|
if(item.appList && Array.isArray(item.appList)){
|
|
item.appList.find((app:any) => {
|
|
app.isTrue = item.isTrue
|
|
if(item.isTrue){
|
|
app.operationButton = ["bjapp","scapp","xzfg","scfg","yzfg","xz","bj","sc","yz","jczdh","yysz","yyfb"]
|
|
}else{
|
|
app.operationButton = []
|
|
}
|
|
if(app.appMenuTree && Array.isArray(app.appMenuTree)){
|
|
app.appMenuTree = handleAppChange(app.appMenuTree,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"]
|
|
}else{
|
|
menu.formPower = []
|
|
menu.listPower = []
|
|
}
|
|
if(menu.children && Array.isArray(menu.children)){
|
|
menu.children = handleAppChange(menu.children,isTrue)
|
|
}
|
|
})
|
|
}
|
|
|
|
return item
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-12-18 13:48:26
|
|
@ 功能: 选择App
|
|
*/
|
|
const handleAppPowerChange = (item:any) => {
|
|
console.log("----------------选择App---------->",item)
|
|
if(item.isTrue){
|
|
item.operationButton = ["bjapp","scapp","xzfg","scfg","yzfg","xz","bj","sc","yz","jczdh","yysz","yyfb"]
|
|
}else{
|
|
item.operationButton = []
|
|
}
|
|
if(item.appMenuTree && Array.isArray(item.appMenuTree)){
|
|
item.appMenuTree = handleAppChange(item.appMenuTree,item.isTrue)
|
|
}
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 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.listPower = [ "newAdd", "import", "export", "sc", "dy", "showQrCode","del","bj"]
|
|
}else{
|
|
item.formPower = []
|
|
item.listPower = []
|
|
}
|
|
if(item.children && Array.isArray(item.children)){
|
|
item.children = handleAppChange(item.children,item.isTrue)
|
|
}
|
|
}
|
|
onMounted(()=>{
|
|
// getAppList()
|
|
})
|
|
defineExpose({
|
|
getAppList
|
|
})
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-12-18 14:16:49
|
|
@ 功能: 提交授权
|
|
*/
|
|
const submitPower = () => {
|
|
submitLoading.value = true
|
|
let sendData:any = {
|
|
appType:"app",
|
|
powerType:props.powerType,
|
|
roleId:props.roleId,
|
|
listPower:appPowerArt.value,
|
|
groupPower:appGroupButAry.value
|
|
}
|
|
if(!props.roleId || props.roleId === ""){
|
|
ElMessage.error("具体授权属性！")
|
|
submitLoading.value = false
|
|
return
|
|
}
|
|
console.log("----------------提交授权---------->",sendData)
|
|
// submitLoading.value = true
|
|
tabsAuthorizationMode(sendData).then((data: any) => {
|
|
if(data.code === 0){
|
|
ElMessage.success("授权成功！")
|
|
submitLoading.value = false
|
|
}else{
|
|
ElMessage.error(data.msg)
|
|
}
|
|
}).catch((err: any) => {
|
|
ElMessage.error(err.message)
|
|
submitLoading.value = false
|
|
})
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 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
|
|
}
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="app-tabs-content" v-loading="appLoading">
|
|
<el-checkbox-group v-model="appGroupButAry">
|
|
<el-checkbox
|
|
v-for="city in appGroupBut"
|
|
:key="city.key"
|
|
:label="city.label"
|
|
:value="city.value"
|
|
>
|
|
{{ city.label }}
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
|
|
<el-tabs v-model="powerActiveName.group" @tab-change="handleTabClick" class="demo-tabs " >
|
|
<el-tab-pane v-for="item in appPowerArt" :label="item.name" :key="item.id" :name="item.id" class="center-content">
|
|
<template #label>
|
|
<div class="app-tabs-checkbox">
|
|
<el-checkbox v-model="item.isTrue" @change="handleGroupChange(item)" /><span>{{item.name}}</span>
|
|
</div>
|
|
|
|
</template>
|
|
<!--应用-->
|
|
|
|
|
|
|
|
<el-tabs v-model="powerActiveName.app" class="demo-tabs left_hight" tab-position="left">
|
|
<el-tab-pane v-for="app in item.appList" :label="app.name" :key="app.id" :name="app.id" class="center-content">
|
|
<template #label>
|
|
<div class="app-tabs-checkbox">
|
|
<el-checkbox v-model="app.isTrue" @change="handleAppPowerChange(app)" /><span>{{app.name}}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<div >
|
|
<div style="width:100%">
|
|
<el-checkbox label="全选" v-model="app.isPick" @change="pickAllBut(app,4)" />
|
|
</div>
|
|
<div class="app-form-checkbox">
|
|
<el-checkbox-group v-model="app.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>
|
|
<el-table
|
|
:data="app.appMenuTree"
|
|
style="width: 100%;"
|
|
class="tableScrollbar"
|
|
row-key="id"
|
|
border
|
|
default-expand-all
|
|
>
|
|
<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"
|
|
>
|
|
{{ city.value }} {{ 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 label="全选" v-model="scope.row.listPowerIsAll" @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>
|
|
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-tab-pane>
|
|
<el-affix position="bottom" :offset="100" style="margin-left: 250px;">
|
|
<el-button v-loading="submitLoading" type="primary" @click="submitPower">确定授权</el-button>
|
|
</el-affix>
|
|
</el-tabs>
|
|
|
|
</div>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
.app-tabs-content {
|
|
|
|
width: 100%;
|
|
:deep .el-tabs__content{
|
|
padding: 0;
|
|
}
|
|
.app-form-checkbox{
|
|
width: 200px;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-gap: 10px;
|
|
}
|
|
}
|
|
|
|
.app-tabs-checkbox{
|
|
width: 100%;
|
|
text-align: left;
|
|
padding: 0 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
span{
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
.center-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 100%; /* 根据需要设置高度 */
|
|
padding: 0px;
|
|
}
|
|
.tableScrollbar{
|
|
width: 100%;
|
|
height: calc(100vh - 365px);
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
.left_hight{
|
|
height: calc(100vh - 350px);
|
|
}
|
|
</style>
|
|
|