From 89008fe62c0a04c32900e911cb3052aef2555c91 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Tue, 21 May 2024 15:29:31 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B8=AD=E0=B8=81?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=8A=E0=B8=B7=E0=B9=88=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B2=E0=B8=A1=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/02_organizational/api.organization.ts |   4 +-
 .../Dialogs/DialogOrgSelectOneStep.vue        | 577 ++++++++++++++++++
 .../components/resign/DetailByidDeceased.vue  | 348 +++--------
 .../interface/response/Deceased.ts            |  58 ++
 .../10_order/components/step/step03.vue       |  14 +-
 5 files changed, 728 insertions(+), 273 deletions(-)
 create mode 100644 src/components/Dialogs/DialogOrgSelectOneStep.vue

diff --git a/src/api/02_organizational/api.organization.ts b/src/api/02_organizational/api.organization.ts
index 009e34bad..59f15364e 100644
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@@ -86,5 +86,7 @@ export default {
   orgProfileEmp: `${orgEmployeePos}/profile`,
   orgSearchProfileEmp: `${orgProfile}-employee/search`,
 
-  orgProfileById:(id:string,type:string)=>`${orgProfile}${type}/${id}`
+  orgProfileById:(id:string,type:string)=>`${orgProfile}${type}/${id}`,
+
+  orgDeceasedProfile:`${orgPos}/profile/search`
 };
diff --git a/src/components/Dialogs/DialogOrgSelectOneStep.vue b/src/components/Dialogs/DialogOrgSelectOneStep.vue
new file mode 100644
index 000000000..1f471b32d
--- /dev/null
+++ b/src/components/Dialogs/DialogOrgSelectOneStep.vue
@@ -0,0 +1,577 @@
+<script setup lang="ts">
+import DialogHeader from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { ref, watch, reactive } from "vue";
+import type { QInput, QTableProps } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  OrgTree,
+  DataTree,
+  Positions,
+  DataPositionNo,
+  FormActive,
+  TreeMain,
+} from "@/interface/request/orgSelect/org";
+
+const rows = ref<any[]>([]);
+const filterRef = ref<QInput>();
+const filterModal = ref<string>("");
+const props = defineProps({
+  dataRows: {
+    type: Object,
+    require: true,
+  },
+  onSubmit: Function,
+  saveData: Function,
+});
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  showLoader,
+  messageError,
+  hideLoader,
+  date2Thai,
+  dialogMessageNotify,
+} = mixin;
+
+const modal = defineModel<boolean>("modal", { required: true });
+const title = defineModel<string>("title", { required: true });
+const selectedModal = defineModel<any[]>("selectedModal");
+
+const filter = ref<string>("");
+const isAll = ref<boolean>(false);
+const isBlank = ref<boolean>(false);
+const positionNo = ref<DataPositionNo[]>();
+const itemTaps = ref<string[]>();
+const positionId = ref<string>("");
+const selectedPos = ref<any[]>([]);
+const seletcId = ref<string>("");
+const datePos = ref<Date>(new Date());
+const rowsPosition = ref<Positions[]>([]);
+const positionData = ref<any>();
+/** active form */
+const formActive = reactive<FormActive>({
+  activeId: "",
+  activeName: "",
+  draftId: "",
+  draftName: "",
+  orgPublishDate: null,
+  isPublic: false,
+});
+/** node */
+const nodes = ref<Array<OrgTree>>([]);
+const lazy = ref(nodes);
+const expanded = ref<string[]>([]);
+const nodeLevel = ref<number>(0);
+const nodeId = ref<string>(""); // id ของ Tree
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    field: "no",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    field: "citizenId",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    field: "name",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    field: "position",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const visibleColumns = ref<String[]>(["no", "citizenId", "name", "position"]);
+
+/** ปิด dialog */
+function close() {
+  modal.value = false;
+  filter.value = "";
+  isAll.value = false;
+  isBlank.value = false;
+
+  nodes.value = [];
+  expanded.value = [];
+  nodeLevel.value = 0;
+  nodeId.value = "";
+
+  rows.value = [];
+  selectedModal.value = [];
+}
+
+async function getDataTable(id: string, level: number = 0) {
+  //new
+  showLoader();
+  http
+    .post(config.API.orgDeceasedProfile, {
+      nodeId: id,
+      node: level,
+      isAll: isAll.value,
+    })
+    .then((res) => {
+      const data = res.data.result.data;
+
+      rows.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+  //old
+  //   showLoader();
+
+  //   const body = {
+  //     node: level,
+  //     nodeId: id,
+  //     typeCommand: type.value,
+  //     position: posType.value ? posType.value : "",
+  //     posLevel: posLevel.value ? posLevel.value : "",
+  //     posType: position.value ? position.value : "",
+  //     isAll: isAll.value,
+  //     isBlank: isBlank.value,
+  //   };
+
+  //   await http
+  //     .post(config.API.orgPosPlacement, body)
+  //     .then((res) => {
+  //       const dataMain: PositionMain[] = [];
+  //       posMasterMain.value = res.data.result.data;
+
+  //       res.data.result.data.forEach((e: PositionNo) => {
+  //         const p = e.positions;
+  //         if (p.length !== 0) {
+  //           const a = p.find((el: Positions) => el.positionIsSelected === true);
+  //           const { id, ...rest } = a ? a : p[0];
+  //           const data: any = { ...e, ...rest };
+  //           dataMain.push(data);
+  //         }
+  //       });
+  //       const listPosNo: DataPositionNo[] = dataMain.map((e: PositionMain) => ({
+  //         id: e.id,
+  //         isPosition: e.isPosition,
+  //         posMasterNo:
+  //           e.orgShortname +
+  //           (e.posMasterNoPrefix != null ? e.posMasterNoPrefix : "") +
+  //           e.posMasterNo +
+  //           (e.posMasterNoSuffix != null ? e.posMasterNoSuffix : ""),
+  //         positionName: e.positionName,
+  //         posTypeName: e.posTypeName,
+  //         posLevelName: e.posLevelName,
+  //         positionIsSelected: e.positionIsSelected
+  //           ? e.fullNameCurrentHolder
+  //           : "-",
+  //         isSit: e.isSit,
+  //         positions: e.positions,
+  //         node: e.node,
+  //         nodeId: e.nodeId,
+  //       }));
+
+  //       positionNo.value = listPosNo;
+  //       positionData.value = listPosNo;
+  //     })
+  //     .catch((err) => {
+  //       messageError($q, err);
+  //     })
+  //     .finally(() => {
+  //       setTimeout(() => {
+  //         hideLoader();
+  //       }, 1000);
+  //     });
+}
+
+/**
+ * funtion เลือกข้อมูล Tree
+ * @param data ข่อมูล Tree
+ */
+function updateSelected(data: DataTree) {
+  positionId.value = "";
+  seletcId.value = "";
+  selectedPos.value = [];
+  datePos.value = new Date();
+
+  nodeId.value = data.orgTreeId ? data.orgTreeId : "";
+  nodeLevel.value = data.orgLevel;
+  getDataTable(data.orgTreeId, data.orgLevel);
+}
+
+/** ดึงข้อมูล active */
+async function getActive() {
+  showLoader();
+  await http
+    .get(config.API.activeOrganization)
+    .then((res) => {
+      const data = res.data.result;
+
+      formActive.activeId = data.activeId;
+      formActive.activeName = data.activeName;
+      formActive.draftId = data.draftId;
+      formActive.draftName = data.draftName;
+      formActive.orgPublishDate = data.orgPublishDate;
+      formActive.isPublic = data.isPublic;
+
+      getTreeData(data.activeId);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** ดึงข้อมูล หน่วยงาน */
+async function getTreeData(id: string) {
+  showLoader();
+  await http
+    .get(config.API.orgByid(id))
+    .then((res) => {
+      const data = res.data.result;
+      nodes.value = data;
+      filterItemsTaps(data);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function filterItemsTaps(data: TreeMain[]) {
+  let orgTreeIds: string[] = [];
+  for (const child of data) {
+    orgTreeIds.push(child.orgTreeId);
+    if (child.children) {
+      orgTreeIds = orgTreeIds.concat(filterItemsTaps(child.children));
+    }
+  }
+  itemTaps.value = orgTreeIds;
+  return orgTreeIds;
+}
+
+/**
+ * function เลือกเลขที่ตำแหน่ง
+ * @param id เลชที่ตำแหน่ง
+ */
+async function onClickSelectPos(id: string) {
+  positionData.value = positionNo.value;
+  positionId.value = id;
+  selectedPos.value = [];
+  const position: DataPositionNo = positionData.value.find(
+    (e: DataPositionNo) => e.id === id
+  );
+
+  // หาตำแหน่ง
+  if (position) {
+    rowsPosition.value = position.positions;
+    if (seletcId.value) {
+      selectedPos.value = rowsPosition.value.filter(
+        (e) => e.id === seletcId.value
+      );
+    }
+  }
+}
+
+/**
+ * function fetch ข้อมูล expanded tree
+ * @param level levelTree
+ * @param id treeId
+ */
+async function fetchPosFind(level: number, id: string) {
+  showLoader();
+  const body = {
+    node: level,
+    nodeId: id,
+  };
+  await http
+    .post(config.API.orgPosFind, body)
+    .then((res) => {
+      const data = res.data.result;
+      expanded.value = data;
+      nodeId.value = id;
+      positionId.value = props?.dataRows?.posmasterId;
+      seletcId.value = props?.dataRows?.positionId;
+      datePos.value = props?.dataRows?.reportingDateFullDate;
+
+      getDataTable(nodeId.value, level);
+    })
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    });
+}
+
+watch(
+  () => modal.value,
+  async (n) => {
+    if (n == true) {
+      getActive();
+    }
+  }
+);
+
+watch(
+  () => isAll.value,
+  (value, oldVal) => {
+    if (value !== oldVal) {
+      getDataTable(nodeId.value, nodeLevel.value);
+    }
+  }
+);
+
+watch(
+  () => isBlank.value,
+  (value, oldVal) => {
+    if (value !== oldVal) {
+      getDataTable(nodeId.value, nodeLevel.value);
+    }
+  }
+);
+
+watch(
+  () => positionId.value,
+  (n) => {
+    if (n) {
+      onClickSelectPos(n);
+    }
+  }
+);
+function onSubmit() {
+  if (nodeId.value == "") {
+    dialogMessageNotify($q, "กรุณาเลือกตำแหน่ง");
+  } else {
+    dialogConfirm($q, async () => {
+      props.saveData?.();
+      close();
+    });
+  }
+}
+
+function resetFilter() {
+  filter.value = "";
+  filterRef.value!.focus();
+}
+</script>
+<template>
+  <q-dialog v-model="modal" persistent full-width>
+    <q-card class="no-scroll">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader :tittle="title" :close="close" />
+        <q-separator />
+        <q-card-section style="max-height: 80vh" class="scroll">
+          <div class="row">
+            <q-card
+              bordered
+              class="col-12 col-sm-3 scroll q-pa-sm"
+              style="height: 75vh"
+            >
+              <q-input dense outlined v-model="filter" label="ค้นหา">
+                <template v-slot:append>
+                  <q-icon
+                    v-if="filter !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="filter = ''"
+                  />
+                </template>
+              </q-input>
+              <q-tree
+                class="q-pa-sm q-gutter-sm"
+                dense
+                :nodes="lazy"
+                node-key="orgTreeId"
+                label-key="orgTreeName"
+                :filter="filter"
+                no-results-label="ไม่พบข้อมูลที่ค้นหา"
+                no-nodes-label="ไม่มีข้อมูล"
+                v-model:expanded="expanded"
+              >
+                <template v-slot:default-header="prop">
+                  <q-item
+                    @click.stop="updateSelected(prop.node)"
+                    clickable
+                    :active="nodeId == prop.node.orgTreeId"
+                    active-class="my-list-link text-primary text-weight-medium"
+                    class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                  >
+                    <div>
+                      <div class="text-weight-medium">
+                        {{ prop.node.orgTreeName }}
+                      </div>
+                      <div class="text-weight-light">
+                        {{
+                          prop.node.orgCode == null ? null : prop.node.orgCode
+                        }}
+                        {{
+                          prop.node.orgTreeShortName == null
+                            ? null
+                            : prop.node.orgTreeShortName
+                        }}
+                      </div>
+                    </div>
+                  </q-item>
+                </template>
+              </q-tree>
+            </q-card>
+            <q-card bordered class="col-12 col-sm-9 q-pa-sm">
+              <div class="col-12 row q-py-sm items-center q-col-gutter-sm">
+                <q-space />
+                <div class="items-center" style="display: flex">
+                  <q-checkbox
+                    keep-color
+                    v-model="isAll"
+                    label="แสดงทั้งหมด"
+                    color="primary"
+                  >
+                    <q-tooltip>แสดงทั้งหมด</q-tooltip>
+                  </q-checkbox>
+                  <q-input
+                    standout
+                    dense
+                    v-model="filterModal"
+                    ref="filterRef"
+                    outlined
+                    debounce="300"
+                    placeholder="ค้นหา"
+                    style="max-width: 200px"
+                    class="q-ml-sm"
+                  >
+                    <template v-slot:append>
+                      <q-icon v-if="filterModal == ''" name="search" />
+                      <q-icon
+                        v-if="filterModal !== ''"
+                        name="clear"
+                        class="cursor-pointer"
+                        @click="resetFilter"
+                      />
+                    </template>
+                  </q-input>
+
+                  <q-select
+                    v-model="visibleColumns"
+                    :display-value="$q.lang.table.columns"
+                    multiple
+                    outlined
+                    dense
+                    :options="columns"
+                    options-dense
+                    option-value="name"
+                    map-options
+                    emit-value
+                    style="min-width: 150px"
+                    class="gt-xs q-ml-sm"
+                  />
+                </div>
+                <div class="col-12">
+                  <d-table
+                    :rows="rows"
+                    :columns="columns"
+                    :visible-columns="visibleColumns"
+                    :filter="filterModal"
+                    row-key="id"
+                    selection="multiple"
+                    v-model:selected="selectedModal"
+                    :rows-per-page-options="[10, 25, 50, 100]"
+                  >
+                    <template v-slot:header="props">
+                      <q-tr :props="props">
+                        <q-th auto-width>
+                          <q-checkbox
+                            keep-color
+                            color="primary"
+                            dense
+                            v-model="props.selected"
+                          />
+                        </q-th>
+                        <q-th
+                          v-for="col in props.cols"
+                          :key="col.name"
+                          :props="props"
+                          style="color: #000000; font-weight: 500"
+                        >
+                          <span class="text-weight-medium">{{
+                            col.label
+                          }}</span>
+                        </q-th>
+                      </q-tr>
+                    </template>
+                    <template v-slot:body="props">
+                      <q-tr :props="props" class="cursor-pointer">
+                        <q-td auto-width>
+                          <q-checkbox
+                            keep-color
+                            color="primary"
+                            dense
+                            v-model="props.selected"
+                          />
+                        </q-td>
+                        <q-td
+                          v-for="col in props.cols"
+                          :key="col.name"
+                          :props="props"
+                        >
+                          <div v-if="col.name == 'no'">
+                            {{ props.rowIndex + 1 }}
+                          </div>
+
+                          <div v-else>
+                            {{ col.value }}
+                          </div>
+                        </q-td>
+                      </q-tr>
+                    </template>
+                  </d-table>
+                </div>
+              </div>
+            </q-card>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+<style scoped>
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
+</style>
diff --git a/src/modules/06_retirement/components/resign/DetailByidDeceased.vue b/src/modules/06_retirement/components/resign/DetailByidDeceased.vue
index aa02175fa..d9eb74fe5 100644
--- a/src/modules/06_retirement/components/resign/DetailByidDeceased.vue
+++ b/src/modules/06_retirement/components/resign/DetailByidDeceased.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
@@ -11,10 +11,15 @@ import type { QTableProps } from "quasar";
 import type {
   requestSendNoti,
   DataCopyOrder,
+  FormActive,
   ResponseOrganiz,
+  OrgTree,
+  TreeMain,
 } from "@/modules/06_retirement/interface/response/Deceased";
 import { useRouter, useRoute } from "vue-router";
 
+import DialogOrgSelectOneStep from "@/components/Dialogs/DialogOrgSelectOneStep.vue";
+
 /** Use */
 const router = useRouter();
 const route = useRoute();
@@ -40,6 +45,7 @@ const props = defineProps({
     default: () => console.log("not function"),
   },
 });
+const itemTaps = ref<string[]>();
 const profileId = ref<string>(route.params.id.toString());
 const next = () => props.next();
 
@@ -47,59 +53,25 @@ const next = () => props.next();
 const myForm = ref<QForm | null>(null);
 const filterRef = ref<QInput>();
 const filter = ref<string>("");
-const modal = ref<boolean>(false);
-const search = ref<string>("");
-const expanded = ref<string[]>([]);
-const selected = ref<string>("");
-const nodesTree = ref<treeTab[]>([]);
-const selectedModal = ref<ResponseOrganiz[]>([]);
-const filterModal = ref<string>("");
+const modalSelectOrg = ref<boolean>(false);
+
+const nodes = ref<Array<OrgTree>>([]);
+const selectedModal = ref<any[]>([]);
 const rows = ref<DataCopyOrder[]>([]);
 const editRows = ref<DataCopyOrder[]>([]);
 
-/** คอลัมน์Modal ที่แสดง */
-const visibleColumnsModal = ref<String[]>(["no", "idCard", "name", "position"]);
+/** active form */
+const formActive = reactive<FormActive>({
+  activeId: "",
+  activeName: "",
+  draftId: "",
+  draftName: "",
+  orgPublishDate: null,
+  isPublic: false,
+});
 
 /** คอลัมน์Modal  */
 const rowsModal = ref<ResponseOrganiz[]>([]);
-const columnsModal = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    field: "no",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "idCard",
-    align: "left",
-    label: "เลขประจำตัวประชาชน",
-    field: "idCard",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อ-นามสกุล",
-    field: "name",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่ง",
-    field: "position",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
 
 /** selcet OPtion */
 const optionSelect = ref<any>([
@@ -172,39 +144,6 @@ onMounted(async () => {
   await getData();
 });
 
-/**
- * ดึงข้อมูล list จาก api
- * @param id id ของข้อมูล
- */
-const listModal = async (id: string) => {
-  showLoader();
-  await http
-    .get(config.API.copyOrderPersonsId(id))
-    .then((res) => {
-      const data = res.data.result;
-      let list: ResponseOrganiz[] = [];
-      data.map((r: ResponseOrganiz) => {
-        list.push({
-          firstName: r.firstName ?? "",
-          idCard: r.idCard ?? "",
-          lastName: r.lastName ?? "",
-          name: r.name ?? "",
-          position: r.position ?? "",
-          prefixId: r.prefixId ?? "",
-          profileId: r.profileId ?? "",
-          unit: r.unit ?? "",
-        });
-      });
-      rowsModal.value = list;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-    });
-};
-
 /** เรียกข้อมูลจาก api */
 const getData = async () => {
   showLoader();
@@ -255,7 +194,7 @@ const getData = async () => {
 /**
  *ฟังก์ชั่น Save
  */
-const saveData = async () => {
+async function saveData() {
   showLoader();
   const persons = selectedModal.value.map((item) => ({
     profileId: item.profileId,
@@ -263,16 +202,16 @@ const saveData = async () => {
   const dataToSend = { Persons: persons };
   await http
     .put(config.API.detailByidDeceased(profileId.value), dataToSend)
-    .then((res) => {})
+    .then((res) => {
+      getData();
+    })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(async () => {
-      clickClose();
-      getData();
       hideLoader();
     });
-};
+}
 
 const resetFilter = () => {
   // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
@@ -291,24 +230,15 @@ const getClass = (val: boolean) => {
   };
 };
 
-/** Close Modal */
-const clickClose = async () => {
-  modal.value = false;
-};
-
 /**
  * กดปุ่มเพิ่มด้านบน table
  */
-const clickAdd = async () => {
-  await nodeTree();
-  selected.value = "";
-  rowsModal.value = [];
-  selectedModal.value = [];
-  modal.value = true;
+function clickAdd() {
+  modalSelectOrg.value = true;
   if (myForm.value !== null) {
     myForm.value.reset();
   }
-};
+}
 
 /**
  * ลบข้อมูล
@@ -317,32 +247,60 @@ const clickDelete = (id: string) => {
   dialogRemove($q, () => deleteData(id));
 };
 
-/**
- *  โหลดโครงสร้าง tree
- */
-const nodeTree = async () => {
+/** ดึงข้อมูล active */
+async function getActive() {
   showLoader();
   await http
-    .get(config.API.profileOrganizRoot)
-    .then((res: any) => {
+    .get(config.API.activeOrganization)
+    .then((res) => {
       const data = res.data.result;
-      nodesTree.value = data;
-      if (data.length > 0) {
-        expanded.value = [data[0].id];
-      }
+
+      formActive.activeId = data.activeId;
+      formActive.activeName = data.activeName;
+      formActive.draftId = data.draftId;
+      formActive.draftName = data.draftName;
+      formActive.orgPublishDate = data.orgPublishDate;
+      formActive.isPublic = data.isPublic;
+
+      getTreeData(data.activeId);
     })
-    .catch((e) => {
-      messageError($q, e);
+    .catch((err) => {
+      messageError($q, err);
     })
     .finally(() => {
       hideLoader();
     });
-};
+}
 
-// เลือกหน่วยงาน
-const onSelected = async (id: string) => {
-  await listModal(id);
-};
+/** ดึงข้อมูล หน่วยงาน */
+async function getTreeData(id: string) {
+  showLoader();
+  await http
+    .get(config.API.orgByid(id))
+    .then((res) => {
+      const data = res.data.result;
+      nodes.value = data;
+      filterItemsTaps(data);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function filterItemsTaps(data: TreeMain[]) {
+  let orgTreeIds: string[] = [];
+  for (const child of data) {
+    orgTreeIds.push(child.orgTreeId);
+    if (child.children) {
+      orgTreeIds = orgTreeIds.concat(filterItemsTaps(child.children));
+    }
+  }
+  itemTaps.value = orgTreeIds;
+  return orgTreeIds;
+}
 
 /**ลบข้อมูล */
 const deleteData = async (id: string) => {
@@ -562,158 +520,10 @@ const updateData = (row: DataCopyOrder) => {
     </div>
   </div>
 
-  <q-dialog v-model="modal" persistent full-width>
-    <q-card>
-      <DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" :close="clickClose" />
-      <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-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
-                  :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-scroll-area>
-            </q-card>
-          </div>
-          <div class="col-xs-12 col-sm-7">
-            <div class="col-12 row q-py-sm items-center">
-              <q-space />
-              <div class="items-center" style="display: flex">
-                <q-input
-                  standout
-                  dense
-                  v-model="filterModal"
-                  ref="filterRef"
-                  outlined
-                  debounce="300"
-                  placeholder="ค้นหา"
-                  style="max-width: 200px"
-                  class="q-ml-sm"
-                >
-                  <template v-slot:append>
-                    <q-icon v-if="filterModal == ''" name="search" />
-                    <q-icon
-                      v-if="filterModal !== ''"
-                      name="clear"
-                      class="cursor-pointer"
-                      @click="resetFilter"
-                    />
-                  </template>
-                </q-input>
-
-                <q-select
-                  v-model="visibleColumnsModal"
-                  :display-value="$q.lang.table.columns"
-                  multiple
-                  outlined
-                  dense
-                  :options="columnsModal"
-                  options-dense
-                  option-value="name"
-                  map-options
-                  emit-value
-                  style="min-width: 150px"
-                  class="gt-xs q-ml-sm"
-                />
-              </div>
-            </div>
-            <d-table
-              :rows="rowsModal"
-              :columns="columnsModal"
-              :visible-columns="visibleColumnsModal"
-              :filter="filterModal"
-              row-key="profileId"
-              selection="multiple"
-              v-model:selected="selectedModal"
-            >
-              <template v-slot:header-selection="scope">
-                <q-checkbox
-                  keep-color
-                  color="primary"
-                  dense
-                  v-model="scope.selected"
-                />
-              </template>
-
-              <template v-slot:body-selection="scope">
-                <!-- <q-checkbox
-                    keep-color
-                    color="primary"
-                    dense
-                    :model-value="scope.selected"
-                    @update:model-value="
-                      (val, evt) => {
-                        Object.getOwnPropertyDescriptor(scope, 'selected').set(
-                          val,
-                          evt
-                        );
-                      }
-                    "
-                  /> -->
-                <q-checkbox
-                  keep-color
-                  color="primary"
-                  dense
-                  v-model="scope.selected"
-                />
-              </template>
-
-              <template v-slot:body-cell="props">
-                <q-td :props="props">
-                  <div v-if="props.col.name == 'no'">
-                    {{ props.rowIndex + 1 }}
-                  </div>
-
-                  <div v-else>
-                    {{ props.value }}
-                  </div>
-                </q-td>
-              </template>
-            </d-table>
-          </div>
-        </div>
-      </q-card-section>
-      <q-separator />
-      <q-card-actions align="right">
-        <!-- <q-btn
-            flat
-            round
-            color="public"
-            icon="mdi-content-save-outline"
-            @click="clickClose"
-          >
-            <q-tooltip>บันทึก</q-tooltip>
-          </q-btn> -->
-        <q-btn
-          dense
-          unelevated
-          label="บันทึก"
-          color="public"
-          @click="saveData"
-          class="q-px-md"
-        />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
+  <DialogOrgSelectOneStep
+    v-model:modal="modalSelectOrg"
+    :title="'เลือกรายชื่อตามหน่วยงาน'"
+    v-model:selectedModal="selectedModal"
+    :saveData="saveData"
+  />
 </template>
diff --git a/src/modules/06_retirement/interface/response/Deceased.ts b/src/modules/06_retirement/interface/response/Deceased.ts
index b9ae1c2d9..1c7ce3fb2 100644
--- a/src/modules/06_retirement/interface/response/Deceased.ts
+++ b/src/modules/06_retirement/interface/response/Deceased.ts
@@ -53,9 +53,67 @@ interface ResDetailDeceased {
   isActive: boolean;
   createdAt: string;
 }
+
+interface FormActive {
+  activeId: string;
+  activeName: string;
+  draftId: string;
+  draftName: string;
+  orgPublishDate: Date | null;
+  isPublic: boolean;
+}
+
+interface OrgTree {
+  orgTreeId: string;
+  orgRootId: string;
+  orgLevel: number;
+  orgTreeName: string;
+  orgTreeShortName: string;
+  orgTreeCode: string;
+  orgCode: string;
+  orgTreeRank: string;
+  orgTreeOrder: number | null;
+  orgRootCode: string;
+  orgTreePhoneEx: string;
+  orgTreePhoneIn: string;
+  orgTreeFax: string;
+  orgRevisionId: string;
+  children: OrgTree[];
+}
+
+interface TreeMain {
+  children: TreeMain[]; // ปรับเป็นชนิดข้อมูลที่ถูกต้องตามโครงสร้างของ children ถ้าเป็นไปได้
+  orgCode: string;
+  orgLevel: number;
+  orgName: string;
+  orgRevisionId: string;
+  orgRootName: string;
+  orgTreeCode: string;
+  orgTreeFax: string;
+  orgTreeId: string;
+  orgTreeName: string;
+  orgTreeOrder: number;
+  orgTreePhoneEx: string;
+  orgTreePhoneIn: string;
+  orgTreeRank: string;
+  orgTreeShortName: string;
+  totalPosition: number;
+  totalPositionCurrentUse: number;
+  totalPositionCurrentVacant: number;
+  totalPositionNextUse: number;
+  totalPositionNextVacant: number;
+  totalRootPosition: number;
+  totalRootPositionCurrentUse: number;
+  totalRootPositionCurrentVacant: number;
+  totalRootPositionNextUse: number;
+  totalRootPositionNextVacant: number;
+}
 export type {
   requestSendNoti,
   DataCopyOrder,
   ResponseOrganiz,
   ResDetailDeceased,
+  FormActive,
+  OrgTree,
+  TreeMain
 };
diff --git a/src/modules/10_order/components/step/step03.vue b/src/modules/10_order/components/step/step03.vue
index a9158b8b7..fe6eeffe0 100644
--- a/src/modules/10_order/components/step/step03.vue
+++ b/src/modules/10_order/components/step/step03.vue
@@ -16,7 +16,7 @@ import type {
 import type { RequestCopyOrder } from "@/modules/05_placement/interface/request/Order";
 import { useRoute } from "vue-router";
 import type { DataOption } from "@/modules/10_order/interface/index/Main";
-
+import DialogOrgSelectOneStep from "@/components/Dialogs/DialogOrgSelectOneStep.vue";
 const props = defineProps({
   next: {
     type: Function,
@@ -245,6 +245,7 @@ const getData = async (id: string) => {
 };
 // เลือกรายชื่อจากหน่วยงาน
 const saveData = async () => {
+  
   const id = route.params.orderid
     ? route.params.orderid.toString()
     : localStorage.getItem("orderId")
@@ -531,7 +532,7 @@ const updateData = (row: DataCopyOrder) => {
     </div>
   </div>
 
-  <q-dialog v-model="modal" persistent full-width>
+  <!-- <q-dialog v-model="modal" persistent full-width>
     <q-card>
       <DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" :close="clickClose" />
       <q-separator />
@@ -661,5 +662,12 @@ const updateData = (row: DataCopyOrder) => {
         />
       </q-card-actions>
     </q-card>
-  </q-dialog>
+  </q-dialog> -->
+
+  <DialogOrgSelectOneStep
+    v-model:modal="modal"
+    :title="'เลือกรายชื่อตามหน่วยงาน'"
+    v-model:selectedModal="selectedModal"
+    :saveData="saveData"
+  />
 </template>