From 11b8ab689abf1488c759675ac85100ef76e14b0b Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Thu, 2 May 2024 14:41:30 +0700
Subject: [PATCH] component

---
 src/components/Dialogs/DialogOrgSelect.vue | 828 +++++++++++++++++++++
 src/interface/request/orgSelect/org.ts     | 163 ++++
 2 files changed, 991 insertions(+)
 create mode 100644 src/components/Dialogs/DialogOrgSelect.vue
 create mode 100644 src/interface/request/orgSelect/org.ts

diff --git a/src/components/Dialogs/DialogOrgSelect.vue b/src/components/Dialogs/DialogOrgSelect.vue
new file mode 100644
index 000000000..c4a861324
--- /dev/null
+++ b/src/components/Dialogs/DialogOrgSelect.vue
@@ -0,0 +1,828 @@
+<script setup lang="ts">
+import DialogHeader from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { ref, watch, reactive } from "vue";
+import type { QTableProps } from "quasar";
+import CardPosition from "@/modules/05_placement/components/PersonalList/CardPosition.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  OrgTree,
+  DataTree,
+  PositionMain,
+  PositionNo,
+  Positions,
+  DataPositionNo,
+  FormActive,
+  TreeMain,
+} from "@/interface/request/orgSelect/org";
+
+const props = defineProps({
+  dataRows: {
+    type: Object,
+    require: true,
+  },
+  onSubmit:Function
+});
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  showLoader,
+  messageError,
+  hideLoader,
+  date2Thai,
+  dialogMessageNotify,
+} = mixin;
+
+const modal = defineModel<boolean>("modal", { required: true });
+const title = defineModel<string>("title", { required: true });
+const type = defineModel<any>("type", { required: true });
+
+const posType = defineModel<any>("posType", { required: true });
+const posLevel = defineModel<any>("posLevel", { required: true });
+const position = defineModel<any>("position", { required: true });
+
+const filter = ref<string>("");
+const isAll = ref<boolean>(false);
+const isBlank = ref<boolean>(false);
+const posMasterMain = ref<any>([]);
+const positionNo = ref<DataPositionNo[]>();
+const itemTaps = ref<string[]>();
+const filters = ref<string>("");
+const positionId = ref<string>("");
+const selectedPos = ref<any[]>([]);
+const seletcId = ref<string>("");
+const datePos = ref<Date>(new Date());
+const rowsPosition = ref<Positions[]>([]);
+const positionData = ref<any>();
+/** active form */
+const formActive = reactive<FormActive>({
+  activeId: "",
+  activeName: "",
+  draftId: "",
+  draftName: "",
+  orgPublishDate: null,
+  isPublic: false,
+});
+/** node */
+const nodes = ref<Array<OrgTree>>([]);
+const lazy = ref(nodes);
+const expanded = ref<string[]>([]);
+const nodeLevel = ref<number>(0);
+const nodeId = ref<string>(""); // id ของ Tree
+
+/** columns*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "isPosition",
+    align: "left",
+    label: "",
+    sortable: true,
+    field: "isPosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posMasterNo",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posMasterNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    field: "positionName",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionIsSelected",
+    align: "left",
+    label: "คนครอง",
+    sortable: true,
+    field: "positionIsSelected",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const columnsPostition = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionField",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionField",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "ประเภทตำเเหน่ง",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posExecutiveName",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "posExecutiveName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionExecutiveField",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveField",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionArea",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
+    field: "positionArea",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const visibleColumns = ref<string[]>([
+  "isPosition",
+  "no",
+  "posMasterNo",
+  "positionName",
+  "posTypeName",
+  "posLevelName",
+  "positionIsSelected",
+]);
+
+/** ปิด dialog */
+function close() {
+  modal.value = false;
+
+  type.value = null;
+  filter.value = "";
+  isAll.value = false;
+  isBlank.value = false;
+
+  nodes.value = [];
+  expanded.value = [];
+  nodeLevel.value = 0;
+  nodeId.value = "";
+}
+
+async function getDataTable(id: string, level: number = 0) {
+  showLoader();
+  const body = {
+    node: level,
+    nodeId: id,
+    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
+      );
+    }
+  }
+}
+
+watch(
+  () => modal.value,
+  (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() {
+  dialogConfirm($q, () => {
+    console.log('not save')
+  });
+}
+</script>
+<template>
+  <q-dialog v-model="modal" persistent full-width>
+    <q-card>
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader :tittle="title" :close="close" />
+        <q-separator />
+        <q-card-section>
+          <div class="row">
+            <q-card
+              bordered
+              class="col-12 col-sm-3 scroll q-pa-sm"
+              style="height: 75vh"
+            >
+              <q-toolbar style="padding: 0">
+                <q-toolbar-title class="text-subtitle2 text-bold"
+                  >เลือกหน่วยงาน/ส่วนราชการ</q-toolbar-title
+                >
+              </q-toolbar>
+
+              <q-input dense outlined v-model="filter" label="ค้นหา">
+                <template v-slot:append>
+                  <q-icon
+                    v-if="filter !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="filter = ''"
+                  />
+                </template>
+              </q-input>
+              <q-tree
+                class="q-pa-sm q-gutter-sm"
+                dense
+                default-expand-all
+                :nodes="lazy"
+                node-key="orgTreeId"
+                label-key="orgTreeName"
+                :filter="filter"
+                no-results-label="ไม่พบข้อมูลที่ค้นหา"
+                no-nodes-label="ไม่มีข้อมูล"
+                v-model:expanded="expanded"
+              >
+                <template v-slot:default-header="prop">
+                  <q-item
+                    @click.stop="updateSelected(prop.node)"
+                    clickable
+                    :active="nodeId == prop.node.orgTreeId"
+                    active-class="my-list-link text-primary text-weight-medium"
+                    class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                  >
+                    <div>
+                      <div class="text-weight-medium">
+                        {{ prop.node.orgTreeName }}
+                      </div>
+                      <div class="text-weight-light">
+                        {{
+                          prop.node.orgCode == null ? null : prop.node.orgCode
+                        }}
+                        {{
+                          prop.node.orgTreeShortName == null
+                            ? null
+                            : prop.node.orgTreeShortName
+                        }}
+                      </div>
+                    </div>
+                  </q-item>
+                </template>
+              </q-tree>
+            </q-card>
+            <q-card bordered class="col-12 col-sm-9 q-pa-sm">
+              <q-tab-panels
+                v-model="nodeId"
+                animated
+                transition-prev="jump-up"
+                transition-next="jump-up"
+              >
+                <q-tab-panel
+                  v-for="(item, index) in itemTaps"
+                  :key="index"
+                  :name="item"
+                >
+                  <div class="column q-col-gutter-sm" style="height: 70vh">
+                    <!-- เลือกเลขที่ตำแหน่ง -->
+                    <div class="col-7">
+                      <q-card
+                        bordered
+                        style="height: 100%; border: 1px solid #d6dee1"
+                      >
+                        <div
+                          class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+                        >
+                          เลือกเลขที่ตำแหน่ง
+                        </div>
+                        <div class="col-12"><q-separator /></div>
+                        <div class="col-12 q-pa-md">
+                          <q-toolbar style="padding: 0px">
+                            <div class="row q-gutter-md">
+                              <q-checkbox
+                                keep-color
+                                v-model="isBlank"
+                                label="แสดงเฉพาะตำแหน่งว่าง"
+                                color="primary"
+                              >
+                                <q-tooltip>แสดงเฉพาะตำแหน่งว่าง </q-tooltip>
+                              </q-checkbox>
+                            </div>
+                            <q-space />
+
+                            <div class="row q-gutter-md">
+                              <q-checkbox
+                                keep-color
+                                v-model="isAll"
+                                label="แสดงตำแหน่งทั้งหมด"
+                                color="primary"
+                              >
+                                <q-tooltip
+                                  >แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
+                                >
+                              </q-checkbox>
+                              <div>
+                                <q-input
+                                  outlined
+                                  dense
+                                  v-model="filters"
+                                  label="ค้นหา"
+                                >
+                                  <template v-slot:append>
+                                    <q-icon name="search" color="grey-5" />
+                                  </template>
+                                </q-input>
+                              </div>
+                              <div>
+                                <q-select
+                                  v-model="visibleColumns"
+                                  multiple
+                                  outlined
+                                  dense
+                                  options-dense
+                                  emit-value
+                                  map-options
+                                  :options="columns"
+                                  option-value="name"
+                                  options-cover
+                                  style="min-width: 180px"
+                                />
+                              </div>
+                            </div>
+                          </q-toolbar>
+                          <d-table
+                            ref="table"
+                            :columns="columns"
+                            :rows="positionData"
+                            :filter="filters"
+                            row-key="id"
+                            flat
+                            bordered
+                            :paging="true"
+                            dense
+                            :rows-per-page-options="[10, 25, 50, 100]"
+                            class="tableTb"
+                            :visible-columns="visibleColumns"
+                          >
+                            <template v-slot:header="props">
+                              <q-tr :props="props">
+                                <q-th
+                                  v-for="col in props.cols"
+                                  :key="col.name"
+                                  :props="props"
+                                >
+                                  <span class="text-weight-medium">{{
+                                    col.label
+                                  }}</span>
+                                </q-th>
+                              </q-tr>
+                            </template>
+                            <template v-slot:body="props">
+                              <q-tr :props="props" class="cursor-pointer">
+                                <q-td
+                                  v-for="col in props.cols"
+                                  :key="col.name"
+                                  :props="props"
+                                  @click="onClickSelectPos(props.row.id)"
+                                  :class="
+                                    props.row.id === positionId
+                                      ? 'bg-blue-2'
+                                      : ''
+                                  "
+                                >
+                                  <div v-if="col.name == 'no'">
+                                    {{ props.rowIndex + 1 }}
+                                  </div>
+                                  <div v-else-if="col.name === 'posMasterNo'">
+                                    {{
+                                      props.row.isSit
+                                        ? col.value + " " + "(ทับที่)"
+                                        : col.value
+                                    }}
+                                  </div>
+                                  <div v-else-if="col.name === 'isPosition'">
+                                    <div v-if="col.value">
+                                      <q-icon
+                                        name="done"
+                                        color="primary"
+                                        size="24px"
+                                      >
+                                        <q-tooltip>ตรงตามตำแหน่ง </q-tooltip>
+                                      </q-icon>
+                                    </div>
+                                  </div>
+
+                                  <div v-else>
+                                    {{ col.value ? col.value : "-" }}
+                                  </div>
+                                </q-td>
+                              </q-tr>
+                            </template>
+                          </d-table>
+                        </div>
+                      </q-card>
+                    </div>
+
+                    <!-- เลือกตำแหน่ง -->
+                    <div class="col-5">
+                      <q-card
+                        bordered
+                        style="height: 100%; border: 1px solid #d6dee1"
+                      >
+                        <div
+                          class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+                        >
+                          เลือกตำแหน่ง
+                        </div>
+                        <div class="col-12"><q-separator /></div>
+                        <q-tab-panels
+                          v-model="positionId"
+                          animated
+                          swipeable
+                          vertical
+                          transition-prev="jump-up"
+                          transition-next="jump-up"
+                        >
+                          <q-tab-panel
+                            v-for="(item, index) in positionData"
+                            :key="index"
+                            :name="item.id"
+                          >
+                            <div class="col-12">
+                              <q-toolbar style="padding: 0px">
+                                <datepicker
+                                  menu-class-name="modalfix"
+                                  v-model="datePos"
+                                  :locale="'th'"
+                                  autoApply
+                                  borderless
+                                  :enableTimePicker="false"
+                                  week-start="0"
+                                  :min-date="datePos"
+                                >
+                                  <template #year="{ year }">
+                                    {{ year + 543 }}
+                                  </template>
+                                  <template #year-overlay-value="{ value }">
+                                    {{ parseInt(value + 543) }}
+                                  </template>
+                                  <template #trigger>
+                                    <q-input
+                                      ref="dateRef"
+                                      outlined
+                                      dense
+                                      hide-bottom-space
+                                      :model-value="
+                                        datePos != null
+                                          ? date2Thai(datePos)
+                                          : null
+                                      "
+                                      label="วันที่รายงานตัว"
+                                    >
+                                      <template v-slot:prepend>
+                                        <q-icon
+                                          name="event"
+                                          class="cursor-pointer"
+                                          style="color: var(--q-primary)"
+                                        >
+                                        </q-icon>
+                                      </template>
+                                    </q-input>
+                                  </template>
+                                </datepicker>
+                              </q-toolbar>
+                              <d-table
+                                ref="table"
+                                :columns="columnsPostition"
+                                :rows="rowsPosition"
+                                row-key="id"
+                                flat
+                                bordered
+                                :paging="true"
+                                dense
+                                :rows-per-page-options="[10, 25, 50, 100]"
+                                class="tableTb"
+                                selection="single"
+                                v-model:selected="selectedPos"
+                              >
+                                <template v-slot:header-selection="scope">
+                                  <q-checkbox
+                                    keep-color
+                                    color="primary"
+                                    dense
+                                    v-model="scope.checkBox"
+                                  />
+                                </template>
+                                <template v-slot:header="props">
+                                  <q-tr :props="props">
+                                    <q-th auto-width />
+                                    <q-th
+                                      v-for="col in props.cols"
+                                      :key="col.name"
+                                      :props="props"
+                                    >
+                                      <span class="text-weight-medium">{{
+                                        col.label
+                                      }}</span>
+                                    </q-th>
+                                  </q-tr>
+                                </template>
+                                <template v-slot:body="props">
+                                  <q-tr :props="props" class="cursor-pointer">
+                                    <q-td>
+                                      <q-checkbox
+                                        keep-color
+                                        color="primary"
+                                        dense
+                                        v-model="props.selected"
+                                      />
+                                    </q-td>
+                                    <q-td
+                                      v-for="col in props.cols"
+                                      :key="col.name"
+                                      :props="props"
+                                    >
+                                      <div v-if="col.name == 'no'">
+                                        {{ props.rowIndex + 1 }}
+                                      </div>
+                                      <div
+                                        v-else-if="col.name === 'posMasterNo'"
+                                      >
+                                        {{
+                                          props.row.isSit
+                                            ? col.value + " " + "(ทับที่)"
+                                            : col.value
+                                        }}
+                                      </div>
+
+                                      <div v-else>
+                                        {{ col.value ? col.value : "-" }}
+                                      </div>
+                                    </q-td>
+                                  </q-tr>
+                                </template>
+                              </d-table>
+                            </div>
+                          </q-tab-panel>
+                        </q-tab-panels>
+                      </q-card>
+                    </div>
+                  </div>
+                </q-tab-panel>
+              </q-tab-panels>
+            </q-card>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+<style scoped>
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
+</style>
diff --git a/src/interface/request/orgSelect/org.ts b/src/interface/request/orgSelect/org.ts
new file mode 100644
index 000000000..7a1a609e1
--- /dev/null
+++ b/src/interface/request/orgSelect/org.ts
@@ -0,0 +1,163 @@
+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 DataTree {
+  orgTreeId: string;
+  orgRootId?: string;
+  orgLevel: number;
+  orgName: string;
+  orgTreeName: string;
+  orgTreeShortName: string;
+  orgTreeCode: string;
+  orgCode: string;
+  orgTreeRank: string;
+  orgTreeOrder: number;
+  orgRootCode?: string;
+  orgTreePhoneEx: string;
+  orgTreePhoneIn: string;
+  orgTreeFax: string;
+  orgRevisionId: string;
+  orgRootName: string;
+  totalPosition: number;
+  totalPositionCurrentUse: number;
+  totalPositionCurrentVacant: number;
+  totalPositionNextUse: number;
+  totalPositionNextVacant: number;
+  totalRootPosition: number;
+  totalRootPositionCurrentUse: number;
+  totalRootPositionCurrentVacant: number;
+  totalRootPositionNextUse: number;
+  totalRootPositionNextVacant: number;
+
+  children?: DataTree[];
+}
+
+interface PositionMain {
+  fullNameCurrentHolder: string | null;
+  fullNameNextHolder: string | null;
+  id: string;
+  isPosition: boolean;
+  isSit: boolean;
+  orgRootId: string;
+  orgShortname: string;
+  posMasterNo: number;
+  posMasterNoPrefix: string;
+  posMasterNoSuffix: string;
+  posExecutiveId: string;
+  posExecutiveName: string;
+  posLevelId: string;
+  posLevelName: string;
+  posTypeId: string;
+  posTypeName: string;
+  positionArea: string;
+  positionExecutiveField: string;
+  positionField: string;
+  positionIsSelected: boolean;
+  positionName: string;
+  positions: Positions[];
+  node: number;
+  nodeId: string;
+}
+
+interface PositionNo {
+  fullNameCurrentHolder: string | null;
+  fullNameNextHolder: string | null;
+  id: string;
+  isPosition: boolean;
+  isSit: boolean;
+  orgRootId: string;
+  orgShortname: string;
+  posMasterNo: number;
+  posMasterNoPrefix: string;
+  posMasterNoSuffix: string;
+  positions: Positions[];
+}
+
+interface Positions {
+  id: string;
+  posExecutiveId: string;
+  posExecutiveName: string;
+  posLevelId: string;
+  posLevelName: string;
+  posTypeId: string;
+  posTypeName: string;
+  positionArea: string;
+  positionExecutiveField: string;
+  positionField: string;
+  positionIsSelected: boolean;
+  positionName: string;
+}
+
+interface DataPositionNo {
+  id: string;
+  isPosition: boolean;
+  posMasterNo: string;
+  positionName: string;
+  posTypeName: string;
+  posLevelName: string;
+  positionIsSelected: string | null;
+  isSit: boolean;
+  positions: Positions[];
+}
+
+interface FormActive {
+  activeId: string;
+  activeName: string;
+  draftId: string;
+  draftName: string;
+  orgPublishDate: Date | null;
+  isPublic: boolean;
+}
+
+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 {
+  OrgTree,
+  DataTree,
+  PositionMain,
+  PositionNo,
+  Positions,
+  DataPositionNo,
+  FormActive,
+  TreeMain,
+};