hrms-mgt/src/modules/02_organizational/views/Report.vue

<template>
  <div class="toptitle text-dark col-12 row items-center">รายงานบัญชี</div>
  <div class="col-12 row"></div>
  <q-card flat bordered class="col-12">
    <div class="row col-12">
      <q-tabs
        v-model="tab"
        no-caps
        inline-label
        align="left"
        active-class="text-primary"
        class="text-grey-7"
      >
        <q-tab name="audit1" label="บัญชี 1" />
        <q-tab name="audit2" label="บัญชี 2" />
        <q-tab name="audit3" label="บัญชี 3" />
      </q-tabs>
    </div>
    <q-separator />
    <q-tab-panels
      v-model="tab"
      transition-prev="jump-up"
      transition-next="jump-up"
      animated
      swipeable
      class="row col-12 text-dark"
    >
      <q-tab-panel name="audit1">
        <div class="row col-12 items-center q-gutter-md">
          <span class="text-subtitle1 text-weight-medium"
            >รายงานบัญชีฉบับที่ 1</span
          >
          <q-select
            class="col-xs-12 col-sm-6"
            v-model="goverment"
            label="รหัสส่วนราชการ"
            dense
            emit-value
            map-options
            option-label="name"
            :options="govermentOP"
            option-value="id"
            lazy-rules
            hide-bottom-space
            :readonly="true"
            :borderless="true"
            :outlined="false"
            :hide-dropdown-icon="true"
          />
          <q-btn size="md" icon="mdi-download" round flat color="primary">
            <q-tooltip>ดาวน์โหลด</q-tooltip>
          </q-btn>
          <!-- <viewpdf 
                        :src="pdfSrc" 
                        :currentpage="pdfCurrentPage" 
                        :totalpage="pdfTotalPage" /> -->
        </div>
      </q-tab-panel>
      <q-tab-panel name="audit2">
        <div class="row col-12 items-center q-gutter-md">
          <span class="text-subtitle1 text-weight-medium"
            >รายงานบัญชีฉบับที่ 2</span
          >
          <q-btn size="md" icon="mdi-download" flat round color="primary">
            <q-tooltip>ดาวน์โหลด</q-tooltip>
          </q-btn>
          <!-- <viewpdf 
                        :src="pdfSrc" 
                        :currentpage="pdfCurrentPage" 
                        :totalpage="pdfTotalPage" /> -->
        </div>
      </q-tab-panel>
      <q-tab-panel name="audit3">
        <div class="row col-12 items-center q-gutter-md">
          <span class="text-subtitle1 text-weight-medium"
            >รายงานบัญชีฉบับที่ 3</span
          >
          <q-btn size="md" icon="mdi-download" flat round color="primary">
            <q-tooltip>ดาวน์โหลด</q-tooltip>
          </q-btn>
          <!-- <viewpdf 
                        :src="pdfSrc" 
                        :currentpage="pdfCurrentPage" 
                        :totalpage="pdfTotalPage" /> -->
        </div>
      </q-tab-panel>
    </q-tab-panels>
  </q-card>
</template>
<script setup lang="ts">
import { onMounted, computed, ref, watch } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useRouter, useRoute } from "vue-router";
import { useDataStore } from "@/stores/data";
import TableReport from "@/modules/02_organizational/components/TableReport.vue";
import DialogHeader from "@/modules/02_organizational/components/DialogHeader.vue";
import DialogFooter from "@/modules/02_organizational/components/DialogFooter.vue";
import type { QForm } from "quasar";
import type { DataOption } from "@/modules/02_organizational/interface/index/Main";
import type { ResponseDetail } from "@/modules/02_organizational/interface/response/Mapping";
import type { RequestReport2 } from "@/modules/02_organizational/interface/request/Mapping";
import http from "@/plugins/http";
import config from "@/app.config";

const dataStore = useDataStore();
const { loaderPage } = dataStore;
const $q = useQuasar(); // show dialog
const mixin = useCounterMixin();
const router = useRouter();
const route = useRoute();
const { date2Thai, success, dateToISO } = mixin;

const govermentOP = ref<DataOption[]>([]);
const govermentOPfilter = ref<DataOption[]>([]);
const goverment = ref<string>("");
const tab = ref<string>("audit1");

const fetchOrganizationAgency = async () => {
  loaderPage(true);
  await http
    // .get(config.API.organizationAgency)
    .get(config.API.listOrganizationAgency("หน่วยงาน"))
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: any) => {
        option.push({
          id: r.organizationId.toString(),
          name: r.organizationName.toString(),
        });
      });
      govermentOP.value = option;
      govermentOPfilter.value = option;
    })
    .catch((e) => {
      console.log(e);
    })
    .finally(() => {
      loaderPage(false);
    });
};

onMounted(async () => {
  loaderPage(false);
  await fetchOrganizationAgency();
});
</script>