[init] init version
This commit is contained in:
@@ -0,0 +1,262 @@
|
||||
<form class="main-form" #ngf="ngForm" (ngSubmit)="onSubmit(ngf)">
|
||||
|
||||
|
||||
|
||||
<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 ">
|
||||
<div class="col-span-4 md:col-span-12 ">
|
||||
<mat-label>ค้นหาเลขบัตรประชาชน</mat-label>
|
||||
<ng-select placeholder="ค้นหาเลขบัตรประชาชน" name="filterIdCard" #filterIdCard="ngModel" [(ngModel)]="dataFilter.idCard" (ngModelChange)="onChangeFilter($event)" appendTo="body" >
|
||||
<ng-option *ngFor="let item of customer" [value]="item.idCard">{{item.idCard}} : {{item.prefix}} {{item.firstName}} {{item.lastName}}</ng-option>
|
||||
</ng-select>
|
||||
</div>
|
||||
<div class="col-span-8 md:hidden"></div>
|
||||
|
||||
<div class="col-span-2 md:col-span-12 ">
|
||||
<mat-label>คำนำหน้า</mat-label>
|
||||
<ng-select placeholder="เลือกคำนำหน้า" name="prefix" #prefix="ngModel" [(ngModel)]="dataForm.customer.prefix" appendTo="body" required>
|
||||
<ng-option *ngFor="let item of prefixData" [value]="item">{{item}}</ng-option>
|
||||
</ng-select>
|
||||
</div>
|
||||
<div class="col-span-4 md:col-span-12 ">
|
||||
<mat-label>ชื่อลูกค้า</mat-label>
|
||||
<mat-form-field>
|
||||
<input matInput name="firstName" #firstName="ngModel" [(ngModel)]="dataForm.customer.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="lastName" #lastName="ngModel" [(ngModel)]="dataForm.customer.lastName" >
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-span-2 md:col-span-12 ">
|
||||
<mat-label>เพศ</mat-label>
|
||||
<ng-select placeholder="เลือกเพศ" name="gender" #gender="ngModel" [(ngModel)]="dataForm.customer.gender" appendTo="body" >
|
||||
<ng-option *ngFor="let item of genderData" [value]="item">{{item}}</ng-option>
|
||||
</ng-select>
|
||||
</div>
|
||||
<div class="col-span-4 md:col-span-12 ">
|
||||
<mat-label>เบอร์โทร</mat-label>
|
||||
<mat-form-field>
|
||||
<input matInput name="phone" #phone="ngModel" [(ngModel)]="dataForm.customer.phone" >
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="col-span-4 md:col-span-12 ">
|
||||
<mat-label>เลขบัตรประชาชน</mat-label>
|
||||
<mat-form-field>
|
||||
<input matInput name="idCard" #idCard="ngModel" [(ngModel)]="dataForm.customer.idCard" required>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-span-4 md:col-span-12 ">
|
||||
<div style="height: 20px;"></div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<div class="">
|
||||
<input hidden type="file" accept="image/*" #idCardImages (change)="onAttachmentsIdCard($event, 'idcard')" />
|
||||
<button type="button" class="btn btn-icon-upload color-main" (click)="idCardImages.click()">
|
||||
<ng-container *ngIf="!dataForm.customer.idCardImage"> <i class="bi bi-plus-circle "></i> สำเนาบัตรประชาชน</ng-container>
|
||||
<ng-container *ngIf="dataForm.customer.idCardImage"> <i class="bi bi-pencil" matTooltip="แก้ไขสำเนาบัตรประชาชน"></i> </ng-container>
|
||||
</button>
|
||||
</div>
|
||||
<div style="padding-top: 4px;">
|
||||
<ng-container *ngIf="dataForm.customer.idCardImage">
|
||||
<div class="cursor-pointer" (click)="onAttachmentsView('images')"><i class="bi bi-search"></i> ดูสำเนาบัตรประชาชน</div></ng-container>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-span-8 md:hidden"></div>
|
||||
|
||||
<div class="col-span-12 md:col-span-12 ">
|
||||
<mat-label>ที่อยู่ตามบัตรประชาชน</mat-label>
|
||||
<mat-form-field>
|
||||
<input matInput name="address" #address="ngModel" [(ngModel)]="dataForm.customer.address" (ngModelChange)="onChangeAddress('address', $event)">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-12 ">
|
||||
<mat-label>ที่อยู่ในการจัดส่ง</mat-label>
|
||||
<label class="inline-flex items-center cursor-pointer select-none ml-2">
|
||||
<input type="checkbox" name="isAddress" [(ngModel)]="dataForm.customer.isAddress" (ngModelChange)="onChangeAddress('isAddress', $event)">
|
||||
<span style="padding-left: 2px;">ใช้ที่อยู่ตามบัตรประชาชน</span>
|
||||
</label>
|
||||
|
||||
<mat-form-field>
|
||||
<input matInput name="deliveryAddress" #deliveryAddress="ngModel" [(ngModel)]="dataForm.customer.deliveryAddress" [disabled]="dataForm.customer.isAddress">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-span-4 md:col-span-12 ">
|
||||
<mat-label>E-mail</mat-label>
|
||||
<mat-form-field>
|
||||
<input matInput name="email" #email="ngModel" [(ngModel)]="dataForm.customer.email">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-span-8 md:col-span-12 ">
|
||||
<mat-label>อาชีพ</mat-label>
|
||||
<mat-form-field>
|
||||
<input matInput name="occupation" #occupation="ngModel" [(ngModel)]="dataForm.customer.occupation">
|
||||
</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="line" #line="ngModel" [(ngModel)]="dataForm.customer.line">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-span-4 md:col-span-12 ">
|
||||
<mat-label>Facebook</mat-label>
|
||||
<mat-form-field>
|
||||
<input matInput name="facebook" #facebook="ngModel" [(ngModel)]="dataForm.customer.facebook">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-span-4 md:col-span-12 ">
|
||||
<mat-label>IG</mat-label>
|
||||
<mat-form-field>
|
||||
<input matInput name="ig" #ig="ngModel" [(ngModel)]="dataForm.customer.ig">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-right mt-4 ">
|
||||
<mat-checkbox name="depositChecked" #depositChecked="ngModel" [(ngModel)]="dataForm.depositChecked">ชำระเงินเพิ่ม</mat-checkbox>
|
||||
</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>Brand</th>
|
||||
<th>Model</th>
|
||||
<th>ราคาสินค้า</th>
|
||||
<th>จำนวนเงินมัดจำ</th>
|
||||
<th>ค่ามัดจำเพิ่ม</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<mat-form-field>
|
||||
<input matInput name="productNo" #productNo="ngModel" [(ngModel)]="dataForm.productNo" required>
|
||||
</mat-form-field>
|
||||
</td>
|
||||
<td class="text-center">{{dataForm.productBrandName}}</td>
|
||||
<td class="text-center">{{dataForm.productName }}</td>
|
||||
<td class="text-center">{{dataForm.price | number : '1.2-2'}}</td>
|
||||
<td class="text-center">
|
||||
<div class="b-color-orange">{{dataForm.deposit | number : '1.2-2'}}</div>
|
||||
</td>
|
||||
<td>
|
||||
<mat-form-field>
|
||||
<input matInput name="paymentAmount" #paymentAmount="ngModel" [(ngModel)]="dataForm.paymentAmount" [required]="dataForm.depositChecked" [disabled]="!dataForm.depositChecked">
|
||||
</mat-form-field>
|
||||
</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 flex items-center">
|
||||
<div class="">รูปสินค้าจากลูกค้า</div>
|
||||
|
||||
<div class="ml-4">
|
||||
<input hidden type="file" accept="image/*" #productImages (change)="onAttachments($event, 'products')" />
|
||||
<button type="button" class="btn btn-sm btn-success-o" (click)="productImages.click()">เพิ่มรูปภาพสินค้า</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="list-images">
|
||||
<div class=" grid grid-cols-12 gap-2 md:gap-2 items-center">
|
||||
<ng-container *ngFor="let item of attachments; let i = index">
|
||||
<div class="col-span-2 md:col-span-4">
|
||||
<div class="flex justify-center items-center list-images-item">
|
||||
<div class="list-images-action">
|
||||
<i *ngIf="dataForm.coverImage !== item" (click)="dataForm.coverImage = item"
|
||||
matTooltip="ใช้ทำเอกสาร" class="bi bi-star color-main cursor-pointer select-none"></i>
|
||||
<i *ngIf="dataForm.coverImage === item" class="bi bi bi-star-fill color-main cursor-pointer select-none"></i>
|
||||
<i (click)="onRemoveAttachments(i, item)" class="bi bi-x-circle color-red cursor-pointer select-none"></i>
|
||||
</div>
|
||||
<img src="{{storage.products}}/{{item}}" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-form-panel card-form-panel-blue mb-6">
|
||||
<div class="card-header ">
|
||||
<div class="card-title flex items-center">
|
||||
<div class="">อุปกรณ์</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<ng-container *ngFor="let item of equipmentData; let i = index">
|
||||
<div class="form-list">
|
||||
<div class="form-list-item grid grid-cols-12 gap-4 md:gap-2 items-center">
|
||||
<div class="col-span-1 md:col-span-2 text-right">
|
||||
<div *ngIf="i === 0" style="height: 25px;"></div>
|
||||
<input type="checkbox" name="isCheck-{{i}}" #isCheck="ngModel" [(ngModel)]="item.isCheck">
|
||||
</div>
|
||||
<div class="col-span-9 md:col-span-8 cursor-pointer select-none" (click)="item.isCheck = !item.isCheck">
|
||||
<div *ngIf="i === 0" style="height: 25px;"></div>
|
||||
{{item.name}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="isEquipmentOther()">
|
||||
<ng-container *ngFor="let item of equipmentOtherData; let i = index">
|
||||
<div class="form-list">
|
||||
<div class="form-list-item grid grid-cols-12 gap-4 md:gap-2 items-center">
|
||||
<div class="col-span-1 md:col-span-2 text-right">
|
||||
|
||||
</div>
|
||||
<div class="col-span-9 md:col-span-8 cursor-pointer select-none" >
|
||||
<mat-form-field>
|
||||
<input matInput name="equipmentOtherItem-{{i}}" #equipmentOtherItem="ngModel" [(ngModel)]="item.value" >
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-span-2 md:col-span-2 " >
|
||||
<i (click)="onAddEquipmentOther()" class="bi bi-plus-circle color-green cursor-pointer select-none mr-2"></i>
|
||||
<i (click)="onRemoveEquipmentOther(i)" class="bi bi-x-circle color-red cursor-pointer select-none"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
<div style="height: 40px;"></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>
|
||||
Reference in New Issue
Block a user