<!--
@ 作者: 秦东
@ 时间: 2025-10-21 10:06:51
@ 备注: 在线人数
-->
<script lang='ts' setup>
import { giveRoleTree,editRoleStatus,getOrgPostTree } from '@/api/role/index'
import type {RoleListTree,RoleFormInfo,orgAndPostisListTree} from '@/api/role/types'
import type {  TreeNode,TreeInstance  } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { orgInfo } from "@/api/hr/org/type";
import { getOrgTreeList } from "@/api/hr/org/index";
import { appPowerUnit } from "@/api/system/roleapi/power";
import type { getSystemPower,AppPowerTree } from "@/api/system/roleapi/types";
import { appTableBut, appListBut } from "@/utils/workflow/const";
import {
  gainAppList,
  gainAppTableListNew,
  getMyPeoplceAndSunOrg,
  getMyPeopleAndSunOrgPost,
  getPowerPageUser
} from "@/api/system/roleapi/postrole";
import {
  custerAppInfo
} from "@/api/system/roleapi/types";
import type { LoadFunction } from 'element-plus'



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 orgTree = ref<orgInfo[]>([])
const roleGroupOrInfo = ref(1)
const searchQuery = ref('')
const orgWorkRole = ref("org")
const appSysPick = ref("system")
const treeRef = ref<TreeInstance>()
const treeRefOrg = ref<TreeInstance>()
const roleListdata = ref<RoleListTree[]>([])
const orgPostisListdata = ref<orgAndPostisListTree[]>([])
const treeBoxHeight = ref(300)
const treeBoxHeightOrg = ref(300)
const roleLeft = ref()
const systemPowerTree = ref<AppPowerTree[]>([])
const ownerPeople = ref<any>([])

const props = {
  value: 'id',
  label: 'label',
  disabled:'status',
  children: 'children',
}
const propsOrg = {
  value: 'id',
  label: 'name',
  disabled:'status',
  children: 'child',
}
const propsOrgPost = {
  value: 'id',
  label: 'label',
  disabled:'status',
  children: 'children',
}
const searchUser =  reactive({
    page:1,
    pageSize:19,
    name:"",
    total:0,
});
const systemPower = ref<getSystemPower>({
    powerType:"org",
    appType:"appsystem",
    appSystem:"system",
    roleId:"",
})
const roleLoading = ref(false)
const openRoleGroup = ref(false)
const orgLoading = ref(false)
const orgPostLoading = ref(false)

const appList = ref<custerAppInfo[]>([]);
//搜索角色
const onQueryChanged = (query: string) => {
  treeRef.value!.filter(query)
}
//搜索行政组织
const onQueryChangedOrg = (query: string) => {
//   treeRefOrg.value!.filter(query)
    searchUser.page = 1
    searchUser.total = 0
    fpickUserTabs()
}
const filterMethod = (query: string, node: any) => node.label!.includes(query)
const filterMethodOrg = (query: string, node: any) => node.name!.includes(query)

//监测赋权组
watch(()=>systemPower.value.powerType,(val:string)=>{
    console.log("监测赋权组",val)
    getSystemPowerSub();
    switch(val){
        case "org":
            getOrgTreeAry();
            break;
        case "job":
            getOrgPostisTree()
            break;
        case "role":
            getRoleTree();
            break;
        case "person":
            fpickUserTabs();
            break;
        default:
    }

    if(systemPower.value.appSystem=="app"){
        getAppList();
    }else{
        getSystemPowerSub();
    }
    
},{
    deep:true
})
//选中角色节点
const pickRoleTree = (data:any) => {
    if(data.status && data.types==1){
        console.log("监测赋权组------->",data)
    }
}
//选择行政组织
const pickOrgTree = (data:any) => {
    console.log("监测赋权组------->",data)
}
//获取角色树
const getRoleTree = () => {
    roleLoading.value = true
    giveRoleTree().then(({data})=>{
        console.log("监测赋权组------->",data)
        if(Array.isArray(data) && data.length>0){
            systemPower.value.roleId=data[0].id
        }
        roleListdata.value=data;
        roleLoading.value = false;
    }).finally(()=>{roleLoading.value = false})
}
const editRoleCont = ref<RoleFormInfo>()
const openEditRoleGroup = ref(false)
//编辑角色信息
const editMyInfoIcon = (data:RoleListTree,types:number) => {
    console.log("编辑角色信息------->",data)
    console.log("编辑角色信息---types---->",types)
    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)
    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',
                    })
                }
            })
}
//添加角色组
const addRoleGroup = (types:number) => {
    
    roleGroupOrInfo.value = types
    openRoleGroup.value = true     
}
//获取行政组织树
const getOrgTreeAry = () => {
    roleLoading.value = true
    if(!Array.isArray(orgTree.value) || orgTree.value.length<=0){
        
        getOrgTreeList({ orgid: 0 })
        .then(({ data }) => {
            if(Array.isArray(data) && data.length>0){
                systemPower.value.roleId=data[0].id
            }
            orgTree.value = data
            roleLoading.value = false
        }).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
            }
            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 activeAppId = ref<string>("");
const appTableList = ref<custerAppTablePower[]>([]);
/**
@ 作者: 秦东
@ 时间: 2025-05-13 14:20:47
@ 功能: 获取自定义App
*/
const getAppList = () => {
  gainAppList().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;
        getAppTableList();
      }
    }
    console.log("获取自定义App", activeAppId.value);
  });
};
/**
@ 作者: 秦东
@ 时间: 2025-05-13 16:00:19
@ 功能: 获取对应App下边的表单
*/
const getAppTableList = () => {
    systemPower.value.roleId = activeAppId.value
  gainAppTableListNew({id:activeAppId.value,appType:systemPower.value.appType,powerType:systemPower.value.powerType,roleId:systemPower.value.roleId}).then(
    (data: any) => {
      console.log("获取对应App下边的表单", data);
      if (Array.isArray(data.data)) {
        appTableList.value = data.data;
      } else {
        appTableList.value = [];
      }
    }
  );
};
watch(()=>systemPower.value.appSystem,(val:string)=>{
    if(val=="app"){
        getAppList();
    }
},{
    immediate:true
})
onMounted(()=>{
    // getOrgTreeAry();
    getSystemPowerSub();
    console.log("高度-----1---->",roleLeft.value?.offsetHeight)
    nextTick(()=>{
        treeBoxHeight.value = roleLeft.value?.offsetHeight - 140
        treeBoxHeightOrg.value = roleLeft.value?.offsetHeight - 100
    })
    
})
watch(
  () => activeAppId.value,
  (val) => {
    getAppTableList();
  },
  {
    immediate:true
  }
);
/**
@ 作者: 秦东
@ 时间: 2025-05-14 15:01:26
@ 功能: 选择App数据
*/
const pickAppList = (val: custerAppInfo) => {
  activeAppId.value = val.signCode;
};
const systemMenuTreePropsing = {
  children: "child",
  label: "name",
  value: "id",
};
interface Tree {
  name: string
  leaf?: boolean
}

const propsLoading = {
  label: 'name',
  children: 'zones',
  isLeaf: 'isLeaf',
}
const loadNode: LoadFunction<Tree> = (node, resolve, reject) => {
    console.log("node============>",node)
     console.log("resolve===>",resolve)
  if (node.level === 0) {
    getMyPeoplceAndSunOrg({id:"313",level:node.level}).then((res) => {
        console.log("res================>",res)
        resolve(res.data)
    })
  } 

  if (node.level > 0){
    getMyPeoplceAndSunOrg({id:node.data.id.toString(),level:1}).then((res) => {
        console.log("res=========1=======>",res.data) 
        if(res.data && Array.isArray(res.data) && res.data.length > 0){
            resolve(res.data)
        }else{
            resolve([])
        }
    }).catch(() => {
        return reject()
    })
  }
}

const loadNodePost: LoadFunction<Tree> = (node, resolve, reject) => {
    console.log("node============>",node)
     console.log("resolve===>",resolve)
  if (node.level === 0) {
    getMyPeopleAndSunOrgPost({id:"313",level:node.level,types:node.data.types}).then((res) => {
        console.log("res================>",res)
        resolve(res.data)
    })
  } 

  if (node.level > 0){
    getMyPeopleAndSunOrgPost({id:node.data.id.toString(),level:1,types:node.data.types}).then((res) => {
        console.log("res=========1=======>",res.data) 
        if(res.data && Array.isArray(res.data) && res.data.length > 0){
            resolve(res.data)
        }else{
            resolve([])
        }
    }).catch(() => {
        return reject()
    })
  }
}
//获取人员信息
const fpickUserTabs = () => {
    getPowerPageUser(searchUser).then((res) => {
        console.log("res================>",res)
        ownerPeople.value = res.data.list
        searchUser.total = res.data.total
    })
}
//分页
const pageCurrentChange = (val:number) => {
    searchUser.page = val
    fpickUserTabs()
}
</script>
<template>
    <div class="roleBox">
        <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>
                    <el-scrollbar class="tab_pane_bodyLoading">
                        <el-tree
                            ref="treeRefOrg"
                            style="max-width: 350px;"
                            :props="propsLoading"
                            :load="loadNode"
                            :highlight-current="true"
                            :expand-on-click-node="false"
                            :filter-method="filterMethodOrg"
                            :height="treeBoxHeightOrg"
                            node-key="id"
                            lazy
                            show-checkbox
                            @node-click="pickOrgTree"
                        />                                                              
                    </el-scrollbar>
                </el-tab-pane>
                <el-tab-pane label="岗位" name="job">
                    <template #label>
                        <el-text class="tabsTitle">岗位</el-text>
                    </template>
                    <el-scrollbar class="tab_pane_bodyLoading">
                        <el-tree
                            ref="treeRefOrg"
                            style="max-width: 350px;"
                            :props="propsLoading"
                            :load="loadNodePost"
                            :highlight-current="true"
                            :expand-on-click-node="false"
                            :filter-method="filterMethodOrg"
                            :height="treeBoxHeightOrg"
                            node-key="id"
                            lazy
                            show-checkbox
                            @node-click="pickOrgTree"
                        />                                                              
                    </el-scrollbar>
                    
                </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"
                        :highlight-current="true"
                        :check-on-click-node="true"
                        :expand-on-click-node="false"
                        @node-click="pickRoleTree"
                    >
                        <template #default="{ node }" >
                            <div class="treeRoleBox">
                                <span>{{ node.label }}</span>
                                <div class="spanButBox">
                                    <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="searchUser.name" placeholder="请输入要查找的人" :suffix-icon="Search" @input="onQueryChangedOrg"/>
                    </div>
                    <el-scrollbar class="tab_pane_bodyes">
                        <div class="userBox" v-for="item in ownerPeople" :key="item.id">
                            <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
                            :page-size="searchUser.pageSize"
                            
                            :pager-count="7"
                            layout="prev, pager, next"
                            :total="searchUser.total"
                            @current-change="pageCurrentChange"
                        />
                    </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=""  />
                                    </template>
                                </el-table-column>
                                <el-table-column prop="buttenPower" label="操作按钮" min-width="380"  >
                                    <template #header>
                                        <div class="pickButBox">
                                            <el-text  >操作按钮</el-text>
                                            <el-button type="primary" size="small">确定授权</el-button>
                                        </div>
                                    </template>
                                    <template #default="scope">
                                        <el-checkbox v-for="item in scope.row.buttenPower" :key="item" v-model="scope.row.isTrue" :label="item.name"  />
                                    </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  v-if="systemPower.powerType == 'role'">
                                <td align="center" width="20%">应用</td>
                                <td align="center" width="50%">应用详情</td>
                            </tr>
                            <tr v-else>
                                <td align="center" width="20%">应用</td>
                                <td width="80%">
                                    <div  class="appPickPower">
                                        应用详情
                                        <el-button type="primary" size="small">确定授权</el-button>
                                    </div>
                                </td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr >
                                <td valign="top">
                                    <el-scrollbar class="tab_pane_box">
                                        <ul class="appListBox">
                                            <li v-for="item in appList" :key="item"  @click="pickAppList(item)">{{ item.name }}</li>
                                        </ul>
                                    </el-scrollbar>
                                </td>
                                <td valign="top">
                                    <el-row class="row_head">
                                        <el-col class="roe_col_head left_line" :span="6">
                                                页面
                                        </el-col>
                                        <el-col class="roe_col_head left_line" :span="6">
                                            表单权力
                                        </el-col>
                                        <el-col class="roe_col_head left_line" :span="6">
                                            列表权限
                                        </el-col>
                                        <el-col class="roe_col_head" :span="6">
                                            数据权限
                                        </el-col>
                                    </el-row>
                                    <el-scrollbar 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="6">
                                                {{ item.name }}
                                            </el-col>
                                            <el-col  class="roe_col_head left_line" :span="6">
                                                
                                                <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="6">
                                              
                                               <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="6">
                                                
                                                 <el-radio-group
                                                        v-model="item.datePower.types"
                                                        @change="pickAppDataPower(item.datePower)"
                                                    >
                                                        <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>
.roleBox{
    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  0px;
        }
        :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;
}
.tab_pane_bodyLoading {
  height: calc(100vh - 250px);
  overflow: hidden;
  overflow-y: auto;
}
.appPickPower{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.userBox{
            width: 100%;
            min-height: 50px;
            display: flex;
            align-items: center;
            justify-items: space-between;
            padding: 0 10px;
            border-bottom: 1px dashed rgba($color: #000000, $alpha: 0.2);
            div{
                span{
                    display: flex;
                    width: 100%;
                    padding: 0 5px;
                    color:rgba($color: #000000, $alpha: 0.6);
                }
            }
}
</style>
