เงินเดือน => ปรีบ code รอบการขึ้นเงินเดือน

src/modules/13_salary/components/SalaryRound/DialogForm.vue

@@ -1,44 +1,36 @@
 <script setup lang="ts">
-import { ref, defineModel, defineProps, watch } from "vue";
+import { ref, defineModel, watch } from "vue";
-import Header from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
-import type {
-  ObjectRef,
-  DataOption,
-} from "@/modules/13_salary/interface/response/Main";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
-
 import config from "@/app.config";
 
+/** importType*/
+import type { DataOption } from "@/modules/13_salary/interface/response/Main";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/**use*/
 const $q = useQuasar();
-const isActive = ref<boolean>(false);
+const {
-const period = ref<string>("");
+  dialogConfirm,
+  date2Thai,
+  messageError,
+  success,
+  showLoader,
+  hideLoader,
+} = useCounterMixin();
+
+/** props*/
 const modal = defineModel<boolean>("modal", { required: true });
 const effective = defineModel<Date | null | string>("effective", {
   required: true,
 });
 const isRead = defineModel<boolean>("isRead", { required: true });
 const year = defineModel<number | null | string>("year");
-const mixin = useCounterMixin();
-const { dialogConfirm, date2Thai, messageError,success } = mixin;
-const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
-const effectiveDate = ref<Date | null>(null);
-/** ตัวแปร validate */
-const periodRef = ref<Object | null>(null);
-const effectiveDateRef = ref<Object | null>(null);
-const yearRef = ref<Object | null>(null);
-const typeOptions = ref<DataOption[]>([
-  { id: "SPECIAL", name: "รอบพิเศษ" },
-  { id: "APR", name: "รอบเมษายน" },
-  { id: "OCT", name: "รอบตุลาคม" },
-]);
-const objectForm: ObjectRef = {
-  period: periodRef,
-  effectiveDate: effectiveDateRef,
-  year: yearRef,
-};
-
 const props = defineProps({
   getData: Function,
   edit: Boolean,
@@ -48,29 +40,18 @@ const props = defineProps({
   isActive: Boolean,
   isRead: Boolean,
 });
-/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
-function validateForm() {
-  const hasError = [];
-  for (const key in objectForm) {
-    if (Object.prototype.hasOwnProperty.call(objectForm, key)) {
-      const property = objectForm[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
 
-  if (hasError.every((result) => result === true)) {
+const period = ref<string>("");
-    if (props.edit == true) {
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
-      editSummit();
+const isActive = ref<boolean>(false);
-    } else {
+const effectiveDate = ref<Date | null>(null);
-      onSubmit();
+const typeOptions = ref<DataOption[]>([
-    }
+  { id: "SPECIAL", name: "รอบพิเศษ" },
-  }
+  { id: "APR", name: "รอบเมษายน" },
-}
+  { id: "OCT", name: "รอบตุลาคม" },
+]);
 
-function saveData() {}
+/** function เคลียข้อมูล form*/
 function clearForm() {
   isActive.value = false;
   period.value = "";
@@ -79,54 +60,36 @@ function clearForm() {
   isRead.value = false;
 }
 
+/** function ปืด Dialog*/
 function close() {
   modal.value = false;
   clearForm();
 }
 
-function editSummit() {
+/** function บัยทึกข้อมูลรอบการขึ้นเงินเดือน*/
-  dialogConfirm($q, () => {
-    const body = {
-      period: period.value,
-      isActive: isActive.value,
-      effectiveDate: effective.value,
-      year: year.value,
-    };
-    http
-      .put(config.API.salaryPeriod() + `/${props.idRound}`, body)
-      .then((res) => {
-        modal.value = false;
-        clearForm();
-        props.getData?.();
-        success($q,'บันทึกข้อมูลสำเร็จ')
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {});
-  });
-}
-
 function onSubmit() {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
+    showLoader();
     const body = {
       period: period.value,
       isActive: isActive.value,
       effectiveDate: effective.value,
       year: year.value,
     };
-    http
+    try {
-      .post(config.API.salaryPeriod(), body)
+      const url = !props.edit
-      .then((res) => {
+        ? config.API.salaryPeriod()
+        : config.API.salaryPeriod() + `/${props.idRound}`;
+      await http[!props.edit ? "post" : "put"](url, body);
       modal.value = false;
-        clearForm();
-        success($q,'บันทึกข้อมูลสำเร็จ')
       props.getData?.();
-      })
+      clearForm();
-      .catch((e) => {
+      success($q, "บันทีกข้อมูลสำเร็จ");
-        messageError($q, e);
+    } catch (err) {
-      })
+      messageError($q, err);
-      .finally(() => {});
+    } finally {
+      hideLoader();
+    }
   });
 }
 
@@ -137,10 +100,10 @@ function inputEdit(val: boolean) {
   };
 }
 
+/** callbackFunction ทำการ fetch ข้อมูลไฟล์เมื่อเปิด Dialog*/
 watch(
   () => modal.value,
   () => {
-    console.log(props.edit);
     if (props.edit == true) {
       period.value = props.period ? props.period : "";
       effectiveDate.value = props.effectiveDate ? props.effectiveDate : null;
@@ -158,12 +121,18 @@ watch(
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 30%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
         <Header
-        :tittle="`${ isRead == true ? `ข้อมูลรอบการขึ้นเงินเดือน`: props.edit ? `แก้ไขรอบการขึ้นเงินเดือน` : `เพิ่มรอบการขึ้นเงินเดือน` }`"
+          :tittle="`${
+            isRead == true
+              ? `ข้อมูลรอบการขึ้นเงินเดือน`
+              : props.edit
+              ? `แก้ไขรอบการขึ้นเงินเดือน`
+              : `เพิ่มรอบการขึ้นเงินเดือน`
+          }`"
           :close="close"
         />
         <q-separator />
-
         <q-card-section class="scroll" style="max-height: 70vh">
           <div class="q-gutter-y-sm">
             <datepicker
@@ -268,8 +237,16 @@ watch(
             <div class="col q-pa-sm bg-white border_custom text-weight-medium">
               <div class="row items-center q-my-sm justify-between">
                 <p class="q-ma-none">สถานะการใช้งาน</p>
-              <label :class="isRead == true ? 'toggle-control noClick':'toggle-control'">
+                <label
-                <input type="checkbox" v-model="isActive" :readonly="isRead"/>
+                  :class="
+                    isRead == true ? 'toggle-control noClick' : 'toggle-control'
+                  "
+                >
+                  <input
+                    type="checkbox"
+                    v-model="isActive"
+                    :readonly="isRead"
+                  />
                   <span class="control"></span>
                 </label>
               </div>
@@ -277,20 +254,12 @@ watch(
           </div>
         </q-card-section>
         <q-separator v-if="!isRead" />
-      <form @submit.prevent="validateForm" v-if="!isRead">
+        <q-card-actions align="right" class="bg-white text-teal" v-if="!isRead">
-        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" type="submit" color="secondary">
-          <!-- <q-btn flat label="OK" v-close-popup /> -->
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          <q-btn
+          </q-btn>
-            type="submit"
-            for="#submitForm"
-            unelevated
-            dense
-            class="q-px-md items-center"
-            color="light-blue-10"
-            label="บันทึก"
-          />
         </q-card-actions>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>

src/modules/13_salary/interface/response/Main.ts

@@ -56,11 +56,12 @@ interface Row {
   total: number;
 }
 
-interface ObjectRef {
+export type {
-  period: object | null;
+  Salary,
-  effectiveDate: object | null;
+  SalaryRate,
-  year: object | null;
+  SalaryPosType,
-  [key: string]: any;
+  SalaryPosLevel,
-}
+  RowList,
-
+  Row,
-export type { Salary, SalaryRate, SalaryPosType, SalaryPosLevel,RowList,Row,ObjectRef,DataOption };
+  DataOption,
+};

src/modules/13_salary/views/salaryRound.vue

@@ -2,31 +2,36 @@
 import { ref, watch, onMounted } from "vue";
 import { useSalaryDataStore } from "@/modules/13_salary/store/SalaryStore";
 import { useCounterMixin } from "@/stores/mixin";
-import type { QTableProps } from "quasar";
-import type { RowList, Row } from "@/modules/13_salary/interface/response/Main";
-import Dialog from "@/modules/13_salary/components/SalaryRound/DialogForm.vue";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
+/** importType*/
+import type { QTableProps } from "quasar";
+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";
 
-const idRound = ref<string>("");
+/** use*/
 const $q = useQuasar();
-const mixin = useCounterMixin();
+const dataStore = useSalaryDataStore();
 const {
   dialogRemove,
   showLoader,
   hideLoader,
   messageError,
   date2Thai,
-  dateToISO,
   dialogConfirm,
   success,
-} = mixin;
+} = useCounterMixin();
-const dataStore = useSalaryDataStore();
+
+const idRound = ref<string>("");
 const year = ref<number>(0);
 const filterKeyword = ref<string>("");
-const rowsPerPage = ref<number>(10);
 const editCheck = ref<boolean>(false);
 const dialog = ref<boolean>(false);
 const period = ref<string>("");
@@ -39,23 +44,9 @@ 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 pagination = ref({
+/** Table*/
-  descending: false,
-  page: page.value,
-  rowsPerPage: rowsPerPage.value,
-});
-
-const visibleColumns = ref<string[]>([
-  "no",
-  "period",
-  "year",
-  "effectiveDate",
-  "isActive",
-  "isClose",
-]);
-
-// หัวตาราง
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -112,11 +103,26 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "period",
+  "year",
+  "effectiveDate",
+  "isActive",
+  "isClose",
+]);
+const pagination = ref({
+  descending: false,
+  page: page.value,
+  rowsPerPage: rowsPerPage.value,
+});
 
+/** function เปืด Dialog เพิ่มรอบการขึ้นเงินเดือน */
 function clickAdd() {
   dialog.value = true;
   editCheck.value = false;
 }
+
 /** ดึงข้อมูลเริ่มต้น */
 function getData() {
   showLoader();
@@ -137,7 +143,9 @@ function getData() {
       hideLoader();
     });
 }
-function dataUpdate() {
+
+/** function เลือกปีงบประมาณ*/
+function updateYear() {
   page.value = 1;
   getData();
 }
@@ -147,22 +155,16 @@ function yearAll() {
   getData();
 }
 
-/** ฟังชั่น เคลียฟิลเตอร์ */
+/**
-function resetFilter() {
+ * function ลบรายการรอบการขึ้นเงินเดือน
-  filterKeyword.value = "";
+ * @param id รอบการขึ้นเงินเดือน
-  getData();
+ */
-}
-
-// /** ดึงข้อมูลเมื่อ กด enter */
-// function filterFn() {
-//   getData();
-// }
-
 function deleteData(id: string) {
+  dialogRemove($q, () => {
     showLoader();
     http
       .delete(config.API.salaryPeriod() + `/${id}`)
-    .then((res) => {
+      .then(() => {
         getData();
         success($q, "ลบข้อมูลสำเร็จ");
       })
@@ -172,8 +174,14 @@ function deleteData(id: string) {
       .finally(() => {
         hideLoader();
       });
+  });
 }
 
+/**
+ * function เปืด Dialog ข้อมูลรอบการขึ้นเงินเดือน
+ * @param data ข้อมูลรอบการขึ้นเงินเดือน
+ * @param status สะถานะการแก่้ไข
+ */
 function editPopup(data: RowList, status: string) {
   if (status == "read") {
     isRead.value = true;
@@ -186,7 +194,11 @@ function editPopup(data: RowList, status: string) {
   effectiveDate.value = data.effectiveDate as Date;
   isActive.value = data.isActive ? data.isActive : false;
 }
-/** ปิดรอบ */
+
+/**
+ * function ปิดรอการขึ้นเงินเดือน
+ * @param id รอบการขึ้นเงินเดือน
+ */
 function dialogClose(id: string) {
   dialogConfirm(
     $q,
@@ -206,6 +218,24 @@ function dialogClose(id: string) {
   );
 }
 
+/**
+ * function อัปเดท แถวต่อหน้า
+ * @param newPagination
+ */
+function updatePageSize(newPagination: NewPagination) {
+  page.value = 1;
+  rowsPerPage.value = newPagination.rowsPerPage;
+}
+
+/** callbackFunction ทำเมื่อมีการอัปเดท แถวต่อหน้า แล้ว fetch รายการรอบการขึ้นเงินเดือน*/
+watch(
+  () => rowsPerPage.value,
+  () => {
+    getData();
+  }
+);
+
+/** Hooklifecycle*/
 onMounted(async () => {
   year.value = new Date().getFullYear();
   getData();
@@ -213,18 +243,6 @@ onMounted(async () => {
   dataStore.visibleColumns = visibleColumns.value;
   dataStore.columns = columns.value;
 });
-
-function updatePageSize(newPagination: any) {
-  page.value = 1;
-  rowsPerPage.value = newPagination.rowsPerPage;
-}
-
-watch(
-  () => rowsPerPage.value,
-  () => {
-    getData();
-  }
-);
 </script>
 
 <template>
@@ -244,7 +262,7 @@ watch(
           autoApply
           year-picker
           :enableTimePicker="false"
-          @update:model-value="dataUpdate"
+          @update:model-value="updateYear"
         >
           <template #year="{ year }">{{ year + 543 }}</template>
           <template #year-overlay-value="{ value }">{{
@@ -290,26 +308,6 @@ watch(
         >
       </div>
       <q-space />
-      <!-- <q-input
-        for="#search"
-        class="col-xs-12 col-sm-3 col-md-2"
-        standout
-        dense
-        v-model="filterKeyword"
-        ref="filterRef"
-        outlined
-        placeholder="ค้นหา"
-        @keydown.enter.prevent="filterFn"
-      >
-        <template v-slot:append>
-          <q-icon
-            v-if="filterKeyword !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="resetFilter"
-          />
-        </template>
-      </q-input> -->
 
       <q-select
         id="visibleColumns"
@@ -477,12 +475,7 @@ watch(
                       v-if="props.row.revisionId == null"
                       clickable
                       v-close-popup
-                      @click.stop="
+                      @click.stop="deleteData(props.row.id)"
-                        dialogRemove(
-                          $q,
-                          async () => await deleteData(props.row.id)
-                        )
-                      "
                     >
                       <q-item-section>
                         <div class="row items-center">