fix: status not update on mount

src/pages/05_quotation/QuotationForm.vue

@@ -604,6 +604,58 @@ onMounted(async () => {
 
   await assignToProductServiceList();
 
+  statusQuotationForm.value = [
+    {
+      title: 'ใบเสนอราคา',
+      status: getStatus(quotationFormData.value.quotationStatus, -1, -1),
+      handler: () => (view.value = View.Quotation),
+    },
+    {
+      title: 'ลูกค้าตอบรับ',
+      status: getStatus(quotationFormData.value.quotationStatus, 0, -1),
+      handler: () => (view.value = View.Accepted),
+    },
+    {
+      title: 'ใบแจ้งหนี้',
+      status: getStatus(quotationFormData.value.quotationStatus, 4, 0),
+      handler: () => {
+        quotationFormData.value.payCondition === 'Full' ||
+        quotationFormData.value.payCondition === 'BillFull'
+          ? View.Invoice
+          : View.InvoicePre;
+      },
+    },
+    {
+      title: 'ชำระเงิน',
+      status: getStatus(quotationFormData.value.quotationStatus, 4, 1),
+      handler: () => {
+        view.value =
+          quotationFormData.value.payCondition === 'Full' ||
+          quotationFormData.value.payCondition === 'BillFull'
+            ? View.Payment
+            : View.PaymentPre;
+      },
+    },
+    {
+      title: 'ใบเสร็จรับเงิน',
+      status: getStatus(quotationFormData.value.quotationStatus, 4, 1),
+      handler: () => {
+        view.value =
+          quotationFormData.value.payCondition === 'Full' ||
+          quotationFormData.value.payCondition === 'BillFull'
+            ? View.Receipt
+            : View.ReceiptPre;
+      },
+    },
+    {
+      title: 'เสร็จสิ้น',
+      status: getStatus(quotationFormData.value.quotationStatus, 5, 4),
+      handler: () => {
+        view.value = View.Complete;
+      },
+    },
+  ];
+
   pageState.isLoaded = true;
 });
 
@@ -714,57 +766,7 @@ function getStatus(
 
 const statusQuotationForm = ref<
   { title: string; status: 'done' | 'doing' | 'waiting'; handler: () => void }[]
->([
+>([]);
-  {
-    title: 'ใบเสนอราคา',
-    status: getStatus(quotationFormData.value.quotationStatus, 0, 0),
-    handler: () => (view.value = View.Quotation),
-  },
-  {
-    title: 'ลูกค้าตอบรับ',
-    status: getStatus(quotationFormData.value.quotationStatus, 1, 0),
-    handler: () => (view.value = View.Accepted),
-  },
-  {
-    title: 'ใบแจ้งหนี้',
-    status: getStatus(quotationFormData.value.quotationStatus, 4, 1),
-    handler: () => {
-      quotationFormData.value.payCondition === 'Full' ||
-      quotationFormData.value.payCondition === 'BillFull'
-        ? View.Invoice
-        : View.InvoicePre;
-    },
-  },
-  {
-    title: 'ชำระเงิน',
-    status: getStatus(quotationFormData.value.quotationStatus, 4, 1),
-    handler: () => {
-      view.value =
-        quotationFormData.value.payCondition === 'Full' ||
-        quotationFormData.value.payCondition === 'BillFull'
-          ? View.Payment
-          : View.PaymentPre;
-    },
-  },
-  {
-    title: 'ใบเสร็จรับเงิน',
-    status: getStatus(quotationFormData.value.quotationStatus, 4, 1),
-    handler: () => {
-      view.value =
-        quotationFormData.value.payCondition === 'Full' ||
-        quotationFormData.value.payCondition === 'BillFull'
-          ? View.Receipt
-          : View.ReceiptPre;
-    },
-  },
-  {
-    title: 'เสร็จสิ้น',
-    status: getStatus(quotationFormData.value.quotationStatus, 5, 4),
-    handler: () => {
-      view.value = View.Complete;
-    },
-  },
-]);
 
 enum View {
   Quotation,