ต่อ api รายละเอียดการประเมินของ

src/modules/12_evaluatePersonal/components/Detail/Tab1.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref, reactive } from "vue";
 import { useQuasar } from "quasar";
+import { useRouter, useRoute } from "vue-router";
 
 import type {
   FormCommand,
@@ -25,15 +26,19 @@ import ViewStep7 from "@/modules/12_evaluatePersonal/components/Detail/viewstep/
 import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
 import { useCounterMixin } from "@/stores/mixin";
 
+import PopupHistory from "@/modules/12_evaluatePersonal/components/Detail/popupHistory.vue";
+
+const router = useRouter();
+const route = useRoute();
 const store = useEvaluateDetailStore();
 const mixin = useCounterMixin();
 const { dialogConfirm } = mixin;
 
 const $q = useQuasar();
-
+const modalHistory = ref<boolean>(false);
 const externalLink =
   "https://accreditation.ocsc.go.th/accreditation/search/curriculum";
-
+const id = ref<string>(route.params.id as string);
 const formCommand = reactive<FormCommand>({
   elementaryFullName: "",
   elementaryPosition: "",
@@ -168,6 +173,10 @@ async function saveStep9() {
   console.log("Save 9");
 }
 
+function onClickPopupHistory() {
+  modalHistory.value = !modalHistory.value;
+}
+
 onMounted(() => {
   store.step = 1;
 });
@@ -176,7 +185,20 @@ onMounted(() => {
 <template>
   <div class="row q-col-gutter-md">
     <div class="col-xs-12 col-sm-3">
-      <div class="toptitle">ประเมินชำนาญการ</div>
+      <div class="toptitle">
+        ประเมินชำนาญการ
+
+        <q-btn
+          flat
+          round
+          dense
+          color="primary"
+          icon="history"
+          @click="onClickPopupHistory"
+        >
+          <q-tooltip>ประวัติการประเมิน</q-tooltip>
+        </q-btn>
+      </div>
       <Stepper />
     </div>
 
@@ -199,11 +221,11 @@ onMounted(() => {
               : 'col-xs-12 col-sm-5 row'
           "
         >
-          <q-card flat bordered class="col-12 ">
+          <q-card flat bordered class="col-12">
             <q-card-section>
               <Step1 v-if="store.step === 1" />
               <Step2 v-if="store.step === 2" @update:form="updateformCommand" />
-              <Step3 v-if="store.step === 3" :step="store.step"/>
+              <Step3 v-if="store.step === 3" :step="store.step" />
               <Step4 v-if="store.step === 4" />
               <Step5 v-if="store.step === 5" />
               <Step6 v-if="store.step === 6" />
@@ -225,9 +247,10 @@ onMounted(() => {
           ></q-card>
         </div>
       </div>
-
     </div>
   </div>
+
+  <PopupHistory :modal="modalHistory" :close="onClickPopupHistory" :id="id" />
 </template>
 
 <style>