fuguobin
1 year ago
17 changed files with 266 additions and 113 deletions
|
Before Width: | Height: | Size: 8.2 KiB After Width: | Height: | Size: 14 KiB |
@ -0,0 +1,111 @@ |
|||
/** |
|||
* Author: Fu Guobin |
|||
* Date: 2022/08/22 |
|||
* Last Modified by: Fu Guobin |
|||
* Last Modified time: 2023/08/28 |
|||
* Copyright:Daniel(Fu Guobin) |
|||
* Description:storage方法封装 |
|||
*/ |
|||
|
|||
import { ref, computed } from 'vue'; |
|||
|
|||
type StorageData = { |
|||
key: string; |
|||
value: any; |
|||
}; |
|||
|
|||
type StorageType = 'localStorage' | 'sessionStorage'; |
|||
|
|||
const getItem = (key: string, storageType: StorageType): any => { |
|||
debugger |
|||
try { |
|||
const storage = getStorage(storageType); |
|||
const item = storage.getItem(key); |
|||
if (item) { |
|||
return JSON.parse(item); |
|||
} |
|||
return null; |
|||
} catch (error) { |
|||
console.error(`Error getting item from ${storageType}: ${error}`); |
|||
return null; |
|||
} |
|||
}; |
|||
|
|||
const setItem = (key: string, value: any, storageType: StorageType): void => { |
|||
try { |
|||
const storage = getStorage(storageType); |
|||
const stringValue = JSON.stringify(value); |
|||
storage.setItem(key, stringValue); |
|||
} catch (error) { |
|||
console.error(`Error setting item in ${storageType}: ${error}`); |
|||
} |
|||
}; |
|||
|
|||
const removeItem = (key: string, storageType: StorageType): void => { |
|||
try { |
|||
const storage = getStorage(storageType); |
|||
storage.removeItem(key); |
|||
} catch (error) { |
|||
console.error(`Error removing item from ${storageType}: ${error}`); |
|||
} |
|||
}; |
|||
|
|||
const clearStorage = (storageType: StorageType): void => { |
|||
try { |
|||
const storage = getStorage(storageType); |
|||
storage.clear(); |
|||
} catch (error) { |
|||
console.error(`Error clearing ${storageType}: ${error}`); |
|||
} |
|||
}; |
|||
|
|||
const getStorage = (storageType: StorageType): Storage => { |
|||
return storageType === 'localStorage' ? localStorage : sessionStorage; |
|||
}; |
|||
|
|||
const storageData = ref<Array<StorageData>>([]); |
|||
|
|||
const initializeStorage = (storageType: StorageType): void => { |
|||
const storage = getStorage(storageType); |
|||
const keys = Object.keys(storage); |
|||
|
|||
storageData.value = keys.map((key) => ({ |
|||
key, |
|||
value: getItem(key, storageType) |
|||
})); |
|||
}; |
|||
|
|||
const useStorage = (storageType: StorageType) => { |
|||
const getUseStorage = () => { |
|||
debugger |
|||
return computed(() => storageData.value); |
|||
}; |
|||
|
|||
const setUseStorage = (key: string, value: any) => { |
|||
setItem(key, value, storageType); |
|||
const newData = { key, value }; |
|||
storageData.value.push(newData); |
|||
}; |
|||
|
|||
const removeUseStorage = (key: string) => { |
|||
removeItem(key, storageType); |
|||
const index = storageData.value.findIndex((item) => item.key === key); |
|||
if (index !== -1) { |
|||
storageData.value.splice(index, 1); |
|||
} |
|||
}; |
|||
|
|||
const clearUseStorage = () => { |
|||
clearStorage(storageType); |
|||
storageData.value = []; |
|||
}; |
|||
|
|||
return { |
|||
getUseStorage, |
|||
setUseStorage, |
|||
removeUseStorage, |
|||
clearUseStorage |
|||
}; |
|||
}; |
|||
|
|||
export default useStorage; |
|||
@ -1,76 +1,70 @@ |
|||
<template> |
|||
<n-menu |
|||
ref="menuInstRef" |
|||
class="menu" |
|||
:indent="0" |
|||
:options="menuOptions" |
|||
v-model:value="selectedKey" |
|||
key-field="deptId" |
|||
label-field="deptName" |
|||
default-expand-all |
|||
:watch-props="['defaultExpandedKeys']" |
|||
:render-label="renderMenuLabel" |
|||
@update:value="menuUpdateValue" |
|||
/> |
|||
<n-menu ref="menuInstRef" class="menu" :indent="0" :options="menuOptions" v-model:value="selectedKey" key-field="deptId" |
|||
label-field="deptName" default-expand-all :watch-props="['defaultExpandedKeys']" :render-label="renderMenuLabel" |
|||
@update:value="menuUpdateValue" /> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import type { MenuOption } from 'naive-ui'; |
|||
// import { NEllipsis } from 'naive-ui'; |
|||
import { getMenu } from '@/api/table/list'; |
|||
import mitt from '@/plugins/bus'; |
|||
const menuOptions = ref([]); |
|||
const selectedKey = ref(); |
|||
import type { MenuOption } from 'naive-ui'; |
|||
// import { NEllipsis } from 'naive-ui'; |
|||
import { getMenu } from '@/api/table/list'; |
|||
import useStorage from '@/utils/useStorage' |
|||
import mitt from '@/plugins/bus'; |
|||
const menuOptions = ref([]); |
|||
const selectedKey = ref(); |
|||
const sessionStorageIns = useStorage('sessionStorage'); |
|||
|
|||
const emit = defineEmits(['tableMenuData']); |
|||
const emit = defineEmits(['tableMenuData']); |
|||
|
|||
onMounted(() => { |
|||
menuApi(); |
|||
onMounted(() => { |
|||
menuApi(); |
|||
}); |
|||
|
|||
function menuApi() { |
|||
//获取左侧菜单 |
|||
getMenu().then((res: any) => { |
|||
if (res.code === 200) { |
|||
const key = |
|||
res.data[0] && res.data[0].children && res.data[0].children.length > 0 |
|||
? res.data[0].children[0].deptId |
|||
: res.data[0].deptId; |
|||
removeChildren(res.data); |
|||
menuOptions.value = res.data; |
|||
selectedKey.value = key; |
|||
sessionStorageIns.setUseStorage('deptId', key); |
|||
mitt.emit('menuKey', key); |
|||
emit('tableMenuData', res.data); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function menuApi() { |
|||
//获取左侧菜单 |
|||
getMenu().then((res: any) => { |
|||
if (res.code === 200) { |
|||
const key = |
|||
res.data[0] && res.data[0].children && res.data[0].children.length > 0 |
|||
? res.data[0].children[0].deptId |
|||
: res.data[0].deptId; |
|||
removeChildren(res.data); |
|||
menuOptions.value = res.data; |
|||
selectedKey.value = key; |
|||
mitt.emit('menuKey', key); |
|||
emit('tableMenuData', res.data); |
|||
} |
|||
}); |
|||
function removeChildren(menu: any) { |
|||
//处理菜单空children |
|||
if (!Array.isArray(menu)) { |
|||
return; |
|||
} |
|||
|
|||
function removeChildren(menu:any) { |
|||
//处理菜单空children |
|||
if (!Array.isArray(menu)) { |
|||
return; |
|||
menu.forEach((item) => { |
|||
if (item.children && item.children.length === 0) { |
|||
delete item.children; |
|||
} else { |
|||
removeChildren(item.children); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
menu.forEach((item) => { |
|||
if (item.children && item.children.length === 0) { |
|||
delete item.children; |
|||
} else { |
|||
removeChildren(item.children); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function renderMenuLabel(option: MenuOption) { |
|||
//菜单标题增加提示 |
|||
return h(NEllipsis, null, option.deptName as string); |
|||
} |
|||
function renderMenuLabel(option: MenuOption) { |
|||
//菜单标题增加提示 |
|||
return h(NEllipsis, null, option.deptName as string); |
|||
} |
|||
|
|||
function menuUpdateValue(key: string, item: MenuOption) { |
|||
//点击菜单 |
|||
mitt.emit('menuKey', key); |
|||
console.log(key, item); |
|||
} |
|||
function menuUpdateValue(key: string, item: MenuOption) { |
|||
//点击菜单 |
|||
sessionStorageIns.setUseStorage('deptId', key); |
|||
mitt.emit('menuKey', key); |
|||
console.log(key, item); |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import '../index.scss'; |
|||
@import '../index.scss'; |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue