From 0a9b96567a6fa56b5d75067ebf3c4e9a6f5f60e1 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 2 Apr 2024 16:00:31 +0700
Subject: [PATCH] =?UTF-8?q?UI=20=E0=B8=82=E0=B9=89=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=AF=E0=B8=97?=
 =?UTF-8?q?=E0=B8=B5=E0=B9=88=E0=B9=84=E0=B8=94=E0=B9=89=E0=B8=A3=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=97=E0=B8=B8=E0=B8=99=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=A8=E0=B8=B6=E0=B8=81=E0=B8=A9=E0=B8=B2/=E0=B8=9D?=
 =?UTF-8?q?=E0=B8=B6=E0=B8=81=E0=B8=AD=E0=B8=9A=E0=B8=A3=E0=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/scholarship/DetailView.vue     | 750 ++++++++++++++++++
 src/modules/15_development/router.ts          |  25 +-
 .../15_development/views/Scholarship.vue      | 309 +++++++-
 3 files changed, 1080 insertions(+), 4 deletions(-)
 create mode 100644 src/modules/15_development/components/scholarship/DetailView.vue

diff --git a/src/modules/15_development/components/scholarship/DetailView.vue b/src/modules/15_development/components/scholarship/DetailView.vue
new file mode 100644
index 000000000..499e8eb9b
--- /dev/null
+++ b/src/modules/15_development/components/scholarship/DetailView.vue
@@ -0,0 +1,750 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const router = useRouter();
+const route = useRoute();
+const { dialogConfirm, showLoader, hideLoader, date2Thai } = useCounterMixin();
+
+const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
+
+const budgetSourceOp = ref<any>(["แหล่งงบประมาณกทม", "แหล่งงบประมาณอื่นๆ"]);
+const scholarshipTypeOp = ref<any>([
+  { id: "1", label: "การศึกษาในประเทศ" },
+  {
+    id: "2",
+    label:
+      "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
+  },
+  {
+    id: "3",
+    label:
+      "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
+  },
+  {
+    id: "4",
+    label:
+      "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)",
+  },
+]);
+const scholarshipTypeShortOp = ref<any>(["ทุน 1 (ก)(ข)(ค)", "ทุน 2 (ก)(ข)"]);
+
+const isGov = ref<boolean>(false);
+const dataPerson = reactive({
+  id: "",
+  citizenId: "123xxxxxxxxxx",
+  name: "นางสาวสาวิตรี ศรีสมัย",
+  position: "นักทรัพยากรบุคคล",
+  type: "ทั่วไป",
+  level: "ปฏิบัติงาน",
+  positionPath: "นักทรัพยากรบุคคล",
+  org: "-",
+});
+const formData = reactive({
+  personId: "",
+  year: null,
+  budgetSource: "",
+  approveBudget: "",
+  approveNumber: "",
+  date: null,
+  approveDate: null,
+  isTime: false,
+  detail: "",
+  scholarshipType: "",
+  scholarshipTypeShort: "",
+  contractNumber: "",
+  contractDate: null,
+  reportNumber: "",
+  reportDate: null,
+  reportLetterDate: null,
+  guarantorId: "",
+  trainingCourse: "",
+  institution: "",
+  trainingDateStart: null,
+  trainingDateEnd: null,
+  studyTopic: "",
+  studyPlace: "",
+});
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    console.log(formData);
+  });
+}
+
+function changeTrainingDateStart() {
+  if (
+    formData?.trainingDateStart !== null &&
+    formData?.trainingDateEnd !== null
+  ) {
+    const startDate = new Date(formData.trainingDateStart);
+    const endDate = new Date(formData?.trainingDateEnd);
+    if (startDate > endDate) {
+      formData.trainingDateEnd = null;
+    }
+  }
+}
+
+onMounted(() => {
+  isGov.value = route.params.id ? true : false;
+});
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      flat
+      round
+      dense
+      class="q-mr-sm"
+      icon="mdi-arrow-left"
+      color="primary"
+      @click="router.go(-1)"
+    />
+    {{ `${title}ข้าราชการฯที่ได้รับทุนการศึกษา/ฝึกอบรม` }}
+  </div>
+  <q-form greedy @submit.prevent @validation-success="onSubmit">
+    <q-card flat bordered class="col-12">
+      <div class="q-pa-md">
+        <q-card bordered tyle="border: 1px solid #d6dee1">
+          <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+            ข้อมูลราชการ
+            <q-btn flat dense icon="add" color="primary" label="เลือกข้าราชการ">
+              <q-tooltip>เพิ่ม</q-tooltip>
+            </q-btn>
+          </div>
+          <div class="col-12"><q-separator /></div>
+          <div class="row col-12 q-col-gutter-md q-pa-md" v-if="isGov">
+            <div class="col">
+              <div class="row q-col-gutter-md">
+                <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
+                <div class="col-8 text-weight-medium">
+                  {{ dataPerson.citizenId }}
+                </div>
+                <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
+                <div class="col-8 text-weight-medium">
+                  {{ dataPerson.name }}
+                </div>
+                <div class="col-4 text-grey">ตำแหน่ง</div>
+                <div class="col-8 text-weight-medium">
+                  {{ dataPerson.position }}
+                </div>
+                <div class="col-4 text-grey">ประเภท</div>
+                <div class="col-8 text-weight-medium">
+                  {{ dataPerson.type }}
+                </div>
+              </div>
+            </div>
+            <div class="col">
+              <div class="row q-col-gutter-md">
+                <div class="col-4 text-grey">ระดับตำแหน่ง</div>
+                <div class="col-8 text-weight-medium">
+                  {{ dataPerson.level }}
+                </div>
+                <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
+                <div class="col-8 text-weight-medium">
+                  {{ dataPerson.positionPath }}
+                </div>
+                <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
+                <div class="col-8 text-weight-medium">{{ dataPerson.org }}</div>
+              </div>
+            </div>
+          </div>
+          <div class="row col-12 q-pa-md" v-else>
+            <q-banner class="bg-grey-3 text-black col-12 text-center">
+              เลือกข้าราชการ
+            </q-banner>
+          </div>
+        </q-card>
+      </div>
+      <div class="row q-col-gutter-md q-pa-md" v-if="isGov">
+        <div class="col-3">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="formData.year"
+            :locale="'th'"
+            autoApply
+            year-picker
+            :enableTimePicker="false"
+          >
+            <template #year="{ year }">{{ year + 543 }}</template>
+            <template #year-overlay-value="{ value }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                dense
+                outlined
+                :model-value="
+                  formData.year ? Number(formData.year) + 543 : null
+                "
+                :label="`${'ปีงบประมาณที่ได้รับทุน'}`"
+                hide-bottom-space
+                :rules="[
+                  (val) => !!val || `${'กรุณาเลือกปีงบประมาณที่ได้รับทุน'}`,
+                ]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-3">
+          <q-select
+            dense
+            outlined
+            label="แหล่งงบประมาณ"
+            hide-bottom-space
+            v-model="formData.budgetSource"
+            :options="budgetSourceOp"
+            :rules="[
+            (val:string) =>
+              !!val || `${'กรุณาเลือกแหล่งงบประมาณ'}`,
+          ]"
+          />
+        </div>
+        <div class="col-6">
+          <q-input
+            dense
+            outlined
+            hide-bottom-space
+            v-model="formData.approveBudget"
+            label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
+            mask="###,###,###,###,###,###"
+            reverse-fill-mask
+            :rules="[
+                (val:string) =>
+                  !!val || `${'กรุณากรอกงบประมาณที่ได้รับอนุมัติตลอดหลักสูตร'}`,
+              ]"
+          />
+        </div>
+        <div class="col-3">
+          <q-input
+            dense
+            outlined
+            v-model="formData.approveNumber"
+            label="เลขที่หนังสิออนุมัติ"
+            mask="#"
+            hide-bottom-space
+            reverse-fill-mask
+            :rules="[
+                (val:string) =>
+                  !!val || `${'กรุณากรอกเลขที่หนังสิออนุมัติ'}`,
+              ]"
+          />
+        </div>
+        <div class="col-3">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="formData.date"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+          >
+            <template #year="{ year }">{{ year + 543 }}</template>
+            <template #year-overlay-value="{ value }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                dense
+                outlined
+                :model-value="formData.date ? date2Thai(formData.date) : null"
+                :label="`${'ลงวันที่'}`"
+                hide-bottom-space
+                :rules="[
+          (val:string) =>
+            !!val || `${'กรุณาเลือกวันที่'}`,
+        ]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-3">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="formData.approveDate"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+          >
+            <template #year="{ year }">{{ year + 543 }}</template>
+            <template #year-overlay-value="{ value }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                dense
+                outlined
+                :model-value="
+                  formData.approveDate ? date2Thai(formData.approveDate) : null
+                "
+                :label="`${'หนังสืออนุมัติเมื่อวันที่'}`"
+                hide-bottom-space
+                :rules="[
+          (val:string) =>
+            !!val || `${'กรุณาเลือกวันที่หนังสืออนุมัติเมื่อวันที่'}`,
+        ]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-3">
+          <q-checkbox
+            keep-color
+            color="primary"
+            v-model="formData.isTime"
+            label="ใช้เวลาราชการ"
+          />
+        </div>
+        <div class="col-12">
+          <q-input
+            outlined
+            dense
+            v-model="formData.detail"
+            label="เปลี่ยนแปลงรายละเอียด"
+            rows="3"
+            hide-bottom-space
+            type="textarea"
+            :rules="[
+            (val:string) =>
+              !!val || `${'กรุณากรอกเปลี่ยนแปลงรายละเอียด'}`,
+          ]"
+          />
+        </div>
+        <div class="col-9">
+          <q-select
+            dense
+            outlined
+            hide-bottom-space
+            lazy-rules
+            v-model="formData.scholarshipType"
+            :options="scholarshipTypeOp"
+            option-label="label"
+            option-value="id"
+            emit-value
+            map-options
+            input-class="text-red"
+            label="เลือกประเภททุน"
+            :rules="[
+          (val:string) =>
+            !!val || `${'กรุณาเลือกประเภททุน'}`,
+        ]"
+          >
+            <template v-slot:selected-item="scope">
+              <div class="text-primary">{{ scope.opt.label }}</div>
+            </template>
+          </q-select>
+        </div>
+        <div
+          class="col-3"
+          v-if="
+            formData.scholarshipType !== '' && formData.scholarshipType !== '4'
+          "
+        >
+          <q-select
+            dense
+            outlined
+            hide-bottom-space
+            lazy-rules
+            v-model="formData.scholarshipTypeShort"
+            :options="scholarshipTypeShortOp"
+            label="ประเภททุน"
+            :rules="[
+          (val:string) =>
+            !!val || `${'กรุณาเลือกประเภททุน'}`,
+        ]"
+          >
+            <template v-slot:selected>
+              <div class="text-primary">
+                {{ formData.scholarshipTypeShort }}
+              </div>
+            </template>
+          </q-select>
+        </div>
+        <div
+          class="col-12"
+          v-if="
+            formData.scholarshipType !== '' && formData.scholarshipType !== '4'
+          "
+        >
+          <div class="row q-col-gutter-md">
+            <div class="col-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                reverse-fill-mask
+                label="เลขที่สัญญา"
+                mask="#"
+                v-model="formData.contractNumber"
+                :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกเลขที่สัญญา'}`,
+      ]"
+              />
+            </div>
+            <div class="col-2">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.contractDate"
+                :locale="'th'"
+                autoApply
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :model-value="
+                      formData.contractDate
+                        ? date2Thai(formData.contractDate)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    hide-bottom-space
+                    :rules="[
+      (val:string) =>
+        !!val || `${'กรุณาเลือกวันที่'}`,
+    ]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-3">
+              <q-input
+                dense
+                outlined
+                hide-bottom-space
+                reverse-fill-mask
+                lazy-rules
+                v-model="formData.reportNumber"
+                mask="#"
+                label="เลขที่หนังสือรายงานตัวกลับ"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกเลขที่หนังสือรายงานตัวกลับ'}`,
+                ]"
+              />
+            </div>
+            <div class="col-2">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.reportDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :model-value="
+                      formData.reportDate
+                        ? date2Thai(formData.reportDate)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    hide-bottom-space
+                    :rules="[
+      (val:string) =>
+        !!val || `${'กรุณาเลือกวันที่'}`,
+    ]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-2">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.reportLetterDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :model-value="
+                      formData.reportLetterDate
+                        ? date2Thai(formData.reportLetterDate)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    hide-bottom-space
+                    :rules="[
+      (val:string) =>
+        !!val || `${'กรุณาเลือกวันที่'}`,
+    ]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-12">
+              <q-card bordered tyle="border: 1px solid #d6dee1">
+                <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+                  ข้อมูลผู้ค้ำประกัน
+                  <q-btn
+                    flat
+                    dense
+                    icon="add"
+                    color="primary"
+                    label="เลือกผู้ค้ำประกัน"
+                  >
+                    <q-tooltip>เพิ่ม</q-tooltip>
+                  </q-btn>
+                </div>
+                <div class="col-12"><q-separator /></div>
+                <div class="row col-12 q-col-gutter-md q-pa-md">
+                  <div class="col">
+                    <div class="row q-col-gutter-md">
+                      <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
+                      <div class="col-8 text-weight-medium">123xxxxxxxxxx</div>
+                    </div>
+                  </div>
+                  <div class="col">
+                    <div class="row q-col-gutter-md">
+                      <div class="col-4 text-grey">ระดับตำแหน่ง</div>
+                      <div class="col-8 text-weight-medium">123xxxxxxxxxx</div>
+                    </div>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12" v-else-if="formData.scholarshipType === '4'">
+          <div class="row q-col-gutter-md">
+            <div class="col-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                label="หลักสูตรการฝึกอบรม"
+                v-model="formData.trainingCourse"
+                :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
+      ]"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
+                v-model="formData.institution"
+                :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
+                ]"
+              />
+            </div>
+
+            <div class="col-3">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.trainingDateStart"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                @update:model-value="changeTrainingDateStart()"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :model-value="
+                      formData.trainingDateStart
+                        ? date2Thai(formData.trainingDateStart)
+                        : null
+                    "
+                    :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
+                    hide-bottom-space
+                    :rules="[
+      (val:string) =>
+        !!val || `${'กรุณาเลือกวันที่เริ่มต้นการฝึกอบรม'}`,
+    ]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-3">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.trainingDateEnd"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formData.trainingDateStart"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :model-value="
+                      formData.trainingDateEnd
+                        ? date2Thai(formData.trainingDateEnd)
+                        : null
+                    "
+                    :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
+                    hide-bottom-space
+                    :rules="[
+      (val:string) =>
+        !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการฝึกอบรม'}`,
+    ]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-6"></div>
+            <div class="col-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                label="สถานที่ไปศึกษาดูงาน"
+                v-model="formData.studyPlace"
+                :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
+      ]"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                label="หัวข้อไปศึกษาดูงาน"
+                v-model="formData.studyTopic"
+                :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกหัวข้อไปศึกษาดูงาน'}`,
+      ]"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <q-separator />
+      <div class="text-right q-pa-sm" v-if="isGov">
+        <q-btn
+          dense
+          unelevated
+          label="บันทึก"
+          id="onSubmit"
+          type="submit"
+          color="public"
+          class="q-px-md"
+        >
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+        </q-btn>
+      </div>
+    </q-card>
+  </q-form>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/15_development/router.ts b/src/modules/15_development/router.ts
index 598cd7994..656713ae8 100644
--- a/src/modules/15_development/router.ts
+++ b/src/modules/15_development/router.ts
@@ -7,7 +7,10 @@ const employeeHistory = () =>
   import("@/modules/15_development/views/EmployeeHistory.vue");
 const Scholarship = () =>
   import("@/modules/15_development/views/Scholarship.vue");
-const historyAdd = () => import('@/modules/15_development/components/history/AddPage.vue')
+const ScholarshipDetail = () =>
+  import("@/modules/15_development/components/scholarship/DetailView.vue");
+const historyAdd = () =>
+  import("@/modules/15_development/components/history/AddPage.vue");
 export default [
   {
     path: "/development",
@@ -69,6 +72,26 @@ export default [
       Role: "development",
     },
   },
+  {
+    path: "/development/scholarship/add",
+    name: "developmentScholarshipAdd",
+    component: ScholarshipDetail,
+    meta: {
+      Auth: true,
+      Key: [1.6],
+      Role: "development",
+    },
+  },
+  {
+    path: "/development/scholarship/:id",
+    name: "developmentScholarshipid",
+    component: ScholarshipDetail,
+    meta: {
+      Auth: true,
+      Key: [1.6],
+      Role: "development",
+    },
+  },
   {
     path: "/development/history/add",
     name: "developmentHistoryAdd",
diff --git a/src/modules/15_development/views/Scholarship.vue b/src/modules/15_development/views/Scholarship.vue
index 4efb55bc7..cf816ecdc 100644
--- a/src/modules/15_development/views/Scholarship.vue
+++ b/src/modules/15_development/views/Scholarship.vue
@@ -1,5 +1,308 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
+import { useRouter } from "vue-router";
+
+/** importStore*/
+
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+
+const $q = useQuasar();
+const router = useRouter();
+const { showLoader, hideLoader } = useCounterMixin();
+
+/** หัวตาราง */
+const rows = ref<any>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน ",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "name",
+    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: "type",
+    align: "left",
+    label: "ประเภท",
+    sortable: true,
+    field: "type",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionPath",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "positionPath",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "citizenId",
+  "name",
+  "position",
+  "type",
+  "level",
+  "positionPath",
+]);
+
+const options = ref<any>([
+  "การศึกษาในประเทศ",
+  "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
+  "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
+  "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)",
+]);
+const itemDownload = ref<any>([
+  {
+    label: "ดาวน์โหลด 1",
+    value: "",
+    icon: "mdi-file-pdf-box",
+    color: "green",
+  },
+  {
+    label: "ดาวน์โหลด 2",
+    value: "",
+    icon: "mdi-file-table",
+    color: "red",
+  },
+  {
+    label: "ดาวน์โหลด 3",
+    value: "",
+    icon: "mdi-file-word",
+    color: "blue",
+  },
+]);
+
+const formFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  year: new Date().getFullYear(),
+  type: "การศึกษาในประเทศ",
+  keyword: "",
+});
+
+function fetchList() {
+  showLoader();
+  const data = [
+    {
+      id: "1",
+      citizenId: "123XXXXXXXXXXX",
+      name: "นางสาวสาวิตรี ศรีสมัย",
+      position: "นักทรัพยากรบุคคล",
+      type: "ทั่วไป",
+      level: "ปฏิบัติงาน",
+      positionPath: "นักทรัพยากรบุคคล",
+    },
+    {
+      id: "2",
+      citizenId: "1234XXXXXXXXXX",
+      name: "นายณัฐพงศ์ ดิษยบุตร",
+      position: "นักทรัพยากรบุคคล",
+      type: "ทั่วไป",
+      level: "ปฏิบัติงาน",
+      positionPath: "",
+    },
+  ];
+  rows.value = data;
+  setTimeout(() => {
+    hideLoader();
+  }, 500);
+}
+
+function onClickAddOrView(status: boolean = false, id: string = "") {
+  status
+    ? router.push(`/development/scholarship/${id}`)
+    : router.push("/development/scholarship/add");
+}
+
+onMounted(() => {
+  fetchList();
+});
+</script>
+
 <template>
-    <div>
-        ทุนการศึกษา/ฝึกอบรม
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการข้าราชการฯที่ได้รับทุนการศึกษา/ฝึกอบรม
+  </div>
+  <q-card flat bordered class="q-pa-md">
+    <q-toolbar style="padding: 0px">
+      <div class="row q-gutter-sm">
+        <datepicker
+          menu-class-name="modalfix"
+          v-model="formFilter.year"
+          :locale="'th'"
+          autoApply
+          year-picker
+          :enableTimePicker="false"
+        >
+          <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="Number(formFilter.year) + 543"
+              :label="`${'ปีงบประมาณ'}`"
+            >
+              <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="formFilter.type"
+          :options="options"
+          label="เลือกประเภททุน"
+        />
+        <q-btn
+          flat
+          round
+          dense
+          icon="add"
+          color="primary"
+          @click="onClickAddOrView()"
+        >
+          <q-tooltip>เพิ่ม</q-tooltip>
+        </q-btn>
+      </div>
+
+      <q-space />
+      <div class="row q-gutter-sm">
+        <q-btn flat round color="primary" icon="mdi-download-outline">
+          <q-menu>
+            <q-list style="min-width: 100px" dense>
+              <q-item clickable v-close-popup v-for="items in itemDownload">
+                <q-item-section avatar>
+                  <q-icon :color="items.color" :name="items.icon" />
+                </q-item-section>
+                <q-item-section :class="`text-${items.color}`">{{
+                  items.label
+                }}</q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-btn>
+
+        <q-input
+          standout
+          dense
+          v-model="formFilter.keyword"
+          ref="filterRef"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+        >
+          <template v-slot:append>
+            <q-icon v-if="formFilter.keyword == ''" name="search" />
+            <q-icon
+              v-if="formFilter.keyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="formFilter.keyword = ''"
+            />
+          </template>
+        </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>
+
+    <div class="col-12">
+      <d-table
+        for="table"
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        row-key="subject"
+        flat
+        bordered
+        dense
+        class="custom-header-table"
+        :visible-columns="visibleColumns"
+      >
+        <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-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="onClickAddOrView(true, props.row.id)"
+            >
+              <div class="table_ellipsis">
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
     </div>
-</template>
\ No newline at end of file
+  </q-card>
+</template>
+
+<style scoped></style>