ui หน้ารายการสอบ

src/modules/01_exam/views/ExamMain.vue

@@ -6,8 +6,9 @@
     >
   </q-toolbar>
 
-  <q-card flat class="">
-    <data-table
+  <div class="q-pa-md q-gutter-md">
+    <CardExam v-for="row in ExamData" :key="row.id" :items="row" @click="next(row.id)" />
+    <!-- <data-table
       style="height: 80vh"
       :rows="rows"
       :columns="columns"
@@ -48,8 +49,8 @@
           </q-td>
         </q-tr>
       </template>
-    </data-table>
-  </q-card>
+    </data-table> -->
+  </div>
 </template>
 <script setup lang="ts">
 import { ref, watch } from 'vue'
@@ -57,7 +58,9 @@ import { useRouter } from 'vue-router'
 import { useExamDataStore } from '@/modules/01_exam/store'
 import type { RequestItemsObject, Columns } from '@/modules/01_exam/interface/request/Main'
 import type { ResponseObject } from '@/modules/01_exam/interface/response/Main'
-import type { Pagination } from '@/modules/01_exam/interface/index/Main'
+import type { Pagination, ExamCard } from '@/modules/01_exam/interface/index/Main'
+import { defaultCard } from '@/modules/01_exam/interface/index/Main'
+import CardExam from '../components/ExamCrad.vue'
 
 const router = useRouter()
 const store = useExamDataStore()
@@ -67,6 +70,7 @@ const initialPagination = ref<Pagination>({
   rowsPerPage: 0
 })
 
+const ExamData = ref<ExamCard[]>(defaultCard)
 const visibleColumns = ref<String[]>([])
 examData.main.columns.length == 0
   ? (visibleColumns.value = [