fix(form): fix ui value should inherit parent ui (#1582)

packages/form/src/schema/ui.ts

@@ -45,7 +45,7 @@ export interface SFGridSchema {
    */
   span?: number | null;
   /**
-   * 数据栅格占位格数，为 `0` 时相当于 `display: none`
+   * 数组索引栅格占位格数，为 `0` 时相当于 `display: none`，限 `type: 'array'` 时有效
    */
   arraySpan?: number | null;
   /**
@@ -87,7 +87,7 @@ export type SFBuiltInWidgets =
 
 export interface SFRenderSchema {
   /**
-   * 指定采用什么小部件渲染，所有小部件名可[查阅文档](https://ng.yunzainfo.com/)
+   * 指定采用什么小部件渲染，所有小部件名可[查阅文档](https://ng-alain.com/)
    */
   widget?: SFBuiltInWidgets | (string & {});
   /**

packages/form/src/sf.component.ts

@@ -205,27 +205,27 @@ export class SFComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   /**
-   * Get form element property based on [path](https://ng.yunzainfo.com/form/qa#path)
+   * Get form element property based on [path](https://ng-alain.com/form/qa#path)
    *
-   * 根据[路径](https://ng.yunzainfo.com/form/qa#path)获取表单元素属性
+   * 根据[路径](https://ng-alain.com/form/qa#path)获取表单元素属性
    */
   getProperty(path: string): FormProperty | null | undefined {
     return this.rootProperty?.searchProperty(path);
   }
 
   /**
-   * Get element value based on [path](https://ng.yunzainfo.com/form/qa#path)
+   * Get element value based on [path](https://ng-alain.com/form/qa#path)
    *
-   * 根据[路径](https://ng.yunzainfo.com/form/qa#path)获取表单元素值
+   * 根据[路径](https://ng-alain.com/form/qa#path)获取表单元素值
    */
   getValue(path: string): NzSafeAny {
     return this.getProperty(path)?.value;
   }
 
   /**
-   * Set form element new value based on [path](https://ng.yunzainfo.com/form/qa#path)
+   * Set form element new value based on [path](https://ng-alain.com/form/qa#path)
    *
-   * 根据[路径](https://ng.yunzainfo.com/form/qa#path)设置某个表单元素属性值
+   * 根据[路径](https://ng-alain.com/form/qa#path)设置某个表单元素属性值
    */
   setValue(path: string, value: NzSafeAny): this {
     const item = this.getProperty(path);
@@ -324,21 +324,25 @@ export class SFComponent implements OnInit, OnChanges, OnDestroy {
       Object.keys(schema.properties!).forEach(key => {
         const uiKey = `$${key}`;
         const property = retrieveSchema(schema.properties![key] as SFSchema, definitions);
+        const curSetUi = deepCopy({
+          ...(property.ui as SFUISchemaItem),
+          ...uiSchema[uiKey]
+        });
         const ui = deepCopy({
+          ...this._defUi,
+          ...parentUiSchema,
           widget: property.type,
           ...(property.format && (this.options.formatMap as NzSafeAny)[property.format]),
           ...(typeof property.ui === 'string' ? { widget: property.ui } : null),
           ...(!property.format && !property.ui && Array.isArray(property.enum) && property.enum.length > 0
             ? { widget: 'select' }
             : null),
-          ...this._defUi,
-          ...(property.ui as SFUISchemaItem),
-          ...uiSchema[uiKey]
+          ...curSetUi
         }) as SFUISchemaItemRun;
         // 继承父节点布局属性
         if (isHorizontal) {
           if (parentUiSchema.spanLabelFixed) {
-            if (!ui.spanLabelFixed) {
+            if (!curSetUi.spanLabelFixed) {
               ui.spanLabelFixed = parentUiSchema.spanLabelFixed;
             }
           } else {
@@ -521,8 +525,8 @@ export class SFComponent implements OnInit, OnChanges, OnDestroy {
     if (!this.platform.isBrowser) {
       return;
     }
-    const ignoreRender = ['disabled', 'loading'];
-    if (Object.keys(changes).every(key => ignoreRender.includes(key))) {
+    const ingoreRender = ['disabled', 'loading'];
+    if (Object.keys(changes).every(key => ingoreRender.includes(key))) {
       this.cdr.detectChanges();
       return;
     }

packages/form/src/widgets/array/demo/irregular.md

@@ -0,0 +1,90 @@
+---
+title:
+  zh-CN: 不规则布局
+  en-US: Irregular Layout
+order: 1
+---
+
+## zh-CN
+
+灵活使用 `ui` 来复杂不规则布局。
+
+## en-US
+
+Flexible use of `ui` for complex and irregular layouts.
+
+```ts
+import { Component } from '@angular/core';
+
+import { SFArrayWidgetSchema, SFSchema } from '@yelon/form';
+import { NzMessageService } from 'ng-zorro-antd/message';
+
+@Component({
+  selector: 'app-demo',
+  template: ` <sf [schema]="schema" (formSubmit)="submit($event)"></sf> `
+})
+export class DemoComponent {
+  schema: SFSchema = {
+    properties: {
+      title: { type: 'string' },
+      market: { type: 'number' },
+      price: { type: 'number' },
+      skus: {
+        type: 'array',
+        title: 'Skus',
+        maxItems: 4,
+        default: [{}],
+        items: {
+          type: 'object',
+          properties: {
+            name: {
+              type: 'string',
+              title: '名称'
+            },
+            price: {
+              type: 'number',
+              title: '单价',
+              minimum: 1
+            },
+            stock: {
+              type: 'number',
+              minimum: 1
+            },
+            desc: {
+              type: 'string',
+              ui: {
+                grid: { span: 24 } // 单独设置desc元素在当前数组表单所占格数，24表示整行
+              }
+            }
+          },
+          required: ['name', 'price', 'stock'],
+          ui: {
+            grid: { span: 12 } // 针对数组内部表单统一设置，12表示一行两个
+          }
+        },
+        ui: {
+          grid: {
+            span: 24, // 单独设置Sku元素在整个表单所占格数，24表示整行
+            arraySpan: 12 // 设置数组每个索引所占格数，12表示一行两个
+          }
+        } as SFArrayWidgetSchema
+      },
+      desc: {
+        type: 'string',
+        ui: { grid: { span: 24 } }
+      }
+    },
+    required: ['title', 'market', 'price'],
+    ui: {
+      spanLabelFixed: 100,
+      grid: { span: 8 }
+    }
+  };
+
+  constructor(private msg: NzMessageService) {}
+
+  submit(value: {}): void {
+    this.msg.success(JSON.stringify(value));
+  }
+}
+```