hrms-user/src/modules/13_portfolio/views/Add.vue

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

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";

const $q = useQuasar();
const router = useRouter();
const mixin = useCounterMixin();
const { success, messageError, showLoader, hideLoader, dialogConfirm } = mixin;

/** ตัวแปรที่ใช้งาน */
const route = useRoute();
const files = ref<any>();
const name = ref<string>("");
const detail = ref<string>("");
const id = ref<string>("");
const routeName = router.currentRoute.value.name;
const fileList = ref<any[]>([]);

const isLoading = ref<boolean>(false);
const isLoadingFile = ref<boolean>(false);

/**
 * ฟังก์ชั่นเรียกข้อมูลจาก Api
 * @param id ไอดีของข้อมูล
 */
async function fetchData(id: string) {
  isLoading.value = true;
  await http
    .get(config.API.portfolioId(id))
    .then(async (res) => {
      let data = res.data.result;
      name.value = data.name;
      detail.value = data.detail;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      isLoading.value = false;
    });
}

/** ฟังก์ชั่นรายการเอกสาร */
async function fetchFile() {
  isLoadingFile.value = true;
  await http
    .get(config.API.file("ระบบผลงาน", "เอกสารผลงาน", id.value))
    .then((res) => {
      fileList.value = res.data;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      isLoadingFile.value = false;
    });
}

function onSubmit() {
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      await http
        .post(config.API.portfolio, { name: name.value, detail: detail.value })
        .then(async (res) => {
          await uploadFiles(res.data.result);
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
    },
    "ยืนยันการบันทึกข้อมูล",
    "ต้องการยืนยันการบันทึกข้อมูลใช่หรือไม่"
  );
}

/**
 * ฟังก์ชั่นอัปโหลดไฟล์
 * @param id ผลงาน
 */
async function uploadFiles(id: string) {
  await http
    .post(config.API.file("ระบบผลงาน", "เอกสารผลงาน", id), {
      replace: true,
      fileList: [
        {
          fileName: files.value.name,
        },
      ],
    })
    .then(async (res) => {
      const foundKey: string | undefined = Object.keys(res.data).find(
        (key) =>
          res.data[key]?.fileName !== undefined &&
          res.data[key]?.fileName !== ""
      );
      foundKey && (await uploadFileURL(res.data[foundKey]?.uploadUrl));
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/**
 * ฟังก์ชั่นบันทึกไฟล์
 * @param uploadUrl บันทึกไฟล์
 */
async function uploadFileURL(uploadUrl: string) {
  const Data = new FormData();
  Data.append("file", files.value);
  await axios
    .put(uploadUrl, files.value, {
      headers: {
        "Content-Type": files.value.type,
      },
    })
    .then(() => {
      success($q, "บันทึกข้อมูลสำเร็จ");
      router.push(`/portfolio`);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      files.value = null;
    });
}

/**
 * ฟังก์ชั่นดาว์โหลดอัปโหลดไฟล์
 * @param fileName ชื่อไฟล์
 */
function fileOpen(fileName: string) {
  showLoader();
  http
    .get(config.API.fileByFile("ระบบผลงาน", "เอกสารผลงาน", id.value, fileName))
    .then((res) => {
      const data = res.data.downloadUrl;
      window.open(data, "_blank");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      hideLoader();
    });
}

/** Hook Lifecycle ที่ทำงานเมื่อ component ถูก mount*/
onMounted(async () => {
  if (route.params.id !== undefined) {
    id.value = route.params.id.toString();
    await Promise.all([fetchData(id.value), fetchFile()]);
  }
});
</script>

<template>
  <div class="col-12 row justify-center">
    <div class="col-xs-12 col-sm-12 col-md-11">
      <div class="toptitle text-white col-12 row items-center">
        <q-btn
          icon="mdi-arrow-left"
          unelevated
          round
          dense
          flat
          color="primary"
          class="q-mr-sm"
          @click="router.push('/portfolio')"
        />
        <div v-if="routeName == 'addTransfer'">เพิ่มเอกสาร/ผลงาน</div>
        <div v-else>รายละเอียดเอกสาร/ผลงาน</div>
      </div>
      <q-form
        class="col-12"
        greedy
        @submit.prevent
        @validation-success="onSubmit"
      >
        <q-card bordered v-if="isLoading">
          <div class="q-pa-md">
            <div class="q-gutter-md">
              <q-skeleton height="40px" />
              <q-skeleton height="150px" />
            </div>
          </div>
        </q-card>
        <q-card bordered v-else>
          <div class="col-12 row q-col-gutter-md q-pa-md">
            <div class="col-xs-12 col-sm-12">
              <div class="col-12 row q-pa-sm q-col-gutter-sm">
                <q-input
                  :class="
                    routeName != 'addPortfolio' ? 'col-12' : 'col-12 inputgreen'
                  "
                  dense
                  outlined
                  v-model="name"
                  hide-bottom-space
                  label="ชื่อเอกสาร/ผลงาน"
                  :readonly="routeName != 'addPortfolio'"
                  :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อเอกสาร/ผลงาน'}`]"
                />
                <q-input
                  :class="
                    routeName != 'addPortfolio' ? 'col-12' : 'col-12 inputgreen'
                  "
                  dense
                  outlined
                  v-model="detail"
                  label="รายละเอียดเอกสาร/ผลงาน"
                  hide-bottom-space
                  type="textarea"
                  :readonly="routeName != 'addPortfolio'"
                  :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดเอกสาร/ผลงาน'}`]"
                />
                <div class="col-12 row" v-if="routeName == 'addPortfolio'">
                  <q-file
                    v-model="files"
                    class="col-xs-12 col-sm-12 inputgreen"
                    outlined
                    dense
                    lazy-rules
                    hide-bottom-space
                    accept=".pdf, .docx, .doc, .xlsx, .xls"
                    :rules="[
                      (val:string) => !!val || 'กรุณาเลือกไฟล์เอกสาร/ผลงาน',
                    ]"
                    label="เอกสาร/ผลงาน"
                  >
                    <template v-slot:prepend>
                      <q-icon name="attach_file" /> </template
                  ></q-file>
                </div>

                <div class="col-12 row" v-if="routeName != 'addPortfolio'">
                  <q-card bordered flat class="full-width">
                    <div
                      class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
                    >
                      <div class="q-pl-sm text-weight-bold text-dark">
                        เอกสาร/ผลงาน
                      </div>
                    </div>
                    <q-separator />
                    <q-skeleton v-if="isLoadingFile" type="QSlider" />
                    <q-list v-else separator>
                      <q-item v-for="file in fileList" :key="file.key">
                        <q-item-section>
                          {{ file.fileName }}
                        </q-item-section>
                        <q-item-section avatar>
                          <q-btn
                            color="blue"
                            round
                            flat
                            icon="mdi-download"
                            @click="fileOpen(file.fileName)"
                          ></q-btn>
                        </q-item-section>
                      </q-item>
                    </q-list>
                  </q-card>
                </div>
              </div>
            </div>
          </div>
          <q-separator v-if="routeName == 'addPortfolio'" />
          <q-card-actions
            align="right"
            class="row col-12"
            v-if="routeName == 'addPortfolio'"
          >
            <q-space />
            <q-btn
              unelevated
              class="q-px-md items-center"
              color="primary"
              label="บันทึก"
              type="onsubmit"
            />
          </q-card-actions>
        </q-card>
      </q-form>
    </div>
  </div>
</template>