mirror-cathay/src/app/pages/finance/invoice/do/finance-invoice-do.component.html

<form class="main-form" #ngf="ngForm" (ngSubmit)="onSubmit(ngf)">

  <div class="grid grid-cols-12 gap-4 md:gap-2 mt-4 mb-4">
    <div class="col-span-4 md:hidden"></div>
    <div class="col-span-4 md:col-span-12 ">
      <mat-label>เลขที่เอกสาร</mat-label>
      <mat-form-field>
        <input matInput name="quotationNo" #quotationNo="ngModel" [(ngModel)]="dataForm.quotationNo">
      </mat-form-field>
    </div>
    <div class="col-span-4 md:col-span-12 ">
      <mat-label>วันที่ทำรายการ</mat-label>
      <mat-form-field>
        <input
          matInput
          name="sellerPaymentDate"
          #sellerPaymentDate="ngModel"
          (click)="dpkName3.open()"
          [(ngModel)]="dataForm.sellerPaymentDate"
          [matDatepicker]="dpkName3"
          readonly
        />
        <mat-datepicker-toggle [for]="dpkName3" matSuffix></mat-datepicker-toggle>
        <mat-datepicker #dpkName3></mat-datepicker>
      </mat-form-field>

    </div>
  </div>


  <div class="card card-form-panel card-form-panel-blue mb-6">
    <div class="card-header ">
      <div class="card-title"> ข้อมูลคนขาย</div>
    </div>
    <div class="card-body">
      <div class="card-body">
        <div class="grid grid-cols-12 gap-4 md:gap-2 mt-4 mb-4">

          <div class="col-span-2 md:col-span-12 ">
            <mat-label>คำนำหน้า</mat-label>
            <input matInput name="sellerprefix" #sellerprefix="ngModel" [(ngModel)]="dataForm.seller.prefix" disabled>

          </div>
          <div class="col-span-4 md:col-span-12 ">
            <mat-label>ชื่อลูกค้า</mat-label>
            <mat-form-field>
              <input matInput name="sellerfirstName" #sellerfirstName="ngModel" [(ngModel)]="dataForm.seller.firstName" required>
            </mat-form-field>
          </div>
          <div class="col-span-4 md:col-span-12 ">
            <mat-label>นามสกุล</mat-label>
            <mat-form-field>
              <input matInput name="sellerlastName" #sellerlastName="ngModel" [(ngModel)]="dataForm.seller.lastName" disabled>
            </mat-form-field>
          </div>
          <div class="col-span-2 md:col-span-12 ">
            <mat-label>เพศ</mat-label>
            <input matInput name="sellergender" #sellergender="ngModel" [(ngModel)]="dataForm.seller.gender" disabled>
          </div>

          <div class="col-span-4 md:col-span-12 ">
            <mat-label>เบอร์โทร</mat-label>
            <mat-form-field>
              <input matInput name="sellerPhone" #sellerPhone="ngModel" [(ngModel)]="dataForm.seller.phone" disabled>
            </mat-form-field>
          </div>

          <div class="col-span-4 md:col-span-12 ">
            <mat-label>Facebook</mat-label>
            <mat-form-field>
              <input matInput name="sellerFacebook" #sellerFacebook="ngModel" [(ngModel)]="dataForm.seller.facebook" disabled>
            </mat-form-field>
          </div>

          <div class="col-span-4 md:col-span-12 ">
            <mat-label>ID Line</mat-label>
            <mat-form-field>
              <input matInput name="sellerLine" #sellerLine="ngModel" [(ngModel)]="dataForm.seller.line" disabled>
            </mat-form-field>
          </div>

          <div class="col-span-4 md:col-span-12 ">
            <mat-label>ID LINE ร้านค้า</mat-label>
            <mat-form-field>
              <input matInput name="sellerLineShop" #sellerLineShop="ngModel" [(ngModel)]="dataForm.seller.lineShop" disabled>
            </mat-form-field>
          </div>

          <div class="col-span-4 md:col-span-12 ">
            <mat-label>IG</mat-label>
            <mat-form-field>
              <input matInput name="sellerIg" #sellerIg="ngModel" [(ngModel)]="dataForm.seller.ig">
            </mat-form-field>
          </div>

          <div class="col-span-4 md:col-span-12 ">
            <mat-label>S/N สินค้า</mat-label>
            <mat-form-field>
              <input matInput name="sellerSnProduct" #sellerSnProduct="ngModel" [(ngModel)]="dataForm.seller.snProduct" disabled>
            </mat-form-field>
          </div>

          <div class="col-span-4 md:col-span-12 ">
            <mat-label>แหล่งที่มา</mat-label>
            <mat-form-field>
              <input matInput name="source" #source="ngModel" [(ngModel)]="dataForm.source" disabled>
            </mat-form-field>
          </div>
<!--          <div class="col-span-4 md:col-span-12 ">-->
<!--            <mat-label>ค่าขนส่ง</mat-label>-->
<!--            <mat-form-field>-->
<!--              <input matInput name="shippingCost" #shippingCost="ngModel" [(ngModel)]="dataForm.shippingCost" disabled>-->
<!--            </mat-form-field>-->
<!--          </div>-->


        </div>
      </div>
    </div>
  </div>

  <div class="card card-table mb-6">
    <div class="card-body">
      <div class="table-wrap">
        <table class="tables ">
          <thead>
          <tr>
            <th>BOM</th>
            <th>Model</th>
            <th>Brand</th>
            <th>Main</th>
            <th>น้ำหนัก</th>
            <th>Color</th>
            <th>Year</th>
            <th>ราคาสินค้า</th>
            <th>มัดจำแม่ค้า</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td class="text-center">{{dataForm.productNo}}</td>
            <td class="text-center">{{dataForm.productName }}</td>
            <td class="text-center">{{dataForm.productBrandName}}</td>
            <td class="text-center">{{dataForm.productSize }}</td>
            <td class="text-center">{{dataForm.productWeight }}</td>
            <td class="text-center">{{dataForm.productColor }}</td>
            <td class="text-center">{{dataForm.productYear }}</td>
            <td class="text-center">{{dataForm.price | number : '1.2-2'}}</td>
            <td class="text-center">
              <div class="b-color-orange">{{dataForm.sellerDeposit | number : '1.2-2'}}</div>
            </td>

          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="card card-form-panel card-form-panel-blue mb-6">
    <div class="card-header ">
      <div class="card-title"> ข้อมูลการชำระเงิน</div>
    </div>
    <div class="card-body">
      <div class="grid grid-cols-12 gap-4 md:gap-2 mt-4 mb-4">


        <div class="col-span-4 md:col-span-12 ">
          <mat-label>วิธีชำระ</mat-label>
          <ng-select placeholder="เลือกวิธีชำระ" name="sellerPaymentMethod" #sellerPaymentMethod="ngModel" [(ngModel)]="dataForm.sellerPaymentMethod" appendTo="body" required>
            <ng-option *ngFor="let item of paymentMethods" [value]="item.value">{{item.name}}</ng-option>
          </ng-select>
        </div>

        <div class="col-span-4 md:col-span-12 ">
          <mat-label>ผู้รับเงิน</mat-label>
          <mat-form-field>
            <input matInput name="sellerPaymentPayee" #sellerPaymentPayee="ngModel" [(ngModel)]="dataForm.sellerPaymentPayee" required>
          </mat-form-field>
        </div>

        <div class="col-span-4 md:hidden"></div>

        <div class="col-span-4 md:col-span-12 ">
          <mat-label>เลขที่บัญชี</mat-label>
          <mat-form-field>
            <input matInput name="sellerPaymentAccountNumber" #sellerPaymentAccountNumber="ngModel" [(ngModel)]="dataForm.sellerPaymentAccountNumber" required>
          </mat-form-field>
        </div>

        <div class="col-span-4 md:col-span-12 ">
          <mat-label>ชื่อธนาคาร</mat-label>
          <mat-form-field>
            <input matInput name="sellerPaymentAccountName" #sellerPaymentAccountName="ngModel" [(ngModel)]="dataForm.sellerPaymentAccountName" required>
          </mat-form-field>
        </div>
        <div class="col-span-4 md:hidden"></div>

        <div class="col-span-4 md:col-span-12 ">
          <mat-label>จำนวนเงินสุทธิที่ต้องจ่าย</mat-label>
          <mat-form-field>
            <input class="!text-right" appCurrencyInputMask matInput name="sellerPaymentAmount" #sellerPaymentAmount="ngModel" [(ngModel)]="dataForm.sellerPaymentAmount" required>
          </mat-form-field>
        </div>


      </div>
    </div>
  </div>


  <div class="main-form-action text-right">
    <button type="submit" class="btn btn-submit">บันทึก</button>
    <button type="button" class="btn btn-back" (click)="onAction('back')">ยกเลิก</button>
  </div>

</form>