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

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

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

const sendStep = ref<number>(1);
const fileUpload = ref<any[]>([]);
const document = ref<string>("");
const type = ref<string>("");
/**
 * function อัปโหลดไฟล์เจ้าหน้าที่
 * @param event file
 */
async function uploadFile(event: any) {
  console.log(event);
  const fileName = event.map((e: any) => ({ fileName: e.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 () => {
          // 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.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 () => {})
    .catch((err) => {
      messageError($q, err);
    });
}
onMounted(() => {
  fetchListFile();
});
</script>

<template>
  <div class="row col-12 q-pa-md">
    <q-toolbar style="padding: 0px">
      <q-file
        v-if="sendStep == 1"
        bg-color="white"
        clearable
        outlined
        dense
        v-model="fileUpload"
        label="อัปโหลดไฟล์"
        multiple
      >
        <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-space />
      <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">
      <q-list bordered>
        <q-item clickable v-ripple>
          <q-item-section>Icon as avatar</q-item-section>
          <q-item-section avatar>
            <q-icon color="primary" name="bluetooth" />
          </q-item-section>
        </q-item>

        <q-item clickable v-ripple>
          <q-item-section>Avatar-type icon</q-item-section>
          <q-item-section avatar>
            <q-avatar color="teal" text-color="white" icon="bluetooth" />
          </q-item-section>
        </q-item>

        <q-item clickable v-ripple>
          <q-item-section>Rounded avatar-type icon</q-item-section>
          <q-item-section avatar>
            <q-avatar
              rounded
              color="purple"
              text-color="white"
              icon="bluetooth"
            />
          </q-item-section>
        </q-item>

        <q-item clickable v-ripple>
          <q-item-section>Letter avatar-type</q-item-section>
          <q-item-section avatar>
            <q-avatar color="primary" text-color="white"> R </q-avatar>
          </q-item-section>
        </q-item>
      </q-list>
    </div>
  </div>

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

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