Refactoring code module 12_evaluatePersonal

src/modules/11_discipline/interface/request/director.ts

@@ -6,7 +6,6 @@ interface FormData {
   position: string;
   phone: string;
   email: string;
-  qualification: string;
 }
 interface FormDataPost {
   personalId: string;

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

@@ -1,7 +1,10 @@
 <script setup lang="ts">
-import { onMounted, ref, reactive } from "vue";
+import { onBeforeMount, ref, reactive } from "vue";
 import { useQuasar } from "quasar";
+
 import { useRoute } from "vue-router";
+import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -25,17 +28,17 @@ import ViewStep7 from "@/modules/12_evaluatePersonal/components/Detail/viewstep/
 import PopupHistory from "@/modules/12_evaluatePersonal/components/Detail/popupHistory.vue";
 
 /** importStor*/
-import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
-import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
+const $q = useQuasar();
 const route = useRoute();
 const store = useEvaluateDetailStore();
 const mixin = useCounterMixin();
-const $q = useQuasar();
-
 const { showLoader, hideLoader, messageError } = mixin;
 
+/**
+ * props
+ */
 const props = defineProps({
   data: {
     type: Object,
@@ -44,34 +47,19 @@ const props = defineProps({
 });
 
 const id = ref<string>(route.params.id as string); // id รายการประเมิน
-const isLoadView = ref<boolean>(false);
+const isLoadView = ref<boolean>(false); //แสดง view
-
+const modalHistory = ref<boolean>(false); //แสดง popup ประวัติการประเมิน
-const modalHistory = ref<boolean>(false);
+// ข้อมูลผู้เซ็นเอกสาร
 const formCommand = reactive<FormCommand>({
-  elementaryFullName: "",
+  elementaryFullName: "", //ชื่อผู้บังคับบัญชาชั้นต้น
-  elementaryPosition: "",
+  elementaryPosition: "", //ตำแหน่งผู้บังคับบัญชาชั้นต้น
-  abovelevelFullname: "",
+  abovelevelFullname: "", //ชื่อผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
-  abovelevelPosition: "",
+  abovelevelPosition: "", //ตำแหน่งผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
 });
 
-const elementaryFullNameRef = ref<object | null>(null);
+/**
-const elementaryPositonRef = ref<object | null>(null);
+ * ฟังก์ชันเช็คขั้นตอนการประเมิน
-const abovelevelFullnameRef = ref<object | null>(null);
+ */
-const abovelevelPositionRef = ref<object | null>(null);
-
-function updateformCommand(val: any, ref: any) {
-  formCommand.elementaryFullName = val.elementaryFullName;
-  formCommand.elementaryPosition = val.elementaryPosition;
-  formCommand.abovelevelFullname = val.abovelevelFullname;
-  formCommand.abovelevelPosition = val.abovelevelPosition;
-
-  elementaryFullNameRef.value = ref.elementaryFullNameRef;
-  elementaryPositonRef.value = ref.elementaryPositonRef;
-  abovelevelFullnameRef.value = ref.abovelevelFullnameRef;
-  abovelevelPositionRef.value = ref.abovelevelPositionRef;
-}
-
-/** function เช็คขั้นตอน*/
 async function fetchCheckStep() {
   isLoadView.value = false;
   showLoader();
@@ -114,12 +102,28 @@ async function fetchCheckStep() {
     });
 }
 
-/** function เปิด,ปิด ประวัติการประเมิน*/
+/**
+ * ฟังก์ชันเปิด,ปิด popup ประวัติการประเมิน
+ */
 function onClickPopupHistory() {
   modalHistory.value = !modalHistory.value;
 }
 
-onMounted(async () => {
+/**
+ * ฟังก์ชันอัปเดทข้อมูลผู้เซ็นเอกสาร
+ * @param val ข้อมูลผู้เซ็นเอกสาร
+ */
+function updateformCommand(val: FormCommand) {
+  formCommand.elementaryFullName = val.elementaryFullName;
+  formCommand.elementaryPosition = val.elementaryPosition;
+  formCommand.abovelevelFullname = val.abovelevelFullname;
+  formCommand.abovelevelPosition = val.abovelevelPosition;
+}
+
+/**
+ * ทำงานเมือ Components ถูกเรียกใช้งาน
+ */
+onBeforeMount(async () => {
   await fetchCheckStep();
 });
 </script>
@@ -196,14 +200,11 @@ onMounted(async () => {
           class="col-xs-12 col-sm-7 row"
           v-if="store.step === 1 || store.step === 3 || store.step === 7"
         >
-          <!-- <q-card flat bordered class="col-12"> -->
           <div class="col-12">
             <ViewStep1 v-if="store.step === 1" :data="data" />
             <ViewStep3 v-if="store.step === 3" />
             <ViewStep7 v-if="store.step === 7" />
           </div>
-          <!-- <q-card-section> </q-card-section -->
-          <!-- ></q-card> -->
         </div>
       </div>
     </div>

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

@@ -1,35 +1,40 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
+
 import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import type {
+  Directors,
+  Meetings,
+} from "@/modules/12_evaluatePersonal/interface/response/Main";
+
 /** importComponents*/
 import CardDirector from "@/modules/12_evaluatePersonal/components/Detail/viewTab2/CardDirector.vue";
 import CardMeet from "@/modules/12_evaluatePersonal/components/Detail/viewTab2/CardMeet.vue";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-
 /** use*/
 const $q = useQuasar();
 const route = useRoute();
 const mixin = useCounterMixin();
-
 const { showLoader, hideLoader, messageError } = mixin;
-const id = ref<string>(route.params.id as string);
 
-const director = ref<any[]>();
+const id = ref<string>(route.params.id as string); //id ประเมิน
-const meeting = ref<any[]>();
+const director = ref<Directors[]>([]); //รายการข้อมูลกรรมการ
+const meeting = ref<Meetings[]>([]); //รายการข้อมูลการประชุม
 
-/** function เรียกข้อมูลกรรมการ */
+/**
+ * function เรียกข้อมูลกรรมการ
+ */
 async function getList() {
   showLoader();
   await http
     .get(config.API.evaluationListData(id.value))
-    .then((res) => {
+    .then(async (res) => {
-      const data = res.data.result;
+      const data = await res.data.result;
       director.value = data.directors;
       meeting.value = data.meetings;
     })
@@ -51,8 +56,8 @@ onMounted(async () => {
     <div class="toptitle">กรรมการและการประชุม</div>
 
     <div class="row col-12 q-gutter-md">
-      <CardDirector :data="director" :fetchdata="getList" />
+      <CardDirector :data="director" :fetch-data="getList" />
-      <CardMeet :data="meeting" :fetchdata="getList" />
+      <CardMeet :data="meeting" :fetch-data="getList" />
     </div>
   </div>
 </template>

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

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
-import type { QTableProps } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import type { QTableProps } from "quasar";
+
 /** importComponents */
 import HeaderDialog from "@/components/DialogHeader.vue";
 
@@ -14,7 +16,6 @@ import { useCounterMixin } from "@/stores/mixin";
 /**use*/
 const mixins = useCounterMixin();
 const $q = useQuasar();
-
 const { showLoader, hideLoader, date2Thai, messageError } = mixins;
 
 /** รับ props Tab 1  */
@@ -33,6 +34,7 @@ const props = defineProps({
   },
 });
 
+const row = ref<any[]>([]); //ข้อมูลรายการประเมิน
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -71,10 +73,9 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const row = ref<any>();
 
 /**
- * functio เรียกข่้อมูลประวัติการประเมิน
+ * ฟังก์ชันเรียกข้อมูลประวัติการประเมิน
  * @param id  ประเมิน
  */
 async function fetchListHistory(id: string) {
@@ -105,6 +106,12 @@ async function fetchListHistory(id: string) {
     });
 }
 
+/**
+ * ดูการเปลี่ยนแปลงของ modal
+ *
+ * เมื่อ modal เป็น true เรียก 'fetchListHistory' เพิ่อดึงข้อมูลประวัติการประเมิน
+ */
+
 watch(
   () => props.modal,
   () => {
@@ -151,8 +158,8 @@ watch(
                     <div v-if="col.name == 'no'">
                       {{ props.rowIndex + 1 }}
                     </div>
-                    <div>
+                    <div v-else>
-                      {{ col.value }}
+                      {{ col.value ?? "-" }}
                     </div>
                   </q-td>
                 </q-tr>

src/modules/12_evaluatePersonal/components/Detail/step/step1.vue

@@ -11,6 +11,7 @@ const props = defineProps({
   },
 });
 
+//ฟอร์มตรวจสอบคุณสมบัติ
 const formData = reactive<FormFeature>({
   isEducationalQft: props.data.isEducationalQft, // คุณวุฒิการศึกษา
   isGovermantServiceHtr: props.data.isGovermantServiceHtr, // ประวัติการรับราชการ

src/modules/12_evaluatePersonal/components/Detail/step/step2.vue

@@ -9,23 +9,25 @@ import type { FormCommand } from "@/modules/12_evaluatePersonal/interface/index/
 
 import { useCounterMixin } from "@/stores/mixin";
 const route = useRoute();
-const id = ref<string>(route.params.id as string);
 const $q = useQuasar();
 
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError } = mixin;
 
+const id = ref<string>(route.params.id as string); //id ประเมิน
 /** ฟรอมจัดเตรียมเอกสารเล่ม 1*/
-const author = ref<string>("");
+const subject = ref<string>(""); //ชื่อผลงาน
-const subject = ref<string>("");
+const author = ref<string>(""); //เจ้าของผลงาน
 const formCommand = reactive<FormCommand>({
-  elementaryFullName: "",
+  elementaryFullName: "", //ชื่อ-นามสกุลผู้บังคับบัญชาชั้นต้น
-  elementaryPosition: "",
+  elementaryPosition: "", //ตำแหน่งผู้บังคับบัญชาชั้นต้น
-  abovelevelFullname: "",
+  abovelevelFullname: "", //ชื่อ-นามสกุลผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
-  abovelevelPosition: "",
+  abovelevelPosition: "", //ตำแหน่งผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
 });
 
-/** function เรียกข้อมลผลงาน*/
+/**
+ * function เรียกข้อมลผลงาน
+ */
 async function fetchSigner() {
   showLoader();
   await http
@@ -54,6 +56,10 @@ async function fetchSigner() {
       }, 1000);
     });
 }
+
+/**
+ * ทำงานเมือ Components ถูกเรียกใช้งาน
+ */
 onMounted(async () => {
   await fetchSigner();
 });

src/modules/12_evaluatePersonal/components/Detail/step/step3.vue

@@ -2,6 +2,7 @@
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { usePDF } from "@tato30/vue-pdf";
+
 import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -16,11 +17,10 @@ const route = useRoute();
 const $q = useQuasar();
 const store = useEvaluateDetailStore();
 const mixin = useCounterMixin();
-
 const { showLoader, hideLoader, messageError } = mixin;
 
-const id = ref<string>(route.params.id as string);
+const id = ref<string>(route.params.id as string); //id ประเมิน
-const selectedItem = ref<number>(1);
+const selectedItem = ref<number>(1); //ไฟล์ที่เลือก
 
 /**
  * funtion เลือกไฟล์
@@ -36,19 +36,21 @@ function handleItemClick(itemNumber: number) {
  * function เรียกไฟล์
  * @param volume index item
  */
-function getFile(volume: number) {
+async function getFile(volume: number) {
   showLoader();
   const fileText = numToThai(volume);
-  http
+  await http
     .get(config.API.evaluationFilebyId("เล่ม 1", id.value, fileText))
-    .then((res) => {
+    .then(async (res) => {
       const link = res.data.downloadUrl;
       const type = res.data.fileType;
-      getPDF(link, type);
+      await getPDF(link, type);
     })
     .catch((e) => {
       messageError($q, e);
       hideLoader();
+
+      store.pdfSrcStore = undefined;
     });
 }
 
@@ -57,7 +59,7 @@ function getFile(volume: number) {
  * @param url linkLoadFile
  * @param type ประเภทไฟล์
  */
-function getPDF(url: string, type: string) {
+async function getPDF(url: string, type: string) {
   axios
     .get(url, {
       method: "GET",

src/modules/12_evaluatePersonal/components/Detail/step/step4.vue

@@ -1,42 +1,33 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { checkPermission } from "@/utils/permissions";
-import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
+
+import { useRoute } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
+import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
 import axios from "axios";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReport from "@/plugins/genreport";
 
-/** importType*/
-import type { PersonInformation } from "@/modules/12_evaluatePersonal/interface/response/evalute";
-
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
-
 /** use*/
 const route = useRoute();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const store = useEvaluateDetailStore();
 
-const {
+const { showLoader, hideLoader, messageError, success, dialogConfirm } = mixin;
-  date2Thai,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-  dialogConfirm,
-} = mixin;
 
-const id = ref<string>(route.params.id as string);
+const id = ref<string>(route.params.id as string); //id ประเมิน
 
-const profile = ref<any>();
+const myForm = ref<any>();
-const messenger = ref<string>("");
+const subject = ref<string>(""); //ชื่อผลงาน
-const title = ref<string>("");
+const author = ref<string>(""); //เจ้าของผลงาน
-const modalEvaluation = ref<boolean>(false);
+const messenger = ref<string>(""); //ข้อความ
-const fileEvaluationUpload = ref<any>();
+const title = ref<string>(""); //หัวข้อ
+const modalEvaluation = ref<boolean>(false); //แสดง popup ติดต่อผู้ขอประเมิน
+const fileEvaluationUpload = ref<any>(); //ไฟล์
 const fileEvaluationUploadRef = ref<any>();
 const files = [
   {
@@ -73,7 +64,9 @@ const files = [
   },
 ];
 
-/** function ดาวน์โหลดไฟล์ต้นแบบ*/
+/**
+ * function ดาวน์โหลดไฟล์ต้นแบบ
+ */
 async function onClickDowloadFile(
   tp: string,
   templateName: string,
@@ -98,7 +91,9 @@ async function onClickDowloadFile(
     .finally(() => {});
 }
 
-/** function เปิด popup ติดต่อผู้ขอประเมิน */
+/**
+ *  function เปิด popup ติดต่อผู้ขอประเมิน
+ */
 function openPopUp() {
   modalEvaluation.value = true;
 }
@@ -239,21 +234,20 @@ async function upLoadFile(file: any) {
           },
         },
       })
-      .then((res) => {
+      .then(async (res) => {
         const foundKey: any = Object.keys(res.data).find(
           (key) =>
             res.data[key]?.fileName !== undefined &&
             res.data[key]?.fileName !== ""
         );
         const link = res.data[foundKey]?.uploadUrl;
-        fileUpLoad(link);
+        await fileUpLoad(link);
       })
       .catch((e) => {
         messageError($q, e);
-        hideLoader();
       })
       .finally(() => {
-        // hideLoader();
+        hideLoader();
       });
   }
 }
@@ -262,25 +256,28 @@ async function upLoadFile(file: any) {
  * function อัปโหลดไฟล์
  * @param url link อัปโหลด
  */
-function fileUpLoad(url: string) {
+async function fileUpLoad(url: string) {
+  showLoader();
   axios
     .put(url, fileEvaluationUpload.value, {
       headers: { "Content-Type": fileEvaluationUpload.value?.type },
       onUploadProgress: (e) => console.log(e),
     })
-    .then(() => {
+    .then(async () => {
-      checkDoc10();
+      await checkDoc10();
       success($q, "อัปโหลดไฟล์สำเร็จ");
     })
     .catch((e) => {
       messageError($q, e);
+    })
+    .finally(() => {
       hideLoader();
     });
 }
 
-const myForm = ref<any>();
+/**
-
+ *  fiunction ส่งข้อความ
-/** fiunction ส่งข้อความ*/
+ */
 async function sentMessenger() {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
@@ -307,7 +304,9 @@ async function sentMessenger() {
 }
 
 const download10Url = ref<string>("");
-/** function เช็คไฟล์อัปโหลด*/
+/**
+ *  function เช็คไฟล์อัปโหลด
+ */
 async function checkDoc10() {
   showLoader();
   await http
@@ -319,42 +318,16 @@ async function checkDoc10() {
       )
     )
     .then(async (res) => {
-      download10Url.value = res.data.downloadUrl;
+      download10Url.value = await res.data.downloadUrl;
-      await fetchProfile();
-    })
-    .catch(() => {
-      //   messageError($q, e);
     })
     .finally(() => {
-      setTimeout(() => {
+      hideLoader();
-        hideLoader();
-      }, 2000);
     });
 }
 
-/** function เรียกข้แมูลคุณสมบัติ*/
+/**
-async function fetchProfile() {
+ * function เรียกข้อมูลผลงาน
-  showLoader();
+ */
-  await http
-    .get(config.API.evaluateGetDetail(id.value))
-    .then((res) => {
-      const data = res.data.result;
-      profile.value = data;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1500);
-    });
-}
-
-const author = ref<string>("");
-const subject = ref<string>("");
-
-/** function เรียกข้อมูลผลงาน*/
 async function fetchDataSigner() {
   showLoader();
   await http
@@ -422,14 +395,14 @@ onMounted(async () => {
     </div>
 
     <!-- ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10) -->
-    <div class="col-12">
+    <div class="col-12" v-if="store.currentStep == 4">
       <q-card bordered style="border: 1px solid #d6dee1">
         <div
           class="text-weight-medium row col-12 bg-grey-1 q-py-sm q-px-md items-center"
         >
           <div>ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)</div>
           <q-space />
-          <div v-if="store.currentStep == 4">
+          <div>
             <q-btn
               icon="download"
               color="indigo"

src/modules/12_evaluatePersonal/components/Detail/step/step5.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import axios from "axios";
+
+import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { checkPermission } from "@/utils/permissions";
-import { useQuasar } from "quasar";
-import { useRoute } from "vue-router";
-import axios from "axios";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -25,13 +26,11 @@ const {
   success,
 } = mixin;
 
-const page = ref<number>(1);
+const id = ref<string>(route.params.id as string); //id ประเมิน
-const numOfPages = ref<number>(0);
+const author = ref<string>(""); //เจ้าของผลงาน
-const modalView = ref<boolean>(false);
+const subject = ref<string>(""); //ชื่อผลงาน
-const AnnouncementStartDate = ref<string | null>();
+const AnnouncementStartDate = ref<string | null>(); //ประกาศเมื่อวันที่
-const AnnouncementEndDate = ref<string | null>();
+const AnnouncementEndDate = ref<string | null>(); //ถึงวันที่
-const id = ref<string>(route.params.id as string);
-const pdfSrc = ref<any>();
 const fileEvaluation5 = ref<any>();
 const fileEvaluation5Ref = ref<any>();
 const files = [
@@ -59,7 +58,9 @@ const files = [
   },
 ];
 
-/** function บันทึกแจ้งผลการประกาศคัดเลือก*/
+/**
+ * function บันทึกแจ้งผลการประกาศคัดเลือก
+ */
 async function save() {
   download10Url.value === ""
     ? (fileEvaluation5.value = "")
@@ -70,7 +71,7 @@ async function save() {
     download10Url.value !== ""
   ) {
     dialogConfirm($q, async () => {
-      await showLoader();
+      showLoader();
       http
         .put(config.API.evaluationNext5To6(id.value))
         .then(() => {
@@ -144,20 +145,6 @@ function fileUpLoad(url: string) {
     });
 }
 
-/** ไปหน้าต่อไปของรายงาน */
-function nextPage() {
-  if (page.value < numOfPages.value) {
-    page.value++;
-  }
-}
-
-/** กลับหน้าก่อนหน้าของรายงาน */
-function backPage() {
-  if (page.value !== 1) {
-    page.value--;
-  }
-}
-
 /**
  * function คัดลอก URL
  * @param name ชื่อไฟล์
@@ -175,7 +162,9 @@ async function copyLink(name: string) {
     });
 }
 
-/** function เรียกข้อมูลวันที่ประกาศ*/
+/**
+ * function เรียกข้อมูลวันที่ประกาศ
+ */
 async function getDate() {
   showLoader();
   await http
@@ -196,7 +185,9 @@ async function getDate() {
 }
 
 const download10Url = ref<string>("");
-/** function เช็คไฟล์อัปโหลด*/
+/**
+ * function เช็คไฟล์อัปโหลด
+ */
 async function checkDocResult() {
   showLoader();
   await http
@@ -217,9 +208,9 @@ async function checkDocResult() {
     });
 }
 
-const author = ref<string>("");
+/**
-const subject = ref<string>("");
+ * function เรียกข้อมูลผลงาน
-/** function เรียกข้อมูลผลงาน*/
+ */
 async function fetchDataSigner() {
   showLoader();
   await http
@@ -281,16 +272,6 @@ onMounted(async () => {
             <q-item-section avatar>
               <div class="row">
                 <div>
-                  <!-- <q-btn
-                    :href="file.pathName"
-                    target="_blank"
-                    flat
-                    round
-                    color="blue-6"
-                    icon="mdi-download"
-                  >
-                    <q-tooltip>คัดลอกลิ้งค์</q-tooltip>
-                  </q-btn> -->
                   <q-btn
                     flat
                     round
@@ -309,7 +290,7 @@ onMounted(async () => {
       </q-card>
     </div>
 
-    <div class="col-12">
+    <div class="col-12" v-if="download10Url != ''">
       <q-card bordered style="border: 1px solid #d6dee1">
         <div
           class="text-weight-medium row col-12 bg-grey-1 q-py-sm q-px-md items-center"
@@ -318,7 +299,6 @@ onMounted(async () => {
           <q-space />
           <div>
             <q-btn
-              v-if="download10Url != ''"
               :href="download10Url"
               target="_blank"
               class="col-12"
@@ -384,93 +364,6 @@ onMounted(async () => {
       </div>
     </div>
   </div>
-
-  <q-dialog
-    v-model="modalView"
-    persistent
-    :maximized="true"
-    transition-show="slide-up"
-    transition-hide="slide-down"
-  >
-    <q-card class="bg-white">
-      <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          style="color: #ff8080; background-color: #ffdede"
-          size="12px"
-          v-close-popup
-        />
-      </div>
-      <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>
-  </q-dialog>
 </template>
 
 <style scoped></style>

src/modules/12_evaluatePersonal/components/Detail/step/step6.vue

@@ -1,36 +1,37 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
-import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
+
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** importType*/
 import type { FormCommand } from "@/modules/12_evaluatePersonal/interface/index/evalute";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-
 /**use*/
 const $q = useQuasar();
 const route = useRoute();
 const mixin = useCounterMixin();
-const dateEndPrepareDoc2 = ref<string | null>();
-
 const { date2Thai, showLoader, hideLoader, messageError } = mixin;
 
-const id = ref<string>(route.params.id as string);
+const id = ref<string>(route.params.id as string); //id ประเมิน
+//ผู้เซ็นเอกสาร
 const formCommand = reactive<FormCommand>({
-  elementaryFullName: "",
+  elementaryFullName: "", //ชื่อ-นามสกุลผู้บังคับบัญชาชั้นต้น
-  elementaryPosition: "",
+  elementaryPosition: "", //ตำแหน่งผู้บังคับบัญชาชั้นต้น
-  abovelevelFullname: "",
+  abovelevelFullname: "", //ชื่อ-นามสกุลผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
-  abovelevelPosition: "",
+  abovelevelPosition: "", //ตำแหน่งผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
 });
-const author = ref<string>("");
+const author = ref<string>(""); //เจ้าของผลงาน
-const subject = ref<string>("");
+const subject = ref<string>(""); //ชื่อผลงาน
-const assignedPosition = ref<string>("");
+const assignedPosition = ref<string>(""); //ตำแหน่งที่ได้รับ
+const dateEndPrepareDoc2 = ref<string | null>(); //วันสุดท้ายของการส่งผลงาน
 
-/** function เรียกข้อมูลวันที่ประกาศ*/
+/**
+ * function เรียกข้อมูลวันที่ประกาศ
+ */
 async function getDate() {
   showLoader();
   await http
@@ -51,7 +52,9 @@ async function getDate() {
     });
 }
 
-/** function เรียกข้อมูลผลงาน*/
+/**
+ * function เรียกข้อมูลผลงาน
+ */
 async function getSigner() {
   showLoader();
   await http

src/modules/12_evaluatePersonal/components/Detail/step/step7.vue

@@ -1,26 +1,24 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { usePDF } from "@tato30/vue-pdf";
 import { useQuasar } from "quasar";
-import { useRoute } from "vue-router";
+import { usePDF } from "@tato30/vue-pdf";
-import http from "@/plugins/http";
-import config from "@/app.config";
 import axios from "axios";
 
-/** importStore*/
+import { useRoute } from "vue-router";
 import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
 import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 /** use*/
 const $q = useQuasar();
 const route = useRoute();
 const store = useEvaluateDetailStore();
 const mixin = useCounterMixin();
-
 const { showLoader, hideLoader, messageError } = mixin;
 
-const id = ref<string>(route.params.id as string);
+const id = ref<string>(route.params.id as string); //id ประเมิน
-const selectedItem = ref<number>(1);
+const selectedItem = ref<number>(1); //ไฟล์ที่เลือก
 
 /**
  * funtion เลือกไฟล์
@@ -36,11 +34,10 @@ function handleItemClick(itemNumber: number) {
  * function เรียกไฟล์
  * @param volume index item
  */
-function getFile(volume: number) {
+async function getFile(volume: number) {
   const fileText = numToThai(volume);
-  console.log(fileText);
   showLoader();
-  http
+  await http
     .get(config.API.evaluationFilebyId("เล่ม 2", id.value, fileText))
     .then((res) => {
       const link = res.data.downloadUrl;

src/modules/12_evaluatePersonal/components/Detail/step/step8.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import { checkPermission } from "@/utils/permissions";
-import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import axios from "axios";
+
+import { useRoute } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
+import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReport from "@/plugins/genreport";
@@ -12,8 +15,6 @@ import genReport from "@/plugins/genreport";
 import type { FileEvaluationRefRef } from "@/modules/12_evaluatePersonal/interface/index/evalute";
 
 /** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
 
 /** uer*/
 const store = useEvaluateDetailStore();
@@ -21,33 +22,25 @@ const $q = useQuasar();
 const mixin = useCounterMixin();
 const route = useRoute();
 
-const {
+const { showLoader, hideLoader, messageError, success, dialogConfirm } = mixin;
-  date2Thai,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-  dialogConfirm,
-} = mixin;
 
 const id = ref<string>(route.params.id as string);
 const modalConfirm = ref<boolean>(false);
 const nameOfWork = ref<string>("");
 const nameOfOwner = ref<string>("");
 const position = ref<string>("");
-const fileEvaluation81 = ref<any>();
+const fileEvaluation81 = ref<any>(); //แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน (เอกสารแบบ ค)
-const fileEvaluation82 = ref<any>();
+const fileEvaluation82 = ref<any>(); //บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)
-const fileEvaluation83 = ref<any>();
+const fileEvaluation83 = ref<any>(); //แบบประเมินผลงาน (เอกสารหมายเลข 16)
-const fileEvaluation84 = ref<any>();
+const fileEvaluation84 = ref<any>(); //แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)
-const fileEvaluation85 = ref<any>();
+const fileEvaluation85 = ref<any>(); //แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)
-const fileEvaluation86 = ref<any>();
+const fileEvaluation86 = ref<any>(); //แบบสรุปผลการประเมิน (เอกสารแบบ ง)
 const fileEvaluation81Ref = ref<object | null>(null);
 const fileEvaluation82Ref = ref<object | null>(null);
 const fileEvaluation83Ref = ref<object | null>(null);
 const fileEvaluation84Ref = ref<object | null>(null);
 const fileEvaluation85Ref = ref<object | null>(null);
 const fileEvaluation86Ref = ref<object | null>(null);
-const profile = ref<any>();
 const fileEvaluationRef: FileEvaluationRefRef = {
   fileEvaluation81: fileEvaluation81Ref,
   fileEvaluation82: fileEvaluation82Ref,
@@ -57,7 +50,9 @@ const fileEvaluationRef: FileEvaluationRefRef = {
   fileEvaluation86: fileEvaluation86Ref,
 };
 
-/** function ดาวน์โหลดไฟล์ต้นแบบ*/
+/**
+ * function ดาวน์โหลดไฟล์ต้นแบบ
+ */
 async function onClickDowloadFile(
   tp: string,
   templateName: string,
@@ -141,7 +136,9 @@ function fileUpLoad(url: string, file: any) {
     });
 }
 
-/** function ยืนยันผลการพิจารณา*/
+/**
+ * function ยืนยันผลการพิจารณา
+ */
 async function confirmApprove() {
   const fileEvaluationValues = [
     fileEvaluation81,
@@ -216,7 +213,9 @@ async function confirmApprove() {
   }, 100);
 }
 
-/** function ยืนยันผลการพิจารณา*/
+/**
+ *  function ยืนยันผลการพิจารณา
+ */
 function nextStep() {
   showLoader();
   http
@@ -234,26 +233,10 @@ function nextStep() {
     });
 }
 
-/** function เรียกข้แมูลคุณสมบัติ*/
-async function fetchProfile() {
-  showLoader();
-  await http
-    .get(config.API.evaluateGetDetail(id.value))
-    .then((res) => {
-      const data = res.data.result;
-      profile.value = data;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2000);
-    });
-}
-
 const downloadDocEditUrl = ref<string>("");
+/**
+ * function ตรวจสอบไฟล์แก้ไข
+ */
 async function checkDocEdit() {
   showLoader();
   await http
@@ -277,12 +260,13 @@ async function checkDocEdit() {
     });
 }
 
-const downloadFile1 = ref<string>("");
+//ไฟล์โหล
-const downloadFile2 = ref<string>("");
+const downloadFile1 = ref<string>(""); //"แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน (เอกสารแบบ ค)
-const downloadFile3 = ref<string>("");
+const downloadFile2 = ref<string>(""); //บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)"
-const downloadFile4 = ref<string>("");
+const downloadFile3 = ref<string>(""); //แบบประเมินผลงาน (เอกสารหมายเลข 16)
-const downloadFile5 = ref<string>("");
+const downloadFile4 = ref<string>(""); //แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)
-const downloadFile6 = ref<string>("");
+const downloadFile5 = ref<string>(""); //แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)
+const downloadFile6 = ref<string>(""); //แบบสรุปผลการประเมิน (เอกสารแบบ ง)
 
 /**
  * function ดาวน์โหลดไฟล์
@@ -317,11 +301,13 @@ async function downloadFileList(fileName: string) {
     });
 }
 
-const author = ref<string>("");
+const author = ref<string>(""); //เจ้าของผลงาน
-const subject = ref<string>("");
+const subject = ref<string>(""); //ชื่อผลงาน
-const assignedPosition = ref<string>("");
+const assignedPosition = ref<string>(""); //ตำแหน่ง
 
-/** function เรียกข้อมูลผลงาน*/
+/**
+ * function เรียกข้อมูลผลงาน
+ */
 async function fetchDataSigner() {
   showLoader();
   await http
@@ -350,7 +336,6 @@ async function fetchDataSigner() {
 
 onMounted(async () => {
   await Promise.all([
-    fetchProfile(),
     fetchDataSigner(),
     downloadFileList(
       "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน (เอกสารแบบ ค)"
@@ -663,6 +648,7 @@ onMounted(async () => {
                 </div>
               </q-card>
             </div>
+
             <div class="col-6">
               <q-card bordered style="border: 1px solid #d6dee1">
                 <div
@@ -758,6 +744,7 @@ onMounted(async () => {
                 </div>
               </q-card>
             </div>
+
             <div class="col-6">
               <q-card bordered style="border: 1px solid #d6dee1">
                 <div
@@ -855,6 +842,7 @@ onMounted(async () => {
                 </div>
               </q-card>
             </div>
+
             <div class="col-6">
               <q-card bordered style="border: 1px solid #d6dee1">
                 <div

src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardDirector.vue

@@ -1,27 +1,24 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
-import { checkPermission } from "@/utils/permissions";
-import http from "@/plugins/http";
-import config from "@/app.config";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 /** importType*/
 import type { QTableProps } from "quasar";
 import type { Director } from "@/modules/11_discipline/interface/request/Disciplinary";
+import type { Directors } from "@/modules/12_evaluatePersonal/interface/response/Main";
 
 /** importComponents*/
 import DialogDirector from "@/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogDirector.vue";
 
-/** import store*/
-import { useCounterMixin } from "@/stores/mixin";
-
 /**use*/
-const route = useRoute();
-const id = ref<string>(route.params.id as string);
-const mixin = useCounterMixin();
 const $q = useQuasar();
-
+const route = useRoute();
+const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, dialogConfirm, success } = mixin;
 
 const props = defineProps({
@@ -29,13 +26,16 @@ const props = defineProps({
     type: Array,
     default: [],
   },
-  fetchdata: {
+  fetchData: {
     type: Function,
     default: () => "",
   },
 });
 
-/** คอลัมน์ กรรมการ */
+const id = ref<string>(route.params.id as string);
+
+/** Table กรรมการ */
+const rows = ref<Director[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -83,20 +83,26 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const rows = ref<Director[]>([]);
 
-const modalAddDirector = ref<boolean>(false);
+//เลือกรายชื่อกรรมการ
-const filter = ref<string>("");
+const modalAddDirector = ref<boolean>(false); // popup เพิ่มรายชื่อกรรมการ
-const page = ref<number>(1);
+const filter = ref<string>(""); //ค้นหารายชื่อกรรมการ
-const rowsPerPage = ref<number>(10);
+const page = ref<number>(1); //หน้า
-const maxPage = ref<number>(1);
+const rowsPerPage = ref<number>(10); //จำนวนต่อหน้า
-const listDirector = ref<any>([]);
+const maxPage = ref<number>(1); //จำนนวนหน้าทั้งหมด
+const listDirector = ref<Directors[]>([]); //รายชื่อกรรมการ
 
+/**
+ * ฟังก์เปิด popup เพิ่มรายชื่อกรรมการ
+ */
 async function onClickAdd() {
   modalAddDirector.value = true;
   getList();
 }
 
+/**
+ * ฟังก์ปิด popup เพิ่มรายชื่อกรรมการ
+ */
 function onClickClose() {
   modalAddDirector.value = false;
 }
@@ -115,8 +121,8 @@ async function updatePaging(rpp: number, p: number) {
  * function return รายชื่อกรรมการที่เลือก
  * @param data รายชื่อกรรมการที่เลือก
  */
-function returnDirector(data: any) {
+function returnDirector(data: Directors[]) {
-  const dataList = data.map((item: any) => item.id);
+  const dataList = data.map((item: Directors) => item.id);
   dialogConfirm($q, () => {
     showLoader();
     http
@@ -124,7 +130,7 @@ function returnDirector(data: any) {
         directors: dataList,
       })
       .then(async () => {
-        await props.fetchdata();
+        await props.fetchData();
         await success($q, "บันทึกสำเร็จ");
         onClickClose();
       })
@@ -137,14 +143,16 @@ function returnDirector(data: any) {
   });
 }
 
-/** function เรียกรายชื่อกรรมการ*/
+/**
+ * function เรียกรายชื่อกรรมการ
+ */
 async function getList() {
   showLoader();
   await http
     .get(config.API.evaluateDirectorMain() + `/admin`)
-    .then((res) => {
+    .then(async (res) => {
-      const data = res.data.result;
+      const data = await res.data.result;
-      listDirector.value = data.map((item: any) => ({
+      listDirector.value = data.map((item: Directors) => ({
         id: item.id,
         name: `${item.prefix}${item.firstName} ${item.lastName}`,
         createdAt: item.createdAt,
@@ -168,6 +176,10 @@ async function getList() {
       hideLoader();
     });
 }
+
+/**
+ * ทำงานเมื่อ props.data มีการเปลี่ยนแปลง
+ */
 watch(
   () => props.data,
   () => {
@@ -245,16 +257,16 @@ watch(
   </q-card>
 
   <DialogDirector
-    v-model:Modal="modalAddDirector"
-    :clickClose="onClickClose"
-    :rows2="listDirector"
-    v-model:filterKeyword2="filter"
-    :rowsPerPage="rowsPerPage"
-    :page="page"
-    :maxPage="maxPage"
-    :selected-row="rows"
     @update:pagination="updatePaging"
-    @returnDirector="returnDirector"
+    @return-director="returnDirector"
+    v-model:Modal="modalAddDirector"
+    v-model:filter-keyword2="filter"
+    :click-close="onClickClose"
+    :rows2="listDirector"
+    :rows-per-page="rowsPerPage"
+    :page="page"
+    :max-page="maxPage"
+    :selected-row="rows"
   />
 </template>
 

src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardMeet.vue

@@ -10,27 +10,16 @@ import config from "@/app.config";
 /** importComponents*/
 import DialogMeet from "@/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogMeet.vue";
 
+import type { Meeting } from "@/modules/12_evaluatePersonal/interface/index/Main";
+import type { Meetings } from "@/modules/12_evaluatePersonal/interface/response/Main";
+
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
-const route = useRoute();
-const id = ref<string>(route.params.id as string);
-const mixin = useCounterMixin();
 const $q = useQuasar();
-
+const route = useRoute();
-/** props*/
+const mixin = useCounterMixin();
-const props = defineProps({
-  data: {
-    type: Array,
-    default: [],
-  },
-  fetchdata: {
-    type: Function,
-    default: () => "",
-  },
-});
-
 const {
   showLoader,
   hideLoader,
@@ -40,6 +29,21 @@ const {
   success,
 } = mixin;
 
+/** props*/
+const props = defineProps({
+  data: {
+    type: Array,
+    default: [],
+  },
+  fetchData: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+const id = ref<string>(route.params.id as string);
+
+const rows = ref<Meeting[]>([]); //รายการประชุม
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -109,26 +113,30 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const rows = ref<any[]>([]);
 
-const modalAdd = ref<boolean>(false);
+const modalAdd = ref<boolean>(false); //เพิ่มรายการประชุม
-const filter = ref<string>("");
+const filter = ref<string>(""); //ค้นหารายการประชุม
-const page = ref<number>(1);
+const page = ref<number>(1); //หน้า
-const rowsPerPage = ref<number>(10);
+const rowsPerPage = ref<number>(10); //จำนวนต่อหน้า
-const maxPage = ref<number>(1);
+const maxPage = ref<number>(1); //จำนนวนหน้าทั้งหมด
-const listMeet = ref<any>([]);
+const listMeet = ref<Meetings[]>([]); //รายชื่อประชุม
 
+/**
+ * ฟังก์เปิด popup เพิ่มการประชุม
+ */
 function onClickAdd() {
   modalAdd.value = true;
   getList();
 }
-
+/**
+ * ฟังก์ปิด popup เพิ่มการประชุม
+ */
 function onClickClose() {
   modalAdd.value = false;
 }
 
 /**
- * function อัดเดท Paging กรรมการ
+ * function อัดเดท Paging การประชุม
  * @param rpp ต่อหน้า
  * @param p หน้า
  */
@@ -141,8 +149,8 @@ async function updatePaging(rpp: number, p: number) {
  * function return รายชื่อกรรมการที่เลือก
  * @param data รายชื่อกรรมการที่เลือก
  */
-function returnData(data: any) {
+function returnData(data: Meetings[]) {
-  const dataList = data.map((item: any) => item.id);
+  const dataList = data.map((item: Meetings) => item.id);
   dialogConfirm($q, () => {
     showLoader();
     http
@@ -150,9 +158,9 @@ function returnData(data: any) {
         meetings: dataList,
       })
       .then(async () => {
-        await props.fetchdata();
+        await props.fetchData();
         await success($q, "บันทึกสำเร็จ");
-        await onClickClose();
+        onClickClose();
       })
       .catch((e) => {
         messageError($q, e);
@@ -170,7 +178,7 @@ async function getList() {
     .get(config.API.meeting() + `/admin`)
     .then((res) => {
       const data = res.data.result;
-      listMeet.value = data.map((item: any) => ({
+      listMeet.value = data.map((item: Meetings) => ({
         id: item.id,
         createdAt: item.createdAt,
         createdUserId: item.createdUserId,

src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogDirector.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watchEffect, watch, type PropType } from "vue";
+import { ref, watchEffect, watch, type PropType } from "vue";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -43,7 +43,7 @@ const props = defineProps({
   },
 });
 
-const currentPage = ref<number>(1);
+const currentPage = ref<number>(1); //หน้าปัจจุบัน
 
 /** ค้นหาคอลัม */
 const visibleColumns2 = ref<string[]>([
@@ -53,7 +53,6 @@ const visibleColumns2 = ref<string[]>([
   "email",
   "phone",
 ]);
-
 // หัวตาราง
 const columns2 = ref<QTableProps["columns"]>([
   {
@@ -109,13 +108,6 @@ const pagination = ref({
   page: Number(props.page),
   rowsPerPage: props.rowsPerPage,
 });
-
-const checkSelected = computed(() => {
-  if (selected.value.length === 0) {
-    return true;
-  }
-});
-
 const emit = defineEmits([
   "update:filterKeyword2",
   "update:selected",
@@ -128,21 +120,34 @@ async function directorSave() {
   emit("returnDirector", selected.value);
 }
 
+/**
+ * ฟังก์ชันอัปเดทคำค้นหา
+ * @param value  คำค้นหา
+ */
 function updateInput(value: any) {
   emit("update:filterKeyword2", value);
 }
 
-/**รีเซ็ตค่าในช่องค้นหา */
+/**
+ * รีเซ็ตค่าในช่องค้นหา
+ */
 function Reset() {
   emit("update:filterKeyword2", "");
 }
 
-function updateProp(newPagination: any, page: number) {
+/**
+ *
+ * @param newPagination
+ * @param page
+ */
+function updateProp(newPagination: number, page: number) {
   // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
   emit("update:pagination", newPagination, page);
 }
 
-/** เช็คค่า props.Modal === true */
+/**
+ * เช็คค่า props.Modal === true
+ */
 watchEffect(() => {
   if (props.Modal === true) {
     selected.value = props.selectedRow;
@@ -152,7 +157,9 @@ watchEffect(() => {
 watch(
   () => currentPage.value,
   () => {
-    updateProp(pagination.value.rowsPerPage, currentPage.value);
+    if (pagination.value.rowsPerPage) {
+      updateProp(pagination.value.rowsPerPage, currentPage.value);
+    }
   }
 );
 
@@ -160,7 +167,9 @@ watch(
   () => pagination.value.rowsPerPage,
   () => {
     currentPage.value = 1;
-    updateProp(pagination.value.rowsPerPage, currentPage.value);
+    if (pagination.value.rowsPerPage) {
+      updateProp(pagination.value.rowsPerPage, currentPage.value);
+    }
   }
 );
 </script>
@@ -241,7 +250,7 @@ watch(
         <q-btn
           label="เพิ่มรายชื่อกรรมการ"
           @click="directorSave"
-          :disable="checkSelected"
+          :disable="selected.length === 0"
           color="public"
         />
       </q-card-actions>

src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogMeet.vue

@@ -1,16 +1,13 @@
 <script setup lang="ts">
-import { ref, computed, watchEffect, watch, type PropType } from "vue";
+import { ref, watchEffect, watch, type PropType } from "vue";
 
 /** importType*/
 import type { QTableProps } from "quasar";
-import type { directorType } from "@/modules/11_discipline/interface/index/Main";
+import type { Meeting } from "@/modules/12_evaluatePersonal/interface/index/Main";
 
 /** importComponents*/
 import DialogHeader from "@/components/DialogHeader.vue";
 
-const selected = ref<directorType[]>([]);
-const currentPage = ref<number>(1);
-
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   Modal: Boolean,
@@ -39,7 +36,7 @@ const props = defineProps({
     default: () => "",
   },
   selectedRow: {
-    type: Array as PropType<directorType[]>,
+    type: Array as PropType<Meeting[]>,
     required: true,
   },
 });
@@ -52,6 +49,9 @@ const emit = defineEmits([
   "returnDirector",
 ]);
 
+const selected = ref<Meeting[]>([]);
+const currentPage = ref<number>(1);
+
 /**ข้อมูลหัว ตาราง*/
 const columns = ref<QTableProps["columns"]>([
   {
@@ -130,12 +130,6 @@ const pagination = ref({
   rowsPerPage: props.rowsPerPage,
 });
 
-const checkSelected = computed(() => {
-  if (selected.value.length === 0) {
-    return true;
-  }
-});
-
 /** เลือกกรรมการ */
 async function onClickAddMeet() {
   emit("returnDirector", selected.value);
@@ -150,7 +144,7 @@ function Reset() {
   emit("update:filterKeyword2", "");
 }
 
-function updateProp(newPagination: any, page: number) {
+function updateProp(newPagination: number, page: number) {
   // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
   emit("update:pagination", newPagination, page);
 }
@@ -165,7 +159,9 @@ watchEffect(() => {
 watch(
   () => currentPage.value,
   () => {
-    updateProp(pagination.value.rowsPerPage, currentPage.value);
+    if (pagination.value.rowsPerPage) {
+      updateProp(pagination.value.rowsPerPage, currentPage.value);
+    }
   }
 );
 
@@ -173,7 +169,9 @@ watch(
   () => pagination.value.rowsPerPage,
   () => {
     currentPage.value = 1;
-    updateProp(pagination.value.rowsPerPage, currentPage.value);
+    if (pagination.value.rowsPerPage) {
+      updateProp(pagination.value.rowsPerPage, currentPage.value);
+    }
   }
 );
 </script>
@@ -253,7 +251,7 @@ watch(
         <q-btn
           label="เพิ่มการประชุม"
           @click="onClickAddMeet"
-          :disable="checkSelected"
+          :disable="selected.length === 0"
           color="public"
         />
       </q-card-actions>

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

@@ -43,8 +43,10 @@ watch(
   }
 );
 onMounted(() => {
-  numOfPages.value = store.numOfPagesStore;
+  setTimeout(() => {
-  pdfSrc.value = store.pdfSrcStore;
+    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: "",
+  citizenId: "", //เลขบัตรประจำตัวประชาชน
-  prefix: "",
+  prefix: "", //คำนำหน้า
-  fullName: "",
+  fullName: "", //ชื่อ
-  position: "",
+  position: "", //ตำแหน่ง
-  oc: "",
+  oc: "", //สังกัด
-  salary: "",
+  salary: "", //เงินเดือน
-  positionLevel: "",
+  positionLevel: "",  //ระดับปัจจุบัน,ระดับที่ประเมิน
-  posNo: "",
+  posNo: "", //ตำแหน่งเลขที่
-  birthDate: "",
+  birthDate: "", //วันเดือนปีเกิด
-  govAge: "",
+  govAge: "", //อายุราชการ
-  educations: [] as EducationForm[],
+  educations: [] as EducationForm[], //ประวัติการศึกษา
-  certificates: [],
+  certificates: [], //ใบอนุญาตประกอบวิชาชีพ
-  salaries: [],
+  salaries: [], //ประวัติการรับราชการ
-  trainings: [],
+  trainings: [], //ประวัติการฝึกอบรมดูงาน
-  assessments: [],
+  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>

src/modules/12_evaluatePersonal/components/Director/AddPage.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import Form from "@/modules/12_evaluatePersonal/components/Director/Form.vue";
+import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
-import { useRoute, useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useQuasar } from "quasar";
-// import type { FormDataPost } from "@/modules/11_discipline/interface/request/director";
+
 import type { DataForm } from "@/modules/12_evaluatePersonal/interface/index/director";
+
+import Form from "@/modules/12_evaluatePersonal/components/Director/Form.vue";
+
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader, dialogConfirm, success } = mixin;
@@ -17,31 +19,28 @@ const router = useRouter();
  * @param id ระบุ บุคคล
  */
 function onSubmit(formData: DataForm) {
-  dialogConfirm($q, () => addData(formData));
+  dialogConfirm($q, () => {
-}
+    showLoader();
-
+    http
-function addData(formData: DataForm) {
+      .post(config.API.evaluateDirectorMain(), {
-  console.log(formData);
+        prefix: formData.prefix,
-  showLoader();
+        firstName: formData.firstname,
-  http
+        lastName: formData.lastname,
-    .post(config.API.evaluateDirectorMain(), {
+        position: formData.position,
-      // personalId:formData.personalId ?? '',
+        email: formData.email,
-      prefix: formData.prefix,
+        phone: formData.phone,
-      firstName: formData.firstname,
+      })
-      lastName: formData.lastname,
+      .then(() => {
-      position: formData.position,
+        router.push(`/evaluate/director`);
-      email: formData.email,
+        success($q, "บันทึกข้อมูลสำเร็จ");
-      phone: formData.phone,
+      })
-    })
+      .catch((e) => {
-    .then((res) => {
+        messageError($q, e);
-      success($q, "บันทึกข้อมูลสำเร็จ");
+      })
-    })
+      .finally(() => {
-    .catch((e) => {
+        hideLoader();
-      messageError($q, e);
+      });
-    })
+  });
-    .finally(async () => {
-      router.push(`/evaluate/director`);
-    });
 }
 </script>
 <template>

src/modules/12_evaluatePersonal/components/Director/DialogDetail.vue

@@ -50,7 +50,6 @@ const dataDettail = reactive<FormData>({
   position: "",
   phone: "",
   email: "",
-  qualification: "",
 });
 
 /**
@@ -81,9 +80,9 @@ function fetchData() {
  * @param formData ข้อมุลชื่อกรรมการ
  */
 function onSubmit(formData: FormData) {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
     showLoader();
-    http
+    await http
       .put(config.API.evaluateDirectorById(directorId.value), {
         prefix: formData.prefix,
         firstName: formData.firstname,
@@ -92,10 +91,10 @@ function onSubmit(formData: FormData) {
         email: formData.email,
         phone: formData.phone,
       })
-      .then(() => {
+      .then(async () => {
-        props.fetchDataList?.();
+        await props.fetchDataList?.();
-        onCloseDialog();
         success($q, "บันทึกข้อมูลสำเร็จ");
+        onCloseDialog();
       })
       .catch((e) => {
         messageError($q, e);
@@ -128,7 +127,7 @@ watch(
       <Form
         :on-submit="onSubmit"
         :data="dataDettail"
-        :actionType="actionType"
+        :action-type="actionType"
       />
     </q-card>
   </q-dialog>

src/modules/12_evaluatePersonal/components/Director/EditPage.vue

@@ -1,114 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, reactive } from "vue";
-import Form from "@/modules/12_evaluatePersonal/components/Director/Form.vue";
-import type { FormData } from "@/modules/11_discipline/interface/request/Director";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-import { useRoute } from "vue-router";
-import router from "@/router";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const route = useRoute();
-const id = ref<string>(route.params.id.toString());
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader, dialogConfirm, success } = mixin;
-
-/**เมื่อเริ่มโหลดหน้า
- * เรียกใช้งาน fetchData เพื่อดึงข้อมูล
- */
-onMounted(() => {
-  fetchData();
-});
-
-/**
- * get ข้อมูลเก่ากรณีแก้ไขข้อมูล
- */
-const data = reactive<FormData>({
-  personalId: "",
-  prefix: "",
-  firstname: "",
-  lastname: "",
-  position: "",
-  phone: "",
-  email: "",
-  qualification: "",
-});
-
-/**
- * ดึงค่าจาก api
- */
-const fetchData = async () => {
-  showLoader();
-  await http
-    // .get(config.API.evaluateDirectorById(personalId.value))
-    .get(config.API.evaluateDirectorById(id.value))
-    .then((res) => {
-      const dataApi = res.data.result;
-      data.personalId = dataApi.Id;
-      data.prefix = dataApi.prefix;
-      data.firstname = dataApi.firstName;
-      data.lastname = dataApi.lastName;
-      data.position = dataApi.position;
-      data.phone = dataApi.phone;
-      data.email = dataApi.email;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-/**
- * บันทึกข้อมูลที่เเก้ไข
- * @param id ระบุ บุคคล
- */
-function onSubmit(formData: FormData) {
-  dialogConfirm($q, () => putData(formData));
-}
-
-function putData(formData: FormData) {
-  showLoader();
-  http
-    // .put(config.API.evaluateDirectorById(personalId.value), {
-    .put(config.API.evaluateDirectorById(id.value), {
-      prefix: formData.prefix,
-      firstName: formData.firstname,
-      lastName: formData.lastname,
-      position: formData.position,
-      email: formData.email,
-      phone: formData.phone,
-    })
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      router.push(`/evaluate/director`);
-    });
-}
-</script>
-<template>
-  <div class="col-xs-12 col-sm-12 col-md-11">
-    <div class="toptitle col-12 row items-center">
-      <q-btn
-        icon="mdi-arrow-left"
-        unelevated
-        round
-        dense
-        flat
-        color="primary"
-        class="q-mr-sm"
-        @click="router.push(`/evaluate/director`)"
-      />
-      แก้ไขรายชื่อกรรมการ
-    </div>
-
-    <Form :on-submit="onSubmit" :data="data" />
-  </div>
-</template>

src/modules/12_evaluatePersonal/components/Director/Form.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, watch, onMounted, computed } from "vue";
+import { ref, reactive, watch, onMounted, computed, type PropType } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -14,6 +14,7 @@ import type {
   ResponsePreson,
   tableType,
 } from "@/modules/11_discipline/interface/request/Director";
+import type { Pagination } from "@/modules/12_evaluatePersonal/interface/index/Main";
 
 /**
  * importComponenst
@@ -37,7 +38,7 @@ const { showLoader, hideLoader, messageError } = useCounterMixin();
 const actionType = defineModel<string>("actionType", { default: "" });
 const props = defineProps({
   data: {
-    type: Object,
+    type: Object as PropType<FormData>,
     default: null,
   },
   onSubmit: {
@@ -47,7 +48,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["formDataReturn"]);
 
-const isReadonly = computed(() => (actionType.value === "VIEW" ? true : false));
+const isReadonly = computed(() => (actionType.value === "VIEW" ? true : false)); //อ่านอย่างเดียว
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
 const type = ref<string>("citizenId");
@@ -63,13 +64,12 @@ const typeOps = ref<typeOp[]>([
  */
 const formData = reactive<FormData>({
   personalId: "",
-  prefix: "",
+  prefix: "", //คำนำหน้า
-  firstname: "",
+  firstname: "", //ชื่อ
-  lastname: "",
+  lastname: "", //นามสกุล
-  position: "",
+  position: "", //ตำแหน่ง
-  phone: "",
+  phone: "", //เบอร์โทร
-  email: "",
+  email: "", //อีเมล
-  qualification: "",
 });
 
 /**
@@ -207,7 +207,7 @@ function searchInput() {
 /**
  * เลืือกชื่อกรรมการ
  */
-function returnDetail(data: any) {
+function returnDetail(data: ResponsePreson) {
   formData.prefix = data.prefix;
   formData.firstname = data.firstName;
   formData.lastname = data.lastName;
@@ -232,7 +232,7 @@ function updatemodalPersonal(modal: boolean) {
   modalPersonal.value = modal;
 }
 
-function updatePagination(newPagination: any) {
+function updatePagination(newPagination: Pagination) {
   pagination.value.page = 1;
   pagination.value.rowsPerPage = newPagination.rowsPerPage;
 }
@@ -244,7 +244,7 @@ watch(
   }
 );
 
-function fetchForm(data: any) {
+async function fetchForm(data: FormData) {
   formData.prefix = data.prefix;
   formData.firstname = data.firstname;
   formData.lastname = data.lastname;
@@ -265,7 +265,7 @@ onMounted(() => {
     showLoader();
     setTimeout(async () => {
       await fetchForm(props.data);
-      await hideLoader();
+      hideLoader();
     }, 1000);
   }
 });
@@ -273,9 +273,9 @@ onMounted(() => {
 <template>
   <q-form greedy @submit.prevent @validation-success="onSubmit">
     <q-card bordered>
-      <div class="col-12 row q-pa-md">
+      <q-card-section>
         <div class="row col-12 q-col-gutter-md">
-          <div class="col-12 q-gutter-y-sm" v-if="data === null">
+          <div class="col-12 q-col-gutter-y-sm" v-if="data === null">
             <div class="row q-col-gutter-md items-start">
               <div class="col-12 col-sm-6 col-md-3">
                 <q-select
@@ -390,7 +390,7 @@ onMounted(() => {
                       </div>
 
                       <div v-else>
-                        {{ col.value }}
+                        {{ col.value ?? "-" }}
                       </div>
                     </q-td>
                   </q-tr>
@@ -398,6 +398,7 @@ onMounted(() => {
               </d-table>
             </div>
           </div>
+
           <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
@@ -413,6 +414,7 @@ onMounted(() => {
               lazy-rules
             />
           </div>
+
           <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
@@ -428,6 +430,7 @@ onMounted(() => {
               lazy-rules
             />
           </div>
+
           <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
@@ -443,6 +446,7 @@ onMounted(() => {
               lazy-rules
             />
           </div>
+
           <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
@@ -458,6 +462,7 @@ onMounted(() => {
               lazy-rules
             />
           </div>
+
           <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
@@ -473,6 +478,7 @@ onMounted(() => {
               hide-bottom-space
             />
           </div>
+
           <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
@@ -487,10 +493,11 @@ onMounted(() => {
             />
           </div>
         </div>
-      </div>
+      </q-card-section>
+
       <q-separator v-if="!isReadonly" />
-      <div class="row col-12 q-pa-sm" v-if="!isReadonly">
+
-        <q-space />
+      <q-card-actions align="right" v-if="!isReadonly">
         <q-btn
           for="ButtonOnSubmit"
           id="formSubmit"
@@ -499,7 +506,7 @@ onMounted(() => {
           type="onSubmit"
           ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
         >
-      </div>
+      </q-card-actions>
     </q-card>
   </q-form>
 

src/modules/12_evaluatePersonal/components/Director/MainPage.vue

@@ -25,9 +25,9 @@ const dataStore = useEvaluateDirectorDataStore();
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader, dialogRemove, success } = mixin;
 
-const modalDetail = ref<boolean>(false);
+const modalDetail = ref<boolean>(false); //แสดงรายละเอียด
-const directorId = ref<string>("");
+const directorId = ref<string>(""); //id กรรมการ
-const actionType = ref<string>("");
+const actionType = ref<string>(""); //แก้ไข ,รายละเอียด
 
 /**
  *pagination ของตาราง
@@ -41,12 +41,12 @@ const pagination = ref({
 /**
  * function fetch ข้อมูลรายการชื่อกรรมการ
  */
-function getList() {
+async function getList() {
   showLoader();
-  http
+  await http
     .get(config.API.evaluateDirectorMain())
-    .then((res) => {
+    .then(async (res) => {
-      const data = res.data.result;
+      const data = await res.data.result;
       dataStore.fetchData(data);
     })
     .catch((e) => {
@@ -64,10 +64,10 @@ function getList() {
 function clickDelete(id: string) {
   dialogRemove($q, async () => {
     showLoader();
-    http
+    await http
       .delete(config.API.evaluateDirectorById(id))
       .then(async () => {
-        getList();
+        await getList();
         success($q, "ลบข้อมูลสำเร็จ");
       })
       .catch((e) => {
@@ -104,6 +104,7 @@ function resetFilter() {
 }
 
 onMounted(() => {
+  dataStore.rows = [];
   getList();
 });
 </script>
@@ -242,8 +243,8 @@ onMounted(() => {
   <!-- รายละเอียด -->
   <DialogDetail
     v-model:modal="modalDetail"
-    :directorId="directorId"
+    :director-id="directorId"
-    :actionType="actionType"
+    :action-type="actionType"
-    :fetchDataList="getList"
+    :fetch-data-list="getList"
   />
 </template>

src/modules/12_evaluatePersonal/components/Meeting/Form.vue

@@ -15,7 +15,6 @@ import type { FormData } from "@/modules/12_evaluatePersonal/interface/index/mee
 /**
  * use
  */
-
 const route = useRoute();
 const $q = useQuasar();
 const {
@@ -42,7 +41,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["formDataReturn"]);
 
-const id = ref<string>(route.params.id as string);
+const id = ref<string>(route.params.id as string); //id การประชุม
 const routeName = ref<string>(route.name as string);
 const isReadonly = computed(() =>
   routeName.value === "evaluateMeetingdetail" ? true : false
@@ -50,17 +49,16 @@ const isReadonly = computed(() =>
 
 const formData = reactive<FormData>({
   id: "",
-  rounded: "",
+  rounded: "", //ครั้งที่
-  dateMeeting: "",
+  dateMeetingStart: null, //วันเวลาเริ่มต้นการประชุม
-  dateMeetingStart: null,
+  dateMeetingEnd: null, //วันเวลาสิ้นสุดการประชุม
-  dateMeetingEnd: null,
+  consider: "", //ผลการพิจารณาของคณะกรรมการประเมินผลงานแต่ละคณะ
-  consider: "",
+  period: "", //ระยะเวลาในการแก้ไขผลงาน
-  period: "",
+  title: "", //หัวข้อการประชุม
-  title: "",
 });
-const file = ref<any>();
+const file = ref<any>(); //ไฟล์อัปโหลด
-const fileData = ref<any>([]);
+const fileData = ref<any[]>([]); //รายการเอกสาร
-const fileDataDownload = ref<any>([]);
+const fileDataDownload = ref<any>([]); ///รายการเอกสาร
 
 /** บันทึกข้อมูล */
 function submit() {
@@ -70,7 +68,7 @@ function submit() {
 /**
  * function fetch ข้อมูลไฟล์เอกสารหลักฐาน
  */
-function fetchDataFile() {
+async function fetchDataFile() {
   if (id.value != undefined) {
     showLoader();
     http
@@ -145,18 +143,18 @@ function uploadFile() {
 /**
  * function อัปโหลดไฟล์เอกสารหลักฐาน
  */
-function uploadfileURL(uploadUrl: string, file: any) {
+function uploadfileURL(uploadUrl: string, newfile: any) {
   axios
-    .put(uploadUrl, file, {
+    .put(uploadUrl, newfile, {
       headers: {
-        "Content-Type": file.type,
+        "Content-Type": newfile.type,
       },
     })
     .then(() => {
       setTimeout(async () => {
         await fetchDataFile();
         await success($q, "อัปโหลไฟล์สำเร็จ");
-        file.value = null;
+        file.value = undefined;
       }, 500);
     })
     .catch((err) => {

src/modules/12_evaluatePersonal/components/Meeting/MainPage.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
+
+import { checkPermission } from "@/utils/permissions";
 import router from "@/router";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -56,13 +57,6 @@ function clickDelete(id: string) {
   });
 }
 
-/**เมื่อเริ่มโหลดหน้า
- * ส่งข้อมูลจำลองไปยัง store
- */
-onMounted(() => {
-  getList();
-});
-
 /**
  * ค้นหาในตาราง
  */
@@ -83,6 +77,13 @@ const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
+
+/**เมื่อเริ่มโหลดหน้า
+ * ส่งข้อมูลจำลองไปยัง store
+ */
+onMounted(() => {
+  getList();
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการการประชุม</div>

src/modules/12_evaluatePersonal/components/Table.vue

@@ -1,228 +0,0 @@
-<script setup lang="ts">
-import { ref, useAttrs, watch } from "vue";
-
-const table = ref<any>(null);
-const filterRef = ref<any>(null);
-const attrs = ref<any>(useAttrs());
-const paging = ref<boolean>(true);
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-  count: Number,
-  pass: Number,
-  notpass: Number,
-  inputfilter: String,
-  name: String,
-  icon: String,
-  inputvisible: Array,
-  editvisible: Boolean,
-  validate: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  nornmalData: {
-    type: Boolean,
-    defualt: true,
-  },
-  conclude: {
-    type: Boolean,
-    defualt: false,
-  },
-  page: {
-    type: Number,
-  },
-  pageSize: {
-    type: Number,
-  },
-  maxPage: {
-    type: Number,
-  },
-});
-
-const currentPage = ref<number>(1);
-const filter = ref<string>("");
-const pagination = ref({
-  descending: false,
-  page: props.page,
-  rowsPerPage: props.pageSize,
-});
-
-const emit = defineEmits([
-  "update:inputfilter",
-  "update:inputvisible",
-  "update:editvisible",
-  "update:queryString",
-]);
-
-function updateInput(value: string | number | null) {
-  emit("update:inputfilter", value);
-}
-
-function updateVisible(value: []) {
-  emit("update:inputvisible", value);
-}
-
-function resetFilter() {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  emit("update:inputfilter", "");
-  filterRef.value.focus();
-}
-
-function updateRowsPerPage(newPagination: any) {
-  pagination.value = newPagination;
-  currentPage.value = 1;
-}
-
-function filterFn() {
-  updatePaging(1, Number(pagination.value.rowsPerPage), filter.value);
-}
-
-function updatePaging(p: number, pS: number, key: string) {
-  emit("update:queryString", p, pS, key);
-}
-
-watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
-  emit(
-    "update:queryString",
-    currentPage.value,
-    Number(pagination.value.rowsPerPage),
-    filter.value
-  );
-});
-</script>
-
-<template>
-  <div class="q-pb-sm row q-col-gutter-sm">
-    <div class="q-gutter-sm" v-if="nornmalData == true">
-      <!-- <q-btn
-        to="/discipline-result/add"
-        size="12px"
-        flat
-        round
-        color="add"
-        icon="mdi-plus"
-      >
-        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-      </q-btn> -->
-    </div>
-    <q-space />
-    <!-- ค้นหาข้อความใน table -->
-    <q-input
-      standout
-      dense
-      v-model="filter"
-      ref="filterRef"
-      @keydown.enter.prevent="filterFn"
-      outlined
-      placeholder="ค้นหา"
-      style="max-width: 200px"
-      class="col-xs-12 col-sm-3 col-md-2"
-    >
-      <template v-slot:append>
-        <q-icon v-if="filter == ''" name="search" />
-        <q-icon
-          v-if="filter !== ''"
-          name="clear"
-          class="cursor-pointer"
-          @click="resetFilter"
-        />
-      </template>
-    </q-input>
-    <!-- แสดงคอลัมน์ใน table -->
-    <q-select
-      :model-value="inputvisible"
-      @update:model-value="updateVisible"
-      :display-value="$q.lang.table.columns"
-      multiple
-      outlined
-      dense
-      :options="attrs.columns"
-      options-dense
-      option-value="name"
-      map-options
-      emit-value
-      class="col-xs-12 col-sm-3 col-md-2 gt-xs"
-    >
-    </q-select>
-  </div>
-  <d-table
-    ref="table"
-    flat
-    v-bind="attrs"
-    virtual-scroll
-    :virtual-scroll-sticky-size-start="48"
-    dense
-    :rows-per-page-options="[10, 25, 50, 100]"
-    :pagination="pagination"
-    @update:pagination="updateRowsPerPage"
-  >
-    <template v-slot:header="props">
-      <q-tr :props="props">
-        <q-th v-for="col in props.cols" :key="col.name" :props="props">
-          <span class="text-weight-medium" v-html="col.label" />
-        </q-th>
-      </q-tr>
-    </template>
-    <template #body="props">
-      <slot v-bind="props" name="columns"></slot>
-    </template>
-    <template v-slot:pagination="scope">
-      <q-pagination
-        v-model="currentPage"
-        active-color="primary"
-        color="dark"
-        :max="Number(props.maxPage)"
-        size="sm"
-        boundary-links
-        direction-links
-      ></q-pagination>
-    </template>
-  </d-table>
-</template>
-
-<style lang="scss" scoped>
-.icon-color {
-  color: #4154b3;
-}
-
-.custom-table2 {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-  }
-
-  .q-table td:nth-of-type(2) {
-    z-index: 3 !important;
-  }
-
-  .q-table th:nth-of-type(2),
-  .q-table td:nth-of-type(2) {
-    position: sticky;
-    left: 0;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>

src/modules/12_evaluatePersonal/interface/index/Main.ts

@@ -77,6 +77,22 @@ interface FileLists {
   pathName: string; //link file
 }
 
+interface Meeting {
+  id: string;
+  date: Date | string;
+  dateStart: Date | string;
+  title: string;
+  round: string;
+  dateEnd: Date | string;
+  result: string;
+  timePeriod: string;
+}
+
+interface Pagination {
+  page: number;
+  rowsPerPage: number;
+}
+
 export type {
   DataOption,
   InvestigatefactsDataRowType,
@@ -88,4 +104,6 @@ export type {
   DataOptioGroup,
   DataOptionYear,
   OptionStatus,
+  Meeting,
+  Pagination,
 };

src/modules/12_evaluatePersonal/interface/index/meeting.ts

@@ -22,13 +22,11 @@ interface ArrayFileList {
 interface FormData {
   id: string;
   rounded: string;
-  dateMeeting: string;
   dateMeetingStart: Date | null;
   dateMeetingEnd: Date | null;
   consider: string;
   period: string;
   title: string;
-  // file: FileOj[];
 }
 
 interface FileOj {

src/modules/12_evaluatePersonal/interface/response/Main.ts

@@ -0,0 +1,34 @@
+interface Directors {
+  email: string;
+  firstName: string;
+  id: string;
+  lastName: string;
+  phone: string;
+  position: string;
+  positionName: string;
+  prefix: string;
+  createdAt: string | Date;
+  createdFullName: string;
+  createdUserId: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string | Date;
+}
+
+interface Meetings {
+  dateEnd: Date | string;
+  dateStart: Date | string;
+  duration: string;
+  id: string;
+  result: string;
+  round: string;
+  title: string;
+  createdAt: string | Date;
+  createdFullName: string;
+  createdUserId: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string | Date;
+}
+
+export type { Directors, Meetings };

src/modules/12_evaluatePersonal/router.ts

@@ -7,8 +7,7 @@ const directorPage = () =>
   import("@/modules/12_evaluatePersonal/components/Director/MainPage.vue");
 const directorAddPage = () =>
   import("@/modules/12_evaluatePersonal/components/Director/AddPage.vue");
-// const directorEditPage = () =>
+
-//   import("@/modules/12_evaluatePersonal/components/Director/EditPage.vue");
 
 const meetingPage = () =>
   import("@/modules/12_evaluatePersonal/components/Meeting/MainPage.vue");

src/modules/12_evaluatePersonal/views/DetailPage.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onBeforeMount } from "vue";
 import { useQuasar } from "quasar";
+
 import { useRoute, useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
 
 /** impolerType*/
 import type { PersonInformation } from "@/modules/12_evaluatePersonal/interface/response/evalute";
@@ -12,36 +15,31 @@ import type { PersonInformation } from "@/modules/12_evaluatePersonal/interface/
 import Tab1 from "@/modules/12_evaluatePersonal/components/Detail/Tab1.vue"; // ชำนาญการ
 import Tab2 from "@/modules/12_evaluatePersonal/components/Detail/Tab2.vue"; // ชำนาญการพิเศษ
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
-
 /** use*/
 const mixin = useCounterMixin();
 const store = useEvaluateDetailStore();
 const router = useRouter();
 const $q = useQuasar();
 const route = useRoute();
-
 const { showLoader, hideLoader, messageError } = mixin;
 
 const id = ref<string>(route.params.id as string); // id รายการประเมิน
+const data = ref<PersonInformation>(); //ข้อมูลคุณสมบัติ
+const prefix = ref<string>(""); //คำนำหน้ส
+const fullName = ref<string>(""); //ชื่อ-นามสกุล
 
-const data = ref<PersonInformation[]>([]);
+/**
-const prefix = ref<string>("");
+ *  funmction เรียกข้อมูลคุณสมบัติ
-const fullName = ref<string>("");
+ */
-
-/** funmction เรียกขอ้มูลคุณสมบัติ*/
 async function fetchFeature() {
   showLoader();
   await http
     .get(config.API.evaluateGetDetail(id.value))
     .then((res) => {
       data.value = res.data.result;
-      const person: any = data.value;
       if (data.value) {
-        fullName.value = person.fullName;
+        fullName.value = data.value.fullName;
-        prefix.value = person.prefix;
+        prefix.value = data.value.prefix;
       }
     })
     .catch((e) => {
@@ -54,8 +52,10 @@ async function fetchFeature() {
     });
 }
 
-/** HookLifecycle*/
+/**
-onMounted(async () => {
+ * HookLifecycle ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
+onBeforeMount(async () => {
   await fetchFeature();
 });
 </script>

src/modules/12_evaluatePersonal/views/MainPage.vue

@@ -21,12 +21,37 @@ const store = useEvalutuonStore();
 const { showLoader, hideLoader, messageError } = mixin;
 
 /** request body*/
-const currentPage = ref<number>(1);
+const currentPage = ref<number>(1); //หน้าปัจจุบัน
-const maxPage = ref<number>(0);
+const maxPage = ref<number>(0); //จำนวนหน่า
-const page = ref<number>(1);
+const page = ref<number>(1); //หน้า
-const total = ref<number>(0);
+const total = ref<number>(0); //จำนวนข้อมูลทั้งหมด
-const filter = ref<string>("");
+const filter = ref<string>(""); //คำค้นหา
-const pageSize = ref<number>(10);
+const pageSize = ref<number>(10); //จำนวนรายการต่อหน้า
+const filterRef = ref<HTMLInputElement | null>(null);
+//ค้นหาตามสถานะ
+const selectedStatus = ref<string[]>([
+  "CHECK_SPEC",
+  "PREPARE_DOC_V1",
+  "CHECK_DOC_V1",
+  "WAIT_CHECK_DOC_V1",
+  "ANNOUNCE_WEB",
+  "PREPARE_DOC_V2",
+  "WAIT_CHECK_DOC_V2",
+  "CHECK_DOC_V2",
+]);
+//ข้อมูลค้นหาตามสถานะ
+const optionsMain = ref<OptionStatus[]>([
+  { val: "CHECK_SPEC", label: "ตรวจสอบคุณสมบัติด้วยตนเอง" },
+  { val: "PREPARE_DOC_V1", label: "จัดเตรียมเอกสารเล่ม 1" },
+  { val: "CHECK_DOC_V1", label: "ตรวจสอบเอกสารเล่ม 1" },
+  { val: "WAIT_CHECK_DOC_V1", label: "รอตรวจสอบคุณสมบัติ" },
+  { val: "ANNOUNCE_WEB", label: "ประกาศบนเว็บไซต์" },
+  { val: "PREPARE_DOC_V2", label: "จัดเตรียมเอกสารเล่ม 2" },
+  { val: "WAIT_CHECK_DOC_V2", label: "ตรวจสอบเอกสารเล่ม 2" },
+  { val: "CHECK_DOC_V2", label: "รอพิจารณาผลการประเมิน" },
+  { val: "DONE", label: "เสร็จสิ้น" },
+]);
+const options = ref<OptionStatus[]>([]); //ตัวเลือกค้นหาตามสถานะ
 
 /** pagination ของตาราง*/
 const initialPagination = ref<any>({
@@ -45,23 +70,18 @@ async function updatePagination(initialPagination: any) {
   pageSize.value = initialPagination.rowsPerPage;
 }
 
-/** function callback เมื่อมีการเปลี่ยนหน้า*/
+/**
-watch(
+ * function ค้นหาตาม keyword
-  () => pageSize.value,
+ */
-  () => {
-    fetchEvaluteList();
-  }
-);
-
-const filterRef = ref<HTMLInputElement | null>(null);
-/** function ค้นหาตาม keyword*/
 function filterFn() {
   updatePagination(filter.value);
   pageSize.value = initialPagination.value.rowsPerPage;
   fetchEvaluteList();
 }
 
-/** functrion ล้างค้นหา*/
+/**
+ * functrion ล้างค้นหาD
+ */
 function resetFilter() {
   filter.value = "";
   fetchEvaluteList();
@@ -70,7 +90,9 @@ function resetFilter() {
   }
 }
 
-/** function เรียกรายการคำขอประเมิน*/
+/**
+ * function เรียกรายการคำขอประเมินD
+ */
 async function fetchEvaluteList() {
   showLoader();
   const body = {
@@ -103,30 +125,9 @@ function Detailpage(id: string) {
   router.push(`/evaluate/detail/${id}`);
 }
 
-const selectedStatus = ref<string[]>([
+/**
-  "CHECK_SPEC",
+ * ชื่อค่าที่ค้นหาสภานะ
-  "PREPARE_DOC_V1",
+ */
-  "CHECK_DOC_V1",
-  "WAIT_CHECK_DOC_V1",
-  "ANNOUNCE_WEB",
-  "PREPARE_DOC_V2",
-  "WAIT_CHECK_DOC_V2",
-  "CHECK_DOC_V2",
-]);
-const options = ref<OptionStatus[]>([]);
-const optionsMain = ref<OptionStatus[]>([
-  { val: "CHECK_SPEC", label: "ตรวจสอบคุณสมบัติด้วยตนเอง" },
-  { val: "PREPARE_DOC_V1", label: "จัดเตรียมเอกสารเล่ม 1" },
-  { val: "CHECK_DOC_V1", label: "ตรวจสอบเอกสารเล่ม 1" },
-  { val: "WAIT_CHECK_DOC_V1", label: "รอตรวจสอบคุณสมบัติ" },
-  { val: "ANNOUNCE_WEB", label: "ประกาศบนเว็บไซต์" },
-  { val: "PREPARE_DOC_V2", label: "จัดเตรียมเอกสารเล่ม 2" },
-  { val: "WAIT_CHECK_DOC_V2", label: "ตรวจสอบเอกสารเล่ม 2" },
-  { val: "CHECK_DOC_V2", label: "รอพิจารณาผลการประเมิน" },
-  { val: "DONE", label: "เสร็จสิ้น" },
-]);
-
-/** ชื่อค่าที่ค้นหาสภานะ*/
 const label = computed(() => {
   const filterOption = optionsMain.value.filter((option) =>
     selectedStatus.value.includes(option.val)
@@ -145,14 +146,22 @@ const label = computed(() => {
  * @param update  อัพเดทค่า
  * @param refData ดาต้าที่ต้องการฟิลเตอร์
  */
-function filterOption(val: any, update: Function) {
+function filterOption(val: string, update: Function) {
   update(() => {
     options.value = optionsMain.value.filter(
-      (v: any) => v.label.indexOf(val) > -1
+      (v: OptionStatus) => v.label.indexOf(val) > -1
     );
   });
 }
 
+/** function callback เมื่อมีการเปลี่ยนหน้า*/
+watch(
+  () => pageSize.value,
+  () => {
+    fetchEvaluteList();
+  }
+);
+
 /** HookLifecycle */
 onMounted(async () => {
   await fetchEvaluteList(); // เรียกข้อมูลรายการปรัเมิน
@@ -163,6 +172,7 @@ onMounted(async () => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการคำขอประเมิน
   </div>
+
   <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
     <div class="row col-12 q-col-gutter-sm q-mb-sm">
       <q-select
@@ -178,7 +188,7 @@ onMounted(async () => {
         style="width: 35vw"
         @update:model-value="fetchEvaluteList"
         use-input
-        @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
+        @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn) "
       >
         <template v-slot:selected>
           <div>
@@ -280,7 +290,7 @@ onMounted(async () => {
                 <div class="table_ellipsis">{{ props.row.agency }}</div>
               </div>
               <div v-else>
-                {{ col.value }}
+                {{ col.value ?? "-" }}
               </div>
             </q-td>
           </q-tr>