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> |
<template> |
||||
<n-menu |
<n-menu ref="menuInstRef" class="menu" :indent="0" :options="menuOptions" v-model:value="selectedKey" key-field="deptId" |
||||
ref="menuInstRef" |
label-field="deptName" default-expand-all :watch-props="['defaultExpandedKeys']" :render-label="renderMenuLabel" |
||||
class="menu" |
@update:value="menuUpdateValue" /> |
||||
: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> |
</template> |
||||
|
|
||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||
import type { MenuOption } from 'naive-ui'; |
import type { MenuOption } from 'naive-ui'; |
||||
// import { NEllipsis } from 'naive-ui'; |
// import { NEllipsis } from 'naive-ui'; |
||||
import { getMenu } from '@/api/table/list'; |
import { getMenu } from '@/api/table/list'; |
||||
import mitt from '@/plugins/bus'; |
import useStorage from '@/utils/useStorage' |
||||
const menuOptions = ref([]); |
import mitt from '@/plugins/bus'; |
||||
const selectedKey = ref(); |
const menuOptions = ref([]); |
||||
|
const selectedKey = ref(); |
||||
|
const sessionStorageIns = useStorage('sessionStorage'); |
||||
|
|
||||
const emit = defineEmits(['tableMenuData']); |
const emit = defineEmits(['tableMenuData']); |
||||
|
|
||||
onMounted(() => { |
onMounted(() => { |
||||
menuApi(); |
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() { |
function removeChildren(menu: any) { |
||||
//获取左侧菜单 |
//处理菜单空children |
||||
getMenu().then((res: any) => { |
if (!Array.isArray(menu)) { |
||||
if (res.code === 200) { |
return; |
||||
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) { |
menu.forEach((item) => { |
||||
//处理菜单空children |
if (item.children && item.children.length === 0) { |
||||
if (!Array.isArray(menu)) { |
delete item.children; |
||||
return; |
} else { |
||||
|
removeChildren(item.children); |
||||
} |
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
menu.forEach((item) => { |
function renderMenuLabel(option: MenuOption) { |
||||
if (item.children && item.children.length === 0) { |
//菜单标题增加提示 |
||||
delete item.children; |
return h(NEllipsis, null, option.deptName as string); |
||||
} else { |
} |
||||
removeChildren(item.children); |
|
||||
} |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
function renderMenuLabel(option: MenuOption) { |
|
||||
//菜单标题增加提示 |
|
||||
return h(NEllipsis, null, option.deptName as string); |
|
||||
} |
|
||||
|
|
||||
function menuUpdateValue(key: string, item: MenuOption) { |
function menuUpdateValue(key: string, item: MenuOption) { |
||||
//点击菜单 |
//点击菜单 |
||||
mitt.emit('menuKey', key); |
sessionStorageIns.setUseStorage('deptId', key); |
||||
console.log(key, item); |
mitt.emit('menuKey', key); |
||||
} |
console.log(key, item); |
||||
|
} |
||||
</script> |
</script> |
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
@import '../index.scss'; |
@import '../index.scss'; |
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue