diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index bd9f76127..913a2bea4 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -2,5 +2,7 @@
  * api บรรจุ แต่งตั้ง ย้าย โอน
  */
 import env from "../index";
+const orgTree = `${env.API_URI_ORG_TREE}`;
+const placement = `${env.API_URI}/Placement/placement`;
 
-export default {};
+export default { orgTree: orgTree, placementPass: () => `${placement}/pass` };
diff --git a/src/modules/05_placement/components/pass/OrgTree.vue b/src/modules/05_placement/components/pass/OrgTree.vue
new file mode 100644
index 000000000..f0309ef87
--- /dev/null
+++ b/src/modules/05_placement/components/pass/OrgTree.vue
@@ -0,0 +1,502 @@
+<script setup lang="ts">
+import { useQuasar, QForm } from "quasar";
+import { onMounted, reactive, ref } from "vue";
+import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
+import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { date2Thai, hideLoader, messageError, showLoader, success } = mixin; //ฟังก์ชันกลางที่เรียกใช้
+
+const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
+const noData = ref<string>("ไม่พบข้อมูลผังโครงสร้าง");
+
+const checkValidate = ref<boolean>(false);
+const myFormPosition = ref<any>();
+const selected = ref<string>("")
+
+// Set form field
+let dataForm = reactive({
+    personalId: "",
+    containDate: new Date(),
+    posNoId: "",
+    positionId: "",
+    positionLevelId: "",
+    positionLineId: "",
+    positionPathSideId: "",
+    positionTypeId: "",
+    salaryAmount: null,
+    mouthSalaryAmount: null,
+    positionSalaryAmount: null,
+});
+
+onMounted(() => {
+    loadTreeData();
+})
+
+// โหลดข้อมูลโครงสร้างจาก json
+const treeData = ref<Array<any>>([]);
+const loadTreeData = async () => {
+    await http
+        .get(config.API.orgTree)
+        .then((res: any) => {
+            treeData.value = res.data;
+        })
+        .catch((e: any) => {
+            messageError($q, e);
+        })
+        .finally(() => {
+            hideLoader();
+        });
+};
+
+const search = ref<string>("");
+//reset Tree Filter
+const filterRef = ref<any>(null)
+const resetFilter = () => {
+    search.value = "";
+    filterRef.value.focus();
+};
+
+const props = defineProps({
+    personalId: String,
+    modal: Boolean,
+    close: {
+        type: Function,
+        default: () => console.log('close modal'),
+    },
+});
+
+const myFilterMethod = (node: any, filter: string) => {
+    const filt = filter;
+
+    return ((node.name && node.name == null) || !node.name) && ((node.organizationName && node.organizationName.indexOf(filt) > -1) ||
+        (node.positionNum && node.positionNum.indexOf(filt) > -1) ||
+        (node.positionName && node.positionName.indexOf(filt) > -1) ||
+        (node.governmentCode &&
+            node.governmentCode.toString().indexOf(filt) > -1) ||
+        (node.agency && node.agency.indexOf(filt) > -1) ||
+        (node.government && node.government.indexOf(filt) > -1) ||
+        (node.department && node.department.indexOf(filt) > -1) ||
+        (node.pile && node.pile.indexOf(filt) > -1) ||
+        (node.organizationShortName &&
+            node.organizationShortName.indexOf(filt) > -1) ||
+        (node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
+        (node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
+        (node.executivePositionSide &&
+            node.executivePositionSide.indexOf(filt) > -1) ||
+        (node.positionLevel && node.positionLevel.indexOf(filt) > -1))
+}
+
+const validateData = async () => {
+    checkValidate.value = true;
+    await myFormPosition.value.validate().then((result: boolean) => {
+        if (result == false) {
+            checkValidate.value = false;
+        }
+    });
+};
+
+const saveAppoint = async () => {
+    myFormPosition.value.validate().then(async (result: boolean) => {
+        if (result) {
+            const dataAppoint = await {
+                personalId: props.personalId,
+                containDate: dataForm.containDate,
+                posNoId: dataForm.posNoId,
+                positionId: dataForm.positionId,
+                positionLevelId: dataForm.positionLevelId,
+                positionLineId: dataForm.positionLineId,
+                positionPathSideId: dataForm.positionPathSideId,
+                positionTypeId: dataForm.positionTypeId,
+                salaryAmount: dataForm.salaryAmount,
+                mouthSalaryAmount: dataForm.mouthSalaryAmount,
+                positionSalaryAmount: dataForm.positionSalaryAmount,
+            };
+            console.log("save appoint===>", dataAppoint);
+
+            showLoader();
+            await http
+                .post(config.API.placementPass(), dataAppoint)
+                .then((res) => {
+                    console.log("respone=>", res)
+                    success($q, "บันทึกสำเร็จ");
+                })
+                .catch((e) => {
+                    messageError($q, e);
+                })
+                .finally(() => {
+                    hideLoader()
+                    close()
+                });
+
+            resetFilter()
+            // Clear form
+            selected.value = "";
+            dataForm.personalId = '';
+            dataForm.containDate = new Date()
+            dataForm.posNoId = ""
+            dataForm.positionId = ""
+            dataForm.positionLevelId = ""
+            dataForm.positionLineId = ""
+            dataForm.positionPathSideId = ""
+            dataForm.positionTypeId = ""
+            dataForm.salaryAmount = null
+            dataForm.mouthSalaryAmount = null;
+            dataForm.positionSalaryAmount = null
+        }
+    });
+};
+
+const editDataStatus = ref<boolean>(false);
+const clickEditRow = () => {
+    editDataStatus.value = true;
+};
+
+const closeModal = () => {
+    if (editDataStatus.value == true) {
+        $q.dialog({
+            title: `ข้อมูลมีการแก้ไข`,
+            message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+            cancel: "ยกเลิก",
+            ok: "ยืนยัน",
+            persistent: true,
+        }).onOk(() => {
+            editDataStatus.value = false;
+            closeAndClear()
+        });
+    } else {
+        closeAndClear()
+    }
+}
+
+const closeAndClear = () => {
+    props.close();
+    editDataStatus.value = false;
+    selected.value = ""
+    dataForm.personalId = '';
+    dataForm.containDate = new Date()
+    dataForm.posNoId = ""
+    dataForm.positionId = ""
+    dataForm.positionLevelId = ""
+    dataForm.positionLineId = ""
+    dataForm.positionPathSideId = ""
+    dataForm.positionTypeId = ""
+    dataForm.salaryAmount = null
+    dataForm.mouthSalaryAmount = null;
+    dataForm.positionSalaryAmount = null
+}
+// ตำแหน่งเลขที่
+const posNoOptions = ref<Object[]>([{
+    label: '',
+    value: ''
+}]);
+// ตำแหน่ง
+const positionOptions = ref<Object[]>([{
+    label: '',
+    value: ''
+}]);
+// ด้าน/สาขา
+const positionPathSideOptions = ref<Object[]>([{
+    label: '',
+    value: ''
+}]);
+// ตำแหน่งประเภท
+const positionTypeOptions = ref<Object[]>([{
+    label: '',
+    value: ''
+}]);
+// สายงาน
+const positionLineOptions = ref<Object[]>([{
+    label: '',
+    value: ''
+}]);
+// ระดับ
+const positionLevelOptions = ref<Object[]>([{
+    label: '',
+    value: ''
+}]);
+
+const selectedPosition = async (data: any) => {
+
+    if (data.name == null && selected.value != data.keyId) {
+        editDataStatus.value = true;
+        // console.log("selected", data)
+        selected.value = data.keyId
+
+        // posNo Options
+        posNoOptions.value = await [{
+            label: data.positionNum,
+            value: data.positionNumInt,
+        }]
+        dataForm.posNoId = data.positionNumInt;
+
+        // position Options
+        positionOptions.value = await [{
+            label: data.positionName,
+            value: data.positionMasterId,
+        }]
+        dataForm.positionId = data.positionMasterId;
+
+        // positionPathSide Options
+        positionPathSideOptions.value = await [{
+            label: data.positionSideName,
+            value: data.positionSideName,
+        }]
+        dataForm.positionPathSideId = data.positionSideName;
+
+        // positionType Options
+        positionTypeOptions.value = await [{
+            label: data.positionType,
+            value: data.positionType,
+        }]
+        dataForm.positionTypeId = data.positionType;
+
+        // positionLine Options
+        // positionLineOptions.value = await [{
+        //     label: data.positionType,
+        //     value: data.positionType,
+        // }]
+        // dataForm.positionLineId = data.positionType;
+
+        // positionLevel Options
+        const positionLevelsSplit = data.positionLevel.split(',')
+        let positionLevelsArr: any = [];
+        positionLevelsSplit.map((x: string) => {
+            positionLevelsArr.push({
+                label: x,
+                value: x,
+            })
+        })
+        positionLevelOptions.value = positionLevelsArr;
+        dataForm.positionLevelId = positionLevelsArr.length > 1 || positionLevelsArr.length == 0 ? '' : positionLevelsArr[0].value;
+
+    } else if (selected.value == data.keyId) {
+        selected.value = '';
+    }
+}
+</script>
+
+<template>
+    <q-dialog v-model="props.modal" persistent full-width>
+        <q-card>
+            <q-form ref="myFormPosition">
+                <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="closeModal" />
+                <q-separator />
+                <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 ref="filterRef" v-model="search" placeholder="ค้นหา"
+                                        class="q-mb-sm">
+                                        <template v-slot:append>
+                                            <q-icon name="mdi-magnify" />
+                                        </template>
+                                    </q-input>
+                                    <div class="q-pa-sm q-gutter-sm">
+                                        <q-tree no-transition dense :nodes="treeData" node-key="keyId" :filter="search"
+                                            :no-results-label="notFound" :no-nodes-label="noData"
+                                            :filter-method="myFilterMethod">
+
+                                            <template v-slot:header-organization="prop">
+                                                <div class="col">
+                                                    <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" />
+
+                                                        <q-space />
+                                                    </div>
+                                                    <div class="col items-center q-px-xs q-pt-xs">
+                                                        <div class="text-weight-medium text-grey-7">
+                                                            {{ prop.node.governmentCode }}
+                                                            {{ prop.node.organizationShortName }}
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </template>
+
+                                            <template v-slot:header-person="prop">
+                                                <q-item clickable :active="selected == prop.node.keyId"
+                                                    @click="selectedPosition(prop.node)" :disable="prop.node.name != null"
+                                                    active-class="my-list-link text-primary text-weight-medium"
+                                                    class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list">
+                                                    <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 == 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>
+
+                                                    <q-space />
+                                                </q-item>
+                                            </template>
+
+                                        </q-tree>
+                                    </div>
+                                </q-scroll-area>
+                            </q-card>
+                        </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" v-model="dataForm.containDate"
+                                                :locale="'th'" autoApply :enableTimePicker="false" week-start="0">
+                                                <template #year="{ year }">{{ year + 543 }}</template>
+                                                <template #year-overlay-value="{ value }">{{
+                                                    parseInt(value + 543)
+                                                }}</template>
+                                                <template #trigger>
+                                                    <q-input class="full-width inputgreen cursor-pointer" outlined dense
+                                                        lazy-rules :model-value="date2Thai(new Date(dataForm.containDate))
+                                                                " :rules="[
+            (val: string) =>
+                !!val ||
+                `${'วันที่รายงานตัว'}`,
+        ]" :label="`${'วันที่รายงานตัว'}`" hide-bottom-space>
+                                                        <template v-slot:prepend>
+                                                            <q-icon name="event" class="cursor-pointer"
+                                                                style="color: var(--q-primary)">
+                                                            </q-icon>
+                                                        </template>
+                                                    </q-input>
+                                                </template>
+                                            </datepicker>
+                                        </div>
+                                        <q-space />
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-select class="full-width inputgreen cursor-pointer custom-input" outlined
+                                                standout dense hide-bottom-space lazy-rules :options="posNoOptions"
+                                                v-model="dataForm.posNoId" :label="`${'ตำแหน่งเลขที่'}`" map-options />
+                                        </div>
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-select outlined class="full-width inputgreen cursor-pointer custom-input"
+                                                standout dense hide-bottom-space lazy-rules :options="positionOptions"
+                                                v-model="dataForm.positionId" :label="`${'ตำแหน่ง'}`" map-options />
+                                        </div>
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-select outlined class="full-width inputgreen cursor-pointer custom-input"
+                                                standout dense hide-bottom-space lazy-rules
+                                                :options="positionPathSideOptions" v-model="dataForm.positionPathSideId"
+                                                :label="`${'ด้าน/สาขา'}`" map-options />
+                                        </div>
+
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-select outlined class="full-width inputgreen cursor-pointer custom-input"
+                                                standout dense hide-bottom-space lazy-rules :options="positionTypeOptions"
+                                                v-model="dataForm.positionTypeId" :label="`${'ประเภทตำแหน่ง'}`"
+                                                map-options />
+                                        </div>
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-select outlined class="full-width inputgreen cursor-pointer custom-input"
+                                                standout dense hide-bottom-space lazy-rules :options="positionLineOptions"
+                                                v-model="dataForm.positionLineId" :label="`${'สายงาน'}`" map-options />
+                                        </div>
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-select outlined class="full-width inputgreen cursor-pointer custom-input"
+                                                standout dense lazy-rules :options="positionLevelOptions"
+                                                v-model="dataForm.positionLevelId" :label="`${'ระดับ'}`" hide-bottom-space
+                                                :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]" emit-value
+                                                map-options />
+                                        </div>
+                                        <div class="col-sx-12 col-sm-12 col-md-12">
+                                            <q-separator inset size="2px" class="q-my-md" />
+                                        </div>
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-input outlined dense lazy-rules v-model="dataForm.salaryAmount"
+                                                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                                                :label="`${'เงินเดือน'}`" @update:modelValue="clickEditRow" type="number"
+                                                hide-bottom-space />
+                                        </div>
+
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-input outlined dense lazy-rules v-model="dataForm.positionSalaryAmount"
+                                                :rules="[
+                                                    (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
+                                                ]" :label="`${'เงินประจำตำแหน่ง'}`" @update:modelValue="clickEditRow"
+                                                type="number" hide-bottom-space />
+                                        </div>
+
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-input outlined dense lazy-rules v-model="dataForm.mouthSalaryAmount" :rules="[
+                                                (val) =>
+                                                    !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
+                                            ]" :label="`${'เงินค่าตอบแทนรายเดือน'}`" @update:modelValue="clickEditRow"
+                                                type="number" hide-bottom-space />
+                                        </div>
+                                    </div>
+                                </q-scroll-area>
+                            </q-card>
+                        </div>
+                    </div>
+                </q-card-section>
+
+                <q-separator />
+                <DialogFooter :editvisible="true" :validate="validateData" :save="saveAppoint"
+                    v-model:modalEdit="editDataStatus" />
+            </q-form>
+        </q-card>
+    </q-dialog>
+</template>
+
+<style scoped lang="scss">
+.q-tree__node-header {
+    padding: 0px;
+    margin-top: 0px;
+    border-radius: 4px;
+    outline: 0;
+}
+
+.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);
+    /*  box-shadow: 1px 1px 7px 1px rgba(41, 95, 255, 0.15) !important; */
+}
+</style>
\ No newline at end of file