cd-project-management-web/src/app/routes/contract-management/contract-file/add/essential-information/essential-information.component.html

<!-- 基本信息 -->
<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
  <nz-card>
    <div nz-row [nzGutter]="24">
      <!-- 合同编码 -->
      <div nz-col [nzSpan]="6">
        <nz-form-item>
          <nz-form-label [nzSpan]="'vertical' ? 24 : null" nzRequired>合同编码</nz-form-label>
          <nz-form-control [nzSm]="24" [nzXs]="24">
            <input nz-input placeholder="自动生成" disabled="true" />
          </nz-form-control>
        </nz-form-item>
      </div>
      <!-- 项目名称 -->
      <div nz-col [nzSpan]="6">
        <nz-form-item>
          <nz-form-label [nzSpan]="'vertical' ? 24 : null" nzRequired>项目名称</nz-form-label>
          <nz-form-control [nzSm]="24" [nzXs]="24">
            <nz-tree-select style="width: 100%" [nzNodes]="proList" nzShowSearch [nzMultiple]="false"
              formControlName="proId" id="proId" nzPlaceHolder="请选择" [(ngModel)]="contractFile.proId"
              [nzMaxTagCount]="3" [nzAllowClear]="true" (ngModelChange)="proChange($event)">
            </nz-tree-select>
            <nz-form-explain *ngIf="validateForm.get('proId')?.dirty && validateForm.get('proId')?.errors">
              请选择项目
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <!-- 免费售后起始 -->
      <div nz-col [nzSpan]="6">
        <nz-form-item>
          <nz-form-label [nzSpan]="'vertical' ? 24 : null" nzRequired>免费售后起始</nz-form-label>
          <nz-form-control>
            <nz-date-picker nzFormat="yyyy-MM-dd" formControlName="freeAfterSalesStart" id="freeAfterSalesStart"
              [(ngModel)]="contractFile.freeAfterSalesStart" [nzDisabledDate]="disabledDate"></nz-date-picker>
            <nz-form-explain
              *ngIf="validateForm.get('freeAfterSalesStart')?.dirty && validateForm.get('freeAfterSalesStart')?.errors">
              请选择免费售后起始
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <!-- 免费售后截至 -->
      <div nz-col [nzSpan]="6">
        <nz-form-item>
          <nz-form-label [nzSpan]="'vertical' ? 24 : null" nzRequired>免费售后截至</nz-form-label>
          <nz-form-explain>
            <nz-date-picker nzFormat="yyyy-MM-dd" formControlName="freeAfterSalesEnd" id="freeAfterSalesEnd"
              [(ngModel)]="contractFile.freeAfterSalesEnd" [nzDisabledDate]="disabledDate2"></nz-date-picker>
            <nz-form-explain
              *ngIf="validateForm.get('freeAfterSalesEnd')?.dirty && validateForm.get('freeAfterSalesEnd')?.errors">
              请选择免费售后截至
            </nz-form-explain>
          </nz-form-explain>
        </nz-form-item>
      </div>
    </div>
    <div nz-row [nzGutter]="24">
      <!-- 合同概述 -->
      <div nz-col [nzSpan]="24">
        <nz-form-item>
          <nz-form-label [nzSpan]="'vertical' ? 24 : null">合同概述</nz-form-label>
          <nz-form-control [nzSm]="24" [nzXs]="24">
            <textarea rows="2" formControlName="overview" id="overview" nz-input [(ngModel)]="contractFile.overview"
              placeholder="请输入合同概述"></textarea>
          </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]="'vertical' ? 24 : null" nzRequired>客户</nz-form-label>
          <nz-form-control [nzSm]="24" [nzXs]="24">
            <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
              <input type="text" [(ngModel)]="contractFile.fdCustomerName" formControlName="fdCustomerName"
                id="fdCustomerName" nz-input placeholder="{{ 'select.please.choose' | translate }}" disabled="true" />
            </nz-input-group>
            <ng-template #suffixIconButton>
              <!-- 放大镜  勾选列表 -->
              <button nz-button nzType="primary" nzSearch (click)="modalTable()">
                <i nz-icon type="search"></i>
              </button>
            </ng-template>
            <nz-form-explain
              *ngIf="validateForm.get('fdCustomerName')?.dirty && validateForm.get('fdCustomerName')?.errors">
              请选择客户
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="18">
        <nz-form-item>
          <nz-form-label [nzSpan]="'vertical' ? 24 : null">客户地址</nz-form-label>
          <nz-form-control [nzSm]="24" [nzXs]="24">
            <input disabled="true" nz-input [(ngModel)]="contractFile.fdCustomeraddress"
              formControlName="fdCustomeraddress" id="fdCustomeraddress" placeholder="客户地址" [disabled]="true" />
          </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]="'vertical' ? 24 : null" nzRequired>客户人员</nz-form-label>
          <nz-form-control>
            <nz-select style="widows: 100%;" nzShowSearch nzAllowClear formControlName="fdCustomerPersonnelId"
              id="fdCustomerPersonnelId" [(ngModel)]="contractFile.fdCustomerPersonnelId" nzPlaceHolder="请选择"
              (ngModelChange)="fdCustomerPersonnelChange($event)">
              <nz-option *ngFor="let i of fdCustomerPersonnelList" [nzValue]="i.id" [nzLabel]="i.contactPsn">
              </nz-option>
            </nz-select>
            <nz-form-explain
              *ngIf="validateForm.get('fdCustomerPersonnelId')?.dirty && validateForm.get('fdCustomerPersonnelId')?.errors">
              请选择客户人员
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <!-- 手机 -->
      <div nz-col [nzSpan]="6">
        <nz-form-item>
          <nz-form-label [nzSpan]="'vertical' ? 24 : null">手机</nz-form-label>
          <nz-form-control>
            <input disabled="true" nz-input [(ngModel)]="contractFile.fdCustomerPersonnelTel"
              formControlName="fdCustomerPersonnelTel" id="fdCustomerPersonnelTel" placeholder="客户地址"
              [disabled]="true" />
          </nz-form-control>
        </nz-form-item>
      </div>
      <!-- 销售人员 -->
      <div nz-col [nzSpan]="6">
        <nz-form-item>
          <nz-form-label [nzSpan]="'vertical' ? 24 : null" nzRequired>销售人员</nz-form-label>
          <nz-form-control>
            <nz-tree-select [nzNodes]="salesStaffList" nzShowSearch formControlName="salesmanId" id="salesmanId"
              nzAllowClear="false" [(ngModel)]="contractFile.salesmanId" (ngModelChange)="onChangeSalesmanId($event)"
              nzPlaceHolder="{{ 'select.please.choose' | translate }}"></nz-tree-select>
            <nz-form-explain *ngIf="validateForm.get('salesmanId')?.dirty && validateForm.get('salesmanId')?.errors">
              请选择销售人员
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <!-- 业务类型 -->
      <div nz-col [nzSpan]="6">
        <nz-form-item>
          <nz-form-label [nzSpan]="'vertical' ? 24 : null">业务类型</nz-form-label>
          <nz-form-control [nzSm]="24" [nzXs]="24">
            <nz-select style="widows: 100%;" nzShowSearch nzAllowClear formControlName="businessTypeDictId"
              id="businessTypeDictId" [(ngModel)]="contractFile.businessTypeDictId" nzPlaceHolder="请选择"
              (ngModelChange)="businessTypeDictIdChange($event)">
              <nz-option *ngFor="let i of businessTypeDictList" [nzValue]="i.value" [nzLabel]="i.text"></nz-option>
            </nz-select>
            <nz-form-explain
              *ngIf="validateForm.get('businessTypeDictId')?.dirty && validateForm.get('businessTypeDictId')?.errors">
              请选择业务类型
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </nz-card>
  <nz-card>
    <div nz-row [nzGutter]="24">
      <!-- 标准报价 -->
      <div nz-col [nzSpan]="4">
        <nz-form-item>
          <nz-form-label [nzSpan]="'vertical' ? 24 : null">标准报价</nz-form-label>
          <nz-form-explain>
            <nz-input-number [(ngModel)]="contractFile.standardQuotation" formControlName="standardQuotation"
              id="standardQuotation" [nzDisabled]="true" [nzMin]="0" [nzFormatter]="formatterDollar" [nzParser]="parserDollar">
            </nz-input-number>
          </nz-form-explain>
        </nz-form-item>
      </div>
      <!-- 成交金额 -->
      <div nz-col [nzSpan]="4">
        <nz-form-item>
          <nz-form-label [nzSpan]="'vertical' ? 24 : null">成交金额</nz-form-label>
          <nz-form-explain>
            <nz-input-number [(ngModel)]="contractFile.transactionAmount" formControlName="transactionAmount"
              id="transactionAmount" [nzMin]="0" [nzFormatter]="formatterDollar" [nzParser]="parserDollar">
            </nz-input-number>
          </nz-form-explain>
        </nz-form-item>
      </div>
      <!-- 折扣率 -->
      <div nz-col [nzSpan]="4">
        <nz-form-item>
          <nz-form-label [nzSpan]="'vertical' ? 24 : null">折扣率</nz-form-label>
          <nz-form-explain>
            <nz-input-number [(ngModel)]="contractFile.discountRate" formControlName="discountRate" id="discountRate"
              [nzMin]="0" [nzFormatter]="formatterDollar" [nzParser]="parserDollar">
            </nz-input-number>
          </nz-form-explain>
        </nz-form-item>
      </div>
      <!-- 赠品金额 -->
      <div nz-col [nzSpan]="4">
        <nz-form-item>
          <nz-form-label [nzSpan]="'vertical' ? 24 : null">赠品金额</nz-form-label>
          <nz-form-explain>
            <nz-input-number [(ngModel)]="contractFile.giftAmount" formControlName="giftAmount" id="giftAmount"
              [nzMin]="0" [nzFormatter]="formatterDollar" [nzParser]="parserDollar">
            </nz-input-number>
          </nz-form-explain>
        </nz-form-item>
      </div>
      <!-- 成本 -->
      <div nz-col [nzSpan]="4">
        <nz-form-item>
          <nz-form-label [nzSpan]="'vertical' ? 24 : null">成本</nz-form-label>
          <nz-form-explain>
            <nz-input-number [(ngModel)]="contractFile.cost" formControlName="cost" id="cost" [nzMin]="0"
              [nzFormatter]="formatterDollar" [nzParser]="parserDollar">
            </nz-input-number>
          </nz-form-explain>
        </nz-form-item>
      </div>
      <!-- 合同费用 -->
      <div nz-col [nzSpan]="4">
        <nz-form-item>
          <nz-form-label [nzSpan]="'vertical' ? 24 : null">合同费用</nz-form-label>
          <nz-form-explain>
            <nz-input-number [(ngModel)]="contractFile.contractCost" formControlName="contractCost" id="contractCost"
              [nzMin]="0" [nzFormatter]="formatterDollar" [nzParser]="parserDollar">
            </nz-input-number>
          </nz-form-explain>
        </nz-form-item>
      </div>
    </div>
    <div nz-row [nzGutter]="24">
      <!-- 合同利润 -->
      <div nz-col [nzSpan]="4">
        <nz-form-item>
          <nz-form-label [nzSpan]="'vertical' ? 24 : null">合同利润</nz-form-label>
          <nz-form-explain>
            <nz-input-number [(ngModel)]="contractFile.contractProfit" formControlName="contractProfit"
              id="contractProfit" [nzMin]="0" [nzFormatter]="formatterDollar" [nzParser]="parserDollar">
            </nz-input-number>
          </nz-form-explain>
        </nz-form-item>
      </div>
      <!-- 应收款账 -->
      <div nz-col [nzSpan]="4">
        <nz-form-item>
          <nz-form-label [nzSpan]="'vertical' ? 24 : null">应收款账</nz-form-label>
          <nz-form-explain>
            <nz-input-number [(ngModel)]="contractFile.accountsReceivable" formControlName="accountsReceivable"
              id="accountsReceivable" [nzMin]="0" [nzFormatter]="formatterDollar" [nzParser]="parserDollar">
            </nz-input-number>
          </nz-form-explain>
        </nz-form-item>
      </div>
      <!-- 业绩计算率 -->
      <div nz-col [nzSpan]="4">
        <nz-form-item>
          <nz-form-label [nzSpan]="'vertical' ? 24 : null">业绩计算率</nz-form-label>
          <nz-form-explain>
            <nz-input-number [(ngModel)]="contractFile.performanceCalculationRate"
              formControlName="performanceCalculationRate" id="performanceCalculationRate" [nzMin]="0"
              [nzFormatter]="formatterDollar" [nzParser]="parserDollar">
            </nz-input-number>
          </nz-form-explain>
        </nz-form-item>
      </div>
    </div>
  </nz-card>
  <nz-card>
    <div nz-row [nzGutter]="24">
      <!-- 制单人 -->
      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label [nzSpan]="'vertical' ? 24 : null">制单人</nz-form-label>
          <nz-form-explain>
            xxx
          </nz-form-explain>
        </nz-form-item>
      </div>
      <!-- 制单时间 -->
      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label [nzSpan]="'vertical' ? 24 : null">制单人</nz-form-label>
          <nz-form-explain>
            xxx
          </nz-form-explain>
        </nz-form-item>
      </div>
    </div>
    <div nz-row [nzGutter]="24">
      <!-- 修改人 -->
      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label [nzSpan]="'vertical' ? 24 : null">修改人</nz-form-label>
          <nz-form-explain>
            xxx
          </nz-form-explain>
        </nz-form-item>
      </div>
      <!-- 修改时间 -->
      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label [nzSpan]="'vertical' ? 24 : null">修改时间</nz-form-label>
          <nz-form-explain>
            xxx
          </nz-form-explain>
        </nz-form-item>
      </div>
    </div>
  </nz-card>
</form>