From bd9b798e22d3677068214a85af9a0101a450a2cd Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 11 Dec 2024 10:37:29 +0700
Subject: [PATCH] =?UTF-8?q?Ui=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=87?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=99=E0=B8=9A=E0=B8=A3=E0=B8=A3=E0=B8=88=E0=B8=B8?=
 =?UTF-8?q?=20=E0=B9=81=E0=B8=95=E0=B9=88=E0=B8=87=E0=B8=95=E0=B8=B1?=
 =?UTF-8?q?=E0=B9=89=E0=B8=87=20=E0=B8=A2=E0=B9=89=E0=B8=B2=E0=B8=A2=20?=
 =?UTF-8?q?=E0=B9=82=E0=B8=AD=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_placement/router.ts            |  16 ++
 .../05_placement/views/09_reportMain.vue      | 178 ++++++++++++++++++
 2 files changed, 194 insertions(+)
 create mode 100644 src/modules/05_placement/views/09_reportMain.vue

diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 73c3667dd..f5695150a 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -89,6 +89,10 @@ const FormAppointPage = () =>
   import("./components/probation/FormAppoint/FormAppoint.vue");
 const FormAppointPageDetail = () =>
   import("./components/probation/FormAppoint/FormAppoint.vue");
+
+//Report
+const ReportPage = () => import("./views/09_reportMain.vue");
+
 export default [
   {
     path: "/placement",
@@ -412,4 +416,16 @@ export default [
       Role: "STAFF",
     },
   },
+
+  // รายงาน
+  {
+    path: "/placement/report",
+    name: "placementReport",
+    component: ReportPage,
+    meta: {
+      Auth: true,
+      Key: "SYS_PLACEMENT_REPORT",
+      Role: "STAFF",
+    },
+  },
 ];
diff --git a/src/modules/05_placement/views/09_reportMain.vue b/src/modules/05_placement/views/09_reportMain.vue
new file mode 100644
index 000000000..e9348fe81
--- /dev/null
+++ b/src/modules/05_placement/views/09_reportMain.vue
@@ -0,0 +1,178 @@
+<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>