From aecf75c1e7da37fa23629701e83ad812193a8468 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 30 Apr 2025 10:44:23 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20TableVie?=
 =?UTF-8?q?w=20=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Achievement/01_ProfessionalLicense.vue    |  14 +-
 .../detail/Achievement/02_Train.vue           |  24 ++--
 .../detail/Achievement/03_Insignia.vue        |  36 ++---
 .../Achievement/04_DeclarationHonor.vue       |  36 ++---
 .../Achievement/05_ResultsPerformance.vue     |  39 +++---
 .../GovernmentInformation/02_Discipline.vue   | 129 ++++++------------
 .../detail/GovernmentInformation/03_Leave.vue |  98 +++++--------
 .../04_PerformSpecialWork.vue                 | 103 +++++---------
 .../detail/Other/01_OtherInformation.vue      |  79 +++++------
 .../PersonalInformation/05_Education.vue      |  99 ++------------
 .../PersonalInformation/06_SpecialSkill.vue   |  42 ++----
 .../detail/Salary/02_NotReceiveSalary.vue     |  29 ++--
 12 files changed, 254 insertions(+), 474 deletions(-)

diff --git a/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue b/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
index 74a1ebe7c..bd9629db9 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
@@ -399,7 +399,6 @@ onMounted(() => {
       </template>
     </q-input>
     <q-select
-      v-if="mode === 'table'"
       v-model="visibleColumns"
       multiple
       outlined
@@ -516,10 +515,8 @@ onMounted(() => {
       </q-tr>
     </template>
     <template v-slot:item="props" v-else>
-      <div
-        class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
-      >
-        <q-card bordered>
+      <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
+        <q-card flat bordered>
           <q-card-actions align="right" class="bg-grey-3">
             <q-btn
               v-if="props.row.isUpload"
@@ -560,8 +557,7 @@ onMounted(() => {
               v-for="(col, index) in props.cols"
               :key="col.name"
             >
-              <div></div>
-              <div class="col label-color">
+              <div class="col text-grey-6">
                 <div>{{ col.label }}</div>
               </div>
               <div class="col">
@@ -842,8 +838,4 @@ onMounted(() => {
 .bg-color {
   background-color: #fafafa;
 }
-
-.label-color {
-  color: #747474cc;
-}
 </style>
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue b/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue
index fa6d47ed7..235830095 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue
@@ -439,7 +439,6 @@ onMounted(() => {
       </template>
     </q-input>
     <q-select
-      v-if="mode === 'table'"
       v-model="visibleColumns"
       multiple
       outlined
@@ -558,9 +557,7 @@ onMounted(() => {
       </q-tr>
     </template>
     <template v-slot:item="props" v-else>
-      <div
-        class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
-      >
+      <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
         <q-card bordered>
           <q-card-actions align="right" class="bg-grey-3">
             <q-btn
@@ -586,17 +583,16 @@ onMounted(() => {
           <q-separator />
           <q-list>
             <div
+              :class="`row q-pa-sm`"
+              :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
               v-for="(col, index) in props.cols"
               :key="col.name"
-              :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
             >
-              <div class="row q-pa-sm">
-                <div class="col-7 label-color">
-                  <div>{{ col.label }}</div>
-                </div>
-                <div class="col">
-                  <div>{{ col.value ? col.value : "-" }}</div>
-                </div>
+              <div class="col text-grey-6">
+                <div>{{ col.label }}</div>
+              </div>
+              <div class="col">
+                <div>{{ col.value ? col.value : "-" }}</div>
               </div>
             </div>
           </q-list>
@@ -1007,10 +1003,6 @@ onMounted(() => {
   border: 1px solid #d0d0d0;
 }
 
-.label-color {
-  color: #747474cc;
-}
-
 .bg-color {
   background-color: #fafafa;
 }
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue b/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
index a815618ad..ca3ebc72b 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
@@ -684,7 +684,6 @@ onMounted(async () => {
       </template>
     </q-input>
     <q-select
-      v-if="modeView == 'table'"
       v-model="visibleColumns"
       multiple
       outlined
@@ -738,7 +737,6 @@ onMounted(async () => {
     v-model:pagination="pagination"
     :grid="modeView === 'card'"
     :visible-columns="visibleColumns"
-    :card-container-class="modeView === 'card' ? 'q-col-gutter-md' : ''"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -798,8 +796,8 @@ onMounted(async () => {
     </template>
 
     <template v-slot:item="props" v-else>
-      <div class="col-xs-12 col-sm-6 col-md-6">
-        <q-card bordered>
+      <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
+        <q-card flat bordered>
           <q-card-actions class="bg-grey-3" align="right">
             <q-btn
               flat
@@ -822,25 +820,21 @@ onMounted(async () => {
             </q-btn>
           </q-card-actions>
           <q-separator />
-          <div>
-            <q-item
-              v-for="(col, index) in props.cols.filter(
-                (col:any) => col.name !== 'desc'
-              )"
+          <q-list>
+            <div
+              :class="`row q-pa-sm`"
+              :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
+              v-for="(col, index) in props.cols"
               :key="col.name"
-              :class="index % 2 !== 0 ? 'bg-grey-1' : ''"
             >
-              <q-item-section class="text-grey-6">
-                <q-item-label>{{ col.label }}</q-item-label>
-              </q-item-section>
-
-              <q-item-section class="text-dark">
-                <q-item-label>
-                  {{ col.value ? col.value : "-" }}
-                </q-item-label>
-              </q-item-section>
-            </q-item>
-          </div>
+              <div class="col text-grey-6">
+                <div>{{ col.label }}</div>
+              </div>
+              <div class="col">
+                <div>{{ col.value ? col.value : "-" }}</div>
+              </div>
+            </div>
+          </q-list>
         </q-card>
       </div>
     </template>
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue b/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
index 7a5583e19..00b74a3e1 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
@@ -479,7 +479,6 @@ onMounted(() => {
       </template>
     </q-input>
     <q-select
-      v-if="modeView == 'table'"
       v-model="visibleColumns"
       multiple
       outlined
@@ -533,7 +532,6 @@ onMounted(() => {
     :grid="modeView === 'card'"
     v-model:pagination="pagination"
     :visible-columns="visibleColumns"
-    :card-container-class="modeView === 'card' ? 'q-col-gutter-md' : ''"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -592,8 +590,8 @@ onMounted(() => {
     </template>
 
     <template v-slot:item="props" v-else>
-      <div class="col-xs-12 col-sm-6 col-md-6">
-        <q-card bordered>
+      <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
+        <q-card flat bordered>
           <q-card-actions class="bg-grey-3" align="right">
             <q-btn
               v-if="props.row.isUpload == true"
@@ -627,25 +625,21 @@ onMounted(() => {
             </q-btn>
           </q-card-actions>
           <q-separator />
-          <div>
-            <q-item
-              v-for="(col, index) in props.cols.filter(
-                (col:any) => col.name !== 'desc'
-              )"
+          <q-list>
+            <div
+              :class="`row q-pa-sm`"
+              :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
+              v-for="(col, index) in props.cols"
               :key="col.name"
-              :class="index % 2 !== 0 ? 'bg-grey-1' : ''"
             >
-              <q-item-section class="col-7 text-grey-6">
-                <q-item-label>{{ col.label }}</q-item-label>
-              </q-item-section>
-
-              <q-item-section class="text-dark">
-                <q-item-label>
-                  {{ col.value ? col.value : "-" }}
-                </q-item-label>
-              </q-item-section>
-            </q-item>
-          </div>
+              <div class="col text-grey-6">
+                <div>{{ col.label }}</div>
+              </div>
+              <div class="col">
+                <div>{{ col.value ? col.value : "-" }}</div>
+              </div>
+            </div>
+          </q-list>
         </q-card>
       </div>
     </template>
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue b/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
index d1267fcb7..d151a27d9 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
@@ -557,6 +557,7 @@ onMounted(async () => {
   hideLoader();
 });
 </script>
+
 <template>
   <div class="row q-col-gutter-sm">
     <div class="col-12">
@@ -594,7 +595,6 @@ onMounted(async () => {
               </template>
             </q-input>
             <q-select
-              v-if="modeView == 'table'"
               v-model="visibleColumns"
               multiple
               outlined
@@ -650,7 +650,6 @@ onMounted(async () => {
             v-model:pagination="pagination"
             :grid="modeView === 'card'"
             :visible-columns="visibleColumns"
-            :card-container-class="modeView === 'card' ? 'q-col-gutter-md' : ''"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -699,8 +698,8 @@ onMounted(async () => {
             </template>
 
             <template v-slot:item="props" v-else>
-              <div class="col-xs-12 col-sm-6 col-md-6">
-                <q-card bordered>
+              <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
+                <q-card flat bordered>
                   <q-card-actions class="bg-grey-3" align="right">
                     <q-btn
                       flat
@@ -728,25 +727,23 @@ onMounted(async () => {
                     </q-btn>
                   </q-card-actions>
                   <q-separator />
-                  <div>
-                    <q-item
-                      v-for="(col, index) in props.cols.filter(
-                      (col:any) => col.name !== 'desc'
-                    )"
+                  <q-list>
+                    <div
+                      :class="`row q-pa-sm`"
+                      :style="`background-color: ${
+                        index % 2 !== 0 ? '#FAFAFA' : ''
+                      }`"
+                      v-for="(col, index) in props.cols"
                       :key="col.name"
-                      :class="index % 2 !== 0 ? 'bg-grey-1' : ''"
                     >
-                      <q-item-section class="text-grey-6">
-                        <q-item-label>{{ col.label }}</q-item-label>
-                      </q-item-section>
-
-                      <q-item-section class="text-dark">
-                        <q-item-label>
-                          {{ col.value ? col.value : "-" }}
-                        </q-item-label>
-                      </q-item-section>
-                    </q-item>
-                  </div>
+                      <div class="col text-grey-6">
+                        <div>{{ col.label }}</div>
+                      </div>
+                      <div class="col">
+                        <div>{{ col.value ? col.value : "-" }}</div>
+                      </div>
+                    </div>
+                  </q-list>
                 </q-card>
               </div>
             </template>
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue
index 62dbb8150..bad5dd130 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue
@@ -495,7 +495,6 @@ onMounted(() => {
       </template>
     </q-input>
     <q-select
-      v-if="mode == 'table'"
       v-model="visibleColumns"
       multiple
       outlined
@@ -541,7 +540,6 @@ onMounted(() => {
   </div>
 
   <d-table
-    :card-container-class="mode === 'card' ? 'q-col-gutter-md' : ''"
     :grid="mode === 'card'"
     ref="table"
     row-key="id"
@@ -611,93 +609,54 @@ onMounted(() => {
       </q-tr>
     </template>
     <template v-slot:item="props" v-else>
-      <div class="col-xs-12 col-sm-6 col-md-6">
-        <q-card flat bordered class="q-pa-none">
-          <div class="row bg-grey-3">
-            <q-space />
-            <div>
-              <q-btn
-                v-if="props.row.isUpload"
-                color="green"
-                flat
-                dense
-                round
-                icon="mdi-file-document-outline"
-                @click="onDownloadFile(props.row.id)"
-              >
-                <q-tooltip>ดาวน์โหลด</q-tooltip>
-              </q-btn>
-              <q-btn
-                color="deep-purple"
-                icon="mdi-history"
-                flat
-                round
-                @click="openDialogHistory(props.row.id)"
-                ><q-tooltip>ประวิติแก้ไขวินัย</q-tooltip></q-btn
-              >
-              <q-btn
-                v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
-                color="edit"
-                icon="edit"
-                flat
-                round
-                @click="openDialogEdit(props.row)"
-                ><q-tooltip>แก้ไข</q-tooltip></q-btn
-              >
-            </div>
-          </div>
+      <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
+        <q-card flat bordered>
+          <q-card-actions align="right" class="bg-grey-3">
+            <q-btn
+              v-if="props.row.isUpload"
+              color="green"
+              flat
+              dense
+              round
+              icon="mdi-file-document-outline"
+              @click="onDownloadFile(props.row.id)"
+            >
+              <q-tooltip>ดาวน์โหลด</q-tooltip>
+            </q-btn>
+            <q-btn
+              color="deep-purple"
+              icon="mdi-history"
+              flat
+              round
+              @click="openDialogHistory(props.row.id)"
+              ><q-tooltip>ประวิติแก้ไขวินัย</q-tooltip></q-btn
+            >
+            <q-btn
+              v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
+              color="edit"
+              icon="edit"
+              flat
+              round
+              @click="openDialogEdit(props.row)"
+              ><q-tooltip>แก้ไข</q-tooltip></q-btn
+            >
+          </q-card-actions>
           <q-separator />
-          <q-card-section class="q-pa-none">
-            <div class="row q-pa-sm">
-              <div class="col-3 text-grey-6 text-weight-medium">
-                ระดับการลงโทษทางวินัย
+          <q-list>
+            <div
+              :class="`row q-pa-sm`"
+              :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
+              v-for="(col, index) in props.cols"
+              :key="col.name"
+            >
+              <div class="col text-grey-6">
+                <div>{{ col.label }}</div>
               </div>
-              <div class="col-3">
-                {{ props.row.level !== "" ? props.row.level : "-" }}
-              </div>
-              <div class="col-3 text-grey-6 text-weight-medium">
-                วัน/เดือน/ปี
-              </div>
-              <div class="col-3">
-                {{ props.row.date ? date2Thai(props.row.date) : "-" }}
+              <div class="col">
+                <div>{{ col.value ? col.value : "-" }}</div>
               </div>
             </div>
-            <q-separator />
-            <div class="row q-pa-sm bg-grey-2">
-              <div class="col-3 text-grey-6 text-weight-medium">ล้างมลทิน</div>
-              <div class="col-3">
-                {{ props.row.unStigma !== "" ? props.row.unStigma : "-" }}
-              </div>
-              <div class="col-3 text-grey-6 text-weight-medium">
-                เลขที่คำสั่ง
-              </div>
-              <div class="col-3">
-                {{
-                  props.row.refCommandNo !== "" ? props.row.refCommandNo : "-"
-                }}
-              </div>
-            </div>
-            <q-separator />
-            <div class="row q-pa-sm">
-              <div class="col-3 text-grey-6 text-weight-medium">
-                เอกสารอ้างอิง (ลงวันที่)
-              </div>
-              <div class="col-3">
-                {{
-                  props.row.refCommandDate
-                    ? date2Thai(props.row.refCommandDate)
-                    : "-"
-                }}
-              </div>
-            </div>
-            <q-separator />
-            <div class="row q-pa-sm bg-grey-2">
-              <div class="col-3 text-grey-6 text-weight-medium">รายละเอียด</div>
-              <div class="col-9">
-                {{ props.row.detail !== "" ? props.row.detail : "-" }}
-              </div>
-            </div>
-          </q-card-section>
+          </q-list>
         </q-card>
       </div>
     </template>
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue
index 8a3a31d27..2baf29a57 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue
@@ -508,7 +508,6 @@ onMounted(() => {
       </template>
     </q-input>
     <q-select
-      v-if="mode == 'table'"
       v-model="visibleColumns"
       multiple
       outlined
@@ -558,7 +557,6 @@ onMounted(() => {
     flat
     bordered
     dense
-    :card-container-class="mode === 'card' ? 'q-col-gutter-md' : ''"
     :columns="columns"
     :rows="rows"
     :grid="mode === 'card'"
@@ -612,69 +610,47 @@ onMounted(() => {
       </q-tr>
     </template>
     <template v-slot:item="props" v-else>
-      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
-        <q-card flat bordered class="q-pa-none">
-          <div class="row bg-grey-3">
-            <q-space />
-            <div>
-              <q-btn
-                color="deep-purple"
-                icon="mdi-history"
-                flat
-                round
-                @click="openDialogHistory(props.row.id)"
-                ><q-tooltip>ประวิติแก้ไขการลา</q-tooltip></q-btn
-              >
-              <q-btn
-                v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
-                color="edit"
-                icon="edit"
-                flat
-                round
-                @click="openDialogEdit(props.row)"
-                ><q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
-              >
-            </div>
-          </div>
+      <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
+        <q-card flat bordered>
+          <q-card-actions align="right" class="bg-grey-3">
+            <q-btn
+              color="deep-purple"
+              icon="mdi-history"
+              flat
+              round
+              @click="openDialogHistory(props.row.id)"
+              ><q-tooltip>ประวิติแก้ไขการลา</q-tooltip></q-btn
+            >
+            <q-btn
+              v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
+              color="edit"
+              icon="edit"
+              flat
+              round
+              @click="openDialogEdit(props.row)"
+              ><q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
+            >
+          </q-card-actions>
           <q-separator />
-          <q-card-section class="q-pa-none">
-            <div class="row q-pa-sm">
-              <div class="col-3 text-grey-6 text-weight-medium">
-                ประเภทการลา
+          <q-list>
+            <div
+              :class="`row q-pa-sm`"
+              :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
+              v-for="(col, index) in props.cols"
+              :key="col.name"
+            >
+              <div class="col text-grey-6">
+                <div>{{ col.label }}</div>
               </div>
-              <div class="col-9">
-                {{ props.row.typeLeave !== "" ? props.row.typeLeave : "-" }}
+
+              <div class="col">
+                <div v-if="col.name === 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <div v-else>{{ col.value ? col.value : "-" }}</div>
               </div>
             </div>
-            <q-separator />
-            <div class="row q-pa-sm bg-grey-2">
-              <div class="col-3 text-grey-6 text-weight-medium">
-                วัน/เดือน/ปี ที่ลา
-              </div>
-              <div class="col-3">
-                {{
-                  props.row.dateStartLeave
-                    ? date2Thai(props.row.dateStartLeave)
-                    : "-"
-                }}
-              </div>
-              <div class="col-3 text-grey-6 text-weight-medium">จำนวนวันลา</div>
-              <div class="col-3">
-                {{ props.row.numLeave ? props.row.numLeave : "-" }}
-              </div>
-            </div>
-            <q-separator />
-            <div class="row q-pa-sm bg-grey-2">
-              <div class="col-3 text-grey-6 text-weight-medium">สถานะ</div>
-              <div class="col-3">
-                {{ props.row.status ? statusLeave(props.row.status) : "-" }}
-              </div>
-              <div class="col-3 text-grey-6 text-weight-medium">เหตุผล</div>
-              <div class="col-3">
-                {{ props.row.reason !== "" ? props.row.reason : "-" }}
-              </div>
-            </div>
-          </q-card-section>
+          </q-list>
         </q-card>
       </div>
     </template>
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
index e20012766..fae201801 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
@@ -452,6 +452,7 @@ onMounted(() => {
   fetchData(profileId.value);
 });
 </script>
+
 <template>
   <div class="row items-center q-gutter-x-sm q-pb-sm">
     <q-btn
@@ -480,7 +481,6 @@ onMounted(() => {
       </template>
     </q-input>
     <q-select
-      v-if="mode == 'table'"
       v-model="visibleColumns"
       multiple
       outlined
@@ -530,7 +530,6 @@ onMounted(() => {
     flat
     bordered
     dense
-    :card-container-class="mode === 'card' ? 'q-col-gutter-md' : ''"
     :columns="columns"
     :rows="rows"
     :grid="mode === 'card'"
@@ -594,76 +593,44 @@ onMounted(() => {
       </q-tr>
     </template>
     <template v-slot:item="props" v-else>
-      <div class="col-xs-12 col-sm-6 col-md-6">
-        <q-card flat bordered class="q-pa-none">
-          <div class="row bg-grey-3">
-            <q-space />
-            <div>
-              <q-btn
-                color="deep-purple"
-                icon="mdi-history"
-                flat
-                round
-                @click="openDialogHistory(props.row.id)"
-                ><q-tooltip>ประวัติแก้ไขปฏิบัติราชการพิเศษ</q-tooltip>
-              </q-btn>
-              <q-btn
-                v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
-                color="edit"
-                icon="edit"
-                flat
-                round
-                @click="openDialogEdit(props.row)"
-                ><q-tooltip>แก้ไขข้อมูล</q-tooltip>
-              </q-btn>
-            </div>
-          </div>
+      <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
+        <q-card flat bordered>
+          <q-card-actions align="right" class="bg-grey-3">
+            <q-btn
+              color="deep-purple"
+              icon="mdi-history"
+              flat
+              round
+              @click="openDialogHistory(props.row.id)"
+              ><q-tooltip>ประวัติแก้ไขปฏิบัติราชการพิเศษ</q-tooltip>
+            </q-btn>
+            <q-btn
+              v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
+              color="edit"
+              icon="edit"
+              flat
+              round
+              @click="openDialogEdit(props.row)"
+              ><q-tooltip>แก้ไขข้อมูล</q-tooltip>
+            </q-btn>
+          </q-card-actions>
+
           <q-separator />
-          <q-card-section class="q-pa-none">
-            <div class="row q-pa-sm">
-              <div class="col text-grey-6 text-weight-medium">เริ่มต้น</div>
+          <q-list>
+            <div
+              :class="`row q-pa-sm`"
+              :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
+              v-for="(col, index) in props.cols"
+              :key="col.name"
+            >
+              <div class="col text-grey-6">
+                <div>{{ col.label }}</div>
+              </div>
               <div class="col">
-                {{ props.row.dateStart ? date2Thai(props.row.dateStart) : "-" }}
-              </div>
-              <div class="col text-grey-6 text-weight-medium">สิ้นสุด</div>
-              <div class="col">
-                {{ props.row.dateEnd ? date2Thai(props.row.dateEnd) : "-" }}
+                <div>{{ col.value ? col.value : "-" }}</div>
               </div>
             </div>
-            <q-separator />
-            <div class="row q-pa-sm bg-grey-2">
-              <div class="col-3 text-grey-6 text-weight-medium">
-                เอกสารอ้างอิง
-              </div>
-              <div class="col-3">
-                {{ props.row.reference ? props.row.reference : "-" }}
-              </div>
-              <div class="col text-grey-6 text-weight-medium">เลขที่คำสั่ง</div>
-              <div class="col">
-                {{ props.row.refCommandNo ? props.row.refCommandNo : "-" }}
-              </div>
-            </div>
-            <q-separator />
-            <div class="row q-pa-sm">
-              <div class="col-3 text-grey-6 text-weight-medium">
-                เอกสารอ้างอิง (ลงวันที่)
-              </div>
-              <div class="col-3">
-                {{
-                  props.row.refCommandDate
-                    ? date2Thai(props.row.refCommandDate)
-                    : "-"
-                }}
-              </div>
-            </div>
-            <q-separator />
-            <div class="row q-pa-sm bg-grey-2">
-              <div class="col-3 text-grey-6 text-weight-medium">รายละเอียด</div>
-              <div class="col-9">
-                {{ props.row.detail ? props.row.detail : "-" }}
-              </div>
-            </div>
-          </q-card-section>
+          </q-list>
         </q-card>
       </div>
     </template>
diff --git a/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue b/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue
index 0051c3db2..f65e8de2a 100644
--- a/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue
+++ b/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue
@@ -246,6 +246,7 @@ onMounted(() => {
   getData();
 });
 </script>
+
 <template>
   <div class="row items-center q-gutter-x-sm q-pb-sm">
     <q-btn
@@ -274,7 +275,6 @@ onMounted(() => {
       </template>
     </q-input>
     <q-select
-      v-if="mode == 'table'"
       v-model="visibleColumns"
       multiple
       outlined
@@ -326,7 +326,6 @@ onMounted(() => {
     bordered
     v-model:pagination="pagination"
     flat
-    :card-container-class="mode === 'card' ? 'q-col-gutter-md' : ''"
     :grid="mode === 'card'"
     :visible-columns="visibleColumns"
   >
@@ -371,50 +370,44 @@ onMounted(() => {
       </q-tr>
     </template>
     <template v-slot:item="props" v-else>
-      <div class="col-xs-12 col-sm-6 col-md-6">
+      <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
         <q-card flat bordered>
-          <div class="row bg-grey-3">
-            <q-space />
-            <div class="q-gutter-x-sm">
-              <q-btn
-                color="deep-purple"
-                icon="mdi-history"
-                flat
-                round
-                @click="openDialogHistory(props.row.id)"
-                ><q-tooltip>ประวิติแก้ไขอื่นๆ</q-tooltip></q-btn
-              >
-              <q-btn
-                v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
-                color="edit"
-                icon="edit"
-                flat
-                round
-                @click="openDialogEdit(props.row)"
-                ><q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
-              >
-            </div>
-          </div>
-          <q-separator />
-          <q-card-section class="q-pa-none">
-            <q-item
-              v-for="(col, index) in props.cols.filter(
-                (col:any) => col.name !== 'desc'
-              )"
-              :key="col.name"
-              :class="index % 2 !== 0 ? 'bg-grey-1' : ''"
+          <q-card-actions class="bg-grey-3" align="right">
+            <q-btn
+              color="deep-purple"
+              icon="mdi-history"
+              flat
+              round
+              @click="openDialogHistory(props.row.id)"
+              ><q-tooltip>ประวิติแก้ไขอื่นๆ</q-tooltip></q-btn
             >
-              <q-item-section class="text-grey-6">
-                <q-item-label>{{ col.label }}</q-item-label>
-              </q-item-section>
+            <q-btn
+              v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
+              color="edit"
+              icon="edit"
+              flat
+              round
+              @click="openDialogEdit(props.row)"
+              ><q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
+            >
+          </q-card-actions>
 
-              <q-item-section class="text-dark">
-                <q-item-label>
-                  {{ col.value ? col.value : "-" }}
-                </q-item-label>
-              </q-item-section>
-            </q-item>
-          </q-card-section>
+          <q-separator />
+          <q-list>
+            <div
+              :class="`row q-pa-sm`"
+              :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
+              v-for="(col, index) in props.cols"
+              :key="col.name"
+            >
+              <div class="col text-grey-6">
+                <div>{{ col.label }}</div>
+              </div>
+              <div class="col">
+                <div>{{ col.value ? col.value : "-" }}</div>
+              </div>
+            </div>
+          </q-list>
         </q-card>
       </div>
     </template>
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue
index 222fa2033..e27628e6b 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue
@@ -635,7 +635,6 @@ onMounted(async () => {
       </template>
     </q-input>
     <q-select
-      v-if="mode === 'table'"
       v-model="visibleColumns"
       multiple
       outlined
@@ -740,10 +739,8 @@ onMounted(async () => {
       </q-tr>
     </template>
     <template v-slot:item="props" v-else>
-      <div
-        class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
-      >
-        <q-card bordered>
+      <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
+        <q-card flat bordered>
           <q-card-actions align="right" class="bg-grey-3">
             <q-btn
               dense
@@ -768,83 +765,21 @@ onMounted(async () => {
             </q-btn>
           </q-card-actions>
           <q-separator />
-          <div class="row">
-            <div class="col-3 q-pa-sm label-color">ระดับการศึกษา</div>
-            <div class="col-4 q-pa-sm">{{ props.cols[0].value }}</div>
-            <div class="col-2 q-pa-sm label-color">สถานศึกษา</div>
-            <div class="col-3 q-pa-sm">{{ props.cols[1].value }}</div>
-            <div class="col-12">
-              <div :class="`row bg-color`">
-                <div class="col-3 q-pa-sm label-color">ตั้งแต่</div>
-                <div class="col-4 q-pa-sm">
-                  {{ props.cols[2].value }}
-                </div>
-
-                <div class="col-2 q-pa-sm label-color">ถึง</div>
-                <div class="col-3 q-pa-sm">
-                  {{ props.cols[3].value }}
-                </div>
+          <q-list>
+            <div
+              :class="`row q-pa-sm`"
+              :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
+              v-for="(col, index) in props.cols"
+              :key="col.name"
+            >
+              <div class="col text-grey-6">
+                <div>{{ col.label }}</div>
+              </div>
+              <div class="col">
+                <div>{{ col.value ? col.value : "-" }}</div>
               </div>
             </div>
-            <div class="col-3 q-pa-sm label-color">วันที่สำเร็จการศึกษา</div>
-            <div class="col-9 q-pa-sm">
-              {{ props.cols[4].value }}
-            </div>
-            <div class="col-12">
-              <div :class="`row bg-color`">
-                <div class="col-4 q-pa-sm label-color">
-                  เป็นวุฒิการศึกษาในตำแหน่ง
-                </div>
-                <div class="col-3 q-pa-sm">
-                  {{ props.cols[5].value ? "ใช่" : "ไม่ใช่" }}
-                </div>
-                <div class="col-2 q-pa-sm label-color">วุฒิการศึกษา</div>
-                <div class="col-3 q-pa-sm">
-                  {{ props.cols[6].value ? props.cols[6].value : "-" }}
-                </div>
-              </div>
-            </div>
-            <div class="col-3 q-pa-sm label-color">สาขาวืชา/ทาง</div>
-            <div class="col-4 q-pa-sm">
-              {{ props.cols[7].value ? props.cols[7].value : "-" }}
-            </div>
-            <div class="col-2 q-pa-sm label-color">ทุน</div>
-            <div class="col-3 q-pa-sm">
-              {{ props.cols[8].value ? props.cols[8].value : "-" }}
-            </div>
-            <div class="col-12">
-              <div :class="`row bg-color`">
-                <div class="col-3 q-pa-sm label-color">เกรดเฉลี่ย</div>
-                <div class="col-4 q-pa-sm">
-                  {{ props.cols[9].value ? props.cols[9].value : "-" }}
-                </div>
-                <div class="col-2 q-pa-sm label-color">ประเทศ</div>
-                <div class="col-3 q-pa-sm">
-                  {{ props.cols[10].value ? props.cols[10].value : "-" }}
-                </div>
-              </div>
-            </div>
-            <div class="col-3 q-pa-sm label-color">ข้อมูลการติดต่อ</div>
-            <div class="col-4 q-pa-sm">
-              {{ props.cols[11].value ? props.cols[11].value : "-" }}
-            </div>
-            <div class="col-2 q-pa-sm label-color">ระยะเวลา</div>
-            <div class="col-3 q-pa-sm">
-              {{ props.cols[12].value ? props.cols[12].value : "-" }}
-            </div>
-          </div>
-          <div class="col-12">
-            <div :class="`row bg-color`">
-              <div class="col-3 q-pa-sm label-color">ระยะเวลาหลักสูตร (ปี)</div>
-              <div class="col-4 q-pa-sm">
-                {{ props.cols[13].value === 0 ? "-" : props.cols[13].value }}
-              </div>
-              <div class="col-2 q-pa-sm label-color">หมายเหตุ</div>
-              <div class="col-3 q-pa-sm">
-                {{ props.cols[14].value ? props.cols[14].value : "-" }}
-              </div>
-            </div>
-          </div>
+          </q-list>
         </q-card>
       </div>
     </template>
@@ -1316,10 +1251,6 @@ onMounted(async () => {
   border: 1px solid #d0d0d0;
 }
 
-.label-color {
-  color: #747474cc;
-}
-
 .bg-color {
   background-color: #fafafa;
 }
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue
index 35d7bd696..ff65f9f40 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue
@@ -439,7 +439,6 @@ onMounted(() => {
       v-model="visibleColumns"
       multiple
       outlined
-      v-if="mode === 'table'"
       dense
       options-dense
       :display-value="$q.lang.table.columns"
@@ -550,9 +549,7 @@ onMounted(() => {
       </q-tr>
     </template>
     <template v-slot:item="props" v-else>
-      <div
-        class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
-      >
+      <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
         <q-card bordered>
           <q-card-actions align="right" class="bg-grey-3">
             <q-btn
@@ -583,26 +580,21 @@ onMounted(() => {
             </q-btn>
           </q-card-actions>
           <q-separator />
-          <div class="row">
-            <div class="col q-pa-sm label-color">ด้าน</div>
-            <div class="col q-pa-sm">
-              {{ props.cols[0].value ? props.cols[0].value : "-" }}
+          <q-list>
+            <div
+              :class="`row q-pa-sm`"
+              :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
+              v-for="(col, index) in props.cols"
+              :key="col.name"
+            >
+              <div class="col text-grey-6">
+                <div>{{ col.label }}</div>
+              </div>
+              <div class="col">
+                <div>{{ col.value ? col.value : "-" }}</div>
+              </div>
             </div>
-            <div class="col q-pa-sm label-color">รายละเอียด</div>
-            <div class="col q-pa-sm">
-              {{ props.cols[1].value ? props.cols[1].value : "-" }}
-            </div>
-          </div>
-          <div :class="`row bg-color`">
-            <div class="col q-pa-sm label-color">หมายเหตุ</div>
-            <div class="col q-pa-sm">
-              {{ props.cols[2].value ? props.cols[2].value : "-" }}
-            </div>
-            <div class="col q-pa-sm label-color">เอกสารอ้างอิง</div>
-            <div class="col q-pa-sm">
-              {{ props.cols[3].value ? props.cols[3].value : "-" }}
-            </div>
-          </div>
+          </q-list>
         </q-card>
       </div>
     </template>
@@ -795,10 +787,6 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.label-color {
-  color: #747474cc;
-}
-
 .bg-color {
   background-color: #fafafa;
 }
diff --git a/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue b/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue
index d6ab74c1f..361f84248 100644
--- a/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue
+++ b/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue
@@ -481,10 +481,8 @@ onMounted(() => {
       </q-tr>
     </template>
     <template v-slot:item="props" v-else>
-      <div
-        class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-3 grid-style-transition"
-      >
-        <q-card bordered>
+      <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
+        <q-card flat bordered>
           <q-card-actions class="bg-grey-3" align="right">
             <q-btn
               v-if="props.row.isUpload"
@@ -521,20 +519,19 @@ onMounted(() => {
           </q-card-actions>
           <q-separator />
           <q-list>
-            <q-item
-              v-for="(col, index) in props.cols.filter(
-                (col:any) => col.name !== 'desc'
-              )"
+            <div
+              :class="`row q-pa-sm`"
+              :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
+              v-for="(col, index) in props.cols"
               :key="col.name"
-              :class="index % 2 !== 0 ? 'bg-grey-1' : ''"
             >
-              <q-item-section class="text-grey-6">
-                <q-item-label>{{ col.label }}</q-item-label>
-              </q-item-section>
-              <q-item-section class="text-dark">
-                <q-item-label>{{ col.value ? col.value : "-" }}</q-item-label>
-              </q-item-section>
-            </q-item>
+              <div class="col text-grey-6">
+                <div>{{ col.label }}</div>
+              </div>
+              <div class="col">
+                <div>{{ col.value ? col.value : "-" }}</div>
+              </div>
+            </div>
           </q-list>
         </q-card>
       </div>