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

<script setup lang="ts">
import { ref } from "vue";

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

const mixins = useCounterMixin();
const { date2Thai } = mixins;
const status = ref<string>("ANNOUNCE_WEB");
const website = ref<string>("https://bma-ehr.frappet.com/");
const AnnouncementDate = ref<string | null>(date2Thai(new Date()));

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

function copyLink(link: string) {
  console.log(`Copying link  ${link}`);
  const textarea = document.createElement("textarea");
  textarea.value = link;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
}
</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" />
          ประกาศเมื่อวันที่ {{ AnnouncementDate }}
        </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="copyLink(item.label)"
                  >
                    <q-tooltip>คัดลอกลิ้งค์</q-tooltip>
                  </q-btn>
                </q-item-section>
              </q-item>
            </q-list>
          </div>
        </div>
      </q-card>
    </div>
  </div>
</template>

<style scoped></style>