From 317aadb0f78063e71a3d88899f6660fdc95201d3 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 31 Oct 2024 13:05:10 +0700
Subject: [PATCH] fix: quotation custom split

---
 src/components/05_quotation/ProductItem.vue  | 29 +++++++++++++++++++-
 src/pages/05_quotation/QuotationForm.vue     |  6 ++++
 src/pages/05_quotation/QuotationFormInfo.vue | 29 +++++++++++---------
 3 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/src/components/05_quotation/ProductItem.vue b/src/components/05_quotation/ProductItem.vue
index 3ca36321..aa48269a 100644
--- a/src/components/05_quotation/ProductItem.vue
+++ b/src/components/05_quotation/ProductItem.vue
@@ -13,6 +13,7 @@ import { useConfigStore } from 'stores/config';
 const props = defineProps<{
   readonly?: boolean;
   agentPrice: boolean;
+  installmentInput?: boolean;
   employeeRows?: {
     foreignRefNo: string;
     employeeName: string;
@@ -228,7 +229,20 @@ watch(
           flat
           bordered
           hide-pagination
-          :columns="columns"
+          :columns="
+            installmentInput
+              ? [
+                  ...columns.slice(0, 1),
+                  {
+                    name: 'periodNo',
+                    align: 'left',
+                    label: 'quotation.periodNo',
+                    field: (v) => v.product.code,
+                  },
+                  ...columns.slice(1),
+                ]
+              : columns
+          "
           :rows="item.product"
           class="full-width"
           :no-data-label="$t('general.noDataTable')"
@@ -248,6 +262,19 @@ watch(
           <template #body="props">
             <q-tr>
               <q-td class="text-center">{{ props.rowIndex + 1 }}</q-td>
+              <q-td v-if="installmentInput">
+                <q-input
+                  v-model="props.row.installmentNo"
+                  :readonly
+                  :bg-color="readonly ? 'transparent' : ''"
+                  dense
+                  min="0"
+                  outlined
+                  input-class="text-right"
+                  type="number"
+                  style="width: 60px"
+                ></q-input>
+              </q-td>
               <q-td>{{ props.row.product.code }}</q-td>
               <q-td style="width: 100%">
                 <q-avatar class="q-mr-sm" size="md">
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 54ca5ab4..07b5e36d 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -113,6 +113,7 @@ const { data: config } = storeToRefs(configStore);
 const refSelectZoneEmployee = ref<InstanceType<typeof SelectZone>>();
 const mrz = ref<Awaited<ReturnType<typeof parseResultMRZ>>>();
 const toggleWorker = ref(true);
+const tempPaySplitCount = ref(0);
 const currentQuotationId = ref<string | undefined>(undefined);
 const date = ref();
 const preSelectedWorker = ref<Employee[]>([]);
@@ -598,6 +599,7 @@ function convertToTable(nodes: Node[]) {
   quotationFormData.value.paySplitCount = Math.max(
     ...list.map((v) => v.installmentNo || 0),
   );
+  tempPaySplitCount.value = quotationFormData.value.paySplitCount;
 
   list.forEach((v) => {
     v.amount = Math.max(selectedWorker.value.length, 1);
@@ -1168,6 +1170,9 @@ const view = ref<View>(View.Quotation);
               </template>
               <div class="surface-1 q-pa-md full-width">
                 <ProductItem
+                  :installment-input="
+                    quotationFormData.payCondition === 'SplitCustom'
+                  "
                   :readonly="readonly"
                   :agent-price="agentPrice"
                   :employee-rows="
@@ -1223,6 +1228,7 @@ const view = ref<View>(View.Quotation);
                   <QuotationFormInfo
                     :view="view"
                     :installment-no="selectedInstallmentNo"
+                    :pay-split-fixed="tempPaySplitCount"
                     v-model:pay-type="quotationFormData.payCondition"
                     v-model:pay-bank="payBank"
                     v-model:pay-split-count="quotationFormData.paySplitCount"
diff --git a/src/pages/05_quotation/QuotationFormInfo.vue b/src/pages/05_quotation/QuotationFormInfo.vue
index 0f3610fc..f46ddd95 100644
--- a/src/pages/05_quotation/QuotationFormInfo.vue
+++ b/src/pages/05_quotation/QuotationFormInfo.vue
@@ -25,10 +25,11 @@ enum View {
   Complete,
 }
 
-defineProps<{
+const props = defineProps<{
   readonly?: boolean;
   quotationNo?: string;
   installmentNo?: number[];
+  paySplitFixed?: number;
   view?: View;
   data?: {
     total: number;
@@ -87,6 +88,10 @@ const payTypeOption = computed(() => [
     value: 'Split',
     label: t('quotation.type.installmentsCash'),
   },
+  {
+    value: 'SplitCustom',
+    label: t('quotation.type.installmentsCustomCash'),
+  },
 ]);
 const amount4Show = ref<string[]>([]);
 
@@ -160,12 +165,8 @@ function calculateInstallments(param: {
 watch(
   () => payType.value,
   (v) => {
-    if (!payType.value) return;
-    if (v === 'Split' || v === 'BillSplit') {
-      if (paySplitCount.value === 0) paySplitCount.value = 1;
-    } else {
-      paySplitCount.value = 0;
-      paySplit.value = [];
+    if (v === 'Split' && props.paySplitFixed) {
+      paySplitCount.value = props.paySplitFixed;
     }
   },
 );
@@ -177,8 +178,9 @@ watch(
       paySplitCount.value === 0 ||
       !paySplitCount.value ||
       !summaryPrice.value.finalPrice
-    )
+    ) {
       return;
+    }
     calculateInstallments({ newCount: newCount || 0, oldCount: oldCount || 0 });
   },
   { deep: true },
@@ -218,7 +220,7 @@ watch(
 
             <div
               class="col-6"
-              v-if="payType === 'Split' || payType === 'BillSplit'"
+              v-if="payType === 'Split' || payType === 'SplitCustom'"
             >
               <div class="row full-width items-center justify-between q-py-xs">
                 <div class="column">
@@ -239,7 +241,7 @@ watch(
                 </div>
                 <q-input
                   v-model="paySplitCount"
-                  :readonly
+                  :readonly="readonly || payType === 'Split'"
                   class="col-3"
                   type="number"
                   dense
@@ -252,12 +254,12 @@ watch(
           </section>
 
           <section
-            v-if="payType === 'Split' || payType === 'BillSplit'"
+            v-if="payType === 'Split' || payType === 'SplitCustom'"
             class="col-12 text-caption"
             style="padding-left: 20px"
           >
             <template
-              v-for="(period, i) in !!installmentNo
+              v-for="(period, i) in installmentNo?.length > 0
                 ? paySplit.filter((value) => installmentNo?.includes(value.no))
                 : paySplit"
               :key="period.no"
@@ -268,7 +270,7 @@ watch(
               >
                 {{ `${$t('quotation.periodNo')} ${i + 1}` }}
                 <q-input
-                  :readonly
+                  :readonly="readonly || payType === 'Split'"
                   class="col q-mx-sm"
                   :label="$t('quotation.amount')"
                   :model-value="commaInput(period.amount.toString())"
@@ -323,6 +325,7 @@ watch(
         </div>
       </div>
     </div>
+
     <div class="col">
       <div class="bordered-b q-px-md q-py-sm row bg-color-light items-center">
         <div class="icon-wrapper bg-color q-mr-sm">