update ทดลองงาน

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

@@ -364,7 +364,8 @@ const postData = async () => {
 
         <div class="col-12 row q-mt-xs">
           <div class="col-12 text-top2 row items-center">
-            ความเห็นของผู้มีอำนาจสั่งบรรจุตามมาตรา 52
+            คณะกรรมการ
+            <!-- ความเห็นของผู้มีอำนาจสั่งบรรจุตามมาตรา 52 -->
           </div>
           <div class="col-12 row q-col-gutter-md">
             <q-select
@@ -422,7 +423,8 @@ const postData = async () => {
 
         <div class="col-12 row q-mt-xs">
           <div class="col-12 text-top2 row items-center">
-            ผู้มีอำนาจสั่งบรรจุตามมาตรา 52
+            คณะกรรมการ
+            <!-- ผู้มีอำนาจสั่งบรรจุตามมาตรา 52 -->
           </div>
           <div class="col-12 row q-col-gutter-md">
             <q-select

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

@@ -38,7 +38,8 @@ const props = defineProps({
 });
 
 onMounted(async () => {
-  console.log(props.tab);
+  console.log("tab===>",props.tab)
+
   await fecthFormdata(assignId.value);
   if (props.tab !== undefined) {
     round.value = props.tab.charAt(4);

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

@@ -3,9 +3,22 @@ import { ref, watch, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
 const router = useRouter();
+const route = useRoute();
+const assignId = ref<string>(route.params.form.toString());
+const personalId = ref<string>(route.params.personalId.toString());
+  
 
 const tabHead = ref<string>("save1");
 const props = defineProps({
+  loop: {
+    type: Number,
+  },
+  addData: {
+    type: Function,
+    default() {
+      return "Default function";
+    },
+  },
   changeTab: {
     type: Function,
     default() {
@@ -14,31 +27,19 @@ const props = defineProps({
   },
   activeTab: String,
 });
-onMounted(() => {
-  console.log(props);
-});
 
 watch(tabHead, () => {
-  console.log(props);
-
   props.changeTab(tabHead.value);
 });
 const nextPage = () => {
-  if (props.activeTab) {
+  props.addData();
-    router.push(
-      "/probation/detail/add/08db721d-ade4-480e-8d84-0853946a0ea5/f4ce5428-98b6-4425-88fe-24c29db9f885"
-    );
-  }
-
-  // const url =
-  //   "/probation/detail/add/08db721d-ade4-480e-8d84-0853946a0ea5/f4ce5428-98b6-4425-88fe-24c29db9f885";
-  // window.open(url, "_blank");
 };
 </script>
 
 <template>
   <q-header class="bg-grey-1">
     <div class="bg-grey-1">
+      |{{tabHead}}|
       <div class="col-12 row q-gutter-x-md items-center">
         <q-tabs
           dense
@@ -47,42 +48,15 @@ const nextPage = () => {
           indicator-color="grey-1"
           class="text-grey-7"
         >
-          <q-tab name="save1" label="ครั้งที่ 1" />
-          <q-btn
-            size="12px"
-            flat
-            dense
-            icon="mdi-download"
-            :disable="tabHead !== 'save1'"
-            :color="tabHead !== 'save1' ? 'grey' : 'add'"
-          >
-            <q-tooltip>ดาวน์โหลด</q-tooltip>
-            <q-menu>
-              <q-list style="min-width: 150px">
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar
-                    ><q-icon color="red" name="mdi-file-pdf"
-                  /></q-item-section>
-                  <q-item-section>ไฟล์ .PDF</q-item-section>
-                </q-item>
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar
-                    ><q-icon color="blue" name="mdi-file-word"
-                  /></q-item-section>
-                  <q-item-section>ไฟล์ .docx</q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
 
-          <q-tab name="save2" label="ครั้งที่ 2" />
+        <q-tab v-for="i in loop" :name="`save${i}`" :label="`ครั้งที่ ${i}`">
           <q-btn
             size="12px"
             flat
             dense
             icon="mdi-download"
-            :disable="tabHead !== 'save2'"
+            :disable="tabHead !== 'save'+i"
-            :color="tabHead !== 'save2' ? 'grey' : 'add'"
+            :color="tabHead !== 'save'+i ? 'grey' : 'add'"
           >
             <q-tooltip>ดาวน์โหลด</q-tooltip>
             <q-menu>
@@ -102,6 +76,8 @@ const nextPage = () => {
               </q-list>
             </q-menu>
           </q-btn>
+</q-tab>
+
           <!-- <q-tab name="save3" label="ครั้งที่ 3" />
             <q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
                 :color="tab !== 'save3' ? 'grey' : 'add'">

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

@@ -1,16 +1,25 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent, watch, onMounted } from "vue";
+import { ref, defineAsyncComponent, watch, onMounted, onUpdated } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
+const Header = defineAsyncComponent(
+  () =>import("@/modules/05_placement/components/probation/FormEvaluation/Header.vue")
+);
+const FormSaveResult = defineAsyncComponent(
+  () => import( "@/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue")
+);
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+const router = useRouter();
 const route = useRoute();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, success } = mixin;
 const assignId = ref<string>(route.params.form.toString());
+const personalId = ref<string>(route.params.personalId.toString());
 
 const evaluate = ref<any>([]);
 const tabHead = ref<string>("save1");
@@ -18,98 +27,60 @@ const tabs = ref<any>([]);
 const tab = ref<string>("save1");
 const activeTab = ref<string>("tab2");
 
-const props = defineProps({
+onMounted(async () => {
-  activeTab: String,
+  await fecthAssign(assignId.value);
+  tab.value ='save1'
 });
-onMounted(() => {
-  console.log(props.activeTab);
-  // fecthAssign(assignId.value);
-});
-watch(props, () => {
-  console.log(props);
-});
-// const fecthAssign = async (id: string) => {
-//   showLoader();
-//   await http
-//     .get(config.API.formevaluate(id))
-//     .then((res: any) => {
-//       evaluate.value = res.data.data.evaluate;
-//       tabs.value = evaluate.value;
 
-//       console.log(tabs.value);
+const fecthAssign = async (id: string) => {
-//     })
+  showLoader();
-//     .catch((e: any) => {
+  await http
-//       console.log(e);
+    .get(config.API.formevaluate(id))
-//       messageError($q, e);
+    .then((res: any) => {
-//     })
+      evaluate.value = res.data.data.evaluate;
-//     .finally(() => {
+      tabs.value = evaluate.value;
-//       hideLoader();
+      // console.log(tabs.value);
-//     });
+    })
-// };
+    .catch((e: any) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 
 const changeTab = (tabVal: string) => {
-  console.log(tabVal);
+  console.log("tabVal===>",tabVal);
   tab.value = tabVal;
 };
-const nextPage = () => {
+const addData = () => {
-  const newTabLabel = tabs.value.length + 1;
+  router.push(
-  tabs.value.push({ no: newTabLabel });
+      `/probation/detail/add/${personalId.value}/${assignId.value}`
+    );
 };
-
-const Header = defineAsyncComponent(
-  () =>
-    import(
-      "@/modules/05_placement/components/probation/FormEvaluation/Header.vue"
-    )
-);
-const FormSaveResult = defineAsyncComponent(
-  () =>
-    import(
-      "@/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue"
-    )
-);
 </script>
 
 <template>
-  <Header :change-tab="changeTab" :activeTab="activeTab" />
+  <Header :change-tab="changeTab" :activeTab="activeTab" :add-data="addData" :loop="tabs.length"/>
   <!-- <q-header class="bg-grey-1">
     <div class="bg-grey-1">
       <div class="col-12 row q-gutter-xs-md items-center">
-        <q-tabs
+        <q-tabs dense v-model="tabHead" active-class="text-primary text-weight-medium" indicator-color="grey-1"
-          dense
+          class="text-grey-7">
-          v-model="tabHead"
+          <q-tab v-for="tabData in tabs" :key="tabData.no" :name="tabData.no" :label="'ครั้งที่' + tabData.no"
-          active-class="text-primary text-weight-medium"
+            @click="changeTab('save' + tabData.no)">
-          indicator-color="grey-1"
+            <q-btn size="12px" flat dense icon="mdi-download" :disable="tabHead !== tabData.no"
-          class="text-grey-7"
+              :color="tabHead !== tabData.no ? 'grey' : 'add'">
-        >
-          <q-tab
-            v-for="tabData in tabs"
-            :key="tabData.no"
-            :name="tabData.no"
-            :label="'ครั้งที่' + tabData.no"
-            @click="changeTab('save' + tabData.no)"
-          >
-            <q-btn
-              size="12px"
-              flat
-              dense
-              icon="mdi-download"
-              :disable="tabHead !== tabData.no"
-              :color="tabHead !== tabData.no ? 'grey' : 'add'"
-            >
               <q-tooltip>ดาวน์โหลด</q-tooltip>
               <q-menu>
                 <q-list style="min-width: 150px">
                   <q-item clickable v-close-popup>
-                    <q-item-section avatar
+                    <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
-                      ><q-icon color="red" name="mdi-file-pdf"
-                    /></q-item-section>
                     <q-item-section>ไฟล์ .PDF</q-item-section>
                   </q-item>
                   <q-item clickable v-close-popup>
-                    <q-item-section avatar
+                    <q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
-                      ><q-icon color="blue" name="mdi-file-word"
-                    /></q-item-section>
                     <q-item-section>ไฟล์ .docx</q-item-section>
                   </q-item>
                 </q-list>
@@ -126,19 +97,15 @@ const FormSaveResult = defineAsyncComponent(
       <q-separator />
     </div>
   </q-header> -->
-  <!-- <q-page-container>
+  <q-page-container>
     <q-tab-panels v-model="tab" animated>
-      <q-tab-panel
+      <q-tab-panel v-for="tabName in tabs" :key="tabName" :name="'save' + tabName.no">
-        v-for="tabName in tabs"
-        :key="tabName"
-        :name="'save' + tabName.no"
-      >
         <FormSaveResult :tab="tab" />
       </q-tab-panel>
     </q-tab-panels>
-  </q-page-container> -->
+  </q-page-container>
 
-  <q-page-container>
+  <!-- <q-page-container>
     <q-tab-panels v-model="tab" animated>
       <q-tab-panel name="save1">
         <FormSaveResult :tab="tab" />
@@ -148,5 +115,5 @@ const FormSaveResult = defineAsyncComponent(
         <FormSaveResult :tab="tab" />
       </q-tab-panel>
     </q-tab-panels>
-  </q-page-container>
+  </q-page-container> -->
 </template>