From 563514584c4d2ae9c68c8dc6ff4163f7c97e4075 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Fri, 15 Sep 2023 15:49:03 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20tree=20=E0=B8=9D=E0=B8=B1=E0=B8=87=E0=B9=82=E0=B8=84?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=87=E0=B8=AA=E0=B8=A3=E0=B9=89=E0=B8=B2=E0=B8=87?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B9=E0=B8=81=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/MainTreeEmployee.vue                | 1040 +++++++++--------
 1 file changed, 569 insertions(+), 471 deletions(-)

diff --git a/src/modules/02_organizational/views/MainTreeEmployee.vue b/src/modules/02_organizational/views/MainTreeEmployee.vue
index 8278e3329..44e92526f 100644
--- a/src/modules/02_organizational/views/MainTreeEmployee.vue
+++ b/src/modules/02_organizational/views/MainTreeEmployee.vue
@@ -51,321 +51,379 @@
     </div>
   </q-card>
   <!-- popup Edit window-->
-  <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 700px">
+  <q-dialog v-model="modal" persistent full-width>
+    <q-card>
       <q-form ref="myForm">
         <DialogHeader
           :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}โครงสร้างและกรอบอัตรากำลัง`"
           :close="clickClose"
         />
         <q-separator />
-        <q-card-section class="q-p-sm">
-          <div class="overScroll q-py-sm">
-            <div class="col-11 row q-col-gutter-xs">
-              <div class="col-12">
-                {{ "โครงสร้างหน่วยงาน" }}
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <selector
-                  :class="getClass(true)"
-                  hide-bottom-space
-                  dense
-                  outlined
-                  v-model="organizationOrganizationId"
-                  :options="organizationOrganizationOption"
-                  label="หน่วยงาน"
-                  class="col-xs-12 col-sm-6 col-md-6"
-                  use-input
-                  input-debounce="0"
-                  @filter="
+        <q-card-section class="q-p-sm bg-grey-1">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-5 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
+                    v-if="edit"
+                    :nodes="nodesTree"
+                    dense
+                    node-key="id"
+                    v-model:selected="selected"
+                    v-model:expanded="expanded"
+                    no-selection-unset
+                    selected-color="primary"
+                    @update:selected="onSelected"
+                    default-expand-all
+                  />
+                  <q-tree
+                    v-else
+                    :nodes="nodesTree"
+                    dense
+                    node-key="id"
+                    v-model:expanded="expanded"
+                    no-selection-unset
+                    selected-color="primary"
+                    @update:selected="onSelected"
+                    default-expand-all
+                  >
+                    <template v-slot:default-header="prop">
+                      <div class="row items-center">
+                        <div
+                          class="text-primary"
+                          v-if="selected == prop.node.id"
+                        >
+                          {{ prop.node.label }}
+                        </div>
+                        <div v-else>
+                          {{ prop.node.label }}
+                        </div>
+                      </div>
+                    </template>
+                  </q-tree>
+                </q-scroll-area>
+              </q-card>
+            </div>
+            <div class="col-xs-12 col-sm-7">
+              <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-12">
+                      {{ "โครงสร้างหน่วยงาน" }}
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(true)"
+                        hide-bottom-space
+                        dense
+                        outlined
+                        v-model="organizationOrganizationId"
+                        :options="organizationOrganizationOption"
+                        label="หน่วยงาน"
+                        class="col-xs-6 col-sm-6 col-md-6"
+                        use-input
+                        input-debounce="0"
+                        @filter="
                   (inputValue:any, doneFn:Function) =>
                     filterSelector(inputValue, doneFn, '1')
                 "
-                  option-label="name"
-                  option-value="id"
-                  map-options
-                  emit-value
-                  clearable
-                  :rules="[(val:any) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
-                />
-              </div>
-              <div class="col-xs-12 col-sm-2 col-md-2">
-                <selector
-                  :class="getClass(true)"
-                  hide-bottom-space
-                  dense
-                  outlined
-                  v-model="organizationAgencyCode"
-                  :options="organizationAgencyCodeOption"
-                  label="รหัสหน่วยงาน"
-                  use-input
-                  input-debounce="0"
-                  @filter="
+                        option-label="name"
+                        option-value="id"
+                        map-options
+                        emit-value
+                        clearable
+                        :rules="[(val:any) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-2 col-md-2">
+                      <selector
+                        :class="getClass(true)"
+                        hide-bottom-space
+                        dense
+                        outlined
+                        v-model="organizationAgencyCode"
+                        :options="organizationAgencyCodeOption"
+                        label="รหัสหน่วยงาน"
+                        use-input
+                        input-debounce="0"
+                        @filter="
                   (inputValue:any, doneFn:Function) =>
                   filterSelector(inputValue, doneFn, '2')
                 "
-                  option-label="agencyCode"
-                  option-value="agencyCode"
-                  map-options
-                  emit-value
-                  clearable
-                  :rules="[(val:any) => !!val || `${'กรุณาเลือกรหัสหน่วยงาน'}`]"
-                  @update:model-value="(value:any) => updateAgencyCode(value)"
-                />
-              </div>
-              <div class="col-xs-12 col-sm-2 col-md-2">
-                <selector
-                  :class="getClass(true)"
-                  hide-bottom-space
-                  dense
-                  outlined
-                  v-model="organizationGovernmentCode"
-                  :options="organizationGovernmentCodeOption"
-                  label="รหัสส่วนราชการ"
-                  use-input
-                  input-debounce="0"
-                  @filter="
+                        option-label="agencyCode"
+                        option-value="agencyCode"
+                        map-options
+                        emit-value
+                        clearable
+                        :rules="[(val:any) => !!val || `${'กรุณาเลือกรหัสหน่วยงาน'}`]"
+                        @update:model-value="(value:any) => updateAgencyCode(value)"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-2 col-md-2">
+                      <selector
+                        :class="getClass(true)"
+                        hide-bottom-space
+                        dense
+                        outlined
+                        v-model="organizationGovernmentCode"
+                        :options="organizationGovernmentCodeOption"
+                        label="รหัสส่วนราชการ"
+                        use-input
+                        input-debounce="0"
+                        @filter="
                     (inputValue:any, doneFn:Function) =>
                     filterSelector(inputValue, doneFn, '3')
                 "
-                  option-label="governmentCode"
-                  option-value="id"
-                  map-options
-                  emit-value
-                  clearable
-                  :rules="[(val:any) => !!val || `${'กรุณาเลือกรหัสส่วนราชการ'}`]"
-                  @update:model-value="(value:any) => updateGovernmentCode(value)"
-                />
-              </div>
-              <div class="col-xs-12 col-sm-2 col-md-2">
-                <q-input
-                  :class="getClass(true)"
-                  hide-bottom-space
-                  dense
-                  readonly
-                  outlined
-                  :modelValue="organizationShortName"
-                  label="ชื่อย่อหน่วยงาน"
-                />
-              </div>
-              <div class="col-xs-12 col-sm-2 col-md-2">
-                <q-input
-                  :class="getClass(true)"
-                  dense
-                  outlined
-                  v-model="agency"
-                  label="เลขที่หน่วยงาน"
-                />
-              </div>
-              <div class="col-xs-12 col-sm-2 col-md-2">
-                <q-input
-                  :class="getClass(true)"
-                  dense
-                  outlined
-                  v-model="government"
-                  label="เลขที่ส่วนราชการ"
-                />
-              </div>
-              <div class="col-xs-12 col-sm-2 col-md-2">
-                <q-input
-                  :class="getClass(true)"
-                  dense
-                  outlined
-                  v-model="department"
-                  label="เลขที่ฝ่าย/ส่วน"
-                />
-              </div>
-              <div class="col-xs-12 col-sm-2 col-md-2">
-                <q-input
-                  :class="getClass(true)"
-                  dense
-                  outlined
-                  v-model="pile"
-                  label="เลขที่กอง"
-                />
-              </div>
-              <div class="col-xs-12 col-sm-2 col-md-2">
-                <selector
-                  :class="getClass(true)"
-                  hide-bottom-space
-                  dense
-                  outlined
-                  v-model="organizationTypeId"
-                  :options="organizationTypeOption"
-                  label="ประเภทหน่วยงาน"
-                  use-input
-                  input-debounce="0"
-                  @filter="
+                        option-label="governmentCode"
+                        option-value="id"
+                        map-options
+                        emit-value
+                        clearable
+                        :rules="[(val:any) => !!val || `${'กรุณาเลือกรหัสส่วนราชการ'}`]"
+                        @update:model-value="(value:any) => updateGovernmentCode(value)"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-2 col-md-2">
+                      <q-input
+                        :class="getClass(true)"
+                        hide-bottom-space
+                        dense
+                        readonly
+                        outlined
+                        :modelValue="organizationShortName"
+                        label="ชื่อย่อหน่วยงาน"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-2 col-md-2">
+                      <q-input
+                        :class="getClass(true)"
+                        dense
+                        outlined
+                        v-model="agency"
+                        label="เลขที่หน่วยงาน"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-2 col-md-2">
+                      <q-input
+                        :class="getClass(true)"
+                        dense
+                        outlined
+                        v-model="government"
+                        label="เลขที่ส่วนราชการ"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-2 col-md-2">
+                      <q-input
+                        :class="getClass(true)"
+                        dense
+                        outlined
+                        v-model="department"
+                        label="เลขที่ฝ่าย/ส่วน"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-2 col-md-2">
+                      <q-input
+                        :class="getClass(true)"
+                        dense
+                        outlined
+                        v-model="pile"
+                        label="เลขที่กอง"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-2 col-md-2">
+                      <selector
+                        :class="getClass(true)"
+                        hide-bottom-space
+                        dense
+                        outlined
+                        v-model="organizationTypeId"
+                        :options="organizationTypeOption"
+                        label="ประเภทหน่วยงาน"
+                        use-input
+                        input-debounce="0"
+                        @filter="
                   (inputValue:any, doneFn:Function) =>
                     filterSelector(inputValue, doneFn, '6')
                 "
-                  option-label="name"
-                  option-value="id"
-                  map-options
-                  emit-value
-                  clearable
-                /><!-- :rules="[(val:any) => !!val || `${'กรุณาเลือกประเภทหน่วยงาน'}`]" -->
-              </div>
-              <div class="col-xs-12 col-sm-2 col-md-2">
-                <selector
-                  :class="getClass(true)"
-                  hide-bottom-space
-                  dense
-                  outlined
-                  v-model="organizationLevelId"
-                  :options="organizationLevelOption"
-                  label="ระดับหน่วยงาน"
-                  use-input
-                  input-debounce="0"
-                  @filter="
+                        option-label="name"
+                        option-value="id"
+                        map-options
+                        emit-value
+                        clearable
+                      /><!-- :rules="[(val:any) => !!val || `${'กรุณาเลือกประเภทหน่วยงาน'}`]" -->
+                    </div>
+                    <div class="col-xs-6 col-sm-2 col-md-2">
+                      <selector
+                        :class="getClass(true)"
+                        hide-bottom-space
+                        dense
+                        outlined
+                        v-model="organizationLevelId"
+                        :options="organizationLevelOption"
+                        label="ระดับหน่วยงาน"
+                        use-input
+                        input-debounce="0"
+                        @filter="
                   (inputValue:any, doneFn:Function) =>
                     filterSelector(inputValue, doneFn, '7')
                 "
-                  option-label="name"
-                  option-value="id"
-                  map-options
-                  emit-value
-                  clearable
-                  :rules="[(val:any) => !!val || `${'กรุณาเลือกระดับหน่วยงาน'}`]"
-                />
-              </div>
-              <div class="col-xs-12 col-sm-4 col-md-4">
-                <selector
-                  :class="getClass(true)"
-                  hide-bottom-space
-                  dense
-                  outlined
-                  v-model="organizationAgencyId"
-                  :options="organizationAgencyOption"
-                  label="หน่วยงานต้นสังกัด"
-                  use-input
-                  input-debounce="0"
-                  @filter="
+                        option-label="name"
+                        option-value="id"
+                        map-options
+                        emit-value
+                        clearable
+                        :rules="[(val:any) => !!val || `${'กรุณาเลือกระดับหน่วยงาน'}`]"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-4 col-md-4">
+                      <selector
+                        :class="getClass(true)"
+                        hide-bottom-space
+                        dense
+                        outlined
+                        v-model="organizationAgencyId"
+                        :options="organizationAgencyOption"
+                        label="หน่วยงานต้นสังกัด"
+                        use-input
+                        input-debounce="0"
+                        @filter="
                   (inputValue:any, doneFn:Function) =>
                     filterSelector(inputValue, doneFn, '1')
                 "
-                  option-label="name"
-                  option-value="id"
-                  map-options
-                  emit-value
-                  clearable
-                />
-              </div>
-              <div class="col-xs-12 col-sm-6 col-md-6">
-                <selector
-                  :class="getClass(true)"
-                  hide-bottom-space
-                  dense
-                  outlined
-                  v-model="organizationGovernmentAgencyId"
-                  :options="organizationGovernmentAgencyOption"
-                  label="ส่วนราชการต้นสังกัด"
-                  use-input
-                  input-debounce="0"
-                  @filter="
+                        option-label="name"
+                        option-value="id"
+                        map-options
+                        emit-value
+                        clearable
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(true)"
+                        hide-bottom-space
+                        dense
+                        outlined
+                        v-model="organizationGovernmentAgencyId"
+                        :options="organizationGovernmentAgencyOption"
+                        label="ส่วนราชการต้นสังกัด"
+                        use-input
+                        input-debounce="0"
+                        @filter="
                   (inputValue:any, doneFn:Function) =>
                     filterSelector(inputValue, doneFn, '1')
                 "
-                  option-label="name"
-                  option-value="id"
-                  map-options
-                  emit-value
-                  clearable
-                />
-              </div>
-              <div class="col-xs-12 col-sm-2 col-md-2">
-                <q-input
-                  :class="getClass(true)"
-                  dense
-                  outlined
-                  v-model="organizationOrder"
-                  type="number"
-                  label="ลำดับผังโครงสร้าง"
-                />
-              </div>
-              <div class="col-xs-12 col-sm-4 col-md-4">
-                <selector
-                  :class="getClass(true)"
-                  hide-bottom-space
-                  dense
-                  outlined
-                  v-model="organizationTelExternalId"
-                  :options="organizationTelExternalOption"
-                  label="หมายเลขโทรศัพท์ติดต่อจากภายนอก"
-                  use-input
-                  input-debounce="0"
-                  @filter="
+                        option-label="name"
+                        option-value="id"
+                        map-options
+                        emit-value
+                        clearable
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-2 col-md-2">
+                      <q-input
+                        :class="getClass(true)"
+                        dense
+                        outlined
+                        v-model="organizationOrder"
+                        type="number"
+                        label="ลำดับผังโครงสร้าง"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-4 col-md-4">
+                      <selector
+                        :class="getClass(true)"
+                        hide-bottom-space
+                        dense
+                        outlined
+                        v-model="organizationTelExternalId"
+                        :options="organizationTelExternalOption"
+                        label="หมายเลขโทรศัพท์ติดต่อจากภายนอก"
+                        use-input
+                        input-debounce="0"
+                        @filter="
                   (inputValue:any, doneFn:Function) =>
                     filterSelector(inputValue, doneFn, '8')
                 "
-                  option-label="name"
-                  option-value="id"
-                  map-options
-                  emit-value
-                  clearable
-                />
-              </div>
-              <div class="col-xs-12 col-sm-4 col-md-4">
-                <selector
-                  :class="getClass(true)"
-                  hide-bottom-space
-                  dense
-                  outlined
-                  v-model="organizationTelInternalId"
-                  :options="organizationTelInternalOption"
-                  label="หมายเลขโทรศัพท์ติดต่อจากภายใน"
-                  use-input
-                  input-debounce="0"
-                  @filter="
+                        option-label="name"
+                        option-value="id"
+                        map-options
+                        emit-value
+                        clearable
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-4 col-md-4">
+                      <selector
+                        :class="getClass(true)"
+                        hide-bottom-space
+                        dense
+                        outlined
+                        v-model="organizationTelInternalId"
+                        :options="organizationTelInternalOption"
+                        label="หมายเลขโทรศัพท์ติดต่อจากภายใน"
+                        use-input
+                        input-debounce="0"
+                        @filter="
                   (inputValue:any, doneFn:Function) =>
                     filterSelector(inputValue, doneFn, '9')
                 "
-                  option-label="name"
-                  option-value="id"
-                  map-options
-                  emit-value
-                  clearable
-                />
-              </div>
-              <div class="col-xs-12 col-sm-4 col-md-4">
-                <selector
-                  :class="getClass(true)"
-                  hide-bottom-space
-                  dense
-                  outlined
-                  v-model="organizationFaxId"
-                  :options="organizationFaxOption"
-                  label="หมายเลขโทรสาร"
-                  use-input
-                  input-debounce="0"
-                  @filter="
+                        option-label="name"
+                        option-value="id"
+                        map-options
+                        emit-value
+                        clearable
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-4 col-md-4">
+                      <selector
+                        :class="getClass(true)"
+                        hide-bottom-space
+                        dense
+                        outlined
+                        v-model="organizationFaxId"
+                        :options="organizationFaxOption"
+                        label="หมายเลขโทรสาร"
+                        use-input
+                        input-debounce="0"
+                        @filter="
                   (inputValue:any, doneFn:Function) =>
                     filterSelector(inputValue, doneFn, '10')
                 "
-                  option-label="name"
-                  option-value="id"
-                  map-options
-                  emit-value
-                  clearable
-                />
-              </div>
-              <div class="col-xs-12 col-sm-12 col-md-12">
-                <q-input
-                  :class="getClass(true)"
-                  hide-bottom-space
-                  outlined
-                  dense
-                  lazy-rules
-                  v-model="organizationUserNote"
-                  :label="`${'หน้าที่รับผิดชอบ'}`"
-                  type="textarea"
-                />
-              </div>
+                        option-label="name"
+                        option-value="id"
+                        map-options
+                        emit-value
+                        clearable
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-12 col-md-12">
+                      <q-input
+                        :class="getClass(true)"
+                        hide-bottom-space
+                        outlined
+                        dense
+                        lazy-rules
+                        v-model="organizationUserNote"
+                        :label="`${'หน้าที่รับผิดชอบ'}`"
+                        type="textarea"
+                      />
+                    </div>
 
-              <div class="col-12">
-                {{ "โครงสร้างตำแหน่ง" }}
-              </div>
-              <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                    <div class="col-12">
+                      {{ "โครงสร้างตำแหน่ง" }}
+                    </div>
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
                 <selector
                   :class="getClass(true)"
                   hide-bottom-space
@@ -390,83 +448,83 @@
                 "
                 />
               </div> -->
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <selector
-                  :class="getClass(true)"
-                  hide-bottom-space
-                  outlined
-                  dense
-                  lazy-rules
-                  v-model="positionEmployeeLineId"
-                  :rules="[(val:any) => !!val || `${'กรุณาเลือกสายงาน'}`]"
-                  :label="`${'สายงาน'}`"
-                  emit-value
-                  map-options
-                  option-label="name"
-                  :options="positionEmployeeLineOption"
-                  option-value="id"
-                  use-input
-                  hide-selected
-                  fill-input
-                  input-debounce="0"
-                  @filter="
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(true)"
+                        hide-bottom-space
+                        outlined
+                        dense
+                        lazy-rules
+                        v-model="positionEmployeeLineId"
+                        :rules="[(val:any) => !!val || `${'กรุณาเลือกสายงาน'}`]"
+                        :label="`${'สายงาน'}`"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionEmployeeLineOption"
+                        option-value="id"
+                        use-input
+                        hide-selected
+                        fill-input
+                        input-debounce="0"
+                        @filter="
                   (inputValue:any, doneFn:Function) =>
                     filterSelector(inputValue, doneFn, '12')
                 "
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <selector
-                  :class="getClass(true)"
-                  hide-bottom-space
-                  outlined
-                  dense
-                  lazy-rules
-                  v-model="positionEmployeePathId"
-                  :rules="[(val:any) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
-                  :label="`${'ตำแหน่ง'}`"
-                  emit-value
-                  map-options
-                  option-label="name"
-                  :options="positionEmployeePathOption"
-                  option-value="id"
-                  use-input
-                  hide-selected
-                  fill-input
-                  input-debounce="0"
-                  @filter="
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(true)"
+                        hide-bottom-space
+                        outlined
+                        dense
+                        lazy-rules
+                        v-model="positionEmployeePathId"
+                        :rules="[(val:any) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
+                        :label="`${'ตำแหน่ง'}`"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionEmployeePathOption"
+                        option-value="id"
+                        use-input
+                        hide-selected
+                        fill-input
+                        input-debounce="0"
+                        @filter="
                   (inputValue:any, doneFn:Function) =>
                     filterSelector(inputValue, doneFn, '13')
                 "
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <selector
-                  :class="getClass(true)"
-                  hide-bottom-space
-                  multiple
-                  outlined
-                  dense
-                  lazy-rules
-                  v-model="positionEmployeePositionSidesId"
-                  :label="`${'ด้าน/สาขา'}`"
-                  emit-value
-                  map-options
-                  option-label="name"
-                  :options="positionEmployeePathSideOption"
-                  option-value="id"
-                  use-input
-                  use-chips
-                  input-debounce="0"
-                  @filter="
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(true)"
+                        hide-bottom-space
+                        multiple
+                        outlined
+                        dense
+                        lazy-rules
+                        v-model="positionEmployeePositionSidesId"
+                        :label="`${'ด้าน/สาขา'}`"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionEmployeePathSideOption"
+                        option-value="id"
+                        use-input
+                        use-chips
+                        input-debounce="0"
+                        @filter="
                   (inputValue:any, doneFn:Function) =>
                     filterSelector(inputValue, doneFn, '14')
                 "
-                  color="primary"
-                />
-                <!-- :rules="[(val) => !!val || `${'กรุณาเลือกด้าน/สาขา'}`]" -->
-              </div>
-              <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                        color="primary"
+                      />
+                      <!-- :rules="[(val) => !!val || `${'กรุณาเลือกด้าน/สาขา'}`]" -->
+                    </div>
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
                 <selector
                   :class="getClass(true)"
                   hide-bottom-space
@@ -491,7 +549,7 @@
                   color="primary"
                 />
               </div> -->
-              <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
                 <selector
                   :class="getClass(true)"
                   hide-bottom-space
@@ -516,134 +574,142 @@
                   color="primary"
                 />
               </div> -->
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <selector
-                  :class="getClass(true)"
-                  hide-bottom-space
-                  multiple
-                  outlined
-                  dense
-                  lazy-rules
-                  v-model="positionEmployeeLevelId"
-                  :rules="[(val:any) => !!val || `${'กรุณาเลือกระดับ'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกระดับ'}`]"
-                  :label="`${'ระดับ'}`"
-                  emit-value
-                  map-options
-                  option-label="name"
-                  :options="positionEmployeeLevelOption"
-                  option-value="id"
-                  use-input
-                  use-chips
-                  input-debounce="0"
-                  @filter="
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(true)"
+                        hide-bottom-space
+                        multiple
+                        outlined
+                        dense
+                        lazy-rules
+                        v-model="positionEmployeeLevelId"
+                        :rules="[(val:any) => !!val || `${'กรุณาเลือกระดับ'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกระดับ'}`]"
+                        :label="`${'ระดับ'}`"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionEmployeeLevelOption"
+                        option-value="id"
+                        use-input
+                        use-chips
+                        input-debounce="0"
+                        @filter="
                   (inputValue:any, doneFn:Function) =>
                     filterSelector(inputValue, doneFn, '17')
                 "
-                  color="primary"
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <selector
-                  :class="getClass(true)"
-                  hide-bottom-space
-                  outlined
-                  dense
-                  lazy-rules
-                  v-model="positionEmployeeStatusId"
-                  :label="`${'สถานภาพของตำแหน่ง'}`"
-                  emit-value
-                  map-options
-                  option-label="name"
-                  :options="positionEmployeeStatusOption"
-                  option-value="id"
-                  use-input
-                  hide-selected
-                  fill-input
-                  input-debounce="0"
-                  @filter="
+                        color="primary"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(true)"
+                        hide-bottom-space
+                        outlined
+                        dense
+                        lazy-rules
+                        v-model="positionEmployeeStatusId"
+                        :label="`${'สถานภาพของตำแหน่ง'}`"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionEmployeeStatusOption"
+                        option-value="id"
+                        use-input
+                        hide-selected
+                        fill-input
+                        input-debounce="0"
+                        @filter="
                   (inputValue:any, doneFn:Function) =>
                     filterSelector(inputValue, doneFn, '18')
                 "
-                  :rules="[(val:any) => !!val || `${'กรุณาเลือกสถานภาพของตำแหน่ง'}`]"
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <q-input
-                  :class="getClass(true)"
-                  hide-bottom-space
-                  outlined
-                  dense
-                  lazy-rules
-                  v-model="posNo"
-                  :label="`${'เลขที่ตำแหน่ง'}`"
-                  :rules="[(val:any) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
-                />
-              </div>
-              <div class="col-xs-12 col-sm-12 col-md-12">
-                <q-input
-                  :class="getClass(true)"
-                  hide-bottom-space
-                  outlined
-                  dense
-                  lazy-rules
-                  v-model="qualification"
-                  :label="`${'คุณวุฒิ'}`"
-                  type="textarea"
-                />
-              </div>
-              <div class="col-xs-12 col-sm-12 col-md-12">
-                <q-input
-                  :class="getClass(true)"
-                  hide-bottom-space
-                  outlined
-                  dense
-                  lazy-rules
-                  v-model="positionCondition"
-                  :label="`${'เงื่อนไขตำแหน่ง'}`"
-                  type="textarea"
-                />
-              </div>
-              <div class="col-xs-12 col-sm-12 col-md-12">
-                <q-input
-                  :class="getClass(true)"
-                  hide-bottom-space
-                  outlined
-                  dense
-                  lazy-rules
-                  v-model="positionMasterUserNote"
-                  :label="`${'หมายเหตุ'}`"
-                  type="textarea"
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6 text-grey-9">
-                <q-checkbox v-model="isDirector" label="หัวหน้า" />
-              </div>
-              <div class="col-xs-12 col-sm-12 col-md-12 q-pt-sm">
-                <q-toggle v-model="isActive" dense size="34px" color="positive">
-                  ปกติ
-                </q-toggle>
-                <q-toggle
-                  v-model="isCondition"
-                  dense
-                  size="34px"
-                  color="positive"
-                  class="q-pl-md"
-                >
-                  ติดเงื่อนไข
-                </q-toggle>
-              </div>
-              <div class="col-xs-12 col-sm-12 col-md-12 q-pt-sm">
-                <q-input
-                  :class="getClass(true)"
-                  hide-bottom-space
-                  outlined
-                  dense
-                  lazy-rules
-                  v-model="conditionNote"
-                  :label="`${'รายละเอียดเงื่อนไข'}`"
-                  type="textarea"
-                />
-              </div>
+                        :rules="[(val:any) => !!val || `${'กรุณาเลือกสถานภาพของตำแหน่ง'}`]"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        :class="getClass(true)"
+                        hide-bottom-space
+                        outlined
+                        dense
+                        lazy-rules
+                        v-model="posNo"
+                        :label="`${'เลขที่ตำแหน่ง'}`"
+                        :rules="[(val:any) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-12 col-md-12">
+                      <q-input
+                        :class="getClass(true)"
+                        hide-bottom-space
+                        outlined
+                        dense
+                        lazy-rules
+                        v-model="qualification"
+                        :label="`${'คุณวุฒิ'}`"
+                        type="textarea"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-12 col-md-12">
+                      <q-input
+                        :class="getClass(true)"
+                        hide-bottom-space
+                        outlined
+                        dense
+                        lazy-rules
+                        v-model="positionCondition"
+                        :label="`${'เงื่อนไขตำแหน่ง'}`"
+                        type="textarea"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-12 col-md-12">
+                      <q-input
+                        :class="getClass(true)"
+                        hide-bottom-space
+                        outlined
+                        dense
+                        lazy-rules
+                        v-model="positionMasterUserNote"
+                        :label="`${'หมายเหตุ'}`"
+                        type="textarea"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6 text-grey-9">
+                      <q-checkbox v-model="isDirector" label="หัวหน้า" />
+                    </div>
+                    <div class="col-xs-6 col-sm-12 col-md-12 q-pt-sm">
+                      <q-toggle
+                        v-model="isActive"
+                        dense
+                        size="34px"
+                        color="positive"
+                      >
+                        ปกติ
+                      </q-toggle>
+                      <q-toggle
+                        v-model="isCondition"
+                        dense
+                        size="34px"
+                        color="positive"
+                        class="q-pl-md"
+                      >
+                        ติดเงื่อนไข
+                      </q-toggle>
+                    </div>
+                    <div class="col-xs-6 col-sm-12 col-md-12 q-pt-sm">
+                      <q-input
+                        :class="getClass(true)"
+                        hide-bottom-space
+                        outlined
+                        dense
+                        lazy-rules
+                        v-model="conditionNote"
+                        :label="`${'รายละเอียดเงื่อนไข'}`"
+                        type="textarea"
+                      />
+                    </div>
+                  </div>
+                </q-scroll-area>
+              </q-card>
             </div>
           </div>
         </q-card-section>
@@ -671,6 +737,7 @@ import type {
   DataOption,
   GovermentOption,
 } from "@/modules/02_organizational/interface/index/Main";
+import type { treeTab } from "@/components/information/interface/index/Main";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -707,6 +774,10 @@ const positionEmployeePositionSidesId = ref<string[]>([]);
 const positionEmployeeLevelId = ref<string[]>([]);
 const positionEmployeeStatusId = ref<string>();
 
+const selected = ref<string>("");
+const search = ref<string>("");
+const nodesTree = ref<treeTab[]>([]);
+const expanded = ref<string[]>([]);
 const organizationShortName = ref<string>();
 const agency = ref<string>();
 const government = ref<string>();
@@ -722,7 +793,8 @@ const isActive = ref<boolean>(false);
 const isCondition = ref<boolean>(false);
 const conditionNote = ref<string>();
 const posNo = ref<string>();
-
+const posNoOptions = ref<DataOption[]>([]);
+const posNoOptionsFilter = ref<DataOption[]>([]);
 const organizationOrganizationOption = ref<DataOption[]>([]);
 const organizationAgencyCodeOption = ref<GovermentOption[]>([]);
 const organizationGovernmentCodeOption = ref<GovermentOption[]>([]);
@@ -768,7 +840,7 @@ const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้ส
 const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
 const statusCode = ref<number>();
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-
+const organizationId = ref<string>("");
 const rows = ref<any>([]);
 const filter = ref<string>(""); //search data table
 
@@ -898,8 +970,15 @@ onMounted(async () => {
   await fetchOrganizationAgencyCode();
   await fetchPosition();
   await fetchData();
+  await nodeTree();
 });
 
+const onSelected = async (id: string) => {
+  //   await fetchPositionNumber(id);
+  organizationId.value = id;
+  console.log(organizationId.value);
+};
+
 /**
  * ฟังก์ชัน get data ล่าสุด
  */
@@ -1104,6 +1183,25 @@ const fetchOrganizationAgency = async () => {
     });
 };
 
+const nodeTree = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileOrganizRoot)
+    .then((res: any) => {
+      const data = res.data.result;
+      nodesTree.value = data;
+      if (data.length > 0) {
+        expanded.value = [data[0].id];
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
 /**
  *  ส่วนราชการต้นสังกัด
  */