229 lines
7.2 KiB
Vue
229 lines
7.2 KiB
Vue
<script lang="ts" setup>
|
|
import Header from './header.vue'
|
|
// import { findApplicationById } from "@/api/application/application";
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { computed,reactive, ref, shallowRef, nextTick, watch, onMounted } from 'vue'
|
|
import Organization from '@/views/system/permissionset/organization/index.vue'
|
|
import Role from '@/views/system/permissionset/role/index.vue'
|
|
import User from '@/views/system/permissionset/user/index.vue'
|
|
const projectInfo:any =ref({})
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const applicationId:any =ref("")
|
|
const curmenu = ref('')
|
|
onMounted(() => {
|
|
if (route.query.id) {
|
|
applicationId.value = route.query.id
|
|
curmenu.value = '组织机构配置'
|
|
// findApplicationById(applicationId.value).then(res => {
|
|
// res.data.data.typename = '权限设置'
|
|
// projectInfo.value = res.data.data
|
|
// })
|
|
}else{
|
|
|
|
}
|
|
})
|
|
function menuclick(name){
|
|
curmenu.value = name
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<Header v-if="!route.query.name" :projectInfo="projectInfo"/>
|
|
<div class="permission-box">
|
|
<div class="permission-leftbox">
|
|
<div class="permission-leftbox-menu" :class="curmenu == '组织机构配置' ? 'permission-leftbox-menu-active' : ''" @click="menuclick('组织机构配置')">组织机构配置</div>
|
|
<div class="permission-leftbox-menu" :class="curmenu == '系统角色配置' ? 'permission-leftbox-menu-active' : ''" @click="menuclick('系统角色配置')">系统角色配置</div>
|
|
<div class="permission-leftbox-menu" :class="curmenu == '系统用户配置' ? 'permission-leftbox-menu-active' : ''" @click="menuclick('系统用户配置')">系统用户配置</div>
|
|
</div>
|
|
<div class="permission-rightbox">
|
|
<Organization v-if="curmenu == '组织机构配置'" :applicationId="applicationId" />
|
|
<Role v-if="curmenu == '系统角色配置'" :applicationId="applicationId" />
|
|
<User v-if="curmenu == '系统用户配置'" :applicationId="applicationId" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.permission-box{
|
|
background: #E3E8F0;
|
|
height: calc(100vh - 60px);
|
|
display: flex;
|
|
.permission-leftbox{
|
|
width: 260px;
|
|
height: 100%;
|
|
// border-right: 1px solid #4f5052;
|
|
// box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
|
|
background: #fff;
|
|
padding-top: 10px;
|
|
.permission-leftbox-menu{
|
|
width: 100%;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
color: #505050;
|
|
font-size: 14px;
|
|
padding-left: 35px;
|
|
cursor: pointer;
|
|
}
|
|
.permission-leftbox-menu:hover{
|
|
color: #0099ff;
|
|
}
|
|
.permission-leftbox-menu-active{
|
|
background: rgba(64, 158, 255,0.1);
|
|
color: #0099ff;
|
|
}
|
|
}
|
|
.permission-rightbox{
|
|
width: calc(100% - 260px);
|
|
height: 100%;
|
|
padding: 13px;
|
|
}
|
|
}
|
|
:deep(.el-tree){
|
|
background:#ffffff;
|
|
height: calc(100vh - 210px);
|
|
overflow: auto;
|
|
color: #505050;
|
|
font-size: 14px;
|
|
}
|
|
:deep(.el-tree-node__content){
|
|
height: 40px;
|
|
line-height: 40px;
|
|
}
|
|
:deep(.el-tree-node__content:hover){
|
|
background:#ffffff;
|
|
color: #409eff;
|
|
}
|
|
:deep(.custom-tree-node){
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 14px;
|
|
padding-right: 8px;
|
|
}
|
|
:deep(.el-tree-node__content>.ed-tree-node__expand-icon){
|
|
padding: 2px;
|
|
}
|
|
:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content){
|
|
background: rgba(64, 158, 255,0.1);
|
|
color: #409eff;
|
|
}
|
|
:deep(.el-tree-node:focus>.el-tree-node__content){
|
|
background:#ffffff;
|
|
color: #409eff;
|
|
}
|
|
:deep(.ed-input__wrapper){
|
|
background: #ffffff;
|
|
border: 1px solid #dcdfe6;
|
|
box-shadow: none;
|
|
}
|
|
:deep(.ed-input__inner){
|
|
color: #383838;
|
|
}
|
|
:deep(.ed-button){
|
|
border-color: #dcdfe6;
|
|
}
|
|
:deep(.ed-button--primary){
|
|
background-color:#409eff;
|
|
color: #ffffff;
|
|
border-color: #409eff;
|
|
}
|
|
:deep(.ed-button.is-disabled){
|
|
background: #ffffff;
|
|
color:#C9C9C9;
|
|
border-color: #f2f2f2;
|
|
}
|
|
:deep(.ed-button.is-disabled, .ed-button.is-disabled:focus, .ed-button.is-disabled:hover){
|
|
background: #ffffff;
|
|
color:#C9C9C9;
|
|
border-color: #f2f2f2;
|
|
}
|
|
:deep(.el-table){
|
|
background-color: #ffffff;
|
|
}
|
|
:deep(.el-table th.el-table__cell){
|
|
background-color: #fafafa;
|
|
border-color: #f0f1f2;
|
|
color: #787878 ;
|
|
}
|
|
:deep(.el-table tr){
|
|
background-color: #ffffff;
|
|
border-color: #f0f1f2;
|
|
}
|
|
:deep(.el-table--border .el-table__inner-wrapper:after, .el-table--border:after, .el-table--border:before, .el-table__inner-wrapper:before){
|
|
background-color: #f0f1f2;
|
|
}
|
|
:deep(.el-table__border-bottom-patch, .el-table__border-left-patch){
|
|
background-color: #f0f1f2;
|
|
}
|
|
:deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf){
|
|
border-color: #f0f1f2;
|
|
}
|
|
:deep(.el-table .el-table__cell){
|
|
background: #ffffff;
|
|
color: #787878;
|
|
}
|
|
:deep(.el-table__body-wrapper tr td.el-table-fixed-column--left, .el-table__body-wrapper tr td.el-table-fixed-column--right, .el-table__body-wrapper tr th.el-table-fixed-column--left, .el-table__body-wrapper tr th.el-table-fixed-column--right, .el-table__footer-wrapper tr td.el-table-fixed-column--left, .el-table__footer-wrapper tr td.el-table-fixed-column--right, .el-table__footer-wrapper tr th.el-table-fixed-column--left, .el-table__footer-wrapper tr th.el-table-fixed-column--right, .el-table__header-wrapper tr td.el-table-fixed-column--left, .el-table__header-wrapper tr td.el-table-fixed-column--right, .el-table__header-wrapper tr th.el-table-fixed-column--left, .el-table__header-wrapper tr th.el-table-fixed-column--right){
|
|
background-color: #ffffff;
|
|
}
|
|
:deep(.hover-row > td){
|
|
background: rgb(247,251,255) !important;
|
|
}
|
|
:deep(.ed-checkbox__input.is-checked .ed-checkbox__inner) {
|
|
background-color: #409eff;
|
|
border-color: #409eff;
|
|
}
|
|
:deep(.ed-switch.is-checked .ed-switch__core){
|
|
border-color: #409eff;
|
|
background-color: #409eff;
|
|
}
|
|
:deep(.ed-checkbox__input.is-indeterminate .ed-checkbox__inner){
|
|
border-color: #409eff;
|
|
background-color: #409eff;
|
|
}
|
|
:deep(.ed-input.is-disabled .ed-input__wrapper){
|
|
box-shadow: none;
|
|
}
|
|
:deep(.ed-textarea__inner){
|
|
border: 1px solid #dcdfe6;
|
|
box-shadow: none;
|
|
}
|
|
:deep(.ed-select .ed-input.is-focus .ed-input__wrapper){
|
|
box-shadow: none !important;
|
|
}
|
|
:deep(.ed-select:hover:not(.ed-select--disabled) .ed-input__wrapper){
|
|
box-shadow: none !important;
|
|
}
|
|
:deep(.ed-select .ed-input__wrapper.is-focus){
|
|
box-shadow: none !important;
|
|
}
|
|
:deep(.ed-dialog__header){
|
|
padding: 13px 20px;
|
|
border-bottom: 1px solid #f2f2f2;
|
|
margin-right: 0px;
|
|
background-color: #f8f8f8;
|
|
}
|
|
:deep(.ed-dialog__headerbtn){
|
|
color: #323232;
|
|
top: 11px !important;
|
|
right: 15px !important;
|
|
}
|
|
:deep(.ed-dialog__title){
|
|
color: #323232;
|
|
}
|
|
:deep(.ed-form-item.is-error .ed-input__wrapper){
|
|
box-shadow:none;
|
|
border: 1px solid #f54a45;
|
|
}
|
|
:deep(.ed-pagination__total){
|
|
color: #1f2329 !important;
|
|
}
|
|
:deep(.ed-checkbox__inner){
|
|
background-color: #ffffff !important;
|
|
border:1px solid #bbbfc4 !important;
|
|
}
|
|
</style>
|