websoft-uniapp/utils/page-tab-util.ts

/**
 * 页签操作封装
 */
import { unref } from 'vue';
import type { RouteLocationNormalizedLoaded } from 'vue-router';
import type { TabItem, TabRemoveOption } from 'ele-admin-pro/es';
import { message } from 'ant-design-vue/es';
import router from '@/router';
import { useThemeStore } from '@/store/modules/theme';
import type { RouteReloadOption } from '@/store/modules/theme';
import { removeToken } from '@/utils/token-util';
import { setDocumentTitle } from '@/utils/document-title-util';
import {
  HOME_PATH,
  LAYOUT_PATH,
  REDIRECT_PATH,
  REPEATABLE_TABS
} from '@/config/setting';
const HOME_ROUTE = HOME_PATH || LAYOUT_PATH;
const BASE_URL = import.meta.env.BASE_URL;

/**
 * 刷新页签参数类型
 */
export interface TabReloadOptions {
  // 是否是主页
  isHome?: boolean;
  // 路由地址
  fullPath?: string;
}

/**
 * 刷新当前路由
 */
export function reloadPageTab(option?: TabReloadOptions) {
  if (!option) {
    // 刷新当前路由
    const { path, fullPath, query } = unref(router.currentRoute);
    if (path.includes(REDIRECT_PATH)) {
      return;
    }
    const isHome = isHomeRoute(unref(router.currentRoute));
    setRouteReload({
      reloadHome: isHome,
      reloadPath: isHome ? void 0 : fullPath
    });
    router.replace({
      path: REDIRECT_PATH + path,
      query
    });
  } else {
    // 刷新指定页签
    const { fullPath, isHome } = option;
    setRouteReload({
      reloadHome: isHome,
      reloadPath: isHome ? void 0 : fullPath
    });
    router.replace(REDIRECT_PATH + fullPath);
  }
}

/**
 * 关闭当前页签
 */
export function finishPageTab() {
  const key = getRouteTabKey();
  removePageTab({ key, active: key });
}

/**
 * 关闭页签
 */
export function removePageTab(option: TabRemoveOption) {
  useThemeStore()
    .tabRemove(option)
    .then(({ path, home }) => {
      if (path) {
        router.push(path);
      } else if (home) {
        router.push(HOME_ROUTE);
      }
    })
    .catch(() => {
      message.error('当前页签不可关闭');
    });
}

/**
 * 关闭左侧页签
 */
export function removeLeftPageTab(option: TabRemoveOption) {
  useThemeStore()
    .tabRemoveLeft(option)
    .then(({ path }) => {
      if (path) {
        router.push(path);
      }
    })
    .catch(() => {
      message.error('左侧没有可关闭的页签');
    });
}

/**
 * 关闭右侧页签
 */
export function removeRightPageTab(option: TabRemoveOption) {
  useThemeStore()
    .tabRemoveRight(option)
    .then(({ path, home }) => {
      if (path) {
        router.push(path);
      } else if (home) {
        router.push(HOME_ROUTE);
      }
    })
    .catch(() => {
      message.error('右侧没有可关闭的页签');
    });
}

/**
 * 关闭其它页签
 */
export function removeOtherPageTab(option: TabRemoveOption) {
  useThemeStore()
    .tabRemoveOther(option)
    .then(({ path, home }) => {
      if (path) {
        router.push(path);
      } else if (home) {
        router.push(HOME_ROUTE);
      }
    })
    .catch(() => {
      message.error('没有可关闭的页签');
    });
}

/**
 * 关闭全部页签
 * @param active 当前选中页签
 */
export function removeAllPageTab(active: string) {
  useThemeStore()
    .tabRemoveAll(active)
    .then(({ home }) => {
      if (home) {
        router.push(HOME_ROUTE);
      }
    })
    .catch(() => {
      message.error('没有可关闭的页签');
    });
}

/**
 * 登录成功后清空页签
 */
export function cleanPageTabs() {
  useThemeStore().setTabs([]);
}

/**
 * 添加页签
 * @param data 页签数据
 */
export function addPageTab(data: TabItem | TabItem[]) {
  useThemeStore().tabAdd(data);
}

/**
 * 修改页签
 * @param data 页签数据
 */
export function setPageTab(data: TabItem) {
  useThemeStore().tabSetItem(data);
}

/**
 * 修改页签标题
 * @param title 标题
 */
export function setPageTabTitle(title: string) {
  setPageTab({ key: getRouteTabKey(), title });
  setDocumentTitle(title);
}

/**
 * 获取当前路由对应的页签 key
 */
export function getRouteTabKey() {
  const { path, fullPath, meta } = unref(router.currentRoute);
  const isUnique = meta.tabUnique === false || REPEATABLE_TABS.includes(path);
  return isUnique ? fullPath : path;
}

/**
 * 设置主页的组件名称
 * @param components 组件名称
 */
export function setHomeComponents(components: string[]) {
  useThemeStore().setHomeComponents(components);
}

/**
 * 设置路由刷新信息
 * @param option 路由刷新参数
 */
export function setRouteReload(option: RouteReloadOption | null) {
  return useThemeStore().setRouteReload(option);
}

/**
 * 判断路由是否是主页
 * @param route 路由信息
 */
export function isHomeRoute(route: RouteLocationNormalizedLoaded) {
  const { path, matched } = route;
  if (HOME_ROUTE === path) {
    return true;
  }
  return (
    matched[0] &&
    matched[0].path === LAYOUT_PATH &&
    matched[0].redirect === path
  );
}

/**
 * 登录成功后跳转首页
 * @param from 登录前的地址
 */
export function goHomeRoute(from?: string) {
  router.replace(from || HOME_ROUTE);
}

/**
 * 退出登录
 * @param route 是否使用路由跳转
 * @param from 登录后跳转的地址
 */
export function logout(route?: boolean, from?: string) {
  removeToken();
  if (route) {
    router.push({
      path: '/login',
      query: from ? { from } : void 0
    });
  } else {
    // 这样跳转避免再次登录重复注册动态路由
    location.replace(BASE_URL + 'login' + (from ? '?from=' + from : ''));
  }
}