เงินเดืน => ปรับ code ผังบัญชีค่าจ้างลูกจ้างประจำ

src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue

@@ -4,13 +4,16 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { ObjectCharRef } from "@/modules/13_salary/interface/index/EmployeeChart";
+/** importType*/
 import type { FormDataChar } from "@/modules/13_salary/interface/request/EmployeeChart";
 
+/** importComponentes*/
 import Header from "@/components/DialogHeader.vue";
 
+/** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 
+/** use*/
 const $q = useQuasar();
 const {
   date2Thai,
@@ -19,9 +22,9 @@ const {
   hideLoader,
   messageError,
   success,
-  dialogRemove,
 } = useCounterMixin();
 
+/** props*/
 const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
   isStatusEdit: { type: Boolean, required: true },
@@ -31,6 +34,8 @@ const props = defineProps({
     required: true,
   },
 });
+
+/** form บัญชีค่าจ้างลูกจ้างประจำ */
 const formData = reactive<FormDataChar>({
   name: "", //ชื่อผังบัญชีอัตราค่าจ้าง
   group: "", //*กลุ่มของผังบัญชีอัตราค่าจ้าง
@@ -41,14 +46,12 @@ const formData = reactive<FormDataChar>({
   details: "", //คำอธิบาย
 });
 
-const nameRef = ref<Object | null>(null);
-const groupRef = ref<Object | null>(null);
-
-const ObjectRef: ObjectCharRef = {
-  name: nameRef,
-  group: groupRef,
-};
+const isReadonly = ref<boolean>(false);
 
+/**
+ * function fetch ข้อมูล ผังบัญชีค่าจ้างลูกจ้างประจำ
+ * @param id ผังบัญชีค่าจ้างลูกจ้างประจำ
+ */
 function fetchSalaryDetail(id: string) {
   showLoader();
   http
@@ -72,47 +75,33 @@ function fetchSalaryDetail(id: string) {
     });
 }
 
-const isReadonly = ref<boolean>(false);
-function onClickSubmit() {
-  const hasError = [];
-  for (const key in ObjectRef) {
-    if (Object.prototype.hasOwnProperty.call(ObjectRef, key)) {
-      const property = ObjectRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
+/** function บันทึกข้อมูลผังบัญชีค่าจ้างลูกจ้างประจำ*/
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    try {
+      const url = !props.isStatusEdit
+        ? config.API.salaryEmployeeChart
+        : config.API.salaryEmployeeChartByid(props.data.id);
+      await http[!props.isStatusEdit ? "post" : "put"](url, formData);
+      success($q, "บันทีกข้อมูลสำเร็จ");
+      props.fetchData?.();
+      closeDialog();
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
     }
-  }
-  if (hasError.every((result) => result === true)) {
-    dialogConfirm($q, () => {
-      onSubmit();
-    });
-  }
-}
-
-async function onSubmit() {
-  showLoader();
-  try {
-    const url = !props.isStatusEdit
-      ? config.API.salaryEmployeeChart
-      : config.API.salaryEmployeeChartByid(props.data.id);
-    await http[!props.isStatusEdit ? "post" : "put"](url, formData);
-    success($q, "บันทีกข้อมูลสำเร็จ");
-    props.fetchData?.();
-  } catch (err) {
-    messageError($q, err);
-  } finally {
-    hideLoader();
-    closeDialog();
-  }
+  });
 }
 
+/** function ปืด Dialog*/
 function closeDialog() {
   modal.value = false;
   clearFormData();
 }
 
+/** function เคลียข้อมูล form*/
 function clearFormData() {
   formData.name = "";
   formData.group = "";
@@ -132,6 +121,7 @@ function checkEndDate() {
   }
 }
 
+/** callbaclFunction fetch ช้อมูลเมื่อแก้ไข*/
 watch(
   () => modal.value,
   () => {
@@ -144,7 +134,7 @@ watch(
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 80%">
-      <form @submit.prevent.stop="onClickSubmit">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
         <Header
           :tittle="
             props.isStatusEdit
@@ -359,7 +349,7 @@ watch(
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </div>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>