ปรับ TableView ทะเบียนประวัติ

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>