ระบบเครื่องราชฯ >> บันทึกผลการเสนอขอ (กรองข้อมูลใบกำกับที่ค้างจ่าย)

src/components/SkeletonTable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { ref } from "vue";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -8,26 +8,55 @@ const columns = defineModel<QTableProps["columns"]>("columns", {
   required: true,
 });
 
-/** จำนวนคอลัมน์ */
+const rows = ref<Array<{ id: string; name: string }>>([
-const skeletonColumns = computed(() => columns.value?.length || 5);
+  {
+    id: "",
+    name: "",
+  },
+]);
+
+/** ตัวอย่างการใช้งาน */
+/// <SkeletonTable v-if="isLoading" :columns="columns" />
 </script>
 
 <template>
-  <q-markup-table flat bordered>
+  <d-table
-    <thead>
+    flat
-      <tr>
+    bordered
-        <th v-for="(n, idx) in skeletonColumns" :key="idx" style="width: 150px">
+    :columns="columns"
-          <q-skeleton type="text" />
+    :rows="rows"
-        </th>
+    row-key="id"
-      </tr>
+    hide-pagination
-    </thead>
+  >
+    <template v-slot:body="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div>
+            <q-skeleton type="text" width="80px" />
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
 
-    <tbody>
+    <template v-slot:item="props">
-      <tr v-for="n in 5" :key="n" :class="n % 2 === 0 ? 'bg-grey-2' : ''">
+      <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-        <td v-for="(col, idx) in skeletonColumns" :key="idx">
+        <q-card bordered flat>
-          <q-skeleton type="text" width="80px" />
+          <q-list dense class="q-mt-lg relative-position">
-        </td>
+            <q-item v-for="col in props.cols" :key="col.name">
-      </tr>
+              <q-item-section>
-    </tbody>
+                <q-item-label class="text-grey-6 text-weight-medium">{{
-  </q-markup-table>
+                  col.label
+                }}</q-item-label>
+              </q-item-section>
+              <q-item-section>
+                <q-item-label class="text-dark text-weight-medium">
+                  <q-skeleton type="text" />
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+    </template>
+  </d-table>
 </template>

src/modules/07_insignia/storeResult.ts

@@ -109,7 +109,7 @@ export const useResultDataStore = defineStore("insigniaResult", () => {
       page: e.page,
       number: e.no,
       vatnumber: e.number,
-      datepay: date2Thai(e.datePayment),
+      datepay: date2Thai(e.datePayment) || null,
       typepay: e.typePayment,
       address: e.address,
       dateReceiveInsignia: e.dateReceiveInsignia,
@@ -136,13 +136,13 @@ export const useResultDataStore = defineStore("insigniaResult", () => {
     if (invoice !== "all" && employeeClass !== "all") {
       let list = listInsignia.value.filter(
         (e: any) =>
-          convertDatepay(e.datepay) === invoice &&
+          convertDatepay(e.datepay, e.statusMain) === invoice &&
           e.employeeType === profileType(employeeClass)
       );
       rows.value = list;
     } else if (invoice !== "all" && employeeClass === "all") {
       let list = listInsignia.value.filter(
-        (e: any) => convertDatepay(e.datepay) === invoice
+        (e: any) => convertDatepay(e.datepay, e.statusMain) === invoice
       );
       rows.value = list;
     } else if (invoice === "all" && employeeClass !== "all") {
@@ -187,16 +187,13 @@ export const useResultDataStore = defineStore("insigniaResult", () => {
   }
 
   /**
-   * function convert  สถานะ การจ่าย
+   * function convert สถานะ การจ่าย
-   * @param val สถานะ การจ่าย
+   * @param val วันที่จ่าย (string | null)
+   * @param status สถานะ (string)
+   * @returns "haveDate" | "noDate"
    */
-  function convertDatepay(val: string | null) {
+  function convertDatepay(val: string | null, status: string) {
-    switch (val) {
+    return val !== null && status === "DONE" ? "haveDate" : "noDate";
-      case null:
-        return "noDate";
-      default:
-        return "haveDate";
-    }
   }
 
   return {