hrms-mgt/src/modules/15_development/views/RecordPage.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router";

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";

import type { ResRecord } from "@/modules/15_development/interface/response/Main";

import Record from "@/modules/15_development/components/Record.vue";
import DialogRecordPerson from "@/modules/15_development/components/DialogRecordPerson.vue";

/**
 * use
 */
const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const store = useDevelopmentDataStore();
const { showLoader, hideLoader, messageError, dialogConfirm, success } =
  useCounterMixin();

/**
 * ตัวแปร
 */
const projectId = ref<string>(route.params.id.toLocaleString()); //id route
const tab = ref<string>("IN"); //tab
const title = ref<string>(""); // หัวข้อ
const isLoadPage = ref<boolean>(false); // เช็คโหลดหน้า
const files = ref<any>(null); // ไฟล์
const listPerson = ref<ResRecord[]>([]); // ตัวแปร เก็บบุคคล
const modalAddPerson = ref<boolean>(false); // ตัวแปร dialog เพิ่มบุคคล

/**
 * function fetch ข้อมูลเบื้องต้น
 * @param id ProjectId
 */
function fetchData(id: string) {
  showLoader();
  http
    .get(config.API.developmentMainTab("tab1", id))
    .then(async (res) => {
      title.value = res.data.result.projectName;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 *  function เรียกข้อมูลรายชื่อทั้งหมด
 */
function fetchDataProject() {
  isLoadPage.value = false;
  showLoader();
  http
    .get(config.API.developmentMainTab("tab6", projectId.value))
    .then(async (res) => {
      listPerson.value = await res.data.result;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
      isLoadPage.value = true;
    });
}

/**
 *  function อัปโหลดไฟล์
 * @param file ไฟล์
 */
function clickUpload(file: any) {
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      const selectedFile = file;
      const formData = new FormData();
      formData.append("file", selectedFile);
      await http
        .post(config.API.developmentMainTab("tab6", projectId.value), formData)
        .then(async () => {
          await fetchDataProject();
          await success($q, "อัปโหลดไฟล์สำเร็จ");
          files.value = null;
        })
        .catch((err) => {
          messageError($q, err);
          showLoader();
        });
    },
    "ยืนยันการอัปโหลดไฟล์",
    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
  );
}

/**
 *  function ส่งไปบันทึกที่ทะเบียนประวัติ
 */
function sendRecordRegistry() {
  dialogConfirm(
    $q,
    () => {
      showLoader();
      http
        .get(config.API.developmentMainTab("tab6/done", projectId.value))
        .then(async () => {
          await fetchDataProject();
          await success($q, "ส่งข้อมูลสำเร็จ");
        })
        .catch((e) => {
          messageError($q, e);
          hideLoader();
        });
    },
    "ยืนยันการส่งข้อมูลไปบันทึกยังทะเบียนประวัติ",
    "ต้องการยืนยันการส่งข้อมูลไปบันทึกยังทะเบียนประวัติหรือไม่"
  );
}

/**
 * function  ดาวน์โหลดไฟล์ต้นแบบ
 */
function downloadFile() {
  const link = document.createElement("a");
  link.href = `${window.location.protocol}//${window.location.host}/default-บันทึกผล.xlsx`;
  link.download = "default-บันทึกผล.xlsx";
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

onMounted(() => {
  fetchDataProject();
  fetchData(projectId.value);
  store.projectStatus = "FINISH";
});
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">
    <q-btn
      flat
      round
      dense
      class="q-mr-sm"
      icon="mdi-arrow-left"
      color="primary"
      @click="router.go(-1)"
    />
    {{ `บันทึกผู้ผ่านการอบรม ${title}` }}
  </div>
  <q-card flat bordered>
    <q-toolbar class="q-pa-md">
      <q-file
        v-model="files"
        dense
        label="อัปโหลดไฟล์"
        outlined
        accept=".xlsx"
        hide-bottom-space
        clearable
        class="col-xs-12 col-sm-4"
      >
        <template v-slot:prepend>
          <q-icon name="attach_file" color="blue" />
        </template>
      </q-file>
      <q-btn
        v-if="files"
        size="md"
        icon="mdi-upload"
        round
        flat
        color="blue"
        @click="clickUpload(files)"
      >
        <q-tooltip>อัปโหลดไฟล์</q-tooltip>
      </q-btn>
      <q-btn
        size="md"
        icon="mdi-download"
        round
        flat
        color="green"
        @click="downloadFile"
      >
        <q-tooltip>ดาวน์โหลดไฟล์ต้นแบบ</q-tooltip>
      </q-btn>
      <q-btn
        v-if="listPerson.length > 0"
        size="md"
        icon="mdi-clipboard-account-outline"
        round
        flat
        color="public"
        @click="sendRecordRegistry()"
      >
        <q-tooltip>ส่งไปบันทึกที่ทะเบียนประวัติ</q-tooltip>
      </q-btn>
      <q-space />
      <q-btn
        flat
        round
        dense
        icon="add"
        color="primary"
        @click="modalAddPerson = true"
      >
        <q-tooltip>เพิ่มรายชื่อผู้ผ่านการอบรม</q-tooltip>
      </q-btn>
    </q-toolbar>
  </q-card>

  <q-card flat bordered class="q-mt-sm">
    <q-tabs
      v-model="tab"
      dense
      align="left"
      inline-label
      class="rounded-borders"
      indicator-color="primary"
      active-bg-color="teal-1"
      active-class="text-primary"
    >
      <q-tab name="IN" label="รายชื่อที่อยู่ในทะเบียนประวัติ" />
      <q-tab name="OUT" label="รายชื่อบุคคลภายนอก" />
    </q-tabs>
    <q-separator />
    <div class="q-pa-sm" style="padding: 0px" v-if="isLoadPage">
      <q-tab-panels v-model="tab" animated>
        <q-tab-panel name="IN">
          <Record :isProfile="true" :listPerson="listPerson" />
        </q-tab-panel>
        <q-tab-panel name="OUT">
          <Record :isProfile="false" :listPerson="listPerson" />
        </q-tab-panel>
      </q-tab-panels>
    </div>
  </q-card>

  <DialogRecordPerson
    v-model:modal="modalAddPerson"
    v-model:tab="tab"
    :fetchData="fetchDataProject"
  />
</template>

<style scoped></style>