cnhis-design-vue 3.1.17-beta.9 → 3.1.18-beta.3

package/es/components/form-render/src/hooks/useFormItemDeps.js

@@ -0,0 +1,34 @@
+import { isFunction } from 'lodash-es';
+import 'vue';
+import '@formily/path';
+import '@vue/shared';
+import 'date-fns';
+import { traverseDependKey } from '../utils/schema.js';
+
+class FormItemDepsCollector {
+  constructor() {
+    this.collector = /* @__PURE__ */ new Map();
+  }
+  setDeps(key, dependKeys, callback) {
+    traverseDependKey(dependKeys, (dependKey) => {
+      const map = this.collector.get(dependKey) || /* @__PURE__ */ new Map();
+      map.set(key, callback);
+      this.collector.set(dependKey, map);
+    });
+  }
+  getDeps(dependKey) {
+    return this.collector.get(dependKey);
+  }
+  trigger(dependKey, payload) {
+    var _a;
+    (_a = this.getDeps(dependKey)) == null ? void 0 : _a.forEach((cb) => isFunction(cb) && cb(payload));
+  }
+}
+function useFormItemDeps() {
+  function create() {
+    return new FormItemDepsCollector();
+  }
+  return { create };
+}
+
+export { FormItemDepsCollector, useFormItemDeps };

package/es/components/form-render/src/hooks/useFormRenderLifeCycle.d.ts

@@ -0,0 +1,13 @@
+import { UndefinedAble } from '../../../../../es/shared/types';
+import { FormRenderLifeCycle, FormRenderProps } from '../../../../../es/components/form-render';
+export declare function useFormRenderLifeCycle(props: FormRenderProps): {
+    callLifeCycle: <T extends "onSetup" | "beforeRequest" | "afterRequest">(lifeCycleName: T, payload?: Parameters<Required<Partial<{
+        onSetup(): void;
+        beforeRequest(fieldKey: string, params?: import("../../../../../es/shared/types").AnyObject | undefined): void | UndefinedAble<import("../../../../../es/shared/types").AnyObject>;
+        afterRequest(fieldKey: string, payload?: any): import("../../../../../es/shared/types").AnyObject[];
+    }>>[T]> | undefined) => UndefinedAble<ReturnType<Required<Partial<{
+        onSetup(): void;
+        beforeRequest(fieldKey: string, params?: import("../../../../../es/shared/types").AnyObject | undefined): void | UndefinedAble<import("../../../../../es/shared/types").AnyObject>;
+        afterRequest(fieldKey: string, payload?: any): import("../../../../../es/shared/types").AnyObject[];
+    }>>[T]>>;
+};

package/es/components/form-render/src/hooks/useFormRequest.d.ts

@@ -0,0 +1,7 @@
+import { Func, Nullable } from '../../../../../es/shared/types';
+declare type RequestInstance = Record<string, Func>;
+export declare function useFormRequest(): {
+    getHttpInstance: () => Nullable<RequestInstance>;
+    registGlobHttpInstance: (instance: RequestInstance) => void;
+};
+export {};

package/es/components/form-render/src/hooks/useFormValidator.d.ts

@@ -0,0 +1,5 @@
+import { AnyObject } from '../../../../../es/shared/types';
+import { FieldItem } from '../types';
+export declare function useFormValidator(): {
+    createValidatorSchema: (fieldItem: FieldItem) => AnyObject[];
+};

package/es/components/form-render/src/hooks/usePresetScope.js

@@ -0,0 +1,25 @@
+import { isString } from 'lodash-es';
+import 'vue';
+import '@formily/path';
+import '@vue/shared';
+import { isIdCard, isMobile } from '../utils/business.js';
+import '@formily/core';
+
+function usePresetScope() {
+  return {
+    isIdCard(value) {
+      return isString(value) && isIdCard(value);
+    },
+    isMobile(value) {
+      return isString(value) && isMobile(value);
+    },
+    isEmail(value) {
+      return isString(value) && /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value);
+    },
+    isNumber(value) {
+      return isString(value) && /\d+/.test(value);
+    }
+  };
+}
+
+export { usePresetScope };

package/es/components/form-render/src/types/fieldItem.d.ts

@@ -0,0 +1,219 @@
+import { AnyObject, ArrayAble } from '../../../../../es/shared/types';
+import { SchemaTypes } from '@formily/vue';
+import { CSSProperties, VNode } from 'vue';
+import { DependKeyType, FormCommonState, FormRequestType } from '../../../../../es/components/form-render';
+declare type FieldBusinessType = 'password' | 'id_card' | 'age' | 'age_unit' | 'mobile' | 'telephone' | 'email' | 'sex' | 'birthday' | 'bank_card' | 'website' | 'gestational_weeks' | 'gestational_stage' | 'customer_name';
+export declare type ValidateItem = Partial<{
+    /**
+     * 业务类型
+     */
+    obj_type: FieldBusinessType;
+    /**
+     * 校验类型
+     */
+    vali_obj: string;
+    max_value: string | number;
+    min_value: string | number;
+    min_length: string | number;
+    max_length: string | number;
+    decimal_length: string | number;
+    regular_expression: RegExp | string;
+    regular_error_tip: string;
+    [key: string]: any;
+}>;
+interface OptionItem {
+    text: string;
+    value: any;
+    children?: OptionItem[];
+}
+interface FormRendererPayload {
+    clearable: boolean;
+    disabled: boolean;
+    fieldItem: FieldItem;
+    readOnly: boolean;
+    value: unknown;
+}
+export interface FormRenderer {
+    (payload: FormRendererPayload): ArrayAble<VNode> | any;
+}
+export declare type UrlConfig = {
+    url: string;
+} & Partial<{
+    method?: FormRequestType;
+    nameKey?: string;
+    valueKey?: string;
+    params?: AnyObject;
+    dependKey?: DependKeyType;
+}>;
+interface SwitchProperty {
+    value?: any;
+    describe?: string;
+}
+interface ReactionType {
+    dependencies?: string[];
+    target?: string;
+    when?: string | boolean;
+    fulfill?: {
+        state?: AnyObject;
+        run?: string;
+    };
+    otherwise?: {
+        state?: AnyObject;
+        run?: string;
+    };
+    [key: string]: any;
+}
+export declare type FieldItem = {
+    /**
+     * 字段的key
+     */
+    val_key: string;
+    /**
+     * 控件类型
+     */
+    html_type: string;
+} & Partial<{
+    /**
+     * 是否开启批注(需要先在表单维度开启)
+     */
+    annotation: boolean;
+    /**
+     * 定制化字段, AGE类型控件时的单位字段
+     */
+    val_key_unit: string;
+    /**
+     * 是否允许编辑('1'为允许编辑)
+     */
+    is_edit: FormCommonState;
+    /**
+     * 控件在栅栏系统中的的宽度值, 默认为3
+     */
+    elem_width: number;
+    /**
+     * 是否展示('1'为展示)
+     */
+    is_show: FormCommonState;
+    /**
+     * 是否允许为空('1'为允许为空)
+     */
+    is_null: FormCommonState;
+    /**
+     * 字段label
+     */
+    name: string;
+    /**
+     * 字段label(优先级比name高)
+     */
+    alias: string;
+    /**
+     * 默认值
+     */
+    default_val: any;
+    /**
+     * 是否开启清空功能('0'表示开启)
+     */
+    is_empty: FormCommonState;
+    /**
+     * 是否隐藏label('1'表示隐藏)
+     */
+    hide_title: FormCommonState;
+    placeholder: string;
+    validate: ValidateItem;
+    option: OptionItem[];
+    /**
+     * 是否开启多选('0'表示开启, 值是反的)
+     */
+    multi_select: FormCommonState;
+    /**
+     * 多选时最大选择数量
+     */
+    multi_select_value: number | string;
+    /**
+     * 用于cascader控件提供层级参数
+     */
+    wordbook: {
+        level_num: number;
+    };
+    /**
+     * switch控件,开启状态参数
+     */
+    open: SwitchProperty;
+    /**
+     * switch控件,关闭状态参数
+     */
+    close: SwitchProperty;
+    /**
+     * date控件value格式
+     */
+    date_format: string;
+    /**
+     * slider控件间距
+     */
+    step_length: string | number;
+    urlConfig: UrlConfig;
+    /**
+     * 控件组
+     */
+    suffixConfig: ArrayAble<FieldItem>;
+    /**
+     * 数据类型
+     */
+    fieldType: SchemaTypes;
+    /**
+     * BUTTON/TEXT控件内容
+     */
+    content: string | FormRenderer | Record<string, FormRenderer>;
+    /**
+     * 假使控件需要发送请求, 用于控制是否只在需要的时候发送请求
+     */
+    lazyRequest: boolean;
+    /**
+     * COMBINATION控件最大表单组数量
+     */
+    maxGroupNum: number;
+    /**
+     * COMBINATION json format
+     */
+    jsonCombination: boolean;
+    /**
+     * COMBINATION控件子项
+     */
+    children: FieldItem[];
+    /**
+     * 子项
+     */
+    properties: FieldItem[];
+    /**
+     * 控件额外的props
+     */
+    componentProps: AnyObject;
+    /**
+     * FormItem额外的props
+     */
+    decoratorProps: AnyObject;
+    /**
+     * 是否不使用decorator组件(n-form-item)
+     */
+    noDecorator: Boolean;
+    /**
+     * COMPLEX控件布局类型
+     */
+    display: 'grid' | 'flex';
+    /**
+     * COMPLEX控件额外样式
+     */
+    wrapperStyle: CSSProperties | Record<string, string>;
+    /**
+     * 自定义校验规则
+     * @param value 表单当前控件的值
+     * @param fieldItem 配置参数
+     * @return {void|string} 返回校验信息
+     */
+    validator: (value: unknown, fieldItem: FieldItem) => void | string;
+    /**
+     * 表单联动配置
+     */
+    reactions: ArrayAble<ReactionType>;
+    [key: string]: any;
+}>;
+export {};

package/es/components/form-render/src/types/index.d.ts

@@ -0,0 +1,79 @@
+import { AnyObject, UndefinedAble } from '../../../../../es/shared/types';
+import { DataField, Field } from '@formily/core';
+import { ISchema } from '@formily/json-schema/esm/types';
+import { Component, FunctionalComponent } from 'vue';
+import { FIELD_BUSINESS_TYPE } from '../../../../../es/components/form-render/src/constants';
+import { FieldItem } from '../types';
+import { AsyncQueue } from '../hooks';
+export * from './fieldItem';
+export declare type FormCommonState = '0' | '1';
+export interface FieldVisitorContext {
+    field: FieldItem;
+    replace(f: FieldItem): void;
+    insertBefore(f: FieldItem | FieldItem[]): void;
+    insertAfter(f: FieldItem | FieldItem[]): void;
+}
+export declare type FieldVisitor = Record<string, (context: FieldVisitorContext) => void>;
+export declare type FormRequestType = 'post' | 'get' | 'patch' | 'delete' | 'put';
+export interface FormAsyncQueueItem {
+    key: any;
+    url: string;
+    method?: FormRequestType;
+    params?: AnyObject;
+}
+export declare type FormAsyncQueue = AsyncQueue<FormAsyncQueueItem, any, AnyObject[]>;
+export declare type AgeContext = Record<'age' | 'day' | 'month' | 'year', number>;
+export declare type IdCardParseInfo = Record<'sex' | 'birthday', string> & AgeContext;
+export declare type FormRenderExpose = {
+    validate(path?: string): Promise<unknown>;
+    getFormValues(): AnyObject;
+    setFieldState(path: string, setter: (field: Field) => void): void;
+    resetFields(path?: string): void;
+    queryWidget(key: string): Promise<{
+        widgetElement: HTMLInputElement | null;
+        widgetElementList: HTMLInputElement[];
+        decoratorElement: HTMLElement | null;
+    }>;
+};
+export declare type FormChangeContext = Partial<{
+    currentOption: AnyObject;
+}>;
+export declare type FormChangePayload = {
+    value: any;
+    fieldKey: string;
+    fieldName: string;
+    fieldInstance: DataField;
+    context?: FormChangeContext;
+};
+export declare type DependKeyType = string | Record<string, string> | Array<{
+    paramName: string;
+    paramValue?: string;
+    required?: boolean;
+} | string>;
+export declare type FormRenderLifeCycle = Partial<{
+    onSetup(): void;
+    beforeRequest(fieldKey: string, params?: AnyObject): UndefinedAble<AnyObject> | void;
+    afterRequest(fieldKey: string, payload?: any): AnyObject[];
+}>;
+export declare type FormRenderProps = Partial<{
+    fieldList: FieldItem[];
+    initialData: AnyObject;
+    fieldVisitor: FieldVisitor;
+    column: number;
+    maxHeight: number | string;
+    anchor: boolean;
+    parallelism: number;
+    schema: ISchema;
+    components: Record<string, Component | FunctionalComponent>;
+    scope: AnyObject;
+    annotation: AnyObject;
+    consumer: boolean;
+    uuid: string;
+    lifeCycle: FormRenderLifeCycle;
+    businessFormatter: FormBusinessFormatter;
+}>;
+export declare type FormBusinessFormatter = (payload: {
+    fieldKey: string;
+    value: unknown;
+    type: FIELD_BUSINESS_TYPE;
+}) => unknown;

package/es/components/form-render/src/utils/business.d.ts

@@ -0,0 +1,12 @@
+import { AgeContext, IdCardParseInfo } from '../../../../../es/components/form-render';
+import { FIELD_AGE_UNIT } from '../../../../../es/components/form-render/src/constants';
+export declare function parseIdCard(idCardNo: string): IdCardParseInfo;
+export declare function transformDateFormat(format?: string): "date" | "datetime" | "month";
+export declare function isIdCard(idCardNo: string): boolean;
+export declare function isMobile(mobile: string): boolean;
+export declare function parseBirthday(birthday: string): AgeContext;
+export declare function parseAge2Birthday(age: number, ageUnit: string, formatter?: string): string;
+export declare function parseAge2FromContext(context: AgeContext): {
+    ageUnit: FIELD_AGE_UNIT;
+    age: number;
+};

package/es/components/form-render/src/utils/business.js

@@ -0,0 +1,78 @@
+import { differenceInDays, differenceInMonths, differenceInYears, format } from 'date-fns';
+import { FIELD_AGE_UNIT, FIELD_SEX_VALUE } from '../constants/index.js';
+
+function parseIdCard(idCardNo) {
+  const parseInner = (certificateNo, idxSexStart, birthYearSpan) => {
+    const res = {};
+    const idxSex = 1 - certificateNo.substr(idxSexStart, 1) % 2;
+    res.sex = idxSex === 1 ? FIELD_SEX_VALUE.FEMALE : FIELD_SEX_VALUE.MALE;
+    const year = (birthYearSpan == 2 ? "19" : "") + certificateNo.substr(6, birthYearSpan);
+    const month = certificateNo.substr(6 + birthYearSpan, 2);
+    const day = certificateNo.substr(8 + birthYearSpan, 2);
+    res.birthday = year + "-" + month + "-" + day + " 00:00:00";
+    const d = new Date();
+    const monthFloor = d.getMonth() + 1 < parseInt(month, 10) || d.getMonth() + 1 == parseInt(month, 10) && d.getDate() < parseInt(day, 10) ? 1 : 0;
+    Object.assign(res, parseBirthday(res.birthday));
+    res.age = res.year = d.getFullYear() - parseInt(year, 10) - monthFloor;
+    return res;
+  };
+  return parseInner(idCardNo, idCardNo.length == 15 ? 14 : 16, idCardNo.length == 15 ? 2 : 4);
+}
+function isMonthType(format2) {
+  return format2 && format2.replace(/yyyy-MM/gi, "YYYY-MM") === "YYYY-MM";
+}
+function transformDateFormat(format2 = "") {
+  if (isMonthType(format2))
+    return "month";
+  return format2.includes("HH") ? "datetime" : "date";
+}
+function validIdCard(cardNo) {
+  if (!cardNo || cardNo.length !== 18) {
+    return false;
+  }
+  const w = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
+  const v = ["1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2"];
+  let sum = 0;
+  for (let i = 0; i < 17; i++) {
+    sum += +cardNo[i] * w[i];
+  }
+  return cardNo.charAt(17).toUpperCase() === v[sum % 11];
+}
+const idcardMatcher = /^\d{6}(((19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}(\d|x|X))|(\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}))$/;
+function isIdCard(idCardNo) {
+  return idcardMatcher.test(idCardNo) && validIdCard(idCardNo);
+}
+function isMobile(mobile) {
+  return /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/.test(mobile);
+}
+function parseBirthday(birthday) {
+  const result = {};
+  const d = new Date();
+  const birthDate = new Date(birthday);
+  result.day = differenceInDays(d, birthDate);
+  result.month = differenceInMonths(d, birthDate);
+  result.age = result.year = differenceInYears(d, birthDate);
+  return result;
+}
+function parseAge2Birthday(age, ageUnit, formatter = "yyyy-MM-dd") {
+  var _a;
+  const result = new Date();
+  const handlerMap = {
+    [FIELD_AGE_UNIT.MINUTE]: () => decreaseDate(result, "Minute", age),
+    [FIELD_AGE_UNIT.HOUR]: () => decreaseDate(result, "Hour", age),
+    [FIELD_AGE_UNIT.DAY]: () => decreaseDate(result, "Date", age),
+    [FIELD_AGE_UNIT.WEEK]: () => decreaseDate(result, "Date", age * 7),
+    [FIELD_AGE_UNIT.MONTH]: () => decreaseDate(result, "Month", age),
+    [FIELD_AGE_UNIT.YEAR]: () => decreaseDate(result, "FullYear", age)
+  };
+  (_a = handlerMap[ageUnit]) == null ? void 0 : _a.call(handlerMap);
+  return format(result, formatter);
+  function decreaseDate(date, type, num) {
+    date[`set${type}`](date[`get${type}`]() - num);
+  }
+}
+function parseAge2FromContext(context) {
+  return context.day < 30 ? { ageUnit: FIELD_AGE_UNIT.DAY, age: context.day } : context.day < 365 ? { ageUnit: FIELD_AGE_UNIT.MONTH, age: context.month } : { ageUnit: FIELD_AGE_UNIT.YEAR, age: context.year };
+}
+
+export { isIdCard, isMobile, parseAge2Birthday, parseAge2FromContext, parseBirthday, parseIdCard, transformDateFormat };

package/es/components/form-render/src/utils/dom.d.ts

@@ -0,0 +1,6 @@
+import { Nullable } from '../../../../../es/shared/types';
+export declare function queryDecorator(key: string, wrapperElement: HTMLElement, formUUID: string): HTMLElement | null;
+export declare function queryInput(decoratorElement?: Nullable<HTMLElement>): {
+    widgetElement: HTMLInputElement | null | undefined;
+    widgetElementList: HTMLInputElement[];
+};

package/es/components/form-render/src/utils/dom.js

@@ -0,0 +1,14 @@
+import { dotEscape } from './schema.js';
+
+function queryDecorator(key, wrapperElement, formUUID) {
+  return wrapperElement.querySelector(dotEscape(`#${formUUID}-${key}`));
+}
+function queryInput(decoratorElement) {
+  var _a;
+  return {
+    widgetElement: decoratorElement == null ? void 0 : decoratorElement.querySelector("input"),
+    widgetElementList: Array.from((_a = decoratorElement == null ? void 0 : decoratorElement.querySelectorAll("input")) != null ? _a : [])
+  };
+}
+
+export { queryDecorator, queryInput };

package/es/components/form-render/src/utils/index.d.ts

@@ -0,0 +1,16 @@
+import { AnyObject, ArrayAble } from '../../../../../es/shared/types';
+import { FunctionalComponent, InjectionKey, VNode } from 'vue';
+import { FieldItem } from '../types';
+export * from './business';
+export * from './dom';
+export * from './schema';
+export declare function formRenderLog(message: string, type?: keyof Console): void;
+export declare function arrayed<T>(maybeArray: T): T extends Array<any> ? T : [T];
+export declare function mergeDeepProperties(target: AnyObject, fieldList: FieldItem[], traverseProperties?: string[], property?: string, targetProperty?: string): AnyObject;
+export declare function injectOrProvide<T>(key: InjectionKey<T>, creator: () => T): T;
+export declare function parseNumberFromMaybeString<T>(value: T): T extends number | string ? number : T;
+export declare function uuidGenerator(): string;
+export declare function createSlot(renderer: unknown, props: AnyObject): Record<string, () => ArrayAble<VNode>> | {
+    default(): any;
+};
+export declare function createInputSlot(props: AnyObject): import("vue").ComputedRef<Record<string, FunctionalComponent<{}, {}>>>;

package/es/components/form-render/src/utils/index.js

@@ -0,0 +1,93 @@
+import { inject, provide, computed, createVNode, Fragment } from 'vue';
+import { Path } from '@formily/path';
+import { isObject } from '@vue/shared';
+import { isString, isFunction } from 'lodash-es';
+export { isIdCard, isMobile, parseAge2Birthday, parseAge2FromContext, parseBirthday, parseIdCard, transformDateFormat } from './business.js';
+export { queryDecorator, queryInput } from './dom.js';
+export { assignUpdateValue, createLinebarId, createObjSchema, dotEscape, fieldKeyEscape, getParentLinebar, traverseDependKey, traverseSchema } from './schema.js';
+
+function formRenderLog(message, type = "log") {
+  console[type](`[FormRender]: ${message}`);
+}
+function arrayed(maybeArray) {
+  if (Array.isArray(maybeArray))
+    return maybeArray;
+  return [maybeArray];
+}
+function mergeDeepProperties(target, fieldList, traverseProperties = ["children", "properties", "suffixConfig"], property = "val_key", targetProperty = "default_val") {
+  function traverse(_target, _fieldList) {
+    _fieldList.forEach((field) => {
+      if (!isObject(field))
+        return;
+      if (targetPropertyFor(field) != null && _target[propertyFor(field)] == null) {
+        Path.setIn(_target, propertyFor(field), targetPropertyFor(field));
+      }
+      traverseProperties.forEach((p) => {
+        if (!field[p])
+          return;
+        if (!_target[propertyFor(field)]) {
+          _target[propertyFor(field)] = {};
+        }
+        traverse(_target[propertyFor(field)], arrayed(field[p]));
+      });
+    });
+  }
+  traverse(target, fieldList);
+  return target;
+  function propertyFor(field) {
+    return field[property];
+  }
+  function targetPropertyFor(field) {
+    return field[targetProperty];
+  }
+}
+function injectOrProvide(key, creator) {
+  let injected = inject(key, null);
+  if (!injected) {
+    injected = creator();
+    provide(key, injected);
+  }
+  return injected;
+}
+function parseNumberFromMaybeString(value) {
+  if (isString(value))
+    return +value;
+  return value;
+}
+function uuidGenerator() {
+  if (window.isSecureContext && window.crypto)
+    return `key${window.crypto.randomUUID()}`;
+  const uuid = "xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
+    const r = Math.random() * 16 | 0, v = c == "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+  return `key${uuid}`;
+}
+function createSlot(renderer, props) {
+  if (isObject(renderer) && !isFunction(renderer)) {
+    const result = {};
+    Object.entries(renderer).forEach(([key, renderer2]) => {
+      isFunction(renderer2) && (result[key] = () => renderer2(props));
+    });
+    return result;
+  }
+  return {
+    default() {
+      return isFunction(renderer) ? renderer(props) : renderer;
+    }
+  };
+}
+function createInputSlot(props) {
+  return computed(() => {
+    const res = {};
+    if (props.prefix) {
+      res.prefix = () => createVNode(Fragment, null, [createSlot(props.prefix, props).default()]);
+    }
+    if (props.suffix) {
+      res.suffix = () => createVNode(Fragment, null, [createSlot(props.suffix, props).default()]);
+    }
+    return res;
+  });
+}
+
+export { arrayed, createInputSlot, createSlot, formRenderLog, injectOrProvide, mergeDeepProperties, parseNumberFromMaybeString, uuidGenerator };