จัด โค้ด รายการสืบสวนข้อเท็จจริง

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

@@ -211,7 +211,11 @@ function onSubmit() {
   );
 }
 
-/** เช็คข้อมูลจาก props*/
+/** 
+ * เช็คข้อมูลจาก props
+ * เมื่อมีข้อมูล
+ * เก็บข้อมูลลง formData
+ */
 watch(props.data, async () => {
   formData.complainantType = props.data.complainantType;
   formData.complainant = props.data.complainant;

src/modules/11_discipline/components/2_InvestigateFacts/AddPage.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import Form from "@/modules/11_discipline/components/2_InvestigateFacts/Form.vue";
 import { useRoute, useRouter } from "vue-router";
+
 const router = useRouter();
 
-// บันทึกข้อมูล
-const onSubmit = async () => {
-  // post
+/** บันทึกข้อมูลเเละ route กลับหน้าหลัก */
+async function onSubmit(){
   console.log("add");
   router.push(`/discipline/investigatefacts`);
 };

src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue

@@ -7,11 +7,9 @@ import { useRouter, useRoute } from "vue-router";
 const router = useRouter();
 const route = useRoute();
 const id = ref<string>(route.params.id as string);
-onMounted(() => {
-  fetchData();
-});
 
-// get ข้อมูลเก่ากรณีแก้ไขข้อมูล
+
+/** ข้อมูล v-model ของฟอร์ม */
 const data = reactive<FormData>({
   complaint: "",
   complaintdetail: "",
@@ -29,6 +27,7 @@ const data = reactive<FormData>({
   causeText: "",
 });
 
+/** จำลองข้อมูลจาก api */
 const fetchData = async () => {
   // ดึงค่าจาก api
   data.complaint = "เรื่องที่ 1";
@@ -47,12 +46,20 @@ const fetchData = async () => {
   data.causeText = "";
 };
 
-// แก้ไขข้อมูล
-const onSubmit = async (id: string) => {
+/**
+ * บันทึกข้อมูลที่เเก้ไข
+ * @param id ระบุ บุคคล
+ */
+async function onSubmit(id:string){
   // put
-  console.log("edit");
+  console.log("edit",id);
   router.push(`/discipline/investigatefacts`);
 };
+
+/** โหลดข้อมูลเมื่อเข้าหน้านี้ */
+onMounted(() => {
+  fetchData();
+});
 </script>
 
 <template>

src/modules/11_discipline/components/2_InvestigateFacts/Form.vue

@@ -12,26 +12,16 @@ import { diffDates } from "@fullcalendar/core/internal";
 
 const $q = useQuasar();
 
-const investigateFactStore = useInvestigateFactStore(); // เรียกใช้ store
-const { filterFnOptionsType } = investigateFactStore; // เรียกใช้ filterFnOptionsType จาก store
-
-const mixin = useCounterMixin(); // เรียกใช้ mixin
-const { date2Thai, dialogConfirm } = mixin; // เรียกใช้ date2Thai, dialogConfirm จาก mixin
-
-const props = defineProps({
-  data: {
-    type: Object,
-    default: null,
-  },
-  onSubmit: {
-    type: Function,
-    default: () => "",
-  },
-});
+/**เรียกใช้ store */
+const investigateFactStore = useInvestigateFactStore(); 
+const mixin = useCounterMixin(); 
+const { filterFnOptionsType } = investigateFactStore; 
+const { date2Thai, dialogConfirm } = mixin; 
 
 const complaintsOptions = ref<any>([]);
 const isUpdate = ref<boolean>(false);
 
+/** ตัวแปร ref สำหรับแสดง validate */
 const complaintRef = ref<Object | null>(null);
 const complaintdetailRef = ref<Object | null>(null);
 const detailRef = ref<Object | null>(null);
@@ -47,6 +37,19 @@ const daysExtendRef = ref<Object | null>(null);
 const statusResultRef = ref<Object | null>(null);
 const causeTextRef = ref<Object | null>(null);
 
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
 const formData = reactive<FormData>({
   complaint: "",
   complaintdetail: "",
@@ -64,6 +67,7 @@ const formData = reactive<FormData>({
   causeText: "",
 });
 
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const objectInvestigate: MyObjectInvestigateRef = {
   complaint: complaintRef,
   complaintdetail: complaintdetailRef,
@@ -117,12 +121,21 @@ function onSubmit() {
   );
 }
 
+/**
+ * ฟังชั้นคำนวณเวลาวันที่สิ้นสุดจาก วันที่เริ่ม
+ * @param val วันที่เริ่ม
+ */
 function calEndDate(val: string) {
   const date = new Date(props.data.dateEnd);
   const dateNew = new Date();
   formData.dateEnd = new Date(dateNew.setDate(date.getDate() + Number(val)));
 }
 
+/** 
+ * เช็คข้อมูลจาก props
+ * เมื่อมีข้อมูล
+ * เก็บข้อมูลลง formData
+ */
 watch(props.data, async () => {
   if (props.data !== null) {
     isUpdate.value = true;
@@ -175,6 +188,7 @@ watch(props.data, async () => {
               </template>
             </q-select>
           </div>
+
           <div class="col-3">
             <q-select
               for="#fault"
@@ -202,6 +216,7 @@ watch(props.data, async () => {
               </template>
             </q-select>
           </div>
+
           <div class="col-3">
             <q-select
               for="#investigation"
@@ -229,6 +244,7 @@ watch(props.data, async () => {
               </template>
             </q-select>
           </div>
+
           <div v-if="formData.investigation === '003'" class="col-12">
             <q-input
               for="#other"
@@ -249,6 +265,7 @@ watch(props.data, async () => {
               ]"
             />
           </div>
+
           <div class="row col-12">
             <q-card
               bordered
@@ -271,7 +288,9 @@ watch(props.data, async () => {
                   keep-color
                 />
               </div>
+
               <div class="col-12"><q-separator /></div>
+
               <div class="col-xs-12 col-sm-12 q-pa-sm row">
                 <div class="q-col-gutter-sm row">
                   <datepicker
@@ -400,6 +419,7 @@ watch(props.data, async () => {
               </div>
             </q-card>
           </div>
+
           <div class="col-12">
             <q-input
               for="#complaintdetail"
@@ -418,6 +438,7 @@ watch(props.data, async () => {
               type="textarea"
             />
           </div>
+
           <div class="col-12">
             <q-file
               for="#fileComplaint"
@@ -435,6 +456,7 @@ watch(props.data, async () => {
               </template>
             </q-file>
           </div>
+
           <div class="col-12">
             <q-input
               for="#detail"
@@ -451,6 +473,7 @@ watch(props.data, async () => {
               type="textarea"
             />
           </div>
+
           <div class="col-12">
             <q-file
               for="#evidenceFiles"
@@ -468,6 +491,7 @@ watch(props.data, async () => {
               </template>
             </q-file>
           </div>
+          
           <div class="row col-12 q-col-gutter-md">
             <div class="col-3">
               <q-select

src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue

@@ -23,7 +23,7 @@ const { fecthList } = dataInvestigate;
 // } = mixin;
 const $q = useQuasar(); //ใช้ noti quasar
 
-// ค้นหาในตาราง
+/** ค้นหาข้อมูลในตาราง */
 const filterKeyword = ref<string>("");
 const filterRef = ref<HTMLInputElement | null>(null);
 const resetFilter = () => {
@@ -34,6 +34,8 @@ const resetFilter = () => {
 };
 
 const attrs = ref<any>(useAttrs());
+
+/** แสดงจำนวนในตาราง */
 const pagination = ref({
   // sortBy: "desc",
   descending: false,
@@ -41,9 +43,22 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
+/**ไปยังหน้าเพิ่มข้อมูล */
 const clickAdd = () => {
   router.push(`/discipline/investigatefacts/add`);
 };
+
+/**
+ * ไปหน้าแก้ไข
+ * @param id ไอดีเฉพาะ รายบุคคล
+ */
+function editPage(id: string) {
+  router.push(`/discipline/investigatefacts/${id}`);
+}
+
+/**เมื่อเริ่มโหลดหน้า 
+ * ส่งข้อมูลจำลองไปยัง store
+ */
 onMounted(async () => {
   await fecthList([
     {
@@ -80,9 +95,6 @@ onMounted(async () => {
     },
   ]);
 });
-function editPage(id: string) {
-  router.push(`/discipline/investigatefacts/${id}`);
-}
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -144,6 +156,7 @@ function editPage(id: string) {
         class="col-xs-12 col-sm-3 col-md-2"
       />
     </div>
+    
     <div class="col-12">
       <d-table
         ref="table"