<!--
@ 作者: 秦东
@ 时间: 2025-11-17 08:08:01
@ 备注: 
-->
<script lang='ts' setup>
import { giveRoleTree,getOrgPostTree } from '@/api/role/index'
import type {  TreeInstance  } from 'element-plus'
import type {RoleListTree,RoleFormInfo,orgAndPostisListTree} from '@/api/role/types'
import { getOrgTreeList } from "@/api/hr/org/index";
import { appPowerUnit } from "@/api/system/roleapi/power";
import type { getSystemPower,AppPowerTree,systemList,custerAppInfo } from "@/api/system/roleapi/types";
import { gainAppList,gainAppTableListNew,getPowerPageUser,systemAppAuthorization,gainAppEmpowerPower } from "@/api/system/roleapi/postrole";
import { appTableBut, appListBut,appDetailBut,formBaseBut,appGroupBut } from "@/utils/workflow/const";
import { Search } from '@element-plus/icons-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'
const squareUrl = ref<string>(
  "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
);

const roleGroupOrInfo = ref(1)
const orgTree = ref<orgInfo[]>([])			//行政组织树
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 appSystemConfig = ref<any[]>([])
const appFormButConfig = ref<any[]>([])
const props = {
  value: 'id',
  label: 'label',
  disabled:'status',
  children: 'children',
}
//获取系统权限控制项
const systemPower = ref<getSystemPower>({
    powerType:"org",
    appId:"",
    appSystem:"system",
    roleId:"",
	isPick:false,
})
//行政组织树字段约束
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 getOrgTreeAry = () => {
    roleLoading.value = true
    if(!Array.isArray(orgTree.value) || orgTree.value.length<=0){
        
        getOrgTreeList({ orgid: 0 })
        .then(({ data }) => {
			console.log("获取行政组织树------->",data)
            if(Array.isArray(data) && data.length>0){
                systemPower.value.roleId=data[0].id.toString()
                console.log("获取行政组织树------->",systemPower.value)
            }
            orgTree.value = data
            roleLoading.value = false
            getSystemPowerSub();
        }).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 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();
	}
	
}
//监测赋权组
watch(()=>systemPower.value.powerType,(val:string)=>{
    console.log("监测赋权组",val)
	systemPower.value.appId=""
	systemPower.value.appSystem="system"
	systemPower.value.roleId=""
    switch(val){
        case "org":
            getOrgTreeAry();
			
            break;
        case "job":
            getOrgPostisTree()
            break;
        case "role":
            getRoleTree();
            break;
		case "person":
            getPowerPageUserSub()
            break;
        default:
    }

    if(systemPower.value.appSystem=="app"){
        getAppList();
    }else{
        getSystemPowerSub();
    }
    
},{
    deep:true
})
//添加角色组
const addRoleGroup = (types:number) => {
    
    roleGroupOrInfo.value = types
    openRoleGroup.value = true     
}
//搜索角色
const onQueryChanged = (query: string) => {
  treeRef.value!.filter(query)
}
//获取角色树
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 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();
    }
}
//编辑角色信息
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;
    }
}
//编辑角色状态
const editRoleStatusBut = (id:string|number,types:number) => {
    // console.log("编辑角色状态--->",id)
     ({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 getPowerPageUserSub = () => {
	console.log("获取平台授权项目用户---searchUserQuery---->",searchUserQuery)
    getPowerPageUser(searchUserQuery).then(({data})=>{
        console.log("获取平台授权项目用户------->",data)
		userPowerList.value = data
    })
}
//查询
const onQueryChangedOrgUser = (query: string) => {
	console.log("获取平台授权项目用户---查询--->",query)
	searchUserQuery.page=1
    searchUserQuery.name = query
    getPowerPageUserSub()
}
/**
@ 作者: 秦东
@ 时间: 2025-05-13 14:20:47
@ 功能: 获取自定义App
*/
const getAppList = () => {

  gainAppList({appType:systemPower.value.appSystem,powerType:systemPower.value.powerType,roleId:systemPower.value.roleId}).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;
        nextTick(()=>{
            getAppTableList(false);
        })
      }
    }
    console.log("获取自定义App", activeAppId.value);
  });
};
/**
@ 作者: 秦东
@ 时间: 2025-05-13 16:00:19
@ 功能: 获取对应App下边的表单
*/
const getAppTableList = (number:boolean) => {
	myAppTableLoad.value = true
	console.log("获取对应App下边的表单---number---->",number,activeAppId.value)
	if(activeAppId.value){
		systemPower.value.appId = activeAppId.value.toString()

        gainAppEmpowerPower({id:activeAppId.value,appType:systemPower.value.appSystem,powerType:systemPower.value.powerType,roleId:systemPower.value.roleId}).then(
			(data: any) => {
				console.log("获取对应App下边的表单", data);
                appSystemConfig.value = data.data.groupButPower;
                appFormButConfig.value = data.data.formButPower
				if (Array.isArray(data.data.list)) {
					if(number){
						data.data.forEach((item:any)=>{
							item.tableIsAll = true
							item.tablePower = [ "zc", "tj", "dy", "sc", "fz"]
							item.listPower = [  "xz", "dr", "dc", "sc", "dy", "dyewm"]
						})
					}
					appTableList.value = data.data.list;
                    
				} else {
					appTableList.value = [];
                    
				}
				myAppTableLoad.value = false
			}
		);

		// gainAppTableListNew({id:activeAppId.value,appType:systemPower.value.appSystem,powerType:systemPower.value.powerType,roleId:systemPower.value.roleId}).then(
		// 	(data: any) => {
		// 		console.log("获取对应App下边的表单", data);
        //         appSystemConfig.value = data.data.groupButPower;
        //         appFormButConfig.value = data.data.formButPower
		// 		if (Array.isArray(data.data.list)) {
		// 			if(number){
		// 				data.data.forEach((item:any)=>{
		// 					item.tableIsAll = true
		// 					item.tablePower = [ "zc", "tj", "dy", "sc", "fz"]
		// 					item.listPower = [  "xz", "dr", "dc", "sc", "dy", "dyewm"]
		// 				})
		// 			}
		// 			appTableList.value = data.data.list;
                    
		// 		} else {
		// 			appTableList.value = [];
                    
		// 		}
		// 		myAppTableLoad.value = false
		// 	}
		// );
	}else{
		myAppTableLoad.value = false
	}
    
};
watch(()=>systemPower.value.appSystem,(val:string)=>{
    if(val=="app"){
        getAppList();
    }else{
        getSystemPowerSub()
    }
	systemPower.value.isPick = false
},{
    immediate:true
})
const pickAppList = (val: custerAppInfo) => {
	activeAppId.value = val.signCode
	// systemPower.value.roleId = val.id
	// appTableList.value = []
	systemPower.value.isPick = val.pickAll
	console.log("选择应用---111111->",val)
	getAppTableList(val.pickAll);
	// let cureePick =!val.isPick
	// val.isPick = cureePick
  	// activeAppId.value = val.signCode;
	val.isPick = !val.isPick
	if(appList.value && Array.isArray(appList.value)){
		appList.value.forEach((item:custerAppInfo)=>{
			if(val.signCode!=item.signCode){
				item.isPick = false
			}
			// item.isPick = false
		})
	}
	
};
const pickAppTableList = (val: custerAppInfo) =>{
	console.log("选择应用-22222--111111->",val.isPick,val,appTableList.value)
	systemPower.value.isPick = !val.pickAll
	if(val.isPick){
        
		appTableList.value.forEach((item:any)=>{
			// console.log("选择应用-22222--333333->",val.isPick)
			item.tableIsAll = !val.pickAll
			if(!val.pickAll){
				item.listIsAll = true
				item.tablePower = [ "zc", "tj", "dy", "sc", "fz"]
				item.listPower = [  "xz", "dr", "dc", "sc", "dy", "dyewm"]
                item.tablePagePower = ['lc', 'lb', 'sj', 'dy', 'nc']
			}else{
				item.listIsAll = false
				item.tablePower = []
				item.listPower = []
                item.tablePagePower = []
			}
		})
	}else{
        appFormButConfig.value = []
    }
	if(!val.pickAll){
        console.log("选择应用-22222--333333->",val.pickAll)
        appFormButConfig.value = ["bjapp","scapp","xzfg","scfg","yzfg","xz","bj","sc","yz","jczdh","yysz","yyfb"]
    }else{
        console.log("选择应用-22222--44444->",val.pickAll)
        appFormButConfig.value = []
    }

     console.log("选择应用-22222--5555555->",appFormButConfig.value)
}
//选择应用-22222--333333->
const pickOneAppTableList = (item: any) =>{
	console.log("选择应用-22222--333333->",item.listIsAll,item)
	// item.listIsAll = !item.listIsAll
	if(!item.listIsAll){
			item.tablePower = [ "zc", "tj", "dy", "sc", "fz"]
			item.listPower = [  "xz", "dr", "dc", "sc", "dy", "dyewm"]
            item.tablePagePower = ['lc', 'lb', 'sj', 'dy', 'nc']
	}else{
			item.tablePower = []
			item.listPower = []
            item.tablePagePower = []
	}
	
}
//监听莹莹binh
// watch(
//   () => activeAppId.value,
//   (val) => {
//     getAppTableList(2);
//   },
//   {
//     immediate:true
//   }
// );
/**
@ 作者: 秦东
@ 时间: 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)=>{
		console.log("提交应用授权-data--3---->",data)
        if(data.code==0){
            ElMessage({
				message: "提交成功",
				type: "success",
			})
        }else{
            ElMessage({
				message: "提交失败",
				type: "error",
			})
        }
	})
}
/**
@ 作者: 秦东
@ 时间: 2025-11-18 09:15:12
@ 功能: 提交自定义应用内授权
*/
const savePowerAppSub = () => {
    console.log("提交应用授权--app-1---->",systemPower.value)
	console.log("提交应用授权--app-2---->",appTableList.value)
    console.log("提交应用授权--app-3---appSystemConfig->",appSystemConfig.value)
    console.log("提交应用授权--app-3---appFormButConfig->",appFormButConfig.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,
        appSystemConfig:appSystemConfig.value,
        appFormButConfig:appFormButConfig.value,
	}
	console.log("提交应用授权--app-3---->",sendInfo)
	systemAppAuthorization(sendInfo).then((data)=>{
		console.log("提交应用授权--data---app-3---->",data)
        if(data.code==0){
            ElMessage({
				message: "提交成功",
				type: "success",
			})
        }else{
            ElMessage({
				message: "提交失败",
				type: "error",
			})
        }
	})
}
/**
@ 作者: 秦东
@ 时间: 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-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-26 10:09:42
@ 功能: 编辑角色人员
*/
const setRolePople  = ref(false)
const setRoleManInfo = ref<RoleListTree>()
const editRolePeopel = (item:RoleListTree) =>{
	console.log("编辑角色人员--111111->",item)
    setRoleManInfo.value = item
    setRolePople.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><SetRolePeople v-model:show="setRolePople" :org="orgTree" :role-info="setRoleManInfo" />
	<div class="app-content">
		<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="onQuedOrg"/>
                    </div>
                    <el-tree-v2
                        ref="treeRefOrgPost"
                        style="max-width: 350px;"
                        :data="orgPostisListdata"
                        :props="propsOrgPost"
                        :filter-method="filterMethod"
                        :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"
                        @node-click="pickRoleTree"
                    >
                        <template #default="{ node }" >
                            <div class="treeRoleBox">
                                <span>{{ node.label }}</span>
                                <div class="spanButBox">
                                    <el-text v-if="node.data.types == 1" type="danger" size="small" @click.stop="editRolePeopel(node.data)">人员</el-text>
                                    <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="searchUserQuery.name" placeholder="请输入要查找的人" :suffix-icon="Search" @input="onQueryChangedOrgUser" clearable />                                                                         
                    </div>
					<el-scrollbar class="tab_pane_bodyes">
						<div v-for="item in userPowerList.list" :key="item.id"  :class="item.isPick?'userBox active':'userBox'" @click="pickUser(item)">
							<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
							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="目录/菜单" 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="" @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>
				</el-tab-pane>
				<el-tab-pane label="应用" name="app">
					<template #label>
                        <el-text class="tabsTitleCont">应用</el-text>
                    </template>
					<table class="table_body">
						<thead>
							
							<tr >
                                <td align="center" width="10%">应用分组</td>
                                <td align="center" width="20%">应用</td>
                                <td align="center" width="10%">操作按钮</td>
                                <td width="60%">
                                    <div  class="appPickPower">
                                        应用详情
                                        <el-button type="primary" size="small" @click="savePowerAppSub">确定授权</el-button>
                                    </div>
                                </td>
                            </tr>
						</thead>
						<tbody>
							<tr >
                                <td valign="top">
                                    <el-checkbox-group v-model="appSystemConfig">
                                        <el-checkbox
                                            v-for="city in appGroupBut"
                                            :key="city.key"
                                            :label="city.label"
                                            :value="city.value"
                                        >
                                            {{ city.label }}
                                        </el-checkbox>
                                    </el-checkbox-group>
                                </td>
								<td valign="top">
                                    <el-scrollbar class="tab_pane_box">
                                        <ul class="appListBox">
                                            <li v-for="item in appList" :key="item"  @click="pickAppList(item)" :class="{'active':item.isPick}">
												<el-checkbox @click.stop="pickAppTableList(item)" v-model="item.pickAll"  :value="item.pickAll" :disabled="!item.isPick" ></el-checkbox>
												{{ item.name }}
											</li>
                                        </ul>
                                    </el-scrollbar>
                                </td>
                                <td valign="top">
                                    <el-checkbox-group v-model="appFormButConfig">
                                        <el-checkbox
                                            v-for="city in appDetailBut"
                                            :key="city.key"
                                            :label="city.label"
                                            :value="city.value"
                                        >
                                            {{ city.label }}
                                        </el-checkbox>
                                    </el-checkbox-group>
                                </td>
								 <td valign="top">
									<el-row class="row_head">
                                        <el-col class="roe_col_head left_line" :span="5">
                                            页面
                                        </el-col>
                                        <el-col class="roe_col_head left_line" :span="5">
                                            页面权力
                                        </el-col>
                                        <el-col class="roe_col_head left_line" :span="4">
                                            表单权力
                                        </el-col>
                                        <el-col class="roe_col_head left_line" :span="5">
                                            列表权限
                                        </el-col>
                                        <el-col class="roe_col_head" :span="5">
                                            数据权限
                                        </el-col>
                                    </el-row>
									<el-scrollbar v-loading="myAppTableLoad" 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="5">
												<el-checkbox  @click.stop="pickOneAppTableList(item)" v-model="item.listIsAll"  :value="item.listIsAll"></el-checkbox>
                                                {{ item.name }}
                                            </el-col>
                                            <el-col  class="roe_col_head left_line" :span="5">
                                                <el-checkbox-group v-model="item.tablePagePower">
                                                    <el-checkbox
                                                    v-for="city in formBaseBut"
                                                    :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="4">
												<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="5">
												<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="5">
												<el-radio-group
                                                    v-model="item.datePower.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="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>
.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;
        }
        .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  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;
    }
    .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%;
           
            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;
  }
</style>
