From 5c867a496db151c5e3a57538d0fdf95f18d7d2fd Mon Sep 17 00:00:00 2001
From: net <net@chamomind.local>
Date: Tue, 14 Oct 2025 14:45:39 +0700
Subject: [PATCH] fix: #242

---
 src/pages/05_quotation/PaymentForm.vue | 199 ++++++++++++++-----------
 src/pages/12_debit-note/FormPage.vue   |   5 +-
 2 files changed, 112 insertions(+), 92 deletions(-)

diff --git a/src/pages/05_quotation/PaymentForm.vue b/src/pages/05_quotation/PaymentForm.vue
index 04c8d3a7..cf3d7c63 100644
--- a/src/pages/05_quotation/PaymentForm.vue
+++ b/src/pages/05_quotation/PaymentForm.vue
@@ -661,96 +661,115 @@ onMounted(async () => {
             </template>
 
             <!-- วิธีการรับชำระ -->
-            <section
-              class="q-px-md q-py-xs text-weight-medium row items-center"
-              style="background-color: hsla(var(--info-bg) / 0.1)"
-            >
-              {{ $t('quotation.receiptDialog.paymentMethod') }}
-            </section>
-            <div
-              class="surface-2 q-px-md q-py-sm row q-col-gutter-sm items-center"
-            >
-              <SelectInput
-                id="input-payment-channel"
-                for="input-payment-channel"
-                :readonly="
-                  readonly ||
-                  (!formPaymentMethod[i].isEdit && !!payment.channel)
-                "
-                v-model="formPaymentMethod[i].channel"
-                class="col-md-2 col-6"
-                :option="[
-                  {
-                    label: $t('creditNote.label.Cash'),
-                    value: 'Cash',
-                  },
-                  {
-                    label: $t('creditNote.label.BankTransfer'),
-                    value: 'BankTransfer',
-                  },
-                ]"
-                :label="$t('quotation.receiptDialog.paymentMethod')"
-                @update:model-value="
-                  () => {
-                    if (formPaymentMethod[i].channel === 'Cash') {
-                      formPaymentMethod[i].reference = null;
-                      formPaymentMethod[i].account = null;
-                    }
-                  }
-                "
-              />
-              <q-input
-                v-if="formPaymentMethod[i].channel === 'BankTransfer'"
-                dense
-                outlined
-                class="col-md-3 col-6"
-                v-model="formPaymentMethod[i].reference"
-                :readonly="
-                  readonly ||
-                  (!formPaymentMethod[i].isEdit && !!payment.channel)
-                "
-                :label="$t('quotation.refNo')"
-              />
-              <SelectInput
-                v-if="formPaymentMethod[i].channel === 'BankTransfer'"
-                id="select-payment-account"
-                for="select-payment-account"
-                :readonly="
-                  readonly ||
-                  (!formPaymentMethod[i].isEdit && !!payment.channel)
-                "
-                v-model="formPaymentMethod[i].account"
-                class="col"
-                :option="accountOpt"
-                :label="$t('quotation.bankAccount')"
-              />
-              <div class="q-ml-auto">
-                <UndoButton
-                  v-if="formPaymentMethod[i].isEdit"
-                  icon-only
-                  @click="
-                    () => {
-                      formPaymentMethod[i].isEdit = false;
-                      formPaymentMethod[i].channel = payment.channel;
-                      formPaymentMethod[i].reference = payment.reference;
-                      formPaymentMethod[i].account = payment.account;
-                    }
-                  "
-                />
-                <SaveButton
-                  v-if="!payment.channel || formPaymentMethod[i].isEdit"
-                  icon-only
-                  @click="triggerSubmit(payment.id)"
-                />
-                <EditButton
-                  v-if="
-                    payment.channel && formPaymentMethod[i].isEdit === false
-                  "
-                  icon-only
-                  @click="formPaymentMethod[i].isEdit = true"
-                />
-              </div>
-            </div>
+            <template v-if="payment.paymentStatus === 'PaymentSuccess'">
+              <section
+                class="q-px-md q-py-xs text-weight-medium row items-center"
+                style="background-color: hsla(var(--info-bg) / 0.1)"
+              >
+                {{ $t('quotation.receiptDialog.paymentMethod') }}
+              </section>
+
+              <q-form
+                class="column full-height"
+                @submit.prevent
+                @submit="triggerSubmit(payment.id)"
+              >
+                <div
+                  class="surface-2 q-px-md q-py-sm row q-col-gutter-sm items-center"
+                >
+                  <SelectInput
+                    id="input-payment-channel"
+                    for="input-payment-channel"
+                    :readonly="
+                      readonly ||
+                      (!formPaymentMethod[i].isEdit && !!payment.channel)
+                    "
+                    v-model="formPaymentMethod[i].channel"
+                    class="col-md-2 col-6"
+                    :rules="[
+                      (val: string) => !!val || $t('form.error.required'),
+                    ]"
+                    :option="[
+                      {
+                        label: $t('creditNote.label.Cash'),
+                        value: 'Cash',
+                      },
+                      {
+                        label: $t('creditNote.label.BankTransfer'),
+                        value: 'BankTransfer',
+                      },
+                    ]"
+                    :label="$t('quotation.receiptDialog.paymentMethod')"
+                    @update:model-value="
+                      () => {
+                        if (formPaymentMethod[i].channel === 'Cash') {
+                          formPaymentMethod[i].reference = null;
+                          formPaymentMethod[i].account = null;
+                        }
+                      }
+                    "
+                  />
+                  <q-input
+                    v-if="formPaymentMethod[i].channel === 'BankTransfer'"
+                    dense
+                    outlined
+                    class="col-md-3 col-6"
+                    v-model="formPaymentMethod[i].reference"
+                    :readonly="
+                      readonly ||
+                      (!formPaymentMethod[i].isEdit && !!payment.channel)
+                    "
+                    :label="$t('quotation.refNo')"
+                    :rules="[
+                      (val: string) => !!val || $t('form.error.required'),
+                    ]"
+                    hide-bottom-space
+                  />
+                  <SelectInput
+                    v-if="formPaymentMethod[i].channel === 'BankTransfer'"
+                    id="select-payment-account"
+                    for="select-payment-account"
+                    :readonly="
+                      readonly ||
+                      (!formPaymentMethod[i].isEdit && !!payment.channel)
+                    "
+                    v-model="formPaymentMethod[i].account"
+                    class="col"
+                    :option="accountOpt"
+                    :label="$t('quotation.bankAccount')"
+                    :rules="[
+                      (val: string) => !!val || $t('form.error.required'),
+                    ]"
+                  />
+                  <div class="q-ml-auto">
+                    <UndoButton
+                      v-if="formPaymentMethod[i].isEdit"
+                      icon-only
+                      @click="
+                        () => {
+                          formPaymentMethod[i].isEdit = false;
+                          formPaymentMethod[i].channel = payment.channel;
+                          formPaymentMethod[i].reference = payment.reference;
+                          formPaymentMethod[i].account = payment.account;
+                        }
+                      "
+                    />
+                    <SaveButton
+                      v-if="!payment.channel || formPaymentMethod[i].isEdit"
+                      icon-only
+                      type="submit"
+                    />
+                    <EditButton
+                      v-if="
+                        payment.channel && formPaymentMethod[i].isEdit === false
+                      "
+                      icon-only
+                      @click="formPaymentMethod[i].isEdit = true"
+                    />
+                  </div>
+                </div>
+              </q-form>
+            </template>
 
             <!-- อัปโหลดใบเสร็จ -->
             <section
diff --git a/src/pages/12_debit-note/FormPage.vue b/src/pages/12_debit-note/FormPage.vue
index 8b78a267..f8ae0494 100644
--- a/src/pages/12_debit-note/FormPage.vue
+++ b/src/pages/12_debit-note/FormPage.vue
@@ -378,7 +378,7 @@ async function assignFormData(id: string) {
   selectedProductGroup.value =
     data.productServiceList[0]?.product.productGroup?.id || '';
 
-  ((previousValue = {
+  (previousValue = {
     id: data.id || undefined,
     debitNoteQuotationId: data.debitNoteQuotationId || undefined,
     productServiceList: structuredClone(
@@ -404,7 +404,7 @@ async function assignFormData(id: string) {
     quotationId: data.debitNoteQuotationId,
     remark: data.remark || undefined,
   }),
-    (currentFormData.value = structuredClone(previousValue)));
+    (currentFormData.value = structuredClone(previousValue));
 
   assignProductServiceList();
   assignSelectedWorker();
@@ -1139,6 +1139,7 @@ async function submitAccepted() {
           <PaymentForm
             v-if="view === QuotationStatus.PaymentPending"
             is-debit-note
+            :branch-id="quotationData?.registeredBranchId"
             :readonly="isRoleInclude(['sale', 'head_of_sale'])"
             :data="debitNoteData"
             @fetch-status="