รายการการประเมินผลการปฏิบัติราชการระดับบุคคล => ปรับ UI

src/modules/02_transfer/views/AddTransfer.vue

@@ -59,10 +59,6 @@ const saveData = async () => {
 const createTransfer = async () => {
   showLoader();
   const formData = new FormData();
-  //   const blob = files.value.slice(0, files.value[0].size);
-  //   const newFile = new File(blob, nameFile.value, {
-  //     type: files.value[0].type,
-  //   });
   formData.append("Organization", tranferOrg.value);
   formData.append("Reason", noteReason.value);
   formData.append("file", files.value);
@@ -145,7 +141,9 @@ const fileUploadDoc = async (file: any) => {
             <div class="col-xs-12 col-sm-12">
               <div class="col-12 row q-pa-sm q-col-gutter-sm">
                 <q-input
-                  class="col-12"
+                  :class="
+                    routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'
+                  "
                   dense
                   outlined
                   v-model="tranferOrg"
@@ -154,7 +152,9 @@ const fileUploadDoc = async (file: any) => {
                   :rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยงานที่ขอโอนไป'}`]"
                 />
                 <q-input
-                  class="col-12"
+                  :class="
+                    routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'
+                  "
                   dense
                   outlined
                   v-model="noteReason"
@@ -166,7 +166,7 @@ const fileUploadDoc = async (file: any) => {
                 <div class="col-12 row" v-if="routeName == 'addTransfer'">
                   <q-file
                     v-model="files"
-                    class="col-xs-12 col-sm-12"
+                    class="col-xs-12 col-sm-12 inputgreen"
                     outlined
                     dense
                     lazy-rules

src/modules/02_transfer/views/Main.vue

@@ -234,7 +234,7 @@ const clickBack = () => {
             </div>
           </div>
           <div>
-            <q-table
+            <d-table
               flat
               bordered
               dense
@@ -290,52 +290,39 @@ 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(`/transfer/` + 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;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+<style scoped lang="scss"></style>