Refactoring code module 12_evaluatePersonal

src/modules/12_evaluatePersonal/components/Detail/viewstep/viewPDF.vue

@@ -43,8 +43,10 @@ watch(
   }
 );
 onMounted(() => {
-  numOfPages.value = store.numOfPagesStore;
-  pdfSrc.value = store.pdfSrcStore;
+  setTimeout(() => {
+    numOfPages.value = store.numOfPagesStore;
+    pdfSrc.value = store.pdfSrcStore;
+  }, 100);
 });
 </script>
 
@@ -140,73 +142,6 @@ onMounted(() => {
       </div>
     </template>
   </q-splitter>
-  <!-- <q-card class="bg-white">
-    <div class="q-pa-md">
-      <div class="row items-start items-center">
-        <div class="col">
-          <q-btn
-            padding="xs"
-            icon="mdi-chevron-left"
-            color="grey-2"
-            text-color="grey-5"
-            size="md"
-            class="my-auto"
-            @click="backPage"
-            :disable="page == 1"
-          />
-        </div>
-        <div class="col-12 col-md-auto">
-          <div class="q-pa-md flex">
-            หน้าที่ {{ page }} จาก {{ numOfPages }}
-          </div>
-        </div>
-        <div class="col text-right">
-          <q-btn
-            padding="xs"
-            icon="mdi-chevron-right"
-            color="grey-2"
-            text-color="grey-5"
-            size="md"
-            @click="nextPage"
-            :disable="page === numOfPages"
-          />
-        </div>
-      </div>
-      <div class="row items- items-center">
-        <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
-      </div>
-      <div class="row items- items-end">
-        <div class="col">
-          <q-btn
-            padding="xs"
-            icon="mdi-chevron-left"
-            color="grey-2"
-            text-color="grey-5"
-            size="md"
-            class="my-auto"
-            @click="backPage"
-            :disable="page == 1"
-          />
-        </div>
-        <div class="col-12 col-md-auto">
-          <div class="q-pa-md flex">
-            หน้าที่ {{ page }} จาก {{ numOfPages }}
-          </div>
-        </div>
-        <div class="col text-right">
-          <q-btn
-            padding="xs"
-            icon="mdi-chevron-right"
-            color="grey-2"
-            text-color="grey-5"
-            size="md"
-            @click="nextPage"
-            :disable="page === numOfPages"
-          />
-        </div>
-      </div>
-    </div>
-  </q-card> -->
 </template>
 
 <style scoped></style>

src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { onMounted, reactive } from "vue";
 
+import { useCounterMixin } from "@/stores/mixin";
+import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
+
 /** importType*/
 import type {
   EducationForm,
@@ -10,14 +13,9 @@ import type {
 /** importComponents*/
 import TableData from "@/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue";
 
-/** import Store*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
-
 /** use*/
 const mixin = useCounterMixin();
 const store = useEvaluateDetailStore();
-
 const {
   columnsCertificates,
   columnSalaries,
@@ -26,6 +24,9 @@ const {
 } = store;
 const { date2Thai, showLoader, hideLoader } = mixin;
 
+/**
+ * props
+ */
 const props = defineProps({
   data: {
     type: Object,
@@ -33,22 +34,23 @@ const props = defineProps({
   },
 });
 
+//ฟอร์มข้อมูลส่วนตัว
 const formDetail = reactive({
-  citizenId: "",
-  prefix: "",
-  fullName: "",
-  position: "",
-  oc: "",
-  salary: "",
-  positionLevel: "",
-  posNo: "",
-  birthDate: "",
-  govAge: "",
-  educations: [] as EducationForm[],
-  certificates: [],
-  salaries: [],
-  trainings: [],
-  assessments: [],
+  citizenId: "", //เลขบัตรประจำตัวประชาชน
+  prefix: "", //คำนำหน้า
+  fullName: "", //ชื่อ
+  position: "", //ตำแหน่ง
+  oc: "", //สังกัด
+  salary: "", //เงินเดือน
+  positionLevel: "",  //ระดับปัจจุบัน,ระดับที่ประเมิน
+  posNo: "", //ตำแหน่งเลขที่
+  birthDate: "", //วันเดือนปีเกิด
+  govAge: "", //อายุราชการ
+  educations: [] as EducationForm[], //ประวัติการศึกษา
+  certificates: [], //ใบอนุญาตประกอบวิชาชีพ
+  salaries: [], //ประวัติการรับราชการ
+  trainings: [], //ประวัติการฝึกอบรมดูงาน
+  assessments: [], //ประสบการณ์ในการปฏิบัติงาน
 });
 
 function formattedNumber(x: number) {
@@ -407,6 +409,7 @@ onMounted(() => {
     </div>
   </q-card>
 </template>
+
 <style scoped>
 .cardSp1 {
   border: 1px solid #d6dee1;

src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep3.vue

@@ -10,7 +10,7 @@ import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/Eval
 
 /** use*/
 const store = useEvaluateDetailStore();
-const modalPerview = ref<boolean>(false);
+const modalPerview = ref<boolean>(false);  //แสดง Popup เอกสาร
 </script>
 
 <template>