Refactoring code module 04_registryPerson

src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue

@@ -44,6 +44,9 @@ const {
 
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
+//Table
+const rows = ref<ResListSalary[]>([]); //รายการตำแหน่งเงินเดือน
+const keyword = ref<string>(""); //คำค้นหา
 const baseColumns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -161,31 +164,29 @@ const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
-const rows = ref<ResListSalary[]>([]);
-const keyword = ref<string>("");
 
 const formDataSalary = reactive<FormSalaryNew>({
-  date: null,
-  posNo: "",
-  templatePos: "",
-  position: "",
-  positionLine: "",
-  positionPathSide: "",
-  positionType: "",
-  positionLevel: "",
-  positionExecutive: "",
-  salaryCompensation: null,
-  salary: null,
-  salaryPos: null,
-  refCommandNo: "",
-  templateDoc: "",
-  doc: "",
+  date: null, //วัน/เดือน/ปี
+  posNo: "", //ตำแหน่งเลขที่
+  templatePos: "", //ต้นแบบ (template) ตำแหน่ง
+  position: "", //ตำแหน่ง
+  positionType: "", //ประเภทตำแหน่ง, กลุ่มงาน
+  positionLevel: "", //ระดับตำแหน่ง, ระดับชั้นงาน
+  positionLine: "", // สายงาน
+  positionPathSide: "", //ด้าน/สาขา
+  positionExecutive: "", //ตำแหน่งทางการบริหาร
+  salary: null, //เงินเดือน
+  salaryPos: null, //เงินประจำตำแหน่ง
+  salaryCompensation: null, //เงินค่าตอบแทนรายเดือน
+  refCommandNo: "", //เลขที่คำสั่ง
+  templateDoc: "", //ต้นแบบ (template) เอกสารอ้างอิง
+  doc: "", //เอกสารอ้างอิง
 });
 
-const modalDialogSalary = ref<boolean>(false);
-const isStatusEdit = ref<boolean>(false);
-const salaryId = ref<string>("");
-const dataLevel = ref<ResType[]>([]);
+const modalDialogSalary = ref<boolean>(false); //แสดง popup ตำแหน่งเงินเดือน
+const isStatusEdit = ref<boolean>(false); //สถานะแก้ไขข้อมูลตำแหน่งเงินเดือน
+const salaryId = ref<string>(""); //id ที่ต้องการแก้ไข
+const dataLevel = ref<ResType[]>([]); //รายการ ตำแหน่งเงินเดือน
 
 const posNoOptions = ref<DataOption2[]>(store.optionTemplatePos);
 
@@ -314,7 +315,7 @@ function onClickCloseDialog() {
  * @param update function จาก quasar
  * @param filtername type ที่กำหนด ของ input นั้นๆ
  */
-function filterSelector(val: any, update: Function, filtername: string) {
+function filterSelector(val: string, update: Function, filtername: string) {
   switch (filtername) {
     case "pos":
       update(() => {
@@ -593,16 +594,19 @@ function fetchOptionGroup() {
     });
 }
 
-onMounted(() => {
-  fetchListSalary();
-});
-
 const classInput = (val: boolean) => {
   return {
     "full-width inputgreen cursor-pointer": val,
     "full-width cursor-pointer": !val,
   };
 };
+
+/**
+ * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
+onMounted(() => {
+  fetchListSalary();
+});
 </script>
 <template>
   <div class="row items-center q-gutter-x-sm q-pb-sm">
@@ -815,7 +819,7 @@ const classInput = (val: boolean) => {
                 use-input
                 input-debounce="0"
                 @update:modelValue="updatePos"
-                @filter="(inputValue: any,
+                @filter="(inputValue: string,
                       doneFn: Function) => filterSelector(inputValue, doneFn, 'pos'
                       )"
               />
@@ -857,7 +861,7 @@ const classInput = (val: boolean) => {
                 input-debounce="0"
                 @update:model-value="updateSelectType"
                 :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกประเภทตำแหน่ง'  ]:[(val: string) => !!val ||  'กรุณาเลือกกลุ่มงาน' ]"
-                @filter="(inputValue: any,
+                @filter="(inputValue: string,
                       doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
                       )"
               />
@@ -882,7 +886,7 @@ const classInput = (val: boolean) => {
                 hide-bottom-space
                 use-input
                 input-debounce="0"
-                @filter="(inputValue: any,
+                @filter="(inputValue: string,
                         doneFn: Function) => filterSelector(inputValue, doneFn, 'posLevel'
                         )"
               />
@@ -907,7 +911,7 @@ const classInput = (val: boolean) => {
                 use-input
                 clearable
                 input-debounce="0"
-                @filter="(inputValue: any,
+                @filter="(inputValue: string,
                       doneFn: Function) => filterSelector(inputValue, doneFn, 'positionLine'
                       )"
               />
@@ -931,7 +935,7 @@ const classInput = (val: boolean) => {
                 use-input
                 clearable
                 input-debounce="0"
-                @filter="(inputValue: any,
+                @filter="(inputValue: string,
                       doneFn: Function) => filterSelector(inputValue, doneFn, 'positionPathSide'
                       )"
               />
@@ -955,7 +959,7 @@ const classInput = (val: boolean) => {
                 use-input
                 input-debounce="0"
                 clearable
-                @filter="(inputValue: any,
+                @filter="(inputValue: string,
                     doneFn: Function) => filterSelector(inputValue, doneFn, 'positionExecutive'
                     )"
               />
@@ -1043,7 +1047,7 @@ const classInput = (val: boolean) => {
                 use-input
                 input-debounce="0"
                 @update:modelValue="updateDoc"
-                @filter="(inputValue: any,
+                @filter="(inputValue: string,
                         doneFn: Function) => filterSelector(inputValue, doneFn, 'doc'
                         )"
               />

src/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue

@@ -1,26 +1,32 @@
 <script setup lang="ts">
 import { ref, watch, computed } from "vue";
 import { useQuasar } from "quasar";
+
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRoute } from "vue-router";
 
 import type { QTableProps } from "quasar";
+import type { ResListSalary } from "@/modules/04_registryPerson/interface/response/Salary";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
-import { useCounterMixin } from "@/stores/mixin";
-
 const $q = useQuasar();
 const route = useRoute();
 const { date2Thai, showLoader, hideLoader, messageError, pathRegistryEmp } =
   useCounterMixin();
 
-const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
-
+/**
+ * props
+ */
 const modal = defineModel<boolean>("modal", { required: true });
 const salaryId = defineModel<string>("salaryId", { required: true });
 
+const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
+
+const rows = ref<ResListSalary[]>([]); //รายการข้อมูลประวัติการแก้ไข
+const keyword = ref<string>(""); //คำค้นหา
 const baseColumns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -210,7 +216,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columns = computed(() => {
   if (empType.value === "-employee") {
     if (baseColumns.value) {
@@ -223,18 +228,11 @@ const columns = computed(() => {
   }
   return baseColumns.value;
 });
-const rows = ref<any[]>([]);
 const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
 
-const keyword = ref<string>("");
-
-function closeDialog() {
-  modal.value = false;
-}
-
 /**
  * function fetch ข้อมูลประวัติการแก้ไข
  */
@@ -253,6 +251,19 @@ function fetchListHistory() {
     });
 }
 
+/**
+ * ฟังก์ชันปิด Popup
+ */
+function closeDialog() {
+  modal.value = false;
+  rows.value = [];
+}
+
+/**
+ * ดูการเปลี่ยนแปลงของ modal
+ *
+ * ถ้า modal เป็น true  เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
+ */
 watch(
   () => modal.value,
   () => {

src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue

@@ -1,19 +1,20 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
-import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
+
 import { useRoute } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import { useCounterMixin } from "@/stores/mixin";
-import DialogHeader from "@/components/DialogHeader.vue";
-import DialogHisotory from "@/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue";
-
 import type { QTableProps } from "quasar";
 import type { RowList } from "@/modules/04_registryPerson/interface/index/salary";
 import type { RequestNoPaidObject } from "@/modules/04_registryPerson/interface/request/Salary";
 
+import DialogHeader from "@/components/DialogHeader.vue";
+import DialogHisotory from "@/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue";
+
 const $q = useQuasar();
 const route = useRoute();
 const {
@@ -25,17 +26,29 @@ const {
   success,
   pathRegistryEmp,
 } = useCounterMixin();
+
 const id = ref<string>("");
 const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
-const modelView = ref<string>("table");
-const modalDialog = ref<boolean>(false);
-const modalHistory = ref<boolean>(false);
-const isStatusEdit = ref<boolean>(false);
-const rows = ref<RowList[]>([]);
+const modelView = ref<string>("table"); //การแสดงผล Table,Card
+const modalDialog = ref<boolean>(false); //แสดง popup บันทึกวันที่ไม่ได้รับเงินเดือนฯ
+const modalHistory = ref<boolean>(false); //แสดง popup ประวัติแก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ
+const isStatusEdit = ref<boolean>(false); //สถานะการแก้ไจข้อมูล
+
+const formData = reactive<RequestNoPaidObject>({
+  date: null, //วัน/เดือน/ปี
+  reference: "", //เอกสารอ้างอิง
+  detail: "", //รายละเอียด
+  refCommandNo: "", //เลขที่คำสั่ง
+  refCommandDate: null, //'เอกสารอ้างอิง (ลงวันที่)'
+});
+
+//Table
+const rows = ref<RowList[]>([]); //รายการ
+const keyword = ref<string>(""); //คำค้นหา
 const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -103,15 +116,6 @@ const visibleColumns = ref<string[]>([
   "refCommandNo",
   "refCommandDate",
 ]);
-const formData = reactive<RequestNoPaidObject>({
-  date: null,
-  reference: "",
-  detail: "",
-  refCommandNo: "",
-  refCommandDate: null,
-});
-
-const keyword = ref<string>("");
 const pagination = ref({
   page: 1,
   rowsPerPage: 10,
@@ -153,12 +157,12 @@ function onClickCloseDialog() {
 /**
  * function fetch รายการบันทึกวันที่ไม่ได้รับเงินเดือนฯ
  */
-function getData() {
+async function getData() {
   showLoader();
-  http
+  await http
     .get(config.API.profileNewNoPaidByProfileId(profileId.value, empType.value))
-    .then((res) => {
-      rows.value = res.data.result;
+    .then(async (res) => {
+      rows.value = await res.data.result;
     })
     .catch((e) => {
       messageError($q, e);
@@ -181,8 +185,8 @@ function saveData() {
     })
     .then(async () => {
       await getData();
-      onClickCloseDialog();
       await success($q, "บันทึกข้อมูลสำเร็จ");
+      onClickCloseDialog();
     })
     .catch((e) => {
       messageError($q, e);
@@ -204,8 +208,8 @@ function editData() {
     })
     .then(async () => {
       await getData();
-      onClickCloseDialog();
       await success($q, "บันทึกข้อมูลสำเร็จ");
+      onClickCloseDialog();
     })
     .catch((e) => {
       messageError($q, e);
@@ -223,6 +227,9 @@ function onClickHistory(rowId: string) {
   modalHistory.value = true;
 }
 
+/**
+ * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
 onMounted(() => {
   getData();
 });

src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue

@@ -21,8 +21,10 @@ const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
 const modal = defineModel<boolean>("modal", { required: true });
 const id = defineModel<string>("id", { required: true });
-const filter = ref<string>("");
-const rows = ref<RowList[]>([]);
+
+//Table
+const filter = ref<string>(""); //คำค้นหา
+const rows = ref<RowList[]>([]); //รายการข้อมูลประวัติการแก้ไข
 const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -122,12 +124,12 @@ const pagination = ref({
 /**
  * fetch รายการข้อมูลประวัติการแก้ไช
  */
-function getHistory() {
+async function getHistory() {
   showLoader();
-  http
+  await http
     .get(config.API.profileNewNoPaidHisById(id.value, empType.value))
-    .then((res) => {
-      rows.value = res.data.result;
+    .then(async (res) => {
+      rows.value = await res.data.result;
     })
     .catch((e) => {
       messageError($q, e);
@@ -137,10 +139,19 @@ function getHistory() {
     });
 }
 
+/**
+ * ฟังก์ชันปิด Popup
+ */
 function closeDialog() {
   modal.value = false;
+  rows.value = [];
 }
 
+/**
+ * ดูการเปลี่ยนแปลงของ modal
+ *
+ * ถ้า modal เป็น true  เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
+ */
 watch(modal, (status) => {
   if (status == true) {
     getHistory();

src/modules/04_registryPerson/components/detail/Salary/Main.vue

@@ -2,8 +2,8 @@
 import { ref } from "vue";
 
 /** importComponents*/
-import PositionSalary from "@/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue";
-import NotReceiveSalary from "@/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue";
+import PositionSalary from "@/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue"; //ตำแหน่งเงินเดือน
+import NotReceiveSalary from "@/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue"; //วันที่ไม่ได้รับเงินเดิอน
 
 const tab = ref<string>("1");
 </script>