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'
                         )"
               />