菜单使用真实静态数据

src/components/table-ability.vue

@@ -12,9 +12,9 @@ import { onMounted, reactive, ref, toRefs, watch } from 'vue'
 const emit = defineEmits(['searchBtn', 'refreshBtn', 'downloadBtn'])
 
 interface Props {
-    isSearch: Boolean
+    isSearch?: Boolean
-    isRefresh: Boolean
+    isRefresh?: Boolean
-    isDownload: Boolean
+    isDownload?: Boolean
 }
 const props = withDefaults(defineProps<Props>(), {
     isSearch: () => true,

src/static-data/menu.ts

@@ -0,0 +1,140 @@
+import type { MenuListItem } from '@/utils/public-interface'
+
+export const getMenuData = () => {
+    const menu: Array<MenuListItem> = []
+    let sum = 10
+    const btn = (name: string) => {
+        sum += 1
+        return {
+            id: sum,
+            menuName: name,
+            order: 1,
+            icon: '',
+            route: '',
+            type: '按钮',
+        } as MenuListItem
+    }
+    menu.push({
+        id: '1',
+        menuName: '首页',
+        order: 1,
+        icon: 'icon-shouye',
+        route: '/medical/home',
+        type: '菜单',
+    })
+    menu.push({
+        id: '2',
+        menuName: '权限管理',
+        order: 1,
+        icon: 'icon-users',
+        route: '/permissions-manage',
+        type: '菜单',
+        children: [
+            {
+                id: '2-1',
+                menuName: '医生管理',
+                order: 1,
+                icon: '',
+                route: '/permissions-manage/doctor-manage',
+                type: '菜单',
+                children: [btn('新增'), btn('导入'), btn('删除'), btn('导出'), btn('密码'), btn('修改')]
+            }, {
+                id: '2-2',
+                menuName: '角色管理',
+                order: 1,
+                icon: '',
+                route: '/permissions-manage/role-manage',
+                type: '菜单',
+                children: [btn('新增'), btn('导入'), btn('删除'), btn('导出'), btn('授权'), btn('修改')]
+            }, {
+                id: '2-3',
+                menuName: '菜单管理',
+                order: 1,
+                icon: '',
+                route: '/permissions-manage/menu-manage',
+                type: '菜单',
+                children: [btn('新增'), btn('展开/折叠'), btn('删除'), btn('修改')]
+            }
+        ]
+    })
+    menu.push({
+        id: '3',
+        menuName: '患者管理',
+        order: 1,
+        icon: 'icon-renyuanguanli',
+        route: '/patients-manage',
+        type: '菜单',
+        children: [
+            {
+                id: '3-1',
+                menuName: '患者管理',
+                order: 1,
+                icon: '',
+                route: '/patients-manage/patients-manage',
+                type: '菜单',
+                children: [btn('新增'), btn('导入'), btn('删除'), btn('导出')]
+            },{
+                id: '3-2',
+                menuName: '手术信息',
+                order: 1,
+                icon: '',
+                route: '/patients-manage/surgery-info',
+                type: '菜单',
+                children: [btn('导出')]
+            }
+        ]
+    })
+    menu.push({
+        id: '4',
+        menuName: '远程管理',
+        order: 1,
+        icon: 'icon-anquanbaozhang',
+        route: '/remote-manage',
+        type: '菜单',
+        children: [
+            {
+                id: '4-1',
+                menuName: '远程管理',
+                order: 1,
+                icon: '',
+                route: '/remote-manage/remote-manage',
+                type: '菜单',
+            },{
+                id: '4-2',
+                menuName: '远程控制',
+                order: 1,
+                icon: '',
+                route: '/patients-manage/surgery-info',
+                type: '菜单',
+            }
+        ]
+    })
+    menu.push({
+        id: '5',
+        menuName: '日志管理',
+        order: 1,
+        icon: 'icon-setting',
+        route: '/logs-manage',
+        type: '菜单',
+        children: [
+            {
+                id: '5-1',
+                menuName: '消息管理',
+                order: 1,
+                icon: '',
+                route: '/logs-manage/message-manage',
+                type: '菜单',
+                children: [btn('新增'), btn('修改'), btn('删除')]
+            },{
+                id: '5-2',
+                menuName: '日志管理',
+                order: 1,
+                icon: '',
+                route: '/logs-manage/logs-manage',
+                type: '菜单',
+                children: [btn('删除'), btn('导出'), btn('详情')]
+            }
+        ]
+    })
+    return menu
+}

src/utils/public-interface.ts

@@ -3,7 +3,7 @@ export interface MenuItem {
     path: string
 }
 
-export interface RemoteItem{
+export interface RemoteItem {
     isRemote: boolean
     dataAlarm: boolean
     title: string
@@ -12,3 +12,13 @@ export interface RemoteItem{
     patientCode: string
     index: number
 }
+
+export interface MenuListItem {
+    id: string | number
+    menuName: string
+    order: number
+    icon: string
+    route: string
+    type: '菜单' | '按钮'
+    children?: Array<MenuListItem>
+}

src/views/permissions-manage/form/empower-dialog.vue

@@ -19,9 +19,10 @@
 <script lang='ts' setup>
 import { onMounted, reactive, ref, toRefs, watch } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { getMenuData } from '@/static-data/menu'
 
 const props = {
-    label: 'label',
+    label: 'menuName',
     children: 'children'
 }
 let treeIds: Array<string> = []
@@ -49,7 +50,7 @@ onMounted(() => {
 function open() {
     dialogVisible.value = true
     setTimeout(() => {
-        setTreeChecked(['1-1-1'])
+        setTreeChecked(['0'])
     }, 0)
 }
 function close() {
@@ -77,18 +78,17 @@ function initTree() {
             ]
         }
     ]
+    treeData.value = getMenuData()
     treeIds = []
-    // 储存前两级id，全选、展开使用
+    const setTreeIds = (ary: any) => {
-    for (let i = 0; i < treeData.value.length; i++) {
+        for (let i = 0; i < ary.length; i++) {
-        const levela = treeData.value[i]
+            const obj = ary[i]
-        treeIds.push(levela.id)
+            treeIds.push(obj.id)
-        if (levela.children) {
+            if(obj.children && obj.children.length > 0) setTreeIds(obj.children)
-            for (let j = 0; j < levela.children.length; j++) {
-                const levelb = levela.children[j];
-                treeIds.push(levelb.id)
-            }
         }
     }
+    // 储存所有节点id，全选、展开使用
+    setTreeIds(treeData.value)
 }
 function setTreeChecked(e?: Array<any>) {
     e && treeRef.value.setCheckedKeys(e)
@@ -107,6 +107,7 @@ const toggleExpandChange = (e: boolean) => {
     }
 }
 const toggleSelectAllChange = (e: boolean) => {
+    console.log(e)
     if (!e) treeRef.value.setCheckedNodes(treeIds)
     else treeRef.value.setCheckedKeys(treeIds)
 }

src/views/permissions-manage/menu-manage.vue

@@ -48,6 +48,7 @@
 import { onMounted, reactive, ref, toRefs, watch } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { tableRemoveRow, exportData } from '@/utils/table-util'
+import { getMenuData } from '@/static-data/menu'
 import CommonPagination from '@/components/common-pagination.vue'
 import MenuForm from './form/menu-form.vue'
 
@@ -70,26 +71,7 @@ function initData() {
     loading.value = true
     tableData.value = []
     setTimeout(() => {
-        while (tableData.value.length < 10) {
+        tableData.value = getMenuData()
-            tableData.value.push({
-                id: tableData.value.length,
-                menuName: '权限管理',
-                order: tableData.value.length + 1,
-                icon: 'icon-shouye-zhihui',
-                route: '/permissions-manage',
-                type: '菜单',
-                children: [
-                    {
-                        id: tableData.value.length + '-1',
-                        menuName: '权限管理',
-                        order: tableData.value.length + 1,
-                        icon: 'icon-shouye-zhihui',
-                        route: '/permissions-manage',
-                        type: '菜单',
-                    }
-                ]
-            })
-        }
         loading.value = false
     }, 200);
 }