cd-project-management-web/src/app/routes/contract-management/contract-file/add/product-module/product-module.component.html

<!-- 产品 -->
<nz-card nzTitle="产品">
  <!-- 操作按钮 -->
  <div nz-row [nzGutter]="24">
    <div nz-col [nzSpan]="24">
      <button nz-button (click)="productAddRow()" nzType="primary">新增</button>
      <br />
      <br />
    </div>
  </div>
  <!-- 表格 -->
  <div nz-row [nzGutter]="24">
    <div nz-col [nzSpan]="24">
      <nz-table #productRowTable nzSize="small" class="tableTdPadding" nzBordered [nzData]="productList">
        <thead>
          <tr>
            <th nzWidth="10%">产品编码</th>
            <th nzWidth="17%">产品名称</th>
            <th nzWidth="9%">折扣率</th>
            <th nzWidth="9%">标准报价</th>
            <th nzWidth="9%">折扣后单价</th>
            <th nzWidth="9%">标准金额</th>
            <th nzWidth="9%">折扣后金额</th>
            <th nzWidth="9%">成本单价</th>
            <th nzWidth="9%">成本金额</th>
            <th nzWidth="10%">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of productRowTable.data" class="editable-row">
            <td><input type="text" nz-input [(ngModel)]="data.code" disabled="true" /></td>
            <td>
              <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
                <input type="text" [(ngModel)]="data.name" nz-input
                  placeholder="{{ 'select.please.choose' | translate }}" disabled="true" />
              </nz-input-group>
              <ng-template #suffixIconButton>
                <!-- 放大镜  勾选列表 -->
                <button nz-button nzType="primary" nzSearch (click)="selectProdutModal(data)">
                  <i nz-icon type="search"></i>
                </button>
              </ng-template>
            </td>
            <td>
              <nz-input-number [nzMin]="0" [(ngModel)]="data.discountRate" [nzFormatter]="formatterDollar2" [nzParser]="parserDollar2"></nz-input-number>
            </td>
            <td>
              <nz-input-number [nzMin]="0" [nzDisabled]="true" [(ngModel)]="data.standardQuotation"
                [nzFormatter]="formatterDollar" [nzParser]="parserDollar"></nz-input-number>
            </td>
            <td>
              <nz-input-number [nzMin]="0" [(ngModel)]="data.unitPriceAfterDiscount" (nzBlur)="unitPriceAfterDiscountBlur(data)" [nzFormatter]="formatterDollar"
                [nzParser]="parserDollar"></nz-input-number>
            </td>
            <td>
              <nz-input-number [nzMin]="0" [(ngModel)]="data.standardAmount" [nzFormatter]="formatterDollar"
                [nzParser]="parserDollar"></nz-input-number>
            </td>
            <td>
              <nz-input-number [nzMin]="0" [(ngModel)]="data.amountAfterDiscount" [nzFormatter]="formatterDollar"
                [nzParser]="parserDollar"></nz-input-number>
            </td>
            <td>
              <nz-input-number [nzMin]="0" [(ngModel)]="data.costUnitPrice" [nzFormatter]="formatterDollar"
                [nzParser]="parserDollar"></nz-input-number>
            </td>
            <td>
              <nz-input-number [nzMin]="0" [(ngModel)]="data.costAmount" [nzFormatter]="formatterDollar"
                [nzParser]="parserDollar"></nz-input-number>
            </td>
            <td>
              <a nz-popconfirm nzTitle="{{ 'confirm.to.delete' | translate }}?" nzOkText="{{ 'yes' | translate }}"
                nzCancelText="{{ 'no' | translate }}"
                (nzOnConfirm)="productDeleteRow(data)">{{ 'table.delete' | translate }}</a>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</nz-card>

<nz-card nzTitle="模块">
  <nz-tabset>
    <nz-tab *ngFor="let product of productList" [nzTitle]="product.name">
      <!-- 操作按钮 -->
      <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="24">
          <button nz-button (click)="moduleAddRow(product)" nzType="primary">新增</button>
          <br />
          <br />
        </div>
      </div>
      <!-- 表格 -->
      <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="24">
          <nz-table #moduleRowTable nzSize="small" class="tableTdPadding" nzBordered
            [nzData]="product.contractFileModularList">
            <thead>
              <tr>
                <th nzWidth="30%">产品模块编码</th>
                <th nzWidth="30%">产品模块名称</th>
                <th nzWidth="10%">标准报价</th>
                <th nzWidth="10%">采购价格</th>
                <th nzWidth="20%">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of moduleRowTable.data" class="editable-row">
                <td><input disabled="true" type="text" nz-input [(ngModel)]="data.code" /></td>
                <td>
                  <nz-select style="width:100%" nzShowSearch nzAllowClear [(ngModel)]="data.baseMaterialFileModularId"
                    nzPlaceHolder="请选择" (ngModelChange)="baseMaterialFileModularIdChange(product,data,$event)">
                    <nz-option *ngFor="let i of product.modularListSelect" [nzValue]="i.id" [nzLabel]="i.name">
                    </nz-option>
                  </nz-select>
                </td>
                <td>
                  <nz-input-number [nzMin]="0" [nzDisabled]="true" [(ngModel)]="data.standardQuotation" [nzFormatter]="formatterDollar"
                    [nzParser]="parserDollar" (ngModelChange)="standardQuotationModuleKeyUp(product)"></nz-input-number>
                </td>
                <td>
                  <nz-input-number [nzMin]="0" [(ngModel)]="data.purchasePrice"  [nzFormatter]="formatterDollar"
                    [nzParser]="parserDollar"></nz-input-number>
                </td>
                <td>
                  <a nz-popconfirm nzTitle="{{ 'confirm.to.delete' | translate }}?" nzOkText="{{ 'yes' | translate }}"
                    nzCancelText="{{ 'no' | translate }}"
                    (nzOnConfirm)="moduleDeleteRow(product,data.id)">{{ 'table.delete' | translate }}</a>
                </td>
              </tr>
            </tbody>
          </nz-table>
        </div>
      </div>
    </nz-tab>
  </nz-tabset>
</nz-card>