@ibiz-template/vue3-util 0.7.41-alpha.13 → 0.7.41-alpha.131

package/src/panel-component/nav-pos/nav-pos.controller.ts

@@ -0,0 +1,438 @@
+import {
+  EventBase,
+  IModal,
+  Modal,
+  OpenAppViewCommand,
+  IPanelItemNavPosController,
+  ViewMode,
+  INavViewMsg,
+  NavViewChangeEvent,
+  PanelItemController,
+} from '@ibiz-template/runtime';
+import { IPanelRawItem } from '@ibiz/model-core';
+import { RouteLocationNormalizedLoaded, Router } from 'vue-router';
+import { notNilEmpty } from 'qx-util';
+import { mergeLeft } from 'ramda';
+import { NavPosState } from './nav-pos.state';
+import { getNestedRoutePath } from '../../util';
+
+const excludeKeys = ['is404', 'isRoutePushed'] as const;
+
+/**
+ * 导航占位控制器
+ *
+ * @export
+ * @class NavPosController
+ * @extends {PanelItemController}
+ */
+export class NavPosController
+  extends PanelItemController<IPanelRawItem>
+  implements IPanelItemNavPosController
+{
+  /**
+   * @description 导航占位状态
+   * @exposedoc
+   * @type {NavPosState}
+   * @memberof NavPosController
+   */
+  declare state: NavPosState;
+
+  /**
+   * @description 导航视图的模态操作对象
+   * @exposedoc
+   * @type {{ [key: string]: IModal }}
+   * @memberof NavPosController
+   */
+  viewModals: { [key: string]: IModal } = {};
+
+  /**
+   * @description 当前导航视图
+   * @exposedoc
+   * @type {INavViewMsg}
+   * @memberof NavPosController
+   */
+  curNavViewMsg!: INavViewMsg;
+
+  /**
+   * @description Router 对象
+   * @type {Router}
+   * @memberof NavPosController
+   */
+  router!: Router;
+
+  /**
+   * @description 关联部件标识集合，根据配置的REFCTRL参数指定关联部件，关联部件可控制导航视图
+   * @exposedoc
+   * @type {string[]}
+   */
+  refCtrlKeys: string[] = [];
+
+  /**
+   * @description 面板项参数
+   * @exposedoc
+   * @type {IData}
+   * @memberof NavPosController
+   */
+  rawItemParams: IData = {};
+
+  /**
+   * @description 是否忽略嵌入视图key，为true时嵌入视图组件不会绑定key
+   * @exposedoc
+   * @type {boolean}
+   * @memberof NavPosController
+   */
+  ignoreEmbedKey: boolean = false;
+
+  /**
+   * @description Route 对象
+   * @type {RouteLocationNormalizedLoaded}
+   * @memberof NavPosController
+   */
+  get route(): RouteLocationNormalizedLoaded {
+    return this.router.currentRoute.value;
+  }
+
+  /**
+   * @description 导航项是否缓存
+   * @param {INavViewMsg} navViewMsg
+   * @return {*}  {boolean}
+   * @memberof NavPosController
+   */
+  getExpItemIsCache(navViewMsg: INavViewMsg): boolean {
+    if (this.rawItemParams.expcache === 'CACHE') {
+      return true;
+    }
+    if (this.rawItemParams.expcache === 'NO_CACHE') {
+      return false;
+    }
+    return navViewMsg.isCache as boolean;
+  }
+
+  /**
+   * @description 设置 Router 对象
+   * @param {Router} router
+   * @memberof NavPosController
+   */
+  setRouter(router: Router): void {
+    this.router = router;
+  }
+
+  protected async onInit(): Promise<void> {
+    await super.onInit();
+    this.handleRawItemParams();
+    if (this.model.rawItem?.rawItemParams) {
+      this.model.rawItem.rawItemParams.find(item => {
+        if (item.key === 'REFCTRL' && item.value) {
+          this.refCtrlKeys = item.value
+            .split(';')
+            .map(str => str.toLowerCase());
+          return true;
+        }
+        return false;
+      });
+    }
+
+    this.panel.evt.on('onControlEvent', event => {
+      // 是否是关联部件，如果没有配置都监控，配置了只监控指定部件
+      const isRefCtrl =
+        this.refCtrlKeys.length === 0 ||
+        this.refCtrlKeys.includes(event.triggerControlName);
+      if (isRefCtrl && event.triggerEventName === 'onNavViewChange') {
+        const triggerEvent = event.triggerEvent as NavViewChangeEvent;
+        this.openView(triggerEvent.navViewMsg);
+      }
+    });
+
+    //  根据 导航占位参数 || 视图参数 判断是否用路由打开视图 不使用：NO_ROUTE 使用 ：ROUTE
+    //  导航占位参数优先级大于视图参数
+    const expRoute =
+      this.rawItemParams.expmode || this.panel.view.params.expmode;
+
+    const ignoreEmbedKey: string =
+      this.rawItemParams.ignoreembedkey ||
+      this.panel.view.params.ignoreembedkey ||
+      '';
+
+    this.ignoreEmbedKey = Object.is(ignoreEmbedKey.toLowerCase(), 'true');
+
+    // 路由模式下 必须为路由打开
+    if (expRoute === 'ROUTE' && this.routeDepth) {
+      this.state.routeOpen = true;
+    } else if (expRoute === 'NO_ROUTE') {
+      this.state.routeOpen = false;
+    } else {
+      this.state.routeOpen = !!this.routeDepth;
+    }
+    // 消费完参数销毁 expmode
+    if (this.panel.view.params.expmode) {
+      delete this.panel.view.params.expmode;
+    }
+  }
+
+  /**
+   * 创建导航占位状态对象
+   *
+   * @protected
+   * @return {*}  {NavPosState}
+   * @memberof NavPosController
+   */
+  protected createState(): NavPosState {
+    return new NavPosState(this.parent?.state);
+  }
+
+  /**
+   * @description 当前路由视图的层级
+   * @exposedoc
+   * @readonly
+   * @type {(number | undefined)}
+   * @memberof NavPosController
+   */
+  get routeDepth(): number | undefined {
+    return this.panel.view.modal.routeDepth;
+  }
+
+  /**
+   * 计算缓存 key 标识
+   *
+   * @author chitanda
+   * @date 2023-12-03 13:12:25
+   * @protected
+   * @param {INavViewMsg} msg
+   * @return {*}  {string}
+   */
+  protected calcCacheKey(msg: INavViewMsg): string {
+    if (msg) {
+      return `${msg.viewId}___${msg.key}`;
+    }
+    return '';
+  }
+
+  /**
+   * 路由改变
+   *
+   * @memberof NavPosController
+   */
+  onRouteChange(route: RouteLocationNormalizedLoaded): void {
+    // 没有当前导航视图信息时不做任何处理
+    if (this.curNavViewMsg) {
+      const cacheKey = this.calcCacheKey(this.curNavViewMsg);
+
+      // 路由打开的视图，currentKey在路由变更之后改值。此时新建的视图才能识别到跳转之后的路由。
+      this.state.currentKey = cacheKey;
+
+      // 更新fullPath信息
+      this.state.navViewMsgs[cacheKey].fullPath = route.fullPath;
+    }
+  }
+
+  /**
+   * 设置导航视图信息
+   *
+   * @author zk
+   * @date 2023-06-29 02:06:41
+   * @param {INavViewMsg} navViewMsg 导航视图信息
+   * @memberof NavPosController
+   */
+  setNavViewMsgs(navViewMsg: INavViewMsg): void {
+    // isRoutePushed没传的时候给false
+    navViewMsg.isRoutePushed = navViewMsg.isRoutePushed === true;
+    const cacheKey = this.calcCacheKey(navViewMsg);
+    if (this.state.navViewMsgs[cacheKey]) {
+      mergeLeft(this.state.navViewMsgs[cacheKey], navViewMsg);
+      // 部分属性这次没传就是undefined
+      excludeKeys.forEach(key => {
+        if (Object.prototype.hasOwnProperty.call(navViewMsg, key)) {
+          this.state.navViewMsgs[cacheKey][key] = undefined;
+        }
+      });
+    } else {
+      // 不存在的走新建流程
+      this.state.navViewMsgs[cacheKey] = navViewMsg;
+      if (this.getExpItemIsCache(navViewMsg)) {
+        // 往缓存keys里添加新视图的key
+        this.state.cacheKeys.push(cacheKey);
+      }
+      this.viewModals[cacheKey] = new Modal({
+        mode: this.routeDepth ? ViewMode.ROUTE : ViewMode.EMBED,
+        routeDepth: this.routeDepth ? this.routeDepth + 1 : undefined,
+        dismiss: () => {
+          // 执行对应key的dismiss方法
+          this.dismiss(cacheKey);
+        },
+      });
+    }
+
+    // todo 换个方式
+    this.curNavViewMsg = this.state.navViewMsgs[cacheKey];
+  }
+
+  /**
+   * 自身的dismiss相关操作
+   *
+   * @param {string} key
+   * @memberof NavPosController
+   */
+  dismiss(key: string): void {
+    ibiz.log.debug(this.constructor.name, 'dismiss', key);
+  }
+
+  /**
+   * 监听视图创建
+   *
+   * @param {EventBase} event
+   * @memberof NavPosController
+   */
+  onViewCreated(event: EventBase): void {
+    this.panel.evt.emit('onPresetPanelItemEvent', {
+      panelItemName: this.model.id!,
+      panelItemEventName: 'onViewCreated',
+      presetParams: event,
+    });
+    ibiz.log.debug(this.constructor.name, 'onViewCreated', event);
+  }
+
+  toBlankRoute(): void {
+    const blankRoute = getNestedRoutePath(this.route, this.routeDepth!);
+    this.router.push(blankRoute);
+  }
+
+  /**
+   * 打开视图
+   *
+   * @param {INavViewMsg} openViewMsg
+   * @memberof NavPosController
+   */
+  openView(openViewMsg: INavViewMsg): void {
+    // 当key为空时，直接切换currentKey，绘制null
+    if (!openViewMsg.key) {
+      this.state.currentKey = this.calcCacheKey(openViewMsg);
+      if (this.routeDepth && this.state.routeOpen) {
+        this.toBlankRoute();
+      }
+      return;
+    }
+
+    if (this.routeDepth && this.state.routeOpen) {
+      this.openViewByPath(openViewMsg);
+    } else {
+      this.openViewByModel(openViewMsg);
+    }
+  }
+
+  /**
+   * 通过路由打开视图
+   *
+   * @param {INavViewMsg} openViewMsg
+   * @memberof NavPosController
+   */
+  async openViewByPath(openViewMsg: INavViewMsg): Promise<void> {
+    const cacheKey = this.calcCacheKey(openViewMsg);
+    this.setNavViewMsgs(openViewMsg);
+    const isRoutePushed = openViewMsg.isRoutePushed === true;
+    // * 外部跳转过了的场景不需要这边跳转路由了，直接处理后续内容。
+    if (isRoutePushed) {
+      this.state.currentKey = cacheKey;
+      this.state.navViewMsgs[this.calcCacheKey(this.curNavViewMsg)].fullPath =
+        this.route.fullPath;
+      return;
+    }
+
+    // * 404路由跳转
+    if (openViewMsg.is404) {
+      const selfPath = getNestedRoutePath(this.route, this.routeDepth!, false);
+      if (openViewMsg.modalOptions?.replace) {
+        this.router.replace(`${selfPath}/error/404`);
+      } else {
+        this.router.push(`${selfPath}/error/404`);
+      }
+      return;
+    }
+
+    // 如果key相同，且有缓存的fullPath，则直接push回fullPath。
+    if (
+      cacheKey === this.state.currentKey &&
+      this.state.navViewMsgs[cacheKey].fullPath
+    ) {
+      if (openViewMsg.modalOptions?.replace) {
+        this.router.replace(this.state.navViewMsgs[cacheKey].fullPath!);
+      } else {
+        this.router.push(this.state.navViewMsgs[cacheKey].fullPath!);
+      }
+      return;
+    }
+
+    if (
+      // 如果启用缓存并且有之前存过的fullPath则push回fullPath。
+      this.state.navViewMsgs[cacheKey].fullPath &&
+      this.getExpItemIsCache(openViewMsg)
+    ) {
+      if (openViewMsg.modalOptions?.replace) {
+        this.router.replace(this.state.navViewMsgs[cacheKey].fullPath!);
+      } else {
+        this.router.push(this.state.navViewMsgs[cacheKey].fullPath!);
+      }
+    } else {
+      // 走视图路由打开逻辑计算并push
+      const tempContext = Object.assign(openViewMsg.context!.clone(), {
+        toRouteDepth: this.routeDepth! + 1,
+      });
+      if (this.rawItemParams?.routeattributekeys) {
+        tempContext.attributekeys = this.rawItemParams!.routeattributekeys;
+      }
+      if (this.getExpItemIsCache(openViewMsg)) {
+        this.state.cacheKeys.push(cacheKey);
+      }
+      if (openViewMsg.viewId) {
+        this.state.isLoading = true;
+        await ibiz.commands.execute(
+          OpenAppViewCommand.TAG,
+          openViewMsg.viewId,
+          tempContext,
+          openViewMsg.params,
+          {
+            openMode: 'INDEXVIEWTAB',
+            modalOption: {
+              replace: !this.state.currentKey,
+              ...openViewMsg.modalOptions,
+            },
+          },
+        );
+        this.state.isLoading = false;
+      }
+    }
+
+    // !跳转路由过后，修改currentKey由onRouteChange那边路由变更之后处理。
+  }
+
+  /**
+   * 通过模型绘制视图
+   *
+   * @param {INavViewMsg} openViewMsg
+   * @memberof NavPosController
+   */
+  openViewByModel(openViewMsg: INavViewMsg): void {
+    this.setNavViewMsgs(openViewMsg);
+    // 切换currentKey，重新渲染openViewMsg
+    this.state.currentKey = this.calcCacheKey(openViewMsg);
+  }
+
+  /**
+   * 处理自定义补充参数 [{key:'name',value:'data'}] => {name:'data'}
+   *
+   * @author zk
+   * @date 2023-09-27 03:09:55
+   * @protected
+   * @memberof NavPosController
+   */
+  protected handleRawItemParams(): void {
+    let params = {};
+    const rawItemParams = this.model.rawItem?.rawItemParams;
+    if (notNilEmpty(rawItemParams)) {
+      params = rawItemParams!.reduce((param: IData, item) => {
+        param[item.key!.toLowerCase()] = item.value;
+        return param;
+      }, {});
+    }
+    Object.assign(this.rawItemParams, params);
+  }
+}

package/src/panel-component/nav-pos/nav-pos.provider.ts

@@ -0,0 +1,38 @@
+import {
+  IPanelItemNavPosController,
+  IPanelItemProvider,
+  PanelController,
+  PanelItemController,
+} from '@ibiz-template/runtime';
+import { IPanelItem } from '@ibiz/model-core';
+import { NavPosController } from './nav-pos.controller';
+
+/**
+ * 导航占位适配器
+ *
+ * @export
+ * @class NavPosProvider
+ * @implements {IPanelItemProvider}
+ */
+export class NavPosProvider implements IPanelItemProvider {
+  component: string = 'IBizNavPos';
+
+  /**
+   * 创建控制器
+   *
+   * @param {IPanelItem} panelItem
+   * @param {PanelController} panel
+   * @param {(PanelItemController | undefined)} parent
+   * @return {*}  {Promise<IPanelItemNavPosController>}
+   * @memberof NavPosProvider
+   */
+  async createController(
+    panelItem: IPanelItem,
+    panel: PanelController,
+    parent: PanelItemController | undefined,
+  ): Promise<IPanelItemNavPosController> {
+    const c = new NavPosController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}

package/src/panel-component/nav-pos/nav-pos.scss

@@ -0,0 +1,4 @@
+@include b(nav-pos) {
+  width: 100%;
+  height: 100%;
+}

package/src/panel-component/nav-pos/nav-pos.state.ts

@@ -0,0 +1,55 @@
+import { INavViewMsg, PanelItemState } from '@ibiz-template/runtime';
+
+/**
+ * 导航占位状态
+ *
+ * @export
+ * @class NavPosState
+ * @extends {PanelItemState}
+ */
+export class NavPosState extends PanelItemState {
+  /**
+   * @description 是否启用缓存
+   * @exposedoc
+   * @type {boolean}
+   * @memberof NavPosState
+   */
+  cache: boolean = true;
+
+  /**
+   * @description 是否是路由打开
+   * @exposedoc
+   * @type {boolean}
+   * @memberof NavPosState
+   */
+  routeOpen: boolean = true;
+
+  /**
+   * @description 当前导航视图标识
+   * @exposedoc
+   * @type {string}
+   */
+  currentKey: string = '';
+
+  /**
+   * @description 缓存的视图标识
+   * @exposedoc
+   * @type {string[]}
+   */
+  cacheKeys: string[] = ['RouterShell'];
+
+  /**
+   * @description 导航视图详细信息
+   * @exposedoc
+   * @type {INavViewMsg[]}
+   */
+  navViewMsgs: { [p: string]: INavViewMsg } = {};
+
+  /**
+   * @description 视图是否正在加载
+   * @exposedoc
+   * @type {boolean}
+   * @memberof NavPosState
+   */
+  isLoading: boolean = false;
+}

package/src/panel-component/nav-pos/nav-pos.tsx

@@ -0,0 +1,166 @@
+import {
+  defineComponent,
+  h,
+  PropType,
+  ref,
+  resolveComponent,
+  VNode,
+  watch,
+} from 'vue';
+import { IPanelRawItem } from '@ibiz/model-core';
+import { EventBase } from '@ibiz-template/runtime';
+import { RouterView, useRoute, useRouter } from 'vue-router';
+import { NavPosController } from './nav-pos.controller';
+import './nav-pos.scss';
+import { useNamespace, useSemanticNode } from '../../use';
+import { getNestedRoutePath } from '../../util';
+
+/**
+ * 导航占位
+ * @primary
+ * @description 面板中的导航视图占位组件，用于绘制导航视图，并存储导航视图信息与缓存。
+ * @panelitemparams {name:expcache,parameterType:'CACHE' | 'NO_CACHE',defaultvalue:-,description:当值为NO_CACHE时禁用缓存，即每次导航切换时都是重新绘制新的视图，否则使用keepAlive包裹绘制的导航视图}
+ * @panelitemparams {name:ignoreembedkey,parameterType:boolean,defaultvalue:-,description:忽略嵌入视图key参数}
+ * @panelitemparams {name:expmode,parameterType:'ROUTE' | 'NO_ROUTE',defaultvalue:-,description:导航模式，ROUTE为路由模式，NO_ROUTE为非路由模式，在路由模式下会通过路由打开视图，在非路由的模式下，则会通过视图模型去绘制视图}
+ * @panelitemparams {"name":"routeattributekeys","parameterType":"string","defaultvalue":"-","description":"路由透传参数，参数值为上下文对象的key，多个值用竖线`|`分隔，透传的参数将会在路由组件进行解析，并显示声明在路由上进行传递"}
+ * @panelitemparams {"name":"REFCTRL","parameterType":"string","defaultvalue":"-","description":"关联部件标识，可指定关联部件，多个关联部件标识以`;`分隔"}
+ */
+export const NavPos = defineComponent({
+  name: 'IBizNavPos',
+  props: {
+    /**
+     * @description 导航占位模型
+     */
+    modelData: {
+      type: Object as PropType<IPanelRawItem>,
+      required: true,
+    },
+    /**
+     * @description 导航占位控制器
+     */
+    controller: {
+      type: NavPosController,
+      required: true,
+    },
+  },
+  setup(props) {
+    const c = props.controller;
+    const ns = useNamespace('nav-pos');
+    const { semanticClass, semanticStyle } = useSemanticNode(props.controller);
+
+    const onViewCreated = (event: EventBase): void => {
+      c.onViewCreated(event);
+    };
+
+    const router = useRouter();
+    const route = useRoute();
+
+    const isPresetView = ref(false);
+
+    c.setRouter(router);
+
+    if (c.routeDepth) {
+      // 计算当前导航视图对应层级路由的路径，删除了srfnav
+      const expViewRoutePath = getNestedRoutePath(route, c.routeDepth!);
+      watch(
+        () => route.fullPath,
+        () => {
+          const currentRoutePath = getNestedRoutePath(route, c.routeDepth!);
+          // 前面路由不是当前导航视图的不走
+          // 路由跳转匹配层级不比导航视图层级高的不走。如分页关系的表单对应的事导航视图的路由。
+          if (
+            expViewRoutePath === currentRoutePath &&
+            route.matched.length > c.routeDepth!
+          ) {
+            if (route.matched.length === c.routeDepth! + 1) {
+              isPresetView.value = !!route.name;
+              if (isPresetView.value) {
+                return;
+              }
+            }
+
+            c.onRouteChange(route);
+          }
+        },
+        { immediate: true },
+      );
+    }
+
+    return { ns, c, isPresetView, onViewCreated, semanticClass, semanticStyle };
+  },
+  render() {
+    const { viewModals, state } = this.c;
+    const { currentKey, cacheKeys, navViewMsgs, cache } = state;
+    let content: VNode | null = null;
+    if (state.routeOpen) {
+      if (this.isPresetView) {
+        return (
+          <RouterView
+            class={this.semanticClass('root')}
+            style={this.semanticStyle('root')}
+          />
+        );
+      }
+
+      content = (
+        <iBizRouterView
+          class={this.semanticClass('content')}
+          style={this.semanticStyle('content')}
+          manualKey={currentKey}
+          modal={viewModals[currentKey]}
+          onCreated={this.onViewCreated}
+        >
+          {({ Component }: { Component: string }): VNode | null => {
+            const routerContent =
+              currentKey === '' || !Component
+                ? null
+                : ((<Component />) as VNode);
+
+            return cache ? (
+              <keepAlive include={cacheKeys} max={30} isKey>
+                {routerContent}
+              </keepAlive>
+            ) : (
+              routerContent
+            );
+          }}
+        </iBizRouterView>
+      );
+    } else {
+      const view =
+        currentKey && navViewMsgs[currentKey]
+          ? h(resolveComponent('IBizViewShell'), {
+              class: this.semanticClass('content'),
+              style: this.semanticStyle('content'),
+              context: navViewMsgs[currentKey].context,
+              params: navViewMsgs[currentKey].params,
+              key: !this.c.ignoreEmbedKey ? currentKey : undefined,
+              viewId: navViewMsgs[currentKey].viewId,
+              onCreated: this.onViewCreated,
+            })
+          : null;
+      content = cache ? (
+        <keepAlive include={cacheKeys} max={30} isKey>
+          {view}
+        </keepAlive>
+      ) : (
+        view
+      );
+    }
+
+    return (
+      <div
+        class={[
+          this.ns.b(),
+          this.ns.m(this.modelData.id),
+          this.semanticClass('root'),
+          ...this.controller.containerClass,
+        ]}
+        style={this.semanticStyle('root')}
+        // v-loading={this.c.state.isLoading}
+      >
+        {content}
+      </div>
+    );
+  },
+});