修改菜单

This commit is contained in:
jingna 2025-05-23 18:33:18 +08:00
parent fd0d80634b
commit 9fdffd83da
15 changed files with 916 additions and 86 deletions

View File

@ -1,8 +1,7 @@
import request from '@/config/axios'
export const getMenuTree = params => request.post({ url: '/menuInterface/getMenuTree', params }) // 查询用户
export const addMenu = data => request.post({ url: '/menuInterface/addMenu', data }) // 新增用户
export const updateMenuById = data => request.post({ url: '/menuInterface/updateMenuById', data }) //修改用户
export const deleteMenuById = id => request.post({ url: '/menuInterface/deleteMenuById?id=' + id }) //删除
// export const setStatus = params => request.post({ url: '/user/setStatus', params }) //设置有效状态
// export const resetPassword = id => request.post({ url: '/user/resetPassword?id=' + id }) //重置密码
export const getMenuTree = params => request.post({ url: '/menuInterface/getMenuTree', params }) // 查询菜单
export const addMenu = data => request.post({ url: '/menuInterface/addMenu', data }) // 新增菜单
export const updateMenuById = data => request.post({ url: '/menuInterface/updateMenuById', data }) //修改菜单
export const deleteMenuById = id => request.post({ url: '/menuInterface/deleteMenuById?id=' + id }) //删除菜单
export const setModuleId = params => request.post({ url: '/menuInterface/setModuleId',params }) //关联模块

View File

@ -7,4 +7,4 @@ export const setIsValid = params => request.post({ url: '/role/setIsvaild', para
export const deleteRoleById = id => request.post({ url: '/role/deleteRoleById?id=' + id }) //删除
export const deleteRoleByIds = id => request.post({ url: '/role/deleteRoleByIds?ids=' + id }) //删除
export const permissionAssignment = params => request.post({ url: '/menuInterface/permissionAssignment', params }) //查询角色权限
export const setMenuByRoleId = params => request.post({ url: '/menuInterface/setMenuByRoleId', params }) //设置角色权限
export const setMenuByRoleId = params => request.post({ url: '/role/setMenuByRoleId', params }) //设置角色权限

View File

@ -277,14 +277,12 @@ const handleAvatarSuccess = file => {
}
.ed-dialog__headerbtn{
color: #ffffff;
top: 11px !important;
right: 15px !important;
}
.ed-dialog__title{
color: #ffffff;
}
.ed-dialog__headerbtn{
top: 10px !important;
right: 15px !important;
}
.ed-dialog {
border: 1px solid #4f5052;
border-radius: 4px;

View File

@ -0,0 +1,557 @@
<script lang="ts" setup>
import { ref, onMounted, onUnmounted,computed, reactive,nextTick,onBeforeMount, watch } from 'vue'
import DvPreview from '@/viewsnew/data-visualization/DvPreview.vue'
import FormCreate from '@/viewsnew/common/FormCreate.vue'
import { initCanvasData } from '@/utils/canvasUtils'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { moduleList } from '@/api/application/module'
import { ElTree,FormInstance } from 'element-plus'
import { publicTree } from '@/utils/validate';
import { setModuleId } from '@/api/permission/menu'
import { ElMessage, ElMessageBox } from 'element-plus'
const props = defineProps({
applicationId:String,
assoccurrentid:String,
assocmenuname:String,
currentNodeId:String
})
const defaultPropss = {
children: 'children',
label: "name"
}
const emits = defineEmits(['assochandleClose','assocsubmit'])
const keywords = ref('')
const dvMainStore = dvMainStoreWithOut()
const showPosition = ref("preview")
const dvPreviewRef = ref(null)
const state = reactive({
canvasDataPreview: null,
canvasStylePreview: null,
canvasViewInfoPreview: null,
dvInfo: null,
curPreviewGap: 0
})
const moduleInfo = ref({})
const isFormCreate = ref(false)
const busiFlag = ref('dataV')
const dataInitState = ref(true)
const downloadStatus = ref(false)
const moduleloading = ref(false)
const rightloading = ref(false)
const assocdialog = ref(false)
const assocmenuname = ref('')
const moduletreeData = ref([])
const moduletreeRef = ref<InstanceType<typeof ElTree>>()
const assoccurrentid = ref('')
const loadCanvasData = (dvId, weight?, ext?) => {
const initMethod = initCanvasData
dataInitState.value = false
initMethod(
dvId,
busiFlag.value,
function ({
canvasDataResult,
canvasStyleResult,
dvInfo,
canvasViewInfoPreview,
curPreviewGap
}) {
dvInfo['weight'] = weight
dvInfo['ext'] = ext || 0
state.canvasDataPreview = canvasDataResult
state.canvasStylePreview = canvasStyleResult
state.canvasViewInfoPreview = canvasViewInfoPreview
state.dvInfo = dvInfo
state.curPreviewGap = curPreviewGap
dataInitState.value = true
dvMainStore.updateCurDvInfo(dvInfo)
nextTick(() => {
dvPreviewRef.value?.restore()
})
}
)
}
const handleNodeClick = (e: any) => {
if(e.node_type == '01'){
assoccurrentid.value = ''
moduletreeRef.value!.setCurrentKey(null)
return
}
assoccurrentid.value = e.id
//
isFormCreate.value = false
dataInitState.value = false
if(e.type == '0301'){
busiFlag.value = 'dashboard'
loadCanvasData(e.id,9,0)
}else if(e.type == '03'){
busiFlag.value = 'dataV'
loadCanvasData(e.id,9,0)
}else if(e.type == '09'){
moduleInfo.value = e
isFormCreate.value = true
}
rightloading.value = false
}
function assochandleClose(){
assocdialog.value = false
emits('assochandleClose')
}
function assocsubmit(){
const params = {
id: props.currentNodeId,
moduleId: assoccurrentid.value
}
setModuleId(params).then(res => {
if(res.data.code == '0'){
ElMessage({
type: 'success',
message: '关联成功',
})
assocdialog.value = false;
emits('assocsubmit')
}else{
ElMessage({
type: 'error',
message: '关联失败',
})
emits('assochandleClose')
}
})
}
function getInit(){
moduleloading.value = true
rightloading.value = true
let params = {appId:props.applicationId}
moduleList(params).then(res => {
moduletreeData.value = publicTree(res.data.data,"")
moduleloading.value = false
if(assoccurrentid.value !== ''){
moduletreeRef.value!.setCurrentKey(assoccurrentid.value)
let paramss = {appId:props.applicationId}
moduleList(paramss).then(ress => {
let list:any = {}
const arr = ress.data.data
arr.forEach((item:any) => {
if(item.id === assoccurrentid.value){
list = item
}
})
handleNodeClick(list)
moduleloading.value = false
rightloading.value = false
})
}else{
moduletreeRef.value!.setCurrentKey(null)
moduleloading.value = false
rightloading.value = false
}
})
}
onMounted(() => {
isFormCreate.value = false
dataInitState.value = false
assocdialog.value = true
assoccurrentid.value = props.assoccurrentid
assocmenuname.value = props.assocmenuname
getInit()
})
function handleDatasetName() {
}
</script>
<template>
<el-dialog v-model="assocdialog" class="assocdialog" title="关联模块" width="80%" :before-close="assochandleClose">
<div class="assocbox">
<div class="assocbox-left">
<el-input placeholder="请输入" class="keywordsClass" maxlength="64" v-model="keywords" @blur="handleDatasetName">
<template #prepend>
<img src="@/assets/newimg/u62.png" alt="">
</template>
</el-input>
<el-tree v-loading="moduleloading" ref="moduletreeRef" :data="moduletreeData" node-key="id" :props="defaultPropss"
default-expand-all :expand-on-click-node="false" highlight-current
@node-click="handleNodeClick" style="margin-top: 10px;height: calc(100vh - 270px);overflow: auto;" />
</div>
<div v-loading="rightloading" class="assocbox-right">
<div class="querybox">
<div>
菜单名称{{assocmenuname}}
</div>
<div>
<el-button type="primary" style="min-width: 50px;" @click="assocsubmit">确定</el-button>
<el-button style="min-width: 50px;" @click="assochandleClose">取消</el-button>
</div>
</div>
<div>
<dv-preview
ref="dvPreviewRef"
class="dvPreviewRef"
v-if="state.canvasStylePreview && dataInitState"
:show-position="showPosition"
:canvas-data-preview="state.canvasDataPreview"
:canvas-style-preview="state.canvasStylePreview"
:canvas-view-info-preview="state.canvasViewInfoPreview"
:dv-info="state.dvInfo"
:cur-preview-gap="state.curPreviewGap"
:download-status="downloadStatus"
></dv-preview>
<form-create v-if="isFormCreate" :moduleInfo="moduleInfo"></form-create>
</div>
</div>
</div>
</el-dialog>
</template>
<style lang="less" scoped>
.permission-box{
background: rgb(21,21,21);
height: calc(100vh - 60px);
display: flex;
.permission-leftbox{
width: 260px;
height: 100%;
border-right: 1px solid #4f5052;
background: rgb(37,38,38);
padding: 10px;
.permission-leftbox-title{
color: #F2F4F5;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 16px;
font-family: 'Arial Normal', 'Arial', sans-serif;
font-weight: 400;
font-style: normal;
margin-top: 10px;
margin-bottom: 10px;
}
}
.permission-rightbox{
width: calc(100% - 260px);
height: calc(100vh - 75px);
padding: 13px;
overflow: auto;
}
}
.menu-item{
height: 30px;
line-height: 30px;
font-size:14px;
background: rgba(41, 41, 41, 1);
padding-left: 20px;
cursor: pointer;
}
.menu-item:hover{
background: #434343;
}
.assocbox{
height: calc(100vh - 112px);
display: flex;
.assocbox-left{
width: 290px;
height: 100%;
border-right: 1px solid #4f5052;
:deep(.el-tree-node__content){
padding-left: 5px !important;
}
}
.assocbox-right{
width: calc(100% - 290px);
height: calc(100vh - 130px);
overflow: auto;
padding-top: 15px;
padding-left: 15px;
padding-right: 8px;
}
}
:deep( .assocdialog .ed-dialog__body){
padding: 0px 0px;
}
:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content){
background: #409eff;
color: #ffffff;
}
:deep(.el-tree){
background:transparent;
color: #ffffff;
font-size: 14px;
}
:deep(.el-tree-node__content){
height: 40px;
line-height: 40px;
}
:deep(.el-tree-node__content:hover){
background: rgba(61,158, 255, 0.1);
color: #0089FF;
}
:deep(.custom-tree-node){
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content){
background: #409eff;
color: #ffffff;
}
:deep(.el-tree-node:focus>.el-tree-node__content){
background:rgb(37,38,38);
color: #ffffff;
}
:deep(.ed-popover.ed-popper){
padding: 10px 0px !important;
}
:deep(.el-text){
color: #ffffff;
}
.keywordsClass{
margin-left:10px;
margin-top: 10px;
width: calc(100% - 20px) ;
height: 40px;
background: inherit;
background-color: rgba(37, 38, 38, 1);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(51, 51, 51, 1);
border-radius: 4px;
:deep(.ed-input__wrapper){
background-color: rgba(37, 38, 38, 1);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(51, 51, 51, 0);
border-radius: 4px;
box-shadow:none ;
border: none !important;
}
:deep(.ed-input__inner){
background-color: rgba(37, 38, 38, 1);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(51, 51, 51, 0);
border-radius: 4px;
color: #fff;
}
:deep(.ed-input-group__prepend){
background-color: rgba(37, 38, 38, 1);
border: 0;
box-shadow:0 0 0 1px transparent ;
padding:0 10px;
padding-right: 0;
}
:deep(.ed-input__wrapper:hover){
border: none;
}
}
.querybox{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
font-family: 'Arial Normal', 'Arial', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
color: #FFFFFF;
}
.dvPreviewRef{
position: relative;
z-index:1;
}
</style>
<style>
.el-message-box{
background: #212121;
}
.el-message-box__content{
color: #ffffff;
}
.el-message-box__title{
color: #ffffff;
}
.el-message-box__btns .el-button{
color: #F2F4F5;
background-color: #212121;
border: 1px solid #434343;
}
.el-message-box__btns .el-button--primary{
background: #0089ff;
border-color: #0089ff;
}
.ed-form-item__label{
color: #D2D2D2;
}
.ed-input__wrapper {
background-color: #252626;
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(67, 67, 67, 0);
border-radius: 4px;
box-shadow: none;
border: 1px solid #434343;
}
.ed-form-item.is-error .ed-input__wrapper{
box-shadow: none;
border: 1px solid #f54a45;
}
.ed-input__wrapper.is-focus{
box-shadow: none;
border: 1px solid #0089ff;
}
.ed-input__wrapper:hover{
box-shadow: none;
border: 1px solid #0089ff;
}
.ed-input__inner{
color: #fff;
}
.ed-button {
color: #ffffff;
background-color: rgb(54,55,56);
border: 1px solid #363636;
}
.ed-button:focus, .ed-button:hover{
color: #ffffff;
background-color: rgb(54,55,56);
border: 1px solid #363636;
}
.ed-button--primary{
background-color: #0089ff;
border-color:#0089ff ;
}
.ed-button--primary:focus, .ed-button--primary:hover{
background-color: #0089ff;
border-color:#0089ff ;
}
.ed-button.is-disabled{
color: #949494;
background-color: rgb(54,55,56);
border: 1px solid rgb(54,55,56);
}
.ed-button.is-disabled, .ed-button.is-disabled:focus, .ed-button.is-disabled:hover{
color: #949494;
background-color: rgb(54,55,56);
border: 1px solid rgb(54,55,56);
}
.el-table{
background-color: rgb(33,33,33);
}
.el-table tr{
background: rgb(40,40,40);
border-color: #434343;
}
.el-table th.el-table__cell {
background-color: rgb(40,40,40);
border-color: #434343;
}
.el-table.is-scrolling-none th.el-table-fixed-column--left, .el-table.is-scrolling-none th.el-table-fixed-column--right {
background-color: rgb(40,40,40);
}
.el-table--border .el-table__inner-wrapper:after, .el-table--border:after, .el-table--border:before, .el-table__inner-wrapper:before{
background-color: #434343;
}
.el-table__border-bottom-patch, .el-table__border-left-patch{
background-color: #434343;
}
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
border-color: #434343;
}
.ed-checkbox__inner{
background: transparent;
border-color: #787878;
}
.ed-checkbox__input.is-disabled .ed-checkbox__inner{
background: #434343;
border-color: #787878;
}
.el-table thead{
color: #E4E4E4;
}
.el-table .el-table__cell{
background: #212121;
color: #F2F4F5;
}
.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: #212121;
}
.hover-row > td {
background-color: rgb(48,48,48) !important;
}
.ed-checkbox__input.is-checked .ed-checkbox__inner {
background-color: #409eff;
border-color: #409eff;
}
.ed-switch.is-checked .ed-switch__core{
border-color: #0089ff;
background-color: #0089ff;
}
.ed-textarea__inner{
background-color: #252626;
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(67, 67, 67, 0);
border-radius: 4px;
box-shadow: none;
border: 1px solid #434343;
color: #fff;
}
.ed-textarea__inner:hover{
box-shadow: none;
border: 1px solid #0089ff;
}
.ed-textarea__inner:focus{
box-shadow: none;
border: 1px solid #0089ff;
}
.ed-input.is-disabled .ed-input__wrapper{
border: 1px solid #434343;
background: #212121;
box-shadow: none;
}
.el-loading-mask{
background-color: rgba(41, 41, 41, 0.9)
}
.ed-popover.ed-popper{
background: rgba(41, 41, 41, 1);
border: 1px solid #434343;
color: #fff;
padding: 10px 0px;
}
.ed-dialog__header{
padding: 13px 20px;
border-bottom: 1px solid #333333;
margin-right: 0px;
}
.ed-dialog__headerbtn{
color: #ffffff;
top: 11px !important;
right: 15px !important;
}
.ed-dialog__body{
background: rgb(33,33,33);
}
.ed-dialog__footer{
background: rgb(33,33,33);
}
.ed-dialog__title{
color: #ffffff;
}
.ed-dialog {
border: 1px solid #5f5f5f;
border-radius: 4px;
background: rgb(33,33,33);
}
.el-tree-node__expand-icon{
color: #ffffff
}
</style>

View File

@ -0,0 +1,119 @@
<script lang="ts" setup>
import { ref, onMounted, onUnmounted,computed, reactive,nextTick,onBeforeMount, watch } from 'vue'
import DvPreview from '@/viewsnew/data-visualization/DvPreview.vue'
import FormCreate from '@/viewsnew/common/FormCreate.vue'
import { initCanvasData } from '@/utils/canvasUtils'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { moduleList } from '@/api/application/module'
const props = defineProps({
moduleinfo:Object,
applicationId:String
})
const dvMainStore = dvMainStoreWithOut()
const showPosition = ref("preview")
const dvPreviewRef = ref(null)
const state = reactive({
canvasDataPreview: null,
canvasStylePreview: null,
canvasViewInfoPreview: null,
dvInfo: null,
curPreviewGap: 0
})
const moduleInfo = ref({})
const isFormCreate = ref(false)
const busiFlag = ref('dataV')
const dataInitState = ref(true)
const downloadStatus = ref(false)
const loading = ref(false)
const loadCanvasData = (dvId, weight?, ext?) => {
const initMethod = initCanvasData
dataInitState.value = false
initMethod(
dvId,
busiFlag.value,
function ({
canvasDataResult,
canvasStyleResult,
dvInfo,
canvasViewInfoPreview,
curPreviewGap
}) {
dvInfo['weight'] = weight
dvInfo['ext'] = ext || 0
state.canvasDataPreview = canvasDataResult
state.canvasStylePreview = canvasStyleResult
state.canvasViewInfoPreview = canvasViewInfoPreview
state.dvInfo = dvInfo
state.curPreviewGap = curPreviewGap
dataInitState.value = true
dvMainStore.updateCurDvInfo(dvInfo)
nextTick(() => {
dvPreviewRef.value?.restore()
})
}
)
}
onMounted(() => {
getInit()
isFormCreate.value = false
dataInitState.value = false
})
watch(() => props.moduleinfo, (val) => {
getInit()
isFormCreate.value = false
dataInitState.value = false
})
onBeforeMount(() => {
dvMainStore.canvasDataInit()
})
function getInit() {
loading.value = true
console.log(props.applicationId,props.moduleinfo)
let params = {appId:props.applicationId}
moduleList(params).then(res => {
let list:any = {}
const arr = res.data.data
arr.forEach((item:any) => {
if(item.id === props.moduleinfo.module_id){
list = item
}
})
handleNodeClick(list)
})
}
function handleNodeClick(e){
isFormCreate.value = false
dataInitState.value = false
if(e.type == '0301'){
busiFlag.value = 'dashboard'
loadCanvasData(e.id,9,0)
}else if(e.type == '03'){
busiFlag.value = 'dataV'
loadCanvasData(e.id,9,0)
}else if(e.type == '09'){
moduleInfo.value = e
isFormCreate.value = true
}
loading.value = false
}
</script>
<template>
<div v-loading="loading" style="width: 100%;height: 100%;">
<dv-preview
ref="dvPreviewRef"
class="dvPreviewRef"
v-if="state.canvasStylePreview && dataInitState"
:show-position="showPosition"
:canvas-data-preview="state.canvasDataPreview"
:canvas-style-preview="state.canvasStylePreview"
:canvas-view-info-preview="state.canvasViewInfoPreview"
:dv-info="state.dvInfo"
:cur-preview-gap="state.curPreviewGap"
:download-status="downloadStatus"
></dv-preview>
<form-create v-if="isFormCreate" :moduleInfo="moduleInfo"></form-create>
</div>
</template>
<style lang="less" scoped>
</style>

View File

@ -1,23 +1,23 @@
<script lang="ts" setup>
import Header from './header.vue'
import Assocmodule from './assocmodule.vue'
import Assocmenu from './assocmenu.vue'
import { findApplicationById } from "@/api/application/application";
import { useRoute, useRouter } from 'vue-router'
import { ref, watch, onMounted } from 'vue'
import { ref, onMounted,reactive,nextTick } from 'vue'
import menuconfig_treeadd_white from '@/assets/svg/menuconfig_treeadd_white.svg'
import icon_user_connect_white from '@/assets/svg/user_connect_white.svg'
import icon_permission_more_white from '@/assets/svg/icon_more-vertical_outlined_white.svg'
import { ElTree,FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getMenuTree,addMenu,updateMenuById,deleteMenuById } from '@/api/permission/menu'
const projectInfo:any =ref({})
const route = useRoute()
const router = useRouter()
const applicationId:any =ref("")
const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()
watch(filterText, (val) => {
treeRef.value!.filter(val)
})
const treeData:any = ref([])
const defaultProps = {
children: 'children',
@ -36,6 +36,16 @@ const rules = ref({
{ required: true, message: '请输入菜单名称', trigger: 'blur' },
],
})
const showmodule = ref(false)
const assocdialog = ref(false)
//
const assocmenuname = ref('')
const assoccurrentid = ref('')
const isFormCreate = ref(false)
const dataInitState = ref(true)
const rightloading = ref(false)
const moduleinfo = ref({})
const handleMouseEnter = (node) => {
hoverNodeId.value = node.key;
};
@ -91,6 +101,19 @@ onMounted(() => {
gettree()
}
})
function assocclick(data:any){
isFormCreate.value = false
dataInitState.value = false
assocmenuname.value = data.name
currentNodeId.value = data.id
if(data.module_id !== '' && data.module_id !== undefined){
assoccurrentid.value = data.module_id
}else{
assoccurrentid.value = ''
}
assocdialog.value = true
}
function gettree() {
treeloading.value = true
const params = {
@ -103,8 +126,29 @@ function gettree() {
treeData.value = res.data
})
}
function querytree() {
treeloading.value = true
const params = {
appId: applicationId.value,
name:filterText.value,
isdisplay:''
}
getMenuTree(params).then(res => {
treeloading.value = false
treeData.value = res.data
})
}
function nodeclick(data:any,node:any){
moduleinfo.value = {}
currentNodeId.value = node.key
showmodule.value = false
assocdialog.value = false
if(data.module_id !== '' && data.module_id !== undefined){
moduleinfo.value = data
showmodule.value = true
}else{
showmodule.value = false
}
}
function addtree(){
title.value = '新增菜单'
@ -161,6 +205,13 @@ function handleClose() {
ruleFormRef.value?.resetFields();
dialogVisible.value = false;
}
function assochandleClose() {
assocdialog.value = false;
}
function assocsubmit(){
assocdialog.value = false;
gettree()
}
</script>
<template>
@ -176,16 +227,16 @@ function handleClose() {
</el-icon>
</div>
</div>
<el-input v-model="filterText" placeholder="请输入" />
<el-input v-model="filterText" placeholder="请输入" @blur="querytree" />
<el-tree v-loading="treeloading" ref="treeRef" :data="treeData" node-key="id" :props="defaultProps"
default-expand-all :expand-on-click-node="false" highlight-current
@node-click="nodeclick">
@node-click="nodeclick" style="height: calc(100vh - 210px);margin-top: 10px;overflow: auto;">
<template #default="{ node, data }">
<div class="custom-tree-node" @mouseenter="handleMouseEnter(node)"
@mouseleave="handleMouseLeave()">
<div>{{ node.label }}</div>
<div v-show="hoverNodeId === node.key" style="display: flex;align-items: center;" >
<div>
<div @click.stop="assocclick(data)">
<el-icon style="font-size: 16px;margin-top: 13px;">
<icon_user_connect_white class="svg-icon"/>
</el-icon>
@ -207,12 +258,12 @@ function handleClose() {
</template>
</el-tree>
</div>
<div v-if="showmodule" v-loading="rightloading" class="permission-rightbox">
<Assocmodule v-if="showmodule" :applicationId="applicationId" :moduleinfo="moduleinfo" />
</div>
</div>
<el-dialog v-model="dialogVisible" :title="title" width="30%" :before-close="handleClose">
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80px" class="demo-ruleForm">
<el-form-item label="菜单编号" prop="code" v-if="title !== '重命名'">
<el-input v-model="ruleForm.code" disabled placeholder="系统自动生成" />
</el-form-item>
<el-form-item label="菜单名称" prop="name">
<el-input v-model="ruleForm.name" placeholder="请输入菜单名称" />
</el-form-item>
@ -224,7 +275,10 @@ function handleClose() {
</span>
</template>
</el-dialog>
</div>
<Assocmenu v-if="assocdialog" :assoccurrentid="assoccurrentid"
:applicationId="applicationId" :assocmenuname="assocmenuname"
:currentNodeId="currentNodeId" @assochandleClose="assochandleClose" @assocsubmit="assocsubmit" />
</div>
</template>
<style lang="less" scoped>
@ -253,13 +307,51 @@ function handleClose() {
}
.permission-rightbox{
width: calc(100% - 260px);
height: 100%;
height: calc(100vh - 75px);
padding: 13px;
overflow: auto;
}
:deep(.el-tree){
background:rgb(37,38,38);
height: calc(100vh - 210px);
margin-top: 10px;
}
.menu-item{
height: 30px;
line-height: 30px;
font-size:14px;
background: rgba(41, 41, 41, 1);
padding-left: 20px;
cursor: pointer;
}
.menu-item:hover{
background: #434343;
}
.assocbox{
height: calc(100vh - 112px);
display: flex;
.assocbox-left{
width: 290px;
height: 100%;
border-right: 1px solid #4f5052;
:deep(.el-tree-node__content){
padding-left: 5px !important;
}
}
.assocbox-right{
width: calc(100% - 290px);
overflow: auto;
height: calc(100% - 15px);
padding-top: 15px;
padding-left: 15px;
padding-right: 8px;
}
}
:deep( .assocdialog .ed-dialog__body){
padding: 0px 0px;
}
:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content){
background: #409eff;
color: #ffffff;
}
:deep(.el-tree){
background:transparent;
color: #ffffff;
font-size: 14px;
}
@ -279,9 +371,6 @@ function handleClose() {
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: #409eff;
color: #ffffff;
@ -292,20 +381,67 @@ function handleClose() {
}
:deep(.ed-popover.ed-popper){
padding: 10px 0px !important;
}
:deep(.el-text){
color: #ffffff;
}
.keywordsClass{
margin-left:10px;
margin-top: 10px;
width: calc(100% - 20px) ;
height: 40px;
background: inherit;
background-color: rgba(37, 38, 38, 1);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(51, 51, 51, 1);
border-radius: 4px;
:deep(.ed-input__wrapper){
background-color: rgba(37, 38, 38, 1);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(51, 51, 51, 0);
border-radius: 4px;
box-shadow:none ;
border: none !important;
}
}
.menu-item{
height: 30px;
line-height: 30px;
font-size:14px;
background: rgba(41, 41, 41, 1);
padding-left: 20px;
cursor: pointer;
}
.menu-item:hover{
background: #434343;
}
:deep(.ed-input__inner){
background-color: rgba(37, 38, 38, 1);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(51, 51, 51, 0);
border-radius: 4px;
color: #fff;
}
:deep(.ed-input-group__prepend){
background-color: rgba(37, 38, 38, 1);
border: 0;
box-shadow:0 0 0 1px transparent ;
padding:0 10px;
padding-right: 0;
}
:deep(.ed-input__wrapper:hover){
border: none;
}
}
.querybox{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
font-family: 'Arial Normal', 'Arial', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
color: #FFFFFF;
}
.dvPreviewRef{
position: relative;
z-index:1;
}
</style>
<style>
.el-message-box{
@ -471,10 +607,11 @@ function handleClose() {
padding: 13px 20px;
border-bottom: 1px solid #333333;
margin-right: 0px;
background: rgb(33,33,33);
}
.ed-dialog__headerbtn{
color: #ffffff;
color: #ffffff;
top: 11px !important;
right: 15px !important;
}
.ed-dialog__body{
background: rgb(33,33,33);
@ -485,14 +622,13 @@ function handleClose() {
.ed-dialog__title{
color: #ffffff;
}
.ed-dialog__headerbtn{
top: 13px !important;
}
.ed-dialog {
border: 1px solid #5f5f5f;
border-radius: 4px;
background: rgb(33,33,33);
}
.el-tree-node__expand-icon{
color: #ffffff
}
</style>

View File

@ -259,7 +259,6 @@ function delTreeClic(){ // 删除
height: 24px;">
<img v-if="data.node_type == '01'" src="@/assets/newimg/icon/add.png" alt="" style="width: 14px;height: 13px;" @click.stop="addTreeChildNode($event, Number(data.level)+1,data)">
<img v-if="data.node_type == '02'" src="@/assets/newimg/icon/bianji.png" alt="" style="width: 14px;height: 13px;" @click.stop="editClic(data)">
</div>
<div style="
width: 20px;

View File

@ -101,7 +101,7 @@ const loadCanvasData = (dvId, weight?, ext?) => {
dvPreviewRef.value?.restore()
})
nextTick(() => {
onInitReady({ resourceId: dvId })
onInitReloadCanvasDataady({ resourceId: dvId })
})
}
)
@ -120,7 +120,6 @@ function handleNodeClick(e){
moduleInfo.value = e
isFormCreate.value = true
}
}
onBeforeMount(() => {
dvMainStore.canvasDataInit()

View File

@ -87,13 +87,13 @@ function menuclick(name){
}
.ed-dialog__headerbtn{
color: #ffffff;
top: 11px !important;
right: 15px !important;
}
.ed-dialog__title{
color: #ffffff;
}
.ed-dialog__headerbtn{
top: 13px !important;
}
.ed-dialog {
border: 1px solid #5f5f5f;
border-radius: 4px;

View File

@ -551,6 +551,7 @@ function formatDateTime(dateTimeStr:any){
:deep(.el-tree){
background:#212121;
height: calc(100vh - 210px);
overflow: auto;
margin-top: 20px;
color: #ffffff;
font-size: 14px;

View File

@ -1,5 +1,5 @@
<script lang="ts" setup>
import { ref, onMounted,reactive} from 'vue'
import { ref, onMounted,nextTick} from 'vue'
import permission_table_edit_blue from '@/assets/svg/permission_table_edit_blue.svg'
import permission_table_del_blue from '@/assets/svg/permission_table_del_blue.svg'
import perission_role_blue from '@/assets/svg/perission_role_blue.svg'
@ -8,7 +8,6 @@ import type { FormInstance } from 'element-plus'
import { Delete } from '@element-plus/icons-vue'
import { ElTable,ElTree,ElMessage, ElMessageBox } from 'element-plus'
import { listRole,addRole,updateRole,setIsValid,deleteRoleById,deleteRoleByIds,permissionAssignment,setMenuByRoleId } from '@/api/permission/role'
import { getMenuTree } from '@/api/permission/menu'
const props = defineProps({
applicationId:String
})
@ -42,6 +41,10 @@ const defaultProps = {
}
const treeloading = ref(false);
const treeRef = ref<InstanceType<typeof ElTree>>()
const currenttableid = ref('')
const Passparameter = ref([])
//key
const DefaultDeployment: any = ref([])
const submitForm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.validate((valid) => {
@ -91,22 +94,23 @@ onMounted(() => {
gettable()
})
function permissionset(row:any){
// const params = {
// roleId: row.id,
// appId: row.appId
// }
// permissionAssignment(params).then(res => {
// console.log(res,'')
// })
const params = {
appId: props.applicationId,
name:'',
isdisplay:''
}
getMenuTree(params).then(res => {
treeData.value = res.data
})
currenttableid.value = row.id
configdialog.value = true
treeloading.value = true
const params = {
roleId: row.id,
appId: props.applicationId,
}
permissionAssignment(params).then(res => {
treeData.value = res.data
let ids: any = []
menuChange(res.data, ids)
nextTick(() => {
treeRef.value!.setCheckedKeys(ids)
})
treeloading.value = false
})
}
function gettable(){
tableloading.value = true
@ -213,7 +217,6 @@ function setisValid(row:any){
isvaild:row.isvaild
}
setIsValid(params).then(res => {
console.log(res,'res')
if(res.code == '0'){
gettable()
ElMessage.success('设置成功')
@ -228,14 +231,33 @@ function confighandleClose(){
}
function consfigsubmit(){
const params = {
id: '',
menuIds: ''
id: currenttableid.value,
menuIds: Passparameter.value.join(',')
}
setMenuByRoleId(params).then(res => {
console.log(res,'权限设置')
if(res.code == '0'){
gettable()
ElMessage.success('设置成功')
}else{
ElMessage.error('设置失败')
}
})
configdialog.value = false
}
function currentChecked(nodeObj: any, SelectedObj: any){
Passparameter.value = SelectedObj.checkedKeys.concat(SelectedObj.halfCheckedKeys)
}
function menuChange(data: any, ids: any) {
data.forEach((item: any) => {
if (item.checkinfo == true) {
ids.push(item.id)
DefaultDeployment.value.push(item.id)
}
if (item.children) {
menuChange(item.children, ids)
}
})
}
</script>
<template>
<div class="organization-box">
@ -320,13 +342,13 @@ function consfigsubmit(){
</el-dialog>
<el-dialog v-model="configdialog" title="角色权限配置" width="30%" :before-close="confighandleClose">
<el-tree v-loading="treeloading" ref="treeRef" :data="treeData" node-key="id" :props="defaultProps"
default-expand-all :expand-on-click-node="false" show-checkbox
>
default-expand-all :expand-on-click-node="false" show-checkbox @check="currentChecked"
style="height: calc(100vh - 300px);overflow: auto;">
</el-tree>
<template #footer>
<span class="dialog-footer">
<el-button @click="confighandleClose">取消</el-button>
<el-button type="primary" @click="consfigsubmit()">确定</el-button>
<el-button type="primary" @click="consfigsubmit">确定</el-button>
</span>
</template>
</el-dialog>

View File

@ -423,6 +423,7 @@ function resetclick(row:any){
:deep(.el-tree){
background:#212121;
height: calc(100vh - 145px);
overflow: auto;
margin-top: 5px;
color: #ffffff;
font-size: 14px;

View File

@ -899,14 +899,13 @@ initFunction()
border-bottom: 1px solid #333333;
margin-right: 0px;
}
.ed-dialog__headerbtn{
color: #ffffff;
}
.ed-dialog__title{
color: #ffffff;
}
.ed-dialog__headerbtn{
top: 13px !important;
top: 11px !important;
right: 15px !important;
color: #ffffff;
}
.ed-dialog {
border: 1px solid #5f5f5f;

View File

@ -1726,13 +1726,12 @@ border-right: 1px solid rgba(54, 54, 54, 1)
}
.ed-dialog__headerbtn{
color: #ffffff;
top: 11px !important;
right: 15px !important;
}
.ed-dialog__title{
color: #ffffff;
}
.ed-dialog__headerbtn{
top: 13px !important;
}
.ed-dialog {
border: 1px solid #5f5f5f;
border-radius: 4px;

View File

@ -2512,7 +2512,8 @@ border-right: 1px solid rgba(54, 54, 54, 1);
color: #ffffff;
}
.ed-dialog__headerbtn{
top: 13px !important;
top: 11px !important;
right: 15px !important;
}
.ed-dialog {
border: 1px solid #5f5f5f;