Refactoring code module 01_metadata => 03_positionEmployee

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/DialogFormExecutive.vue

@@ -35,7 +35,7 @@ const formExecutive = reactive<RowListForm>({
 /**
  * ยืนยันการบันทึกข้อมูลรายการตำแหน่งทางการบริหาร
  *
- * ุ ถ้า isEdit เป็น false จะทำการเพิ่มข้อมูลรายการตำแหน่งทางการบริหาร ถ่้าไม่จะทำการแก้ไขข้อมูล
+ * ุ ถ้า isEdit เป็น false จะทำการเพิ่มข้อมูลรายการตำแหน่งทางการบริหาร ถ้าไม่จะทำการแก้ไขข้อมูล
  * เมื่อบันทึกข้อมูลเสร็จจะเรียก function props.getData() เพื่อดึงข้อมูลรายการตำแหน่งทางการบริหาร
  *
  */

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/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/ListLevel.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/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

@@ -5,9 +5,9 @@ import { usePositionDataStore } from "../stores/positionListStore";
 
 import type { MainTabs } from "@/modules/01_metadata/interface/index/Main";
 
-import ListPosition from "@/modules/01_metadata/components/position/01ListPosition.vue"; //ตำแหน่ง
+import ListPosition from "@/modules/01_metadata/components/position/01_Position.vue"; //ตำแหน่ง
-import ListType from "@/modules/01_metadata/components/position/02ListType.vue"; // รายการประเภทตำแหน่ง
+import ListType from "@/modules/01_metadata/components/position/02_Type.vue"; // รายการประเภทตำแหน่ง
-import ListExecutive from "@/modules/01_metadata/components/position/03ListExecutive.vue"; // ตำแหน่งทางการบริหาร
+import ListExecutive from "@/modules/01_metadata/components/position/03_Executive.vue"; // ตำแหน่งทางการบริหาร
 
 const store = usePositionDataStore();
 

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>