预览加载菜单

This commit is contained in:
jingna 2025-06-17 10:20:02 +08:00
parent d9ce1f746b
commit 98898b9bce
3 changed files with 83 additions and 74 deletions

View File

@ -5,36 +5,55 @@ import { useRoute, useRouter } from 'vue-router'
import { getMenuTree } from '@/api/permission/menu' import { getMenuTree } from '@/api/permission/menu'
import { moduleList } from '@/api/application/module' import { moduleList } from '@/api/application/module'
const route = useRoute() const route = useRoute()
const applicationId:any = ref('') const applicationId: any = ref('')
const menuList = ref([]) const menuList = ref([])
const isNavbar = ref(false) const isNavbar = ref(false)
const projectName:any = ref('') const projectName: any = ref('')
const projectList:any = ref({}) const projectList: any = ref({})
onMounted(()=>{ onMounted(() => {
if (route.query.id) { if (route.query.id) {
applicationId.value = route.query.id applicationId.value = route.query.id
projectName.value = route.query.name projectName.value = route.query.name
getmenuinfo() getmenuinfo()
} }
}) })
const processMenuTree = (menuNodes: any[], moduleData: any[]) => {
const typeMap = new Map(
moduleData.map(({ id, type }) => [id, type])
);
const traverseMenu = (nodes: any[]) => {
for (const node of nodes) {
if (node.module_id && typeMap.has(node.module_id)) {
node.module_type = typeMap.get(node.module_id);
}
if (node.children?.length) {
traverseMenu(node.children);
}
}
};
traverseMenu(menuNodes);
return menuNodes;
};
function getmenuinfo() { function getmenuinfo() {
const params = { const params = {
appId: applicationId.value, appId: applicationId.value,
name:'', name: '',
isdisplay:'' isdisplay: ''
} }
getMenuTree(params).then(res => { getMenuTree(params).then(res => {
menuList.value = res.data menuList.value = res.data
const paramss = {appId:applicationId.value} const paramss = { appId: applicationId.value }
moduleList(paramss).then(ress => { moduleList(paramss).then(ress => {
var arr = ress.data.data var arr = ress.data.data
let list:any = {} let list: any = {}
arr.forEach((item:any) => { menuList.value = processMenuTree(menuList.value, arr)
if(item.type == '02' && item.node_type == '02'){ arr.forEach((item: any) => {
if (item.type == '02' && item.node_type == '02') {
list = item list = item
} }
}) })
if(list.id){ if (list.id) {
projectList.value = list projectList.value = list
isNavbar.value = true isNavbar.value = true
} }
@ -44,8 +63,8 @@ function getmenuinfo() {
</script> </script>
<template> <template>
<div class="system-box"> <div class="system-box">
<Navbar v-if="isNavbar" :menuList="menuList" :projectName="projectName" <Navbar v-if="isNavbar" :menuList="menuList" :projectName="projectName" :isFixed="true"
:isFixed="true" :projectId="projectList.id" :applicationId="applicationId" :isExecuteEvent="false"> :projectId="projectList.id" :applicationId="applicationId" :isExecuteEvent="false">
</Navbar> </Navbar>
</div> </div>
</template> </template>

View File

@ -43,7 +43,13 @@ function menuclick(index: any) {
return return
} }
currentMoudleId.value = navmenulist.value[index].module_id currentMoudleId.value = navmenulist.value[index].module_id
if (navmenulist.value[index].module_id && navmenulist.value[index].module_id !== '') {
currentMoudleId.value = navmenulist.value[index].module_id
currentrow.value = navmenulist.value[index]
showmodule.value = true showmodule.value = true
showermission.value = false
showUserInfo.value = false
}
} }
} }
function childmenuclick(item: any) { function childmenuclick(item: any) {
@ -54,8 +60,8 @@ function childmenuclick(item: any) {
showmodule.value = false showmodule.value = false
showUserInfo.value = false showUserInfo.value = false
if (item.module_id && item.module_id !== '') { if (item.module_id && item.module_id !== '') {
currentrow.value = item
currentMoudleId.value = item.module_id currentMoudleId.value = item.module_id
console.log('传递给 Assocmodule 的 props:',item)
showmodule.value = true showmodule.value = true
} else { } else {
showmodule.value = false showmodule.value = false
@ -179,7 +185,7 @@ function userdetails(){
<div v-if="!props.isExecuteEvent" class="system-box-content" <div v-if="!props.isExecuteEvent" class="system-box-content"
:style="{ height: props.isFixed ? 'calc(100vh - 65px)' : 'calc(100vh - 125px)' }"> :style="{ height: props.isFixed ? 'calc(100vh - 65px)' : 'calc(100vh - 125px)' }">
<Assocmodule v-if="showmodule" :applicationId="props.applicationId" <Assocmodule v-if="showmodule" :applicationId="props.applicationId"
:moduleinfo="{ module_id: currentMoudleId }" /> :moduleinfo="currentrow" />
<PermissionSet v-if="showermission" /> <PermissionSet v-if="showermission" />
<UserInfoSet v-if="showUserInfo" :applicationId="props.applicationId" /> <UserInfoSet v-if="showUserInfo" :applicationId="props.applicationId" />
</div> </div>

View File

@ -1,5 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted, onUnmounted,computed, reactive,nextTick,onBeforeMount, watch } from 'vue' import { ref, onMounted, onUnmounted, computed, reactive, nextTick, onBeforeMount, watch } from 'vue'
import DvPreview from '@/viewsnew/data-visualization/DvPreview.vue' import DvPreview from '@/viewsnew/data-visualization/DvPreview.vue'
import FormCreate from '@/viewsnew/common/FormCreate.vue' import FormCreate from '@/viewsnew/common/FormCreate.vue'
import { initCanvasData } from '@/utils/canvasUtils' import { initCanvasData } from '@/utils/canvasUtils'
@ -7,8 +7,8 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { moduleList } from '@/api/application/module' import { moduleList } from '@/api/application/module'
import Navbar from '@/viewsnew/application/SfcEditor/NavbarEditor/assocPage.vue' import Navbar from '@/viewsnew/application/SfcEditor/NavbarEditor/assocPage.vue'
const props = defineProps({ const props = defineProps({
moduleinfo:Object, moduleinfo: Object,
applicationId:String applicationId: String
}) })
const dvMainStore = dvMainStoreWithOut() const dvMainStore = dvMainStoreWithOut()
const showPosition = ref("preview") const showPosition = ref("preview")
@ -69,36 +69,30 @@ onBeforeMount(() => {
dvMainStore.canvasDataInit() dvMainStore.canvasDataInit()
}) })
function getInit() { function getInit() {
loading.value = true loading.value = true
let params = {appId:props.applicationId} const params = {
moduleList(params).then(res => { id: props.moduleinfo.module_id,
let list:any = {} type: props.moduleinfo.module_type
const arr = res.data.data
arr.forEach((item:any) => {
if(item.id === props.moduleinfo.module_id){
list = item
} }
}) handleNodeClick(params)
handleNodeClick(list)
})
} }
function handleNodeClick(e){ function handleNodeClick(e) {
isFormCreate.value = false isFormCreate.value = false
dataInitState.value = false dataInitState.value = false
isNavbar.value = false isNavbar.value = false
if(e.type == '0301'){ if (e.type == '0301') {
busiFlag.value = 'dashboard' busiFlag.value = 'dashboard'
loadCanvasData(e.id,9,0) loadCanvasData(e.id, 9, 0)
loading.value = false loading.value = false
}else if(e.type == '03'){ } else if (e.type == '03') {
busiFlag.value = 'dataV' busiFlag.value = 'dataV'
loading.value = false loading.value = false
loadCanvasData(e.id,9,0) loadCanvasData(e.id, 9, 0)
}else if(e.type == '04'||e.type == '05'||e.type == '06'){ } else if (e.type == '04' || e.type == '05' || e.type == '06') {
moduleInfo.value = e moduleInfo.value = e
isFormCreate.value = true isFormCreate.value = true
loading.value = false loading.value = false
} else if(e.type == '02'){ } else if (e.type == '02') {
isNavbar.value = true isNavbar.value = true
loading.value = false loading.value = false
} }
@ -107,22 +101,12 @@ function handleNodeClick(e){
</script> </script>
<template> <template>
<div v-loading="loading" style="width: 100%;height: 100%;overflow: hidden;"> <div v-loading="loading" style="width: 100%;height: 100%;overflow: hidden;">
<dv-preview <dv-preview ref="dvPreviewRef" class="dvPreviewRef" v-if="state.canvasStylePreview && dataInitState"
ref="dvPreviewRef" :show-position="showPosition" :canvas-data-preview="state.canvasDataPreview"
class="dvPreviewRef" :canvas-style-preview="state.canvasStylePreview" :canvas-view-info-preview="state.canvasViewInfoPreview"
v-if="state.canvasStylePreview && dataInitState" :dv-info="state.dvInfo" :cur-preview-gap="state.curPreviewGap" :download-status="downloadStatus"></dv-preview>
: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> <form-create v-if="isFormCreate" :moduleInfo="moduleInfo"></form-create>
<Navbar v-if="isNavbar"></Navbar> <Navbar v-if="isNavbar"></Navbar>
</div> </div>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped></style>
</style>