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

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

@@ -133,7 +133,7 @@ function fetchSalaryDetail(id: string) {
       formData.endDate = data.endDate;
       formData.details = data.details;
       formData.isSpecial = data.isSpecial;
-      isReadonly.value = props.typeAction === 'view'? true: data.isActive;
+      isReadonly.value = props.typeAction === "view" ? true : data.isActive;
     })
     .catch((err) => {
       messageError($q, err);
@@ -192,7 +192,7 @@ function clearFormData() {
 }
 
 /**
- * function บัยทึกข้อมูลผังบัญชีเงินเดือน
+ * function บันทึกข้อมูลผังบัญชีเงินเดือน
  */
 function onSubmit() {
   dialogConfirm($q, async () => {
@@ -203,13 +203,13 @@ function onSubmit() {
           ? config.API.salaryChart
           : config.API.salaryChartByid(salaryId.value);
       await http[props.typeAction === "add" ? "post" : "put"](url, formData);
-      success($q, "บันทีกข้อมูลสำเร็จ");
+      await props.fetchData?.();
-      props.fetchData?.();
+      await success($q, "บันทีกข้อมูลสำเร็จ");
+      closeDialog();
     } catch (err) {
       messageError($q, err);
     } finally {
       hideLoader();
-      closeDialog();
     }
   });
 }

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

@@ -63,13 +63,17 @@ const title = computed(() => {
   return name;
 });
 
-/** function ปืด Dialog*/
+/**
+ * function ปืด Dialog*
+ */
 function closeDialog() {
   modal.value = !modal.value;
   clearFormData();
 }
 
-/** function เคลียข้อมูล form*/
+/**
+ * function เคลียข้อมูล form
+ */
 function clearFormData() {
   formData.salaryId = "";
   formData.salary = null;
@@ -139,13 +143,13 @@ function onSubmit() {
           ? config.API.salaryRateList
           : config.API.salaryRateListByid(formData.salaryId);
       await http[props.typeAction === "add" ? "post" : "put"](url, body);
-      success($q, "บันทีกข้อมูลสำเร็จ");
+      await props.fetchData?.();
-      props.fetchData?.();
+      await success($q, "บันทีกข้อมูลสำเร็จ");
+      closeDialog();
     } catch (err) {
       messageError($q, err);
     } finally {
       hideLoader();
-      closeDialog();
     }
   });
 }

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

@@ -56,7 +56,7 @@ const itemsDocument = ref<any>([]);
 
 /**
  * function fetch ข้อมูลรายการ ไฟล์
- * @param id
+ * @param id ไฟล์
  */
 function fetchDocumentFile(id: string) {
   showLoader();
@@ -74,13 +74,17 @@ function fetchDocumentFile(id: string) {
     });
 }
 
-/** function ปืด Dialog*/
+/**
+ * function ปืด Dialog*
+ */
 function closeDialog() {
   modal.value = !modal.value;
   clearFormData();
 }
 
-/** function เคลียข้อมูล form*/
+/**
+ * function เคลียข้อมูล form*
+ */
 function clearFormData() {
   formData.salaryType = "";
   formData.posTypeId = "";
@@ -95,10 +99,12 @@ function clearFormData() {
   itemsDocument.value = [];
 }
 
-/** function เรียก path อัปโหลดไฟล์*/
+/**
+ * function เรียก path อัปโหลดไฟล์
+ */
 async function uploadDocumentFile() {
-  const fileName = documentFile.value.name.replace(/\.(xlsx|docx|pdf)$/, "");
   showLoader();
+  const fileName = documentFile.value.name.replace(/\.(xlsx|docx|pdf)$/, "");
   const formData = new FormData();
   formData.append("file", documentFile.value);
   const body = {
@@ -109,20 +115,17 @@ async function uploadDocumentFile() {
   };
   await http
     .post(config.API.salaryChartFile(salaryId.value), body)
-    .then((res) => {
+    .then(async (res) => {
-      console.log(res);
       const foundKey: any = Object.keys(res.data).find(
         (key) =>
           res.data[key]?.fileName !== undefined &&
           res.data[key]?.fileName !== ""
       );
       const link = res.data[foundKey]?.uploadUrl;
-      fileUpLoad(link);
+      await fileUpLoad(link);
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
       hideLoader();
     });
 }
@@ -136,15 +139,15 @@ function fileUpLoad(url: string) {
       headers: { "Content-Type": documentFile.value?.type },
       onUploadProgress: (e) => console.log(e),
     })
-    .then(() => {
+    .then(async () => {
-      success($q, "อัปโหลดไฟล์สำเร็จ");
+      await fetchDocumentFile(salaryId.value);
+      await success($q, "อัปโหลดไฟล์สำเร็จ");
       documentFile.value = null;
-      fetchDocumentFile(salaryId.value);
     })
     .catch((e) => {
       messageError($q, e);
-    })
+      hideLoader();
-    .finally(() => {});
+    });
 }
 
 /**
@@ -156,11 +159,11 @@ function onClickDeleteFile(fileName: string) {
     showLoader();
     await http
       .delete(config.API.salaryChartDelFile(salaryId.value, fileName))
-      .then(() => {
+      .then(async () => {
-        setTimeout(() => {
+        setTimeout(async () => {
-          fetchDocumentFile(salaryId.value);
+          await fetchDocumentFile(salaryId.value);
-          success($q, "ลบไฟล์สำเร็จ");
+          await success($q, "ลบไฟล์สำเร็จ");
-        }, 1000);
+        }, 1500);
       })
       .catch((err) => {
         messageError($q, err);
@@ -168,7 +171,7 @@ function onClickDeleteFile(fileName: string) {
       .finally(() => {
         setTimeout(() => {
           hideLoader();
-        }, 1000);
+        }, 2000);
       });
   });
 }
@@ -181,9 +184,9 @@ function onClickDonwload(fileName: string) {
   showLoader();
   http
     .get(config.API.salaryChartDelFile(salaryId.value, fileName))
-    .then((res) => {
+    .then(async (res) => {
       const data = res.data;
-      downloadFile(data.downloadUrl, data.fileType, fileName);
+      await downloadFile(data.downloadUrl, data.fileType, fileName);
     })
     .catch((err) => {
       messageError($q, err);
@@ -239,99 +242,93 @@ watch(
 
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 40%">
+    <q-card style="width: 700px; max-width: 80vw">
       <Header :tittle="`อัปโหลดเอกสารอ้างอิง`" :close="closeDialog" />
       <q-separator />
       <q-card-section class="scroll" style="max-height: 70vh">
         <div class="row col-12 q-col-gutter-sm">
-          <div class="col-md-12">
+          <div class="row col-12 q-col-gutter-y-sm">
-            <div class="col-xs-12 col-md-3">
+            <div class="col-12 row">
-              <div class="row col-12 q-col-gutter-y-sm">
+              <div v-if="!props.isActive" class="full-width">
-                <div class="col-12 row">
+                <q-file
-                  <div v-if="!props.isActive" class="full-width">
+                  v-if="
-                    <q-file
+                    props.typeAction === 'edit' &&
-                      v-if="
+                    checkPermission($route)?.attrIsUpdate
-                        props.typeAction === 'edit' &&
+                  "
-                        checkPermission($route)?.attrIsUpdate
+                  class="col-12"
-                      "
+                  outlined
-                      class="col-12"
+                  dense
-                      outlined
+                  v-model="documentFile"
+                  label="เอกสารอ้างอิง"
+                  hide-bottom-space
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" color="primary" />
+                  </template>
+                  <template v-slot:after>
+                    <q-btn
+                      v-if="documentFile"
+                      size="14px"
+                      flat
+                      round
                       dense
-                      v-model="documentFile"
+                      color="add"
-                      label="เอกสารอ้างอิง"
+                      icon="mdi-upload"
-                      hide-bottom-space
+                      @click="uploadDocumentFile"
+                      ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
                     >
-                      <template v-slot:prepend>
+                  </template>
-                        <q-icon name="attach_file" color="primary" />
+                </q-file>
-                      </template>
+              </div>
-                      <template v-slot:after>
+            </div>
+
+            <div v-if="itemsDocument.length > 0" class="col-xs-12 row">
+              <q-list class="full-width rounded-borders" bordered separator>
+                <q-item
+                  v-for="file in itemsDocument"
+                  :key="file.id"
+                  clickable
+                  v-ripple
+                >
+                  <q-item-section>{{ file.name }}</q-item-section>
+                  <q-item-section avatar>
+                    <div class="row q-col-gutter-md">
+                      <div>
                         <q-btn
-                          v-if="documentFile"
+                          dense
-                          size="14px"
                           flat
                           round
-                          dense
+                          color="blue"
-                          color="add"
+                          icon="mdi-download"
-                          icon="mdi-upload"
+                          @click="onClickDonwload(file.name)"
-                          @click="uploadDocumentFile"
-                          ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
                         >
-                      </template>
+                          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-                    </q-file>
+                        </q-btn>
-                  </div>
+                      </div>
-                </div>
+                      <div
+                        v-if="
+                          !props.isActive &&
+                          checkPermission($route)?.attrIsUpdate
+                        "
+                      >
+                        <q-btn
+                          dense
+                          flat
+                          round
+                          color="red"
+                          icon="delete"
+                          @click="onClickDeleteFile(file.name)"
+                          ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+                        >
+                      </div>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </div>
 
-                <div v-if="itemsDocument.length > 0" class="col-xs-12 row">
+            <div class="col-12" v-else>
-                  <q-list class="full-width rounded-borders" bordered separator>
+              <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
-                    <q-item
-                      v-for="file in itemsDocument"
-                      :key="file.id"
-                      clickable
-                      v-ripple
-                    >
-                      <q-item-section>{{ file.name }}</q-item-section>
-                      <q-item-section avatar>
-                        <div class="row q-col-gutter-md">
-                          <div>
-                            <q-btn
-                              dense
-                              flat
-                              round
-                              size="12px"
-                              color="blue"
-                              icon="mdi-download-outline"
-                              @click="onClickDonwload(file.name)"
-                            >
-                              <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-                            </q-btn>
-                          </div>
-                          <div
-                            v-if="
-                              !props.isActive &&
-                              checkPermission($route)?.attrIsUpdate
-                            "
-                          >
-                            <q-btn
-                              dense
-                              flat
-                              round
-                              size="12px"
-                              color="red"
-                              icon="mdi-delete-outline"
-                              @click="onClickDeleteFile(file.name)"
-                              ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
-                            >
-                          </div>
-                        </div>
-                      </q-item-section>
-                    </q-item>
-                  </q-list>
-                </div>
-
-                <div class="col-12" v-else>
-                  <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
-                </div>
-              </div>
             </div>
           </div>
         </div>

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

@@ -87,8 +87,8 @@ function onSubmit() {
         : config.API.salaryEmployeeChartByid(props.data.id);
       await http[!props.isStatusEdit ? "post" : "put"](url, formData);
       await props.fetchData?.();
-      closeDialog();
       success($q, "บันทีกข้อมูลสำเร็จ");
+      closeDialog();
     } catch (err) {
       messageError($q, err);
     } finally {

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

@@ -92,13 +92,13 @@ function onSubmit() {
         ? config.API.salaryEmployeeRateList
         : config.API.salaryEmployeeRateListByid(props?.data?.id);
       await http[!props.isStatusEdit ? "post" : "put"](url, body);
-      success($q, "บันทีกข้อมูลสำเร็จ");
+      await props.fetchData?.();
-      props.fetchData?.();
+      await success($q, "บันทีกข้อมูลสำเร็จ");
+      closeDialog();
     } catch (err) {
       messageError($q, err);
-      hideLoader();
     } finally {
-      closeDialog();
+      hideLoader();
     }
   });
 }

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

@@ -71,20 +71,17 @@ async function uploadDocumentFile() {
   };
   await http
     .post(config.API.salaryEmployeeChartFile(salaryId.value), body)
-    .then((res) => {
+    .then(async (res) => {
-      console.log(res);
       const foundKey: any = Object.keys(res.data).find(
         (key) =>
           res.data[key]?.fileName !== undefined &&
           res.data[key]?.fileName !== ""
       );
       const link = res.data[foundKey]?.uploadUrl;
-      fileUpLoad(link);
+      await fileUpLoad(link);
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
       hideLoader();
     });
 }
@@ -98,15 +95,17 @@ function fileUpLoad(url: string) {
       headers: { "Content-Type": documentFile.value?.type },
       onUploadProgress: (e) => console.log(e),
     })
-    .then(() => {
+    .then(async () => {
-      success($q, "อัปโหลดไฟล์สำเร็จ");
+      await fetchDocumentFile(salaryId.value);
+      await success($q, "อัปโหลดไฟล์สำเร็จ");
       documentFile.value = null;
-      fetchDocumentFile(salaryId.value);
     })
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(() => {});
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 /**
@@ -118,11 +117,11 @@ function onClickDeleteFile(fileName: string) {
     showLoader();
     await http
       .delete(config.API.salaryEmployeeChartDelFile(salaryId.value, fileName))
-      .then(() => {
+      .then(async () => {
-        setTimeout(() => {
+        await setTimeout(async () => {
-          fetchDocumentFile(salaryId.value);
+          await fetchDocumentFile(salaryId.value);
-          success($q, "ลบไฟล์สำเร็จ");
+          await success($q, "ลบไฟล์สำเร็จ");
-        }, 1000);
+        }, 1500);
       })
       .catch((err) => {
         messageError($q, err);
@@ -130,7 +129,7 @@ function onClickDeleteFile(fileName: string) {
       .finally(() => {
         setTimeout(() => {
           hideLoader();
-        }, 1000);
+        }, 2000);
       });
   });
 }
@@ -199,100 +198,92 @@ watch(
 
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 80%">
+    <q-card style="width: 700px; max-width: 80vw">
       <Header :tittle="`อัปโหลดเอกสารอ้างอิง`" :close="closeDialog" />
       <q-separator />
       <q-card-section class="scroll" style="max-height: 70vh">
-        <div class="row col-12 q-col-gutter-sm">
+        <div class="row q-col-gutter-sm">
-          <div class="col-md-12">
+          <div class="row col-12 q-col-gutter-y-sm">
-            <div class="col-xs-12 col-md-3">
+            <div class="col-12 row">
-              <div class="row col-12 q-col-gutter-y-sm">
+              <div
-                <div class="col-12 row">
+                v-if="!props.isActive && checkPermission($route)?.attrIsUpdate"
-                  <div
+                class="full-width"
-                    v-if="
+              >
-                      !props.isActive && checkPermission($route)?.attrIsUpdate
+                <q-file
-                    "
+                  class="col-12"
-                    class="full-width"
+                  outlined
-                  >
+                  dense
-                    <q-file
+                  v-model="documentFile"
-                      class="col-12"
+                  label="เอกสารอ้างอิง"
-                      outlined
+                  hide-bottom-space
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" color="primary" />
+                  </template>
+                  <template v-slot:after>
+                    <q-btn
+                      v-if="documentFile"
+                      size="14px"
+                      flat
+                      round
                       dense
-                      v-model="documentFile"
+                      color="add"
-                      label="เอกสารอ้างอิง"
+                      icon="mdi-upload"
-                      hide-bottom-space
+                      @click="uploadDocumentFile"
+                      ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
                     >
-                      <template v-slot:prepend>
+                  </template>
-                        <q-icon name="attach_file" color="primary" />
+                </q-file>
-                      </template>
+              </div>
-                      <template v-slot:after>
+            </div>
+
+            <div v-if="itemsDocument.length > 0" class="col-xs-12 row">
+              <q-list class="full-width rounded-borders" bordered separator>
+                <q-item
+                  v-for="file in itemsDocument"
+                  :key="file.id"
+                  clickable
+                  v-ripple
+                >
+                  <q-item-section>{{ file.name }}</q-item-section>
+                  <q-item-section avatar>
+                    <div class="row q-col-gutter-md">
+                      <div>
                         <q-btn
-                          v-if="documentFile"
+                          dense
-                          size="14px"
                           flat
                           round
-                          dense
+                          color="blue"
-                          color="add"
+                          icon="mdi-download"
-                          icon="mdi-upload"
+                          @click="onClickDonwload(file.name)"
-                          @click="uploadDocumentFile"
-                          ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
                         >
-                      </template>
+                          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-                    </q-file>
+                        </q-btn>
-                  </div>
+                      </div>
-                </div>
+                      <div
+                        v-if="
+                          !props.isActive &&
+                          checkPermission($route)?.attrIsUpdate
+                        "
+                      >
+                        <q-btn
+                          dense
+                          flat
+                          round
+                          color="red"
+                          icon="delete"
+                          @click="onClickDeleteFile(file.name)"
+                          ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+                        >
+                      </div>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </div>
 
-                <div v-if="itemsDocument.length > 0" class="col-xs-12 row">
+            <div class="col-12" v-else>
-                  <q-list class="full-width rounded-borders" bordered separator>
+              <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
-                    <q-item
-                      v-for="file in itemsDocument"
-                      :key="file.id"
-                      clickable
-                      v-ripple
-                    >
-                      <q-item-section>{{ file.name }}</q-item-section>
-                      <q-item-section avatar>
-                        <div class="row q-col-gutter-md">
-                          <div>
-                            <q-btn
-                              dense
-                              flat
-                              round
-                              size="12px"
-                              color="blue"
-                              icon="mdi-download-outline"
-                              @click="onClickDonwload(file.name)"
-                            >
-                              <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-                            </q-btn>
-                          </div>
-                          <div
-                            v-if="
-                              !props.isActive &&
-                              checkPermission($route)?.attrIsUpdate
-                            "
-                          >
-                            <q-btn
-                              dense
-                              flat
-                              round
-                              size="12px"
-                              color="red"
-                              icon="mdi-delete-outline"
-                              @click="onClickDeleteFile(file.name)"
-                              ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
-                            >
-                          </div>
-                        </div>
-                      </q-item-section>
-                    </q-item>
-                  </q-list>
-                </div>
-
-                <div class="col-12" v-else>
-                  <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
-                </div>
-              </div>
             </div>
           </div>
         </div>

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

@@ -108,8 +108,8 @@ function onSubmit() {
     await http[!isEdit.value ? "post" : "put"](url, body)
       .then(async () => {
         await props.getDataMain?.();
-        closeDialog();
         await success($q, "บันทึกข้อมูลสำเร็จ");
+        closeDialog();
       })
       .catch((e) => {
         messageError($q, e);
@@ -575,7 +575,7 @@ const getClass = (val: boolean) => {
         </q-card-section>
         <q-separator />
 
-        <q-card-actions align="right" class="bg-white text-teal">
+        <q-card-actions v-if="!isReadonly" align="right">
           <q-btn label="บันทึก" color="secondary" type="submit"
             ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
           >

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

@@ -28,6 +28,7 @@ const { dialogRemove, messageError, showLoader, hideLoader, success } =
   useCounterMixin();
 
 /** ข้อมูล Table*/
+const rows = ref<ListData[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -120,7 +121,6 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-
 const visibleColumns = ref<string[]>([
   "no",
   "posType",
@@ -133,8 +133,6 @@ const visibleColumns = ref<string[]>([
   "rateHighMax",
   "reson",
 ]);
-const rows = ref<ListData[]>([]);
-
 const formFilter = reactive({
   page: 1,
   pageSize: 10,
@@ -246,9 +244,9 @@ function onClickDelete(id: string) {
     showLoader();
     http
       .delete(config.API.salaryFormula() + `/${id}`)
-      .then(() => {
+      .then(async () => {
-        success($q, "ลบข้อมูลสำเร็จ");
+        await getData();
-        getData();
+        await success($q, "ลบข้อมูลสำเร็จ");
       })
       .catch((err) => {
         messageError($q, err);
@@ -397,7 +395,7 @@ onMounted(() => {
       <q-separator />
     </template>
     <template v-slot:body="props">
-      <q-tr :props="props" class="cursor-pointer">
+      <q-tr :props="props">
         <q-td auto-width>
           <q-btn
             v-if="checkPermission($route)?.attrIsGet"

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

@@ -13,8 +13,8 @@ import type { FormFilter } from "@/modules/13_salary/interface/request/EmployeeC
 import type { EmployeeSalary } from "@/modules/13_salary/interface/response/salaryEmployeeChart";
 
 /** importComponents*/
-import DialogEmployeeChart from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue";
+import DialogEmployeeChart from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue"; //ผังบัญชีค่าจ้างลูกจ้างประจำ
-import DialogEmployeeUpload from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeUpload.vue";
+import DialogEmployeeUpload from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeUpload.vue"; //อัปโหลดเอกสารอ้างอิง
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -45,6 +45,7 @@ const activeType = ref<string>("");
 const dataRow = ref<EmployeeSalary>();
 
 /** ข้อมูล Table*/
+const rows = ref<EmployeeSalary[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
@@ -83,7 +84,6 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const rows = ref<EmployeeSalary[]>([]);
 const visibleColumns = ref<string[]>([
   "name",
   "group",
@@ -91,7 +91,9 @@ const visibleColumns = ref<string[]>([
   "isActive",
 ]);
 
-/** function fetch ข้แมูลรายาการผังบัญชีค่าจ้างลูกจ้างประจำ */
+/**
+ * fetch ข้แมูลรายาการผังบัญชีค่าจ้างลูกจ้างประจำ
+ */
 function fetchListChart() {
   showLoader();
   http
@@ -112,32 +114,8 @@ function fetchListChart() {
     });
 }
 
-// /**
-//  * function เลือกเมนู
-//  * @param type ประเทภเมนู
-//  * @param data ข้อมูลผังบัญชีค่าจ้างลูกจ้างประจำ
-//  */
-// function onClickAction(type: string, data: EmployeeSalary) {
-//   switch (type) {
-//     case "edit":
-//       onEdit(data);
-//       break;
-//     case "upload":
-//       onUpload(data.id, data.isActive);
-//       break;
-//     case "salaryRate":
-//       onSalaryRate(data.id);
-//       break;
-//     case "copy":
-//       onCoppy(data.id);
-//       break;
-//     default:
-//       break;
-//   }
-// }
-
 /**
- *  function openDialog แก้ไขผังบัญชีค่าจ้างลูกจ้างประจำ
+ *   openDialog แก้ไขผังบัญชีค่าจ้างลูกจ้างประจำ
  * @param data ข้อมูลผังบัญชีค่าจ้างลูกจ้างประจำ
  */
 function onEdit(data: EmployeeSalary, type: string) {
@@ -175,6 +153,7 @@ function onSalaryRate(id: string) {
  * @param id ผังบัญชีค่าจ้างลูกจ้างประจำ
  */
 function onCoppy(id: string) {
+  showLoader();
   http
     .post(config.API.salaryEmployeeChartCopy, { id: id })
     .then(async () => {
@@ -183,6 +162,9 @@ function onCoppy(id: string) {
     })
     .catch((err) => {
       messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
     });
 }
 
@@ -192,6 +174,7 @@ function onCoppy(id: string) {
  */
 function onClickDelete(id: string) {
   dialogRemove($q, () => {
+    showLoader();
     http
       .delete(config.API.salaryEmployeeChartByid(id))
       .then(async () => {
@@ -200,17 +183,24 @@ function onClickDelete(id: string) {
       })
       .catch((err) => {
         messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
       });
   });
 }
 
-/** function เปิด dialog เพิ่มผังบัญชีค่าจ้างลูกจ้างประจำ*/
+/**
+ * function เปิด dialog เพิ่มผังบัญชีค่าจ้างลูกจ้างประจำ
+ */
 function onClickAdd() {
   isStatusEdit.value = false;
   modalDialogEmployeeChart.value = true;
 }
 
-/** functionn fetch ข้อมูลรายการหน้าแรก*/
+/**
+ * functionn fetch ข้อมูลรายการหน้าแรก*
+ */
 function filterFn() {
   formFilter.page = 1;
   fetchListChart();
@@ -253,7 +243,7 @@ onMounted(() => {
       icon="add"
       @click="onClickAdd()"
     >
-      <q-tooltip>เพิ่ม </q-tooltip>
+      <q-tooltip>เพิ่มข้อมูล </q-tooltip>
     </q-btn>
     <q-space />
     <q-input
@@ -306,7 +296,7 @@ onMounted(() => {
       <q-separator />
     </template>
     <template v-slot:body="props">
-      <q-tr :props="props" class="cursor-pointer">
+      <q-tr :props="props">
         <q-td>
           <q-btn
             v-if="
@@ -465,6 +455,7 @@ onMounted(() => {
     </template>
   </d-table>
 
+  <!-- ผังบัญชีค่าจ้างลูกจ้างประจำ -->
   <DialogEmployeeChart
     v-model:modal="modalDialogEmployeeChart"
     :isStatusEdit="isStatusEdit"
@@ -473,6 +464,7 @@ onMounted(() => {
     :activeType="activeType"
   />
 
+  <!-- อัปโหลดเอกสารอ้างอิง -->
   <DialogEmployeeUpload
     v-model:modal="modalDialogUpload"
     :id="salaryChartId"

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

@@ -6,15 +6,23 @@ import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-/** importType*/
+/**
+ * importType
+ */
 import type { QTableProps } from "quasar";
 import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
 import type { Salary } from "@/modules/13_salary/interface/response/Main";
 import type { FormQuerySalary } from "@/modules/13_salary/interface/request/Main";
-import DialogFormUpload from "@/modules/13_salary/components/SalaryChart/DialogUpload.vue";
-import DialogFormMain from "@/modules/13_salary/components/SalaryChart/DialogFormMain.vue";
 
-/** importStore*/
+/**
+ * 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";
 
 /** use*/
@@ -33,6 +41,7 @@ const {
 const modalDialogFormMain = ref<boolean>(false);
 const modalUpload = ref<boolean>(false);
 const rowId = ref<string>("");
+
 /** Table*/
 const rows = ref<Salary[]>([]);
 const columns = ref<QTableProps["columns"]>([
@@ -93,7 +102,7 @@ const typeAction = ref<string>("");
 const dataRow = ref<Salary>();
 
 /**
- * function  fetch ข้อมูลรายการผังบัญชีเงินเดือน
+ *  fetch ข้อมูลรายการผังบัญชีเงินเดือน
  */
 function fetchListSalaly() {
   showLoader();
@@ -105,11 +114,11 @@ function fetchListSalaly() {
       config.API.salaryChart +
         `?page=${page}&pageSize=${pageSize}&keyword=${keyword}`
     )
-    .then((res) => {
+    .then(async (res) => {
       total.value = res.data.result.total;
       maxPage.value = Math.ceil(res.data.result.total / formQuery.pageSize);
-      const data = res.data.result.data;
+      const data = await res.data.result.data;
-      rows.value = data;
+      rows.value = await data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -145,16 +154,18 @@ function onClickSalaryRate(id: string) {
  * @param id บัญชีเงินเดือน
  */
 function onClickCoppy(id: string) {
+  showLoader();
   http
     .post(config.API.salaryChartCopy, { id: id })
-    .then(() => {
+    .then(async () => {
-      success($q, "คัดลอกข้อมูลสำเร็จ");
+      await fetchListSalaly();
+      await success($q, "คัดลอกข้อมูลสำเร็จ");
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
-      fetchListSalaly();
+      hideLoader();
     });
 }
 
@@ -164,16 +175,18 @@ function onClickCoppy(id: string) {
  */
 function onClickDelete(id: string) {
   dialogRemove($q, () => {
+    showLoader();
     http
       .delete(config.API.salaryChartByid(id))
-      .then(() => {
+      .then(async () => {
-        success($q, "ลบข้อมูลสำเร็จ");
+        await fetchListSalaly();
+        await success($q, "ลบข้อมูลสำเร็จ");
       })
       .catch((err) => {
         messageError($q, err);
       })
       .finally(() => {
-        fetchListSalaly();
+        hideLoader();
       });
   });
 }
@@ -481,12 +494,15 @@ onMounted(() => {
     </div>
   </q-card>
 
+  <!-- popup ผังบัญชีเงินเดือน -->
   <DialogFormMain
     v-model:modal="modalDialogFormMain"
     :typeAction="typeAction"
     :data="dataRow"
     :fetchData="fetchListSalaly"
   />
+
+  <!-- popup อัปโหลดเอกสารอ้างอิง -->
   <DialogFormUpload
     v-model:modal="modalUpload"
     :typeAction="typeAction"

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

@@ -110,6 +110,9 @@ const pagination = ref({
 const isActive = ref<boolean>(false);
 const groupSalary = ref<string>("");
 
+/**
+ * fetch ข้อมูลอัตราค่าจ้าง
+ */
 function fetchDataDetail() {
   http
     .get(config.API.salaryEmployeeChartByid(salaryEmployeeId.value))
@@ -122,6 +125,9 @@ function fetchDataDetail() {
     });
 }
 
+/**
+ * fetch อัตราค่าจ้าง
+ */
 function fetchSalalyEmployeeRate() {
   showLoader();
   http
@@ -146,12 +152,20 @@ const modalDialogEmployeeRate = ref<boolean>(false);
 const isStatusEdit = ref<boolean>(false);
 const dataRow = ref<EmployeeRateSalary>();
 
+/**
+ * แก่ไขข้อมูลรายการอัตราค่าจ้าง
+ * @param data  ข้อมูลรายการอัตราค่าจ้าง
+ */
 function onEdit(data: EmployeeRateSalary) {
   modalDialogEmployeeRate.value = true;
   isStatusEdit.value = true;
   dataRow.value = data;
 }
 
+/**
+ * ลบรายการอัตราค่าจ้าง
+ * @param id รายการอัตราค่าจ้าง
+ */
 function onDelete(id: string) {
   dialogRemove($q, () => {
     http
@@ -168,6 +182,9 @@ function onDelete(id: string) {
   });
 }
 
+/**
+ * เพิ่มข้อมูลรายการอัตราค่าจ้าง
+ */
 function onClickAdd() {
   modalDialogEmployeeRate.value = true;
   isStatusEdit.value = false;
@@ -188,9 +205,9 @@ function clickDownload() {
   showLoader();
   http
     .get(config.API.salaryReportemployeeByid(salaryEmployeeId.value))
-    .then((res) => {
+    .then(async (res) => {
       const dataList = res.data.result;
-      genReportXLSX(dataList, "อัตราค่าจ้าง");
+      await genReportXLSX(dataList, "อัตราค่าจ้าง");
     })
     .catch((e) => {
       messageError($q, e);
@@ -272,7 +289,7 @@ onMounted(async () => {
           <q-separator />
         </template>
         <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
+          <q-tr :props="props">
             <q-td v-if="!isActive">
               <q-btn
                 v-if="!isActive && checkPermission($route)?.attrIsUpdate"

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

@@ -6,7 +6,10 @@ import { useRouter, useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReportXLSX from "@/plugins/genreportxlsx";
-/** importType*/
+
+/**
+ * importType
+ */
 import type { QTableProps } from "quasar";
 import type {
   NewPagination,
@@ -15,24 +18,22 @@ import type {
 import type { SalaryRate } from "@/modules/13_salary/interface/response/Main";
 import type { FormQuerySalary } from "@/modules/13_salary/interface/request/Main";
 
-/** importComponents*/
+/**
+ * importComponents
+ */
 import DialogFormRate from "@/modules/13_salary/components/SalaryChart/DialogFormRate.vue";
 
-/** importStore*/
+/**
+ * importStore
+ */
 import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
 const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
-const {
+const { dialogRemove, success, messageError, showLoader, hideLoader } =
-  date2Thai,
+  useCounterMixin();
-  dialogRemove,
-  success,
-  messageError,
-  showLoader,
-  hideLoader,
-} = useCounterMixin();
 
 const isActive = ref<boolean>(false);
 const posType = ref<string>("");
@@ -126,7 +127,14 @@ const formQuery = reactive<FormQuerySalary>({
 });
 const maxPage = ref<number>(1);
 const totalRow = ref<number>(0);
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 100,
+});
 
+/**
+ * fetch รายการอัตราเงินเดือน
+ */
 async function fetchListSalalyRate() {
   showLoader();
   const page = await formQuery.page.toString();
@@ -140,7 +148,6 @@ async function fetchListSalalyRate() {
     .then((res) => {
       maxPage.value = Math.ceil(res.data.result.total / formQuery.pageSize);
       totalRow.value = res.data.result.total;
-
       rows.value = res.data.result.data;
     })
     .catch((err) => {
@@ -151,20 +158,6 @@ async function fetchListSalalyRate() {
     });
 }
 
-/** ตั้งค่าเริ่มต้น paging */
-const pagination = ref({
-  page: 1,
-  rowsPerPage: 100,
-});
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: NewPagination) {
-  formQuery.page = 1;
-  formQuery.pageSize = newPagination.rowsPerPage;
-}
-
 const typeAction = ref<string>("");
 const dataRow = ref<SalaryRate>();
 function onClickSalaryRate(type: string, data: SalaryRate | null) {
@@ -175,6 +168,10 @@ function onClickSalaryRate(type: string, data: SalaryRate | null) {
   }
 }
 
+/**
+ * ลบรายการอัตราเงินเดือน
+ * @param id รายการอัตราเงินเดือน
+ */
 function onClickDelete(id: string) {
   dialogRemove($q, () => {
     showLoader();
@@ -193,13 +190,16 @@ function onClickDelete(id: string) {
   });
 }
 
+/**
+ *  ดาวน์โหลดไฟล์
+ */
 function clickDownload() {
   showLoader();
   http
     .get(config.API.salaryReportByid(salaryId.value))
-    .then((res) => {
+    .then(async (res) => {
       const dataList = res.data.result;
-      genReportXLSX(dataList, "อัตราเงินเดือน");
+      await genReportXLSX(dataList, "อัตราเงินเดือน");
     })
     .catch((e) => {
       messageError($q, e);
@@ -208,7 +208,11 @@ function clickDownload() {
       hideLoader();
     });
 }
-function fetchList() {
+
+/**
+ * fetch ข้อมูลอัตราเงินเดือน
+ */
+function fetchDataSalary() {
   http
     .get(config.API.salaryChartByid(salaryId.value))
     .then((res) => {
@@ -219,8 +223,18 @@ function fetchList() {
       messageError($q, e);
     });
 }
+
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: NewPagination) {
+  formQuery.page = 1;
+  formQuery.pageSize = newPagination.rowsPerPage;
+}
+
 onMounted(async () => {
-  await fetchList();
+  fetchDataSalary();
   await fetchListSalalyRate();
 });