Merge branch 'nice' into develop

2024-08-20 11:44:56 +07:00 · 2024-08-20 11:44:56 +07:00 · 03e925a41b
commit 03e925a41b
parent 11a7da58ed a589162530
12 changed files with 337 additions and 308 deletions
--- a/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue
+++ b/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, "บันทีกข้อมูลสำเร็จ");
-      props.fetchData?.();
+      await props.fetchData?.();
+      await success($q, "บันทีกข้อมูลสำเร็จ");
+      closeDialog();
    } catch (err) {
      messageError($q, err);
    } finally {
      hideLoader();
-      closeDialog();
    }
  });
 }
--- a/src/modules/13_salary/components/SalaryChart/DialogFormRate.vue
+++ b/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, "บันทีกข้อมูลสำเร็จ");
-      props.fetchData?.();
+      await props.fetchData?.();
+      await success($q, "บันทีกข้อมูลสำเร็จ");
+      closeDialog();
    } catch (err) {
      messageError($q, err);
    } finally {
      hideLoader();
-      closeDialog();
    }
  });
 }
--- a/src/modules/13_salary/components/SalaryChart/DialogUpload.vue
+++ b/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) => {
-      console.log(res);
+    .then(async (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(() => {
-      success($q, "อัปโหลดไฟล์สำเร็จ");
+    .then(async () => {
+      await fetchDocumentFile(salaryId.value);
+      await success($q, "อัปโหลดไฟล์สำเร็จ");
      documentFile.value = null;
-      fetchDocumentFile(salaryId.value);
    })
    .catch((e) => {
      messageError($q, e);
-    })
-    .finally(() => {});
+      hideLoader();
+    });
 }

 /**
@ -156,11 +159,11 @@ function onClickDeleteFile(fileName: string) {
    showLoader();
    await http
      .delete(config.API.salaryChartDelFile(salaryId.value, fileName))
-      .then(() => {
-        setTimeout(() => {
-          fetchDocumentFile(salaryId.value);
-          success($q, "ลบไฟล์สำเร็จ");
-        }, 1000);
+      .then(async () => {
+        setTimeout(async () => {
+          await fetchDocumentFile(salaryId.value);
+          await success($q, "ลบไฟล์สำเร็จ");
+        }, 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="col-xs-12 col-md-3">
-              <div class="row col-12 q-col-gutter-y-sm">
-                <div class="col-12 row">
-                  <div v-if="!props.isActive" class="full-width">
-                    <q-file
-                      v-if="
-                        props.typeAction === 'edit' &&
-                        checkPermission($route)?.attrIsUpdate
-                      "
-                      class="col-12"
-                      outlined
+          <div class="row col-12 q-col-gutter-y-sm">
+            <div class="col-12 row">
+              <div v-if="!props.isActive" class="full-width">
+                <q-file
+                  v-if="
+                    props.typeAction === 'edit' &&
+                    checkPermission($route)?.attrIsUpdate
+                  "
+                  class="col-12"
+                  outlined
+                  dense
+                  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"
-                      label="เอกสารอ้างอิง"
-                      hide-bottom-space
+                      color="add"
+                      icon="mdi-upload"
+                      @click="uploadDocumentFile"
+                      ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
                    >
-                      <template v-slot:prepend>
-                        <q-icon name="attach_file" color="primary" />
-                      </template>
-                      <template v-slot:after>
+                  </template>
+                </q-file>
+              </div>
+            </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"
-                          size="14px"
+                          dense
                          flat
                          round
-                          dense
-                          color="add"
-                          icon="mdi-upload"
-                          @click="uploadDocumentFile"
-                          ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
+                          color="blue"
+                          icon="mdi-download"
+                          @click="onClickDonwload(file.name)"
                        >
-                      </template>
-                    </q-file>
-                  </div>
-                </div>
+                          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                        </q-btn>
+                      </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">
-                  <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
-                              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 class="col-12" v-else>
+              <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
            </div>
          </div>
        </div>
--- a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue
+++ b/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 {
--- a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue
+++ b/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, "บันทีกข้อมูลสำเร็จ");
-      props.fetchData?.();
+      await props.fetchData?.();
+      await success($q, "บันทีกข้อมูลสำเร็จ");
+      closeDialog();
    } catch (err) {
      messageError($q, err);
-      hideLoader();
    } finally {
-      closeDialog();
+      hideLoader();
    }
  });
 }
--- a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeUpload.vue
+++ b/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) => {
-      console.log(res);
+    .then(async (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(() => {
-      success($q, "อัปโหลดไฟล์สำเร็จ");
+    .then(async () => {
+      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(() => {
-        setTimeout(() => {
-          fetchDocumentFile(salaryId.value);
-          success($q, "ลบไฟล์สำเร็จ");
-        }, 1000);
+      .then(async () => {
+        await setTimeout(async () => {
+          await fetchDocumentFile(salaryId.value);
+          await success($q, "ลบไฟล์สำเร็จ");
+        }, 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="col-md-12">
-            <div class="col-xs-12 col-md-3">
-              <div class="row col-12 q-col-gutter-y-sm">
-                <div class="col-12 row">
-                  <div
-                    v-if="
-                      !props.isActive && checkPermission($route)?.attrIsUpdate
-                    "
-                    class="full-width"
-                  >
-                    <q-file
-                      class="col-12"
-                      outlined
+        <div class="row q-col-gutter-sm">
+          <div class="row col-12 q-col-gutter-y-sm">
+            <div class="col-12 row">
+              <div
+                v-if="!props.isActive && checkPermission($route)?.attrIsUpdate"
+                class="full-width"
+              >
+                <q-file
+                  class="col-12"
+                  outlined
+                  dense
+                  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"
-                      label="เอกสารอ้างอิง"
-                      hide-bottom-space
+                      color="add"
+                      icon="mdi-upload"
+                      @click="uploadDocumentFile"
+                      ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
                    >
-                      <template v-slot:prepend>
-                        <q-icon name="attach_file" color="primary" />
-                      </template>
-                      <template v-slot:after>
+                  </template>
+                </q-file>
+              </div>
+            </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"
-                          size="14px"
+                          dense
                          flat
                          round
-                          dense
-                          color="add"
-                          icon="mdi-upload"
-                          @click="uploadDocumentFile"
-                          ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
+                          color="blue"
+                          icon="mdi-download"
+                          @click="onClickDonwload(file.name)"
                        >
-                      </template>
-                    </q-file>
-                  </div>
-                </div>
+                          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                        </q-btn>
+                      </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">
-                  <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
-                              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 class="col-12" v-else>
+              <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
            </div>
          </div>
        </div>
--- a/src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue
+++ b/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
          >
--- a/src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue
+++ b/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(() => {
-        success($q, "ลบข้อมูลสำเร็จ");
-        getData();
+      .then(async () => {
+        await 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"
--- a/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue
+++ b/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 DialogEmployeeUpload from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeUpload.vue";
+import DialogEmployeeChart from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.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"
--- a/src/modules/13_salary/views/salaryChart.vue
+++ b/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;
-      rows.value = data;
+      const data = await res.data.result.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(() => {
-      success($q, "คัดลอกข้อมูลสำเร็จ");
+    .then(async () => {
+      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(() => {
-        success($q, "ลบข้อมูลสำเร็จ");
+      .then(async () => {
+        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"
--- a/src/modules/13_salary/views/salaryEmployeeRate.vue
+++ b/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"
--- a/src/modules/13_salary/views/salaryRate.vue
+++ b/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 {
-  date2Thai,
-  dialogRemove,
-  success,
-  messageError,
-  showLoader,
-  hideLoader,
-} = useCounterMixin();
+const { 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();
 });