From 8c0892dfd42426823ad85918995a9f2ab2e309c0 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 31 Jul 2025 16:30:46 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B8=9A=E0=B8=9A=E0=B9=80?=
 =?UTF-8?q?=E0=B8=84=E0=B8=A3=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=87=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=8A=E0=B8=AF=20>>=20=E0=B8=9A=E0=B8=B1=E0=B8=99?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B6=E0=B8=81=E0=B8=9C=E0=B8=A5=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B9=80=E0=B8=AA=E0=B8=99=E0=B8=AD=E0=B8=82=E0=B8=AD?=
 =?UTF-8?q?=20(=E0=B8=81=E0=B8=A3=E0=B8=AD=E0=B8=87=E0=B8=82=E0=B9=89?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B9=83=E0=B8=9A=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B3=E0=B8=81=E0=B8=B1=E0=B8=9A=E0=B8=97=E0=B8=B5=E0=B9=88?=
 =?UTF-8?q?=E0=B8=84=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=88=E0=B9=88=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A2)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SkeletonTable.vue       | 67 ++++++++++++++++++--------
 src/modules/07_insignia/storeResult.ts | 21 ++++----
 2 files changed, 57 insertions(+), 31 deletions(-)

diff --git a/src/components/SkeletonTable.vue b/src/components/SkeletonTable.vue
index fbcf1c949..ea9da21ee 100644
--- a/src/components/SkeletonTable.vue
+++ b/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 skeletonColumns = computed(() => columns.value?.length || 5);
+const rows = ref<Array<{ id: string; name: string }>>([
+  {
+    id: "",
+    name: "",
+  },
+]);
+
+/** ตัวอย่างการใช้งาน */
+/// <SkeletonTable v-if="isLoading" :columns="columns" />
 </script>
 
 <template>
-  <q-markup-table flat bordered>
-    <thead>
-      <tr>
-        <th v-for="(n, idx) in skeletonColumns" :key="idx" style="width: 150px">
-          <q-skeleton type="text" />
-        </th>
-      </tr>
-    </thead>
+  <d-table
+    flat
+    bordered
+    :columns="columns"
+    :rows="rows"
+    row-key="id"
+    hide-pagination
+  >
+    <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>
-      <tr v-for="n in 5" :key="n" :class="n % 2 === 0 ? 'bg-grey-2' : ''">
-        <td v-for="(col, idx) in skeletonColumns" :key="idx">
-          <q-skeleton type="text" width="80px" />
-        </td>
-      </tr>
-    </tbody>
-  </q-markup-table>
+    <template v-slot:item="props">
+      <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+        <q-card bordered flat>
+          <q-list dense class="q-mt-lg relative-position">
+            <q-item v-for="col in props.cols" :key="col.name">
+              <q-item-section>
+                <q-item-label class="text-grey-6 text-weight-medium">{{
+                  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>
diff --git a/src/modules/07_insignia/storeResult.ts b/src/modules/07_insignia/storeResult.ts
index c2bca8176..539ec6aa1 100644
--- a/src/modules/07_insignia/storeResult.ts
+++ b/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  สถานะ การจ่าย
-   * @param val สถานะ การจ่าย
+   * function convert สถานะ การจ่าย
+   * @param val วันที่จ่าย (string | null)
+   * @param status สถานะ (string)
+   * @returns "haveDate" | "noDate"
    */
-  function convertDatepay(val: string | null) {
-    switch (val) {
-      case null:
-        return "noDate";
-      default:
-        return "haveDate";
-    }
+  function convertDatepay(val: string | null, status: string) {
+    return val !== null && status === "DONE" ? "haveDate" : "noDate";
   }
 
   return {