hrms-mgt/src/modules/13_salary/components/SalaryLists/ProcessStep.vue

<script setup lang="ts">
import { ref, defineProps,onMounted } from "vue";
import { useQuasar } from "quasar";

import http from "@/plugins/http";
import config from "@/app.config";
import DialogPopupReason from "@/components/Dialogs/PopupReason.vue"; //หมายเหตุ
import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
const store = useSalaryListSDataStore();
import { useCounterMixin } from "@/stores/mixin";
import axios from "axios";

const modalRecommend = ref<boolean>(false);
const titleRecommend = ref<string>("");
const listFile = ref<any>([])
const $q = useQuasar(); //ใช้ noti quasar
const mixin = useCounterMixin();
const { messageError, dialogConfirm, showLoader, hideLoader, success,dialogRemove } = mixin;
const type = ref<string>("");
const sendStep = ref<number>(1);
const fileUpload = ref<any>(null);
const document = ref<string>("");
const props = defineProps({
  rootId: String,
  periodId: String,
  getData: Function,
});
/**
 * function อัปโหลดไฟล์เจ้าหน้าที่
 * @param event file
 */
async function uploadFile(event: any) {
  const fileName = { fileName: event.name };

  dialogConfirm(
    $q,
    async () => {
      const selectedFile = event;
      const formdata = new FormData();
      formdata.append("Document", selectedFile);
      http
        .post(
          config.API.subFile(
            "ระบบเงินเดือน",
            "เลื่อนเงินเดือน",
            props.periodId ? props.periodId : "",
            props.rootId ? props.rootId : ""
          ),
          {
            replace: false, //อัพทับที่เดิมไหม
            fileList: fileName,
          }
        )
        .then(async (res) => {
          const foundKey: string | undefined = Object.keys(res.data).find(
            (key) =>
              res.data[key]?.fileName !== undefined &&
              res.data[key]?.fileName !== ""
          );
          foundKey && uploadfile(res.data[foundKey]?.uploadUrl, fileUpload.value);
        })
        .catch((err) => {
          messageError($q, err);
        });
    },
    "ยืนยันการอัปโหลดไฟล์",
    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
  );
}

/**
 *  functoin อัปโหลดไฟล์
 * @param uploadUrl  link อัปโหลด
 * @param file  ไฟล์
 */
async function uploadfile(uploadUrl: string, file: any) {
  showLoader();
  await axios
    .put(uploadUrl, file, {
      headers: {
        "Content-Type": file.type,
      },
    })
    .then(() => {
      getListFile();
      success($q, "อัปโหลไฟล์สำเร็จ");
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

function getListFile() {
  http
    .get(
      config.API.subFile(
        "ระบบเงินเดือน",
        "เลื่อนเงินเดือน",
        props.periodId ? props.periodId : "",
        props.rootId ? props.rootId : ""
      )
    )
    .then((res) => {
      listFile.value = res.data
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {});
}

function saveReccommend(reason: string) {
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      http
        .put(
          config.API.salaryPeriodStatusComment(
            type.value,
            props.periodId ? props.periodId : "",
            props.rootId ? props.rootId : ""
          ),
          {
            titleRecommend: reason,
          }
        )
        .then((res) => {
          props.getData?.();
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
      sendStep.value = sendStep.value + 1;
      modalRecommend.value = false;
    },
    "ยืนยันการ" + titleRecommend.value,
    "ต้องการยืนยันการ" + titleRecommend.value + "หรือไม่?"
  );
}

function sendToDirector(msg: string, type: string) {
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      http
        .get(
          config.API.salaryPeriodStatus(
            type,
            props.periodId ? props.periodId : "",
            props.rootId ? props.rootId : ""
          )
        )
        .then((res) => {
          props.getData?.();
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
    },
    "ยืนยันการ" + msg,
    "ต้องการยืนยันการ" + msg + "หรือไม่?"
  );
}

function downloadFile(fileName: string) {
  showLoader();
  http
    .get(
      config.API.subFileByFileName(
        "ระบบเงินเดือน",
        "เลื่อนเงินเดือน",
        props.periodId ? props.periodId : "",
        props.rootId ? props.rootId : "",
        fileName
      )
    )
    .then((res) => {
      const data = res.data.downloadUrl;
      window.open(data, "_blank");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      hideLoader();
    });
}

function deleteFile(fileName: string) {
  dialogRemove($q, () => {
    showLoader();
    http
      .delete(
        config.API.subFileByFileName(
          "ระบบเงินเดือน",
          "เลื่อนเงินเดือน",
          props.periodId ? props.periodId : "",
          props.rootId ? props.rootId : "",
          fileName
        )
      )
      .then(() => {
        success($q, "ลบไฟล์สำเร็จ");
        setTimeout(() => {
          getListFile();
          hideLoader();
        }, 1000);
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(async () => {});
  });
}

function sendAndRecommend(title: string, typeOrder: string) {
  modalRecommend.value = true;
  titleRecommend.value = title;
  type.value = typeOrder;
}

onMounted(()=>{
  getListFile()
})
</script>

<template>
  <div class="row col-12 q-pa-md">
    <q-toolbar class="q-pa-none">
      <q-file
        v-if="store.statusQuota == 'PENDING'"
        bg-color="white"
        clearable
        outlined
        dense
        v-model="fileUpload"
        accept=".pdf"
        label="อัปโหลดไฟล์"
      >
        <template v-slot:prepend>
          <q-icon color="light-blue" name="attach_file" />
          <q-tooltip>อัปโหลดไฟล์</q-tooltip>
        </template>
      </q-file>

      <q-btn
        flat
        color="light-blue"
        icon="upload"
        @click="uploadFile(fileUpload)"
        v-if="fileUpload !== null"
      />
      <div v-if="document">
        <q-btn
          dense
          color="primary"
          icon-right="mdi-download"
          label="ดาวน์โหลดไฟล์"
          outline
          :href="document"
          target="_blank"
        >
          <q-tooltip>ดาวน์โหลด</q-tooltip></q-btn
        >
      </div>

      <q-toolbar-title>
        <!-- Toolbar -->
      </q-toolbar-title>
      <div>
        <!-- การเจ้าหน้าที่ของหน่วยงานส่งเอกสารให้ ผอ. หน่วยงานตรวจสอบ -->
        <q-btn
          v-if="store.statusQuota == 'PENDING'"
          unelevated
          color="public"
          label="ส่งเอกสารให้ ผอ. ตรวจสอบ"
          @click="sendToDirector('ส่งเอกสารให้ ผอ. ตรวจสอบ', 'officer')"
        />

        <!-- ผอ. หน่วยงานทำการยืนยันและส่งให้ สกจ. -->
        <q-btn
          v-if="store.statusQuota == 'WAITHEAD1'"
          unelevated
          color="public"
          label="ยืนยันและส่งเอกสารให้ สกจ."
          @click="sendToDirector('ยืนยันและส่งเอกสารให้ สกจ.', 'head')"
        />

        <!-- สกจ. ตรวจสอบเอกสารและข้อมูลรายการเงินเดือนที่แต่ละหน่วยงานส่งมา ไม่มีปรับโควต้า -->
        <q-btn
          v-if="store.statusQuota == 'WAITOWNER1'"
          unelevated
          color="green"
          label="ยืนยันการตรวจสอบ"
          @click="sendToDirector('ยืนยันการตรวจสอบ', 'owner')"
        />

        <!-- สกจ. ตรวจสอบเอกสารและข้อมูลรายการเงินเดือนที่แต่ละหน่วยงานส่งมา มีปรับโควต้า -->
        <q-btn
          v-if="store.statusQuota == 'WAITOWNER1'"
          class="q-ml-sm"
          unelevated
          color="warning"
          label="ส่งคำแนะนำให้ ผอ. ตรวจสอบ"
          @click="sendAndRecommend('ส่งคำแนะนำให้ ผอ. ตรวจสอบ', 'owner')"
        />

        <!-- ผอ.หน่วยงานส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน -->
        <q-btn
          v-if="store.statusQuota == 'WAITHEAD2'"
          unelevated
          color="public"
          label="ส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน"
          @click="
            sendAndRecommend('ส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน', 'head')
          "
        />

        <q-btn
          v-if="store.statusQuota == 'WAITOFFICER2'"
          unelevated
          color="public"
          label="ส่งไปออกคำสั่ง"
        />
        <q-btn
          v-if="store.statusQuota == 'REPORT'"
          unelevated
          color="public"
          disable
          label="รอออกคำสั่ง"
        />
      </div>
    </q-toolbar>
    <div class="col-6" v-if="listFile.length !== 0">
      <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>
        <q-list bordered separator>
          <q-item clickable v-ripple v-for="item in listFile">
            <q-item-section>{{ item.fileName }}</q-item-section>
            <q-item-section avatar>
              <div class="row">
                <div>
                  <q-btn
                    dense
                    flat
                    round
                    size="12px"
                    color="blue"
                    icon="mdi-download-outline"
                    @click="downloadFile(item.fileName)"
                  >
                    <q-tooltip>ดาวน์โหลดเอกสาร</q-tooltip>
                  </q-btn>
                </div>
                <div>
                  <q-btn
                    dense
                    flat
                    round
                    size="12px"
                    color="red"
                    icon="mdi-delete-outline"
                    @click="deleteFile(item.fileName)"
                    ><q-tooltip>ลบเอกสาร</q-tooltip></q-btn
                  >
                </div>
              </div>
            </q-item-section>
          </q-item>
        </q-list>
      </q-card>
    </div>

    <DialogPopupReason
      v-model:modal="modalRecommend"
      :title="titleRecommend"
      label="คำแนะนำ"
      :savaForm="saveReccommend"
      textReport=""
    />
  </div>
</template>

<style lang="scss" scoped></style>