菜单管理支持打开外链

2025-04-29 06:20:16 +08:00 · 2022-06-28 12:48:06 +08:00 · 2022-06-28 12:48:06 +08:00 · 880d0a3ae9
commit 880d0a3ae9
parent a303950eee
8 changed files with 71 additions and 13 deletions
--- a/data/magic-api/api/系统管理/菜单管理/当前用户菜单.ms
+++ b/data/magic-api/api/系统管理/菜单管理/当前用户菜单.ms
@ -5,7 +5,7 @@
  "groupId" : "67b2ce258e24491194b74992958c74aa",
  "name" : "当前用户菜单",
  "createTime" : null,
-  "updateTime" : 1656340766427,
+  "updateTime" : 1656390120715,
  "lock" : "0",
  "createBy" : null,
  "updateBy" : null,
@ -564,7 +564,8 @@ var menus = db.select("""
        sm.sort,
        sm.icon,
        sm.keep_alive,
-        sm.component_name
+        sm.component_name,
+        sm.open_mode
    from sys_menu sm where 1=1
    ?{userId != '1',
        and sm.id in (
--- a/data/magic-api/api/系统管理/菜单管理/获取菜单tree.ms
+++ b/data/magic-api/api/系统管理/菜单管理/获取菜单tree.ms
@ -5,7 +5,7 @@
  "groupId" : "67b2ce258e24491194b74992958c74aa",
  "name" : "获取菜单tree",
  "createTime" : null,
-  "updateTime" : 1648014003694,
+  "updateTime" : 1656386304094,
  "lock" : "0",
  "createBy" : null,
  "updateBy" : null,
@ -119,7 +119,7 @@
 }
 ================================
 var toTree = (list,pid) => select t.*,toTree(list,t.id) children from list t where t.pid = pid
-var list = toTree(db.select('select id,name,pid,is_show,url,sort,permission,desc_ribe,icon,keep_alive,component_name from sys_menu where is_del = 0 order by sort'),'0')
+var list = toTree(db.select('select id,name,pid,is_show,url,sort,permission,desc_ribe,icon,keep_alive,component_name,open_mode from sys_menu where is_del = 0 order by sort'),'0')

 return {
    list: list,
--- a/db/magic-boot.sql
+++ b/db/magic-boot.sql
@ -198,6 +198,7 @@ CREATE TABLE `sys_menu` (
  `permission` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '权限',
  `sort` int(12) DEFAULT NULL COMMENT '排序',
  `component_name` varchar(36) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '组件名称',
+  `open_mode` char(1) COLLATE utf8mb4_unicode_ci DEFAULT '0' COMMENT '打开方式，0：iframe  1：新标签页',
  `is_del` int(1) DEFAULT '0' COMMENT '是否删除：0未删除，1已删除',
  `create_by` varchar(36) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '创建人',
  `create_date` datetime DEFAULT NULL COMMENT '创建时间',
--- a/magic-boot-ui/src/scripts/router.js
+++ b/magic-boot-ui/src/scripts/router.js
@ -21,9 +21,9 @@ const routes = [
    redirect: '/home',
    children: [
      {
-        name: '首页',
        path: '/home',
-        component: () => import('@/views/home.vue')
+        component: () => import('@/views/home.vue'),
+        meta: { title: '首页' }
      }
    ]
  },
@ -35,7 +35,6 @@ const routes = [
    hidden: true,
    children: [{
      path: '/system/user/user-center',
-      name: '个人中心',
      component: () => import('@/views/system/user/user-center'),
      meta: { title: '个人中心' }
    }]
--- a/magic-boot-ui/src/scripts/routerPermission.js
+++ b/magic-boot-ui/src/scripts/routerPermission.js
@ -8,7 +8,22 @@ export const filterAsyncRouter = (routers, level) => {
  level = level || 0
  const accessedRouters = routers.filter(router => {
    if (router.isShow === 1) {
-      if (router.componentName) {
+      var setIframe = () => {
+        router.component = loadView(`/common/iframe`)
+        router.props = { url: router.url }
+        router.path = "/" + common.uuid()
+      }
+      if(router.url.startsWith('http')){
+        if(router.openMode == '0'){
+          setIframe()
+        }
+      } else if(router.url.startsWith('/') && router.url.indexOf('.htm') != -1) {
+        if(router.openMode == '0'){
+          setIframe()
+        }else{
+          router.path = location.href.substring(0, location.href.indexOf('/', location.href.indexOf('/', location.href.indexOf('/') + 1) + 1)) + router.path
+        }
+      } else if (router.componentName) {
        router.component = loadView(`/common/show-component`)
        router.props = { name: router.componentName }
      } else if (router.component) {
--- a/magic-boot-ui/src/views/common/iframe.vue
+++ b/magic-boot-ui/src/views/common/iframe.vue
@ -0,0 +1,23 @@
+<script setup>
+const props = defineProps({
+  url: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<template>
+  <iframe :src="url" width="100%" height="100%" frameborder="0"></iframe>
+</template>
+
+<style scoped>
+iframe{
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+</style>
+
--- a/magic-boot-ui/src/views/system/menu/menu-form.vue
+++ b/magic-boot-ui/src/views/system/menu/menu-form.vue
@ -5,7 +5,7 @@
 </style>

 <template>
-  <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="80px">
+  <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="100px">
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="菜单类型" prop="type">
@ -24,10 +24,22 @@
    <el-form-item label="菜单名称" prop="name">
      <el-input v-model="temp.name" />
    </el-form-item>
-    <el-form-item label="菜单链接" prop="url" v-if="menuType == 'menu'">
+    <el-form-item prop="url" v-if="menuType == 'menu'">
+      <template #label>
+        <el-tooltip content="如果要打开外链，请以http开头。也可以引用静态页面，比如：/index.html" placement="top">
+          <el-icon style="margin-top: calc(16px - 0.5em);"><ElIconQuestionFilled /></el-icon>
+        </el-tooltip>
+        菜单链接
+      </template>
      <el-input v-model="temp.url" />
    </el-form-item>
-    <el-form-item label="关联组件" prop="componentName" v-if="menuType == 'menu'">
+    <el-form-item label="打开方式" prop="openMode" v-if="menuType == 'menu' && (temp.url.startsWith('http') || (temp.url.startsWith('/') && temp.url.indexOf('.htm') != -1))">
+      <el-radio-group v-model="openModeRef">
+        <el-radio-button label="0">iframe</el-radio-button>
+        <el-radio-button label="1">新标签页</el-radio-button>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="关联组件" prop="componentName" v-if="menuType == 'menu' && !(temp.url.startsWith('http') || (temp.url.startsWith('/') && temp.url.indexOf('.htm') != -1))">
      <el-tree-select v-model="temp.componentName" :data="componentTree" :key="temp.componentName" clearable style="width: 100%" placeholder=" " />
    </el-form-item>
    <el-form-item label="权限标识" prop="permission" v-if="menuType == 'button'">
@ -99,6 +111,7 @@ const componentTree = ref()
 const dataForm = ref()
 const iconDialog = ref()
 const menuType = ref('menu')
+const openModeRef = ref('0')
 const getTemp = () => {
  return {
    id: '',
@ -111,7 +124,8 @@ const getTemp = () => {
    pid: 0,
    icon: '',
    keepAlive: 0,
-    componentName: ''
+    componentName: '',
+    openMode: '0'
  }
 }

@ -163,6 +177,10 @@ watch(menuType, (type) => {
  }
 })

+watch(openModeRef, (value) => {
+  temp.value.openMode = value
+})
+
 function save(d) {
  dataForm.value.validate((valid) => {
    if (valid) {
@ -222,6 +240,7 @@ function getInfo(row) {
  for (var t in temp.value) {
    temp.value[t] = row[t]
  }
+  openModeRef.value = temp.value.openMode || '0'
  menuType.value = temp.value.url ? 'menu' : 'button'
  temp.value.name = temp.value.name.replaceAll(/<font.*?>(.*?)<\/font>/g,'$1')
  nextTick(() => {
--- a/magic-boot-ui/src/views/system/menu/menu-list.vue
+++ b/magic-boot-ui/src/views/system/menu/menu-list.vue
@ -26,7 +26,7 @@

    <mb-table ref="table" v-bind="tableOptions" v-if="menuData && menuData.length > 0 && refreshTable" />

-    <mb-dialog ref="menuFormDialog" width="970px" :title="dialogTitle" @confirm-click="menuFormRef.save($event)">
+    <mb-dialog ref="menuFormDialog" width="1050px" :title="dialogTitle" @confirm-click="menuFormRef.save($event)">
      <template #content>
        <menu-form ref="menuFormRef" :title="dialogTitle" :menu-tree="menuTree" :menu-data="menuData" @reload-table="reloadTable" />
      </template>