@ibiz-template/vue3-util 0.2.11 → 0.2.13

package/src/util/overlay-view-util/overlay-view-util.ts

@@ -0,0 +1,89 @@
+import {
+  IDrawerOptions,
+  IFloatWindowOptions,
+  IModal,
+  IModalData,
+  IModalOptions,
+  IPopoverOptions,
+} from '@ibiz-template/runtime';
+import { h, resolveComponent, VNode } from 'vue';
+
+export function createOverlayView(props?: IParams): (modal: IModal) => VNode {
+  return (modal: IModal) => {
+    const viewShell = resolveComponent('IBizViewShell');
+    return h(viewShell, {
+      ...props,
+      modal,
+    });
+  };
+}
+
+export async function openViewModal(
+  props?: IParams,
+  opts?: IModalOptions,
+): Promise<IModalData> {
+  const overlay = ibiz.overlay.createModal(
+    createOverlayView(props),
+    undefined,
+    opts,
+  );
+  overlay.present();
+  const result: IModalData = await overlay.onWillDismiss();
+  return result || { ok: false };
+}
+
+export async function openViewFloatWindow(
+  props?: IParams,
+  opts?: IFloatWindowOptions,
+): Promise<IModalData> {
+  const overlay = ibiz.overlay.createFloatWindow(
+    createOverlayView(props),
+    undefined,
+    opts,
+  );
+  overlay.present();
+  const result: IModalData = await overlay.onWillDismiss();
+  return result || { ok: false };
+}
+
+export async function openViewDrawer(
+  props?: IParams,
+  opts?: IDrawerOptions,
+): Promise<IModalData> {
+  const overlay = ibiz.overlay.createDrawer(
+    createOverlayView(props),
+    undefined,
+    opts,
+  );
+  await overlay.present();
+  const result: IModalData = await overlay.onWillDismiss();
+  return result || { ok: false };
+}
+
+export async function openViewPopover(
+  event: MouseEvent,
+  props?: IParams,
+  opts?: IPopoverOptions,
+): Promise<IModalData> {
+  const overlay = ibiz.overlay.createPopover(
+    createOverlayView(props),
+    undefined,
+    opts,
+  );
+  overlay.present(event.target as HTMLElement);
+  const result: IModalData = await overlay.onWillDismiss();
+  return result || { ok: false };
+}
+
+const PlacementMap: IData = {
+  DRAWER_LEFT: 'left',
+  DRAWER_RIGHT: 'right',
+  DRAWER_TOP: 'top',
+  DRAWER_BOTTOM: 'bottom',
+};
+
+export function getDrawerPlacement(
+  openMode: string,
+): IDrawerOptions['placement'] {
+  return PlacementMap[openMode] || 'right';
+}

package/src/util/route/route.ts

@@ -11,6 +11,146 @@ import {
 } from '@ibiz-template/runtime';
 import { IRoutePath, IRoutePathNode, IRouteViewData } from '../../interface';
 
+/**
+ * 路径字符串转换成路由路径对象
+ *
+ * @author lxm
+ * @date 2022-08-18 11:08:08
+ * @export
+ * @param {string} pathStr 以/开头的路径，即router的path
+ * @returns {*}  {IRoutePath}
+ */
+export function route2routePath(route: Route): IRoutePath {
+  // 一共匹配了几级路由
+  const depth = route.matched.length;
+
+  // 解析路径节点
+  const pathNodes: IRoutePathNode[] = [];
+  for (let index = 1; index <= depth; index++) {
+    const viewName = route.path.split('/')[index * 2];
+    const paramsStr = route.params[`params${index}`] as string;
+
+    /** 路由参数，默认是视图参数 */
+    let params: IParams | undefined;
+
+    /** 上下文参数 */
+    let context: IParams | undefined;
+    let srfnav: string | undefined;
+    // params为占位符时置空
+    if (!paramsStr || paramsStr === ibiz.env.routePlaceholder) {
+      params = undefined;
+    } else {
+      // 首页上下文要解析
+      params = qs.parse(paramsStr, {
+        strictNullHandling: true,
+        delimiter: ';',
+      });
+    }
+
+    // 路由参数存在的时候，解析里面的上下文。
+    if (params) {
+      if (index === 1) {
+        // 首页的时候，路由上的参数是资源路径，属于上下文
+        context = params;
+        params = undefined;
+      } else {
+        if (params.srfnavctx) {
+          // 解析额外上下文
+          context = JSON.parse(decodeURIComponent(params.srfnavctx));
+          delete params.srfnavctx;
+        }
+        if (params.srfnav) {
+          // 解析额外自身视图导航参数
+          srfnav = params.srfnav;
+          delete params.srfnav;
+        }
+      }
+    }
+
+    pathNodes.push({ viewName, context, params, srfnav });
+  }
+
+  // 解析应用上下文
+  let appContext;
+  if (
+    route.params.appContext &&
+    route.params.appContext !== ibiz.env.routePlaceholder
+  ) {
+    appContext = qs.parse(route.params.appContext as string, {
+      strictNullHandling: true,
+      delimiter: ';',
+    });
+  }
+
+  return { appContext, pathNodes };
+}
+
+/**
+ * 路由路径对象转路径字符串
+ *
+ * @author lxm
+ * @date 2022-08-18 13:08:57
+ * @export
+ * @param {IRoutePath} routePath 路由路径对象
+ * @returns {*}  {string}
+ */
+export function routePath2string(routePath: IRoutePath): string {
+  let pathStr = '';
+  // 应用上下文
+  if (routePath.appContext) {
+    pathStr += `/${qs.stringify(routePath.appContext, {
+      delimiter: ';',
+      strictNullHandling: true,
+    })}`;
+  } else {
+    pathStr += `/${ibiz.env.routePlaceholder}`;
+  }
+
+  // 每一层级的视图路由的拼装
+  routePath.pathNodes.forEach((pathNode: IRoutePathNode, index: number) => {
+    pathStr += `/${pathNode.viewName}/`;
+    let routeParams: IParams = {};
+    // 首页路由
+    if (index === 0) {
+      if (notNilEmpty(pathNode.context)) {
+        // 对象转成a=11;b=222的格式，字符串直接附加在后面
+        routeParams = pathNode.context!;
+      }
+    } else {
+      // 非首页路由,视图参数直接放到路由参数上，上下文转换后放到路由参数的srfnavctx上
+      routeParams = notNilEmpty(pathNode.params) ? pathNode.params! : {};
+
+      // 合并视图上下文
+      if (notNilEmpty(pathNode.context)) {
+        const objStr = JSON.stringify(pathNode.context);
+        // undefined 的vlaue会被JSON.stringify删除,可能会转成{}
+        if (objStr !== '{}') {
+          routeParams!.srfnavctx = encodeURIComponent(objStr);
+        }
+      }
+
+      // 合并视图导航参数
+      if (pathNode.srfnav) {
+        routeParams.srfnav = pathNode.srfnav;
+      }
+    }
+
+    const paramsStr = qs.stringify(routeParams, {
+      delimiter: ';',
+      strictNullHandling: true,
+      skipNulls: true,
+    });
+    // 把路由参数转换到路由路径上去
+    if (notNilEmpty(paramsStr)) {
+      pathStr += paramsStr;
+    } else {
+      pathStr += ibiz.env.routePlaceholder;
+    }
+  });
+
+  return pathStr;
+}
+
 /**
  * 获取自身的路由上下文，排除了部分不需要路由携带的参数
  *
@@ -238,146 +378,6 @@ export async function parseRouteViewData(
   };
 }
 
-/**
- * 路径字符串转换成路由路径对象
- *
- * @author lxm
- * @date 2022-08-18 11:08:08
- * @export
- * @param {string} pathStr 以/开头的路径，即router的path
- * @returns {*}  {IRoutePath}
- */
-export function route2routePath(route: Route): IRoutePath {
-  // 一共匹配了几级路由
-  const depth = route.matched.length;
-
-  // 解析路径节点
-  const pathNodes: IRoutePathNode[] = [];
-  for (let index = 1; index <= depth; index++) {
-    const viewName = route.path.split('/')[index * 2];
-    const paramsStr = route.params[`params${index}`] as string;
-
-    /** 路由参数，默认是视图参数 */
-    let params: IParams | undefined;
-
-    /** 上下文参数 */
-    let context: IParams | undefined;
-    let srfnav: string | undefined;
-    // params为占位符时置空
-    if (!paramsStr || paramsStr === ibiz.env.routePlaceholder) {
-      params = undefined;
-    } else {
-      // 首页上下文要解析
-      params = qs.parse(paramsStr, {
-        strictNullHandling: true,
-        delimiter: ';',
-      });
-    }
-
-    // 路由参数存在的时候，解析里面的上下文。
-    if (params) {
-      if (index === 1) {
-        // 首页的时候，路由上的参数是资源路径，属于上下文
-        context = params;
-        params = undefined;
-      } else {
-        if (params.srfnavctx) {
-          // 解析额外上下文
-          context = JSON.parse(decodeURIComponent(params.srfnavctx));
-          delete params.srfnavctx;
-        }
-        if (params.srfnav) {
-          // 解析额外自身视图导航参数
-          srfnav = params.srfnav;
-          delete params.srfnav;
-        }
-      }
-    }
-
-    pathNodes.push({ viewName, context, params, srfnav });
-  }
-
-  // 解析应用上下文
-  let appContext;
-  if (
-    route.params.appContext &&
-    route.params.appContext !== ibiz.env.routePlaceholder
-  ) {
-    appContext = qs.parse(route.params.appContext as string, {
-      strictNullHandling: true,
-      delimiter: ';',
-    });
-  }
-
-  return { appContext, pathNodes };
-}
-
-/**
- * 路由路径对象转路径字符串
- *
- * @author lxm
- * @date 2022-08-18 13:08:57
- * @export
- * @param {IRoutePath} routePath 路由路径对象
- * @returns {*}  {string}
- */
-export function routePath2string(routePath: IRoutePath): string {
-  let pathStr = '';
-  // 应用上下文
-  if (routePath.appContext) {
-    pathStr += `/${qs.stringify(routePath.appContext, {
-      delimiter: ';',
-      strictNullHandling: true,
-    })}`;
-  } else {
-    pathStr += `/${ibiz.env.routePlaceholder}`;
-  }
-
-  // 每一层级的视图路由的拼装
-  routePath.pathNodes.forEach((pathNode: IRoutePathNode, index: number) => {
-    pathStr += `/${pathNode.viewName}/`;
-    let routeParams: IParams = {};
-    // 首页路由
-    if (index === 0) {
-      if (notNilEmpty(pathNode.context)) {
-        // 对象转成a=11;b=222的格式，字符串直接附加在后面
-        routeParams = pathNode.context!;
-      }
-    } else {
-      // 非首页路由,视图参数直接放到路由参数上，上下文转换后放到路由参数的srfnavctx上
-      routeParams = notNilEmpty(pathNode.params) ? pathNode.params! : {};
-
-      // 合并视图上下文
-      if (notNilEmpty(pathNode.context)) {
-        const objStr = JSON.stringify(pathNode.context);
-        // undefined 的vlaue会被JSON.stringify删除,可能会转成{}
-        if (objStr !== '{}') {
-          routeParams!.srfnavctx = encodeURIComponent(objStr);
-        }
-      }
-
-      // 合并视图导航参数
-      if (pathNode.srfnav) {
-        routeParams.srfnav = pathNode.srfnav;
-      }
-    }
-
-    const paramsStr = qs.stringify(routeParams, {
-      delimiter: ';',
-      strictNullHandling: true,
-      skipNulls: true,
-    });
-    // 把路由参数转换到路由路径上去
-    if (notNilEmpty(paramsStr)) {
-      pathStr += paramsStr;
-    } else {
-      pathStr += ibiz.env.routePlaceholder;
-    }
-  });
-
-  return pathStr;
-}
-
 /**
  * 获取指定层级的路由路径
  * @author lxm
@@ -397,8 +397,8 @@ export function getNestedRoutePath(
     return '';
   }
 
-  // 有名称的路由返回空，如login，404等
-  if (route.name) {
+  // 只有当前层级的路由的代名称的路由如login，404等直接返回path
+  if (route.matched.length === depth && route.name) {
     return route.path;
   }
   const routePath = route2routePath(route);

package/src/util/router-callback/router-callback-item.ts

@@ -0,0 +1,98 @@
+import { IModalData } from '@ibiz-template/runtime';
+
+/**
+ * 路由视图关闭回调
+ *
+ * @author chitanda
+ * @date 2023-07-13 21:07:51
+ * @export
+ * @class RouterCallbackItem
+ */
+export class RouterCallbackItem {
+  protected resolve?: (modal: IModalData) => void;
+
+  protected promise?: Promise<IModalData>;
+
+  /**
+   * 销毁定时器
+   *
+   * @author chitanda
+   * @date 2023-07-13 21:07:51
+   * @type {number}
+   */
+  timeout?: number;
+
+  /**
+   * 是否已经有打开的视图认领此回调，如果在一定时间内没有被认领，则会被清除
+   *
+   * @author chitanda
+   * @date 2023-07-13 21:07:35
+   */
+  isActivated = false;
+
+  constructor(
+    public from: string,
+    public to: string,
+  ) {
+    ibiz.log.debug('openRouter: ', from, to);
+  }
+
+  /**
+   * 等待视图关闭
+   *
+   * @author chitanda
+   * @date 2023-07-13 21:07:34
+   * @return {*}  {Promise<IModalData>}
+   */
+  onWillDismiss(): Promise<IModalData> {
+    if (!this.promise) {
+      this.promise = new Promise(resolve => {
+        this.resolve = resolve;
+      });
+    }
+    return this.promise.then(modal => {
+      ibiz.log.debug('onWillDismiss: ', this.from, this.to, modal);
+      return modal;
+    });
+  }
+
+  /**
+   * 关闭视图
+   *
+   * @author chitanda
+   * @date 2023-07-13 21:07:06
+   * @param {IModalData} modal
+   */
+  close(modal: IModalData): void {
+    ibiz.log.debug('closeRouter: ', this.from, this.to, modal);
+    if (this.resolve) {
+      this.resolve(modal);
+      this.resolve = undefined;
+    }
+  }
+
+  /**
+   * 激活回调
+   *
+   * @author chitanda
+   * @date 2023-07-13 21:07:29
+   */
+  active(): void {
+    ibiz.log.debug('activeRouter: ', this.from, this.to);
+    this.isActivated = true;
+  }
+
+  /**
+   * 销毁回调
+   *
+   * @author chitanda
+   * @date 2023-07-13 21:07:21
+   */
+  destroy(): void {
+    ibiz.log.debug('destroyRouter: ', this.from, this.to);
+    if (this.resolve) {
+      this.resolve({ ok: false });
+      this.resolve = undefined;
+    }
+  }
+}

package/src/util/router-callback/router-callback.ts

@@ -0,0 +1,97 @@
+import { IModalData } from '@ibiz-template/runtime';
+import { Router } from 'vue-router';
+import { RouterCallbackItem } from './router-callback-item';
+
+/**
+ * 路由打开视图回调，连通上级视图的关闭
+ *
+ * @author chitanda
+ * @date 2023-07-13 20:07:20
+ * @export
+ * @class RouterCallback
+ */
+export class RouterCallback {
+  /**
+   * 回调实例
+   *
+   * @author chitanda
+   * @date 2023-07-13 20:07:12
+   * @protected
+   * @type {Map<string, RouterCallbackItem>}
+   */
+  protected map: Map<string, RouterCallbackItem> = new Map();
+
+  /**
+   * 打开视图
+   *
+   * @author chitanda
+   * @date 2023-07-13 20:07:13
+   * @param {Router} router
+   * @param {string} path
+   * @return {*}  {Promise<IModalData>}
+   */
+  async open(router: Router, path: string): Promise<IModalData> {
+    const from = router.currentRoute.value.fullPath;
+    router.push({ path });
+    const to = path;
+    if (this.map.has(to)) {
+      const item = this.map.get(to)!;
+      return item.onWillDismiss();
+    }
+    const item = new RouterCallbackItem(from, to);
+    this.map.set(to, item);
+    this.scheduledDestruction(item);
+    return item.onWillDismiss();
+  }
+
+  /**
+   * 关闭视图回调
+   *
+   * @author chitanda
+   * @date 2023-07-13 20:07:38
+   * @param {string} toFullPath
+   * @param {IModalData} modal
+   */
+  close(toFullPath: string, modal: IModalData): void {
+    const item = this.map.get(toFullPath);
+    if (item) {
+      item.close(modal);
+      this.map.delete(toFullPath);
+    }
+  }
+
+  /**
+   * 激活回调
+   *
+   * @author chitanda
+   * @date 2023-07-13 21:07:03
+   * @param {string} toFullPath
+   */
+  active(toFullPath: string): void {
+    const item = this.map.get(toFullPath);
+    if (item) {
+      window.clearTimeout(item.timeout);
+      item.timeout = undefined;
+      item.active();
+    }
+  }
+
+  /**
+   * 一分钟内未激活的视图回调会被清除
+   *
+   * @author chitanda
+   * @date 2023-07-13 21:07:57
+   * @protected
+   * @param {RouterCallbackItem} item
+   */
+  protected scheduledDestruction(item: RouterCallbackItem): void {
+    item.timeout = window.setTimeout(() => {
+      item.timeout = undefined;
+      item.destroy();
+      this.map.delete(item.to);
+    }, 10 * 1000);
+  }
+}
+
+// 路由打开视图回调，连通上级视图的关闭工具类
+export const routerCallback = new RouterCallback();

package/src/util/store/app-store/app-store.ts

@@ -0,0 +1,10 @@
+import { defineStore } from 'pinia';
+import { reactive } from 'vue';
+
+export interface IAppStore {}
+
+export const useAppStore = defineStore('appStore', () => {
+  const appStore = reactive<IAppStore>({});
+
+  return { appStore };
+});

package/src/util/store/index.ts

@@ -0,0 +1,6 @@
+import { createPinia } from 'pinia';
+
+export * from './app-store/app-store';
+export * from './ui-store/ui-store';
+
+export const piniaInstance = createPinia();

package/src/util/store/ui-store/ui-store.ts

@@ -0,0 +1,27 @@
+import { defineStore } from 'pinia';
+import { reactive, Ref } from 'vue';
+import { useZIndexStore } from './z-index';
+
+export interface IUIState {
+  /**
+   * ui层级
+   *
+   * @author lxm
+   * @date 2022-08-18 21:08:48
+   * @type {number}
+   */
+  zIndex: Ref<number>;
+
+  theme: string;
+}
+
+export const useUIStore = defineStore('uiStore', () => {
+  const zIndex = useZIndexStore();
+
+  const UIStore = reactive<IUIState>({
+    zIndex: zIndex.zIndex,
+    theme: 'light',
+  });
+
+  return { UIStore, zIndex };
+});

package/src/util/store/ui-store/z-index.ts

@@ -0,0 +1,53 @@
+import { Ref, ref } from 'vue';
+
+export interface IzIndexStore {
+  /**
+   * 当前最高的ui层级
+   *
+   * @author lxm
+   * @date 2022-08-18 21:08:48
+   * @type {number}
+   */
+  zIndex: Ref<number>;
+
+  /**
+   * 增加Ui层级,返回增加后的层级
+   *
+   * @author lxm
+   * @date 2022-08-18 21:08:22
+   */
+  increment(): number;
+
+  /**
+   * 减少Ui层级
+   *
+   * @author lxm
+   * @date 2022-08-18 21:08:22
+   */
+  decrement(): void;
+}
+
+/**
+ * 定义zIndex的全局状态变量
+ *
+ * @author lxm
+ * @date 2022-08-18 21:08:26
+ * @export
+ * @returns {*}
+ */
+export function useZIndexStore(): IzIndexStore {
+  const DEFAULT_INDEX = 500;
+  const INCREMENT_VALUE = 1;
+  const zIndex = ref(DEFAULT_INDEX);
+
+  function increment(): number {
+    zIndex.value += INCREMENT_VALUE;
+    return zIndex.value;
+  }
+
+  function decrement() {
+    zIndex.value -= INCREMENT_VALUE;
+  }
+
+  return { zIndex, increment, decrement };
+}

package/src/view/app-redirect-view/app-redirect-view.tsx

@@ -0,0 +1,26 @@
+import { defineComponent, onMounted, onUnmounted } from 'vue';
+import { IBizContext } from '@ibiz-template/core';
+import { toLocalOpenWFRedirectView } from '@ibiz-template/runtime';
+
+export const AppRedirectView = defineComponent({
+  setup() {
+    const context = IBizContext.create(ibiz.appData?.context || {});
+
+    onUnmounted(() => {
+      context.destroy();
+    });
+
+    const { href } = window.location;
+
+    async function toRedirect(): Promise<void> {
+      await toLocalOpenWFRedirectView(context, href);
+    }
+
+    onMounted(() => ibiz.util.hiddenAppLoading());
+
+    toRedirect();
+  },
+  render() {
+    return <div>重定向跳转中</div>;
+  },
+});