diff --git a/src/api/registry/api.profile.ts b/src/api/registry/api.profile.ts
index 3e379f4f7..60b262952 100644
--- a/src/api/registry/api.profile.ts
+++ b/src/api/registry/api.profile.ts
@@ -187,7 +187,8 @@ export default {
   profileHistory: (type: string) => `${profile}search/history/oc/${type}`,
 
   //ระบบ ลูกจ้างชั่คราว
-  employmentId: (profileId: string) => `${profile}employment/${profileId}`
+  employmentId: (profileId: string) => `${profile}employment/${profileId}`,
+  employmentHistoryId: (employmentId: string) => `${profile}employment/history/${employmentId}`
 
 
 
diff --git a/src/modules/08_registryEmployee/components/EditEmployee/Employment.vue b/src/modules/08_registryEmployee/components/EditEmployee/Employment.vue
index 0df181474..a86f15476 100644
--- a/src/modules/08_registryEmployee/components/EditEmployee/Employment.vue
+++ b/src/modules/08_registryEmployee/components/EditEmployee/Employment.vue
@@ -10,15 +10,25 @@ import type { QTableProps } from "quasar";
 import type {
   FormEmployment,
   FormEmploymentRef,
+  EmploymentList,
+  Respones,
 } from "@/modules/08_registryEmployee/interface/response/Main";
 
 const $q = useQuasar();
 const route = useRoute();
 const maxin = useCounterMixin();
-const { date2Thai, dialogConfirm, success, messageError } = maxin;
+const {
+  date2Thai,
+  dialogConfirm,
+  dialogRemove,
+  success,
+  messageError,
+  hideLoader,
+  showLoader,
+} = maxin;
 const profileId = ref<string>(route.params.id.toString());
 
-const rows = ref<any[]>([]);
+const rows = ref<EmploymentList[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "dateEmployment",
@@ -42,17 +52,28 @@ const columns = ref<QTableProps["columns"]>([
 const visibleColumns = ref<string[]>(["dateEmployment", "orderEmployment"]);
 const filter = ref<string>();
 onMounted(async () => {
-  // await fetchList();
+  await fetchList();
 });
 
 async function fetchList() {
+  showLoader();
   await http
     .get(config.API.employmentId(profileId.value))
     .then((res) => {
-      console.log(res);
+      const data = res.data.result;
+      const list: EmploymentList[] = data.map((e: Respones) => ({
+        id: e.id,
+        orderEmployment: e.command,
+        dateEmployment: date2Thai(e.date),
+        dataISO: e.date,
+      }));
+      rows.value = list;
     })
     .catch((err) => {
-      console.log(err);
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
     });
 }
 
@@ -71,12 +92,15 @@ const formDataRef: FormEmploymentRef = {
 
 function onClickAdd() {
   modal.value = true;
+  actions.value = "";
   formData.dateEmployment = null;
   formData.orderEmployment = "";
 }
 function colsePopup() {
   modal.value = false;
+  modalHistory.value = false;
 }
+// validateForm
 function validateForm() {
   const hasError = [];
   for (const key in formDataRef) {
@@ -89,39 +113,197 @@ function validateForm() {
     }
   }
   if (hasError.every((result) => result === true)) {
-    onSubmit();
+    console.log(formData);
+    if (actions.value == "edit") {
+      onSubmitEdit();
+    } else onSubmit();
   } else {
     console.log("ไม่ผ่าน ");
   }
 }
+// การเพิ่ม
 function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
-      console.log(formData);
-      // await http
-      //   .post(config.API.employmentId(profileId.value), formData)
-      //   .then(async () => {
-      //     await fetchList();
-      //     success($q, "บันทึกข้อมูลสำเร็จ");
-      //   })
-      //   .catch((err) => {
-      //     messageError($q, err);
-      //   })
-      //   .finally(() => {
-      //     colsePopup();
-      //   });
+      const data = {
+        command: formData.orderEmployment,
+        date: formData.dateEmployment,
+      };
+      await http
+        .post(config.API.employmentId(profileId.value), data)
+        .then(async () => {
+          await fetchList();
+          success($q, "บันทึกข้อมูลสำเร็จ");
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          colsePopup();
+        });
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
   );
 }
-
+// การลบ
+function cilckDelete(id: string) {
+  dialogRemove(
+    $q,
+    async () => {
+      await http
+        .delete(config.API.employmentId(id))
+        .then(async () => {
+          await fetchList();
+          success($q, "ลบข้อมูลสำเร็จ");
+        })
+        .catch((err) => {
+          messageError($q, err);
+        });
+    },
+    "ยืนยันการลบข้อมูล",
+    "ต้องการยืนยันการลบข้อมูลนี้หรือไม่ ?"
+  );
+}
+// การแก้ไข
+const actions = ref<string>("");
+const employmentRowId = ref<string>("");
+function clickEdit(data: any, actionstype: string) {
+  modal.value = true;
+  actions.value = actionstype;
+  employmentRowId.value = data.id;
+  formData.dateEmployment = data.dataISO;
+  formData.orderEmployment = data.orderEmployment;
+}
+function onSubmitEdit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      const data = {
+        command: formData.orderEmployment,
+        date: formData.dateEmployment,
+      };
+      await http
+        .put(config.API.employmentId(employmentRowId.value), data)
+        .then(async () => {
+          await fetchList();
+          success($q, "บันทึกข้อมูลสำเร็จ");
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          colsePopup();
+        });
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
+// ประวัติการแก้ไข
+const modalHistory = ref<boolean>(false);
+const rowsHis = ref<EmploymentList[]>([]);
+const columnsHis = ref<QTableProps["columns"]>([
+  {
+    name: "dateEmployment",
+    align: "left",
+    label: "วันที่จ้าง",
+    sortable: false,
+    field: "dateEmployment",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "orderEmployment",
+    align: "left",
+    label: "คำสั่งจ้าง",
+    sortable: false,
+    field: "orderEmployment",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้สร้าง",
+    sortable: false,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: false,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้แก้ไข",
+    sortable: false,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: false,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumnsHis = ref<string[]>([
+  "dateEmployment",
+  "orderEmployment",
+  "createdFullName",
+  "createdAt",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+const filterHis = ref<string>();
+async function openPopupHistory(id: string) {
+  modalHistory.value = true;
+  showLoader();
+  await http
+    .get(config.API.employmentHistoryId(id))
+    .then((res) => {
+      const data = res.data.result;
+      const list: EmploymentList[] = data.map((e: Respones) => ({
+        id: e.id,
+        orderEmployment: e.command,
+        dateEmployment: date2Thai(e.date),
+        createdFullName: e.createdFullName,
+        createdAt: date2Thai(e.createdAt),
+        lastUpdateFullName: e.lastUpdateFullName,
+        lastUpdatedAt: date2Thai(e.lastUpdatedAt),
+      }));
+      rowsHis.value = list;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 const pagination = ref({
   descending: true,
   page: 1,
   rowsPerPage: 10,
 });
+const paginationHis = ref({
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 </script>
 
 <template>
@@ -198,6 +380,9 @@ const pagination = ref({
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
               <span class="text-weight-medium">{{ col.label }}</span>
             </q-th>
+            <q-th auto-width></q-th>
+            <q-th auto-width></q-th>
+            <q-th auto-width></q-th>
           </q-tr>
         </template>
         <template v-slot:body="props">
@@ -207,6 +392,38 @@ const pagination = ref({
                 {{ col.value }}
               </div>
             </q-td>
+            <q-td>
+              <q-btn
+                dense
+                flat
+                round
+                color="primary"
+                icon="mdi-pencil"
+                @click="clickEdit(props.row, 'edit')"
+              />
+            </q-td>
+            <q-td>
+              <q-btn
+                dense
+                flat
+                round
+                color="red"
+                icon="mdi-delete"
+                @click="cilckDelete(props.row.id)"
+              />
+            </q-td>
+            <q-td>
+              <q-btn
+                dense
+                flat
+                round
+                color="info"
+                @click="openPopupHistory(props.row.id)"
+                icon="mdi-history"
+              >
+                <q-tooltip>ประวัติข้อมูลการจ้าง </q-tooltip>
+              </q-btn>
+            </q-td>
           </q-tr>
         </template>
       </d-table>
@@ -314,6 +531,86 @@ const pagination = ref({
       </form>
     </q-card>
   </q-dialog>
+
+  <q-dialog v-model="modalHistory">
+    <q-card style="width: 700px; max-width: 80vw">
+      <q-toolbar>
+        <q-toolbar-title class="text-subtitle1 text-weight-bold">
+          <span style="margin-right: 0"> ประวัติข้อมูลการจ้าง </span>
+        </q-toolbar-title>
+        <q-btn
+          for="closeDialog"
+          icon="close"
+          unelevated
+          round
+          dense
+          style="color: #eb0505; background-color: #ffdede"
+          @click="colsePopup"
+        />
+      </q-toolbar>
+
+      <q-card-section class="q-pt-none">
+        <q-toolbar class="q-pa-none">
+          <q-space />
+          <div class="q-gutter-sm" style="display: flex">
+            <q-input
+              outlined
+              dense
+              v-model="filterHis"
+              label="ค้นหา"
+              style="min-width: 150px"
+            />
+
+            <q-select
+              v-model="visibleColumnsHis"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columnsHis"
+              option-value="name"
+              options-cover
+              style="min-width: 150px"
+            />
+          </div>
+        </q-toolbar>
+        <d-table
+          flat
+          bordered
+          id="table"
+          ref="table"
+          :columns="columnsHis"
+          :rows="rowsHis"
+          :filter="filterHis"
+          row-key="dateEmployment"
+          :paging="true"
+          dense
+          :visible-columns="visibleColumnsHis"
+          v-model:pagination="paginationHis"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer" style="height: 40px">
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div>
+                  {{ col.value }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/08_registryEmployee/interface/response/Main.ts b/src/modules/08_registryEmployee/interface/response/Main.ts
index 9cb23c57b..4bd6c3f38 100644
--- a/src/modules/08_registryEmployee/interface/response/Main.ts
+++ b/src/modules/08_registryEmployee/interface/response/Main.ts
@@ -55,5 +55,24 @@ interface FormEmploymentRef {
   orderEmployment: Object | null
   [key: string]: any;
 };
+interface EmploymentList {
+  id: string
+  dateEmployment: Date | null
+  orderEmployment: string
+  dataISO: Date | null
+  createdFullName: string
+  createdAt: Date
+  lastUpdateFullName: string
+  lastUpdatedAt: Date
+}
+interface Respones {
+  id: string
+  date: Date
+  command: string
+  createdFullName: string
+  createdAt: Date
+  lastUpdateFullName: string
+  lastUpdatedAt: Date
+}
 
-export type { employeePosition, FormEmployment, FormEmploymentRef };
+export type { employeePosition, FormEmployment, FormEmploymentRef, EmploymentList, Respones };