refactor: bind quotationFormInfo & cal installment

src/pages/05_quotation/QuotationFormInfo.vue

@@ -5,6 +5,8 @@ import { selectFilterOptionRefMod } from 'src/stores/utils';
 import { onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import { formatNumberDecimal } from 'stores/utils';
+
 import AppBox from 'components/app/AppBox.vue';
 import DatePicker from 'src/components/shared/DatePicker.vue';
 import SelectInput from 'src/components/shared/SelectInput.vue';
@@ -24,6 +26,10 @@ defineProps<{
 
 const { t } = useI18n();
 
+const urgent = defineModel<boolean>('urgent', {
+  required: true,
+  default: false,
+});
 const quotationNo = defineModel<string>('quotationNo', { required: true });
 const actor = defineModel<string>('actor', { required: true });
 const workName = defineModel<string>('workName', { required: true });
@@ -32,35 +38,50 @@ const telephone = defineModel<string>('telephone', { required: true });
 const documentReceivePoint = defineModel<string>('documentReceivePoint', {
   required: true,
 });
-const dueDate = defineModel<string>('dueDate', { required: true });
-const payType = defineModel<string>('payType', { required: true });
-const paySplitCount = defineModel<number>('paySplitCount', {
-  required: true,
+const dueDate = defineModel<Date | string>('dueDate', { required: true });
+const payType = defineModel<'Full' | 'Split' | 'BillFull' | 'BillSplit'>(
+  'payType',
+  { required: true },
+);
+const paySplitCount = defineModel<number | null>('paySplitCount', {
   default: 1,
 });
 const payBank = defineModel<string>('payBank', { required: true });
+const paySplit = defineModel<
+  { no: number; date: string | Date | null; amount: number }[]
+>('paySplit', { required: true });
+const summaryPrice = defineModel<{
+  totalPrice: number;
+  totalDiscount: number;
+  vat: number;
+  finalPrice: number;
+}>('summaryPrice', {
+  required: true,
+  default: {
+    totalPrice: 0,
+    totalDiscount: 0,
+    vat: 0,
+    finalPrice: 0,
+  },
+});
 
 const optionStore = useOptionStore();
 
-// fullAmountCash
-// installmentsCash
-// fullAmountBill
-// installmentsBill
 const payTypeOpion = ref([
   {
-    value: 'fullAmountCash',
+    value: 'Full',
     label: t('quotation.type.fullAmountCash'),
   },
   {
-    value: 'installmentsCash',
+    value: 'Split',
     label: t('quotation.type.installmentsCash'),
   },
   {
-    value: 'fullAmountBill',
+    value: 'BillFull',
     label: t('quotation.type.fullAmountBill'),
   },
   {
-    value: 'installmentsBill',
+    value: 'BillSplit',
     label: t('quotation.type.installmentsBill'),
   },
 ]);
@@ -91,6 +112,50 @@ watch(
     );
   },
 );
+
+watch(
+  () => payType.value,
+  (v) => {
+    if (v === 'Split' || v === 'BillSplit') {
+      paySplitCount.value = 1;
+    } else {
+      paySplitCount.value = 0;
+    }
+  },
+);
+
+watch(
+  () => paySplitCount.value,
+  (newCount, oldCount) => {
+    if (newCount !== null && oldCount !== null) {
+      const totalAmount = summaryPrice.value.finalPrice;
+
+      if (newCount > oldCount) {
+        const installmentAmount = totalAmount / newCount;
+
+        paySplit.value.forEach((payment, index) => {
+          payment.amount = installmentAmount;
+        });
+
+        for (let i = oldCount; i < newCount; i++) {
+          paySplit.value.push({
+            no: i + 1,
+            date: null,
+            amount: installmentAmount,
+          });
+        }
+      } else if (newCount < oldCount) {
+        paySplit.value.splice(newCount, oldCount - newCount);
+
+        const installmentAmount = totalAmount / newCount;
+        paySplit.value.forEach((payment) => {
+          payment.amount = installmentAmount;
+        });
+      }
+    }
+  },
+  { deep: true },
+);
 </script>
 
 <template>
@@ -104,6 +169,13 @@ watch(
       <span class="text-weight-bold">
         {{ $t('general.information', { msg: $t('general.attachment') }) }}
       </span>
+
+      <q-checkbox
+        v-model="urgent"
+        class="q-ml-auto"
+        size="xs"
+        :label="$t('general.urgent')"
+      />
     </div>
 
     <div class="q-pa-sm">
@@ -198,9 +270,7 @@ watch(
           dense
           outlined
           class="col-12"
-          v-if="
-            payType === 'installmentsCash' || payType === 'installmentsBill'
-          "
+          v-if="payType === 'Split' || payType === 'BillSplit'"
         >
           <div class="row full-width items-center justify-between q-py-xs">
             <div class="column">
@@ -219,27 +289,27 @@ watch(
               dense
               outlined
               min="1"
+              @update:model-value="(i) => (paySplitCount = Number(i))"
             />
           </div>
         </q-field>
         <section
-          v-if="
-            payType === 'installmentsCash' || payType === 'installmentsBill'
-          "
+          v-if="payType === 'Split' || payType === 'BillSplit'"
           class="col-12 text-caption"
           style="padding-left: 20px"
         >
-          <template v-for="n in Number(paySplitCount)" :key="n">
+          <template v-for="(period, i) in paySplit" :key="period.no">
             <div
               class="row app-text-muted items-center"
-              :class="{ 'q-mb-sm': n !== Number(paySplitCount) }"
+              :class="{ 'q-mb-sm': i !== paySplit.length }"
             >
-              {{ `${$t('quotation.periodNo')} ${n}` }}
+              {{ `${$t('quotation.periodNo')} ${period.no}` }}
               <q-input
                 class="col q-mx-sm"
                 :label="$t('quotation.amount')"
-                model-value="5,000"
+                :model-value="formatNumberDecimal(period.amount, 2)"
                 dense
+                readonly
                 outlined
                 bg-color="input-border"
               >
@@ -248,24 +318,17 @@ watch(
                 </template>
               </q-input>
               <DatePicker
+                v-model="period.date"
                 class="col-5"
                 :label="$t('quotation.payDueDate')"
                 bg-color="input-border"
               />
-              <!-- <q-input
-                class="col"
-                :label="$t('quotation.amount')"
-                model-value="5,000"
-                dense
-                outlined
-                bg-color="input-border"
-              /> -->
             </div>
           </template>
         </section>
 
         <DatePicker
-          v-if="payType === 'fullAmountBill'"
+          v-if="payType === 'BillFull'"
           class="col-12"
           :label="$t('quotation.callDueDate')"
         />