菜单使用真实静态数据

This commit is contained in:
gaofy 2023-12-28 14:26:39 +08:00
parent 97abbeedb9
commit 4f1d83cf2e
5 changed files with 168 additions and 35 deletions

View File

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

140
src/static-data/menu.ts Normal file
View File

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

View File

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

View File

@ -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使
for (let i = 0; i < treeData.value.length; i++) {
const levela = treeData.value[i]
treeIds.push(levela.id)
if (levela.children) {
for (let j = 0; j < levela.children.length; j++) {
const levelb = levela.children[j];
treeIds.push(levelb.id)
}
const setTreeIds = (ary: any) => {
for (let i = 0; i < ary.length; i++) {
const obj = ary[i]
treeIds.push(obj.id)
if(obj.children && obj.children.length > 0) setTreeIds(obj.children)
}
}
// 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)
}

View File

@ -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.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: '菜单',
}
]
})
}
tableData.value = getMenuData()
loading.value = false
}, 200);
}