@ibiz-template/runtime 0.5.7-alpha.2 → 0.5.7-alpha.4

package/src/service/vo/tree-node-data/tree-data-set-node-data.ts

@@ -115,6 +115,10 @@ export class TreeDataSetNodeData extends TreeNodeData implements ITreeNodeData {
     const dataItemKeyMap = new Map<string | symbol, string | symbol>();
     const dataItemDefaultMap = new Map<string | symbol, unknown>();
     model.detreeNodeDataItems?.forEach(dataItem => {
+      // 没有实体的数据项不处理，如操作列的数据项
+      if (!dataItem.appDEFieldId) {
+        return;
+      }
       const dataItemKey = dataItem.id!.toLowerCase();
 
       // *后台实体属性
@@ -130,6 +134,10 @@ export class TreeDataSetNodeData extends TreeNodeData implements ITreeNodeData {
     /** 表格列和数据项的映射 */
     const nodeColumnKeyMap = new Map<string | symbol, string | symbol>();
     model.detreeNodeColumns?.forEach(column => {
+      // 只映射属性列
+      if (column.columnType !== 'DEFGRIDCOLUMN') {
+        return;
+      }
       const columnKey = column.detreeColumnId!; // 不配树表格列不会有这个模型
       const dataItemKey = column.dataItemName; // 配了就一定有数据项名称
       if (!columnKey || !dataItemKey) {

package/src/types.ts

@@ -16,6 +16,7 @@ import {
   IAsyncActionService,
   IPlatformProvider,
   IInternalMessageService,
+  INoticeUtil,
 } from './interface';
 import { LogicSchedulerCenter } from './logic-scheduler';
 import { RegisterCenter } from './register/register-center';
@@ -81,6 +82,14 @@ declare module '@ibiz-template/core' {
      */
     notification: INotificationUtil;
 
+    /**
+     * 全局的消息通知类
+     * @author lxm
+     * @date 2024-01-26 05:10:37
+     * @type {INoticeUtil}
+     */
+    notice: INoticeUtil;
+
     /**
      * 多模式打开视图工具类
      *

package/src/ui-action/uiaction-util.ts

@@ -1,5 +1,5 @@
 import { RuntimeError } from '@ibiz-template/core';
-import { SysUIActionTag, ViewCallTag } from '../constant';
+import { PresetIdentifier, SysUIActionTag, ViewCallTag } from '../constant';
 import { IUILogicParams, IUIActionResult } from '../interface';
 import { getUIActionById } from '../model';
 import { getUIActionProvider } from '../register';
@@ -74,5 +74,52 @@ export class UIActionUtil {
         default:
       }
     }
+    const action = await getUIActionById(actionId, appId);
+    // 异步行为模型配置方式:
+    // 1、配置实体行为 返回值类型选择为 异步操作对象
+    // 2、配置界面行为 界面行为类型选择 后台调用 、配置实体行为
+    // 界面行为模型基于选择的实体行为的返回值类型计算异步行为（asyncAction）模型
+    if (action!.asyncAction && !result.cancel) {
+      this.handleAsyncAction(params.event);
+    }
+  }
+
+  /**
+   * 处理异步行为
+   *
+   * @author zk
+   * @date 2024-01-23 11:01:58
+   * @static
+   * @param {(Event | undefined)} event
+   * @return {*}  {Promise<void>}
+   * @memberof UIActionUtil
+   */
+  private static async handleAsyncAction(
+    event: Event | undefined,
+  ): Promise<void> {
+    this.handleAsyncActionAnime(event);
+  }
+
+  /**
+   * 处理异步行为动画
+   *
+   * @author zk
+   * @date 2024-01-24 04:01:29
+   * @private
+   * @static
+   * @param {(Event | undefined)} event
+   * @return {*}  {Promise<void>}
+   * @memberof UIActionUtil
+   */
+  private static async handleAsyncActionAnime(
+    event: Event | undefined,
+  ): Promise<void> {
+    if (!event || !event.target) {
+      return;
+    }
+    await ibiz.util.anime.moveAndResize(
+      event.target as HTMLElement,
+      `#${PresetIdentifier.MESSAGE}`,
+    );
   }
 }

package/src/utils/anime/anime-element-util.ts

@@ -0,0 +1,141 @@
+//  基础样式
+const baseStyle = {
+  position: 'fixed',
+  zIndex: '10000',
+};
+
+export function cloneElement(
+  clone: string | HTMLElement,
+  teleport: HTMLElement = document.body,
+  isRemoveChild: boolean = true,
+): HTMLElement {
+  const element = getAnimationElement(clone);
+  if (element == null) {
+    throw new Error('Cannot clone a null or undefined element.');
+  }
+  // 使用 DOM 的 cloneNode 方法深复制元素
+  const clonedElement = element.cloneNode(true) as HTMLElement;
+  if (isRemoveChild) {
+    while (clonedElement.firstChild) {
+      clonedElement.removeChild(clonedElement.firstChild);
+    }
+  }
+  const styles = getElementAttribute(element);
+  setElementStyle(clonedElement, styles);
+  teleport.appendChild(clonedElement);
+  // 返回克隆后的元素
+  return clonedElement;
+}
+
+/**
+ * 设置元素样式
+ *
+ * @author zk
+ * @date 2024-01-25 11:01:37
+ * @param {HTMLElement} element
+ * @param {{
+ *     width: number;
+ *     height: number;
+ *     padding: number;
+ *     boundingLeft: number;
+ *     boundingTop: number;
+ *   }} {
+ *     width,
+ *     height,
+ *     boundingLeft,
+ *     boundingTop,
+ *   }
+ */
+function setElementStyle(
+  element: HTMLElement,
+  {
+    width,
+    height,
+    boundingLeft,
+    boundingTop,
+  }: {
+    width: number;
+    height: number;
+    padding: number;
+    boundingLeft: number;
+    boundingTop: number;
+  },
+): void {
+  element.style.left = `${boundingLeft}px`;
+  element.style.top = `${boundingTop}px`;
+  element.style.width = `${width}px`;
+  element.style.height = `${height}px`;
+  Object.assign(element.style, baseStyle);
+}
+
+/**
+ * 获取元素属性
+ *
+ * @author zk
+ * @date 2024-01-25 11:01:06
+ * @export
+ * @param {HTMLElement} element
+ * @return {*}  {{
+ *   width: number;
+ *   height: number;
+ *   min: number;
+ *   padding: number;
+ *   boundingLeft: number;
+ *   boundingTop: number;
+ * }}
+ */
+export function getElementAttribute(element: HTMLElement): {
+  width: number;
+  height: number;
+  padding: number;
+  boundingLeft: number;
+  boundingTop: number;
+} {
+  const width = element.offsetWidth;
+  const height = element.offsetHeight;
+  const styles = window.getComputedStyle(element);
+  const padding = parseFloat(styles.padding);
+  const { left: boundingLeft, top: boundingTop } = (
+    element as HTMLElement
+  ).getBoundingClientRect();
+  return {
+    width,
+    height,
+    padding,
+    boundingLeft,
+    boundingTop,
+  };
+}
+
+/**
+ * 获取事件动画元素
+ *
+ * @author zk
+ * @date 2024-01-23 11:01:16
+ * @param {string} tag
+ * @return {*}  {(HTMLElement | undefined)}
+ * @memberof AnimeElementUtil
+ */
+export function getAnimationElement(
+  element: string | HTMLElement,
+): HTMLElement | undefined {
+  if (typeof element === 'string') {
+    return document.querySelector(element) as HTMLElement;
+  }
+  // 参数本身是HTMLElement类型
+  return element;
+}
+
+/**
+ * 销毁事件动画元素
+ *
+ * @author zk
+ * @date 2024-01-23 10:01:39
+ * @param {HTMLElement} ele
+ * @memberof AnimeElementUtil
+ */
+export function destroyElement(ele: HTMLElement): void {
+  if (ele) {
+    ele.remove();
+  }
+}

package/src/utils/anime/anime-util/anime-util.ts

@@ -0,0 +1,123 @@
+import {
+  cloneElement,
+  destroyElement,
+  getAnimationElement,
+  getElementAttribute,
+} from '../anime-element-util';
+import { moveToTarget, resize } from '../anime';
+import { IAnimationOptions } from '../../../interface';
+
+type AnimeTarget = string | HTMLElement;
+
+/**
+ * 动画工具类
+ *
+ * @author zk
+ * @date 2024-01-24 09:01:05
+ * @export
+ * @class AnimeUtil
+ */
+export class AnimeUtil {
+  /**
+   * 元素移动到指定位置 移动点至指定元素
+   *
+   * @author zk
+   * @date 2024-01-24 09:01:37
+   * @param {Event} event
+   * @param {HTMLElement} toElement
+   * @param {anime.AnimeParams} [options={}]
+   * @return {*}  {Promise<boolean>}
+   * @memberof AnimeUtil
+   */
+  public async movePoint(
+    element: AnimeTarget,
+    tElement: AnimeTarget,
+    options: IAnimationOptions = {},
+  ): Promise<boolean> {
+    // 获取移动终点元素
+    const targetElement = getAnimationElement(tElement);
+    if (!targetElement) {
+      ibiz.log.debug('终点元素不存在');
+      return false;
+    }
+    // 创建移动动画元素
+    const moveElement = cloneElement(element, document.body);
+    if (!moveElement) {
+      ibiz.log.debug('动画元素不存在');
+      return false;
+    }
+    const { padding, width, height } = getElementAttribute(moveElement);
+    // 移动点元素内置option
+    const option = {
+      borderRadius: ['0%', '50%'],
+      maxWidth: [width, '6px'],
+      maxHeight: [height, '6px'],
+      minWidth: [width, '6px'],
+      minHeight: [height, '6px'],
+      padding: [padding, '6px'],
+      duration: 700,
+    };
+    Object.assign(option, options);
+    const result = await moveToTarget(moveElement, targetElement, option);
+    destroyElement(moveElement);
+    return result;
+  }
+
+  /**
+   * 元素移动动画 元素a 移动到元素b
+   *
+   * @author zk
+   * @date 2024-01-24 06:01:35\
+   * @param {HTMLElement} element
+   * @param {HTMLElement} toElement
+   * @param {IAnimationOptions} [options={}]
+   * @return {*}  {Promise<boolean>}
+   * @memberof AnimeUtil
+   */
+  public moveToTarget(
+    element: HTMLElement,
+    toElement: HTMLElement,
+    options: IAnimationOptions = {},
+  ): Promise<boolean> {
+    return moveToTarget(element, toElement, options);
+  }
+
+  /**
+   * 目标调整大小
+   *
+   * @author zk
+   * @date 2024-01-22 03:01:42
+   * @param {HTMLElement} target
+   * @param {anime.AnimeParams} [options={}]
+   * @param {IData} [builtInParams={}]
+   */
+  public resize(
+    targets: AnimeTarget | AnimeTarget[],
+    options: IAnimationOptions = {},
+  ): Promise<boolean> {
+    return resize(targets, options);
+  }
+
+  /**
+   * 目标移动和调整大小
+   *
+   * @author zk
+   * @date 2024-01-24 06:01:15
+   * @param {HTMLElement} element
+   * @param {HTMLElement} toElement
+   * @param {IAnimationOptions} [options={}]
+   * @return {*}  {Promise<boolean>}
+   * @memberof AnimeUtil
+   */
+  public async moveAndResize(
+    element: AnimeTarget,
+    toElement: AnimeTarget,
+    options: IAnimationOptions = {},
+  ): Promise<boolean> {
+    const result = await this.movePoint(element, toElement, options);
+    if (result) {
+      await this.resize(toElement, { duration: 500 });
+    }
+    return result;
+  }
+}

package/src/utils/anime/anime.ts

@@ -0,0 +1,111 @@
+import anime from 'animejs';
+
+type AnimeTarget = string | object | HTMLElement | SVGElement | NodeList | null;
+
+/**
+ * 默认参数
+ *
+ * @author zk
+ * @date 2024-01-22 01:01:17
+ * @protected
+ */
+const defaultOptions = {
+  // 动画时间
+  duration: 1000,
+  // 循环执行
+  loop: false,
+  // 运行速度曲线
+  easing: 'easeInOutSine',
+};
+
+/**
+ * 处理动画开始事件
+ *
+ * @author zk
+ * @date 2024-01-24 03:01:34
+ * @export
+ * @param {anime.AnimeParams} AnimeParams
+ * @param {anime.AnimeParams} extraOptions
+ * @return {*}  {anime.AnimeParams}
+ */
+function handleBefore(
+  AnimeParams: anime.AnimeParams,
+  extraOptions: anime.AnimeParams,
+): anime.AnimeParams {
+  const params: anime.AnimeParams = {};
+  // 处理动画开始事件
+  if (extraOptions.complete && AnimeParams.complete) {
+    const optionComplete = extraOptions.complete;
+    const animeComplete = AnimeParams.complete;
+    params.complete = (ins: anime.AnimeInstance): void => {
+      optionComplete(ins);
+      animeComplete(ins);
+    };
+  }
+  return { ...AnimeParams, ...extraOptions, ...params };
+}
+
+/**
+ * 元素移动动画
+ *
+ * @author zk
+ * @date 2024-01-24 03:01:17
+ * @export
+ * @param {HTMLElement} moveElement
+ * @param {HTMLElement} toElement
+ * @param {anime.AnimeParams} [extraOpts={}]
+ * @return {*}  {Promise<boolean>}
+ */
+export function moveToTarget(
+  moveElement: HTMLElement,
+  targetElement: HTMLElement,
+  extraOpts: anime.AnimeParams = {},
+): Promise<boolean> {
+  const { left: toLeft, top: toTop } = moveElement.getBoundingClientRect();
+  const { left: clientX, top: clientY } = targetElement.getBoundingClientRect();
+  const x = clientX - toLeft;
+  const y = clientY - toTop;
+  return new Promise(resolve => {
+    const opts = {
+      targets: moveElement,
+      translateX: x,
+      translateY: y,
+      ...defaultOptions,
+      // 完成回调
+      complete: (): void => {
+        resolve(true);
+      },
+    };
+    const options = handleBefore(opts, extraOpts);
+    anime(options);
+  });
+}
+
+/**
+ * 目标调整大小
+ *
+ * @author zk
+ * @date 2024-01-24 03:01:09
+ * @export
+ * @param {HTMLElement} targets
+ * @param {anime.AnimeParams} [extraOpts={}]
+ * @return {*}  {Promise<boolean>}
+ */
+export function resize(
+  targets: AnimeTarget | readonly AnimeTarget[],
+  extraOpts: anime.AnimeParams = {},
+): Promise<boolean> {
+  return new Promise(resolve => {
+    const opts = {
+      scale: [1, 0.8, 1],
+      targets,
+      ...defaultOptions,
+      // 完成回调
+      complete: (): void => {
+        resolve(true);
+      },
+    };
+    const options = handleBefore(opts, extraOpts);
+    anime(options);
+  });
+}

package/src/utils/anime/index.ts

@@ -0,0 +1 @@
+export { AnimeUtil } from './anime-util/anime-util';

package/src/utils/file-util/file-util.ts

@@ -0,0 +1,141 @@
+import { RuntimeError, downloadFileFromBlob } from '@ibiz-template/core';
+import qs from 'qs';
+import { convertNavData } from '../nav-params/nav-params';
+
+export class FileUtil {
+  /**
+   * 计算OSSCat参数
+   *
+   * @author zk
+   * @date 2024-01-26 02:01:52
+   * @param {string} url
+   * @param {IContext} context
+   * @return {*}  {string}
+   * @memberof FileUtil
+   */
+  protected calcOSSCatUrl(
+    url: string,
+    context: IContext,
+    OSSCatName?: string,
+  ): string {
+    let uploadUrl = `${ibiz.env.baseUrl}/${ibiz.env.appId}${url}`;
+    const app = ibiz.hub.getApp(context.srfappid);
+    const OSSCat =
+      OSSCatName ||
+      app.model.defaultOSSCat ||
+      app.model.userParam?.DefaultOSSCat;
+    uploadUrl = uploadUrl.replace('/{cat}', OSSCat ? `/${OSSCat}` : '');
+    return uploadUrl;
+  }
+
+  /**
+   * 计算文件的上传路径和下载路径
+   * 下载路径文件id用%fileId%占位，替换即可
+   * 配置编辑器参数uploadParams和exportParams时，会像导航参数一样动态添加对应的参数到url上
+   *
+   * @author zk
+   * @date 2024-01-26 02:01:15
+   * @param {IData} data
+   * @param {IContext} context
+   * @param {IParams} params
+   * @param {IParams} uploadParams
+   * @param {IParams} exportParams
+   * @return {*}  {{
+   *     uploadUrl: string;
+   *     downloadUrl: string;
+   *   }}
+   * @memberof FileUtil
+   */
+  calcFileUpDownUrl(
+    context: IContext,
+    params: IParams,
+    data: IData = {},
+    extraParams: IData = {},
+  ): {
+    uploadUrl: string;
+    downloadUrl: string;
+  } {
+    const { uploadParams, exportParams, osscat: OSSCatName } = extraParams;
+    // 计算文件上传路径
+    let uploadUrl = this.calcOSSCatUrl(
+      ibiz.env.uploadFileUrl,
+      context,
+      OSSCatName,
+    );
+    let downloadUrl = this.calcOSSCatUrl(
+      `${ibiz.env.downloadFileUrl}/%fileId%`,
+      context,
+      OSSCatName,
+    );
+    let _uploadParams: IParams = {};
+    let _exportParams: IParams = {};
+    if (uploadParams) {
+      _uploadParams = convertNavData(uploadParams, data, params, context);
+    }
+    if (exportParams) {
+      _exportParams = convertNavData(exportParams, data, params, context);
+    }
+    uploadUrl += qs.stringify(_uploadParams, { addQueryPrefix: true });
+    downloadUrl += qs.stringify(_exportParams, { addQueryPrefix: true });
+    return { uploadUrl, downloadUrl };
+  }
+
+  /**
+   * 请求url获取文件流，并用JS触发文件下载
+   *
+   * @author zk
+   * @date 2024-01-26 02:01:29
+   * @param {{ url: string; name: string }} file
+   * @memberof FileUtil
+   */
+  async fileDownload(url: string, name: string): Promise<void> {
+    // 发送get请求
+    const response = await ibiz.net.request(url, {
+      method: 'get',
+      responseType: 'blob',
+      baseURL: '', // 已经有baseURL了，这里无需再写
+    });
+
+    if (response.status !== 200) {
+      throw new RuntimeError('下载文件失败');
+    }
+    // 请求成功，后台返回的是一个文件流
+    if (!response.data) {
+      throw new RuntimeError('文件流数据不存在');
+    } else {
+      // 获取文件名
+      const fileName = name;
+      downloadFileFromBlob(response.data as Blob, fileName);
+    }
+  }
+
+  /**
+   * 文件上传
+   *
+   * @author zk
+   * @date 2024-01-26 05:01:35
+   * @param {string} uploadUrl
+   * @param {Blob} file
+   * @param {IData} headers
+   * @return {*}  {Promise<IData>}
+   * @memberof FileUtil
+   */
+  async fileUpload(
+    uploadUrl: string,
+    file: Blob,
+    headers: IData,
+  ): Promise<IData> {
+    const formData = new FormData();
+    formData.append('file', file);
+    const res = await ibiz.net.axios({
+      url: uploadUrl,
+      method: 'post',
+      headers,
+      data: formData,
+    });
+    if (res.status !== 200) {
+      throw new RuntimeError('文件上传失败');
+    }
+    return res.data;
+  }
+}

package/src/utils/file-util/index.ts

@@ -0,0 +1 @@
+export { FileUtil } from './file-util';

package/src/utils/index.ts

@@ -20,3 +20,5 @@ export { UIDomainManager } from './ui-domain-manager/ui-domain-manager';
 export { RawValueUtil } from './raw-value-util/raw-value-util';
 export { ViewStack } from './view-stack/view-stack';
 export { handleAllSettled } from './promise/promise';
+export { AnimeUtil } from './anime';
+export { FileUtil } from './file-util';