cnhis-design-vue 3.1.16-beta.8 → 3.1.16-beta.9

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,29 @@ 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;
+    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;
+  flex-shrink: 0;
   width: 220px;
   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/src/hooks/useFieldListAdaptor.js

@@ -1,7 +1,7 @@
 import { isObject } from '@vueuse/core';
 import { pick } from 'lodash-es';
 import { useFormValidator, useTypeNormalize } from '../../../../packages/form-render';
-import { arrayed, parseNumberFromMaybeString } from '../utils/index.js';
+import { arrayed, parseNumberFromMaybeString, formRenderLog } from '../utils/index.js';
 import { fieldKeyEscape, createLinebarId, elementIdEscape } from '../utils/schema.js';
 import { transformDateFormat } from '../utils/business.js';
 
@@ -158,7 +158,10 @@ function useFieldListAdaptor(collector, uuid) {
   };
   const createComplexSchema = (item) => {
     const schema = createStandardSchema(item);
-    const properties = Array.isArray(item.properties) ? schemaAdaptor(item.properties) : {};
+    if (Array.isArray(item.properties)) {
+      formRenderLog("COMPLEX\u63A7\u4EF6\u7684properties\u5C5E\u6027\u5DF2\u7ECF\u5E9F\u5F03, \u8BF7\u4F7F\u7528children\u4F5C\u4E3A\u66FF\u4EE3, \u5728\u4E4B\u540E\u7684\u7248\u672C\u4E2Dproperties\u5C5E\u6027\u5C06\u4E0D\u518D\u652F\u6301", "warn");
+    }
+    const properties = Array.isArray(item.properties || item.children) ? schemaAdaptor(item.properties || item.children) : {};
     schema.type = item.fieldType || "void";
     schema.properties = properties;
     Object.assign(schema["x-decorator-props"], { showFeedback: false });

package/es/packages/index.css

@@ -3184,6 +3184,7 @@ body > .vxe-table--tooltip-wrapper {
 .form-config__material {
   padding: 16px;
   box-sizing: border-box;
+  flex-shrink: 0;
   width: 200px;
   background: white;
 }
@@ -3194,8 +3195,12 @@ body > .vxe-table--tooltip-wrapper {
   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;
@@ -3212,6 +3217,8 @@ body > .vxe-table--tooltip-wrapper {
 .form-config__displayWrapper {
   padding: 16px;
   box-sizing: border-box;
+  flex-shrink: 0;
+  min-width: 400px;
   flex: 1;
   padding: 16px 0;
 }
@@ -3224,6 +3231,9 @@ body > .vxe-table--tooltip-wrapper {
 .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;
@@ -3237,9 +3247,23 @@ body > .vxe-table--tooltip-wrapper {
 .form-config__config {
   padding: 16px;
   box-sizing: border-box;
+  flex-shrink: 0;
   width: 220px;
   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/global.d.ts

@@ -1,8 +1,8 @@
-import * as NaiveUI from 'naive-ui';
-
-declare module 'naive-ui' {
-  // @ts-ignore
-  export const NTree: any;
-}
-
-export {};
+import * as NaiveUI from 'naive-ui';
+
+declare module 'naive-ui' {
+  // @ts-ignore
+  export const NTree: any;
+}
+
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cnhis-design-vue",
   "private": false,
-  "version": "3.1.16-beta.8",
+  "version": "3.1.16-beta.9",
   "license": "ISC",
   "module": "es/packages/index.js",
   "main": "es/packages/index.js",