123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 |
- import { onBeforeUnmount, provide, ref } from 'vue'
- import { useRoute } from 'vue-router'
- import { isArray } from '@cip/utils/util'
- // 菜单徽标hook
- /**
- * 定时更新时间
- * @param timer 为0时不进行更新 单位ms
- * @return {{badgeMap: ToRef<{}>, badgeFnMap: ToRef<{}>, collectBadgeFn: collectBadgeFn, consumptionBadgeFn: ((function(*): Promise<void>)|*)}}
- */
- export const useBadge = (times) => {
- const badgeMap = ref({}) // 徽标key-value关系
- const badgeFnMap = ref({}) // 徽标key-fn关系
- const collectBadgeFn = (menu = [], { key, fnKey, childrenKey = 'children' }) => {
- menu.forEach(item => {
- const fn = item?.[fnKey]
- if (typeof fn === 'function') {
- badgeFnMap.value[item[key]] = { fn, used: false, privilege: false }
- }
- const children = item[childrenKey]
- if (isArray(children)) {
- collectBadgeFn(children, { key, fnKey, childrenKey })
- }
- })
- }
- // 定时更新时使用
- const resetComputed = () => {
- Object.keys(badgeFnMap.value).forEach(key => {
- badgeFnMap.value[key].used = false
- // !!!有权限的菜单的badge方法才会执行
- if (badgeFnMap.value[key].privilege) {
- consumptionBadgeFn(key)
- }
- })
- }
- if (times > 0) {
- const timer = setInterval(() => {
- resetComputed()
- }, times)
- onBeforeUnmount(() => {
- clearInterval(timer)
- })
- }
- const consumptionBadgeFn = async (key) => {
- const badgeFn = badgeFnMap.value?.[key]
- if (badgeFn && !badgeFn.used) {
- badgeFn.used = true // 删除防止多次触发
- badgeFn.privilege = true // 触发过一次及判断为拥有权限
- const total = await badgeFn.fn()
- badgeMap.value[key] = total
- }
- }
- const setBadge = (key, badge) => {
- badgeMap.value[key] = badge
- }
- // 子孙组件直接修改徽标
- provide('setBadge', setBadge)
- const refreshBadge = (key) => {
- const badgeFn = badgeFnMap.value?.[key]
- if (badgeFn) {
- badgeFn.used = false // 先把used设置为false才能触发更新
- consumptionBadgeFn(key)
- }
- }
- // 子孙组件根据触发修改徽标
- provide('refreshBadge', refreshBadge)
- return {
- badgeMap,
- badgeFnMap,
- collectBadgeFn,
- consumptionBadgeFn
- }
- }
- export const useMenuTitle = () => {
- const route = useRoute()
- const menuNameMap = ref(new Map()) // name 与 title 的关系
- const menuPathMap = ref({}) // fullPath 与 title 的关系
- const setCurrentTitle = (title) => {
- setTitle(route.fullPath, route.name, title)
- }
- const setTitle = (fullPath, name, title) => {
- menuNameMap.value.set(name, title)
- menuPathMap.value[fullPath] = title
- }
- // 兼容老代码[addMenuName]不建议再使用
- provide('addMenuName', setCurrentTitle)
- provide('setCurrentTitle', setCurrentTitle)
- provide('setTitle', setTitle)
- return {
- menuNameMap,
- menuPathMap
- }
- }
|