clone code

src/modules/02_organizational/views/Report.vue

@@ -0,0 +1,148 @@
+<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>