diff --git a/src/api/02_organizational/api.organization.ts b/src/api/02_organizational/api.organization.ts
index ec907dceb..3afda0fb6 100644
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@@ -57,6 +57,7 @@ export default {
 
   /** บรรจุแต่งตั้ง*/
   orgPosPlacement: `${orgPos}/placement/search`,
+  orgPosPlacemenTemp: `${orgPos}/placementemp/search`,
   orgPosFind: `${organization}/find/node`,
   orgProfileProbation: `${organization}/profile/probation`,
 
diff --git a/src/components/Dialogs/DialogOrgSelectEmployee.vue b/src/components/Dialogs/DialogOrgSelectEmployee.vue
new file mode 100644
index 000000000..41cfc5ab3
--- /dev/null
+++ b/src/components/Dialogs/DialogOrgSelectEmployee.vue
@@ -0,0 +1,879 @@
+<script setup lang="ts">
+import DialogHeader from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { ref, watch, reactive } from "vue";
+import type { QTableProps } from "quasar";
+import CardPosition from "@/modules/05_placement/components/PersonalList/CardPosition.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  OrgTree,
+  DataTree,
+  PositionMain,
+  PositionNo,
+  Positions,
+  DataPositionNo,
+  FormActive,
+  TreeMain,
+} from "@/interface/request/orgSelect/org";
+
+const props = defineProps({
+  dataRows: {
+    type: Object,
+    require: true,
+  },
+  onSubmit: Function,
+});
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  showLoader,
+  messageError,
+  hideLoader,
+  date2Thai,
+  dialogMessageNotify,
+} = mixin;
+
+const modal = defineModel<boolean>("modal", { required: true });
+const title = defineModel<string>("title", { required: true });
+
+const posType = defineModel<any>("posType", { required: true });
+const posLevel = defineModel<any>("posLevel", { required: true });
+const position = defineModel<any>("position", { required: true });
+
+const orgRevisionId = ref<string>("");
+const filter = ref<string>("");
+const isAll = ref<boolean>(false);
+const isBlank = ref<boolean>(false);
+const posMasterMain = ref<any>([]);
+const positionNo = ref<DataPositionNo[]>();
+const itemTaps = ref<string[]>();
+const filters = ref<string>("");
+const positionId = ref<string>("");
+const selectedPos = ref<any[]>([]);
+const seletcId = ref<string>("");
+const datePos = ref<Date>(new Date());
+const rowsPosition = ref<Positions[]>([]);
+const positionData = ref<any>();
+/** active form */
+const formActive = reactive<FormActive>({
+  activeId: "",
+  activeName: "",
+  draftId: "",
+  draftName: "",
+  orgPublishDate: null,
+  isPublic: false,
+});
+/** node */
+const nodes = ref<Array<OrgTree>>([]);
+const lazy = ref(nodes);
+const expanded = ref<string[]>([]);
+const nodeLevel = ref<number>(0);
+const nodeId = ref<string>(""); // id ของ Tree
+
+/** columns*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "isPosition",
+    align: "left",
+    label: "",
+    sortable: true,
+    field: "isPosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posMasterNo",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posMasterNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่ง",
+    field: "positionName",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับชั้นงาน",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionIsSelected",
+    align: "left",
+    label: "คนครอง",
+    sortable: true,
+    field: "positionIsSelected",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const columnsPostition = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionField",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionField",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับชั้นงาน",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionArea",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
+    field: "positionArea",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const visibleColumns = ref<string[]>([
+  "isPosition",
+  "no",
+  "posMasterNo",
+  "positionName",
+  "posTypeName",
+  "posLevelName",
+  "positionIsSelected",
+]);
+
+/** ปิด dialog */
+function close() {
+  modal.value = false;
+  filter.value = "";
+  isAll.value = false;
+  isBlank.value = false;
+
+  nodes.value = [];
+  expanded.value = [];
+  nodeLevel.value = 0;
+  nodeId.value = "";
+}
+
+async function getDataTable(id: string, level: number = 0) {
+  showLoader();
+
+  const body = {
+    node: level,
+    nodeId: id,
+    position: posType.value ? posType.value : "",
+    posLevel: posLevel.value ? posLevel.value : "",
+    posType: position.value ? position.value : "",
+    isAll: isAll.value,
+    isBlank: isBlank.value,
+    typeCommand: null,
+  };
+
+  await http
+    .post(config.API.orgPosPlacemenTemp, body)
+    .then((res) => {
+      const dataMain: PositionMain[] = [];
+      posMasterMain.value = res.data.result.data;
+
+      res.data.result.data.forEach((e: PositionNo) => {
+        const p = e.positions;
+        if (p.length !== 0) {
+          const a = p.find((el: Positions) => el.positionIsSelected === true);
+          const { id, ...rest } = a ? a : p[0];
+          const data: any = { ...e, ...rest };
+          dataMain.push(data);
+        }
+      });
+      const listPosNo: DataPositionNo[] = dataMain.map((e: PositionMain) => ({
+        id: e.id,
+        isPosition: e.isPosition,
+        posMasterNo:
+          e.orgShortname +
+          (e.posMasterNoPrefix != null ? e.posMasterNoPrefix : "") +
+          e.posMasterNo +
+          (e.posMasterNoSuffix != null ? e.posMasterNoSuffix : ""),
+        positionName: e.positionName,
+        posTypeName: e.posTypeName,
+        posLevelName: e.posLevelName,
+        positionIsSelected: e.positionIsSelected
+          ? e.fullNameCurrentHolder
+          : "-",
+        isSit: e.isSit,
+        positions: e.positions,
+        node: e.node,
+        nodeId: e.nodeId,
+      }));
+
+      positionNo.value = listPosNo;
+      positionData.value = listPosNo;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      setTimeout(() => {
+        hideLoader();
+      }, 1000);
+    });
+}
+
+/**
+ * funtion เลือกข้อมูล Tree
+ * @param data ข่อมูล Tree
+ */
+function updateSelected(data: DataTree) {
+  if (props?.dataRows?.nodeId === data.orgTreeId) {
+    positionId.value = props?.dataRows?.posmasterId;
+    seletcId.value = props?.dataRows?.positionId;
+    datePos.value = props?.dataRows?.reportingDateFullDate;
+  } else {
+    positionId.value = "";
+    seletcId.value = "";
+    selectedPos.value = [];
+    datePos.value = new Date();
+  }
+
+  nodeId.value = data.orgTreeId ? data.orgTreeId : "";
+  nodeLevel.value = data.orgLevel;
+  getDataTable(data.orgTreeId, data.orgLevel);
+}
+
+/** ดึงข้อมูล active */
+async function getActive() {
+  showLoader();
+  await http
+    .get(config.API.activeOrganization)
+    .then((res) => {
+      const data = res.data.result;
+
+      formActive.activeId = data.activeId;
+      formActive.activeName = data.activeName;
+      formActive.draftId = data.draftId;
+      formActive.draftName = data.draftName;
+      formActive.orgPublishDate = data.orgPublishDate;
+      formActive.isPublic = data.isPublic;
+
+      getTreeData(data.activeId);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** ดึงข้อมูล หน่วยงาน */
+async function getTreeData(id: string) {
+  showLoader();
+  await http
+    .get(config.API.orgByid(id))
+    .then((res) => {
+      const data = res.data.result;
+      nodes.value = data;
+      filterItemsTaps(data);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function filterItemsTaps(data: TreeMain[]) {
+  let orgTreeIds: string[] = [];
+  for (const child of data) {
+    orgTreeIds.push(child.orgTreeId);
+    if (child.children) {
+      orgTreeIds = orgTreeIds.concat(filterItemsTaps(child.children));
+    }
+  }
+  itemTaps.value = orgTreeIds;
+  return orgTreeIds;
+}
+
+/**
+ * function เลือกเลขที่ตำแหน่ง
+ * @param id เลชที่ตำแหน่ง
+ */
+async function onClickSelectPos(id: string) {
+  positionData.value = positionNo.value;
+  positionId.value = id;
+  selectedPos.value = [];
+  const position: DataPositionNo = positionData.value.find(
+    (e: DataPositionNo) => e.id === id
+  );
+
+  // หาตำแหน่ง
+  if (position) {
+    rowsPosition.value = position.positions;
+    if (seletcId.value) {
+      selectedPos.value = rowsPosition.value.filter(
+        (e) => e.id === seletcId.value
+      );
+    }
+  }
+}
+
+/**
+ * function fetch ข้อมูล expanded tree
+ * @param level levelTree
+ * @param id treeId
+ */
+async function fetchPosFind(level: number, id: string) {
+  showLoader();
+  const body = {
+    node: level,
+    nodeId: id,
+  };
+  await http
+    .post(config.API.orgPosFind, body)
+    .then((res) => {
+      const data = res.data.result;
+      expanded.value = data;
+      nodeId.value = id;
+      positionId.value = props?.dataRows?.posmasterId;
+      seletcId.value = props?.dataRows?.positionId;
+      datePos.value = props?.dataRows?.reportingDateFullDate;
+
+      getDataTable(nodeId.value, level);
+    })
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    });
+}
+
+watch(
+  () => modal.value,
+  async (n) => {
+    if (n == true) {
+      getActive();
+      if (props?.dataRows?.node !== null && props?.dataRows?.nodeId !== null) {
+        await fetchPosFind(props?.dataRows?.node, props?.dataRows?.nodeId);
+        if (positionId.value) {
+          setTimeout(async () => {
+            await onClickSelectPos(positionId.value);
+          }, 200);
+        }
+      } else {
+        expanded.value = [];
+      }
+    }
+  }
+);
+
+watch(
+  () => isAll.value,
+  (value, oldVal) => {
+    if (value !== oldVal) {
+      getDataTable(nodeId.value, nodeLevel.value);
+    }
+  }
+);
+
+watch(
+  () => isBlank.value,
+  (value, oldVal) => {
+    if (value !== oldVal) {
+      getDataTable(nodeId.value, nodeLevel.value);
+    }
+  }
+);
+
+watch(
+  () => positionId.value,
+  (n) => {
+    if (n) {
+      onClickSelectPos(n);
+    }
+  }
+);
+function onSubmit() {
+  const dataPosMaster = posMasterMain.value?.find(
+    (e: any) => e.id === positionId.value
+  );
+
+  console.log(dataPosMaster);
+  if (selectedPos.value.length === 0) {
+    dialogMessageNotify($q, "กรุณาเลือกตำแหน่ง");
+  } else {
+    dialogConfirm($q, async () => {
+      const body = {
+        personalId: props?.dataRows?.id,
+        node: dataPosMaster.node,
+        nodeId: dataPosMaster.nodeId,
+        orgRevisionId: formActive.activeId,
+        positionId: selectedPos.value[0].id,
+        posMasterNo: dataPosMaster.posMasterNo, //เลขที่ตำแหน่ง(เลขอย่่างเดียว)
+        positionName: selectedPos.value[0].positionName, //ชื่อตำแหน่ง
+        positionField: selectedPos.value[0].positionField, //ชื่อตำแหน่ง
+        posTypeId: selectedPos.value[0].posTypeId, //ชื่อตำแหน่ง
+        posTypeName: selectedPos.value[0].posTypeName, //ชื่อตำแหน่ง
+        posLevelId: selectedPos.value[0].posLevelId, //ชื่อตำแหน่ง
+        posLevelName: selectedPos.value[0].posLevelName, //ชื่อตำแหน่ง
+        reportingDate: datePos.value,
+        posmasterId: dataPosMaster.id,
+      };
+      props.onSubmit?.(body);
+    });
+  }
+}
+</script>
+<template>
+  <q-dialog v-model="modal" persistent full-width>
+    <q-card class="no-scroll">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader :tittle="title" :close="close" />
+        <q-separator />
+        <q-card-section style="max-height: 80vh" class="scroll">
+          <div class="row">
+            <q-card
+              bordered
+              class="col-12 col-sm-3 scroll q-pa-sm"
+              style="height: 75vh"
+            >
+              <q-toolbar style="padding: 0">
+                <q-toolbar-title class="text-subtitle2 text-bold"
+                  >เลือกหน่วยงาน/ส่วนราชการ</q-toolbar-title
+                >
+              </q-toolbar>
+
+              <q-input dense outlined v-model="filter" label="ค้นหา">
+                <template v-slot:append>
+                  <q-icon
+                    v-if="filter !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="filter = ''"
+                  />
+                </template>
+              </q-input>
+              <q-tree
+                class="q-pa-sm q-gutter-sm"
+                dense
+                :nodes="lazy"
+                node-key="orgTreeId"
+                label-key="orgTreeName"
+                :filter="filter"
+                no-results-label="ไม่พบข้อมูลที่ค้นหา"
+                no-nodes-label="ไม่มีข้อมูล"
+                v-model:expanded="expanded"
+              >
+                <template v-slot:default-header="prop">
+                  <q-item
+                    @click.stop="updateSelected(prop.node)"
+                    clickable
+                    :active="nodeId == prop.node.orgTreeId"
+                    active-class="my-list-link text-primary text-weight-medium"
+                    class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                  >
+                    <div>
+                      <div class="text-weight-medium">
+                        {{ prop.node.orgTreeName }}
+                      </div>
+                      <div class="text-weight-light">
+                        {{
+                          prop.node.orgCode == null ? null : prop.node.orgCode
+                        }}
+                        {{
+                          prop.node.orgTreeShortName == null
+                            ? null
+                            : prop.node.orgTreeShortName
+                        }}
+                      </div>
+                    </div>
+                  </q-item>
+                </template>
+              </q-tree>
+            </q-card>
+            <q-card bordered class="col-12 col-sm-9 q-pa-sm">
+              <q-tab-panels
+                v-model="nodeId"
+                animated
+                transition-prev="jump-up"
+                transition-next="jump-up"
+              >
+                <q-tab-panel
+                  v-for="(item, index) in itemTaps"
+                  :key="index"
+                  :name="item"
+                >
+                  <div class="column q-col-gutter-sm" style="height: 70vh">
+                    <!-- เลือกเลขที่ตำแหน่ง -->
+                    <div class="col-7">
+                      <q-card
+                        bordered
+                        style="height: 100%; border: 1px solid #d6dee1"
+                      >
+                        <div
+                          class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+                        >
+                          เลือกเลขที่ตำแหน่ง
+                        </div>
+                        <div class="col-12"><q-separator /></div>
+                        <div class="col-12 q-pa-md">
+                          <q-toolbar style="padding: 0px">
+                            <div class="row q-gutter-md">
+                              <q-checkbox
+                                keep-color
+                                v-model="isBlank"
+                                label="แสดงเฉพาะตำแหน่งว่าง"
+                                color="primary"
+                              >
+                                <q-tooltip>แสดงเฉพาะตำแหน่งว่าง </q-tooltip>
+                              </q-checkbox>
+                            </div>
+                            <q-space />
+
+                            <div class="row q-gutter-md">
+                              <q-checkbox
+                                keep-color
+                                v-model="isAll"
+                                label="แสดงตำแหน่งทั้งหมด"
+                                color="primary"
+                              >
+                                <q-tooltip
+                                  >แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
+                                >
+                              </q-checkbox>
+                              <div>
+                                <q-input
+                                  outlined
+                                  dense
+                                  v-model="filters"
+                                  label="ค้นหา"
+                                >
+                                  <template v-slot:append>
+                                    <q-icon name="search" color="grey-5" />
+                                  </template>
+                                </q-input>
+                              </div>
+                              <div>
+                                <q-select
+                                  v-model="visibleColumns"
+                                  multiple
+                                  outlined
+                                  dense
+                                  options-dense
+                                  emit-value
+                                  :display-value="$q.lang.table.columns"
+                                  map-options
+                                  :options="columns"
+                                  option-value="name"
+                                  options-cover
+                                  style="min-width: 180px"
+                                />
+                              </div>
+                            </div>
+                          </q-toolbar>
+                          <d-table
+                            ref="table"
+                            :columns="columns"
+                            :rows="positionData"
+                            :filter="filters"
+                            row-key="id"
+                            flat
+                            bordered
+                            :paging="true"
+                            dense
+                            :rows-per-page-options="[10, 25, 50, 100]"
+                            class="tableTb"
+                            :visible-columns="visibleColumns"
+                          >
+                            <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">
+                                <q-td
+                                  v-for="col in props.cols"
+                                  :key="col.name"
+                                  :props="props"
+                                  @click="onClickSelectPos(props.row.id)"
+                                  :class="
+                                    props.row.id === positionId
+                                      ? 'bg-blue-2'
+                                      : ''
+                                  "
+                                >
+                                  <div v-if="col.name == 'no'">
+                                    {{ props.rowIndex + 1 }}
+                                  </div>
+                                  <div v-else-if="col.name === 'posMasterNo'">
+                                    {{
+                                      props.row.isSit
+                                        ? col.value + " " + "(ทับที่)"
+                                        : col.value
+                                    }}
+                                  </div>
+                                  <div v-else-if="col.name === 'isPosition'">
+                                    <div v-if="col.value">
+                                      <q-icon
+                                        name="done"
+                                        color="primary"
+                                        size="24px"
+                                      >
+                                        <q-tooltip>ตรงตามตำแหน่ง </q-tooltip>
+                                      </q-icon>
+                                    </div>
+                                  </div>
+
+                                  <div v-else>
+                                    {{ col.value ? col.value : "-" }}
+                                  </div>
+                                </q-td>
+                              </q-tr>
+                            </template>
+                          </d-table>
+                        </div>
+                      </q-card>
+                    </div>
+
+                    <!-- เลือกตำแหน่ง -->
+                    <div class="col-5">
+                      <q-card
+                        bordered
+                        style="height: 100%; border: 1px solid #d6dee1"
+                      >
+                        <div
+                          class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+                        >
+                          เลือกตำแหน่ง
+                        </div>
+                        <div class="col-12"><q-separator /></div>
+                        <q-tab-panels
+                          v-model="positionId"
+                          animated
+                          swipeable
+                          vertical
+                          transition-prev="jump-up"
+                          transition-next="jump-up"
+                        >
+                          <q-tab-panel
+                            v-for="(item, index) in positionData"
+                            :key="index"
+                            :name="item.id"
+                          >
+                            <div class="col-12">
+                              <q-toolbar style="padding: 0px">
+                                <datepicker
+                                  menu-class-name="modalfix"
+                                  v-model="datePos"
+                                  :locale="'th'"
+                                  autoApply
+                                  borderless
+                                  :enableTimePicker="false"
+                                  week-start="0"
+                                  :min-date="datePos"
+                                >
+                                  <template #year="{ year }">
+                                    {{ year + 543 }}
+                                  </template>
+                                  <template #year-overlay-value="{ value }">
+                                    {{ parseInt(value + 543) }}
+                                  </template>
+                                  <template #trigger>
+                                    <q-input
+                                      ref="dateRef"
+                                      outlined
+                                      dense
+                                      hide-bottom-space
+                                      :model-value="
+                                        datePos != null
+                                          ? date2Thai(datePos)
+                                          : null
+                                      "
+                                      label="วันที่รายงานตัว"
+                                    >
+                                      <template v-slot:prepend>
+                                        <q-icon
+                                          name="event"
+                                          class="cursor-pointer"
+                                          style="color: var(--q-primary)"
+                                        >
+                                        </q-icon>
+                                      </template>
+                                    </q-input>
+                                  </template>
+                                </datepicker>
+                              </q-toolbar>
+                              <d-table
+                                ref="table"
+                                :columns="columnsPostition"
+                                :rows="rowsPosition"
+                                row-key="id"
+                                flat
+                                bordered
+                                :paging="true"
+                                dense
+                                :rows-per-page-options="[10, 25, 50, 100]"
+                                class="tableTb"
+                                selection="single"
+                                v-model:selected="selectedPos"
+                              >
+                                <template v-slot:header-selection="scope">
+                                  <q-checkbox
+                                    keep-color
+                                    color="primary"
+                                    dense
+                                    v-model="scope.checkBox"
+                                  />
+                                </template>
+                                <template v-slot:header="props">
+                                  <q-tr :props="props">
+                                    <q-th auto-width />
+                                    <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">
+                                    <q-td>
+                                      <q-checkbox
+                                        keep-color
+                                        color="primary"
+                                        dense
+                                        v-model="props.selected"
+                                      />
+                                    </q-td>
+                                    <q-td
+                                      v-for="col in props.cols"
+                                      :key="col.name"
+                                      :props="props"
+                                    >
+                                      <div v-if="col.name == 'no'">
+                                        {{ props.rowIndex + 1 }}
+                                      </div>
+                                      <div
+                                        v-else-if="col.name === 'posMasterNo'"
+                                      >
+                                        {{
+                                          props.row.isSit
+                                            ? col.value + " " + "(ทับที่)"
+                                            : col.value
+                                        }}
+                                      </div>
+
+                                      <div v-else>
+                                        {{ col.value ? col.value : "-" }}
+                                      </div>
+                                    </q-td>
+                                  </q-tr>
+                                </template>
+                              </d-table>
+                            </div>
+                          </q-tab-panel>
+                        </q-tab-panels>
+                      </q-card>
+                    </div>
+                  </div>
+                </q-tab-panel>
+              </q-tab-panels>
+            </q-card>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+<style scoped>
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
+</style>
diff --git a/src/modules/05_placement/components/AppointEmployee/Detail.vue b/src/modules/05_placement/components/AppointEmployee/Detail.vue
index 727a947df..5eb955766 100644
--- a/src/modules/05_placement/components/AppointEmployee/Detail.vue
+++ b/src/modules/05_placement/components/AppointEmployee/Detail.vue
@@ -7,12 +7,15 @@ import type { ResponseTitle } from "@/modules/05_placement/interface/response/Re
 import type {
   appointmentData,
   ResponseData,
+  DataProfile
 } from "@/modules/05_placement/interface/response/AppointMent";
 import type { QForm } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
 
+import CardProfile from "@/components/CardProfile.vue";
+
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
 const $q = useQuasar();
@@ -20,6 +23,8 @@ const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
 
+const dataProfile = ref<DataProfile>();
+
 const appointment = ref<appointmentData>({
   citizenId: "",
   prefixId: "",
@@ -63,6 +68,7 @@ const fecthappointmentByid = async () => {
   await http
     .get(config.API.appointEmployeeByid(paramsId.toString()))
     .then((res: ResponseData) => {
+      dataProfile.value = res.data.result as unknown as DataProfile;
       const data = res.data.result;
       appointment.value = data;
       profileId.value = data.profileId;
@@ -175,56 +181,7 @@ onMounted(async () => {
     />
     รายละเอียดการปรับระดับชั้นงานลูกจ้าง {{ title.fullname }}
   </div>
-  <q-card bordered class="row col-12 text-dark">
-    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-      <div class="q-pl-sm text-weight-bold text-subtitle2">
-        {{ title.fullname }}
-      </div>
-      <q-space />
-      <q-btn
-        outline
-        color="blue"
-        dense
-        icon-right="mdi-open-in-new"
-        class="q-px-sm"
-        label="ดูข้อมูลทะเบียนประวัติ"
-        @click="onclickViewinfo(profileId)"
-      />
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <div class="row col-12 q-pa-md">
-      <div class="col-12 row bg-white q-col-gutter-md">
-        <div class="col-xs-3 col-sm-2 col-md-1 row">
-          <q-img :src="avatar" v-if="avatar !== ''" />
-          <q-img src="@/assets/avatar_user.jpg" v-else />
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12 q-pl-md">
-            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
-            <div class="col-12 text-detail">
-              {{ title.positionTypeOld }}
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">ระดับ</div>
-            <div class="col-12 text-detail">
-              {{ title.positionLevelOld }}
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">สังกัด</div>
-            <div class="col-12 text-detail">
-              {{ title.organizationPositionOld }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </q-card>
+  <CardProfile :data="dataProfile as DataProfile" />
 
   <q-card bordered class="row col-12 text-dark q-mt-sm">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
diff --git a/src/modules/05_placement/components/AppointEmployee/Dialogbody.vue b/src/modules/05_placement/components/AppointEmployee/Dialogbody.vue
index 5cb768b82..9552a83ad 100644
--- a/src/modules/05_placement/components/AppointEmployee/Dialogbody.vue
+++ b/src/modules/05_placement/components/AppointEmployee/Dialogbody.vue
@@ -9,8 +9,13 @@ import DialogHeader from "@/modules/05_placement/components/AppointMent/DialogHe
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+
+import { useTransferDataStore } from "@/modules/05_placement/store";
+const storeFn = useTransferDataStore();
+const { statusText } = storeFn;
+
 const mixin = useCounterMixin();
-const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
+const { showLoader, success, messageError, dialogConfirm, hideLoader ,date2Thai} = mixin;
 
 const $q = useQuasar();
 const selected = ref<[]>([]);
@@ -35,7 +40,7 @@ const visibleColumns2 = ref<string[]>([
   "citizenId",
   "fullname",
   "organizationName",
-  "birthday",
+  "dateOfBirth",
 ]);
 const columns2 = ref<QTableProps["columns"]>([
   {
@@ -68,7 +73,7 @@ const columns2 = ref<QTableProps["columns"]>([
   {
     name: "organizationName",
     align: "left",
-    label: "หน่วยงานที่รับการปรับระดับชั้นงาน",
+    label: "หน่วยงานที่รับการแต่งตั้ง-เลื่อน-ย้าย",
     sortable: true,
     field: "organizationName",
     headerStyle: "font-size: 14px",
@@ -77,11 +82,11 @@ const columns2 = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "birthday",
+    name: "dateOfBirth",
     align: "left",
     label: "วัน/เดือน/ปี เกิด",
     sortable: true,
-    field: "birthday",
+    field: "dateOfBirth",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -115,7 +120,7 @@ const createdAppoint = async () => {
   let pId: string[] = [];
   let Type = props.type as string;
   selected.value.forEach((e: UserData) => {
-    pId.push(e.personalId);
+    pId.push(e.id);
   });
   let data = {
     id: pId,
@@ -228,7 +233,7 @@ watchEffect(() => {
           </template>
           <template v-slot:body="props">
             <q-tr :props="props" class="cursor-pointer">
-              <q-td>
+              <q-td auto-width>
                 <q-checkbox
                   keep-color
                   color="primary"
@@ -236,59 +241,64 @@ watchEffect(() => {
                   v-model="props.selected"
                 />
               </q-td>
-              <q-td key="no" :props="props">
-                {{ props.rowIndex + 1 }}
-              </q-td>
-              <q-td key="citizenId" :props="props">
-                {{ props.row.citizenId }}
-              </q-td>
-              <q-td key="fullname" :props="props">
-                {{ props.row.fullname }}
-              </q-td>
-              <q-td key="organizationName" :props="props">
-                {{ props.row.orgName !== null ? props.row.orgName : "-" }}
-                {{
-                  props.row.organizationShortName !== null
-                    ? `(${props.row.organizationShortName})`
-                    : ""
-                }}
-                <!-- <div
-                  v-if="
-                    props.row.orgName !== null ||
-                    props.row.positionPath !== null
-                  "
-                >
+              <q-td
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+              >
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <div v-else-if="col.name == 'fullname'">
+                  {{
+                    props.row.firstName
+                      ? `${props.row.prefix ?? ""}${
+                          props.row.firstName ?? ""
+                        } ${props.row.lastName ?? ""}`
+                      : "-"
+                  }}
+                </div>
+
+                <!-- <div v-else-if="col.name == 'status'">
+                  {{ props.row.status ? statusText(props.row.status) : "-" }}
+                </div> -->
+                <div v-else-if="col.name == 'dateOfBirth'">
+                  {{
+                    props.row.dateOfBirth
+                      ? date2Thai(props.row.dateOfBirth)
+                      : "-"
+                  }}
+                </div>
+                <div v-else-if="col.name == 'organizationName'">
                   <div class="col-4">
                     <div class="text-weight-medium">
-                      {{ props.row.orgName !== null ? props.row.orgName : "-" }}
+                      {{ props.row.root !== null ? props.row.root : "-" }}
                       {{
-                        props.row.organizationShortName !== null
-                          ? `(${props.row.organizationShortName})`
+                        props.row.rootShortName !== null
+                          ? `(${props.row.rootShortName})`
                           : ""
                       }}
                     </div>
                     <div class="text-weight-light">
                       {{
-                        props.row.positionPath !== null
-                          ? props.row.positionPath
-                          : "-"
+                        props.row.nodeName !== null ? props.row.nodeName : ""
                       }}
                       {{
-                        props.row.positionNumber !== null
-                          ? `(${props.row.positionNumber})`
+                        props.row.nodeShortName !== null
+                          ? `(${props.row.nodeShortName}${props.row.posMasterNo})`
                           : ""
                       }}
                     </div>
                   </div>
                 </div>
+                <div v-else-if="col.name == 'createdAt'">
+                  {{
+                    props.row.createdAt ? date2Thai(props.row.createdAt) : "-"
+                  }}
+                </div>
                 <div v-else>
-                  <div class="col-4">
-                    <div class="text-weight-medium">-</div>
-                  </div>
-                </div> -->
-              </q-td>
-              <q-td key="birthday" :props="props">
-                {{ props.row.birthday }}
+                  {{ col.value ? col.value : "-" }}
+                </div>
               </q-td>
             </q-tr>
           </template>
diff --git a/src/modules/05_placement/components/AppointEmployee/Main.vue b/src/modules/05_placement/components/AppointEmployee/Main.vue
index 5cc4c5b6e..053cc0d8d 100644
--- a/src/modules/05_placement/components/AppointEmployee/Main.vue
+++ b/src/modules/05_placement/components/AppointEmployee/Main.vue
@@ -17,6 +17,13 @@ import type { OpType } from "@/modules/05_placement/interface/response/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import DialogOrgSelectEmployee from "@/components/Dialogs/DialogOrgSelectEmployee.vue";
+
+const posType = ref<string>("");
+const posLevel = ref<string>("");
+const position = ref<string>("");
+const dataRows = ref<any[]>([]);
+
 const $q = useQuasar();
 const modal = ref<boolean>(false);
 const storeFn = useTransferDataStore();
@@ -205,7 +212,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "organizationName",
     align: "left",
-    label: "หน่วยงานที่รับการปรับระดับชั้นงาน",
+    label: "หน่วยงานที่รับการแต่งตั้ง-เลื่อน-ย้าย",
     sortable: true,
     field: "organizationName",
     headerStyle: "font-size: 14px",
@@ -252,29 +259,31 @@ const fecthlistappointment = async () => {
     .then((res) => {
       let response = res.data.result;
       listRecevice.value = response;
-      rows.value = response.map((e: resData) => ({
-        personalId: e.id,
-        citizenId: e.citizenId,
-        fullname: e.prefix + e.firstname + "  " + e.lastname,
-        organizationName: e.organizationName + " " + e.organizationShortName,
-        orgName: e.organizationName,
-        organizationShortName: e.organizationShortName,
-        status: statusText(e.status),
-        createdAt: date2Thai(e.createdAt),
-        birthday: e.dateOfBirth == null ? "-" : date2Thai(e.dateOfBirth),
-        educationOld: e.educationOld,
-        organizationPositionOld: e.organizationPositionOld,
-        positionTypeOld: e.positionTypeOld,
-        positionLevelOld: e.positionLevelOld,
-        positionNumberOld: e.positionNumberOld,
-        salary: e.salary,
-        positionDate: e.positionDate,
-      }));
+      rows.value = response
+      // rows.value = response.map((e: resData) => ({
+      //   personalId: e.id,
+      //   citizenId: e.citizenId,
+      //   fullname: e.prefix + e.firstname + "  " + e.lastname,
+      //   organizationName: e.organizationName + " " + e.organizationShortName,
+      //   orgName: e.organizationName,
+      //   organizationShortName: e.organizationShortName,
+      //   status: statusText(e.status),
+      //   createdAt: date2Thai(e.createdAt),
+      //   birthday: e.dateOfBirth == null ? "-" : date2Thai(e.dateOfBirth),
+      //   educationOld: e.educationOld,
+      //   organizationPositionOld: e.organizationPositionOld,
+      //   positionTypeOld: e.positionTypeOld,
+      //   positionLevelOld: e.positionLevelOld,
+      //   positionNumberOld: e.positionNumberOld,
+      //   salary: e.salary,
+      //   positionDate: e.positionDate,
+      // }));
+
       rows2.value = rows.value.filter(
-        (e: orgFilter) =>
-          e.orgName !== null &&
-          e.status !== "ส่งรายชื่อไปออกคำสั่ง" &&
-          e.status !== "ออกคำสั่งเสร็จแล้ว" &&
+        (e: any) =>
+          e.root !== null &&
+          e.status !== "REPORT" &&
+          e.status !== "DONE" &&
           e.educationOld &&
           e.organizationPositionOld &&
           e.positionTypeOld &&
@@ -474,6 +483,54 @@ const savePosition = async () => {
 //     id.value = "";
 //   }
 // };
+
+
+
+
+function openModalTree(data:any){
+  modalTree.value = true
+
+  personalId.value = data.id;
+  dataRows.value = data;
+  posType.value = data.posTypeId;
+  posLevel.value = data.posLevelId;
+  position.value = data.positionName;
+}
+
+function onSave(data: any) {
+  console.log("not save", data);
+  const dataAppoint = {
+    // personalId: data.personalId,
+    node: data.node,
+    nodeId: data.nodeId,
+    orgRevisionId: data.orgRevisionId,
+    positionId: data.positionId,
+    posMasterNo: data.posMasterNo,
+    positionName: data.positionName,
+    posTypeId: data.posTypeId,
+    posTypeName: data.posTypeName,
+    posLevelId: data.posLevelId,
+    posLevelName: data.posLevelName,
+    reportingDate: data.reportingDate,
+    posmasterId: data.posmasterId,
+  };
+
+  showLoader();
+  http
+    .put(config.API.appointmentPosition(personalId.value), dataAppoint)
+    .then((res) => {
+      modalTree.value = false;
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      fecthlistappointment();
+      hideLoader();
+    });
+}
+
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -554,76 +611,64 @@ const savePosition = async () => {
             <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
                 <q-td
-                  key="no"
+                  v-for="col in props.cols"
+                  :key="col.name"
                   :props="props"
-                  @click="nextPage(props.row.personalId)"
+                  @click="nextPage(props.row.id)"
                 >
-                  {{ props.rowIndex + 1 }}
-                </q-td>
-                <q-td
-                  key="citizenId"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
-                  {{ props.row.citizenId }}
-                </q-td>
-                <q-td
-                  key="fullname"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
-                  {{ props.row.fullname }}
-                </q-td>
-                <q-td
-                  key="organizationName"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
-                  <div
-                    v-if="
-                      props.row.orgName !== null ||
-                      props.row.positionPath !== null
-                    "
-                  >
+                  <div v-if="col.name == 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+                  <div v-else-if="col.name == 'fullname'">
+                    {{
+                      props.row.firstName
+                        ? `${props.row.prefix ?? ""}${
+                            props.row.firstName ?? ""
+                          } ${props.row.lastName ?? ""}`
+                        : "-"
+                    }}
+                  </div>
+
+                  <div v-else-if="col.name == 'status'">
+                    {{ props.row.status ? statusText(props.row.status) : "-" }}
+                  </div>
+                  <div v-else-if="col.name == 'dateOfBirth'">
+                    {{
+                      props.row.dateOfBirth
+                        ? date2Thai(props.row.dateOfBirth)
+                        : "-"
+                    }}
+                  </div>
+                  <div v-else-if="col.name == 'organizationName'">
                     <div class="col-4">
                       <div class="text-weight-medium">
+                        {{ props.row.root !== null ? props.row.root : "-" }}
                         {{
-                          props.row.orgName !== null ? props.row.orgName : "-"
+                          props.row.rootShortName !== null
+                            ? `(${props.row.rootShortName})`
+                            : ""
+                        }}
+                      </div>
+                      <div class="text-weight-light">
+                        {{
+                          props.row.nodeName !== null ? props.row.nodeName : ""
                         }}
                         {{
-                          props.row.organizationShortName !== null
-                            ? `(${props.row.organizationShortName})`
+                          props.row.nodeShortName !== null
+                            ? `(${props.row.nodeShortName}${props.row.posMasterNo})`
                             : ""
                         }}
                       </div>
                     </div>
                   </div>
-                  <div v-else>
-                    <div class="col-4">
-                      <div class="text-weight-medium">-</div>
-                    </div>
+                  <div v-else-if="col.name == 'createdAt'">
+                    {{
+                      props.row.createdAt ? date2Thai(props.row.createdAt) : "-"
+                    }}
+                  </div>
+                  <div v-else>
+                    {{ col.value ? col.value : "-" }}
                   </div>
-                </q-td>
-                <q-td
-                  key="birthday"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
-                  {{ props.row.birthday }}
-                </q-td>
-                <q-td
-                  key="createdAt"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
-                  {{ props.row.createdAt }}
-                </q-td>
-                <q-td
-                  key="status"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
-                  {{ props.row.status }}
                 </q-td>
                 <q-td auto-width>
                   <q-btn
@@ -643,7 +688,7 @@ const savePosition = async () => {
                       transition-hide="jump-up"
                     >
                       <q-list dense style="min-width: 200px">
-                        <q-item
+                        <!-- <q-item
                           clickable
                           v-close-popup
                           @click="openModalEmployee(props.row.personalId)"
@@ -660,11 +705,29 @@ const savePosition = async () => {
                             />
                           </q-item-section>
                           <q-item-section>กำหนดตำแหน่ง</q-item-section>
+                        </q-item> -->
+                        <q-item
+                          clickable
+                          v-close-popup
+                          @click="openModalTree(props.row)"
+                        >
+                          <q-item-section
+                            style="min-width: 0px"
+                            avatar
+                            class="q-py-sm"
+                          >
+                            <q-icon
+                              color="primary"
+                              size="xs"
+                              name="mdi-bookmark-outline"
+                            />
+                          </q-item-section>
+                          <q-item-section>หน่วยงานที่รับการปรับระดับชั้นงาน</q-item-section>
                         </q-item>
                         <q-item
                           clickable
                           v-close-popup
-                          @click="clickDelete(props.row.personalId)"
+                          @click="clickDelete(props.row.id)"
                         >
                           <q-item-section
                             style="min-width: 0px"
@@ -783,5 +846,16 @@ const savePosition = async () => {
     :personal="personal"
     :personalId="personalId"
   /> -->
+
+  <DialogOrgSelectEmployee
+    :title="`เลือกหน่วยงานที่รับการปรับระดับชั้นงาน`"
+    v-model:modal="modalTree"
+    :posType="posType"
+    :posLevel="posLevel"
+    :position="position"
+    :dataRows="dataRows"
+    :onSubmit="onSave"
+  />
+
 </template>
 <style scoped lang="scss"></style>
diff --git a/src/modules/05_placement/components/PersonalDetail/Detail.vue b/src/modules/05_placement/components/PersonalDetail/Detail.vue
index 865eec87f..1185f776d 100644
--- a/src/modules/05_placement/components/PersonalDetail/Detail.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Detail.vue
@@ -23,6 +23,7 @@ import Document from "@/modules/05_placement/components/PersonalDetail/Informati
 import {
   AddressDataDefualt,
   FamilyDataDefualt,
+  
 } from "@/modules/05_placement/interface/index/Main";
 
 import type {
@@ -32,6 +33,8 @@ import type {
   Family,
   Address,
   Certificate,
+  optionData,
+  InformationOps
 } from "@/modules/05_placement/interface/index/Main";
 
 import type { Information } from "@/modules/05_placement/components/PersonalDetail/profileType";
@@ -99,11 +102,7 @@ const FamilyData = ref<Family>(FamilyDataDefualt);
 const AddressData = ref<Address>(AddressDataDefualt);
 const CertificateData = ref<Certificate[]>([]);
 
-onMounted(async () => {
-  //   await checkProfileData();
-  await fetchData();
-  await changeTab("information");
-});
+
 
 const guidCheck = (id: string) => {
   if (id == "00000000-0000-0000-0000-000000000000") {
@@ -112,9 +111,40 @@ const guidCheck = (id: string) => {
   return id;
 };
 
+const Ops = ref<InformationOps>({
+  prefixOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+});
+
+const OpsFilter = ref<InformationOps>({
+  prefixOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+});
+
 const fetchData = async () => {
   storePersonal.loading = false;
-  showLoader();
   await http
     .get(config.API.placementPersonalId(examId.value))
     .then((res: any) => {
@@ -235,10 +265,218 @@ const fetchData = async () => {
     .catch((e: any) => {
       messageError($q, e);
     })
+    .finally(() => {
+    });
+};
+
+const fetchDataByType = async (type: string) => {
+  // storePersonal.loading = false;
+  showLoader();
+  await http
+    .get(config.API.placementPersonalId(examId.value))
+    .then((res: any) => {
+      const data = res.data.result;
+      storePersonal.fecthDataInformation(data);
+      personalData.value.fullName = data.fullName;
+      personalData.value.id = data.personalId;
+
+      if (type == "Information") {
+        InformationData.value.idCard = data.idCard;
+        InformationData.value.fullName = data.fullName;
+        InformationData.value.firstname = data.firstname;
+        InformationData.value.lastname = data.lastname;
+        InformationData.value.nationality = data.nationality;
+        InformationData.value.race = data.race;
+        InformationData.value.genderId = guidCheck(data.gender) ?? "";
+        InformationData.value.prefixId = guidCheck(data.prefix) ?? "";
+        InformationData.value.relationshipId =
+          guidCheck(data.relationship) ?? "";
+        InformationData.value.religionId = guidCheck(data.religion) ?? "";
+        InformationData.value.bloodGroupId = guidCheck(data.bloodGroup) ?? "";
+        InformationData.value.dateOfBirth = new Date(data.dateOfBirth);
+        InformationData.value.age = data.age;
+        InformationData.value.telephone = data.telephone;
+      } else if (type == "Address") {
+        AddressData.value.registAddress = data.registAddress ?? "";
+        AddressData.value.currentAddress = data.currentAddress ?? "";
+        AddressData.value.registSame = data.registSame ? "1" : "0";
+        AddressData.value.registSubDistrict = data.registSubDistrict ?? "";
+        AddressData.value.registSubDistrictId =
+          guidCheck(data.registSubDistrictId) ?? "";
+        AddressData.value.registZipCode = data.registZipCode ?? "";
+        AddressData.value.registDistrict = data.registDistrict ?? "";
+        AddressData.value.registDistrictId =
+          guidCheck(data.registDistrictId) ?? "";
+        AddressData.value.registProvince = data.registProvince ?? "";
+        AddressData.value.registProvinceId =
+          guidCheck(data.registProvinceId) ?? "";
+        AddressData.value.currentSubDistrict = data.currentSubDistrict ?? "";
+        AddressData.value.currentSubDistrictId =
+          guidCheck(data.currentSubDistrictId) ?? "";
+        AddressData.value.currentZipCode = data.currentZipCode ?? "";
+        AddressData.value.currentDistrict = data.currentDistrict ?? "";
+        AddressData.value.currentDistrictId =
+          guidCheck(data.currentDistrictId) ?? "";
+        AddressData.value.currentProvince = data.currentProvince ?? "";
+        AddressData.value.currentProvinceId =
+          guidCheck(data.currentProvinceId) ?? "";
+      } else if (type == "Family") {
+        FamilyData.value.couple = data.couple ? "1" : "0";
+        FamilyData.value.marryPrefix = data.marryPrefix ?? "";
+        FamilyData.value.marryPrefixId = guidCheck(data.marryPrefix) ?? "";
+        FamilyData.value.marryFirstName = data.marryFirstName ?? "";
+        FamilyData.value.marryLastName = data.marryLastName ?? "";
+        FamilyData.value.marryOccupation = data.marryOccupation ?? "";
+        FamilyData.value.fatherPrefix = data.fatherPrefix ?? "";
+        FamilyData.value.fatherPrefixId = guidCheck(data.fatherPrefix) ?? "";
+        FamilyData.value.fatherFirstName = data.fatherFirstName ?? "";
+        FamilyData.value.fatherLastName = data.fatherLastName ?? "";
+        FamilyData.value.fatherOccupation = data.fatherOccupation ?? "";
+        FamilyData.value.motherPrefix = data.motherPrefix ?? "";
+        FamilyData.value.motherPrefixId = guidCheck(data.motherPrefix) ?? "";
+        FamilyData.value.motherFirstName = data.motherFirstName ?? "";
+        FamilyData.value.motherLastName = data.motherLastName ?? "";
+        FamilyData.value.motherOccupation = data.motherOccupation ?? "";
+      } else if (type == "Exam") {
+        ExamData.value.pointA = data.pointA;
+        ExamData.value.pointB = data.pointB;
+        ExamData.value.pointC = data.pointC;
+        ExamData.value.point = data.point;
+        ExamData.value.pointTotalA = data.pointTotalA;
+        ExamData.value.pointTotalB = data.pointTotalB;
+        ExamData.value.pointTotalC = data.pointTotalC;
+        ExamData.value.pointTotal = data.pointTotal;
+        ExamData.value.examNumber = data.examNumber;
+        ExamData.value.examRound = data.examRound;
+        ExamData.value.pass = data.pass;
+      }
+
+      QualificationData.value = data.isProperty;
+
+      let listRow: Education[] = [];
+      data.education.map((row: any) => {
+        listRow.push({
+          id: guidCheck(row.id) ?? "",
+          educationLevel: row.educationLevel ?? "",
+          educationLevelId: guidCheck(row.educationLevelId) ?? "",
+          institute: row.institute ?? "",
+          degree: row.degree ?? "",
+          field: row.field ?? "",
+          gpa: row.gpa ?? "",
+          country: row.country ?? "",
+          duration: row.duration ?? "",
+          other: row.other ?? "",
+          fundName: row.fundName ?? "",
+          durationYear: row.durationYear ?? 0,
+          finishDate: row.finishDate ?? new Date(),
+          isDate: row.isDate ? "true" : "false",
+          startDate: row.startDate ? new Date(row.startDate) : new Date(),
+          endDate: row.endDate ? new Date(row.endDate) : new Date(),
+          positionPath: row.positionPath ?? "",
+          isEducation: row.isEducation ? true : false,
+        });
+      });
+      EducationData.value = listRow;
+
+      let listCert: Certificate[] = [];
+
+      data.certificates.map((row: any) => {
+        listCert.push({
+          id: guidCheck(row.id) ?? "",
+          certificateNo: guidCheck(row.certificateNo) ?? "",
+          issuer: row.issuer ?? "",
+          issueDate: new Date(row.issueDate) ?? new Date(),
+          expireDate: new Date(row.expireDate) ?? new Date(),
+          certificateType: row.certificateType ?? "",
+        });
+      });
+      CertificateData.value = listCert;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
     .finally(() => {
       hideLoader();
     });
 };
+
+/**
+ * get รายการ ข้อมูลเกี่ยวกับบุคคล
+ */
+ const fetchPerson = async () => {
+  await http
+    .get(config.API.profileNewMetaMain)
+    .then((res) => {
+      const data = res.data.result;
+
+      //กรุ๊ปเลือด
+      let optionbloodGroups: optionData[] = [];
+      data.bloodGroups.map((r: any) => {
+        optionbloodGroups.push({
+          id: r.name ?? "",
+          name: r.name ?? "",
+        });
+      });
+      Ops.value.bloodOps = optionbloodGroups;
+      OpsFilter.value.bloodOps = optionbloodGroups;
+
+      //เพศ
+      let optiongenders: optionData[] = [];
+      data.genders.map((r: any) => {
+        optiongenders.push({
+          id: r.name ?? "",
+          name: r.name ?? "",
+        });
+      });
+      Ops.value.genderOps = optiongenders;
+      OpsFilter.value.genderOps = optiongenders;
+
+      //คำนำหน้าชื่อ
+      let optionprefixs: optionData[] = [];
+      data.prefixs.map((r: any) => {
+        optionprefixs.push({
+          id: r.name ?? "",
+          name: r.name ?? "",
+        });
+      });
+      Ops.value.prefixOps = optionprefixs;
+      OpsFilter.value.prefixOps = optionprefixs;
+
+      //สถานภาพ
+      let optionrelationships: optionData[] = [];
+      data.relationships.map((r: any) => {
+        optionrelationships.push({
+          id: r.name ?? "",
+          name: r.name ?? "",
+        });
+      });
+      Ops.value.statusOps = optionrelationships;
+      OpsFilter.value.statusOps = optionrelationships;
+
+      //ศาสนา
+      let optionreligions: optionData[] = [];
+      data.religions.map((r: any) => {
+        optionreligions.push({
+          id: r.name ?? "",
+          name: r.name ?? "",
+        });
+      });
+      Ops.value.religionOps = optionreligions;
+      OpsFilter.value.religionOps = optionreligions;
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+    });
+};
+
+onMounted(async () => {
+  //   await checkProfileData();
+
+  await fetchData();
+  await changeTab("information");
+  await fetchPerson()
+});
+
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row q-pb-sm">
@@ -262,13 +500,15 @@ const fetchData = async () => {
         <Informationvue
           v-model:statusEdit="statusEdit"
           v-model:data="InformationData"
-          :fetch="fetchData"
+          :fetch="fetchDataByType"
+          :Ops="Ops"
+          :OpsFilter="OpsFilter"
         />
         <div class="col-12 q-px-md"><q-separator size="4px" /></div>
         <Addressvue
           v-model:statusEdit="statusEdit"
           v-model:data="AddressData"
-          :fetch="fetchData"
+          :fetch="fetchDataByType"
         />
       </div>
 
@@ -277,7 +517,9 @@ const fetchData = async () => {
         <Familyvue
           v-model:statusEdit="statusEdit"
           v-model:data="FamilyData"
-          :fetch="fetchData"
+          :fetch="fetchDataByType"
+          :Ops="Ops"
+          :OpsFilter="OpsFilter"
         />
       </div>
 
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Address.vue b/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
index 37431453e..9addb031c 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
@@ -52,6 +52,7 @@ const {
   dialogConfirm,
 } = mixin;
 const edit = ref<boolean>(false);
+const onEdit = ref<boolean>(false);
 const addressData = ref<AddressType>(props.data);
 const myform = ref<any>();
 const Ops = ref<AddressOps>({
@@ -133,9 +134,21 @@ const filterSelector = (val: any, update: Function, refData: string) => {
 
 const refreshData = async () => {
   myform.value.reset();
-  // await props.fetch();
-  await fetchProvince();
-  await getNewData();
+  if (onEdit.value) {
+    dialogConfirm(
+      $q,
+      async () => {
+        emit("update:statusEdit", false);
+        await props.fetch("Address");
+        edit.value = false;
+        onEdit.value = false;
+      },
+      `ข้อมูลมีการแก้ไข`,
+      `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`
+    );
+  } else {
+    edit.value = false;
+  }
 };
 
 const getNewData = async () => {
@@ -145,7 +158,7 @@ const getNewData = async () => {
 
 // บันทึกข้อมูล
 const editData = async () => {
-  dialogConfirm($q, async() => {
+  dialogConfirm($q, async () => {
     const body = {
       registrationSame: addressData.value.registSame == "1",
       registrationAddress: addressData.value.registAddress,
@@ -189,8 +202,7 @@ const editData = async () => {
       .finally(async () => {
         edit.value = false;
         emit("update:statusEdit", false);
-        await getNewData();
-        await props.fetch();
+        await props.fetch("Address");
         // await fetchProvince();
       });
   });
@@ -326,7 +338,7 @@ const fetchDistrict = async (id: string | null, position: string) => {
   if (id != null && id != "") {
     showLoader();
     await http
-      .get(config.API.orgProvince+`/${id}`)
+      .get(config.API.orgProvince + `/${id}`)
       .then(async (res) => {
         const data = res.data.result.districts;
         let option: optionData[] = [];
@@ -372,7 +384,7 @@ const fetchSubDistrict = async (id: string | null, position: string) => {
   if (id != null && id != "") {
     showLoader();
     await http
-      .get(config.API.orgDistrict+`/${id}`)
+      .get(config.API.orgDistrict + `/${id}`)
       .then(async (res) => {
         const data = res.data.result.subDistricts;
         let option: zipCodeOption[] = [];
@@ -420,7 +432,6 @@ const fetchSubDistrict = async (id: string | null, position: string) => {
 const changeBtn = async () => {
   if (edit.value == true) {
     if (props.statusEdit === true) {
-      edit.value = false;
       props.notiNoEdit();
     } else {
       emit("update:statusEdit", true);
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Family.vue b/src/modules/05_placement/components/PersonalDetail/Information/Family.vue
index dc5a1ff56..4927a6853 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Family.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Family.vue
@@ -29,6 +29,12 @@ const props = defineProps({
     type: Object as PropType<Family>,
     default: FamilyDataDefualt,
   },
+  Ops: {
+    type: Object as PropType<any>,
+  },
+  OpsFilter: {
+    type: Object as PropType<any>,
+  },
 });
 const emit = defineEmits(["update:statusEdit"]);
 
@@ -45,26 +51,18 @@ const {
   dialogConfirm,
 } = mixin;
 const edit = ref<boolean>(false);
+const onEdit = ref<boolean>(false);
 
 const myform = ref<QForm | null>(null);
 const familyData = ref<Family>(props.data);
 
-const Ops = ref<any>({
-  prefixOps: [],
-});
-const OpsFilter = ref<any>({
-  prefixOps: [],
-});
-
 onMounted(async () => {
-  await fetchPrefix();
-
   emit("update:statusEdit", false);
 });
 
 const filterSelector = (val: any, update: Function, refData: string) => {
   update(() => {
-    Ops.value[`${refData}`] = OpsFilter.value[`${refData}`].filter(
+    props.Ops[`${refData}`] = props.OpsFilter[`${refData}`].filter(
       (v: DataOption) => v.name.indexOf(val) > -1
     );
   });
@@ -74,29 +72,21 @@ const refreshData = async () => {
   if (myform.value != null) {
     myform.value.reset();
   }
-  emit("update:statusEdit", false);
-  await props.fetch();
-};
-
-const fetchPrefix = async () => {
-  showLoader();
-  await http
-    .get(config.API.profileNewMetaMain)
-    .then((res) => {
-      const data = res.data.result;
-      let option: DataOption[] = [];
-      data.prefixs.map((r: any) => {
-        option.push({ id: r.name.toString(), name: r.name.toString() });
-      });
-      Ops.value.prefixOps = option;
-      OpsFilter.value.prefixOps = option;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+  if (onEdit.value) {
+    dialogConfirm(
+      $q,
+      async () => {
+        emit("update:statusEdit", false);
+        await props.fetch("Family");
+        edit.value = false;
+        onEdit.value = false;
+      },
+      `ข้อมูลมีการแก้ไข`,
+      `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`
+    );
+  } else {
+    edit.value = false;
+  }
 };
 
 const editData = async () => {
@@ -153,7 +143,7 @@ const editData = async () => {
         hideLoader();
         edit.value = false;
         emit("update:statusEdit", false);
-        await props.fetch();
+        await props.fetch("Family");
       });
   });
 };
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Information.vue b/src/modules/05_placement/components/PersonalDetail/Information/Information.vue
index 6b4c0d7b5..1d1b5171e 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Information.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Information.vue
@@ -9,10 +9,6 @@ import type {
 } from "@/modules/05_placement/components/PersonalDetail/profileType";
 import { defaultInformation } from "@/modules/05_placement/components/PersonalDetail/profileType";
 
-import type {
-  InformationOps,
-  optionData,
-} from "@/modules/05_placement/interface/index/Main";
 import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
 
 import http from "@/plugins/http";
@@ -40,6 +36,12 @@ const props = defineProps({
     type: Object as PropType<Information>,
     default: defaultInformation,
   },
+  Ops: {
+    type: Object as PropType<any>,
+  },
+  OpsFilter: {
+    type: Object as PropType<any>,
+  },
 });
 const emit = defineEmits(["update:statusEdit"]);
 
@@ -63,39 +65,8 @@ const edit = ref<boolean>(false);
 const informaData = ref<Information>(props.data);
 const age = ref<boolean>(true);
 const myform = ref<QForm | null>(null);
-const Ops = ref<InformationOps>({
-  prefixOps: [],
-  genderOps: [],
-  bloodOps: [],
-  statusOps: [],
-  religionOps: [],
-  employeeClassOps: [
-    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
-    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
-  ],
-  employeeTypeOps: [
-    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
-    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
-  ],
-});
-const OpsFilter = ref<InformationOps>({
-  prefixOps: [],
-  genderOps: [],
-  bloodOps: [],
-  statusOps: [],
-  religionOps: [],
-  employeeClassOps: [
-    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
-    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
-  ],
-  employeeTypeOps: [
-    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
-    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
-  ],
-});
 
 onMounted(async () => {
-  await fetchPerson();
   emit("update:statusEdit", false);
 });
 
@@ -103,127 +74,72 @@ const onCancel = async () => {
   if (myform.value != null) {
     myform.value.reset();
   }
-  await props.fetch();
-};
+  if (onEdit.value) {
+    dialogConfirm(
+      $q,
+      async () => {
+        emit("update:statusEdit", false);
+        await props.fetch("Information");
+        edit.value = false;
+        onEdit.value = false;
+      },
+      `ข้อมูลมีการแก้ไข`,
+      `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`
+    );
 
-/**
- * get รายการ ข้อมูลเกี่ยวกับบุคคล
- */
-const fetchPerson = async () => {
-  showLoader();
-  await http
-    .get(config.API.profileNewMetaMain)
-    .then((res) => {
-      const data = res.data.result;
-
-      //กรุ๊ปเลือด
-      let optionbloodGroups: optionData[] = [];
-      data.bloodGroups.map((r: any) => {
-        optionbloodGroups.push({
-          id: r.name ?? "",
-          name: r.name ?? "",
-        });
-      });
-      Ops.value.bloodOps = optionbloodGroups;
-      OpsFilter.value.bloodOps = optionbloodGroups;
-
-      //เพศ
-      let optiongenders: optionData[] = [];
-      data.genders.map((r: any) => {
-        optiongenders.push({
-          id: r.name ?? "",
-          name: r.name ?? "",
-        });
-      });
-      Ops.value.genderOps = optiongenders;
-      OpsFilter.value.genderOps = optiongenders;
-
-      //คำนำหน้าชื่อ
-      let optionprefixs: optionData[] = [];
-      data.prefixs.map((r: any) => {
-        optionprefixs.push({
-          id: r.name ?? "",
-          name: r.name ?? "",
-        });
-      });
-      Ops.value.prefixOps = optionprefixs;
-      OpsFilter.value.prefixOps = optionprefixs;
-
-      //สถานภาพ
-      let optionrelationships: optionData[] = [];
-      data.relationships.map((r: any) => {
-        optionrelationships.push({
-          id: r.name ?? "",
-          name: r.name ?? "",
-        });
-      });
-      Ops.value.statusOps = optionrelationships;
-      OpsFilter.value.statusOps = optionrelationships;
-
-      //ศาสนา
-      let optionreligions: optionData[] = [];
-      data.religions.map((r: any) => {
-        optionreligions.push({
-          id: r.name ?? "",
-          name: r.name ?? "",
-        });
-      });
-      Ops.value.religionOps = optionreligions;
-      OpsFilter.value.religionOps = optionreligions;
-    })
-    .catch((e: any) => {})
-    .finally(() => {
-      hideLoader();
-    });
+    
+  } else {
+    edit.value = false;
+  }
 };
 
 const filterSelector = (val: any, update: Function, refData: string) => {
   switch (refData) {
     case "prefixOps":
       update(() => {
-        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
+        props.Ops.prefixOps = props.OpsFilter.prefixOps.filter(
           (v: DataOption) => v.name.indexOf(val) > -1
         );
       });
       break;
     case "genderOps":
       update(() => {
-        Ops.value.genderOps = OpsFilter.value.genderOps.filter(
+        props.Ops.genderOps = props.OpsFilter.genderOps.filter(
           (v: DataOption) => v.name.indexOf(val) > -1
         );
       });
       break;
     case "bloodOps":
       update(() => {
-        Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
+        props.Ops.bloodOps = props.OpsFilter.bloodOps.filter(
           (v: DataOption) => v.name.indexOf(val) > -1
         );
       });
       break;
     case "statusOps":
       update(() => {
-        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
+        props.Ops.statusOps = props.OpsFilter.statusOps.filter(
           (v: DataOption) => v.name.indexOf(val) > -1
         );
       });
       break;
     case "religionOps":
       update(() => {
-        Ops.value.religionOps = OpsFilter.value.religionOps.filter(
+        props.Ops.religionOps = props.OpsFilter.religionOps.filter(
           (v: DataOption) => v.name.indexOf(val) > -1
         );
       });
       break;
     case "employeeClassOps":
       update(() => {
-        Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
+        props.Ops.employeeClassOps = props.OpsFilter.employeeClassOps.filter(
           (v: DataOption) => v.name.indexOf(val) > -1
         );
       });
       break;
     case "employeeTypeOps":
       update(() => {
-        Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
+        props.Ops.employeeTypeOps = props.OpsFilter.employeeTypeOps.filter(
           (v: DataOption) => v.name.indexOf(val) > -1
         );
       });
@@ -237,6 +153,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
 const handleDate = async (modelData: Date) => {
   informaData.value.dateOfBirth = modelData;
   await calRetire(modelData);
+  onEdit.value = true;
 };
 
 const calRetire = async (birth: Date) => {
@@ -299,7 +216,7 @@ const editData = async () => {
       .finally(async () => {
         edit.value = false;
         emit("update:statusEdit", false);
-        await props.fetch();
+        await props.fetch("Information");
         await changeBirth(informaData.value.dateOfBirth ?? new Date());
       });
   });
@@ -318,7 +235,6 @@ const saveData = async () => {
 const changeBtn = async () => {
   if (edit.value == true) {
     if (props.statusEdit === true) {
-      edit.value = false;
       props.notiNoEdit();
     } else {
       emit("update:statusEdit", true);
@@ -334,6 +250,11 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
+
+const onEdit = ref<boolean>(false);
+function checkEdit() {
+  onEdit.value = true;
+}
 </script>
 <template>
   <q-card flat bordered class="col-12 q-px-lg q-py-md no-border">
@@ -368,10 +289,12 @@ const getClass = (val: boolean) => {
             ]"
             label="เลขประจำตัวประชาชน"
             mask="#############"
+            @update:modelValue="checkEdit"
           />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <selector
+            @update:modelValue="checkEdit"
             :hide-dropdown-icon="!edit"
             hide-bottom-space
             :class="getClass(edit)"
@@ -408,6 +331,7 @@ const getClass = (val: boolean) => {
             v-model="informaData.firstname"
             :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
             :label="`${'ชื่อ'}`"
+            @update:modelValue="checkEdit"
           />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
@@ -422,6 +346,7 @@ const getClass = (val: boolean) => {
             v-model="informaData.lastname"
             :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
             :label="`${'นามสกุล'}`"
+            @update:modelValue="checkEdit"
           />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
@@ -486,6 +411,7 @@ const getClass = (val: boolean) => {
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <selector
+            @update:modelValue="checkEdit"
             :hide-dropdown-icon="!edit"
             hide-bottom-space
             :class="getClass(edit)"
@@ -511,6 +437,7 @@ const getClass = (val: boolean) => {
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <selector
+            @update:modelValue="checkEdit"
             :hide-dropdown-icon="!edit"
             hide-bottom-space
             :class="getClass(edit)"
@@ -536,6 +463,7 @@ const getClass = (val: boolean) => {
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <selector
+            @update:modelValue="checkEdit"
             :hide-dropdown-icon="!edit"
             hide-bottom-space
             :class="getClass(edit)"
@@ -561,6 +489,7 @@ const getClass = (val: boolean) => {
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
+            @update:modelValue="checkEdit"
             :class="getClass(edit)"
             hide-bottom-space
             :outlined="edit"
@@ -575,6 +504,7 @@ const getClass = (val: boolean) => {
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
+            @update:modelValue="checkEdit"
             :class="getClass(edit)"
             hide-bottom-space
             :outlined="edit"
@@ -589,6 +519,7 @@ const getClass = (val: boolean) => {
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <selector
+            @update:modelValue="checkEdit"
             :hide-dropdown-icon="!edit"
             hide-bottom-space
             :class="getClass(edit)"
@@ -614,6 +545,7 @@ const getClass = (val: boolean) => {
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
+            @update:modelValue="checkEdit"
             hide-bottom-space
             :outlined="edit"
             dense
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/top.vue b/src/modules/05_placement/components/PersonalDetail/Information/top.vue
index 65d200a89..cde69edac 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/top.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/top.vue
@@ -71,7 +71,6 @@ const historyClick = async () => {
 };
 
 const ClickCancel = () => {
-  updateEdit(!props.edit);
   props.cancel();
   props.changeBtn();
 };
diff --git a/src/modules/05_placement/components/PersonalDetail/Qualification.vue b/src/modules/05_placement/components/PersonalDetail/Qualification.vue
index 6ba5f8f09..b12e95f91 100644
--- a/src/modules/05_placement/components/PersonalDetail/Qualification.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Qualification.vue
@@ -77,29 +77,30 @@ const onCancel = async () => {
 };
 </script>
 <template>
-  <div class="row col-12 q-px-lg q-pt-lg q-pb-sm no-border">
-    <HeaderTop
-      v-model:edit="edit"
-      header="การคัดกรองคุณสมบัติ"
-      icon="mdi-account-search"
-      :save="saveData"
-      :history="false"
-      :changeBtn="changeBtn"
-      :disable="statusEdit"
-      :cancel="onCancel"
-    />
-  </div>
-  <div class="row q-px-lg">
-    <div v-for="item of props.data" :key="item.name" class="col-12 q-pt-sm">
-      <q-checkbox
-        size="xs"
-        v-model="item.value"
-        :label="item.name"
-        keep-color
-        color="gray-5"
-        :disable="!statusEdit"
+  <q-form ref="myform" greedy @submit.prevent @validation-success="saveData">
+    <div class="row col-12 q-px-lg q-pt-lg q-pb-sm no-border">
+      <HeaderTop
+        v-model:edit="edit"
+        header="การคัดกรองคุณสมบัติ"
+        icon="mdi-account-search"
+        :history="false"
+        :changeBtn="changeBtn"
+        :disable="statusEdit"
+        :cancel="onCancel"
       />
-      <q-separator />
     </div>
-  </div>
+    <div class="row q-px-lg">
+      <div v-for="item of props.data" :key="item.name" class="col-12 q-pt-sm">
+        <q-checkbox
+          size="xs"
+          v-model="item.value"
+          :label="item.name"
+          keep-color
+          color="gray-5"
+          :disable="!statusEdit"
+        />
+        <q-separator />
+      </div>
+    </div>
+  </q-form>
 </template>
diff --git a/src/modules/05_placement/interface/response/AppointMent.ts b/src/modules/05_placement/interface/response/AppointMent.ts
index daa190519..270156317 100644
--- a/src/modules/05_placement/interface/response/AppointMent.ts
+++ b/src/modules/05_placement/interface/response/AppointMent.ts
@@ -59,7 +59,7 @@ interface appointmentData {
 }
 
 interface UserData {
-  personalId: string;
+  id: string;
   citizenId: string;
   fullname: string;
   organizationName: string;