@ibiz-template/vue3-util 0.7.41-alpha.13 → 0.7.41-alpha.131

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

@@ -0,0 +1,266 @@
+import {
+  defineComponent,
+  PropType,
+  resolveComponent,
+  h,
+  VNode,
+  reactive,
+  watch,
+  provide,
+  renderSlot,
+} from 'vue';
+import {
+  IPanelContainer,
+  IPanelField,
+  IPanelItem,
+  IPanelTabPanel,
+  IViewLayoutPanel,
+} from '@ibiz/model-core';
+import {
+  filterPresetAttrs,
+  IController,
+  IControlProvider,
+  IPanelItemController,
+  IPanelItemProvider,
+  isDataContainer,
+  isSimpleDataContainer,
+  ScriptFactory,
+  ViewLayoutPanelController,
+} from '@ibiz-template/runtime';
+import { useControlController, useNamespace } from '../../../use';
+import './view-layout-panel.scss';
+
+/**
+ * 绘制成员的attrs
+ * @author lxm
+ * @date 2024-03-19 03:48:00
+ * @param {IDEFormDetail} model
+ * @return {*}  {IParams}
+ */
+function renderAttrs(
+  model: IPanelItem,
+  controller: IPanelItemController,
+): IParams {
+  const attrs: IParams = {};
+  filterPresetAttrs(model.controlAttributes).forEach(item => {
+    if (item.attrName && item.attrValue) {
+      attrs[item.attrName!] = ScriptFactory.execSingleLine(item.attrValue!, {
+        ...controller.panel.getEventArgs(),
+        data: controller.data,
+      });
+    }
+  });
+  return attrs;
+}
+
+/**
+ * 视图布局面板组件
+ */
+export const ViewLayoutPanelControl = defineComponent({
+  name: 'IBizViewLayoutPanelControl',
+  props: {
+    /**
+     * @description 视图布局面板模型
+     */
+    modelData: {
+      type: Object as PropType<IViewLayoutPanel>,
+      required: true,
+    },
+    /**
+     * @description 应用上下文对象
+     */
+    context: { type: Object as PropType<IContext>, required: true },
+    /**
+     * @description 视图参数
+     * @default {}
+     */
+    params: { type: Object as PropType<IParams>, default: () => ({}) },
+    /**
+     * @ignoredoc
+     * @description 部件适配器
+     */
+    provider: { type: Object as PropType<IControlProvider> },
+    /**
+     * @description 容器控制器,为上层部件控制器或视图控制器
+     */
+    container: { type: Object as PropType<IController> },
+    /**
+     * @description 面板容器数据
+     */
+    data: { type: Object as PropType<IData> },
+  },
+  setup(props, { slots }) {
+    const c = useControlController(
+      (...args) => new ViewLayoutPanelController(...args, props.container),
+    );
+    const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
+
+    watch(
+      () => props.data,
+      newVal => {
+        if (newVal) {
+          c.setInputData(newVal);
+          c.load();
+        }
+      },
+      {
+        immediate: true,
+      },
+    );
+
+    c.evt.on('onCreated', () => {
+      // 面板成员state响应式
+      const keys = Object.keys(c.panelItems);
+      keys.forEach(key => {
+        const panelItem = c.panelItems[key];
+        panelItem.state = reactive(panelItem.state);
+      });
+    });
+
+    /**
+     * 绘制面板成员
+     * @author lxm
+     * @date 2023-08-25 04:09:07
+     * @param {IPanelItem} panelItem
+     * @return {*}  {(VNode | null)}
+     */
+    const renderPanelItem = (
+      panelItem: IPanelItem,
+      options?: {
+        providers: {
+          [key: string]: IPanelItemProvider;
+        };
+        panelItems: {
+          [key: string]: IPanelItemController;
+        };
+      },
+    ): VNode | null => {
+      if ((panelItem as IPanelField).hidden) {
+        return null;
+      }
+      const { providers, panelItems } = options || c;
+      const provider = providers[panelItem.id!];
+      if (!provider) {
+        return (
+          <div>
+            {ibiz.i18n.t('vue3Util.control.unsupportedPanel', {
+              id: panelItem.id,
+              itemType: panelItem.itemType,
+            })}
+          </div>
+        );
+      }
+      // 面板项插槽，排除部件占位
+      if (panelItem.itemType !== 'CTRLPOS' && slots[panelItem.id!]) {
+        return renderSlot(slots, panelItem.id!, {
+          model: panelItem,
+          data: c.data,
+          value: c.data[panelItem.id!],
+          controller: panelItems[panelItem.id!],
+        });
+      }
+      const component = resolveComponent(provider.component);
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      let children: any;
+      // 占位类型成员填充外部对应的插槽。
+      if (panelItem.itemType === 'CTRLPOS' && slots[panelItem.id!]) {
+        const panelItemC = panelItems[panelItem.id!]!;
+        if (
+          panelItemC.parent &&
+          isSimpleDataContainer(panelItemC.parent.model)
+        ) {
+          children = () => {
+            return slots[panelItem.id!]!({
+              isSimple: true,
+              data: panelItemC.data,
+            });
+          };
+        } else {
+          children = () => slots[panelItem.id!]!();
+        }
+      } else if (
+        panelItem.itemType === 'TABPANEL' &&
+        (panelItem as IPanelTabPanel).panelTabPages?.length
+      ) {
+        children = () => {
+          return (panelItem as IPanelTabPanel).panelTabPages!.map(child => {
+            return renderPanelItem(child, options);
+          });
+        };
+      } else if (isDataContainer(panelItem)) {
+        // 单项数据容器，多项数据容器不给子
+        children = undefined;
+      } else if ((panelItem as IPanelContainer).panelItems?.length) {
+        children = () => {
+          return (panelItem as IPanelContainer).panelItems!.map(child => {
+            return renderPanelItem(child, options);
+          });
+        };
+      }
+
+      // 直接样式
+      let tempStyle = '';
+      if (panelItem.cssStyle) {
+        tempStyle = panelItem.cssStyle;
+      }
+      const panelItemC = panelItems[panelItem.id!]!;
+
+      const attrs = renderAttrs(panelItem, panelItemC);
+
+      // 动态样式
+      if (attrs.dynamicstyle) {
+        if (typeof attrs.dynamicstyle === 'object') {
+          tempStyle += Object.entries(attrs.dynamicstyle)
+            .map(([key, value]) => {
+              return `${key}:${value};`;
+            })
+            .join('');
+        } else {
+          tempStyle += attrs.dynamicstyle;
+        }
+        delete attrs.dynamicstyle;
+      }
+      return h(
+        component,
+        {
+          modelData: panelItem,
+          controller: panelItemC,
+          key: panelItem.id,
+          style: tempStyle,
+          attrs,
+        },
+        children,
+      );
+    };
+
+    provide('renderPanelItem', renderPanelItem);
+
+    return { c, ns, renderPanelItem };
+  },
+  render() {
+    const { state, model } = this.c;
+
+    return (
+      <iBizControlBase controller={this.c}>
+        <iBizRow class={this.ns.b('content')} layout={{ layout: 'FLEX' }}>
+          {state.isCreated &&
+            (this.$slots.default
+              ? this.$slots.default({
+                  panelItems: this.c.panelItems,
+                })
+              : model.rootPanelItems?.map(panelItem => {
+                  const subC = this.c.panelItems[panelItem.id!];
+                  // 视图布局面板的子默认布局改成flex
+                  // eslint-disable-next-line no-param-reassign
+                  panelItem.layoutPos!.layout = 'FLEX';
+                  return (
+                    <iBizCol layoutPos={panelItem.layoutPos} state={subC.state}>
+                      {this.renderPanelItem(panelItem)}
+                    </iBizCol>
+                  );
+                }))}
+        </iBizRow>
+      </iBizControlBase>
+    );
+  },
+});

package/src/hooks/app/app.hooks.ts

@@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { IApiAppHubService, IAppService } from '@ibiz-template/runtime';
+import { AsyncSeriesHook, SyncSeriesHook } from 'qx-util';
+import { App } from 'vue';
+
+/**
+ * @description 应用钩子
+ * @export
+ * @class AppHooks
+ */
+export class AppHooks {
+  /**
+   * @description 创建 Vue 应用实例钩子
+   * @static
+   * @memberof AppHooks
+   */
+  static createApp = new SyncSeriesHook<App>();
+
+  /**
+   * @description 用于在多实例下，挂载到已经创建的 Vue 实例上插件钩子
+   * @static
+   * @memberof AppHooks
+   */
+  static useComponent = new SyncSeriesHook<any>();
+
+  /**
+   * @description 应用资源初始化完成钩子
+   * @static
+   * @memberof AppHooks
+   */
+  static appResorceInited = new AsyncSeriesHook<[], IApiAppHubService>();
+
+  /**
+   * @description 应用初始化前钩子
+   * @static
+   * @memberof AppHooks
+   */
+  static beforeInitApp = new AsyncSeriesHook<[], { context: IParams }>();
+
+  /**
+   * @description 应用授权完成钩子
+   * @static
+   * @memberof AppHooks
+   */
+  static authedApp = new AsyncSeriesHook<[], { context: IParams }>();
+
+  /**
+   * @description 应用初始化完成钩子
+   * @static
+   * @memberof AppHooks
+   */
+  static initedApp = new AsyncSeriesHook<
+    [],
+    { context: IParams; app: IAppService }
+  >();
+
+  /**
+   * @description 应用销毁钩子
+   * @static
+   * @memberof AppHooks
+   */
+  static destoryApp = new AsyncSeriesHook<[], any>();
+}

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { AppHooks } from './app/app.hooks';

package/src/index.ts

@@ -0,0 +1,19 @@
+import { App } from 'vue';
+
+export * from './hooks';
+export * from './common';
+export * from './panel-component';
+export * from './view';
+export * from './control';
+export * from './interface';
+export * from './plugin';
+export * from './use';
+export * from './util';
+export * from './props';
+export * from './locale';
+
+declare global {
+  interface Window {
+    vueInstances: Map<App, App>;
+  }
+}

package/src/interface/index.ts

@@ -0,0 +1 @@
+export * from './util';

package/src/interface/util/index.ts

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

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

@@ -0,0 +1,116 @@
+import { IViewConfig } from '@ibiz-template/runtime';
+
+/**
+ * 路由壳绘制需要的视图数据
+ *
+ * @author lxm
+ * @date 2022-08-17 22:08:18
+ * @export
+ * @interface IRouteViewData
+ */
+export interface IRouteViewData {
+  /**
+   * 视图Config
+   * @author lxm
+   * @date 2023-04-19 01:44:13
+   * @type {IViewConfig}
+   */
+  viewConfig?: IViewConfig;
+
+  /**
+   *视图上下文
+   *
+   * @author lxm
+   * @date 2022-08-17 23:08:15
+   * @type {IParams}
+   */
+  context?: IParams;
+
+  /**
+   *视图参数
+   *
+   * @author lxm
+   * @date 2022-08-17 23:08:25
+   * @type {IParams}
+   */
+  params?: IParams;
+
+  /**
+   * 视图导航参数
+   * @author lxm
+   * @date 2023-03-14 08:41:50
+   * @type {string}
+   */
+  srfnav?: string;
+}
+
+/**
+ * 路由路径每一级路径节点
+ *
+ * @author lxm
+ * @date 2022-08-18 11:08:24
+ * @export
+ * @interface IRoutePathNode
+ */
+export interface IRoutePathNode {
+  /**
+   * 视图名称
+   *
+   * @author lxm
+   * @date 2022-08-18 11:08:42
+   * @type {string}
+   */
+  viewName: string;
+
+  /**
+   * 上下文参数
+   *
+   * @author lxm
+   * @date 2022-08-18 11:08:53
+   * @type {IParams}
+   */
+  context?: IParams;
+
+  /**
+   * 视图参数对象
+   *
+   * @author lxm
+   * @date 2022-08-18 11:08:25
+   * @type {IParams}
+   */
+  params?: IParams;
+
+  /**
+   * 视图导航参数（视图自身解析的额外路由参数）
+   * @author lxm
+   * @date 2023-03-14 08:39:36
+   * @type {string}
+   */
+  srfnav?: string;
+}
+
+/**
+ * 路由路径对象，按照路径定义描述
+ *
+ * @author lxm
+ * @date 2022-08-18 11:08:40
+ * @export
+ * @interface IRoutePath
+ */
+export interface IRoutePath {
+  /**
+   * 应用上下文
+   *
+   * @type {IParams}
+   * @memberof IRoutePath
+   */
+  appContext?: IParams;
+
+  /**
+   *
+   * @author lxm
+   * @date 2022-08-18 11:08:48
+   * @type {IRoutePathNode[]}
+   */
+  pathNodes: IRoutePathNode[];
+}

package/src/locale/en/index.ts

@@ -0,0 +1,74 @@
+export const en = {
+  vue3Util: {
+    common: {
+      undefined: 'undefined',
+      onFoundCorrespondingPart:
+        'Undefined adapter with no corresponding part found',
+      noFoundViewModel: 'View model not found',
+      noSupportLoadingDynamic:
+        '{codeName}No entity, do not support loading dynamic models at this time',
+      invalidPointCoordinates: 'Invalid point coordinates: ({x}, {y})',
+    },
+    control: {
+      unsupportedPanel: 'Unsupported panel items: {id} - {itemType}',
+    },
+    panelComponent: {
+      noConfiguardDataObject: 'No data object name config',
+      noSupportedDataSourceType:
+        'The data source type {dataSourceType} is not supported',
+      noConfiguredEntityLogic: 'No entity logic config',
+      noConfiguredEntity: 'No entity config',
+      noReturnValue: 'The entity logic {appDELogicId} has no return value',
+      noAttribute: 'There is no {dataName} attribute in the global variable.',
+      noConfiguredScript: 'No javaScript config',
+      noConfiguerdEntityBehanior: 'No entity behavior config',
+      sessionView:
+        'The session to which the view is bound does not exist {dataName}',
+      viewStateAttribute: 'There is no {dataName} attribute in the view state',
+      noImplementMethod: 'Method not implemented.',
+      noProvidedSlot: 'No {id} slot provided',
+      cannotEmpty: '{caption} cannot be empty',
+      unadaptedLayout: 'Unadapted layout placeholder {layoutPos}',
+      placeholderIdentifier:
+        'The placeholder identifier for panel member {id} of view {viewCodeName} is:',
+      refresh: 'Refresh',
+      wxQrcodeCaption: 'Please use wechat to scan the QR code to log in',
+    },
+    plugin: {
+      failureConfigurationLoad: 'Configuration load failure',
+      failedRemotePluginLoad:
+        'Remote Plugin failed to load, Remote Plugin did not find [default] Default Export',
+      fileContentFormat:
+        'Remote plugin failed to load, file not found or file content format is incorrect',
+    },
+    use: {
+      control: {
+        parameterChanges: 'Context or view parameter changes for {id}:',
+        stateChange: 'Part [{name}] state change',
+      },
+      focusBlur: {
+        noFocus: 'No focus, no out-of-focus triggering',
+      },
+      view: {
+        stateChange: 'View [{name}] state change',
+      },
+    },
+    util: {
+      noInjected: 'The createVueApp method is not injected.',
+      convertString: 'Failed to convert to string',
+      viewIdentifiers: 'View identifiers do not exist for {depth} level routes',
+      noFoundView: 'View not found {viewCodeName}',
+      routeCorrectly:
+        'Cannot get the route correctly, could be a dependency issue.',
+    },
+    view: {
+      redirectionProgress: 'Redirection in progress',
+      viewType: 'View type {viewType} is not supported yet.',
+      noTeleportTag: 'No teleportTag was found for part {name}.',
+      embeddedRedirectionView:
+        'Embedded redirection view does not support url jumping',
+      insufficientRedirection: 'Insufficient redirection parameters to jump',
+      toDoList: 'To-Do List Redirection',
+    },
+  },
+};

package/src/locale/index.ts

@@ -0,0 +1,2 @@
+export { en } from './en';
+export { zhCn } from './zh-CN';

package/src/locale/zh-CN/index.ts

@@ -0,0 +1,66 @@
+export const zhCn = {
+  vue3Util: {
+    common: {
+      undefined: '未定义',
+      onFoundCorrespondingPart: '未定义未找到对应部件的适配器',
+      noFoundViewModel: '未找到视图模型',
+      noSupportLoadingDynamic: '{codeName}无实体,暂不支持加载动态模型',
+      invalidPointCoordinates: '点坐标无效: ({x}, {y})',
+    },
+    control: {
+      unsupportedPanel: '暂未支持的面板项: {id} - {itemType}',
+    },
+    panelComponent: {
+      noConfiguardDataObject: '没有配置数据对象名称',
+      noSupportedDataSourceType: '数据源类型{dataSourceType}暂未支持',
+      noConfiguredEntityLogic: '没有配置实体逻辑',
+      noConfiguredEntity: '没有配置实体',
+      noReturnValue: '实体逻辑{appDELogicId}没有返回值',
+      noAttribute: '全局变量里没有{dataName}属性',
+      noConfiguredScript: '没有配置脚本代码',
+      noConfiguerdEntityBehanior: '没有配置实体行为',
+      sessionView: '绑定视图的会话不存在{dataName}',
+      viewStateAttribute: '视图state里没有{dataName}属性',
+      noImplementMethod: '未执行的方法',
+      noProvidedSlot: '未提供{id}插槽',
+      cannotEmpty: '{caption} 不能为空',
+      unadaptedLayout: '未适配的布局占位{layoutPos}',
+      placeholderIdentifier: '视图{viewCodeName}的面板成员{id}的占位标识是：',
+      refresh: '刷新',
+      wxQrcodeCaption: '请使用微信扫描二维码登录',
+    },
+    plugin: {
+      failureConfigurationLoad: '配置加载失败',
+      failedRemotePluginLoad:
+        '远程插件加载失败, 远程插件未找到[default]默认导出',
+      fileContentFormat: '远程插件加载失败, 未找到文件或文件内容格式不正确',
+    },
+    use: {
+      control: {
+        parameterChanges: '{id}的上下文或视图参数变更：',
+        stateChange: '部件 [{name}] state 变更',
+      },
+      focusBlur: {
+        noFocus: '没有聚焦，不触发失焦',
+      },
+      view: {
+        stateChange: '视图 [{name}] state 变更',
+      },
+    },
+    util: {
+      noInjected: '没有注入createVueApp方法',
+      convertString: '转换成字符串失败',
+      viewIdentifiers: '第{depth}级路由不存在视图标识',
+      noFoundView: '找不到视图{viewCodeName}',
+      routeCorrectly: '无法正确获取route,可能是依赖问题',
+    },
+    view: {
+      redirectionProgress: '重定向跳转中',
+      viewType: '视图类型{viewType}暂未支持',
+      noTeleportTag: '没有找到部件{name}的teleportTag',
+      embeddedRedirectionView: '嵌入重定向视图不支持url跳转',
+      insufficientRedirection: '重定向参数不足无法跳转',
+      toDoList: '待办列表重定向',
+    },
+  },
+};