fix การทดลองปฏิบัติหน้าที่ราชการ

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

@@ -1,16 +1,166 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
+import { ref, defineAsyncComponent, onMounted } from "vue";
+import { useQuasar } from "quasar";
 
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import genReport from "@/plugins/genreport";
+
+const Header = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/Header.vue"
+    )
+);
 const FormReport = defineAsyncComponent(
   () =>
     import(
       "@/modules/05_placement/components/probation/FormEvaluation/FormReport.vue"
     )
 );
+
+import { useProbationDataStore } from "@/modules/05_placement/storeProbation";
+
+const $q = useQuasar();
+const router = useRouter();
+const route = useRoute();
+const probationStore = useProbationDataStore();
+const {
+  date2Thai,
+  messageError,
+  success,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  dialogMessageNotify,
+} = useCounterMixin();
+
+const tab = ref<string>("save1");
+const tabs = ref<any[]>([{ no: 1 }, { no: 2 }]);
+const dataArrayNumber = ref<number>(1);
+const evaluate = ref<any>([]);
+const assignId = ref<string>(route.params.form.toString());
+const personalId = ref<string>(route.params.personalId.toString());
+const isLoad = ref<boolean>(false);
+const fullName = ref<string>("");
+
+const dataResult = ref<any>();
+
+/**
+ * @param id assignId
+ */
+async function fecthAssign(id: string) {
+  isLoad.value = false;
+  showLoader();
+  await http
+    .get(config.API.evaluateReportcreate(id))
+    .then((res) => {
+      dataResult.value = res.data.result;
+      fullName.value = res.data.result.person.name;
+      console.log();
+
+      tabs.value = res.data.result.result.map((e: any, index: number) => {
+        return { no: index + 1, ...e };
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      isLoad.value = true;
+    });
+}
+
+/**
+ * download file
+ * @param type type
+ */
+async function onDownloadFile(type: string) {
+  const noNumber = tab.value ? Number(tab.value.charAt(4)) : "";
+  showLoader();
+  await http
+    .get(config.API.reportEvaluateResult(type, assignId.value) + `/${noNumber}`)
+    .then(async (res) => {
+      const data = res.data.result;
+      await genReport(
+        data,
+        `แบบรายงานการประเมินฯ${fullName.value}.${type}`,
+        type
+      );
+    })
+    .catch(async (e) => {
+      messageError($q, JSON.parse(await e.response.data.text()));
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+const changeTab = (tabVal: string) => {
+  tab.value = tabVal;
+  dataArrayNumber.value = Number(tabVal.charAt(4));
+};
+
+/** ไปหน้า page add */
+function addData() {
+  tabs.value.push({ no: 2 });
+}
+
+onMounted(() => {
+  fecthAssign(assignId.value);
+});
 </script>
 
 <template>
-  <div class="col-12 q-ma-sm">
+  <Header
+    v-if="tabs.length > 0"
+    :change-tab="changeTab"
+    :add-data="addData"
+    :loop="tabs.length"
+    :FileDownload="onDownloadFile"
+    :checkPermission="
+      probationStore?.dataPermissions?.tab6?.isEdit && tabs.length === 1
+    "
+  />
+
+  <q-tab-panels
+    v-model="tab"
+    animated
+    swipeable
+    vertical
+    transition-prev="jump-up"
+    transition-next="jump-up"
+    v-if="tabs.length > 0"
+    class="mt"
+  >
+    <q-tab-panel v-for="item in tabs" :name="`save${item.no}`" :key="item.no">
+      <FormReport :tab="tab" :data="dataResult" action="edit" v-if="isLoad" />
+    </q-tab-panel>
+  </q-tab-panels>
+
+  <!-- <div class="q-gutter-md" v-if="tabs.length === 0">
+    <div class="flex justify-center items-center q-my-md q-gutter-md">
+      <q-btn
+        v-if="!checkRoutePermisson"
+        outline
+        color="primary"
+        label="สร้างแบบประเมิน"
+        @click="addData"
+        :disable="probationStore.dataPermissions?.tab5.isEdit == false"
+      />
+    </div>
+  </div> -->
+
+  <!-- <div class="col-12 q-ma-sm">
     <FormReport />
-  </div>
+  </div> -->
 </template>
+
+<style lang="scss" scoped>
+.mt {
+  margin-top: 25px;
+}
+</style>