个人博客 个人博客

2020 记录精彩的程序人生

目录
Angular 实现公用组件弹框
/  

Angular 实现公用组件弹框

1.子html页面:dp-element.html

<button type="button" class="btn btn-primary btn-xs" (click)="dpTypeQuery()">门板选择</button>  
 <form class="form-horizontal" [formGroup]="houseCustomDpForm">  
 <div class="table-responsive" formArrayName="dpElements">  
 ...  

2.子ts页面:dp-element.ts

itemTypeNo: string;

 @Input()
  splitOrderQueryParameter: SplitOrderQueryParameter;
  @Input()
  operate: string;
  @Output()
  onDpTypeQuery = new EventEmitter<string>();

dpTypeQuery() {
    let selfMadeDpItemTypeNo = this.splitOrderQueryParameter.houseCustomSelfMadeDpItemTypeNo;
    let purchaseDpItemTypeNo = this.splitOrderQueryParameter.houseCustomPurchaseDpItemTypeNo;
    let selfMadeAndPurchaseQureyPara: string;
    if (selfMadeDpItemTypeNo && purchaseDpItemTypeNo) {
      let selfMadeAndPurchaseQureyParaArray: string[] = [];
      selfMadeAndPurchaseQureyParaArray.push(selfMadeDpItemTypeNo);
      selfMadeAndPurchaseQureyParaArray.push(purchaseDpItemTypeNo);
      selfMadeAndPurchaseQureyPara = selfMadeAndPurchaseQureyParaArray.join(',');
    } else if (selfMadeDpItemTypeNo || purchaseDpItemTypeNo) {
      selfMadeAndPurchaseQureyPara = selfMadeDpItemTypeNo || purchaseDpItemTypeNo;
    } else {
      this.errorMessage = '拆单参数没有配置全屋定制自制门板种类';
      return;
    }
    this.itemTypeNo = selfMadeAndPurchaseQureyPara;
    this.onDpTypeQuery.emit('dpTypeQueryEmit');
  }

onSelectItemMasters(itemMasters: ItemMaster[]) {
    if (itemMasters) {
      (<DpElement[]>this.dpElements.value).forEach(dpElement => {
        let index = itemMasters.findIndex(item => item.itemNo === dpElement.dpItemNo);
        if (index !== -1) {
          itemMasters.splice(index, 1);
        }
      });
      itemMasters.forEach(itemMaster => {
        this.appendHouseCustomDp(itemMaster);
      });
    }
  }

  appendHouseCustomDp(itemMaster: ItemMaster) {
    let unitMaster = new UnitMaster();
    if (itemMaster.quotationUnit) {
      unitMaster = this.unitMasters.find(unit => unit.no === itemMaster.quotationUnit);
    }
    this.dpElements.push(this.fb.group({
      dpItemNo: itemMaster.itemNo,
      dpItemName: itemMaster.itemName,
      spec: itemMaster.spec,
      unitNo: unitMaster.name,
      quantity: [0, Validators.compose([Validators.required, Validators.min(0)])],
      materialSource: MaterialSource[itemMaster.itemType.materialSource],
      remark: ''
    }));
  }

3.明细html页面:detail.component.html

公共组件弹框:
**onSelectItemMasters:**每个子组件都用声明此方法。

  <app-item-master-query-multi-sel-popup (onSelectItemMasters)="onSelectItemMasters($event)">
  </app-item-master-query-multi-sel-popup>

引入子组件页面:app-dp-element
**onDpTypeQuery:**子ts页面:dp-element.ts中声明 onDpTypeQuery = new EventEmitter();

<div>
        <app-dp-element #dp (onDpTypeQuery)="dpTypeQuery($event)"
            [splitOrderQueryParameter]="splitQueryParam" [operate]="operate">
        </app-dp-element>
    </div>

4.明细ts页面:detail.component.ts

@ViewChild(ItemMasterQueryMultiSelPopupComponent, { static: false })
private itemMultiSelQueryPopup: ItemMasterQueryMultiSelPopupComponent;
@ViewChild(DpElementComponent, { static: false })
private dpElementComponent: DpElementComponent;

onSelectItemMasters(itemMaster: ItemMaster[]) {
     if (this.childViewName === 'dpTypeQueryEmit') {
         this.dpElementComponent.onSelectItemMasters(itemMaster);
    }
}

dpTypeQuery(childViewName: string) {
      if (childViewName === 'dpTypeQueryEmit') {
          this.childViewName = childViewName;
          this.itemTypeNo = this.dpElementComponent.itemTypeNo;
     }
     this.popupItemMasterMultiSelComponent(this.itemTypeNo);
 }

popupItemMasterMultiSelComponent(itemTypeNo: string) {
      $('input[type="checkbox"]').prop({ 'checked': false });
      this.itemMultiSelQueryPopup.itemMasters = [];
      this.itemMultiSelQueryPopup.itemMasterQueryForm.reset();
      this.itemMultiSelQueryPopup.setDetailFormData(itemTypeNo, '', '', '');
      this.itemMultiSelQueryPopup.query(0);
      $('#itemMasterQueryMultiSelPopup').modal({
          backdrop: 'static',
          keyboard: false,
          show: true
      });
 }