修改导航样式权限按钮

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

@@ -1,5 +1,5 @@
 <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'
@@ -10,12 +10,12 @@ const props = defineProps({
     default: () => [] // 设置安全默认值
   },
   isFixed: Boolean,
-    projectName:String,
+  projectName: String,
-    applicationId: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) {
+function menuclick(index: any) {
-    if(navmenulist.value[index].children.length == 0 || navmenulist.value[index].children == undefined){
+  if (navmenulist.value[index].children.length == 0 || navmenulist.value[index].children == undefined) {
     checkindex.value = index
-        if(props.isExecuteEvent){
+    if (props.isExecuteEvent) {
       return
     }
     currentMoudleId.value = navmenulist.value[index].module_id
     showmodule.value = true
   }
 }
-function childmenuclick(item:any){
+function childmenuclick(item: any) {
-    if(props.isExecuteEvent){
+  if (props.isExecuteEvent) {
     return
   }
   showermission.value = false
   showmodule.value = false
-  if(item.module_id && item.module_id !== ''){
+  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 = {
@@ -100,7 +100,10 @@ onMounted(() => {
 onBeforeUnmount(() => {
 
 });
-function permissionClick(){
+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"
+              <div v-for="(items, indexs) in item.children" :key="indexs" class="Navbar-menu-item-child-item"
-                                class="Navbar-menu-item-child-item" @click="()=>childmenuclick(items)">
+                @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)'}">
+    <div v-if="!props.isExecuteEvent" class="system-box-content"
-          <Assocmodule v-if="showmodule" :applicationId="props.applicationId" 
+      :style="{ height: props.isFixed ? 'calc(100vh - 65px)' : 'calc(100vh - 125px)' }">
-            :moduleinfo="{module_id:currentMoudleId}" />
+      <Assocmodule v-if="showmodule" :applicationId="props.applicationId" :moduleinfo="{ module_id: currentMoudleId }" />
-          <!-- <PermissionSet v-if="showermission" /> -->
+      <PermissionSet v-if="showermission" />
     </div>
   </div>
 </template>
@@ -147,34 +156,40 @@ function permissionClick(){
 .system-box {
   width: 100%;
   height: 100%;
-    background-color: rgb(0,52,102);
+  background-color: rgb(0, 52, 102);
   .Navbar-box {
     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 {
+      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,36 +235,42 @@ function permissionClick(){
     }
 
   }
+
   .system-box-content {
     width: 100%;
   }
 }
 </style>
 <style>
-  .tsmenu-popover.el-popover.el-popper {
+.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;;
+.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 {
+
+.tsmenu-popover .Navbar-menu-item-child-item {
   padding: 5px 15px;
   cursor: pointer;
   text-align: center;
-    }
+}
-    .tsmenu-popover .Navbar-menu-item-child-item:hover {
+
+.tsmenu-popover .Navbar-menu-item-child-item:hover {
   color: rgb(0, 255, 254);
   background: rgb(2, 88, 161);
-      font-weight:700;
+  font-weight: 700;
-    }
+}
 </style>

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

@@ -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({
+    const dynamicProps = Vue.reactive({
-      menuList: menuList.value, //菜单数据
+      menuList: menuList.value,
       isFixed: false,
-      projectName: appname.value, //项目名
+      projectName: appname.value,
-      applicationId: applicationId.value, //项目id
+      applicationId: applicationId.value,
-      isExecuteEvent: false //是否执行事件
+      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,
+    canvasStyleData: sfcCode.value,
-    componentData:'',
+    componentData: '',
-    id:dvId.value
+    id: dvId.value
   }
   moduleUpdate(params).then(res => {
-    if(res.data.code  == '0'){
+    if (res.data.code == '0') {
       ElMessage.success('保存成功')
-    }else{
+    } else {
       ElMessage.error('保存失败')
     }
   })
 }
-function importNav(){
+function importNav() {
   sfcCode.value = defaultTemplate
 }
 </script>

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

@@ -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()
         }
     })

core/core-frontend/src/viewsnew/application/module/header.vue

@@ -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');
   }
 }
 //预览