@ibiz-template/vue3-util 0.6.1-dev.0 → 0.6.1-dev.2

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

@@ -1,10 +0,0 @@
-$multi-data-container: (
-);
-
-// 默认样式
-@include b(multi-data-container) {
-  @include set-component-css-var('multi-data-container', $multi-data-container);
-
-  width: 100%;
-  height: 100%;
-}

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

@@ -1,20 +0,0 @@
-import { PanelItemState } from '@ibiz-template/runtime';
-
-/**
- * 多项数据容器状态
- *
- * @author lxm
- * @date 2023-02-07 06:04:27
- * @export
- * @class MultiDataContainerState
- * @extends {PanelItemState}
- */
-export class MultiDataContainerState extends PanelItemState {
-  /**
-   * 多项数据容器数据
-   * @author lxm
-   * @date 2023-07-14 12:07:45
-   * @type {(IData | IData[])}
-   */
-  items: IData[] = [];
-}

package/src/panel-component/multi-data-container/multi-data-container.tsx

@@ -1,109 +0,0 @@
-import {
-  IPanelItemProvider,
-  IPanelItemController,
-} from '@ibiz-template/runtime';
-import { IPanelContainer, IPanelItem } from '@ibiz/model-core';
-import {
-  computed,
-  defineComponent,
-  inject,
-  PropType,
-  reactive,
-  VNode,
-  watch,
-} from 'vue';
-import { useNamespace } from '../../use';
-import { MultiDataContainerController } from './multi-data-container.controller';
-import './multi-data-container.scss';
-
-export const MultiDataContainer = defineComponent({
-  name: 'IBizMultiDataContainer',
-  props: {
-    modelData: {
-      type: Object as PropType<IPanelContainer>,
-      required: true,
-    },
-    controller: {
-      type: MultiDataContainerController,
-      required: true,
-    },
-  },
-  setup(props) {
-    const ns = useNamespace('multi-data-container');
-    const { id } = props.modelData;
-
-    // 面板成员state响应式
-    watch(
-      () => props.controller.state.items,
-      () => {
-        props.controller.dataItems.forEach(item => {
-          item.state = reactive(item.state);
-
-          const keys = Object.keys(item.panelItems);
-          keys.forEach(key => {
-            const panelItem = item.panelItems[key];
-            panelItem.state = reactive(panelItem.state);
-          });
-        });
-      },
-      { immediate: true },
-    );
-
-    // 获取上层的绘制函数
-    const renderPanelItem = inject<
-      (
-        panelItem: IPanelItem,
-        options?: {
-          providers: {
-            [key: string]: IPanelItemProvider;
-          };
-          panelItems: {
-            [key: string]: IPanelItemController;
-          };
-        },
-      ) => VNode | null
-    >('renderPanelItem')!;
-
-    // 类名控制
-    const classArr = computed(() => {
-      const result: Array<string | false> = [
-        ns.b(),
-        ns.m(id),
-        ...props.controller.containerClass,
-      ];
-      return result;
-    });
-
-    return { ns, classArr, renderPanelItem };
-  },
-  render() {
-    let content: VNode | VNode[];
-    if (this.$slots.default) {
-      content = this.$slots.default();
-    } else {
-      // 内容区默认插槽处理，封装app-col
-      content = this.controller.state.items.map((_item, index) => {
-        const itemController = this.controller.dataItems[index];
-        return (
-          <iBizRow class={this.ns.b('content')} layout={this.modelData.layout}>
-            {this.modelData.panelItems?.map(panelItem => {
-              const childController = itemController.panelItems[panelItem.id!];
-              return (
-                <iBizCol
-                  layoutPos={panelItem.layoutPos}
-                  state={childController.state}
-                >
-                  {this.renderPanelItem(panelItem, {
-                    providers: this.controller.providers,
-                    panelItems: itemController.panelItems,
-                  })}
-                </iBizCol>
-              );
-            })}
-          </iBizRow>
-        );
-      });
-    }
-    return <div class={this.classArr}>{content}</div>;
-  },
-});

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

@@ -1,16 +0,0 @@
-import { registerPanelItemProvider } from '@ibiz-template/runtime';
-import { App } from 'vue';
-import { withInstall } from '../../util';
-import { NavPos } from './nav-pos';
-import { NavPosProvider } from './nav-pos.provider';
-import { NavPosState } from './nav-pos.state';
-import { NavPosController } from './nav-pos.controller';
-
-export { NavPosState, NavPosController };
-
-export const IBizNavPos = withInstall(NavPos, function (v: App) {
-  v.component(NavPos.name, NavPos);
-  registerPanelItemProvider('RAWITEM_NAV_POS', () => new NavPosProvider());
-});
-
-export default IBizNavPos;

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

@@ -1,401 +0,0 @@
-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
-{
-  /**
-   * 导航占位状态
-   *
-   * @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;
-  }
-
-  /**
-   * 计算缓存 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 {
-    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
-   */
-  openViewByPath(openViewMsg: INavViewMsg): 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;
-    }
-
-    // * 路由跳转
-    if (openViewMsg.is404) {
-      const selfPath = getNestedRoutePath(this.route, this.routeDepth!, false);
-      if (openViewMsg.modalOptions?.replace) {
-        this.router.replace(`${selfPath}/404`);
-      } else {
-        this.router.push(`${selfPath}/404`);
-      }
-    } else 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.getExpItemIsCache(openViewMsg)) {
-        this.state.cacheKeys.push(cacheKey);
-      }
-      ibiz.commands.execute(
-        OpenAppViewCommand.TAG,
-        openViewMsg.viewId,
-        tempContext,
-        openViewMsg.params,
-        { openMode: 'INDEXVIEWTAB', ...openViewMsg.modalOptions },
-      );
-    }
-
-    // !跳转路由过后，修改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

@@ -1,38 +0,0 @@
-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

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

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

@@ -1,52 +0,0 @@
-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 } = {};
-}