@ibiz-template/vue3-util 0.5.7-alpha.0 → 0.5.7-alpha.10

package/es/view/common/view.mjs

@@ -1,6 +1,5 @@
-import { defineComponent, computed, ref, onMounted, onUnmounted, createVNode, resolveComponent, h, createTextVNode, withDirectives, resolveDirective } from 'vue';
+import { defineComponent, computed, createVNode, resolveComponent, h, createTextVNode, withDirectives, resolveDirective } from 'vue';
 import { ViewController, getControlsByView } from '@ibiz-template/runtime';
-import { createUUID } from 'qx-util';
 import './view.css';
 import '../../use/index.mjs';
 import { useNamespace } from '../../use/namespace/namespace.mjs';
@@ -44,19 +43,6 @@ const View = /* @__PURE__ */ defineComponent({
     const onLayoutPanelCreated = (controller) => {
       c.setLayoutPanel(controller);
     };
-    const container = ref(null);
-    const key = createUUID();
-    const devtool = window.devtool;
-    onMounted(() => {
-      if (devtool) {
-        devtool.registerView(key, c, container);
-      }
-    });
-    onUnmounted(() => {
-      if (devtool) {
-        devtool.unRegisterView(key);
-      }
-    });
     const renderViewMessage = (position) => {
       if (c.state.isCreated) {
         const viewMessages = c.state.viewMessages[position];
@@ -73,7 +59,6 @@ const View = /* @__PURE__ */ defineComponent({
       c,
       controls,
       viewClassNames,
-      container,
       onLayoutPanelCreated,
       renderViewMessage
     };
@@ -133,7 +118,6 @@ const View = /* @__PURE__ */ defineComponent({
       }
     }
     return withDirectives(createVNode("div", {
-      "ref": "container",
       "class": this.viewClassNames,
       "id": this.c.id
     }, [this.renderViewMessage("TOP"), layoutPanel, this.renderViewMessage("BOTTOM")]), [[resolveDirective("loading"), this.c.state.isLoading]]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibiz-template/vue3-util",
-  "version": "0.5.7-alpha.0",
+  "version": "0.5.7-alpha.10",
   "description": "vue3 工具包",
   "type": "module",
   "module": "es/index.mjs",
@@ -32,10 +32,10 @@
   "license": "MIT",
   "devDependencies": {
     "@ibiz-template/cli": "^0.3.10",
-    "@ibiz-template/core": "^0.5.7-alpha.0",
-    "@ibiz-template/runtime": "^0.5.7-alpha.0",
+    "@ibiz-template/core": "^0.5.7-alpha.10",
+    "@ibiz-template/runtime": "^0.5.7-alpha.10",
     "@ibiz-template/theme": "^0.5.7-alpha.0",
-    "@ibiz/model-core": "^0.1.6",
+    "@ibiz/model-core": "^0.1.9",
     "@types/path-browserify": "^1.0.2",
     "@types/qs": "^6.9.11",
     "@types/systemjs": "^6.13.5",
@@ -52,7 +52,7 @@
   "peerDependencies": {
     "@ibiz-template/core": "^0.5.0-beta.0",
     "@ibiz-template/runtime": "^0.5.0-beta.0",
-    "@ibiz/model-core": "^0.1.6",
+    "@ibiz/model-core": "^0.1.9",
     "dayjs": "^1.11.10",
     "path-browserify": "^1.0.1",
     "pinia": "^2.1.7",
@@ -62,5 +62,5 @@
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"
   },
-  "gitHead": "d334b6bfb6f0869076ab2d09f9d959885eef71dc"
+  "gitHead": "9ccf60215bd9d4c64c9102032c492a85ddbc591e"
 }

package/src/common/view-shell/view-shell.tsx

@@ -3,10 +3,10 @@
 import {
   getViewProvider,
   IViewProvider,
-  getMatchResPath,
+  calcDynaSysParams,
 } from '@ibiz-template/runtime';
 import { defineComponent, h, PropType, ref, resolveComponent } from 'vue';
-import { IAppDataEntity, IAppView } from '@ibiz/model-core';
+import { IAppView } from '@ibiz/model-core';
 import { RuntimeError } from '@ibiz-template/core';
 import { createUUID } from 'qx-util';
 import { isEmpty, isNil } from 'ramda';
@@ -42,13 +42,7 @@ export const IBizViewShell = defineComponent({
       if (viewModel.dynaSysMode === 1) {
         //* 计算实体资源路径上下文参数
         const appDataEntityId = viewModel.appDataEntityId;
-        let appDe: IAppDataEntity | undefined;
-        if (appDataEntityId) {
-          appDe = await ibiz.hub.getAppDataEntity(
-            appDataEntityId,
-            viewModel.appId,
-          );
-        } else {
+        if (!appDataEntityId) {
           throw new RuntimeError(
             `${viewModel.codeName}无实体,暂不支持加载动态模型`,
           );
@@ -57,38 +51,20 @@ export const IBizViewShell = defineComponent({
         const params = props.params || {};
 
         /** 加载动态模型的请求参数 */
-        const loadModelParams: IParams = {};
-        if (params.srfkey) {
-          loadModelParams.srfkey = params.srfkey;
-        } else {
-          // * 计算资源路径上下文参数
-          // 主键
-          const srfkey = props.context[appDe.codeName!.toLowerCase()];
-          if (srfkey) {
-            loadModelParams.srfkey = srfkey;
-          }
-        }
+        const loadModelParams: IParams = await calcDynaSysParams(
+          appDataEntityId,
+          props.context,
+          { viewParams: params, appId: viewModel.appId },
+        );
 
-        // 如果视图参数同时存在 srfparentkey 与 srfparentdeanme 则直接使用视图参数
-        if (params.srfparentkey && params.srfparentdeanme) {
-          loadModelParams.srfparentkey = params.srfparentkey;
-          loadModelParams.srfparentdeanme = params.srfparentdeanme;
-        } else {
-          // 上层资源路径主实体名称和主键
-          const match = getMatchResPath(props.context, appDe);
-          if (match && match.keys.length > 1) {
-            const parentDeKey = match.keys[match.keys.length - 2];
-            loadModelParams.srfparentkey =
-              params.srfparentkey || props.context[parentDeKey];
-            loadModelParams.srfparentdeanme =
-              params.srfparentdeanme || parentDeKey;
-          }
+        if (params.srfdatatype) {
+          loadModelParams.srfdatatype = params.srfdatatype;
         }
 
         // 如果视图参数中存在 srfwftag 则直接使用视图参数
         if (params.srfwftag) {
           loadModelParams.srfwftag = params.srfwftag;
-        } else if (appDe && viewModel.enableWF) {
+        } else if (appDataEntityId && viewModel.enableWF) {
           // 处理数据请求的上下文
           const context: IContext = { ...props.context };
           // 存在主键则加载数据计算对应的参数

package/src/control/panel/panel/panel.tsx

@@ -74,12 +74,18 @@ function renderPanelItem(
     };
   }
 
+  // 直接样式
+  let tempStyle = '';
+  if (panelItem.cssStyle) {
+    tempStyle = panelItem.cssStyle;
+  }
   return h(
     component,
     {
       modelData: panelItem,
       controller: panelItems[panelItem.id!],
       key: panelItem.id,
+      style: tempStyle,
     },
     children,
   );

package/src/control/panel/view-layout-panel/view-layout-panel.tsx

@@ -128,12 +128,18 @@ export const ViewLayoutPanelControl = defineComponent({
         };
       }
 
+      // 直接样式
+      let tempStyle = '';
+      if (panelItem.cssStyle) {
+        tempStyle = panelItem.cssStyle;
+      }
       return h(
         component,
         {
           modelData: panelItem,
           controller: panelItems[panelItem.id!],
           key: panelItem.id,
+          style: tempStyle,
         },
         children,
       );

package/src/panel-component/panel-rawitem/panel-rawitem.tsx

@@ -1,5 +1,5 @@
 import { IPanelRawItem } from '@ibiz/model-core';
-import { computed, defineComponent, PropType } from 'vue';
+import { computed, defineComponent, PropType, ref } from 'vue';
 import { useNamespace } from '../../use';
 import { PanelRawItemController } from './panel-rawitem.controller';
 import './panel-rawitem.scss';
@@ -19,6 +19,14 @@ export const PanelRawItem = defineComponent({
   setup(props) {
     const ns = useNamespace('panel-rawitem');
 
+    const tempStyle = ref('');
+
+    const { rawItem } = props.modelData;
+
+    if (rawItem && rawItem.cssStyle) {
+      tempStyle.value = rawItem.cssStyle;
+    }
+
     // 类名控制
     const classArr = computed(() => {
       const { id } = props.modelData;
@@ -30,6 +38,7 @@ export const PanelRawItem = defineComponent({
     return {
       ns,
       classArr,
+      tempStyle,
     };
   },
   render() {
@@ -40,6 +49,7 @@ export const PanelRawItem = defineComponent({
     return (
       <div
         class={this.classArr}
+        style={this.tempStyle}
         onClick={() => {
           this.controller.onClick();
         }}

package/src/util/route/route.ts

@@ -19,16 +19,26 @@ import { IRoutePath, IRoutePathNode, IRouteViewData } from '../../interface';
  * @date 2022-08-18 11:08:08
  * @export
  * @param {string} pathStr 以/开头的路径，即router的path
+ * @param {boolean} [isRouteModal=false]
  * @returns {*}  {IRoutePath}
  */
-export function route2routePath(route: Route): IRoutePath {
+export function route2routePath(
+  route: Route,
+  isRouteModal: boolean = false,
+): IRoutePath {
   // 一共匹配了几级路由
   const depth = route.matched.length;
 
+  let path = route.path;
+  if (isRouteModal) {
+    path = path.replace(new RegExp(`/${RouteConst.ROUTE_MODAL_TAG}`, 'g'), '');
+  }
+  const items = path.split('/');
+
   // 解析路径节点
   const pathNodes: IRoutePathNode[] = [];
   for (let index = 1; index <= depth; index++) {
-    const viewName = route.path.split('/')[index * 2];
+    const viewName = items[index * 2];
     const paramsStr = route.params[`params${index}`] as string;
 
     /** 路由参数，默认是视图参数 */
@@ -341,6 +351,15 @@ export async function generateRoutePathByModal(
 ): Promise<{ path: string }> {
   const routePath = route2routePath(route);
 
+  // 特殊处理 RouteConst.ROUTE_MODAL_TAG，因为只能有一级避免多次或重复点击，导致路由计算错误。再次点击时把之前的modal路由删除
+  const findIndex = routePath.pathNodes.findIndex(
+    item => item.viewName === RouteConst.ROUTE_MODAL_TAG,
+  );
+
+  if (findIndex !== -1) {
+    routePath.pathNodes = routePath.pathNodes.slice(0, findIndex);
+  }
+
   // 导航视图的导航参数,加在目标层级之前的一个层级的视图参数里
   if (context.currentSrfNav) {
     const currentNode = routePath.pathNodes[routePath.pathNodes.length - 1];
@@ -352,7 +371,9 @@ export async function generateRoutePathByModal(
 
   // 计算目标视图path路径
   routePath.pathNodes.push({
-    viewName: `${RouteConst.ROUTE_MODAL_TAG}/${appView.codeName!.toLowerCase()}`,
+    viewName: `${
+      RouteConst.ROUTE_MODAL_TAG
+    }/${appView.codeName!.toLowerCase()}`,
     context: getOwnRouteContext(context),
     params,
   });
@@ -366,23 +387,27 @@ export async function generateRoutePathByModal(
  * @author lxm
  * @date 2022-08-17 22:08:51
  * @export
- * @param {IApplication} appModel 视图模型
  * @param {Route} route 路由对象
  * @param {number} depth 层级
+ * @param {boolean} [isRouteModal=false]
  * @returns {*}  {IRouteViewData}
  */
 export async function parseRouteViewData(
   route: Route,
   depth: number,
+  isRouteModal: boolean = false,
 ): Promise<IRouteViewData> {
   // 解析路由的视图参数
-  const routePath = route2routePath(route);
+  const routePath = route2routePath(route, isRouteModal);
 
   // 获取对应层级的视图名称参数
   let viewCodeName = routePath.pathNodes[depth - 1].viewName;
   if (!viewCodeName) {
     throw new RuntimeError(`第${depth}级路由不存在视图标识`);
   }
+  if (viewCodeName === RouteConst.ROUTE_MODAL_TAG) {
+    viewCodeName = routePath.pathNodes[depth].viewName;
+  }
   if (viewCodeName === 'index') {
     viewCodeName = ibiz.hub.defaultAppIndexViewName;
   }

package/src/util/store/app-store/app-store.ts

@@ -1,21 +1,10 @@
-import { IPortalAsyncAction } from '@ibiz-template/core';
 import { defineStore } from 'pinia';
-import { reactive, Ref } from 'vue';
-import { useAsyncAction } from '../async-action/async-action';
+import { reactive } from 'vue';
 
-export interface IAppStore {
-  allAsyncActions: Ref<IPortalAsyncAction[]>;
-  recentAsyncActions: IPortalAsyncAction[];
-}
+export interface IAppStore {}
 
 export const useAppStore = defineStore('appStore', () => {
-  const { allAsyncActions, recentAsyncActions } = useAsyncAction();
-  const appStore = reactive<IAppStore>({
-    allAsyncActions,
-    get recentAsyncActions() {
-      return recentAsyncActions.value;
-    },
-  });
+  const appStore = reactive<IAppStore>({});
 
   return { appStore };
 });

package/src/view/common/view.tsx

@@ -5,7 +5,6 @@ import {
   IViewProvider,
   ViewController,
 } from '@ibiz-template/runtime';
-import { createUUID } from 'qx-util';
 import { IAppView } from '@ibiz/model-core';
 import {
   defineComponent,
@@ -13,10 +12,7 @@ import {
   PropType,
   resolveComponent,
   VNode,
-  ref,
   computed,
-  onMounted,
-  onUnmounted,
 } from 'vue';
 import './view.scss';
 import { useNamespace, useViewController } from '../../use';
@@ -54,24 +50,6 @@ export const View = defineComponent({
       c.setLayoutPanel(controller as IViewLayoutPanelController);
     };
 
-    const container = ref<HTMLElement | null>(null);
-    // todo devtool抽全局
-    const key = createUUID();
-
-    // 临时实现从window上取
-    const devtool = (window as IData).devtool;
-    onMounted(() => {
-      if (devtool) {
-        devtool.registerView(key, c, container);
-      }
-    });
-
-    onUnmounted(() => {
-      if (devtool) {
-        devtool.unRegisterView(key);
-      }
-    });
-
     const renderViewMessage = (position: 'TOP' | 'BOTTOM' | 'BODY') => {
       if (c.state.isCreated) {
         const viewMessages = c.state.viewMessages[position];
@@ -91,7 +69,6 @@ export const View = defineComponent({
       c,
       controls,
       viewClassNames,
-      container,
       onLayoutPanelCreated,
       renderViewMessage,
     };
@@ -162,7 +139,6 @@ export const View = defineComponent({
 
     return (
       <div
-        ref='container'
         class={this.viewClassNames}
         id={this.c.id}
         v-loading={this.c.state.isLoading}

package/es/util/store/async-action/async-action.d.ts

@@ -1,56 +0,0 @@
-/**
- * 使用异步操作消息
- * @author lxm
- * @date 2023-11-14 03:17:28
- * @export
- * @return {*}
- */
-export declare function useAsyncAction(): {
-    allAsyncActions: import("vue").Ref<{
-        asyncacitonid: string;
-        asyncacitonname: string;
-        fulltopictag: string;
-        srfdcid: string;
-        dcsystemid: string;
-        actiontype: string;
-        actionstate: 10 | 20 | 30 | 40;
-        actionresult?: unknown;
-        stepinfo?: string | undefined;
-        completionrate?: number | undefined;
-        asyncresultdownloadurl?: string | undefined;
-        actionparam?: unknown;
-        actionparam2?: unknown;
-        actionparam3?: unknown;
-        actionparam4?: unknown;
-        begintime: string;
-        endtime: string;
-        createman: string;
-        createdate: string;
-        updateman: string;
-        updatedate: string;
-    }[]>;
-    recentAsyncActions: import("vue").ComputedRef<{
-        asyncacitonid: string;
-        asyncacitonname: string;
-        fulltopictag: string;
-        srfdcid: string;
-        dcsystemid: string;
-        actiontype: string;
-        actionstate: 10 | 20 | 30 | 40;
-        actionresult?: unknown;
-        stepinfo?: string | undefined;
-        completionrate?: number | undefined;
-        asyncresultdownloadurl?: string | undefined;
-        actionparam?: unknown;
-        actionparam2?: unknown;
-        actionparam3?: unknown;
-        actionparam4?: unknown;
-        begintime: string;
-        endtime: string;
-        createman: string;
-        createdate: string;
-        updateman: string;
-        updatedate: string;
-    }[]>;
-};
-//# sourceMappingURL=async-action.d.ts.map

package/es/util/store/async-action/async-action.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"async-action.d.ts","sourceRoot":"","sources":["../../../../src/util/store/async-action/async-action.ts"],"names":[],"mappings":"AAiDA;;;;;;GAMG;AACH,wBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiE7B"}

package/es/util/store/async-action/async-action.mjs

@@ -1,80 +0,0 @@
-import dayjs from 'dayjs';
-import { isNumber, isNil } from 'lodash-es';
-import { ref, computed, onUnmounted } from 'vue';
-
-"use strict";
-function formatAsyncAction(data) {
-  const dateFields = [
-    "begintime",
-    "endtime",
-    "createdate",
-    "updatedate"
-  ];
-  dateFields.forEach((key) => {
-    if (isNumber(data[key])) {
-      data[key] = dayjs(data[key]).format("YYYY-MM-DD HH:mm:ss");
-    }
-  });
-  if (!isNil(data.actionresult)) {
-    try {
-      const json = JSON.parse(data.actionresult);
-      data.actionresult = json;
-    } catch (error) {
-    }
-  }
-  if (!isNil(data.completionrate)) {
-    const num = Number(data.completionrate);
-    if (Number.isNaN(num)) {
-      data.completionrate = void 0;
-    } else {
-      data.completionrate = num;
-    }
-  }
-  return data;
-}
-function useAsyncAction() {
-  const allAsyncActions = ref([]);
-  const showLength = ref(0);
-  const recentAsyncActions = computed(() => {
-    return allAsyncActions.value.filter(
-      (_item, index) => index < showLength.value
-    );
-  });
-  const load = async () => {
-    const res = await ibiz.asyncAction.fetch();
-    res.data.forEach(formatAsyncAction);
-    allAsyncActions.value = res.data;
-  };
-  const asyncActionCallBack = (msg) => {
-    if (!msg.data || msg.subtype !== "ASYNCACTION") {
-      return;
-    }
-    console.log("\u539F\u59CB\u6570\u636E", msg);
-    const asyncAction = formatAsyncAction(msg.data);
-    console.log("\u683C\u5F0F\u5316\u540E\u6570\u636E", asyncAction);
-    const findIndex = allAsyncActions.value.findIndex(
-      (item) => item.asyncacitonid === asyncAction.asyncacitonid
-    );
-    if (findIndex === -1) {
-      allAsyncActions.value.unshift(asyncAction);
-      showLength.value += 1;
-    } else {
-      const isShow = findIndex >= showLength.value;
-      if (isShow) {
-        allAsyncActions.value.splice(findIndex, 1);
-        allAsyncActions.value.unshift(asyncAction);
-        showLength.value += 1;
-      } else {
-        allAsyncActions.value.splice(findIndex, 1, asyncAction);
-      }
-    }
-  };
-  load();
-  ibiz.mc.command.asyncAction.on(asyncActionCallBack);
-  onUnmounted(() => {
-    ibiz.mc.command.asyncAction.off(asyncActionCallBack);
-  });
-  return { allAsyncActions, recentAsyncActions };
-}
-
-export { useAsyncAction };

package/src/util/store/async-action/async-action.ts

@@ -1,122 +0,0 @@
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-
-import { IPortalAsyncAction, IPortalMessage } from '@ibiz-template/core';
-import dayjs from 'dayjs';
-import { isNil, isNumber } from 'lodash-es';
-import { computed, onUnmounted, ref } from 'vue';
-
-/**
- * 格式化数据
- * @author lxm
- * @date 2023-11-14 09:02:49
- * @param {IPortalAsyncAction} data
- * @return {*}  {IPortalAsyncAction}
- */
-function formatAsyncAction(data: IPortalAsyncAction): IPortalAsyncAction {
-  // 处理时间日期为毫秒值时，转换成字符串。
-  const dateFields = [
-    'begintime',
-    'endtime',
-    'createdate',
-    'updatedate',
-  ] as const;
-  dateFields.forEach(key => {
-    if (isNumber(data[key])) {
-      data[key] = dayjs(data[key]).format('YYYY-MM-DD HH:mm:ss');
-    }
-  });
-
-  if (!isNil(data.actionresult)) {
-    try {
-      const json = JSON.parse(data.actionresult as string);
-      data.actionresult = json;
-    } catch (error) {
-      // 不是对象类型就是字符串。
-    }
-  }
-
-  if (!isNil(data.completionrate)) {
-    const num = Number(data.completionrate);
-    if (Number.isNaN(num)) {
-      data.completionrate = undefined;
-    } else {
-      data.completionrate = num;
-    }
-  }
-
-  return data;
-}
-
-/**
- * 使用异步操作消息
- * @author lxm
- * @date 2023-11-14 03:17:28
- * @export
- * @return {*}
- */
-export function useAsyncAction() {
-  /** 所有消息数据 */
-  const allAsyncActions = ref<IPortalAsyncAction[]>([]);
-  /** 显示的长度 */
-  const showLength = ref(0);
-
-  /** 显示的消息数据 */
-  const recentAsyncActions = computed(() => {
-    return allAsyncActions.value.filter(
-      (_item, index) => index < showLength.value,
-    );
-  });
-
-  const load = async () => {
-    const res = await ibiz.asyncAction.fetch();
-    res.data.forEach(formatAsyncAction);
-    allAsyncActions.value = res.data;
-  };
-
-  /**
-   * 异步消息变更回调处理
-   * @author lxm
-   * @date 2023-11-14 03:53:08
-   */
-  const asyncActionCallBack = (msg: IPortalMessage) => {
-    if (!msg.data || msg.subtype !== 'ASYNCACTION') {
-      return;
-    }
-    console.log('原始数据', msg);
-
-    const asyncAction = formatAsyncAction(msg.data as IPortalAsyncAction);
-
-    console.log('格式化后数据', asyncAction);
-
-    const findIndex = allAsyncActions.value.findIndex(
-      item => item.asyncacitonid === asyncAction.asyncacitonid,
-    );
-    if (findIndex === -1) {
-      // 不存在的数据补充到最开始，并显示长度加一
-      allAsyncActions.value.unshift(asyncAction);
-      showLength.value += 1;
-    } else {
-      const isShow = findIndex >= showLength.value;
-      // 找的到但是不在显示列表里,移到开头，并增加长度
-      if (isShow) {
-        allAsyncActions.value.splice(findIndex, 1);
-        allAsyncActions.value.unshift(asyncAction);
-        showLength.value += 1;
-      } else {
-        allAsyncActions.value.splice(findIndex, 1, asyncAction);
-      }
-    }
-  };
-
-  // *初始化操作
-  load();
-
-  // 监听异步操作消息变更
-  ibiz.mc.command.asyncAction.on(asyncActionCallBack);
-  // 销毁时删除监听
-  onUnmounted(() => {
-    ibiz.mc.command.asyncAction.off(asyncActionCallBack);
-  });
-
-  return { allAsyncActions, recentAsyncActions };
-}