diff --git a/src/modules/05_placement/components/pass/DialogHeader.vue b/src/modules/05_placement/components/pass/DialogHeader.vue
index 17140c5d5..a20e917b0 100644
--- a/src/modules/05_placement/components/pass/DialogHeader.vue
+++ b/src/modules/05_placement/components/pass/DialogHeader.vue
@@ -11,16 +11,14 @@ const close = async () => {
 };
 </script>
 <template>
-  <q-toolbar class="header-main">
+  <q-toolbar class="q-py-md">
     <q-toolbar-title class="header-text">{{ title }}</q-toolbar-title>
     <q-btn icon="close" unelevated round dense @click="close" style="color: #ff8080; background-color: #ffdede" />
   </q-toolbar>
 </template>
 
 <style scoped lang="scss">
-.header-main {
-  padding: 16px 0px 16px 27px;
-}
+
 
 .header-text {
   font-size: 18px;
diff --git a/src/modules/05_placement/components/pass/Table.vue b/src/modules/05_placement/components/pass/Table.vue
index f7480b059..ca8b3c606 100644
--- a/src/modules/05_placement/components/pass/Table.vue
+++ b/src/modules/05_placement/components/pass/Table.vue
@@ -1,35 +1,257 @@
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import Table from "@/modules/05_placement/components/pass/TableView.vue";
 import { useQuasar, QForm } from "quasar";
 import type { TableName } from "@/modules/05_placement/interface/request/placement";
 import { usePlacementDataStore } from "@/modules/05_placement/store";
 import type { QTableProps } from "quasar";
+import type {
+  treeTab,
+  DataOption,
+} from "@/modules/05_placement/interface/index/Main";
 import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
 import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
 import DialogCard from "@/modules/05_placement/components/pass/TableDetail.vue";
 import { useCounterMixin } from "@/stores/mixin";
-
+import http from "@/plugins/http";
+import config from "@/app.config";
+const clickAction = ref<string>();
+const ocId = ref<string>();
+const posNoOptionsFilter = ref<DataOption[]>([]);
+const selected = ref<string>("");
+const posNoId = ref<string>();
+const amount = ref<number | null>(null);
+const search = ref<string>("");
+const positionSalaryAmount = ref<number | null>(null);
+const positionExecutiveId = ref<string>();
+const positionLevelId = ref<string>();
+const date = ref<Date>(new Date());
+const expanded = ref<string[]>([]);
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const editvisible = ref<boolean>(false);
 const myForm = ref<QForm | null>(null);
-const edit = ref<boolean>(true);
+const positionLineId = ref<string>();
+const positionId = ref<string>();
+const edit = ref<boolean>(false);
+const positionTypeId = ref<string>();
 const visibleColumns = ref<String[]>([]);
 const store = usePlacementDataStore();
 const filter = ref<string>("");
+const mouthSalaryAmount = ref<number | null>(null);
 const { placementData } = store;
+const positionPathSideId = ref<string>();
 const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
 const modal = ref<boolean>(false); //modal add detail
 const modal_right = ref<boolean>(false); //modal add detail
-
 const modalwaitInfo = ref<boolean>(false); //modal add detail
 const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
 const Name = ref<string>();
+const posNoOptions = ref<DataOption[]>([]);
+const nodesTree = ref<treeTab[]>([]);
+const salaryRef = ref<string>();
 const positionMasterUserNote = ref<string>();
+const refSelected = ref<DataOption | null>(null);
 const $q = useQuasar(); // show dialog
+const salaryClass = ref<string>();
+const positionOptions = ref<DataOption[]>([]);
+const positionLineOptions = ref<DataOption[]>([]);
+const positionSideOptions = ref<DataOption[]>([]);
+const positionTypeOptions = ref<DataOption[]>([]);
+const positionLevelOptions = ref<DataOption[]>([]);
+const positionExecutiveOptions = ref<DataOption[]>([]);
+const positionExecutiveSideOptions = ref<DataOption[]>([]);
+const positionOptionsFilter = ref<DataOption[]>([]);
+const positionLineOptionsFilter = ref<DataOption[]>([]);
+const positionSideOptionsFilter = ref<DataOption[]>([]);
+const positionTypeOptionsFilter = ref<DataOption[]>([]);
+const positionLevelOptionsFilter = ref<DataOption[]>([]);
+const positionExecutiveOptionsFilter = ref<DataOption[]>([]);
+const positionExecutiveSideOptionsFilter = ref<DataOption[]>([]);
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const files = ref<File[]>([]);
+
+const fetchPosition = async () => {
+  showLoader();
+  await http
+    .get(config.API.position)
+    .then((res) => {
+      const data = res.data.result;
+      let optionpositionpaths: DataOption[] = [];
+      data.positionPaths.map((r: any) => {
+        optionpositionpaths.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      positionOptions.value = optionpositionpaths;
+      positionOptionsFilter.value = optionpositionpaths;
+
+      let optionPositionPathSides: DataOption[] = [];
+      data.positionPathSides.map((r: any) => {
+        optionPositionPathSides.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      positionSideOptions.value = optionPositionPathSides;
+      positionSideOptionsFilter.value = optionPositionPathSides;
+
+      let optionPositionTypes: DataOption[] = [];
+      data.positionTypes.map((r: any) => {
+        optionPositionTypes.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      positionTypeOptions.value = optionPositionTypes;
+      positionTypeOptionsFilter.value = optionPositionTypes;
+
+      let optionPositionLines: DataOption[] = [];
+      data.positionLines.map((r: any) => {
+        optionPositionLines.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      positionLineOptions.value = optionPositionLines;
+      positionLineOptionsFilter.value = optionPositionLines;
+
+      let optionPositionExecutives: DataOption[] = [];
+      data.positionExecutives.map((r: any) => {
+        optionPositionExecutives.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      positionExecutiveOptions.value = optionPositionExecutives;
+      positionExecutiveOptionsFilter.value = optionPositionExecutives;
+
+      let optionPositionExecutiveSides: DataOption[] = [];
+      data.positionExecutiveSides.map((r: any) => {
+        optionPositionExecutiveSides.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      positionExecutiveSideOptions.value = optionPositionExecutiveSides;
+      positionExecutiveSideOptionsFilter.value = optionPositionExecutiveSides;
+
+      let optionPositionLevels: DataOption[] = [];
+      data.positionLevels.map((r: any) => {
+        optionPositionLevels.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      positionLevelOptions.value = optionPositionLevels;
+      positionLevelOptionsFilter.value = optionPositionLevels;
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      hideLoader();
+    });
+};
+const clickEditRowRef = () => {
+  editRow.value = true;
+  salaryRef.value = refSelected.value?.name;
+};
+const fetchOrganization = async (id: string) => {
+  if (selected.value != "") {
+    showLoader();
+    await http
+      .get(config.API.organizationName(id))
+      .then((res) => {
+        let data = res.data.result;
+        ocId.value = data;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
+const templateDetail = async () => {
+  await fetchOrganization(selected.value);
+  salaryClass.value = "";
+  if (ocId.value != "") {
+    salaryClass.value = salaryClass.value + `สังกัด${ocId.value} `;
+  }
+
+  const positionF = positionOptions.value.filter(
+    (r: DataOption) => r.id == positionId.value
+  );
+  if (positionF.length > 0) {
+    salaryClass.value = salaryClass.value + `ตำแหน่ง${positionF[0].name} `;
+  }
+
+  const posNoF = posNoOptions.value.filter(
+    (r: DataOption) => r.id == posNoId.value
+  );
+  if (posNoF.length > 0) {
+    salaryClass.value = salaryClass.value + `เลขที่ตำแหน่ง${posNoF[0].name} `;
+  }
+
+  const positionLineF = positionLineOptions.value.filter(
+    (r: DataOption) => r.id == positionLineId.value
+  );
+  if (positionLineF.length > 0) {
+    salaryClass.value = salaryClass.value + `สายงาน${positionLineF[0].name} `;
+  }
+
+  const positionPathSideF = positionSideOptions.value.filter(
+    (r: DataOption) => r.id == positionPathSideId.value
+  );
+  if (positionPathSideF.length > 0) {
+    salaryClass.value =
+      salaryClass.value + `ด้าน/สาขา${positionPathSideF[0].name} `;
+  }
+
+  const positionTypeF = positionTypeOptions.value.filter(
+    (r: DataOption) => r.id == positionTypeId.value
+  );
+  if (positionTypeF.length > 0) {
+    salaryClass.value =
+      salaryClass.value + `ประเภทตำแหน่ง${positionTypeF[0].name} `;
+  }
+
+  const positionLevelF = positionLevelOptions.value.filter(
+    (r: DataOption) => r.id == positionLevelId.value
+  );
+  if (positionLevelF.length > 0) {
+    salaryClass.value = salaryClass.value + `ระดับ${positionLevelF[0].name} `;
+  }
+
+  const positionExecutiveF = positionExecutiveOptions.value.filter(
+    (r: DataOption) => r.id == positionExecutiveId.value
+  );
+  if (positionExecutiveF.length > 0) {
+    salaryClass.value =
+      salaryClass.value + `ตำแหน่งทางการบริหาร${positionExecutiveF[0].name} `;
+  }
+};
 const appointModal = ref<boolean>(false);
-const isNewModel = ref<any>(false); //modal add detail
+
+const nodeTree = async (isDraft: boolean) => {
+  showLoader();
+  await http
+    .get(config.API.getDraftTreeRoot)
+    .then((res) => {
+      const data = res.data.result;
+      nodesTree.value = data;
+      if (data.length > 0) {
+        expanded.value = [data[0].id];
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 const appoint = ref<any>({
   Code: "",
   UnitName: "",
@@ -51,7 +273,6 @@ const savePostpone = () => {
   console.log("save postpone===>", dataPost);
   positionMasterUserNote.value = "";
   modal_right.value = false;
-  isNewModel.value = false;
 };
 
 const saveDisclaim = () => {
@@ -71,7 +292,7 @@ const getClass = (val: boolean) => {
   };
 };
 const selectData = (props: TableName) => {
-  itemPopUp.value = props
+  itemtest.value = props;
   if (editvisible.value == true) {
     editRow.value = false;
     modalEdit.value = true;
@@ -84,14 +305,34 @@ const selectData = (props: TableName) => {
     edit.value = true;
   }
 };
-
+const onSelected = async (id: string) => {
+  await fetchPositionNumber(id);
+};
+const fetchPositionNumber = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.getPositionNumberIdByOcId(id))
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+      posNoOptions.value = option;
+      posNoOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 const getNumFile = ref(0);
 const editDetail = (
   props: TableName,
-  action: "cancel" | "wait" | "waitInfo",
-  id:Number
+  action: "cancel" | "wait" | "waitInfo"
 ) => {
-  let dataProp = { ...props };
   if (action === "cancel") {
     getNumFile.value = 0;
     editRow.value = false;
@@ -105,18 +346,6 @@ const editDetail = (
     modalEdit.value = true;
     modal_right.value = true;
     edit.value = true;
-    isNewModel.value = true;
-    const GetId = (dataProp:any) =>{
-      if(dataProp.value == id){
-        dataProp.value.push({
-          isNewModel:isNewModel.value
-        })
-        return dataProp
-      }
-
-    }
-    GetId(dataProp);
-    console.log(dataProp)
     Name.value = props.fullName;
   } else if (action === "waitInfo") {
     getNumFile.value = 1;
@@ -124,11 +353,9 @@ const editDetail = (
     modalEdit.value = true;
     modalwaitInfo.value = true;
     edit.value = true;
-    isNewModel.value = true;
     Name.value = props.fullName;
   }
 };
-
 placementData.mappingPosition.columns.length == 0
   ? (visibleColumns.value = [
       "position",
@@ -492,7 +719,237 @@ const rows = ref<TableName[]>([
   },
 ]);
 
-const itemPopUp = ref<object>({});
+const refOptions = ref<DataOption[]>([
+  {
+    id: "0",
+    name: "****************  ครู  **********************",
+    disable: true,
+  },
+  {
+    id: "1",
+    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "2",
+    name: "เลื่อนเงินเดือน (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "3", name: "ปรับอัตราเงินเดือนครู บัญชีใหม่ {พ.ศ.}" },
+  {
+    id: "4",
+    name: "ปรับให้เข้าระดับและขั้นเงินเดือนตามบัญชีอัตราเงินเดือนข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
+  },
+  {
+    id: "5",
+    name: "ปรับอัตราเงินเดือน ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
+  },
+  {
+    id: "6",
+    name: "ปรับเงินเดือนตาม พ.ร.บ.เงินเดือนฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "7",
+    name: "ปรับเงินเดือนตาม พ.ร.ฎ.การปรับเงินเดือนขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "8",
+    name: "ปรับอัตราเงินเดือนตามพระราชกฤษฎีกา การปรับอัตราเงินเดือนของข้าราชการ {พ.ศ.}",
+  },
+  {
+    id: "9",
+    name: "ปรับอัตราเงินเดือนตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "10",
+    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "11",
+    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "12",
+    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "13",
+    name: "ได้รับเงินเดือนสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "14",
+    name: "ได้รับเงินเดือนสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นเงินเดือน คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "15",
+    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับเงินเดือนอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
+  {
+    id: "21",
+    name: "****************  ลูกจ้าง  **********************",
+    disable: true,
+  },
+  {
+    id: "22",
+    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "23",
+    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "24",
+    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "25",
+    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "26",
+    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "27",
+    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "28",
+    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
+  {
+    id: "30",
+    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "31",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
+  },
+  {
+    id: "32",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
+  },
+  {
+    id: "33",
+    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+]);
+const refOptionsFilter = ref<DataOption[]>([
+  {
+    id: "0",
+    name: "****************  ครู  **********************",
+    disable: true,
+  },
+  {
+    id: "1",
+    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "2",
+    name: "เลื่อนเงินเดือน (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "3", name: "ปรับอัตราเงินเดือนครู บัญชีใหม่ {พ.ศ.}" },
+  {
+    id: "4",
+    name: "ปรับให้เข้าระดับและขั้นเงินเดือนตามบัญชีอัตราเงินเดือนข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
+  },
+  {
+    id: "5",
+    name: "ปรับอัตราเงินเดือน ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
+  },
+  {
+    id: "6",
+    name: "ปรับเงินเดือนตาม พ.ร.บ.เงินเดือนฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "7",
+    name: "ปรับเงินเดือนตาม พ.ร.ฎ.การปรับเงินเดือนขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "8",
+    name: "ปรับอัตราเงินเดือนตามพระราชกฤษฎีกา การปรับอัตราเงินเดือนของข้าราชการ {พ.ศ.}",
+  },
+  {
+    id: "9",
+    name: "ปรับอัตราเงินเดือนตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "10",
+    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "11",
+    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "12",
+    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "13",
+    name: "ได้รับเงินเดือนสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "14",
+    name: "ได้รับเงินเดือนสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นเงินเดือน คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "15",
+    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับเงินเดือนอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
+  {
+    id: "21",
+    name: "****************  ลูกจ้าง  **********************",
+    disable: true,
+  },
+  {
+    id: "22",
+    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "23",
+    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "24",
+    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "25",
+    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "26",
+    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "27",
+    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "28",
+    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
+  {
+    id: "30",
+    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "31",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
+  },
+  {
+    id: "32",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
+  },
+  {
+    id: "33",
+    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+]);
+const itemtest = ref<object>({});
 
 const clickCancel = async () => {
   editvisible.value = false;
@@ -502,7 +959,77 @@ const openAppointModal = (value: any) => {
   appointModal.value = true;
   editRow.value = true;
 };
+const filterSelector = (val: any, update: Function, filtername: string) => {
+  switch (filtername) {
+    case "1":
+      update(() => {
+        posNoOptions.value = posNoOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "2":
+      update(() => {
+        positionOptions.value = positionOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "3":
+      update(() => {
+        positionSideOptions.value = positionSideOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "4":
+      update(() => {
+        positionTypeOptions.value = positionTypeOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "5":
+      update(() => {
+        positionLineOptions.value = positionLineOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "6":
+      update(() => {
+        positionLevelOptions.value = positionLevelOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "7":
+      update(() => {
+        positionExecutiveOptions.value =
+          positionExecutiveOptionsFilter.value.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+      });
+      break;
+    case "8":
+      update(() => {
+        refOptions.value = refOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
 
+    default:
+      break;
+  }
+};
+
+const posNoF = posNoOptions.value.filter(
+  (r: DataOption) => r.id == posNoId.value
+);
+if (posNoF.length > 0) {
+  salaryClass.value = salaryClass.value + `เลขที่ตำแหน่ง${posNoF[0].name} `;
+}
 const clickClose = async () => {
   if (editRow.value == true) {
     $q.dialog({
@@ -524,26 +1051,97 @@ const clickClose = async () => {
     appointModal.value = false;
   }
 };
-
+const manageApiErrorMsg = (catchE: any) => {
+  if (catchE.response.status == 404 || catchE.response.data.status == 404) {
+    return;
+  } else {
+    messageError($q, catchE);
+  }
+};
 const save = () => {
   console.log("rows===>", rows.value);
 };
+onMounted(async () => {
+  await fetchPosition();
+  await nodeTree();
+  // await fetchData();
+});
+const fetchChildrenByParentId = async (node: any) => {
+  //   console.log(isDraft);
+  console.log("Call API4");
+  showLoader();
+  let request = "";
+
+  request = config.API.getTreeNode(node.organizationId, node.keyId);
+
+  await http
+    .get(request)
+    .then((res) => {
+      console.log(res.data.result);
+      node.children = res.data.result;
+    })
+    .catch((e) => {
+      manageApiErrorMsg(e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const onLazyLoad = (node: any) => {
+  setTimeout(async () => {
+    console.log("Call LazyLoad");
+    await fetchChildrenByParentId(node.node);
+    node.done(node.node.children); //return ค่าให้ q-tree generate children
+  }, 10);
+};
 </script>
 <template>
   <q-form ref="myForm">
-    <Table :rows="rows" :columns="columns" :filter="filter" :visible-columns="visibleColumns" v-model:inputfilter="filter"
-      v-model:inputvisible="visibleColumns" v-model:editvisible="editvisible" :cancel="clickCancel" :history="true"
-      :boss="true" :saveNoDraft="true" :add="save">
+    <Table
+      :rows="rows"
+      :columns="columns"
+      :filter="filter"
+      :visible-columns="visibleColumns"
+      v-model:inputfilter="filter"
+      v-model:inputvisible="visibleColumns"
+      v-model:editvisible="editvisible"
+      :cancel="clickCancel"
+      :history="true"
+      :boss="true"
+      :saveNoDraft="true"
+      :add="save"
+    >
       <template #columns="props">
         <q-tr :props="props">
-          <q-icon class="q-mr-sm" size="15px" color="primary" name="mdi-bookmark" v-if="props.row.isDirector"></q-icon>
+          <q-icon
+            class="q-mr-sm"
+            size="15px"
+            color="primary"
+            name="mdi-bookmark"
+            v-if="props.row.isDirector"
+          ></q-icon>
 
-          <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row)"
-            class="cursor-pointer">
+          <q-td
+            v-for="col in props.cols"
+            :key="col.name"
+            :props="props"
+            @click="selectData(props.row)"
+            class="cursor-pointer"
+          >
             <div v-if="col.name == 'BMAOfficer'" class="table_ellipsis">
               <div>
-                <q-icon v-if="col.value == false" name="mdi-close" color="grey-5" class="text-h5" />
-                <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
+                <q-icon
+                  v-if="col.value == false"
+                  name="mdi-close"
+                  color="grey-5"
+                  class="text-h5"
+                />
+                <q-icon
+                  v-else
+                  name="mdi-check"
+                  color="positive"
+                  class="text-h5"
+                />
               </div>
             </div>
             <div v-else-if="col.name == 'Name'" class="table_ellipsis">
@@ -636,7 +1234,6 @@ const save = () => {
               {{ col.value }}
             </div>
           </q-td>
-          <!-- btn if else -->
           <q-td auto-width>
             <div
               v-if="
@@ -654,7 +1251,7 @@ const save = () => {
                 round
                 size="14px"
                 icon="mdi-information-outline"
-                @click="editDetail(props.row, 'waitInfo',props.row.position)"
+                @click="editDetail(props.row, 'waitInfo')"
               />
               <q-btn
                 color="red"
@@ -663,7 +1260,7 @@ const save = () => {
                 round
                 size="14px"
                 icon="mdi-account-remove"
-                @click="editDetail(props.row, 'cancel',props.row.position)"
+                @click="editDetail(props.row, 'cancel')"
               />
             </div>
             <div v-else-if="props.row.Status === 'ยังไม่บรรจุ'">
@@ -673,8 +1270,8 @@ const save = () => {
                 dense
                 round
                 size="14px"
-                :icon="isNewModel ? 'mdi-information-outline' : 'mdi-account-alert'" 
-                @click="editDetail(props.row, 'wait',props.row.position)"
+                icon="mdi-account-alert"
+                @click="editDetail(props.row, 'wait')"
               />
               <q-btn
                 color="red"
@@ -683,7 +1280,7 @@ const save = () => {
                 round
                 size="14px"
                 icon="mdi-account-remove"
-                @click="editDetail(props.row, 'cancel',props.row.position)"
+                @click="editDetail(props.row, 'cancel')"
               />
             </div>
             <div v-else align="right">
@@ -694,7 +1291,7 @@ const save = () => {
                 round
                 size="14px"
                 icon="mdi-account-remove"
-                @click="editDetail(props.row, 'cancel',props.row.position)"
+                @click="editDetail(props.row, 'cancel')"
               />
             </div>
           </q-td>
@@ -703,98 +1300,488 @@ const save = () => {
     </Table>
   </q-form>
 
-  <DialogCard v-model:Modal="modal" :getdetail="itemPopUp" :close="clickClose" />
-
-  <q-dialog v-model="appointModal" persistent>
-    <q-card style="width: 800px">
+  <q-dialog v-model="appointModal" persistent full-width>
+    <q-card>
       <q-form ref="myForm">
         <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="clickClose" />
         <q-separator />
-        <q-card-section>
-          <div class="row q-col-gutter-xs">
-            <div class="col">
-              <q-select
-                outlined
-                dense
-                v-model="appoint.Code"
-                label="รหัสส่วนราชการ"
-              />
-            </div>
-            <div class="col">
-              <q-select
-                outlined
-                dense
-                v-model="appoint.UnitName"
-                label="ชื่อหน่วยงาน"
-              />
-            </div>
-          </div>
+        <q-card-section class="q-pa-sm bg-grey-1">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-6 row">
+              <q-card flat bordered class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 70vh">
+                  <q-input
+                    outlined
+                    dense
+                    v-model="search"
+                    placeholder="ค้นหา"
+                    class="q-mb-sm"
+                  >
+                    <template v-slot:append>
+                      <q-icon name="mdi-magnify" />
+                    </template>
+                  </q-input>
+                  <q-tree
+                    no-transition
+                    ref="qtreeEdit"
+                    :nodes="nodesTree"
+                    node-key="keyId"
+                    @lazy-load="onLazyLoad"
+                    dense
+                  >
+                    <!--organization บรรทัดแสดงชื่อหน่วยงาน & ปุ่ม + -->
+                    <template v-slot:header-organization="prop">
+                      <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
+                        <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+                        <div class="text-weight-medium">
+                          {{ prop.node.organizationName }}
+                        </div>
+                        <!--แสดง Total Count PositionNum-->
+                        <q-badge
+                          rounded
+                          color="grey-2"
+                          text-color="dark"
+                          :label="prop.node.totalPositionCount"
+                        />
+                        <q-badge
+                          v-if="prop.node.totalPositionVacant > 0"
+                          rounded
+                          color="red"
+                          outline
+                          :label="prop.node.totalPositionVacant"
+                        />
 
-          <div class="row q-col-gutter-xs q-pt-xs">
-            <div class="col">
-              <q-select
-                outlined
-                dense
-                v-model="appoint.PositionNo"
-                label="ตำแหน่งเลขที่"
-              />
-            </div>
-            <div class="col">
-              <q-select
-                outlined
-                dense
-                v-model="appoint.PositionType"
-                label="ประเภทตำแหน่ง"
-              />
-            </div>
-          </div>
+                        <q-space />
+                      </div>
+                    </template>
+                    <template v-slot:header-person="prop">
+                      <q-item
+                        clickable
+                        :active=" clickAction === prop.node.keyId"
+                        @click="clickAction = '1-1-3'"
+                        active-class="my-list-link text-primary text-weight-medium"
+                        class="row items-center text-dark col-12 q-py-xs q-pl-sm rounded-borders my-list"
+                        style="width: 100%"
+                      >
+                        <img
+                          v-if="
+                            prop.node.avatar == '' ||
+                            prop.node.avatar ==
+                              'https://cdn.quasar.dev/img/boy-avatar.png'
+                          "
+                          src="@/assets/avatar_user.jpg"
+                          class="col-xs-1 col-sm-2"
+                          style="width: 28px; height: 28px; border-radius: 50%"
+                        />
+                        <img
+                          v-else
+                          :src="prop.node.avatar"
+                          class="col-xs-1 col-sm-2"
+                          style="width: 28px; height: 28px; border-radius: 50%"
+                        />
+                        <!--=====ตำแหน่งว่าง สีแดง=====-->
+                        <div
+                          v-if="
+                            prop.node.name == `ว่าง` ||
+                            prop.node.name == `N/A` ||
+                            prop.node.name == null
+                          "
+                          class="q-px-sm text-weight-medium text-red"
+                        >
+                          ว่าง
+                        </div>
+                        <!--=====หัวหน้า สีเขียว=====-->
+                        <div v-else-if="prop.node.positionLeaderFlag">
+                          <div class="q-px-sm text-weight-medium text-primary">
+                            {{ prop.node.name }}
+                          </div>
+                        </div>
+                        <!--=====ลูกน้อง สีปกติ=====-->
+                        <div v-else>
+                          <div class="q-px-sm text-weight-medium">
+                            {{ prop.node.name }}
+                          </div>
+                        </div>
+                        <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
+                        <div class="q-pr-sm">
+                          {{ prop.node.positionName }}
+                        </div>
+                        <div class="q-pr-sm">
+                          {{ prop.node.positionNum }}
+                        </div>
+                        <div class="q-pr-sm">
+                          {{ prop.node.positionLevel }}
+                        </div>
+                        <q-icon
+                          v-if="prop.node.positionLeaderFlag"
+                          class="q-mr-sm"
+                          size="15px"
+                          color="primary"
+                          name="mdi-bookmark"
+                        ></q-icon>
 
-          <div class="row q-col-gutter-xs q-pt-xs">
-            <div class="col">
-              <q-select
-                outlined
-                dense
-                v-model="appoint.PositionManage"
-                label="ตำแหน่งทางการบริหาร"
-              />
+                        <q-space />
+                      </q-item>
+                    </template>
+                  </q-tree>
+                </q-scroll-area>
+              </q-card>
             </div>
-            <div class="col">
-              <q-select
-                outlined
-                dense
-                v-model="appoint.PositionTypeManage"
-                label="ด้านทางบริหาร"
-              />
-            </div>
-          </div>
+            <div class="col-xs-12 col-sm-6">
+              <q-card flat bordered class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 70vh">
+                  <div class="row col-12 q-col-gutter-xs">
+                    <div class="col-xs-12 col-sm-12 col-md-12"></div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        :readonly="!edit"
+                        v-model="date"
+                        :locale="'th'"
+                        autoApply
+                        :enableTimePicker="false"
+                        @update:modelValue="clickEditRow"
+                        week-start="0"
+                      >
+                        <template #year="{ year }">{{ year + 543 }}</template>
+                        <template #year-overlay-value="{ value }">{{
+                          parseInt(value + 543)
+                        }}</template>
+                        <template #trigger>
+                          <q-input
+                            :class="getClass(edit)"
+                            :outlined="edit"
+                            dense
+                            lazy-rules
+                            :borderless="!edit"
+                            :model-value="date2Thai(date)"
+                            :rules="[
+                              (val:string) =>
+                                !!val ||
+                                `${'กรุณาเลือกวัน เดือน ปี รับตำแหน่ง'}`,
+                            ]"
+                            :label="`${'วัน เดือน ปี รับตำแหน่ง'}`"
+                            hide-bottom-space
+                          >
+                            <template v-slot:prepend>
+                              <q-icon
+                                name="event"
+                                class="cursor-pointer"
+                                :style="
+                                  edit
+                                    ? 'color: var(--q-primary)'
+                                    : 'color: var(--q-grey)'
+                                "
+                              >
+                              </q-icon>
+                            </template>
+                          </q-input>
+                        </template>
+                      </datepicker>
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="posNoId"
+                        :rules="[
+                          (val:string) => !!val || `${'กรุณาเลือกเลขที่ตำแหน่ง'}`,
+                        ]"
+                        :label="`${'เลขที่ตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="posNoOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionId"
+                        :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
+                        :label="`${'ตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'2'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionPathSideId"
+                        :label="`${'ด้าน/สาขา'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionSideOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'3'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionTypeId"
+                        :rules="[
+                          (val:string) => !!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`,
+                        ]"
+                        :label="`${'ประเภทตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionTypeOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'4'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionLineId"
+                        :rules="[(val:string) => !!val || `${'กรุณาเลือกสายงาน'}`]"
+                        :label="`${'สายงาน'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionLineOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'5'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionLevelId"
+                        :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับ'}`]"
+                        :label="`${'ระดับ'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionLevelOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'6'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionExecutiveId"
+                        :label="`${'ตำแหน่งทางการบริหาร'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionExecutiveOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'7'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-4 col-sm-4 col-md-4">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="amount"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                        :label="`${'เงินเดือน'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <div class="col-xs-4 col-sm-4 col-md-4">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionSalaryAmount"
+                        :rules="[
+                          (val:string) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
+                        ]"
+                        :label="`${'เงินประจำตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <div class="col-xs-4 col-sm-4 col-md-4">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="mouthSalaryAmount"
+                        :rules="[
+                          (val) =>
+                            !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
+                        ]"
+                        :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="salaryClass"
+                        :rules="[
+                          (val:string) =>
+                            !!val || `${'กรุณากรอกตำแหน่ง (รายละเอียด)'}`,
+                        ]"
+                        :label="`${'ตำแหน่ง (รายละเอียด)'}`"
+                        @update:modelValue="clickEditRow"
+                        hide-bottom-space
+                        autogrow
+                      >
+                        <template v-slot:append>
+                          <q-btn
+                            color="info"
+                            flat
+                            dense
+                            round
+                            size="14px"
+                            icon="mdi-plus"
+                            @click="templateDetail"
+                            :disable="!edit"
+                          />
+                        </template>
+                      </q-input>
+                    </div>
 
-          <div class="row q-col-gutter-xs q-pt-xs">
-            <div class="col">
-              <q-select
-                outlined
-                dense
-                v-model="appoint.PositionLine"
-                label="ตำแหน่งในสายงาน"
-              />
-            </div>
-            <div class="col">
-              <q-select
-                outlined
-                dense
-                v-model="appoint.Major"
-                label="ด้าน/สาขา"
-              />
-            </div>
-          </div>
-
-          <div class="row q-col-gutter-xs q-pt-xs">
-            <div class="col-6">
-              <q-select
-                outlined
-                dense
-                v-model="appoint.PositionLevel"
-                label="ระดับตำแหน่ง"
-              />
+                    <div class="row col-xs-12 col-sm-12 col-md-12">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="refSelected"
+                        :label="`${'ต้นแบบเอกสารอ้างอิง'}`"
+                        @update:modelValue="clickEditRowRef"
+                        option-label="name"
+                        :options="refOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'8'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="salaryRef"
+                        :rules="[
+                          (val:string) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`,
+                        ]"
+                        :label="`${'เอกสารอ้างอิง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="textarea"
+                        hide-bottom-space
+                      />
+                    </div>
+                  </div>
+                </q-scroll-area>
+              </q-card>
             </div>
           </div>
         </q-card-section>
@@ -808,7 +1795,9 @@ const save = () => {
       </q-form>
     </q-card>
   </q-dialog>
-<!-- ปุ่มขวาตาราง -->
+
+  <DialogCard v-model:Modal="modal" :getdetail="itemtest" :close="clickClose" />
+
   <q-dialog v-model="modal_right" persistent>
     <q-card style="width: 800px">
       <q-form ref="myForm">
@@ -859,7 +1848,7 @@ const save = () => {
       </q-form>
     </q-card>
   </q-dialog>
-<!-- btn แสดงรายละเอียด -->
+
   <q-dialog v-model="modalwaitInfo" persistent>
     <q-card style="width: 500px; max-width: 500px">
       <q-form ref="myForm">
@@ -890,10 +1879,17 @@ const save = () => {
       </q-form>
     </q-card>
   </q-dialog>
-
 </template>
 
 <style lang="scss" scoped>
+.my-list-link {
+  border-radius: 5px;
+  
+  font-weight: 600;
+  border: 1px solid #00AA86;
+}
+
+
 .q-table p {
   margin-bottom: 0;
   color: #818181;
diff --git a/src/modules/05_placement/components/pass/TableDetail.vue b/src/modules/05_placement/components/pass/TableDetail.vue
index 1633a3a30..4524d7486 100644
--- a/src/modules/05_placement/components/pass/TableDetail.vue
+++ b/src/modules/05_placement/components/pass/TableDetail.vue
@@ -103,7 +103,7 @@ const clickSave = async () => {
                                 <div class="col-3 header-sub-text">
                                     ที่อยู่
                                 </div>
-                                <div class="col-9 header-sub-text">
+                                <div class="col-9 sub-text">
                                     {{ props.getdetail.address }}
                                 </div>
                             </div>
@@ -271,7 +271,6 @@ const clickSave = async () => {
     line-height: 150%;
     color: #818181;
 }
-
 .sub-text {
     font-weight: 400;
     font-size: 16px;
diff --git a/src/modules/05_placement/interface/index/Main.ts b/src/modules/05_placement/interface/index/Main.ts
index c28c2f576..2ccb6af46 100644
--- a/src/modules/05_placement/interface/index/Main.ts
+++ b/src/modules/05_placement/interface/index/Main.ts
@@ -1,7 +1,42 @@
+import type { zipCodeOption } from "../../components/exams_other/profileType";
 interface DataOption {
-    id: number;
-    name: string;
+  id: number | string;
+  name: string;
+  disable?: boolean;
+}
+
+interface Pagination {
+  rowsPerPage: number;
+}
+
+interface EduOps {
+  levelOptions: DataOption[];
+  positionPathOptions: DataOption[];
+}
+
+interface InformationOps {
+  prefixOps: DataOption[];
+  genderOps: DataOption[];
+  bloodOps: DataOption[];
+  statusOps: DataOption[];
+  religionOps: DataOption[];
+  employeeClassOps: DataOption[];
+  employeeTypeOps: DataOption[];
+}
+
+interface AddressOps {
+  provinceOps: DataOption[];
+  districtOps: DataOption[];
+  districtCOps: DataOption[];
+  subdistrictOps: zipCodeOption[];
+  subdistrictCOps: zipCodeOption[];
 }
 
 
-export type { DataOption };
+interface treeTab {
+  id: string;
+  label: string;
+  children: treeTab[];
+}
+
+export type { DataOption, treeTab, InformationOps, AddressOps, Pagination, EduOps };