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

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>