เงินเดือน => ปรับ code รายการผังบัญชีเงินเดือน

src/modules/13_salary/components/SalaryChart/DialogFormMain.vue

@@ -7,7 +7,6 @@ import config from "@/app.config";
 
 import type {
   DataOption,
-  ObjectSalaryRef,
   FormData,
 } from "@/modules/13_salary/interface/index/Main";
 import type {
@@ -28,7 +27,6 @@ const {
   hideLoader,
   messageError,
   success,
-  dialogRemove,
 } = useCounterMixin();
 
 const modal = defineModel<boolean>("modal", { required: true });
@@ -60,24 +58,10 @@ const formData = reactive<FormData>({
   isSpecial: false,
 });
 
-/** ตัวแปร ref สำหรับแสดง validate */
-const nameRef = ref<Object | null>(null);
-const posTypeRef = ref<Object | null>(null);
-const posLevelRef = ref<Object | null>(null);
-
-const ObjectRef: ObjectSalaryRef = {
-  name: nameRef,
-  posTypId: posTypeRef,
-  posLevelId: posLevelRef,
-};
-
 const posType = ref<SalaryPosType[]>([]);
 const salaryPosTypeOption = ref<DataOption[]>([]);
 const salaryPosLevelOption = ref<DataOption[]>([]);
 
-const documentFile = ref<any>(null);
-const itemsDocument = ref<any>([]);
-
 const title = computed(() => {
   const name =
     props.typeAction === "add"
@@ -89,8 +73,9 @@ const title = computed(() => {
   return name;
 });
 
-async function fetchPosType() {
-  await http
+/** fiunction fetch ข้อมูลประเภทตำแหน่ง*/
+function fetchPosType() {
+  http
     .get(config.API.salaryPosType)
     .then((res) => {
       posType.value = res.data.result;
@@ -105,7 +90,8 @@ async function fetchPosType() {
     });
 }
 
-async function fetchPosLevel(id: string) {
+/** fiunction fetch ข้อมูลระดับตำแหน่ง*/
+function fetchPosLevel(id: string) {
   const filterLevel = posType.value.find((e: SalaryPosType) => e.id === id);
   const listOption =
     filterLevel?.posLevels.map((e: SalaryPosLevel) => ({
@@ -119,9 +105,13 @@ async function fetchPosLevel(id: string) {
   }
 }
 
-async function fetchSalaryDetail(id: string) {
+/**
+ *  function fetch ข้อมูลผังบัญชีเงินเดือน
+ * @param id ผังบัญชีเงินเดือน
+ */
+function fetchSalaryDetail(id: string) {
   showLoader();
-  await http
+  http
     .get(config.API.salaryChartByid(id))
     .then((res) => {
       const data = res.data.result;
@@ -144,47 +134,34 @@ async function fetchSalaryDetail(id: string) {
     });
 }
 
-async function fetchDocumentFile(id: string) {
-  await http
-    .get(config.API.salaryChartFile(id))
-    .then((res) => {
-      const list = res.data.map((e: any) => ({ name: e.fileName }));
-      itemsDocument.value = list;
-    })
-    .catch((err) => {});
-}
-
+/** callbackFunction ทำการ fetch ข้อมูลไฟล์เมื่อเปิด Dialog*/
 watch(
   () => modal.value,
-  async () => {
+  () => {
     if (modal.value) {
       if (salaryPosTypeOption.value.length === 0) {
-        await fetchPosType();
+        fetchPosType();
       }
-      // if (props.typeAction === "add") {
-      //   formData.date = new Date();
-      //   formData.startDate = new Date();
-      //   formData.endDate = new Date();
-      // }
-
       if (props.typeAction === "edit") {
-        await showLoader();
-        if (props.data) {
-          salaryId.value = props.data.id;
-          await fetchDocumentFile(props.data.id);
-          await fetchSalaryDetail(props.data.id);
-          await fetchPosLevel(props.data.posTypeId);
-        }
+        setTimeout(() => {
+          if (props.data) {
+            salaryId.value = props.data.id;
+            fetchSalaryDetail(props.data.id);
+            fetchPosLevel(props.data.posTypeId);
+          }
+        }, 100);
       }
     }
   }
 );
 
+/** function ปืด Dialog*/
 function closeDialog() {
   modal.value = !modal.value;
   clearFormData();
 }
 
+/** function เคลียข้อมูล form*/
 function clearFormData() {
   formData.name = "";
   formData.posTypeId = "";
@@ -195,28 +172,11 @@ function clearFormData() {
   formData.startDate = null;
   formData.endDate = null;
   formData.details = "";
-  documentFile.value = null;
-  itemsDocument.value = [];
   isReadonly.value = 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);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    createSalary();
-  }
-}
-
-function createSalary() {
+/** function บัยทึกข้อมูลผังบัญชีเงินเดือน*/
+function onSubmit() {
   dialogConfirm($q, async () => {
     showLoader();
     try {
@@ -244,13 +204,12 @@ function checkEndDate() {
     }
   }
 }
-
 </script>
 
 <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="title" :close="closeDialog" />
         <q-separator />
         <q-card-section class="scroll" style="max-height: 70vh">
@@ -321,18 +280,14 @@ function checkEndDate() {
                     label="เฉพาะสายงานที่กำหนด"
                   />
 
-
-
                   <q-toggle
-                  :disable="isReadonly"
+                    :disable="isReadonly"
                     color="primary"
                     label="สถานะการใช้งาน"
                     v-model="formData.isActive"
                   />
-  
                 </div>
 
-
                 <div class="col-xs-12 col-md-4">
                   <datepicker
                     menu-class-name="modalfix"
@@ -477,13 +432,14 @@ function checkEndDate() {
             </div>
           </div>
         </q-card-section>
+
         <q-separator />
         <div class="text-right q-ma-sm">
           <q-btn label="บันทึก" type="submit" color="secondary">
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </div>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>