From 11594207d7374b479ab19c2e154b76d6553056da Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 5 Sep 2023 13:33:48 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20tab=20?=
 =?UTF-8?q?=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD=E0=B8=87=E0=B8=87=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/probation/MainDetail.vue       | 178 +++++++++++++-----
 src/modules/05_placement/storeAssign.ts       |   3 +
 2 files changed, 138 insertions(+), 43 deletions(-)

diff --git a/src/modules/05_placement/components/probation/MainDetail.vue b/src/modules/05_placement/components/probation/MainDetail.vue
index 2ce10c17c..e27c09e7a 100644
--- a/src/modules/05_placement/components/probation/MainDetail.vue
+++ b/src/modules/05_placement/components/probation/MainDetail.vue
@@ -1,21 +1,35 @@
 <script setup lang="ts">
 import { useRoute, useRouter } from "vue-router";
-import { ref, defineAsyncComponent } from "vue";
+import { ref, defineAsyncComponent, onMounted } from "vue";
+import { useAssignDataStore } from "@/modules/05_placement/storeAssign";
+const DataStore = useAssignDataStore();
 
 const ProbationFormAssign = defineAsyncComponent(
   () => import("@/modules/05_placement/components/probation/FormAssign.vue")
 );
 const TabsTemplate1 = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormEvaluation/Template1.vue")
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/Template1.vue"
+    )
 );
 const TabsTemplate2 = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormEvaluation/Template2.vue")
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/Template2.vue"
+    )
 );
 const TabsTemplate2Format2 = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue")
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue"
+    )
 );
 const TabsTemplate3 = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormEvaluation/Template3.vue")
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/Template3.vue"
+    )
 );
 
 const SummaryScore = defineAsyncComponent(
@@ -28,30 +42,69 @@ const SummarySurvey = defineAsyncComponent(
 const router = useRouter();
 const route = useRoute();
 const drawer = ref<boolean>(true);
-const activeTab = ref<string>("tab1");
+const activeTab = ref<string>("");
 const personalId = ref<string>(route.params.personalId.toString());
 
+onMounted(() => {
+  activeTab.value = DataStore.mainTab;
+});
+const changeTab = (tab: string) => {
+  DataStore.mainTab = tab;
+  activeTab.value = DataStore.mainTab;
+};
 </script>
 
 <template>
   <!-- <div class="toptitle text-dark col-12 row items-center">จัดการบัญชี 2</div> -->
   <q-card flat bordered class="col-12">
-    <q-layout view="hHh Lpr lff" container class="shadow-2 rounded-borders page-relative" style="height: 82vh">
+    <q-layout
+      view="hHh Lpr lff"
+      container
+      class="shadow-2 rounded-borders page-relative"
+      style="height: 82vh"
+    >
       <q-header class="bg-grey-1">
         <q-toolbar>
-          <div class="text-h6 text-weight-medium text-dark col-12 row items-center q-py-md">
-            <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm"
-              @click="router.push(`/probation/detail/${personalId}`)" />
+          <div
+            class="text-h6 text-weight-medium text-dark col-12 row items-center q-py-md"
+          >
+            <q-btn
+              icon="mdi-arrow-left"
+              unelevated
+              round
+              dense
+              flat
+              color="primary"
+              class="q-mr-sm"
+              @click="
+                router.push(`/probation/detail/${personalId}`),
+                  (DataStore.mainTab = 'tab1')
+              "
+            />
             การทดลองปฏิบัติหน้าที่ราชการ
           </div>
         </q-toolbar>
         <q-separator />
       </q-header>
-      <q-drawer v-model="drawer" show-if-above :width="150" :breakpoint="500" class="bg-grey-1" bordered>
+      <q-drawer
+        v-model="drawer"
+        show-if-above
+        :width="150"
+        :breakpoint="500"
+        class="bg-grey-1"
+        bordered
+      >
         <q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: 0 }">
           <q-list class="text-grey-9">
-            <q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense v-ripple
-              :active="activeTab == 'tab1'" @click="activeTab = 'tab1'">
+            <q-item
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              class="q-py-sm"
+              dense
+              v-ripple
+              :active="activeTab == 'tab1'"
+              @click="changeTab('tab1')"
+            >
               <!-- <q-item-section avatar style="min-width: 40px">
                 <q-icon size="18px" name="mdi-file" />
               </q-item-section> -->
@@ -59,68 +112,108 @@ const personalId = ref<string>(route.params.personalId.toString());
               <q-item-section>แบบมอบหมายงาน ฯ</q-item-section>
             </q-item>
 
-            <q-item dense class="q-py-sm" active-class="text-primary bg-teal-1 text-weight-medium" clickable v-ripple
-              :active="activeTab == 'tab2'" @click="activeTab = 'tab2'">
+            <q-item
+              dense
+              class="q-py-sm"
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              v-ripple
+              :active="activeTab == 'tab2'"
+              @click="changeTab('tab2')"
+            >
               <!-- <q-item-section avatar style="min-width: 40px">
                 <q-icon size="18px" name="mdi-file-edit" />
               </q-item-section> -->
 
-              <q-item-section>
-                แบบบันทึกผล
-              </q-item-section>
+              <q-item-section> แบบบันทึกผล </q-item-section>
             </q-item>
 
-            <q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense v-ripple
-              :active="activeTab == 'tab3'" @click="activeTab = 'tab3'">
+            <q-item
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              class="q-py-sm"
+              dense
+              v-ripple
+              :active="activeTab == 'tab3'"
+              @click="changeTab('tab3')"
+            >
               <!-- <q-item-section avatar style="min-width: 40px">
                 <q-icon size="18px" name="mdi-file-star" />
               </q-item-section> -->
 
               <q-item-section>
-                แบบประเมินผล<br /><div class="text-caption text-grey-7">(ผู้บังคับบัญชา)</div>
+                แบบประเมินผล<br />
+                <div class="text-caption text-grey-7">(ผู้บังคับบัญชา)</div>
               </q-item-section>
             </q-item>
 
-            <q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense v-ripple
-              :active="activeTab == 'tab4'" @click="activeTab = 'tab4'">
+            <q-item
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              class="q-py-sm"
+              dense
+              v-ripple
+              :active="activeTab == 'tab4'"
+              @click="changeTab('tab4')"
+            >
               <!-- <q-item-section avatar style="min-width: 40px">
                 <q-icon size="18px" name="mdi-file-star" />
               </q-item-section> -->
 
               <q-item-section>
-                แบบประเมินผล<br /><div class="text-caption text-grey-7">(คณะกรรมการ)</div>
+                แบบประเมินผล<br />
+                <div class="text-caption text-grey-7">(คณะกรรมการ)</div>
               </q-item-section>
             </q-item>
 
-            <q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense v-ripple
-              :active="activeTab == 'tab5'" @click="activeTab = 'tab5'">
+            <q-item
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              class="q-py-sm"
+              dense
+              v-ripple
+              :active="activeTab == 'tab5'"
+              @click="changeTab('tab5')"
+            >
               <!-- <q-item-section avatar style="min-width: 40px">
                 <q-icon size="18px" name="mdi-file-chart" />
               </q-item-section> -->
 
-              <q-item-section>
-                แบบรายงาน<br />การประเมินฯ
-              </q-item-section>
+              <q-item-section> แบบรายงาน<br />การประเมินฯ </q-item-section>
             </q-item>
-            <q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense v-ripple
-              :active="activeTab == 'tab6'" @click="activeTab = 'tab6'">
-              <q-item-section>
-                ผลการประเมินการ ฯ
-              </q-item-section>
+            <q-item
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              class="q-py-sm"
+              dense
+              v-ripple
+              :active="activeTab == 'tab6'"
+              @click="changeTab('tab6')"
+            >
+              <q-item-section> ผลการประเมินการ ฯ </q-item-section>
             </q-item>
-            <q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense v-ripple
-              :active="activeTab == 'tab7'" @click="activeTab = 'tab7'">
-              <q-item-section>
-                แบบสํารวจ<br/>ความคิดเห็น
-              </q-item-section>
+            <q-item
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              class="q-py-sm"
+              dense
+              v-ripple
+              :active="activeTab == 'tab7'"
+              @click="changeTab('tab7')"
+            >
+              <q-item-section> แบบสํารวจ<br />ความคิดเห็น </q-item-section>
             </q-item>
-
           </q-list>
         </q-scroll-area>
       </q-drawer>
       <q-page-container>
         <q-layout view="hHh Lpr lFf" container style="height: 72vh">
-          <q-tab-panels v-model="activeTab" animated class="shadow-2 rounded-borders" vertical>
+          <q-tab-panels
+            v-model="activeTab"
+            animated
+            class="shadow-2 rounded-borders"
+            vertical
+          >
             <q-tab-panel name="tab1">
               <ProbationFormAssign />
             </q-tab-panel>
@@ -144,11 +237,10 @@ const personalId = ref<string>(route.params.personalId.toString());
             <q-tab-panel name="tab6">
               <SummaryScore />
             </q-tab-panel>
-            
+
             <q-tab-panel name="tab7">
               <SummarySurvey />
             </q-tab-panel>
-
           </q-tab-panels>
         </q-layout>
       </q-page-container>
diff --git a/src/modules/05_placement/storeAssign.ts b/src/modules/05_placement/storeAssign.ts
index b699bd025..3aa2c7a4a 100644
--- a/src/modules/05_placement/storeAssign.ts
+++ b/src/modules/05_placement/storeAssign.ts
@@ -5,6 +5,8 @@ export const useAssignDataStore = defineStore("assign", () => {
   const assign = ref<any>([])
   const evaluate = ref<any>([])
   const tabs = ref<any>([]);
+  const mainTab = ref<string>('tab1')
+
 
   const assignOutput = ref<any>([])
   const director = ref<any>([])
@@ -28,5 +30,6 @@ export const useAssignDataStore = defineStore("assign", () => {
     tabs,
     assignOutput,
     director,
+    mainTab,
   };
 });