解决冲突

src/app/routes/partner/rebate-management/components/list/particulars.component.html

@@ -1,13 +1,46 @@
+<!--
+ * @Description  : 
+ * @Version      : 1.0
+ * @Author       : Shiming
+ * @Date         : 2022-02-24 20:09:49
+ * @LastEditors  : Shiming
+ * @LastEditTime : 2022-02-24 20:14:21
+ * @FilePath     : \\tms-obc-web\\src\\app\\routes\\partner\\rebate-management\\components\\list\\particulars.component.html
+ * Copyright (C) 2022 huzhenhong. All rights reserved.
+-->
+<page-header-wrapper [title]="''"> </page-header-wrapper>
 <nz-card>
-  <!-- 搜索区 -->
+  <div nz-row nzGutter="8">
+    <!-- 查询字段小于或等于3个时，不显示伸缩按钮 -->
+    <div nz-col nzSpan="24" *ngIf="queryFieldCount <= 4">
       <sf
         #sf
-    [ui]="ui"
         [schema]="schema"
+        [ui]="ui"
         [mode]="'search'"
+        [disabled]="!sf?.valid"
+        [loading]="service.http.loading"
         (formSubmit)="st?.load(1)"
         (formReset)="resetSF()"
       ></sf>
+    </div>
+
+    <!-- 查询字段大于3个时，根据展开状态调整布局 -->
+    <ng-container *ngIf="queryFieldCount > 4">
+      <div nz-col [nzSpan]="_$expand ? 24 : 18">
+        <sf #sf [schema]="schema" [ui]="ui" [compact]="true" [button]="'none'"></sf>
+      </div>
+      <div nz-col [nzSpan]="_$expand ? 24 : 6" class="text-right">
+        <button nz-button nzType="primary" [nzLoading]="service.http.loading" (click)="st?.load(1);">查询</button>
+        <button nz-button nzType="primary" [disabled]="service.http.loading" >导出</button>
+        <button nz-button [disabled]="service.http.loading" (click)="resetSF()">重置</button>
+        <button nz-button nzType="link" (click)="expandToggle()">
+          {{ !_$expand ? '展开' : '收起' }}
+          <i nz-icon [nzType]="!_$expand ? 'down' : 'up'"></i>
+        </button>
+      </div>
+    </ng-container>
+  </div>
 </nz-card>
 
 <nz-card>

src/app/routes/partner/rebate-management/components/list/particulars.component.ts

@@ -19,22 +19,41 @@ export class ParterRebateManageMentParticularsComponent implements OnInit {
   @ViewChild('sf', { static: false })
   sf!: SFComponent;
   spuStatus = '1';
-
+  _$expand = false;
-  data=[{name1:1111}]
+  data = [{ name1: 1111 }];
   constructor(
     public router: Router,
     public ar: ActivatedRoute,
     public service: RebateManagementService,
     private modalService: NzModalService,
     public shipperservice: ShipperBaseService
-
   ) {}
-
+  /**
+   * 查询字段个数
+   */
+  get queryFieldCount(): number {
+    return Object.keys(this.schema?.properties || {}).length;
+  }
+    /**
+  * 伸缩查询条件
+  */
+     expandToggle(): void {
+      this._$expand = !this._$expand;
+      this.sf?.setValue('/_$expand', this._$expand);
+    }
   /**
  * 查询参数
  */
    get reqParams() {
-    return { ...this.sf?.value };
+    const params: any = Object.assign({}, this.sf?.value || {});
+    delete params._$expand;
+    return { 
+      ...params,
+      deadlineTime: {
+        start: this.sf?.value?.deadlineTime?.[0] || '',
+        end: this.sf?.value?.deadlineTime?.[1] || '',
+      },
+     };
   }
   ngOnInit() {
     this.initSF();
@@ -44,6 +63,7 @@ export class ParterRebateManageMentParticularsComponent implements OnInit {
   initSF() {
     this.schema = {
       properties: {
+        _$expand: { type: 'boolean', ui: { hidden: true } },
         name: {
           type: 'string',
           title: '订单号'
@@ -63,15 +83,20 @@ export class ParterRebateManageMentParticularsComponent implements OnInit {
             widget: 'select',
             placeholder: '请选择',
             visibleIf: {
-              _$expand: (value: boolean) => value,
+              _$expand: (value: boolean) => value
             },
             allowClear: true,
-            asyncData: () => this.shipperservice.getNetworkFreightForwarder(),
+            asyncData: () => this.shipperservice.getNetworkFreightForwarder()
-          },
+          }
         },
         phone3: {
           type: 'string',
-          title: '合伙人名称'
+          title: '合伙人名称',
+          ui: {
+            visibleIf: {
+              _$expand: (value: boolean) => value
+            },
+          }
         },
         deadlineTime: {
           title: '时间范围',
@@ -81,15 +106,16 @@ export class ParterRebateManageMentParticularsComponent implements OnInit {
             mode: 'range',
             format: 'yyyy-MM-dd',
             visibleIf: {
-              _$expand: (value: boolean) => value,
+              _$expand: (value: boolean) => value
-            },
-            allowClear: true,
-          } as SFDateWidgetSchema,
             },
+            allowClear: true
+          } as SFDateWidgetSchema
+        }
       }
     };
     this.ui = {
       '*': {
+        spanLabelFixed: 140,
         grid: { span: 8, gutter: 4 }
       }
     };
@@ -148,8 +174,7 @@ export class ParterRebateManageMentParticularsComponent implements OnInit {
       {
         title: '返佣时间',
         index: 'name1'
-      },
+      }
-
     ];
   }
 
@@ -160,6 +185,4 @@ export class ParterRebateManageMentParticularsComponent implements OnInit {
     this.sf.reset();
     this.st.load(1);
   }
-
-
 }