cd-project-management-web/src/app/routes/project-manage-archives/view/business-affairs/business-affairs.component.html

<!-- 开发 -->
<form nz-form>
  <div nz-row [nzGutter]="24">
    <div nz-col [nzSpan]="6">
      <nz-form-item>
        <!-- 客户编码 -->
        <nz-form-label [nzSpan]="8">{{ 'customer.name' | translate }}</nz-form-label>
        <nz-form-control [nzSm]="16" [nzXs]="24">{{ projectManageArchives.cusCode }}</nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="6">
      <nz-form-item>
        <!-- 客户名称 -->
        <nz-form-label [nzSpan]="8">{{ 'customer.shortName' | translate }}</nz-form-label>
        <nz-form-control [nzSm]="16" [nzXs]="24">{{ projectManageArchives.cusName }}</nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="6">
      <nz-form-item>
        <!-- 销售经理 -->
        <nz-form-label [nzSpan]="8">{{ 'sales' | translate }}{{ 'manager' | translate }}</nz-form-label>
        <nz-form-control [nzSm]="16" [nzXs]="24">{{ projectManageArchives.saleManager }}</nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="6">
      <nz-form-item>
        <!-- 业务员 -->
        <nz-form-label [nzSpan]="8">{{ 'salesman' | translate }}</nz-form-label>
        <nz-form-control [nzSm]="16" [nzXs]="24">{{ projectManageArchives.saleMan }}</nz-form-control>
      </nz-form-item>
    </div>
  </div>
  <div nz-row [nzGutter]="24">
    <div nz-col [nzSpan]="6">
      <nz-form-item>
        <!-- 项目总金额 -->
        <nz-form-label [nzSpan]="8">{{ 'total.amount.of.the.project' | translate }}</nz-form-label>
        <nz-form-control [nzSm]="16" [nzXs]="24">{{ projectManageArchives.totalPrice }}</nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="6">
      <nz-form-item>
        <!--已回款金额  -->
        <nz-form-label [nzSpan]="8">{{ 'amount.paid.back' | translate }}</nz-form-label>
        <nz-form-control [nzSm]="16" [nzXs]="24">{{ projectManageArchives.received }}</nz-form-control>
      </nz-form-item>
    </div>
  </div>
</form>
<!-- 收款计划 -->
<nz-card nzTitle="{{ 'payment.plan' | translate }}" nzSize="small">
  <div nz-row [nzGutter]="24">
    <div nz-col [nzSpan]="24">
      <nz-table
        style="padding-top: 5px;"
        nzSize="small"
        #basicTable
        [nzData]="collectionPlanList"
        [nzFrontPagination]="false"
        [nzShowPagination]="false"
        [nzScroll]="{ x: '123vw' }"
      >
        <!-- <thead>
          <tr>
            <th>{{ 'customer.contacts.name' | translate }}</th>
            <th>{{ 'customer.contacts.telephone' | translate }}</th>
            <th>{{ 'customer.contacts.mail' | translate }}</th>
            <th>{{ 'customer.is.it.default' | translate }}</th>
            <th>{{ 'customer.contacts.client.address' | translate }}</th>
            <th>{{ 'table.operation' | translate }}</th>
          </tr>
        </thead> -->
        <tbody>
          <tr *ngFor="let data of basicTable.data">
            <td style="width: 7%;">
              {{ data.planName }}
            </td>

            <!-- 1 -->
            <td style="width: 4%;">{{ 'the.first' | translate }}</td>
            <td style="width: 4%;">
              {{ data.price1 }}
            </td>
            <td style="width: 5%;">
              {{ data.milestone1 }}
            </td>
            <td style="width: 5%;">
              {{ data.desc1 }}
            </td>

            <!-- 2 -->
            <td style="width: 4%;">{{ 'the.second' | translate }}</td>
            <td style="width: 4%;">
              {{ data.price2 }}
            </td>
            <td style="width: 5%;">
              {{ data.milestone2 }}
            </td>
            <td style="width: 5%;">
              {{ data.desc2 }}
            </td>

            <!-- 3 -->
            <td style="width: 4%;">{{ 'the.third' | translate }}</td>
            <td style="width: 4%;">
              {{ data.price3 }}
            </td>
            <td style="width: 5%;">
              {{ data.milestone3 }}
            </td>
            <td style="width: 5%;">
              {{ data.desc3 }}
            </td>

            <!-- 4 -->
            <td style="width: 4%;">{{ 'the.fourth' | translate }}</td>
            <td style="width: 4%;">
              {{ data.price4 }}
            </td>
            <td style="width: 5%;">
              {{ data.milestone4 }}
            </td>
            <td style="width: 5%;">
              {{ data.desc4 }}
            </td>

            <!-- 5 -->
            <td style="width: 4%;">{{ 'the.fifth' | translate }}</td>
            <td style="width: 4%;">
              {{ data.price5 }}
            </td>
            <td style="width: 5%;">
              {{ data.milestone5 }}
            </td>
            <td style="width: 5%;">
              {{ data.desc5 }}
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</nz-card>

<!-- 回款情况 -->
<nz-card nzTitle="{{ 'receivable.situation' | translate }}" nzSize="small">
  <div nz-row [nzGutter]="24">
    <div nz-col [nzSpan]="24">
      <nz-table
        style="padding-top: 5px;"
        nzSize="small"
        #basicTable2
        [nzData]="paymentCollectionList"
        [nzFrontPagination]="false"
        [nzShowPagination]="false"
        [nzScroll]="{ x: '123vw' }"
      >
        <!-- <thead>
          <tr>
            <th>{{ 'customer.contacts.name' | translate }}</th>
            <th>{{ 'customer.contacts.telephone' | translate }}</th>
            <th>{{ 'customer.contacts.mail' | translate }}</th>
            <th>{{ 'customer.is.it.default' | translate }}</th>
            <th>{{ 'customer.contacts.client.address' | translate }}</th>
            <th>{{ 'table.operation' | translate }}</th>
          </tr>
        </thead> -->
        <tbody>
          <tr *ngFor="let data of basicTable2.data">
            <td style="width: 7%;">
              {{ data.planName }}
            </td>

            <!-- 第一笔 -->
            <td style="width: 4%;">{{ 'the.first' | translate }}</td>
            <td style="width: 4%;">
              {{ data.price1 }}
            </td>
            <td style="width: 5%;">
              {{ data.milestone1 }}
            </td>
            <td style="width: 5%;">
              {{ data.desc1 }}
            </td>

            <!-- 第二笔 -->
            <td style="width: 4%;">{{ 'the.second' | translate }}</td>
            <td style="width: 4%;">
              {{ data.price2 }}
            </td>
            <td style="width: 5%;">
              {{ data.milestone2 }}
            </td>
            <td style="width: 5%;">
              {{ data.desc2 }}
            </td>

            <!-- 第三笔 -->
            <td style="width: 4%;">{{ 'the.third' | translate }}</td>
            <td style="width: 4%;">
              {{ data.price3 }}
            </td>
            <td style="width: 5%;">
              {{ data.milestone3 }}
            </td>
            <td style="width: 5%;">
              {{ data.desc3 }}
            </td>

            <!-- 第四笔 -->
            <td style="width: 4%;">{{ 'the.fourth' | translate }}</td>
            <td style="width: 4%;">
              {{ data.price4 }}
            </td>
            <td style="width: 5%;">
              {{ data.milestone4 }}
            </td>
            <td style="width: 5%;">
              {{ data.desc4 }}
            </td>

            <!-- 第五笔 -->
            <td style="width: 4%;">{{ 'the.fifth' | translate }}</td>
            <td style="width: 4%;">
              {{ data.price5 }}
            </td>
            <td style="width: 5%;">
              {{ data.milestone5 }}
            </td>
            <td style="width: 5%;">
              {{ data.desc5 }}
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</nz-card>

<!-- 付款计划 -->
<nz-card nzTitle="{{ 'payFor' | translate }}{{ 'the.plan' | translate }}" nzSize="small">
  <div nz-row [nzGutter]="24">
    <div nz-col [nzSpan]="24">
      <nz-table
        style="padding-top: 5px;"
        nzSize="small"
        #basicTable3
        [nzData]="paymentPlanList"
        [nzFrontPagination]="false"
        [nzShowPagination]="false"
        [nzScroll]="{ x: '123vw' }"
      >
        <!-- <thead>
          <tr>
            <th>{{ 'customer.contacts.name' | translate }}</th>
            <th>{{ 'customer.contacts.telephone' | translate }}</th>
            <th>{{ 'customer.contacts.mail' | translate }}</th>
            <th>{{ 'customer.is.it.default' | translate }}</th>
            <th>{{ 'customer.contacts.client.address' | translate }}</th>
            <th>{{ 'table.operation' | translate }}</th>
          </tr>
        </thead> -->
        <tbody>
          <tr *ngFor="let data of basicTable3.data">
            <td style="width: 7%;">
              {{ data.planName }}
            </td>

            <!-- 第一笔 -->
            <td style="width: 4%;">{{ 'the.first' | translate }}</td>
            <td style="width: 4%;">
              {{ data.price1 }}
            </td>
            <td style="width: 5%;">
              {{ data.milestone1 }}
            </td>
            <td style="width: 5%;">
              {{ data.desc1 }}
            </td>

            <!-- 第二笔 -->
            <td style="width: 4%;">{{ 'the.second' | translate }}</td>
            <td style="width: 4%;">
              {{ data.price2 }}
            </td>
            <td style="width: 5%;">
              {{ data.milestone2 }}
            </td>
            <td style="width: 5%;">
              {{ data.desc2 }}
            </td>

            <!--第三笔  -->
            <td style="width: 4%;">{{ 'the.third' | translate }}</td>
            <td style="width: 4%;">
              {{ data.price3 }}
            </td>
            <td style="width: 5%;">
              {{ data.milestone3 }}
            </td>
            <td style="width: 5%;">
              {{ data.desc3 }}
            </td>

            <!-- 第四笔 -->
            <td style="width: 4%;">{{ 'the.fourth' | translate }}</td>
            <td style="width: 4%;">
              {{ data.price4 }}
            </td>
            <td style="width: 5%;">
              {{ data.milestone4 }}
            </td>
            <td style="width: 5%;">
              {{ data.desc4 }}
            </td>

            <!-- 第五笔 -->
            <td style="width: 4%;">{{ 'the.fifth' | translate }}</td>
            <td style="width: 4%;">
              {{ data.price5 }}
            </td>
            <td style="width: 5%;">
              {{ data.milestone5 }}
            </td>
            <td style="width: 5%;">
              {{ data.desc5 }}
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</nz-card>

<!-- 付款情况 -->
<nz-card nzTitle="{{ 'payFor' | translate }}{{ 'situation' | translate }}" nzSize="small">
  <div nz-row [nzGutter]="24">
    <div nz-col [nzSpan]="24">
      <nz-table
        style="padding-top: 5px;"
        nzSize="small"
        #basicTable4
        [nzData]="paymentStatusList"
        [nzFrontPagination]="false"
        [nzShowPagination]="false"
        [nzScroll]="{ x: '123vw' }"
      >
        <!-- <thead>
          <tr>
            <th>{{ 'customer.contacts.name' | translate }}</th>
            <th>{{ 'customer.contacts.telephone' | translate }}</th>
            <th>{{ 'customer.contacts.mail' | translate }}</th>
            <th>{{ 'customer.is.it.default' | translate }}</th>
            <th>{{ 'customer.contacts.client.address' | translate }}</th>
            <th>{{ 'table.operation' | translate }}</th>
          </tr>
        </thead> -->
        <tbody>
          <tr *ngFor="let data of basicTable4.data">
            <td style="width: 7%;">
              {{ data.planName }}
            </td>
            <td style="width: 4%;">{{ 'the.first' | translate }}</td>
            <td style="width: 4%;">
              {{ data.price1 }}
            </td>
            <td style="width: 5%;">
              {{ data.milestone1 }}
            </td>
            <td style="width: 5%;">
              {{ data.desc1 }}
            </td>
            <td style="width: 4%;">{{ 'the.second' | translate }}</td>
            <td style="width: 4%;">
              {{ data.price2 }}
            </td>
            <td style="width: 5%;">
              {{ data.milestone2 }}
            </td>
            <td style="width: 5%;">
              {{ data.desc2 }}
            </td>
            <td style="width: 4%;">{{ 'the.third' | translate }}</td>
            <td style="width: 4%;">
              {{ data.price3 }}
            </td>
            <td style="width: 5%;">
              {{ data.milestone3 }}
            </td>
            <td style="width: 5%;">
              {{ data.desc3 }}
            </td>
            <td style="width: 4%;">{{ 'the.fourth' | translate }}</td>
            <td style="width: 4%;">
              {{ data.price4 }}
            </td>
            <td style="width: 5%;">
              {{ data.milestone4 }}
            </td>
            <td style="width: 5%;">
              {{ data.desc4 }}
            </td>
            <td style="width: 4%;">{{ 'the.fifth' | translate }}</td>
            <td style="width: 4%;">
              {{ data.price5 }}
            </td>
            <td style="width: 5%;">
              {{ data.milestone5 }}
            </td>
            <td style="width: 5%;">
              {{ data.desc5 }}
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</nz-card>