ปรับ responsive

src/modules/06_evaluate/components/TableListEvaluate.vue

@@ -152,7 +152,7 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
 </script>
 
 <template>
-  <q-table
+  <d-table
     ref="table"
     flat
     bordered
@@ -207,6 +207,52 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
         </q-td>
       </q-tr>
     </template>
+    <template #item="props">
+      <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+        <q-card bordered flat>
+          <q-list @click="redirectToDetail(props.row)">
+            <q-item
+              v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+              :key="col.name"
+            >
+              <q-item-section>
+                <q-item-label caption>{{ col.label }}</q-item-label>
+
+                <q-item-label v-if="col.name === 'no'">
+                  {{ props.rowIndex + 1 }}
+                </q-item-label>
+
+                <q-item-label v-else>{{ col.value }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+          <q-separator
+            v-if="
+              props.row.step === 'CHECK_SPEC' ||
+              props.row.step === 'PREPARE_DOC_V1' ||
+              props.row.step === 'CHECK_DOC_V1'
+            "
+          />
+          <q-card-actions align="around">
+            <q-btn
+              v-if="
+                props.row.step === 'CHECK_SPEC' ||
+                props.row.step === 'PREPARE_DOC_V1' ||
+                props.row.step === 'CHECK_DOC_V1'
+              "
+              flat
+              dense
+              round
+              color="red"
+              icon="delete"
+              @click.stop="onCkilckDelete(props.row.id)"
+            >
+              <q-tooltip>ลบ</q-tooltip>
+            </q-btn>
+          </q-card-actions>
+        </q-card>
+      </div>
+    </template>
     <template v-slot:pagination="scope">
       ทั้งหมด {{ store.row.length }} รายการ
       <q-pagination
@@ -219,7 +265,7 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
         :max="Number(props.maxPage)"
       ></q-pagination>
     </template>
-  </q-table>
+  </d-table>
 </template>
 
 <style lang="scss" scoped>