@ibiz-template/vue3-util 0.0.3-beta.4 → 0.0.3-beta.6

package/out/util/route/route.js

@@ -1,7 +1,26 @@
-import { notNilEmpty } from 'qx-util';
+import { isNilOrEmpty, notNilEmpty } from 'qx-util';
 import { RuntimeError } from '@ibiz-template/core';
 import qs from 'qs';
 import { calcRouteContext } from '@ibiz-template/runtime';
+/**
+ * 获取自身的路由上下文，排除了部分不需要路由携带的参数
+ *
+ * @author lxm
+ * @date 2023-03-14 02:07:41
+ * @export
+ * @param {IContext} context
+ * @returns {*}  {IParams}
+ */
+export function getOwnRouteContext(context) {
+    const ownContext = context.getOwnContext();
+    const excludeKeys = ['srfsessionid'];
+    Object.keys(ownContext).forEach(key => {
+        if (excludeKeys.includes(key)) {
+            delete ownContext[key];
+        }
+    });
+    return ownContext;
+}
 /**
  * 生成route路径
  *
@@ -15,23 +34,27 @@ import { calcRouteContext } from '@ibiz-template/runtime';
  * @returns {*}  {string}
  */
 export function generateRoutePath(appView, route, context, params) {
-    var _a;
+    var _a, _b;
     const routePath = route2routePath(route);
     // 如果上下文存在toRouteLevel时，使用上下文的层级，否则是第二级路由
     let level = 2;
-    if (context === null || context === void 0 ? void 0 : context.toRouteLevel) {
+    if (context.toRouteLevel) {
         level = context.toRouteLevel;
         // 使用完后删除，避免添加到首页上下文里
         delete context.toRouteLevel;
     }
     // 删除目标层级和之后的路由，保留之前层级的路由
     routePath.pathNodes.splice(level - 1, routePath.pathNodes.length - level + 1);
-    // 修改当前层级路由的附加上下文参数
-    if (context === null || context === void 0 ? void 0 : context.currentRouteContext) {
-        routePath.pathNodes[level - 2].context = context.currentRouteContext;
+    // 导航视图的导航参数,加在目标层级之前的一个层级的视图参数里
+    if (context.currentSrfNav) {
+        const currentNode = routePath.pathNodes[routePath.pathNodes.length - 1];
+        currentNode.params = currentNode.params || {};
+        currentNode.params.srfnav = context.currentSrfNav;
+        // 使用完后删除，避免添加到首页上下文里
+        delete context.currentSrfNav;
     }
     // 重定向视图跳转的一级首页路由
-    if (routePath.pathNodes[0].viewName === 'appredirectview') {
+    if (((_a = routePath.pathNodes[0]) === null || _a === void 0 ? void 0 : _a.viewName) === 'appredirectview') {
         if (params === null || params === void 0 ? void 0 : params.srfindexname) {
             routePath.pathNodes[0].viewName = params.srfindexname;
             delete params.srfindexname;
@@ -41,20 +64,34 @@ export function generateRoutePath(appView, route, context, params) {
         }
     }
     // 计算目标视图path路径
-    routePath.pathNodes.push({ viewName: appView.codeName.toLowerCase() });
-    const codeName = (_a = appView.getPSAppDataEntity()) === null || _a === void 0 ? void 0 : _a.codeName;
-    // 计算最新的上下文并更新到index后面
-    if (context && codeName) {
+    routePath.pathNodes.push({
+        viewName: appView.codeName.toLowerCase(),
+        context: getOwnRouteContext(context),
+        params,
+    });
+    // 计算二级视图的资源路径加到index后面
+    const codeName = (_b = appView.getPSAppDataEntity()) === null || _b === void 0 ? void 0 : _b.codeName;
+    if (level === 2 && 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 = {};
+        const resContext = calcRouteContext(context, paths);
+        if (!isNilOrEmpty(resContext)) {
+            // 资源路径不为空,二级视图的上下文删掉多余的资源上下文
+            routePath.pathNodes[0].context = resContext;
+            Object.keys(resContext).forEach(key => {
+                const currentNode = routePath.pathNodes[level - 1];
+                if (currentNode.context &&
+                    Object.prototype.hasOwnProperty.call(currentNode.context, key)) {
+                    delete currentNode.context[key];
+                }
+            });
+        }
+        else {
+            routePath.pathNodes[0].context = undefined;
+        }
     }
     // 视图参数通过query传递
-    return { path: routePath2string(routePath), query: params };
+    return { path: routePath2string(routePath) };
 }
 /**
  * 获取视图模型的codeName(小写)
@@ -145,7 +182,7 @@ export function parseRouteViewData(appModel, route, level) {
     }
     const modelPath = viewModel.modelPath;
     const { viewType } = viewModel.refM;
-    // 解析上下文参数,整合当前层级之前所有的上下文参数
+    // !解析上下文参数,整合当前层级之前所有的上下文参数
     const context = {};
     // 合并appData里的应用上下文
     if ((_a = ibiz.appData) === null || _a === void 0 ? void 0 : _a.context) {
@@ -156,26 +193,21 @@ export function parseRouteViewData(appModel, route, level) {
     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);
-            }
+            Object.assign(context, pathNode.context);
         }
     }
     // 最后一级路由对应的视图才会解析视图参数
-    let params;
-    if (route.matched.length === level) {
-        params = route.query;
-    }
+    const { params, srfnav } = routePath.pathNodes[level - 1];
     return {
         viewPath: modelPath,
         viewType,
         context,
         params,
+        srfnav,
     };
 }
 /**
@@ -194,31 +226,55 @@ export function route2routePath(route) {
     const pathNodes = [];
     for (let index = 1; index <= level; index++) {
         const viewName = route.params[`view${index}`];
-        let context = route.params[`params${index}`];
-        // context为占位符时置空
-        if (!context || context === ibiz.env.routePlaceholder) {
-            context = undefined;
+        const paramsStr = route.params[`params${index}`];
+        /** 路由参数，默认是视图参数 */
+        let params;
+        /** 上下文参数 */
+        let context;
+        let srfnav;
+        // params为占位符时置空
+        if (!paramsStr || paramsStr === ibiz.env.routePlaceholder) {
+            params = undefined;
         }
-        else if (index === 1) {
+        else {
             // 首页上下文要解析
-            context = qs.parse(context, { delimiter: ';' });
+            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 });
+        pathNodes.push({ viewName, context, params, srfnav });
     }
     // 解析应用上下文
     let appContext;
     if (route.params.appContext &&
         route.params.appContext !== ibiz.env.routePlaceholder) {
         appContext = qs.parse(route.params.appContext, {
+            strictNullHandling: true,
             delimiter: ';',
         });
     }
-    // 解析视图参数
-    let params;
-    if (route.query) {
-        params = Object.assign({}, route.query);
-    }
-    return { appContext, pathNodes, params };
+    return { appContext, pathNodes };
 }
 /**
  * 路由路径对象转路径字符串
@@ -233,33 +289,40 @@ export function routePath2string(routePath) {
     let pathStr = '';
     // 应用上下文
     if (routePath.appContext) {
-        pathStr += `/${qs.stringify(routePath.appContext, { delimiter: ';' })}`;
+        pathStr += `/${qs.stringify(routePath.appContext, {
+            delimiter: ';',
+            strictNullHandling: true,
+        })}`;
     }
     else {
         pathStr += `/${ibiz.env.routePlaceholder}`;
     }
     // 每一层级的视图
     routePath.pathNodes.forEach((pathNode, index) => {
-        pathStr += `/${pathNode.viewName}`;
+        pathStr += `/${pathNode.viewName}/`;
+        let routeParams;
         // 首页路由
         if (index === 0) {
-            if (notNilEmpty(pathNode.context) &&
-                Object.values(pathNode.context).length) {
+            if (notNilEmpty(pathNode.context)) {
                 // 对象转成a=11;b=222的格式，字符串直接附加在后面
-                pathStr += `/${qs.stringify(pathNode.context, { delimiter: ';' })}`;
-            }
-            else {
-                pathStr += `/${ibiz.env.routePlaceholder}`;
+                routeParams = pathNode.context;
             }
         }
         else {
-            // 非首页路由
-            pathStr += `/${pathNode.context || ibiz.env.routePlaceholder}`;
+            // 非首页路由,视图参数直接放到路由参数上，上下文转换后放到路由参数的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);
+                }
+            }
         }
+        // 把路由参数转换到路由路径上去
+        pathStr +=
+            qs.stringify(routeParams, { delimiter: ';', strictNullHandling: true }) ||
+                ibiz.env.routePlaceholder;
     });
-    // 附加视图参数
-    if (notNilEmpty(routePath.params)) {
-        pathStr += qs.stringify(routePath.params, { addQueryPrefix: true });
-    }
     return pathStr;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibiz-template/vue3-util",
-  "version": "0.0.3-beta.4",
+  "version": "0.0.3-beta.6",
   "description": "vue3 工具包",
   "type": "module",
   "main": "out/index.js",
@@ -29,11 +29,11 @@
   "author": "chitanda",
   "license": "MIT",
   "devDependencies": {
-    "@ibiz-template/core": "^0.0.3-beta.4",
-    "@ibiz-template/model": "^0.0.3-beta.4",
-    "@ibiz-template/runtime": "^0.0.3-beta.4",
+    "@ibiz-template/core": "^0.0.3-beta.5",
+    "@ibiz-template/model": "^0.0.3-beta.6",
+    "@ibiz-template/runtime": "^0.0.3-beta.6",
     "@types/qs": "^6.9.7",
-    "qs": "^6.11.0",
+    "qs": "^6.11.1",
     "qx-util": "^0.4.8",
     "ramda": "^0.28.0",
     "vue": "^3.2.47",
@@ -49,5 +49,5 @@
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"
   },
-  "gitHead": "9fea7c13d387c52cbe9c52c3694d5da215830e66"
+  "gitHead": "e21743071367b8b7c96734436f6ef8a1755ffae6"
 }

package/src/interface/util/route/route.ts

@@ -30,9 +30,9 @@ export interface IRouteViewData {
    *
    * @author lxm
    * @date 2022-08-17 23:08:15
-   * @type {IContext}
+   * @type {IParams}
    */
-  context?: IContext;
+  context?: IParams;
 
   /**
    *视图参数
@@ -42,6 +42,14 @@ export interface IRouteViewData {
    * @type {IParams}
    */
   params?: IParams;
+
+  /**
+   * 视图导航参数
+   * @author lxm
+   * @date 2023-03-14 08:41:50
+   * @type {string}
+   */
+  srfnav?: string;
 }
 
 /**
@@ -67,9 +75,26 @@ export interface IRoutePathNode {
    *
    * @author lxm
    * @date 2022-08-18 11:08:53
-   * @type {IContext}
+   * @type {IParams}
+   */
+  context?: IParams;
+
+  /**
+   * 视图参数对象
+   *
+   * @author lxm
+   * @date 2022-08-18 11:08:25
+   * @type {IParams}
    */
-  context?: IContext | string;
+  params?: IParams;
+
+  /**
+   * 视图导航参数（视图自身解析的额外路由参数）
+   * @author lxm
+   * @date 2023-03-14 08:39:36
+   * @type {string}
+   */
+  srfnav?: string;
 }
 
 /**
@@ -84,10 +109,10 @@ export interface IRoutePath {
   /**
    * 应用上下文
    *
-   * @type {IContext}
+   * @type {IParams}
    * @memberof IRoutePath
    */
-  appContext?: IContext;
+  appContext?: IParams;
 
   /**
    *
@@ -96,13 +121,4 @@ export interface IRoutePath {
    * @type {IRoutePathNode[]}
    */
   pathNodes: IRoutePathNode[];
-
-  /**
-   * 视图参数对象
-   *
-   * @author lxm
-   * @date 2022-08-18 11:08:25
-   * @type {IParams}
-   */
-  params?: IParams;
 }

package/src/props/editor/date-range.ts

@@ -0,0 +1,24 @@
+import { DateRangeEditorController } from '@ibiz-template/runtime';
+import { getEditorProps, getGridEditorCommonProps } from './common';
+
+/**
+ * 获取时间范围的props
+ *
+ * @export
+ * @template C
+ * @returns {*}
+ */
+export function getDateRangeProps<C = DateRangeEditorController>() {
+  return { ...getEditorProps<C>(), value: [String, Number] };
+}
+
+/**
+ * 获取表格时间范围的props
+ *
+ * @export
+ * @template C
+ * @returns {*}
+ */
+export function getGridDateRangeProps<C = DateRangeEditorController>() {
+  return { ...getDateRangeProps<C>(), ...getGridEditorCommonProps() };
+}

package/src/props/editor/index.ts

@@ -15,3 +15,5 @@ export * from './switch';
 export * from './list-box';
 export * from './autocomplete';
 export * from './check-box';
+export * from './number-range';
+export * from './date-range';

package/src/props/editor/number-range.ts

@@ -0,0 +1,24 @@
+import { NumberRangeEditorController } from '@ibiz-template/runtime';
+import { getEditorProps, getGridEditorCommonProps } from './common';
+
+/**
+ * 获取数值范围的props
+ *
+ * @export
+ * @template C
+ * @returns {*}
+ */
+export function getNumberRangeProps<C = NumberRangeEditorController>() {
+  return { ...getEditorProps<C>(), value: [String, Number] };
+}
+
+/**
+ * 获取表格数值范围的props
+ *
+ * @export
+ * @template C
+ * @returns {*}
+ */
+export function getGridNumberRangeProps<C = NumberRangeEditorController>() {
+  return { ...getNumberRangeProps<C>(), ...getGridEditorCommonProps() };
+}

package/src/props/editor/text-box.ts

@@ -52,3 +52,29 @@ export function getInputNumberProps<C = TextBoxEditorController>() {
 export function getGridInputNumberProps<C = TextBoxEditorController>() {
   return { ...getInputNumberProps<C>(), ...getGridEditorCommonProps() };
 }
+
+/**
+ * 获取ip框的props
+ *
+ * @author lxm
+ * @date 2022-11-01 19:11:12
+ * @export
+ * @template C
+ * @returns {*}
+ */
+export function getInputIpProps<C = TextBoxEditorController>() {
+  return { ...getEditorProps<C>(), value: String };
+}
+
+/**
+ * 获取表格ip框的props
+ *
+ * @author lxm
+ * @date 2022-11-01 19:11:12
+ * @export
+ * @template C
+ * @returns {*}
+ */
+export function getGridInputIpProps<C = TextBoxEditorController>() {
+  return { ...getInputIpProps<C>(), ...getGridEditorCommonProps() };
+}

package/src/use/route/route.ts

@@ -1,35 +1,7 @@
 import { RouteLocationNormalizedLoaded, useRoute } from 'vue-router';
-import qs from 'qs';
 import { ref, Ref, watch } from 'vue';
 import { RouteListener } from '../../util';
 
-/**
- * 获取路由上下文参数
- *
- * @author chitanda
- * @date 2022-08-15 15:08:52
- * @export
- * @return {*}  {IContext}
- */
-export function useRouterContext(): IContext {
-  const route = useRoute();
-  const { params } = route;
-  const contextParams = {};
-  if (params) {
-    const keys = Object.keys(params);
-    const reg = /[^/]+=[^/]+/;
-    keys.forEach(key => {
-      const val = params[key] as string;
-      if (val && reg.test(val)) {
-        Object.assign(contextParams, {
-          ...qs.parse(val, { delimiter: ';' }),
-        });
-      }
-    });
-  }
-  return contextParams;
-}
-
 /**
  * 获取路由查询参数
  *

package/src/use/widget/index.ts

@@ -9,7 +9,7 @@ export { usePickupViewPanelController } from './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 { usePanelController } from './use-panel-controller/use-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-layout-panel-controller/use-layout-panel-controller.ts → use-panel-controller/use-panel-controller.ts}

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

package/src/util/index.ts

@@ -1,2 +1,3 @@
 export * from './route/route';
 export * from './route/route-listener';
+export * from './render-provider/render-ctrl-provider';

package/src/util/render-provider/render-ctrl-provider.ts

@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ViewController } from '@ibiz-template/runtime';
+import { h, resolveComponent, VNode } from 'vue';
+
+/**
+ * 返回绘制视图里的部件的适配器的render函数
+ * @author lxm
+ * @date 2023-03-21 08:19:24
+ * @export
+ * @param {ViewController} controller
+ * @param {string} providerName
+ * @param {IParams} props
+ * @return {*}  {((...args: any[]) => VNode | null)}
+ */
+export function renderCtrlProvider(
+  controller: ViewController,
+  providerName: string,
+  props: IParams,
+): (...args: any[]) => VNode | null {
+  return (..._args: any[]) => {
+    if (!controller.state.complete) {
+      return null;
+    }
+    const provider = controller.providers[providerName];
+    if (!provider) {
+      return null;
+    }
+    const component = resolveComponent(provider.component);
+    return h(component, { ...props });
+  };
+}