cnhis-design-vue 3.1.38-beta.6 → 3.1.38-beta.8

package/es/components/form-render/src/components/renderer/radio&checkbox.d.ts

@@ -0,0 +1,186 @@
+import { AnyObject } from '../../../../../../es/shared/types';
+import { PropType } from 'vue';
+export declare const RADIO: import("vue").DefineComponent<{
+    value: {
+        type: (NumberConstructor | ObjectConstructor | StringConstructor)[];
+    };
+    options: {
+        type: PropType<AnyObject[]>;
+        default: () => never[];
+    };
+    autograph: {
+        type: StringConstructor;
+    };
+    lazyRequest: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    requestCache: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    wordbook: {
+        type: PropType<Partial<{
+            level_num: number;
+            id: string;
+            name: string;
+            render_key: string[];
+            search_key: string[];
+            primary_key: string;
+            type: string;
+            value_key: string;
+            level_key: string;
+            link_key: string;
+            link_key_split: string;
+            show_key: string[];
+            conObj: AnyObject[];
+            conObjFirstLevel: AnyObject[];
+        }>>;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onChange: {};
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:value"[], "update:value", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: (NumberConstructor | ObjectConstructor | StringConstructor)[];
+    };
+    options: {
+        type: PropType<AnyObject[]>;
+        default: () => never[];
+    };
+    autograph: {
+        type: StringConstructor;
+    };
+    lazyRequest: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    requestCache: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    wordbook: {
+        type: PropType<Partial<{
+            level_num: number;
+            id: string;
+            name: string;
+            render_key: string[];
+            search_key: string[];
+            primary_key: string;
+            type: string;
+            value_key: string;
+            level_key: string;
+            link_key: string;
+            link_key_split: string;
+            show_key: string[];
+            conObj: AnyObject[];
+            conObjFirstLevel: AnyObject[];
+        }>>;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onChange: {};
+}>> & {
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}, {
+    options: AnyObject[];
+    vertical: boolean;
+    lazyRequest: boolean;
+    requestCache: boolean;
+}>;
+export declare const CHECKBOX: import("vue").DefineComponent<{
+    value: {
+        type: (NumberConstructor | ObjectConstructor | StringConstructor)[];
+    };
+    options: {
+        type: PropType<AnyObject[]>;
+        default: () => never[];
+    };
+    autograph: {
+        type: StringConstructor;
+    };
+    lazyRequest: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    requestCache: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    wordbook: {
+        type: PropType<Partial<{
+            level_num: number;
+            id: string;
+            name: string;
+            render_key: string[];
+            search_key: string[];
+            primary_key: string;
+            type: string;
+            value_key: string;
+            level_key: string;
+            link_key: string;
+            link_key_split: string;
+            show_key: string[];
+            conObj: AnyObject[];
+            conObjFirstLevel: AnyObject[];
+        }>>;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onChange: {};
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:value"[], "update:value", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: (NumberConstructor | ObjectConstructor | StringConstructor)[];
+    };
+    options: {
+        type: PropType<AnyObject[]>;
+        default: () => never[];
+    };
+    autograph: {
+        type: StringConstructor;
+    };
+    lazyRequest: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    requestCache: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    wordbook: {
+        type: PropType<Partial<{
+            level_num: number;
+            id: string;
+            name: string;
+            render_key: string[];
+            search_key: string[];
+            primary_key: string;
+            type: string;
+            value_key: string;
+            level_key: string;
+            link_key: string;
+            link_key_split: string;
+            show_key: string[];
+            conObj: AnyObject[];
+            conObjFirstLevel: AnyObject[];
+        }>>;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onChange: {};
+}>> & {
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}, {
+    options: AnyObject[];
+    vertical: boolean;
+    lazyRequest: boolean;
+    requestCache: boolean;
+}>;

package/es/components/form-render/src/components/renderer/radio_checkbox.js

@@ -0,0 +1,111 @@
+import { defineComponent, createVNode, isVNode } from 'vue';
+import { connect, mapProps } from '@formily/vue';
+import { NSpace, NRadio, NRadioGroup, NCheckbox, NCheckboxGroup } from 'naive-ui';
+import '../../../index.js';
+import { useComplexOptions } from '../../hooks/useComplexOptions.js';
+import '../../utils/index.js';
+import { useAutographOptions } from '../../hooks/useFormRenderOptions.js';
+import { useCommonInjection } from '../../hooks/useCommonInjection.js';
+import { assignUpdateValue, createVisitedSetter } from '../../utils/schema.js';
+import { useFormField } from '../../hooks/useFormField.js';
+
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+function createComponent(name, Wrapper, Item) {
+  return defineComponent({
+    name,
+    props: {
+      value: {
+        type: [String, Number, Object]
+      },
+      options: {
+        type: Array,
+        default: () => []
+      },
+      autograph: {
+        type: String
+      },
+      lazyRequest: {
+        type: Boolean,
+        default: false
+      },
+      requestCache: {
+        type: Boolean,
+        default: true
+      },
+      wordbook: {
+        type: Object
+      },
+      vertical: {
+        type: Boolean,
+        default: false
+      },
+      onChange: {}
+    },
+    emits: ["update:value"],
+    setup(props, {
+      emit
+    }) {
+      const {
+        field
+      } = useFormField();
+      const {
+        renderComplexOption,
+        checkValueRef,
+        valueRef
+      } = useComplexOptions(props, emit);
+      const {
+        labelKey,
+        valueKey,
+        options
+      } = useAutographOptions(props, valueRef);
+      const {
+        injectValueBindKey,
+        injectValueValidate
+      } = useCommonInjection();
+      injectValueValidate(valueRef);
+      const key = injectValueBindKey(valueRef);
+      return () => {
+        return createVNode(Wrapper, {
+          "key": key.value,
+          "value": valueRef.value,
+          "onUpdate:value": ($event) => valueRef.value = $event,
+          "onClick": createVisitedSetter(field)
+        }, {
+          default: () => [createVNode(NSpace, {
+            "vertical": props.vertical,
+            "vertical-space": props.vertical
+          }, {
+            default: () => {
+              var _a;
+              return [(_a = options.value) == null ? void 0 : _a.map((option) => {
+                let _slot;
+                return createVNode(Item, {
+                  "key": option[valueKey.value],
+                  "value": option[valueKey.value],
+                  "disabled": option.disabled
+                }, _isSlot(_slot = renderComplexOption({
+                  value: checkValueRef.value,
+                  option,
+                  valueKey: valueKey.value,
+                  labelKey: labelKey.value
+                })) ? _slot : {
+                  default: () => [_slot]
+                });
+              })];
+            }
+          })]
+        });
+      };
+    }
+  });
+}
+const RADIO = connect(createComponent("FormRadio", NRadioGroup, NRadio), mapProps({
+  dataSource: "options"
+}, assignUpdateValue));
+const CHECKBOX = connect(createComponent("FormCheckbox", NCheckboxGroup, NCheckbox), mapProps({
+  dataSource: "options"
+}, assignUpdateValue));
+
+export { CHECKBOX, RADIO };

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

@@ -0,0 +1,31 @@
+import { AnyObject, Func } from '../../../../../es/shared/types';
+import { Path } from '@formily/path';
+import { FieldItem, FormOptionItem } from '../../../../../es/components/form-render';
+declare function setSpan(uuid: string, address: Path | string, span?: number): void;
+declare function getSpan(uuid: string, address: Path | string): number;
+declare function deleteSpan(uuid: string, address: Path | string): void;
+declare function clearSpan(uuid: string): void;
+export declare function useComplexOptions(props: {
+    options: AnyObject[];
+    value: unknown;
+}, emit: Func): {
+    renderComplexOption: ({ value, option, valueKey, labelKey }: {
+        value: unknown;
+        option: FormOptionItem;
+        valueKey: string;
+        labelKey: string;
+    }) => any[];
+    valueRef: import("vue").WritableComputedRef<unknown>;
+    hasComplexOption: import("vue").ComputedRef<boolean>;
+    checkValueRef: import("vue").Ref<any>;
+};
+export declare function useComplexOptionsSpan(): {
+    getSpan: typeof getSpan;
+    setSpan: typeof setSpan;
+    deleteSpan: typeof deleteSpan;
+    clearSpan: typeof clearSpan;
+};
+export declare function useComplexOptionsKey(): {
+    combineComplexOptionKey: (fieldList: FieldItem[], values: AnyObject) => AnyObject;
+};
+export {};

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

@@ -0,0 +1,225 @@
+import { reactive, defineComponent, inject, computed, watch, onUnmounted, onMounted, createVNode, withModifiers, ref } from 'vue';
+import { checkInSetupEnv, jsonParse } from '../../../../shared/utils/index.js';
+import { RecursionField } from '@formily/vue';
+import { sumBy, property, noop, isObject, isArray, isString, cloneDeep, isNumber } from 'lodash-es';
+import '../../index.js';
+import { InjectionFormUUID, InjectionBusinessCollector } from '../constants/index.js';
+import { useFormField } from './useFormField.js';
+import { useFieldListAdaptor } from './useFieldListAdaptor.js';
+import { createObjSchema } from '../utils/schema.js';
+
+const spanMap = reactive(/* @__PURE__ */ new Map());
+function setSpan(uuid, address, span = 0) {
+  spanMap.set(uuid, spanMap.get(uuid) || {});
+  const spanObj = spanMap.get(uuid);
+  spanObj[address + ""] = span;
+}
+function getSpan(uuid, address) {
+  const spanObj = spanMap.get(uuid);
+  if (!spanObj)
+    return 0;
+  return Object.entries(spanObj).reduce((res, [k, v]) => {
+    if (k === address + "" || k.startsWith(`${address}.`))
+      return res + v;
+    return res;
+  }, 0);
+}
+function deleteSpan(uuid, address) {
+  const spanObj = spanMap.get(uuid);
+  spanObj && Reflect.deleteProperty(spanObj, address + "");
+}
+function clearSpan(uuid) {
+  spanMap.delete(uuid);
+}
+const ChildSchemaField = defineComponent({
+  props: {
+    fields: {
+      type: Array,
+      default: () => []
+    },
+    name: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    const uuid = inject(InjectionFormUUID);
+    const {
+      field
+    } = useFormField();
+    const collector = inject(InjectionBusinessCollector);
+    const {
+      schemaAdaptor
+    } = useFieldListAdaptor(collector);
+    function assignConfig(schema2) {
+      return Object.assign(schema2, {
+        ["x-decorator-props"]: {
+          ...schema2["x-decorator-props"],
+          labelPlacement: "left",
+          showFeedback: false,
+          showLabel: !!schema2.title
+        },
+        ["x-component-props"]: {
+          ...schema2["x-component-props"],
+          size: "small"
+        }
+      });
+    }
+    const schema = computed(() => {
+      const schemaProperty = schemaAdaptor(props.fields);
+      Object.values(schemaProperty).forEach(assignConfig);
+      return createObjSchema(schemaProperty);
+    });
+    const column = computed(() => {
+      return sumBy(Object.values(schema.value.properties || []), property("x-decorator-props.span"));
+    });
+    const fieldKey = computed(() => `${field.value.address.toString()}.${props.name}`);
+    watch(column, (_column) => {
+      setSpan(uuid, fieldKey.value, _column);
+    }, {
+      immediate: true
+    });
+    function getRecursionField() {
+      const formModel = field.value.form;
+      return formModel.query(fieldKey.value).take();
+    }
+    onUnmounted(() => {
+      const recursionField = getRecursionField();
+      recursionField && (recursionField.display = "none");
+      deleteSpan(uuid, fieldKey.value);
+    });
+    onMounted(() => {
+      const recursionField = getRecursionField();
+      if (!recursionField)
+        return;
+      recursionField.display = "visible";
+    });
+    return () => createVNode("section", {
+      "onClick": withModifiers(noop, ["stop"]),
+      "class": "form-render__labelField",
+      "style": {
+        "--column": getSpan(uuid, fieldKey.value)
+      }
+    }, [createVNode(RecursionField, {
+      "name": props.name,
+      "schema": schema.value
+    }, null)]);
+  }
+});
+function isComplexOption(options) {
+  return options.some((option) => {
+    return isArray(option.childrenFields) && option.childrenFields.length;
+  });
+}
+function useComplexOptions(props, emit) {
+  checkInSetupEnv();
+  const {
+    fieldKey
+  } = useFormField();
+  const hasComplexOption = computed(() => isComplexOption(props.options));
+  function dangerousTypeTransform(value) {
+    if (isNumber(value))
+      return value + "";
+    return value;
+  }
+  const checkValueRef = ref();
+  const valueRef = computed({
+    get() {
+      return dangerousTypeTransform(hasComplexOption.value ? checkValueRef.value : props.value);
+    },
+    set(value) {
+      if (!hasComplexOption.value)
+        return emit("update:value", value);
+      if (!isObject(props.value))
+        return;
+      props.value[fieldKey.value] = value;
+      checkValueRef.value = value;
+    }
+  });
+  watch(checkValueRef, () => {
+    if (!hasComplexOption.value || !isObject(props.value))
+      return;
+    props.value[fieldKey.value] = checkValueRef.value;
+  });
+  watch([() => props.value, hasComplexOption], ([v, _has]) => {
+    if (!_has)
+      return;
+    if (isArray(v)) {
+      checkValueRef.value = v;
+      return emit("update:value", {
+        [fieldKey.value]: v
+      });
+    }
+    if (isString(v)) {
+      if (v.startsWith("{")) {
+        const result = cloneDeep(jsonParse(v));
+        checkValueRef.value = result[fieldKey.value];
+        return emit("update:value", result);
+      }
+      checkValueRef.value = v;
+      return emit("update:value", {
+        [fieldKey.value]: v
+      });
+    }
+    if (!isObject(v)) {
+      checkValueRef.value = void 0;
+      emit("update:value", {});
+    } else {
+      checkValueRef.value = v[fieldKey.value];
+    }
+  }, {
+    immediate: true
+  });
+  function valueMatcher(value, option, valueKey = "value") {
+    if (isArray(value) ? !value.includes(option[valueKey]) : value !== option[valueKey])
+      return;
+    return isArray(option.childrenFields) && option.childrenFields.length;
+  }
+  function renderComplexOption({
+    value,
+    option,
+    valueKey = "value",
+    labelKey = "label"
+  }) {
+    return [option[labelKey], hasComplexOption.value && valueMatcher(value, option, valueKey) ? createVNode(ChildSchemaField, {
+      "fields": option.childrenFields,
+      "name": option[valueKey]
+    }, null) : null];
+  }
+  return {
+    renderComplexOption,
+    valueRef,
+    hasComplexOption,
+    checkValueRef
+  };
+}
+function useComplexOptionsSpan() {
+  return {
+    getSpan,
+    setSpan,
+    deleteSpan,
+    clearSpan
+  };
+}
+function useComplexOptionsKey() {
+  function combineComplexOptionKey(fieldList, values) {
+    const fieldMap = fieldList.reduce((res, field) => {
+      res[field.val_key] = field;
+      return res;
+    }, {});
+    return Object.entries(values).reduce((res, [k, v]) => {
+      const field = fieldMap[k];
+      if (isArray(field.option) && isComplexOption(field.option)) {
+        res[k] = JSON.stringify(v);
+      } else {
+        res[k] = v;
+      }
+      return res;
+    }, {});
+  }
+  return {
+    combineComplexOptionKey
+  };
+}
+
+export { useComplexOptions, useComplexOptionsKey, useComplexOptionsSpan };

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

@@ -49,7 +49,7 @@ function useFieldListAdaptor(collector) {
         "x-decorator": "FORM_ITEM",
         "x-decorator-props": {
           fieldItem: deepOmit(item, ["reactions"]),
-          span: item.elem_width,
+          span: (item.elem_width || 3) * 2,
           showLabel: item.hide_title !== "1",
           remark: item.remark,
           propertyKey: item.val_key,
@@ -77,18 +77,15 @@ function useFieldListAdaptor(collector) {
     } else if (item.autograph) {
       bindAutoGraphProps(schema, item);
     }
-    bindCommonProps(schema, item);
+    const multiple = item.multi_select === "0";
+    Object.assign(schema["x-component-props"], {
+      multiple,
+      options: item.option,
+      maxTagCount: parseNumberFromMaybeString(item.multi_select_value),
+      ...pick(item, ["lazyRequest", "requestCache"])
+    });
+    multiple && (schema.type = "array");
     return schema;
-    function bindCommonProps(schema2, item2) {
-      const multiple = item2.multi_select === "0";
-      Object.assign(schema2["x-component-props"], {
-        multiple,
-        options: item2.option,
-        maxTagCount: parseNumberFromMaybeString(item2.multi_select_value),
-        ...pick(item2, ["lazyRequest", "requestCache"])
-      });
-      multiple && (schema2.type = "array");
-    }
   };
   const createRadioSchema = (item) => {
     const schema = createStandardSchema(item);
@@ -255,7 +252,7 @@ function useFieldListAdaptor(collector) {
       name: fieldKeyEscape(fieldList),
       title: item.alias || item.name,
       "x-component": "INPUT_GROUP",
-      "x-component-props": { span: item.elem_width },
+      "x-component-props": { span: (item.elem_width || 3) * 2 },
       properties: schemaAdaptor(fieldList)
     };
   };

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

@@ -0,0 +1,29 @@
+import { AnyObject } from '../../../../../es/shared/types';
+import { Form, IFieldState } from '@formily/core';
+import { Ref } from 'vue';
+import { FieldItem, FormItemDepsCollector, FormRenderProps } from '../../../../../es/components/form-render';
+export declare function useFormExposeEvent({ formModel, formRenderRef, formUUID, getFieldList, formItemDepsCollector }: {
+    formModel: Form;
+    formRenderRef: Ref<HTMLElement | undefined>;
+    formUUID: string;
+    getFieldList: () => FieldItem[];
+    formItemDepsCollector: FormItemDepsCollector;
+}): {
+    validate(path?: string): Promise<void>;
+    getFormValues(needCombineExtendKey?: boolean, needCombineOptionKey?: boolean): any;
+    setFormValues(values: AnyObject, needSplitExtendKey?: boolean): void;
+    setFieldState(path: string, handler: (field: IFieldState) => void): void;
+    resetFields(path?: string): Promise<void>;
+    queryWidget(key: string): Promise<{
+        widgetElement: HTMLInputElement | null | undefined;
+        widgetElementList: HTMLInputElement[];
+        decoratorElement: HTMLElement | null | undefined;
+    } | null>;
+};
+export declare function useFormDomEvent({ props, formRenderRef, formModel }: {
+    props: FormRenderProps;
+    formRenderRef: Ref<HTMLElement | undefined>;
+    formModel: Form;
+}): {
+    onKeydown: (event: KeyboardEvent) => void;
+};