hrms-user/src/modules/06_assess/components/step/step2.vue

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

const fileEvaluation1 = ref<any>();
const fileEvaluation2 = ref<any>();
const fileEvaluation3 = ref<any>();
const fileEvaluation4 = ref<any>();
const fileEvaluation5 = ref<any>();
const fileEvaluation6 = ref<any>();

const modalView = ref<boolean>(false);
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const pdfSrc = ref<any>();

function onClickViewPDF(file: any) {
  pdfSrc.value = file.webkitRelativePath;
  modalView.value = true;
}

/** ไปหน้าต่อไปของรายงาน */
function nextPage() {
  if (page.value < numOfPages.value) {
    page.value++;
  }
}

/** กลับหน้าก่อนหน้าของรายงาน */
function backPage() {
  if (page.value !== 1) {
    page.value--;
  }
}

async function onClickDowloadFile(tp: string, templateName: string) {
  const body = {
    template: tp,
    reportName: templateName,
    data: {
      fullName: "ใจดี จังนะ",
    },
  };
}
</script>

<template>
  <div class="row q-col-gutter-md">
    <!-- แบบพิจารณาคุณสมบัติบุคคล -->
    <div class="col-6">
      <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">
          <div class="col-12 q-pa-sm">
            <div class="row q-col-gutter-md col-12">
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  class="col-12"
                  outline
                  icon="download"
                  label="ดาวน์โหลดต้นแบบ"
                  color="primary"
                >
                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  v-if="fileEvaluation1"
                  class="col-12"
                  outline
                  icon="visibility"
                  label="ดูไฟล์เอกสาร"
                  color="primary"
                  @click="onClickViewPDF(fileEvaluation1)"
                >
                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-11 row">
                <q-file
                  v-model="fileEvaluation1"
                  class="col-12"
                  outlined
                  dense
                  hide-bottom-space
                  lazy-rules
                  accept=".pdf"
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" />
                  </template>
                </q-file>
              </div>
              <div class="col-1 self-center text-center">
                <q-btn flat round dense color="primary" icon="mdi-upload"
                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                >
              </div>
            </div>
          </div>
        </div>
      </q-card>
    </div>

    <!-- แบบแสดงรายละเอียดการเสนอผลงาน     -->
    <div class="col-6">
      <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">
          <div class="col-12 q-pa-sm">
            <div class="row q-col-gutter-md col-12">
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  class="col-12"
                  outline
                  icon="download"
                  label="ดาวน์โหลดต้นแบบ"
                  color="primary"
                  @click="onClickDowloadFile('EV1_005', 'template-2')"
                >
                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  v-if="fileEvaluation2"
                  class="col-12"
                  outline
                  icon="visibility"
                  label="ดูไฟล์เอกสาร"
                  color="primary"
                >
                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-11 row">
                <q-file
                  v-model="fileEvaluation2"
                  class="col-12"
                  outlined
                  dense
                  hide-bottom-space
                  lazy-rules
                  accept=".pdf"
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" />
                  </template>
                </q-file>
              </div>
              <div class="col-1 self-center text-center">
                <q-btn flat round dense color="primary" icon="mdi-upload"
                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                >
              </div>
            </div>
          </div>
        </div>
      </q-card>
    </div>

    <!-- แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล -->
    <div class="col-6">
      <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">
          <div class="col-12 q-pa-sm">
            <div class="row q-col-gutter-md col-12">
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  class="col-12"
                  outline
                  icon="download"
                  label="ดาวน์โหลดต้นแบบ"
                  color="primary"
                >
                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  v-if="fileEvaluation3"
                  class="col-12"
                  outline
                  icon="visibility"
                  label="ดูไฟล์เอกสาร"
                  color="primary"
                >
                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-11 row">
                <q-file
                  v-model="fileEvaluation3"
                  class="col-12"
                  outlined
                  dense
                  hide-bottom-space
                  lazy-rules
                  accept=".pdf"
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" />
                  </template>
                </q-file>
              </div>
              <div class="col-1 self-center text-center">
                <q-btn flat round dense color="primary" icon="mdi-upload"
                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                >
              </div>
            </div>
          </div>
        </div>
      </q-card>
    </div>

    <!-- แบบประเมินคุณลักษณะบุคคล -->
    <div class="col-6">
      <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">
          <div class="col-12 q-pa-sm">
            <div class="row q-col-gutter-md col-12">
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  class="col-12"
                  outline
                  icon="download"
                  label="ดาวน์โหลดต้นแบบ"
                  color="primary"
                >
                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  v-if="fileEvaluation4"
                  class="col-12"
                  outline
                  icon="visibility"
                  label="ดูไฟล์เอกสาร"
                  color="primary"
                >
                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-11 row">
                <q-file
                  v-model="fileEvaluation4"
                  class="col-12"
                  outlined
                  dense
                  hide-bottom-space
                  lazy-rules
                  accept=".pdf"
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" />
                  </template>
                </q-file>
              </div>
              <div class="col-1 self-center text-center">
                <q-btn flat round dense color="primary" icon="mdi-upload"
                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                >
              </div>
            </div>
          </div>
        </div>
      </q-card>
    </div>

    <!-- แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก -->
    <div class="col-6">
      <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">
          <div class="col-12 q-pa-sm">
            <div class="row q-col-gutter-md col-12">
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  class="col-12"
                  outline
                  icon="download"
                  label="ดาวน์โหลดต้นแบบ"
                  color="primary"
                >
                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  v-if="fileEvaluation5"
                  class="col-12"
                  outline
                  icon="visibility"
                  label="ดูไฟล์เอกสาร"
                  color="primary"
                >
                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-11 row">
                <q-file
                  v-model="fileEvaluation5"
                  class="col-12"
                  outlined
                  dense
                  hide-bottom-space
                  lazy-rules
                  accept=".pdf"
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" />
                  </template>
                </q-file>
              </div>
              <div class="col-1 self-center text-center">
                <q-btn flat round dense color="primary" icon="mdi-upload"
                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                >
              </div>
            </div>
          </div>
        </div>
      </q-card>
    </div>

    <!--ผลงานที่จะส่งประเมิน -->
    <div class="col-6">
      <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">
          <div class="col-12 q-pa-sm">
            <div class="row q-col-gutter-md col-12">
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  class="col-12"
                  outline
                  icon="download"
                  label="ดาวน์โหลดต้นแบบ"
                  color="primary"
                >
                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  v-if="fileEvaluation6"
                  class="col-12"
                  outline
                  icon="visibility"
                  label="ดูไฟล์เอกสาร"
                  color="primary"
                >
                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-11 row">
                <q-file
                  v-model="fileEvaluation6"
                  class="col-12"
                  outlined
                  dense
                  hide-bottom-space
                  lazy-rules
                  accept=".pdf"
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" />
                  </template>
                </q-file>
              </div>
              <div class="col-1 self-center text-center">
                <q-btn flat round dense color="primary" icon="mdi-upload"
                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                >
              </div>
            </div>
          </div>
        </div>
      </q-card>
    </div>
  </div>

  <!-- Dialog Full Screen -->
  <q-dialog
    v-model="modalView"
    persistent
    :maximized="true"
    transition-show="slide-up"
    transition-hide="slide-down"
  >
    <q-card class="bg-white">
      <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
        <q-btn
          icon="close"
          unelevated
          round
          dense
          style="color: #ff8080; background-color: #ffdede"
          size="12px"
          v-close-popup
        />
      </div>
      <div class="q-pa-md">
        <div class="row items-start items-center">
          <div class="col">
            <q-btn
              padding="xs"
              icon="mdi-chevron-left"
              color="grey-2"
              text-color="grey-5"
              size="md"
              class="my-auto"
              @click="backPage"
              :disable="page == 1"
            />
          </div>
          <div class="col-12 col-md-auto">
            <div class="q-pa-md flex">
              หน้าที่ {{ page }} จาก {{ numOfPages }}
            </div>
          </div>
          <div class="col text-right">
            <q-btn
              padding="xs"
              icon="mdi-chevron-right"
              color="grey-2"
              text-color="grey-5"
              size="md"
              @click="nextPage"
              :disable="page === numOfPages"
            />
          </div>
        </div>
        <div class="row items- items-center">
          <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
        </div>
        <div class="row items- items-end">
          <div class="col">
            <q-btn
              padding="xs"
              icon="mdi-chevron-left"
              color="grey-2"
              text-color="grey-5"
              size="md"
              class="my-auto"
              @click="backPage"
              :disable="page == 1"
            />
          </div>
          <div class="col-12 col-md-auto">
            <div class="q-pa-md flex">
              หน้าที่ {{ page }} จาก {{ numOfPages }}
            </div>
          </div>
          <div class="col text-right">
            <q-btn
              padding="xs"
              icon="mdi-chevron-right"
              color="grey-2"
              text-color="grey-5"
              size="md"
              @click="nextPage"
              :disable="page === numOfPages"
            />
          </div>
        </div>
      </div>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>