Refactoring code module 13_salary

2024-09-20 18:09:26 +07:00 · 2024-09-20 18:09:26 +07:00 · 4af366c03b
commit 4af366c03b
parent c9dd0202c6
43 changed files with 1215 additions and 1167 deletions
--- a/src/modules/13_salary/views/01_salaryMain.vue
+++ b/src/modules/13_salary/views/01_salaryMain.vue
@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, watch } from "vue";
-import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
+
 import { useRouter } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";

@ -17,13 +19,8 @@ import type { FormQuerySalary } from "@/modules/13_salary/interface/request/Main
 /**
 * importComponents
 */
-import DialogFormMain from "@/modules/13_salary/components/SalaryChart/DialogFormMain.vue"; // ผังบัญชีเงินเดือน
-import DialogFormUpload from "@/modules/13_salary/components/SalaryChart/DialogUpload.vue"; // อัปโหลดเอกสารอ้างอิง
-
-/**
- *importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
+import DialogFormMain from "@/modules/13_salary/components/01_Salary/DialogFormMain.vue"; // ผังบัญชีเงินเดือน
+import DialogFormUpload from "@/modules/13_salary/components/01_Salary/DialogUpload.vue"; // อัปโหลดเอกสารอ้างอิง

 /** use*/
 const $q = useQuasar();
@ -38,12 +35,12 @@ const {
 } = useCounterMixin();

 /** modalDialog*/
-const modalDialogFormMain = ref<boolean>(false);
-const modalUpload = ref<boolean>(false);
-const rowId = ref<string>("");
+const modalDialogFormMain = ref<boolean>(false); //popup เพิ่ม,แก้ไข ผังบัญชีเงินเดือน
+const modalUpload = ref<boolean>(false); //popup อัปโหลดเอกสารอ้างอิง
+const rowId = ref<string>(""); // id รายการผังบัญชีเงินเดือน

 /** Table*/
-const rows = ref<Salary[]>([]);
+const rows = ref<Salary[]>([]); //รายการผังบัญชีเงินเดือน
 const columns = ref<QTableProps["columns"]>([
  {
    name: "name",
@ -95,30 +92,30 @@ const formQuery = reactive<FormQuerySalary>({
  pageSize: 10, //*จำนวนแถวต่อหน้า
  keyword: "", //keyword ค้นหา
 });
-const maxPage = ref<number>(1);
-const total = ref<number>();
-const isActive = ref<boolean>(false);
-const typeAction = ref<string>("");
-const dataRow = ref<Salary>();
+const maxPage = ref<number>(1); //จำนวนหน้า
+const total = ref<number>(); //จำนวนรายการ
+const isActive = ref<boolean>(false); //สถานะการใช้งาน
+const typeAction = ref<string>(""); //ประเภทการกระทำ
+const dataSalary = ref<Salary>(); //ข้อมูลรายการผังบัญชีเงินเดือนที่ต้องการแก้ไข

 /**
 *  fetch ข้อมูลรายการผังบัญชีเงินเดือน
 */
-function fetchListSalaly() {
+async function fetchListSalaly() {
  showLoader();
  const page = formQuery.page.toString();
  const pageSize = formQuery.pageSize.toString();
  const keyword = formQuery.keyword.toString();
-  http
+  await http
    .get(
      config.API.salaryChart +
        `?page=${page}&pageSize=${pageSize}&keyword=${keyword}`
    )
    .then(async (res) => {
-      total.value = res.data.result.total;
-      maxPage.value = Math.ceil(res.data.result.total / formQuery.pageSize);
-      const data = await res.data.result.data;
-      rows.value = await data;
+      const data = await res.data.result;
+      rows.value = data.data;
+      total.value = data.total;
+      maxPage.value = Math.ceil(data.total / formQuery.pageSize);
    })
    .catch((err) => {
      messageError($q, err);
@ -137,7 +134,7 @@ function onClickSalary(type: string, data: Salary | null) {
  modalDialogFormMain.value = !modalDialogFormMain.value;
  typeAction.value = type;
  if (data) {
-    dataRow.value = data;
+    dataSalary.value = data;
  }
 }

@ -204,13 +201,6 @@ function onClickUpload(type: string, id: string, active: boolean) {
  isActive.value = active;
 }

-/**
- * callbackFunction ทำงานเมื่อมีการ เปลี่ยนหน่าหรือ แถว
- */
-watch([() => formQuery.page, () => formQuery.pageSize], () => {
-  fetchListSalaly();
-});
-
 /**
 * function updatePagination
 * @param newPagination ข้อมูล Pagination ใหม่
@ -227,6 +217,13 @@ function filterFn(page: number) {
  page !== 1 ? (formQuery.page = 1) : fetchListSalaly();
 }

+/**
+ * callbackFunction ทำงานเมื่อมีการ เปลี่ยนหน้าหรือ แถว
+ */
+watch([() => formQuery.page, () => formQuery.pageSize], () => {
+  fetchListSalaly();
+});
+
 /** hooklifecycle*/
 onMounted(() => {
  fetchListSalaly();
@ -497,17 +494,17 @@ onMounted(() => {
  <!-- popup ผังบัญชีเงินเดือน -->
  <DialogFormMain
    v-model:modal="modalDialogFormMain"
-    :typeAction="typeAction"
-    :data="dataRow"
-    :fetchData="fetchListSalaly"
+    :fetch-data="fetchListSalaly"
+    :type-action="typeAction"
+    :data="dataSalary"
  />

  <!-- popup อัปโหลดเอกสารอ้างอิง -->
  <DialogFormUpload
    v-model:modal="modalUpload"
-    :typeAction="typeAction"
+    :type-action="typeAction"
+    :fetch-data="fetchListSalaly"
    :id="rowId"
-    :fetchData="fetchListSalaly"
    :isActive="isActive"
  />
 </template>
--- a/src/modules/13_salary/views/02_salaryEmployeeMain.vue
+++ b/src/modules/13_salary/views/02_salaryEmployeeMain.vue
@ -1,7 +1,7 @@
 <script setup lang="ts">
 /** importComponents*/
-import TabStructure from "@/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue";
-import TabCriteris from "@/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue";
+import TabStructure from "@/modules/13_salary/components/02_salaryEmployee/TabStructure.vue"; //ชื่อผังบัญชีอัตราค่าจ้าง
+import TabCriteris from "@/modules/13_salary/components/02_salaryEmployee/TabCriteria.vue"; //หลักเกณฑ์

 /** importStore*/
 import { useSalaryEmployeeChartDataStore } from "@/modules/13_salary/store/SalaryEmployeeChart";
--- a/src/modules/13_salary/views/03_salaryRound.vue
+++ b/src/modules/13_salary/views/03_salaryRound.vue
@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref, watch, onMounted } from "vue";
-import { useSalaryDataStore } from "@/modules/13_salary/store/SalaryStore";
+import { useQuasar } from "quasar";
+
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryDataStore } from "@/modules/13_salary/store/SalaryStore";
 import config from "@/app.config";
 import http from "@/plugins/http";

@ -12,10 +14,7 @@ import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
 import type { RowList } from "@/modules/13_salary/interface/response/Main";

 /** importComponents*/
-import Dialog from "@/modules/13_salary/components/SalaryRound/DialogForm.vue";
-
-/** importStore*/
-import { useQuasar } from "quasar";
+import Dialog from "@/modules/13_salary/components/03_salaryRound/DialogForm.vue";

 /** use*/
 const $q = useQuasar();
@ -30,24 +29,24 @@ const {
  success,
 } = useCounterMixin();

-const idRound = ref<string>("");
-const year = ref<number>(0);
-const filterKeyword = ref<string>("");
-const editCheck = ref<boolean>(false);
-const dialog = ref<boolean>(false);
-const period = ref<string>("");
-const isActive = ref<boolean>(false);
-const isRead = ref<boolean>(false);
-const effectiveDate = ref<Date | null>(null);
+const idRound = ref<string>(""); //id รอบการขึ้นเงินเดือน

-const yearData = ref<number | null>(0);
-const maxPage = ref<number>(1);
-const totalList = ref<number>(0);
-const currentPage = ref<number>(1);
-const page = ref<number>(1);
-const rowsPerPage = ref<number>(10);
+const editCheck = ref<boolean>(false); //สถานะแก้ไข
+const dialog = ref<boolean>(false); //popup ข้อมูลรอบการขึ้นเงินเดือน
+const period = ref<string>("");
+const isActive = ref<boolean>(false); //สถานะการทำงาน
+const isRead = ref<boolean>(false); //อ่านอย่างเดียว
+const effectiveDate = ref<Date | null>(null); //วันบังคับใช้งาน
+const yearData = ref<number | null>(0); //ปีงบประมาณ

 /** Table*/
+const year = ref<number>(0); //ปีงบประมาณ
+const filterKeyword = ref<string>(""); //คำค้นหา
+const currentPage = ref<number>(1); //หน้า
+const maxPage = ref<number>(1); //จำนวนหน้า
+const totalList = ref<number>(0); //จำนวนรายการ
+const page = ref<number>(1); //หน้า
+const rowsPerPage = ref<number>(10); //จำนวนรายการต่อหน้า
 const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
@ -118,7 +117,9 @@ const pagination = ref({
  rowsPerPage: rowsPerPage.value,
 });

-/** function เปืด Dialog เพิ่มรอบการขึ้นเงินเดือน */
+/**
+ * function เปืด Dialog เพิ่มรอบการขึ้นเงินเดือน
+ */
 function clickAdd() {
  dialog.value = true;
  editCheck.value = false;
@ -127,17 +128,18 @@ function clickAdd() {
 /**
 * fetch รายการรอบการขึ้นเงินเดือน
 */
-function getData() {
+async function getData() {
  showLoader();
-  http
+  await http
    .get(
      config.API.salaryPeriod() +
        `?page=${page.value}&pageSise=${rowsPerPage.value}&keyword=${filterKeyword.value}&year=${year.value}`
    )
-    .then((res) => {
-      dataStore.fetchDataMap(res.data.result.data);
-      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
-      totalList.value = res.data.result.total;
+    .then(async (res) => {
+      const data = await res.data.result;
+      dataStore.fetchDataMap(data.data);
+      maxPage.value = Math.ceil(data.total / rowsPerPage.value);
+      totalList.value = data.total;
    })
    .catch((e) => {
      messageError($q, e);
@ -147,12 +149,16 @@ function getData() {
    });
 }

-/** function เลือกปีงบประมาณ*/
+/**
+ *  function เลือกปีงบประมาณ
+ */
 function updateYear() {
  page.value = 1;
  getData();
 }
-/** set ปี ทั้งหมด */
+/**
+ * set ปี ทั้งหมด
+ */
 function yearAll() {
  year.value = 0;
  getData();
@ -234,7 +240,9 @@ function updatePageSize(newPagination: NewPagination) {
  rowsPerPage.value = newPagination.rowsPerPage;
 }

-/** callbackFunction ทำเมื่อมีการอัปเดท แถวต่อหน้า แล้ว fetch รายการรอบการขึ้นเงินเดือน*/
+/**
+ * callbackFunction ทำเมื่อมีการอัปเดท แถวต่อหน้า แล้ว fetch รายการรอบการขึ้นเงินเดือน
+ */
 watch(
  () => rowsPerPage.value,
  () => {
@ -246,7 +254,6 @@ watch(
 onMounted(async () => {
  year.value = new Date().getFullYear();
  getData();
-
  dataStore.visibleColumns = visibleColumns.value;
  dataStore.columns = columns.value;
 });
@ -518,14 +525,14 @@ onMounted(async () => {

  <Dialog
    v-model:modal="dialog"
-    :edit="editCheck"
-    :get-data="getData"
-    :idRound="idRound"
-    :period="period"
-    v-model:effective="effectiveDate"
-    :isActive="isActive"
    v-model:is-read="isRead"
    v-model:year="yearData"
+    v-model:effective="effectiveDate"
+    :edit="editCheck"
+    :get-data="getData"
+    :id-round="idRound"
+    :period="period"
+    :is-active="isActive"
  />
 </template>

--- a/src/modules/13_salary/views/04_salaryLists.vue
+++ b/src/modules/13_salary/views/04_salaryLists.vue
@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
+
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+import { useCounterMixin } from "@/stores/mixin";
 import config from "@/app.config";
 import http from "@/plugins/http";
-import ProcessStep from "@/modules/13_salary/components/SalaryLists/ProcessStep.vue";
-import PageDashBoard from "@/modules/13_salary/components/SalaryLists/Dashboard.vue";

 /** importType*/
 import type {
@ -18,11 +19,11 @@ import type {
 } from "@/modules/13_salary/interface/response/SalaryList";

 /** importComponents*/
-import TabGroup from "@/modules/13_salary/components/SalaryLists/TabMain.vue";
+import TabGroup from "@/modules/13_salary/components/04_salaryLists/TabMain.vue";
+import ProcessStep from "@/modules/13_salary/components/04_salaryLists/ProcessStep.vue";
+import PageDashBoard from "@/modules/13_salary/components/04_salaryLists/Dashboard.vue";

 /** importStore*/
-import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
-import { useCounterMixin } from "@/stores/mixin";

 /** use*/
 const store = useSalaryListSDataStore();
@ -30,16 +31,18 @@ const $q = useQuasar();
 const { messageError, showLoader, hideLoader } = useCounterMixin();

 /** ตัวแปร*/
-const year = ref<number>(new Date().getFullYear());
-const roundFilter = ref<any>();
-const roundOptions = ref<DataOptionShort[]>([]);
-const agencyFilter = ref<string>("");
-const agencyOptionsMain = ref<DataOption[]>([]);
-const agencyOptions = ref<DataOption[]>([]);
-const snapFilter = ref<string>("");
-const snapOptions = ref<DataOption[]>([]);
+const year = ref<number>(new Date().getFullYear()); //ปีงบประมาณ
+const roundFilter = ref<any>(); //รอบการขึ้นเงินเดือน
+const agencyFilter = ref<string>(""); //หน่วยงาน
+const snapFilter = ref<string>(""); //รอบ
 const periodLatest = ref<DataPeriodLatest>();

+//ตัวเลือก
+const roundOptions = ref<DataOptionShort[]>([]); //ตัวเลือกรอบการขึ้นเงินเดือน
+const snapOptions = ref<DataOption[]>([]); //รอบ
+const agencyOptionsMain = ref<DataOption[]>([]); //ข้อมูลหน่วยงาน
+const agencyOptions = ref<DataOption[]>([]); //หน่วยงาน
+
 const isLoad = ref<boolean>(false);
 const isDisable = ref<boolean>(false);

@ -48,11 +51,13 @@ const page = ref<number>(1);
 const pageSize = ref<number>(50);
 const lastPage = ref<number>(0);

-/**function เรียกข้อมูลรอบการขึ้นเงินเดือน*/
-function getRound() {
+/**
+ * function เรียกข้อมูลรอบการขึ้นเงินเดือน
+ */
+async function getRound() {
  showLoader();
  isDisable.value = false;
-  http
+  await http
    .get(
      config.API.salaryPeriodActive(year.value.toString()) +
        `?page=${page.value}&pageSize=${pageSize.value}&keyword=&year=0`
@ -105,7 +110,9 @@ function getRound() {
    });
 }

-/** function เรียกรอบ*/
+/**
+ * function เรียกรอบ
+ */
 function getSnap(code: string) {
  snapOptions.value =
    code == "OCT"
@ -147,9 +154,9 @@ function getSnap(code: string) {
 * function เรียกข้อมูลหน่ยวงาน
 * @param id  revisionId
 */
-function getAgency(id: string) {
+async function getAgency(id: string) {
  if (id) {
-    http
+    await http
      .get(config.API.activeOrganizationRootById(id))
      .then(async (res) => {
        const data = res.data.result;
@ -181,9 +188,9 @@ function getAgency(id: string) {
 * function เรียกข้อมูลหน่ยวงานปจุบัน
 * @param id  revisionId
 */
-function getAgencyPosition(id: string) {
+async function getAgencyPosition(id: string) {
  if (id) {
-    http
+    await http
      .get(config.API.keycloakPositionByid(id))
      .then(async (res) => {
        const data = await res.data.result;
@ -213,7 +220,11 @@ function getAgencyPosition(id: string) {
 * @param periodId id รอบการขึ้นเงินเดือน
 * @param snap id รอบ
 */
-function fetchSalalyPeriod(rootId: string, periodId: string, snap: string) {
+async function fetchSalalyPeriod(
+  rootId: string,
+  periodId: string,
+  snap: string
+) {
  if (rootId) {
    showLoader();
    isLoad.value = false;
@ -223,10 +234,10 @@ function fetchSalalyPeriod(rootId: string, periodId: string, snap: string) {
      snapshot: snap,
    };

-    http
+    await http
      .post(config.API.salaryListPeriodLatest, body)
      .then(async (res) => {
-        const data = res.data.result;
+        const data = await res.data.result;

        if (roundFilter.value.shortCode !== "SPECIAL") {
          if (Object.values(data).includes(null)) {
@ -253,7 +264,9 @@ function fetchSalalyPeriod(rootId: string, periodId: string, snap: string) {
  }
 }

-/** function เปลี่ยนรอบการขั้นเงินเดือน*/
+/**
+ * function เปลี่ยนรอบการขั้นเงินเดือน
+ */
 async function onChangeRound() {
  // เก็บสถานะการปิดรอบในตัวแปร isClosedRound เพื่อใช้ในการเช็ค
  store.isClosedRound = roundFilter.value.isClose;
@ -272,7 +285,9 @@ async function onChangeRound() {
  }
 }

-/** function เปลี่ยนรอบ*/
+/**
+ * function เปลี่ยนรอบ
+ */
 async function onChangeSnap() {
  // agencyFilter.value = "";
  if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
@ -284,7 +299,9 @@ async function onChangeSnap() {
  }
 }

-/** function เปลี่ยนหน่วยงาน*/
+/**
+ * function เปลี่ยนหน่วยงาน
+ */
 async function onChangeAgency() {
  store.rootId = agencyFilter.value;
  if (
@ -300,7 +317,9 @@ async function onChangeAgency() {
  }
 }

-/** function fetch PeriodQuota*/
+/**
+ *  function fetch PeriodQuota
+ */
 function getQuota() {
  http
    .get(config.API.salaryListPeriodQuota(store.groupId))
@ -323,7 +342,7 @@ function filterSelector(val: string, update: Function, refData: string) {
  switch (refData) {
    case "agencyFilter":
      update(() => {
-        agencyFilter.value = "";
+        agencyFilter.value = val === "" ? agencyFilter.value : "";
        agencyOptions.value = agencyOptionsMain.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
@ -462,10 +481,10 @@ onMounted(() => {
    <div v-if="agencyFilter !== 'ALL'">
      <TabGroup
        v-if="isLoad"
-        :periodLatest="periodLatest"
-        :periodId="roundFilter.id"
-        :rootId="agencyFilter"
-        :roundFilter="roundFilter"
+        :period-latest="periodLatest"
+        :period-id="roundFilter.id"
+        :root-id="agencyFilter"
+        :round-filter="roundFilter"
      />
      <q-card v-else class="q-pa-sm">
        <div class="q-pa-sm">
@ -478,8 +497,8 @@ onMounted(() => {
    <div v-else>
      <PageDashBoard
        :year="year"
-        :snapShot="snapFilter"
-        :roundFilter="roundFilter"
+        :snap-shot="snapFilter"
+        :round-filter="roundFilter"
      />
    </div>
  </q-card>
@ -492,8 +511,8 @@ onMounted(() => {
  >
    <ProcessStep
      v-if="agencyFilter !== 'ALL'"
-      :periodId="roundFilter.id"
-      :rootId="agencyFilter"
+      :period-id="roundFilter.id"
+      :root-id="agencyFilter"
      :get-data="getQuota"
    />
  </q-card>
--- a/src/modules/13_salary/views/05_salaryListsEmployee.vue
+++ b/src/modules/13_salary/views/05_salaryListsEmployee.vue
@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { onMounted, ref, nextTick } from "vue";
 import { useQuasar } from "quasar";
+
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
+import { useCounterMixin } from "@/stores/mixin";
 import config from "@/app.config";
 import http from "@/plugins/http";

@ -16,13 +19,9 @@ import type {
 } from "@/modules/13_salary/interface/response/SalaryList";

 /** importComponents*/
-import TabGroup from "@/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue";
-import ProcessStep from "@/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue";
-import PageDashBoard from "@/modules/13_salary/components/SalaryEmployeeLists/Dashboard.vue";
-
-/** importStore*/
-import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
-import { useCounterMixin } from "@/stores/mixin";
+import TabGroup from "@/modules/13_salary/components/05_salaryListsEmployee/TabMain.vue";
+import ProcessStep from "@/modules/13_salary/components/05_salaryListsEmployee/ProcessStep.vue";
+import PageDashBoard from "@/modules/13_salary/components/05_salaryListsEmployee/Dashboard.vue";

 /** use*/
 const store = useSalaryEmployeeListSDataStore();
@ -30,17 +29,18 @@ const $q = useQuasar();
 const { messageError, showLoader, hideLoader } = useCounterMixin();

 /** ตัวแปร*/
-const year = ref<number>(new Date().getFullYear());
-const roundFilter = ref<any>();
-const roundOptions = ref<DataOptionShort[]>([]);
-const agencyFilter = ref<string>("");
-const agencyOptions = ref<DataOption[]>([]);
-const agencyOptionsMain = ref<DataOption[]>([]);
-
-const snapFilter = ref<string>("");
-const snapOptions = ref<DataOption[]>([]);
+const year = ref<number>(new Date().getFullYear()); //ปีงบประมาณ
+const roundFilter = ref<any>(); //รอบการขึ้นเงินเดือน
+const agencyFilter = ref<string>(""); //หน่วยงาน
+const snapFilter = ref<string>(""); //รอบ
 const periodLatest = ref<DataPeriodLatest>();

+//ตัวเลือก
+const roundOptions = ref<DataOptionShort[]>([]); //ตัวเลือกรอบการขึ้นเงินเดือน
+const snapOptions = ref<DataOption[]>([]); //รอบ
+const agencyOptionsMain = ref<DataOption[]>([]); //ข้อมูลหน่วยงาน
+const agencyOptions = ref<DataOption[]>([]); //หน่วยงาน
+
 const isLoad = ref<boolean>(false);
 const isDisable = ref<boolean>(false);

@ -51,11 +51,13 @@ const lastPage = ref<number>(0);
 const loading = ref(false);
 const nextPage = ref<number>(1);

-/**function เรียกข้อมูลรอบการขึ้นค่าจ้าง*/
-function getRound() {
+/**
+ * function เรียกข้อมูลรอบการขึ้นค่าจ้าง
+ */
+async function getRound() {
  showLoader();
  isDisable.value = false;
-  http
+  await http
    .get(
      config.API.salaryPeriodActive(year.value.toString()) +
        `?page=${page.value}&pageSize=${pageSize.value}&keyword=&year=0`
@ -107,8 +109,10 @@ function getRound() {
    });
 }

-/** function เรียกรอบ*/
-function getSnap(code: string) {
+/**
+ * function เรียกรอบ
+ */
+async function getSnap(code: string) {
  snapOptions.value =
    code == "OCT"
      ? [
@ -213,7 +217,11 @@ async function getAgencyPosition(id: string) {
 * @param periodId id รอบการขึ้นค่าจ้าง
 * @param snap id รอบ
 */
-function fetchSalalyPeriod(rootId: string, periodId: string, snap: string) {
+async function fetchSalalyPeriod(
+  rootId: string,
+  periodId: string,
+  snap: string
+) {
  if (rootId) {
    showLoader();
    isLoad.value = false;
@ -223,14 +231,12 @@ function fetchSalalyPeriod(rootId: string, periodId: string, snap: string) {
      snapshot: snap,
    };

-    http
+    await http
      .post(config.API.salaryListPeriodLatestEmp, body)
      .then(async (res) => {
        const data = res.data.result;
-
        data && store.fetchPeriodLatest(data, store.tabGroup);
        periodLatest.value = data;
-
        isLoad.value = data.group1id ? true : false;
      })
      .catch((err) => {
@ -244,7 +250,9 @@ function fetchSalalyPeriod(rootId: string, periodId: string, snap: string) {
  }
 }

-/** function เปลี่ยนรอบการขั้นค่าจ้าง*/
+/**
+ * function เปลี่ยนรอบการขั้นค่าจ้าง
+ */
 async function onChangeRound() {
  // เก็บสถานะการปิดรอบในตัวแปร isClosedRound เพื่อใช้ในการเช็ค
  store.isClosedRound = roundFilter.value.isClose;
@ -260,7 +268,9 @@ async function onChangeRound() {
  }
 }

-/** function เปลี่ยนรอบ*/
+/**
+ * function เปลี่ยนรอบ
+ */
 async function onChangeSnap() {
  if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
    await fetchSalalyPeriod(
@ -271,7 +281,9 @@ async function onChangeSnap() {
  }
 }

-/** function เปลี่ยนหน่วยงาน*/
+/**
+ * function เปลี่ยนหน่วยงาน
+ */
 async function onChangeAgency() {
  store.rootId = agencyFilter.value;

@ -288,7 +300,9 @@ async function onChangeAgency() {
  }
 }

-/** function onScrollSelect รอบการขึ้นค่าจ้าง*/
+/**
+ * function onScrollSelect รอบการขึ้นค่าจ้าง
+ */
 function onScroll({ to, ref }: { to: number; ref: any }) {
  const lastIndex = roundOptions.value.length - 1;

@ -311,15 +325,24 @@ function onScroll({ to, ref }: { to: number; ref: any }) {
  }
 }

+/**
+ *  function fetch PeriodQuota
+ */
 function getQuota() {
  fetchSalalyPeriod(agencyFilter.value, roundFilter.value.id, snapFilter.value);
 }

-function filterSelector(val: any, update: Function, refData: string) {
+/**
+ * functioon ค้นหาข้อมูลรายการหน่วยงาน
+ * @param val คำค้นหา
+ * @param update function
+ * @param refData typeSelector
+ */
+function filterSelector(val: string, update: Function, refData: string) {
  switch (refData) {
    case "agencyFilter":
      update(() => {
-        agencyFilter.value = "";
+        agencyFilter.value = val === "" ? agencyFilter.value : "";
        agencyOptions.value = agencyOptionsMain.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
@ -455,10 +478,10 @@ onMounted(() => {
    <div v-if="agencyFilter !== 'ALL'">
      <TabGroup
        v-if="isLoad"
-        :periodLatest="periodLatest"
-        :periodId="roundFilter.id"
-        :rootId="agencyFilter"
-        :roundFilter="roundFilter"
+        :period-latest="periodLatest"
+        :period-id="roundFilter.id"
+        :root-id="agencyFilter"
+        :round-filter="roundFilter"
      />
      <q-card v-else class="q-pa-sm">
        <div class="q-pa-sm">
@ -471,8 +494,8 @@ onMounted(() => {
    <div v-else>
      <PageDashBoard
        :year="year"
-        :snapShot="snapFilter"
-        :roundFilter="roundFilter"
+        :snap-shot="snapFilter"
+        :round-filter="roundFilter"
      />
    </div>
  </q-card>
@ -485,8 +508,8 @@ onMounted(() => {
  >
    <ProcessStep
      v-if="agencyFilter !== 'ALL'"
-      :periodId="roundFilter.id"
-      :rootId="agencyFilter"
+      :period-id="roundFilter.id"
+      :root-id="agencyFilter"
      :get-data="getQuota"
    />
  </q-card>
--- a/src/modules/13_salary/views/page01_salaryRate.vue
+++ b/src/modules/13_salary/views/page01_salaryRate.vue
@ -21,7 +21,7 @@ import type { FormQuerySalary } from "@/modules/13_salary/interface/request/Main
 /**
 * importComponents
 */
-import DialogFormRate from "@/modules/13_salary/components/SalaryChart/DialogFormRate.vue";
+import DialogFormRate from "@/modules/13_salary/components/01_Salary/DialogFormRate.vue";

 /**
 * importStore
@ -125,30 +125,34 @@ const formQuery = reactive<FormQuerySalary>({
  pageSize: 100, //*จำนวนแถวต่อหน้า
  keyword: "", //keyword ค้นหา
 });
-const maxPage = ref<number>(1);
-const totalRow = ref<number>(0);
+const maxPage = ref<number>(1); //จำนวนหน้า
+const totalRow = ref<number>(0); //จำนวนรายการ
 const pagination = ref({
  page: 1,
  rowsPerPage: 100,
 });

+const typeAction = ref<string>(""); //ประเภทการกระทำ
+const dataSalaryRate = ref<SalaryRate>(); //ข้อมูลรายการ
+
 /**
 * fetch รายการอัตราเงินเดือน
 */
 async function fetchListSalalyRate() {
  showLoader();
-  const page = await formQuery.page.toString();
-  const pageSize = await formQuery.pageSize.toString();
-  const keyword = await formQuery.keyword.toString();
+  const page = formQuery.page.toString();
+  const pageSize = formQuery.pageSize.toString();
+  const keyword = formQuery.keyword.toString();
  await http
    .get(
      config.API.salaryRateListByid(salaryId.value) +
        `?page=${page}&pageSize=${pageSize}&keyword=${keyword}`
    )
-    .then((res) => {
-      maxPage.value = Math.ceil(res.data.result.total / formQuery.pageSize);
-      totalRow.value = res.data.result.total;
-      rows.value = res.data.result.data;
+    .then(async (res) => {
+      const data = await res.data.result;
+      rows.value = data.data;
+      totalRow.value = data.total;
+      maxPage.value = Math.ceil(data.total / formQuery.pageSize);
    })
    .catch((err) => {
      messageError($q, err);
@ -158,13 +162,16 @@ async function fetchListSalalyRate() {
    });
 }

-const typeAction = ref<string>("");
-const dataRow = ref<SalaryRate>();
+/**
+ *  function openDialog เพิ่ม,แก้ไข อัตราเงินเดือน
+ * @param type ประเภท แก่ไข,เพิ่ม
+ * @param data ข้อมูลอัตราเงินเดือน
+ */
 function onClickSalaryRate(type: string, data: SalaryRate | null) {
  modalDialogFormRate.value = !modalDialogFormRate.value;
  typeAction.value = type;
  if (data) {
-    dataRow.value = data;
+    dataSalaryRate.value = data;
  }
 }

@ -215,9 +222,10 @@ function clickDownload() {
 function fetchDataSalary() {
  http
    .get(config.API.salaryChartByid(salaryId.value))
-    .then((res) => {
-      isActive.value = res.data.result.isActive;
-      posType.value = `${res.data.result.posTypeName}(${res.data.result.posLevelName})`;
+    .then(async (res) => {
+      const data = await res.data.result;
+      isActive.value = data.isActive;
+      posType.value = `${data.posTypeName}(${data.posLevelName})`;
    })
    .catch((e) => {
      messageError($q, e);
@ -233,13 +241,15 @@ function updatePagination(newPagination: NewPagination) {
  formQuery.pageSize = newPagination.rowsPerPage;
 }

-onMounted(async () => {
-  fetchDataSalary();
+/**
+ *  ทำงานเมื่อมีการ เปลี่ยนหน้าหรือ แถว
+ */
+watch([() => formQuery.page, () => formQuery.pageSize], async () => {
  await fetchListSalalyRate();
 });

-watch([() => formQuery.page, () => formQuery.pageSize], async () => {
-  await fetchListSalalyRate();
+onMounted(async () => {
+  await Promise.all([fetchDataSalary(), fetchListSalalyRate()]);
 });
 </script>

@ -259,6 +269,7 @@ watch([() => formQuery.page, () => formQuery.pageSize], async () => {
      อัตราเงินเดือนของ{{ posType }}
    </div>
  </div>
+
  <q-card flat bordered class="q-pa-md">
    <div class="col-12 row">
      <q-btn
@ -402,9 +413,9 @@ watch([() => formQuery.page, () => formQuery.pageSize], async () => {

  <DialogFormRate
    v-model:modal="modalDialogFormRate"
-    :typeAction="typeAction"
-    :data="dataRow"
-    :fetchData="fetchListSalalyRate"
+    :type-action="typeAction"
+    :fetch-data="fetchListSalalyRate"
+    :data="dataSalaryRate"
  />
 </template>

--- a/src/modules/13_salary/views/page02_salaryEmployeeRate.vue
+++ b/src/modules/13_salary/views/page02_salaryEmployeeRate.vue
@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, watch } from "vue";
-import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
+
 import { useRouter, 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 genReportXLSX from "@/plugins/genreportxlsx";
@ -17,10 +19,7 @@ import type { FormFilter } from "@/modules/13_salary/interface/request/EmployeeC
 import type { EmployeeRateSalary } from "@/modules/13_salary/interface/response/salaryEmployeeChart";

 /** importComponts*/
-import DialogEmployeeRate from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue";
-
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
+import DialogEmployeeRate from "@/modules/13_salary/components/02_salaryEmployee/DialogEmployeeRate.vue";

 /** use*/
 const route = useRoute();
@ -29,9 +28,21 @@ const $q = useQuasar();
 const { dialogRemove, messageError, showLoader, hideLoader, success } =
  useCounterMixin();

-const salaryEmployeeId = ref<string>(route.params.id.toString());
+const salaryEmployeeId = ref<string>(route.params.id.toString()); //id อัตราค่าจ้าง
+const modalDialogEmployeeRate = ref<boolean>(false); //เพิ่มอัตราค่าจ้าง;
+const isStatusEdit = ref<boolean>(false); //สถานะการแก้ไขข้อมูล
+const dataRow = ref<EmployeeRateSalary>(); //ข้อมูลที่จะแก้ไข

 /** ข้อมูล Table*/
+const formFilter = reactive<FormFilter>({
+  page: 1,
+  pageSize: 100,
+  keyword: "",
+});
+const rows = ref<EmployeeRateSalary[]>([]); //รายการอัตราค่าจ้าง
+const maxPage = ref<number>(1); //จำนวนหน้า
+const totalList = ref<number>(0); //จำนวนรายการ
+
 const columns = ref<QTableProps["columns"]>([
  {
    name: "step",
@ -75,9 +86,11 @@ const columns = ref<QTableProps["columns"]>([
      }),
  },
 ]);
-const rows = ref<EmployeeRateSalary[]>([]);
 const visibleColumns = ref<string[]>(["step", "salaryMonth", "salaryDay"]);
-
+const pagination = ref({
+  page: formFilter.page,
+  rowsPerPage: formFilter.pageSize,
+});
 /** List Mune*/
 const itemMenu = ref<ItemsMenu[]>([
  {
@ -94,27 +107,14 @@ const itemMenu = ref<ItemsMenu[]>([
    type: "delete",
  },
 ]);
-
-const formFilter = reactive<FormFilter>({
-  page: 1,
-  pageSize: 100,
-  keyword: "",
-});
-const maxPage = ref<number>(1);
-const totalList = ref<number>(0);
-
-const pagination = ref({
-  page: formFilter.page,
-  rowsPerPage: formFilter.pageSize,
-});
-const isActive = ref<boolean>(false);
-const groupSalary = ref<string>("");
+const isActive = ref<boolean>(false); //สถานะการใช้งาน
+const groupSalary = ref<string>(""); //ชื่ออัตราค่าจ้าง

 /**
 * fetch ข้อมูลอัตราค่าจ้าง
 */
-function fetchDataDetail() {
-  http
+async function fetchDataDetail() {
+  await http
    .get(config.API.salaryEmployeeChartByid(salaryEmployeeId.value))
    .then((res) => {
      isActive.value = res.data.result.isActive;
@ -128,17 +128,18 @@ function fetchDataDetail() {
 /**
 * fetch อัตราค่าจ้าง
 */
-function fetchSalalyEmployeeRate() {
+async function fetchSalalyEmployeeRate() {
  showLoader();
-  http
+  await http
    .get(
      config.API.salaryEmployeeRateListByid(salaryEmployeeId.value) +
        `?page=${formFilter.page}&pageSize=${formFilter.pageSize}&keyword=${formFilter.keyword}`
    )
-    .then((res) => {
-      rows.value = res.data.result.data;
-      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
-      totalList.value = res.data.result.total;
+    .then(async (res) => {
+      const data = res.data.result;
+      rows.value = data.data;
+      maxPage.value = Math.ceil(data.total / formFilter.pageSize);
+      totalList.value = data.total;
    })
    .catch((err) => {
      messageError($q, err);
@ -148,10 +149,6 @@ function fetchSalalyEmployeeRate() {
    });
 }

-const modalDialogEmployeeRate = ref<boolean>(false);
-const isStatusEdit = ref<boolean>(false);
-const dataRow = ref<EmployeeRateSalary>();
-
 /**
 * แก่ไขข้อมูลรายการอัตราค่าจ้าง
 * @param data  ข้อมูลรายการอัตราค่าจ้าง
@ -192,17 +189,27 @@ function onClickAdd() {
  isStatusEdit.value = false;
 }

+/**
+ * ฟังก์ชันเปลี่ยนหน้าข้อมูล
+ * @param val หน้าที่จ้องการไป
+ */
 function updatePage(val: number) {
  formFilter.page = val;
  fetchSalalyEmployeeRate();
 }

+/**
+ * ฟังก์ชันเปลี่ยนแถวต่อหน้า
+ * @param newPagination จำนวนแถว
+ */
 function updatePageSize(newPagination: NewPagination) {
  formFilter.page = 1;
  formFilter.pageSize = newPagination.rowsPerPage;
 }

-/** click download */
+/**
+ * click download
+ */
 function clickDownload() {
  showLoader();
  http
@ -337,8 +344,8 @@ onMounted(async () => {

  <DialogEmployeeRate
    v-model:modal="modalDialogEmployeeRate"
-    :isStatusEdit="isStatusEdit"
-    :fetchData="fetchSalalyEmployeeRate"
+    :is-status-edit="isStatusEdit"
+    :fetch-data="fetchSalalyEmployeeRate"
    :data="dataRow as EmployeeRateSalary"
  />
 </template>