refactor: bind quotationFormInfo & cal installment

src/pages/05_quotation/QuotationForm.vue

@@ -73,16 +73,21 @@ const preSelectedWorker = ref<Employee[]>([]);
 const selectedWorker = ref<Employee[]>([]);
 const workerList = ref<Employee[]>([]);
 
-const documentReceivePoint = ref('');
-const paySplitCount = ref(1);
+const agentPrice = ref(false);
+const summaryPrice = ref<{
+  totalPrice: number;
+  totalDiscount: number;
+  vat: number;
+  finalPrice: number;
+}>({
+  totalPrice: 0,
+  totalDiscount: 0,
+  vat: 0,
+  finalPrice: 0,
+});
+
 const quotationNo = ref('');
-const workName = ref('');
-const contactor = ref('');
-const telephone = ref('');
-const dueDate = ref('');
-const payType = ref('');
 const payBank = ref('');
-const actor = ref('');
 
 const pageState = reactive({
   hideStat: false,
@@ -153,7 +158,6 @@ async function triggerSelectEmployeeDialog() {
 
 function triggerProductServiceDialog() {
   pageState.productServiceModal = true;
-  // TODO: form and state controll
 }
 
 function toggleDeleteProduct(index: number) {
@@ -206,29 +210,7 @@ function changeMode(mode: string) {
 }
 
 onMounted(async () => {
-  const ret = await productServiceStore.fetchListProductService({
-    page: 1,
-    pageSize: 9999,
-  });
-  if (ret) productGroup.value = ret.result;
-
-  const urlParams = new URLSearchParams(window.location.search);
-  const queryDate = urlParams.get('date');
-  date.value = queryDate && new Date(Number(queryDate));
-  branchId.value = urlParams.get('branchId') || '';
-  quotationFormData.value.customerBranchId =
-    urlParams.get('customerBranchId') || '';
-
-  const resultOption = await fetch('/option/option.json');
-  const rawOption = await resultOption.json();
-  if (locale.value === 'eng') optionStore.globalOption = rawOption.eng;
-  if (locale.value === 'tha') optionStore.globalOption = rawOption.tha;
-
-  const retEmp = await customerStore.fetchBranchEmployee(
-    quotationFormData.value.customerBranchId,
-  );
-  if (retEmp) workerList.value = retEmp.data.result;
-
+  // get language
   const getCurLang = localStorage.getItem('currentLanguage');
   if (getCurLang === 'English') {
     locale.value = 'eng';
@@ -239,6 +221,7 @@ onMounted(async () => {
     setLocale('th');
   }
 
+  // get theme
   const getCurTheme = localStorage.getItem('currentTheme');
   if (
     getCurTheme === 'light' ||
@@ -249,6 +232,35 @@ onMounted(async () => {
   } else {
     changeMode('light');
   }
+
+  // get query string
+  const urlParams = new URLSearchParams(window.location.search);
+  branchId.value = urlParams.get('branchId') || '';
+
+  const price = urlParams.get('agentPrice');
+  agentPrice.value = price === 'true' ? true : false;
+
+  date.value = Date.now();
+
+  quotationFormData.value.customerBranchId =
+    urlParams.get('customerBranchId') || '';
+
+  // fetch option
+  const resultOption = await fetch('/option/option.json');
+  const rawOption = await resultOption.json();
+  if (locale.value === 'eng') optionStore.globalOption = rawOption.eng;
+  if (locale.value === 'tha') optionStore.globalOption = rawOption.tha;
+
+  const ret = await productServiceStore.fetchListProductService({
+    page: 1,
+    pageSize: 9999,
+  });
+  if (ret) productGroup.value = ret.result;
+
+  const retEmp = await customerStore.fetchBranchEmployee(
+    quotationFormData.value.customerBranchId,
+  );
+  if (retEmp) workerList.value = retEmp.data.result;
 });
 </script>
 
@@ -388,8 +400,10 @@ onMounted(async () => {
             </template>
             <div class="surface-1 q-pa-md full-width">
               <ProductItem
+                :agent-price="agentPrice"
                 @delete="toggleDeleteProduct"
                 v-model:rows="productServiceList"
+                v-model:summary-price="summaryPrice"
               />
             </div>
           </q-expansion-item>
@@ -450,17 +464,22 @@ onMounted(async () => {
         }"
       >
         <QuotationFormInfo
+          v-model:urgent="quotationFormData.urgent"
           v-model:quotation-no="quotationNo"
-          v-model:actor="actor"
-          v-model:work-name="workName"
-          v-model:contactor="contactor"
-          v-model:telephone="telephone"
-          v-model:document-receive-point="documentReceivePoint"
-          v-model:due-date="dueDate"
-          v-model:pay-type="payType"
+          v-model:actor="quotationFormData.actorName"
+          v-model:work-name="quotationFormData.workName"
+          v-model:contactor="quotationFormData.contactName"
+          v-model:telephone="quotationFormData.contactTel"
+          v-model:document-receive-point="
+            quotationFormData.documentReceivePoint
+          "
+          v-model:due-date="quotationFormData.dueDate"
+          v-model:pay-type="quotationFormData.payCondition"
           v-model:pay-bank="payBank"
-          v-model:pay-split-count="paySplitCount"
+          v-model:pay-split-count="quotationFormData.paySplitCount"
+          v-model:pay-split="quotationFormData.paySplit"
           :readonly
+          v-model:summary-price="summaryPrice"
         />
       </div>
     </article>