จัดโค้ด เรื่อง เรื่องร้องเรียน

src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue

@@ -6,7 +6,6 @@ const router = useRouter();
 
 /** บันทึกข้อมูล */
 async function onSubmit () {
-  
   /** post */
   console.log("add");
   router.push(`/discipline/complaints`);

src/modules/11_discipline/components/1_Complaint/EditPage.vue

@@ -1,17 +1,14 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from "vue";
 import Form from "@/modules/11_discipline/components/1_Complaint/Form.vue";
-import type { FormData } from "@/modules/11_discipline/interface/request/complaint";
 import { useRouter, useRoute } from "vue-router";
+import type { FormData } from "@/modules/11_discipline/interface/request/complaint";
 
 const router = useRouter();
 const route = useRoute();
 const id = ref<string>(route.params.id as string);
-onMounted(() => {
-  fetchData();
-});
 
-// get ข้อมูลเก่ากรณีแก้ไขข้อมูล
+/** ข้อมูล v-model ของฟอร์ม */
 const data = reactive<FormData>({
   complainantType: "",
   complainant: "",
@@ -28,8 +25,9 @@ const data = reactive<FormData>({
   petitioner: "",
   files: null,
 });
+
+/** ดึงค่าจาก api */
 const fetchData = async () => {
-  // ดึงค่าจาก api
   data.complainantType = "2"
   data.complainant = "1"
   data.office = "0"
@@ -46,12 +44,16 @@ const fetchData = async () => {
   data.files = ""
 };
 
-// แก้ไขข้อมูล
+/** ฟังชั่น แก้ไข */
-const onSubmit = async () => {
+async function onSubmit() {
-  // put
   console.log("edit");
   router.push(`/discipline/complaints`);
 };
+
+/** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
+onMounted(() => {
+  fetchData();
+});
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-11">

src/modules/11_discipline/components/1_Complaint/Form.vue

@@ -3,28 +3,28 @@ import { ref, onMounted, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 
-/** import Type */ 
+/** import Type */
 import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
 import type {
   FormData,
   MyObjectComplaintsRef,
 } from "@/modules/11_discipline/interface/request/complaint";
 
-/** importStroe*/ 
+/** importStroe*/
 import { useCounterMixin } from "@/stores/mixin";
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
 
 const $q = useQuasar();
 const router = useRouter();
-const mixin = useCounterMixin();
-const { date2Thai, dialogConfirm } = mixin;
-const complainstStore = useComplainstDataStore();
-
 const fileDocDataUpload = ref<File[]>([]);
 
+/** เรียกใช้ store */
+const mixin = useCounterMixin();
+const complainstStore = useComplainstDataStore();
+const { date2Thai, dialogConfirm } = mixin;
 const { selectComplainantTpye, filterSelector } = complainstStore; // function จาก store complainstStore
 
-// validateForm
+/** validateForm */
 const complainantTypeRef = ref<Object | null>(null);
 const complainantRef = ref<Object | null>(null);
 const officeRef = ref<Object | null>(null);
@@ -52,7 +52,7 @@ const props = defineProps({
   },
 });
 
-/** ข้อมูล form*/ 
+/** ข้อมูล form*/
 const formData = reactive<FormData>({
   complainantType: "",
   complainant: "",
@@ -70,7 +70,25 @@ const formData = reactive<FormData>({
   files: null,
 });
 
-// options ทั้งหมด
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const objectComplaintsRef: MyObjectComplaintsRef = {
+  complainantType: complainantTypeRef,
+  complainant: complainantRef,
+  office: officeRef,
+  agency: agencyRef,
+  topicComplaint: topicComplaintRef,
+  detail: detailRef,
+  datereceive: datereceiveRef,
+  dateconsideration: dateconsiderationRef,
+  offenseDescription: offenseDescriptionRef,
+  considerationLevel: considerationLevelRef,
+  datewarn: datewarnRef,
+  receivecomplaints: receivecomplaintsRef,
+  petitioner: petitionerRef,
+  files: filesRef,
+};
+
+/** options ทั้งหมด*/
 const offenseDescriptiontoptions = ref<DataOption[]>([
   { id: "0", name: "ยังไม่ระบุ" },
   { id: "1", name: "ไม่ร้ายแรง" },
@@ -91,10 +109,10 @@ const receivecomplaintstoptions = ref<DataOption[]>([
   { id: "6", name: "บอกกล่าว" },
 ]);
 
-
+/**
-
+ * รับค่าผู้ถูกร้องเรียน
-
+ * @param val บุคคล หน่วยงาน กทม
-// เลือกผู้ร้องเรียน
+ */
 async function selectComplainant(val: string) {
   formData.complainant = "";
   formData.office = "";
@@ -105,7 +123,8 @@ async function selectComplainant(val: string) {
     await fetchOffice(); // ถ้าเลือกหน่วยงานจะเรียก function fetchOffice  เรียกโครงสร้างสำนักงาน
   }
 }
-// เรียกรายชื่อ
+
+/** เรียกรายชื่อ */
 async function fetchListname() {
   const listName = [
     {
@@ -123,30 +142,24 @@ async function fetchListname() {
   ];
   selectComplainantTpye(listName);
 }
-// เรียกโครงสร้างสำนักงาน
+
-async function fetchOffice() {
+/** เรียกโครงสร้างสำนักงาน */
-  // const listOffice = [
+async function fetchOffice() {}
-  //   {
+
-  //     id: "1",
+/**
-  //     name: "สำนักเอ",
+ * ฟังชั่นอัปโหลดไฟล์
-  //   },
+ * @param files ไฟล์ที่รับมา
-  //   {
+ */
-  //     id: "2",
+async function fileUploadDoc(files: any) {
-  //     name: "สำนักเอ",
-  //   },
-  //   {
-  //     id: "3",
-  //     name: "สำนักเอ",
-  //   },
-  // ];
-}
-// อัพโหลดไฟล์
-const fileUploadDoc = async (files: any) => {
   files.forEach((file: any) => {
     fileDocDataUpload.value.push(file);
   });
-};
+}
-// เลือกระดับการพิจารณา
+
+/**
+ * เลือกระดับการพิจารณา
+ * @param val รับตัวเลข ในรูปแบบ string
+ */
 function selectLevel(val: string) {
   let dayNum = 0;
   if (val == "3") {
@@ -166,24 +179,7 @@ function selectLevel(val: string) {
   }
 }
 
-
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-
-const objectComplaintsRef: MyObjectComplaintsRef = {
-  complainantType: complainantTypeRef,
-  complainant: complainantRef,
-  office: officeRef,
-  agency: agencyRef,
-  topicComplaint: topicComplaintRef,
-  detail: detailRef,
-  datereceive: datereceiveRef,
-  dateconsideration: dateconsiderationRef,
-  offenseDescription: offenseDescriptionRef,
-  considerationLevel: considerationLevelRef,
-  datewarn: datewarnRef,
-  receivecomplaints: receivecomplaintsRef,
-  petitioner: petitionerRef,
-  files: filesRef,
-};
 function validateForm() {
   const hasError = [];
   for (const key in objectComplaintsRef) {
@@ -201,19 +197,21 @@ function validateForm() {
     console.log("ไม่ผ่าน ");
   }
 }
-// บันทึกข้อมูล
+
+/** ฟังชั่น บันทึก */
 function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
       console.log(formData);
-      props.onSubmit()
+      props.onSubmit();
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
   );
 }
 
+/** เช็คข้อมูลจาก props*/
 watch(props.data, async () => {
   formData.complainantType = props.data.complainantType;
   formData.complainant = props.data.complainant;
@@ -236,29 +234,27 @@ watch(props.data, async () => {
     <q-card flat bordered>
       <form @submit.prevent="validateForm">
         <div class="col-12 row q-pa-md">
-          <div
+          <div class="col-xs-12 col-sm-12 row q-col-gutter-md">
-            class="col-xs-12 col-sm-12 row q-col-gutter-md"
-          >
             <div class="col-xs-12 col-sm-3" id="complainantType">
               <q-select
                 for="SelectcomplainantType"
+                v-model="formData.complainantType"
                 ref="complainantTypeRef"
                 dense
                 outlined
-                v-model="formData.complainantType"
-                :options="complainstStore.complainantoptions"
                 label="ผู้ถูกร้องเรียน"
                 option-value="id"
                 option-label="name"
                 emit-value
+                use-input
                 map-options
                 hide-bottom-space
+                :options="complainstStore.complainantoptions"
                 :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
                 lazy-rules
                 @update:model-value="
                   selectComplainant(formData.complainantType)
                 "
-                use-input
                 @filter="(inputValue: any,
                 doneFn: Function) => filterSelector(inputValue, doneFn, 'filtercomplainantType'
                 )"
@@ -306,6 +302,7 @@ watch(props.data, async () => {
                 </template>
               </q-select>
             </div>
+
             <div
               class="col-xs-12 col-sm-3"
               v-if="formData.complainantType === '1'"
@@ -324,6 +321,7 @@ watch(props.data, async () => {
                 lazy-rules
               />
             </div>
+
             <div class="col-xs-12 col-sm-3" id="agency">
               <q-select
                 ref="agencyRef"
@@ -354,6 +352,7 @@ watch(props.data, async () => {
                 </template>
               </q-select>
             </div>
+
             <div class="col-xs-12 col-sm-12" id="topicComplaint">
               <q-input
                 for="inputTopicComplaint"
@@ -369,6 +368,7 @@ watch(props.data, async () => {
                 rows="5"
               />
             </div>
+
             <div class="col-xs-12 col-sm-12" id="detail">
               <q-input
                 for="inputDetail"
@@ -384,6 +384,7 @@ watch(props.data, async () => {
                 rows="5"
               />
             </div>
+
             <div class="col-xs-12 col-sm-3" id="datereceive">
               <datepicker
                 menu-class-name="modalfix"
@@ -451,6 +452,7 @@ watch(props.data, async () => {
                 @update:model-value="selectLevel(formData.considerationLevel)"
               />
             </div>
+
             <div class="col-xs-12 col-sm-3" id="dateconsideration">
               <datepicker
                 menu-class-name="modalfix"
@@ -499,6 +501,7 @@ watch(props.data, async () => {
                 </template>
               </datepicker>
             </div>
+
             <div class="col-xs-12 col-sm-3" id="offenseDescription">
               <q-select
                 for="selectOffenseDescription"
@@ -566,6 +569,7 @@ watch(props.data, async () => {
                 </template>
               </datepicker>
             </div>
+
             <div class="col-xs-12 col-sm-3" id="receivecomplaints">
               <q-select
                 for="selectReceivecomplaints"
@@ -584,6 +588,7 @@ watch(props.data, async () => {
                 lazy-rules
               />
             </div>
+
             <div class="col-xs-12 col-sm-12" id="petitioner">
               <q-input
                 for="inputPetitioner"
@@ -599,6 +604,7 @@ watch(props.data, async () => {
                 rows="5"
               />
             </div>
+
             <div class="col-12" id="files">
               <q-file
                 for="inputFiles"

src/modules/11_discipline/components/1_Complaint/MainPage.vue

@@ -11,17 +11,13 @@ import TableComplaint from "@/modules/11_discipline/components/1_Complaint/Table
 
 const router = useRouter();
 
+/** stoer */
 const complainstStore = useComplainstDataStore();
-const { fetchComplainst } = complainstStore; // function จาก stores
+const { fetchComplainst } = complainstStore;
 
-//ข้อมูล Table
 const filterTable = ref<string>("");
 
-onMounted(async () => {
+/**เรีนกรายการเรื่องร้องเรียน */
-  await fetchListComplaints();
-});
-
-// เรีนกรายการเรื่องร้องเรียน
 async function fetchListComplaints() {
   const listData: DataList[] = [
     {
@@ -58,9 +54,15 @@ async function fetchListComplaints() {
   ];
   await fetchComplainst(listData);
 }
+/** ไปยังหน้าเพิ่มข้อมูล */
 function redirectToPageadd() {
   router.push(`/discipline/complaints/add`);
 }
+
+/** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
+onMounted(async () => {
+  await fetchListComplaints();
+});
 </script>
 
 <template>
@@ -80,7 +82,9 @@ function redirectToPageadd() {
           ><q-tooltip>เพิ่มเรื่องร้องเรียน </q-tooltip></q-btn
         >
       </div>
+
       <q-space />
+      
       <q-input
         class="col-xs-12 col-sm-3 col-md-2"
         id="filterTable"
@@ -95,6 +99,7 @@ function redirectToPageadd() {
           <q-icon name="search" />
         </template>
       </q-input>
+      
       <q-select
         id="visibleColumns"
         for="visibleColumns"
@@ -112,6 +117,7 @@ function redirectToPageadd() {
         class="col-xs-12 col-sm-3 col-md-2"
       />
     </div>
+
     <div class="col-12">
       <TableComplaint :filterTable="filterTable" />
     </div>

src/modules/11_discipline/components/1_Complaint/TableComplaint.vue

@@ -5,16 +5,19 @@ import type { QTableProps } from "quasar";
 // importStroe
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
 import { useRoute, useRouter } from "vue-router";
-const router = useRouter();
 
+const router = useRouter();
 const complainstStore = useComplainstDataStore();
 
+/** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   filterTable: {
     type: String,
     default: "",
   },
 });
+
+/** หัวตาราง */
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -89,6 +92,8 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+
+/** หัวข้อที่เเสดงในตาราง */
 const visibleColumns = ref<string[]>([
   "no",
   "subject",
@@ -100,17 +105,22 @@ const visibleColumns = ref<string[]>([
   "considerationDeadlineDate",
 ]);
 
+/** เริ่มโหลดหน้า page เอาข้อมูลไปเก็บ ใน store*/
 onMounted(() => {
   complainstStore.columns = columns.value;
   complainstStore.visibleColumns = visibleColumns.value;
 });
 
-//pagination
+/** แสดงจำนวนในตาราง */
 const pagination = ref({
   descending: true,
   page: 1,
   rowsPerPage: 10,
 });
+/**
+ * ฟังชั่นสำหรับ เปลี่ยน route ตาม id ที่รับมา
+ * @param id ไอดีระบุ
+ */
 function OpenEdit(id:string){
   console.log(id)
   router.push(`/discipline/complaints/${id}`)