ปรับ ui Responensive

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

@@ -36,10 +36,10 @@ const splitterModel = ref<number>(12);
 
 <template>
   <q-splitter
+    v-if="$q.screen.gt.xs"
     v-model="splitterModel"
     :horizontal="!$q.screen.gt.xs"
     disable
-    v-if="$q.screen.gt.xs"
   >
     <template v-slot:before>
       <q-tabs
@@ -89,20 +89,38 @@ const splitterModel = ref<number>(12);
   </q-splitter>
 
   <q-list bordered class="rounded-borders" v-else>
-    <q-expansion-item expand-separator label="จัดทำข้อตกลง">
-      <Assessment />
+    <q-expansion-item
+      expand-separator
+      label="จัดทำข้อตกลง"
+      @click="store.tabMain = '1'"
+    >
+      <Assessment v-if="store.tabMain === '1'" />
     </q-expansion-item>
 
-    <q-expansion-item expand-separator label="รายงานความก้าวหน้า">
-      <Assessment :type="'evaluator'" />
+    <q-expansion-item
+      expand-separator
+      label="รายงานความก้าวหน้า"
+      @click="store.tabMain = '2'"
+      :disable="store.tabOpen < 2"
+    >
+      <Assessment v-if="store.tabMain === '2'" :type="'evaluator'" />
     </q-expansion-item>
 
-    <q-expansion-item expand-separator label="รายงานผลสำเร็จของงาน">
-      <Assessment :type="'commander'" />
+    <q-expansion-item
+      expand-separator
+      label="รายงานผลสำเร็จของงาน"
+      @click="store.tabMain = '3'"
+      :disable="store.tabOpen < 3"
+    >
+      <Assessment v-if="store.tabMain === '3'" :type="'commander'" />
     </q-expansion-item>
 
-    <q-expansion-item expand-separator label="ไฟล์เอกสาร">
-      <File />
+    <q-expansion-item
+      expand-separator
+      label="ไฟล์เอกสาร"
+      @click="store.tabMain = '5'"
+    >
+      <File v-if="store.tabMain === '5'" />
     </q-expansion-item>
   </q-list>
 </template>