@cicctencent/low-code-simulate-base 0.0.0-stage → 1.1.9-beta.5

package/src/utils/buildInVariable.ts

@@ -0,0 +1,157 @@
+import { reactive } from 'vue-demi';
+import { decodeContent, runScript } from 'jm-jsruntime';
+import { get, getLog, set } from '@jt/ark-util';
+import { getParent } from './dom';
+
+
+const initBuildInVariable = {
+  $request: null,
+  $monitor: null, // 监控上报
+  $user: null, // 后期设置
+  $state: null, // 数据源
+  $form: reactive({}),
+  $refs: reactive({}), // 组件的$refs
+};
+
+// 确保全局唯一
+const buildInVariable = (window['buildInVariable'] =
+  window['buildInVariable'] || initBuildInVariable);
+
+/**
+ * @public
+ * @returns 
+ */
+export function genRandomName() {
+  return 'u' + Date.now().toString(36) + (Math.random().toString(36).substring(2, 3));
+}
+
+/**
+ * @public
+ * @param inputEle - inputEle
+ * @returns 
+ */
+export function getFormName(inputEle: HTMLElement) {
+  const formEle = getParent(inputEle, (parentElement: HTMLElement) => !!parentElement.dataset?.['formName']);
+  return formEle?.dataset?.['formName'] || '$default';
+}
+
+// const buildInVariable = initBuildInVariable;
+/**
+ * @public
+ * @returns 
+ */
+export function getBuildInVariable() {
+  return buildInVariable;
+}
+/**
+ *  @public 
+ * @param path - 路径 
+ * @returns 
+ */
+export function getBuildInVariableByPath(path) {
+  return get(buildInVariable, path);
+}
+/**
+ * 
+ * @public
+ * @param path - 路径
+ * @param value - 值
+ */
+export function setBuildInVariable(path: string, value) {
+  set(buildInVariable, path, value);
+}
+/**
+ *  @public
+ * @param path - 路径
+ * @param value - 值
+ */
+export function setBuildInForm(path: string, value) {
+  setBuildInVariable(`$form.${path}`, value);
+}
+/**
+ * @public
+ * @param path - 路径
+ * @returns 
+ */
+export function getBuildInForm(path: string) {
+  return getBuildInVariableByPath(`$form.${path}`);
+}
+
+/**
+ * @public
+ * @param key - key
+ * @param value - value
+ */
+export function setBuildInState(key, value) {
+  if (buildInVariable.$state === null) {
+    buildInVariable.$state = {};
+  }
+  buildInVariable.$state[key] = value;
+}
+
+/**
+ * @public
+ * @param code - code
+ * @param context - context
+ * @returns 
+ */
+export async function queryExe(code, context?) {
+  try {
+    let queryParam = undefined;
+    let dsl = code || '';
+    // 判断是否含有模板字符串
+    if (/\$\{([\s\S]*)\}/g.test(dsl.trim())) {
+      queryParam = await decodeContent(dsl, {
+        params: context || buildInVariable,
+        promise: true,
+      });
+      // 如果是对象形式 则转化为对象
+      if (/^\{([\s\S]*)\}$/g.test(queryParam.trim())) {
+        queryParam = JSON.parse(queryParam);
+      }
+    } else {
+      // 如果是对象形式 则添加return
+      if (/^\{([\s\S]*)\}$/g.test(dsl.trim())) {
+        dsl = `return ${dsl.trim()}`;
+      }
+      // 如果有return 则当作脚本执行
+      if (/(\s|^)return\s+/.test(dsl)) {
+        queryParam = await runScript(dsl, {
+          params: context || buildInVariable,
+          promise: true,
+        });
+      }
+    }
+    return queryParam;
+  } catch (e) {
+    throw {
+      msg: e.message,
+      ret: -10086,
+    };
+  }
+}
+/**
+ * @public
+ * @param code - code
+ * @param context - context
+ * @returns 
+ */
+export async function dslExe(code, context?) {
+  const logger = getLog('[dslExe]');
+  // 打日志
+  logger.info('[code]', code);
+  try {
+    const res = await queryExe(code, {
+      console: logger, // 日志
+      ...(context || buildInVariable),
+    });
+    logger.info('[result]', res);
+    return res;
+  } catch (e) {
+    // 打日志
+    logger.error('[error]', e.msg);
+    throw {
+      ...e,
+    };
+  }
+}

package/src/utils/dom.ts

@@ -0,0 +1,30 @@
+
+
+/**
+ * @public
+ * 定义一个回调函数类型，用于获取父元素。
+ * @param parentElement - 父元素的 HTMLElement。
+ * @returns 返回一个布尔值，表示是否满足条件。
+ */
+export type GetParentCallback = (parentElement: HTMLElement)=> boolean;
+
+
+/**
+ * @public
+ * @param el - HTMLElement元素
+ * @param fun - 回调
+ * @returns 
+ */
+export function getParent(el: HTMLElement, fun: GetParentCallback){
+    if(el && el !== document.body){
+        const parentElement = el.parentElement;
+        if(!parentElement){
+            return null;
+        }
+        if(fun(parentElement)){
+            return parentElement
+        }
+        return getParent(parentElement, fun);
+    }
+    return null;
+}

package/src/utils/index.ts

@@ -0,0 +1,194 @@
+import type {
+  ComponentItem,
+  ImageUrlOptions,
+  ImageUrlResponse,
+} from '@jt/low-code-core';
+
+/**
+ * @public
+ *  根据key获取组件value
+ * @param  key - key
+ * @param  componentInfo - componentInfo
+ * @returns
+ */
+export function getComponentKeyValue(key, componentInfo: ComponentItem) {
+  switch (key) {
+    case 'formData':
+      return componentInfo.formData;
+    case 'componentId':
+      return componentInfo.componentId;
+    case 'component':
+      return componentInfo;
+    case 'componentName':
+      return componentInfo.name;
+  }
+}
+/**
+ * @public
+ * 获取图片Urls
+ * @param  param0 - param0
+ * @returns
+ */
+export function getImageUrls({
+  data,
+  path,
+  result,
+}: ImageUrlOptions): ImageUrlResponse[] {
+  Object.keys(data ?? {}).forEach(key => {
+    if (typeof data[key] === 'string') {
+      path.push(key);
+      const suffixName = getImageType(data[key]) as string;
+      if (['png', 'jpeg', 'jpg', 'webp'].includes(suffixName)) {
+        result.push({ path: path.join('.'), url: data[key] });
+      }
+      path.pop();
+    } else if (data[key] && Array.isArray(data[key])) {
+      path.push(key);
+      for (let i = 0; i < data[key].length; i++) {
+        path.push(`${i}`);
+        if (typeof data[key][i] === 'string') {
+          const suffixName = getImageType(data[key][i]) as string;
+          if (['png', 'jpeg', 'jpg', 'webp'].includes(suffixName)) {
+            result.push({ path: path.join('.'), url: data[key][i] });
+          }
+        } else if (
+          data[key][i] &&
+          typeof data[key][i] === 'object' &&
+          !Array.isArray(data[key][i])
+        ) {
+          getImageUrls({ data: data[key][i], path, result });
+        }
+        path.pop();
+      }
+      path.pop();
+    } else if (data[key] && typeof data[key] === 'object') {
+      path.push(key);
+      getImageUrls({ data: data[key], path, result });
+      path.pop();
+    }
+  });
+  return result;
+}
+/**
+ * @public
+ *  通过value获取Schema配置
+ */
+export function getSchemaConfigByValue(
+  config: Record<string, any>,
+  formData: any,
+  value: any
+) {
+  // 获取formData对应value的路径
+  const paths: string[] = getFormDataPath(formData, value);
+  // 找不到路径
+  if (!paths.length) {
+    return null;
+  }
+  return getSchemaObjectAttribute(config, paths[paths.length - 1]);
+}
+/**
+ * @public
+ * @param formData - formData
+ * @param value - value
+ * @returns 
+ */
+export function getFormDataPath(formData, value) {
+  for (let key in formData) {
+    //数组直接判断
+    if (typeof formData[key] === 'object') {
+      if (Array.isArray(formData[key]) && Array.isArray(value)) {
+        if (formData[key].length === value.length) {
+          return [key];
+        }
+      }
+      const paths = getFormDataPath(formData[key], value);
+      if (paths.length) {
+        return [key, ...paths];
+      }
+    }
+
+    if (formData[key] === value) {
+      return [key];
+    }
+  }
+  return [];
+}
+
+/**
+ * @public
+ *  获取Schema某个属性
+ * @param config - 配置
+ * @param keyword - key
+ * @returns
+ */
+
+export function getSchemaObjectAttribute(
+  config: Record<string, any>,
+  keyword: string
+) {
+  // 当前对象存在properties 就去它的子集找
+  if (config && 'properties' in config) {
+    return getSchemaObjectAttribute(config?.properties, keyword);
+  }
+  const keys = config ? Object.keys(config) : [];
+
+  for (let i = 0; i < keys.length; i++) {
+    if (keys[i] === keyword) {
+      // 找到了这个属性
+      return config[keys[i]];
+    } else if (config[keys[i]]?.properties) {
+      // 当前属性不是我们要找的 判断是否存在properties
+      const res = getSchemaObjectAttribute(
+        config[keys[i]]?.properties,
+        keyword
+      );
+      if (res) {
+        return res;
+      }
+    }
+  }
+  return null;
+}
+/**
+ * @public
+ *  获取文件大小字符串
+ * @param size - 大小
+ */
+export function getFileSizeStr(size: number) {
+  const _size = size ?? 0;
+  if (_size < 1024) {
+    return `${_size} B`;
+  } else if (_size < Math.pow(1024, 2)) {
+    return `${(_size / Math.pow(1024, 1)).toFixed(2)} KB`;
+  } else if (_size < Math.pow(1024, 3)) {
+    return `${(_size / Math.pow(1024, 2)).toFixed(2)} MB`;
+  }
+}
+
+/**
+ * @public
+ * @param url - url
+ * @returns 
+ */
+export function getImageType(url: string = '') {
+  return url.match(/\.([^.]+)$/)?.[1] || url.match(/^data:image\/([^;]+)/)?.[1];
+}
+
+/**
+ * @public
+ * @param objects - objects
+ * @param key - key 
+ * @returns 
+ */
+export function groupBy(objects, key) {
+  const result = {};
+  objects.forEach(obj => {
+    if (obj.hasOwnProperty(key)) {
+      if (!result.hasOwnProperty(obj[key])) {
+        result[obj[key]] = [];
+      }
+      result[obj[key]].push(obj);
+    }
+  });
+  return result;
+}

package/src/utils/transform.ts

@@ -0,0 +1,171 @@
+/**
+ * 占位词映射表 key为占位词 value为占位词对应的真实数据
+ */
+let flagWordMap = {};
+/**
+ * @public
+ * 转化每个表单项的配置
+ * @param item - item 
+ * @returns
+ */
+export function transformItem(item) {
+  const result: any = {};
+
+  // 修改或忽略原有字段
+  for (const key in item) {
+    if (key === 'properties') {
+      result[key] = transformProperties(item[key], flagWordMap);
+    } else if (key === 'items') {
+      result[key] = item[key];
+      // 处理对象数组
+      if ('properties' in item[key]) {
+        result[key].properties = transformProperties(
+          item[key].properties,
+          flagWordMap
+        );
+      }
+    } else if (key === 'x-component-props') {
+      result[key] = {};
+      // 处理x-component-props里的占位词
+      Object.keys(item[key]).forEach(prop => {
+        // 判断是否为占位词
+        if (
+          typeof item[key][prop] === 'string' &&
+          item[key][prop].startsWith('$')
+        ) {
+          // 若映射表里有占位词对应的数据 则替换 否则隐藏这一项
+          if (Object.keys(flagWordMap).includes(item[key][prop])) {
+            result[key][prop] = flagWordMap[`${item[key][prop]}`];
+          } else {
+            result['x-hidden'] = true;
+          }
+        } else {
+          result[key][prop] = item[key][prop];
+        }
+      });
+    } else {
+      // 目前除了配置项中properties属性 所有字段都保持不动
+      result[key] = item[key];
+    }
+  }
+
+  // 修改转化后的字段或添加新字段
+
+  if (result['x-component'] === 'Select') {
+    // 占位词替换
+    if (typeof result['enum'] === 'string' && result['enum'].startsWith('$')) {
+      if (Object.keys(flagWordMap).includes(result['enum'])) {
+        result['enum'] = flagWordMap[`${item['enum']}`];
+      } else {
+        result['x-hidden'] = true;
+      }
+    }
+  }
+
+  return result;
+}
+/**
+ * @public
+ * 转化全部配置（formily的业务相关转化逻辑搬过来后使用）
+ * @param config - schema配置
+ * @param map - 占位词映射表
+ * @returns
+ */
+export function transform(config, map) {
+  if (!config) {
+    return {};
+  }
+  flagWordMap = map;
+
+  const result: any = {};
+  Object.keys(config).forEach(key => {
+    result[key] = transformItem(config[key]);
+  });
+  return result;
+}
+/**
+ * 
+ * @public
+ * @param schema - schema
+ * @param fillData - fillData
+ * @returns 
+ */
+export function transformSchemaToForm(schema: Record<string, any>, fillData) {
+  try {
+    let data = {};
+    Object.keys(schema).forEach(key => {
+      if ('properties' in schema[key] && schema[key]?.type === 'object') {
+        const result = transformSchemaToForm(schema[key].properties, fillData);
+        if (Object.keys(result).length) {
+          data[key] = result;
+        }
+      }
+
+      // void类型
+      if ('properties' in schema[key] && schema[key]?.type === 'void') {
+        Object.keys(schema[key].properties || {}).forEach(it => {
+          const result = transformSchemaToForm(
+            schema[key].properties,
+            fillData
+          );
+          Object.assign(data, result);
+        });
+      }
+      // 填充值
+      const xData = schema[key]?.['x-data'] || {};
+      if ('autoFillFieldData' in xData) {
+        const templateStr: string = xData.autoFillFieldData || '';
+        const value = templateStr.replace(/\${{(.*?)}}/g, ($1, $2) => {
+          console.log('autoFillFieldData $1', $1);
+          return fillData[$2];
+        });
+        data[key] = value;
+      }
+      // 默认值
+      if (schema[key].default) {
+        data[key] = schema[key].default;
+      }
+    });
+    return data;
+  } catch (error) {
+    console.log('transformSchemaToForm error', String(error));
+    return {};
+  }
+}
+
+/**
+ * @public
+ * 转化properties对象
+ * @param properties - properties
+ * @returns
+ */
+export function transformProperties(properties, map?) {
+  flagWordMap = map;
+  const result: any = {};
+  for (const key in properties) {
+    result[key] = transformItem(properties[key]);
+  }
+  return result;
+}
+
+/**
+ * @public
+ * 获取遍历对象的path数组
+ * @param obj - 对象
+ * @param prefix - 前缀，父路径
+ * @param visited - 用于跟踪已经访问过的对象，避免死循环
+ * @returns 
+ */
+export function getObjectPath(obj, prefix = '', visited = new Set()) {
+  if (!obj || typeof obj !== 'object' || visited.has(obj)) {
+    return [];
+  }
+
+  visited.add(obj);
+
+  return Object.keys(obj).reduce((acc, key) => {
+    const currentPath = `${prefix}${key}`;
+    const childPaths = getObjectPath(obj[key], `${currentPath}.`, visited);
+    return acc.concat(currentPath, ...childPaths);
+  }, []);
+}

package/src/utils/validate.ts

@@ -0,0 +1,19 @@
+import { cloneDeep } from '@jt/ark-util';
+import { FormilyValidate } from '@jt/low-code-validate';
+
+/**
+ * @public
+ * @param component - 组件配置
+ * @param validateData  - 校验数据
+ * @returns 
+ */
+export function formilyValidate(component: any, validateData: any[]) {
+  const data = cloneDeep(component?.formData || {});
+  const config = cloneDeep(component?.config || {});
+  const formilyValidate = new FormilyValidate({
+    data,
+    schema: config,
+    validateData,
+  });
+  return formilyValidate?.validate();
+}