From 2be49f69554faafbf0331905e35289e520dc5278 Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Mon, 18 Mar 2024 15:44:46 +0700
Subject: [PATCH 1/3] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4:=20API=20=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=82=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A8=E0=B8=B6=E0=B8=81?=
 =?UTF-8?q?=E0=B8=A9=E0=B8=B2+Search?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PersonalInformation/05_Education.vue      | 82 ++++++++++++++++---
 1 file changed, 70 insertions(+), 12 deletions(-)

diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
index c1df295c3..50deb40c6 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
@@ -193,6 +193,7 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 const rows = ref<any>([]);
+const historyRows = ref<any>([]);
 const editId = ref<string>("");
 const route = useRoute();
 const id = ref<string>(route.params.id.toString());
@@ -202,6 +203,7 @@ const educationOption = ref([
   { label: "ใช่", value: true },
   { label: "ไม่ใช่", value: false },
 ]);
+
 const historyDialog = ref<boolean>(false);
 const educationData = reactive<{
   educationLevel: string;
@@ -252,6 +254,17 @@ const pagination = ref({
   rowsPerPage: formFilter.pageSize,
 });
 
+const historyFormFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+
+const historyPagination = ref({
+  page: historyFormFilter.page,
+  rowsPerPage: historyFormFilter.pageSize,
+});
+
 const visibleColumns = ref<string[]>([
   "educationLevel",
   "institute",
@@ -269,6 +282,23 @@ const visibleColumns = ref<string[]>([
   "finishDate",
   "note",
 ]);
+const historyVisibleColumns = ref<string[]>([
+  "educationLevel",
+  "institute",
+  "degree",
+  "field",
+  "gpa",
+  "country",
+  "duration",
+  "durationYear",
+  "other",
+  "fundName",
+  "isEducation",
+  "endDate",
+  "startDate",
+  "finishDate",
+  "note",
+]);
 
 function validateForm() {
   onSubmit();
@@ -330,6 +360,21 @@ async function fetchData(id: string) {
       hideLoader();
     });
 }
+async function fetchHistoryData(id: string) {
+  showLoader();
+  await http
+    .get(config.API.profileNewEducationHisByEducationId(id))
+    .then(async (res) => {
+      historyRows.value = res.data.result;
+      console.log(historyRows.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 
 async function addData() {
   console.log(educationData.durationYear);
@@ -566,6 +611,7 @@ onMounted(async () => {
     flat
     bordered
     :paging="true"
+    :filter="formFilter.keyword"
     dense
     v-model:pagination="pagination"
     :rows-per-page-options="[20, 50, 100]"
@@ -635,7 +681,9 @@ onMounted(async () => {
             round
             size="14px"
             icon="mdi-history"
-            @click="() => (historyDialog = true)"
+            @click="
+              () => (fetchHistoryData(props.row.id), (historyDialog = true))
+            "
           >
             <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
           </q-btn>
@@ -1184,7 +1232,7 @@ onMounted(async () => {
               dense
               outlined
               bg-color="white"
-              v-model="formFilter.keyword"
+              v-model="historyFormFilter.keyword"
               label="ค้นหา"
               class="q-mr-sm"
             >
@@ -1194,7 +1242,7 @@ onMounted(async () => {
             </q-input>
 
             <q-select
-              v-model="visibleColumns"
+              v-model="historyVisibleColumns"
               multiple
               outlined
               dense
@@ -1212,15 +1260,17 @@ onMounted(async () => {
           <d-table
             ref="table"
             :columns="columns"
-            :rows="rows"
+            :rows="historyRows"
             row-key="name"
             flat
             bordered
             :paging="true"
             dense
+            :filter="historyFormFilter.keyword"
+            v-model:pagination="historyPagination"
             :rows-per-page-options="[20, 50, 100]"
             class="custom-header-table"
-            :visible-columns="visibleColumns"
+            :visible-columns="historyVisibleColumns"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -1230,22 +1280,30 @@ onMounted(async () => {
                 <q-th auto-width />
               </q-tr>
             </template>
-            <template v-slot:body="props">
+            <template v-slot:body="props" v-if="mode === 'table'">
               <q-tr :props="props" class="cursor-pointer">
                 <q-td v-for="col in props.cols" :key="col.id">
                   <div
-                    v-if="
-                      col.name === 'startDate' ||
-                      col.name === 'finishDate' ||
-                      col.name === 'graduateDate'
-                    "
+                    v-if="col.name === 'startDate' || col.name === 'endDate'"
                   >
+                    <div v-if="props.row.isDate">
+                      {{ date2Thai(col.value) }}
+                    </div>
+                    <div v-else>
+                      {{ +col.value.slice(0, 4) + 543 }}
+                    </div>
+                  </div>
+                  <div v-else-if="col.name === 'finishDate'">
                     {{ col.value ? date2Thai(col.value) : "-" }}
                   </div>
+                  <div v-else-if="col.name === 'isEducation'">
+                    {{ col.value === true ? "ใช่" : "ไม่ใช่" }}
+                  </div>
                   <div v-else>
-                    {{ col.value }}
+                    {{ col.value === "" ? "-" : col.value }}
                   </div>
                 </q-td>
+                <q-td auto-width> </q-td>
               </q-tr>
             </template>
           </d-table>

From 3e39d421f384606b6bf1c02a7c20273c710f69a6 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 18 Mar 2024 16:03:57 +0700
Subject: [PATCH 2/3] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B9=88=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=99=E0=B9=80=E0=B8=87=E0=B8=B4=E0=B8=99=E0=B9=80=E0=B8=94?=
 =?UTF-8?q?=E0=B8=B7=E0=B8=AD=E0=B8=99=E0=B8=82=E0=B9=89=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=AF=20=3D>?=
 =?UTF-8?q?=20new?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/13_salary/api.salary.ts               |  26 +-
 .../SalaryEmployeeLists/DialogAddPerson.vue   |   2 +-
 .../SalaryEmployeeLists/TabMain.vue           |  10 +-
 .../SalaryEmployeeLists/TableTypeOther.vue    |  16 +-
 .../SalaryLists/DialogMoveLevel.vue           |   9 +-
 .../components/SalaryLists/TabMain.vue        |  59 ++--
 .../components/SalaryLists/TableTypeOther.vue |  16 +-
 .../SalaryLists/TableTypePending.vue          |  61 ++--
 .../interface/response/SalaryList.ts          |   2 +-
 .../store/SalaryEmployeeListsStore.ts         | 289 +++++++++---------
 .../13_salary/views/salaryEmployeeLists.vue   |   6 +-
 src/modules/13_salary/views/salaryLists.vue   |  33 +-
 12 files changed, 301 insertions(+), 228 deletions(-)

diff --git a/src/api/13_salary/api.salary.ts b/src/api/13_salary/api.salary.ts
index c99cdd567..cc44168ef 100644
--- a/src/api/13_salary/api.salary.ts
+++ b/src/api/13_salary/api.salary.ts
@@ -2,6 +2,7 @@ import env from "../index";
 const salary = `${env.API_URI}/salary`;
 const salaryRate = `${env.API_URI}/salary/rate`;
 const salaryPeriod = `${env.API_URI}/salary/period`;
+const salaryPeriodEmp = `${env.API_URI}/salary/period-employee`;
 const salaryOrg = `${env.API_URI}/org/employee`;
 const salaryFormula = `${env.API_URI}/salary/formula`;
 
@@ -31,7 +32,8 @@ export default {
   salaryListPeriodProfileById: (id: string) => `${salaryPeriod}/profile/${id}`,
   salaryListPerson: `${env.API_URI}/org/profile/salary/gen`,
   salaryPeriodProfile: `${salary}/period/org/profile`,
-
+  salaryReportListsByid: (type: string, rootId: string, periodId: string) =>
+    `${salary}/report/${type}/${rootId}/${periodId}`,
   salaryProperty: (id: string) => `${salaryPeriod}/org/property/${id}`,
 
   /** รายการเงินเดือนลูกจ้างประจำ*/
@@ -45,13 +47,21 @@ export default {
   salaryEmployeeRateList: `${salaryRate}/employee`,
   salaryEmployeeRateListByid: (id: string) => `${salaryRate}/employee/${id}`,
 
-  salaryEmployeePosType:()=>`${salaryOrg}/pos/type`,
-  salaryFormula:()=>`${salaryFormula}`,
-  salaryFormulaById:(id:string)=>`${salaryFormula}/${id}`,
-  salaryEmployeePositionType:(key:string)=>`${salaryOrg}/pos/position?keyword=${key}&type=positionType`,
-  salaryEmployeeActive :()=>`${salary}/employee/active`,
+  salaryEmployeePosType: () => `${salaryOrg}/pos/type`,
+  salaryFormula: () => `${salaryFormula}`,
+  salaryFormulaById: (id: string) => `${salaryFormula}/${id}`,
+  salaryEmployeePositionType: (key: string) =>
+    `${salaryOrg}/pos/position?keyword=${key}&type=positionType`,
+  salaryEmployeeActive: () => `${salary}/employee/active`,
 
+  salaryPeriodStatus: (type: string, periodId: string, rootId: string) =>
+    `${salaryPeriod}/${type}/approve/${periodId}/${rootId}`,
+  salaryPeriodStatusComment: (type: string, periodId: string, rootId: string) =>
+    `${salaryPeriod}/${type}/comment/${periodId}/${rootId}`,
 
-  salaryPeriodStatus:(type:string,periodId:string,rootId:string)=>`${salaryPeriod}/${type}/approve/${periodId}/${rootId}`,
-  salaryPeriodStatusComment:(type:string,periodId:string,rootId:string)=>`${salaryPeriod}/${type}/comment/${periodId}/${rootId}`
+  /** รายการเงินเดือนลูกจ้างประจำ*/
+  salaryListPeriodLatestEmp: `${salaryPeriodEmp}/latest`,
+  salaryListPeriodQuotaEmp: (id: string) => `${salaryPeriodEmp}/quota/${id}`,
+  salaryListPeriodORGEmp: (id: string) => `${salaryPeriodEmp}/org/${id}`,
+  salaryPeriodProfileEmp: `${salaryPeriodEmp}/org/profile`,
 };
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/DialogAddPerson.vue b/src/modules/13_salary/components/SalaryEmployeeLists/DialogAddPerson.vue
index b178d0430..43af0c493 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/DialogAddPerson.vue
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/DialogAddPerson.vue
@@ -146,7 +146,7 @@ function onClickAddPerson(data: DataPerson) {
     $q,
     () => {
       http
-        .post(config.API.salaryPeriodProfile, body)
+        .post(config.API.salaryPeriodProfileEmp, body)
         .then(() => {
           props.fetchData?.();
           success($q, "เพื่มรายชื่อสำเร็จ");
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue b/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
index a2aa41812..29e088306 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
@@ -200,7 +200,7 @@ const maxPage = ref<number>(1);
 function fetchDataQuota(id: string) {
   // showLoader();
   http
-    .get(config.API.salaryListPeriodQuota(id))
+    .get(config.API.salaryListPeriodQuotaEmp(id))
     .then((res) => {
       const data = res.data.result;
       store.remaining = data.remaining;
@@ -242,7 +242,7 @@ function fetchDataPeriod(id: string) {
   };
 
   http
-    .put(config.API.salaryListPeriodORG(id), formData)
+    .put(config.API.salaryListPeriodORGEmp(id), formData)
     .then((res) => {
       rows.value = res.data.result.data;
       total.value = res.data.result.total;
@@ -298,9 +298,9 @@ function onClickDownload(data: DataOption) {
 }
 
 const modalDialogInfoCriteria = ref<boolean>(false);
-onMounted(async () => {
-  await fetchDataQuota(store.groupId);
-  await fetchDataPeriod(store.groupId);
+onMounted(() => {
+  fetchDataQuota(store.groupId);
+  fetchDataPeriod(store.groupId);
   splitterModel.value = store.roundMainCode === "APR" ? 13 : 16;
 });
 </script>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/TableTypeOther.vue b/src/modules/13_salary/components/SalaryEmployeeLists/TableTypeOther.vue
index 734a5ad74..6ec17d63d 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/TableTypeOther.vue
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/TableTypeOther.vue
@@ -289,7 +289,13 @@ watch(
       :display-value="$q.lang.table.columns"
       emit-value
       map-options
-      :options="store.roundMainCode === 'OCT' ? columns : columns.slice(0, 10)"
+      :options="
+        store.roundMainCode === 'OCT'
+          ? columns
+          : columns
+          ? columns.slice(0, 10)
+          : []
+      "
       option-value="name"
       options-cover
       style="min-width: 150px"
@@ -299,7 +305,13 @@ watch(
 
   <d-table
     ref="table"
-    :columns="store.roundMainCode === 'OCT' ? columns : columns.slice(0, 10)"
+    :columns="
+      store.roundMainCode === 'OCT'
+        ? columns
+        : columns
+        ? columns.slice(0, 10)
+        : []
+    "
     :rows="props.rows"
     row-key="id"
     flat
diff --git a/src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue b/src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue
index b23ba22cd..8a9170065 100644
--- a/src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue
+++ b/src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue
@@ -48,10 +48,15 @@ const typeRangeOps = computed(() => {
         { id: "FULL", name: "1 ขั้น" },
         { id: "FULLHAFT", name: "1.5 ขั้น" },
       ]
-    : [
+    : store.roundMainCode == "ARP"
+    ? [
         { id: "NONE", name: "ไม่ได้เลื่อน" },
         { id: "HAFT", name: "0.5 ขั้น" },
         { id: "FULL", name: "1 ขั้น" },
+      ]
+    : [
+        { id: "HAFT", name: "0.5 ขั้น" },
+        { id: "FULL", name: "1 ขั้น" },
       ];
 });
 
@@ -104,7 +109,7 @@ function onSubmit() {
 watch(
   () => modal.value,
   () => {
-    type.value = props.typeLevel == 'PENDING' ? "" : props.typeLevel;
+    type.value = props.typeLevel == "PENDING" ? "" : props.typeLevel;
     isReserve.value = props.isReserve;
     isChange.value = false;
   }
diff --git a/src/modules/13_salary/components/SalaryLists/TabMain.vue b/src/modules/13_salary/components/SalaryLists/TabMain.vue
index 83cf99173..b7f05377a 100644
--- a/src/modules/13_salary/components/SalaryLists/TabMain.vue
+++ b/src/modules/13_salary/components/SalaryLists/TabMain.vue
@@ -31,6 +31,8 @@ const { messageError, showLoader, hideLoader } = useCounterMixin();
 /** props*/
 const props = defineProps({
   periodLatest: { type: Object as () => DataPeriodLatest, require: true },
+  rootId: { type: String, require: true },
+  periodId: { type: String, require: true },
 });
 
 const total = ref<number>();
@@ -84,7 +86,8 @@ const itemsTabType = computed(() => {
           type: "NONE",
         },
       ]
-    : [
+    : store.roundMainCode === "APR"
+    ? [
         {
           lable: "รายชื่อคนครอง",
           name: "tab1",
@@ -105,6 +108,23 @@ const itemsTabType = computed(() => {
           name: "tab4",
           type: "NONE",
         },
+      ]
+    : [
+        {
+          lable: "รายชื่อคนครอง",
+          name: "tab1",
+          type: "PENDING",
+        },
+        {
+          lable: "1 ขั้น",
+          name: "tab2",
+          type: "FULL",
+        },
+        {
+          lable: "0.5 ขั้น",
+          name: "tab3",
+          type: "HAFT",
+        },
       ];
 });
 
@@ -282,26 +302,29 @@ function fetchDataPeriodNew() {
 }
 
 function onClickDownload(data: DataOption) {
-  console.log(data);
-  // showLoader();
-  // http
-  //   .get(config.API.salaryReportByid(salaryId.value))
-  //   .then((res) => {
-  //     const dataList = res.data.result;
-  //     genReportXLSX(dataList, "อัตราเงินเดือน");
-  //   })
-  //   .catch((e) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();
-  //   });
+  if (props.rootId && props.periodId) {
+    showLoader();
+    http
+      .get(
+        config.API.salaryReportListsByid(data.id, props.rootId, props.periodId)
+      )
+      .then((res) => {
+        const dataList = res.data.result;
+        genReportXLSX(dataList, data.name);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
 }
 
 const modalDialogInfoCriteria = ref<boolean>(false);
-onMounted(async () => {
-  await fetchDataQuota(store.groupId);
-  await fetchDataPeriod(store.groupId);
+onMounted(() => {
+  fetchDataQuota(store.groupId);
+  fetchDataPeriod(store.groupId);
   splitterModel.value = store.roundMainCode === "APR" ? 13 : 16;
 });
 </script>
diff --git a/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue b/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
index bae1d8d94..a65ec42dd 100644
--- a/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
+++ b/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
@@ -289,7 +289,13 @@ watch(
       :display-value="$q.lang.table.columns"
       emit-value
       map-options
-      :options="store.roundMainCode === 'OCT' ? columns : columns.slice(0, 10)"
+      :options="
+        store.roundMainCode === 'OCT'
+          ? columns
+          : columns
+          ? columns.slice(0, 10)
+          : []
+      "
       option-value="name"
       options-cover
       style="min-width: 150px"
@@ -299,7 +305,13 @@ watch(
 
   <d-table
     ref="table"
-    :columns="store.roundMainCode === 'OCT' ? columns : columns.slice(0, 10)"
+    :columns="
+      store.roundMainCode === 'OCT'
+        ? columns
+        : columns
+        ? columns.slice(0, 10)
+        : []
+    "
     :rows="props.rows"
     row-key="id"
     flat
diff --git a/src/modules/13_salary/components/SalaryLists/TableTypePending.vue b/src/modules/13_salary/components/SalaryLists/TableTypePending.vue
index 36b48f649..2ede97af8 100644
--- a/src/modules/13_salary/components/SalaryLists/TableTypePending.vue
+++ b/src/modules/13_salary/components/SalaryLists/TableTypePending.vue
@@ -198,10 +198,10 @@ const modalDialogProperties = ref<boolean>(false);
 /** ตัวแปร*/
 const profileId = ref<string>("");
 const amount = ref<number>(0);
-const isPunish = ref<boolean>(false)
-const isSuspension = ref<boolean>(false)
-const isAbsent = ref<boolean>(false)
-const isLeave = ref<boolean>(false)
+const isPunish = ref<boolean>(false);
+const isSuspension = ref<boolean>(false);
+const isAbsent = ref<boolean>(false);
+const isLeave = ref<boolean>(false);
 /**
  * function ยืนยันการลบรายชื่อ
  *  @param id profileId
@@ -282,14 +282,13 @@ function searchData() {
   props.fetchDataTable?.();
 }
 
-function onProperties(data:any){
-  console.log(data)
-  modalDialogProperties.value = true
-  profileId.value = data.id
-  isPunish.value = data.isPunish
-  isSuspension.value = data.isSuspension
-  isAbsent.value = data.isAbsent
-  isLeave.value = data.isLeave
+function onProperties(data: any) {
+  modalDialogProperties.value = true;
+  profileId.value = data.id;
+  isPunish.value = data.isPunish;
+  isSuspension.value = data.isSuspension;
+  isAbsent.value = data.isAbsent;
+  isLeave.value = data.isLeave;
 }
 /** callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize*/
 watch(
@@ -302,7 +301,14 @@ watch(
 
 <template>
   <q-toolbar class="text-primary" style="padding: 0px">
-    <q-btn           v-if="!store.isClosedRound" flat round dense icon="add" @click="onClickAddPerson">
+    <q-btn
+      v-if="!store.isClosedRound"
+      flat
+      round
+      dense
+      icon="add"
+      @click="onClickAddPerson"
+    >
       <q-tooltip>เพิ่ม </q-tooltip>
     </q-btn>
     <q-space />
@@ -439,7 +445,7 @@ watch(
               size="24px"
             />
             <div v-else-if="props.row.isPunish == null">
-              {{ props.row.isPunish == null ? '-':''}}
+              {{ props.row.isPunish == null ? "-" : "" }}
             </div>
           </div>
           <div v-else-if="col.name == 'isSuspension'">
@@ -450,7 +456,7 @@ watch(
               size="24px"
             />
             <div v-else-if="props.row.isSuspension == null">
-              {{ props.row.isSuspension == null ? '-':''}}
+              {{ props.row.isSuspension == null ? "-" : "" }}
             </div>
           </div>
           <div v-else-if="col.name == 'isAbsent'">
@@ -461,12 +467,12 @@ watch(
               size="24px"
             />
             <div v-else-if="props.row.isAbsent == null">
-              {{ props.row.isAbsent == null ? '-':''}}
+              {{ props.row.isAbsent == null ? "-" : "" }}
             </div>
           </div>
           <div v-else-if="col.name == 'amount'">
-              {{Number(props.row.amount).toLocaleString()}}
-            </div>
+            {{ Number(props.row.amount).toLocaleString() }}
+          </div>
           <div v-else-if="col.name == 'isLeave'">
             <q-icon
               v-if="props.row.isLeave !== null"
@@ -475,9 +481,8 @@ watch(
               size="24px"
             />
             <div v-else-if="props.row.isLeave == null">
-              {{ props.row.isLeave == null ? '-':''}}
+              {{ props.row.isLeave == null ? "-" : "" }}
             </div>
-          
           </div>
           <div v-else>
             {{ col.value ? col.value : "-" }}
@@ -485,7 +490,7 @@ watch(
         </q-td>
         <q-td>
           <q-btn
-          v-if="!store.isClosedRound"
+            v-if="!store.isClosedRound"
             flat
             dense
             icon="mdi-dots-vertical"
@@ -576,13 +581,13 @@ watch(
     :fetchData="props.fetchDataTable"
   />
   <DialogProperties
-  v-model:modal="modalDialogProperties"
-  v-model:id="profileId"
-  :is-punish="isPunish"
-  :is-suspension="isSuspension"
-  :is-absent="isAbsent"
-  :is-leave="isLeave"
-  :fetch-data="props.fetchDataTable"
+    v-model:modal="modalDialogProperties"
+    v-model:id="profileId"
+    :is-punish="isPunish"
+    :is-suspension="isSuspension"
+    :is-absent="isAbsent"
+    :is-leave="isLeave"
+    :fetch-data="props.fetchDataTable"
   />
 </template>
 
diff --git a/src/modules/13_salary/interface/response/SalaryList.ts b/src/modules/13_salary/interface/response/SalaryList.ts
index 2f5c3fb0f..3b00b392d 100644
--- a/src/modules/13_salary/interface/response/SalaryList.ts
+++ b/src/modules/13_salary/interface/response/SalaryList.ts
@@ -20,7 +20,7 @@ interface DataRound {
   revisionId: string;
   status: string;
   year: number;
-  isClose: boolean
+  isClose: boolean;
 }
 
 interface DataAgency {
diff --git a/src/modules/13_salary/store/SalaryEmployeeListsStore.ts b/src/modules/13_salary/store/SalaryEmployeeListsStore.ts
index 418f37873..880ae97de 100644
--- a/src/modules/13_salary/store/SalaryEmployeeListsStore.ts
+++ b/src/modules/13_salary/store/SalaryEmployeeListsStore.ts
@@ -8,152 +8,155 @@ import type {
 } from "@/modules/13_salary/interface/index/Main";
 import type { DataPeriodLatest } from "@/modules/13_salary/interface/response/SalaryList";
 
-export const useSalaryEmployeeListSDataStore = defineStore("salaryEmployeeListStore", () => {
-  const tabGroup = ref<string>("group1");
-  const tabType = ref<string>("PENDING");
-  const groupOp = ref<DataOption[]>([
-    { id: "", name: "กลุ่ม1" },
-    { id: "", name: "กลุ่ม2" },
-  ]);
+export const useSalaryEmployeeListSDataStore = defineStore(
+  "salaryEmployeeListStore",
+  () => {
+    const tabGroup = ref<string>("group1");
+    const tabType = ref<string>("PENDING");
+    const groupOp = ref<DataOption[]>([
+      { id: "", name: "กลุ่ม1" },
+      { id: "", name: "กลุ่ม2" },
+    ]);
 
-  const remaining = ref<number>(0);
+    const remaining = ref<number>(0);
 
-  const groupId = ref<string>("");
-  const rootId = ref<string>("");
-  const roundMainCode = ref<string>("");
-  const roundYear = ref<number>(0);
-  const roundCode = ref<string>("");
-  const isClosedRound = ref<boolean>(false); // การปิดรอบ
-  /** List Menu*/
-  const itemMenu = ref<ItemsMenu[]>([
-    {
-      label: "แก้ไขเงินเดือน",
-      icon: "edit",
-      color: "edit",
-      type: "edit",
-    },
-    {
-      label: "ย้ายกลุ่ม",
-      icon: "mdi-account-arrow-right-outline",
-      color: "indigo-6",
-      type: "moveGroup",
-    },
-    {
-      label: "ย้ายขั้น",
-      icon: "mdi-swap-vertical-bold",
-      color: "green-6",
-      type: "moveLevel",
-    },
-    {
-      label: "แก้ไขคุณสมบัติ",
-      icon: "mdi-format-list-checks",
-      color: "blue-6",
-      type: "properties",
-    },
-    {
-      label: "ลบ",
-      icon: "delete",
-      color: "red",
-      type: "delete",
-    },
-  ]);
+    const groupId = ref<string>("");
+    const rootId = ref<string>("");
+    const roundMainCode = ref<string>("");
+    const roundYear = ref<number>(0);
+    const roundCode = ref<string>("");
+    const isClosedRound = ref<boolean>(false); // การปิดรอบ
+    /** List Menu*/
+    const itemMenu = ref<ItemsMenu[]>([
+      {
+        label: "แก้ไขเงินเดือน",
+        icon: "edit",
+        color: "edit",
+        type: "edit",
+      },
+      {
+        label: "ย้ายกลุ่ม",
+        icon: "mdi-account-arrow-right-outline",
+        color: "indigo-6",
+        type: "moveGroup",
+      },
+      {
+        label: "ย้ายขั้น",
+        icon: "mdi-swap-vertical-bold",
+        color: "green-6",
+        type: "moveLevel",
+      },
+      {
+        label: "แก้ไขคุณสมบัติ",
+        icon: "mdi-format-list-checks",
+        color: "blue-6",
+        type: "properties",
+      },
+      {
+        label: "ลบ",
+        icon: "delete",
+        color: "red",
+        type: "delete",
+      },
+    ]);
 
-  /** List Download รายงานของรอบเมษายน*/
-  const itemDownloadApr = ref<DataOption[]>([
-    {
-      id: "gov1-01",
-      name: "รายชื่อข้าราชการผู้ที่ครองตำแหน่ง ณ วันที่ 1 มีนาคม",
-    },
-    {
-      id: "gov1-02",
-      name: "บัญชีการคำนวณโควตาเลื่อนเงินเดือน รอบเมษายน",
-    },
-    {
-      id: "gov1-03",
-      name: "รายชื่อข้าราชการที่ได้รับการเสนอขอเลื่อนหนึ่งขั้น",
-    },
-    {
-      id: "gov1-04",
-      name: "แบบ 1 กท รอบเมษายน",
-    },
-    {
-      id: "gov1-05",
-      name: "แบบ 2 กท รอบเมษายน",
-    },
-    {
-      id: "gov1-06",
-      name: "แบบ 3 กท บัญชีแสดงวันลาครึ่งปี ขรก.",
-    },
-    {
-      id: "gov1-07",
-      name: "คำสั่งเลื่อนเงินเดือน รอบเมษายน",
-    },
-    {
-      id: "gov1-08",
-      name: "คำสั่งค่าตอบแทนพิเศษ และผู้ไม่ได้เลื่อน รอบเมษายน",
-    },
-  ]);
+    /** List Download รายงานของรอบเมษายน*/
+    const itemDownloadApr = ref<DataOption[]>([
+      {
+        id: "gov1-01",
+        name: "รายชื่อข้าราชการผู้ที่ครองตำแหน่ง ณ วันที่ 1 มีนาคม",
+      },
+      {
+        id: "gov1-02",
+        name: "บัญชีการคำนวณโควตาเลื่อนเงินเดือน รอบเมษายน",
+      },
+      {
+        id: "gov1-03",
+        name: "รายชื่อข้าราชการที่ได้รับการเสนอขอเลื่อนหนึ่งขั้น",
+      },
+      {
+        id: "gov1-04",
+        name: "แบบ 1 กท รอบเมษายน",
+      },
+      {
+        id: "gov1-05",
+        name: "แบบ 2 กท รอบเมษายน",
+      },
+      {
+        id: "gov1-06",
+        name: "แบบ 3 กท บัญชีแสดงวันลาครึ่งปี ขรก.",
+      },
+      {
+        id: "gov1-07",
+        name: "คำสั่งเลื่อนเงินเดือน รอบเมษายน",
+      },
+      {
+        id: "gov1-08",
+        name: "คำสั่งค่าตอบแทนพิเศษ และผู้ไม่ได้เลื่อน รอบเมษายน",
+      },
+    ]);
 
-  /** List Download รายงานของรอบตุลาคม*/
-  const itemDownloadOct = ref<DataOption[]>([
-    {
-      id: "gov2-01",
-      name: "รายชื่อข้าราชการผู้ที่ครองตำแหน่ง ณ วันที่ 1 กันยายน",
-    },
-    {
-      id: "gov2-02",
-      name: "บัญชีการคำนวณวงเงินเลื่อนเงินเดือน รอบตุลาคม",
-    },
-    {
-      id: "gov2-03",
-      name: "รายชื่อข้าราชการผู้ที่ได้รับการเสนอขอเลื่อนเงินเดือนทั้งปีสองขั้น",
-    },
-    {
-      id: "gov2-04",
-      name: "แบบ 1 กท รอบตุลาคม",
-    },
-    {
-      id: "gov2-05",
-      name: "แบบ 2 กท รอบตุลาคม",
-    },
-    {
-      id: "gov2-06",
-      name: "แบบ 3 กท บัญชีแสดงวันลาครึ่งปี ขรก. ",
-    },
-    {
-      id: "gov2-07",
-      name: "คำสั่งเลื่อนเงินเดือนข้าราชการเกษียณ",
-    },
-    {
-      id: "gov2-08",
-      name: "คำสั่งเลื่อนเงินเดือน รอบตุลาคม",
-    },
-    {
-      id: "gov2-09",
-      name: "คำสั่งค่าตอบแทนพิเศษ และผู้ไม่ได้เลื่อนเงินเดือน รอบตุลาคม",
-    },
-  ]);
+    /** List Download รายงานของรอบตุลาคม*/
+    const itemDownloadOct = ref<DataOption[]>([
+      {
+        id: "gov2-01",
+        name: "รายชื่อข้าราชการผู้ที่ครองตำแหน่ง ณ วันที่ 1 กันยายน",
+      },
+      {
+        id: "gov2-02",
+        name: "บัญชีการคำนวณวงเงินเลื่อนเงินเดือน รอบตุลาคม",
+      },
+      {
+        id: "gov2-03",
+        name: "รายชื่อข้าราชการผู้ที่ได้รับการเสนอขอเลื่อนเงินเดือนทั้งปีสองขั้น",
+      },
+      {
+        id: "gov2-04",
+        name: "แบบ 1 กท รอบตุลาคม",
+      },
+      {
+        id: "gov2-05",
+        name: "แบบ 2 กท รอบตุลาคม",
+      },
+      {
+        id: "gov2-06",
+        name: "แบบ 3 กท บัญชีแสดงวันลาครึ่งปี ขรก. ",
+      },
+      {
+        id: "gov2-07",
+        name: "คำสั่งเลื่อนเงินเดือนข้าราชการเกษียณ",
+      },
+      {
+        id: "gov2-08",
+        name: "คำสั่งเลื่อนเงินเดือน รอบตุลาคม",
+      },
+      {
+        id: "gov2-09",
+        name: "คำสั่งค่าตอบแทนพิเศษ และผู้ไม่ได้เลื่อนเงินเดือน รอบตุลาคม",
+      },
+    ]);
 
-  function fetchPeriodLatest(data: DataPeriodLatest, type: string) {
-    groupId.value = type === "group1" ? data.group1id : data.group2id;
-    roundCode.value = data.period;
-    groupOp.value[0].id = data.group1id;
-    groupOp.value[1].id = data.group2id;
+    function fetchPeriodLatest(data: DataPeriodLatest, type: string) {
+      groupId.value = data.group1id;
+      roundCode.value = data.period;
+      groupOp.value[0].id = data.group1id;
+      groupOp.value[1].id = data.group2id;
+    }
+    return {
+      tabGroup,
+      tabType,
+      itemMenu,
+      itemDownloadOct,
+      itemDownloadApr,
+      groupId,
+      fetchPeriodLatest,
+      rootId,
+      roundCode,
+      groupOp,
+      roundMainCode,
+      remaining,
+      isClosedRound,
+      roundYear,
+    };
   }
-  return {
-    tabGroup,
-    tabType,
-    itemMenu,
-    itemDownloadOct,
-    itemDownloadApr,
-    groupId,
-    fetchPeriodLatest,
-    rootId,
-    roundCode,
-    groupOp,
-    roundMainCode,
-    remaining,
-    isClosedRound,
-    roundYear,
-  };
-});
+);
diff --git a/src/modules/13_salary/views/salaryEmployeeLists.vue b/src/modules/13_salary/views/salaryEmployeeLists.vue
index b285ef056..8a5fd8291 100644
--- a/src/modules/13_salary/views/salaryEmployeeLists.vue
+++ b/src/modules/13_salary/views/salaryEmployeeLists.vue
@@ -21,11 +21,11 @@ import TabGroup from "@/modules/13_salary/components/SalaryEmployeeLists/TabMain
 // import PageDashBoard from "@/modules/13_salary/components/SalaryEmployeeLists/Dashboard.vue";
 
 /** importStore*/
-import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
 import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
-const store = useSalaryListSDataStore();
+const store = useSalaryEmployeeListSDataStore();
 const $q = useQuasar();
 const { messageError, showLoader, hideLoader } = useCounterMixin();
 
@@ -215,7 +215,7 @@ function fetchSalalyPeriod(rootId: string, periodId: string, snap: string) {
   };
 
   http
-    .post(config.API.salaryListPeriodLatest, body)
+    .post(config.API.salaryListPeriodLatestEmp, body)
     .then(async (res) => {
       const data = res.data.result;
       if (Object.values(data).includes(null)) {
diff --git a/src/modules/13_salary/views/salaryLists.vue b/src/modules/13_salary/views/salaryLists.vue
index f48f0aa44..30fbd068b 100644
--- a/src/modules/13_salary/views/salaryLists.vue
+++ b/src/modules/13_salary/views/salaryLists.vue
@@ -85,14 +85,6 @@ function getRound() {
       await getSnap(roundFilter.value.shortCode);
       await getAgency(roundFilter.value.revisionId);
       await getAgencyPosition(roundFilter.value.revisionId);
-
-      //   if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
-      //     await fetchSalalyPeriod(
-      //       agencyFilter.value,
-      //       roundFilter.value.id,
-      //       snapFilter.value
-      //     );
-      //   }
     })
     .catch((e) => {
       messageError($q, e);
@@ -219,6 +211,7 @@ function fetchSalalyPeriod(rootId: string, periodId: string, snap: string) {
     .post(config.API.salaryListPeriodLatest, body)
     .then(async (res) => {
       const data = res.data.result;
+
       if (Object.values(data).includes(null)) {
         isLoad.value = false;
       } else {
@@ -241,7 +234,6 @@ function fetchSalalyPeriod(rootId: string, periodId: string, snap: string) {
 async function onChangeRound() {
   // เก็บสถานะการปิดรอบในตัวแปร isClosedRound เพื่อใช้ในการเช็ค
   store.isClosedRound = roundFilter.value.isClose;
-  console.log(roundFilter.value);
 
   await getSnap(roundFilter.value.shortCode);
   await getAgency(roundFilter.value.revisionId);
@@ -263,7 +255,7 @@ async function onChangeRound() {
 /** function เปลี่ยนรอบ*/
 async function onChangeSnap() {
   if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
-    await fetchSalalyPeriod(
+    fetchSalalyPeriod(
       agencyFilter.value,
       roundFilter.value.id,
       snapFilter.value
@@ -280,7 +272,7 @@ async function onChangeAgency() {
     roundFilter.value.id &&
     snapFilter.value
   ) {
-    await fetchSalalyPeriod(
+    fetchSalalyPeriod(
       agencyFilter.value,
       roundFilter.value.id,
       snapFilter.value
@@ -311,8 +303,8 @@ function onScroll({ to, ref }: { to: number; ref: any }) {
   }
 }
 
-onMounted(async () => {
-  await getRound();
+onMounted(() => {
+  getRound();
 });
 </script>
 
@@ -346,7 +338,9 @@ onMounted(async () => {
         </q-item>
       </template>
     </q-select>
+
     <q-select
+      v-if="roundFilter ? roundFilter.shortCode !== 'SPECIAL' : false"
       class="q-ml-xs"
       v-model="snapFilter"
       label="รอบ"
@@ -401,7 +395,12 @@ onMounted(async () => {
     <q-separator /> -->
   <q-card flat bordered>
     <div v-if="agencyFilter !== 'ALL'">
-      <TabGroup v-if="isLoad" :periodLatest="periodLatest" />
+      <TabGroup
+        v-if="isLoad"
+        :periodLatest="periodLatest"
+        :periodId="roundFilter.id"
+        :rootId="agencyFilter"
+      />
       <q-card v-else class="q-pa-sm">
         <div class="q-pa-sm">
           <q-banner inline-actions rounded class="bg-grey-1 text-center">
@@ -421,7 +420,11 @@ onMounted(async () => {
     bordered
     class="row col-12 q-mt-xs"
   >
-    <ProcessStep :periodId="roundFilter.id" :rootId="agencyFilter" :get-data="onChangeRound"/>
+    <ProcessStep
+      :periodId="roundFilter.id"
+      :rootId="agencyFilter"
+      :get-data="onChangeRound"
+    />
   </q-card>
 
   <!-- </q-card> -->

From b9ea12a451767676c37d5ea33ccf019c4922d875 Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Mon, 18 Mar 2024 16:14:11 +0700
Subject: [PATCH 3/3] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4:=20API=20=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=82=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=AD=E0=B8=9A=E0=B8=A3=E0=B8=A1=E0=B8=94=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/registry/api.registry.ts              |   9 ++
 .../detail/Achievement/02_Train.vue           | 150 ++++++++----------
 2 files changed, 77 insertions(+), 82 deletions(-)

diff --git a/src/api/registry/api.registry.ts b/src/api/registry/api.registry.ts
index 659f9cf76..da9223ed6 100644
--- a/src/api/registry/api.registry.ts
+++ b/src/api/registry/api.registry.ts
@@ -27,4 +27,13 @@ export default {
     `${registryNew}training/${trainingId}`,
   profileNewTrainingHisByTrainingId: (trainingId: string) =>
     `${registryNew}training/history/${trainingId}`,
+
+// ประวัติการศึกษา
+profileNewEducation: `${registryNew}educations`,
+profileNewEducationByProfileId: (profileId: string) =>
+  `${registryNew}educations/${profileId}`,
+profileNewEducationByEducationId: (educationId: string) =>
+  `${registryNew}educations/${educationId}`,
+profileNewEducationHisByEducationId: (educationsId: string) =>
+  `${registryNew}educations/history/${educationsId}`,
 };
diff --git a/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue b/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
index 0437dbe27..1d36bb25e 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
@@ -167,83 +167,19 @@ const pagination = ref({
   page: formFilter.page,
   rowsPerPage: formFilter.pageSize,
 });
+const historyFormFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
 
-const row = [
-  {
-    name: "ชื่อโครงการ",
-    topic: "ชื่อหัวข้อ",
-    yearly: "2567",
-    place: "สถานที่",
-    duration: "3 ปี",
-    department: "แผนกสาขา",
-    numberOrder: "1244",
-    dateOrder: new Date(),
-    startDate: new Date(),
-    endDate: new Date(),
-  },
-  {
-    name: "ชื่อโครงการ",
-    topic: "ชื่อหัวข้อ",
-    yearly: "2567",
-    place: "สถานที่",
-    duration: "2567",
-    department: "แผนกสาขา",
-    numberOrder: "1244",
-    dateOrder: new Date(),
-    startDate: new Date(),
-    endDate: new Date(),
-  },
-  {
-    name: "ชื่อโครงการ",
-    topic: "ชื่อหัวข้อ",
-    yearly: "2567",
-    place: "สถานที่",
-    duration: "2567",
-    department: "แผนกสาขา",
-    numberOrder: "1244",
-    dateOrder: new Date(),
-    startDate: new Date(),
-    endDate: new Date(),
-  },
-  {
-    name: "ชื่อโครงการ",
-    topic: "ชื่อหัวข้อ",
-    yearly: "2567",
-    place: "สถานที่",
-    duration: "2567",
-    department: "แผนกสาขา",
-    numberOrder: "1244",
-    dateOrder: new Date(),
-    startDate: new Date(),
-    endDate: new Date(),
-  },
-  {
-    name: "ชื่อโครงการ",
-    topic: "ชื่อหัวข้อ",
-    yearly: "2567",
-    place: "สถานที่",
-    duration: "2567",
-    department: "แผนกสาขา",
-    numberOrder: "1244",
-    dateOrder: new Date(),
-    startDate: new Date(),
-    endDate: new Date(),
-  },
-  {
-    name: "ชื่อโครงการ",
-    topic: "ชื่อหัวข้อ",
-    yearly: "2567",
-    place: "สถานที่",
-    duration: "2567",
-    department: "แผนกสาขา",
-    numberOrder: "1244",
-    dateOrder: new Date(),
-    startDate: new Date(),
-    endDate: new Date(),
-  },
-];
+const historyPagination = ref({
+  page: historyFormFilter.page,
+  rowsPerPage: historyFormFilter.pageSize,
+});
 
 const rows = ref<any>([]);
+const historyRows = ref<any>([]);
 
 const visibleColumns = ref<string[]>([
   "name", // ชื่อโครงงาน
@@ -258,6 +194,19 @@ const visibleColumns = ref<string[]>([
   "endDate", // วันสิ้นสุด
 ]);
 
+const historyVisibleColumns = ref<string[]>([
+  "name", // ชื่อโครงงาน
+  "topic", // หัวข้อ
+  "yearly", // ปีที่อบรม
+  "place", // สถานที่
+  "duration", // รวมระยะวเลา
+  "department", // หน่วยงานที่รับผิดชอบ
+  "numberOrder", // เลขที่คำสั่ง
+  "dateOrder", // คำสั่งลงวันที่
+  "startDate", // วันเริ่มต้น
+  "endDate", // วันสิ้นสุด
+]);
+
 function validateForm() {
   onSubmit();
 }
@@ -444,6 +393,22 @@ async function fetchData(id: string) {
     });
 }
 
+async function fetchHistoryData(id: string) {
+  showLoader();
+  await http
+    .get(config.API.profileNewTrainingHisByTrainingId(id))
+    .then(async (res) => {
+      historyRows.value = res.data.result;
+      console.log(historyRows.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 onMounted(async () => {
   await fetchData(id.value);
 });
@@ -539,6 +504,7 @@ onMounted(async () => {
     bordered
     :paging="true"
     dense
+    :filter="formFilter.keyword"
     :rows-per-page-options="[20, 50, 100]"
     v-model:pagination="pagination"
     class="custom-header-table"
@@ -600,7 +566,9 @@ onMounted(async () => {
             round
             size="14px"
             icon="mdi-history"
-            @click="() => (historyDialog = true)"
+            @click="
+              () => (fetchHistoryData(props.row.id), (historyDialog = true))
+            "
           >
             <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
           </q-btn>
@@ -1087,7 +1055,7 @@ onMounted(async () => {
               dense
               outlined
               bg-color="white"
-              v-model="formFilter.keyword"
+              v-model="historyFormFilter.keyword"
               label="ค้นหา"
               class="q-mr-sm"
             >
@@ -1097,7 +1065,7 @@ onMounted(async () => {
             </q-input>
 
             <q-select
-              v-model="visibleColumns"
+              v-model="historyVisibleColumns"
               multiple
               outlined
               dense
@@ -1115,15 +1083,16 @@ onMounted(async () => {
           <d-table
             ref="table"
             :columns="columns"
-            :rows="row"
+            :rows="historyRows"
             row-key="name"
             flat
+            :filter="historyFormFilter.keyword"
             bordered
             :paging="true"
             dense
             :rows-per-page-options="[20, 50, 100]"
             class="custom-header-table"
-            :visible-columns="visibleColumns"
+            :visible-columns="historyVisibleColumns"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -1133,13 +1102,30 @@ onMounted(async () => {
                 <q-th auto-width />
               </q-tr>
             </template>
-            <template v-slot:body="props">
+            <template v-slot:body="props" v-if="mode === 'table'">
               <q-tr :props="props" class="cursor-pointer">
                 <q-td v-for="col in props.cols" :key="col.id">
-                  <div>
-                    {{ col.value }}
+                  <div
+                    v-if="col.name === 'startDate' || col.name === 'endDate'"
+                  >
+                    <div v-if="props.row.isDate">
+                      {{ date2Thai(col.value) }}
+                    </div>
+                    <div v-else>
+                      {{ +col.value.slice(0, 4) + 543 }}
+                    </div>
+                  </div>
+                  <div v-else-if="col.name === 'dateOrder'">
+                    {{ date2Thai(col.value) }}
+                  </div>
+                  <div v-else-if="col.name === 'yearly'">
+                    {{ col.value + 543 }}
+                  </div>
+                  <div v-else>
+                    {{ col.value ? col.value : "-" }}
                   </div>
                 </q-td>
+                <q-td auto-width> </q-td>
               </q-tr>
             </template>
           </d-table>