修改导航样式权限按钮
This commit is contained in:
parent
bf74c8a6b0
commit
1f493d0ded
BIN
core/core-frontend/public/images/navleft.png
Normal file
BIN
core/core-frontend/public/images/navleft.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.9 KiB |
BIN
core/core-frontend/public/images/navright.png
Normal file
BIN
core/core-frontend/public/images/navright.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.7 KiB |
BIN
core/core-frontend/src/assets/img/navpermission.png
Normal file
BIN
core/core-frontend/src/assets/img/navpermission.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 539 B |
@ -1,21 +1,21 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref,watch, onMounted,onBeforeUnmount,shallowRef } from 'vue'
|
||||
import { ref, watch, onMounted, onBeforeUnmount, shallowRef } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import Assocmodule from '@/viewsnew/application/SfcEditor/NavbarEditor/assocPage.vue'
|
||||
import PermissionSet from '@/viewsnew/application/permissionset/index.vue'
|
||||
const props = defineProps({
|
||||
menuList: {
|
||||
menuList: {
|
||||
type: Array, // 根据实际数据结构调整
|
||||
required: true, // 强制必须传递
|
||||
default: () => [] // 设置安全默认值
|
||||
},
|
||||
isFixed: Boolean,
|
||||
projectName:String,
|
||||
applicationId:String,
|
||||
isExecuteEvent: Boolean
|
||||
isFixed: Boolean,
|
||||
projectName: String,
|
||||
applicationId: String,
|
||||
isExecuteEvent: Boolean
|
||||
})
|
||||
const navtitle = ref('')
|
||||
const navmenulist:any = ref([
|
||||
const navmenulist: any = ref([
|
||||
])
|
||||
const checkindex = ref(null)
|
||||
const showmodule = ref(false)
|
||||
@ -30,29 +30,29 @@ watch(
|
||||
},
|
||||
{ immediate: true } // 立即执行一次
|
||||
)
|
||||
function menuclick(index:any) {
|
||||
if(navmenulist.value[index].children.length == 0 || navmenulist.value[index].children == undefined){
|
||||
checkindex.value = index
|
||||
if(props.isExecuteEvent){
|
||||
return
|
||||
}
|
||||
currentMoudleId.value = navmenulist.value[index].module_id
|
||||
showmodule.value = true
|
||||
function menuclick(index: any) {
|
||||
if (navmenulist.value[index].children.length == 0 || navmenulist.value[index].children == undefined) {
|
||||
checkindex.value = index
|
||||
if (props.isExecuteEvent) {
|
||||
return
|
||||
}
|
||||
currentMoudleId.value = navmenulist.value[index].module_id
|
||||
showmodule.value = true
|
||||
}
|
||||
}
|
||||
function childmenuclick(item:any){
|
||||
if(props.isExecuteEvent){
|
||||
return
|
||||
}
|
||||
showermission.value = false
|
||||
showmodule.value = false
|
||||
if(item.module_id && item.module_id !== ''){
|
||||
function childmenuclick(item: any) {
|
||||
if (props.isExecuteEvent) {
|
||||
return
|
||||
}
|
||||
showermission.value = false
|
||||
showmodule.value = false
|
||||
if (item.module_id && item.module_id !== '') {
|
||||
currentMoudleId.value = item.module_id
|
||||
showmodule.value = true
|
||||
}else{
|
||||
} else {
|
||||
showmodule.value = false
|
||||
}
|
||||
// console.log('传递给 Assocmodule 的 props:',Assocmodule)
|
||||
// console.log('传递给 Assocmodule 的 props:',Assocmodule)
|
||||
}
|
||||
// 时间相关逻辑移动到独立组件中
|
||||
const TimeDisplay = {
|
||||
@ -66,7 +66,7 @@ const TimeDisplay = {
|
||||
const currentTime = shallowRef('')
|
||||
const currentDate = shallowRef('')
|
||||
let timer: number
|
||||
|
||||
|
||||
function updateTime() {
|
||||
const now = new Date();
|
||||
const hours = String(now.getHours()).padStart(2, '0');
|
||||
@ -80,176 +80,197 @@ const TimeDisplay = {
|
||||
currentTime.value = `${hours}:${minutes}:${seconds}`;
|
||||
currentDate.value = `${year}-${month}-${day} ${weekday}`;
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
updateTime()
|
||||
timer = setInterval(updateTime, 1000)
|
||||
})
|
||||
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearInterval(timer)
|
||||
})
|
||||
|
||||
|
||||
return { currentTime, currentDate }
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
navmenulist.value = props.menuList
|
||||
navtitle.value = props.projectName
|
||||
navmenulist.value = props.menuList
|
||||
navtitle.value = props.projectName
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
|
||||
|
||||
});
|
||||
function permissionClick(){
|
||||
function permissionClick() {
|
||||
if (props.isExecuteEvent) {
|
||||
return
|
||||
}
|
||||
showmodule.value = false
|
||||
showermission.value = true
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="system-box">
|
||||
<div class="Navbar-box">
|
||||
<div class="Navbar-box-titie">{{ navtitle }}</div>
|
||||
<div class="Navbar-menu-box">
|
||||
<div class="Navbar-menu-content">
|
||||
<TimeDisplay />
|
||||
<div class="Navbar-menu-item"
|
||||
:class="{ 'Navbar-menu-items': checkindex == index && item.children.length == 0 }"
|
||||
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)">
|
||||
{{ items.name }}
|
||||
</div>
|
||||
<template #reference>
|
||||
<div v-if="item.children.length > 0">{{ item.name }}</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
</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: 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 class="system-box">
|
||||
<div class="Navbar-box">
|
||||
<div class="Navbar-box-titie">
|
||||
<div class="Navbar-box-titie-text">
|
||||
{{ navtitle }}
|
||||
</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>
|
||||
<div class="Navbar-menu-box">
|
||||
<div class="Navbar-menu-content">
|
||||
<TimeDisplay />
|
||||
<div class="Navbar-menu-item"
|
||||
:class="{ 'Navbar-menu-items': checkindex == index && item.children.length == 0 }"
|
||||
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)">
|
||||
{{ items.name }}
|
||||
</div>
|
||||
<template #reference>
|
||||
<div v-if="item.children.length > 0">{{ item.name }}</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Navbar-box-right">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.system-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgb(0, 52, 102);
|
||||
.Navbar-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgb(0,52,102);
|
||||
.Navbar-box {
|
||||
height: 65px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.Navbar-menu-box {
|
||||
width: calc(100% - 400px);
|
||||
height: 63px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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%;
|
||||
height: 65px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
background: url(/images/navbg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding-left: 25px;
|
||||
.Navbar-box-titie {
|
||||
font-size: 25px;
|
||||
|
||||
.Navbar-menu-time {
|
||||
width: 150px;
|
||||
|
||||
.Navbar-menu-time-text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(to bottom, #ffffff, #0089ff);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
width: 340px;
|
||||
}
|
||||
|
||||
.Navbar-menu-time-text2 {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.Navbar-menu-box {
|
||||
width: calc(100% - 340px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 43px;
|
||||
padding-right: 20px;
|
||||
justify-content: space-between;
|
||||
|
||||
.Navbar-menu-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.Navbar-menu-time {
|
||||
width: 150px;
|
||||
|
||||
.Navbar-menu-time-text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.Navbar-menu-time-text2 {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.Navbar-menu-item {
|
||||
font-size: 14px;
|
||||
padding: 5px 15px;
|
||||
background: url(/images/navmenu.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-left: 15px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.Navbar-menu-items {
|
||||
background: url(/images/navmenucheck.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.Navbar-box-right {
|
||||
width: 165px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.Navbar-menu-item {
|
||||
font-size: 14px;
|
||||
padding: 5px 15px;
|
||||
background: url(/images/navmenu.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-left: 15px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.Navbar-menu-items {
|
||||
background: url(/images/navmenucheck.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.Navbar-box-right {
|
||||
width: 210px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.system-box-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.system-box-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</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;;
|
||||
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;;
|
||||
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);
|
||||
font-weight:700;
|
||||
}
|
||||
.tsmenu-popover.el-popover.el-popper {
|
||||
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;
|
||||
;
|
||||
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);
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
@ -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 { 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)
|
||||
|
||||
@ -193,7 +206,7 @@ function getmenuinfo() {
|
||||
menuList.value = res.data
|
||||
})
|
||||
moduleById(dvId.value).then(res => {
|
||||
if(res.data.data.canvas_style_data){
|
||||
if (res.data.data.canvas_style_data) {
|
||||
sfcCode.value = res.data.data.canvas_style_data
|
||||
}
|
||||
})
|
||||
@ -208,25 +221,24 @@ function goBack() {
|
||||
}
|
||||
function handleClick() {
|
||||
if (activeName.value == '预览') {
|
||||
console.log('预览')
|
||||
runCode()
|
||||
}
|
||||
}
|
||||
function saveClick(){
|
||||
function saveClick() {
|
||||
const params = {
|
||||
canvasStyleData:sfcCode.value,
|
||||
componentData:'',
|
||||
id:dvId.value
|
||||
canvasStyleData: sfcCode.value,
|
||||
componentData: '',
|
||||
id: dvId.value
|
||||
}
|
||||
moduleUpdate(params).then(res => {
|
||||
if(res.data.code == '0'){
|
||||
moduleUpdate(params).then(res => {
|
||||
if (res.data.code == '0') {
|
||||
ElMessage.success('保存成功')
|
||||
}else{
|
||||
} else {
|
||||
ElMessage.error('保存失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
function importNav(){
|
||||
function importNav() {
|
||||
sfcCode.value = defaultTemplate
|
||||
}
|
||||
</script>
|
||||
|
@ -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)
|
||||
@ -159,8 +158,7 @@ onMounted(() => {
|
||||
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
|
||||
sfcCode.value = res.data.data.canvas_style_data
|
||||
runCode()
|
||||
}
|
||||
})
|
||||
|
@ -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');
|
||||
}
|
||||
}
|
||||
//预览
|
||||
|
Loading…
Reference in New Issue
Block a user