hrms-mgt/src/modules/05_placement/views/09_reportMain.vue

<script setup lang="ts">
import { ref } from "vue";
import { VuePDF, usePDF } from "@tato30/vue-pdf";

import type { optionData } from "@/modules/05_placement/interface/index/Main";

import LoadView from "@/components/LoadView.vue";

/** Filter*/
const reportType = ref<string>("");
const optionReport = ref<optionData[]>([
  {
    id: "1",
    name: "จำนวนข้าราชการ กทม. สามัญที่ได้รับการบรรจุ แต่งตั้ง ย้าย และโอน",
  },
  {
    id: "2",
    name: "จำนวนลูกจ้างประจำ กทม. ที่ได้รับการจ้าง แต่งตั้งและย้าย",
  },
]);

/** View*/
const isLoadPDF = ref<boolean>(false);
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const pdfSrc = ref<any>();

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

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

<template>
  <div class="toptitle text-dark col-12 row items-center">
    รายงานบรรจุ แต่งตั้ง ย้าย โอน
  </div>

  <div class="q-pa-sm q-gutter-sm">
    <q-card flat bordered class="col-12">
      <div class="row q-col-gutter-sm q-pa-sm">
        <div class="row col-12">
          <q-select
            outlined
            dense
            v-model="reportType"
            :options="optionReport"
            label="รายงาน"
            emit-value
            map-options
            option-label="name"
            option-value="id"
            style="width: 500px"
          >
          </q-select>

          <q-space />
          <q-btn
            flat
            round
            color="primary"
            icon="download"
            :disable="!reportType"
          >
          </q-btn>
        </div>
      </div>
    </q-card>

    <q-card flat bordered class="col-12">
      <q-card-section class="col-lg-9 col-md-8 col-xs-12 scroll">
        <q-splitter
          horizontal
          style="
            height: 75vh;
            border: 1px solid rgb(210, 210, 210);
            border-radius: 5px;
          "
          before-class="overflow-hidden disable"
          separator-class="bg-white disabled"
        >
          <template v-slot:before>
            <div class="q-px-sm">
              <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>
          </template>
          <template v-slot:after>
            <div class="q-pa-md">
              <LoadView v-if="isLoadPDF" />
              <VuePDF
                v-else
                ref="vuePDFRef"
                :pdf="pdfSrc"
                :page="page"
                fit-parent
              />
            </div>
          </template>
          <template v-slot:default>
            <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>
          </template>
        </q-splitter>
      </q-card-section>
    </q-card>
  </div>
</template>

<style scoped></style>