ThbTech/gis-bi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改导航样式权限按钮

Browse Source
This commit is contained in:
jingna 2025-06-09 18:28:31 +08:00
parent bf74c8a6b0
commit 1f493d0ded
7 changed files with 217 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
core/core-frontend/public/images/navleft.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
core/core-frontend/public/images/navright.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
core/core-frontend/src/assets/img/navpermission.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 539 B

59
core/core-frontend/src/viewsnew/application/SfcEditor/NavbarEditor/Navbar.vue
View File

@ -101,6 +101,9 @@ onBeforeUnmount(() => {
});
function permissionClick() {
if (props.isExecuteEvent) {
return
}
showmodule.value = false
showermission.value = true
}
@ -108,7 +111,11 @@ function permissionClick(){
<template>
<div class="system-box">
<div class="Navbar-box">
<div class="Navbar-box-titie">{{ navtitle }}</div>
<div class="Navbar-box-titie">
<div class="Navbar-box-titie-text">
{{ navtitle }}
</div>
</div>
<div class="Navbar-menu-box">
<div class="Navbar-menu-content">
<TimeDisplay />
@ -117,8 +124,8 @@ function permissionClick(){
v-for="(item, index) in navmenulist" :key="index" @click="menuclick(index)">
<div v-if="!item.children || item.children.length == 0">{{ item.name }}</div>
<el-popover v-else :show-arrow="false" class="tsmenu" placement="bottom" popper-class="tsmenu-popover">
<div v-for="(items, indexs) in item.children" :key="indexs"
class="Navbar-menu-item-child-item" @click="()=>childmenuclick(items)">
<div v-for="(items, indexs) in item.children" :key="indexs" class="Navbar-menu-item-child-item"
@click="() => childmenuclick(items)">
{{ items.name }}
</div>
<template #reference>
@ -128,17 +135,19 @@ function permissionClick(){
</div>
</div>
<div class="Navbar-box-right">
<div style="margin-right: 10px;cursor: pointer;" @click="permissionClick"><img src="@/assets/img/nav1.png" alt=""></div>
<div style="margin-right: 10px;cursor: pointer;" @click="permissionClick"><img
src="@/assets/img/navpermission.png" alt=""></div>
<div style="margin-right: 10px;cursor: pointer;"><img src="@/assets/img/nav1.png" alt=""></div>
<div style="margin-right: 15px;min-width: 45px;">admin</div>
<div style="margin-right: 15px;"><img src="@/assets/img/nav3.png" alt=""></div>
<div><img src="@/assets/img/nav4.png" alt=""></div>
</div>
</div>
</div>
<div v-if="!props.isExecuteEvent" class="system-box-content" :style="{height:props.isFixed?'calc(100vh - 65px)':'calc(100vh - 125px)'}">
<Assocmodule v-if="showmodule" :applicationId="props.applicationId"
:moduleinfo="{module_id:currentMoudleId}" />
<!-- <PermissionSet v-if="showermission" /> -->
<div v-if="!props.isExecuteEvent" class="system-box-content"
:style="{ height: props.isFixed ? 'calc(100vh - 65px)' : 'calc(100vh - 125px)' }">
<Assocmodule v-if="showmodule" :applicationId="props.applicationId" :moduleinfo="{ module_id: currentMoudleId }" />
<PermissionSet v-if="showermission" />
</div>
</div>
</template>
@ -154,27 +163,33 @@ function permissionClick(){
display: flex;
align-items: center;
color: #fff;
background: url(/images/navbg.png) no-repeat;
background-size: 100% 100%;
padding-left: 25px;
.Navbar-box-titie {
width: 400px;
height: 65px;
line-height: 65px;
background: url(/images/navleft.png) no-repeat;
background-size:100% 100%;
padding-left: 20px;
padding-right: 15px;
.Navbar-box-titie-text {
font-size: 25px;
font-weight: 700;
background: linear-gradient(to bottom, #ffffff, #0089ff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
width: 340px;
}
}
.Navbar-menu-box {
width: calc(100% - 340px);
width: calc(100% - 400px);
height: 63px;
display: flex;
align-items: center;
padding-left: 43px;
padding-left: 20px;
padding-right: 20px;
justify-content: space-between;
background: url(/images/navright.png) no-repeat;
background-size: 100% 100%;
.Navbar-menu-content {
width: 100%;
display: flex;
@ -212,7 +227,7 @@ function permissionClick(){
}
.Navbar-box-right {
width: 165px;
width: 210px;
display: flex;
align-items: center;
font-size: 14px;
@ -220,6 +235,7 @@ function permissionClick(){
}
}
.system-box-content {
width: 100%;
}
@ -227,26 +243,31 @@ function permissionClick(){
</style>
<style>
.tsmenu-popover.el-popover.el-popper {
background: linear-gradient(to bottom, rgba(0, 52, 102, 1), rgba(0, 55, 110, 0.5)) !important;;
background: linear-gradient(to bottom, rgba(0, 52, 102, 1), rgba(0, 55, 110, 0.5)) !important;
;
color: #fff;
border: none;
border-radius: 0px;
padding: 5px 0px;
z-index: 9001 !important;
}
.tsmenu-popover.ed-popover.ed-popper {
background: linear-gradient(to bottom, rgba(0, 52, 102, 1), rgba(0, 55, 110, 0.5)) !important;;
background: linear-gradient(to bottom, rgba(0, 52, 102, 1), rgba(0, 55, 110, 0.5)) !important;
;
color: #fff;
border: none;
border-radius: 0px;
padding: 5px 0px;
z-index: 9001 !important;
}
.tsmenu-popover .Navbar-menu-item-child-item {
padding: 5px 15px;
cursor: pointer;
text-align: center;
}
.tsmenu-popover .Navbar-menu-item-child-item:hover {
color: rgb(0, 255, 254);
background: rgb(2, 88, 161);

28
core/core-frontend/src/viewsnew/application/SfcEditor/NavbarEditor/editNavbar.vue
View File

@ -34,10 +34,12 @@ import { useRoute, useRouter } from 'vue-router'
import { loadModule } from 'vue3-sfc-loader'
import * as Vue from 'vue/dist/vue.esm-bundler.js'
import ElementPlus from 'element-plus'
import * as VueRouter from 'vue-router'
import less from 'less'
import defaultTemplate from '@/viewsnew/application/SfcEditor/NavbarEditor/Navbar.vue?raw'
import { getMenuTree } from '@/api/permission/menu'
import { moduleUpdate, moduleById } from '@/api/application/module'
import { i18n } from '@/plugins/vue-i18n'
import 'element-plus/dist/index.css'
const route = useRoute()
const router = useRouter()
@ -79,8 +81,12 @@ const runCode = async () => {
vue: Vue,
'element-plus': ElementPlus,
'vue/dist/vue.esm-bundler.js': Vue,
'vue-router': VueRouter,
'@/viewsnew/application/SfcEditor/NavbarEditor/assocPage.vue': Vue.defineAsyncComponent(() =>
import('@/viewsnew/application/SfcEditor/NavbarEditor/assocPage.vue'))
import('@/viewsnew/application/SfcEditor/NavbarEditor/assocPage.vue')),
'@/viewsnew/application/permissionset/index.vue': Vue.defineAsyncComponent(() =>
import('@/viewsnew/application/permissionset/index.vue')
)
},
getFile: async (fileName) => {
if (fileName.startsWith('@/')) {
@ -151,16 +157,23 @@ const runCode = async () => {
}
const componentModule = await loadModule('dynamic.vue', options)
const component = componentModule.default || componentModule
const dynamicProps = ref({
menuList: menuList.value, //菜单数据
const dynamicProps = Vue.reactive({
menuList: menuList.value,
isFixed: false,
projectName: appname.value, //项目名
applicationId: applicationId.value, //项目id
isExecuteEvent: false //是否执行事件
projectName: appname.value,
applicationId: applicationId.value,
isExecuteEvent: true
})
prevApp = Vue.createApp({
render: () => Vue.h(component, dynamicProps.value)
render: () => Vue.h(component, {
...dynamicProps,
router: router,
route: route
})
})
prevApp.use(router)
prevApp.use(route)
prevApp.use(i18n)
prevApp.use(ElementPlus)
prevApp.mount(previewContainer.value)
@ -208,7 +221,6 @@ function goBack() {
}
function handleClick() {
if (activeName.value == '预览') {
console.log('预览')
runCode()
}
}

6
core/core-frontend/src/viewsnew/application/SfcEditor/NavbarEditor/previewNavSfc.vue
View File

@ -129,9 +129,6 @@ const runCode = async () => {
isExecuteEvent: props.isExecuteEvent
})
// 修改createApp方式
// prevApp = Vue.createApp({
// render: () => Vue.h(component, dynamicProps)
// })
prevApp = Vue.createApp({
render: () => Vue.h(component, {
...dynamicProps,
@ -139,6 +136,8 @@ const runCode = async () => {
route: route
})
})
prevApp.use(router)
prevApp.use(route)
prevApp.use(i18n)
prevApp.use(ElementPlus)
prevApp.mount(previewContainer.value)
@ -160,7 +159,6 @@ function init() {
moduleById(props.projectId).then(res => {
if (res.data.data.canvas_style_data) {
sfcCode.value = res.data.data.canvas_style_data
// sfcCode.value = defaultTemplate
runCode()
}
})

5
core/core-frontend/src/viewsnew/application/module/header.vue
View File

@ -38,12 +38,17 @@ onMounted(()=>{
projectInfo.value = props.projectInfo
})
function designClick(){
console.log(treeInfo.value,projectInfo.value)
if(treeInfo.value.type == '03'){
window.open('/#/dvsCanvas?dvId=' + treeInfo.value.id+'&appId=' + projectInfo.value.id, '_blank');
}else if(treeInfo.value.type == '0301'){
window.open('/#/dashboard?resourceId=' + treeInfo.value.id + '&appId='+projectInfo.value.id, '_blank');
}else if(treeInfo.value.type == '04'||treeInfo.value.type == '05'||treeInfo.value.type == '06'){
window.open('/#/formcreatedesigner?moduleId=' +treeInfo.value.id + '&appId='+projectInfo.value.id, '_blank');
}else if(treeInfo.value.type == '01'){
window.open('/#/editLogin?dvId=' +treeInfo.value.id + '&appId='+projectInfo.value.id+ '&name='+projectInfo.value.name+ '&appname='+projectInfo.value.name, '_blank');
}else if(treeInfo.value.type == '02'){
window.open('/#/editNavbar?dvId=' +treeInfo.value.id + '&appId='+projectInfo.value.id+ '&name='+projectInfo.value.name+ '&appname='+projectInfo.value.name, '_blank');
}
}
//预览