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

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { checkPermission } from "@/utils/permissions";
import axios from "axios";

import http from "@/plugins/http";
import config from "@/app.config";
import DialogPopupReason from "@/components/Dialogs/PopupReason.vue"; //หมายเหตุ

import { useCounterMixin } from "@/stores/mixin";
import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";

const $q = useQuasar(); //ใช้ noti quasar
const mixin = useCounterMixin();
const store = useSalaryEmployeeListSDataStore();
const {
  messageError,
  dialogConfirm,
  showLoader,
  hideLoader,
  success,
  dialogRemove,
} = mixin;

const props = defineProps({
  rootId: String,
  periodId: String,
  getData: Function,
});

const sendStep = ref<number>(1);
const fileUpload = ref<any>(null);
const document = ref<string>("");
const type = ref<string>("");
const listFile = ref<any>([]);
/**
 * function อัปโหลดไฟล์เจ้าหน้าที่
 * @param event file
 */
async function uploadFile(event: any) {
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      http
        .post(
          config.API.subFile(
            "ระบบเงินเดือน",
            "เลื่อนค่าจ้าง",
            props.periodId ? props.periodId : "",
            props.rootId ? props.rootId : ""
          ),
          {
            replace: false, //อัพทับที่เดิมไหม
            fileList: [
              {
                fileName: event.name, //ชื่อไฟล์
              },
            ],
          }
        )
        .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);
        })
        .catch((err) => {
          messageError($q, err);
          hideLoader();
        });
    },
    "ยืนยันการอัปโหลดไฟล์",
    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
  );
}

function fileUpLoad(url: string) {
  axios
    .put(url, fileUpload.value, {
      headers: { "Content-Type": fileUpload.value?.type },
      onUploadProgress: (e) => console.log(e),
    })
    .then(() => {
      success($q, "อัปโหลดไฟล์สำเร็จ");
      fileUpload.value = null;
      fetchListFile();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

function saveReccommend(reason: string) {
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      http
        .put(
          config.API.salaryPeriodStatusCommentEmp(
            type.value,
            props.periodId ? props.periodId : "",
            props.rootId ? props.rootId : ""
          ),
          {
            titleRecommend: reason,
          }
        )
        .then((res) => {
          console.log(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.salaryPeriodStatusEmp(
            type,
            props.periodId ? props.periodId : "",
            props.rootId ? props.rootId : ""
          )
        )
        .then((res) => {
          console.log(res);
          props.getData?.();
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
      sendStep.value = sendStep.value == 3 ? 6 : sendStep.value + 1;
    },
    "ยืนยันการ" + msg,
    "ต้องการยืนยันการ" + msg + "หรือไม่?"
  );
}

const modalRecommend = ref<boolean>(false);
const titleRecommend = ref<string>("");
function sendAndRecommend(title: string, typeOrder: string) {
  modalRecommend.value = true;
  titleRecommend.value = title;
  type.value = typeOrder;
}

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

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

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;
      window.open(data.downloadUrl, "_blank");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      hideLoader();
    });
}
onMounted(() => {
  if (props.rootId) {
    fetchListFile();
  }
});
</script>

<template>
  <div class="row col-12 q-pa-md">
    <q-toolbar style="padding: 0px">
      <q-file
        v-if="
          store.statusQuota == 'PENDING' &&
          checkPermission($route)?.attrIsUpdate
        "
        bg-color="white"
        clearable
        outlined
        dense
        v-model="fileUpload"
        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"
      />

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

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

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

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

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

        <q-btn
          v-if="
            store.statusQuota == 'WAITOFFICER2' &&
            checkPermission($route)?.attrIsUpdate
          "
          unelevated
          color="public"
          label="ส่งไปออกคำสั่ง"
        />
        <q-btn
          v-if="
            store.statusQuota == 'REPORT' &&
            checkPermission($route)?.attrIsUpdate
          "
          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="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
                    v-if="checkPermission($route)?.attrIsGet"
                    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
                    v-if="checkPermission($route)?.attrIsDelete"
                    dense
                    flat
                    round
                    size="12px"
                    color="red"
                    icon="mdi-delete-outline"
                    @click="onDeleteFile(item.fileName)"
                    ><q-tooltip>ลบเอกสาร</q-tooltip></q-btn
                  >
                </div>
              </div>
            </q-item-section>
          </q-item>
        </q-list>
      </q-card>
    </div>
  </div>

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

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