From 86ba9053a7efca68828cf6c3d7513cd07d09d4f0 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Sat, 23 Dec 2023 16:21:10 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=B4=E0=B8=99=20step=201?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Detail/step/step4.vue          |  33 +-
 .../components/Detail/step/step5.vue          |  52 +-
 .../components/Detail/step/step8.vue          |   6 +-
 .../components/Detail/viewstep/viewStep1.vue  | 507 +++++++++++-------
 .../interface/index/evalute.ts                |  28 +-
 .../store/EvaluateDetail.ts                   | 145 +++--
 .../12_evaluatePersonal/views/MainPage.vue    |   1 -
 7 files changed, 473 insertions(+), 299 deletions(-)

diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue
index 841f0e58d..7e1855c4f 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue
@@ -226,6 +226,7 @@ function fileUpLoad(url: string) {
     })
     .finally(() => {
       fileEvaluationUpload.value = null;
+      checkDoc10();
       success($q, "อัปโหลดไฟล์สำเร็จ");
     });
 }
@@ -250,6 +251,32 @@ function sentMessenger() {
       });
   });
 }
+
+const download10Url = ref<string>("");
+function checkDoc10() {
+  showLoader();
+  http
+    .get(
+      config.API.evaluationPatchData(
+        "เล่ม 1",
+        id.value,
+        "10-ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)"
+      )
+    )
+    .then((res: any) => {
+      download10Url.value = res.data.downloadUrl;
+    })
+    // .catch((e) => {
+    //   messageError($q, e);
+    // })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  checkDoc10();
+});
 </script>
 
 <template>
@@ -320,7 +347,9 @@ function sentMessenger() {
               </div>
               <div class="col-xs-12 col-sm-6 row">
                 <q-btn
-                  v-if="fileEvaluationUpload"
+                  v-if="download10Url != ''"
+                  :href="download10Url"
+                  target="_blank"
                   class="col-12"
                   outline
                   icon="visibility"
@@ -361,7 +390,7 @@ function sentMessenger() {
         </div>
       </q-card>
     </div>
-    <div class="col-12">
+    <div v-if="store.currentStep == 4" class="col-12">
       <div class="q-mt-xs q-gutter-md" align="right">
         <q-btn label="ติดต่อผู้ขอประเมิน" color="info" @click="openPopUp" />
         <q-btn
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue
index e3c0ee02d..f6188deff 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue
@@ -127,6 +127,7 @@ function fileUpLoad(url: string) {
     })
     .finally(() => {
       fileEvaluation5.value = null;
+      checkDocResult();
       success($q, "อัปโหลดไฟล์สำเร็จ");
     });
 }
@@ -235,8 +236,31 @@ function onClickViewPDF(file: any) {
   modalView.value = true;
 }
 
+const download10Url = ref<string>("");
+function checkDocResult() {
+  showLoader();
+  http
+    .get(
+      config.API.evaluationPatchData(
+        "เล่ม 1",
+        id.value,
+        "บันทึกแจ้งผลการประกาศคัดเลือก"
+      )
+    )
+    .then((res: any) => {
+      download10Url.value = res.data.downloadUrl;
+    })
+    // .catch((e) => {
+    //   messageError($q, e);
+    // })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 onMounted(() => {
   getDate();
+  checkDocResult();
 });
 </script>
 
@@ -296,37 +320,21 @@ onMounted(() => {
         <div class="row">
           <div class="col-12 q-pa-sm">
             <div class="row q-col-gutter-md col-12">
-              <!-- <div class="col-xs-12 col-sm-6 row">
-                <q-btn
-                  class="col-12"
-                  outline
-                  icon="download"
-                  label="ดาวน์โหลดต้นแบบ"
-                  color="primary"
-                  @click="
-                    onClickDowloadFile(
-                      'EV1_005',
-                      'template-1',
-                      'แบบพิจารณาคุณสมบัติบุคคล'
-                    )
-                  "
-                >
-                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                >
-              </div>
               <div class="col-xs-12 col-sm-6 row">
                 <q-btn
-                  v-if="fileEvaluation5"
+                  v-if="download10Url != ''"
+                  :href="download10Url"
+                  target="_blank"
                   class="col-12"
                   outline
                   icon="visibility"
                   label="ดูไฟล์เอกสาร"
                   color="primary"
-                  @click="onClickViewPDF(fileEvaluation5)"
                 >
                   <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                 >
-              </div> -->
+              </div>
+
               <div class="col-xs-12 col-sm-10 row">
                 <q-file
                   ref="fileEvaluation1Ref"
@@ -446,7 +454,7 @@ onMounted(() => {
         </div>
       </q-card>
     </div> -->
-    <div class="col-12">
+    <div v-if="store.currentStep == 5" class="col-12">
       <div class="q-mt-xs q-gutter-md" align="right">
         <q-btn
           unelevated
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step8.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step8.vue
index 878d8de2e..482dfe290 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step8.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step8.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import axios from "axios";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -184,6 +184,10 @@ function nextStep(){
       hideLoader();
     });
 }
+
+onMounted(()=>{
+  
+})
 </script>
 
 <template>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
index adbd5cbcc..1e75588c6 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
@@ -1,8 +1,15 @@
 <script setup lang="ts">
 import TableData from "@/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue";
+import { useCounterMixin } from "@/stores/mixin";
 
 import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
+import { onMounted, reactive, watch } from "vue";
+import type {
+  EducationForm,
+  CertificatesForm,
+} from "@/modules/12_evaluatePersonal/interface/index/evalute";
 
+const mixin = useCounterMixin();
 const props = defineProps({
   data: {
     type: Object,
@@ -10,129 +17,227 @@ const props = defineProps({
   },
 });
 
+const { date2Thai } = mixin;
+
 const store = useEvaluateDetailStore();
 const {
-  columnsLicense,
-  columnPeriodhistory,
-  columnTrainingHistory,
+  columnsCertificates,
+  columnSalaries,
+  columnTraining,
   columnProjectsProposed,
 } = store;
+
+const formDetail = reactive({
+  userId: props.data.id,
+  citizenId: "",
+  prefix: "",
+  fullName: "",
+  position: "",
+  oc: "",
+  salary: "",
+  positionLevel: "",
+  posNo: "",
+  birthDate: "",
+  govAge: "",
+  educations: [] as EducationForm[],
+  certificates: [],
+  salaries: [],
+  trainings: [],
+  assessments: [],
+  // Type: "",
+  // Step: "",
+});
+
+onMounted(() => {
+  if (props.data) {
+    // formDetail.userId = props.data.id;
+    // formDetail.citizenId = props.data.citizenId;
+    formDetail.prefix = props.data.prefix;
+    formDetail.fullName = `${props.data.firstName}  ${props.data.lastName}`;
+    formDetail.position = props.data.position;
+    formDetail.oc = props.data.oc;
+    formDetail.salary = props.data.salary
+      ? props.data.salary.toLocaleString("th-TH")
+      : "-";
+    formDetail.positionLevel = props.data.positionLevel;
+    formDetail.posNo = props.data.posNo;
+    formDetail.birthDate =
+      props.data.birthDate && date2Thai(props.data.birthDate);
+    formDetail.govAge = props.data.govAge;
+    formDetail.educations = props.data.educations;
+
+    formDetail.certificates = props.data.certificates
+      ? props.data.certificates.map((e: CertificatesForm) => ({
+          certificateNo: e.certificateNo,
+          certificateType: e.certificateType,
+          expireDate: date2Thai(e.expireDate),
+          issueDate: date2Thai(e.issueDate),
+          issuer: e.issuer,
+        }))
+      : [];
+    formDetail.salaries = props.data.salaries
+      ? props.data.salaries.map((e: any) => ({
+          amount: e.amount,
+          date: date2Thai(e.date),
+          mouthSalaryAmount: e.mouthSalaryAmount ? e.mouthSalaryAmount : 0,
+          posNo: e.posNo,
+          position: e.position,
+          positionSalaryAmount: e.positionSalaryAmount
+            ? e.positionSalaryAmount
+            : 0,
+          refCommandDate: e.refCommandDate ? e.refCommandDate : "",
+
+          refCommandNo: e.refCommandNo ? e.refCommandNo : "",
+          salaryClass: e.salaryClass ? e.salaryClass : "",
+          salaryRef: e.salaryRef ? e.salaryRef : "",
+          salaryStatus: e.salaryStatus ? e.salariesStatus : "",
+          //
+          oc: "-",
+          lineWork: "-",
+          side: "-",
+          positionType: "-",
+          level: "-",
+          positionsAdministrative: "-",
+          aspectAdministrative: "-",
+        }))
+      : [];
+
+    formDetail.trainings = props.data.trainings
+      ? props.data.trainings.map((e: any) => ({
+          dateOrder: date2Thai(e.dateOrder),
+          department: e.department,
+          duration: e.duration,
+          endDate: date2Thai(e.endDate),
+          name: e.name,
+          numberOrder: e.numberOrder,
+          place: e.place,
+          startDate: date2Thai(e.startDate),
+          topic: e.topic,
+          yearly: e.yearly,
+        }))
+      : [];
+    formDetail.assessments = props.data.assessments;
+  }
+});
 </script>
 
 <template>
-  <div>
-    <q-scroll-area style="height: 450px; max-width: 100%">
-      <div class="q-pa-xs">
-        <q-card class="q-gutter-md" style="max-width: 100%">
-          <q-card bordered style="border: 1px solid #d6dee1">
-            <div class="text-weight-bold row items-center bg-grey-2">
-              <span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
+  <q-scroll-area style="height: 450px; max=width: 100%">
+    <div class="q-pa-xs">
+      <q-card class="q-gutter-md" style="max-width: 100%">
+        <q-card bordered style="border: 1px solid #d6dee1">
+          <div class="text-weight-bold row items-center bg-grey-2">
+            <span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
+          </div>
+          <q-separator />
+
+          <div class="row q-pa-sm">
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="formDetail.prefix"
+                label="คำนำหน้าชื่อ"
+              ></q-input>
             </div>
-            <q-separator />
-            <div class="row q-pa-sm">
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  :model-value="data.prefix"
-                  label="คำนำหน้าชื่อ"
-                />
-              </div>
-
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  :model-value="data.fullName"
-                  label="ชื่อ - นามสกุล"
-                />
-              </div>
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  model-value="19/03/44"
-                  readonly
-                  label="วันเดือนปีเกิด"
-                >
-                  <template v-slot:prepend>
-                    <q-icon class="size-icon" name="o_calendar_today" />
-                  </template>
-                </q-input>
-              </div>
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  model-value="ไม่มี"
-                  label="ตำแหน่ง"
-                />
-              </div>
-
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  model-value="กย.11"
-                  label="ตำแหน่งเลขที่"
-                />
-              </div>
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  model-value="หน่วยใหม่กับหน่วยเก่า"
-                  label="สังกัด"
-                />
-              </div>
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  model-value="1,0000"
-                  label="เงินเดือน"
-                />
-              </div>
-
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  model-value="ระดับปัจจุบัน"
-                  label="ระดับปัจจุบัน"
-                />
-              </div>
-
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  model-value="ระดับที่ประเมิน"
-                  label="ระดับที่ประเมิน"
-                />
-              </div>
-
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  model-value="1000 ปี"
-                  label="อายุราชการ"
-                />
-              </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="formDetail.fullName"
+                label="ชื่อ - นามสกุล"
+              />
             </div>
-          </q-card>
-
-          <q-card bordered style="border: 1px solid #d6dee1">
-            <div class="text-weight-bold row items-center bg-grey-2">
-              <span class="q-ml-lg q-my-sm">ประวัติการศึกษา</span>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                :model-value="formDetail.birthDate"
+                readonly
+                label="วันเดือนปีเกิด"
+              >
+                <template v-slot:prepend>
+                  <q-icon class="size-icon" name="o_calendar_today" />
+                </template>
+              </q-input>
             </div>
-            <q-separator />
-            <div class="row q-pa-sm">
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="formDetail.position"
+                label="ตำแหน่ง"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="formDetail.posNo"
+                label="ตำแหน่งเลขที่"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="formDetail.oc"
+                label="สังกัด"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="formDetail.salary"
+                label="เงินเดือน"
+              />
+            </div>
+
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="formDetail.positionLevel"
+                label="ระดับปัจจุบัน"
+              />
+            </div>
+
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="formDetail.positionLevel"
+                label="ระดับที่ประเมิน"
+              />
+            </div>
+
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="formDetail.govAge"
+                label="อายุราชการ"
+              />
+            </div>
+          </div>
+        </q-card>
+
+        <q-card bordered style="border: 1px solid #d6dee1">
+          <div class="text-weight-bold row items-center bg-grey-2">
+            <span class="q-ml-lg q-my-sm">ประวัติการศึกษา </span>
+          </div>
+          <q-separator />
+          <div v-if="formDetail.educations.length > 0">
+            <div
+              class="row q-pa-sm"
+              v-for="(education, index) in formDetail.educations"
+              :key="index"
+            >
               <div class="col-xs-6 col-sm-4 col-md-3">
                 <q-input
                   borderless
                   readonly
-                  model-value="ปริญญาตรี"
+                  :model-value="education.educationLevel"
                   label="ระดับศึกษา"
                 />
               </div>
@@ -141,7 +246,7 @@ const {
                 <q-input
                   borderless
                   readonly
-                  model-value="มหาวิทยาลัยก."
+                  :model-value="education.institute"
                   label="สถานศึกษา"
                 />
               </div>
@@ -149,7 +254,7 @@ const {
               <div class="col-xs-6 col-sm-4 col-md-3">
                 <q-input
                   borderless
-                  model-value="19/03/44"
+                  :model-value="date2Thai(education.startDate)"
                   readonly
                   label="ตั้งแต่"
                 >
@@ -160,7 +265,12 @@ const {
               </div>
 
               <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input borderless model-value="19/03/44" readonly label="ถึง">
+                <q-input
+                  borderless
+                  :model-value="date2Thai(education.endDate)"
+                  readonly
+                  label="ถึง"
+                >
                   <template v-slot:prepend>
                     <q-icon class="size-icon" name="o_calendar_today" />
                   </template>
@@ -169,7 +279,7 @@ const {
               <div class="col-xs-6 col-sm-4 col-md-3">
                 <q-input
                   borderless
-                  model-value="19/03/44"
+                  :model-value="date2Thai(education.finishDate)"
                   readonly
                   label="วันทราสำเร็จการศึกษา"
                 >
@@ -183,7 +293,7 @@ const {
                 <q-input
                   borderless
                   readonly
-                  model-value="ปริญญาตรี"
+                  :model-value="education.degree"
                   label="วุฒิการศึกษาในตําแหน่ง"
                 />
               </div>
@@ -192,7 +302,7 @@ const {
                 <q-input
                   borderless
                   readonly
-                  model-value="ปริญญาตรี"
+                  :model-value="education.degree"
                   label="วุฒิการศึกษา"
                 />
               </div>
@@ -201,99 +311,112 @@ const {
                 <q-input
                   borderless
                   readonly
-                  model-value="-"
+                  :model-value="education.field"
                   label="สาขาวิชา/ทาง"
                 />
               </div>
               <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input borderless readonly model-value="-" label="ทุน" />
+                <q-input
+                  borderless
+                  readonly
+                  :model-value="education.fundName"
+                  label="ทุน"
+                />
               </div>
 
               <div class="col-xs-6 col-sm-4 col-md-3">
                 <q-input
                   borderless
                   readonly
-                  model-value="3.33"
+                  :model-value="education.gpa"
                   label="เกรดเฉลี่ย"
                 />
               </div>
 
               <div class="col-xs-6 col-sm-4 col-md-6">
-                <q-input borderless readonly model-value="ไทย" label="ประเทศ" />
+                <q-input
+                  borderless
+                  readonly
+                  :model-value="education.country"
+                  label="ประเทศ"
+                />
               </div>
             </div>
-          </q-card>
-
-          <q-card bordered style="border: 1px solid #d6dee1">
-            <div class="text-weight-bold row items-center bg-grey-2">
-              <span class="q-ml-lg q-my-sm">ใบอนุญาตประกอบวิชาชีพ</span>
-            </div>
-            <q-separator />
-            <div class="row q-pa-sm">
-              <div class="col-xs-12 col-sm-12 col-md-12">
-                <TableData :columns="columnsLicense" />
-              </div>
-            </div>
-          </q-card>
-
-          <q-card bordered style="border: 1px solid #d6dee1">
-            <div class="text-weight-bold row items-center bg-grey-2">
-              <span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
-            </div>
-            <q-separator />
-            <div class="row q-pa-sm">
-              <div class="col-xs-12 col-sm-12 col-md-12">
-                <TableData :columns="columnPeriodhistory" />
-              </div>
-            </div>
-          </q-card>
-
-          <q-card bordered style="border: 1px solid #d6dee1">
-            <div class="text-weight-bold row items-center bg-grey-2">
-              <span class="q-ml-lg q-my-sm">ประวัติการฝึกอบรมดูงาน</span>
-            </div>
-            <q-separator />
-            <div class="row q-pa-sm">
-              <div class="col-xs-12 col-sm-12 col-md-12">
-                <TableData :columns="columnTrainingHistory" />
-              </div>
-            </div>
-          </q-card>
-
-          <q-card bordered style="border: 1px solid #d6dee1">
-            <div class="text-weight-bold row items-center bg-grey-2">
-              <span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน </span>
-            </div>
-            <q-separator />
-            <div class="row q-pa-sm">
-              <div class="col-xs-12 col-sm-12 col-md-12">
-                <TableData :columns="columnTrainingHistory" />
-              </div>
-            </div>
-          </q-card>
-
-          <q-card bordered style="border: 1px solid #d6dee1">
-            <div class="text-weight-bold row items-center bg-grey-2">
-              <span class="q-ml-lg q-my-sm"
-                >ผลงานทีเคยเสนอขอประเมิน (ถ้ามี)</span
-              >
-            </div>
-            <q-separator />
-            <div class="row q-pa-sm">
-              <div class="col-xs-12 col-sm-12 col-md-12">
-                <TableData :columns="columnProjectsProposed" />
-              </div>
-            </div>
-          </q-card>
+          </div>
+          <div v-else class="row col-12 q-pa-md">ไม่มีประวัติการศึกษา</div>
+          <q-separator />
         </q-card>
-      </div>
-    </q-scroll-area>
-  </div>
-</template>
 
-<style scoped lang="scss">
-.size-icon {
-  font-size: 20px; /* ปรับขนาดตามที่คุณต้องการ */
-}
-</style>
-@/modules/12_evaluatePersonal/store/evaluate
+        <q-card bordered style="border: 1px solid #d6dee1">
+          <div class="text-weight-bold row items-center bg-grey-2">
+            <span class="q-ml-lg q-my-sm">ใบอนุญาตประกอบวิชาชีพ</span>
+          </div>
+          <q-separator />
+          <div class="row q-pa-sm">
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <TableData
+                :columns="columnsCertificates"
+                :row="formDetail.certificates"
+              />
+            </div>
+          </div>
+        </q-card>
+
+        <q-card bordered style="border: 1px solid #d6dee1">
+          <div class="text-weight-bold row items-center bg-grey-2">
+            <span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
+          </div>
+          <q-separator />
+          <div class="row q-pa-sm">
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <TableData :columns="columnSalaries" :row="formDetail.salaries" />
+            </div>
+          </div>
+        </q-card>
+
+        <q-card bordered style="border: 1px solid #d6dee1">
+          <div class="text-weight-bold row items-center bg-grey-2">
+            <span class="q-ml-lg q-my-sm">ประวัติการฝึกอบรมดูงาน</span>
+          </div>
+          <q-separator />
+          <div class="row q-pa-sm">
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <TableData
+                :columns="columnTraining"
+                :row="formDetail.trainings"
+              />
+            </div>
+          </div>
+        </q-card>
+
+        <q-card bordered style="border: 1px solid #d6dee1">
+          <div class="text-weight-bold row items-center bg-grey-2">
+            <span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน </span>
+          </div>
+          <q-separator />
+          <div class="row q-pa-sm">
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              -
+              <!-- <TableData
+                :columns="columnTraining"
+                :row="formDetail.Trainings"
+              /> -->
+            </div>
+          </div>
+        </q-card>
+
+        <q-card bordered style="border: 1px solid #d6dee1">
+          <div class="text-weight-bold row items-center bg-grey-2">
+            <span class="q-ml-lg q-my-sm">ผลงานทีเคยเสนอขอประเมิน (ถ้ามี)</span>
+          </div>
+          <q-separator />
+          <div class="row q-pa-sm">
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <TableData :columns="columnProjectsProposed" />
+            </div>
+          </div>
+        </q-card>
+      </q-card>
+    </div>
+  </q-scroll-area>
+</template>
diff --git a/src/modules/12_evaluatePersonal/interface/index/evalute.ts b/src/modules/12_evaluatePersonal/interface/index/evalute.ts
index 60f9e8e24..9291521b9 100644
--- a/src/modules/12_evaluatePersonal/interface/index/evalute.ts
+++ b/src/modules/12_evaluatePersonal/interface/index/evalute.ts
@@ -14,4 +14,30 @@ interface FormCommandRef {
   [key: string]: any;
 }
 
-export type { FormCommand, FormCommandRef };
+interface EducationForm {
+  country: string;
+  degree: string;
+  duration: string;
+  durationYear: number;
+  educationLevel: string;
+  endDate: Date;
+  field: string;
+  finishDate: Date;
+  fundName: string;
+  gpa: string;
+  institute: string;
+  isDate: boolean;
+  isEducation: boolean;
+  other: string;
+  startDate: Date;
+}
+
+interface CertificatesForm {
+  certificateNo: string;
+  certificateType: string;
+  expireDate: Date;
+  issueDate: Date;
+  issuer: string;
+}
+
+export type { FormCommand, FormCommandRef, EducationForm, CertificatesForm };
diff --git a/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts b/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts
index 4e42cb9d5..0537f9445 100644
--- a/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts
+++ b/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts
@@ -24,220 +24,209 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
   const log = ref<any>(0)
   const pdfSrcStore = ref<any>()
   const numOfPagesStore = ref<any>()
-  const columnsLicense = ref<QTableProps["columns"]>([
+
+  const columnsCertificates = ref<QTableProps["columns"]>([
     {
-      name: "",
-      align: "center",
+      name: "certificateType",
+      align: "left",
       label: "ชื่อใบอนุณาต",
       sortable: false,
-      field: "",
+      field: "certificateType",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "issuer",
       align: "left",
       label: "หน่วยงานผู้ออกใบอนุญาต",
       sortable: true,
-      field: "",
+      field: "issuer",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "certificateNo",
       align: "left",
       label: "เลขที่ใบอนุญาต",
       sortable: true,
-      field: "",
+      field: "certificateNo",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "issueDate",
       align: "left",
       label: "วันที่ออกใบอนุญาต",
       sortable: true,
-      field: "",
+      field: "issueDate",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "",
+      name: "expireDate",
       align: "left",
       label: "วันที่หมดอายุ",
       sortable: true,
-      field: "",
+      field: "expireDate",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
   ]);
 
-  const columnPeriodhistory = ref<QTableProps["columns"]>([
+  const columnSalaries = ref<QTableProps["columns"]>([
     {
-      name: "",
-      align: "center",
+      name: "date",
+      align: "left",
       label: "วัน เดือน ปี",
       sortable: false,
-      field: "",
+      field: "date",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "",
+      name: "oc",
       align: "left",
       label: "สังกัด",
       sortable: true,
-      field: "",
+      field: "oc",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "position",
       align: "left",
       label: "ตำแหน่ง",
       sortable: true,
-      field: "",
+      field: "position",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "posNo",
       align: "left",
       label: "ตำแหน่งเลขที่",
       sortable: true,
-      field: "",
+      field: "posNo",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "",
+      name: "lineWork",
       align: "left",
       label: "สายงาน",
       sortable: true,
-      field: "",
+      field: "lineWork",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "side",
       align: "left",
       label: "ด้าน/สาขา",
       sortable: true,
-      field: "",
+      field: "side",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "positionType",
       align: "left",
       label: "ตำแหน่งประเภท",
       sortable: true,
-      field: "",
+      field: "positionType",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "level",
       align: "left",
       label: "ระดับ",
       sortable: true,
-      field: "",
+      field: "level",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "positionsAdministrative ",
       align: "left",
       label: "ตำแหน่งทางการบริหาร",
       sortable: true,
-      field: "",
+      field: "positionsAdministrative",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "aspectAdministrative",
       align: "left",
       label: "ด้านทางการบริหาร",
       sortable: true,
-      field: "",
+      field: "aspectAdministrative",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
   ]);
 
-  const columnTrainingHistory = ref<QTableProps["columns"]>([
+  const columnTraining = ref<QTableProps["columns"]>([
     {
-      name: "",
-      align: "center",
+      name: "name",
+      align: "left",
       label: "ชื่อโครงการ/หลักสูตรการฝึกอบรม",
       sortable: false,
-      field: "",
+      field: "name",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "topic",
       align: "left",
       label: "หัวข้อการฝึกอบรม/ดูงาน",
       sortable: true,
-      field: "",
+      field: "topic",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "startDate",
       align: "left",
       label: "วันเริ่มต้นการฝึกอบรม/ดูงาน",
       sortable: true,
-      field: "",
+      field: "startDate",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "",
+      name: "endDate",
       align: "left",
       label: "วันสิ้นสุดการฝึกอบรม/ดูงาน",
       sortable: true,
-      field: "",
+      field: "endDate",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "",
+      name: "yearly",
       align: "left",
       label: "ปีที่อบรม/ดูงาน",
       sortable: true,
-      field: "",
+      field: "yearly",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "duration",
       align: "left",
       label: "รวมระยะเวลาในการฝึกอบรม/ดูงาน",
       sortable: true,
-      field: "",
+      field: "duration",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "department",
       align: "left",
       label: "หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน",
       sortable: true,
-      field: "",
+      field: "department",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
@@ -245,51 +234,47 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
 
   const columnProjectsProposed = ref<QTableProps["columns"]>([
     {
-      name: "",
+      name: "receivedDate",
       align: "center",
       label: "วันที่ได้รับ",
-      sortable: false,
-      field: "",
+      sortable: true,
+      field: "receivedDate",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "",
+      name: "authority",
       align: "left",
       label: "ผู้มีอำนาจลงนาม",
       sortable: true,
-      field: "",
+      field: "authority",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "datail",
       align: "left",
       label: "รายละเอียด",
       sortable: true,
-      field: "",
+      field: "detail",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "orderNumber",
       align: "left",
       label: "เลขที่คำสั่ง",
       sortable: true,
-      field: "",
+      field: "orderNumber",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "",
+      name: "doc",
       align: "left",
       label: "เอกสารอ้างอิง",
       sortable: true,
-      field: "",
+      field: "doc",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
@@ -301,9 +286,9 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
     titel,
     tabPanels,
     /** step1*/
-    columnsLicense,
-    columnPeriodhistory,
-    columnTrainingHistory,
+    columnsCertificates,
+    columnSalaries,
+    columnTraining,
     columnProjectsProposed,
     pdfSrcStore,
     numOfPagesStore,
diff --git a/src/modules/12_evaluatePersonal/views/MainPage.vue b/src/modules/12_evaluatePersonal/views/MainPage.vue
index 988b330a7..f1cb849e3 100644
--- a/src/modules/12_evaluatePersonal/views/MainPage.vue
+++ b/src/modules/12_evaluatePersonal/views/MainPage.vue
@@ -58,7 +58,6 @@ watch(
 
 function filterFn() {
   getList();
-  console.log("enter", filter.value);
 }
 function getList() {
   showLoader();