cd-project-management-web/src/app/routes/down-payment-management/receipt/add/add.component.html

<nz-spin [nzSpinning]="isLoadingSave">
  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="6">
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24">单据编码</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24">
            自动生成
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="6">
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24">客户编码</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24">
            {{managerPaymentAndReceiptSlip.cusCode}}
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="6">
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24">客户名称</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24">
            {{managerPaymentAndReceiptSlip.cusName}}
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="6">
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24">项目编码</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24">
            {{managerPaymentAndReceiptSlip.proCode}}
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="6">
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>项目名称</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24">
            <nz-select style="widows: 100%;" nzShowSearch nzAllowClear formControlName="proId"
              id="proId" [(ngModel)]="managerPaymentAndReceiptSlip.proId" nzPlaceHolder="请选择"
              (ngModelChange)="proChange($event)">
              <nz-option *ngFor="let i of proList" [nzValue]="i.id" [nzLabel]="i.proName"></nz-option>
            </nz-select>
            <nz-form-explain
              *ngIf="validateForm.get('proId')?.dirty && validateForm.get('proId')?.errors">
              请选择项目名称
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>
<!-- 子表数据 -->
  <nz-card>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="24">
        <!-- 新增按钮 -->
        <button (click)="addRow()" nz-button nzType="primary">{{ 'button.add' | translate }}</button>
      </div>
    </div>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="24">
        <nz-table style="padding-top: 5px;" nzSize="small" class="tableTdPadding" #basicTable
          [nzData]="itemDataList" [nzFrontPagination]="false" [nzShowPagination]="false" >
          <thead>
            <tr>
              <th nzAlign="center">序号</th>
              <th>收付款条线</th>
              <th>里程碑</th>
              <th>收款金额</th>
              <th>说明</th>
              <th>对应发票</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of basicTable.data;let i=index">
              <td nzAlign="center">{{i+1}}</td>
              <td style="width: 20%;">
                <nz-select style="width: 100%;" nzShowSearch [(ngModel)]="data.coArchivesId" nzPlaceHolder="请选择" (ngModelChange)="coArchivesIdChange(data)">
                <nz-option *ngFor="let i of coArchivesList" [nzValue]="i.id" [nzLabel]="i.planName"></nz-option>
              </nz-select>
              </td>
              <td style="width: 20%;">
                <nz-select style="width: 100%;" nzShowSearch [(ngModel)]="data.proArchivesId" nzPlaceHolder="请选择"
                >
                <nz-option *ngFor="let i of proArchivesList" [nzValue]="i.id" [nzLabel]="i.proName"></nz-option>
              </nz-select>
              </td>
              <td>
                <nz-input-number [(ngModel)]="data.coPrvice" [nzMin]="0" [nzStep]="1" [nzFormatter]="formatterDollar" [nzParser]="parserDollar" (ngModelChange)="coPrviceKeyUp()"></nz-input-number>
              </td>
              <td>
                <textarea rows="1" nz-input [(ngModel)]="data.explain"></textarea>
              </td>
              <td style="width: 20%;">
                <nz-select style="width: 100%;" nzShowSearch [(ngModel)]="data.invoiceId" nzPlaceHolder="请选择"
                >
                <nz-option *ngFor="let i of invoiceIdList" [nzValue]="i.id" [nzLabel]="i.proName"></nz-option>
              </nz-select>
              </td>
              <td ><a nz-popconfirm nzTitle="是否删除?"
                  (nzOnConfirm)="deleteRow(data.sort)">{{'table.delete'|translate}}</a></td>
            </tr>
            <tr *ngIf="itemDataList&&itemDataList.length>0">
              <td colSpan="2"></td>
              <td><strong>收款总金额</strong></td>
              <td><strong>$ {{managerPaymentAndReceiptSlip.totalPrice}}</strong></td>
              <td colSpan="3"></td>
            </tr>
          </tbody>
        </nz-table>
      </div>
    </div>
  </nz-card>
</nz-spin>
<!-- 按钮 -->
<div class="base">
  <!-- 关闭按钮 -->
  <a nz-popconfirm nzTitle="{{'pm.contract.contract.add.button.cancel'|translate}}" (nzOnConfirm)="close()"
    style="padding-right: 8px">
    <button nz-button>{{'pm.quotation.cancel'|translate}}</button>
  </a>
  <!-- 保存按钮 -->
  <button nz-button nzType="primary" class="ant-btn ant-btn-primary" (click)="submitForm()"
    [nzLoading]="isLoadingSave"><span>{{'pm.finish' | translate}}</span></button>
</div>