From 796c7e18cd781e08ced9244715589f325a14d3ac Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Fri, 10 Nov 2023 16:04:54 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=88=E0=B8=B1=E0=B8=94=E0=B9=82=E0=B8=84?=
 =?UTF-8?q?=E0=B9=89=E0=B8=94=20=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84?=
 =?UTF-8?q?=E0=B8=B3=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87/=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A2=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/4_Order/MainPage.vue           | 23 ++++----
 .../components/4_Order/OrderPage.vue          |  9 +--
 .../components/4_Order/Step01.vue             | 30 ++++++++--
 .../components/4_Order/Step02.vue             | 24 +++++++-
 .../components/4_Order/Step03.vue             |  9 ++-
 .../components/4_Order/TableOrder.vue         | 11 +++-
 .../components/5_Report/DetailPage.vue        | 39 +++++++++----
 .../components/5_Report/MainPage.vue          | 56 +++++++++++--------
 8 files changed, 141 insertions(+), 60 deletions(-)

diff --git a/src/modules/11_discipline/components/4_Order/MainPage.vue b/src/modules/11_discipline/components/4_Order/MainPage.vue
index 59ac80fd3..15dfede0a 100644
--- a/src/modules/11_discipline/components/4_Order/MainPage.vue
+++ b/src/modules/11_discipline/components/4_Order/MainPage.vue
@@ -3,23 +3,15 @@ import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import type { DataList, DataListRes } from "../../interface/response/order";
 
-// importStroe
 import { useOrderStore } from "@/modules/11_discipline/store/OrderStore";
-// importComponents
 import tableOrder from "@/modules/11_discipline/components/4_Order/TableOrder.vue";
 
 const router = useRouter();
 const OrderStore = useOrderStore();
 const { fetchOrder } = OrderStore; // function จาก stores
-
-// filter ข้อมูลใน table
 const filterTable = ref<string>("");
 
-onMounted(async () => {
-  await fetchListOrder();
-});
-
-// เรียกรายการคำสั่ง จาก API
+/** เรียกรายการคำสั่ง จาก API */
 async function fetchListOrder() {
   const listData: DataListRes[] = [
     {
@@ -50,10 +42,15 @@ async function fetchListOrder() {
   await fetchOrder(listData); // ส่งข้อมูลไปยัง stores
 }
 
-// redirect ไปยังการเพิ่มออกคำสั่งลงโทษทางวินัย
+/** redirect ไปยังการเพิ่มออกคำสั่งลงโทษทางวินัย */
 function redirectToPageadd() {
   router.push(`/discipline-order/add`);
 }
+
+/** โหลดข้อมูลเมื่อเข้าหน้านี้ */
+onMounted(async () => {
+  await fetchListOrder();
+});
 </script>
 
 <template>
@@ -71,10 +68,12 @@ function redirectToPageadd() {
           color="primary"
           icon="mdi-plus"
           @click="redirectToPageadd()"
-          ><q-tooltip>เพิ่มรายการออกคำสั่งลงโทษทางวินัย </q-tooltip></q-btn
         >
+          <q-tooltip>เพิ่มรายการออกคำสั่งลงโทษทางวินัย </q-tooltip>
+        </q-btn>
       </div>
       <q-space />
+
       <q-input
         class="col-xs-12 col-sm-3 col-md-2"
         for="inputFilterTable"
@@ -87,6 +86,7 @@ function redirectToPageadd() {
           <q-icon name="search" />
         </template>
       </q-input>
+
       <q-select
         for="selectVisibleColumns"
         class="col-xs-12 col-sm-3 col-md-2"
@@ -103,6 +103,7 @@ function redirectToPageadd() {
         options-cover
       />
     </div>
+    
     <div class="col-12">
       <tableOrder :filterTable="filterTable" />
     </div>
diff --git a/src/modules/11_discipline/components/4_Order/OrderPage.vue b/src/modules/11_discipline/components/4_Order/OrderPage.vue
index 8b691c503..06860e637 100644
--- a/src/modules/11_discipline/components/4_Order/OrderPage.vue
+++ b/src/modules/11_discipline/components/4_Order/OrderPage.vue
@@ -2,20 +2,21 @@
 import { ref } from "vue";
 import { useRouter } from "vue-router";
 
-// import step
+/** import step */
 import step01 from "@/modules/11_discipline/components/4_Order/Step01.vue";
 import step02 from "@/modules/11_discipline/components/4_Order/Step02.vue";
 import step03 from "@/modules/11_discipline/components/4_Order/Step03.vue";
 
 const router = useRouter();
-
 const step = ref<number>(1);
-// nextStep
+
+/** nextStep */
 const nextStep = async () => {
   localStorage.setItem("currentStep", step.value.toString());
   step.value++;
 };
-// previousStep
+
+/** previousStep */
 const previousStep = async () => {
   localStorage.setItem("currentStep", step.value.toString());
   step.value--;
diff --git a/src/modules/11_discipline/components/4_Order/Step01.vue b/src/modules/11_discipline/components/4_Order/Step01.vue
index 105c4b9c8..b02bcc619 100644
--- a/src/modules/11_discipline/components/4_Order/Step01.vue
+++ b/src/modules/11_discipline/components/4_Order/Step01.vue
@@ -14,6 +14,8 @@ const mixin = useCounterMixin();
 const { date2Thai, dialogConfirm } = mixin;
 const $q = useQuasar();
 
+
+/** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   next: {
     type: Function,
@@ -24,8 +26,8 @@ const props = defineProps({
     default: () => console.log("not function"),
   },
 });
-const next = () => props.next();
-// Options ต่างๆ
+
+/** Options ต่างๆ */
 const orderTypeOptions = ref<DataOption[]>([
   { id: "0", name: "ประเภทคำสั่ง 1" },
   { id: "1", name: "ประเภทคำสั่ง 2" },
@@ -41,7 +43,8 @@ const listInvestigationOptions = ref<DataOption[]>([
   { id: "1", name: "รายการสอบสวนความผิดทางวินัย 2" },
   { id: "2", name: "รายการสอบสวนความผิดทางวินัย 3" },
 ]);
-// ตัวแปรทั้งหมด
+
+/** ข้อมูล v-model ของฟอร์ม */
 const formData = reactive<FormData>({
   orderType: "",
   orderBy: "",
@@ -55,7 +58,7 @@ const formData = reactive<FormData>({
   mistakeDetail: "",
 });
 
-// validateForm
+/** ตัวแปร ref สำหรับแสดง validate */
 const orderTypeRef = ref<Object | null>(null);
 const orderByRef = ref<Object | null>(null);
 const listInvestigationRef = ref<Object | null>(null);
@@ -66,6 +69,8 @@ const dateRef = ref<Object | null>(null);
 const authorityPositionRef = ref<Object | null>(null);
 const subjectRef = ref<Object | null>(null);
 const mistakeDetailRef = ref<Object | null>(null);
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const myObjectRef: MyObjectRef = {
   orderType: orderTypeRef,
   orderBy: orderByRef,
@@ -78,6 +83,13 @@ const myObjectRef: MyObjectRef = {
   subject: subjectRef,
   mistakeDetail: mistakeDetailRef,
 };
+
+/**ฟังชั่น ไป step ต่อไป */
+function next() {
+  props.next();
+}
+
+/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function validateForm() {
   const hasError = [];
   for (const key in myObjectRef) {
@@ -96,6 +108,7 @@ function validateForm() {
   }
 }
 
+/** ฟังชั่น บันทึก */
 function onSubmit() {
   console.log(formData);
   dialogConfirm(
@@ -131,6 +144,7 @@ function onSubmit() {
             use-input
           />
         </div>
+
         <div class="col-xs-12 col-sm-6">
           คำสั่งโดย
           <q-select
@@ -149,6 +163,7 @@ function onSubmit() {
             use-input
           />
         </div>
+
         <div class="col-xs-12 col-sm-6">
           เลือกรายการสอบสวนความผิดทางวินัย
           <q-select
@@ -169,6 +184,7 @@ function onSubmit() {
             use-input
           />
         </div>
+
         <div class="col-xs-12 col-sm-6">
           ผู้มีอำนาจลงนาม
           <q-input
@@ -182,6 +198,7 @@ function onSubmit() {
             lazy-rules
           />
         </div>
+
         <div class="row col-xs-7 col-sm-3">
           <div class="col-6">
             คำสั่งที่
@@ -197,6 +214,7 @@ function onSubmit() {
             >
             </q-input>
           </div>
+
           <label class="col-1 flex justify-center items-center text-bold"
             >/</label
           >
@@ -229,6 +247,7 @@ function onSubmit() {
             </datepicker>
           </div>
         </div>
+
         <div class="col-xs-5 col-sm-3">
           วันที่มีผลคำสั่ง
           <datepicker
@@ -270,6 +289,7 @@ function onSubmit() {
             </template>
           </datepicker>
         </div>
+
         <div class="col-xs-12 col-sm-6">
           ตำแหน่งผู้มีอำนาจลงนาม
           <q-input
@@ -283,6 +303,7 @@ function onSubmit() {
             lazy-rules
           />
         </div>
+
         <div class="col-xs-12 col-sm-6">
           คำสั่งเรื่อง
           <q-input
@@ -296,6 +317,7 @@ function onSubmit() {
             lazy-rules
           />
         </div>
+
         <div class="col-xs-12 col-sm-12">
           รายละเอียดการกระทำความผิด
           <q-input
diff --git a/src/modules/11_discipline/components/4_Order/Step02.vue b/src/modules/11_discipline/components/4_Order/Step02.vue
index a34136ed6..1eb6a7884 100644
--- a/src/modules/11_discipline/components/4_Order/Step02.vue
+++ b/src/modules/11_discipline/components/4_Order/Step02.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
+
+/** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   next: {
     type: Function,
@@ -10,21 +12,25 @@ const props = defineProps({
     default: () => console.log("not function"),
   },
 });
-const next = () => props.next();
-const previous = () => props.previous();
+
 
 const name = ref<string>("");
 const lastname = ref<string>("");
 const age = ref<string>("");
 
+/** ตัวแปร ref สำหรับแสดง validate */
 const nameRef = ref<any>(null);
 const ageRef = ref<any>(null);
 const lastnameRef = ref<any>(null);
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const myObject: MyObject = {
   name: nameRef,
   lastname: lastnameRef,
   age: ageRef,
 };
+
+/** กำหนด type */
 interface MyObject {
   name: any;
   lastname: any;
@@ -32,6 +38,17 @@ interface MyObject {
   [key: string]: any;
 }
 
+/**ฟังชั่น ไป step ต่อไป */
+function next() {
+  props.next();
+}
+
+/**ฟังชั่น ไป step ก่อนหน้า */
+function previous() {
+  props.previous();
+}
+
+/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function onSubmit() {
   const hasError = [];
   for (const key in myObject) {
@@ -63,6 +80,7 @@ function onSubmit() {
       lazy-rules
       :rules="[(val) => !!val || `${'Name and surname'}`]"
     />
+
     <q-input
       ref="lastnameRef"
       filled
@@ -71,6 +89,7 @@ function onSubmit() {
       lazy-rules
       :rules="[(val) => !!val || `${'lastname'}`]"
     />
+
     <q-input
       ref="ageRef"
       filled
@@ -94,6 +113,7 @@ function onSubmit() {
       @click="previous()"
       class="q-px-md"
     />
+    
     <q-btn
       dense
       unelevated
diff --git a/src/modules/11_discipline/components/4_Order/Step03.vue b/src/modules/11_discipline/components/4_Order/Step03.vue
index f3daddd87..aafc0680e 100644
--- a/src/modules/11_discipline/components/4_Order/Step03.vue
+++ b/src/modules/11_discipline/components/4_Order/Step03.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+
+/** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   next: {
     type: Function,
@@ -9,8 +11,11 @@ const props = defineProps({
     default: () => console.log("not function"),
   },
 });
-const next = () => props.next();
-const previous = () => props.previous();
+
+/**ฟังชั่น ไป step ก่อนหน้า */
+function previous() {
+  props.previous();
+}
 </script>
 
 <template>
diff --git a/src/modules/11_discipline/components/4_Order/TableOrder.vue b/src/modules/11_discipline/components/4_Order/TableOrder.vue
index 02ec83d2d..af1b6247a 100644
--- a/src/modules/11_discipline/components/4_Order/TableOrder.vue
+++ b/src/modules/11_discipline/components/4_Order/TableOrder.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-// importType
+/** importType */
 import type { QTableProps } from "quasar";
-// importStroe
+/** importStroe */
 import { useOrderStore } from "@/modules/11_discipline/store/OrderStore";
 
 const OrderStore = useOrderStore();
 
+/** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   filterTable: {
     type: String,
@@ -14,6 +15,7 @@ const props = defineProps({
   },
 });
 
+/** ข้อมูลที่เเสดงใน คอลัม */
 const columns = ref<QTableProps["columns"]>([
   {
     name: "subject",
@@ -70,6 +72,8 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+
+/** หัวตาราง */
 const visibleColumns = ref<string[]>([
   "subject",
   "ordernumber",
@@ -79,12 +83,13 @@ const visibleColumns = ref<string[]>([
   "statusorder",
 ]);
 
+/** โหลดข้อมูลเมื่อเข้าหน้านี้ */
 onMounted(() => {
   OrderStore.columns = columns.value;
   OrderStore.visibleColumns = visibleColumns.value;
 });
 
-//pagination
+/** pagination */
 const pagination = ref({
   descending: true,
   page: 1,
diff --git a/src/modules/11_discipline/components/5_Report/DetailPage.vue b/src/modules/11_discipline/components/5_Report/DetailPage.vue
index 994a14b47..19fa79b52 100644
--- a/src/modules/11_discipline/components/5_Report/DetailPage.vue
+++ b/src/modules/11_discipline/components/5_Report/DetailPage.vue
@@ -9,14 +9,17 @@ import { useReportDataStore } from "@/modules/11_discipline/store/ReportStore";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+
 const date = ref<Date>();
 const dateEnd = ref<Date>();
 const route = useRoute();
 const typeReport = route.params.type.toString();
+
 const store = useReportDataStore();
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader, date2Thai } = mixin;
 const { filterFnOptionsType } = store;
+
 const $q = useQuasar();
 const ocSelect = ref<string>("");
 const government = ref<string>("");
@@ -25,18 +28,15 @@ const pdfSrc = ref<any>();
 const numOfPages = ref<number>(0);
 const page = ref<number>(1);
 const titleReport = ref<string>("");
-
-onMounted(async () => {
-  let report = store.optionReport.find((e: DataOption) => e.id == typeReport);
-  report && (titleReport.value = report.name);
-});
-
 const splitterModel = ref(14);
-const backHistory = () => {
+
+/** กลับหน้าหลัก */
+function backHistory(){
   window.history.back();
 };
 
-const showDocument = (url: any) => {
+/** แสดงรายงาน */
+function showDocument(url: any){
   const pdfData = usePDF(url);
 
   setTimeout(() => {
@@ -44,16 +44,26 @@ const showDocument = (url: any) => {
     numOfPages.value = pdfData.pages.value;
   }, 1000);
 };
-const nextPage = () => {
+
+/** ไปหน้าต่อไปของรายงาน */
+function nextPage(){
   if (page.value < numOfPages.value) {
     page.value++;
   }
 };
-const backPage = () => {
+
+/** กลับหน้าก่อนหน้าของรายงาน */
+function backPage(){
   if (page.value !== 1) {
     page.value--;
   }
 };
+
+/** โหลดข้อมูลเมื่อเข้าหน้านี้ */
+onMounted(async () => {
+  let report = store.optionReport.find((e: DataOption) => e.id == typeReport);
+  report && (titleReport.value = report.name);
+});
 </script>
 <template>
   <div class="toptitle">
@@ -103,6 +113,7 @@ const backPage = () => {
                 </q-input>
               </template>
             </datepicker>
+
           </div>
           <div class="q-pl-xs">
             <datepicker
@@ -134,6 +145,7 @@ const backPage = () => {
                 </q-input>
               </template>
             </datepicker>
+
           </div>
           <q-space />
           <div class="q-py-xs">
@@ -143,6 +155,7 @@ const backPage = () => {
             </q-btn>
           </div>
         </q-toolbar>
+
         <q-toolbar
           v-if="typeReport > '1'"
           class="q-pa-sm bg-grey-2"
@@ -172,6 +185,7 @@ const backPage = () => {
                 </q-item>
               </template>
             </q-select>
+
           </div>
           <div class="q-pl-xs">
             <q-select
@@ -197,6 +211,7 @@ const backPage = () => {
                 </q-item>
               </template>
             </q-select>
+
           </div>
           <div v-if="typeReport > '2'" class="q-pl-xs">
             <q-select
@@ -222,6 +237,7 @@ const backPage = () => {
                 </q-item>
               </template>
             </q-select>
+
           </div>
         </q-toolbar>
         <q-splitter
@@ -249,6 +265,7 @@ const backPage = () => {
                     @click="backPage"
                     :disable="page == 1"
                   />
+
                 </div>
                 <div class="col-12 col-md-auto">
                   <div class="q-pa-md flex">
@@ -265,6 +282,7 @@ const backPage = () => {
                     @click="nextPage"
                     :disable="page === numOfPages"
                   />
+
                 </div>
               </div>
             </div>
@@ -289,6 +307,7 @@ const backPage = () => {
                     :disable="page == 1"
                   />
                 </div>
+
                 <div class="col-12 col-md-auto">
                   <div class="q-pa-md flex">
                     หน้าที่ {{ page }} จาก {{ numOfPages }}
diff --git a/src/modules/11_discipline/components/5_Report/MainPage.vue b/src/modules/11_discipline/components/5_Report/MainPage.vue
index 6fbf0a194..2a6c3bd91 100644
--- a/src/modules/11_discipline/components/5_Report/MainPage.vue
+++ b/src/modules/11_discipline/components/5_Report/MainPage.vue
@@ -4,9 +4,14 @@ import { useRouter } from "vue-router";
 const router = useRouter();
 // const store = useInsigniaDataStore();
 
-const nextPage = (type: string, title: string) => {
+/**
+ * เข้าสู้หน้าของรายการ เเต่ละ ประเภท
+ * @param type ประเภท
+ * @param title ชื่อประเภท
+ */
+function nextPage(type: string, title: string) {
   router.push(`/discipline/report/${type}`);
-};
+}
 </script>
 
 <template>
@@ -18,12 +23,7 @@ const nextPage = (type: string, title: string) => {
       <div class="q-pa-md">
         <q-item
           clickable
-          @click="
-            nextPage(
-              '1',
-              'รายงานเรื่องร้องเรียนแยกรายวัน รายเดือน รายปี'
-            )
-          "
+          @click=" nextPage('1', 'รายงานเรื่องร้องเรียนแยกรายวัน รายเดือน รายปี') "
           dense
           class="hover-green"
         >
@@ -37,9 +37,7 @@ const nextPage = (type: string, title: string) => {
 
         <q-item
           clickable
-          @click="
-            nextPage('2', 'รายงานเรื่องร้องเรียนข้าราชการสามัญฯ ในสังกัดกรุงเทพมหานคร แยกตามหน่วยงาน')
-          "
+          @click=" nextPage( '2', 'รายงานเรื่องร้องเรียนข้าราชการสามัญฯ ในสังกัดกรุงเทพมหานคร แยกตามหน่วยงาน' ) "
           dense
           class="hover-green"
         >
@@ -47,13 +45,14 @@ const nextPage = (type: string, title: string) => {
             <q-icon color="primary" name="mdi-file" size="xs" />
           </q-item-section>
           <q-item-section class="text-dark">
-            รายงานเรื่องร้องเรียนข้าราชการสามัญฯ ในสังกัดกรุงเทพมหานคร แยกตามหน่วยงาน
+            รายงานเรื่องร้องเรียนข้าราชการสามัญฯ ในสังกัดกรุงเทพมหานคร
+            แยกตามหน่วยงาน
           </q-item-section>
         </q-item>
 
         <q-item
           clickable
-          @click="nextPage('3', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัย แยกตามลักษณะความผิด')"
+          @click=" nextPage( '3', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัย แยกตามลักษณะความผิด' ) "
           dense
           class="hover-green"
         >
@@ -61,12 +60,14 @@ const nextPage = (type: string, title: string) => {
             <q-icon color="primary" name="mdi-file" size="xs" />
           </q-item-section>
           <q-item-section class="text-dark">
-            รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัย แยกตามลักษณะความผิด
+            รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัย
+            แยกตามลักษณะความผิด
           </q-item-section>
         </q-item>
+
         <q-item
           clickable
-          @click="nextPage('4', 'รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด')"
+          @click=" nextPage( '4', 'รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด' ) "
           dense
           class="hover-green"
         >
@@ -74,12 +75,14 @@ const nextPage = (type: string, title: string) => {
             <q-icon color="primary" name="mdi-file" size="xs" />
           </q-item-section>
           <q-item-section class="text-dark">
-            รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด
+            รายงานรายชื่อข้าราชการสามัญฯ
+            ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด
           </q-item-section>
         </q-item>
+
         <q-item
           clickable
-          @click="nextPage('5', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดแยกตามระดับความผิด')"
+          @click=" nextPage( '5', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดแยกตามระดับความผิด' ) "
           dense
           class="hover-green"
         >
@@ -90,9 +93,10 @@ const nextPage = (type: string, title: string) => {
             รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดแยกตามระดับความผิด
           </q-item-section>
         </q-item>
+
         <q-item
           clickable
-          @click="nextPage('6', 'รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด')"
+          @click=" nextPage( '6', 'รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด' ) "
           dense
           class="hover-green"
         >
@@ -100,12 +104,14 @@ const nextPage = (type: string, title: string) => {
             <q-icon color="primary" name="mdi-file" size="xs" />
           </q-item-section>
           <q-item-section class="text-dark">
-            รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด
+            รายงานรายชื่อข้าราชการสามัญฯ
+            ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด
           </q-item-section>
         </q-item>
+
         <q-item
           clickable
-          @click="nextPage('7', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกลักษณะความผิด')"
+          @click=" nextPage( '7', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกลักษณะความผิด' ) "
           dense
           class="hover-green"
         >
@@ -113,12 +119,14 @@ const nextPage = (type: string, title: string) => {
             <q-icon color="primary" name="mdi-file" size="xs" />
           </q-item-section>
           <q-item-section class="text-dark">
-            รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกลักษณะความผิด
+            รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง
+            แยกลักษณะความผิด
           </q-item-section>
         </q-item>
+
         <q-item
           clickable
-          @click="nextPage('8', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกตามตำแหน่ง')"
+          @click=" nextPage( '8', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกตามตำแหน่ง' ) "
           dense
           class="hover-green"
         >
@@ -126,10 +134,10 @@ const nextPage = (type: string, title: string) => {
             <q-icon color="primary" name="mdi-file" size="xs" />
           </q-item-section>
           <q-item-section class="text-dark">
-            รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกตามตำแหน่ง
+            รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง
+            แยกตามตำแหน่ง
           </q-item-section>
         </q-item>
-       
       </div>
     </q-card>
   </div>