<!--
@ 作者: 秦东
@ 时间: 2025-12-17 13:24:58
@ 备注: 设置系统权限
-->
<script lang='ts' setup>
import { getOrgTreeList } from "@/api/hr/org/index";
import { appInitAuthorization,gainAppTableListNew,getPowerPageUser,systemAppAuthorization,copyRolePower } from "@/api/system/roleapi/postrole";
import { appPowerUnit } from "@/api/system/roleapi/power";    
import { giveRoleTree,editRoleStatus,getOrgPostTree } from '@/api/role/index'
import type { getSystemPower,AppPowerTree,systemList,custerAppInfo, custerAppTablePower, searchUser } from "@/api/system/roleapi/types";
import type {  FormRules, TreeInstance  } from 'element-plus'
import type {RoleListTree,RoleFormInfo,orgAndPostisListTree} from '@/api/role/types'
import { appTableBut, appListBut,appDetailBut,formBaseBut,appGroupBut } from "@/utils/workflow/const";


import { Search } from '@element-plus/icons-vue'

import SvgIcon from "@/components/SvgIcon/index.vue";
import SetRolePeople from '@/views/system/monitor/online/roleConfig/setRolePeople.vue'
import AddRoleGroup from '@/views/system/monitor/online/roleConfig/addRoleGroup.vue'
import EditRoleGroup from '@/views/system/monitor/online/roleConfig/editRoleGroup.vue'
import { orgInfo } from '@/api/displayboardapi/types';
const squareUrl = ref<string>(
  "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
);
import AppTablePower from '@/views/system/monitor/online/powerPage/apptablepower.vue'
import AppTabsPick from '@/views/system/monitor/online/powerPage/appTabsPick.vue'



const appTabsPowerPage = ref()
const appLoading = ref(false)
const setRolePople  = ref(false)
const orgTree = ref<orgInfo[]>([])			//行政组织树
const setRoleManInfo = ref<RoleListTree>()
const roleGroupOrInfo = ref(1)
const roleLeft = ref()   //左侧控件
const searchQuery = ref('')	//行政组织搜索
const treeRefOrg = ref<TreeInstance>()
const treeRefOrgPost = ref<TreeInstance>()	//岗位
const roleListdata = ref<RoleListTree[]>([])	//角色树
const editRoleCont = ref<RoleFormInfo>()
const appList = ref<custerAppInfo[]>([]);
const openEditRoleGroup = ref(false)
const roleLoading = ref(false)
const orgPostLoading = ref(false)
const openRoleGroup = ref(false)
const treeBoxHeight = ref(300)
const treeBoxHeightOrg = ref(300)
const systemPowerTree = ref<AppPowerTree[]>([])
const orgPostisListdata = ref<orgAndPostisListTree[]>([])		///行政组织岗位树
const userPowerList = ref<systemList>({})	//人员树
const activeAppId = ref<string>("");
const appTableList = ref<custerAppTablePower[]>([]);
const myAppTableLoad = ref(false)
const treeRef = ref()
const appSystemConfig = ref<any[]>([])
const appFormButConfig = ref<any[]>([])
const grouTabsLoading = ref(false)
const props = {
  value: 'id',
  label: 'label',
  disabled:'status',
  children: 'children',
}
//获取系统权限控制项
const systemPower = ref<getSystemPower>({
    powerType: "org",
    appId: "",
    appSystem: "system",
    roleId: "313",
    isPick: false,
    appType: ""
})
//行政组织树字段约束
const propsOrg = {
  value: 'id',
  label: 'name',
//   disabled:'status',
  children: 'child',
}
const propsOrgPost = {
  value: 'id',
  label: 'label',
  disabled:'status',
  children: 'children',
}
const systemMenuTreePropsing = {
  children: "child",
  label: "name",
  value: "id",
};
//搜索人员
const searchUserQuery =reactive<searchUser>({
	page:1,
	pagesize:20,
	name:"",
});	//搜索人员
const filterMethod = (query: string, node: any) => node.label!.includes(query)
const filterMethodOrg = (query: string, node: any) => {
	return node.name!.includes(query)
}
//搜索行政组织
const onQueryChangedOrg = (query: string) => {
  treeRefOrg.value!.filter(query)
}
//搜索行政组织岗位
const onQuedOrg = (query: string) => {
  treeRefOrgPost.value!.filter(query)
} 
//搜索角色
const onQueryChanged = (query: string) => {
  treeRef.value!.filter(query)
}
/**
@ 作者: 秦东
@ 时间: 2025-11-26 10:09:42
@ 功能: 编辑角色人员
*/
const editRolePeopel = (item:RoleListTree) =>{
	console.log("编辑角色人员--111111->",item)
    setRoleManInfo.value = item
    setRolePople.value = true
}
/**
@ 作者: 秦东
@ 时间: 2025-12-17 13:32:54
@ 功能: 获取角色树
*/
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
        grouTabsLoading.value=false
    })
}
/**
@ 作者: 秦东
@ 时间: 2025-12-17 13:37:28
@ 功能: 添加角色组
*/
const addRoleGroup = (types:number) => {
    roleGroupOrInfo.value = types
    openRoleGroup.value = true     
}
/**
@ 作者: 秦东
@ 时间: 2025-12-17 13:40:53
@ 功能: 获取平台授权项目
*/
const getSystemPowerSub = () => {
    appPowerUnit(systemPower.value).then(({data})=>{
        console.log("获取平台授权项目------->",data)
        systemPowerTree.value = data
		grouTabsLoading.value=false
    })
}
/**
@ 作者: 秦东
@ 时间: 2025-12-17 13:40:01
@ 功能: 选中角色
*/
const pickRoleTree = (data:any) => {
	console.log("监测赋权组------->",data)
    if(data.status && data.types==1){
        console.log("监测赋权组------->",data)
		systemPower.value.appId=""
		systemPower.value.appSystem="system"
		systemPower.value.roleId=""
		systemPower.value.roleId=data.id.toString()
		getSystemPowerSub();
    }
}
/**
@ 作者: 秦东
@ 时间: 2025-12-17 13:47:01
@ 功能: 编辑角色信息
*/
const editMyInfoIcon = (data:RoleListTree,types:number) => {
    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;
    }
}
/**
@ 作者: 秦东
@ 时间: 2025-12-17 13:47:30
@ 功能: 编辑角色状态
*/
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',
                    })
                }
            })
}
/**
@ 作者: 秦东
@ 时间: 2025-12-17 13:52:17
@ 功能: 获取行政组织
*/
const pickOrgTree = (data:any) => {
    console.log("监测赋权组----2222--->",systemPower.value.powerType,"---------->",data)
	if((systemPower.value.powerType=="job" && data.types == "9") || systemPower.value.powerType!="job"){
		systemPower.value.appId=""
		systemPower.value.appSystem="system"
		systemPower.value.roleId=""
		systemPower.value.roleId=data.id.toString()
		getSystemPowerSub();
	}
	
}
/**
@ 作者: 秦东
@ 时间: 2025-12-17 13:55:39
@ 功能: 获取平台授权项目用户
*/
const getPowerPageUserSub = () => {
	console.log("获取平台授权项目用户---searchUserQuery---->",searchUserQuery)
    getPowerPageUser(searchUserQuery).then(({data})=>{
        console.log("获取平台授权项目用户------->",data)
		userPowerList.value = data
        grouTabsLoading.value=false
    })
}
/**
@ 作者: 秦东
@ 时间: 2025-12-17 13:55:02
@ 功能: 查询用户
*/
const onQueryChangedOrgUser = (query: string) => {
	console.log("获取平台授权项目用户---查询--->",query)
	searchUserQuery.page=1
    searchUserQuery.name = query
    getPowerPageUserSub()
}
/**
@ 作者: 秦东
@ 时间: 2025-11-18 17:00:46
@ 功能: 选择用户陪权
*/
const pickUser = (item:any) =>{
	console.log("选择用户陪权--111111->",item)
	item.isPick = true
	systemPower.value.roleId = item.id.toString()
    // systemPower.value.powerType="user"
    console.log("选择用户陪权--2222->",userPowerList)
	if(userPowerList.value.list && Array.isArray(userPowerList.value.list)){
		userPowerList.value.list.forEach((items:any)=>{
		// console.log("选择用户陪权--111111->",items.id)
			if(items.id!=item.id){
				items.isPick = false
			}
		})
	}
    getSystemPowerSub()
}
/**
@ 作者: 秦东
@ 时间: 2025-12-17 14:07:34
@ 功能: 获取行政组织树
*/
const getOrgTreeAry = () => {
    roleLoading.value = true
    if(!Array.isArray(orgTree.value) || orgTree.value.length<=0){
        
        getOrgTreeList({ orgid: 0 })
        .then(( data:any ) => {
            if(Array.isArray(data.data) && data.data.length>0){
                systemPower.value.roleId=data.data[0].id.toString()
            }
            orgTree.value = data.data
            roleLoading.value = false
            getSystemPowerSub();
        }).finally(()=>{
            roleLoading.value = false
            grouTabsLoading.value=false
        })
    }else{
        roleLoading.value = false
    }
    
}
/**
@ 作者: 秦东
@ 时间: 2025-12-17 14:12:36
@ 功能: 获取行政组织及岗位
*/
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
            grouTabsLoading.value=false
        })
    }else{
        orgPostLoading.value=true
    }
}
/**
@ 作者: 秦东
@ 时间: 2025-05-13 14:20:47
@ 功能: 获取自定义App
*/
const appGroupButAry = ref<string[]>([])
const appPowerArt = ref<any>([])
const getAppList = () => {
    appLoading.value=true
    appInitAuthorization({appType:systemPower.value.appSystem,powerType:systemPower.value.powerType,roleId:systemPower.value.roleId}).then((data: any) => {
        console.log("获取自定义App", data);
        // appList.value = data.data;
        appPowerArt.value = data.data.appList
        appGroupButAry.value = data.data.groupButton
        // if (data.data && data.data.length > 0) {
        // if (data.data[0] && data.data[0].signCode) {
        //     activeAppId.value = data.data[0].signCode;
            
        // }
        // }
        // console.log("获取自定义App", activeAppId.value);
        grouTabsLoading.value=false
    }).finally(()=>{
        appLoading.value=false
    })
};
/**
@ 作者: 秦东
@ 时间: 2025-12-17 14:11:19
@ 功能: 检测赋权组
*/
watch(()=>systemPower.value.powerType,(val:string)=>{
    systemPower.value.appId=""
	systemPower.value.appSystem="system"
	systemPower.value.roleId=""
    grouTabsLoading.value=true
    switch(val){
        case "org":
            getOrgTreeAry();
			
            break;
        case "job":
            getOrgPostisTree()
            break;
        case "role":
            getRoleTree();
            break;
		case "person":
            getPowerPageUserSub()
            break;
        default:
    }

    if(systemPower.value.appSystem=="app"){
        appTabsPowerPage.value.getAppList();
    }else{
        getSystemPowerSub();
    }
},{
    immediate:true
})
/**
@ 作者: 秦东
@ 时间: 2025-12-17 14:44:08
@ 功能: 监听系统选择
*/
watch(()=>systemPower.value.appSystem,(val:string)=>{
    console.log("监听系统选择--111111->",val)                                                                             
    if(val=="app"){
        // getAppList();
        appTabsPowerPage.value.getAppList()
    }else{
        getSystemPowerSub()
        
    }
	systemPower.value.isPick = false
},{
    immediate:true
})
/**
@ 作者: 秦东
@ 时间: 2025-11-19 08:25:41
@ 功能: 选择系统菜单授权
*/
const pickSystemMenuInfo = (item:AppPowerTree) =>{
	console.log("选择系统菜单授权--111111->",item)
	if(item.isTrue){
		if(item.buttenPower && Array.isArray(item.buttenPower)){
			item.buttenPower.forEach((child:any)=>{
				child.isTrue = false
			})
		}
		childPickSystemMenuInfo(item.children,false)
	}else{
		if(item.buttenPower && Array.isArray(item.buttenPower)){
			item.buttenPower.forEach((child:any)=>{
				child.isTrue = true
			})
		}
		childPickSystemMenuInfo(item.children,true)
	}
}

const childPickSystemMenuInfo = (menuList:AppPowerTree[],isTrue:boolean) =>{
	if(menuList && Array.isArray(menuList)){
		menuList.forEach((item:AppPowerTree)=>{
			item.isTrue = isTrue
			if(item.buttenPower && Array.isArray(item.buttenPower)){
				item.buttenPower.forEach((child:any)=>{
					child.isTrue = isTrue
				})
			}
			childPickSystemMenuInfo(item.children,isTrue)
		})
	}
}
/**
@ 作者: 秦东
@ 时间: 2025-11-18 08:38:06
@ 功能: 提交应用授权
*/
const savePowerUserSub = () => {
    console.log("提交应用授权---1---->",systemPower.value)
	console.log("提交应用授权---2---->",systemPowerTree.value)
	let sendInfo =  {
		powerType: systemPower.value.powerType,
		appId: systemPower.value.appId,
		appSystem: systemPower.value.appSystem,
		roleId: systemPower.value.roleId,
		isPick: systemPower.value.isPick,
		sysstemPowerInfo: systemPowerTree.value,                                                                                                                                                                                                                     
		CustomizeApp:appTableList.value
	}
	console.log("提交应用授权---3---->",sendInfo)
	systemAppAuthorization(sendInfo).then((data:any)=>{
		console.log("提交应用授权-data--3---->",data)
        if(data.code==0){
            ElMessage({
				message: "提交成功",
				type: "success",
			})
        }else{
            ElMessage({
				message: "提交失败",
				type: "error",
			})
        }
	})
}

/**
@ 作者: 秦东
@ 时间: 2026-01-15 15:17:25
@ 功能: 复制角色
*/
const copyRoleRef = ref(ElForm)
const copyIshow = ref(false)
const copyRoleInfo = ref<any>()
const copyRolePowerInfo = (val:any) => {
    console.log("复制角色",val)
    val.label = val.label+"_复制"
    copyRoleInfo.value = val
    copyIshow.value = true
}
const handleCloseCopyRole = () => {
    copyIshow.value = false
    copyRoleRef.value.resetFields()
}
//表单验证规则
const rulesCopyRole = reactive({
    label: [{ required: true, message: "请输入名称", trigger: "blur" }],
})
/**
@ 作者: 秦东
@ 时间: 2026-01-15 15:40:16
@ 功能: 提交复制
*/
const sumbCopy = () => {
    console.log("提交复制",copyRoleInfo.value)
    copyRoleRef.value.validate((isValid: boolean)=>{
        if(isValid){
            copyRolePower({
                id: copyRoleInfo.value.id.toString(),
                label: copyRoleInfo.value.label,
            }).then((data:any)=>{
                console.log("提交复制-data--3---->",data)
                if(data.code==0){
                    ElMessage({
                        message: "提交成功",
                        type: "success",
                    })
                }else{
                    ElMessage({
                        message: "提交失败",
                        type: "error",
                    })
                }
            }).finally(()=>{
                handleCloseCopyRole()
            })
        }
    })
}

//组件渲染完毕
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="app-content">
        <el-dialog
            v-model="copyIshow"
            title="复制角色"
            width="500"
            :before-close="handleCloseCopyRole"
        >
            <el-form
                ref="copyRoleRef"
                style="width: 100%"
                :model="copyRoleInfo"
                :rules="rulesCopyRole"
                label-width="auto"
            >
                <el-form-item label="名称" prop="label">
                    <el-input v-model="copyRoleInfo.label" />
                </el-form-item>
                
            </el-form>
            <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="handleCloseCopyRole">取消</el-button>
                        <el-button type="primary" @click="sumbCopy">提交
                        </el-button>
                    </div>
                </template>
        </el-dialog>


        <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||grouTabsLoading"
                        :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="onQuedOrg"/>
                    </div>
                    <el-tree-v2
                        ref="treeRefOrgPost"
                        style="max-width: 350px;"
                        :data="orgPostisListdata"
                        :props="propsOrgPost"
                        :filter-method="filterMethod"
                        :height="treeBoxHeightOrg"
                        :v-loading="orgPostLoading||grouTabsLoading"
                        :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" style="display: none;">
                        <el-button type="primary" @click="addRoleGroup(2)">新建角色组</el-button>
                        <el-button type="primary" @click="addRoleGroup(1)">新建角色</el-button>
                    </div>
                    <div class="searchBox czjzzydq">
                        <el-input v-model="searchQuery" placeholder="请输入要查找的角色" :suffix-icon="Search" @input="onQueryChanged"/>
                        <el-dropdown>
                            <el-button type="primary" class="fa fa-plus" />
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="addRoleGroup(1)">
                                        <el-row>
                                        <el-col :span="24">
                                            <el-space wrap>
                                            <svg-icon
                                                style="color: #eebe77"
                                                prefix="icon"
                                                icon-class="liuChengBiaoDan"
                                            />
                                            新建角色
                                            </el-space>
                                        </el-col>
                                        <el-col :span="24" style="padding-left: 20px; font-size: 12px">
                                            数据收集、事件记录<br />任务协同、业务审批
                                        </el-col>
                                        </el-row>
                                    </el-dropdown-item>
                                    <el-dropdown-item @click="addRoleGroup(2)">
                                        <el-row>
                                        <el-col :span="24">
                                            <el-space wrap>
                                            <svg-icon
                                                style="color: #337ecc"
                                                prefix="icon"
                                                icon-class="fenZhu"
                                            />
                                            新建角色组
                                            </el-space>
                                        </el-col>
                                        <el-col :span="24" style="padding-left: 20px; font-size: 12px">
                                            应用项目管理
                                        </el-col>
                                        </el-row>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>

                    </div>
                    <div class="treeBoxClass">
                    <el-tree-v2
                        ref="treeRef"
                        style="max-width: 350px;"
                        :data="roleListdata"
                        :props="props"
                        :filter-method="filterMethod"
                        :height="treeBoxHeight"
                        :v-loading="roleLoading||grouTabsLoading"
                        :expand-on-click-node="false"
                        :highlight-current="true"
                        class="treebox"
                        @node-click="pickRoleTree"
                    >
                        <template #default="{ node }" >
                            <div class="treeRoleBox">
                                <span><svg-icon v-if="node.data.types == 2" icon-class="zzqz" style="margin-right: 10px;" /><svg-icon v-else icon-class="zhqxgl" style="margin-right: 10px;" />{{ node.label }}</span>
                                <div class="spanButBox">
                                    <el-dropdown trigger="click">
                                       <svg-icon class="roleDropdownIcon" icon-class="xiala1"  style="margin-right: 20px;" />
                                        <template #dropdown>
                                            <el-dropdown-menu>
                                                <el-dropdown-item  v-if="node.data.types == 1">
                                                    <el-text   size="small" @click.stop="editRolePeopel(node.data)">人员</el-text>
                                                </el-dropdown-item>
                                                <el-dropdown-item  v-if="node.disabled">
                                                     <el-text   size="small" @click.stop="editMyInfoIcon(node.data,1)">禁用</el-text>
                                                </el-dropdown-item>
                                                <el-dropdown-item v-else>
                                                    <el-text size="small" @click.stop="editMyInfoIcon(node.data,2)">启用</el-text>
                                                </el-dropdown-item>
                                                <el-dropdown-item>
                                                    <el-text  size="small" @click.stop="editMyInfoIcon(node.data,3)">编辑</el-text>
                                                </el-dropdown-item >
                                                <el-dropdown-item  v-if="node.data.types == 1" divided>
                                                    <el-text   size="small" @click.stop="copyRolePowerInfo(node.data)">复制</el-text>
                                                </el-dropdown-item>
                                                <el-dropdown-item divided>
                                                    <el-text  type="danger" size="small" @click.stop="editMyInfoIcon(node.data,4)">删除</el-text>
                                                </el-dropdown-item>
                                            </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                </div>
                            </div>
                        </template>
                    </el-tree-v2>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="用户" name="person">
                    <div class="searchBox">
                        <el-input v-model="searchUserQuery.name" placeholder="请输入要查找的人" :suffix-icon="Search" clearable @input="onQueryChangedOrgUser" />                                                                         
                    </div>
                    <el-scrollbar class="tab_pane_bodyes" :v-loading="grouTabsLoading">
						<div v-for="item in userPowerList.list" :key="item.id"  :class="item.isPick?'userBox active':'userBox'" @click="pickUser(item)">
							<el-avatar shape="square"  :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
							v-model:current-page="searchUserQuery.page"
                            :page-size="searchUserQuery.pagesize"
                            :pager-count="7"
                            layout="prev, pager, next"
                            :total="userPowerList.total"
							@change="getPowerPageUserSub"
                        />
                    </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="目录/菜单" min-width="300" >
							 <template #default="scope">
                                 <el-checkbox v-model="scope.row.isTrue" label="" @click.stop="pickSystemMenuInfo(scope.row)" />
								<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="" @click.stop="pickSystemMenuInfo(scope.row)" />
                            </template>
                        </el-table-column> -->
						<el-table-column prop="isTrue" label="操作按钮" min-width="380" align="center" >
                            <template #default="scope">

								<template v-for="item in scope.row.buttenPower" :key="item.id" >
									<el-checkbox  v-model="item.isTrue" :label="item.name" :value="item.isTrue"  />
								</template>
                                
                            </template>
                        </el-table-column>
						<el-table-column fixed="right" prop="buttenPower" label="操作按钮" min-width="220"  >
							<template #header>
                                <div class="pickButBox">
                                    <el-text  >数据权限</el-text>
                                    <el-button type="primary" size="small" @click="savePowerUserSub">确定授权</el-button>
                                </div>
                            </template>
							<template #default="scope">
								<el-radio-group
                                    v-model="scope.row.visibleRange.typrs"
                 
                                >	
									<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.typrs == 5"
                                                    v-model="scope.row.visibleRange.val"
                                                    :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>


                    

                    <!--appPowerArt.value = data.data.appList
        appGroupBut.value = data.data.groupButton-->
                </el-tab-pane>
                <el-tab-pane label="应用" name="app">
                    <template #label>
                        <el-text class="tabsTitleCont">应用</el-text>
                    </template>

                    <!--AppTabsPower ref="appTabsPowerPage" :app-type="systemPower.appSystem" :power-type="systemPower.powerType" :role-id="systemPower.roleId" :org-tree="orgTree" /-->

                    <AppTabsPick ref="appTabsPowerPage"  :app-type="systemPower.appSystem" :power-type="systemPower.powerType" :role-id="systemPower.roleId" :org-tree="orgTree"  />


                </el-tab-pane>
            </el-tabs>
        </div>

        <AddRoleGroup v-if="openRoleGroup" v-model:show="openRoleGroup"  :group-info="roleGroupOrInfo" @resthandel="getRoleTree" />
        <SetRolePeople v-model:show="setRolePople" :org="orgTree" :role-info="setRoleManInfo" />
        <EditRoleGroup v-if="openEditRoleGroup" v-model:show="openEditRoleGroup" :group-info="roleGroupOrInfo" :data="editRoleCont" @resthandel="getRoleTree" />
    </div>
</template>
<style  lang='scss' scoped>
.app-content{
    display: flex;
    width: 100%;
    height: calc(100vh - 170px);
    padding: 15px 20px 0 20px;
    justify-content: space-between;
    .roleLeft{
        width: 350px;
        height: calc(100vh - 185px);
        background-color: #FFFFFF;

         

        .butBox{
            display: flex;
            justify-content: space-between;
            padding: 0 10px 10px 10px;
        }
        .searchBox{
            padding: 0 10px 5px 10px;
        }
        .czjzzydq{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .treeBox{
            height: calc(100vh - 330px);
            
        }
        .el-tree{
            --el-color-primary-light-9:#6eb3f8;
            --el-tree-node-hover-bg-color:#a1c7ee;
            --el-tree-node-content-height:43px;
            --el-tree-expand-icon-color:#4c4c4e;
            .el-tree-node__content{
                height: 43px;
            }
        }  
         .el-tree-node__content {
            height: 40px; /* 设置选项高度 */
        }
    }
    .roleright{
        width: calc(100% - 370px);
        height: calc(100vh - 185px);
        background-color: #FFFFFF;
        overflow: hidden;
        :deep .el-tabs__content{
            padding: 15px 15px  15px  15px;
        }
        :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;
        svg{
            display: black;
            margin: 0 5px 0 auto;
        }
        .roleDropdownIcon{
            display: none;
            margin: 0 5px 0 auto;
        }
    }
    .treeRoleBox:hover .roleDropdownIcon{
        display: block;
    }
    
    
}
.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%;
        min-width: 100px;
        td,
        th {
            min-width: 100px;
            // border: 0px solid #cccccc;
            border-bottom: 1px solid #cccccc;
            padding: 5px;
        }
        }
    }
}

.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;
    
}
.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%;
           
            display: flex;
            align-items: center;
            justify-items: space-between;
            padding: 5px 10px;
            border-bottom: 1px dashed rgba($color: #000000, $alpha: 0.2);
			cursor: pointer;
            div{
                span{
                    display: flex;
                    width: 100%;
                    padding: 0 5px;
                    color:rgba($color: #000000, $alpha: 0.6);
                }
            }
}
.userBox.active {
    background-color: #a0cfff;
}
.tableScrollbar{
    width: 100%;
    height: calc(100vh - 260px);
    overflow: hidden;
    overflow-y: auto;
}

</style>
