From efa8896898fc7be701278da2a55c1b4e61705e2a Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 6 Feb 2024 11:30:51 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20code=20?=
 =?UTF-8?q?=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=AA=E0=B8=A3=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/listView.vue                   |  82 ++++++-----
 .../components/mainTree.vue                   | 127 ++++++++++++------
 .../components/tableTree.vue                  |  78 ++++++++---
 .../interface/index/organizational.ts         |  27 +++-
 .../02_organizationalNew/views/main.vue       |  90 ++++++++-----
 5 files changed, 271 insertions(+), 133 deletions(-)

diff --git a/src/modules/02_organizationalNew/components/listView.vue b/src/modules/02_organizationalNew/components/listView.vue
index d0b0a938c..365ad22db 100644
--- a/src/modules/02_organizationalNew/components/listView.vue
+++ b/src/modules/02_organizationalNew/components/listView.vue
@@ -26,13 +26,16 @@ const store = useOrganizational();
 const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 
-const nodeTree = ref<OrgTree[]>(); // ข้อมูล Tree
+/** props*/
 const historyId = defineModel<string>("historyId", { required: true }); // id ประวัติโครงสร้าง
 const count = defineModel<number>("count", { required: true });
+
+const nodeTree = ref<OrgTree[]>(); // ข้อมูล Tree
 const nodeId = ref<string>(""); // id ของ Tree
 const orgLevel = ref<number>(0); // levelTree
 const isLoad = ref<boolean>(false); // loadTable
 const selected = ref<string>("");
+
 const reqMaster = reactive<FilterMaster>({
   id: "",
   type: 0,
@@ -51,7 +54,6 @@ const posMaster = ref<PosMaster2[]>([]);
  */
 async function fetchDataTree(id: string) {
   showLoader();
-
   await http
     .get(config.API.orgByid(id.toString()))
     .then((res) => {
@@ -119,6 +121,7 @@ async function fetchDataTable(id: string, level: number, action: boolean) {
     });
 }
 
+/** funcion ค้นหาข้อมูลใน Table*/
 async function filterKeyword() {
   reqMaster.page = 1;
   action1.value === false &&
@@ -155,6 +158,7 @@ watch(
   }
 );
 
+/** callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า*/
 watch(
   [() => reqMaster.page, () => reqMaster.pageSize, () => reqMaster.isAll],
   () => {
@@ -197,45 +201,49 @@ watch(
 
           <div v-else class="col-12 row">
             <div class="col-12" v-if="nodeId !== ''">
-            <!-- summary -->
-            <q-card
-              bordered
-              v-if="nodeId"
-              class="row col-12 justify-between list-summary q-gutter-xs bg-grey-1 q-pb-xs q-pr-xs"
-            >
-              <div class="row col q-pa-sm item">
-                <div class="ellipsis">ตำแหน่งทั้งหมด</div>
-                <q-space />
-                <q-badge color="secondary" :label="store.sumPosition.total" />
-              </div>
-              <div class="row col q-pa-sm item">
-                <div class="ellipsis">ตำแหน่งที่มีคนครอง</div>
-                <q-space />
-                <q-badge color="primary" :label="store.sumPosition.use" />
-              </div>
-              <div class="row col q-pa-sm item">
-                <div class="ellipsis">ตำแหน่งว่าง</div>
-                <q-space />
-                <q-badge color="red" :label="store.sumPosition.vacant" />
-              </div>
-            </q-card>
+              <!-- summary -->
+              <q-card
+                bordered
+                v-if="nodeId"
+                class="row col-12 justify-between list-summary q-gutter-xs bg-grey-1 q-pb-xs q-pr-xs"
+              >
+                <div class="row col q-pa-sm item">
+                  <div class="ellipsis">ตำแหน่งทั้งหมด</div>
+                  <q-space />
+                  <q-badge color="secondary" :label="store.sumPosition.total" />
+                </div>
+                <div class="row col q-pa-sm item">
+                  <div class="ellipsis">ตำแหน่งที่มีคนครอง</div>
+                  <q-space />
+                  <q-badge color="primary" :label="store.sumPosition.use" />
+                </div>
+                <div class="row col q-pa-sm item">
+                  <div class="ellipsis">ตำแหน่งว่าง</div>
+                  <q-space />
+                  <q-badge color="red" :label="store.sumPosition.vacant" />
+                </div>
+              </q-card>
 
-            <TableView
-              v-if="nodeId !== ''"
-              v-model:nodeTree="nodeTree"
-              v-model:orgLevel="orgLevel"
-              v-model:treeId="nodeId"
-              v-model:reqMaster="reqMaster"
-              v-model:totalPage="totalPage"
-              v-model:posMaster="posMaster"
-              :fetchDataTable="fetchDataTable"
-              :filterKeyword="filterKeyword"
-              :fetchDataTree="fetchDataTree"
-            />
+              <TableView
+                v-if="nodeId !== ''"
+                v-model:nodeTree="nodeTree"
+                v-model:orgLevel="orgLevel"
+                v-model:treeId="nodeId"
+                v-model:reqMaster="reqMaster"
+                v-model:totalPage="totalPage"
+                v-model:posMaster="posMaster"
+                :fetchDataTable="fetchDataTable"
+                :filterKeyword="filterKeyword"
+                :fetchDataTree="fetchDataTree"
+              />
             </div>
             <div class="row col-12 items-center" v-else>
               <q-banner class="q-pa-lg col-12 text-center">
-                <q-icon name="mdi-hand-pointing-left" size="lg" color="primary" />
+                <q-icon
+                  name="mdi-hand-pointing-left"
+                  size="lg"
+                  color="primary"
+                />
                 <p class="text-grey-9 q-pt-sm">กรุณาเลือกโครงสร้าง</p>
               </q-banner>
             </div>
diff --git a/src/modules/02_organizationalNew/components/mainTree.vue b/src/modules/02_organizationalNew/components/mainTree.vue
index e20abcf03..156b02ce6 100644
--- a/src/modules/02_organizationalNew/components/mainTree.vue
+++ b/src/modules/02_organizationalNew/components/mainTree.vue
@@ -1,26 +1,34 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/** importType*/
 import type { ListMenu } from "@/modules/02_organizationalNew/interface/index/Main";
 import type { OrgTree } from "@/modules/02_organizationalNew/interface/response/organizational";
+import type { DataTree } from "@/modules/02_organizationalNew/interface/index/organizational";
 
 /** importComponents*/
 import DialogAgency from "@/modules/02_organizationalNew/components/DialogFormAgency.vue";
 import DialogStructureDetail from "@/modules/02_organizationalNew/components/StructureDetail.vue";
 import DialogSortAgency from "@/modules/02_organizationalNew/components/DialogSortAgency.vue";
 import DialogHistory from "@/modules/02_organizationalNew/components/DialogHistory.vue";
+
 /** importStore*/
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 import { useCounterMixin } from "@/stores/mixin";
 
+/** use*/
+const $q = useQuasar();
 const store = useOrganizational();
 const { dialogRemove, showLoader, hideLoader, messageError, success } =
   useCounterMixin();
-const $q = useQuasar();
 
+/** props*/
+const nodeTEST = defineModel<OrgTree[]>("nodeTree", { default: [] });
+const nodeId = defineModel<string>("nodeId", { required: true });
+const selected = defineModel<string>("selected", { required: true });
 const props = defineProps({
   fetchDataTree: {
     type: Function,
@@ -32,6 +40,7 @@ const props = defineProps({
   },
 });
 
+/** ListMenuTree*/
 const listAdd = ref<ListMenu[]>([
   {
     label: "เพิ่ม",
@@ -51,12 +60,7 @@ const listAdd = ref<ListMenu[]>([
     type: "DEL",
     color: "red",
   },
-  // {
-  //   label: "สำเนาหน่วยงาน",
-  //   icon: "content_copy",
-  //   type: "COPY",
-  //   color: "blue",
-  // },
+
   {
     label: "ประวัติ",
     icon: "history",
@@ -69,12 +73,6 @@ const listAdd = ref<ListMenu[]>([
     type: "SORT",
     color: "blue-6",
   },
-  // {
-  //   label: "แก้ไขสถานะ",
-  //   icon: "rule",
-  //   type: "STATUS",
-  //   color: "yellow-9",
-  // },
   {
     label: "ดูรายละเอียด",
     icon: "mdi-eye",
@@ -83,24 +81,22 @@ const listAdd = ref<ListMenu[]>([
   },
 ]);
 
-const nodeTEST = defineModel<OrgTree[]>("nodeTree", { default: [] });
-const nodeId = defineModel<string>("nodeId", { required: true });
-const isLoad = defineModel<boolean>("isLoad", { required: true });
-const selected = defineModel<string>("selected", { required: true });
 const filter = ref<string>("");
-
 const nodes = ref<Array<OrgTree>>([]);
 const dataSort = ref<Array<any>>([]);
 const lazy = ref(nodes);
 const expanded = ref<Array<any>>([]);
 const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
 const noData = ref<string>("ไม่มีข้อมูล");
-// const selected = ref("");
 const orgLevel = ref<number>(0);
 const type = ref<number>(0);
 const orgId = ref<string>("");
 
-const updateSelected = (data: any) => {
+/**
+ * funtion เลือกข้อมูล Tree
+ * @param data ข่อมูล Tree
+ */
+function updateSelected(data: DataTree) {
   store.treeId = data.orgTreeId;
   store.level = data.orgLevel;
   if (data.orgTreeId === nodeId.value) {
@@ -117,9 +113,17 @@ const updateSelected = (data: any) => {
       totalPositionNextVacant: data.totalPositionNextVacant,
     });
   }
-};
+}
 
 const breakLoop = ref<boolean>(false);
+
+/**
+ * function แก้ไขโครสร้าง
+ * @param id ID โครงสร้าง
+ * @param type ละดับโครงสร้าง
+ * @param data ข้อมูลโครงสร้าง
+ * @param orgRootCode
+ */
 async function edit(id: string, type: string, data: any, orgRootCode: string) {
   breakLoop.value = false;
   const targetNodeId = id;
@@ -133,6 +137,14 @@ async function edit(id: string, type: string, data: any, orgRootCode: string) {
   }
 }
 
+/**
+ * function แก้ไขโครสร้าง
+ * @param treeNode
+ * @param organizationId ID โครงสร้าง
+ * @param data ข้อมูลโครงสร้าง
+ * @param type ละดับโครงสร้าง
+ * @param orgRootCode
+ */
 function searchAndReplace(
   treeNode: any,
   organizationId: string,
@@ -165,6 +177,11 @@ function searchAndReplace(
   }
 }
 
+/**
+ * function ลบข้อมูลโครงสร้าง
+ * @param rootId RootID
+ * @param treeId TreeID
+ */
 async function deleteUpdate(rootId: string, treeId: string) {
   breakLoop.value = false;
   if (rootId) {
@@ -179,6 +196,12 @@ async function deleteUpdate(rootId: string, treeId: string) {
   }
 }
 
+/**
+ * function ลบข้อมูลโครงสร้าง
+ * @param treeNode ข้อมูล Tree
+ * @param rootId RootID
+ * @param treeId TreeID
+ */
 function deleteNode(treeNode: any, rootId: string, treeId: string): boolean {
   if (treeNode.orgTreeId === rootId) {
     const childrenNew = treeNode.children.filter(
@@ -207,6 +230,11 @@ const actionType = ref<string>("");
 const dataNode = ref<any>();
 const treeId = ref<string>("");
 
+/**
+ * funcion openPopup เพิ่มหน่วยงาน
+ * @param level ระดับโครงสร้าง
+ * @param node ข้อมูล โครงสร้าง
+ */
 function onClickAgency(level: number, node: OrgTree | {}) {
   dialogAgency.value = !dialogAgency.value;
   orgLevel.value = level;
@@ -215,6 +243,11 @@ function onClickAgency(level: number, node: OrgTree | {}) {
 }
 
 const dialogDetail = ref<boolean>(false);
+/**
+ * funtion ดูรายละเอียดโครงสร้าง
+ * @param id ID โครงสร้าง
+ * @param level ระดับโครงสร้าง
+ */
 function onClickDetail(id: string, level: number) {
   showLoader();
   treeId.value = id;
@@ -222,6 +255,10 @@ function onClickDetail(id: string, level: number) {
   orgLevel.value = level;
 }
 
+/**
+ * function openPopup แก้ไขข้อมูลโครงสร้าง
+ * @param node ข้อมูล โครงสร้าง
+ */
 async function onClickEdit(node: OrgTree) {
   dialogAgency.value = !dialogAgency.value;
   actionType.value = "EDIT";
@@ -229,9 +266,14 @@ async function onClickEdit(node: OrgTree) {
   dataNode.value = node;
 }
 
+/**
+ * function ยื่นยันการลบโครงสร้าง
+ * @param type  ระดับโครงสร้าง
+ * @param id  ID โครงสร้าง
+ * @param rootId RootID
+ */
 async function onClickDel(type: number, id: string, rootId: string) {
   const level = store.checkLevel(type);
-
   dialogRemove($q, async () => {
     showLoader();
     await http
@@ -249,14 +291,17 @@ async function onClickDel(type: number, id: string, rootId: string) {
   });
 }
 
+/**
+ * function การจัดลำดับโครงสร้าง
+ * @param id ID โครงสร้าง
+ * @param level ระดับโครงสร้าง
+ */
 async function onClickSort(id: string, level: number) {
   type.value = level;
   modalSortAgency.value = true;
   if (id) {
     breakLoop.value = false;
-
     const orgId = id;
-
     for (let index = 0; index < nodes.value.length; index++) {
       const data = nodes.value[index];
       searchAndReplace(data, orgId);
@@ -287,6 +332,11 @@ async function onClickSort(id: string, level: number) {
   }
 }
 
+/**
+ *  function ดูประวัดโครงสร้าง
+ * @param level ระดับโครงสร้าง
+ * @param id ID โครงสร้าง
+ */
 function onClickHistory(level: number, id: string) {
   type.value = level;
   orgId.value = id;
@@ -299,8 +349,6 @@ watch(
     nodes.value = nodeTEST.value;
   }
 );
-
-onMounted(async () => {});
 </script>
 
 <template>
@@ -323,12 +371,7 @@ onMounted(async () => {});
         <div
           :class="store.typeOrganizational === 'draft' ? 'col-10' : 'col-12'"
         >
-          <q-input
-            dense
-            outlined
-            v-model="filter"
-            label="ค้นหา"
-          >
+          <q-input dense outlined v-model="filter" label="ค้นหา">
             <template v-slot:append>
               <q-icon
                 v-if="filter !== ''"
@@ -425,8 +468,12 @@ onMounted(async () => {});
                         : null
                     "
                   >
-                    <q-item-section avatar style="min-width:20px;">
-                      <q-icon size="17px" :color="item.color" :name="item.icon" />
+                    <q-item-section avatar style="min-width: 20px">
+                      <q-icon
+                        size="17px"
+                        :color="item.color"
+                        :name="item.icon"
+                      />
                     </q-item-section>
                     <div v-if="prop.node.orgLevel === 0">
                       <q-item-section
@@ -487,8 +534,12 @@ onMounted(async () => {});
                       onClickDetail(prop.node.orgTreeId, prop.node.orgLevel)
                     "
                   >
-                  <q-item-section avatar style="min-width:20px;">
-                      <q-icon size="17px" :color="item.color" :name="item.icon" />
+                    <q-item-section avatar style="min-width: 20px">
+                      <q-icon
+                        size="17px"
+                        :color="item.color"
+                        :name="item.icon"
+                      />
                     </q-item-section>
                     <q-item-section>{{ item.label }}</q-item-section>
                   </q-item>
@@ -536,7 +587,7 @@ onMounted(async () => {});
 .tree-container {
   overflow: auto;
   height: 60vh;
-  border: 1px solid #E6E6E7;
+  border: 1px solid #e6e6e7;
   border-radius: 10px;
 }
 </style>
diff --git a/src/modules/02_organizationalNew/components/tableTree.vue b/src/modules/02_organizationalNew/components/tableTree.vue
index 5386412a1..eda46d2a3 100644
--- a/src/modules/02_organizationalNew/components/tableTree.vue
+++ b/src/modules/02_organizationalNew/components/tableTree.vue
@@ -25,10 +25,18 @@ import DialogHistoryPos from "@/modules/02_organizationalNew/components/DialogHi
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 import { useCounterMixin } from "@/stores/mixin";
 
+const $q = useQuasar();
+const stroe = useOrganizational();
 const { showLoader, hideLoader, messageError, success, dialogRemove } =
   useCounterMixin();
-const $q = useQuasar();
 
+/** prosp*/
+const nodeTree = defineModel<any>("nodeTree", { required: true });
+const orgLevel = defineModel<number>("orgLevel", { required: true });
+const treeId = defineModel<string>("treeId", { required: true });
+const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
+const totalPage = defineModel<number>("totalPage", { required: true });
+const posMaster = defineModel<PosMaster2[]>("posMaster", { required: true });
 const props = defineProps({
   filterKeyword: { type: Function, require: true, default: () => {} },
   fetchDataTable: {
@@ -43,16 +51,9 @@ const props = defineProps({
   },
 });
 
-const modalSort = ref<boolean>(false);
-
-const nodeTree = defineModel<any>("nodeTree", { required: true });
-const orgLevel = defineModel<number>("orgLevel", { required: true });
-const treeId = defineModel<string>("treeId", { required: true });
-const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
-const totalPage = defineModel<number>("totalPage", { required: true });
-const posMaster = defineModel<PosMaster2[]>("posMaster", { required: true });
-const stroe = useOrganizational();
+const rowId = ref<string>("");
 const actionType = ref<string>("");
+/** ListMenu Table*/
 const listMenu = ref<ListMenu[]>([
   {
     label: "แก้ไข",
@@ -100,6 +101,7 @@ const document = ref<any>([
   },
 ]);
 
+/** columns*/
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -231,7 +233,11 @@ const columnsExpand = ref<QTableProps["columns"]>([
 ]);
 
 const dialogPosition = ref<boolean>(false);
-const rowId = ref<string>("");
+/**
+ * function  openPopup เพิ่มอัตรากำลัง
+ * @param type ประเภท
+ * @param id id
+ */
 function onClickPosition(type: string, id: string) {
   rowId.value = id;
   actionType.value = type;
@@ -240,11 +246,19 @@ function onClickPosition(type: string, id: string) {
 
 const dialogDetail = ref<boolean>(false);
 const dataDetailPos = ref<DataPosition[]>([]);
+/**
+ * function ดูรายละเอียดประวัติตำแหน่ง
+ * @param data ข้อมูล ประวัติตำแหน่ง
+ */
 function onClickViewDetail(data: DataPosition[]) {
   dialogDetail.value = !dialogDetail.value;
   dataDetailPos.value = data;
 }
 
+/**
+ * function ยืนยันการลบตำแหน่ง
+ * @param id id ตำแหน่ง
+ */
 function onClickDelete(id: string) {
   dialogRemove($q, async () => {
     showLoader();
@@ -263,12 +277,19 @@ function onClickDelete(id: string) {
   });
 }
 
+const modalSort = ref<boolean>(false);
+/** fdunction จัดลำดับตำแหน่ง */
 function onClickSort() {
   modalSort.value = true;
 }
 
 const modalDialogMMove = ref<boolean>(false);
 const typeMove = ref<string>("");
+/**
+ * function openPopup  ย้ายตำแหน่ง
+ * @param id ID ตำแหน่ง
+ * @param type ประเภท [ALL,SINGER]
+ */
 function onClickMovePos(id: string, type: string) {
   modalDialogMMove.value = !modalDialogMMove.value;
   typeMove.value = type;
@@ -276,11 +297,19 @@ function onClickMovePos(id: string, type: string) {
 }
 
 const modalDialogHistoryPos = ref<boolean>(false);
+/**
+ * function ดูประวัติตำแหน่ง
+ * @param id ID ตำแหน่ง
+ */
 function onClickHistoryPos(id: string) {
   modalDialogHistoryPos.value = !modalDialogHistoryPos.value;
   rowId.value = id;
 }
 
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
 function updatePagination(newPagination: NewPagination) {
   reqMaster.value.pageSize = newPagination.rowsPerPage;
   reqMaster.value.page = 1;
@@ -458,9 +487,13 @@ function updatePagination(newPagination: NewPagination) {
                         : null
                     "
                   >
-                    <q-item-section> 
+                    <q-item-section>
                       <div class="row items-center">
-                        <q-icon :color="item.color" size="17px" :name="item.icon" />
+                        <q-icon
+                          :color="item.color"
+                          size="17px"
+                          :name="item.icon"
+                        />
                         <div class="q-pl-md">{{ item.label }}</div>
                       </div>
                     </q-item-section>
@@ -483,17 +516,19 @@ function updatePagination(newPagination: NewPagination) {
                 dense
                 hide-bottom
                 bordered
-                separator="vertical" 
+                separator="vertical"
                 class="custom-header-table-expand"
               >
                 <template v-slot:header="props">
-                  <q-tr :props="props" class=" bg-grey-2">
+                  <q-tr :props="props" class="bg-grey-2">
                     <q-th
                       v-for="col in props.cols"
                       :key="col.name"
                       :props="props"
                     >
-                      <span class="q-px-sm text-body2 text-black">{{ col.label }}</span>
+                      <span class="q-px-sm text-body2 text-black">{{
+                        col.label
+                      }}</span>
                     </q-th>
                   </q-tr>
                 </template>
@@ -503,13 +538,12 @@ function updatePagination(newPagination: NewPagination) {
                       v-for="col in props.cols"
                       :key="col.name"
                       :props="props"
-                      
                     >
-                      <div v-if="col.name == 'no'" class=" text-body2 ">
+                      <div v-if="col.name == 'no'" class="text-body2">
                         {{ props.rowIndex + 1 }}
                       </div>
 
-                      <div v-else class=" text-body2">
+                      <div v-else class="text-body2">
                         {{ col.value }}
                       </div>
                     </q-td>
@@ -569,6 +603,7 @@ function updatePagination(newPagination: NewPagination) {
     :rowId="rowId"
   />
 
+  <!-- ประวัติตำแหน่ง -->
   <DialogHistoryPos v-model:modal="modalDialogHistoryPos" :rowId="rowId" />
 </template>
 
@@ -599,10 +634,9 @@ function updatePagination(newPagination: NewPagination) {
     top: 0;
     padding: 0px;
   }
-  
 }
- .q-table th:last-child, .q-table td:last-child{
+.q-table th:last-child,
+.q-table td:last-child {
   padding: 0px !important;
-  
 }
 </style>
diff --git a/src/modules/02_organizationalNew/interface/index/organizational.ts b/src/modules/02_organizationalNew/interface/index/organizational.ts
index a5e400916..5e067ce05 100644
--- a/src/modules/02_organizationalNew/interface/index/organizational.ts
+++ b/src/modules/02_organizationalNew/interface/index/organizational.ts
@@ -50,4 +50,29 @@ interface FormDetailPosition {
   status: string;
 }
 
-export type { DataPosition, Position, FormDetailPosition };
+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;
+  children?: DataTree[];
+}
+
+export type { DataPosition, Position, FormDetailPosition, DataTree };
diff --git a/src/modules/02_organizationalNew/views/main.vue b/src/modules/02_organizationalNew/views/main.vue
index 05a77ef54..3c3d82c3b 100644
--- a/src/modules/02_organizationalNew/views/main.vue
+++ b/src/modules/02_organizationalNew/views/main.vue
@@ -13,23 +13,25 @@ import ListView from "@/modules/02_organizationalNew/components/listView.vue";
 import StructureView from "@/modules/02_organizationalNew/components/structureView.vue";
 import DialogFormNewStructure from "@/modules/02_organizationalNew/components/DialogNewStructure.vue";
 import DialogDateTime from "@/modules/02_organizationalNew/components/DialogFormDateTime.vue";
-import DialogHistory from "@/modules/02_organizationalNew/components/DialogHistory.vue";
-import DialogPositionDetail from "@/modules/02_organizationalNew/components/PositionDetail.vue";
+
 /** importStore*/
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 import { useCounterMixin } from "@/stores/mixin";
 
+/** use*/
 const $q = useQuasar();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
-
-const modalNewStructure = ref<boolean>(false);
-const modalPositionDetail = ref<boolean>(false);
-
 const store = useOrganizational();
 
-const isStatusData = ref<boolean>(false);
-const ishasActive = ref<boolean>(false);
-const ishasDraft = ref<boolean>(false);
+/** modalDialog*/
+const modalNewStructure = ref<boolean>(false); // เพิ่มโครงสร้าง
+const modalDateTime = ref<boolean>(false); //  ตั้งเวลาเผยแพร่
+
+/** สถานะ*/
+const isStatusData = ref<boolean>(false); // แสดงตั้งเวลาเผยแพร่
+const ishasActive = ref<boolean>(false); // สถานะการทำงาน
+const ishasDraft = ref<boolean>(false); // สถานะแบบร่าง
+/** List เพิ่มโครงสร้าง*/
 const itemStructure = ref<DataOption[]>([
   {
     id: "NEW",
@@ -48,7 +50,15 @@ const itemStructure = ref<DataOption[]>([
     name: "ทำสำเนาโครงสร้าง ตำแหน่งและคนครอง",
   },
 ]);
+const typeStructure = ref<string>(""); // ประเภทการเพิ่มโครงสร้าง
 
+/** ประวัติโครงสร้าง*/
+const itemHistory = ref<DataOption[]>([]); // List ประวัติโครงสร้าง
+const historyId = ref<string>(""); // ID ประวัติโครงสร้าง
+const labelHistory = ref<string>("ประวัติโครงสร้าง"); // ชื่อประวัติโครงสร้าง
+const count = ref<number>(0);
+
+/** function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง*/
 async function fetchOrganizationActive() {
   showLoader();
   await http
@@ -81,10 +91,9 @@ async function fetchOrganizationActive() {
     });
 }
 
-const itemHistory = ref<DataOption[]>([]);
-const historyId = ref<string>("");
+/** function เรียกข้อมูลประวัติโครงสร้าง*/
 async function fetchHistory() {
-  // showLoader();
+  showLoader();
   await http
     .get(config.API.organizationHistoryNew)
     .then((res) => {
@@ -106,27 +115,32 @@ async function fetchHistory() {
     });
 }
 
-const typeStructure = ref<string>("");
+/**
+ * function openPopup เพิ่มโครงสร้าง
+ * @param type ประเภทการเพิ่มโครงาสร้าง
+ */
 function ocClickAddStructure(type: string) {
   modalNewStructure.value = !modalNewStructure.value;
   typeStructure.value = type;
 }
 
-const modalDateTime = ref<boolean>(false);
+/** function openPopup ตั้งเวลาเผยแพร่*/
 function onClickDateTime() {
   modalDateTime.value = !modalDateTime.value;
 }
 
-const modalHistory = ref<boolean>(false);
-const count = ref<number>(0);
-const labelHistory = ref<string>("ประวัติโครงสร้าง");
+/**
+ * function เปิดประวัติโครงสร้าง
+ * @param id id โครงสร้าง
+ * @param name ชื่อโครงสร้าง
+ */
 function onClickHistory(id: string, name: string) {
   historyId.value = id;
   labelHistory.value = name;
   count.value++;
-  // modalHistory.value = !modalHistory.value;
 }
 
+/** lifecycleHook */
 onMounted(async () => {
   await fetchOrganizationActive();
   await fetchHistory();
@@ -134,15 +148,20 @@ onMounted(async () => {
 </script>
 <template>
   <div class="row items-center">
-    <div class="toptitle text-dark row items-center q-py-xs">โครงสร้างอัตรากำลัง</div>
+    <div class="toptitle text-dark row items-center q-py-xs">
+      โครงสร้างอัตรากำลัง
+    </div>
     <q-space />
 
-    <div class="toptitle row items-center" v-if="store.typeOrganizational === 'draft'">
+    <div
+      class="toptitle row items-center"
+      v-if="store.typeOrganizational === 'draft'"
+    >
       <div
         v-if="store.isPublic && store.orgPublishDate"
-        class=" q-pr-md text-caption"
+        class="q-pr-md text-caption"
       >
-        วันที่เผยแพร่ : 
+        วันที่เผยแพร่ :
         <strong>{{ date2Thai(store.orgPublishDate) }}</strong>
       </div>
       <q-btn
@@ -248,7 +267,13 @@ onMounted(async () => {
               </q-btn-dropdown>
             </q-btn-group>
 
-            <q-btn-dropdown dense unelevated class="q-px-md" color="green-6" label="เพิ่มโครงสร้าง">
+            <q-btn-dropdown
+              dense
+              unelevated
+              class="q-px-md"
+              color="green-6"
+              label="เพิ่มโครงสร้าง"
+            >
               <q-list>
                 <q-item
                   dense
@@ -265,9 +290,6 @@ onMounted(async () => {
               </q-list>
             </q-btn-dropdown>
 
-            <!-- <q-btn flat round color="primary" icon="history">
-              <q-tooltip>ประวัติโครงสร้าง</q-tooltip>
-            </q-btn> -->
             <q-space />
             <q-btn
               flat
@@ -276,7 +298,7 @@ onMounted(async () => {
               icon="mdi-file-tree"
               @click="store.statusView = 'list'"
             />
-            <q-separator inset vertical/>
+            <q-separator inset vertical />
             <q-btn
               flat
               dense
@@ -308,16 +330,14 @@ onMounted(async () => {
   />
 
   <!-- ตั้งเวลาเผยแพร่ -->
-  <DialogDateTime :modal="modalDateTime" :close="onClickDateTime" :fetchActive="fetchOrganizationActive"/>
-
-  <!-- ประวัติโครงสร้าง -->
-  <!-- <DialogHistory :modal="modalHistory" :close="onClickHistory" /> -->
-
-  <!-- รายละเอียดโครงสร้าง -->
-  <!-- <DialogStructureDetail v-model:structure-detail="modalStructureDetail" /> -->
+  <DialogDateTime
+    :modal="modalDateTime"
+    :close="onClickDateTime"
+    :fetchActive="fetchOrganizationActive"
+  />
 
   <!-- รายละเอียดตำแหน่ง -->
-  <DialogPositionDetail v-model:position-detail="modalPositionDetail" />
+  <!-- <DialogPositionDetail v-model:position-detail="modalPositionDetail" /> -->
 </template>
 
 <style scoped></style>