cnhis-design-vue 3.1.16-beta.7 → 3.1.16

package/es/packages/form-config/src/hooks/usePresetRenderer.js

@@ -2,7 +2,8 @@ import { defineComponent, computed, createVNode, mergeProps, inject } from 'vue'
 import { isString, isArray, isFunction } from 'lodash-es';
 import Draggable from 'vuedraggable';
 import { InjectionActiveFieldItem, WidgetTextMap } from '../../../../packages/form-config/src/constants';
-import { useSortable } from '../../../../packages/form-config/src/hooks';
+import { useSortable } from '../../../../packages/form-config/src/hooks/useSortable';
+import { layoutWidthEnum2Column } from '../../../../packages/form-config/src/utils';
 import { NEllipsis } from 'naive-ui';
 
 function usePresetRenderer(textFormatter) {
@@ -19,14 +20,15 @@ function usePresetRenderer(textFormatter) {
         }
       }, [createVNode(NEllipsis, {
         "class": ["form-config__renderer--default", {
-          "is-required": fieldItem.is_null === "0",
-          "is-disabled": fieldItem.is_edit === "0"
+          "is-required": fieldItem.required,
+          "is-disabled": fieldItem.editable === false
         }]
       }, {
         default: () => getDisplayText()
       })]);
       function getDisplayText() {
-        return textFormatter(fieldItem, `${fieldItem.alias}(${WidgetTextMap.get(fieldItem.html_type) || "\u63A7\u4EF6"})`);
+        const type = WidgetTextMap.get(fieldItem.type);
+        return textFormatter(fieldItem, `${fieldItem.name}${type ? `(${type})` : ""}`);
       }
     }
   };
@@ -44,12 +46,11 @@ function usePresetRenderer(textFormatter) {
           return props.fieldItem[key];
         }
         const classList = computed(() => {
-          return `form-config__renderer--complex form-config__renderer--complex--${fieldFor("display") || "grid"}`;
+          return "form-config__renderer--complex form-config__renderer--complex--grid";
         });
         const style = computed(() => {
           return {
-            "--item-column": fieldFor("elem_width"),
-            ...fieldFor("wrapperStyle")
+            "--item-column": layoutWidthEnum2Column(fieldFor("layoutWidthEnum"))
           };
         });
         function renderField(fieldItem) {
@@ -57,7 +58,7 @@ function usePresetRenderer(textFormatter) {
           return createVNode("div", {
             "class": "form-config__displayContentItem",
             "style": {
-              "--item-column": fieldItem.elem_width
+              "--item-column": layoutWidthEnum2Column(fieldItem.layoutWidthEnum)
             }
           }, [createVNode(Renderer, {
             "fieldItem": fieldItem
@@ -65,14 +66,10 @@ function usePresetRenderer(textFormatter) {
         }
         const childrenList = computed({
           get() {
-            return fieldFor("html_type") === "COMBINATION" ? fieldFor("children") : fieldFor("properties");
+            return fieldFor("children");
           },
           set(v) {
-            if (fieldFor("html_type") === "COMBINATION") {
-              props.fieldItem.children = v;
-            } else {
-              props.fieldItem.properties = v;
-            }
+            props.fieldItem.children = v;
           }
         });
         const {
@@ -82,7 +79,7 @@ function usePresetRenderer(textFormatter) {
         return () => createVNode(DraggableComponent, mergeProps(commonConfig, {
           "class": classList.value,
           "style": style.value,
-          "group": fieldFor("val_key"),
+          "group": fieldFor("key"),
           "modelValue": childrenList.value,
           "onUpdate:modelValue": ($event) => childrenList.value = $event
         }), {
@@ -101,12 +98,12 @@ function usePresetRenderer(textFormatter) {
       matcher
     }) => {
       if (isString(matcher))
-        return matcher === fieldItem.html_type;
+        return matcher === fieldItem.type;
       if (isArray(matcher))
-        return matcher.includes(fieldItem.html_type);
+        return matcher.includes(fieldItem.type);
       if (isFunction(matcher))
-        return matcher(fieldItem.html_type);
-      return matcher.test(fieldItem.html_type);
+        return matcher(fieldItem.type);
+      return matcher.test(fieldItem.type);
     }).renderer;
   }
   return {

package/es/packages/form-config/src/hooks/useSortable.js

@@ -24,7 +24,7 @@ function useSortable() {
     }
     to.classList.add("is-choosing-area");
   }
-  const commonConfig = { onMove, onChoose, onUnchoose, tag: "section", animation: "150", "item-key": "val_key" };
+  const commonConfig = { onMove, onChoose, onUnchoose, tag: "section", animation: "150", "item-key": "key" };
   return { commonConfig };
 }
 

package/es/packages/form-config/src/types/index.d.ts

@@ -1,6 +1,5 @@
 import { Component, FunctionalComponent } from 'vue';
 import { ArrayAble } from '../../../../../es/src/types';
-import { FieldItem } from '../../../../../es/packages/form-render';
 interface Matcher {
     (type: string): boolean;
 }
@@ -8,11 +7,30 @@ export declare type FormConfigRenderer = {
     matcher: ArrayAble<string> | RegExp | Matcher;
     renderer: Component | FunctionalComponent;
 };
+export declare type FormConfigType = 'NEWLINE' | 'LINE_BAR' | 'OTHER' | string;
+export declare type FormConfigWidth = 'ALL_LINE' | 'HALF_LINE' | 'FIVE_SIX' | 'TWO_THREE' | 'ONE_THREE' | 'THREE_FOUR' | 'ONE_FOUR' | 'ONE_SIX';
+export declare type FormConfigItem = {
+    key: string;
+    layoutWidthEnum: FormConfigWidth;
+    type: FormConfigType;
+    name: string;
+} & Partial<{
+    show: boolean;
+    defaultValue: any;
+    defaultExpand: boolean;
+    fold: boolean;
+    required: boolean;
+    editable: boolean;
+    notes: string;
+    desc: string;
+    children: FormConfigItem[];
+}>;
 export interface FormConfigTextFormatter {
-    (fieldItem: FieldItem, parsedText: string): string;
+    (fieldItem: FormConfigItem, parsedText: string): string;
 }
 export interface FormConfigExpose {
-    loadData(payload: Record<'fieldList' | 'materialList', FieldItem[]>): void;
-    getData(): Record<'fieldList' | 'materialList', FieldItem[]>;
+    loadData(payload: Record<'fieldList', FormConfigItem[]>): void;
+    validate(): Promise<unknown>;
+    getData(): Record<'fieldList' | 'materialList', FormConfigItem[]>;
 }
 export {};

package/es/packages/form-config/src/utils/index.d.ts

@@ -0,0 +1,2 @@
+import { FormConfigWidth } from '../../../../../es/packages/form-config';
+export declare function layoutWidthEnum2Column(layoutWidthEnum: FormConfigWidth): number;

package/es/packages/form-config/src/utils/index.js

@@ -0,0 +1,15 @@
+function layoutWidthEnum2Column(layoutWidthEnum) {
+  const transferMap = {
+    ALL_LINE: 12,
+    HALF_LINE: 6,
+    FIVE_SIX: 10,
+    TWO_THREE: 8,
+    ONE_THREE: 4,
+    THREE_FOUR: 9,
+    ONE_FOUR: 3,
+    ONE_SIX: 2
+  };
+  return transferMap[layoutWidthEnum] || 12;
+}
+
+export { layoutWidthEnum2Column };

package/es/packages/form-config/style/index.css

@@ -5,6 +5,7 @@
 .form-config__material {
   padding: 16px;
   box-sizing: border-box;
+  flex-shrink: 0;
   width: 200px;
   background: white;
 }
@@ -15,8 +16,12 @@
   height: 40px;
 }
 .form-config__materialContent {
-  padding: 8px;
-  min-height: 400px;
+  padding: 16px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  overflow-y: auto;
+  max-height: var(--max-height);
+  min-height: 200px;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -33,6 +38,8 @@
 .form-config__displayWrapper {
   padding: 16px;
   box-sizing: border-box;
+  flex-shrink: 0;
+  min-width: 400px;
   flex: 1;
   padding: 16px 0;
 }
@@ -45,6 +52,9 @@
 .form-config__displayContent {
   padding: 16px;
   box-sizing: border-box;
+  flex-shrink: 0;
+  overflow-y: auto;
+  max-height: var(--max-height);
   height: fit-content;
   background: #eeeeee;
   display: grid !important;
@@ -58,9 +68,23 @@
 .form-config__config {
   padding: 16px;
   box-sizing: border-box;
-  width: 220px;
+  flex-shrink: 0;
+  width: 240px;
   background: white;
 }
+.form-config__configHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+}
+.form-config__configContent {
+  padding: 16px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  overflow-y: auto;
+  max-height: var(--max-height);
+}
 .form-config__renderer--default {
   display: flex;
   align-items: center;

package/es/packages/form-render/index.d.ts

@@ -236,7 +236,9 @@ declare const FormRender: SFCWithInstall<import("vue").DefineComponent<{
     }>>;
     emit: (event: "formChange", ...args: any[]) => void;
     nuiThemeOverrides: import("naive-ui").GlobalThemeOverrides;
-    formModel: import("@formily/core").Form<any>;
+    formModel: import("@formily/core").Form<{
+        [x: string]: any;
+    }>;
     SchemaField: import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     businessCollector: import("./src/hooks").BusinessCollector;
     formItemDepsCollector: import("./src/hooks").FormItemDepsCollector;

package/es/packages/form-render/index.js

@@ -12,7 +12,6 @@ export { useFormValidator } from './src/hooks/useFormValidator.js';
 export { BusinessCollector, useBusinessBinding } from './src/hooks/useBusinessBinding.js';
 export { ContextCollector, useChangeContext } from './src/hooks/useChangeContext.js';
 export { FormItemDepsCollector, useFormItemDeps } from './src/hooks/useFormItemDeps.js';
-export { useInitialData } from './src/hooks/useInitialData.js';
 export { useAnchor } from './src/hooks/useAnchor.js';
 export { useFormContext } from './src/hooks/useFormContext.js';
 

package/es/packages/form-render/src/FormRender.js

@@ -6,10 +6,9 @@ import { cloneDeep, isArray } from 'lodash-es';
 import { NForm, NTabs, NTabPane, NConfigProvider } from 'naive-ui';
 import { FormItemLineBarDepKeyPrepend } from '../../../packages/form-render/src/constants';
 import { useFormRenderLifeCycle } from '../../../packages/form-render/src/hooks/useFormRenderLifeCycle';
-import { arrayed, queryDecorator, queryInput, getParentLinebar } from '../../../packages/form-render/src/utils';
+import { createObjSchema, arrayed, queryDecorator, queryInput, getParentLinebar } from '../../../packages/form-render/src/utils';
 import { useNuiThemeOverrides } from '../../../packages/form-table/src/hooks/useNuiThemeOverrides';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
-import { useInitialData } from './hooks/useInitialData.js';
 import { useFormContext } from './hooks/useFormContext.js';
 import { useFieldListAdaptor } from './hooks/useFieldListAdaptor.js';
 import { useFieldVisitor } from './hooks/useFieldVisitor.js';
@@ -50,10 +49,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const { nuiThemeOverrides } = useNuiThemeOverrides();
     useFormRenderLifeCycle(props).callLifeCycle("onSetup");
     const formModel = createForm({
-      initialValues: useInitialData().assignInitialData(props.initialData, props.fieldList),
+      initialValues: props.initialData,
       effects() {
         onFieldValueChange("*", async (field) => {
           const fieldKey = field.props.name.toString();
+          businessCollector.trigger(fieldKey);
+          formItemDepsCollector.trigger(fieldKey);
           emit("formChange", {
             fieldInstance: field,
             fieldKey,
@@ -61,23 +62,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             value: field.value,
             context: await changeContextCollector.getContext(fieldKey)
           });
-          businessCollector.trigger(fieldKey);
-          formItemDepsCollector.trigger(fieldKey);
         });
       }
     });
     const { SchemaField, businessCollector, formItemDepsCollector, changeContextCollector, formUUID } = useFormContext(props, formModel);
     const scrollbarRef = ref();
-    const { schemaAdaptor } = useFieldListAdaptor(businessCollector, formUUID);
+    const { schemaAdaptor } = useFieldListAdaptor(businessCollector);
     const parsedSchema = computed(() => {
       if (props.schema) {
         return props.schema;
       }
       if (props.fieldList) {
         const _fieldList = useFieldVisitor().traverse(cloneDeep(props.fieldList), props.fieldVisitor);
-        return { type: "object", properties: schemaAdaptor(_fieldList) };
+        return createObjSchema(schemaAdaptor(_fieldList));
       }
-      return { type: "object", properties: {} };
+      return createObjSchema({});
     });
     const { currentAnchor, generateAnchorList, anchorIdList, formHeight, onScroll } = useAnchor(props, scrollbarRef, formItemDepsCollector);
     watch(parsedSchema, generateAnchorList, { immediate: true });

package/es/packages/form-render/src/FormRender.vue.d.ts

@@ -236,7 +236,9 @@ declare const _default: import("vue").DefineComponent<{
     }>>;
     emit: (event: "formChange", ...args: any[]) => void;
     nuiThemeOverrides: import("naive-ui").GlobalThemeOverrides;
-    formModel: import("@formily/core").Form<any>;
+    formModel: import("@formily/core").Form<{
+        [x: string]: any;
+    }>;
     SchemaField: Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     businessCollector: import("./hooks").BusinessCollector;
     formItemDepsCollector: import("./hooks").FormItemDepsCollector;

package/es/packages/form-render/src/components/renderer/cascader.d.ts

@@ -1,17 +1,6 @@
-import { AnyObject, ArrayAble, Func } from '../../../../../../es/src/types';
-import { FormRequestType } from '../../types';
+import { AnyObject, Func } from '../../../../../../es/src/types';
+import { UrlConfig } from '../../../../../../es/packages/form-render';
 import { PropType } from 'vue';
-declare type DependKeyObj = {
-    paramName: string;
-    paramValue: string;
-};
-declare type UrlConfig = {
-    method?: FormRequestType;
-    nameKey?: string;
-    valueKey?: string;
-    dependKey?: ArrayAble<string> | Record<string, string> | ArrayAble<DependKeyObj>;
-    url: string;
-};
 export declare const SEARCH_CASCADE: import("vue").DefineComponent<{
     options: {
         type: PropType<AnyObject[]>;
@@ -51,4 +40,3 @@ export declare const SEARCH_CASCADE: import("vue").DefineComponent<{
 }, {
     options: AnyObject[];
 }>;
-export {};

package/es/packages/form-render/src/components/renderer/{combination/index.d.ts → combination.d.ts}

@@ -1,4 +1,4 @@
-import { FieldItem } from '../../../../../../../es/packages/form-render';
+import { FieldItem } from '../../../../../../es/packages/form-render';
 import { PropType } from 'vue';
 export declare const COMBINATION: import("vue").DefineComponent<{
     title: {
@@ -6,7 +6,7 @@ export declare const COMBINATION: import("vue").DefineComponent<{
         default: string;
     };
     value: {
-        type: StringConstructor;
+        type: ArrayConstructor;
     };
     maxGroupNum: {
         type: NumberConstructor;
@@ -24,7 +24,7 @@ export declare const COMBINATION: import("vue").DefineComponent<{
         default: string;
     };
     value: {
-        type: StringConstructor;
+        type: ArrayConstructor;
     };
     maxGroupNum: {
         type: NumberConstructor;

package/es/packages/form-render/src/components/renderer/combination.js

@@ -0,0 +1,92 @@
+import { defineComponent, ref, computed, inject, createVNode } from 'vue';
+import { isNumber } from 'lodash-es';
+import { useFieldListAdaptor } from '../../../../../packages/form-render';
+import { useField, RecursionField, connect } from '@formily/vue';
+import { NButton, NIcon } from 'naive-ui';
+import { InjectionBusinessCollector } from '../../../../../packages/form-render/src/constants';
+import { createObjSchema } from '../../../../../packages/form-render/src/utils';
+import { AddCircleOutline, RemoveCircle } from '@vicons/ionicons5';
+
+const script = defineComponent({
+  name: "FormCombination",
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    value: {
+      type: Array
+    },
+    maxGroupNum: {
+      type: Number
+    },
+    getProperties: {
+      type: Function,
+      default: () => []
+    },
+    onInput: {},
+    onBlur: {},
+    onChange: {}
+  },
+  emits: ["update:value"],
+  setup(props) {
+    const field = useField();
+    const currentGroupNum = ref(1);
+    const maxGroupNum = computed(() => {
+      if (!isNumber(props.maxGroupNum))
+        return Infinity;
+      if (props.maxGroupNum < 1)
+        return 0;
+      return ~~props.maxGroupNum;
+    });
+    function addGroup() {
+      currentGroupNum.value++;
+    }
+    async function removeGroup(idx) {
+      currentGroupNum.value--;
+      await field.value.remove(idx);
+    }
+    const collector = inject(InjectionBusinessCollector);
+    const {
+      schemaAdaptor
+    } = useFieldListAdaptor(collector);
+    return () => {
+      return createVNode("section", {
+        "class": "form-render__combination"
+      }, [createVNode("header", {
+        "class": "form-render__combinationHeader"
+      }, [createVNode("div", {
+        "class": "form-render__combinationHeaderText"
+      }, [props.title]), createVNode(NButton, {
+        "onClick": addGroup,
+        "type": "info",
+        "text": true,
+        "disabled": currentGroupNum.value >= maxGroupNum.value
+      }, {
+        icon: () => createVNode(NIcon, {
+          "component": AddCircleOutline
+        }, null),
+        default: () => "\u65B0\u589E"
+      })]), Array.from({
+        length: currentGroupNum.value
+      }).map((_, idx) => createVNode("section", {
+        "class": "form-render__combinationContent"
+      }, [createVNode(RecursionField, {
+        "schema": createObjSchema(schemaAdaptor(props.getProperties())),
+        "name": idx
+      }, null), idx === 0 ? null : createVNode(NButton, {
+        "text": true,
+        "type": "error",
+        "class": "form-render__combinationClose",
+        "onClick": () => removeGroup(idx)
+      }, {
+        icon: () => createVNode(NIcon, {
+          "component": RemoveCircle
+        }, null)
+      })]))]);
+    };
+  }
+});
+const COMBINATION = connect(script);
+
+export { COMBINATION };

package/es/packages/form-render/src/components/renderer/date.js

@@ -1,4 +1,5 @@
 import { defineComponent, computed, watch, createVNode, mergeProps } from 'vue';
+import { generateTimeFormat } from '../../../../../src/utils';
 import { connect, mapProps } from '@formily/vue';
 import { isObject } from '@vueuse/core';
 import { format } from 'date-fns';
@@ -66,9 +67,7 @@ const script = defineComponent({
       }
     }
     const validateConfig = computed(() => {
-      const result = {
-        valueFormat: props.valueFormat
-      };
+      const result = {};
       if (isObject(props.validate)) {
         const {
           min_date,
@@ -81,6 +80,15 @@ const script = defineComponent({
       }
       return result;
     });
+    const formatConfig = computed(() => {
+      return {
+        valueFormat: props.valueFormat,
+        format: props.valueFormat,
+        timePickerProps: {
+          format: generateTimeFormat(props.valueFormat)
+        }
+      };
+    });
     function formatDate(value) {
       if (!value)
         return value;
@@ -95,7 +103,7 @@ const script = defineComponent({
       get: () => formatDate(props.value),
       set: (value) => emit("update:value", value)
     });
-    return () => createVNode(NDatePicker, mergeProps(validateConfig.value, {
+    return () => createVNode(NDatePicker, mergeProps(validateConfig.value, formatConfig.value, {
       "formatted-value": valueRef.value,
       "onUpdate:formatted-value": ($event) => valueRef.value = $event
     }), null);

package/es/packages/form-render/src/components/renderer/formItem.js

@@ -1,9 +1,10 @@
 import { defineComponent, inject, computed, createVNode } from 'vue';
 import { isVoidField } from '@formily/core';
-import { connect, mapProps } from '@formily/vue';
+import { useField, connect, mapProps } from '@formily/vue';
 import { NFormItem } from 'naive-ui';
 import AnnotationEdit from '../../../../../packages/annotation-edit';
-import { InjectionAnnotation } from '../../../../../packages/form-render/src/constants';
+import { InjectionAnnotation, InjectionFormUUID } from '../../../../../packages/form-render/src/constants';
+import { elementIdEscape } from '../../../../../packages/form-render/src/utils';
 
 const script = defineComponent({
   props: {
@@ -38,6 +39,11 @@ const script = defineComponent({
       return annotation.value && props.annotation !== false;
     });
     const showLabel = computed(() => props.label && props.label !== " ");
+    const field = useField();
+    const uuid = inject(InjectionFormUUID);
+    const id = computed(() => {
+      return elementIdEscape(`${uuid}-${field.value.path.toString()}`);
+    });
     function renderLabel() {
       return showLabel.value ? createVNode("section", {
         "class": "form-render__formItemLabel"
@@ -47,7 +53,9 @@ const script = defineComponent({
         }]
       }, [props.label]), showAnnotation.value ? renderAnnotation() : null]) : null;
     }
-    return () => createVNode(NFormItem, null, {
+    return () => createVNode(NFormItem, {
+      id: id.value
+    }, {
       ...slots,
       label: renderLabel
     });

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

@@ -7,6 +7,7 @@ export * from './linebar';
 export * from './inputGroup';
 export * from './date';
 export * from './cascader';
+export * from './jsonCombination';
 export * from './combination';
 export * from './checkbox';
 export * from './switch';

package/es/packages/form-render/src/components/renderer/index.js

@@ -7,7 +7,8 @@ export { LINEBAR } from './linebar.js';
 export { INPUT_GROUP } from './inputGroup.js';
 export { DATE } from './date.js';
 export { SEARCH_CASCADE } from './cascader.js';
-export { COMBINATION } from './combination/index.js';
+export { JSON_COMBINATION } from './jsonCombination/index.js';
+export { COMBINATION } from './combination.js';
 export { CHECKBOX } from './checkbox.js';
 export { SWITCH } from './switch.js';
 export { RADIO } from './radio.js';

package/es/packages/form-render/src/components/renderer/jsonCombination/index.d.ts

@@ -0,0 +1,44 @@
+import { FieldItem } from '../../../../../../../es/packages/form-render';
+import { PropType } from 'vue';
+export declare const JSON_COMBINATION: import("vue").DefineComponent<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    value: {
+        type: (ArrayConstructor | StringConstructor)[];
+    };
+    maxGroupNum: {
+        type: NumberConstructor;
+    };
+    getProperties: {
+        type: PropType<() => FieldItem[]>;
+        default: () => never[];
+    };
+    onInput: {};
+    onBlur: {};
+    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<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    value: {
+        type: (ArrayConstructor | StringConstructor)[];
+    };
+    maxGroupNum: {
+        type: NumberConstructor;
+    };
+    getProperties: {
+        type: PropType<() => FieldItem[]>;
+        default: () => never[];
+    };
+    onInput: {};
+    onBlur: {};
+    onChange: {};
+}>> & {
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}, {
+    title: string;
+    getProperties: () => FieldItem[];
+}>;