From 49b53430d21401fb566d9d1c9a27decc5da6d7ad Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Thu, 11 Apr 2024 13:07:40 +0700
Subject: [PATCH] =?UTF-8?q?UI=20=E0=B9=80=E0=B8=A1=E0=B8=99=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B8=E0=B8=99=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A8?=
 =?UTF-8?q?=E0=B8=B6=E0=B8=81=E0=B8=A9=E0=B8=B2(=E0=B8=9E=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=81=E0=B9=84=E0=B8=9B=E0=B8=97=E0=B8=B3=20admin)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/01_dashboard/views/Dashboard.vue  |   8 +
 .../09_scholarship/interface/index/Main.ts    |   8 +
 .../09_scholarship/interface/request/index.ts |   0
 src/modules/09_scholarship/router.ts          |  17 +
 src/modules/09_scholarship/views/main.vue     | 408 ++++++++++++++++++
 src/router/index.ts                           |   2 +
 6 files changed, 443 insertions(+)
 create mode 100644 src/modules/09_scholarship/interface/index/Main.ts
 create mode 100644 src/modules/09_scholarship/interface/request/index.ts
 create mode 100644 src/modules/09_scholarship/router.ts
 create mode 100644 src/modules/09_scholarship/views/main.vue

diff --git a/src/modules/01_dashboard/views/Dashboard.vue b/src/modules/01_dashboard/views/Dashboard.vue
index 9a15af9..55082e4 100644
--- a/src/modules/01_dashboard/views/Dashboard.vue
+++ b/src/modules/01_dashboard/views/Dashboard.vue
@@ -89,6 +89,14 @@ const items = ref<any>([
     path: "/KPI",
     active: false,
   },
+  {
+    icon: "mdi-school",
+    title: "ทุนการศึกษา/ฝึกอบรม",
+    sub: "รายการทุนการศึกษา/ฝึกอบรม",
+    color: "teal-2",
+    path: "/scholarship",
+    active: false,
+  },
 ]);
 onMounted(async () => {
   await fetchlistInbox(1);
diff --git a/src/modules/09_scholarship/interface/index/Main.ts b/src/modules/09_scholarship/interface/index/Main.ts
new file mode 100644
index 0000000..80143f3
--- /dev/null
+++ b/src/modules/09_scholarship/interface/index/Main.ts
@@ -0,0 +1,8 @@
+interface DataOptions {
+    id:string
+    name:string
+}
+
+export type {
+    DataOptions
+}
\ No newline at end of file
diff --git a/src/modules/09_scholarship/interface/request/index.ts b/src/modules/09_scholarship/interface/request/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/modules/09_scholarship/router.ts b/src/modules/09_scholarship/router.ts
new file mode 100644
index 0000000..2beac10
--- /dev/null
+++ b/src/modules/09_scholarship/router.ts
@@ -0,0 +1,17 @@
+/**
+ * Router ขอโอน
+ */
+
+const scholarshipPage = () => import("@/modules/09_scholarship/views/main.vue");
+
+export default [
+  {
+    path: "/scholarship",
+    name: "scholarshipMain",
+    component: scholarshipPage,
+    meta: {
+      Auth: true,
+      Key: [9],
+    },
+  },
+];
diff --git a/src/modules/09_scholarship/views/main.vue b/src/modules/09_scholarship/views/main.vue
new file mode 100644
index 0000000..bc9a495
--- /dev/null
+++ b/src/modules/09_scholarship/views/main.vue
@@ -0,0 +1,408 @@
+<script setup lang="ts">
+import { ref, onMounted,watch } from "vue";
+import { useRouter } from "vue-router";
+import type { QTableProps } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { DataOptions } from "@/modules/09_scholarship/interface/index/Main";
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+const router = useRouter();
+
+const filterKeyword = ref<string>("");
+
+const currentPage = ref<number>(1);
+const maxPage = ref<number>(1);
+const page = ref<number>(1);
+const rowsPerPage = ref<number>(10);
+
+const rows = ref<any>();
+const year = ref<number>(0);
+const type = ref<string>("DOMESTICE");
+const scholarshipTypeOp = ref<DataOptions[]>([
+  {
+    id: "DOMESTICE",
+    name: "การศึกษาในประเทศ",
+  },
+  {
+    id: "NOABROAD",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
+  },
+  {
+    id: "ABROAD",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
+  },
+  {
+    id: "EXECUTIVE",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)",
+  },
+]);
+
+/**
+ * ตั้งค่า pagination
+ */
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+  descending: true,
+  page: page.value,
+  rowsPerPage: rowsPerPage.value,
+});
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน ",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posType",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "posType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevel",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "posExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "citizenId",
+  "fullName",
+  "position",
+  "posType",
+  "posLevel",
+  "posExecutive",
+]);
+
+/** ดึงข้อมูล */
+function getData() {
+  const data = [
+    {
+      id: "e81c39e3-c6d7-4761-8807-a0f1cfe4d4d1",
+      citizenId: "5555512312321",
+      fullName: "นายณัฐพงศ์ ดิษยบุตร",
+      position: null,
+      posType: null,
+      posLevel: null,
+      posExecutive: null,
+    },
+    {
+      id: "e81c39e3-c6d7-4761-8807-a0f1cfe4d4d2",
+      citizenId: "0000000000021",
+      fullName: "นางสาวชญาน์นันท์ วรดรเกรียรติวรา",
+      position: "นักจัดการงานทั่วไป",
+      posType: "ทั่วไป",
+      posLevel: "ชำนาญงาน",
+      posExecutive: "ผู้ช่วยหัวหน้าสำนักงาน",
+    },
+    {
+      id: "e81c39e3-c6d7-4761-8807-a0f1cfe4d4d3",
+      citizenId: "0000000000010",
+      fullName: "นางจิตรา ทันนิเทศ",
+      position: "เจ้าพนักงานธุรการ",
+      posType: "ทั่วไป",
+      posLevel: "ปฏิบัติงาน",
+      posExecutive: "นักการช่าง",
+    },
+    {
+      id: "e81c39e3-c6d7-4761-8807-a0f1cfe4d4d9",
+      citizenId: "0000000000016",
+      fullName: "นางสาวปุณณภาภัค เจรจาปรีดี",
+      position: "นักจัดการทั่วไป",
+      posType: "ทั่วไป",
+      posLevel: "ชำนาญงาน",
+      posExecutive: null,
+    },
+  ];
+  rows.value = data;
+  // showLoader();
+  // await http
+  //   .get(config.API.orgPrefix)
+  //   .then(async (res) => {
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+function onEdit(id: string) {
+  router.push(`/KPI/${id}`);
+}
+
+watch(
+  () => currentPage.value,
+  () => {
+    rowsPerPage.value = pagination.value.rowsPerPage;
+    getData();
+  }
+);
+
+watch(
+  () => pagination.value.rowsPerPage,
+  () => {
+    rowsPerPage.value = pagination.value.rowsPerPage;
+    currentPage.value = 1;
+    getData();
+  }
+);
+
+onMounted(async () => {
+  getData();
+});
+</script>
+
+<template>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.push(`/`)"
+        />
+        รายการทุนการศึกษา/ฝึกอบรม
+      </div>
+      <div class="col-12">
+        <q-card bordered class="q-pa-md">
+          <q-toolbar style="padding: 0">
+            <div class="row q-gutter-sm">
+              <datepicker
+                style="width: 150px"
+                menu-class-name="modalfix"
+                v-model="year"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+                @update:model-value="getData()"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    lazy-rules
+                    outlined
+                    :model-value="year === 0 ? 'ทั้งหมด' : Number(year) + 543"
+                    :label="`${'ปีงบประมาณ'}`"
+                  >
+                    <template v-if="year" v-slot:append>
+                      <q-icon
+                        name="cancel"
+                        @click.stop.prevent="(year = 0), getData()"
+                        class="cursor-pointer"
+                      />
+                    </template>
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+              <q-select
+                dense
+                outlined
+                v-model="type"
+                :options="scholarshipTypeOp"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                label="เลือกประเภททุน"
+                @update:model-value="getData()"
+                style="width: 350px"
+              />
+              <!-- <q-btn
+                flat
+                round
+                color="primary"
+                icon="add"
+                @click="router.push(`/KPI/add`)"
+              >
+                <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+              </q-btn> -->
+            </div>
+
+            <q-space />
+            <div class="row q-gutter-sm">
+              <q-input
+                outlined
+                dense
+                v-model="filterKeyword"
+                label="ค้นหา"
+              ></q-input>
+              <q-select
+                v-model="visibleColumns"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+              />
+            </div>
+          </q-toolbar>
+
+          <q-table
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="id"
+            flat
+            bordered
+            :paging="true"
+            dense
+            class="custom-table2"
+            :visible-columns="visibleColumns"
+            v-model:pagination="pagination"
+            :rows-per-page-options="[10, 25, 50, 100]"
+          >
+            <template v-slot:pagination="scope">
+              <q-pagination
+                v-model="currentPage"
+                active-color="primary"
+                color="dark"
+                :max="Number(maxPage)"
+                size="sm"
+                boundary-links
+                direction-links
+              ></q-pagination>
+            </template>
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+                <q-th auto-width />
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td
+                  v-for="col in props.cols"
+                  :key="col.id"
+                  @click="onEdit(props.row.id)"
+                >
+                  <div v-if="col.name == 'createDate'">
+                    {{ col.value ? date2Thai(col.value) : "-" }}
+                  </div>
+                  <div v-else>
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </q-table>
+        </q-card>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-table2 {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 15b040a..c3b8dbb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -12,6 +12,7 @@ import ModuEvaluate from "@/modules/06_evaluate/router";
 import ModuAppealComplain from "@/modules/07_appealComplain/router";
 import ModuleSupport from "@/modules/00_support/router";
 import ModuleKPI from "@/modules/08_KPI/router";
+import ModuleScholarship from "@/modules/09_scholarship/router";
 // TODO: ใช้หรือไม่?
 import keycloak from "@/plugins/keycloak";
 
@@ -49,6 +50,7 @@ const router = createRouter({
         ...ModuAppealComplain,
         ...ModuleSupport,
         ...ModuleKPI,
+        ...ModuleScholarship,
       ],
     },
   ],