Merge branch 'develop' into devTee

# Conflicts:
#	src/api/02_organizational/api.organization.ts
#	src/modules/02_organizationalNew/interface/index/Main.ts

src/api/02_organizational/api.organization.ts

@@ -1,6 +1,7 @@
 import env from "../index";
 
 const organization = `${env.API_URI}/org`;
+const orgPos = `${env.API_URI}/org/pos`;
 
 export default {
   /** โครงสร้างอัตรากำลัง*/
@@ -10,8 +11,16 @@ export default {
   createOrgLevel: (type: string) => `${organization}/${type}`,
   orgLevelByid: (type: string, id: string) => `${organization}/${type}/${id}`,
 
-  orgSetDateTime:(id:string) => `${organization}/set/publish/${id}`,
+  orgSetDateTime: (id: string) => `${organization}/set/publish/${id}`,
   organizationHistoryNew: `${organization}/history`,
   organizationHistoryPostNew: `${organization}/history/publish`,
+
+  /** position*/
+  orgPosPosition: `${orgPos}/position`,
+  orgPosPositionById: (id: string) => `${orgPos}/position/${id}`,
+  orgPosExecutive: `${orgPos}/executive`,
+  orgPosType: `${orgPos}/type`,
+  orgPosLevel: `${orgPos}/level`,
+  orgPosMaster: `${orgPos}/master`,
   organizationShortName: `${organization}/sort`,
 };

src/modules/02_organizationalNew/components/DialogFormPosition.vue

@@ -10,22 +10,42 @@ import type {
   DataOption,
   FormPositionSelect,
   RowDetailPositions,
+  FormPositionSelectRef,
   ListMenu,
 } from "@/modules/02_organizationalNew/interface/index/Main";
+import type {
+  OptionType,
+  OptionLevel,
+  OptionExecutive,
+  DataPosition,
+} from "@/modules/02_organizationalNew/interface/response/organizational";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const props = defineProps({
   modal: Boolean,
   close: Function,
+  orgLevel: Number,
+  treeId: String,
 });
 
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const isDisValidate = ref<boolean>(false);
+
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { dialogConfirm } = mixin;
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogRemove,
+} = mixin;
 const selected = ref<any>([]);
 const search = ref<string>("");
 const type = ref<string>("positionName");
-const typeOps = ref<DataOption[]>([
+const optionFilter = ref<DataOption[]>([
   { id: "positionName", name: "ตำแหน่งในสายงาน" },
   { id: "positionField", name: "สายงาน" },
   { id: "positionType", name: "ประเภทตำแหน่ง" },
@@ -35,6 +55,13 @@ const typeOps = ref<DataOption[]>([
   { id: "positionArea", name: "ด้าน/สาขา" },
 ]);
 
+const typeOpsMain = ref<DataOption[]>([]);
+const levelOpsMain = ref<DataOption[]>([]);
+const executiveOpsMain = ref<DataOption[]>([]);
+const typeOps = ref<DataOption[]>([]);
+const levelOps = ref<DataOption[]>([]);
+const executiveOps = ref<DataOption[]>([]);
+
 const listMenu = ref<ListMenu[]>([
   {
     label: "คัดลอก",
@@ -57,12 +84,19 @@ const ocLevelOp = ref<DataOption[]>([]);
 const prefixNoRef = ref<Object | null>(null);
 const positionNoRef = ref<Object | null>(null);
 
+const positionNameRef = ref<Object | null>(null);
+const positionFieldRef = ref<Object | null>(null);
+const positionTypeRef = ref<Object | null>(null);
+const positionLevelRef = ref<Object | null>(null);
+const positionExecutiveRef = ref<Object | null>(null);
+const positionExecutiveFieldRef = ref<Object | null>(null);
+const positionAreaRef = ref<Object | null>(null);
+
 const formData = reactive<FormDataPosition>({
   shortName: "สกจ.",
   prefixNo: "",
   positionNo: "",
   suffixNo: "",
-  confirm: false,
 });
 
 const formPositionSelect = reactive<FormPositionSelect>({
@@ -81,6 +115,16 @@ const objectPositionRef: FormPositionRef = {
   positionNo: positionNoRef,
 };
 
+const objectPositionSelectRef: FormPositionSelectRef = {
+  positionName: positionNameRef,
+  positionField: positionFieldRef,
+  positionType: positionTypeRef,
+  positionLevel: positionLevelRef,
+  positionExecutive: positionExecutiveRef,
+  positionExecutiveField: positionExecutiveFieldRef,
+  positionArea: positionAreaRef,
+};
+
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -110,29 +154,29 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "positionType",
+    name: "posTypeName",
     align: "left",
     label: "ประเภทตำเเหน่ง",
     sortable: true,
-    field: "positionType",
+    field: "posTypeName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "positionLevel",
+    name: "posLevelName",
     align: "left",
     label: "ระดับตำแหน่ง",
     sortable: true,
-    field: "positionLevel",
+    field: "posLevelName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "positionExecutive",
+    name: "posExecutiveName",
     align: "left",
     label: "ตำแหน่งทางการบริหาร",
     sortable: true,
-    field: "positionExecutive",
+    field: "posExecutiveName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -159,13 +203,73 @@ const visibleColumns = ref<string[]>([
   "no",
   "positionName",
   "positionField",
-  "positionType",
+  "posTypeName",
-  "positionLevel",
+  "posLevelName",
-  "positionExecutive",
+  "posExecutiveName",
   "positionExecutiveField",
   "positionArea",
 ]);
 
+/** function เรียกรายการประเภทตำแหน่ง */
+async function fetchType() {
+  showLoader();
+  await http
+    .get(config.API.orgPosType)
+    .then((res) => {
+      typeOpsMain.value = res.data.result.map((e: OptionType) => ({
+        id: e.id,
+        name: e.posTypeName,
+      }));
+      typeOps.value = typeOpsMain.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** function เรียกรายการระดับตำแหน่ง */
+async function fetchLevel() {
+  showLoader();
+  await http
+    .get(config.API.orgPosLevel)
+    .then((res) => {
+      levelOpsMain.value = res.data.result.map((e: OptionLevel) => ({
+        id: e.id,
+        name: e.posLevelName,
+      }));
+      levelOps.value = levelOpsMain.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** function เรียกรายการตำแหน่งทางการบริหาร */
+async function fetchExecutive() {
+  showLoader();
+  await http
+    .get(config.API.orgPosExecutive)
+    .then((res) => {
+      executiveOpsMain.value = res.data.result.map((e: OptionExecutive) => ({
+        id: e.id,
+        name: e.posExecutiveName,
+      }));
+      executiveOps.value = executiveOpsMain.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
 function validateForm() {
   const hasError = [];
@@ -186,31 +290,33 @@ function validateForm() {
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
 function validateFormPositionEdit() {
-  // const hasError = [];
+  isDisValidate.value = false;
-  // for (const key in objectPositionRef) {
+  const hasError = [];
-  //   if (Object.prototype.hasOwnProperty.call(objectPositionRef, key)) {
+  for (const key in objectPositionSelectRef) {
-  //     const property = objectPositionRef[key];
+    if (Object.prototype.hasOwnProperty.call(objectPositionSelectRef, key)) {
-  //     if (property.value && typeof property.value.validate === "function") {
+      const property = objectPositionSelectRef[key];
-  //       const isValid = property.value.validate();
+      if (property.value && typeof property.value.validate === "function") {
-  //       hasError.push(isValid);
+        const isValid = property.value.validate();
-  //     }
+        hasError.push(isValid);
-  //   }
+      }
-  // }
+    }
-  // if (hasError.every((result) => result === true)) {
+  }
-  onSubmitSelectEdit();
+  if (hasError.every((result) => result === true)) {
-  // } else {
+    onSubmitSelectEdit();
-  // }
+  }
 }
 
 /** ฟังชั่น บันทึก */
 function onSubmit() {
-  dialogConfirm($q, () => {
+  console.log(props.orgLevel);
+
+  dialogConfirm($q, async () => {
     const positionsData = rows.value.map((e) => ({
       posDictName: e.positionName, //ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
       posDictField: e.positionField, //สายงาน
-      posTypeId: e.positionName, //*ประเภทตำแหน่ง
+      posTypeId: e.posTypeId, //*ประเภทตำแหน่ง
-      posLevelId: e.positionName, //*ระดับตำแหน่ง
+      posLevelId: e.posLevelId, //*ระดับตำแหน่ง
-      posExecutiveId: e.positionName, //ตำแหน่งทางการบริหาร
+      posExecutiveId: e.posExecutiveId, //ตำแหน่งทางการบริหาร
       posDictExecutiveField: e.positionName, //ด้านทางการบริหาร
       posDictArea: e.positionArea, //ด้าน/สาขา
     }));
@@ -218,22 +324,57 @@ function onSubmit() {
       posMasterNoPrefix: formData.prefixNo, //*Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
       posMasterNo: Number(formData.positionNo), //*เลขที่ตำแหน่ง เป็นตัวเลข
       posMasterNoSuffix: formData.suffixNo, //Suffix หลังเลขที่ตำแหน่ง เช่น ช.
-      // orgRootId: Guid, //Id สำนัก
+      orgRootId: props.orgLevel === 0 ? props.treeId : null, //Id สำนัก
-      // orgChild1Id: Guid, //Id โครงสร้างระดับ1
+      orgChild1Id: props.orgLevel === 1 ? props.treeId : null,
-      // orgChild2Id: Guid, //Id โครงสร้างระดับ2
+      orgChild2Id: props.orgLevel === 2 ? props.treeId : null,
-      // orgChild3Id: Guid, //Id โครงสร้างระดับ3
+      orgChild3Id: props.orgLevel === 3 ? props.treeId : null,
-      // orgChild4Id: Guid, //Id โครงสร้างระดับ4
+      orgChild4Id: props.orgLevel === 4 ? props.treeId : null,
       positions: [positionsData],
     };
     console.log(body);
+    // showLoader();
+    // await http
+    //   .post(config.API.orgPosMaster, body)
+    //   .then((res) => {
+    //     success($q, "เพิ่มข้อมูลสำเร็จ");
+    //   })
+    //   .catch((err) => {
+    //     messageError($q, err);
+    //   })
+    //   .finally(() => {
+    //     props.close?.();
+    //     hideLoader();
+    //   });
   });
 }
 /** ฟังชั่น บันทึก */
 function onSubmitSelectEdit() {
   dialogConfirm(
     $q,
-    () => {
+    async () => {
-      console.log(formPositionSelect);
+      showLoader();
+      const body = {
+        posDictName: formPositionSelect.positionName,
+        posDictField: formPositionSelect.positionField, //สายงาน
+        posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
+        posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
+        posExecutiveId: formPositionSelect.positionExecutive, //ตำแหน่งทางการบริหาร
+        posDictExecutiveField: formPositionSelect.positionExecutiveField, //ด้านทางการบริหาร
+        posDictArea: formPositionSelect.positionArea, //ด้าน/สาขา
+      };
+      await http
+        .post(config.API.orgPosPosition, body)
+        .then(() => {
+          success($q, "เพิ่มข้อมูลสำเร็จ");
+
+          clearFormPositionSelect();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
     },
     "ยืนยันการเพิ่มตำแหน่ง",
     "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
@@ -250,40 +391,22 @@ const searchRef = ref<any>(null);
 async function searchInput() {
   searchRef.value.validate();
   if (!searchRef.value.hasError) {
-    // จำลอง
+    showLoader();
-    const dataList = [
+    await http
-      {
+      .get(
-        positionId: "x1",
+        config.API.orgPosPosition +
-        positionName: "นักกายภาพบำบัด",
+          `?keyword=${search.value}&type=${type.value}`
-        positionField: "จัดการงานทั่วไป",
+      )
-        positionType: "วิชาการ",
+      .then((res) => {
-        positionLevel: "ชำนาญการ",
+        console.log(res);
-        positionExecutive: "การพยาบาลทั่วไป",
+        rowsPositionSelect.value = res.data.result;
-        positionExecutiveField: "การพยาบาลทั่วไป",
+      })
-        positionArea: "การพยาบาลทั่วไป",
+      .catch((err) => {
-      },
+        messageError($q, err);
-      {
+      })
-        positionId: "x2",
+      .finally(() => {
-        positionName: "นักทรัพยากรบุคคล",
+        hideLoader();
-        positionField: "จัดการงานทั่วไป",
+      });
-        positionType: "ทั่วไป",
-        positionLevel: "ชำนาญการ",
-        positionExecutive: "-",
-        positionExecutiveField: "-",
-        positionArea: "-",
-      },
-      {
-        positionId: "x3",
-        positionName: "นักทรัพยากรบุคคล",
-        positionField: "จัดการงานทั่วไป",
-        positionType: "วิชาการ",
-        positionLevel: "ชำนาญการพิเศษ",
-        positionExecutive: "-",
-        positionExecutiveField: "-",
-        positionArea: "-",
-      },
-    ];
-    rowsPositionSelect.value = dataList;
   }
 }
 
@@ -295,9 +418,9 @@ function copyDetiail(data: RowDetailPositions) {
   formPositionSelect.positionId = data.positionId;
   formPositionSelect.positionName = data.positionName;
   formPositionSelect.positionField = data.positionField;
-  formPositionSelect.positionType = data.positionType;
+  formPositionSelect.positionType = data.posTypeId;
-  formPositionSelect.positionLevel = data.positionLevel;
+  formPositionSelect.positionLevel = data.posLevelId;
-  formPositionSelect.positionExecutive = data.positionExecutive;
+  formPositionSelect.positionExecutive = data.posExecutiveId;
   formPositionSelect.positionExecutiveField = data.positionExecutiveField;
   formPositionSelect.positionArea = data.positionArea;
 }
@@ -317,14 +440,19 @@ watch(
   () => props.modal,
   () => {
     if (props.modal === true) {
+      fetchType();
+      fetchLevel();
+      fetchExecutive();
+      rowsPositionSelect.value = [];
+      search.value = "";
+      rows.value = [];
+      clearFormPositionSelect();
     }
   }
 );
 
 function addPosition(data: RowDetailPositions) {
-  const isIdExist = rows.value.some(
+  const isIdExist = rows.value.some((item) => item.id === data.id);
-    (item) => item.positionId === data.positionId
-  );
 
   if (!isIdExist) {
     rows.value = [data, ...rows.value];
@@ -333,9 +461,42 @@ function addPosition(data: RowDetailPositions) {
 
 function deleteData(id: string) {
   const dataRow = rows.value;
-  const updatedRows = dataRow.filter((item: any) => item.positionId !== id);
+  const updatedRows = dataRow.filter((item: any) => item.id !== id);
   rows.value = updatedRows;
 }
+
+function deletePos(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.orgPosPositionById(id))
+      .then((res) => {
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        searchInput();
+        hideLoader();
+      });
+  });
+}
+
+async function clearFormPositionSelect() {
+  isDisValidate.value = await true;
+  formPositionSelect.positionId = "";
+  formPositionSelect.positionName = "";
+  formPositionSelect.positionField = "";
+  formPositionSelect.positionType = "";
+  formPositionSelect.positionLevel = "";
+  formPositionSelect.positionExecutive = "";
+  formPositionSelect.positionExecutiveField = "";
+  formPositionSelect.positionArea = "";
+  setTimeout(async () => {
+    isDisValidate.value = await false;
+  }, 1000);
+}
 </script>
 <template>
   <template>
@@ -456,7 +617,7 @@ function deleteData(id: string) {
                                 icon="mdi-delete"
                                 class="q-pa-none q-ml-xs"
                                 color="red"
-                                @click="deleteData(props.row.positionId)"
+                                @click="deleteData(props.row.id)"
                               >
                                 <q-tooltip>ลบข้อมูล</q-tooltip>
                               </q-btn>
@@ -465,14 +626,6 @@ function deleteData(id: string) {
                         </template>
                       </d-table>
                     </div>
-                    <div class="col-12 q-mt-sm">
-                      <q-checkbox
-                        dense
-                        v-model="formData.confirm"
-                        label="ไม่ผูกกับตำแหน่งก่อนหน้า"
-                        color="teal"
-                      />
-                    </div>
                   </div>
                   <q-separator />
                   <q-card-actions
@@ -501,7 +654,7 @@ function deleteData(id: string) {
                       <q-select
                         label="ค้นหาจาก"
                         v-model="type"
-                        :options="typeOps"
+                        :options="optionFilter"
                         emit-value
                         dense
                         @update:model-value="updateSelect"
@@ -544,7 +697,7 @@ function deleteData(id: string) {
                       ref="table"
                       :columns="columns"
                       :rows="rowsPositionSelect"
-                      row-key="positionId"
+                      row-key="id"
                       flat
                       bordered
                       :paging="true"
@@ -602,7 +755,7 @@ function deleteData(id: string) {
                                     @click="
                                       item.type === 'copy'
                                         ? copyDetiail(props.row)
-                                        : ''
+                                        : deletePos(props.row.id)
                                     "
                                   >
                                     <q-item-section avatar>
@@ -644,26 +797,46 @@ function deleteData(id: string) {
                   <div class="row q-col-gutter-sm col-12 q-pa-sm">
                     <div class="col-6">
                       <q-input
+                        ref="positionNameRef"
                         v-model="formPositionSelect.positionName"
                         :class="inputEdit(isReadonly)"
                         dense
                         outlined
                         for="#positionName"
                         label="ตำแหน่งในสายงาน"
+                        lazy-rules
+                        hide-bottom-space
+                        :rules="
+                          !isDisValidate
+                            ? [
+                                (val) =>
+                                  !!val || `${'กรุณากรอกตำแหน่งในสายงาน'}`,
+                              ]
+                            : []
+                        "
                       />
                     </div>
                     <div class="col-6">
                       <q-input
+                        ref="positionFieldRef"
                         v-model="formPositionSelect.positionField"
                         :class="inputEdit(isReadonly)"
                         dense
                         outlined
                         for="#positionField"
                         label="สายงาน"
+                        lazy-rules
+                        hide-bottom-space
+                        :rules="
+                          !isDisValidate
+                            ? [(val) => !!val || `${'กรุณากรอกสายงาน'}`]
+                            : []
+                        "
                       />
                     </div>
                     <div class="col-6">
                       <q-select
+                        ref="positionTypeRef"
                         :class="inputEdit(isReadonly)"
                         label="ประเภทตำแหน่ง"
                         v-model="formPositionSelect.positionType"
@@ -675,14 +848,22 @@ function deleteData(id: string) {
                         outlined
                         option-label="name"
                         option-value="id"
+                        lazy-rules
+                        hide-bottom-space
+                        :rules="
+                          !isDisValidate
+                            ? [(val) => !!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`]
+                            : []
+                        "
                       />
                     </div>
                     <div class="col-6">
                       <q-select
+                        ref="positionLevelRef"
                         :class="inputEdit(isReadonly)"
                         label="ระดับตำแหน่ง"
                         v-model="formPositionSelect.positionLevel"
-                        :options="typeOps"
+                        :options="levelOps"
                         emit-value
                         dense
                         @update:model-value="updateSelect"
@@ -690,14 +871,22 @@ function deleteData(id: string) {
                         outlined
                         option-label="name"
                         option-value="id"
+                        lazy-rules
+                        hide-bottom-space
+                        :rules="
+                          !isDisValidate
+                            ? [(val) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]
+                            : []
+                        "
                       />
                     </div>
                     <div class="col-6">
                       <q-select
+                        ref="positionExecutiveRef"
                         :class="inputEdit(isReadonly)"
                         label="ตำแหน่งทางการบริหาร"
                         v-model="formPositionSelect.positionExecutive"
-                        :options="typeOps"
+                        :options="executiveOps"
                         emit-value
                         dense
                         @update:model-value="updateSelect"
@@ -705,26 +894,55 @@ function deleteData(id: string) {
                         outlined
                         option-label="name"
                         option-value="id"
+                        lazy-rules
+                        hide-bottom-space
+                        :rules="
+                          !isDisValidate
+                            ? [
+                                (val) =>
+                                  !!val || `${'กรุณาเลือกตำแหน่งทางการบริหาร'}`,
+                              ]
+                            : []
+                        "
                       />
                     </div>
                     <div class="col-6">
                       <q-input
+                        ref="positionExecutiveFieldRef"
                         v-model="formPositionSelect.positionExecutiveField"
                         :class="inputEdit(isReadonly)"
                         dense
                         outlined
                         for="#positionExecutiveField"
                         label="ด้านทางการบริหาร"
+                        lazy-rules
+                        hide-bottom-space
+                        :rules="
+                          !isDisValidate
+                            ? [
+                                (val) =>
+                                  !!val || `${'กรุณากรอกด้านทางการบริหาร'}`,
+                              ]
+                            : []
+                        "
                       />
                     </div>
                     <div class="col-6">
                       <q-input
+                        ref="positionAreaRef"
                         v-model="formPositionSelect.positionArea"
                         :class="inputEdit(isReadonly)"
                         dense
                         outlined
                         for="#positionArea"
                         label="ด้าน/สาขา"
+                        lazy-rules
+                        hide-bottom-space
+                        :rules="
+                          !isDisValidate
+                            ? [(val) => !!val || `${'กรุณากรอกด้าน/สาขา'}`]
+                            : []
+                        "
                       />
                     </div>
                   </div>

src/modules/02_organizationalNew/components/listView.vue

@@ -17,10 +17,13 @@ const store = useOrganizational();
 const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 
-const showData = ref<boolean>(false);
 const nodeTree = ref<OrgTree[]>();
 const historyId = defineModel<string>("historyId", { required: true });
 const count = defineModel<number>("count", { required: true });
+const nodeId = ref<string>("");
+const orgLevel = ref<number>(0);
+const isLoad = ref<boolean>(false);
+const nodeData = ref<any>();
 
 // defineProps<{ dataActive: DataActive }>();
 
@@ -44,6 +47,22 @@ async function fetchDataTree(id: string) {
   // console.log(nodeTree.value);
 }
 
+async function fetchDataTable(id: string, level: namber) {
+  orgLevel.value = level;
+  // isLoad.value = true;
+  // await http
+  //   .get(config.API.orgPosPositionById(id))
+  //   .then((res) => {
+  //     console.log(res);
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     isLoad.value = false;
+  //   });
+}
+
 onMounted(async () => {
   const id =
     store.typeOrganizational === "current" ? store.activeId : store.draftId;
@@ -63,6 +82,7 @@ watch(
     const id =
       store.typeOrganizational === "current" ? store.activeId : store.draftId;
     id && store.typeOrganizational !== "old" && fetchDataTree(id);
+    nodeId.value = "";
   }
 );
 </script>
@@ -73,7 +93,10 @@ watch(
         <div class="col-12 row no-wrap bg-grey-1">
           <TreeView
             v-model:nodeTree="nodeTree"
+            v-model:nodeId="nodeId"
+            v-model:isLoad="isLoad"
             :fetchDataTree="fetchDataTree"
+            :fetchDataTable="fetchDataTable"
           />
 
           <div class="col-12 row">
@@ -84,7 +107,27 @@ watch(
 
       <div class="col-xs-12 col-sm-9 q-pa-md">
         <div class="col-12 row items-center">
-          <TableView v-model:showData="showData" />
+          <div
+            class="row col-12 justify-center items-center"
+            v-if="isLoad"
+            style="height: 550px"
+          >
+            <div class="col-2">
+              <q-spinner color="primary" size="3em" />
+            </div>
+          </div>
+
+          <div v-else class="col-12 row items-center">
+            <TableView
+              v-if="nodeId !== ''"
+              v-model:orgLevel="orgLevel"
+              v-model:treeId="nodeId"
+            />
+
+            <q-banner v-else class="bg-warning text-white col-12 text-center">
+              เลือกรายการ {{ nodeId }}
+            </q-banner>
+          </div>
         </div>
       </div>
     </q-card>

src/modules/02_organizationalNew/components/mainTree.vue

@@ -26,6 +26,10 @@ const props = defineProps({
     type: Function,
     require: true,
   },
+  fetchDataTable: {
+    type: Function,
+    require: true,
+  },
 });
 
 const listAdd = ref<ListMenu[]>([
@@ -80,6 +84,8 @@ const listAdd = ref<ListMenu[]>([
 ]);
 
 const nodeTEST = defineModel<OrgTree[]>("nodeTree", { default: [] });
+const nodeId = defineModel<string>("nodeId", { require: true });
+const isLoad = defineModel<boolean>("isLoad", { require: true });
 const filter = ref<string>("");
 
 const nodes = ref<Array<OrgTree>>([]);
@@ -93,8 +99,13 @@ const orgLevel = ref<number>(0);
 const type = ref<number>(0);
 const orgId = ref<string>("");
 
-const updateSelected = (target: any) => {
+const updateSelected = (id: string, level: number) => {
-  console.log("updateSelected===>", target);
+  if (id === nodeId.value) {
+    nodeId.value = "";
+  } else {
+    nodeId.value = id ? id : "";
+    id && props.fetchDataTable?.(id, level);
+  }
 };
 
 const breakLoop = ref<boolean>(false);
@@ -327,12 +338,14 @@ onMounted(async () => {});
           :no-nodes-label="noData"
           v-model:expanded="expanded"
           v-model:selected="selected"
-          @update:selected="updateSelected"
         >
           <template v-slot:default-header="prop">
             <!-- {{ prop.node.orgTreeName }} -->
 
-            <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
+            <div
+              class="row items-center q-px-xs q-pt-xs q-gutter-sm"
+              @click="updateSelected(prop.node.orgTreeId, prop.node.orgLevel)"
+            >
               <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
               <div>
                 <div class="text-weight-medium">

src/modules/02_organizationalNew/components/tableTree.vue

@@ -12,7 +12,9 @@ import DialogPositionDetail from "@/modules/02_organizationalNew/components/Posi
 /** importStore*/
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 
-const showData = defineModel<boolean>("showData", { required: true });
+const showAllData = ref<boolean>(false);
+const orgLevel = defineModel<number>("orgLevel", { require: true });
+const treeId = defineModel<string>("treeId", { require: true });
 const stroe = useOrganizational();
 const filter = ref<string>("");
 const listMenu = ref<ListMenu[]>([
@@ -160,7 +162,7 @@ function onClickViewDetail() {
         <div>
           <q-checkbox
             keep-color
-            v-model="showData"
+            v-model="showAllData"
             label="แสดงตำแหน่งทั้งหมด"
             color="primary"
           >
@@ -252,7 +254,7 @@ function onClickViewDetail() {
           </q-td>
         </q-tr>
 
-        <q-tr v-show="props.expand" :props="props" >
+        <q-tr v-show="props.expand" :props="props">
           <q-td colspan="100%">
             <div class="text-left q-pa-md">
               <div class="col-12">
@@ -356,7 +358,12 @@ function onClickViewDetail() {
     </d-table>
   </div>
 
-  <DialogFormPosotion :modal="dialogPosition" :close="onClickPosition" />
+  <DialogFormPosotion
+    :modal="dialogPosition"
+    :close="onClickPosition"
+    :orgLevel="orgLevel"
+    :treeId="treeId"
+  />
 
   <!-- รายละเอียดตำแหน่ง -->
   <DialogPositionDetail v-model:position-detail="dialogDetail" />

src/modules/02_organizationalNew/interface/index/Main.ts

@@ -29,7 +29,6 @@ interface FormDataPosition {
   prefixNo: string;
   positionNo: string;
   suffixNo: string;
-  confirm: boolean;
 }
 
 interface FormDataNewStructure {
@@ -82,7 +81,7 @@ interface HistoryPostType {
 }
 
 interface FormPositionSelect {
-  positionId: string,
+  positionId: string;
   positionName: string;
   positionField: string;
   positionType: string;
@@ -92,16 +91,28 @@ interface FormPositionSelect {
   positionArea: string;
 }
 
-interface RowDetailPositions {
+interface FormPositionSelectRef {
-  positionId: string,
+  positionName: object | null;
-  positionName: string
+  positionField: object | null;
-  positionField: string
+  positionType: object | null;
-  positionType: string
+  positionLevel: object | null;
-  positionLevel: string
+  positionExecutive: object | null;
-  positionExecutive: string
+  positionExecutiveField: object | null;
-  positionExecutiveField: string
+  positionArea: object | null;
-  positionArea: string
+  [key: string]: any;
 }
+
+interface RowDetailPositions {
+  positionId: string;
+  positionName: string;
+  positionField: string;
+  positionType: string;
+  positionLevel: string;
+  positionExecutive: string;
+  positionExecutiveField: string;
+  positionArea: string;
+}
+
 export type {
   Pagination,
   DataOption,
@@ -116,5 +127,6 @@ export type {
   ListMenu,
   FormPositionSelect,
   RowDetailPositions,
-  HistoryPostType
+  HistoryPostType,
+  FormPositionSelectRef,
 };

src/modules/02_organizationalNew/interface/response/organizational.ts

@@ -31,4 +31,42 @@ interface OrgRevision {
   orgRevisionName: string;
 }
 
-export type { DataActive, OrgTree, OrgRevision };
+interface OptionType {
+  id: string;
+  posTypeName: string;
+}
+
+interface OptionLevel {
+  id: string;
+  posLevelName: string;
+}
+
+interface OptionExecutive {
+  id: string;
+  posExecutiveName: string;
+}
+
+interface DataPosition {
+  id: string;
+  posExecutiveId: string;
+  posExecutiveName: string;
+  posLevelId: string;
+  posLevelName: string;
+  posTypeId: string;
+  posTypeName: string;
+  positionArea: string;
+  positionExecutiveField: string;
+  positionField: string;
+  positionIsSelected: boolean;
+  positionName: string;
+}
+
+export type {
+  DataActive,
+  OrgTree,
+  OrgRevision,
+  OptionType,
+  OptionLevel,
+  OptionExecutive,
+  DataPosition,
+};