diff --git a/src/api/09_leave/api.leave.ts b/src/api/09_leave/api.leave.ts
index 7276d605d..2951e57ac 100644
--- a/src/api/09_leave/api.leave.ts
+++ b/src/api/09_leave/api.leave.ts
@@ -8,4 +8,7 @@ export default {
   logRecord: () => `${leave}/log-record`,
   timeRecord: () => `${leave}/time-record`,
   timeRecordById: (id: string) => `${leave}/time-record/${id}`,
+  leaveSearch: () => `${leave}/search`,
+  leaveRound: () => `${leave}/round`,
+  leaveRoundById: (id: string) => `${leave}/round/${id}`,
 };
diff --git a/src/modules/09_leave/components/4_ChangeRound/DialogForm.vue b/src/modules/09_leave/components/4_ChangeRound/DialogForm.vue
index 1ca7c917b..7afec33c1 100644
--- a/src/modules/09_leave/components/4_ChangeRound/DialogForm.vue
+++ b/src/modules/09_leave/components/4_ChangeRound/DialogForm.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
+import { ref, reactive, watch, onMounted } from "vue";
 import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRoute } from "vue-router";
 
 /** importType */
 import type {
   changeRoundEdit,
   MyObjectRoundChangeRef,
+  DataOption,
 } from "@/modules/09_leave/interface/request/changeRound";
 
 /** importStore */
@@ -14,36 +18,34 @@ import { useChangeRoundDataStore } from "@/modules/09_leave/stores/ChangeRoundSt
 /** useStore */
 const dataStore = useChangeRoundDataStore();
 const mixin = useCounterMixin();
-const { dialogConfirm, date2Thai } = mixin;
+const {
+  dialogConfirm,
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = mixin;
 
+const route = useRoute();
 const $q = useQuasar();
-
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 const roundRef = ref<Object | null>(null);
 const resonRef = ref<Object | null>(null);
 const effectiveDateRef = ref<Object | null>(null);
 
-const formData = reactive<changeRoundEdit>({
-  round: "",
-  date: "",
-  reson: "",
-  effectiveDate: null,
-});
-
-const roundOp = ref([
-  {
-    id: "1",
-    name: "08:30 - 17:00",
-  },
-  {
-    id: "2",
-    name: "08:00 - 16:30",
-  },
-]);
+const roundOp = ref<any>([]);
 const objectRoundChange: MyObjectRoundChangeRef = {
   round: roundRef,
   effectiveDate: effectiveDateRef,
 };
 
+onMounted(async () => {
+  await fetchDataOption();
+});
+
 /** Function validateForm */
 function validateForm() {
   const hasError = [];
@@ -63,22 +65,80 @@ function validateForm() {
   }
 }
 
+const formData = reactive<changeRoundEdit>({
+  round: "",
+  date: "",
+  reson: "",
+  effectiveDate: null,
+});
+
 /** Function ยืนยันการบันทึกข้อมูล */
 function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
+      changeRound();
       props.closeDialog?.();
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
   );
 }
+
+/** Function เปลี่ยนรอบเวลา*/
+async function changeRound() {
+  await http
+    .post(config.API.leaveRound(), {
+      profileId: props.personId,
+      roundId: formData.round,
+      effectDate: formData.effectiveDate,
+      remark: formData.round,
+    })
+    .then(() => {
+      success($q, "บันทึกข้อมูลเปลี่ยนรอบเวลา");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      props.closeDialog?.();
+    });
+}
+
+/**
+ *ประวัติการเปลี่ยนรอบการปฏิบัติงาน"
+ *
+ */
+async function fetchDataOption() {
+  showLoader();
+  await http
+    .get(config.API.leaveRound())
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: any) => {
+        option.push({
+          id: r.id.toString(),
+          name: `${r.startTimeMorning}-${r.endTimeAfternoon}`,
+        });
+      });
+      roundOp.value = option;
+      console.log(roundOp.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 const props = defineProps({
   modal: Boolean,
   closeDialog: Function,
   editCheck: String,
   DataRow: Object,
+  personId: String,
 });
 
 function close() {
@@ -262,9 +322,6 @@ watch(
             <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
                 <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                  <div v-if="col.name == 'round'">
-                    {{ props.rowIndex + 1 }}
-                  </div>
                   <div>
                     {{ col.value }}
                   </div>
diff --git a/src/modules/09_leave/interface/request/changeRound.ts b/src/modules/09_leave/interface/request/changeRound.ts
index dc904b4f8..a9e45b5b9 100644
--- a/src/modules/09_leave/interface/request/changeRound.ts
+++ b/src/modules/09_leave/interface/request/changeRound.ts
@@ -1,28 +1,34 @@
 interface dataPost {
-    cardId: string
-    firstName: string
-    lastName: string
+  cardId: string;
+  firstName: string;
+  lastName: string;
+}
+
+interface DataOption {
+  id: string;
+  name: string;
 }
 interface changeRoundEdit {
-    round: string
-    date: string
-    reson: string
-    effectiveDate: Date | null
+  round: string;
+  date: string;
+  reson: string;
+  effectiveDate: Date | null;
 }
 interface MyObjectRoundChangeRef {
-    round: object | null
-    effectiveDate: object | null
-    [key: string]: any;
+  round: object | null;
+  effectiveDate: object | null;
+  [key: string]: any;
 }
 interface MyObjectRoundChangeMainRef {
-    cardId:object|null
-    firstName:object|null
-    lastName:object|null
-    [key: string]: any;
+  cardId: object | null;
+  firstName: object | null;
+  lastName: object | null;
+  [key: string]: any;
 }
 export type {
-    dataPost,
-    changeRoundEdit,
-    MyObjectRoundChangeRef,
-    MyObjectRoundChangeMainRef
-}
\ No newline at end of file
+  dataPost,
+  changeRoundEdit,
+  MyObjectRoundChangeRef,
+  MyObjectRoundChangeMainRef,
+  DataOption,
+};
diff --git a/src/modules/09_leave/stores/ChangeRoundStore.ts b/src/modules/09_leave/stores/ChangeRoundStore.ts
index 3a4b6eca4..5e9ed17d4 100644
--- a/src/modules/09_leave/stores/ChangeRoundStore.ts
+++ b/src/modules/09_leave/stores/ChangeRoundStore.ts
@@ -1,167 +1,237 @@
 import { defineStore } from "pinia";
 import { ref, reactive } from "vue";
-import type { changeShow, dataRowChangeRound, dataRowChangeRoundHistory, historyShow } from "@/modules/09_leave/interface/response/changeRound";
+import type {
+  changeShow,
+  dataRowChangeRound,
+  dataRowChangeRoundHistory,
+  historyShow,
+} from "@/modules/09_leave/interface/response/changeRound";
 import type { dataPost } from "@/modules/09_leave/interface/request/changeRound";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
 
-const mixin = useCounterMixin()
-const { date2Thai } = mixin
-const checkCilck = ref<boolean>(false)
+const mixin = useCounterMixin();
+const $q = useQuasar();
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  dialogMessageNotify,
+  dialogConfirm,
+  success,
+  hideLoader,
+} = mixin;
+const checkCilck = ref<boolean>(false);
+const profileId = ref<string>("");
 // store ลา >> รอบการปฏิบัติงาน
 export const useChangeRoundDataStore = defineStore(
-    "changeRoundDataStore",
-    () => {
-        //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-        const visibleColumns = ref<string[]>([
-            "cardId",
-            "fullName",
-            "currentRound",
-            "effectiveDate"
-        ]);
-        const visibleColumnsHistory = ref<string[]>([
-            "round",
-            "time",
-            "effectiveDate",
-            "reson"
-        ]);
+  "changeRoundDataStore",
+  () => {
+    //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+    const visibleColumns = ref<string[]>([
+      "cardId",
+      "fullName",
+      "currentRound",
+      "effectiveDate",
+    ]);
+    const visibleColumnsHistory = ref<string[]>([
+      "round",
+      "time",
+      "effectiveDate",
+      "reson",
+    ]);
 
-        // หัวตาราง
-        const columns = ref<QTableProps["columns"]>([
-            {
-                name: "cardId",
-                align: "left",
-                label: "เลขบัตรประชาชน",
-                sortable: true,
-                field: "cardId",
-                headerStyle: "font-size: 14px",
-                style: "font-size: 14px",
-            },
-            {
-                name: "fullName",
-                align: "left",
-                label: "ชื่อ-นามสกุล",
-                sortable: true,
-                field: "fullName",
-                headerStyle: "font-size: 14px",
-                style: "font-size: 14px",
-            },
-            {
-                name: "currentRound",
-                align: "left",
-                label: "รอบปัจจุบัน",
-                sortable: true,
-                field: "currentRound",
-                headerStyle: "font-size: 14px",
-                style: "font-size: 14px",
-            },
-            {
-                name: "effectiveDate",
-                align: "left",
-                label: "วันที่มีผล",
-                sortable: true,
-                field: "effectiveDate",
-                headerStyle: "font-size: 14px",
-                style: "font-size: 14px",
-            },
-        ]);
-        const columnsHistory = ref<QTableProps["columns"]>([
-            {
-                name: "round",
-                align: "left",
-                label: "ครั้งที่",
-                sortable: true,
-                field: "round",
-                headerStyle: "font-size: 14px",
-                style: "font-size: 14px",
-            },
-            {
-                name: "time",
-                align: "left",
-                label: "รอบเวลา",
-                sortable: true,
-                field: "time",
-                headerStyle: "font-size: 14px",
-                style: "font-size: 14px",
-            },
-            {
-                name: "effectiveDate",
-                align: "left",
-                label: "วันที่มีผล",
-                sortable: true,
-                field: "effectiveDate",
-                headerStyle: "font-size: 14px",
-                style: "font-size: 14px",
-            },
-            {
-                name: "reson",
-                align: "left",
-                label: "เหตุผล",
-                sortable: true,
-                field: "reson",
-                headerStyle: "font-size: 14px",
-                style: "font-size: 14px",
-            },
-        ]);
+    // หัวตาราง
+    const columns = ref<QTableProps["columns"]>([
+      {
+        name: "cardId",
+        align: "left",
+        label: "เลขบัตรประชาชน",
+        sortable: true,
+        field: "cardId",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "fullName",
+        align: "left",
+        label: "ชื่อ-นามสกุล",
+        sortable: true,
+        field: "fullName",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "currentRound",
+        align: "left",
+        label: "รอบปัจจุบัน",
+        sortable: true,
+        field: "currentRound",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "effectiveDate",
+        align: "left",
+        label: "วันที่มีผล",
+        sortable: true,
+        field: "effectiveDate",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+    ]);
+    const columnsHistory = ref<QTableProps["columns"]>([
+      {
+        name: "round",
+        align: "left",
+        label: "ครั้งที่",
+        sortable: true,
+        field: "round",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "time",
+        align: "left",
+        label: "รอบเวลา",
+        sortable: true,
+        field: "time",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "effectiveDate",
+        align: "left",
+        label: "วันที่มีผล",
+        sortable: true,
+        field: "effectiveDate",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "reson",
+        align: "left",
+        label: "เหตุผล",
+        sortable: true,
+        field: "reson",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+    ]);
 
-
-        // ข้อมูลในตาราง
-        const rows = ref<changeShow[]>([]);
-        const rowsHistory = ref<historyShow[]>([]);
-        function fetchDatainHistory(data: dataRowChangeRoundHistory[]) {
-            let datalistHistory: historyShow[] = data.map((e: dataRowChangeRoundHistory) => {
-                return {
-                    id: e.id,
-                    time: `${e.roundStart}-${e.roundEnd}`,
-                    effectiveDate: date2Thai(e.effectiveDate),
-                    reson: e.reson ?? '-'
-
-                };
-            });
-            rowsHistory.value = datalistHistory;
-        }
-
-        function fetchDataForCardId(dataDetail: any, data: any) {
-            if (dataDetail) {
-              const filteredData = data.filter((e:any) => {
-                return (!dataDetail.cardId || e.cardId === dataDetail.cardId) &&
-                       (!dataDetail.firstName || e.firstName === dataDetail.firstName) &&
-                       (!dataDetail.lastName || e.lastName === dataDetail.lastName);
-              });
-          
-              if (filteredData.length > 0) {
-                checkCilck.value = false;
-                rows.value = filteredData.map((e:any) => ({
-                  cardId: e.cardId,
-                  prefix: e.prefix,
-                  firstName: e.firstName,
-                  lastName: e.lastName,
-                  fullName: `${e.prefix}${e.firstName} ${e.lastName}`,
-                  roundStart: e.roundStart,
-                  roundEnd: e.roundEnd,
-                  currentRound: `${e.roundStart}-${e.roundEnd}`,
-                  effectiveDate: date2Thai(e.effectiveDate),
-                }));
-              } else {
-                rows.value = [];
-                console.log(3);
-                checkCilck.value = true;
-              }
-            }
-          }
-          
-
-
-        return {
-            visibleColumns,
-            columns,
-            columnsHistory,
-            rows,
-            rowsHistory,
-            fetchDatainHistory,
-            visibleColumnsHistory,
-            fetchDataForCardId,
-            checkCilck
-        };
+    // ข้อมูลในตาราง
+    function setProfileId(id: string) {
+      console.log(profileId);
+      profileId.value = id;
     }
+    function fetchDataForCardId(dataDetail: any) {
+      if (dataDetail) {
+        showLoader();
+        http
+          .post(config.API.leaveSearch(), {
+            citizenId: dataDetail.cardId || "", //เลขบัตรประชาชน
+            firstname: dataDetail.firstName || "", //ชื่อจริง
+            lastname: dataDetail.lastName || "", //นามสกุล
+            page: dataDetail.page || 1, //*หน้า
+            pageSize: dataDetail.pageSize || 10, //*จำนวนแถวต่อหน้า
+            keyword: dataDetail.keyword || "", //keyword ค้นหา
+          })
+          .then((res) => {
+            const apiData = res.data.result.data;
+            if (apiData.length > 0) {
+              checkCilck.value = false;
+              rows.value = apiData.map((e: any) => ({
+                profileId: e.profileId,
+                cardId: e.citizenId,
+                fullName: e.fullName,
+                roundStart: e.startTimeMorning,
+                roundEnd: e.leaveTimeAfterNoon,
+                currentRound: `${e.startTimeMorning}-${e.leaveTimeAfterNoon}`,
+                effectiveDate: date2Thai(e.effectiveDate),
+              }));
+              console.log(profileId.value);
+              console.log(apiData.length);
+            } else {
+              rows.value = [];
+              checkCilck.value = true;
+            }
+          })
+          .catch((e) => {
+            messageError($q, e);
+          })
+          .finally(async () => {
+            hideLoader();
+          });
+      }
+    }
+    const rows = ref<changeShow[]>([]);
+    const rowsHistory = ref<historyShow[]>([]);
+    // paging
+    const page = ref<number>(1);
+    const pageSize = ref<number>(10);
+    const filter = ref<string>(""); //search data table
+    /**
+     * ฟังก์ชั่น api เปลี่ยนหน้า
+     * @param pageVal page
+     * @param pageSizeVal pagesize
+     */
+    async function changePage(pageVal: number, pageSizeVal: number) {
+      page.value = await pageVal;
+      pageSize.value = await pageSizeVal;
+      fetchDatainHistory();
+    }
+
+    async function fetchDatainHistory() {
+      console.log("tes");
+      console.log(profileId.value);
+      showLoader();
+      await http
+        .post(
+          config.API.leaveRoundById(profileId.value),
+          {
+            page: page.value,
+            pageSize: pageSize.value,
+            keyword: filter.value,
+          }
+          // `?page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}`
+        )
+        .then((res) => {
+          const dataHistory = res.data.result.data;
+          rowsHistory.value = [];
+          dataHistory.map((e: any) => {
+            rowsHistory.value.push({
+              round: e.round,
+              startTimeMorning: e.startTimeMorning,
+              leaveTimeAfternoon: e.leaveTimeAfternoon,
+              time: `${e.startTimeMorning}-${e.leaveTimeAfternoon}`,
+              effectiveDate: date2Thai(e.effectiveDate),
+              reson: e.remark ?? "-",
+            });
+            console.log(rowsHistory.value);
+          });
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    }
+
+    return {
+      visibleColumns,
+      columns,
+      columnsHistory,
+      rows,
+      rowsHistory,
+      fetchDatainHistory,
+      visibleColumnsHistory,
+      fetchDataForCardId,
+      checkCilck,
+      setProfileId,
+    };
+  }
 );
diff --git a/src/modules/09_leave/views/ChangeRoundMain.vue b/src/modules/09_leave/views/ChangeRoundMain.vue
index aeafcf589..c2b7deebb 100644
--- a/src/modules/09_leave/views/ChangeRoundMain.vue
+++ b/src/modules/09_leave/views/ChangeRoundMain.vue
@@ -37,7 +37,12 @@ const formData = reactive<dataPost>({
 function Openmodal(check: string, detail: any) {
   DataRow.value = detail;
   modal.value = true;
+  console.log(DataRow.value.profileId);
+  dataStore.setProfileId(DataRow.value.profileId);
+  console.log(DataRow.value.profileId);
   editCheck.value = check;
+  dataStore.fetchDatainHistory();
+  console.log(detail);
 }
 
 /** Function closePopup */
@@ -47,29 +52,8 @@ function closeDialog() {
 
 /** Function ค้นหาข้อมูล */
 function searchData() {
-  const data = [
-    {
-      cardId: "3514210651232",
-      prefix: "นางสาว",
-      firstName: "กัณฐิมา",
-      lastName: "กาฬสินธุ์",
-      roundStart: "07:00",
-      roundEnd: "11:00",
-      effectiveDate: new Date("2023-11-01T03:08:43.217"),
-    },
-    {
-      cardId: "1231231231234",
-      prefix: "นายสาว",
-      firstName: "test",
-      lastName: "test",
-      roundStart: "07:00",
-      roundEnd: "16:00",
-      effectiveDate: new Date("2023-11-01T03:08:43.217"),
-    },
-  ];
-
   if (formData.cardId || formData.firstName || formData.lastName) {
-    dataStore.fetchDataForCardId(formData, data);
+    dataStore.fetchDataForCardId(formData);
   } else {
     dialogMessageNotify($q, "กรุณากรอกข้อมูลอย่างน้อย 1 ช่อง");
   }
@@ -77,22 +61,7 @@ function searchData() {
 
 /** Hook */
 onMounted(() => {
-  dataStore.fetchDatainHistory([
-    {
-      id: "xxx1",
-      roundStart: "08:30",
-      roundEnd: "16:00",
-      effectiveDate: new Date("2023-11-01T03:08:43.217"),
-      reson: null,
-    },
-    {
-      id: "xxx2",
-      roundStart: "08:00",
-      roundEnd: "16:30",
-      effectiveDate: new Date("2023-11-01T03:08:43.217"),
-      reson: null,
-    },
-  ]);
+  // dataStore.fetchDatainHistory();
 });
 </script>
 <template>
@@ -160,11 +129,11 @@ onMounted(() => {
         row-key="interrogated"
         flat
         bordered
-        :paging="true"
         dense
         class="custom-header-table"
         :visible-columns="dataStore.visibleColumns"
       >
+        <!-- :paging="true" -->
         <template v-slot:header="props">
           <q-tr :props="props">
             <q-th
@@ -231,6 +200,7 @@ onMounted(() => {
     :closeDialog="closeDialog"
     :editCheck="editCheck"
     :DataRow="DataRow"
+    :personId="DataRow == null ? '' : DataRow.profileId"
   />
 </template>
 <style scoped lang="scss">