จัดโค้ด รายการการสอบสวนความผิดทางวินัย

src/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue

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

src/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue

@@ -14,7 +14,7 @@ const selected = ref<directorType[]>([]);
 const mixin = useCounterMixin();
 const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
 
-//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+/** ค้นหาคอลัม */
 const visibleColumns2 = ref<string[]>([
   "no",
   "nameDirector",
@@ -24,6 +24,8 @@ const visibleColumns2 = ref<string[]>([
   "telephone",
   "role"
 ]);
+
+/**ข้อมูลหัว ตาราง*/
 const columns2 = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -104,6 +106,7 @@ const columns2 = ref<QTableProps["columns"]>([
   },
 ]);
 
+/** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   Modal: Boolean,
   clickClose: Function,
@@ -119,8 +122,8 @@ const checkSelected = computed(() => {
   console.log(checkSelected.value);
 });
 
-//popup ยืนยันส่งัว
+/** popup ยืนยันส่งัว */
-const saveDirector = () => {
+function saveDirector(){
   dialogConfirm(
     $q,
     () => DirectorSave(),
@@ -128,17 +131,22 @@ const saveDirector = () => {
     "ต้องการยืนยันเพิ่มรายชื่อกรรมการ?"
   );
 };
-//ส่งไปออกคำสั่ง
+
-const DirectorSave = async () => {};
+/** ส่งไปออกคำสั่ง */
+async function DirectorSave(){};
 
 const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
-const updateInput = (value: any) => {
+
+function updateInput(value: any){
   emit("update:filterKeyword2", value);
 };
-//รีเซ็ตค่าในช่องค้นหา
+
-const Reset = () => {
+/**รีเซ็ตค่าในช่องค้นหา */
+function Reset(){
   emit("update:filterKeyword2", "");
 };
+
+/** เช็คค่า props.Modal === true */
 watchEffect(() => {
   if (props.Modal === true) {
     selected.value = [];
@@ -172,6 +180,7 @@ watchEffect(() => {
             />
           </template>
         </q-input>
+
         <d-table
           :columns="columns2"
           :rows="rows2"
@@ -181,15 +190,6 @@ watchEffect(() => {
           selection="multiple"
           v-model:selected="selected"
         >
-          <template v-slot:header-selection="scope">
-            <!-- <q-checkbox
-              keep-color
-              color="primary"
-              dense
-              v-model="scope.selected"
-            /> -->
-          </template>
-
           <template v-slot:body="props">
             <q-tr :props="props" class="cursor-pointer">
               <q-td>

src/modules/11_discipline/components/3_InvestigateDisciplinary/DirectorTable.vue

@@ -5,10 +5,12 @@ import type { Pagination } from "@/modules/04_registry/interface/index/Main";
 const attrs = ref<any>(useAttrs());
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
+
 const initialPagination = ref<Pagination>({
   rowsPerPage: 0,
 });
 
+/** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   count: Number,
   pass: Number,
@@ -46,10 +48,12 @@ const emit = defineEmits([
   "update:inputvisible",
   "update:editvisible",
 ]);
-const updateInput = (value: string | number | null) => {
+
+function updateInput(value: string | number | null){
   emit("update:inputfilter", value);
 };
-const updateVisible = (value: []) => {
+
+function updateVisible(value: []){
   emit("update:inputvisible", value);
 };
 

src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue

@@ -1,19 +1,17 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from "vue";
-import Form from "@/modules/11_discipline/components/3_investigateDisciplinary/Form.vue";
+import Form from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue";
 import type { FormData } from "@/modules/11_discipline/interface/request/disciplinary";
 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: "",
+  complaint: "",
   dateInvestigate: null,
   dateAllegation: null,
   dateEvident: null,
@@ -33,8 +31,10 @@ const data = reactive<FormData>({
   filesWitnesses: null,
   filesEtc: null,
 });
+
+/** จำลองข้อมูลจาก api */
 const fetchData = async () => {
-  data.Complaint = "test1"
+  data.complaint = "test1"
   data.dateInvestigate = new Date("2023-11-08T14:58:00")
   data.dateAllegation = new Date("2023-11-08T14:58:00")
   data.dateEvident = new Date("2023-11-08T14:58:00")
@@ -55,12 +55,19 @@ const fetchData = async () => {
   data.filesEtc = null
 };
 
-// แก้ไขข้อมูล
+/**
-const onSubmit = async () => {
+ * บันทึกข้อมูลที่เเก้ไข
-  // put
+ * @param id ระบุ บุคคล
+ */
+const onSubmit = async (id:string) => {
   console.log("edit");
   router.push(`/discipline/disciplinary`);
 };
+
+/** โหลดข้อมูลเมื่อเข้าหน้านี้ */
+onMounted(() => {
+  fetchData();
+});
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-11">

src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue

@@ -3,51 +3,18 @@ import { ref, onMounted, reactive, watch } from "vue";
 import { useQuasar, QForm } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
+import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
+
 import Dialogbody from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue";
 import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/DirectorTable.vue";
-import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
+
 import type {
   FormData,
   disciplinaryRef,
 } from "@/modules/11_discipline/interface/request/disciplinary";
+
 const investigateDis = useInvestigateDisStore();
 const { fecthDirector } = investigateDis;
-const props = defineProps({
-  data: {
-    type: Object,
-    default: null,
-  },
-  onSubmit: {
-    type: Function,
-    default: () => "",
-  },
-});
-onMounted(async () => {
-  await fecthDirector([
-    {
-      nameDirector: "นาง เกสินี เจียรสุมัย",
-      position: "ครู",
-      duty: "ประธาน",
-      email: "e@email.com",
-      telephone: "0800808080",
-      role: "4",
-    },
-    {
-      nameDirector: "นาย สรวิชญ์ พลสิทธิ์",
-      position: "ทดลองงาน",
-      duty: "เลขานุการ",
-      email: "g@gmail.com",
-      telephone: "0614565145",
-      role: "6",
-    },
-  ]);
-  await hideLoader();
-});
-
-const popup = () => {
-  modal.value = true;
-  filterKeyword2.value = "";
-};
 
 const mixin = useCounterMixin();
 const { date2Thai, hideLoader, dialogConfirm } = mixin;
@@ -64,6 +31,9 @@ const dateInvestigate = ref<Date>(new Date());
 const dateAllegation = ref<Date>(new Date());
 const dateEvident = ref<Date>(new Date());
 const filterKeyword2 = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+
+/** ตัวแปร ref สำหรับแสดง validate */
 const complaintRef = ref<Object | null>(null);
 const dateInvestigateRef = ref<Object | null>(null);
 const dateAllegationRef = ref<Object | null>(null);
@@ -85,11 +55,23 @@ const evidenceRef = ref<Object | null>(null);
 const recordAccuserRef = ref<Object | null>(null);
 const complaintsOptions = ref<any>([]);
 
-const fileDocDataUpload = ref<File[]>([]);
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+});
+
 const initialPagination = ref<any>({
   rowsPerPage: 0,
 });
 
+/** ข้อมูล v-model ของฟอร์ม */
 const formData = reactive<FormData>({
   complaint: "",
   dateInvestigate: null,
@@ -112,6 +94,7 @@ const formData = reactive<FormData>({
   filesEtc: null,
 });
 
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const objectdisciplinary: disciplinaryRef = {
   complaint: complaintRef,
   dateInvestigate: dateInvestigateRef,
@@ -134,6 +117,13 @@ const objectdisciplinary: disciplinaryRef = {
   filesEtc: filesEtcRef,
 };
 
+/** เปิด dialog */
+function popup(){
+  modal.value = true;
+  filterKeyword2.value = "";
+};
+
+/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function validateForm() {
   const hasError = [];
   for (const key in objectdisciplinary) {
@@ -152,24 +142,26 @@ function validateForm() {
     console.log(hasError);
   }
 }
-
+/**  search data table*/
+const filter = ref<string>("");
 const routeName = router.currentRoute.value.name;
 
-const clickClose = () => {
+/** ฟังชั่นปิด dialog */
+function clickClose() {
   modal.value = false;
-};
+}
 
-// เรียกข้อมูลของรอบการเสนอขอ
+async function fileUploadDoc(files: any) {
-
-const filter = ref<string>(""); //search data table
-
-const fileUploadDoc = async (files: any) => {
   files.forEach((file: any) => {
     fileDocDataUpload.value.push(file);
   });
-};
+}
 
-// คลิกบันทึก
+/**
+ * ฟังก์ชั่นสำหรับบันทึกข้อมูล ระบบจะแสดง dialog ให้ยืนยันการบันทึก
+ * หากยืนยันจะส่งข้อมูลไปบันทึกที่ api
+ * หากยกเลิกจะกลับไปหน้าฟอร์ม
+ */
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -182,13 +174,16 @@ function onSubmit() {
   );
 }
 
-const deleteData = async (id: string) => {
+/** ฟังชั่น delect */
+async function deleteData(id: string) {
   console.log("delete");
-};
+}
 
-const clickBack = () => {
+/**
-  router.push(`/discipline/disciplinary`);
+ * เช็คข้อมูลจาก props
-};
+ * เมื่อมีข้อมูล
+ * เก็บข้อมูลลง formData
+ */
 watch(props.data, async () => {
   formData.complaint = props.data.complaint;
   formData.dateInvestigate = props.data.dateInvestigate;
@@ -210,6 +205,31 @@ watch(props.data, async () => {
   formData.filesWitnesses = props.data.filesWitnesses;
   formData.filesEtc = props.data.filesEtc;
 });
+
+/**เมื่อเริ่มโหลดหน้า 
+ * ส่งข้อมูลจำลองไปยัง store
+ */
+onMounted(async () => {
+  await fecthDirector([
+    {
+      nameDirector: "นาง เกสินี เจียรสุมัย",
+      position: "ครู",
+      duty: "ประธาน",
+      email: "e@email.com",
+      telephone: "0800808080",
+      role: "4",
+    },
+    {
+      nameDirector: "นาย สรวิชญ์ พลสิทธิ์",
+      position: "ทดลองงาน",
+      duty: "เลขานุการ",
+      email: "g@gmail.com",
+      telephone: "0614565145",
+      role: "6",
+    },
+  ]);
+  await hideLoader();
+});
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-11">
@@ -375,7 +395,7 @@ watch(props.data, async () => {
                   </q-input>
                 </template>
               </datepicker>
-              
+
               <div class="row col-12">
                 <q-card
                   bordered
@@ -465,6 +485,7 @@ watch(props.data, async () => {
                 :rules="[(val) => !!val || `${'กรุณากรอกกรณีมีความผิด'}`]"
                 lazy-rules
               />
+
               <q-input
                 class="col-xs-12 col-sm-6"
                 dense
@@ -477,6 +498,7 @@ watch(props.data, async () => {
                 :rules="[(val) => !!val || `${'กรุณากรอกสอบสวนที่'}`]"
                 lazy-rules
               />
+
               <q-select
                 dense
                 class="col-xs-12 col-sm-3"
@@ -492,6 +514,7 @@ watch(props.data, async () => {
                 :options="investigateDis.optionsTypefault"
                 label="ลักษณะความผิด"
               />
+
               <q-select
                 dense
                 class="col-xs-12 col-sm-3"
@@ -507,6 +530,7 @@ watch(props.data, async () => {
                 :options="investigateDis.optionsfaultLevel"
                 label="ระดับโทษความผิด"
               />
+
               <q-input
                 class="col-xs-12 col-sm-6"
                 dense
@@ -521,6 +545,7 @@ watch(props.data, async () => {
                 ]"
                 lazy-rules
               />
+
               <q-input
                 class="col-12"
                 dense
@@ -533,6 +558,7 @@ watch(props.data, async () => {
                 type="textarea"
                 :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`]"
               />
+
               <q-input
                 class="col-12"
                 dense
@@ -545,6 +571,7 @@ watch(props.data, async () => {
                 type="textarea"
                 :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดสืบสวนข้อเท็จจริง'}`]"
               />
+
               <div class="row col-12">
                 <q-card
                   bordered
@@ -570,6 +597,7 @@ watch(props.data, async () => {
                       type="textarea"
                       :rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
                     />
+
                     <q-file
                       class="col-12 q-mt-sm"
                       outlined
@@ -615,6 +643,7 @@ watch(props.data, async () => {
                       type="textarea"
                       :rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
                     />
+
                     <q-file
                       class="col-12 q-mt-sm"
                       outlined
@@ -660,6 +689,7 @@ watch(props.data, async () => {
                       type="textarea"
                       :rules="[(val:string) => !!val || `${'กรุณากรอกพยานและการบันทึกถ้อยคำ'}`]"
                     />
+
                     <q-file
                       class="col-12 q-mt-sm"
                       outlined
@@ -692,6 +722,7 @@ watch(props.data, async () => {
                 type="textarea"
                 :rules="[(val:string) => !!val || `${'กรุณากรอกผลการสอบสวน'}`]"
               />
+
               <q-file
                 class="col-12"
                 outlined

src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue

@@ -1,23 +1,36 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
-import Table from "@/modules/11_discipline/components/3_investigateDisciplinary/Table.vue";
-import { useInvestigateDisStore } from "../../store/InvestigateDisStore";
-
 import { useRouter } from "vue-router";
-const dataInvestigateDis = useInvestigateDisStore();
+import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";
-const { fecthList } = dataInvestigateDis;
+import { useCounterMixin } from "@/stores/mixin";
+import { useInvestigateDisStore } from "../../store/InvestigateDisStore";
+import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
+
 const $q = useQuasar(); // show dialog
-const mixin = useCounterMixin();
 const router = useRouter();
-const { hideLoader } = mixin;
 const filter = ref<string>(""); //search data table
+const mixin = useCounterMixin();
+const dataInvestigateDis = useInvestigateDisStore();
+const { hideLoader } = mixin;
+const { fecthList } = dataInvestigateDis;
+
 const initialPagination = ref<Pagination>({
   rowsPerPage: 0,
 });
 
+/**
+ * ไปหน้าแก้ไข
+ * @param id ไอดีเฉพาะ รายบุคคล
+ */
+function openEdit(id:string) {
+  console.log(id)
+  router.push(`/discipline/disciplinary/${id}`)
+}
+
+/**เมื่อเริ่มโหลดหน้า 
+ * ส่งข้อมูลจำลองไปยัง store
+ */
 onMounted(async () => {
   fecthList([
     {
@@ -67,11 +80,6 @@ onMounted(async () => {
   ]);
   await hideLoader();
 });
-
-function openEdit(id:string) {
-  console.log(id)
-  router.push(`/discipline/disciplinary/${id}`)
-}
 </script>
 
 <template>

src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue

@@ -2,6 +2,8 @@
 import { ref, useAttrs } from "vue";
 import type { Pagination } from "@/modules/04_registry/interface/index/Main";
 
+const table = ref<any>(null);
+const filterRef = ref<any>(null);
 const attrs = ref<any>(useAttrs());
 const paging = ref<boolean>(true);
 const pagination = ref({
@@ -10,21 +12,12 @@ const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
-const table = ref<any>(null);
-const filterRef = ref<any>(null);
-const initialPagination = ref<Pagination>({
-  rowsPerPage: 0,
-});
 
+/** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   count: Number,
   pass: Number,
   notpass: Number,
-
   inputfilter: String,
   name: String,
   icon: String,
@@ -49,23 +42,29 @@ const emit = defineEmits([
   "update:inputvisible",
   "update:editvisible",
 ]);
-const updateInput = (value: string | number | null) => {
-  emit("update:inputfilter", value);
-};
-const updateVisible = (value: []) => {
-  emit("update:inputvisible", value);
-};
 
-const resetFilter = () => {
+function paginationLabel(start: string, end: string, total: string) {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+}
+
+function updateInput(value: string | number | null) {
+  emit("update:inputfilter", value);
+}
+
+function updateVisible(value: []) {
+  emit("update:inputvisible", value);
+}
+
+function resetFilter() {
   // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
   emit("update:inputfilter", "");
   filterRef.value.focus();
-};
+}
 </script>
 
 <template>
   <div class="q-pb-sm row q-col-gutter-sm">
-    <!--  -->
     <div class="q-gutter-sm" v-if="nornmalData == true">
       <q-btn
         to="/discipline/investigate-disciplinary/add"
@@ -117,7 +116,6 @@ const resetFilter = () => {
       emit-value
       class="col-xs-12 col-sm-3 col-md-2 gt-xs"
     >
-      <template> </template>
     </q-select>
   </div>
   <d-table
@@ -141,18 +139,6 @@ const resetFilter = () => {
     <template #body="props">
       <slot v-bind="props" name="columns"></slot>
     </template>
-    <!-- <template v-slot:pagination="scope">
-      <q-pagination
-        v-model="pagination.page"
-        active-color="primary"
-        color="dark"
-        :max="scope.pagesNumber"
-        :max-pages="5"
-        size="sm"
-        boundary-links
-        direction-links
-      ></q-pagination>
-    </template> -->
   </d-table>
 </template>