Merge branch 'v18'

EnochGao · Dec 3, 2024 · 0043bae · 0043bae
2 parents 2c49375 + 43fe5fd
commit 0043bae
Show file tree

Hide file tree

Showing 9 changed files with 312 additions and 142 deletions.
diff --git a/components/configurable-query/configurable-query.component.html b/components/configurable-query/configurable-query.component.html
@@ -17,9 +17,9 @@
     </ng-container>
 
     <div
+      [nzOrder]="controls.length"
       class="nzx-query-btn"
       nz-col
-      [nzOrder]="controls.length"
       [nzSpan]="nzxBtnSpan || 24 / lineNumber"
     >
       <div nz-row nzJustify="end" nzAlign="middle">

diff --git a/components/configurable-query/configurable-query.component.ts b/components/configurable-query/configurable-query.component.ts
@@ -80,6 +80,7 @@ export class NzxConfigurableQueryComponent
   collapseText: string = '';
 
   private _queryParams: NzxQueryParams = {};
+  /** 重置时用来给查询框默认值 */
   private defaultValue: NzxQueryParams = {};
   private cacheParams: NzxQueryParams = {};
   private destroy$ = new Subject<void>();
@@ -108,7 +109,6 @@ export class NzxConfigurableQueryComponent
   ngOnInit(): void {
     this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
       this.locale = this.i18n.getLocaleData('Query');
-
       this.cd.markForCheck();
     });
 
@@ -159,39 +159,38 @@ export class NzxConfigurableQueryComponent
 
   /**
    * 根据controlName设置config值
+   * @param defaultValueResettable 添加的表单控件默认值是否可以重置，默认不可以
    */
   setControl(
     controlName: string,
-    config: Partial<NzxQueryControlOptions>
+    config: Partial<NzxQueryControlOptions>,
+    defaultValueResettable = false
   ): void {
-    setTimeout(() => {
-      const control = this.getControl(controlName);
-      if (control) {
-        Object.keys(config).forEach((key) => {
-          (control as any)[key] = (config as any)[key];
-        });
-        this.cd.markForCheck();
-      }
-    }, 0);
+    const control = this.getControl(controlName);
+    if (control) {
+      Object.keys(config).forEach((key) => {
+        (control as any)[key] = (config as any)[key];
+      });
+      this.generateControl(control, defaultValueResettable);
+      this.cd.markForCheck();
+    }
   }
 
   /**
    * 动态添加控件
    * @param config 配置项
    * @param position 添加位置 不传为末尾
+   * @param defaultValueResettable 添加的表单控件默认值是否可以重置，默认不可以
    */
   addControl(
     config: NzxQueryControlOptions,
-    position?: number | undefined
+    position?: number | undefined,
+    defaultValueResettable = false
   ): void {
     const control = this.getControl(config.controlName);
     if (!control) {
-      if (config.controlName) {
-        this.queryForm.addControl(
-          config.controlName,
-          config.controlInstance ?? this.fb.control(config.default ?? null)
-        );
-      }
+      this.generateControl(config, defaultValueResettable);
+
       if (position === void 0 || position === null) {
         this.controls.push(config);
       } else {
@@ -213,7 +212,6 @@ export class NzxConfigurableQueryComponent
       this.controls = this.controls.filter(
         (c) => c.controlName !== controlName
       );
-
       this.calculateText();
     } else {
       throw `The control name: '${controlName}' not find!`;
@@ -250,10 +248,6 @@ export class NzxConfigurableQueryComponent
 
   /** 重置 */
   reset(): void {
-    // if (this.queryForm.invalid) {
-    //   updateControlStatus(this.queryForm);
-    //   return;
-    // }
     this.queryForm.reset(this.defaultValue);
     this.resetChange.emit(this._queryParams);
   }
@@ -297,32 +291,58 @@ export class NzxConfigurableQueryComponent
     });
   }
 
-  /** 生成表单 */
+  /** 生成 queryForm 表单 */
   private generateForm(controlConfigs: Array<NzxQueryControlOptions>): void {
     this.clearFormControl();
 
     for (const config of controlConfigs) {
-      if (config.controlType === 'Template') {
-        const item = this.controlTemplateList.find(
-          (directive) => directive.nzxControl === config.controlName
-        );
-        if (item) {
-          config.templateRef = item.templateRef;
-        }
-      }
-      if (config.controlName) {
-        this.queryForm.addControl(
-          config.controlName,
-          config.controlInstance ?? this.fb.control(config.default ?? null)
-        );
-      }
+      this.generateControl(config);
     }
     this.defaultValue = this.queryForm.getRawValue();
+
     if (this.cacheParams) {
       // 缓存回显查询条件
       this.queryForm.patchValue(this.cacheParams);
     }
 
     this.calculateText();
   }
+
+  /**
+   *
+   * @param controlConfig control配置
+   * @param defaultValueResettable 添加的表单控件默认值是否可以重置，默认不可以
+   *
+   * 1. 生成单个表单控件并将其添加到queryForm中
+   * 2. 如果没有templateRef根据controlName获取投影的templateList中的templateRef给 templateRef 赋值
+   *
+   **/
+  private generateControl(
+    config: NzxQueryControlOptions,
+    defaultValueResettable = false
+  ) {
+    if (config.controlName) {
+      if (!config?.templateRef) {
+        const d = this.controlTemplateList.find(
+          (d) => d.nzxControl === config.controlName
+        );
+        if (d) {
+          config.templateRef = d.templateRef;
+        }
+      }
+
+      this.queryForm.setControl(
+        config.controlName,
+        config.controlInstance ?? this.fb.control(config.default ?? null)
+      );
+
+      if (!defaultValueResettable) {
+        const control = this.queryForm.get(config.controlName);
+        this.defaultValue = {
+          ...this.defaultValue,
+          [config.controlName]: control.value,
+        };
+      }
+    }
+  }
 }
diff --git a/components/configurable-query/examples/configurable-query/configurable-query.component.html b/components/configurable-query/examples/configurable-query/configurable-query.component.html
@@ -1,8 +1,10 @@
 <div class="container">
-
   <div>例子1： 自定义拓展查询职业等级,姓名必填</div>
-  <nzx-configurable-query [controls]="controls" (queryChange)="queryParams = $event"
-    (resetChange)="queryParams = $event">
+  <nzx-configurable-query
+    [controls]="controls"
+    (queryChange)="queryParams = $event"
+    (resetChange)="queryParams = $event"
+  >
     <ng-template nzxControl="level" let-formControl>
       <nz-rate [formControl]="formControl" nzAllowHalf></nz-rate>
     </ng-template>
@@ -12,16 +14,23 @@
   </pre>
 
   <div>例子2： 自动一行展示</div>
-  <nzx-configurable-query [controls]="controls2" (queryChange)="queryParams2 = $event"
-    (resetChange)="queryParams2 = $event">
+  <nzx-configurable-query
+    [controls]="controls2"
+    (queryChange)="queryParams2 = $event"
+    (resetChange)="queryParams2 = $event"
+  >
   </nzx-configurable-query>
   <pre>
   {{ queryParams2 | json }}
   </pre>
 
   <div>例子3： 根据collapse属性自动展示折叠</div>
-  <nzx-configurable-query [nzxBtnSpan]="24" [controls]="controls3" (queryChange)="queryParams3 = $event"
-    (resetChange)="queryParams3 = $event">
+  <nzx-configurable-query
+    [nzxBtnSpan]="24"
+    [controls]="controls3"
+    (queryChange)="queryParams3 = $event"
+    (resetChange)="queryParams3 = $event"
+  >
     <ng-template nzxControl="level" let-formControl>
       <nz-rate [formControl]="formControl" nzAllowHalf></nz-rate>
     </ng-template>
@@ -31,8 +40,13 @@
   </pre>
 
   <div>例子4： 一行展示两个control</div>
-  <nzx-configurable-query [controls]="controls4" [lineNumber]="2" [nzxBtnSpan]="24"
-    (queryChange)="queryParams4 = $event" (resetChange)="queryParams4 = $event">
+  <nzx-configurable-query
+    [controls]="controls4"
+    [lineNumber]="2"
+    [nzxBtnSpan]="24"
+    (queryChange)="queryParams4 = $event"
+    (resetChange)="queryParams4 = $event"
+  >
     <ng-template nzxControl="level" let-formControl>
       <nz-rate [formControl]="formControl" nzAllowHalf></nz-rate>
     </ng-template>
@@ -42,8 +56,13 @@
   </pre>
 
   <div>例子5： 简化查询</div>
-  <nzx-configurable-query [controls]="controls5" [lineNumber]="2" [nzxBtnSpan]="24"
-    (queryChange)="queryParams5 = $event" (resetChange)="queryParams5 = $event">
+  <nzx-configurable-query
+    [controls]="controls5"
+    [lineNumber]="2"
+    [nzxBtnSpan]="24"
+    (queryChange)="queryParams5 = $event"
+    (resetChange)="queryParams5 = $event"
+  >
     <ng-template nzxControl="level" let-formControl>
       <nz-rate [formControl]="formControl" nzAllowHalf></nz-rate>
     </ng-template>
@@ -53,8 +72,13 @@
   </pre>
 
   <div>例子6： 初始化界面主动查询</div>
-  <nzx-configurable-query [controls]="controls6" [lineNumber]="2" [initQuery]="true"
-    (queryChange)="queryParams6 = $event" (resetChange)="queryParams6 = $event">
+  <nzx-configurable-query
+    [controls]="controls6"
+    [lineNumber]="2"
+    [initQuery]="true"
+    (queryChange)="queryParams6 = $event"
+    (resetChange)="queryParams6 = $event"
+  >
     <ng-template nzxControl="level" let-formControl>
       <nz-rate [formControl]="formControl" nzAllowHalf></nz-rate>
     </ng-template>
@@ -64,42 +88,91 @@
   </pre>
 
   <div>例子7： 模拟远程加载下拉</div>
-  <nzx-configurable-query #query7 [controls]="controls7" [initQuery]="true" (queryChange)="queryParams7 = $event"
-    (resetChange)="queryParams7 = $event">
+  <nzx-configurable-query
+    #query7
+    [controls]="controls7"
+    [initQuery]="true"
+    (queryChange)="queryParams7 = $event"
+    (resetChange)="queryParams7 = $event"
+  >
+    <ng-template nzxControl="pickerDate" let-formControl>
+      <nz-range-picker
+        [nzAllowClear]="false"
+        [nzStatus]="formControl.status === 'INVALID' ? 'error' : ''"
+        [nzShowTime]="false"
+        nzFormat="yyyy-MM-dd"
+        [formControl]="formControl"
+      ></nz-range-picker>
+    </ng-template>
   </nzx-configurable-query>
   <pre>
   {{ queryParams7 | json }}
   </pre>
 
   <div>例子8：缺省固定参数</div>
-  <nzx-configurable-query #query8 [controls]="controls8" [fixedParams]="{ enabled: true }"
-    (queryChange)="queryParams8 = $event" (resetChange)="queryParams8 = $event">
+  <nzx-configurable-query
+    #query8
+    [controls]="controls8"
+    [fixedParams]="{ enabled: true }"
+    (queryChange)="queryParams8 = $event"
+    (resetChange)="queryParams8 = $event"
+  >
   </nzx-configurable-query>
   <pre>
   {{ queryParams8 | json }}
   </pre>
 
   <div>例子9：缓存查询参数</div>
-  <nzx-configurable-query #query9 [controls]="controls9" [initQuery]="true" [fixedParams]="{ enabled: true }"
-    (queryChange)="queryChange($event)" (resetChange)="queryChange($event)">
+  <nzx-configurable-query
+    #query9
+    [controls]="controls9"
+    [initQuery]="true"
+    [fixedParams]="{ enabled: true }"
+    (queryChange)="queryChange($event)"
+    (resetChange)="queryChange($event)"
+  >
   </nzx-configurable-query>
   <pre>
   {{ queryParams9 | json }}
   </pre>
 
   <div>例子10： 动态添加删除控件</div>
   <nz-space>
-    <button *nzSpaceItem nz-button nzType="primary" nzSize="small" (click)="addLevel()">
+    <button
+      *nzSpaceItem
+      nz-button
+      nzType="primary"
+      nzSize="small"
+      (click)="addLevel()"
+    >
       add level to first
     </button>
-    <button *nzSpaceItem nz-button nzType="primary" nzSize="small" (click)="addGender()">
+    <button
+      *nzSpaceItem
+      nz-button
+      nzType="primary"
+      nzSize="small"
+      (click)="addGender()"
+    >
       add gender to second
     </button>
 
-    <button *nzSpaceItem nz-button nzType="primary" nzSize="small" (click)="removeLevel()">
+    <button
+      *nzSpaceItem
+      nz-button
+      nzType="primary"
+      nzSize="small"
+      (click)="removeLevel()"
+    >
       remove level
     </button>
-    <button *nzSpaceItem nz-button nzType="primary" nzSize="small" (click)="removeGender()">
+    <button
+      *nzSpaceItem
+      nz-button
+      nzType="primary"
+      nzSize="small"
+      (click)="removeGender()"
+    >
       remove gender
     </button>
   </nz-space>
@@ -108,11 +181,14 @@
     <nz-rate [formControl]="formControl" nzAllowHalf></nz-rate>
   </ng-template>
 
-  <nzx-configurable-query #query10 [controls]="controls10" (queryChange)="queryParams10 = $event"
-    (resetChange)="queryParams10 = $event">
+  <nzx-configurable-query
+    #query10
+    [controls]="controls10"
+    (queryChange)="queryParams10 = $event"
+    (resetChange)="queryParams10 = $event"
+  >
   </nzx-configurable-query>
   <pre>
   {{ queryParams10 | json }}
   </pre>
-
 </div>