hrms-user/src/modules/06_evaluate/components/step/step5.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import config from "@/app.config";
import http from "@/plugins/http";
import { useQuasar } from "quasar";

import { useCounterMixin } from "@/stores/mixin";

const mixins = useCounterMixin();
const $q = useQuasar();
const { date2Thai, success } = mixins;

const props = defineProps({
  evaluateId: {
    type: String,
  },
});

const dateStartAnnounce = ref<string | null>(date2Thai(new Date()));
const dateEndAnnounce = ref<string | null>(date2Thai(new Date()));

const items = ref<any>([
  {
    label: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
    fileName: "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
  },
  {
    label: "ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)",
    fileName: "10-ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)",
  },
  {
    label: "เอกสารแสดงผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
    fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
  },
]);

const statusFile = ref<boolean>(false);

async function onClickfetchDocument(fileName: string, type: string) {
  props.evaluateId &&
    (await http
      .get(config.API.loadFileDocument("เล่ม 1", props.evaluateId, fileName))
      .then((res) => {
        const downloadUrl = res.data.downloadUrl;
        type === "COPPY" && coppyLink(downloadUrl);
        statusFile.value = true;
      })
      .catch((err) => {}));
}

async function coppyLink(link: string) {
  const textarea = document.createElement("textarea");
  textarea.value = link;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  success($q, "คัดลอกลิ้งค์สำเร็จ");
}

async function fetchCheckDate() {
  props.evaluateId &&
    (await http
      .get(config.API.evaluationCheckDate(props.evaluateId))
      .then((res) => {
        const data = res.data.result;
        dateStartAnnounce.value = date2Thai(data.dateStartAnnounce);
        dateEndAnnounce.value = date2Thai(data.dateStartAnnounce);
      })
      .catch((err) => {}));
}

onMounted(async () => {
  fetchCheckDate();
  await onClickfetchDocument("บันทึกแจ้งผลการประกาศคัดเลือก", "CHECK");
});
</script>

<template>
  <div class="row q-gutter-md">
    <div class="col-12 text-center">
      <q-banner class="text-weight-bold text-red-14 bg-red-2">
        <div class="text-weight-bold">
          <q-icon name="info_outline" color="red-14" size="24px" />
          ประกาศเมื่อวันที่ {{ dateStartAnnounce }} ถึง {{ dateEndAnnounce }}
        </div>
      </q-banner>
      <!-- <q-badge
        v-if="status == 'ANNOUNCE_WEB'"
        outline
        color="primary"
        label="ประกาศบนเว็บไซต์"
        class="q-pa-sm"
        style="font-size: 16px"
      />
      <div> -->
      <!-- <a :href="website" target="_blank">{{ website }}</a> -->
      <!-- </div> -->
    </div>

    <div class="col-12">
      <q-card bordered style="border: 1px solid #d6dee1">
        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
          เอกสารประกาศผลการคัดเลือกบุคคล
        </div>
        <div class="col-12"><q-separator /></div>
        <div class="row q-pa-md">
          <div class="col-12">
            <q-list>
              <q-item v-for="(item, index) in items" :key="index">
                <q-item-section>
                  <q-item-label>{{ item.label }}</q-item-label>
                </q-item-section>

                <q-item-section side top>
                  <q-btn
                    flat
                    round
                    color="primary"
                    icon="mdi-clipboard-outline"
                    @click="onClickfetchDocument(item.fileName, 'COPPY')"
                  >
                    <q-tooltip>คัดลอกลิ้งค์</q-tooltip>
                  </q-btn>
                </q-item-section>
              </q-item>
            </q-list>
          </div>
        </div>
      </q-card>
    </div>

    <div class="col-12" v-if="statusFile">
      <q-card bordered style="border: 1px solid #d6dee1">
        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
          บันทึกแจ้งผลการประกาศคัดเลือก
        </div>
        <div class="col-12"><q-separator /></div>
        <div class="row q-pa-md">
          <div class="col-12">
            <q-list>
              <q-item>
                <q-item-section>
                  <q-item-label>บันทึกแจ้งผลการประกาศคัดเลือก</q-item-label>
                </q-item-section>

                <q-item-section side top>
                  <q-btn
                    flat
                    round
                    color="primary"
                    icon="mdi-clipboard-outline"
                    @click="
                      onClickfetchDocument(
                        'บันทึกแจ้งผลการประกาศคัดเลือก',
                        'COPPY'
                      )
                    "
                  >
                    <q-tooltip>คัดลอกลิ้งค์</q-tooltip>
                  </q-btn>
                </q-item-section>
              </q-item>
            </q-list>
          </div>
        </div>
      </q-card>
    </div>
  </div>
</template>

<style scoped></style>