@ibiz-template/vue3-util 0.2.11 → 0.2.12

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

@@ -0,0 +1,351 @@
+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';
+/**
+ * 导航占位控制器
+ *
+ * @export
+ * @class NavPosController
+ * @extends {PanelItemController}
+ */
+export class NavPosController
+  extends PanelItemController<IPanelRawItem>
+  implements IPanelItemNavPosController
+{
+  /**
+   * 导航占位状态
+   *
+   * @type {NavPosState}
+   * @memberof NavPosController
+   */
+  declare state: NavPosState;
+
+  /**
+   * 导航视图的modal
+   *
+   * @type {{ [key: string]: IModal }}
+   * @memberof NavPosController
+   */
+  viewModals: { [key: string]: IModal } = {};
+
+  /**
+   * 当前导航视图
+   *
+   * @type {INavViewMsg}
+   * @memberof NavPosController
+   */
+  curNavViewMsg!: INavViewMsg;
+
+  /**
+   * Router 对象
+   *
+   * @type {Router}
+   * @memberof NavPosController
+   */
+  router!: Router;
+
+  /**
+   * 关联部件标识集合
+   * @author lxm
+   * @date 2023-08-10 07:35:08
+   * @type {string[]}
+   */
+  refCtrlKeys: string[] = [];
+
+  /**
+   * 自定义补充参数
+   *
+   * @author zk
+   * @date 2023-09-27 03:09:02
+   * @type {IData}
+   * @memberof NavPosController
+   */
+  rawItemParams: IData = {};
+
+  /**
+   * Route 对象
+   *
+   * @author zk
+   * @date 2023-06-29 04:06:59
+   * @type {RouteLocationNormalizedLoaded}
+   * @memberof NavPosController
+   */
+  get route(): RouteLocationNormalizedLoaded {
+    return this.router.currentRoute.value;
+  }
+
+  /**
+   * 导航项是否缓存
+   *
+   * @author zk
+   * @date 2023-09-27 03:09:49
+   * @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;
+  }
+
+  /**
+   * 设置 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;
+
+    // 路由模式下 必须为路由打开
+    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);
+  }
+
+  /**
+   * 当前路由视图的层级
+   *
+   * @readonly
+   * @type {(number | undefined)}
+   * @memberof NavPosController
+   */
+  get routeDepth(): number | undefined {
+    return this.panel.view.modal.routeDepth;
+  }
+
+  /**
+   * 路由改变
+   *
+   * @memberof NavPosController
+   */
+  onRouteChange(route: RouteLocationNormalizedLoaded): void {
+    // 没有当前导航视图信息时不做任何处理
+    if (this.curNavViewMsg) {
+      // 路由打开的视图，currentKey在路由变更之后改值。此时新建的视图才能识别到跳转之后的路由。
+      this.state.currentKey = this.curNavViewMsg.key;
+
+      // 更新fullPath信息
+      this.state.navViewMsgs[this.curNavViewMsg.key].fullPath = route.fullPath;
+    }
+  }
+
+  /**
+   * 设置导航视图信息
+   *
+   * @author zk
+   * @date 2023-06-29 02:06:41
+   * @param {INavViewMsg} navViewMsg 导航视图信息
+   * @memberof NavPosController
+   */
+  setNavViewMsgs(navViewMsg: INavViewMsg): void {
+    // 已经存在的更新数据
+    if (this.state.navViewMsgs[navViewMsg.key]) {
+      mergeLeft(this.state.navViewMsgs[navViewMsg.key], navViewMsg);
+    } else {
+      // 不存在的走新建流程
+      this.state.navViewMsgs[navViewMsg.key] = navViewMsg;
+      if (this.getExpItemIsCache(navViewMsg)) {
+        // 往缓存keys里添加新视图的key
+        this.state.cacheKeys.push(navViewMsg.key);
+      }
+      this.viewModals[navViewMsg.key] = new Modal({
+        mode: this.routeDepth ? ViewMode.ROUTE : ViewMode.EMBED,
+        routeDepth: this.routeDepth ? this.routeDepth + 1 : undefined,
+        dismiss: () => {
+          // 执行对应key的dismiss方法
+          this.dismiss(navViewMsg.key);
+        },
+      });
+    }
+
+    // todo 换个方式
+    this.curNavViewMsg = this.state.navViewMsgs[navViewMsg.key];
+  }
+
+  /**
+   * 自身的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 {
+    ibiz.log.debug(this.constructor.name, 'onViewCreated', event);
+  }
+
+  /**
+   * 打开视图
+   *
+   * @param {INavViewMsg} openViewMsg
+   * @memberof NavPosController
+   */
+  openView(openViewMsg: INavViewMsg): void {
+    // 当key为空时，直接切换currentKey，绘制null
+    if (!openViewMsg.key) {
+      this.state.currentKey = openViewMsg.key;
+      return;
+    }
+
+    if (this.routeDepth && this.state.routeOpen) {
+      this.openViewByPath(openViewMsg);
+    } else {
+      this.openViewByModel(openViewMsg);
+    }
+  }
+
+  /**
+   * 通过路由打开视图
+   *
+   * @param {INavViewMsg} openViewMsg
+   * @memberof NavPosController
+   */
+  openViewByPath(openViewMsg: INavViewMsg): void {
+    this.setNavViewMsgs(openViewMsg);
+    const isRoutePushed =
+      this.state.navViewMsgs[this.curNavViewMsg.key].isRoutePushed === true;
+    // * 外部跳转过了的场景不需要这边跳转路由了，直接处理后续内容。
+    if (isRoutePushed) {
+      this.state.currentKey = openViewMsg.key;
+      this.state.navViewMsgs[this.curNavViewMsg.key].fullPath =
+        this.route.fullPath;
+      return;
+    }
+
+    // * 路由跳转
+    // 如果启用缓存并且有之前存过的fullPath则push回fullPath。
+    if (
+      this.state.navViewMsgs[openViewMsg.key].fullPath &&
+      this.getExpItemIsCache(openViewMsg)
+    ) {
+      this.router.push(this.state.navViewMsgs[openViewMsg.key].fullPath!);
+    } else {
+      // 走视图路由打开逻辑计算并push
+      const tempContext = Object.assign(openViewMsg.context!.clone(), {
+        toRouteDepth: this.routeDepth! + 1,
+      });
+      if (this.getExpItemIsCache(openViewMsg)) {
+        this.state.cacheKeys.push(openViewMsg.key);
+      }
+      ibiz.commands.execute(
+        OpenAppViewCommand.TAG,
+        openViewMsg.viewId,
+        tempContext,
+        openViewMsg.params,
+        { openMode: 'INDEXVIEWTAB' },
+      );
+    }
+
+    // !跳转路由过后，修改currentKey由onRouteChange那边路由变更之后处理。
+  }
+
+  /**
+   * 通过模型绘制视图
+   *
+   * @param {INavViewMsg} openViewMsg
+   * @memberof NavPosController
+   */
+  openViewByModel(openViewMsg: INavViewMsg): void {
+    this.setNavViewMsgs(openViewMsg);
+    // 切换currentKey，重新渲染openViewMsg
+    this.state.currentKey = openViewMsg.key;
+  }
+
+  /**
+   * 处理自定义补充参数 [{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,52 @@
+import { INavViewMsg, PanelItemState } from '@ibiz-template/runtime';
+
+/**
+ * 导航占位状态
+ *
+ * @export
+ * @class NavPosState
+ * @extends {PanelItemState}
+ */
+export class NavPosState extends PanelItemState {
+  /**
+   * 是否启用缓存
+   *
+   * @type {boolean}
+   * @memberof NavPosState
+   */
+  cache: boolean = true;
+
+  /**
+   * 是否是路由打开
+   *
+   * @author zk
+   * @date 2023-09-26 04:09:23
+   * @type {boolean}
+   * @memberof NavPosState
+   */
+  routeOpen: boolean = true;
+
+  /**
+   * 当前导航视图标识
+   * @author lxm
+   * @date 2023-05-25 06:24:48
+   * @type {string}
+   */
+  currentKey: string = '';
+
+  /**
+   * 缓存的视图标识
+   * @author lxm
+   * @date 2023-05-25 06:25:21
+   * @type {string[]}
+   */
+  cacheKeys: string[] = ['RouterShell'];
+
+  /**
+   * 导航视图详细信息
+   * @author lxm
+   * @date 2023-05-25 07:07:05
+   * @type {INavViewMsg[]}
+   */
+  navViewMsgs: { [p: string]: INavViewMsg } = {};
+}

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

@@ -0,0 +1,121 @@
+import {
+  defineComponent,
+  h,
+  PropType,
+  resolveComponent,
+  VNode,
+  watch,
+} from 'vue';
+import { IPanelRawItem } from '@ibiz/model-core';
+import { EventBase } from '@ibiz-template/runtime';
+import { useRoute, useRouter } from 'vue-router';
+import { NavPosController } from './nav-pos.controller';
+import './nav-pos.scss';
+import { useNamespace } from '../../use';
+import { getNestedRoutePath } from '../../util';
+
+export const NavPos = defineComponent({
+  name: 'IBizNavPos',
+  props: {
+    modelData: {
+      type: Object as PropType<IPanelRawItem>,
+      required: true,
+    },
+    controller: {
+      type: NavPosController,
+      required: true,
+    },
+  },
+  setup(props) {
+    const c = props.controller;
+    const ns = useNamespace('nav-pos');
+    const onViewCreated = (event: EventBase): void => {
+      c.onViewCreated(event);
+    };
+
+    const router = useRouter();
+    const route = useRoute();
+
+    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!
+          ) {
+            c.onRouteChange(route);
+          }
+        },
+        { immediate: true },
+      );
+    }
+
+    return { ns, c, onViewCreated };
+  },
+  render() {
+    const { viewModals, state } = this.c;
+    const { currentKey, cacheKeys, navViewMsgs, cache } = state;
+    let content: VNode | null = null;
+    if (state.routeOpen) {
+      content = (
+        <iBizRouterView
+          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
+        ? h(resolveComponent('IBizViewShell'), {
+            context: navViewMsgs[currentKey].context,
+            params: navViewMsgs[currentKey].params,
+            key: navViewMsgs[currentKey].key,
+            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.controller.containerClass,
+        ]}
+      >
+        {content}
+      </div>
+    );
+  },
+});

package/src/panel-component/panel-container/index.ts

@@ -0,0 +1,31 @@
+import { App } from 'vue';
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import { withInstall } from '../../util';
+import { PanelContainer } from './panel-container';
+import { PanelContainerProvider } from './panel-container.provider';
+import { PanelContainerState } from './panel-container.state';
+import { PanelContainerController } from './panel-container.controller';
+
+export {
+  PanelContainerProvider,
+  PanelContainerState,
+  PanelContainerController,
+};
+
+export const IBizPanelContainer = withInstall(
+  PanelContainer,
+  function (v: App) {
+    v.component(PanelContainer.name, PanelContainer);
+    registerPanelItemProvider('CONTAINER', () => new PanelContainerProvider());
+    registerPanelItemProvider(
+      'CONTAINER_DEFAULT',
+      () => new PanelContainerProvider(),
+    );
+    // registerPanelItemProvider(
+    //   'CONTAINER_CONTAINER_GRID',
+    //   () => new PanelContainerProvider(),
+    // );
+  },
+);
+
+export default IBizPanelContainer;

package/src/panel-component/panel-container/panel-container.controller.ts

@@ -0,0 +1,18 @@
+import { PanelItemController } from '@ibiz-template/runtime';
+import { IPanelContainer } from '@ibiz/model-core';
+import { PanelContainerState } from './panel-container.state';
+
+/**
+ * 面板容器控制器
+ *
+ * @export
+ * @class PanelContainerController
+ * @extends {PanelItemController}
+ */
+export class PanelContainerController extends PanelItemController<IPanelContainer> {
+  declare state: PanelContainerState;
+
+  protected createState(): PanelContainerState {
+    return new PanelContainerState(this.parent?.state);
+  }
+}

package/src/panel-component/panel-container/panel-container.provider.ts

@@ -0,0 +1,30 @@
+import {
+  IPanelItemProvider,
+  PanelController,
+  PanelItemController,
+} from '@ibiz-template/runtime';
+import { IPanelContainer } from '@ibiz/model-core';
+import { PanelContainerController } from './panel-container.controller';
+
+/**
+ * 面板容器适配器
+ *
+ * @author lxm
+ * @date 2022-09-19 22:09:03
+ * @export
+ * @class PanelContainerProvider
+ * @implements {EditorProvider}
+ */
+export class PanelContainerProvider implements IPanelItemProvider {
+  component: string = 'IBizPanelContainer';
+
+  async createController(
+    panelItem: IPanelContainer,
+    panel: PanelController,
+    parent: PanelItemController | undefined,
+  ): Promise<PanelItemController> {
+    const c = new PanelContainerController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}

package/src/panel-component/panel-container/panel-container.scss

@@ -0,0 +1,15 @@
+// 默认样式
+@include b(panel-container) {
+  width: 100%;
+  height: 100%;
+
+  > .#{bem('row')} {
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  @include when(hidden) {
+    display: none;
+  }
+}

package/src/panel-component/panel-container/panel-container.state.ts

@@ -0,0 +1,12 @@
+import { PanelItemState } from '@ibiz-template/runtime';
+
+/**
+ * 面板容器状态
+ *
+ * @author lxm
+ * @date 2023-02-07 06:04:27
+ * @export
+ * @class PanelContainerState
+ * @extends {PanelItemState}
+ */
+export class PanelContainerState extends PanelItemState {}