@lingxiteam/ebe-utils 0.5.1 → 0.5.3

package/lib/public/src/components/pcfactory/src/utils/common.ts

@@ -0,0 +1,367 @@
+import moment from 'moment';
+
+type flatTreeFunction = (data?: any[], array?: any[], key?: string) => void;
+
+const flatTree: flatTreeFunction = (
+  data = [],
+  array = [],
+  key = 'children',
+) => {
+  data.forEach((element: any) => {
+    array.push(element);
+    if (Array.isArray(element[key]) && element[key].length) {
+      flatTree(element[key], array, key);
+    }
+  });
+};
+
+const deepCopy = (data: any) => JSON.parse(JSON.stringify(data));
+
+// 模拟eval，将字符串转函数方法
+const evalMyFunction = (str: any, params: any = {}) => {
+  if (!str) return '';
+
+  // eslint-disable-next-line no-control-regex
+  let codeStr = str
+    .replace(/^\$/, '')
+    .replace(/\$$/, '')
+    .replace(/\/\*.+[^\x05]*\*\//, '')
+    .replace(/\n/, '');
+
+  try {
+    if (params && Array.isArray(params)) {
+      const isArrowFunc = codeStr.indexOf('=>') !== -1;
+
+      if (isArrowFunc) {
+        const [funcDefine, funcBody] = codeStr.split('=>');
+        codeStr = `function${funcDefine} ${funcBody}`;
+      }
+
+      // eslint-disable-next-line no-new-func
+      const codeFunc = new Function(`return ${codeStr.toString()}`)();
+
+      let funcParams: any = [];
+
+      /**
+       * TODO: 目前已知的，表格/描述列表/树形控件自定义渲染存在参数格式：
+       * 1、存量数据：(text, row/item, index)   注：表格为 row，描述列表/树形控件为 item
+       * 2、新数据：(renderParams)
+       * 所以，需要兼容两种参数格式解析，在这边临时处理强行弥补
+       */
+      if (!str.match(/function.*\(renderParams\)/g)) {
+        funcParams = params.map((param) => param.value);
+      } else {
+        const objParam: any = {};
+
+        params.forEach((param) => {
+          objParam[param.key] = param.value;
+        });
+
+        funcParams = objParam;
+      }
+
+      if (funcParams && Array.isArray(funcParams)) {
+        return codeFunc(...funcParams);
+      }
+
+      return codeFunc(funcParams);
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.log('engineEvalExp.error', error, str);
+    return '';
+  }
+
+  return null;
+};
+
+// 生成随机id
+const createId = (prefix?: string, id?: string | number, slength = 12) => {
+  let uid = id;
+  if (!uid) {
+    uid = `${Math.random()}`.slice(slength);
+  }
+  return prefix ? `${prefix}_${uid}` : uid;
+};
+
+// 生成指定长度的英文字母+数字随机组合
+const createRandomStr = (len = 20) => {
+  let rdmString = '';
+  for (
+    ;
+    rdmString.length < len;
+    rdmString += Math.random().toString(36).substr(2)
+  );
+  return rdmString.substr(0, len);
+};
+
+// 获取最后指定字符串后的字符串
+const getAfterString = (str: any, mid: any) => {
+  if (str) {
+    return str.split(mid).pop();
+  }
+  return '';
+};
+
+// 获取最后指定字符串前的字符串
+const getBeforeString = (str: any, mid: any) => {
+  if (str) {
+    const index = str.lastIndexOf(mid);
+    return str.substring(0, index);
+  }
+  return '';
+};
+
+const initMomentLocale = () => {
+  const ordinal: any = (number: number, period: string) => {
+    switch (period) {
+      case 'd':
+      case 'D':
+      case 'DDD':
+        return `${number}日`;
+      case 'M':
+        return `${number}月`;
+      case 'w':
+      case 'W':
+        return `${number}周`;
+      default:
+        return number;
+    }
+  };
+  moment.defineLocale('zh-cn', {
+    months:
+      '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split(
+        '_',
+      ),
+    monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split(
+      '_',
+    ),
+    weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
+    weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
+    weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
+    longDateFormat: {
+      LT: 'Ah点mm分',
+      LTS: 'Ah点m分s秒',
+      L: 'YYYY-MM-DD',
+      LL: 'YYYY年MMMD日',
+      LLL: 'YYYY年MMMD日Ah点mm分',
+      LLLL: 'YYYY年MMMD日ddddAh点mm分',
+      l: 'YYYY-MM-DD',
+      ll: 'YYYY年MMMD日',
+      lll: 'YYYY年MMMD日Ah点mm分',
+      llll: 'YYYY年MMMD日ddddAh点mm分',
+    },
+    meridiemParse: /凌晨|早上|上午|中午|下午|晚上/,
+    meridiemHour: (hour: number, meridiem: string) => {
+      if (hour === 12) {
+        // eslint-disable-next-line no-param-reassign
+        hour = 0;
+      }
+      if (meridiem === '凌晨' || meridiem === '早上' || meridiem === '上午') {
+        return hour;
+      }
+      if (meridiem === '下午' || meridiem === '晚上') {
+        return hour + 12;
+      }
+      return hour >= 11 ? hour : hour + 12; // '中午'
+    },
+    meridiem: (hour, minute, isLower) => {
+      const hm = hour * 100 + minute;
+      if (hm < 600) {
+        return '凌晨';
+      }
+      if (hm < 900) {
+        return '早上';
+      }
+      if (hm < 1130) {
+        return '上午';
+      }
+      if (hm < 1230) {
+        return '中午';
+      }
+      if (hm < 1800) {
+        return '下午';
+      }
+      return '晚上';
+    },
+    calendar: {
+      // eslint-disable-next-line @typescript-eslint/no-invalid-this
+      sameDay: () =>
+        (this as any).minutes() === 0 ? '[今天]Ah[点整]' : '[今天]LT',
+      // eslint-disable-next-line @typescript-eslint/no-invalid-this
+      nextDay: () =>
+        (this as any).minutes() === 0 ? '[明天]Ah[点整]' : '[明天]LT',
+      // eslint-disable-next-line @typescript-eslint/no-invalid-this
+      lastDay: () =>
+        (this as any).minutes() === 0 ? '[昨天]Ah[点整]' : '[昨天]LT',
+      nextWeek: () => {
+        const startOfWeek = moment().startOf('week');
+        // eslint-disable-next-line @typescript-eslint/no-invalid-this
+        const prefix =
+          (this as any).unix() - startOfWeek.unix() >= 7 * 24 * 3600
+            ? '[下]'
+            : '[本]';
+        // eslint-disable-next-line @typescript-eslint/no-invalid-this
+        return (this as any).minutes() === 0
+          ? `${prefix}dddAh点整`
+          : `${prefix}dddAh点mm`;
+      },
+      lastWeek: () => {
+        const startOfWeek = moment().startOf('week');
+        // eslint-disable-next-line @typescript-eslint/no-invalid-this
+        const prefix =
+          (this as any).unix() < startOfWeek.unix() ? '[上]' : '[本]';
+        // eslint-disable-next-line @typescript-eslint/no-invalid-this
+        return (this as any).minutes() === 0
+          ? `${prefix}dddAh点整`
+          : `${prefix}dddAh点mm`;
+      },
+      sameElse: 'LL',
+    },
+    ordinalParse: /\d{1,2}(日|月|周)/,
+    ordinal,
+    relativeTime: {
+      future: '%s内',
+      past: '%s前',
+      s: '几秒',
+      m: '1 分钟',
+      mm: '%d 分钟',
+      h: '1 小时',
+      hh: '%d 小时',
+      d: '1 天',
+      dd: '%d 天',
+      M: '1 个月',
+      MM: '%d 个月',
+      y: '1 年',
+      yy: '%d 年',
+    },
+    week: {
+      // GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+  });
+};
+
+const getRegExp = (pattern = '') => {
+  if (/^\/[\w\W]+\/[i|m|g|I|M|G]{0,3}$/.test(pattern)) {
+    // 如果是 / 结尾
+    const location =
+      pattern.length -
+      pattern
+        .split('')
+        .reverse()
+        .findIndex((w) => w === '/') -
+      1; // 找到 '/'
+    if (location === pattern.length - 1) {
+      return new RegExp(pattern.substr(1, pattern.length - 2));
+    }
+    return new RegExp(
+      pattern.substr(1, location - 1),
+      pattern.substring(location + 1),
+    );
+  }
+  // 如果是/开头和结尾 或者/开头/; 结尾
+  if (typeof pattern === 'string' && !/^\/.*\/$|^\/.*\/;$/.test(pattern)) {
+    return new RegExp(pattern);
+  }
+  // 还原原逻辑，原来的正则是通过eval执行到的结果，通过new RegExp可能部分无法正确还原
+  // eslint-disable-next-line no-eval
+  return eval(pattern);
+};
+
+// rgb转16进制
+const setRgbTo16 = (str: string) => {
+  const reg = /^(rgb|RGB)/;
+  if (!reg.test(str) || !/^(rgba|RGBA)/.test(str)) {
+    return str;
+  }
+  const values = str
+    .replace(/rgba?\(/, '')
+    .replace(/\)/, '')
+    .replace(/[\s+]/g, '')
+    .split(',');
+  const a = parseFloat(values[3] || '1');
+  const r = Math.floor(a * parseInt(values[0], 10) + (1 - a) * 255);
+  const g = Math.floor(a * parseInt(values[1], 10) + (1 - a) * 255);
+  const b = Math.floor(a * parseInt(values[2], 10) + (1 - a) * 255);
+  return `#${`0${r.toString(16)}`.slice(-2)}${`0${g.toString(16)}`.slice(
+    -2,
+  )}${`0${b.toString(16)}`.slice(-2)}`;
+};
+
+// 判断图片是否存在
+const isImgUrl = (imgurl: any) =>
+  new Promise((resolve, reject) => {
+    const ImgObj = new Image();
+    ImgObj.onload = (res) => {
+      resolve(res);
+    };
+    ImgObj.onerror = (err) => {
+      reject(err);
+    };
+    ImgObj.src = imgurl;
+  });
+
+/**
+ * @description: 根据文本计算大概宽度
+ */
+const getTextWidth = (text: string, fontSize: number = 12) => {
+  // 创建临时元素
+  const _span = document.createElement('span');
+  _span.innerText = text;
+  // 设置文字大小
+  _span.style.fontSize = `${fontSize}px`;
+  document.body.appendChild(_span);
+  // 获取span的宽度
+  const width = _span.offsetWidth;
+  document.body.removeChild(_span);
+  return width;
+};
+
+// 验证字符串是否是非负整数
+const checkNumber = (str: any) => {
+  // 非负整数
+  const numReg = /^\d*$/;
+  return numReg.test(str);
+};
+
+const isDynamicProperty = (str?: any) => {
+  if (typeof str !== 'string') {
+    return false;
+  }
+  return str.startsWith('$') && str.endsWith('$');
+};
+
+// 将MB、KB转换成Bytes
+const convertToBytes = (size: string) => {
+  if (typeof size !== 'string') return 0;
+  const unit = size.match(/[a-zA-Z]+/)?.[0]?.toUpperCase() || 'B';
+  const value = parseFloat(size);
+  const units: any = {
+    B: 1,
+    KB: 1024,
+    MB: 1024 * 1024,
+    GB: 1024 * 1024 * 1024,
+    TB: 1024 * 1024 * 1024 * 1024,
+  };
+  return value * (units[unit] || 0);
+};
+
+export {
+  flatTree,
+  deepCopy,
+  evalMyFunction,
+  createId,
+  createRandomStr,
+  initMomentLocale,
+  getAfterString,
+  getBeforeString,
+  getRegExp,
+  setRgbTo16,
+  isImgUrl,
+  getTextWidth,
+  checkNumber,
+  isDynamicProperty,
+  convertToBytes,
+};

package/lib/public/src/components/pcfactory/src/utils/dynamicUtils/DynamicContext.tsx

@@ -0,0 +1,106 @@
+import { createContext, useContext } from 'react';
+
+export interface DynamicDataContext {
+  /**
+   * 是否在动态数据容器内
+   */
+  _innerDynamicDataContainer: boolean;
+
+  /**
+   * 动态数据容器内表单引用集合
+   */
+  formsRefMap: Record<string, any>;
+
+  /**
+   *
+   * @param formCode 动态数据编码
+   * @param formRef 表单引用
+   * @returns
+   */
+  updateFormChildRef: (formCode: string, formRef: any) => void;
+
+  /**
+   * 表单内容变动回调
+   * @param formCode 表单编码
+   * @param changedFieldName 表单变动字段
+   * @param changedFieldValue 表单变动值
+   * @returns
+   */
+  onFormChange: (
+    formCode: string,
+    changedFieldName: string,
+    changedFieldValue: unknown,
+  ) => void;
+
+  /**
+   * 表单，目前提供给自定义组件使用
+   */
+  form: {
+    /**
+     * 获取动态容器表单值
+     * @returns
+     */
+    getFieldsValue: () => Record<string, any>;
+
+    /**
+     * 重置动态容器
+     * @returns
+     */
+    resetFields: () => void;
+
+    /**
+     * 设置表单值
+     * @param assignData
+     * @returns
+     */
+    setFieldsValue: (assignData: Record<string, unknown>) => void;
+
+    /**
+     * 监听表单值变化
+     * @param formCode
+     * @param fieldCode
+     * @returns
+     */
+    useWatch: (formCode: string, fieldCode: string) => unknown;
+  };
+}
+
+export interface NoopInDynamicContainerProps {
+  /**
+   * 是否在动态数据容器内
+   */
+  _innerDynamicDataContainer: false;
+
+  form: DynamicDataContext['form'];
+}
+
+export const dynamicDataContext = createContext<
+  DynamicDataContext | NoopInDynamicContainerProps
+>({
+  _innerDynamicDataContainer: false,
+  form: {
+    getFieldsValue: () => {
+      console.warn('请在动态容器下使用getFieldsValue方法');
+      return {};
+    },
+    resetFields: () => {
+      console.warn('请在动态容器下使用resetFields方法');
+    },
+    setFieldsValue: () => {
+      console.warn('请在动态容器下使用resetFields方法');
+    },
+    useWatch: (formCode: string, fieldCode: string) => {
+      console.warn('请在动态容器下使用useWatch方法');
+    },
+  },
+});
+
+dynamicDataContext.displayName = 'PCFactoryDynamicDataContext';
+
+const useDynamicData = () => {
+  return useContext(dynamicDataContext);
+};
+
+const DynamicDataProvider = dynamicDataContext.Provider;
+
+export { DynamicDataProvider, useDynamicData };

package/lib/public/src/components/pcfactory/src/utils/formUtils/FormContext.tsx

@@ -0,0 +1,131 @@
+import type { ColProps } from 'antd/es/col';
+import type { FormInstance } from 'antd/es/form';
+import type { FormLayout } from 'antd/es/form/Form';
+import { createContext, useContext } from 'react';
+
+export type StatusType = 'disabled' | 'readonly';
+
+export type MonitorFn = (v: unknown, type: StatusType) => void;
+
+export interface FormContextProps {
+  /**
+   * 是否在表单内
+   */
+  inForm: true;
+
+  /**
+   * 表单实例
+   */
+  form: FormInstance;
+
+  /**
+   * 状态下发
+   */
+  statusMonitor: {
+    addListener: (fn: MonitorFn) => void;
+    removeListener: (fn: MonitorFn) => void;
+  };
+
+  /**
+   * 布局
+   */
+  layout: FormLayout;
+
+  /**
+   * 每行列数
+   */
+  colSpan?: 2 | 3 | 4 | 6 | 8 | 12 | 24;
+
+  /**
+   * 标题占比
+   */
+  labelCol: ColProps;
+
+  /**
+   * 内容占比
+   */
+  wrapperCol: ColProps;
+
+  /**
+   * 冒号
+   */
+  colon: boolean;
+
+  /**
+   * 标签对齐方式
+   */
+  labelAlign?: 'left' | 'right';
+
+  /**
+   * 上报子组件关系
+   * @param uid 组件uid
+   * @param fieldName 字段名
+   * @returns
+   */
+  uploadChildRelation: (uid: string, fieldName: string) => void;
+
+  /**
+   * 打印模式
+   */
+  printMode?: boolean;
+
+  /**
+   * 上传设置值预处理方法
+   * @param fileProps 字段名
+   * @param fn 处理函数
+   * @returns
+   */
+  preproccessSetFormValues: (
+    fileProps: string,
+    fn: (value: any) => any,
+  ) => void;
+
+  /**
+   * 行间距
+   */
+  rowSpace: string | number;
+
+  /**
+   * 列间距
+   */
+  colSpace: string | number;
+}
+
+export interface NoopInFormProps {
+  /**
+   * 是否在表单内
+   */
+  inForm: false;
+}
+
+export const formContext = createContext<FormContextProps | NoopInFormProps>({
+  inForm: false,
+});
+type FormEDContextProps = Pick<
+  FormContextProps,
+  | 'colSpace'
+  | 'colon'
+  | 'labelAlign'
+  | 'labelCol'
+  | 'rowSpace'
+  | 'colSpan'
+  | 'layout'
+  | 'wrapperCol'
+>;
+export const formEDContext = createContext<Partial<FormEDContextProps>>({});
+
+formContext.displayName = 'PCFactoryFormContext';
+formEDContext.displayName = 'PCFactoryFormEdContext';
+
+const FormProvider = formContext.Provider;
+const FormEDProvider = formEDContext.Provider;
+
+const useForm = () => {
+  return useContext(formContext);
+};
+
+const useEDForm = () => {
+  return useContext(formEDContext);
+};
+
+export { FormProvider, useForm, useEDForm, FormEDProvider };