@ibiz-template/vue3-util 0.0.3-beta.1 → 0.0.3-beta.3

package/src/use/view/use-view-controller/use-view-controller.ts

@@ -26,7 +26,9 @@ export function useViewController<T extends ViewController>(
   const vue = proxy!;
   // 获取 props
   const props = useProps();
-  const c = reactive(fn(props.context, props.params)) as T;
+  const c = fn(props.context, props.params);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  c.state = reactive(c.state) as any;
 
   // 挂载强制更新方法
   onBeforeMount(() => {

package/src/use/view/use-wizard-view/use-wizard-view.ts

@@ -0,0 +1,19 @@
+import { WizardViewController } from '@ibiz-template/runtime';
+import { useViewController } from '../use-view-controller/use-view-controller';
+
+/**
+ * 向导视图控制器
+ *
+ * @author lxm
+ * @date 2023-02-16 11:28:16
+ * @export
+ * @param {string} path
+ * @returns {*}  {WizardViewController}
+ */
+export function useWizardViewController(path: string): WizardViewController {
+  return useViewController<WizardViewController>(
+    (context: IContext, params: IParams) => {
+      return new WizardViewController(path, context, params);
+    },
+  );
+}

package/src/use/vue/vue.ts

@@ -2,6 +2,8 @@ import { isFunc } from 'qx-util';
 import {
   ComponentPublicInstance,
   getCurrentInstance,
+  isReactive,
+  toRaw,
   watch,
   WatchOptions,
 } from 'vue';
@@ -19,6 +21,20 @@ export function useProps(): IData {
   return vue.$props;
 }
 
+/**
+ * 如果是reactive代理过的对象，返回原始对象
+ *
+ * @author lxm
+ * @date 2023-02-15 10:56:00
+ * @export
+ * @param {*} val
+ * @returns {*}
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function getOrigin(val: any) {
+  return isReactive(val) ? toRaw(val) : val;
+}
+
 /**
  * 监听props的属性
  *
@@ -39,12 +55,12 @@ export function usePropsWatch<T = unknown>(
     watch(
       () => props[key],
       (newVal, oldVal) => {
-        callback(newVal, oldVal);
+        callback(getOrigin(newVal), getOrigin(oldVal));
       },
       options,
     );
     // immediate无效，模拟第一次赋值
-    callback(props[key], undefined);
+    callback(getOrigin(props[key]), undefined);
   }
 }
 

package/src/use/widget/index.ts

@@ -8,3 +8,8 @@ export { useViewPanelController } from './use-view-panel-controller/use-view-pan
 export { usePickupViewPanelController } from './use-pickup-view-panel-controller/use-pickup-view-panel-controller';
 export { useDashboardController } from './use-dashboard-controller/use-dashboard-controller';
 export { useTreeController } from './use-tree-controller/use-tree-controller';
+export { useDataViewController } from './use-dataview-controller/use-dataview-controller';
+export { useLayoutPanelController } from './use-layout-panel-controller/use-layout-panel-controller';
+export { useViewLayoutPanelController } from './use-view-layout-panel-controller/use-view-layout-panel-controller';
+export { useWizardPanelController } from './use-wizard-panel-controller/use-wizard-panel-controller';
+export { useKanbanController } from './use-kanban-controller/use-kanban-controller';

package/src/use/widget/use-control-controller/use-control-controller.ts

@@ -22,7 +22,8 @@ export function useControlController<T extends ControlController>(
   fn: () => T,
 ): T {
   const vue = getCurrentInstance()!.proxy!;
-  const c = reactive(fn()) as T;
+  const c = fn();
+  c.state = reactive(c.state) as T;
 
   // 挂载强制更新方法
   onBeforeMount(() => {

package/src/use/widget/use-dataview-controller/use-dataview-controller.ts

@@ -0,0 +1,29 @@
+import { DataViewController } from '@ibiz-template/runtime';
+import { IBizContext } from '@ibiz-template/core';
+import { DataViewModel } from '@ibiz-template/model';
+import { useControlController } from '../use-control-controller/use-control-controller';
+import { usePropsWatch } from '../../vue/vue';
+
+/**
+ * 获取卡片部件控制器
+ *
+ * @author chitanda
+ * @date 2022-08-15 17:08:15
+ * @export
+ * @param {DataViewModel} model
+ * @param {IBizContext} context
+ * @param {IParams} [params={}]
+ * @return {*}  {DataViewController}
+ */
+export function useDataViewController(
+  model: DataViewModel,
+  context: IBizContext,
+  params: IParams = {},
+): DataViewController {
+  return useControlController<DataViewController>(() => {
+    const c = new DataViewController(model, context, params);
+    // 监听prop，并响应式更新到controller
+    usePropsWatch('mdCtrlActiveMode', c.setMdCtrlActiveMode.bind(c));
+    return c;
+  });
+}

package/src/use/widget/use-grid-controller/use-grid-controller.ts

@@ -23,7 +23,10 @@ export function useGridController(
   return useControlController<GridController>(() => {
     const c = new GridController(model, context, params);
     // 监听prop，并响应式更新到controller
-    usePropsWatch('gridRowActiveMode', c.setGridRowActiveMode.bind(c));
+    usePropsWatch('mdCtrlActiveMode', c.setMdCtrlActiveMode.bind(c));
+    usePropsWatch('isSelectFirstDefault', c.setIsSelectFirstDefault.bind(c));
+    usePropsWatch('defaultSelectKeys', c.setDefaultSelectKeys.bind(c));
+    usePropsWatch('isExpView', c.setIsExpView.bind(c));
 
     return c;
   });

package/src/use/widget/use-kanban-controller/use-kanban-controller.ts

@@ -0,0 +1,29 @@
+import { KanbanController } from '@ibiz-template/runtime';
+import { IBizContext } from '@ibiz-template/core';
+import { KanbanModel } from '@ibiz-template/model';
+import { useControlController } from '../use-control-controller/use-control-controller';
+import { usePropsWatch } from '../../vue/vue';
+
+/**
+ * 获取看板部件控制器
+ *
+ * @author chitanda
+ * @date 2022-08-15 17:08:15
+ * @export
+ * @param {KanbanModel} model
+ * @param {IBizContext} context
+ * @param {IParams} [params={}]
+ * @return {*}  {KanbanController}
+ */
+export function useKanbanController(
+  model: KanbanModel,
+  context: IBizContext,
+  params: IParams = {},
+): KanbanController {
+  return useControlController<KanbanController>(() => {
+    const c = new KanbanController(model, context, params);
+    // 监听prop，并响应式更新到controller
+    usePropsWatch('mdCtrlActiveMode', c.setMdCtrlActiveMode.bind(c));
+    return c;
+  });
+}

package/src/use/widget/use-layout-panel-controller/use-layout-panel-controller.ts

@@ -0,0 +1,27 @@
+import { LayoutPanelController } from '@ibiz-template/runtime';
+import { IBizContext } from '@ibiz-template/core';
+import { LayoutPanelModel } from '@ibiz-template/model';
+import { useControlController } from '../use-control-controller/use-control-controller';
+import { usePropsWatch } from '../../vue/vue';
+
+/**
+ * 获取布局面板控制器
+ *
+ * @export
+ * @param {LayoutPanelModel} model
+ * @param {IBizContext} context
+ * @param {IParams} [params={}]
+ * @returns {*}  {LayoutPanelController}
+ */
+export function useLayoutPanelController(
+  model: LayoutPanelModel,
+  context: IBizContext,
+  params: IParams = {},
+): LayoutPanelController {
+  return useControlController<LayoutPanelController>(() => {
+    const c = new LayoutPanelController(model, context, params);
+    // 监听prop，并响应式更新到controller
+    usePropsWatch('inputData', c.setInputData.bind(c));
+    return c;
+  });
+}

package/src/use/widget/use-list-controller/use-list-controller.ts

@@ -2,6 +2,7 @@ import { ListController } from '@ibiz-template/runtime';
 import { IBizContext } from '@ibiz-template/core';
 import { ListModel } from '@ibiz-template/model';
 import { useControlController } from '../use-control-controller/use-control-controller';
+import { usePropsWatch } from '../../vue/vue';
 
 /**
  * 获取列表部件控制器
@@ -21,6 +22,11 @@ export function useListController(
 ): ListController {
   return useControlController<ListController>(() => {
     const c = new ListController(model, context, params);
+    // 监听prop，并响应式更新到controller
+    usePropsWatch('mdCtrlActiveMode', c.setMdCtrlActiveMode.bind(c));
+    usePropsWatch('isSelectFirstDefault', c.setIsSelectFirstDefault.bind(c));
+    usePropsWatch('defaultSelectKeys', c.setDefaultSelectKeys.bind(c));
+    usePropsWatch('isExpView', c.setIsExpView.bind(c));
     return c;
   });
 }

package/src/use/widget/use-tree-controller/use-tree-controller.ts

@@ -2,6 +2,7 @@ import { TreeController } from '@ibiz-template/runtime';
 import { IBizContext } from '@ibiz-template/core';
 import { TreeModel } from '@ibiz-template/model';
 import { useControlController } from '../use-control-controller/use-control-controller';
+import { usePropsWatch } from '../../vue/vue';
 
 /**
  * 获取树部件控制器
@@ -20,6 +21,8 @@ export function useTreeController(
 ): TreeController {
   return useControlController<TreeController>(() => {
     const c = new TreeController(model, context, params);
+    usePropsWatch('defaultSelectKeys', c.setDefaultSelectKeys.bind(c));
+    usePropsWatch('isSelectFirstDefault', c.setIsSelectFirstDefault.bind(c));
     return c;
   });
 }

package/src/use/widget/use-view-layout-panel-controller/use-view-layout-panel-controller.ts

@@ -0,0 +1,24 @@
+import { ViewLayoutPanelController } from '@ibiz-template/runtime';
+import { IBizContext } from '@ibiz-template/core';
+import { ViewLayoutPanelModel } from '@ibiz-template/model';
+import { useControlController } from '../use-control-controller/use-control-controller';
+
+/**
+ * 获取视图布局面板控制器
+ *
+ * @export
+ * @param {ViewLayoutPanelModel} model
+ * @param {IBizContext} context
+ * @param {IParams} [params={}]
+ * @returns {*}  {ViewLayoutPanelController}
+ */
+export function useViewLayoutPanelController(
+  model: ViewLayoutPanelModel,
+  context: IBizContext,
+  params: IParams = {},
+): ViewLayoutPanelController {
+  return useControlController<ViewLayoutPanelController>(() => {
+    const c = new ViewLayoutPanelController(model, context, params);
+    return c;
+  });
+}

package/src/use/widget/use-wizard-panel-controller/use-wizard-panel-controller.ts

@@ -0,0 +1,26 @@
+import { WizardPanelController } from '@ibiz-template/runtime';
+import { IBizContext } from '@ibiz-template/core';
+import { WizardPanelModel } from '@ibiz-template/model';
+import { useControlController } from '../use-control-controller/use-control-controller';
+
+/**
+ * 获取向导面板部件控制器
+ *
+ *
+ * @author lxm
+ * @date 2023-02-15 07:37:33
+ * @export
+ * @param {WizardPanelModel} model
+ * @param {IBizContext} context
+ * @param {IParams} [params={}]
+ * @returns {*}  {WizardPanelController}
+ */
+export function useWizardPanelController(
+  model: WizardPanelModel,
+  context: IBizContext,
+  params: IParams = {},
+): WizardPanelController {
+  return useControlController<WizardPanelController>(() => {
+    return new WizardPanelController(model, context, params);
+  });
+}

package/src/util/index.ts

@@ -1 +1,2 @@
 export * from './route/route';
+export * from './route/route-listener';

package/src/util/route/route-listener.ts

@@ -0,0 +1,92 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { isFunction } from 'lodash-es';
+import { watch } from 'vue';
+import { RouteLocationNormalizedLoaded } from 'vue-router';
+
+type ChangeCallback = () => void;
+/**
+ * 监听路由变更，提供下一次变更执行的一次性回调。
+ *
+ * @export
+ * @class RouteListener
+ */
+export class RouteListener {
+  /**
+   * 回调集合
+   *
+   * @memberof RouteListener
+   */
+  private callbacks: Array<ChangeCallback> = [];
+
+  /**
+   * 计时器集合
+   *
+   * @private
+   * @type {any[]}
+   * @memberof RouteListener
+   */
+  private timers: any[] = [];
+
+  /**
+   * 等待路由响应时间
+   *
+   * @private
+   * @type {number}
+   * @memberof RouteListener
+   */
+  private wait: number = 500;
+
+  constructor(route: RouteLocationNormalizedLoaded, wait?: number) {
+    if (wait) {
+      this.wait = wait;
+    }
+    watch(
+      () => route.path,
+      (newVal, oldVal) => {
+        if (newVal !== oldVal) {
+          // 执行所有回调
+          if (this.callbacks.length) {
+            for (let index = 0; index < this.callbacks.length; index++) {
+              const fn = this.callbacks[index];
+              fn();
+            }
+          }
+          // 清空所有回调
+          this.callbacks = [];
+
+          // 清空所有计时器
+          if (this.timers.length) {
+            for (let index = 0; index < this.timers.length; index++) {
+              const timer = this.timers[index];
+              clearTimeout(timer);
+            }
+          }
+
+          this.timers = [];
+        }
+      },
+    );
+  }
+
+  /**
+   * 下一次路由变更后执行回调，只执行一次
+   *
+   * @param {ChangeCallback} callback
+   * @memberof RouteListener
+   */
+  nextChange(callback: ChangeCallback) {
+    if (isFunction(callback)) {
+      // 设定计时器,经过一段时间等不到时，执行回调，并删除回调集合里的回调
+      this.timers.push(
+        setTimeout(() => {
+          callback();
+          const index = this.callbacks.findIndex(item => item === callback);
+          this.callbacks.splice(index, 1);
+        }, this.wait),
+      );
+
+      // 存入回调集合等待被调用
+      this.callbacks.push(callback);
+    }
+  }
+}

package/src/util/route/route.ts

@@ -3,6 +3,7 @@ import { IBizContext, RuntimeError } from '@ibiz-template/core';
 import { IPSApplication, IPSAppView, IPSSubAppRef } from '@ibiz-template/model';
 import qs from 'qs';
 import { RouteLocationNormalizedLoaded as Route } from 'vue-router';
+import { calcRouteContext } from '@ibiz-template/runtime';
 import { IRoutePath, IRoutePathNode, IRouteViewData } from '../../interface';
 
 /**
@@ -23,7 +24,7 @@ export function generateRoutePath(
   context?: IBizContext | undefined,
   params?: IParams | undefined,
 ): string {
-  const routePath = string2routePath(route.fullPath);
+  const routePath = route2routePath(route);
   // 如果上下文存在toRouteLevel时，使用上下文的层级，否则是第二级路由
   let level = 2;
   if (context?.toRouteLevel) {
@@ -31,10 +32,15 @@ export function generateRoutePath(
     // 使用完后删除，避免添加到首页上下文里
     delete context.toRouteLevel;
   }
-  // 删除自身层级和之后的路由，保留之前层级的路由
+  // 删除目标层级和之后的路由，保留之前层级的路由
   routePath.pathNodes.splice(level - 1, routePath.pathNodes.length - level + 1);
 
-  // 一级首页路由
+  // 修改当前层级路由的附加上下文参数
+  if (context?.currentRouteContext) {
+    routePath.pathNodes[level - 2].context = context.currentRouteContext;
+  }
+
+  // 重定向视图跳转的一级首页路由
   if (routePath.pathNodes[0].viewName === 'appredirectview') {
     if (params?.srfindexname) {
       routePath.pathNodes[0].viewName = params.srfindexname;
@@ -44,24 +50,18 @@ export function generateRoutePath(
     }
   }
 
-  // 计算自身视图path路径
+  // 计算目标视图path路径
   routePath.pathNodes.push({ viewName: appView.codeName.toLowerCase() });
-  const deName = appView.getPSAppDataEntity()?.codeName.toLowerCase();
-
-  // 计算自身的context参数
-  if (context) {
-    const routeContext: IData = context.getOwnContext();
+  const codeName = appView.getPSAppDataEntity()?.codeName;
 
-    // 如果有路由上下文参数的话，添加到path上
-    if (Object.values(routeContext).length > 0) {
-      // 有视图实体主键上下文时，
-      if (deName && routeContext[deName]) {
-        routePath.pathNodes[level - 1].context = routeContext[deName];
-        delete routeContext[deName];
-      }
-      // 除主键外的参数合并到首页的参数里去
-      Object.assign(routePath.pathNodes[0].context as IContext, routeContext);
-    }
+  // 计算最新的上下文并更新到index后面
+  if (context && codeName) {
+    const app = ibiz.hub.getApp(appView.getPSModelService().app);
+    const paths = app.resourcePathUtil.calcPaths(codeName);
+    const routeContext = calcRouteContext(context, paths);
+    routePath.pathNodes[0].context = routeContext;
+  } else {
+    routePath.pathNodes[0].context = {};
   }
 
   // 存在视图参数时补充视图参数
@@ -151,7 +151,7 @@ export function parseRouteViewData(
   level: number,
 ): IRouteViewData {
   // 解析路由的视图参数
-  const routePath = string2routePath(route.fullPath);
+  const routePath = route2routePath(route);
 
   // 获取对应层级的视图名称参数
   const viewCodeName = routePath.pathNodes[level - 1].viewName;
@@ -172,24 +172,23 @@ export function parseRouteViewData(
 
   // 解析上下文参数,整合当前层级之前所有的上下文参数
   const context: IContext = {};
-  // 合并应用上下文
+  // 合并appData里的应用上下文
   if (ibiz.appData?.context) {
     Object.assign(context, ibiz.appData.context);
   }
 
+  // 合并路由上下文
+  // 合并路由应用上下文
+  if (routePath.appContext) {
+    Object.assign(context, routePath.appContext);
+  }
+  // 合并视图上下文
   for (let index = 0; index < level; index++) {
     const pathNode = routePath.pathNodes[index];
     if (notNilEmpty(pathNode.context)) {
       if (index === 0) {
         // 首页的context是对象直接合并
         Object.assign(context, pathNode.context);
-      } else {
-        // 其他层级，如果存在context则是主键字符串
-        const view = findView(appModel, pathNode.viewName);
-        const deName = view!.refM.resource?.toLowerCase();
-        if (deName) {
-          context[deName] = pathNode.context;
-        }
       }
     }
   }
@@ -217,46 +216,45 @@ export function parseRouteViewData(
  * @param {string} pathStr 以/开头的路径，即router的path
  * @returns {*}  {IRoutePath}
  */
-export function string2routePath(pathStr: string): IRoutePath {
-  let queryIndex = pathStr.lastIndexOf('?');
-  queryIndex = queryIndex === -1 ? pathStr.length : queryIndex;
-  let path = pathStr.substring(0, queryIndex);
-  if (path.indexOf('/') === 0) path = path.substring(1);
-  const queryPath = pathStr.substring(queryIndex + 1);
+export function route2routePath(route: Route): IRoutePath {
+  // 一共匹配了几级路由
+  const level = route.matched.length;
 
   // 解析路径节点
   const pathNodes: IRoutePathNode[] = [];
-
-  const paths = path.split('/');
-  let viewNum = 0;
-  paths.forEach((str: string, index: number) => {
-    // 第一级是首页
-    if (index === 0) {
-      pathNodes.push({ viewName: str.toLowerCase(), context: {} });
+  for (let index = 1; index <= level; index++) {
+    const viewName = route.params[`view${index}`] as string;
+    let context: string | undefined | IContext = route.params[
+      `params${index}`
+    ] as string;
+    // context为占位符时置空
+    if (!context || context === ibiz.env.routePlaceholder) {
+      context = undefined;
     } else if (index === 1) {
-      // 第二级是上下文或者二级视图
-      if (/[^/]+=[^/]+/.test(str)) {
-        pathNodes[pathNodes.length - 1].context = qs.parse(str, {
-          delimiter: ';',
-        });
-      } else {
-        pathNodes.push({ viewName: str.toLowerCase() });
-        viewNum = 1;
-      }
-    } else if (index % 2 === viewNum) {
-      pathNodes.push({ viewName: str.toLowerCase() });
-    } else {
-      pathNodes[pathNodes.length - 1].context = str === '_' ? undefined : str;
+      // 首页上下文要解析
+      context = qs.parse(context, { delimiter: ';' });
     }
-  });
+    pathNodes.push({ viewName, context });
+  }
+
+  // 解析应用上下文
+  let appContext;
+  if (
+    route.params.appContext &&
+    route.params.appContext !== ibiz.env.routePlaceholder
+  ) {
+    appContext = qs.parse(route.params.appContext as string, {
+      delimiter: ';',
+    });
+  }
 
   // 解析视图参数
   let params;
-  if (queryPath) {
-    params = qs.parse(queryPath);
+  if (route.query) {
+    params = { ...route.query };
   }
 
-  return { pathNodes, params };
+  return { appContext, pathNodes, params };
 }
 
 /**
@@ -270,6 +268,14 @@ export function string2routePath(pathStr: string): IRoutePath {
  */
 export function routePath2string(routePath: IRoutePath): string {
   let pathStr = '';
+  // 应用上下文
+  if (routePath.appContext) {
+    pathStr += `/${qs.stringify(routePath.appContext, { delimiter: ';' })}`;
+  } else {
+    pathStr += `/${ibiz.env.routePlaceholder}`;
+  }
+
+  // 每一层级的视图
   routePath.pathNodes.forEach((pathNode: IRoutePathNode, index: number) => {
     pathStr += `/${pathNode.viewName}`;
     // 首页路由
@@ -280,13 +286,16 @@ export function routePath2string(routePath: IRoutePath): string {
       ) {
         // 对象转成a=11;b=222的格式，字符串直接附加在后面
         pathStr += `/${qs.stringify(pathNode.context, { delimiter: ';' })}`;
+      } else {
+        pathStr += `/${ibiz.env.routePlaceholder}`;
       }
     } else {
       // 非首页路由
-      pathStr += `/${pathNode.context || '_'}`;
+      pathStr += `/${pathNode.context || ibiz.env.routePlaceholder}`;
     }
   });
 
+  // 附加视图参数
   if (notNilEmpty(routePath.params)) {
     pathStr += qs.stringify(routePath.params, { addQueryPrefix: true });
   }