แก้ไข Form ทดลองงาน

src/modules/05_placement/components/probation/FormEvaluation/Template2.vue

@@ -1,21 +1,74 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
-const tab = ref<string>("save1");
-const changeTab = (tabVal: string) => {
-  tab.value = tabVal
-}
+import { ref, defineAsyncComponent, onMounted } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
 const Header = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormEvaluation/Header.vue")
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/Header.vue"
+    )
 );
 const FormEvaluate = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue")
-)
-</script>  
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue"
+    )
+);
+
+const router = useRouter();
+const route = useRoute();
+const mixin = useCounterMixin();
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError, success } = mixin;
+const assignId = ref<string>(route.params.form.toString());
+const personalId = ref<string>(route.params.personalId.toString());
+
+const tab = ref<string>("save1");
+const tabs = ref<any>([]);
+const activeTab = ref<string>("tab2");
+
+const changeTab = (tabVal: string) => {
+  tab.value = tabVal;
+};
+
+onMounted(() => {
+  fecthAssign(assignId.value);
+});
+
+const fecthAssign = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.evaluateCreate(id))
+    .then((res: any) => {
+      if (res.data.data.evaluate_no > 2) {
+        tabs.value = res.data.data.evaluate;
+      } else tabs.value.push({ no: 1 }, { no: 2 });
+    })
+    .catch((e: any) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const addData = () => {
+  router.push(`/probation/detail/addevalua/${personalId.value}/${assignId.value}`);
+};
+</script>
 
 <template>
-  <Header :change-tab="changeTab" />
+  <Header
+    :change-tab="changeTab"
+    :activeTab="activeTab"
+    :loop="tabs.length"
+    :add-data="addData"
+  />
 
-  <q-page-container>
+  <!-- <q-page-container>
     <q-tab-panels v-model="tab" animated>
       <q-tab-panel name="save1">
         <FormEvaluate :tab="tab" />
@@ -25,5 +78,16 @@ const FormEvaluate = defineAsyncComponent(
         <FormEvaluate :tab="tab"/>
       </q-tab-panel>
     </q-tab-panels>
+  </q-page-container> -->
+  <q-page-container>
+    <q-tab-panels v-model="tab" animated>
+      <q-tab-panel
+        v-for="tabName in tabs"
+        :key="tabName"
+        :name="'save' + tabName.no"
+      >
+        <FormEvaluate :tab="tab" />
+      </q-tab-panel>
+    </q-tab-panels>
   </q-page-container>
-</template>
+</template>