From 51417debf424722b583ecf224ae71d0cd0d0cdae Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Thu, 29 Feb 2024 10:23:42 +0700
Subject: [PATCH] upfile popup

---
 .../components/SalaryChart/DialogFormMain.vue | 647 ++++++------------
 .../components/SalaryChart/DialogUpload.vue   | 387 +++++++++++
 src/modules/13_salary/views/salaryChart.vue   |  27 +-
 3 files changed, 638 insertions(+), 423 deletions(-)

diff --git a/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue b/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue
index ab5e01f6a..0c955d58d 100644
--- a/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue
+++ b/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue
@@ -237,78 +237,8 @@ function createSalary() {
   });
 }
 
-async function uploadDocumentFile() {
-  const fileName = documentFile.value.name.replace(/\.(xlsx|docx|pdf)$/, "");
-  showLoader();
-  const formData = new FormData();
-  formData.append("file", documentFile.value);
-  const body = {
-    replace: false,
-    fileList: {
-      fileName: fileName,
-    },
-  };
-  await http
-    .post(config.API.salaryChartFile(salaryId.value), body)
-    .then((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);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-/**
- * function อัปโหลดไฟล์
- * @param url link อัปโหลด
- */
-function fileUpLoad(url: string) {
-  axios
-    .put(url, documentFile.value, {
-      headers: { "Content-Type": documentFile.value?.type },
-      onUploadProgress: (e) => console.log(e),
-    })
-    .then(() => {
-      success($q, "อัปโหลดไฟล์สำเร็จ");
-      documentFile.value = null;
-      fetchDocumentFile(salaryId.value);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {});
-}
 
-function onClickDeleteFile(fileName: string) {
-  dialogRemove($q, async () => {
-    showLoader();
-    await http
-      .delete(config.API.salaryChartDelFile(salaryId.value, fileName))
-      .then(() => {
-        setTimeout(() => {
-          fetchDocumentFile(salaryId.value);
-          success($q, "ลบไฟล์สำเร็จ");
-        }, 1000);
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        setTimeout(() => {
-          hideLoader();
-        }, 1000);
-      });
-  });
-}
+
 
 /** function checkEndDate*/
 function checkEndDate() {
@@ -319,20 +249,6 @@ function checkEndDate() {
   }
 }
 
-async function onClickDonwload(fileName: string) {
-  showLoader();
-  await http
-    .get(config.API.salaryChartDelFile(salaryId.value, fileName))
-    .then((res) => {
-      const data = res.data;
-      downloadFile(data.downloadUrl, data.fileType, fileName);
-    })
-    .catch((err) => {
-      messageError($q, err);
-      hideLoader();
-    });
-}
-
 /**
  * function เรียกไฟล์ PDF
  * @param url  link PDF
@@ -370,351 +286,242 @@ async function downloadFile(url: string, type: string, fileName: string) {
       <Header :tittle="title" :close="closeDialog" />
       <q-separator />
 
-      <q-card-section class="scroll" style="max-height: 70vh">
+      <q-card-section class="scroll" style="max-height: 70vh;">
         <div class="row col-12 q-col-gutter-sm">
-          <div class="col-md-9">
-            <div class="col-xs-12 col-md-3">
-              <q-card bordered style="border: 1px solid #d6dee1">
-                <div
-                  class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+          <div class="col-md-12">
+            <div class="row col-12 q-col-gutter-sm ">
+              <div class="col-xs-12 col-md-3">
+                <q-select
+                  ref="salaryTypeRef"
+                  dense
+                  hide-bottom-space
+                  outlined
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  v-model="formData.salaryType"
+                  :options="salaryTypeOption"
+                  label="ประเภทผังบัญชีเงินเดือน"
+                  :rules="[
+                    (val) => !!val || 'กรุณาเลือกประเภทผังบัญชีเงินเดือน',
+                  ]"
+                  lazy-rules
+                />
+              </div>
+
+              <div class="col-xs-12 col-md-3">
+                <q-select
+                  ref="posTypeRef"
+                  dense
+                  hide-bottom-space
+                  outlined
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  v-model="formData.posTypeId"
+                  :options="salaryPosTypeOption"
+                  label="ประเภทตำแหน่ง/กลุ่ม"
+                  :rules="[(val) => !!val || 'กรุณาเลือกประเภทตำแหน่ง/กลุ่ม']"
+                  lazy-rules
+                  @update:model-value="fetchPosLevel"
+                />
+              </div>
+
+              <div class="col-xs-12 col-md-3">
+                <q-select
+                  ref="posLevelRef"
+                  dense
+                  hide-bottom-space
+                  outlined
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  v-model="formData.posLevelId"
+                  :options="salaryPosLevelOption"
+                  label="ระดับ"
+                  :rules="[(val) => !!val || 'กรุณาเลือกระดับ']"
+                  lazy-rules
+                  :disable="formData.posTypeId === ''"
+                />
+              </div>
+
+              <div class="col-xs-12 col-md-1">
+                <q-checkbox size="md" v-model="formData.isSpecial" label="ฉ" />
+              </div>
+
+              <div
+                class="col-xs-12 col-md-2"
+                style="display: flex; justify-content: flex-start"
+              >
+                <q-toggle
+                  color="primary"
+                  label="สถานะการใช้งาน"
+                  v-model="formData.isActive"
+                />
+              </div>
+
+              <div class="col-xs-12 col-md-4">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formData.date"
+                  :locale="'th'"
+                  autoApply
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
                 >
-                  ข้อมูลผังบัญชีเงินเดือน
-                </div>
-                <div class="col-12"><q-separator /></div>
-                <div class="row col-12 q-col-gutter-sm q-pa-sm">
-                  <div class="col-xs-12 col-md-3">
-                    <q-select
-                      ref="salaryTypeRef"
-                      dense
-                      hide-bottom-space
-                      outlined
-                      option-label="name"
-                      option-value="id"
-                      emit-value
-                      map-options
-                      v-model="formData.salaryType"
-                      :options="salaryTypeOption"
-                      label="ประเภทผังบัญชีเงินเดือน"
-                      :rules="[
-                        (val) => !!val || 'กรุณาเลือกประเภทผังบัญชีเงินเดือน',
-                      ]"
-                      lazy-rules
-                    />
-                  </div>
-
-                  <div class="col-xs-12 col-md-3">
-                    <q-select
-                      ref="posTypeRef"
-                      dense
-                      hide-bottom-space
-                      outlined
-                      option-label="name"
-                      option-value="id"
-                      emit-value
-                      map-options
-                      v-model="formData.posTypeId"
-                      :options="salaryPosTypeOption"
-                      label="ประเภทตำแหน่ง/กลุ่ม"
-                      :rules="[
-                        (val) => !!val || 'กรุณาเลือกประเภทตำแหน่ง/กลุ่ม',
-                      ]"
-                      lazy-rules
-                      @update:model-value="fetchPosLevel"
-                    />
-                  </div>
-
-                  <div class="col-xs-12 col-md-3">
-                    <q-select
-                      ref="posLevelRef"
-                      dense
-                      hide-bottom-space
-                      outlined
-                      option-label="name"
-                      option-value="id"
-                      emit-value
-                      map-options
-                      v-model="formData.posLevelId"
-                      :options="salaryPosLevelOption"
-                      label="ระดับ"
-                      :rules="[(val) => !!val || 'กรุณาเลือกระดับ']"
-                      lazy-rules
-                      :disable="formData.posTypeId === ''"
-                    />
-                  </div>
-
-                  <div class="col-xs-12 col-md-1">
-                    <q-checkbox
-                      size="md"
-                      v-model="formData.isSpecial"
-                      label="ฉ"
-                    />
-                  </div>
-
-                  <div
-                    class="col-xs-12 col-md-2"
-                    style="display: flex; justify-content: flex-start"
-                  >
-                    <q-toggle
-                      color="primary"
-                      label="สถานะการใช้งาน"
-                      v-model="formData.isActive"
-                    />
-                  </div>
-
-                  <div class="col-xs-12 col-md-4">
-                    <datepicker
-                      menu-class-name="modalfix"
-                      v-model="formData.date"
-                      :locale="'th'"
-                      autoApply
-                      borderless
-                      :enableTimePicker="false"
-                      week-start="0"
-                    >
-                      <template #year="{ year }">
-                        {{ year + 543 }}
-                      </template>
-                      <template #year-overlay-value="{ value }">
-                        {{ parseInt(value + 543) }}
-                      </template>
-                      <template #trigger>
-                        <q-input
-                          ref="dateRef"
-                          outlined
-                          dense
-                          hide-bottom-space
-                          :model-value="
-                            formData.date != null
-                              ? date2Thai(formData.date)
-                              : null
-                          "
-                          label="ให้ไว้ ณ วันที่"
-                          :rules="[
-                            (val) =>
-                              !!val || `${'กรุณาเลือกวันที่ ให้ไว ณ วันที่'}`,
-                          ]"
-                          lazy-rules
-                        >
-                          <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              style="color: var(--q-primary)"
-                            >
-                            </q-icon>
-                          </template>
-                        </q-input>
-                      </template>
-                    </datepicker>
-                  </div>
-
-                  <div class="col-xs-12 col-md-4">
-                    <datepicker
-                      menu-class-name="modalfix"
-                      v-model="formData.startDate"
-                      :locale="'th'"
-                      autoApply
-                      borderless
-                      :enableTimePicker="false"
-                      week-start="0"
-                      @update:model-value="checkEndDate"
-                    >
-                      <template #year="{ year }">
-                        {{ year + 543 }}
-                      </template>
-                      <template #year-overlay-value="{ value }">
-                        {{ parseInt(value + 543) }}
-                      </template>
-                      <template #trigger>
-                        <q-input
-                          ref="startDateRef"
-                          outlined
-                          dense
-                          hide-bottom-space
-                          :model-value="
-                            formData.startDate != null
-                              ? date2Thai(formData.startDate)
-                              : null
-                          "
-                          label="วันที่มีผลบังคับใช้"
-                          :rules="[
-                            (val) =>
-                              !!val || `${'กรุณาเลือกวันที่มีผลบังคับใช้'}`,
-                          ]"
-                          lazy-rules
-                        >
-                          <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              style="color: var(--q-primary)"
-                            >
-                            </q-icon>
-                          </template>
-                        </q-input>
-                      </template>
-                    </datepicker>
-                  </div>
-
-                  <div class="col-xs-12 col-md-4">
-                    <datepicker
-                      menu-class-name="modalfix"
-                      v-model="formData.endDate"
-                      :locale="'th'"
-                      autoApply
-                      borderless
-                      :enableTimePicker="false"
-                      week-start="0"
-                      :min-date="formData.startDate"
-                    >
-                      <template #year="{ year }">
-                        {{ year + 543 }}
-                      </template>
-                      <template #year-overlay-value="{ value }">
-                        {{ parseInt(value + 543) }}
-                      </template>
-                      <template #trigger>
-                        <q-input
-                          ref="endDateRef"
-                          outlined
-                          dense
-                          hide-bottom-space
-                          :model-value="
-                            formData.endDate != null
-                              ? date2Thai(formData.endDate)
-                              : null
-                          "
-                          label="วันที่สิ้นสุดบังคับใช้"
-                          :rules="[
-                            (val) =>
-                              !!val || `${'กรุณาเลือกวันที่สิ้นสุดบังคับใช้'}`,
-                          ]"
-                          lazy-rules
-                        >
-                          <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              style="color: var(--q-primary)"
-                            >
-                            </q-icon>
-                          </template>
-                        </q-input>
-                      </template>
-                    </datepicker>
-                  </div>
-
-                  <div class="col-12">
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
                     <q-input
-                      v-model="formData.details"
+                      ref="dateRef"
                       outlined
                       dense
-                      type="textarea"
-                      label="คำอธิบาย"
-                    />
-                  </div>
-                </div>
-
-                <q-separator />
-                <q-card-section class="text-right">
-                  <q-btn
-                    label="บันทึก"
-                    color="secondary"
-                    @click="onClickSubmit"
-                  >
-                    <q-tooltip>บันทึกข้อมูล</q-tooltip>
-                  </q-btn>
-                </q-card-section>
-              </q-card>
-            </div>
-          </div>
-
-          <div class="col-xs-12 col-md-3">
-            <q-card bordered style="border: 1px solid #d6dee1">
-              <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
-                อัปโหลดเอกสารอ้างอิง
-              </div>
-              <div class="col-12"><q-separator /></div>
-              <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
-                <div class="col-12 row">
-                  <q-file
-                    v-if="props.typeAction === 'edit'"
-                    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
-                        color="add"
-                        icon="mdi-upload"
-                        @click="uploadDocumentFile"
-                        ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
-                      >
-                    </template>
-                  </q-file>
-                </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
+                      hide-bottom-space
+                      :model-value="
+                        formData.date != null ? date2Thai(formData.date) : null
+                      "
+                      label="ให้ไว้ ณ วันที่"
+                      :rules="[
+                        (val) =>
+                          !!val || `${'กรุณาเลือกวันที่ ให้ไว ณ วันที่'}`,
+                      ]"
+                      lazy-rules
                     >
-                      <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>
-                            <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>
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
               </div>
-            </q-card>
+
+              <div class="col-xs-12 col-md-4">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formData.startDate"
+                  :locale="'th'"
+                  autoApply
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                  @update:model-value="checkEndDate"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      ref="startDateRef"
+                      outlined
+                      dense
+                      hide-bottom-space
+                      :model-value="
+                        formData.startDate != null
+                          ? date2Thai(formData.startDate)
+                          : null
+                      "
+                      label="วันที่มีผลบังคับใช้"
+                      :rules="[
+                        (val) => !!val || `${'กรุณาเลือกวันที่มีผลบังคับใช้'}`,
+                      ]"
+                      lazy-rules
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+
+              <div class="col-xs-12 col-md-4">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formData.endDate"
+                  :locale="'th'"
+                  autoApply
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                  :min-date="formData.startDate"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      ref="endDateRef"
+                      outlined
+                      dense
+                      hide-bottom-space
+                      :model-value="
+                        formData.endDate != null
+                          ? date2Thai(formData.endDate)
+                          : null
+                      "
+                      label="วันที่สิ้นสุดบังคับใช้"
+                      :rules="[
+                        (val) =>
+                          !!val || `${'กรุณาเลือกวันที่สิ้นสุดบังคับใช้'}`,
+                      ]"
+                      lazy-rules
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+
+              <div class="col-12">
+                <q-input
+                  v-model="formData.details"
+                  outlined
+                  dense
+                  type="textarea"
+                  label="คำอธิบาย"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </q-card-section>
+      <q-separator />
+      <div class="text-right q-ma-sm">
+        <q-btn label="บันทึก" color="secondary" @click="onClickSubmit">
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+        </q-btn>
+      </div>
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/13_salary/components/SalaryChart/DialogUpload.vue b/src/modules/13_salary/components/SalaryChart/DialogUpload.vue
index e69de29bb..dffb98a71 100644
--- a/src/modules/13_salary/components/SalaryChart/DialogUpload.vue
+++ b/src/modules/13_salary/components/SalaryChart/DialogUpload.vue
@@ -0,0 +1,387 @@
+<script setup lang="ts">
+import {  ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import axios from "axios";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  ObjectSalaryRef,
+} from "@/modules/13_salary/interface/index/Main";
+
+
+import Header from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogRemove,
+} = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  typeAction: {
+    type: String,
+    required: true,
+  },
+  id: {
+    type: String,
+    defult: '',
+  },
+  fetchData: {
+    type: Function,
+    defult: () => {},
+  },
+});
+
+const salaryId = ref<string>("");
+const formData = reactive({
+  salaryType: "", //*ประเภทผัง (OFFICER->"ข้าราชการกรุงเทพมหานครสามัญ",EMPLOYEE->"ลูกจ้างประจำกรุงเทพมหานคร")
+  posTypeId: "", //*ประเภทของตำแหน่ง
+  posLevelId: "", //*ระดับของตำแหน่ง
+  isActive: false, //*สถานะการใช้งาน
+  date: null, //ให้ไว้ ณ วันที่
+  startDate: null, //วันที่มีผลบังคับใช้
+  endDate: null, //วันที่สิ้นสุดบังคับใช้
+  details: "", //คำอธิบาย
+  isSpecial: false,
+});
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const salaryTypeRef = ref<Object | null>(null);
+const posTypeRef = ref<Object | null>(null);
+const posLevelRef = ref<Object | null>(null);
+const dateRef = ref<Object | null>(null);
+const startDateRef = ref<Object | null>(null);
+const endDateRef = ref<Object | null>(null);
+
+const ObjectRef: ObjectSalaryRef = {
+  salaryType: salaryTypeRef,
+  posTypId: posTypeRef,
+  posLevelId: posLevelRef,
+  date: dateRef,
+  startDate: startDateRef,
+  endDate: endDateRef,
+};
+
+
+
+const documentFile = ref<any>(null);
+const itemsDocument = ref<any>([]);
+
+
+
+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) => {})
+    .finally(()=>{
+        hideLoader()
+    })
+}
+
+watch(
+  () => modal.value,
+  async () => {
+    if (modal.value) {
+      if (props.typeAction === "edit") {
+        await showLoader();
+        if (props.id) {
+          salaryId.value = props.id;
+          await fetchDocumentFile(props.id);
+        }
+      }
+    }
+  }
+);
+
+function closeDialog() {
+  modal.value = !modal.value;
+  clearFormData();
+}
+
+function clearFormData() {
+  formData.salaryType = "";
+  formData.posTypeId = "";
+  formData.posLevelId = "";
+  formData.isSpecial = false;
+  formData.isActive = false;
+  formData.date = null;
+  formData.startDate = null;
+  formData.endDate = null;
+  formData.details = "";
+  documentFile.value = null;
+  itemsDocument.value = [];
+}
+
+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() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    try {
+      const url =
+        props.typeAction === "add"
+          ? config.API.salaryChart
+          : config.API.salaryChartByid(salaryId.value);
+      await http[props.typeAction === "add" ? "post" : "put"](url, formData);
+      success($q, "บันทีกข้อมูลสำเร็จ");
+      props.fetchData?.();
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
+      closeDialog();
+    }
+  });
+}
+
+async function uploadDocumentFile() {
+  const fileName = documentFile.value.name.replace(/\.(xlsx|docx|pdf)$/, "");
+  showLoader();
+  const formData = new FormData();
+  formData.append("file", documentFile.value);
+  const body = {
+    replace: false,
+    fileList: {
+      fileName: fileName,
+    },
+  };
+  await http
+    .post(config.API.salaryChartFile(salaryId.value), body)
+    .then((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);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+/**
+ * function อัปโหลดไฟล์
+ * @param url link อัปโหลด
+ */
+function fileUpLoad(url: string) {
+  axios
+    .put(url, documentFile.value, {
+      headers: { "Content-Type": documentFile.value?.type },
+      onUploadProgress: (e) => console.log(e),
+    })
+    .then(() => {
+      success($q, "อัปโหลดไฟล์สำเร็จ");
+      documentFile.value = null;
+      fetchDocumentFile(salaryId.value);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+
+function onClickDeleteFile(fileName: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.salaryChartDelFile(salaryId.value, fileName))
+      .then(() => {
+        setTimeout(() => {
+          fetchDocumentFile(salaryId.value);
+          success($q, "ลบไฟล์สำเร็จ");
+        }, 1000);
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        setTimeout(() => {
+          hideLoader();
+        }, 1000);
+      });
+  });
+}
+
+async function onClickDonwload(fileName: string) {
+  showLoader();
+  await http
+    .get(config.API.salaryChartDelFile(salaryId.value, fileName))
+    .then((res) => {
+      const data = res.data;
+      downloadFile(data.downloadUrl, data.fileType, fileName);
+    })
+    .catch((err) => {
+      messageError($q, err);
+      hideLoader();
+    });
+}
+
+/**
+ * function เรียกไฟล์ PDF
+ * @param url  link PDF
+ * @param type  ประเภทไฟล์
+ * @param fileName  ชือไฟล์
+ */
+async function downloadFile(url: string, type: string, fileName: string) {
+  await axios
+    .get(url, {
+      method: "GET",
+      responseType: "blob",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: type, // ถ้ามีการระบุเมื่ออัปโหลด
+      },
+    })
+    .then(async (res) => {
+      const a = document.createElement("a");
+      a.href = window.URL.createObjectURL(res.data);
+      a.download = fileName;
+      a.click();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 80%">
+      <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">
+                    <q-file
+                      v-if="props.typeAction === 'edit'"
+                      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
+                          color="add"
+                          icon="mdi-upload"
+                          @click="uploadDocumentFile"
+                          ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
+                        >
+                      </template>
+                    </q-file>
+                  </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>
+                              <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>
+      </q-card-section>
+
+
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/modules/13_salary/views/salaryChart.vue b/src/modules/13_salary/views/salaryChart.vue
index 2c57a3d1c..ca827071c 100644
--- a/src/modules/13_salary/views/salaryChart.vue
+++ b/src/modules/13_salary/views/salaryChart.vue
@@ -13,7 +13,7 @@ import type {
 } 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*/
@@ -33,7 +33,8 @@ const {
 
 /** modalDialog*/
 const modalDialogFormMain = ref<boolean>(false);
-
+const modalUpload = ref<boolean>(false);
+const rowId = ref<string>('')
 /** Table*/
 const rows = ref<Salary[]>([]);
 const columns = ref<QTableProps["columns"]>([
@@ -99,6 +100,12 @@ const itemMenu = ref<ItemsMenu[]>([
     color: "edit",
     type: "edit",
   },
+  {
+    label: "อัปโหลดเอกสารอ้างอิง",
+    icon: "mdi-upload",
+    color: "teal",
+    type: "upload",
+  },
   {
     label: "อัตราเงินเดือน",
     icon: "mdi-format-list-bulleted-triangle",
@@ -203,6 +210,12 @@ async function onClickDelete(id: string) {
   });
 }
 
+async function onClickUpload(type: string,id: string) {
+  modalUpload.value = true
+  typeAction.value = type;
+  rowId.value = id
+}
+
 onMounted(async () => {
   await fetchListSalaly();
 });
@@ -320,7 +333,7 @@ async function filterFn(page: number) {
                 size="12px"
               >
                 <q-menu>
-                  <q-list dense style="min-width: 150px">
+                  <q-list dense style="min-width: 200px">
                     <q-item
                       v-for="(item, index) in itemMenu"
                       :key="index"
@@ -331,6 +344,8 @@ async function filterFn(page: number) {
                           ? onClickSalary('edit', props.row)
                           : item.type === 'salaryRate'
                           ? onClickSalaryRate(props.row.id)
+                          : item.type === 'upload'
+                          ? onClickUpload('edit',props.row.id)
                           : item.type === 'copy'
                           ? onClickCoppy(props.row.id)
                           : item.type === 'delete'
@@ -377,6 +392,12 @@ async function filterFn(page: number) {
     :data="dataRow"
     :fetchData="fetchListSalaly"
   />
+  <DialogFormUpload
+    v-model:modal="modalUpload"
+    :typeAction="typeAction"
+    :id="rowId"
+    :fetchData="fetchListSalaly"
+  />
 </template>
 
 <style scoped></style>