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

<script setup lang="ts">
import { ref,defineProps } 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";

const $q = useQuasar(); //ใช้ noti quasar
const mixin = useCounterMixin();
const { messageError, dialogConfirm, showLoader, hideLoader, success } = 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) {
  dialogConfirm(
    $q,
    async () => {
      const selectedFile = event;
      const formdata = new FormData();
      formdata.append("Document", selectedFile);
      // await http
      //   .put(config.API.uploadfileOnlyInsignia(requestId.value), formdata)
      //   .then(async () => {
      //     await fecthInsigniaByOc(
      //       round.value,
      //       DataStore.agency,
      //       "officer",
      //       tab.value
      //     );
      //     success($q, "อัปโหลดไฟล์สำเร็จ");
      //     fileUpload.value = null;
      //   })
      //   .catch((err) => {
      //     messageError($q, err);
      //   }),
    },
    "ยืนยันการอัปโหลดไฟล์",
    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
  );
}

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 + "หรือไม่?"
  );
}

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

<template>
  <div class="row col-12 q-pa-md">
    <q-toolbar>
      <q-file
        v-if="sendStep == 1"
        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>

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

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