refactor: edit tab

src/pages/05_quotation/MainPage.vue

@@ -72,7 +72,7 @@ const pageState = reactive({
   gridView: true,
   total: 0,
 
-  currentTab: 'all',
+  currentTab: 'Issued',
   addModal: false,
   quotationModal: false,
   employeeModal: false,
@@ -227,7 +227,7 @@ onMounted(async () => {
       text: 'quotation.caption',
       i18n: true,
       handler: () => {
-        pageState.currentTab = 'all';
+        pageState.currentTab = 'Issued';
       },
     },
   ];
@@ -243,6 +243,8 @@ onMounted(async () => {
     const ret = await quotationStore.getQuotationList({
       page: quotationPage.value,
       pageSize: quotationPageSize.value,
+      status: 'Issued',
+      urgentFirst: true,
     });
 
     if (ret) {
@@ -257,20 +259,24 @@ onMounted(async () => {
 
 async function fetchQuotationList() {
   {
+    console.log(pageState.currentTab);
     const ret = await quotationStore.getQuotationList({
       page: quotationPage.value,
       pageSize: quotationPageSize.value,
-      payCondition:
+      status:
-        pageState.currentTab !== 'all'
+        pageState.currentTab !== 'Issued'
           ? (
               {
-                fullAmountCash: 'Full',
+                Accepted: 'Accepted',
-                installmentsCash: 'Split',
+                Expired: 'Expired',
-                installmentsCustomCash: 'SplitCustom',
+                Invoice: 'PaymentInProcess',
+                PaymentSuccess: 'PaymentSuccess',
+                ProcessComplete: 'ProcessComplete',
               } as const
             )[pageState.currentTab]
-          : undefined,
+          : 'Issued',
       query: pageState.inputSearch,
+      urgentFirst: true,
     });
 
     if (ret) {
@@ -331,15 +337,19 @@ async function storeDataLocal(id: string) {
         "
       >
         {{
-          pageState.currentTab === 'all'
+          pageState.currentTab === 'Issued'
-            ? pageState.total
+            ? quotationStats.issued
-            : pageState.currentTab === 'fullAmountCash'
+            : pageState.currentTab === 'Accepted'
-              ? quotationStats.full
+              ? quotationStats.accepted
-              : pageState.currentTab === 'installmentsCash'
+              : pageState.currentTab === 'Expired'
-                ? quotationStats.split
+                ? quotationStats.expired
-                : pageState.currentTab === 'installmentsCustomCash'
+                : pageState.currentTab === 'Invoice'
-                  ? quotationStats.splitCustom
+                  ? quotationStats.paymentInProcess
-                  : 0
+                  : pageState.currentTab === 'PaymentSuccess'
+                    ? quotationStats.paymentSuccess
+                    : pageState.currentTab === 'ProcessComplete'
+                      ? quotationStats.processComplete
+                      : 0
         }}
       </q-badge>
       <q-btn
@@ -364,30 +374,49 @@ async function storeDataLocal(id: string) {
             :branch="[
               {
                 icon: 'mdi-cash',
-                count: quotationStats.full,
+                count: quotationStats.issued,
-                label: 'quotation.type.fullAmountCash',
+                label: 'quotation.status.Issued',
-                color: 'red',
+                color: 'orange',
-                hidden:
+                hidden: pageState.currentTab !== 'Issued',
-                  pageState.currentTab !== 'all' &&
-                  pageState.currentTab !== 'fullAmountCash',
               },
               {
                 icon: 'mdi-hand-coin-outline',
-                count: quotationStats.split,
+                count: quotationStats.accepted,
-                label: 'quotation.type.installmentsCash',
+                label: 'quotation.status.Accepted',
+                color: 'pink',
+                hidden: pageState.currentTab !== 'Accepted',
+              },
+
+              {
+                icon: 'mdi-hand-coin-outline',
+                count: quotationStats.expired,
+                label: 'quotation.status.Expired',
+                color: 'cyan',
+                hidden: pageState.currentTab !== 'Expired',
+              },
+
+              {
+                icon: 'mdi-hand-coin-outline',
+                count: quotationStats.paymentInProcess,
+                label: 'quotation.status.Invoice',
+                color: 'purple',
+                hidden: pageState.currentTab !== 'Invoice',
+              },
+
+              {
+                icon: 'mdi-hand-coin-outline',
+                count: quotationStats.paymentSuccess,
+                label: 'quotation.status.PaymentSuccess',
+                color: 'dark-orange',
+                hidden: pageState.currentTab !== 'PaymentSuccess',
+              },
+
+              {
+                icon: 'mdi-hand-coin-outline',
+                count: quotationStats.processComplete,
+                label: 'quotation.status.ProcessComplete',
                 color: 'blue',
-                hidden:
+                hidden: pageState.currentTab !== 'ProcessComplete',
-                  pageState.currentTab !== 'all' &&
-                  pageState.currentTab !== 'installmentsCash',
-              },
-              {
-                icon: 'mdi-hand-coin-outline',
-                count: quotationStats.splitCustom,
-                label: 'quotation.type.installmentsCustomCash',
-                color: 'lime',
-                hidden:
-                  pageState.currentTab !== 'all' &&
-                  pageState.currentTab !== 'installmentsCustomCash',
               },
             ]"
             :dark="$q.dark.isActive"
@@ -528,7 +557,7 @@ async function storeDataLocal(id: string) {
                   pageState.currentTab === tab ? 'text-bold' : 'app-text-muted'
                 "
               >
-                {{ $t(`quotation.type.${tab}`) }}
+                {{ $t(`quotation.status.${tab}`) }}
               </div>
             </q-tab>
           </q-tabs>