Merge branch 'develop' into setthawut

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

@@ -91,4 +91,8 @@ export default {
   orgDeceasedProfile: `${orgPos}/profile/search`,
 
   orgProfileListKeycloak: () => `${orgProfile}/search-personal-no-keycloak`,
+
+  /** กำหนดสิทธิ์จัดการโครงสร้าง */
+  permissionOrg: `${organization}/permission-org`, 
+  permissionOrgProfile: `${organization}/permission-org/profile`, // คนที่มีสิทธิ์จัดการโครงสร้าง
 };

src/interface/request/main/main.ts

@@ -108,6 +108,11 @@ const menuList = readonly<any[]>([
         label: "กำหนดสิทธิ์ (Permissions)",
         path: "managePermission",
       },
+      {
+        key: 2.0,
+        label: "กำหนดสิทธิ์จัดการโครงสร้าง",
+        path: "roleOrganization",
+      },
     ],
   },
   {

src/modules/01_metadata/components/position-employee/01_PositionMain.vue

@@ -1,31 +1,22 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
-/** importType*/
 import type { QTableProps } from "quasar";
-import type {
+import type { FormQuery } from "@/modules/01_metadata/interface/index/positionEmployee";
-  ObjectPosRef,
+import type { DataOption } from "@/modules/01_metadata/interface/request/position/index";
-  FormQuery,
-} from "@/modules/01_metadata/interface/index/positionEmployee";
-import type {
-  DataOption,
-  RowDetailPositions,
-} from "@/modules/01_metadata/interface/request/position/index";
 import type {
   ResGroup,
   ResLevel,
   ResPossition,
 } from "@/modules/01_metadata/interface/response/positionEmployee/Main";
 
-/**importComponets*/
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/**importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-
 /**use*/
 const $q = useQuasar();
 const mixin = useCounterMixin();
@@ -38,6 +29,7 @@ const {
   dialogRemove,
 } = mixin;
 
+//table
 const rows = ref<ResPossition[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -83,47 +75,80 @@ const visibleColumns = ref<string[]>([
   "posTypeName",
   "posLevelName",
 ]);
-
+// ตัวเลือกค้นหา
-const formQuery = reactive<FormQuery>({
-  type: "positionName",
-  keyword: "",
-});
-
 const optionFilter = ref<DataOption[]>([
   { id: "positionName", name: "ชื่อตำแหน่ง" },
   { id: "positionType", name: "กลุ่มงาน" },
   { id: "positionLevel", name: "ระดับชั้นงาน" },
 ]);
 
+const formQuery = reactive<FormQuery>({
+  type: "positionName",
+  keyword: "",
+});
+
 const modalDialog = ref<boolean>(false);
 const isStatusEdit = ref<boolean>(false);
 const posId = ref<string>("");
+
 const formDataPos = reactive({
   posName: "",
   posTypeName: "",
   posLevelName: "",
 });
-const posNameRef = ref<object | null>(null);
-const posTypeNameRef = ref<object | null>(null);
-const posLevelNameRef = ref<object | null>(null);
-const objectRef: ObjectPosRef = {
-  posName: posNameRef,
-  posTypeName: posTypeNameRef,
-  posLevelName: posLevelNameRef,
-};
 
 const posTypeMain = ref<ResGroup[]>([]);
 const posTypeOp = ref<DataOption[]>([]);
 const posLevelOp = ref<DataOption[]>([]);
 
-function deletePos(id: string) {
+/**
-  dialogRemove($q, () => {
+ * ฟังก์ชันดึงข้อมูลรายการตำแหน่งจาก API
+ * @param statusType สถานะการส่งประเภทค้นหา (true = ไม่ส่งประเภทค้นหา)
+ *
+ * เก็บข้อมูลรายการตำแหน่งจากไว้ใน rows.value
+ */
+async function fetchData(statusType: boolean = false) {
+  showLoader();
+  await http
+    .get(
+      config.API.orgEmployeePos +
+        `?keyword=${formQuery.keyword}&type=${statusType ? "" : formQuery.type}`
+    )
+    .then(async (res) => {
+      rows.value = await res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังก์ชันยืนยันการบันทึกข้อมูลตำแหน่ง
+ *
+ * เมื่อ isStatusEdit เป็น false จะทำการเพิ่มข้อมูลรายการข้อมุลตำแหน่ง ถ้าไม่จะทำการแก้ไขข้อมูล
+ * และเมื่อเพิ่มข้อมูลเสร็จจำทำการดึงข้อมูลรายการตำแหน่งใหม่
+ */
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    const body = {
+      posDictName: formDataPos.posName,
+      posTypeId: formDataPos.posTypeName,
+      posLevelId: formDataPos.posLevelName,
+    };
     showLoader();
-    http
+    //กำหนด Phat API
-      .delete(config.API.orgEmployeePosById(id))
+    const url = !isStatusEdit.value
-      .then(() => {
+      ? config.API.orgEmployeePos
-        success($q, "ลบข้อมูลสำเร็จ");
+      : config.API.orgEmployeePosById(posId.value);
-        fetchData();
+
+    await http[!isStatusEdit.value ? "post" : "put"](url, body)
+      .then(async () => {
+        await fetchData();
+        success($q, "บันทีกข้อมูลสำเร็จ");
+        closeDialog();
       })
       .catch((err) => {
         messageError($q, err);
@@ -134,41 +159,61 @@ function deletePos(id: string) {
   });
 }
 
-async function onClickOpenDialog(typeEdit: boolean = false, data: any = []) {
+/**
-  modalDialog.value = true;
+ * ฟังก์ชันยืนยันการลบรายการข้อมูลตำแหน่ง
+ *
+ * @param id รายการข้อมูลตำแหน่งที่จะลบ
+ * เมื่อลบข้อมูลเสร็จจำทำการดึงข้อมูลรายการตำแหน่งใหม่
+ */
+function deletePos(id: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.orgEmployeePosById(id))
+      .then(async () => {
+        await fetchData();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ *  ฟังก์ชันเปิด popup เพื่อแก้ไขหรือคัดลอกข้อมูลตำแหน่ง
+ * @param typeEdit สถานะการแก้ไข (true = แก้ไข, false = เพิ่มใหม่หรือคัดลอก)
+ * @param data  ข้อมูลตำแหน่งที่ต้องการแก้ไขหรือคัดลอก
+ */
+async function onClickOpenDialog(
+  typeEdit: boolean = false,
+  data: ResPossition = {} as ResPossition
+) {
   isStatusEdit.value = typeEdit;
+  modalDialog.value = true;
+
+  // ดึงข้อมูลกลุ่มงาน
   await fetchType();
-  updatePosTypeName(data.posTypeId);
+
+  isStatusEdit.value = typeEdit;
+  modalDialog.value = true;
+  // อัพเดตข้อมูลประเภทตำแหน่งตาม id กลุ่มงาน
+  await updatePosTypeName(data.posTypeId);
+
   if (data) {
     posId.value = data.id;
-    setTimeout(() => {
+    formDataPos.posName = data.posDictName;
-      formDataPos.posName = data.posDictName;
+    formDataPos.posTypeName = data.posTypeId;
-      formDataPos.posTypeName = data.posTypeId;
+    formDataPos.posLevelName = data.posLevelId;
-      formDataPos.posLevelName = data.posLevelId;
-    }, 200);
   }
 }
 
-async function fetchData(statusFetch: boolean = false) {
+/**
-  showLoader();
+ *  ฟังก์ชันดึงข้อมูลกลุ่มงาน
-  await http
+ */
-    .get(
-      config.API.orgEmployeePos +
-        `?keyword=${formQuery.keyword}&type=${
-          statusFetch ? "" : formQuery.type
-        }`
-    )
-    .then((res) => {
-      rows.value = res.data.result;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
 async function fetchType() {
   if (posTypeMain.value.length === 0) {
     showLoader();
@@ -191,47 +236,11 @@ async function fetchType() {
   }
 }
 
-async function onClickSubmit() {
+/**
-  const hasError = [];
+ * ฟังก์ชันหาตัวเลือกระดับชั้นงานตาม ID กลุ่มงาน
-  for (const key in objectRef) {
+ * @param id กลุ่มงาน
-    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
+ */
-      const property = objectRef[key];
+async function updatePosTypeName(id: string) {
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    dialogConfirm($q, () => {
-      submit();
-    });
-  }
-}
-
-async function submit() {
-  const body = {
-    posDictName: formDataPos.posName,
-    posTypeId: formDataPos.posTypeName,
-    posLevelId: formDataPos.posLevelName,
-  };
-  showLoader();
-  try {
-    const url = !isStatusEdit.value
-      ? config.API.orgEmployeePos
-      : config.API.orgEmployeePosById(posId.value);
-    await http[!isStatusEdit.value ? "post" : "put"](url, body);
-    success($q, "บันทีกข้อมูลสำเร็จ");
-    fetchData();
-  } catch (err) {
-    messageError($q, err);
-  } finally {
-    hideLoader();
-    closeDialog();
-  }
-}
-
-function updatePosTypeName(id: string) {
   const posLevel = posTypeMain.value.find((e: ResGroup) => e.id === id);
   posLevelOp.value =
     posLevel?.posLevels.map((e: ResLevel) => ({
@@ -241,6 +250,10 @@ function updatePosTypeName(id: string) {
   formDataPos.posLevelName = "";
 }
 
+/**
+ *  ฟังก์ชันปิด Popup แก้ไขหรือคัดลอกข้อมูลตำแหน่ง
+ * และกำหนด  formDataPos ไปเป็นค่าว่าง
+ */
 function closeDialog() {
   modalDialog.value = false;
   formDataPos.posName = "";
@@ -248,8 +261,11 @@ function closeDialog() {
   formDataPos.posLevelName = "";
 }
 
-onMounted(() => {
+/**
-  fetchData(true);
+ * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
+onMounted(async () => {
+  await fetchData(true);
 });
 </script>
 <template>
@@ -403,7 +419,7 @@ onMounted(() => {
 
   <q-dialog v-model="modalDialog" class="dialog" persistent>
     <q-card style="width: 350px">
-      <form @submit.prevent="onClickSubmit">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader
           :tittle="`${
             isStatusEdit
@@ -426,7 +442,7 @@ onMounted(() => {
                 label="ชื่อตำแหน่ง"
                 lazy-rules
                 hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
                 class="inputgreen"
               />
             </div>
@@ -445,7 +461,7 @@ onMounted(() => {
                 option-value="id"
                 lazy-rules
                 hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
                 @update:model-value="updatePosTypeName"
                 class="inputgreen"
               />
@@ -466,7 +482,7 @@ onMounted(() => {
                 option-value="id"
                 lazy-rules
                 hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
                 class="inputgreen"
               />
             </div>
@@ -476,7 +492,7 @@ onMounted(() => {
         <q-card-actions align="right">
           <q-btn type="submit" :label="`บันทึก`" color="public" />
         </q-card-actions>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>

src/modules/01_metadata/components/position-employee/02_GroupMain.vue

@@ -1,28 +1,22 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive } from "vue";
-import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
+
+import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 /** importType*/
 import type { QTableProps } from "quasar";
-import type { ObjectGroupRef } from "@/modules/01_metadata/interface/index/positionEmployee";
 import type { ResGroup } from "@/modules/01_metadata/interface/response/positionEmployee/Main";
 import type { FrmDataGroup } from "@/modules/01_metadata/interface/request/positionEmployee";
 
 /** importComponents*/
 import dialogHeader from "@/components/DialogHeader.vue";
 
-/** importStore*/
-import { usePositionEmployeeDataStore } from "@/modules/01_metadata/stores/positionEmployeeStore";
-import { useCounterMixin } from "@/stores/mixin";
-
-/** use*/
 const $q = useQuasar();
-const store = usePositionEmployeeDataStore();
 const router = useRouter();
-const mixin = useCounterMixin();
 const {
   dialogRemove,
   dialogConfirm,
@@ -30,8 +24,11 @@ const {
   messageError,
   showLoader,
   hideLoader,
-} = mixin;
+} = useCounterMixin();
 
+//Table
+const rows = ref<ResGroup[]>([]); //รายการกลุ่มงาน
+const filterKeyword = ref<string>(""); //คำค้นหา
 const columns = ref<QTableProps["columns"]>([
   {
     name: "posTypeName",
@@ -67,35 +64,28 @@ const visibleColumns = ref<string[]>([
   "posTypeRank",
 ]);
 
-/** from เพิ่มข้อมูลกลุ่มงาน */
+// ฟอร์มข้อมูลกลุ่มงาน
 const formDataGroup = reactive<FrmDataGroup>({
   posTypeName: "",
   posTypeShortName: "",
   posTypeRank: null,
 });
 
-/** formRef*/
-const posTypeNameRef = ref<Object | null>(null);
-const posTypeShortNameRef = ref<Object | null>(null);
-const posTypeRankRef = ref<Object | null>(null);
-const objectGroupRef: ObjectGroupRef = {
-  posTypeName: posTypeNameRef,
-  posTypeShortName: posTypeShortNameRef,
-  posTypeRank: posTypeRankRef,
-};
-
 const editId = ref<string>("");
-const filterKeyword = ref<string>("");
 const dialog = ref<boolean>(false);
 const dialogStatus = ref<string>("");
-const rows = ref<ResGroup[]>([]);
 
+/**
+ * ฟังก์ชันดึงข้อมูลรายการกลุ่มงาน API
+ *
+ * เก็บข้อมูลรรายการกลุ่มงานไว้ใน rows.value
+ */
 async function fetchData() {
   showLoader();
   await http
     .get(config.API.orgEmployeeType)
     .then(async (res) => {
-      rows.value = res.data.result;
+      rows.value = await res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -105,54 +95,47 @@ async function fetchData() {
     });
 }
 
-async function onClickSubmit() {
+/**
-  const hasError = [];
+ * ฟังก์ชันเปิด popup แก้ไขข้อมูลกลุ่มงาน
-  for (const key in objectGroupRef) {
+ * @param data ข้อมูลกลุ่มงานที่จะแก้ไข
-    if (Object.prototype.hasOwnProperty.call(objectGroupRef, key)) {
+ *
-      const property = objectGroupRef[key];
+ * กำหนด  dialogStatus เป็น edit และกำหนดให้ ฟอร์มข้อมูลกลุ่มงาน เป็น ข้อมูลที่จะแก่ไข
-      if (property.value && typeof property.value.validate === "function") {
+ *
-        const isValid = property.value.validate();
+ */
-        hasError.push(isValid);
+function onClickOpenDialogEdit(data: ResGroup) {
-      }
+  dialogStatus.value = "edit";
-    }
+  dialog.value = true;
-  }
+  editId.value = data.id;
-  if (hasError.every((result) => result === true)) {
+  formDataGroup.posTypeName = data.posTypeName;
-    dialogConfirm($q, () => {
+  formDataGroup.posTypeShortName = data.posTypeShortName;
-      submit();
+  formDataGroup.posTypeRank = data.posTypeRank;
-    });
-  }
 }
 
-async function submit() {
+/**
-  const body: FrmDataGroup = {
+ * ยืนยันการบันทึกข้อมูลรายการกลุ่มงาน
-    posTypeName: formDataGroup.posTypeName,
+ *
-    posTypeShortName: formDataGroup.posTypeShortName,
+ * ุ ถ้า dialogStatus เป็น 'create' จะทำการเพิ่มข้อมูลรายการกลุ่มงาน ถ้าไม่จะทำการแก้ไขข้อมูล
-    posTypeRank: Number(formDataGroup.posTypeRank),
+ * เมื่อบันทึกข้อมูลเสร็จจะเรียก function fetchData() เพื่อดึงข้อมูลรายการกลุ่มงานใหม่
-  };
+ *
-  showLoader();
+ */
-  try {
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    const body: FrmDataGroup = {
+      posTypeName: formDataGroup.posTypeName,
+      posTypeShortName: formDataGroup.posTypeShortName,
+      posTypeRank: Number(formDataGroup.posTypeRank),
+    };
+    // กำหนด Path API
     const url =
       dialogStatus.value === "create"
         ? config.API.orgEmployeeType
         : config.API.orgEmployeeTypeById(editId.value);
-    await http[dialogStatus.value === "create" ? "post" : "put"](url, body);
+    await http[dialogStatus.value === "create" ? "post" : "put"](url, body)
-    success($q, "บันทีกข้อมูลสำเร็จ");
+      .then(async () => {
-    fetchData();
+        await fetchData();
-  } catch (err) {
+        success($q, "บันทีกข้อมูลสำเร็จ");
-    messageError($q, err);
+        closeDialog();
-  } finally {
-    hideLoader();
-    closeDialog();
-  }
-}
-
-function onClickDelete(id: string) {
-  dialogRemove($q, () => {
-    showLoader();
-    http
-      .delete(config.API.orgEmployeeTypeById(id))
-      .then(() => {
-        fetchData();
       })
       .catch((err) => {
         messageError($q, err);
@@ -163,32 +146,31 @@ function onClickDelete(id: string) {
   });
 }
 
-function onClickOpenDialogEdit(data: ResGroup) {
+/**
-  dialogStatus.value = "edit";
+ * ฟังก์ชันไปหน้ารายการระดับชั้นงาน
-  dialog.value = true;
+ * @param id กลุ่มงาน
-  editId.value = data.id;
+ */
-  formDataGroup.posTypeName = data.posTypeName;
-  formDataGroup.posTypeShortName = data.posTypeShortName;
-  formDataGroup.posTypeRank = data.posTypeRank;
-}
-
 function onClickDetail(id: string) {
   router.push(`/master-data/position-employee/level/${id}`);
 }
 
+/**
+ * ฟังก์ชันปืด popup แก้ไขหรื่อเพิ่มข้อมูลกลุ่มงาน
+ *
+ * และกำหนดให้ ฟอร์มข้อมูลกลุ่มงาน เป็นค่าว่าง
+ */
 function closeDialog() {
   dialog.value = false;
-  clearFormData();
-}
-
-function clearFormData() {
   formDataGroup.posTypeName = "";
   formDataGroup.posTypeShortName = "";
   formDataGroup.posTypeRank = null;
 }
 
-onMounted(() => {
+/**
-  fetchData();
+ * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
+onMounted(async () => {
+  await fetchData();
 });
 </script>
 
@@ -268,17 +250,6 @@ onMounted(() => {
           >
             <q-tooltip>แก้ไขข้อมูล</q-tooltip>
           </q-btn>
-          <!-- <q-btn
-            color="red"
-            flat
-            dense
-            round
-            icon="mdi-delete"
-            clickable
-            @click.stop="onClickDelete(props.row.id)"
-          >
-            <q-tooltip>ลบข้อมูล</q-tooltip>
-          </q-btn> -->
         </q-td>
         <q-td v-for="col in props.cols" :key="col.id">
           {{ col.value ? col.value : "-" }}
@@ -289,7 +260,7 @@ onMounted(() => {
 
   <q-dialog v-model="dialog" class="dialog" persistent>
     <q-card style="width: 350px">
-      <form @submit.prevent="onClickSubmit">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
         <q-card-section class="flex justify-between" style="padding: 0">
           <dialog-header
             :tittle="
@@ -313,7 +284,7 @@ onMounted(() => {
               lazy-rules
               borderless
               bg-color="white"
-              :rules="[(val) => val.length > 0 || 'กรุณากรอกชื่อกลุ่มงาน']"
+              :rules="[(val:string) => val.length > 0 || 'กรุณากรอกชื่อกลุ่มงาน']"
               hide-bottom-space
               class="inputgreen"
             />
@@ -329,7 +300,7 @@ onMounted(() => {
               label="อักษรย่อกลุ่มงาน"
               lazy-rules
               hide-bottom-space
-              :rules="[(val) => !!val || `${'กรุณากรอกอักษรย่อกลุ่มงาน'}`]"
+              :rules="[(val:string) => !!val || `${'กรุณากรอกอักษรย่อกลุ่มงาน'}`]"
               class="inputgreen"
             />
           </div>
@@ -345,7 +316,7 @@ onMounted(() => {
               borderless
               min="1"
               bg-color="white"
-              :rules="[(val) => val != undefined || 'กรุณากรอกระดับกลุ่มงาน']"
+              :rules="[(val:string) => val != undefined || 'กรุณากรอกระดับกลุ่มงาน']"
               hide-bottom-space
               mask="############"
               class="inputgreen"
@@ -354,19 +325,11 @@ onMounted(() => {
         </q-card-section>
         <q-separator />
         <q-card-actions align="right">
-          <q-btn
+          <q-btn id="onSubmit" type="submit" label="บันทึก" color="public">
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            class="q-px-md"
-          >
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>

src/modules/01_metadata/components/position-employee/GroupDetail.vue

@@ -11,7 +11,7 @@ import type {
   ResGroup,
   ResLevel,
 } from "@/modules/01_metadata/interface/response/positionEmployee/Main";
-import type { ObjectLevelRef } from "@/modules/01_metadata/interface/index/positionEmployee";
+import type { DataGroup } from "@/modules/01_metadata/interface/index/positionEmployee";
 import type { FormDataLevel } from "@/modules/01_metadata/interface/request/positionEmployee";
 
 /** importComponts*/
@@ -23,21 +23,15 @@ import { useCounterMixin } from "@/stores/mixin";
 
 /**use*/
 const $q = useQuasar();
+const storeOption = useMainOptionDataStore();
 const route = useRoute();
 const router = useRouter();
-const posName = ref<string>("");
+const { dialogConfirm, showLoader, hideLoader, messageError, success } =
-const posTypeId = ref<string>(route.params.id.toString());
+  useCounterMixin();
-
-const {
-  dialogRemove,
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-} = useCounterMixin();
-const storeOption = useMainOptionDataStore();
 
+// Table
+const rows = ref<DataGroup[]>([]); // รายการกลุ่มงาน
+const filter = ref<string>(""); // คำค้นหา
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -60,7 +54,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "posTypeName",
     align: "left",
-    label: "กลุ่มงาน",
+    label: "ระดับชั้นงาน",
     sortable: true,
     field: "posTypeName",
     headerStyle: "font-size: 14px",
@@ -77,42 +71,38 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const rows = ref<any>([]);
-
 const visibleColumns = ref<string[]>([
   "no",
   "posLevelName",
   "posTypeName",
   "posLevelAuthority",
 ]);
-const filter = ref<string>("");
 
-const levelId = ref<string>("");
+const posTypeId = ref<string>(route.params.id.toString()); // id กลุ่มงาน
-const titleName = ref<string | null>("");
+const titleName = ref<string | null>(""); // ชื่อกลุ่มงาน
+const levelId = ref<string>(""); // id ระดับชั้นงานที่จะแก้ไข
+const isStatusEdit = ref<boolean>(false); // สถานะแก่ไขข้อมูล
+const modalDialog = ref<boolean>(false); // popup
+// ฟอร์มระดับชั้นงาน
 const formDataLevel = reactive<FormDataLevel>({
   posLevelName: null,
   posTypeName: "",
   posLevelAuthority: "",
 });
 
-/** formRef*/
+/**
-const posLevelNameRef = ref<Object | null>(null);
+ * ฟังก์ชันดึงข้อมูลรายการระดับชั้นงาน API
-const commanderRef = ref<Object | null>(null);
+ *
-const objectLevelRef: ObjectLevelRef = {
+ * เก็บข้อมูลรรายการระดับชั้นงานไว้ใน rows.value
-  posLevelName: posLevelNameRef,
+ */
-  posLevelAuthority: commanderRef,
+async function fetchData() {
-};
-
-const id = ref<string>(route.params.id.toString());
-
-function fetchData() {
   showLoader();
-  http
+  await http
-    .get(config.API.orgEmployeeTypeById(id.value))
+    .get(config.API.orgEmployeeTypeById(posTypeId.value))
-    .then((res) => {
+    .then(async (res) => {
       titleName.value = res.data.result.posTypeName ?? null;
       formDataLevel.posTypeName = res.data.result.posTypeName;
-      rows.value = res.data.result.posLevels.map((x: any) => ({
+      rows.value = await res.data.result.posLevels.map((x: ResLevel) => ({
         ...x,
         posTypeName: res.data.result.posTypeName,
       }));
@@ -125,9 +115,17 @@ function fetchData() {
     });
 }
 
-const isStatusEdit = ref<boolean>(false);
+/**
-const modalDialog = ref<boolean>(false);
+ * ฟังก์ชันเปิด popup แก้ไขข้อมูลระดับชั้นงาน
-function onClickOpenDialog(statusEdit: boolean = false, data: any = []) {
+ * @param data ข้อมูลระดับชั้นงานที่จะแก้ไข
+ *
+ * กำหนด  isStatusEdit เป็น true และกำหนดให้ ฟอร์มข้อมูลระดับชั้นงาน เป็น ข้อมูลที่จะแก่ไข
+ *
+ */
+function onClickOpenDialog(
+  statusEdit: boolean = false,
+  data: DataGroup = {} as DataGroup
+) {
   isStatusEdit.value = statusEdit;
   modalDialog.value = true;
 
@@ -141,6 +139,11 @@ function onClickOpenDialog(statusEdit: boolean = false, data: any = []) {
   }
 }
 
+/**
+ * ฟังก์ชันปืด popup แก้ไขหรื่อเพิ่มข้อมูลระดับชั้นงาน
+ *
+ * และกำหนดให้ ฟอร์มข้อมูลระดับชั้นงาน เป็นค่าว่าง
+ */
 function onClickCloseDialog() {
   modalDialog.value = false;
   formDataLevel.posLevelName = null;
@@ -148,66 +151,57 @@ function onClickCloseDialog() {
   formDataLevel.posLevelAuthority = "";
 }
 
-function onClickSubmit() {
+/**
-  const hasError = [];
+ * ยืนยันการบันทึกข้อมูลรายการระดับชั้นงาน
-  for (const key in objectLevelRef) {
+ *
-    if (Object.prototype.hasOwnProperty.call(objectLevelRef, key)) {
+ * ุ ถ้า dialogStatus เป็น 'false' จะทำการเพิ่มข้อมูลรายการระดับชั้นงาน ถ้าไม่จะทำการแก้ไขข้อมูล
-      const property = objectLevelRef[key];
+ * เมื่อบันทึกข้อมูลเสร็จจะเรียก function fetchData() เพื่อดึงข้อมูลรายการระดับชั้นงานใหม่
-      if (property.value && typeof property.value.validate === "function") {
+ *
-        const isValid = property.value.validate();
+ */
-        hasError.push(isValid);
+function onSubmit() {
-      }
+  dialogConfirm($q, async () => {
-    }
+    showLoader();
-  }
+    const body = {
-  if (hasError.every((result) => result === true)) {
+      posLevelName: Number(formDataLevel.posLevelName),
-    dialogConfirm($q, () => {
+      posTypeId: posTypeId.value,
-      submit();
+      posLevelRank: Number(formDataLevel.posLevelName),
-    });
+      posLevelAuthority: formDataLevel.posLevelAuthority,
-  }
+    };
-}
+    // กำหนด Phat APi
-
-async function submit() {
-  const body = {
-    posLevelName: Number(formDataLevel.posLevelName),
-    posTypeId: posTypeId.value,
-    posLevelRank: Number(formDataLevel.posLevelName),
-    posLevelAuthority: formDataLevel.posLevelAuthority,
-  };
-  showLoader();
-  try {
     const url = !isStatusEdit.value
       ? config.API.orgEmployeelevel
       : config.API.orgEmployeelevelById(levelId.value);
-    await http[!isStatusEdit.value ? "post" : "put"](url, body);
-    success($q, "บันทีกข้อมูลสำเร็จ");
-    fetchData();
-    onClickCloseDialog();
-  } catch (err) {
-    messageError($q, err);
-  } finally {
-    hideLoader();
-  }
-}
 
-function onClickDelete(id: string) {
+    await http[!isStatusEdit.value ? "post" : "put"](url, body)
-  dialogRemove($q, () => {
+      .then(async () => {
-    http
+        await fetchData();
-      .delete(config.API.orgEmployeelevelById(id))
+        success($q, "บันทีกข้อมูลสำเร็จ");
-      .then(() => {
+        onClickCloseDialog();
-        success($q, "ลบข้อมูลสำเร็จ");
-        fetchData();
       })
       .catch((err) => {
         messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
       });
   });
 }
 
+/**
+ * ฟังก์ชันแปลงตำแหน่งผู้มีอำนาจ
+ * @param val ค่าของผู้มีอำนาจ
+ * @returns ตำแหน่งผู้มีอำนาจ
+ */
 function convertPosLevelAuthority(val: string) {
   const result = storeOption.posLevelAuthorityOption.find((e) => e.id === val);
   return result?.label;
 }
 
+/**
+ * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ *
+ * ถ่ามี posTypeId จะดึงข้อมูลรายการระดับชั้นงาน
+ */
 onMounted(() => {
   posTypeId.value && fetchData();
 });
@@ -295,16 +289,6 @@ onMounted(() => {
               >
                 <q-tooltip>แก้ไขข้อมูล</q-tooltip>
               </q-btn>
-              <!-- <q-btn
-                color="red"
-                flat
-                dense
-                round
-                icon="mdi-delete"
-                @click="onClickDelete(props.row.id)"
-              >
-                <q-tooltip>ลบข้อมูล</q-tooltip>
-              </q-btn> -->
             </q-td>
             <q-td v-for="(col, index) in props.cols" :key="col.id">
               <div v-if="col.name == 'no'">
@@ -325,7 +309,7 @@ onMounted(() => {
 
   <q-dialog v-model="modalDialog" class="dialog" persistent>
     <q-card style="width: 350px">
-      <form @submit.prevent="onClickSubmit">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
         <q-card-section class="flex justify-between" style="padding: 0">
           <DialogHeader
             :tittle="isStatusEdit ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
@@ -333,7 +317,7 @@ onMounted(() => {
           />
         </q-card-section>
 
-        <q-separator color="grey-4" />
+        <q-separator />
         <q-card-section class="row q-gutter-y-md">
           <div class="col-12">
             <q-input
@@ -346,8 +330,10 @@ onMounted(() => {
               borderless
               bg-color="white"
               hide-bottom-space
-              mask="#######################################"
+              mask="#"
-              :rules="[(val) => !!val || 'กรุณากรอกระดับชั้นงาน']"
+              reverse-fill-mask
+              :rules="[(val:string) => !!val || 'กรุณากรอกระดับชั้นงาน']"
+              class="inputgreen"
             />
           </div>
 
@@ -366,7 +352,8 @@ onMounted(() => {
               borderless
               bg-color="white"
               hide-bottom-space
-              :rules="[(val) => !!val || 'กรุณาเลือกผู้มีอำนาจสั่งบรรจุ']"
+              :rules="[(val:string) => !!val || 'กรุณาเลือกผู้มีอำนาจสั่งบรรจุ']"
+              class="inputgreen"
             />
           </div>
 
@@ -374,7 +361,7 @@ onMounted(() => {
             <q-select
               ref="posTypeIdRef"
               v-model="formDataLevel.posTypeName"
-              label="กลุ่มงาน"
+              label="ระดับชั้นงาน"
               outlined
               dense
               bg-color="white"
@@ -384,21 +371,13 @@ onMounted(() => {
             />
           </div>
         </q-card-section>
-
+        <q-separator />
         <q-card-actions align="right">
-          <q-btn
+          <q-btn id="onSubmit" type="submit" label="บันทึก" color="public">
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            class="q-px-md"
-          >
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>

src/modules/01_metadata/components/position/01_Position.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 import type { QTableProps } from "quasar";
 import type {
@@ -11,17 +13,14 @@ import type {
   RowDetailPositions,
 } from "@/modules/01_metadata/interface/request/position/index";
 
-import DialogAddPosition from "@/modules/01_metadata/components/position/DialogAddPosition.vue";
+import DialogFormPosition from "@/modules/01_metadata/components/position/DialogFormPosition.vue";
-
-import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
-const rowsPositionSelect = ref<RowDetailPositions[]>([]);
+const { showLoader, hideLoader, messageError, success, dialogRemove } =
-const mixin = useCounterMixin();
+  useCounterMixin();
-const { showLoader, hideLoader, messageError, success, dialogRemove } = mixin;
 
 /** Table*/
-const rows = ref<RowDetailPositions[]>([]);
+const rowsPositionSelect = ref<RowDetailPositions[]>([]); // รายการข้อมูลตำแหน่งข้าราชการ ฯ
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -107,6 +106,7 @@ const visibleColumns = ref<string[]>([
   "positionArea",
 ]);
 
+// ฟอร์มข้อมูลตำแหน่ง
 const formPositionSelect = reactive<FormPositionSelect>({
   positionId: "",
   posTypeId: "",
@@ -119,17 +119,15 @@ const formPositionSelect = reactive<FormPositionSelect>({
   positionArea: "",
   isSpecial: false,
 });
-const editPosition = ref<boolean>(false);
+const modalFormPosition = ref<boolean>(false); // สถานะการ DialogFormPosition
-const copyPosition = ref<boolean>(false);
+const statusEdit = ref<boolean>(false); // สถานะการแก้ไขข้อมูล
+const copyPosition = ref<boolean>(false); // สถานะการคัดลอกข้อมูล
 
-const modalAddPosition = ref<boolean>(false);
+const search = ref<string>(""); // คำค้นหา
-
+const type = ref<string>("ALL"); // ประเภท
-/** input ค้นหา */
-const searchRef = ref<any>(null);
-const search = ref<string>("");
-const type = ref<string>("positionName");
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const optionFilter = ref<DataOption[]>([
+  { id: "ALL", name: "ทั้งหมด" },
   { id: "positionName", name: "ตำแหน่งในสายงาน" },
   { id: "positionField", name: "สายงาน" },
   { id: "positionType", name: "ประเภทตำแหน่ง" },
@@ -140,8 +138,39 @@ const optionFilter = ref<DataOption[]>([
 ]);
 
 /**
- * คัดลอกข้อมูล
+ * ดึงข้อมูลรายการข้อมูลตำแหน่งข้าราชการ ฯ
- * @param data ข้อมูลตำแหน่ง
+ */
+async function fetchData() {
+  showLoader();
+  await http
+    .get(
+      config.API.orgPosPosition + `?keyword=${search.value}&type=${type.value}`
+    )
+    .then(async (res) => {
+      rowsPositionSelect.value = await res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * เปิด  DialogFormPosition สำหลับเพิ่มข้อมูลตำแหน่ง
+ */
+function popupAdd() {
+  modalFormPosition.value = true;
+}
+
+/**
+ * คัดลอกข้อมูลตำแหน่งไปยังแบบฟอร์ม
+ *
+ * @param data ข้อมูลตำแหน่งที่ต้องการคัดลอก
+ * - คัดลอกข้อมูลจาก data ไปยัง formPositionSelect เพื่อแสดงในแบบฟอร์ม
+ * - เปิด DialogFormPosition สำหลับคัดลอกข้อมูล
+ * - copyPosition` เป็น true
  */
 function copyDetiail(data: RowDetailPositions) {
   formPositionSelect.positionId = data.id;
@@ -153,12 +182,17 @@ function copyDetiail(data: RowDetailPositions) {
   formPositionSelect.positionExecutive = data.posExecutiveId;
   formPositionSelect.positionExecutiveField = data.positionExecutiveField;
   formPositionSelect.positionArea = data.positionArea;
-  modalAddPosition.value = true;
+  modalFormPosition.value = true;
   copyPosition.value = true;
 }
+
 /**
  * แก้ไขข้อมูล
- * @param data ข้อมูลตำแหน่ง
+ *
+ * @param data ข้อมูลตำแหน่งที่ต้องการแก้ไข
+ * - คัดลอกข้อมูลจาก data ไปยัง formPositionSelect เพื่อแสดงในแบบฟอร์ม
+ * - เปิด DialogFormPosition สำหลับแก้ไขข้อมูล
+ * - statusEdit = true
  */
 function editDetiail(data: RowDetailPositions) {
   formPositionSelect.positionId = data.id;
@@ -171,8 +205,32 @@ function editDetiail(data: RowDetailPositions) {
   formPositionSelect.positionExecutiveField = data.positionExecutiveField;
   formPositionSelect.positionArea = data.positionArea;
   formPositionSelect.isSpecial = data.isSpecial;
-  modalAddPosition.value = true;
+  modalFormPosition.value = true;
-  editPosition.value = true;
+  statusEdit.value = true;
+}
+
+/**
+ * ยืนยันการลบรายการข้อมูลตำแหน่งข้าราชการ ฯ
+ *
+ * @param id ข้อมูลตำแหน่งข้าราชการ ฯ
+ * - เมื่อการลบสำเร็จ จะดึงข้อมูลใหม่เพื่อแสดงผล และแสดงข้อความสำเร็จ
+ */
+function deletePos(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.orgPosPositionById(id))
+      .then(async () => {
+        await fetchData();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 
 /**
@@ -186,137 +244,81 @@ function inputEdit(val: boolean) {
   };
 }
 
-async function searchInput() {
+/**
-  showLoader();
+ * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
-  await http
+ */
-    .get(
+onMounted(async () => {
-      config.API.orgPosPosition + `?keyword=${search.value}&type=${type.value}`
+  await fetchData();
-    )
-    .then((res) => {
-      rowsPositionSelect.value = res.data.result;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-function addPosition(data: RowDetailPositions) {
-  const isIdExist = rows.value.some((item: any) => item.id === data.id);
-
-  if (!isIdExist) {
-    rows.value = [data, ...rows.value];
-  }
-}
-
-function deletePos(id: string) {
-  dialogRemove($q, () => {
-    showLoader();
-    http
-      .delete(config.API.orgPosPositionById(id))
-      .then(() => {
-        success($q, "ลบข้อมูลสำเร็จ");
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        searchInput();
-        hideLoader();
-      });
-  });
-}
-
-function popupAdd() {
-  modalAddPosition.value = true;
-}
-
-async function fetchData() {
-  search.value = "";
-  showLoader();
-  await http
-    .get(config.API.orgPosPosition + `?keyword=&type=ALL`)
-    .then((res) => {
-      rowsPositionSelect.value = res.data.result;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-onMounted(() => {
-  fetchData();
 });
 </script>
+
 <template>
-  <div class="row col-12 q-mb-sm">
+  <q-form @submit.prevent="fetchData()">
-    <div class="col-md-2">
+    <div class="row col-12 q-mb-sm">
-      <q-btn
+      <div class="col-md-2">
-        id="addComplaints"
-        for="addComplaints"
-        size="12px"
-        flat
-        round
-        color="primary"
-        icon="mdi-plus"
-        @click="popupAdd()"
-        ><q-tooltip>เพิ่มตำเเหน่ง </q-tooltip></q-btn
-      >
-    </div>
-
-    <div class="row col-md-10 q-col-gutter-sm">
-      <div class="col-md-4">
-        <q-select
-          label="ค้นหาจาก"
-          v-model="type"
-          :options="optionFilter"
-          emit-value
-          dense
-          map-options
-          outlined
-          option-label="name"
-          option-value="id"
-        />
-      </div>
-
-      <div class="col-md-6">
-        <q-input
-          ref="searchRef"
-          :class="inputEdit(isReadonly)"
-          v-model="search"
-          outlined
-          dense
-          lazy-rules
-          label="คำค้น"
-          hide-bottom-space
-        >
-          <template v-slot:append>
-            <q-icon
-              v-if="search"
-              name="cancel"
-              @click="fetchData()"
-              class="cursor-pointer"
-            ></q-icon>
-          </template>
-        </q-input>
-      </div>
-
-      <div class="row col-md-2">
         <q-btn
+          id="addComplaints"
+          for="addComplaints"
+          size="12px"
+          flat
+          round
           color="primary"
-          icon="search"
+          icon="mdi-plus"
-          label="ค้นหา"
+          @click="popupAdd()"
-          class="full-width"
+          ><q-tooltip>เพิ่มตำเเหน่ง </q-tooltip></q-btn
-          @click="searchInput()"
+        >
-        />
+      </div>
+
+      <div class="row col-md-10 q-col-gutter-sm">
+        <div class="col-md-4">
+          <q-select
+            label="ค้นหาจาก"
+            v-model="type"
+            :options="optionFilter"
+            emit-value
+            dense
+            map-options
+            outlined
+            option-label="name"
+            option-value="id"
+            :clearable="type !== 'ALL'"
+            @clear="type = 'ALL'"
+          />
+        </div>
+
+        <div class="col-md-6">
+          <q-input
+            :class="inputEdit(isReadonly)"
+            v-model="search"
+            outlined
+            dense
+            lazy-rules
+            label="คำค้น"
+            hide-bottom-space
+          >
+            <template v-slot:append>
+              <q-icon
+                v-if="search"
+                name="cancel"
+                @click="search = ''"
+                class="cursor-pointer"
+              ></q-icon>
+            </template>
+          </q-input>
+        </div>
+
+        <div class="row col-md-2">
+          <q-btn
+            color="primary"
+            icon="search"
+            label="ค้นหา"
+            class="full-width"
+            type="submit"
+          />
+        </div>
       </div>
     </div>
-  </div>
+  </q-form>
 
   <div class="full-width q-mt-sm">
     <d-table
@@ -333,7 +335,7 @@ onMounted(() => {
     >
       <template v-slot:header="props">
         <q-tr :props="props">
-          <q-th auto-width></q-th>
+          <q-th auto-width />
           <q-th
             v-for="col in props.cols"
             :key="col.name"
@@ -388,12 +390,7 @@ onMounted(() => {
               <q-tooltip>ลบข้อมูล</q-tooltip>
             </q-btn>
           </q-td>
-          <q-td
+          <q-td v-for="col in props.cols" :key="col.name" :props="props">
-            v-for="col in props.cols"
-            :key="col.name"
-            :props="props"
-            @click="addPosition(props.row)"
-          >
             <div v-if="col.name == 'no'">
               {{ props.rowIndex + 1 }}
             </div>
@@ -415,11 +412,11 @@ onMounted(() => {
     </d-table>
   </div>
 
-  <DialogAddPosition
+  <DialogFormPosition
-    v-model:add-position="modalAddPosition"
+    v-model:add-position="modalFormPosition"
     v-model:form-data="formPositionSelect"
-    v-model:edit-check="editPosition"
+    v-model:edit-check="statusEdit"
     v-model:copy-check="copyPosition"
-    :get-data="searchInput"
+    :get-data="fetchData"
   />
 </template>

src/modules/01_metadata/components/position/02_Type.vue

@@ -1,25 +1,25 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import type { QInput, QTableProps } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRouter } from "vue-router";
-import { usePositionTypeDataStore } from "@/modules/01_metadata/stores/positionTypeStore";
-import dialogHeader from "@/components/DialogHeader.vue";
 import { useQuasar } from "quasar";
+
+import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionTypeDataStore } from "@/modules/01_metadata/stores/positionTypeStore";
 
-const store = usePositionTypeDataStore();
+import type { QTableProps } from "quasar";
+
+import dialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
 const router = useRouter();
-const mixin = useCounterMixin();
+const store = usePositionTypeDataStore();
-const {
+const { dialogConfirm, success, messageError, showLoader, hideLoader } =
-  dialogRemove,
+  useCounterMixin();
-  dialogConfirm,
+
-  success,
+// Table
-  messageError,
+const filterKeyword = ref<string>(""); //คำค้นหา
-  showLoader,
-  hideLoader,
-} = mixin;
 const columns = [
   {
     name: "posTypeName",
@@ -77,25 +77,25 @@ const columns = [
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ] as const satisfies QTableProps["columns"];
-
-const $q = useQuasar();
-
-const editId = ref<string>("");
-const filterKeyword = ref<string>("");
-const dialog = ref<boolean>(false);
-const posTypeName = ref<string>("");
-const posTypeNameRef = ref<QInput | null>(null);
-const posTypeRank = ref<number | null>(null);
-const posTypeRankRef = ref<QInput | null>(null);
-const dialogStatus = ref<string>("");
 const visibleColumns = ref<string[]>(["posTypeName", "posTypeRank"]);
 
+const editId = ref<string>(""); // id รายกรปะเภทตำแหน่ง
+const dialog = ref<boolean>(false); // modal popu เพิ่มข้อมูล,แก้ไข
+const dialogStatus = ref<string>(""); // สถานการแก้ไข
+const posTypeName = ref<string>(""); // ประเภทตำแหน่ง
+const posTypeRank = ref<number | null>(null); // ระดับตำแหน่ง
+
+/**
+ * ดึงข้อมูลรายการประเภทตำแหน่ง
+ *
+ * บันทึกข้อมูลรายการประเภทตำแหน่งใน Store positionTypeStore
+ */
 async function fetchData() {
   showLoader();
   await http
     .get(config.API.orgPosType)
     .then(async (res) => {
-      store.save(res.data.result);
+      await store.save(res.data.result);
     })
     .catch((err) => {
       messageError($q, err);
@@ -105,92 +105,70 @@ async function fetchData() {
     });
 }
 
-async function addData() {
+/**
-  await http
+ * ยืนยันการบันทึกข้อมูลประเภทตำแหน่ง
-    .post(config.API.orgPosType, {
+ *
-      posTypeName: posTypeName.value,
+ * ุ ถ้า dialogStatus เป็น 'create' จะทำการเพิ่มข้อมูลรายการประเภทตำแหน่ง ถ่้าไม่จะทำการแก้ไขข้อมูล
-      posTypeRank: posTypeRank.value,
+ * เมื่อบันทึกข้อมูลเสร็จจะเรียก function fetchData() เพื่อดึงข้อมูลรายการประเภทตำแหน่งใหม่
-    })
+ *
-    .then(() => {
+ */
-      fetchData();
+function onSubmit() {
-      success($q, "บันทึกข้อมูลสำเร็จ");
+  if (posTypeName.value.length > 0 && posTypeRank.value !== null) {
-    })
+    dialogConfirm($q, async () => {
-    .catch((err) => {
+      showLoader();
-      messageError($q, err);
+      // กำหนด Path API
-    })
+      const path =
-    .finally(() => {
+        dialogStatus.value === "create"
-      hideLoader();
+          ? config.API.orgPosType // เพิ่มรายการประเภทตำแหน่ง
+          : config.API.orgPosTypeId(editId.value); // แก้ไขรายการประเภทตำแหน่ง
+
+      // กำหนด method
+      const method = dialogStatus.value === "create" ? "post" : "put";
+
+      await http[method](path, {
+        posTypeName: posTypeName.value,
+        posTypeRank: posTypeRank.value,
+      })
+        .then(async () => {
+          await fetchData();
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          closeDialog();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
     });
+  }
 }
 
-async function editData(id: string) {
+/**
-  await http
+ * ปืด popup ฟอร์มประเภทตำแหน่ง
-    .put(config.API.orgPosTypeId(id), {
+ *
-      posTypeName: posTypeName.value,
+ * และเคลียร์ตัวแปรในฟอร์มประเภทตำแหน่ง
-      posTypeRank: posTypeRank.value,
+ */
-    })
-    .then(() => {
-      fetchData();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function deleteData(id: string) {
-  await http
-    .delete(config.API.orgPosTypeId(id))
-    .then(() => {
-      fetchData();
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-onMounted(async () => {
-  fetchData();
-});
-
 function closeDialog() {
   dialog.value = false;
   posTypeName.value = "";
   posTypeRank.value = null;
 }
 
+/**
+ * ไปหน้ารายการระดับของประเภทตำแหน่ง
+ * @param id ของประเภทตำแหน่ง
+ */
 function onclickDetail(id: string) {
   router.push(`/master-data/position/level/${id}`);
 }
 
-function validateForm() {
+/**
-  posTypeNameRef.value?.validate();
+ * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
-  posTypeRankRef.value?.validate();
+ */
-  onSubmit();
+onMounted(async () => {
-}
+  await fetchData();
-
+});
-async function onSubmit() {
-  if (posTypeName.value.length > 0 && posTypeRank.value !== null) {
-    dialogConfirm(
-      $q,
-      async () => {
-        dialogStatus.value === "create" ? addData() : editData(editId.value);
-        closeDialog();
-        posTypeName.value = "";
-        posTypeRank.value = null;
-      },
-      "ยืนยันการบันทึกข้อมูล",
-      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-    );
-  }
-}
 </script>
 
 <template>
@@ -277,20 +255,6 @@ async function onSubmit() {
           >
             <q-tooltip>แก้ไขข้อมูล</q-tooltip>
           </q-btn>
-          <!-- <q-btn
-            color="red"
-            flat
-            dense
-            round
-            icon="mdi-delete"
-            clickable
-            @click.stop="
-              dialogRemove($q, async () => await deleteData(props.row.id))
-            "
-            v-close-popup
-          >
-            <q-tooltip>ลบข้อมูล</q-tooltip>
-          </q-btn> -->
         </q-td>
         <q-td v-for="col in props.cols" :key="col.id">
           {{ col.value }}
@@ -301,15 +265,12 @@ async function onSubmit() {
 
   <q-dialog v-model="dialog" class="dialog" persistent>
     <q-card style="min-width: 350px">
-      <form @submit.prevent="validateForm">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <q-card-section class="flex justify-between" style="padding: 0">
+        <dialog-header
-          <dialog-header
+          :tittle="dialogStatus === 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
-            :tittle="dialogStatus === 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+          :close="closeDialog"
-            :close="closeDialog"
+        />
-          />
+        <q-separator />
-        </q-card-section>
-
-        <q-separator color="grey-4" />
         <q-card-section class="q-pa-none">
           <div class="col-12 q-ma-md">
             <q-input
@@ -320,7 +281,7 @@ async function onSubmit() {
               dense
               lazy-rules
               borderless
-              :rules="[(val) => val.length > 0 || 'กรุณากรอกประเภทตำแหน่ง']"
+              :rules="[(val:string) => val.length > 0 || 'กรุณากรอกประเภทตำแหน่ง']"
               hide-bottom-space
               class="inputgreen"
             />
@@ -335,7 +296,7 @@ async function onSubmit() {
               lazy-rules
               borderless
               min="1"
-              :rules="[(val) => val != undefined || 'กรุณากรอกระดับตำแหน่ง']"
+              :rules="[(val:string) => val != undefined || 'กรุณากรอกระดับตำแหน่ง']"
               hide-bottom-space
               mask="############"
               class="inputgreen"
@@ -343,90 +304,15 @@ async function onSubmit() {
           </div>
         </q-card-section>
 
+        <q-separator />
         <q-card-actions align="right">
-          <q-btn
+          <q-btn id="onSubmit" type="submit" label="บันทึก" color="public">
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            class="q-px-md"
-          >
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>
 
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-.border_custom {
-  border-radius: 6px !important;
-  border: 1px solid #e1e1e1;
-}
-$toggle-background-color-on: #06884d;
-$toggle-background-color-off: darkgray;
-$toggle-control-color: white;
-$toggle-width: 40px;
-$toggle-height: 25px;
-$toggle-gutter: 3px;
-$toggle-radius: 50%;
-$toggle-control-speed: 0.15s;
-$toggle-control-ease: ease-in;
-
-// These are our computed variables
-// change at your own risk.
-$toggle-radius: $toggle-height / 2;
-$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
-
-.toggle-control {
-  display: block;
-  position: relative;
-  padding-left: $toggle-width;
-  margin-bottom: 12px;
-  cursor: pointer;
-  font-size: 22px;
-  user-select: none;
-
-  input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-  }
-
-  input:checked ~ .control {
-    background-color: $toggle-background-color-on;
-
-    &:after {
-      left: $toggle-width - $toggle-control-size - $toggle-gutter;
-    }
-  }
-
-  .control {
-    position: absolute;
-    top: -7px;
-    left: -15px;
-    height: $toggle-height;
-    width: $toggle-width;
-    border-radius: $toggle-radius;
-    background-color: $toggle-background-color-off;
-    transition: background-color $toggle-control-speed $toggle-control-ease;
-
-    &:after {
-      content: "";
-      position: absolute;
-      left: $toggle-gutter;
-      top: $toggle-gutter;
-      width: $toggle-control-size;
-      height: $toggle-control-size;
-      border-radius: $toggle-radius;
-      background: $toggle-control-color;
-      transition: left $toggle-control-speed $toggle-control-ease;
-    }
-  }
-}
-</style>

src/modules/01_metadata/components/position/03ListLevel.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { useRouter } from "vue-router";
-import ListLevelDetail from "@/modules/01_metadata/components/position/05ListLevelDetail.vue";
-
-const router = useRouter();
-const posName = ref<string>("");
-</script>
-
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.go(-1)"
-    />
-    รายการระดับของประเภทตำแหน่ง{{ posName }}
-  </div>
-
-  <q-card flat bordered>
-    <ListLevelDetail v-model:posName="posName" />
-  </q-card>
-</template>
-
-<style scoped></style>

src/modules/01_metadata/components/position/03_Executive.vue

@@ -1,50 +1,22 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
-import type {
-  RowListForm,
-  ListMenu,
-} from "@/modules/01_metadata/interface/request/position";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-
-import DialogAdd from "@/modules/01_metadata/components/position/DialogAddExecutive.vue";
 import { useCounterMixin } from "@/stores/mixin";
 
+import type { QTableProps } from "quasar";
+import type { RowListForm } from "@/modules/01_metadata/interface/request/position";
+
+import DialogAdd from "@/modules/01_metadata/components/position/DialogFormExecutive.vue";
+
 const $q = useQuasar();
-const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
-const {
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-  dialogRemove,
-} = mixin;
-
-const dataEdit = ref<any>();
-const isEdit = ref<boolean>(false);
-const modalAdd = ref<boolean>(false);
-const filterKeyword = ref<string>("");
-const rows = ref<RowListForm[]>([]);
-
-const listMenu = ref<ListMenu[]>([
-  {
-    label: "แก้ไข",
-    icon: "mdi-pencil",
-    type: "copy",
-    color: "teal-6",
-  },
-  {
-    label: "ลบ",
-    icon: "delete",
-    type: "remove",
-    color: "red",
-  },
-]);
 
+// Table
+const rows = ref<RowListForm[]>([]); // รายากรข้อมูลตำแหน่งทางการบริหาร
+const filterKeyword = ref<string>(""); // คำค้นหา
 const visibleColumns = ref<string[]>([
   "no",
   "posExecutiveName",
@@ -80,13 +52,22 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-function getData() {
+const dataEdit = ref<RowListForm>(); // ข้อมูลตำแหน่งทางการบริหารที่แก้ไข
+const isEdit = ref<boolean>(false); // สถานการแก้ไข
+const modalPosExecutive = ref<boolean>(false); // popup ตำแหน่งทางการบริหาร
+
+/**
+ * ดึงรายการข้อมูลตำแหน่งทางการบริหาร
+ *
+ * เก็บข้อมูลรายการตำแหน่งทางการบริหารใน rows.value
+ */
+async function getData() {
   showLoader();
   http
     .get(config.API.orgPosExecutive)
-    .then((res) => {
+    .then(async (res) => {
-      const dataList = res.data.result;
+      const data = await res.data.result;
-      rows.value = dataList;
+      rows.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -95,36 +76,29 @@ function getData() {
       hideLoader();
     });
 }
+
+/**
+ * เปิด popup เพื่อเพิ่มข้อมูลรายากรตำแหน่งทางการบริหาร
+ */
 function popUpAdd() {
-  modalAdd.value = true;
+  modalPosExecutive.value = true;
 }
 
-function editPopUp(data: RowListForm[]) {
+/**
+ * เปิด popup เพื่อแก่ไขข้อมูลรายากรตำแหน่งทางการบริหาร
+ * @param data ข้อมูลรายการตำแหน่งทางการบริหารที่ต้องการแก้ไข
+ */
+function editPopUp(data: RowListForm) {
+  modalPosExecutive.value = true;
   dataEdit.value = data;
-  modalAdd.value = true;
   isEdit.value = true;
 }
 
-function deletePos(id: string) {
+/**
-  dialogRemove($q, () => {
+ * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
-    showLoader();
+ */
-    http
+onMounted(async () => {
-      .delete(config.API.orgPosExecutiveById(id))
+  await getData();
-      .then(() => {
-        success($q, "ลบข้อมูลสำเร็จ");
-        getData();
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  });
-}
-
-onMounted(() => {
-  getData();
 });
 </script>
 
@@ -232,7 +206,7 @@ onMounted(() => {
   </div>
 
   <DialogAdd
-    v-model:executive="modalAdd"
+    v-model:executive="modalPosExecutive"
     v-model:form-data="dataEdit"
     v-model:edit="isEdit"
     :get-data="getData"

src/modules/01_metadata/components/position/05ListLevelDetail.vue

@@ -1,544 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import type { QInput, QTableProps } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRoute } from "vue-router";
-import { usePositionDataStore } from "@/modules/01_metadata/stores/positionListStore";
-import { useMainOptionDataStore } from "@/modules/01_metadata/stores/main";
-import { usePositionTypeDataStore } from "@/modules/01_metadata/stores/positionTypeStore";
-import dialogHeader from "@/components/DialogHeader.vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-const store = usePositionDataStore();
-const storeOption = useMainOptionDataStore();
-const storeName = usePositionTypeDataStore();
-
-const mixin = useCounterMixin();
-
-const posName = defineModel<string>("posName", {
-  required: true,
-});
-
-const {
-  dialogRemove,
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-} = mixin;
-const $q = useQuasar();
-
-const columns = [
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px; width:0px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posLevelName",
-    align: "left",
-    label: "ชื่อระดับตำแหน่ง",
-    sortable: true,
-    field: "posLevelName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "posTypeName",
-    align: "left",
-    label: "ประเภทตำแหน่ง",
-    sortable: true,
-    field: "posTypeName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "posLevelRank",
-    align: "left",
-    label: "ระดับของระดับตำแหน่ง",
-    sortable: true,
-    field: "posLevelRank",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "posLevelAuthority",
-    align: "left",
-    label: "ผู้มีอำนาจสั่งบรรจุ",
-    sortable: true,
-    field: "posLevelAuthority",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-
-  {
-    name: "createdAt",
-    align: "center",
-    label: "วันที่สร้าง",
-    sortable: true,
-    field: "createdAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-
-  {
-    name: "lastUpdatedAt",
-    align: "center",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-
-  {
-    name: "lastUpdateFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "lastUpdateFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-] as const satisfies QTableProps["columns"];
-const route = useRoute();
-const id = ref<string>(route.params.id.toString());
-const filterKeyword = ref<string>("");
-const dialog = ref<boolean>(false);
-const dialogStatus = ref<string>("");
-const editId = ref<string>("");
-const posLevelName = ref<string>("");
-const posLevelRank = ref<number>();
-const posLevelAuthority = ref<string>("");
-const posLevelNameRef = ref<QInput | null>(null);
-const posLevelRankRef = ref<QInput | null>(null);
-const posTypeIdRef = ref<QInput | null>(null);
-const posLevelAuthorityRef = ref<QInput | null>(null);
-const visibleColumns = ref<string[]>([
-  "no",
-  "posTypeName",
-  "posLevelName",
-  "posLevelRank",
-  "posLevelAuthority",
-]);
-
-async function fetchData() {
-  showLoader();
-  await http
-    .get(config.API.orgPosTypeId(id.value))
-    .then(async (res) => {
-      posName.value = res.data.result.posTypeName;
-      store.save(res.data.result.posLevels);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function addData() {
-  await http
-    .post(config.API.orgPosLevel, {
-      posLevelName: posLevelName.value,
-      posLevelRank: posLevelRank.value,
-      posLevelAuthority:
-        posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
-      posTypeId: id.value,
-    })
-    .then(() => {
-      fetchData();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function editData(editId: string) {
-  await http
-    .put(config.API.orgPosLevelId(editId), {
-      posLevelName: posLevelName.value,
-      posLevelRank: posLevelRank.value,
-      posLevelAuthority:
-        posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
-      posTypeId: id.value,
-    })
-    .then(() => {
-      fetchData();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function deleteData(id: string) {
-  await http
-    .delete(config.API.orgPosLevelId(id))
-    .then(() => {
-      fetchData();
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-function closeDialog() {
-  dialog.value = false;
-}
-
-function validateForm() {
-  posLevelNameRef.value?.validate();
-  posLevelRankRef.value?.validate();
-  posTypeIdRef.value?.validate();
-  posLevelAuthorityRef.value?.validate();
-  onSubmit();
-}
-
-async function onSubmit() {
-  if (
-    posLevelName.value.length > 0 &&
-    posLevelAuthority.value.length > 0 &&
-    posLevelRank.value !== undefined &&
-    posLevelRank.value > 0
-  ) {
-    dialogConfirm(
-      $q,
-      async () => {
-        dialogStatus.value === "create" ? addData() : editData(editId.value);
-        closeDialog();
-      },
-      "ยืนยันการบันทึกข้อมูล",
-      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-    );
-  }
-}
-
-onMounted(async () => {
-  fetchData();
-});
-</script>
-
-<template>
-  <div class="q-pa-md">
-    <q-toolbar style="padding: 0">
-      <q-btn
-        flat
-        round
-        color="primary"
-        icon="add"
-        @click.stop="
-          () => {
-            dialogStatus = 'create';
-            dialog = true;
-            posLevelName = '';
-            posLevelRank = undefined;
-            posLevelAuthority = '';
-          }
-        "
-      >
-        <q-tooltip> เพิ่มข้อมูล </q-tooltip>
-      </q-btn>
-      <q-space />
-      <div class="row q-gutter-sm">
-        <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></q-input>
-        <q-select
-          v-model="visibleColumns"
-          multiple
-          outlined
-          dense
-          options-dense
-          :display-value="$q.lang.table.columns"
-          emit-value
-          map-options
-          :options="columns"
-          option-value="name"
-          options-cover
-          style="min-width: 150px"
-        />
-      </div>
-    </q-toolbar>
-
-    <d-table
-      ref="table"
-      :columns="columns"
-      :rows="store.row"
-      :filter="filterKeyword"
-      row-key="name"
-      flat
-      bordered
-      :paging="true"
-      dense
-      class="custom-header-table"
-      :visible-columns="visibleColumns"
-    >
-      <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-bold">{{ col.label }}</span>
-          </q-th>
-        </q-tr>
-      </template>
-      <template v-slot:body="props">
-        <q-tr :props="props">
-          <q-td auto-width>
-            <q-btn
-              color="edit"
-              flat
-              dense
-              round
-              class="q-mr-xs"
-              icon="edit"
-              clickable
-              @click.stop="
-                () => {
-                  dialogStatus = 'edit';
-                  editId = props.row.id;
-                  posLevelName = props.row.posLevelName;
-                  posLevelRank = props.row.posLevelRank;
-                  if (props.row.posLevelAuthority === 'หัวหน้าหน่วยงาน') {
-                    posLevelAuthority = 'HEAD';
-                  } else if (props.row.posLevelAuthority === 'ปลัด') {
-                    posLevelAuthority = 'DEPUTY';
-                  } else {
-                    posLevelAuthority = 'GOVERNOR';
-                  }
-
-                  dialog = true;
-                }
-              "
-            >
-              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-            </q-btn>
-            <!-- <q-btn
-              color="red"
-              flat
-              dense
-              round
-              icon="mdi-delete"
-              clickable
-              @click.stop="
-                dialogRemove($q, async () => await deleteData(props.row.id))
-              "
-              v-close-popup
-            >
-              <q-tooltip>ลบข้อมูล</q-tooltip>
-            </q-btn> -->
-          </q-td>
-          <q-td v-for="(col, index) in props.cols" :key="col.id">
-            <div v-if="col.name === 'no'">
-              {{ props.rowIndex + 1 }}
-            </div>
-            <div v-if="col.name === 'posTypeName'">
-              {{ posName }}
-            </div>
-            <div v-else>
-              {{ col.value }}
-            </div>
-          </q-td>
-        </q-tr>
-      </template>
-    </d-table>
-  </div>
-  <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-card style="width: 350px">
-      <form @submit.prevent="validateForm">
-        <q-card-section class="flex justify-between" style="padding: 0">
-          <dialog-header
-            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
-            :close="closeDialog"
-          />
-        </q-card-section>
-
-        <q-separator color="grey-4" />
-        <q-card-section class="row q-gutter-y-md">
-          <div class="col-12">
-            <q-input
-              outlined
-              ref="posLevelNameRef"
-              v-model="posLevelName"
-              label="ชื่อระดับตำแหน่ง"
-              dense
-              lazy-rules
-              borderless
-              bg-color="white"
-              hide-bottom-space
-              :rules="[(val) => val.length > 0 || 'กรุณากรอกระดับตำแหน่ง']"
-              class="inputgreen"
-            />
-          </div>
-
-          <div class="col-12">
-            <q-input
-              ref="posLevelRankRef"
-              outlined
-              v-model="posLevelRank"
-              label="ระดับ"
-              dense
-              lazy-rules
-              borderless
-              min="1"
-              bg-color="white"
-              :rules="[(val) => val > 0 || 'กรุณากรอกระดับ']"
-              hide-bottom-space
-              mask="############"
-              class="inputgreen"
-            />
-          </div>
-
-          <div class="col-12">
-            <q-select
-              ref="posLevelAuthorityRef"
-              outlined
-              v-model="posLevelAuthority"
-              emit-value
-              map-options
-              :options="storeOption.posLevelAuthorityOption"
-              option-value="id"
-              label="ผู้มีอำนาจสั่งบรรจุ"
-              dense
-              lazy-rules
-              :rules="[(val) => !!val || 'กรุณาเลือกผู้มีอำนาจสั่งบรรจุ']"
-              borderless
-              bg-color="white"
-              hide-bottom-space
-              class="inputgreen"
-            />
-          </div>
-
-          <div class="col-12">
-            <q-select
-              ref="posTypeIdRef"
-              v-model="posName"
-              label="ประเภทตำแหน่ง"
-              outlined
-              dense
-              bg-color="white"
-              options-cover
-              hide-bottom-space
-              readonly
-              class="inputgreen"
-            />
-          </div>
-        </q-card-section>
-
-        <q-card-actions align="right">
-          <q-btn
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            class="q-px-md"
-          >
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
-        </q-card-actions>
-      </form>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style scoped lang="scss">
-.border_custom {
-  border-radius: 6px !important;
-  border: 1px solid #e1e1e1;
-}
-$toggle-background-color-on: #06884d;
-$toggle-background-color-off: darkgray;
-$toggle-control-color: white;
-$toggle-width: 40px;
-$toggle-height: 25px;
-$toggle-gutter: 3px;
-$toggle-radius: 50%;
-$toggle-control-speed: 0.15s;
-$toggle-control-ease: ease-in;
-
-// These are our computed variables
-// change at your own risk.
-$toggle-radius: $toggle-height / 2;
-$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
-
-.toggle-control {
-  display: block;
-  position: relative;
-  padding-left: $toggle-width;
-  margin-bottom: 12px;
-  cursor: pointer;
-  font-size: 22px;
-  user-select: none;
-
-  input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-  }
-
-  input:checked ~ .control {
-    background-color: $toggle-background-color-on;
-
-    &:after {
-      left: $toggle-width - $toggle-control-size - $toggle-gutter;
-    }
-  }
-
-  .control {
-    position: absolute;
-    top: -7px;
-    left: -15px;
-    height: $toggle-height;
-    width: $toggle-width;
-    border-radius: $toggle-radius;
-    background-color: $toggle-background-color-off;
-    transition: background-color $toggle-control-speed $toggle-control-ease;
-
-    &:after {
-      content: "";
-      position: absolute;
-      left: $toggle-gutter;
-      top: $toggle-gutter;
-      width: $toggle-control-size;
-      height: $toggle-control-size;
-      border-radius: $toggle-radius;
-      background: $toggle-control-color;
-      transition: left $toggle-control-speed $toggle-control-ease;
-    }
-  }
-}
-</style>

src/modules/01_metadata/components/position/DialogAddExecutive.vue

@@ -1,214 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch } from "vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import type { QTableProps } from "quasar";
-import DialogHeader from "@/components/DialogHeader.vue";
-import type {
-  FormExecutiveRef,
-  RowListForm,
-} from "@/modules/01_metadata/interface/request/position/index";
-import { useCounterMixin } from "@/stores/mixin";
-// import { bo } from "@fullcalendar/core/internal-common";
-const { dialogConfirm, showLoader, success, hideLoader, messageError } =
-  useCounterMixin();
-
-const formExecutive = reactive<RowListForm>({
-  id: "",
-  posExecutiveName: "",
-  posExecutivePriority: null,
-});
-const $q = useQuasar();
-
-const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
-const modal = defineModel<boolean>("executive", { required: true });
-const formData = defineModel<any>("formData", { required: true });
-const isEdit = defineModel<any>("edit", { required: true });
-
-const posExecutiveNameRef = ref<Object | null>(null);
-const posExecutivePriorityRef = ref<Object | null>(null);
-
-const objectExecutiveRef: FormExecutiveRef = {
-  posExecutiveName: posExecutiveNameRef,
-  posExecutivePriority: posExecutivePriorityRef,
-};
-
-const props = defineProps({
-  getData: Function,
-});
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function validateFormExecutive() {
-  const hasError = [];
-  for (const key in objectExecutiveRef) {
-    if (Object.prototype.hasOwnProperty.call(objectExecutiveRef, key)) {
-      const property = objectExecutiveRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    if (isEdit.value == false) {
-      onSubmit();
-    } else {
-      putSubmit();
-    }
-  }
-}
-
-/** ฟังชั่น บันทึก */
-function onSubmit() {
-  dialogConfirm(
-    $q,
-    async () => {
-      showLoader();
-      const body = {
-        posExecutiveName: formExecutive.posExecutiveName,
-        posExecutivePriority: formExecutive.posExecutivePriority, //สายงาน
-      };
-      await http
-        .post(config.API.orgPosExecutive, body)
-        .then(() => {
-          success($q, "เพิ่มข้อมูลสำเร็จ");
-          clearForm();
-          modal.value = false;
-          props.getData?.();
-        })
-        .catch((err) => {
-          messageError($q, err);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    },
-    "ยืนยันการเพิ่มตำแหน่ง",
-    "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
-  );
-}
-/** ฟังชั่น บันทึก */
-function putSubmit() {
-  dialogConfirm(
-    $q,
-    async () => {
-      showLoader();
-      const body = {
-        posExecutiveName: formExecutive.posExecutiveName,
-        posExecutivePriority: formExecutive.posExecutivePriority, //สายงาน
-      };
-      await http
-        .put(config.API.orgPosExecutive + `/${formExecutive.id}`, body)
-        .then(() => {
-          success($q, "เพิ่มข้อมูลสำเร็จ");
-          clearForm();
-          modal.value = false;
-          props.getData?.();
-        })
-        .catch((err) => {
-          messageError($q, err);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    },
-    "ยืนยันการเพิ่มตำแหน่ง",
-    "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
-  );
-}
-
-async function clearForm() {
-  formExecutive.id = "";
-  formExecutive.posExecutiveName = "";
-  formExecutive.posExecutivePriority = null;
-  isEdit.value = false;
-}
-
-/**
- * ส่งค่า css ออกไปตามเงื่อนไข
- * @param val true/false
- */
-function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer inputgreen ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
-
-function close() {
-  clearForm();
-  modal.value = false;
-}
-watch(
-  () => modal.value,
-  () => {
-    if (modal.value == true) {
-      const dataList = formData.value;
-      formExecutive.id = "";
-      formExecutive.posExecutiveName = "";
-      formExecutive.posExecutivePriority = null;
-      if (isEdit.value == true) {
-        formExecutive.id = dataList.id;
-        formExecutive.posExecutiveName = dataList.posExecutiveName;
-        formExecutive.posExecutivePriority = dataList.posExecutivePriority;
-      }
-    }
-  }
-);
-</script>
-
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 50vw">
-      <form @submit.prevent="validateFormExecutive">
-        <DialogHeader
-          :tittle="
-            isEdit ? `แก้ไขตำแหน่งทางการบริหาร` : 'เพิ่มตำแหน่งทางการบริหาร'
-          "
-          :close="close"
-        />
-        <q-separator />
-
-        <q-card-section>
-          <div class="row q-col-gutter-sm col-12">
-            <div class="col-6">
-              <q-input
-                ref="posExecutiveNameRef"
-                v-model="formExecutive.posExecutiveName"
-                :class="inputEdit(isReadonly)"
-                dense
-                outlined
-                for="#posExecutiveName"
-                label="ชื่อตำแหน่งทางการบริหาร"
-                lazy-rules
-                hide-bottom-space
-                :rules="[
-                  (val) => !!val || `${'กรุณากรอกชื่อตำแหน่งทางการบริหาร'}`,
-                ]"
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                ref="posExecutivePriorityRef"
-                v-model="formExecutive.posExecutivePriority"
-                :class="inputEdit(isReadonly)"
-                dense
-                outlined
-                type="number"
-                for="#posExecutivePriority"
-                label="ลำดับความสำคัญ"
-                lazy-rules
-                hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณากรอกลำดับความสำคัญ'}`]"
-              />
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions align="right" class="bg-white text-teal">
-          <q-btn type="submit" :label="`บันทึก`" color="public" />
-        </q-card-actions>
-      </form>
-    </q-card>
-  </q-dialog>
-</template>

src/modules/01_metadata/components/position/DialogFormExecutive.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { RowListForm } from "@/modules/01_metadata/interface/request/position/index";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const { dialogConfirm, showLoader, success, hideLoader, messageError } =
+  useCounterMixin();
+
+/**
+ * props
+ */
+const modal = defineModel<boolean>("executive", { required: true }); // popup
+const formData = defineModel<any>("formData", { required: true }); // ข้อมูลที่ต้องการแก้ไข
+const isEdit = defineModel<any>("edit", { required: true }); // สถานะการแก้ไข
+const props = defineProps({
+  getData: Function,
+});
+
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+// ตัวแปรตำแหน่งทางการบริหาร
+const formExecutive = reactive<RowListForm>({
+  id: "",
+  posExecutiveName: "",
+  posExecutivePriority: null,
+});
+
+/**
+ * ยืนยันการบันทึกข้อมูลรายการตำแหน่งทางการบริหาร
+ *
+ * ุ ถ้า isEdit เป็น false จะทำการเพิ่มข้อมูลรายการตำแหน่งทางการบริหาร ถ้าไม่จะทำการแก้ไขข้อมูล
+ * เมื่อบันทึกข้อมูลเสร็จจะเรียก function props.getData() เพื่อดึงข้อมูลรายการตำแหน่งทางการบริหาร
+ *
+ */
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    const body = {
+      posExecutiveName: formExecutive.posExecutiveName,
+      posExecutivePriority: formExecutive.posExecutivePriority, //สายงาน
+    };
+
+    // กำหนด Path API
+    const path = isEdit.value
+      ? config.API.orgPosExecutive + `/${formExecutive.id}`
+      : config.API.orgPosExecutive;
+
+    // กำหนด method
+    const method = isEdit.value ? "put" : "post";
+
+    await http[method](path, body)
+      .then(async () => {
+        await props.getData?.();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        close();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * ปิด popup ฟอร์มข้อมูลรายการตำแหน่งทางการบริหาร
+ *
+ * และเคลียร  formExecutive ข้อมูลรายการตำแหน่งทางการบริหารให้เป็นค่าว่าง
+ */
+function close() {
+  modal.value = false;
+
+  formExecutive.id = "";
+  formExecutive.posExecutiveName = "";
+  formExecutive.posExecutivePriority = null;
+  isEdit.value = false;
+}
+
+/**
+ * ส่งค่า css ออกไปตามเงื่อนไข
+ * @param val true/false
+ */
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+/**
+ * เมื่อค่า modal เป็น true จะทำการรีเซ็ตค่าของฟอร์ม formExecutive
+ *
+ * และเมื่อ isEdit เป็น true จะกำหนดข้อมูลลงในฟอร์ม formExecutive
+ */
+watch(
+  () => modal.value,
+  async () => {
+    if (modal.value) {
+      const dataList = await formData.value;
+      formExecutive.id = "";
+      formExecutive.posExecutiveName = "";
+      formExecutive.posExecutivePriority = null;
+      if (isEdit.value == true) {
+        formExecutive.id = dataList.id;
+        formExecutive.posExecutiveName = dataList.posExecutiveName;
+        formExecutive.posExecutivePriority = dataList.posExecutivePriority;
+      }
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 350px">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="
+            isEdit ? `แก้ไขตำแหน่งทางการบริหาร` : 'เพิ่มตำแหน่งทางการบริหาร'
+          "
+          :close="close"
+        />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm col-12">
+            <div class="col-12">
+              <q-input
+                ref="posExecutiveNameRef"
+                v-model="formExecutive.posExecutiveName"
+                :class="inputEdit(isReadonly)"
+                dense
+                outlined
+                for="#posExecutiveName"
+                label="ชื่อตำแหน่งทางการบริหาร"
+                lazy-rules
+                hide-bottom-space
+                :rules="[
+                  (val:string) => !!val || `${'กรุณากรอกชื่อตำแหน่งทางการบริหาร'}`,
+                ]"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                ref="posExecutivePriorityRef"
+                v-model="formExecutive.posExecutivePriority"
+                :class="inputEdit(isReadonly)"
+                dense
+                outlined
+                type="number"
+                for="#posExecutivePriority"
+                label="ลำดับความสำคัญ"
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกลำดับความสำคัญ'}`]"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn type="submit" :label="`บันทึก`" color="public" />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>

src/modules/01_metadata/components/position/DialogFormPosition.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref, reactive, watch, defineProps } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 import type {
   DataOption,
@@ -10,136 +12,152 @@ import type {
   OptionType,
   OptionLevel,
   OptionExecutive,
+  FormPositionSelect,
 } from "@/modules/01_metadata/interface/request/position/index";
+import type { ResPosType } from "@/modules/01_metadata/interface/response/position/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
-import { useCounterMixin } from "@/stores/mixin";
-
-const executiveOpsMain = ref<DataOption[]>([]);
-const levelOps = ref<DataOption[]>([]);
-const levelOpsMain = ref<DataOption[]>([]);
-const typeOps = ref<DataOption[]>([]);
-const typeOpsMain = ref<DataOption[]>([]);
-const dataLevel = ref<any>();
-const executiveOps = ref<DataOption[]>([]);
-const formPositionSelect = reactive<FormPositionSelectDialog>({
-  positionId: "",
-  positionName: "",
-  positionField: "",
-  positionType: "",
-  positionLevel: "",
-  positionExecutive: "",
-  positionExecutiveField: "",
-  positionArea: "",
-});
 const $q = useQuasar();
-const isSpecial = ref<boolean>(false);
-const props = defineProps({
-  getData: Function,
-});
 const { dialogConfirm, showLoader, success, hideLoader, messageError } =
   useCounterMixin();
 
-const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+/**
+ * props
+ */
 const modal = defineModel<boolean>("addPosition", { required: true });
-const formData = defineModel<any>("formData", { required: true });
+const formData = defineModel<FormPositionSelect>("formData", {
+  required: true,
+});
 const editCheck = defineModel<boolean>("editCheck", { required: true });
 const copyCheck = defineModel<boolean>("copyCheck", { required: true });
+const props = defineProps({
+  getData: Function,
+});
 
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+// ตัวเลือก
-function validateFormPositionEdit() {
+const executiveOpsMain = ref<DataOption[]>([]); //ตำแหน่งทางการบริหารหลัก
-  // const hasError = [];
+const executiveOps = ref<DataOption[]>([]); //ตำแหน่งทางการบริหาร
-  // for (const key in objectPositionSelectRef) {
+const typeOpsMain = ref<DataOption[]>([]); // ประเภทตำแหน่งหลัก
-  //   if (Object.prototype.hasOwnProperty.call(objectPositionSelectRef, key)) {
+const typeOps = ref<DataOption[]>([]); // ประเภทตำแหน่ง
-  //     const property = objectPositionSelectRef[key];
+const levelOpsMain = ref<DataOption[]>([]); // ระดับตำแหน่งหลัก
-  //     if (property.value && typeof property.value.validate === "function") {
+const levelOps = ref<DataOption[]>([]); // ระดับตำแหน่ง
-  //       const isValid = property.value.validate();
+
-  //       hasError.push(isValid);
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
-  //     }
+const dataType = ref<ResPosType[]>([]); // ข้อมูลประเภทตำแหน่ง
-  //   }
+// ฟอร์มข้อมูลตำแหน่ง
-  // }
+const formPositionSelect = reactive<FormPositionSelectDialog>({
-  // if (hasError.every((result) => result === true)) {
+  positionId: "",
-  if (editCheck.value == true) {
+  positionName: "", //ตำแหน่งในสายงาน
-    saveSelectEdit();
+  positionField: "", //สายงาน
-  } else {
+  positionType: "", //*ประเภทตำแหน่ง
-    onSubmitSelectEdit();
+  positionLevel: "", // ระดับตำแหน่ง
-  }
+  positionExecutive: "", //ตำแหน่งทางการบริหาร
-  // }
+  positionExecutiveField: "", //ด้านทางการบริหาร
+  positionArea: "", //ด้าน/สาขา
+});
+const isSpecial = ref<boolean>(false); // เฉพาะสายงานที่กำหนด
+
+/**
+ * เรียกรายการประเภทตำแหน่ง
+ *
+ * ฟังก์ชันนี้ดึงข้อมูลประเภทตำแหน่งจาก API และเซ็ตค่าให้กับตัวเลือกประเภทตำแหน่ง
+ */
+async function fetchType() {
+  showLoader();
+  await http
+    .get(config.API.orgPosType)
+    .then(async (res) => {
+      const data = await res.data.result;
+      dataType.value = data; // เก็บข้อมูลไว้ในตัวแปร dataType
+      typeOpsMain.value = data.map((e: OptionType) => ({
+        id: e.id,
+        name: e.posTypeName,
+      }));
+      typeOps.value = typeOpsMain.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
-/** ฟังชั่น บันทึก */
+/**
-function saveSelectEdit() {
+ * เรียกรายการตำแหน่งทางการบริหาร
-  dialogConfirm(
+ *
-    $q,
+ * ฟังก์ชันนี้ดึงข้อมูลตำแหน่งทางการบริหารจาก API และเซ็ตค่าให้กับตัวเลือกตำแหน่งทางการบริหาร
-    async () => {
+ */
-      showLoader();
+async function fetchExecutive() {
-      const body = {
+  showLoader();
-        posDictName: formPositionSelect.positionName,
+  await http
-        posDictField: formPositionSelect.positionField, //สายงาน
+    .get(config.API.orgPosExecutive)
-        posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
+    .then(async (res) => {
-        posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
+      executiveOpsMain.value = await res.data.result.map(
-        posExecutiveId: formPositionSelect.positionExecutive, //ตำแหน่งทางการบริหาร
+        (e: OptionExecutive) => ({
-        posDictExecutiveField: formPositionSelect.positionExecutiveField, //ด้านทางการบริหาร
+          id: e.id,
-        posDictArea: formPositionSelect.positionArea, //ด้าน/สาขา
+          name: e.posExecutiveName,
-        isSpecial: isSpecial.value,
-      };
-      await http
-        .put(config.API.orgPosPositionById(formPositionSelect.positionId), body)
-        .then(() => {
-          success($q, "เพิ่มข้อมูลสำเร็จ");
-          clearFormPositionSelect();
-          modal.value = false;
-          editCheck.value = false;
-          props.getData?.();
         })
-        .catch((err) => {
+      );
-          messageError($q, err);
+      executiveOps.value = executiveOpsMain.value;
-        })
+    })
-        .finally(() => {
+    .catch((err) => {
-          hideLoader();
+      messageError($q, err);
-        });
+    })
-    },
+    .finally(() => {
-    "ยืนยันการเพิ่มตำแหน่ง",
+      hideLoader();
-    "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
+    });
-  );
-}
-/** ฟังชั่น บันทึก */
-function onSubmitSelectEdit() {
-  dialogConfirm(
-    $q,
-    async () => {
-      showLoader();
-      const body = {
-        posDictName: formPositionSelect.positionName,
-        posDictField: formPositionSelect.positionField, //สายงาน
-        posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
-        posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
-        posExecutiveId: formPositionSelect.positionExecutive,
-        posDictExecutiveField: formPositionSelect.positionExecutiveField, //ด้านทางการบริหาร
-        posDictArea: formPositionSelect.positionArea, //ด้าน/สาขา
-        isSpecial: isSpecial.value,
-      };
-      await http
-        .post(config.API.orgPosPosition, body)
-        .then(() => {
-          success($q, "เพิ่มข้อมูลสำเร็จ");
-          clearFormPositionSelect();
-          modal.value = false;
-          editCheck.value = false;
-        })
-        .catch((err) => {
-          messageError($q, err);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    },
-    "ยืนยันการเพิ่มตำแหน่ง",
-    "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
-  );
 }
 
+/**
+ * บันทึกข้อมูลตำแหน่ง
+ *
+ * editCheck เป็น true จำทำการแก้ไขข้อมูล ถ้าไม่จะเป็นการ เพิ่มข้อมูล
+ * บันทึกข้อมูลเสร็จ จะทำการโหลด ข้อมูลรายการตำแหน่งข้าราชการ ฯ ใหม่
+ */
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    const body = {
+      posDictName: formPositionSelect.positionName,
+      posDictField: formPositionSelect.positionField, //สายงาน
+      posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
+      posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
+      posExecutiveId: formPositionSelect.positionExecutive, //ตำแหน่งทางการบริหาร
+      posDictExecutiveField: formPositionSelect.positionExecutiveField, //ด้านทางการบริหาร
+      posDictArea: formPositionSelect.positionArea, //ด้าน/สาขา
+      isSpecial: isSpecial.value,
+    };
+
+    // กำหนด path API
+    const path = editCheck.value
+      ? config.API.orgPosPositionById(formPositionSelect.positionId)
+      : config.API.orgPosPosition;
+    // กำหนด method
+    const method = editCheck.value ? http.put : http.post;
+    await method(path, body)
+      .then(async () => {
+        await props.getData?.();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+        editCheck.value = false;
+        clearFormPositionSelect();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * เคลียร์ข้อมูลในฟอร์มการเลือกตำแหน่ง
+ *
+ * รีเซ็ตค่าทุกฟิลด์ใน formPositionSelect ให้เป็นค่า default
+ */
 async function clearFormPositionSelect() {
   formPositionSelect.positionId = "";
   formPositionSelect.positionName = "";
@@ -151,8 +169,39 @@ async function clearFormPositionSelect() {
   formPositionSelect.positionArea = "";
 }
 
+/**
+ * อัปเดตตัวเลือกประเภทตำแหน่งและระดับตำแหน่งที่สอดคล้องกับประเภทที่เลือก
+ * @param val id ของประเภทตำแหน่งที่เลือก
+ */
+async function updateSelectType(val: string) {
+  // หาระดับตำแหน่งที่ตรงกับประเภทตำแหน่งที่เลือก
+  const listLevel = dataType.value.find((e: ResPosType) => e.id === val);
+
+  // ถ้าพบประเภทตำแหน่งที่ตรงกัน ให้กำหนดค่าตัวเลือกสำหรับระดับตำแหน่ง
+  if (listLevel) {
+    levelOpsMain.value = listLevel.posLevels.map((e: OptionLevel) => ({
+      id: e.id,
+      name: e.posLevelName,
+    }));
+    levelOps.value = levelOpsMain.value;
+  }
+}
+
+/**
+ * ปิด popup ฟอร์มข้อมูลตำแหน่ง
+ *
+ * และทำการเรียก function clearFormPositionSelect() เพื่อเคลียร์ข้อมูลในฟอร์มการเลือกตำแหน่ง
+ */
+function close() {
+  modal.value = false;
+  editCheck.value = false;
+  copyCheck.value = false;
+  clearFormPositionSelect();
+}
+
 /**
  * ส่งค่า css ออกไปตามเงื่อนไข
+ *
  * @param val true/false
  */
 function inputEdit(val: boolean) {
@@ -162,63 +211,24 @@ function inputEdit(val: boolean) {
   };
 }
 
-/** function เรียกรายการประเภทตำแหน่ง */
+/**
-async function fetchType() {
+ * watch ค่าของ modal popup
-  showLoader();
+ */
-  await http
-    .get(config.API.orgPosType)
-    .then((res) => {
-      const data = res.data.result;
-      dataLevel.value = data;
-      typeOpsMain.value = data.map((e: OptionType) => ({
-        id: e.id,
-        name: e.posTypeName,
-      }));
-      typeOps.value = typeOpsMain.value;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1000);
-    });
-}
-
-/** 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(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1000);
-    });
-}
-
 watch(
   () => modal.value,
-  () => {
+  async () => {
+    // ถ้า modal ถูกเปิดขึ้น
     if (modal.value == true) {
-      fetchType();
+      // เรียกฟังก์ชัน fetchType และ fetchExecutive พร้อมกัน เพื่อดึงข้อมูลประเภทและข้อมูลตำแหน่งทางการบริหาร
-      fetchExecutive();
+      await Promise.all([fetchType(), fetchExecutive()]);
+
+      // ถ้าอยู่ในโหมดแก้ไขหรือคัดลอกข้อมูล
       if (editCheck.value || copyCheck.value) {
-        const dataList = formData.value;
+        const dataList = formData.value; // ดึงข้อมูลที่ต้องการจาก formData
-        setTimeout(() => {
+
-          updateSelectType(dataList.posTypeId);
+        // อัปเดตตัวเลือกประเภทตำแหน่งตามข้อมูลที่เลือก
-        }, 1000);
+        await updateSelectType(dataList.posTypeId);
+
         formPositionSelect.positionId = dataList.positionId;
         formPositionSelect.positionName = dataList.positionName;
         formPositionSelect.positionField = dataList.positionField;
@@ -233,28 +243,12 @@ watch(
     }
   }
 );
-
-function updateSelectType(val: string) {
-  const listLevel = dataLevel.value.find((e: any) => e.id === val);
-  levelOpsMain.value = listLevel.posLevels.map((e: OptionLevel) => ({
-    id: e.id,
-    name: e.posLevelName,
-  }));
-  levelOps.value = levelOpsMain.value;
-}
-
-function close() {
-  modal.value = false;
-  editCheck.value = false;
-  copyCheck.value = false;
-  clearFormPositionSelect();
-}
 </script>
 
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card style="min-width: 50vw">
-      <q-form greedy @submit.prevent="validateFormPositionEdit">
+      <q-form greedy @submit.prevent="onSubmit">
         <DialogHeader
           :tittle="`${editCheck ? 'แก้ไขข้อมูลตำแหน่ง' : 'เพิ่มข้อมูลตำแหน่ง'}`"
           :close="close"
@@ -274,7 +268,7 @@ function close() {
                 label="ตำแหน่งในสายงาน"
                 lazy-rules
                 hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งในสายงาน'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่งในสายงาน'}`]"
               />
             </div>
             <div class="col-6">
@@ -301,7 +295,7 @@ function close() {
                 label="สายงาน"
                 lazy-rules
                 hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณากรอกสายงาน'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกสายงาน'}`]"
               />
             </div>
             <div class="col-6">
@@ -320,7 +314,7 @@ function close() {
                 option-value="id"
                 lazy-rules
                 hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`]"
               />
             </div>
             <div class="col-6">
@@ -339,7 +333,7 @@ function close() {
                 option-value="id"
                 lazy-rules
                 hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]"
               />
             </div>
             <div class="col-6">

src/modules/01_metadata/components/position/TypeDetail.vue

@@ -0,0 +1,485 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+
+import { useRouter, useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionDataStore } from "@/modules/01_metadata/stores/positionListStore";
+import { useMainOptionDataStore } from "@/modules/01_metadata/stores/main";
+
+import type { QInput, QTableProps } from "quasar";
+
+import dialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const store = usePositionDataStore();
+const storeOption = useMainOptionDataStore();
+const {
+  dialogRemove,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+} = useCounterMixin();
+
+//table
+const filterKeyword = ref<string>(""); //คำค้นหา
+const columns = [
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px; width:0px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ชื่อระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posLevelRank",
+    align: "left",
+    label: "ระดับของระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevelRank",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posLevelAuthority",
+    align: "left",
+    label: "ผู้มีอำนาจสั่งบรรจุ",
+    sortable: true,
+    field: "posLevelAuthority",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "createdAt",
+    align: "center",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "lastUpdatedAt",
+    align: "center",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+] as const satisfies QTableProps["columns"];
+const visibleColumns = ref<string[]>([
+  "no",
+  "posTypeName",
+  "posLevelName",
+  "posLevelRank",
+  "posLevelAuthority",
+]);
+
+const id = ref<string>(route.params.id.toString()); //ประเภทตำแหน่ง
+const posName = ref<string>(""); // ชื่อประเภทตำแหน่ง
+const dialog = ref<boolean>(false); // modal popu เพิ่มข้อมูล,แก้ไข
+const dialogStatus = ref<string>(""); //สถานการแก้ไข
+const editId = ref<string>(""); // id ระดับตำแหน่ง
+
+const posLevelName = ref<string>(""); // ชื่อระดับตำแหน่ง
+const posLevelRank = ref<number>(); // ระดับ
+const posLevelAuthority = ref<string>(""); //ผู้มีอำนวจ
+
+/**
+ * ดึงข้อมูลรายการระดับประเภทตำแหน่งตาม id ประเภทตำแหน่ง
+ *
+ * กำหนดชื่อของ ประเภทตำแหน่ง ในตัวแปร posName.velue
+ * บันทึกข้อมูลรายการระดับประเภทตำแหน่งใน Store positionTypeStore
+ */
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.orgPosTypeId(id.value))
+    .then(async (res) => {
+      posName.value = res.data.result.posTypeName;
+      store.save(res.data.result.posLevels);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ยืนยันการบันทึกข้อมูลรายการระดับของประเภทตำแหน่ง
+ *
+ * ุ ถ้า dialogStatus เป็น 'create' จะทำการเพิ่มข้อมูลรายการระดับของประเภทตำแหน่ง ถ่้าไม่จะทำการแก้ไขข้อมูล
+ * เมื่อบันทึกข้อมูลเสร็จจะเรียก function fetchData() เพื่อดึงข้อมูลระดับของประเภทตำแหน่งใหม่
+ *
+ */
+async function onSubmit() {
+  if (
+    posLevelName.value.length > 0 &&
+    posLevelAuthority.value.length > 0 &&
+    posLevelRank.value !== undefined &&
+    posLevelRank.value > 0
+  ) {
+    dialogConfirm($q, async () => {
+      showLoader();
+      // กำหนด Path API
+      const path =
+        dialogStatus.value === "create"
+          ? config.API.orgPosLevel // เพิ่มรายการระดับของประเภทตำแหน่ง
+          : config.API.orgPosLevelId(editId.value); // แก้ไขรายการระดับของประเภทตำแหน่ง
+
+      // กำหนด method
+      const method = dialogStatus.value === "create" ? "post" : "put";
+
+      await http[method](path, {
+        posLevelName: posLevelName.value,
+        posLevelRank: posLevelRank.value,
+        posLevelAuthority:
+          posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
+        posTypeId: id.value,
+      })
+        .then(async () => {
+          await fetchData();
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          closeDialog();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    });
+  }
+}
+
+/**
+ *  ยืนยันการลบข้อมูลรายการระดับของประเภทตำแหน่ง
+ * @param id รายการระดับของประเภทตำแหน่ง
+ */
+async function deleteData(id: string) {
+  await http
+    .delete(config.API.orgPosLevelId(id))
+    .then(async () => {
+      await fetchData();
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ปิด popup ฟอร์มข้อมูลระดับของประเภทตำแหน่ง
+ */
+function closeDialog() {
+  dialog.value = false;
+}
+
+/**
+ * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
+onMounted(async () => {
+  await fetchData();
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    รายการระดับของประเภทตำแหน่ง{{ posName }}
+  </div>
+
+  <q-card flat bordered>
+    <q-card-section>
+      <q-toolbar style="padding: 0">
+        <q-btn
+          flat
+          round
+          color="primary"
+          icon="add"
+          @click.stop="
+            () => {
+              dialogStatus = 'create';
+              dialog = true;
+              posLevelName = '';
+              posLevelRank = undefined;
+              posLevelAuthority = '';
+            }
+          "
+        >
+          <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+        </q-btn>
+        <q-space />
+        <div class="row q-gutter-sm">
+          <q-input
+            outlined
+            dense
+            v-model="filterKeyword"
+            label="ค้นหา"
+          ></q-input>
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+      </q-toolbar>
+
+      <d-table
+        ref="table"
+        :columns="columns"
+        :rows="store.row"
+        :filter="filterKeyword"
+        row-key="name"
+        flat
+        bordered
+        :paging="true"
+        dense
+        class="custom-header-table"
+        :visible-columns="visibleColumns"
+      >
+        <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-bold">{{ col.label }}</span>
+            </q-th>
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props">
+            <q-td auto-width>
+              <q-btn
+                color="edit"
+                flat
+                dense
+                round
+                class="q-mr-xs"
+                icon="edit"
+                clickable
+                @click.stop="
+                  () => {
+                    dialogStatus = 'edit';
+                    editId = props.row.id;
+                    posLevelName = props.row.posLevelName;
+                    posLevelRank = props.row.posLevelRank;
+                    if (props.row.posLevelAuthority === 'หัวหน้าหน่วยงาน') {
+                      posLevelAuthority = 'HEAD';
+                    } else if (props.row.posLevelAuthority === 'ปลัด') {
+                      posLevelAuthority = 'DEPUTY';
+                    } else {
+                      posLevelAuthority = 'GOVERNOR';
+                    }
+
+                    dialog = true;
+                  }
+                "
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+              <q-btn
+                color="red"
+                flat
+                dense
+                round
+                icon="mdi-delete"
+                clickable
+                @click.stop="
+                  dialogRemove($q, async () => await deleteData(props.row.id))
+                "
+                v-close-popup
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
+            <q-td v-for="(col, index) in props.cols" :key="col.id">
+              <div v-if="col.name === 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-if="col.name === 'posTypeName'">
+                {{ posName }}
+              </div>
+              <div v-else>
+                {{ col.value }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </q-card-section>
+    <!-- <ListLevelDetail v-model:posName="posName" /> -->
+  </q-card>
+
+  <q-dialog v-model="dialog" class="dialog" persistent>
+    <q-card style="width: 350px">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <dialog-header
+          :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+          :close="closeDialog"
+        />
+
+        <q-separator />
+        <q-card-section class="row q-gutter-y-md">
+          <div class="col-12">
+            <q-input
+              outlined
+              ref="posLevelNameRef"
+              v-model="posLevelName"
+              label="ชื่อระดับตำแหน่ง"
+              dense
+              lazy-rules
+              borderless
+              bg-color="white"
+              hide-bottom-space
+              :rules="[(val:string) => val.length > 0 || 'กรุณากรอกระดับตำแหน่ง']"
+              class="inputgreen"
+            />
+          </div>
+
+          <div class="col-12">
+            <q-input
+              ref="posLevelRankRef"
+              outlined
+              v-model="posLevelRank"
+              label="ระดับ"
+              dense
+              lazy-rules
+              borderless
+              min="1"
+              bg-color="white"
+              :rules="[(val:number) => val > 0 || 'กรุณากรอกระดับ']"
+              hide-bottom-space
+              mask="############"
+              class="inputgreen"
+            />
+          </div>
+
+          <div class="col-12">
+            <q-select
+              ref="posLevelAuthorityRef"
+              outlined
+              v-model="posLevelAuthority"
+              emit-value
+              map-options
+              :options="storeOption.posLevelAuthorityOption"
+              option-value="id"
+              label="ผู้มีอำนาจสั่งบรรจุ"
+              dense
+              lazy-rules
+              :rules="[(val:string) => !!val || 'กรุณาเลือกผู้มีอำนาจสั่งบรรจุ']"
+              borderless
+              bg-color="white"
+              hide-bottom-space
+              class="inputgreen"
+            />
+          </div>
+
+          <div class="col-12">
+            <q-select
+              ref="posTypeIdRef"
+              v-model="posName"
+              label="ประเภทตำแหน่ง"
+              outlined
+              dense
+              bg-color="white"
+              options-cover
+              hide-bottom-space
+              readonly
+            />
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

src/modules/01_metadata/interface/index/positionEmployee.ts

@@ -25,4 +25,18 @@ interface FormQuery {
   keyword: string;
 }
 
-export type { ObjectGroupRef, ObjectLevelRef, ObjectPosRef, FormQuery };
+interface DataGroup {
+  id: string;
+  posLevelAuthority: string;
+  posLevelName: number;
+  posLevelRank: number;
+  posTypeName: string;
+}
+
+export type {
+  ObjectGroupRef,
+  ObjectLevelRef,
+  ObjectPosRef,
+  FormQuery,
+  DataGroup,
+};

src/modules/01_metadata/interface/response/position/Main.ts

@@ -0,0 +1,15 @@
+interface ResPosType {
+  id: string;
+  posTypeName: string;
+  posTypeRank: number;
+  posLevels: PosLevels[];
+}
+
+interface PosLevels {
+  id: string;
+  posLevelAuthority: string;
+  posLevelName: string;
+  posLevelRank: number;
+}
+
+export type { ResPosType };

src/modules/01_metadata/interface/response/positionEmployee/Main.ts

@@ -21,6 +21,7 @@ interface ResPossition {
   posLevelName: number;
   posTypeId: string;
   posTypeName: string;
+  posTypeShortName: string;
 }
 
 export type { ResGroup, ResLevel, ResPossition };

src/modules/01_metadata/router.ts

@@ -16,7 +16,7 @@ const personalSubDistrict = () =>
 const positionPage = () =>
   import("@/modules/01_metadata/views/02_position.vue"); //ข้อมูลตำแหน่งข้าราชการ ฯ
 const positionLevelPage = () =>
-  import("@/modules/01_metadata/components/position/03ListLevel.vue"); //รายการระดับของประเภทตำแหน่งทั่วไป
+  import("@/modules/01_metadata/components/position/TypeDetail.vue"); //รายการระดับของประเภทตำแหน่งทั่วไป
 
 /**
  * ข้อมูลตำแหน่งลูกจ้างประจำ
@@ -24,7 +24,7 @@ const positionLevelPage = () =>
 const positionEmployeePage = () =>
   import("@/modules/01_metadata/views/03_positionEmployee.vue"); //ข้อมูลตำแหน่งลูกจ้างประจำ
 const positionEmployeeLevelPage = () =>
-  import("@/modules/01_metadata/components/position-employee/03ListLevel.vue"); //รายการระดับชั้นงานบริการพื้นฐาน
+  import("@/modules/01_metadata/components/position-employee/GroupDetail.vue"); //รายการระดับชั้นงานบริการพื้นฐาน
 
 /**
  * ข้อมูลปฏิทินวันหยุด

src/modules/01_metadata/stores/positionTypeStore.ts

@@ -1,17 +1,23 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
 import type {
   DataResponse,
   DataRow,
 } from "../interface/response/position/ListType";
-import { useCounterMixin } from "@/stores/mixin";
 
 const { date2Thai } = useCounterMixin();
 
 export const usePositionTypeDataStore = defineStore("PositionTypeData", () => {
   const row = ref<DataRow[]>([]);
 
-  function save(data: DataResponse[]) {
+  /**
+   * บันทึกข้อมูลลงใน  row.value
+   * @param data ข้อมูลรายการจาก API
+   */
+  async function save(data: DataResponse[]) {
     const list = data.map((e) => ({
       ...e,
       posTypes: undefined,

src/modules/01_metadata/views/01_personal.vue

@@ -5,14 +5,14 @@ import { usePersonalDataStore } from "@/modules/01_metadata/stores/personalStore
 
 import type { MainTabs } from "@/modules/01_metadata/interface/index/Main";
 
-import ListPrefix from "@/modules/01_metadata/components/personal/01ListPrefix.vue"; // คำนำหน้าชื่อ
+import ListPrefix from "@/modules/01_metadata/components/personal/01_Prefix.vue"; // คำนำหน้าชื่อ
-import ListRank from "@/modules/01_metadata/components/personal/02ListRank.vue"; //ยศ
+import ListRank from "@/modules/01_metadata/components/personal/02_Rank.vue"; //ยศ
-import ListGender from "@/modules/01_metadata/components/personal/03ListGender.vue"; // เพศ
+import ListGender from "@/modules/01_metadata/components/personal/03_Gender.vue"; // เพศ
-import ListRelationship from "@/modules/01_metadata/components/personal/04ListRelationship.vue"; //สถานภาพ
+import ListRelationship from "@/modules/01_metadata/components/personal/04_Relationship.vue"; //สถานภาพ
-import ListBloodGroup from "@/modules/01_metadata/components/personal/05ListBloodGroup.vue"; // กลุ่มเลือด
+import ListBloodGroup from "@/modules/01_metadata/components/personal/05_BloodGroup.vue"; // กลุ่มเลือด
-import ListReligion from "@/modules/01_metadata/components/personal/06ListReligion.vue"; // ศาสนา
+import ListReligion from "@/modules/01_metadata/components/personal/06_Religion.vue"; // ศาสนา
-import ListProvince from "@/modules/01_metadata/components/personal/07ListProvince.vue"; // จังหวัด
+import ListProvince from "@/modules/01_metadata/components/personal/07_Province.vue"; // จังหวัด
-import ListEducation from "@/modules/01_metadata/components/personal/08ListEducationLevel.vue"; //  ระดับการศึกษา
+import ListEducation from "@/modules/01_metadata/components/personal/08_EducationLevel.vue"; //  ระดับการศึกษา
 
 const store = usePersonalDataStore();
 

src/modules/01_metadata/views/02_position.vue

@@ -1,15 +1,21 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 
-import ListPosition from "@/modules/01_metadata/components/position/01ListPosition.vue";
-import ListType from "@/modules/01_metadata/components/position/02ListType.vue";
-import ListExecutive from "@/modules/01_metadata/components/position/04ListExecutive.vue";
-
 import { usePositionDataStore } from "../stores/positionListStore";
 
-const tabs = ref<Array<any>>([]);
+import type { MainTabs } from "@/modules/01_metadata/interface/index/Main";
+
+import ListPosition from "@/modules/01_metadata/components/position/01_Position.vue"; //ตำแหน่ง
+import ListType from "@/modules/01_metadata/components/position/02_Type.vue"; // รายการประเภทตำแหน่ง
+import ListExecutive from "@/modules/01_metadata/components/position/03_Executive.vue"; // ตำแหน่งทางการบริหาร
+
 const store = usePositionDataStore();
 
+const tabs = ref<Array<MainTabs>>([]); // รายการ Tab
+
+/**
+ * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
 onMounted(() => {
   const tabsPerson = [
     { label: "ตำแหน่ง", value: "list_position" },

src/modules/01_metadata/views/03_positionEmployee.vue

@@ -1,13 +1,20 @@
-div
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import ListPosition from "@/modules/01_metadata/components/position-employee/01ListPosition.vue";
+
-import ListType from "@/modules/01_metadata/components/position-employee/02ListType.vue";
 import { usePositionEmployeeDataStore } from "../stores/positionEmployeeStore";
-// const store.pathLocation = ref<string>("list_position");
+
-const tabs = ref<Array<any>>([]);
+import type { MainTabs } from "@/modules/01_metadata/interface/index/Main";
+
+import ListPosition from "@/modules/01_metadata/components/position-employee/01_PositionMain.vue"; //ตำแหน่ง
+import ListType from "@/modules/01_metadata/components/position-employee/02_GroupMain.vue"; // รายการกลุ่มงาน
+
 const store = usePositionEmployeeDataStore();
 
+const tabs = ref<Array<MainTabs>>([]); // รายการ Tab
+
+/**
+ * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
 onMounted(() => {
   const tabsPerson = [
     { label: "ตำแหน่ง", value: "list_position" },
@@ -51,10 +58,6 @@ onMounted(() => {
       <q-tab-panel name="list_type">
         <ListType v-if="store.pathLocation == 'list_type'" />
       </q-tab-panel>
-
-      <q-tab-panel name="list_executive">
-        <ListExecutive v-if="store.pathLocation == 'list_executive'" />
-      </q-tab-panel>
     </q-tab-panels>
   </q-card>
 </template>

src/modules/02_users/components/RoleOrganization/DialogAddPerson.vue

@@ -0,0 +1,294 @@
+<script setup lang="ts">
+import { reactive, ref, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStoreUser } from "@/modules/02_users/stores/main";
+
+import type { QTableProps } from "quasar";
+import type {
+  DataProfile,
+  Pagination,
+} from "@/modules/02_users/interface/index/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const store = useDataStoreUser();
+const { showLoader, hideLoader, messageError, success, dialogConfirm } =
+  useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const orgId = defineModel<string>("orgId", { required: true });
+const props = defineProps({
+  fetchData: {
+    type: Function,
+    required: true,
+  },
+});
+
+const qurey = reactive({
+  searchKeyword: "", // คำค้นหา
+  searchField: "fullName", // field ที่ต้องการค้นหา
+  page: 1, // หน้า
+  pageSize: 10, // จำนวนที่ต้องการ
+});
+const selected = ref<DataProfile[]>([]); //รายชื่อที่เลือก
+const rows = ref<DataProfile[]>([]); // ข้อมูลรายชื่อ
+const total = ref<number>(0); // จำนวนข้อมูลทั้งหมด
+const maxPage = ref<number>(0); // จำนวนหน้า
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: (row) => `${row.prefix}${row.firstName}  ${row.lastName}`,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "เลขที่ตำแห่นง",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "posType",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: (row) =>
+      `${row.posType ? row.posType : "-"}  ${
+        row.posLevel ? `(${row.posLevel})` : ``
+      } `,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+/**
+ * ฟังก์ชันดึงข้อมูลรายชื่อ
+ * @param newPage โหลดหน้าแรก ถ้าเป็บ true  โหลดหน้าแรก false ให้โหลดหน้าปัจจุบัน
+ *
+ * เก็บมูลรายชื่อไว่ใน rows.value
+ */
+async function onSearchListPerson(newPage: boolean = false) {
+  qurey.page = newPage ? 1 : qurey.page;
+  selected.value = [];
+  showLoader();
+  await http
+    .get(config.API.permissionOrgProfile, {
+      params: qurey,
+    })
+    .then((res) => {
+      const data = res.data.result;
+      maxPage.value = Math.ceil(data.total / qurey.pageSize);
+      total.value = data.total;
+      rows.value = data.data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังก์ชันยืนยันการเพิ่มราชื่อ
+ *
+ * เมื่อเพิ่มเสร็จจะดึงข้อมูลรายชื่อคนที่มีสิทธิ์จัดการโครงสร้างตามหน่วยงาน
+ */
+function onSubmitPerson() {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      const person = selected.value[0];
+      const body = {
+        nodeId: orgId.value,
+        personId: person.id,
+      };
+      await http
+        .post(config.API.permissionOrg, body)
+        .then(async () => {
+          await props.fetchData?.(false);
+          success($q, "เพิ่มราชชื่อสำเร็จ");
+          onClose();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการเพิ่มรายชื่อ",
+    "ต้องการยืนยันการเพิ่มรายชื่อนี้หรือไม่ ?"
+  );
+}
+
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: Pagination) {
+  qurey.pageSize = newPagination.rowsPerPage;
+}
+
+/**
+ * ฟังก์ชันปิด popup ราชชื่อ
+ *
+ * และกำหนดค่าของ qurey ไปเป็นค่า defult  rows.value และ selected.value ไปเป็นค่าว่าง
+ */
+function onClose() {
+  modal.value = false;
+  qurey.page = 1;
+  qurey.pageSize = 10;
+  qurey.searchField = "fullName";
+  qurey.searchKeyword = "";
+  rows.value = [];
+  selected.value = [];
+}
+
+/**
+ * ดูการเปลี่ยนแปลงของ pageSize ใน queryBody
+ *
+ * เมื่อ pageSize มีการเปลี่ยนแปลงให้โหลดข้อมูลหน้าแรก
+ */
+watch(
+  () => qurey.pageSize,
+  () => {
+    onSearchListPerson(true);
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 60%">
+      <DialogHeader :tittle="'รายชื่อ'" :close="onClose" />
+      <q-separator />
+      <q-card-section style="max-height: 50vh" class="scroll">
+        <div class="col-12">
+          <q-toolbar style="padding: 0">
+            <q-select
+              outlined
+              dense
+              v-model="qurey.searchField"
+              :options="store.searchFieldOption"
+              label="เลือกที่ต้องการค้นหา"
+              emit-value
+              map-options
+              option-label="name"
+              option-value="id"
+              style="width: 250px"
+            />
+
+            <q-toolbar-title>
+              <q-input
+                outlined
+                dense
+                v-model="qurey.searchKeyword"
+                label="คำค้นหา"
+                clearable
+              >
+                <template v-slot:append v-if="!qurey.searchKeyword">
+                  <q-icon name="search" color="grey-5" />
+                </template>
+              </q-input>
+            </q-toolbar-title>
+
+            <q-btn
+              label="ค้นหา"
+              color="primary"
+              @click="onSearchListPerson(true)"
+            />
+          </q-toolbar>
+        </div>
+        <div class="col-12">
+          <d-table
+            :columns="columns"
+            :rows="rows"
+            :paging="true"
+            row-key="id"
+            flat
+            bordered
+            dense
+            :rows-per-page-options="[10, 25, 50, 100]"
+            selection="single"
+            v-model:selected="selected"
+            @update:pagination="updatePagination"
+          >
+            <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">
+                <td auto-width>
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="props.selected"
+                  />
+                </td>
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                  <div>
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+            <template v-slot:pagination="scope">
+              ทั้งหมด {{ total }} รายการ
+              <q-pagination
+                v-model="qurey.page"
+                active-color="primary"
+                color="dark"
+                :max="maxPage"
+                :max-pages="5"
+                size="sm"
+                boundary-links
+                direction-links
+                @update:model-value="onSearchListPerson(false)"
+              ></q-pagination>
+            </template>
+          </d-table>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn
+          label="เพิ่ม"
+          color="public"
+          :disable="selected.length === 0"
+          @click="onSubmitPerson"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

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

@@ -52,4 +52,51 @@ interface DataSystem {
   parentNode: string;
 }
 
-export type { Pagination, ItemsMenu, DataOption, SystemList, DataSystem };
+interface DataTree {
+  ancestorDNA: string;
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: "94ba986d-f871-46a2-be92-46c0cbf0bc56";
+  id: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  orgRevisionId: string;
+  orgRootCode: string;
+  orgRootFax: string;
+  orgRootName: string;
+  orgRootOrder: number;
+  orgRootPhoneEx: string;
+  orgRootPhoneIn: string;
+  orgRootRank: string;
+  orgRootRankSub: string;
+  orgRootShortName: string;
+  responsibility: string;
+}
+
+interface DataProfile {
+  avatar: string;
+  avatarName: string;
+  firstName: string;
+  id: string;
+  lastName: string;
+  org: string;
+  orgNew?: string;
+  orgRootId?: string;
+  posLevel: string;
+  posNo: string;
+  posType: string;
+  position: string;
+  prefix: string;
+  rank: string;
+}
+
+export type {
+  Pagination,
+  ItemsMenu,
+  DataOption,
+  SystemList,
+  DataSystem,
+  DataTree,
+  DataProfile,
+};

src/modules/02_users/interface/request/Main.ts

@@ -27,4 +27,12 @@ interface FilterReqMaster {
   keyword: string;
   revisionId: string;
 }
-export type { FormUser, FormRole, Roles, FilterReqMaster };
+
+interface QueryProfile {
+  searchKeyword: string;
+  searchField: string;
+  page: number;
+  pageSize: number;
+  id: string | null;
+}
+export type { FormUser, FormRole, Roles, FilterReqMaster, QueryProfile };

src/modules/02_users/router.ts

@@ -12,6 +12,10 @@ const ListsPage2Role = () =>
 const PermissionPage = () =>
   import("@/modules/02_users/views/permissionsView.vue");
 
+/** roleOrganization */
+const roleOrgview = () =>
+  import("@/modules/02_users/views/roleOrganization.vue");
+
 export default [
   {
     path: "/users",
@@ -55,4 +59,13 @@ export default [
       Role: ["SUPER_ADMIN", "ADMIN"],
     },
   },
+
+  {
+    path: "/roles-organization",
+    name: "roleOrganization",
+    component: roleOrgview,
+    meta: {
+      Role: ["SUPER_ADMIN", "ADMIN"],
+    },
+  },
 ];

src/modules/02_users/stores/main.ts

@@ -1,5 +1,33 @@
 import { defineStore } from "pinia";
+import { ref } from "vue";
 
-export const useDataStore = defineStore("storeData", () => {
+import type { DataOption } from "@/modules/02_users/interface/index/Main";
-  return {};
+
+export const useDataStoreUser = defineStore("storeDataUser", () => {
+  const searchFieldOption = ref<DataOption[]>([
+    {
+      name: "ชื่อ-นามสกุล",
+      id: "fullName",
+    },
+    {
+      name: "เลขที่ตำแห่นง",
+      id: "posNo",
+    },
+
+    {
+      name: "ตำแหน่งในสายงาน",
+      id: "position",
+    },
+    {
+      name: "ประเภทตำแหน่ง",
+      id: "postype",
+    },
+    {
+      name: "ระดับตำแหน่ง",
+      id: "poslevel",
+    },
+  ]);
+  return {
+    searchFieldOption,
+  };
 });

src/modules/02_users/views/roleOrganization.vue

@@ -0,0 +1,451 @@
+<script setup lang="ts">
+import { ref, onMounted, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStoreUser } from "@/modules/02_users/stores/main";
+
+import type { QTableProps } from "quasar";
+import type {
+  DataTree,
+  DataProfile,
+  Pagination,
+} from "@/modules/02_users/interface/index/Main";
+import type { QueryProfile } from "@/modules/02_users/interface/request/Main";
+
+import DialogAddPerson from "@/modules/02_users/components/RoleOrganization/DialogAddPerson.vue";
+
+const $q = useQuasar();
+const store = useDataStoreUser();
+const { showLoader, hideLoader, messageError, success, dialogRemove } =
+  useCounterMixin();
+
+/******* โครงสร้าง *******/
+const filter = ref<string>(""); // ค้นหาข้อมูลรายการโครงสร้าง
+const nodeTree = ref<DataTree[]>([]); // ข้อมูลรายการโครงสร้าง
+const expanded = ref<Array<string>>([]); // เปิดรายการโครงสร้าง
+const orgId = ref<string>(""); // id หน่วยงานที่เลือก
+
+/**
+ * ฟังก์ชันดึงข้อมูลโครงสร้าง
+ *
+ * เก็บข้อมูลโครงสร้างไว้ใน nodeTree
+ */
+async function fatchOrg() {
+  showLoader();
+  await http
+    .get(config.API.permissionOrg)
+    .then(async (res) => {
+      const data = await res.data.result;
+      nodeTree.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังก์ชันเลือกหน่วยงาน
+ * @param id หน่วยงานที่เลือก
+ *
+ * กำหนดค่าของ qureyBody ให้เป็นค่า defult และกำหนดค่าของ  qureyBody.id  เป็นหน่วยงานที่เลือก
+ * และดึงข้อมูลรายชื่อคนที่มีสิทธิ์จัดการโครงสร้างในหน่วยงานที่เลือก
+ */
+function selectedOrg(id: string) {
+  orgId.value = id;
+  qureyBody.id = id;
+  qureyBody.searchKeyword = "";
+  qureyBody.searchField = "fullName";
+  qureyBody.page = 1;
+  fetchListPerson(true);
+}
+
+/******* รายชื่อคนที่มีสิทธิ์จัดการโครงสร้าง *******/
+const qureyBody = reactive<QueryProfile>({
+  searchKeyword: "", // คำค้นหา
+  searchField: "fullName", // field ที่ต้องการค้นหา
+  page: 1, // หน้า
+  pageSize: 10, // จำนวนที่ต้องการ
+  id: null, // หน่วยงานที่เลือก
+});
+const rows = ref<DataProfile[]>([]); // ข้อมูลรายชื่อคนที่มีสิทธิ์จัดการโครงสร้าง
+const total = ref<number>(0); // จำนวนข้อมูลทั้งหมด
+const maxPage = ref<number>(0); // จำนวนหน้า
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: (row) => `${row.prefix}${row.firstName}  ${row.lastName}`,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "org",
+    align: "left",
+    label: "หน่วยงาน",
+    sortable: true,
+    field: "org",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "เลขที่ตำแห่นง",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "posType",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: (row) =>
+      `${row.posType ? row.posType : "-"}  ${
+        row.posLevel ? `(${row.posLevel})` : ``
+      } `,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const modalAdd = ref<boolean>(false); // modal เพิ่มข้อมูลรายชื่อ
+
+/**
+ * ฟังก์ชันดึงข้อมูลรายชื่อคนที่มีสิทธิ์จัดการโครงสร้าง
+ * @param newPage โหลดหน้าแรก ถ้าเป็บ true  โหลดหน้าแรก false ให้โหลดหน้าปัจจุบัน
+ *
+ * เก็บมูลรายชื่อคนที่มีสิทธิ์จัดการโครงสร้างไว่ใน rows.value
+ */
+async function fetchListPerson(newPage: boolean = false) {
+  qureyBody.page = newPage ? 1 : qureyBody.page;
+  showLoader();
+  await http
+    .post(config.API.permissionOrgProfile, qureyBody)
+    .then(async (res) => {
+      const data = await res.data.result;
+      maxPage.value = Math.ceil(data.total / qureyBody.pageSize); // คำนวนหาจำนวนหน้า
+      total.value = data.total; // จำนวนรายชื่อคนที่มีสิทธิ์จัดการโครงสร้าง
+      rows.value = data.data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังก์ชันยืนยันการลบรายชื่อคนที่มีสิทธิ์จัดการโครงสร้าง
+ * @param id รายชื่อคนที่มีสิทธิ์จัดการโครงสร้าง
+ *
+ * ลบเสร็จจะโหลดข้อมูลรายชื่อคนที่มีสิทธิ์จัดการโครงสร้าง
+ */
+function onDeletePerson(id: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.permissionOrg + `/${id}`)
+      .then(async () => {
+        // ถ้า maxPage.value ไม่เท่ากับ 1 ให้ โหลดข้อมูลรายชื่อคนที่มีสิทธิ์จัดการโครงสร้างหน้าปัจจุบัน
+        if (maxPage.value !== 1) {
+          // ถ้ามีแค่หนึ่งแถวในหน้าปัจจุบัน ให้ลด page ลง 1
+          if (rows.value.length === 1) {
+            qureyBody.page = qureyBody.page - 1;
+          }
+          await fetchListPerson(false); // โหลดข้อมูลจากหน้าปัจจุบันโดยไม่รีเซ็ต
+        } else {
+          await fetchListPerson(true); // โหลดข้อมูลหน้าแรก
+        }
+        success($q, "ลบข้อมูสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: Pagination) {
+  qureyBody.pageSize = newPagination.rowsPerPage;
+}
+
+/**
+ * ดูการเปลี่ยนแปลงของ pageSize ใน queryBody
+ *
+ * เมื่อ pageSize มีการเปลี่ยนแปลงให้โหลดข้อมูลหน้าแรก
+ */
+watch(
+  () => qureyBody.pageSize,
+  () => {
+    fetchListPerson(true);
+  }
+);
+
+/**
+ * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ *
+ */
+onMounted(async () => {
+  await Promise.all([
+    fatchOrg(), // ดึงข้อมูลโครงสร้าง
+    fetchListPerson(), // ดึงข้อมูลรายชื่อคนที่มีสิทธิ์จัดการโครงสร้าง
+  ]);
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    กำหนดสิทธิ์จัดการโครงสร้าง
+  </div>
+  <q-card style="height: 100%">
+    <q-card-section :horizontal="$q.screen.gt.xs">
+      <q-card-section class="col-lg-3 col-md-4 col-xs-12 q-gutter-sm">
+        <div>
+          <q-input dense outlined v-model="filter" label="ค้นหา">
+            <template v-slot:append>
+              <q-icon
+                v-if="filter !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="filter = ''"
+              />
+              <q-icon name="search" color="grey-5" />
+            </template>
+          </q-input>
+        </div>
+        <div class="bg-white tree-container q-pa-xs">
+          <q-tree
+            class="q-pa-sm q-gutter-sm"
+            dense
+            :nodes="nodeTree"
+            node-key="orgTreeId"
+            label-key="labelName"
+            :filter="filter"
+            no-results-label="ไม่พบข้อมูลที่ค้นหา"
+            no-nodes-label="ไม่มีข้อมูล"
+            v-model:expanded="expanded"
+          >
+            <template v-slot:default-header="prop">
+              <q-item
+                clickable
+                class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                :active="orgId == prop.node.id"
+                active-class="my-list-link text-primary text-weight-medium"
+                @click.stop="selectedOrg(prop.node.id)"
+              >
+                <div>
+                  <div class="text-weight-medium">
+                    {{ prop.node.orgRootName }}
+                  </div>
+                  <div class="text-weight-light text-grey-8">
+                    {{
+                      prop.node.orgRootCode == null
+                        ? null
+                        : prop.node.orgRootCode
+                    }}
+                    {{
+                      prop.node.orgRootShortName == null
+                        ? null
+                        : prop.node.orgRootShortName
+                    }}
+                  </div>
+                </div>
+              </q-item>
+            </template>
+          </q-tree>
+        </div>
+      </q-card-section>
+      <q-separator :vertical="$q.screen.gt.xs" />
+      <q-card-section
+        class="col-lg-9 col-md-8 col-xs-12 scroll"
+        style="height: 83vh"
+      >
+        <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-card-section>
+            <div class="row col-12 q-col-md">
+              <div class="col-2">
+                <q-btn
+                  v-if="orgId"
+                  flat
+                  dense
+                  color="primary"
+                  icon="add"
+                  round
+                  @click="modalAdd = true"
+                >
+                  <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+                </q-btn>
+              </div>
+
+              <div class="col-md-10">
+                <div class="row col-12 q-col-gutter-sm">
+                  <div class="col-md-4">
+                    <q-select
+                      outlined
+                      dense
+                      v-model="qureyBody.searchField"
+                      :options="store.searchFieldOption"
+                      label="เลือกที่ต้องการค้นหา"
+                      emit-value
+                      map-options
+                      option-label="name"
+                      option-value="id"
+                    />
+                  </div>
+                  <div class="col-md-6">
+                    <q-input
+                      v-model="qureyBody.searchKeyword"
+                      outlined
+                      dense
+                      lazy-rules
+                      label="คำค้น"
+                      hide-bottom-space
+                    >
+                      <template v-slot:append>
+                        <q-icon
+                          v-if="qureyBody.searchKeyword"
+                          name="cancel"
+                          @click="qureyBody.searchKeyword = ''"
+                          class="cursor-pointer"
+                        ></q-icon>
+                      </template>
+                    </q-input>
+                  </div>
+                  <div class="row col-md-2">
+                    <q-btn
+                      color="primary"
+                      icon="search"
+                      label="ค้นหา"
+                      class="full-width"
+                      @click="fetchListPerson(true)"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-12 q-mt-sm">
+              <d-table
+                :columns="columns"
+                :rows="rows"
+                :paging="true"
+                row-key="id"
+                flat
+                bordered
+                dense
+                :rows-per-page-options="[10, 25, 50, 100]"
+                @update:pagination="updatePagination"
+              >
+                <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">
+                    <q-td auto-width>
+                      <q-btn
+                        flat
+                        dense
+                        color="red"
+                        icon="delete"
+                        round
+                        @click.pervent="onDeletePerson(props.row.id)"
+                      >
+                        <q-tooltip>ลบข้อมูล</q-tooltip>
+                      </q-btn>
+                    </q-td>
+                    <q-td
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <div>
+                        {{ col.value ? col.value : "-" }}
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+                <template v-slot:pagination="scope">
+                  ทั้งหมด {{ total }} รายการ
+                  <q-pagination
+                    v-model="qureyBody.page"
+                    active-color="primary"
+                    color="dark"
+                    :max="maxPage"
+                    :max-pages="5"
+                    size="sm"
+                    boundary-links
+                    direction-links
+                    @update:model-value="fetchListPerson(false)"
+                  >
+                  </q-pagination>
+                </template>
+              </d-table>
+            </div>
+          </q-card-section>
+        </q-card>
+      </q-card-section>
+    </q-card-section>
+  </q-card>
+
+  <DialogAddPerson
+    v-model:modal="modalAdd"
+    v-model:org-id="orgId"
+    :fetch-data="fetchListPerson"
+  />
+</template>
+
+<style scoped>
+.tree-container {
+  overflow: auto;
+  height: 74vh;
+  border: 1px solid #e6e6e7;
+  border-radius: 10px;
+}
+
+.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>

src/modules/03_logs/views/lists.vue

@@ -62,6 +62,11 @@ const menuList = ref<{ icon: string; label: string; path: string }[]>([
     label: "ระบบการบรรจุ แต่งตั้ง ย้าย โอน",
     path: "/lists?system=placement",
   },
+  {
+    icon: "mdi-account-convert",
+    label: "ระบบทดลองปฏิบัติหน้าที่ราชการ",
+    path: "/lists?system=probation",
+  },
   {
     icon: "mdi-account-star",
     label: "ระบบการประเมินผลการปฏิบัติราชการระดับบุคคล",

src/views/Dashboard.vue

@@ -55,21 +55,22 @@ async function getData(index: number) {
         totalInbox.value = await res.data.result.total;
 
         let list: DataInbox[] = [];
-        data.map((e: ResponseInbox) => {
+        data &&
-          list.push({
+          data.map((e: ResponseInbox) => {
-            no: e.id ?? "",
+            list.push({
-            sender:
+              no: e.id ?? "",
-              e.createdFullName == "" || e.createdFullName == null
+              sender:
-                ? "เจ้าหน้าที่"
+                e.createdFullName == "" || e.createdFullName == null
-                : e.createdFullName,
+                  ? "เจ้าหน้าที่"
-            subject: e.subject ?? "",
+                  : e.createdFullName,
-            timereceive: new Date(e.receiveDate),
+              subject: e.subject ?? "",
-            body: e.body ?? "",
+              timereceive: new Date(e.receiveDate),
-            payload: e.payload,
+              body: e.body ?? "",
-            ratingModel: 0,
+              payload: e.payload,
-            isOpen: e.isOpen,
+              ratingModel: 0,
+              isOpen: e.isOpen,
+            });
           });
-        });
         inboxList.value.push(...list);
 
         if (inboxList.value.length > 0 && index === 1) {

src/views/MainLayout.vue

@@ -98,27 +98,28 @@ async function getDataNotification(index: number, type: string) {
   };
   await http
     .get(config.API.msgNotificate + `?page=${index}&pageSize=${10}`)
-    .then((res: any) => {
+    .then((res) => {
       const response = res.data.result.data;
       totalInbox.value = res.data.result.total;
       let list: notiType[] = [];
       if (type === "DEL") {
         notiList.value = [];
       }
-      response.map((e: any) => {
+      response &&
-        list.push({
+        response.map((e: any) => {
-          id: e.id,
+          list.push({
-          sender:
+            id: e.id,
-            e.createdFullName == "" || e.createdFullName == null
+            sender:
-              ? "เจ้าหน้าที่"[0]
+              e.createdFullName == "" || e.createdFullName == null
-              : e.createdFullName[0],
+                ? "เจ้าหน้าที่"[0]
-          body: e.body ?? "",
+                : e.createdFullName[0],
-          timereceive: `${date2Thai(e.receiveDate)} ${new Date(
+            body: e.body ?? "",
-            e.receiveDate
+            timereceive: `${date2Thai(e.receiveDate)} ${new Date(
-          ).toLocaleTimeString("th-TH", thaiOptions)} น.`,
+              e.receiveDate
-          isOpen: e.isOpen,
+            ).toLocaleTimeString("th-TH", thaiOptions)} น.`,
+            isOpen: e.isOpen,
+          });
         });
-      });
       notiList.value.push(...list);
       statusLoad.value = totalInbox.value === 0 ? true : false;
     })