Phet/mirror-cathay
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[init] init version

Browse Source
This commit is contained in:
Supichai Pothong
2023-10-10 03:58:47 +07:00
commit 73359d5f24
299 changed files with 55909 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/app/pages/contract/approved/contract-approved-routing.module.ts Normal file
View File

@@ -0,0 +1,28 @@
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { ContractApprovedIndexComponent } from "./index/contract-approved-index.component";
import { ContractApprovedDoComponent } from "./do/contract-approved-do.component";
import { ContractApprovedPdfComponent } from "./pdf/contract-approved-pdf.component";
const routes: Routes = [
{ path: "", component: ContractApprovedIndexComponent },
{ path: "list", component: ContractApprovedIndexComponent },
{ path: "list/:action", component: ContractApprovedIndexComponent },
{ path: "do/:action", component: ContractApprovedDoComponent },
{ path: "do/:action/:id", component: ContractApprovedDoComponent },
{ path: "pdf/:action/:id", component: ContractApprovedPdfComponent }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class RoutingModule {
}
export const RoutingComponents = [
ContractApprovedIndexComponent,
ContractApprovedDoComponent,
ContractApprovedPdfComponent
];

16
src/app/pages/contract/approved/contract-approved.module.ts Normal file
View File

@@ -0,0 +1,16 @@
import { NgModule } from '@angular/core';
import {RoutingComponents, RoutingModule} from './contract-approved-routing.module';
import {AppSharedModule} from "../../../app.shared";
import { NgOptimizedImage } from "@angular/common";
@NgModule({
declarations: [
...RoutingComponents,
],
imports: [
AppSharedModule,
RoutingModule,
NgOptimizedImage
]
})
export class ContractApprovedModule {}

694
src/app/pages/contract/approved/do/contract-approved-do.component.html Normal file
View File

@@ -0,0 +1,694 @@
<ul class="progressbar">
<li [ngClass]="{ 'active' : isTabs === 1}" (click)="isTabs = 1">รายละเอียดหลัก</li>
<li [ngClass]="{ 'active' : isTabs === 2}" (click)="isTabs = 2">การจัดผ่อน</li>
<li [ngClass]="{ 'active' : isTabs === 3}" (click)="isTabs = 3">ข้อมูลรับชำระเงิน</li>
</ul>
<form class="main-form" #ngf="ngForm" (ngSubmit)="onSubmit(ngf)">
<ng-container *ngIf="isTabs === 1">
<div class="card card-form-panel card-form-panel-blue mb-6">
<div class="card-header ">
<div class="card-title"> สัญญาเงินกู้ระหว่าง CM-FS. Co., Ltd. ("บริษัทฯ") กับ</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>เลขที่สัญญา/BOM</mat-label>
<mat-form-field>
<input matInput name="productNo" #productNo="ngModel" [(ngModel)]="dataForm.productNo" disabled >
</mat-form-field>
</div>
<!-- <div class="col-span-4 md:col-span-12 ">-->
<!-- <mat-label>ชื่อลูกค้า</mat-label>-->
<!-- <mat-form-field>-->
<!-- <div class="flex">-->
<!-- <input style="width: 75px; padding-right: 0 !important;" matInput name="customerPrefix" #customerPrefix="ngModel" [(ngModel)]="dataForm.customer.prefix" disabled>-->
<!-- <input style="padding-left: 0 !important;" matInput name="customerFirstName" #customerFirstName="ngModel" [(ngModel)]="dataForm.customer.firstName" disabled>-->
<!-- </div>-->
<!-- </mat-form-field>-->
<!-- </div>-->
<!-- <div class="col-span-4 md:col-span-12 ">-->
<!-- <mat-label>นามสกุล</mat-label>-->
<!-- <mat-form-field>-->
<!-- <input matInput name="customerLastName" #customerLastName="ngModel" [(ngModel)]="dataForm.customer.lastName" disabled>-->
<!-- </mat-form-field>-->
<!-- </div>-->
<!-- <div class="col-span-4 md:col-span-12 ">-->
<!-- <mat-label>เบอร์โทร</mat-label>-->
<!-- <mat-form-field>-->
<!-- <input matInput name="customerPhone" #customerPhone="ngModel" [(ngModel)]="dataForm.customer.phone" disabled>-->
<!-- </mat-form-field>-->
<!-- </div>-->
<!-- <div class="col-span-4 md:col-span-12 ">-->
<!-- <mat-label>เลขบัตรประชาชน</mat-label>-->
<!-- <mat-form-field>-->
<!-- <input matInput name="customerIdCard" #customerIdCard="ngModel" [(ngModel)]="dataForm.customer.idCard" disabled>-->
<!-- </mat-form-field>-->
<!-- </div>-->
<div class="col-span-4 md:col-span-12 ">
<mat-label>วันที่ทำสัญญา</mat-label>
<mat-form-field>
<input
matInput
name="contractDate"
#contractDate="ngModel"
(click)="dpkName.open()"
[(ngModel)]="dataForm.contractDate"
[matDatepicker]="dpkName"
readonly
disabled
/>
<mat-datepicker-toggle [for]="dpkName" matSuffix></mat-datepicker-toggle>
<mat-datepicker #dpkName></mat-datepicker>
</mat-form-field>
</div>
<div class="col-span-4 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" disabled>
<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" disabled>
</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" disabled>
</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" disabled>
<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" disabled>
</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" disabled>
</mat-form-field>
</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" disabled>
</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" disabled>
<span style="padding-left: 2px;">ใช้ที่อยู่ตามบัตรประชาชน</span>
</label>
<mat-form-field>
<input matInput name="deliveryAddress" #deliveryAddress="ngModel" [(ngModel)]="dataForm.customer.deliveryAddress" [disabled]="dataForm.customer.isAddress" disabled>
</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" disabled>
</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" 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="line" #line="ngModel" [(ngModel)]="dataForm.customer.line" 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="facebook" #facebook="ngModel" [(ngModel)]="dataForm.customer.facebook" 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="ig" #ig="ngModel" [(ngModel)]="dataForm.customer.ig" disabled>
</mat-form-field>
</div>
</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-2 md:col-span-12 ">
<mat-label>คำนำหน้า</mat-label>
<ng-select placeholder="เลือกคำนำหน้า" name="sellerprefix" #sellerprefix="ngModel" [(ngModel)]="dataForm.seller.prefix" appendTo="body" disabled>
<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="sellerfirstName" #sellerfirstName="ngModel" [(ngModel)]="dataForm.seller.firstName" disabled>
</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>
<ng-select placeholder="" name="sellergender" #sellergender="ngModel" [(ngModel)]="dataForm.seller.gender" appendTo="body" disabled>
<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="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" disabled>
</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 class="card card-table 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 mb-2">
<div class="col-span-3 md:col-span-12 ">
<mat-label>Condition</mat-label>
<ng-select placeholder="Condition" name="condition" #condition="ngModel" [(ngModel)]="dataForm.productCondition" disabled>
<ng-option *ngFor="let item of conditions" [value]="item">{{item}}</ng-option>
</ng-select>
</div>
<div class="col-span-3 md:col-span-12 ">
<mat-label>Year</mat-label>
<mat-form-field>
<input appNumberOnly matInput name="year" #year="ngModel" [(ngModel)]="dataForm.productYear" disabled>
</mat-form-field>
</div>
</div>
<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>
</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"> <div class="b-color-orange">{{dataForm.price | 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 flex items-center">
<div class="">รูปสินค้าจากลูกค้า</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" 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>
</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 equipment; 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-9 md:col-span-8 " >{{item}}</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="equipment.includes('อื่นๆ')">
<ng-container *ngFor="let item of equipmentOther; 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-9 md:col-span-8 " >{{item}}</div>
</div>
</div>
</ng-container>
</ng-container>
<div style="height: 20px;"></div>
</div>
</div>
</ng-container>
<ng-container *ngIf="isTabs === 2">
<div class="grid grid-cols-12 gap-4 md:gap-2 ">
<div class="col-span-6 md:col-span-12">
<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 form-input-list">
<div style="height: 20px;"></div>
<div class="grid grid-cols-12 gap-4 md:gap-2 items-center">
<div class="col-span-4 md:col-span-12 text-right md:text-left">
<label> วันที่เริ่มจัดผ่อน</label>
</div>
<div class="col-span-4 md:col-span-12">
<mat-form-field>
<input
matInput
name="startDate"
#startDate="ngModel"
(click)="dpkName.open()"
[(ngModel)]="dataForm.startDate"
[matDatepicker]="dpkName"
readonly
disabled
/>
<mat-datepicker-toggle [for]="dpkName" matSuffix></mat-datepicker-toggle>
<mat-datepicker #dpkName></mat-datepicker>
</mat-form-field>
</div>
<div class="col-span-4 md:col-span-12">
<div class="unit"></div>
</div>
</div>
<div class=" grid grid-cols-12 gap-4 md:gap-2 items-center">
<div class="col-span-4 md:col-span-12 text-right md:text-left">
<label> ราคา (Price)</label>
</div>
<div class="col-span-4 md:col-span-12">
<mat-form-field>
<input matInput appCurrencyInputMask name="price" #price="ngModel" [(ngModel)]="dataForm.price" disabled>
</mat-form-field>
</div>
<div class="col-span-4 md:col-span-12">
<div class="unit">บาท (THB)</div>
</div>
</div>
<div class=" grid grid-cols-12 gap-4 md:gap-2 items-center">
<div class="col-span-4 md:col-span-12 text-right md:text-left">
<label> มัดจำแม่ค้า</label>
</div>
<div class="col-span-4 md:col-span-12">
<mat-form-field>
<input matInput appCurrencyInputMask name="sellerDeposit" #sellerDeposit="ngModel" [(ngModel)]="dataForm.sellerDeposit" disabled>
</mat-form-field>
</div>
<div class="col-span-4 md:col-span-12">
<div class="unit">บาท (THB)</div>
</div>
</div>
<div class=" grid grid-cols-12 gap-4 md:gap-2 items-center">
<div class="col-span-4 md:col-span-12 text-right md:text-left">
<label> มัดจำ CMFS</label>
</div>
<div class="col-span-4 md:col-span-12">
<mat-form-field>
<input matInput appCurrencyInputMask name="deposit" #deposit="ngModel" [(ngModel)]="dataForm.deposit" disabled>
</mat-form-field>
</div>
<div class="col-span-4 md:col-span-12">
<div class="unit">บาท (THB)</div>
</div>
</div>
<div class=" grid grid-cols-12 gap-4 md:gap-2 items-center">
<div class="col-span-4 md:col-span-12 text-right md:text-left">
<label> เงินต้นคงเหลือ (Total)</label>
</div>
<div class="col-span-4 md:col-span-12">
<mat-form-field>
<input matInput appCurrencyInputMask name="principalBalanceTotal" #principalBalanceTotal="ngModel" [(ngModel)]="dataForm.principalBalanceTotal" disabled>
</mat-form-field>
</div>
<div class="col-span-4 md:col-span-12">
<div class="unit">บาท (THB)</div>
</div>
</div>
<div class=" grid grid-cols-12 gap-4 md:gap-2 items-center">
<div class="col-span-4 md:col-span-12 text-right md:text-left">
<label> ต้องการผ่อน (Term)</label>
</div>
<div class="col-span-4 md:col-span-12">
<mat-form-field>
<input matInput type="number" name="wantToInstallmentTerm" #wantToInstallmentTerm="ngModel" [(ngModel)]="dataForm.wantToInstallmentTerm" disabled>
</mat-form-field>
</div>
<div class="col-span-4 md:col-span-12">
<div class="unit">งวด</div>
</div>
</div>
<div style="height: 20px;"></div>
</div>
</div>
</div>
<div class="col-span-6 md:col-span-12">
<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 form-input-list">
<div style="height: 20px;"></div>
<div class=" grid grid-cols-12 gap-4 md:gap-2 items-center">
<div class="col-span-4 md:col-span-12 text-right md:text-left">
<label> มัดจำ CMFS Deposit</label>
</div>
<div class="col-span-4 md:col-span-12">
<mat-form-field>
<input matInput appCurrencyInputMask name="cmfsDeposit" #cmfsDeposit="ngModel" [(ngModel)]="dataForm.cmfsDeposit" disabled>
</mat-form-field>
</div>
<div class="col-span-4 md:col-span-12">
<div class="unit">บาท (THB)</div>
</div>
</div>
<div class=" grid grid-cols-12 gap-4 md:gap-2 items-center">
<div class="col-span-4 md:col-span-12 text-right md:text-left">
<label> หัก เงินมัดจำแม่ค้า </label>
</div>
<div class="col-span-4 md:col-span-12">
<mat-form-field>
<input matInput appCurrencyInputMask name="lessSellerDeposit" #lessSellerDeposit="ngModel" [(ngModel)]="dataForm.lessSellerDeposit" disabled>
</mat-form-field>
</div>
<div class="col-span-4 md:col-span-12">
<div class="unit">บาท (THB)</div>
</div>
</div>
<div class=" grid grid-cols-12 gap-4 md:gap-2 items-center">
<div class="col-span-4 md:col-span-12 text-right md:text-left">
<label> บวก Packing </label>
</div>
<div class="col-span-4 md:col-span-12">
<mat-form-field>
<input matInput appCurrencyInputMask name="plusPacking" #plusPacking="ngModel" [(ngModel)]="dataForm.plusPacking" disabled>
</mat-form-field>
</div>
<div class="col-span-4 md:col-span-12">
<div class="unit">บาท (THB)</div>
</div>
</div>
<div class=" grid grid-cols-12 gap-4 md:gap-2 items-center">
<div class="col-span-4 md:col-span-12 text-right md:text-left">
<label> บวก Luxury handbag </label>
</div>
<div class="col-span-4 md:col-span-12">
<mat-form-field>
<input matInput appCurrencyInputMask name="plusLuxuryHandbag" #plusLuxuryHandbag="ngModel" [(ngModel)]="dataForm.plusLuxuryHandbag" disabled>
</mat-form-field>
</div>
<div class="col-span-4 md:col-span-12">
<div class="unit">บาท (THB)</div>
</div>
</div>
<div class=" grid grid-cols-12 gap-4 md:gap-2 items-center">
<div class="col-span-4 md:col-span-12 text-right md:text-left">
<label> บวก Bank fee, Insurance , Storage</label>
</div>
<div class="col-span-4 md:col-span-12">
<mat-form-field>
<input matInput appCurrencyInputMask name="plusBankFee" #plusBankFee="ngModel" [(ngModel)]="dataForm.plusBankFee" disabled>
</mat-form-field>
</div>
<div class="col-span-4 md:col-span-12">
<div class="unit">บาท (THB)</div>
</div>
</div>
<div class=" grid grid-cols-12 gap-4 md:gap-2 items-center">
<div class="col-span-4 md:col-span-12 text-right md:text-left">
<label> ส่วนลด </label>
</div>
<div class="col-span-4 md:col-span-12">
<mat-form-field>
<input matInput appCurrencyInputMask name="discount" #discount="ngModel" [(ngModel)]="dataForm.discount" disabled>
</mat-form-field>
</div>
<div class="col-span-4 md:col-span-12">
<div class="unit">บาท (THB)</div>
</div>
</div>
<div class=" grid grid-cols-12 gap-4 md:gap-2 items-center">
<div class="col-span-4 md:col-span-12 text-right md:text-left">
<label> สรุปยอดโอน </label>
</div>
<div class="col-span-4 md:col-span-12">
<mat-form-field>
<input matInput appCurrencyInputMask name="transferSummary" #transferSummary="ngModel" [(ngModel)]="dataForm.transferSummary" disabled>
</mat-form-field>
</div>
<div class="col-span-4 md:col-span-12">
<div class="unit">บาท (THB)</div>
</div>
</div>
<div style="height: 10px;"></div>
</div>
</div>
</div>
</div>
<div class="card card-table mb-6">
<div class="card-body">
<div class="table-wrap" *ngIf="dataForm.quotationDetail?.[0]">
<table class="tables">
<thead>
<tr>
<th>งวดที่</th>
<th>กำหนดจ่ายวันที่ <br>Due date</th>
<th>เงินต้น <br>Principle</th>
<th>ดอกเบี้ย(บาท) <br>Interest Total</th>
<th>Bank fee, <br>Insurance ,Storage</th>
<th>รวมยอดจ่ายต่อเดือน <br>Total payment</th>
<th>เงินต้นคงเหลือ <br>Principle Total</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let item of dataForm.quotationDetail; let i = index">
<tr>
<td class="text-center">{{item.installment }}</td>
<td class="text-center">{{item.dueDate | date : 'dd/MM/YYYY'}}</td>
<td class="text-center">{{item.principle | number : '1.0-0'}}</td>
<td class="text-center">{{item.interestTotal | number : '1.0-0'}}</td>
<td class="text-center">{{item.fee | number : '1.0-0'}}</td>
<td class="text-center"><span class="b-color-green">{{item.totalPayment | number : '1.0-0'}}</span></td>
<td class="text-center"><span class="b-color-orange" *ngIf="item.principleTotal">{{item.principleTotal | number : '1.0-0'}}</span></td>
</tr>
</ng-container>
<tr>
<td colspan="2" class="text-right"><b>รวม</b></td>
<td class="text-center">{{dataForm.principleSum | number : '1.0-0'}}</td>
<td class="text-center">{{dataForm.interestTotalSum | number : '1.0-0'}}</td>
<td class="text-center">{{dataForm.feeSum | number : '1.0-0'}}</td>
<td class="text-center"><span class="b-color-green">{{dataForm.totalPaymentSum | number : '1.0-0'}}</span></td>
<td class="text-center"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="isTabs === 3">
<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-8 md:col-span-12 ">
<mat-label>ชื่อธนาคาร</mat-label>
<mat-form-field>
<input matInput name="productNo" #productNo="ngModel" [(ngModel)]="dataForm.contractBankName" disabled>
</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="contractAccountName" #contractAccountName="ngModel" [(ngModel)]="dataForm.contractAccountName" disabled>
</mat-form-field>
</div>
<div class="col-span-4 md:col-span-12 ">
<mat-label>เลขที่บัญชี</mat-label>
<mat-form-field>
<input matInput name="contractAccountNumber" #contractAccountNumber="ngModel" [(ngModel)]="dataForm.contractAccountNumber" disabled>
</mat-form-field>
</div>
</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-12 md:col-span-12 ">
<mat-form-field>
<textarea matInput [(ngModel)]="dataForm.contractDetail" name="contractDetail" #contractDetail="ngModel" placeholder="" disabled></textarea>
</mat-form-field>
</div>
</div>
</div>
</div>
</ng-container>
<div class="main-form-action text-right">
<ng-container *ngIf="dataForm.statusContract === 'pending' ">
<button type="button" class="btn btn-red" (click)="onSubmitCancel(ngf)">ไม่อนุมัติ</button>
<button type="submit" class="btn btn-submit">อนุมัติ</button>
</ng-container>
<button type="button" class="btn btn-back" (click)="onAction('back')">ยกเลิก</button>
</div>
</form>

187
src/app/pages/contract/approved/do/contract-approved-do.component.ts Normal file
View File

@@ -0,0 +1,187 @@
import { ChangeDetectorRef, Component, OnInit } from "@angular/core";
import {API, CONDITIONS, EAction, EText, GENDER, PREFIX, SOURCES, STORAGE} from "../../../../@config/app";
import { AppService } from "../../../../app.service";
import { lastValueFrom } from "rxjs";
import { BaseFormComponent } from "../../../../@common/base/base-form.component";
import { ActivatedRoute, Router } from "@angular/router";
import { IProduct } from "../../../../app.interface";
import {sortByProperty} from "../../../../@common/utils/OrderBy";
import {C} from "@angular/cdk/keycodes";
@Component({
selector: "app-appraisal-3rd-time-do",
templateUrl: "./contract-approved-do.component.html",
styleUrls: []
})
export class ContractApprovedDoComponent extends BaseFormComponent implements OnInit {
override dataForm: any = {};
dataView: IProduct = {};
auth: any = {};
title = "";
api: any = API;
storage: any = STORAGE;
attachments: any = [];
equipment: any = [];
equipmentOther: any = [];
settings: any = [];
masterProductUnit: any = [];
deviation: any = 0;
isTabs: any = 1;
prefixData = PREFIX;
genderData = GENDER;
conditions = CONDITIONS;
constructor(
public activatedRoute: ActivatedRoute,
public router: Router,
public changeDetectorRef: ChangeDetectorRef,
public appService: AppService
) {
super();
}
async ngOnInit() {
this.activatedRoute.params.subscribe(async params => {
this.ids = params["id"];
this.action = params["action"];
this.auth = this.appService.auth();
this.dataForm.customer = {};
this.dataForm.sellsr = {};
if (this.ids) await this.getData();
});
}
async onAction(action: string) {
const sweetalert = await lastValueFrom(this.appService.confirm(EAction.BACK));
if (!sweetalert.isConfirmed) return;
if (action === "back") return this.router.navigate(["/pages/contract/approved/list", this.action]);
return;
}
async getData() {
if (!this.ids) this.appService.message(EAction.INFO, EText.NO_DATA);
try {
this.dataForm = await lastValueFrom(this.appService.get(`${this.api.quotation}/getById/${this.ids}`));
this.attachments = this.dataForm.images ? this.dataForm.images?.split(",") : [];
this.equipment = this.dataForm.equipment ? this.dataForm.equipment?.split(",") : [];
this.equipmentOther = this.dataForm.equipmentOther ? this.dataForm.equipmentOther?.split(",") : [];
this.dataForm.deposit = Number(this.dataForm.deposit) + Number(this.dataForm.sellerDeposit2ndTime) + Number(this.dataForm.sellerDeposit3rdTime);
if (!this.dataForm.customerId) {
this.dataForm.customer = {};
this.dataForm.customer.prefix = this.dataForm.customerPrefix;
this.dataForm.customer.firstName = this.dataForm.customerFirstName;
this.dataForm.customer.lastName = this.dataForm.customerLastName;
this.dataForm.customer.phone = this.dataForm.customerPhone;
}
sortByProperty(this.dataForm.quotationDetail, 'installment', 'ASC');
this.dataForm.principleSum = 0
this.dataForm.interestTotalSum = 0
this.dataForm.feeSum = 0
this.dataForm.feeSum = 0
this.dataForm.totalPaymentSum = 0
this.dataForm.quotationDetail.map((item : any) => {
this.dataForm.principleSum += Number(item.principle)
this.dataForm.interestTotalSum += Number(item.interestTotal)
this.dataForm.feeSum += Number(item.fee)
this.dataForm.totalPaymentSum += Number(item.totalPayment)
})
this.dataForm.principleSum = Math.round(this.dataForm.principleSum);
this.dataForm.contractBankName = 'ธนาคารทหารไทยธนชาต จำกัด (มหาชน)';
this.dataForm.contractAccountName = 'บริษัท ซีเอ็ม เอฟเอส จำกัด';
this.dataForm.contractAccountNumber = '263-2-17778-4';
this.dataForm.contractDetail = 'ชำระเงินงวดอย่างน้อย ทุกเดือนตามวันและยอดขั้นต่ำตามตาราง โดยที่ไม่เสียค่าปรับ ทั้งนี้หากเกินกำหนด ผู้กู้ต้องเสียค่าดอกเบี้ยผิดนัดเพิ่มเติมวันละ 1,000 บาท (ไม่รวมค่าทวงถาม) หากขาดส่งเกินกว่า 60 วัน นับแต่วันผ่อนล่าสุดจะถือว่าผิดสัญญา โดยหากผู้กู้ติดสัญญาไม่ว่ากรณีใดๆ ผู้กู้ยินดีที่จะนำสังหาริมทรัพย์ที่ผู้กู้นำเงินที่กู้ไปซื้อเป็นค่าตอบแทนในการชำระหนี้สินส่วนที่เหลือโดยทันที';
this.changeDetectorRef.detectChanges();
} catch (err) {
this.appService.message(EAction.ERROR, EText.ERROR);
}
}
async onSubmitCancel(form: any) {
this.dataForm.isStatusContract = 'cancel';
await this.onSubmit(form)
}
async onSubmit(form: any) {
try {
// console.log(form);
// if (!form.valid) return false;
const sweetalert = await lastValueFrom(this.appService.confirm(EAction.CREATE));
if (!sweetalert.isConfirmed) return;
if (this.dataForm.isStatusContract) {
this.dataForm.statusContract = 'cancel';
this.dataForm.contractCancelDate = new Date();
this.dataForm.contractCancelBy = this.auth.id;
}
if (!this.dataForm.isStatusContract) {
this.dataForm.statusContract = 'approved';
this.dataForm.contractApprovedDate = new Date();
this.dataForm.contractApprovedBy = this.auth.id;
this.dataForm.statusWarehouse = 'warehouse';
}
this.dataForm.images = this.attachments?.[0] ? this.attachments.join(",") : null;
return await this.onUpdate();
} catch (e) {
console.log(e);
}
}
async onUpdate() {
try {
await lastValueFrom(this.appService.post(`${this.api.quotation}/update/${this.ids}`, this.dataForm));
await this.appService.message(EAction.SUCCESS, EText.UPDATE);
await this.router.navigate(["/pages/contract/approved/list", this.action]);
} catch (err) {
this.appService.message(EAction.ERROR, EText.ERROR);
}
}
async onAttachments($event: any, type: any) {
const file = $event.target.files[0];
if (!file) return;
const formData = new FormData();
formData.append("ref", type);
formData.append("file", file);
try {
const res = await lastValueFrom(this.appService.post(`${this.api.attachments}/products`, formData));
if (!this.attachments[0]) {
this.dataForm.coverImage = res.fileName;
}
this.attachments.push(res.fileName);
console.log(this.attachments, res);
this.changeDetectorRef.detectChanges();
} catch (e) {
this.appService.message(EText.ERROR);
}
}
async onRemoveAttachments(i: number, fileName: string) {
const sweetalert = await lastValueFrom(this.appService.confirm(EAction.DELETE));
if (!sweetalert.isConfirmed) return;
// await lastValueFrom(this.appService.delete(`${this.api.attachments}/deleteByName`, fileName));
this.attachments?.splice(i, 1);
if (!this.attachments[0]) {
this.dataForm.coverImage = null;
}
this.changeDetectorRef.detectChanges();
}
protected readonly SOURCES = SOURCES;
}

205
src/app/pages/contract/approved/index/contract-approved-index.component.html Normal file
View File

@@ -0,0 +1,205 @@
<div class="card card-table">
<div class="card-filter text-right">
<div class="card-filter-section grid grid-cols-12 gap-4 md:gap-2 items-center">
<div class="col-span-5 md:col-span-12 md:order-2">
<mat-form-field>
<i matTextPrefix class="bi bi-search"></i>
<input matInput name="keyword" #keyword="ngModel" [(ngModel)]="dataFilter.keyword" (ngModelChange)="onFilter($event)">
</mat-form-field>
</div>
<div class="col-span-7 md:col-span-12 md:order-1">
<button type="button" class="btn btn-export" (click)="onExport()">Export</button>
</div>
</div>
<div class="card-filter-section grid grid-cols-12 gap-4 items-center md:gap-2 ">
<div class="col-span-6 md:col-span-12">
<div class="tabs-btn">
<button type="button" class="btn" [ngClass]="{ 'active' : action === 'pending'}" (click)="onTabs('pending')">รออนุมัติ</button>
<button type="button" class="btn" [ngClass]="{ 'active' : action === 'approved'}" (click)="onTabs('approved')">อนุมัติแล้ว</button>
<button type="button" class="btn" [ngClass]="{ 'active' : action === 'cancel'}" (click)="onTabs('cancel')">ไม่อนุมัติ</button>
</div>
</div>
<div class="col-span-6 md:col-span-12 ">
<div class="flex w-full justify-end md:justify-start">
<div class="">จำนวนทั้งหมด {{totalItem}} รายการ</div>
<div class="pl-2 pr-2">|</div>
<div class="">ค้นหาจำนวน {{totalOfElement}} รายการ</div>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="table-wrap">
<table class="table table-main" mat-table [dataSource]="dataSource" matSort (matSortChange)="onSort($event)">
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<ng-container matColumnDef="quotationNo">
<th mat-header-cell *matHeaderCellDef class="" mat-sort-header>เลขที่ใบเสนอราคา</th>
<td mat-cell *matCellDef="let item" width="150" class="">{{item.quotationNo}}</td>
</ng-container>
<ng-container matColumnDef="customerFirstName">
<th mat-header-cell *matHeaderCellDef class="" mat-sort-header>ชื่อลูกค้า</th>
<td mat-cell *matCellDef="let item" width="150" class="">
<ng-container *ngIf="item.customerId"> {{item.customer?.prefix}}{{item.customer?.firstName}} {{item.customer?.lastName}}</ng-container>
<ng-container *ngIf="!item.customerId">{{item.customerFirstName}} {{item.customerLastName}}</ng-container>
</td>
</ng-container>
<ng-container matColumnDef="productNo">
<th mat-header-cell *matHeaderCellDef class="tac" mat-sort-header>BOM</th>
<td mat-cell *matCellDef="let item" width="150" class="">{{item.productNo}}</td>
</ng-container>
<ng-container matColumnDef="productName">
<th mat-header-cell *matHeaderCellDef class="tal">Model</th>
<td mat-cell *matCellDef="let item" class="" style="min-width: 220px;">{{item.productName }}</td>
</ng-container>
<ng-container matColumnDef="productBrandName">
<th mat-header-cell *matHeaderCellDef class="tal">Brand</th>
<td mat-cell *matCellDef="let item" class="" >{{item.productBrandName }}</td>
</ng-container>
<ng-container matColumnDef="productSize">
<th mat-header-cell *matHeaderCellDef class="tal">Main</th>
<td mat-cell *matCellDef="let item" class="" >{{item.productSize }}</td>
</ng-container>
<ng-container matColumnDef="productWeight">
<th mat-header-cell *matHeaderCellDef class="tal" >น้ำหนัก</th>
<td mat-cell *matCellDef="let item" class="">{{item.productWeight }}</td>
</ng-container>
<ng-container matColumnDef="productColor">
<th mat-header-cell *matHeaderCellDef class="tal">Color</th>
<td mat-cell *matCellDef="let item" class="" >{{item.productColor }}</td>
</ng-container>
<ng-container matColumnDef="productYear">
<th mat-header-cell *matHeaderCellDef class="tal">Year</th>
<td mat-cell *matCellDef="let item" class="" >{{item.productYear }}</td>
</ng-container>
<ng-container matColumnDef="userFullName">
<th mat-header-cell *matHeaderCellDef class="tal">ชื่อคนขาย</th>
<td mat-cell *matCellDef="let item" style="min-width: 200px;" >{{item.userFullName }}</td>
</ng-container>
<ng-container matColumnDef="price">
<th mat-header-cell *matHeaderCellDef class="tal" width="150" mat-sort-header>จำนวนเงิน</th>
<td mat-cell *matCellDef="let item" class="">
<div class="b-color-green"> {{item.price | number : '1.2-2'}}</div>
</td>
</ng-container>
<ng-container matColumnDef="deposit">
<th mat-header-cell *matHeaderCellDef class="tal" width="150" mat-sort-header>จำนวนมัดจำ</th>
<td mat-cell *matCellDef="let item" class="">
<div class="b-color-orange"> {{item.deposit | number : '1.2-2'}}</div>
</td>
</ng-container>
<ng-container matColumnDef="wantToInstallmentTerm">
<th mat-header-cell *matHeaderCellDef class="tac" width="150" mat-sort-header>ระยะเวลาผ่อน</th>
<td mat-cell *matCellDef="let item" class="tac">{{item.wantToInstallmentTerm }} งวด</td>
</ng-container>
<ng-container matColumnDef="createdDate">
<th mat-header-cell *matHeaderCellDef class="tac">วันที่บันทึก</th>
<td mat-cell *matCellDef="let item" class="tac">{{item.createdDate | date : 'dd/MM/YYYY'}}</td>
</ng-container>
<ng-container matColumnDef="contractApprovedDate">
<th mat-header-cell *matHeaderCellDef class="tac">วันที่อนุมัติ</th>
<td mat-cell *matCellDef="let item" class="tac">{{item.contractApprovedDate | date : 'dd/MM/YYYY'}}</td>
</ng-container>
<ng-container matColumnDef="contractCancelDate">
<th mat-header-cell *matHeaderCellDef class="tac">วันที่ไม่อนุมัติ</th>
<td mat-cell *matCellDef="let item" class="tac">{{item.contractCancelDate | date : 'dd/MM/YYYY'}}</td>
</ng-container>
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef class="tac">สถานะ</th>
<td mat-cell *matCellDef="let item" class="tac" style="min-width: 100px;">
<div *ngIf="item.status === 'paid' " class="status status-active">ชำระแล้ว</div>
<div *ngIf="item.status === 'pending'" class="status status-disabled">รอชำระ</div>
</td>
</ng-container>
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef class="tac" width="150" mat-sort-header>ประเภทการชำระ</th>
<td mat-cell *matCellDef="let item" class="tac">
<div *ngIf="item.type === 'deposit' " class="status-text status-deposit">ค่ามัดจำ</div>
<div *ngIf="item.type === 'installment'" class="status-text status-installment">ผ่อนสินค้า</div>
</td>
</ng-container>
<ng-container matColumnDef="paymentType">
<th mat-header-cell *matHeaderCellDef class="tac" width="150" mat-sort-header>ประเภทการชำระ</th>
<td mat-cell *matCellDef="let item" class="tac">
<div *ngIf="item.paymentType === 'deposit' " class="status-text status-deposit">ค่ามัดจำ</div>
<div *ngIf="item.paymentType === 'installment'" class="status-text status-installment">ผ่อนสินค้า</div>
</td>
</ng-container>
<ng-container matColumnDef="paymentMethod">
<th mat-header-cell *matHeaderCellDef class="tac" width="150" mat-sort-header>วิธีชำระ</th>
<td mat-cell *matCellDef="let item" class="tac">
<div *ngIf="item.paymentMethod === 'transfer' " class="status-text status-transfer">โอนเงิน</div>
<div *ngIf="item.paymentMethod === 'cash'" class="status-text status-cash">เงินสด</div>
</td>
</ng-container>
<ng-container matColumnDef="paymentAmountAll">
<th mat-header-cell *matHeaderCellDef class="tac" width="150" mat-sort-header>จำนวนเงิน</th>
<td mat-cell *matCellDef="let item" class="tac">
<div class="b-color-green">{{item.paymentAmountAll | number : '1.2-2'}}</div>
</td>
</ng-container>
<ng-container matColumnDef="contractBy">
<th mat-header-cell *matHeaderCellDef class="tac">พนักงานทำรายการ</th>
<td mat-cell *matCellDef="let item" class="tac">{{item?.userContractBy?.name}}</td>
</ng-container>
<ng-container matColumnDef="contractApprovedBy">
<th mat-header-cell *matHeaderCellDef class="tac">ผู้อนุมัติ</th>
<td mat-cell *matCellDef="let item" class="tac">{{item?.userApprovedBy?.name }}</td>
</ng-container>
<ng-container matColumnDef="contractCancelBy">
<th mat-header-cell *matHeaderCellDef class="tac">ผู้ไม่อนุมัติ</th>
<td mat-cell *matCellDef="let item" class="tac">{{item?.userCancelBy?.name }}</td>
</ng-container>
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef width="80">Action</th>
<td mat-cell *matCellDef="let item">
<div class="action flex justify-center">
<div class="item" *ngIf="item.statusContract === 'pending' " >
<i class="bi bi-pencil-square icon-edit" (click)="onAction('do', item.id)"></i>
</div>
<div class="item" *ngIf="['approved', 'cancel'].includes(item.statusContract) ">
<i class="bi bi-eye color-green" (click)="onAction('do', item.id)"></i>
</div>
<div class="item" *ngIf="['approved', 'cancel'].includes(item.statusContract) ">
<i class="bi bi-filetype-pdf color-main" (click)="onAction('pdf', item.id)"></i>
</div>
</div>
</td>
</ng-container>
</table>
<div *ngIf="dataSource?.length === 0" class="no-data"></div>
</div>
<mat-paginator [pageSizeOptions]="pageSizeOptions" showFirstLastButtons (page)="getData($event)"></mat-paginator>
</div>
</div>

125
src/app/pages/contract/approved/index/contract-approved-index.component.ts Normal file
View File

@@ -0,0 +1,125 @@
import { ChangeDetectorRef, Component, OnInit } from "@angular/core";
import { BaseListComponent } from "../../../../@common/base/base-list.component";
import { debounceTime, distinctUntilChanged, lastValueFrom, Subject } from "rxjs";
import { MatDialog } from "@angular/material/dialog";
import { AppService } from "../../../../app.service";
import { API, EAction, EStatusContract, EStatusQuotation, EText } from "../../../../@config/app";
import { ActivatedRoute, Router } from "@angular/router";
import generateParamsValue from "../../../../@common/utils/GenerateParamsValue";
@Component({
selector: "app-appraisal-3rd-time-index",
templateUrl: "./contract-approved-index.component.html",
styleUrls: []
})
export class ContractApprovedIndexComponent extends BaseListComponent implements OnInit {
pageTitle = "สัญญา";
action = "pending";
apiUrl: string = API.quotation;
api: any = API;
displayedColumns: string[] = [];
masterProductCategory: any = [];
masterProductBrand: any = [];
filterKeyword: Subject<string> = new Subject<string>();
constructor(
private dialog: MatDialog,
private router: Router,
public appService: AppService,
public activatedRoute: ActivatedRoute,
public changeDetectorRef: ChangeDetectorRef
) {
super();
this.filterKeyword.pipe(debounceTime(1000), distinctUntilChanged()).subscribe(model => {
this.getData();
});
}
async ngOnInit() {
this.activatedRoute.params.subscribe(async params => {
this.action = params["action"];
if (!this.action) this.router.navigate(["/pages/contract/approved/list", EStatusQuotation.PENDING]);
await this.getData();
});
}
async onTabs(action?: any) {
this.dataFilter = {};
return this.router.navigate(["/pages/contract/approved/list", action]);
}
onAction(action : any, id?: any) {
if (action === 'do') return this.router.navigate([`/pages/contract/approved/do/${this.action}`, id]);
if (action === 'pdf') return this.router.navigate([`/pages/contract/approved/pdf/${this.action}`, id]);
return;
}
async getData($event?: any) {
try {
this.dataSource = [];
this.dataFilter.step = 5;
this.dataFilter.statusContract = this.action;
let url = API.quotation;
if (this.action === EStatusContract.PENDING) {
url = API.quotation;
this.displayedColumns = ["action", "price", "wantToInstallmentTerm", "customerFirstName", "productNo", "productName", "productBrandName", "productSize", "productWeight", "productColor","contractBy", "createdDate"];
}
if (this.action === EStatusContract.APPROVED) {
url = API.quotation;
this.displayedColumns = ["action", "price", "wantToInstallmentTerm", "customerFirstName", "productNo", "productName", "productBrandName", "productSize", "productWeight", "productColor","contractBy", "contractApprovedBy", "contractApprovedDate"];
}
if (this.action === EStatusContract.CANCEL) {
url = API.quotation;
this.displayedColumns = ["action", "price", "wantToInstallmentTerm", "customerFirstName", "productNo", "productName", "productBrandName", "productSize", "productWeight", "productColor","contractBy", "contractCancelBy", "contractCancelDate"];
}
this.dataFilter.keywordColumn = "quotationNo,productNo,customerFirstName,customerLastName,price,productName";
const dataSource = await lastValueFrom(this.appService.get(this.setParams(url, $event)));
this.dataSource = this.setDataSource<any>(dataSource);
} catch (e) {
this.dataSource = [];
}
}
onFilter($event?: any) {
this.filterKeyword.next($event);
}
clearDate($event?: any) {
$event.stopPropagation();
this.dataFilter.createdDate = null;
}
async onSort($event: any) {
this.dataFilter.orderBy = $event.active;
this.dataFilter.sort = $event.direction;
await this.getData();
console.log($event);
}
async onDelete(ids: any) {
const sweetalert = await lastValueFrom(this.appService.confirm(EAction.DELETE));
if (!sweetalert.isConfirmed) return;
try {
await lastValueFrom(this.appService.delete(this.apiUrl, ids));
await this.appService.message(EAction.SUCCESS, EText.DELETE);
await this.getData(this.getCurrentPage());
} catch (err) {
this.appService.message(EAction.ERROR, EText.ERROR);
}
}
onExport() {
const filter = generateParamsValue(this.dataFilter);
const url = `${API.quotation}/export-contract-approved?${filter ? '&' + filter : '' }`;
window.open(url);
}
}

3
src/app/pages/contract/approved/pdf/contract-approved-pdf.component.html Normal file
View File

@@ -0,0 +1,3 @@
<mat-progress-bar *ngIf="!pdfView" mode="indeterminate"></mat-progress-bar>
<iframe *ngIf="pdfView" [src]="pdfView"></iframe>

114
src/app/pages/contract/approved/pdf/contract-approved-pdf.component.ts Normal file
View File

@@ -0,0 +1,114 @@
import { ChangeDetectorRef, Component, OnInit } from "@angular/core";
import { BaseListComponent } from "../../../../@common/base/base-list.component";
import { lastValueFrom } from "rxjs";
import { MatDialog } from "@angular/material/dialog";
import { AppService } from "../../../../app.service";
import { API, STORAGE } from "../../../../@config/app";
import { ActivatedRoute, Router } from "@angular/router";
import { DomSanitizer } from "@angular/platform-browser";
import { BaseFormComponent } from "../../../../@common/base/base-form.component";
import { IQuotation } from "../../../../@common/interface/Quotation";
import { format, parseISO } from "date-fns";
@Component({
selector: "app-contract-make-pdf-index",
templateUrl: "./contract-approved-pdf.component.html",
styleUrls: []
})
export class ContractApprovedPdfComponent extends BaseFormComponent implements OnInit {
pageTitle = "สัญญา";
apiUrl: string = API.quotation;
api: any = API;
dataView: any;
pdfView: any;
constructor(
public activatedRoute: ActivatedRoute,
public router: Router,
public changeDetectorRef: ChangeDetectorRef,
public appService: AppService,
private sanitizer: DomSanitizer
) {
super();
}
async ngOnInit() {
this.activatedRoute.params.subscribe(async params => {
this.ids = params["id"];
await this.getData();
});
}
async getData() {
try {
const quotation : IQuotation = await lastValueFrom(this.appService.get(`${this.api.quotation}/getById/${this.ids}`));
const startDate = quotation.startDate ? format(parseISO(quotation.startDate), "dd/MM/yyyy") : null;
const customerPrefix = quotation.customerPrefix ? quotation.customerPrefix : '';
const customerName = quotation.customerId ? `${quotation.customer?.prefix} ${quotation.customer?.firstName} ${quotation.customer?.lastName}` :
`${customerPrefix} ${quotation.customerFirstName} ${quotation.customerLastName}`;
const data = {
doc_no: quotation.quotationNo,
product_code: quotation.productNo,
customer_name: customerName,
first_name: quotation.customerFirstName,
last_name: quotation.customerLastName,
start_date: startDate,
phone_no: quotation.customerPhone,
picture: `${STORAGE.products}/${quotation.coverImage}`,
price: Number(quotation.price),
deposit: Number(quotation.deposit),
seller_deposit: Number(quotation.sellerDeposit),
cmfs_deposit: Number(quotation.cmfsDeposit),
total_balance: Number(quotation.principalBalanceTotal),
installment: Number(quotation.wantToInstallmentTerm),
packing: Number(quotation.plusPacking),
luxury_handbag_authentication: Number(quotation.plusLuxuryHandbag),
bankfee_insurance_storage: Number(quotation.plusBankFee),
transfer_amount: Number(quotation.transferSummary),
deduct_seller_deposit: Number(quotation.sellerDepositSum),
authenticity_verification: 0,
data: [],
total1: 0,
total2: 0,
total3: 0,
total4: 0
}
const quotationDetail: any = [];
quotation.quotationDetail?.map(item => {
const dueDate = item.dueDate ? format(parseISO(item.dueDate), "dd/MM/yyyy") : null;
const map = {
due_date: dueDate,
principle: Number(item.principle),
interest_total: Number(item.interestTotal),
bank_fee: Number(item.fee),
total_payment: Number(item.totalPayment),
principle_total: Number(item.principleTotal)
}
quotationDetail.push(map);
})
data.data = quotationDetail;
const pdf = await lastValueFrom(this.appService.post(`${this.api.installmentContractReport}/pdf`, data, { responseType: "arraybuffer" }));
const url = URL.createObjectURL(new Blob([pdf], { type: "application/pdf" }));
this.pdfView = this.sanitizer.bypassSecurityTrustResourceUrl(url);
} catch (e) {
console.log(e);
}
}
}