responsive ระบบการลา,ระบบลาออก

src/modules/03_retire/views/addRetire.vue

@@ -186,7 +186,7 @@ function downloadFile(data: string) {
             <div class="col-xs-12 col-sm-12">
               <div class="col-12 row q-pa-sm q-col-gutter-sm">
                 <q-input
-                  class="col-8"
+                  class="col-md-8 col-xs-12"
                   dense
                   outlined
                   v-model="tranferOrg"
@@ -196,7 +196,7 @@ function downloadFile(data: string) {
                   :rules="[(val:string) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`]"
                 />
                 <datepicker
-                  class="col-2"
+                  class="col-md-2 col-xs-12"
                   menu-class-name="modalfix"
                   v-model="dateCommand"
                   :locale="'th'"
@@ -240,7 +240,7 @@ function downloadFile(data: string) {
                   </template>
                 </datepicker>
                 <datepicker
-                  class="col-2"
+                  class="col-md-2 col-xs-12"
                   menu-class-name="modalfix"
                   v-model="dateLeave"
                   :locale="'th'"

src/modules/03_retire/views/main.vue

@@ -209,13 +209,11 @@ const clickBack = () => {
             </div>
           </div>
           <div>
-            <q-table
+            <d-table
               flat
               bordered
               dense
               row-key="id"
-              class="custom-table2"
-              style="max-height: 80vh"
               :rows="rows"
               :columns="columns"
               :visible-columns="visibleColumns"
@@ -264,49 +262,37 @@ const clickBack = () => {
                   </q-td>
                 </q-tr>
               </template>
-            </q-table>
+              <template #item="props">
+                <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+                  <q-card
+                    bordered
+                    flat
+                    @click="router.push(`/retire/` + props.row.id)"
+                  >
+                    <q-list>
+                      <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-card>
+                </div>
+              </template>
+            </d-table>
           </div>
         </q-card>
       </div>
     </div>
   </div>
 </template>
-<style scoped lang="scss">
-.custom-table2 {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-  }
-
-  .q-table td:nth-of-type(2) {
-    z-index: 3 !important;
-  }
-
-  .q-table th:nth-of-type(2),
-  .q-table td:nth-of-type(2) {
-    position: sticky;
-    left: 0;
-    z-index: 1;
-  }
-  .q-table thead tr:last-child th {
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+<style scoped lang="scss"></style>