refactor: edit table paySplit

src/components/TableComponents.vue

@@ -17,7 +17,7 @@ const props = withDefaults(
     hidePagination?: boolean;
     inTable?: boolean;
     hideView?: boolean;
-    btnSelectedAll?: boolean;
+    btnSelected?: boolean;
 
     imgColumn?: string;
     customColumn?: string[];
@@ -59,9 +59,6 @@ defineEmits<{
         :style="`background-color:   ${inTable ? '#F0FFF1' : 'hsla(var(--info-bg) / 0.07'} `"
         :props="props"
       >
-        <q-th auto-width v-if="!!btnSelectedAll">
-          <q-checkbox v-model="props.selected" />
-        </q-th>
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
           <span v-if="col.label === 'nameEmployee'">
             {{ $t('fullname') }}

src/pages/05_quotation/QuotationForm.vue

@@ -3,7 +3,11 @@ import { useI18n } from 'vue-i18n';
 import { storeToRefs } from 'pinia';
 import { useQuasar } from 'quasar';
 import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
-import { dialogCheckData, dialogWarningClose } from 'stores/utils';
+import {
+  dialogCheckData,
+  dialogWarningClose,
+  formatNumberDecimal,
+} from 'stores/utils';
 import { ProductTree, quotationProductTree } from './utils';
 
 // NOTE: Import stores
@@ -1024,14 +1028,64 @@ const view = ref<View>(View.Quotation);
               <div class="surface-1 q-pa-md full-width">
                 <SwitchItem :value="view">
                   <template #[View.Quotation]>
-                    <TableComponents
+                    <q-table
-                      btn-selected-all
+                      flat
+                      bordered
                       :columns="columnPaySplit"
                       :rows="quotationFormData.paySplit"
                       selection="multiple"
                       v-model:selected="selectedInstallmentNo"
                       row-key="no"
-                    />
+                    >
+                      <template v-slot:header="props">
+                        <q-tr
+                          :props="props"
+                          :style="`background-color:hsla(var(--info-bg) / 0.07)`"
+                        >
+                          <q-th auto-width>
+                            <q-checkbox v-model="props.selected" />
+                          </q-th>
+                          <q-th
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                          >
+                            {{ $t(col.label) }}
+                          </q-th>
+                        </q-tr>
+                      </template>
+                      <template v-slot:body="props">
+                        <q-tr :props="props">
+                          <q-td auto-width>
+                            <q-checkbox v-model="props.selected" />
+                          </q-td>
+                          <q-td
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                          >
+                            <template v-if="col.name === 'installmentNo'">
+                              {{ col.value }}
+                            </template>
+
+                            <template v-if="col.name === 'amount'">
+                              {{ formatNumberDecimal(col.value, 2) }}
+                            </template>
+
+                            <template v-if="col.name === 'status'">
+                              <BadgeComponent
+                                :title="
+                                  !!col.value
+                                    ? 'สร้างใบแจ้งหนี้เเล้ว'
+                                    : 'ยังไม่สร้างใบแจ้งหนี้'
+                                "
+                                :hsla-color="!!col.value ? '' : '--red-7-hsl'"
+                              />
+                            </template>
+                          </q-td>
+                        </q-tr>
+                      </template>
+                    </q-table>
                   </template>
                 </SwitchItem>
               </div>