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

src/modules/08_KPI/components/Evaluator/01_TabAll.vue

@@ -77,6 +77,33 @@ const pagination = ref({
           </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 @click="redirectViewDetail(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>
+                    <div v-if="col.name === 'name'">
+                      {{
+                        `${props.row.prefix}${props.row.firstname}  ${props.row.lastname}`
+                      }}
+                    </div>
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div></q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </template>
       <template v-slot:pagination="scope">
         ทั้งหมด {{ total }} รายการ
         <q-pagination

src/modules/08_KPI/components/Evaluator/02_TabOther.vue

@@ -152,6 +152,54 @@ function onClickApprove(type: string = "") {
           </q-td>
         </q-tr>
       </template>
+      <template v-slot:item="props">
+        <div
+          class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+          :style="props.selected ? 'transform: scale(0.95);' : ''"
+        >
+          <q-card
+            bordered
+            flat
+            :class="
+              props.selected
+                ? $q.dark.isActive
+                  ? 'bg-grey-9'
+                  : 'bg-grey-2'
+                : ''
+            "
+          >
+            <q-card-section>
+              <q-checkbox
+                dense
+                v-model="props.selected"
+                :label="props.row.name"
+              />
+            </q-card-section>
+            <q-separator />
+            <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>
+                    <div v-if="col.name === 'name'">
+                      {{
+                        `${props.row.prefix}${props.row.firstname}  ${props.row.lastname}`
+                      }}
+                    </div>
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div></q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </template>
       <template v-slot:pagination="scope">
         ทั้งหมด {{ total }} รายการ
         <q-pagination

src/modules/08_KPI/components/Tab/TabMain.vue

@@ -35,22 +35,14 @@ const splitterModel = ref<number>(12);
 </script>
 
 <template>
-  <q-splitter v-model="splitterModel" disable>
+  <q-splitter v-model="splitterModel" :horizontal="!$q.screen.gt.xs" disable>
     <template v-slot:before>
       <q-tabs
         v-model="store.tabMain"
-        vertical
+        :vertical="$q.screen.gt.xs"
         class="text-grey-7 text-weight-light"
         active-class="bg-blue-1 text-blue-8 text-weight-bold"
       >
-        <!-- <q-tab
-          class="hover-tab"
-          v-for="(tab, index) in itemsTab"
-          :key="index"
-          :name="tab.name"
-          :icon="tab.icon"
-          :label="tab.label"
-        /> -->
         <q-tab name="1" label="จัดทำข้อตกลง" />
         <q-tab
           name="2"
@@ -62,12 +54,6 @@ const splitterModel = ref<number>(12);
           label="รายงานผลสำเร็จของงาน"
           :disable="store.tabOpen < 3"
         />
-        <!-- <q-tab name="3" label="ผู้บังคับบัญชา">
-          <div class="text-caption">เหนือขึ้นไป</div>
-        </q-tab>
-        <q-tab name="4" label="ผู้บังคับบัญชา">
-          <div class="text-caption">เหนือขึ้นไปอีกชั้นหนึ่ง</div>
-        </q-tab> -->
         <q-tab name="5" label="ไฟล์เอกสาร" />
       </q-tabs>
     </template>