From acfdec4353af307d9b1c2afba6f513a30dabe602 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 10 Nov 2023 11:27:03 +0700
Subject: [PATCH 01/10] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20format=20co?=
 =?UTF-8?q?de?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/2_InvestigateFacts/Form.vue    |   4 +-
 .../3_InvestigateDisciplinary/AddPage.vue     |   2 +-
 .../3_InvestigateDisciplinary/EditPage.vue    |   2 +-
 .../3_InvestigateDisciplinary/Form.vue        | 933 +++++++++---------
 .../3_InvestigateDisciplinary/MainPage.vue    |   6 +-
 .../3_InvestigateDisciplinary/Table.vue       | 218 ++--
 .../interface/request/disciplinary.ts         |   6 +-
 src/modules/11_discipline/router.ts           |  10 +-
 8 files changed, 607 insertions(+), 574 deletions(-)

diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
index 374d3e227..d91b7190d 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
@@ -458,9 +458,9 @@ watch(props.data, async () => {
               dense
               ref="evidenceFilesRef"
               v-model="formData.evidenceFiles"
-              label="ไฟล์หลักฐานการรับ"
+              label="ไฟล์เอกสารหลักฐาน"
               lazy-rules
-              :rules="[(val) => !!val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
+              :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
               hide-bottom-space
             >
               <template v-slot:prepend>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue
index e580bdcc8..0e7ecd9ff 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue
@@ -1,5 +1,5 @@
 <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();
 
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
index abf0ecc21..0efadfd10 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
@@ -1,6 +1,6 @@
 <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";
 
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
index 26e28d948..5d0861b98 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
@@ -83,6 +83,7 @@ const filesEtcRef = ref<Object | null>(null);
 const trueDetailRef = ref<Object | null>(null);
 const evidenceRef = ref<Object | null>(null);
 const recordAccuserRef = ref<Object | null>(null);
+const complaintsOptions = ref<any>([]);
 
 const fileDocDataUpload = ref<File[]>([]);
 const initialPagination = ref<any>({
@@ -90,7 +91,7 @@ const initialPagination = ref<any>({
 });
 
 const formData = reactive<FormData>({
-  Complaint: "",
+  complaint: "",
   dateInvestigate: null,
   dateAllegation: null,
   dateEvident: null,
@@ -112,7 +113,7 @@ const formData = reactive<FormData>({
 });
 
 const objectdisciplinary: disciplinaryRef = {
-  Complaint: complaintRef,
+  complaint: complaintRef,
   dateInvestigate: dateInvestigateRef,
   dateAllegation: dateAllegationRef,
   dateEvident: dateEvidentRef,
@@ -189,7 +190,7 @@ const clickBack = () => {
   router.push(`/discipline/disciplinary`);
 };
 watch(props.data, async () => {
-  formData.Complaint = props.data.Complaint;
+  formData.complaint = props.data.complaint;
   formData.dateInvestigate = props.data.dateInvestigate;
   formData.dateAllegation = props.data.dateAllegation;
   formData.dateEvident = props.data.dateEvident;
@@ -216,457 +217,499 @@ watch(props.data, async () => {
       <div class="col-12">
         <q-card bordered>
           <div class="col-12 row q-pa-md">
-              <div class="col-12 row q-col-gutter-md">
-                <q-input
-                  class="col-12"
-                  dense
+            <div class="col-12 row q-col-gutter-md">
+              <div class="col-12">
+                <q-select
+                  for="#fault"
                   outlined
-                  v-model="formData.Complaint"
-                  for="#Complaint"
+                  dense
                   ref="complaintRef"
+                  v-model="formData.complaint"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกเรื่องร้องเรียน'}`]"
+                  :options="complaintsOptions"
                   label="เรื่องร้องเรียน"
-                  hide-bottom-space
-                  type="textarea"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกเรื่องร้องเรียน'}`]"
-                />
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="dateInvestigate"
-                  ref="dateInvestigateRef"
-                  for="#dateInvestigate"
-                  :locale="'th'"
-                  autoApply
-                  class="col-xs-12 col-sm-4"
-                  borderless
-                  :enableTimePicker="false"
-                  week-start="0"
-                >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      outlined
-                      dense
-                      class="full-width datepicker"
-                      hide-bottom-space
-                      :model-value="
-                        dateInvestigate != null
-                          ? date2Thai(dateInvestigate)
-                          : null
-                      "
-                      :label="`${'วันที่สอบสวน'}`"
-                      :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>
-                <datepicker
-                  menu-class-name="modalfix"
-                  ref="dateAllegationRef"
-                  for="#dateAllegation"
-                  v-model="dateAllegation"
-                  class="col-xs-12 col-sm-4"
-                  :locale="'th'"
-                  autoApply
-                  borderless
-                  :enableTimePicker="false"
-                  week-start="0"
-                >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      outlined
-                      dense
-                      class="col-xs-12 col-sm-4"
-                      hide-bottom-space
-                      :model-value="
-                        dateAllegation != null
-                          ? date2Thai(dateAllegation)
-                          : null
-                      "
-                      :label="`${'วันที่รับทราบข้อกล่าวหา'}`"
-                      :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>
-                <datepicker
-                  menu-class-name="modalfix"
-                  ref="dateEvidentRef"
-                  for="#dateEvident"
-                  v-model="dateEvident"
-                  :locale="'th'"
-                  autoApply
-                  class="col-xs-12 col-sm-4"
-                  borderless
-                  :enableTimePicker="false"
-                  week-start="0"
-                >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      outlined
-                      dense
-                      class="full-width datepicker"
-                      hide-bottom-space
-                      :model-value="
-                        dateEvident != null ? date2Thai(dateEvident) : null
-                      "
-                      :label="`${'วันที่สรุปพยานหลักฐาน'}`"
-                      :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 class="row col-12">
-                  <q-card bordered class="row col-12" style="border:1px solid #d6dee1;">
-                    <div class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
-                      กรรมการ
-                      <q-btn
-                        size="12px"
-                        flat
-                        round
-                        dense
-                        color="add"
-                        class="q-ml-sm"
-                        @click="popup()"
-                        icon="mdi-plus"
-                      >
-                        <q-tooltip>เพิ่มกรรมการ</q-tooltip>
-                      </q-btn>
-                    </div>
-                    <div class="col-12"><q-separator /></div>
-                    <div class="col-xs-12 q-pa-sm row">
-                      <Table
-                        class="col-12"
-                        style="max-height: 80vh"
-                        :rows="rows"
-                        :columns="investigateDis.columnsDirector"
-                        :filter="filter"
-                        :visible-columns="investigateDis.visibleColumnsDirector"
-                        v-model:inputfilter="filter"
-                        v-model:inputvisible="investigateDis.visibleColumnsDirector"
-                        :pagination="initialPagination"
-                        :nornmalData="true"
-                        :paging="true"
-                        :titleText="''"
-                      >
-                        <template #columns="props">
-                          <q-tr :props="props" class="cursor-pointer">
-                            <q-td
-                              v-for="col in props.cols"
-                              :key="col.name"
-                              :props="props"
-                            >
-                              <div v-if="col.name == 'no'" class="table_ellipsis2">
-                                {{ props.rowIndex + 1 }}
-                              </div>
-                              <div v-else class="table_ellipsis2">
-                                {{ col.value }}
-                              </div>
-                            </q-td>
-                            <q-td>
-                              <q-btn
-                                dense
-                                size="12px"
-                                flat
-                                round
-                                color="red"
-                                @click="deleteData(props.row.id)"
-                                icon="mdi-delete"
-                              >
-                                <q-tooltip>ลบข้อมูล</q-tooltip>
-                              </q-btn>
-                            </q-td>
-                          </q-tr>
-                        </template>
-                      </Table>
-                    </div>
-                  </q-card>
-                </div>
-                <q-input
-                  class="col-xs-12 col-sm-6"
-                  dense
-                  outlined
-                  ref="casefaultRef"
-                  v-model="formData.casefault"
-                  for="#casefault"
-                  label="กรณีมีความผิด"
-                  hide-bottom-space
-                  :rules="[(val) => !!val || `${'กรุณากรอกกรณีมีความผิด'}`]"
-                  lazy-rules
-                />
-                <q-input
-                  class="col-xs-12 col-sm-6"
-                  dense
-                  hide-bottom-space
-                  outlined
-                  for="#whereInvestigate"
-                  ref="whereInvestigateRef"
-                  v-model="formData.whereInvestigate"
-                  label="สอบสวนที่"
-                  :rules="[(val) => !!val || `${'กรุณากรอกสอบสวนที่'}`]"
-                  lazy-rules
-                />
-                <q-select
-                  dense
-                  class="col-xs-12 col-sm-3"
-                  outlined
-                  for="#typefault"
-                  ref="typefaultRef"
-                  v-model="formData.typefault"
-                  option-label="name"
-                  option-value="id"
                   emit-value
                   map-options
-                  hide-bottom-space
-                  :options="investigateDis.optionsTypefault"
-                  label="ลักษณะความผิด"
-                />
-                <q-select
-                  dense
-                  class="col-xs-12 col-sm-3"
-                  outlined
-                  for="#faultLevel"
-                  ref="faultLevelRef"
-                  v-model="formData.faultLevel"
                   option-label="name"
                   option-value="id"
-                  emit-value
-                  map-options
-                  hide-bottom-space
-                  :options="investigateDis.optionsfaultLevel"
-                  label="ระดับโทษความผิด"
-                />
-                <q-input
-                  class="col-xs-12 col-sm-6"
-                  dense
-                  for="#refLaw"
-                  hide-bottom-space
-                  outlined
-                  ref="refLawRef"
-                  v-model="formData.refLaw"
-                  label="อ้างอิงมาตราตามกฎหมาย"
-                  :rules="[
-                    (val) => !!val || `${'กรุณากรอกอ้างอิงมาตราตามกฎหมาย'}`,
-                  ]"
-                  lazy-rules
-                />
-                <q-input
-                  class="col-12"
-                  dense
-                  outlined
-                  hide-bottom-space
-                  for="#detailComplaint"
-                  ref="detailComplaintRef"
-                  v-model="formData.detailComplaint"
-                  label="รายละเอียดเรื่องร้องเรียน"
-                  type="textarea"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`]"
-                />
-                <q-input
-                  class="col-12"
-                  dense
-                  outlined
-                  hide-bottom-space
-                  for="#trueDetail"
-                  ref="trueDetailRef"
-                  v-model="formData.trueDetail"
-                  label="รายละเอียดสืบสวนข้อเท็จจริง"
-                  type="textarea"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดสืบสวนข้อเท็จจริง'}`]"
-                />
-                <div class="row col-12">
-                  <q-card bordered class="row col-12" style="border:1px solid #d6dee1;">
-                    <div class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
-                      หลักฐานสนับสนุนข้อกล่าวหา
-                    </div>
-                    <div class="col-12"><q-separator /></div>
-                    <div class="col-xs-12 q-pa-sm row">
-                      <q-input
-                        class="col-12"
-                        dense
-                        outlined
-                        for="#evidence"
-                        ref="evidenceRef"
-                        hide-bottom-space
-                        v-model="formData.evidence"
-                        label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
-                        type="textarea"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
-                      />
-                      <q-file
-                        class="col-12 q-mt-sm"
-                        outlined
-                        dense
-                        ref="filesEvidenceRef"
-                        for="#filesEvidence"
-                        v-model="formData.filesEvidence"
-                        @added="fileUploadDoc"
-                        label="ไฟล์เอกสารหลักฐานสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
-                        hide-bottom-space
-                        lazy-rules
-                        accept=".pdf,.xlsx,.doc"
-                      >
-                        <template v-slot:prepend>
-                          <q-icon name="attach_file" />
-                        </template>
-                      </q-file>
-                    </div>
-                  </q-card>
-                </div>
-                <div class="row col-12">
-                  <q-card bordered class="row col-12" style="border:1px solid #d6dee1;">
-                    <div class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
-                      บันทึกถ้อยคำของผู้กล่าวหา
-                    </div>
-                    <div class="col-12"><q-separator /></div>
-                    <div class="col-xs-12 q-pa-sm row">
-                      <q-input
-                        class="col-12"
-                        dense
-                        outlined
-                        ref="recordAccuserRef"
-                        for="#recordAccuser"
-                        v-model="formData.recordAccuser"
-                        label="บันทึกถ้อยคำของผู้กล่าวหา"
-                        hide-bottom-space
-                        type="textarea"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
-                      />
-                      <q-file
-                        class="col-12 q-mt-sm"
-                        outlined
-                        dense
-                        ref="filesRecordAccuserRef"
-                        for="#filesRecordAccuser"
-                        v-model="formData.filesRecordAccuser"
-                        @added="fileUploadDoc"
-                        label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
-                        hide-bottom-space
-                        lazy-rules
-                        accept=".pdf,.xlsx,.doc"
-                      >
-                        <template v-slot:prepend>
-                          <q-icon name="attach_file" />
-                        </template>
-                      </q-file>
-                    </div>
-                  </q-card>
-                </div>
-                <div class="row col-12">
-                  <q-card bordered class="row col-12" style="border:1px solid #d6dee1;">
-                    <div class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
-                      พยานและการบันทึกถ้อยคำ
-                    </div>
-                    <div class="col-12"><q-separator /></div>
-                    <div class="col-xs-12 q-pa-sm row">
-                      <q-input
-                        class="col-12"
-                        dense
-                        outlined
-                        for="#witnesses"
-                        ref="witnessesRef"
-                        v-model="formData.witnesses"
-                        label="พยานและการบันทึกถ้อยคำ"
-                        hide-bottom-space
-                        type="textarea"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกพยานและการบันทึกถ้อยคำ'}`]"
-                      />
-                      <q-file
-                        class="col-12 q-mt-sm"
-                        outlined
-                        dense
-                        ref="filesWitnessesRef"
-                        for="#filesWitnesses"
-                        v-model="formData.filesWitnesses"
-                        @added="fileUploadDoc"
-                        label="ไฟล์เอกสารพยานและการบันทึกถ้อยคำ"
-                        hide-bottom-space
-                        lazy-rules
-                        accept=".pdf,.xlsx,.doc"
-                      >
-                        <template v-slot:prepend>
-                          <q-icon name="attach_file" />
-                        </template>
-                      </q-file>
-                    </div>
-                  </q-card>
-                </div>
-                <q-input
-                  class="col-12"
-                  dense
-                  outlined
-                  for="#InvestResults"
-                  ref="InvestResultsRef"
-                  v-model="formData.InvestResults"
-                  label="ผลการสอบสวน"
-                  hide-bottom-space
-                  type="textarea"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกผลการสอบสวน'}`]"
-                />
-                <q-file
-                  class="col-12"
-                  outlined
-                  dense
-                  ref="filesEtcRef"
-                  for="#filesEtc"
-                  v-model="formData.filesEtc"
-                  @added="fileUploadDoc"
-                  label="ไฟล์เอกสารหลักฐานอื่น ๆ"
-                  hide-bottom-space
-                  lazy-rules
-                  accept=".pdf,.xlsx,.doc"
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
+                  use-input
+                  ><template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
                   </template>
-                </q-file>
+                </q-select>
               </div>
+
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateInvestigate"
+                ref="dateInvestigateRef"
+                for="#dateInvestigate"
+                :locale="'th'"
+                autoApply
+                class="col-xs-12 col-sm-4"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    class="full-width datepicker"
+                    hide-bottom-space
+                    :model-value="
+                      dateInvestigate != null
+                        ? date2Thai(dateInvestigate)
+                        : null
+                    "
+                    :label="`${'วันที่สอบสวน'}`"
+                    :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>
+
+              <datepicker
+                menu-class-name="modalfix"
+                ref="dateAllegationRef"
+                for="#dateAllegation"
+                v-model="dateAllegation"
+                class="col-xs-12 col-sm-4"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    class="col-xs-12 col-sm-4"
+                    hide-bottom-space
+                    :model-value="
+                      dateAllegation != null ? date2Thai(dateAllegation) : null
+                    "
+                    :label="`${'วันที่รับทราบข้อกล่าวหา'}`"
+                    :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>
+
+              <datepicker
+                menu-class-name="modalfix"
+                ref="dateEvidentRef"
+                for="#dateEvident"
+                v-model="dateEvident"
+                :locale="'th'"
+                autoApply
+                class="col-xs-12 col-sm-4"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    class="full-width datepicker"
+                    hide-bottom-space
+                    :model-value="
+                      dateEvident != null ? date2Thai(dateEvident) : null
+                    "
+                    :label="`${'วันที่สรุปพยานหลักฐาน'}`"
+                    :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 class="row col-12">
+                <q-card
+                  bordered
+                  class="row col-12"
+                  style="border: 1px solid #d6dee1"
+                >
+                  <div
+                    class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                  >
+                    กรรมการ
+                    <q-btn
+                      size="12px"
+                      flat
+                      round
+                      dense
+                      color="add"
+                      class="q-ml-sm"
+                      @click="popup()"
+                      icon="mdi-plus"
+                    >
+                      <q-tooltip>เพิ่มกรรมการ</q-tooltip>
+                    </q-btn>
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+                  <div class="col-xs-12 q-pa-sm row">
+                    <Table
+                      class="col-12"
+                      style="max-height: 80vh"
+                      :rows="rows"
+                      :columns="investigateDis.columnsDirector"
+                      :filter="filter"
+                      :visible-columns="investigateDis.visibleColumnsDirector"
+                      v-model:inputfilter="filter"
+                      v-model:inputvisible="
+                        investigateDis.visibleColumnsDirector
+                      "
+                      :pagination="initialPagination"
+                      :nornmalData="true"
+                      :paging="true"
+                      :titleText="''"
+                    >
+                      <template #columns="props">
+                        <q-tr :props="props" class="cursor-pointer">
+                          <q-td
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                          >
+                            <div
+                              v-if="col.name == 'no'"
+                              class="table_ellipsis2"
+                            >
+                              {{ props.rowIndex + 1 }}
+                            </div>
+                            <div v-else class="table_ellipsis2">
+                              {{ col.value }}
+                            </div>
+                          </q-td>
+                          <q-td>
+                            <q-btn
+                              dense
+                              size="12px"
+                              flat
+                              round
+                              color="red"
+                              @click="deleteData(props.row.id)"
+                              icon="mdi-delete"
+                            >
+                              <q-tooltip>ลบข้อมูล</q-tooltip>
+                            </q-btn>
+                          </q-td>
+                        </q-tr>
+                      </template>
+                    </Table>
+                  </div>
+                </q-card>
+              </div>
+              <q-input
+                class="col-xs-12 col-sm-6"
+                dense
+                outlined
+                ref="casefaultRef"
+                v-model="formData.casefault"
+                for="#casefault"
+                label="กรณีมีความผิด"
+                hide-bottom-space
+                :rules="[(val) => !!val || `${'กรุณากรอกกรณีมีความผิด'}`]"
+                lazy-rules
+              />
+              <q-input
+                class="col-xs-12 col-sm-6"
+                dense
+                hide-bottom-space
+                outlined
+                for="#whereInvestigate"
+                ref="whereInvestigateRef"
+                v-model="formData.whereInvestigate"
+                label="สอบสวนที่"
+                :rules="[(val) => !!val || `${'กรุณากรอกสอบสวนที่'}`]"
+                lazy-rules
+              />
+              <q-select
+                dense
+                class="col-xs-12 col-sm-3"
+                outlined
+                for="#typefault"
+                ref="typefaultRef"
+                v-model="formData.typefault"
+                option-label="name"
+                option-value="id"
+                emit-value
+                map-options
+                hide-bottom-space
+                :options="investigateDis.optionsTypefault"
+                label="ลักษณะความผิด"
+              />
+              <q-select
+                dense
+                class="col-xs-12 col-sm-3"
+                outlined
+                for="#faultLevel"
+                ref="faultLevelRef"
+                v-model="formData.faultLevel"
+                option-label="name"
+                option-value="id"
+                emit-value
+                map-options
+                hide-bottom-space
+                :options="investigateDis.optionsfaultLevel"
+                label="ระดับโทษความผิด"
+              />
+              <q-input
+                class="col-xs-12 col-sm-6"
+                dense
+                for="#refLaw"
+                hide-bottom-space
+                outlined
+                ref="refLawRef"
+                v-model="formData.refLaw"
+                label="อ้างอิงมาตราตามกฎหมาย"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกอ้างอิงมาตราตามกฎหมาย'}`,
+                ]"
+                lazy-rules
+              />
+              <q-input
+                class="col-12"
+                dense
+                outlined
+                hide-bottom-space
+                for="#detailComplaint"
+                ref="detailComplaintRef"
+                v-model="formData.detailComplaint"
+                label="รายละเอียดเรื่องร้องเรียน"
+                type="textarea"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`]"
+              />
+              <q-input
+                class="col-12"
+                dense
+                outlined
+                hide-bottom-space
+                for="#trueDetail"
+                ref="trueDetailRef"
+                v-model="formData.trueDetail"
+                label="รายละเอียดสืบสวนข้อเท็จจริง"
+                type="textarea"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดสืบสวนข้อเท็จจริง'}`]"
+              />
+              <div class="row col-12">
+                <q-card
+                  bordered
+                  class="row col-12"
+                  style="border: 1px solid #d6dee1"
+                >
+                  <div
+                    class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                  >
+                    หลักฐานสนับสนุนข้อกล่าวหา
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+                  <div class="col-xs-12 q-pa-sm row">
+                    <q-input
+                      class="col-12"
+                      dense
+                      outlined
+                      for="#evidence"
+                      ref="evidenceRef"
+                      hide-bottom-space
+                      v-model="formData.evidence"
+                      label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
+                      type="textarea"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
+                    />
+                    <q-file
+                      class="col-12 q-mt-sm"
+                      outlined
+                      dense
+                      ref="filesEvidenceRef"
+                      for="#filesEvidence"
+                      v-model="formData.filesEvidence"
+                      @added="fileUploadDoc"
+                      label="ไฟล์เอกสารหลักฐานสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
+                      hide-bottom-space
+                      lazy-rules
+                      accept=".pdf,.xlsx,.doc"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon name="attach_file" />
+                      </template>
+                    </q-file>
+                  </div>
+                </q-card>
+              </div>
+              <div class="row col-12">
+                <q-card
+                  bordered
+                  class="row col-12"
+                  style="border: 1px solid #d6dee1"
+                >
+                  <div
+                    class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                  >
+                    บันทึกถ้อยคำของผู้กล่าวหา
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+                  <div class="col-xs-12 q-pa-sm row">
+                    <q-input
+                      class="col-12"
+                      dense
+                      outlined
+                      ref="recordAccuserRef"
+                      for="#recordAccuser"
+                      v-model="formData.recordAccuser"
+                      label="บันทึกถ้อยคำของผู้กล่าวหา"
+                      hide-bottom-space
+                      type="textarea"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
+                    />
+                    <q-file
+                      class="col-12 q-mt-sm"
+                      outlined
+                      dense
+                      ref="filesRecordAccuserRef"
+                      for="#filesRecordAccuser"
+                      v-model="formData.filesRecordAccuser"
+                      @added="fileUploadDoc"
+                      label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
+                      hide-bottom-space
+                      lazy-rules
+                      accept=".pdf,.xlsx,.doc"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon name="attach_file" />
+                      </template>
+                    </q-file>
+                  </div>
+                </q-card>
+              </div>
+              <div class="row col-12">
+                <q-card
+                  bordered
+                  class="row col-12"
+                  style="border: 1px solid #d6dee1"
+                >
+                  <div
+                    class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                  >
+                    พยานและการบันทึกถ้อยคำ
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+                  <div class="col-xs-12 q-pa-sm row">
+                    <q-input
+                      class="col-12"
+                      dense
+                      outlined
+                      for="#witnesses"
+                      ref="witnessesRef"
+                      v-model="formData.witnesses"
+                      label="พยานและการบันทึกถ้อยคำ"
+                      hide-bottom-space
+                      type="textarea"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกพยานและการบันทึกถ้อยคำ'}`]"
+                    />
+                    <q-file
+                      class="col-12 q-mt-sm"
+                      outlined
+                      dense
+                      ref="filesWitnessesRef"
+                      for="#filesWitnesses"
+                      v-model="formData.filesWitnesses"
+                      @added="fileUploadDoc"
+                      label="ไฟล์เอกสารพยานและการบันทึกถ้อยคำ"
+                      hide-bottom-space
+                      lazy-rules
+                      accept=".pdf,.xlsx,.doc"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon name="attach_file" />
+                      </template>
+                    </q-file>
+                  </div>
+                </q-card>
+              </div>
+              <q-input
+                class="col-12"
+                dense
+                outlined
+                for="#InvestResults"
+                ref="InvestResultsRef"
+                v-model="formData.InvestResults"
+                label="ผลการสอบสวน"
+                hide-bottom-space
+                type="textarea"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกผลการสอบสวน'}`]"
+              />
+              <q-file
+                class="col-12"
+                outlined
+                dense
+                ref="filesEtcRef"
+                for="#filesEtc"
+                v-model="formData.filesEtc"
+                @added="fileUploadDoc"
+                label="ไฟล์เอกสารหลักฐานอื่น ๆ"
+                hide-bottom-space
+                lazy-rules
+                accept=".pdf,.xlsx,.doc"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+              </q-file>
+            </div>
           </div>
           <q-separator />
           <div class="row col-12 q-pa-sm">
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
index 2a63f431b..a3b09e6a6 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
@@ -3,7 +3,7 @@ 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 Table from "@/modules/11_discipline/components/3_investigateDisciplinary/Table.vue";
 import { useInvestigateDisStore } from "../../store/InvestigateDisStore";
 
 import { useRouter } from "vue-router";
@@ -68,9 +68,6 @@ onMounted(async () => {
   await hideLoader();
 });
 
-const clickAdd = () => {
-  router.push(`/discipline/InvestigateDisciplinary/add`);
-};
 function openEdit(id:string) {
   console.log(id)
   router.push(`/discipline/disciplinary/${id}`)
@@ -93,7 +90,6 @@ function openEdit(id:string) {
         v-model:inputvisible="dataInvestigateDis.visibleColumns"
         :pagination="initialPagination"
         :nornmalData="true"
-        :add="clickAdd"
         :paging="true"
         :titleText="''"
       >
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
index 06a30b961..0815d3346 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
@@ -1,59 +1,124 @@
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+import type { Pagination } from "@/modules/04_registry/interface/index/Main";
+
+const attrs = ref<any>(useAttrs());
+const paging = ref<boolean>(true);
+const pagination = ref({
+  // sortBy: "desc",
+  descending: false,
+  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,
+});
+
+const props = defineProps({
+  count: Number,
+  pass: Number,
+  notpass: Number,
+
+  inputfilter: String,
+  name: String,
+  icon: String,
+  inputvisible: Array,
+  editvisible: Boolean,
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  nornmalData: {
+    type: Boolean,
+    defualt: true,
+  },
+  conclude: {
+    type: Boolean,
+    defualt: false,
+  },
+});
+
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:editvisible",
+]);
+const updateInput = (value: string | number | null) => {
+  emit("update:inputfilter", value);
+};
+const updateVisible = (value: []) => {
+  emit("update:inputvisible", value);
+};
+
+const 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"
         size="12px"
         flat
         round
         color="add"
-        @click="checkAdd"
         icon="mdi-plus"
       >
         <q-tooltip>เพิ่มข้อมูล</q-tooltip>
       </q-btn>
     </div>
     <q-space />
-      <!-- ค้นหาข้อความใน table -->
-      <q-input
-        standout
-        dense
-        :model-value="inputfilter"
-        ref="filterRef"
-        @update:model-value="updateInput"
-        outlined
-        debounce="300"
-        placeholder="ค้นหา"
-        style="max-width: 200px"
-        class="col-xs-12 col-sm-3 col-md-2"
-      >
-        <template v-slot:append>
-          <q-icon v-if="inputfilter == ''" name="search" />
-          <q-icon
-            v-if="inputfilter !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="resetFilter"
-          />
-        </template>
-      </q-input>
-      <!-- แสดงคอลัมน์ใน table -->
-      <q-select
-        :model-value="inputvisible"
-        @update:model-value="updateVisible"
-        :display-value="$q.lang.table.columns"
-        multiple
-        outlined
-        dense
-        :options="attrs.columns"
-        options-dense
-        option-value="name"
-        map-options
-        emit-value
-        class="col-xs-12 col-sm-3 col-md-2 gt-xs"
-      >
-        <template> </template>
-      </q-select>
+    <!-- ค้นหาข้อความใน table -->
+    <q-input
+      standout
+      dense
+      :model-value="inputfilter"
+      ref="filterRef"
+      @update:model-value="updateInput"
+      outlined
+      debounce="300"
+      placeholder="ค้นหา"
+      style="max-width: 200px"
+      class="col-xs-12 col-sm-3 col-md-2"
+    >
+      <template v-slot:append>
+        <q-icon v-if="inputfilter == ''" name="search" />
+        <q-icon
+          v-if="inputfilter !== ''"
+          name="clear"
+          class="cursor-pointer"
+          @click="resetFilter"
+        />
+      </template>
+    </q-input>
+    <!-- แสดงคอลัมน์ใน table -->
+    <q-select
+      :model-value="inputvisible"
+      @update:model-value="updateVisible"
+      :display-value="$q.lang.table.columns"
+      multiple
+      outlined
+      dense
+      :options="attrs.columns"
+      options-dense
+      option-value="name"
+      map-options
+      emit-value
+      class="col-xs-12 col-sm-3 col-md-2 gt-xs"
+    >
+      <template> </template>
+    </q-select>
   </div>
   <d-table
     ref="table"
@@ -90,78 +155,7 @@
     </template> -->
   </d-table>
 </template>
-<script setup lang="ts">
-import { ref, useAttrs } from "vue";
-import type { Pagination } from "@/modules/04_registry/interface/index/Main";
 
-const attrs = ref<any>(useAttrs());
-const paging = ref<boolean>(true);
-const pagination = ref({
-  // sortBy: "desc",
-  descending: false,
-  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,
-});
-
-const props = defineProps({
-  count: Number,
-  pass: Number,
-  notpass: Number,
-
-  inputfilter: String,
-  name: String,
-  icon: String,
-  inputvisible: Array,
-  editvisible: Boolean,
-  add: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  validate: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  nornmalData: {
-    type: Boolean,
-    defualt: true,
-  },
-  conclude: {
-    type: Boolean,
-    defualt: false,
-  },
-});
-
-const emit = defineEmits([
-  "update:inputfilter",
-  "update:inputvisible",
-  "update:editvisible",
-]);
-const updateInput = (value: string | number | null) => {
-  emit("update:inputfilter", value);
-};
-const updateVisible = (value: []) => {
-  emit("update:inputvisible", value);
-};
-
-const checkAdd = () => {
-  props.add();
-};
-
-const resetFilter = () => {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  emit("update:inputfilter", "");
-  filterRef.value.focus();
-};
-</script>
 <style lang="scss">
 .icon-color {
   color: #4154b3;
diff --git a/src/modules/11_discipline/interface/request/disciplinary.ts b/src/modules/11_discipline/interface/request/disciplinary.ts
index 5a131513d..8642393cb 100644
--- a/src/modules/11_discipline/interface/request/disciplinary.ts
+++ b/src/modules/11_discipline/interface/request/disciplinary.ts
@@ -1,5 +1,5 @@
 interface FormData {
-  Complaint: string;
+  complaint: string;
   dateInvestigate: Date | null;
   dateAllegation: Date | null;
   dateEvident: Date | null;
@@ -21,7 +21,7 @@ interface FormData {
 }
 
 interface disciplinaryRef {
-  Complaint: object | null;
+  complaint: object | null;
   dateInvestigate: object | null;
   dateAllegation: object | null;
   dateEvident: object | null;
@@ -43,4 +43,4 @@ interface disciplinaryRef {
   [key: string]: any;
 }
 
-export type { FormData, disciplinaryRef, investigateDisDataRowType };
+export type { FormData, disciplinaryRef };
diff --git a/src/modules/11_discipline/router.ts b/src/modules/11_discipline/router.ts
index b6e8c7804..02439ede5 100644
--- a/src/modules/11_discipline/router.ts
+++ b/src/modules/11_discipline/router.ts
@@ -8,11 +8,11 @@ const investigatefactsEdit = () =>
   import("@/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue");
 const disciplinaryMain = () =>
   import(
-    "@/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue"
+    "@/modules/11_discipline/components/3_investigateDisciplinary/MainPage.vue"
   );
 const disciplinaryEdit = () =>
   import(
-    "@/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue"
+    "@/modules/11_discipline/components/3_investigateDisciplinary/EditPage.vue"
   );
 const oredrMain = () =>
   import("@/modules/11_discipline/components/4_Order/MainPage.vue");
@@ -47,7 +47,7 @@ const reportType = () =>
 
 const InvestigateDisciplinaryAdd = () =>
   import(
-    "@/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue"
+    "@/modules/11_discipline/components/3_investigateDisciplinary/AddPage.vue"
   );
 const orderPage = () =>
   import("@/modules/11_discipline/components/4_Order/OrderPage.vue");
@@ -204,8 +204,8 @@ export default [
     },
   },
   {
-    path: "/discipline/InvestigateDisciplinary/add",
-    name: "/discipline-InvestigateDisciplinaryAdd",
+    path: "/discipline/investigate-disciplinary/add",
+    name: "discipline_investigate_disciplinary_add",
     component: InvestigateDisciplinaryAdd,
     meta: {
       Auth: true,

From adfc25b38b2f5d6c327d68ed5d938f174a491a17 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Fri, 10 Nov 2023 11:27:24 +0700
Subject: [PATCH 02/10] no message

---
 .../1_Complaint/AddComplaintPage.vue          |  8 +-
 .../components/1_Complaint/Form.vue           | 95 ++++++++++---------
 .../components/1_Complaint/MainPage.vue       |  6 +-
 3 files changed, 60 insertions(+), 49 deletions(-)

diff --git a/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue b/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue
index ff3324f56..8b4c2f841 100644
--- a/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { useRoute, useRouter } from "vue-router";
 import Form from "@/modules/11_discipline/components/1_Complaint/Form.vue";
+
 const router = useRouter();
 
-// บันทึกข้อมูล
-const onSubmit = async () => {
-  // post
+/** บันทึกข้อมูล */
+async function onSubmit () {
+  
+  /** post */
   console.log("add");
   router.push(`/discipline/complaints`);
 };
diff --git a/src/modules/11_discipline/components/1_Complaint/Form.vue b/src/modules/11_discipline/components/1_Complaint/Form.vue
index cb7c6b941..329243afd 100644
--- a/src/modules/11_discipline/components/1_Complaint/Form.vue
+++ b/src/modules/11_discipline/components/1_Complaint/Form.vue
@@ -3,15 +3,44 @@ 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[]>([]);
+
+const { selectComplainantTpye, filterSelector } = complainstStore; // function จาก store complainstStore
+
+// validateForm
+const complainantTypeRef = ref<Object | null>(null);
+const complainantRef = ref<Object | null>(null);
+const officeRef = ref<Object | null>(null);
+const agencyRef = ref<Object | null>(null);
+const topicComplaintRef = ref<Object | null>(null);
+const detailRef = ref<Object | null>(null);
+const datereceiveRef = ref<Object | null>();
+const dateconsiderationRef = ref<Object | null>(null);
+const offenseDescriptionRef = ref<Object | null>(null);
+const considerationLevelRef = ref<Object | null>(null);
+const datewarnRef = ref<Object | null>(null);
+const receivecomplaintsRef = ref<Object | null>(null);
+const petitionerRef = ref<Object | null>(null);
+const filesRef = ref<Object | null>(null);
+
+/** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   data: {
     type: Object,
@@ -22,17 +51,26 @@ const props = defineProps({
     default: () => "",
   },
 });
-const $q = useQuasar();
-const router = useRouter();
-const mixin = useCounterMixin();
-const { date2Thai, dialogConfirm } = mixin; //function จาก stores หลัก
 
-const complainstStore = useComplainstDataStore();
-const { selectComplainantTpye, filterSelector } = complainstStore; // function จาก store complainstStore
+/** ข้อมูล form*/ 
+const formData = reactive<FormData>({
+  complainantType: "",
+  complainant: "",
+  office: "",
+  agency: "",
+  topicComplaint: "",
+  detail: "",
+  datereceive: null,
+  dateconsideration: null,
+  offenseDescription: "",
+  considerationLevel: "",
+  datewarn: null,
+  receivecomplaints: "",
+  petitioner: "",
+  files: null,
+});
 
 // options ทั้งหมด
-
-
 const offenseDescriptiontoptions = ref<DataOption[]>([
   { id: "0", name: "ยังไม่ระบุ" },
   { id: "1", name: "ไม่ร้ายแรง" },
@@ -52,24 +90,9 @@ const receivecomplaintstoptions = ref<DataOption[]>([
   { id: "5", name: "โทรศัพท์" },
   { id: "6", name: "บอกกล่าว" },
 ]);
-// ข้อมูล form
-const formData = reactive<FormData>({
-  complainantType: "",
-  complainant: "",
-  office: "",
-  agency: "",
-  topicComplaint: "",
-  detail: "",
-  datereceive: null,
-  dateconsideration: null,
-  offenseDescription: "",
-  considerationLevel: "",
-  datewarn: null,
-  receivecomplaints: "",
-  petitioner: "",
-  files: null,
-});
-const fileDocDataUpload = ref<File[]>([]);
+
+
+
 
 // เลือกผู้ร้องเรียน
 async function selectComplainant(val: string) {
@@ -143,21 +166,7 @@ function selectLevel(val: string) {
   }
 }
 
-// validateForm
-const complainantTypeRef = ref<Object | null>(null);
-const complainantRef = ref<Object | null>(null);
-const officeRef = ref<Object | null>(null);
-const agencyRef = ref<Object | null>(null);
-const topicComplaintRef = ref<Object | null>(null);
-const detailRef = ref<Object | null>(null);
-const datereceiveRef = ref<Object | null>();
-const dateconsiderationRef = ref<Object | null>(null);
-const offenseDescriptionRef = ref<Object | null>(null);
-const considerationLevelRef = ref<Object | null>(null);
-const datewarnRef = ref<Object | null>(null);
-const receivecomplaintsRef = ref<Object | null>(null);
-const petitionerRef = ref<Object | null>(null);
-const filesRef = ref<Object | null>(null);
+
 
 const objectComplaintsRef: MyObjectComplaintsRef = {
   complainantType: complainantTypeRef,
diff --git a/src/modules/11_discipline/components/1_Complaint/MainPage.vue b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
index e6a5711dd..e501cf6b0 100644
--- a/src/modules/11_discipline/components/1_Complaint/MainPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
@@ -25,7 +25,7 @@ onMounted(async () => {
 async function fetchListComplaints() {
   const listData: DataList[] = [
     {
-      id:'001',
+      id: "001",
       subject: "ทุจริตในหน้าที่",
       detail: "มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน",
       complainant: "นางศิรินภา คงน้อย",
@@ -35,7 +35,7 @@ async function fetchListComplaints() {
       considerationDeadlineDate: new Date("2023-12-02"),
     },
     {
-      id:'002',
+      id: "002",
       subject: "ทุจริตในหน้าที่",
       detail: "มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน",
       complainant: "นายแก้ว คำ",
@@ -45,7 +45,7 @@ async function fetchListComplaints() {
       considerationDeadlineDate: new Date("2023-12-02"),
     },
     {
-      id:'003',
+      id: "003",
       subject: "ทุจริตในหน้าที่",
       detail:
         "มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน",

From aeaa8c8df2307051a0ef063471a1c9ed35e2a5f4 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Fri, 10 Nov 2023 13:12:34 +0700
Subject: [PATCH 03/10] =?UTF-8?q?=E0=B8=88=E0=B8=B1=E0=B8=94=E0=B9=82?=
 =?UTF-8?q?=E0=B8=84=E0=B9=89=E0=B8=94=20=E0=B9=80=E0=B8=A3=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=87=20=E0=B9=80=E0=B8=A3=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=87=E0=B8=A3=E0=B9=89=E0=B8=AD=E0=B8=87?=
 =?UTF-8?q?=E0=B9=80=E0=B8=A3=E0=B8=B5=E0=B8=A2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../1_Complaint/AddComplaintPage.vue          |   1 -
 .../components/1_Complaint/EditPage.vue       |  20 +--
 .../components/1_Complaint/Form.vue           | 128 +++++++++---------
 .../components/1_Complaint/MainPage.vue       |  20 ++-
 .../components/1_Complaint/TableComplaint.vue |  14 +-
 5 files changed, 103 insertions(+), 80 deletions(-)

diff --git a/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue b/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue
index 8b4c2f841..5e099bbf7 100644
--- a/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue
+++ b/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`);
diff --git a/src/modules/11_discipline/components/1_Complaint/EditPage.vue b/src/modules/11_discipline/components/1_Complaint/EditPage.vue
index 2faab85dd..fed55fccb 100644
--- a/src/modules/11_discipline/components/1_Complaint/EditPage.vue
+++ b/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 () => {
-  // put
+/** ฟังชั่น แก้ไข */
+async function onSubmit() {
   console.log("edit");
   router.push(`/discipline/complaints`);
 };
+
+/** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
+onMounted(() => {
+  fetchData();
+});
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-11">
diff --git a/src/modules/11_discipline/components/1_Complaint/Form.vue b/src/modules/11_discipline/components/1_Complaint/Form.vue
index 329243afd..e1a2e6915 100644
--- a/src/modules/11_discipline/components/1_Complaint/Form.vue
+++ b/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 = [
-  //   {
-  //     id: "1",
-  //     name: "สำนักเอ",
-  //   },
-  //   {
-  //     id: "2",
-  //     name: "สำนักเอ",
-  //   },
-  //   {
-  //     id: "3",
-  //     name: "สำนักเอ",
-  //   },
-  // ];
-}
-// อัพโหลดไฟล์
-const fileUploadDoc = async (files: any) => {
+
+/** เรียกโครงสร้างสำนักงาน */
+async function fetchOffice() {}
+
+/**
+ * ฟังชั่นอัปโหลดไฟล์
+ * @param files ไฟล์ที่รับมา
+ */
+async function fileUploadDoc(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
-            class="col-xs-12 col-sm-12 row q-col-gutter-md"
-          >
+          <div 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"
diff --git a/src/modules/11_discipline/components/1_Complaint/MainPage.vue b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
index e501cf6b0..921d4f81b 100644
--- a/src/modules/11_discipline/components/1_Complaint/MainPage.vue
+++ b/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>
diff --git a/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue b/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
index 8cb62b037..9b9a75e25 100644
--- a/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
+++ b/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}`)

From 48e8037099e73cdb8ae4deda4091d06e91a4aca8 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 10 Nov 2023 13:28:42 +0700
Subject: [PATCH 04/10] =?UTF-8?q?api=20=20=E0=B8=A3=E0=B8=B0=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=9A=20=E0=B8=A3=E0=B8=AD=E0=B8=9A=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=9B=E0=B8=8F=E0=B8=B4=E0=B8=9A=E0=B8=B1=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                                    |   6 +-
 src/api/09_leave/api.leave.ts                 |   6 +
 src/app.config.ts                             |   6 +
 .../components/3_WorkTime/DialogForm.vue      | 213 ++++++++++++------
 .../09_leave/interface/response/round.ts      |  87 ++++---
 src/modules/09_leave/stores/RoundStores.ts    | 161 +++++++------
 src/modules/09_leave/views/RoundMain.vue      | 139 +++++++-----
 7 files changed, 383 insertions(+), 235 deletions(-)
 create mode 100644 src/api/09_leave/api.leave.ts

diff --git a/index.html b/index.html
index de8acc5bb..657cc7754 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ระบบทรัพยากรบุคคล</title>
   </head>
   <body>
diff --git a/src/api/09_leave/api.leave.ts b/src/api/09_leave/api.leave.ts
new file mode 100644
index 000000000..f33bde32b
--- /dev/null
+++ b/src/api/09_leave/api.leave.ts
@@ -0,0 +1,6 @@
+import env from "../index";
+const leave = `${env.API_URI}/leave`;
+export default {
+  roundDutytime: () => `${leave}/duty-time`,
+  roundDutytimeByid: (id: string) => `${leave}/duty-time/${id}`,
+};
diff --git a/src/app.config.ts b/src/app.config.ts
index 801a88941..d3f9ae69d 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -43,6 +43,9 @@ import message from "./api/00_dashboard/api.message";
 /** API reports  */
 import reports from "./api/reports/api.report";
 
+/** API ระบบลงเวลา */
+import leave from "./api/09_leave/api.leave";
+
 // environment variables
 export const compettitivePanel = import.meta.env.VITE_COMPETITIVE_EXAM_PANEL;
 export const qualifyDisableExamPanel = import.meta.env
@@ -86,6 +89,9 @@ const API = {
 
   //reports
   ...reports,
+
+  /**leave */
+  ...leave,
 };
 
 export default {
diff --git a/src/modules/09_leave/components/3_WorkTime/DialogForm.vue b/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
index dfa142987..56310434a 100644
--- a/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
+++ b/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
@@ -1,39 +1,71 @@
 <script setup lang="ts">
-import { ref, reactive, watchEffect, watch } from "vue";
+import { ref, reactive, watch } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** ImportType */
 import type {
-  dataRowRound,
+  FormData,
   MyObjectRoundRef,
 } from "@/modules/09_leave/interface/response/round";
+
+/** ImportComponents */
 import DialogHeader from "@/components/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { dialogConfirm } = mixin;
+const { showLoader, dialogConfirm, success, messageError } = mixin;
 
+/** propsData จาก RoundMain */
+const props = defineProps({
+  modal: {
+    type: Boolean,
+    require: true,
+  },
+  editCheck: {
+    type: String,
+    require: true,
+  },
+  fetchData: {
+    type: Function,
+    require: true,
+  },
+  closeDialog: {
+    type: Function,
+    require: true,
+  },
+  detailData: {
+    type: Object,
+    require: false,
+  },
+});
+
+/** Ref INPUT เวลา*/
 const amRef = ref<Object | null>(null);
 const amOutRef = ref<Object | null>(null);
 const pmRef = ref<Object | null>(null);
 const pmOutRef = ref<Object | null>(null);
-
-const formData = reactive<dataRowRound>({
-  am: "",
-  amOut: "",
-  pm: "",
-  pmOut: "",
-  note: "",
-  status: false,
-  isDefault: false,
-});
-
 const objectRound: MyObjectRoundRef = {
-  am: amRef,
-  amOut: amOutRef,
-  pm: pmRef,
-  pmOut: pmOutRef,
+  startTimeMorning: amRef,
+  endTimeMorning: amOutRef,
+  startTimeAfternoon: pmRef,
+  endTimeAfternoon: pmOutRef,
 };
 
+/** Form ข้อมูล */
+const formData = reactive<FormData>({
+  startTimeMorning: "",
+  endTimeMorning: "",
+  startTimeAfternoon: "",
+  endTimeAfternoon: "",
+  description: "",
+  isDefault: false,
+  isActive: false,
+});
+
+/** Function validateForm*/
 function validateForm() {
   const hasError = [];
   for (const key in objectRound) {
@@ -51,48 +83,82 @@ function validateForm() {
     console.log(hasError);
   }
 }
+
+/** Function ยืนยันการบันทึกข้อมูล*/
 function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
-      props.closeDialog?.();
+      const dataId = props.detailData?.id;
+      props.editCheck === "add" ? postRoundDuty() : putRoundDuty(dataId);
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
   );
 }
-const props = defineProps({
-  modal: Boolean,
-  editCheck: String,
-  closeDialog: Function,
-  detailData: Object,
-});
+
+/** Function สร้างรอบการปฏิบัติงาน*/
+async function postRoundDuty() {
+  await http
+    .post(config.API.roundDutytime(), formData)
+    .then(() => {
+      success($q, "บันทึกข้อมูล");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      props.fetchData?.();
+      props.closeDialog?.();
+    });
+}
+
+/** Functiom แก้ไข้รอบการปฏิบัติงาน*/
+async function putRoundDuty(id: string) {
+  const data = {
+    description: formData.description,
+    isDefault: formData.isDefault,
+    isActive: formData.isActive,
+  };
+  await http
+    .put(config.API.roundDutytimeByid(id), data)
+    .then(() => {
+      success($q, "บันทึกข้อมูล");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      props.fetchData?.();
+      props.closeDialog?.();
+    });
+}
 
 function close() {
-  if (props.closeDialog) {
-    props.closeDialog();
-  }
+  props.closeDialog?.();
 }
+
+/***/
 watch(
   () => props.modal,
   (newDetailData, oldDetailData) => {
     if (props.editCheck === "add") {
-      formData.am = "";
-      formData.amOut = "";
-      formData.pm = "";
-      formData.pmOut = "";
-      formData.note = "";
+      formData.startTimeMorning = "";
+      formData.endTimeMorning = "";
+      formData.startTimeAfternoon = "";
+      formData.endTimeAfternoon = "";
+      formData.description = "";
       formData.isDefault = false;
-      formData.status = false;
-    } else if(props.editCheck === "edit"){
+      formData.isActive = false;
+    } else if (props.editCheck === "edit") {
       if (props.detailData) {
-        formData.am = props.detailData.am;
-        formData.amOut = props.detailData.amOut;
-        formData.pm = props.detailData.pm;
-        formData.pmOut = props.detailData.pmOut;
-        formData.note = props.detailData.note;
+        formData.startTimeMorning = props.detailData.startTimeMorning;
+        formData.endTimeMorning = props.detailData.endTimeMorning;
+        formData.startTimeAfternoon = props.detailData.startTimeAfternoon;
+        formData.endTimeAfternoon = props.detailData.endTimeAfternoon;
+        formData.description = props.detailData.description;
         formData.isDefault = props.detailData.isDefault;
-        formData.status = props.detailData.status;
+        formData.isActive = props.detailData.isActive;
       }
     }
   }
@@ -129,21 +195,23 @@ watch(
                 dense
                 lazy-rules
                 borderless
-                v-model="formData.am"
+                v-model="formData.startTimeMorning"
                 :rules="[
                   (val) => !!val || 'กรุณากรอกเวลาเข้างาน',
                   (val) => {
-                    if (val && formData.amOut) {
-                      if (val > formData.amOut) {
+                    if (val && formData.endTimeMorning) {
+                      if (val > formData.endTimeMorning) {
                         return 'ต้องน้อยกว่าเวลาออกงาน';
                       }
-                      if (val >= formData.pm && val <= formData.pmOut) {
+                      if (
+                        val >= formData.startTimeAfternoon &&
+                        val <= formData.endTimeAfternoon
+                      ) {
                         return 'ช่วงเวลาทับซ้อนกับช่วงบ่าย';
                       }
-                      if(val === formData.amOut){
-                        return 'เวลาเข้างานช่วงเช้าต้องไม่ซ้ำกับออกงานเช้า'
+                      if (val === formData.endTimeAfternoon) {
+                        return 'เวลาเข้างานช่วงเช้าต้องไม่ซ้ำกับออกงานเช้า';
                       }
-
                     }
                     return true;
                   },
@@ -162,21 +230,24 @@ watch(
                 :readonly="props.editCheck === 'edit'"
                 :outlined="props.editCheck === 'add'"
                 dense
-                v-model="formData.amOut"
+                v-model="formData.endTimeMorning"
                 lazy-rules
                 borderless
                 :rules="[
                   (val) => !!val || 'กรุณากรอกเวลาออกงาน',
                   (val) => {
-                    if (val && formData.am) {
-                      if (val < formData.am) {
+                    if (val && formData.startTimeMorning) {
+                      if (val < formData.startTimeMorning) {
                         return 'ต้องมากกว่าเวลาเข้างาน';
                       }
-                      if (val >= formData.pm && val <= formData.pmOut) {
+                      if (
+                        val >= formData.startTimeAfternoon &&
+                        val <= formData.endTimeAfternoon
+                      ) {
                         return 'ช่วงเวลาทับซ้อนกับช่วงบ่าย';
                       }
-                      if(val === formData.am){
-                        return 'เวลาออกงานช่วงเช้าต้องไม่ซ้ำกับเข้างานเช้า'
+                      if (val === formData.startTimeMorning) {
+                        return 'เวลาออกงานช่วงเช้าต้องไม่ซ้ำกับเข้างานเช้า';
                       }
                     }
                     return true;
@@ -199,15 +270,18 @@ watch(
                 :rules="[
                   (val) => !!val || 'กรุณากรอกเวลาเข้างาน',
                   (val) => {
-                    if (val && formData.pmOut) {
-                      if (val > formData.pmOut) {
+                    if (val && formData.endTimeAfternoon) {
+                      if (val > formData.endTimeAfternoon) {
                         return 'ต้องน้อยกว่าเวลาออกงาน';
                       }
-                      if (val >= formData.am && val <= formData.amOut) {
+                      if (
+                        val >= formData.startTimeMorning &&
+                        val <= formData.endTimeMorning
+                      ) {
                         return 'ช่วงเวลาทับซ้อนกับช่วงเช้า';
                       }
-                      if(val === formData.pmOut){
-                        return 'เวลาเข้างานช่วงบ่ายต้องไม่ซ้ำกับออกงานช่วงบ่าย'
+                      if (val === formData.endTimeAfternoon) {
+                        return 'เวลาเข้างานช่วงบ่ายต้องไม่ซ้ำกับออกงานช่วงบ่าย';
                       }
                     }
                     return true;
@@ -219,7 +293,7 @@ watch(
                 dense
                 lazy-rules
                 borderless
-                v-model="formData.pm"
+                v-model="formData.startTimeAfternoon"
                 hide-bottom-space
                 type="time"
                 style="width: 140px"
@@ -233,15 +307,18 @@ watch(
                 :rules="[
                   (val) => !!val || 'กรุณากรอกเวลาออกงาน',
                   (val) => {
-                    if (val && formData.pm) {
-                      if (val < formData.pm) {
+                    if (val && formData.startTimeAfternoon) {
+                      if (val < formData.startTimeAfternoon) {
                         return 'ต้องมากกว่าเวลาเข้างาน';
                       }
-                      if (val >= formData.am && val <= formData.amOut) {
+                      if (
+                        val >= formData.startTimeMorning &&
+                        val <= formData.endTimeMorning
+                      ) {
                         return 'ช่วงเวลาทับซ้อนกับช่วงเช้า';
                       }
-                      if(val === formData.pm){
-                        return 'เวลาออกงานช่วงบ่ายต้องไม่ซ้ำกับเข้างานช่วงบ่าย'
+                      if (val === formData.startTimeAfternoon) {
+                        return 'เวลาออกงานช่วงบ่ายต้องไม่ซ้ำกับเข้างานช่วงบ่าย';
                       }
                     }
                     return true;
@@ -251,7 +328,7 @@ watch(
                 :readonly="props.editCheck === 'edit'"
                 :outlined="props.editCheck === 'add'"
                 dense
-                v-model="formData.pmOut"
+                v-model="formData.endTimeAfternoon"
                 lazy-rules
                 borderless
                 hide-bottom-space
@@ -264,7 +341,7 @@ watch(
             class="col-12 bg-white q-ma-md"
             outlined
             stack-label
-            v-model="formData.note"
+            v-model="formData.description"
             label="คำอธิบาย"
             hide-bottom-space
             type="textarea"
@@ -286,7 +363,7 @@ watch(
             <div class="row items-center q-my-sm justify-between">
               <p class="q-ma-none">สถานะการใช้งาน</p>
               <label class="toggle-control">
-                <input type="checkbox" v-model="formData.status" />
+                <input type="checkbox" v-model="formData.isActive" />
                 <span class="control"></span>
               </label>
             </div>
diff --git a/src/modules/09_leave/interface/response/round.ts b/src/modules/09_leave/interface/response/round.ts
index d1e80380e..f5f8721b8 100644
--- a/src/modules/09_leave/interface/response/round.ts
+++ b/src/modules/09_leave/interface/response/round.ts
@@ -1,40 +1,59 @@
 interface RoundRows {
-    name: string;
-    position: string;
-    responsibilities: string;
-    email: string;
-    phone: string;
+  name: string;
+  position: string;
+  responsibilities: string;
+  email: string;
+  phone: string;
 }
 interface dataRowRound {
-    am: string
-    amOut: string
-    pm: string
-    note:string
-    pmOut: string
-    status: boolean
-    isDefault: boolean
+  id: string;
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
+  description: string;
+  endTimeAfternoon: string;
+  endTimeMorning: string;
+  startTimeMorning: string;
+  startTimeAfternoon: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  isActive: boolean;
+  isDefault: boolean;
+}
+interface FormData {
+  startTimeMorning: string;
+  endTimeMorning: string;
+  startTimeAfternoon: string;
+  endTimeAfternoon: string;
+  description: string;
+  isDefault: boolean;
+  isActive: boolean;
 }
 interface roundShow {
-    round: string;
-    am: string;
-    amOut: string;
-    pm: string;
-    pmOut: string;
-    amRound: string;
-    pmRound: string;
-    status: boolean;
-    isDefault: boolean;
-  }
-interface MyObjectRoundRef {
-    am: object | null,
-    amOut: object | null,
-    pm: object | null,
-    pmOut: object | null,
-    [key: string]: any;
+  id: string;
+  round: string;
+  morningRound: string;
+  afternoonRound: string;
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
+  description: string;
+  endTimeAfternoon: string;
+  endTimeMorning: string;
+  startTimeMorning: string;
+  startTimeAfternoon: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  isActive: boolean;
+  isDefault: boolean;
 }
-export type {
-    RoundRows,
-    dataRowRound,
-    MyObjectRoundRef,
-    roundShow
-};
\ No newline at end of file
+interface MyObjectRoundRef {
+  startTimeMorning: object | null;
+  endTimeMorning: object | null;
+  startTimeAfternoon: object | null;
+  endTimeAfternoon: object | null;
+  [key: string]: any;
+}
+export type { RoundRows, dataRowRound, FormData, MyObjectRoundRef, roundShow };
diff --git a/src/modules/09_leave/stores/RoundStores.ts b/src/modules/09_leave/stores/RoundStores.ts
index e7e3ee335..b0f1d5d9e 100644
--- a/src/modules/09_leave/stores/RoundStores.ts
+++ b/src/modules/09_leave/stores/RoundStores.ts
@@ -1,85 +1,96 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
-import type { dataRowRound,roundShow } from "@/modules/09_leave/interface/response/round.ts";
+import type {
+  dataRowRound,
+  roundShow,
+} from "@/modules/09_leave/interface/response/round.ts";
 import type { QTableProps } from "quasar";
 
 // store ลา >> รอบการปฏิบัติงาน
-export const useRoundDataStore = defineStore(
-  "roundWorkStore",
-  () => {
-    //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-    const visibleColumns = ref<string[]>([
-      "round",
-      "amRound",
-      "pmRound",
-      "note",
-      "status"
-    ]);
+export const useRoundDataStore = defineStore("roundWorkStore", () => {
+  /** ค้นหา คอลัมน์ คอลัมน์ที่แสดง */
+  const visibleColumns = ref<string[]>([
+    "round",
+    "morningRound",
+    "afternoonRound",
+    "isActive",
+  ]);
 
-    // หัวตาราง
-    const columns = ref<QTableProps["columns"]>([
-      {
-        name: "round",
-        align: "left",
-        label: "รอบ",
-        sortable: true,
-        field: "round",
-        headerStyle: "font-size: 14px",
-        style: "font-size: 14px",
-      },
-      {
-        name: "amRound",
-        align: "left",
-        label: "ช่วงเช้า",
-        sortable: true,
-        field: "amRound",
-        headerStyle: "font-size: 14px",
-        style: "font-size: 14px",
-      },
-      {
-        name: "pmRound",
-        align: "left",
-        label: "ช่วงบ่าย",
-        sortable: true,
-        field: "pmRound",
-        headerStyle: "font-size: 14px",
-        style: "font-size: 14px",
-      },
-      {
-        name: "status",
-        align: "center",
-        label: "สถานะการใช้งาน",
-        sortable: true,
-        field: "status",
-        headerStyle: "font-size: 14px",
-        style: "font-size: 14px",
-      },
-    ]);
+  /** หัวตาราง */
+  const columns = ref<QTableProps["columns"]>([
+    {
+      name: "round",
+      align: "left",
+      label: "รอบ",
+      sortable: true,
+      field: "round",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "morningRound",
+      align: "left",
+      label: "ช่วงเช้า",
+      sortable: true,
+      field: "morningRound",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "afternoonRound",
+      align: "left",
+      label: "ช่วงบ่าย",
+      sortable: true,
+      field: "afternoonRound",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "isActive",
+      align: "center",
+      label: "สถานะการใช้งาน",
+      sortable: true,
+      field: "isActive",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+  ]);
 
-    // ข้อมูลในตาราง
-    const rows = ref<dataRowRound[]>([]);
-    function fetchData(data: dataRowRound[]) {
-      let datalist: roundShow[] = data.map((e: dataRowRound) => {
-        return {
-            round:`${e.am}-${e.pmOut}`,
-            am: e.am,
-            amOut: e.amOut,
-            pm: e.pm,
-            pmOut: e.pmOut,
-            amRound:`${e.am}-${e.amOut}`,
-            pmRound:`${e.pm}-${e.pmOut}`,
-            status: e.status,
-            isDefault: e.isDefault,
-        };
+  /** ข้อมูลในตาราง */
+  const rows = ref<dataRowRound[]>([]);
+  /**
+   * Function รับข้อมูลจาก API map
+   * @param data รับข้อมูลจาก API
+   */
+  function fetchData(data: dataRowRound[]) {
+    let datalist: roundShow[] = data.map((e: dataRowRound) => {
+      return {
+        id: e.id,
+        round: `${e.startTimeMorning}-${e.endTimeAfternoon}`,
+        morningRound: `${e.startTimeMorning}-${e.endTimeMorning}`,
+        afternoonRound: `${e.startTimeAfternoon}-${e.endTimeAfternoon}`,
+        createdAt: e.createdAt,
+        createdFullName: e.createdFullName,
+        createdUserId: e.createdUserId,
+        description: e.description,
+        endTimeAfternoon: e.endTimeAfternoon,
+        endTimeMorning: e.endTimeMorning,
+        startTimeMorning: e.startTimeMorning,
+        startTimeAfternoon: e.startTimeAfternoon,
+        lastUpdateFullName: e.lastUpdateFullName,
+        lastUpdateUserId: e.lastUpdateUserId,
+        lastUpdatedAt: e.lastUpdatedAt,
+        isActive: e.isActive,
+        isDefault: e.isDefault,
+      };
     });
     rows.value = datalist;
-}
-
-    return {
-      visibleColumns,
-      columns,
-      rows,
-      fetchData
-    };
   }
-);
+
+  return {
+    visibleColumns,
+    columns,
+    rows,
+    fetchData,
+  };
+});
diff --git a/src/modules/09_leave/views/RoundMain.vue b/src/modules/09_leave/views/RoundMain.vue
index 6b3fc4fed..cc98f7782 100644
--- a/src/modules/09_leave/views/RoundMain.vue
+++ b/src/modules/09_leave/views/RoundMain.vue
@@ -1,18 +1,29 @@
 <script setup lang="ts">
 import { ref, useAttrs, onMounted } from "vue";
-
-import router from "@/router";
 import { useQuasar } from "quasar";
-import DialogForm from "@/modules/09_leave/components/3_WorkTime/DialogForm.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** ImportStores*/
 import { useRoundDataStore } from "@/modules/09_leave/stores/RoundStores";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** ImportComponents*/
+import DialogForm from "@/modules/09_leave/components/3_WorkTime/DialogForm.vue";
+
+const mixin = useCounterMixin();
 const dataStore = useRoundDataStore();
 const { fetchData } = dataStore;
-
+const { showLoader, hideLoader, messageError, dialogRemove, success } = mixin;
 const $q = useQuasar(); //ใช้ noti quasar
+
+const attrs = ref<any>(useAttrs());
+
 const modal = ref<boolean>(false);
 const detailData = ref<any>();
 const editCheck = ref<string>("");
-// ค้นหาในตาราง
+
+/** ค้นหาข้อมูลใน Table */
 const filterKeyword = ref<string>("");
 const filterRef = ref<HTMLInputElement | null>(null);
 const resetFilter = () => {
@@ -22,19 +33,52 @@ const resetFilter = () => {
   }
 };
 
-const attrs = ref<any>(useAttrs());
-const paging = ref<boolean>(true);
-const pagination = ref({
-  // sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
+onMounted(() => {
+  fetchListRoind();
 });
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
 
+/** Function get ข้อมูลรายการรอบการปฏิบัติงาน */
+async function fetchListRoind() {
+  showLoader();
+  await http
+    .get(config.API.roundDutytime())
+    .then((res) => {
+      const data = res.data.result;
+      fetchData(data);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * Function delete รายการรอบการปฏิบัติงาน
+ * @param id ค่า ID ของ rows
+ */
+function onClickDelete(id: string) {
+  dialogRemove($q, async () => {
+    await http
+      .delete(config.API.roundDutytimeByid(id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(async () => {
+        await fetchListRoind();
+      });
+  });
+}
+
+/**
+ *
+ * @param data ข้อมูลรอบการปฏิบัติงาน
+ * @param check action แก้ไข,เพิ่ม
+ */
 function openModal(data: any, check: string) {
   modal.value = true;
   editCheck.value = check;
@@ -43,45 +87,18 @@ function openModal(data: any, check: string) {
   }
 }
 
+/** Function ปิด popup รายละเอียดและการเพิ่ม*/
 function closeDialog() {
   modal.value = false;
   editCheck.value = "add";
 }
-onMounted(() => {
-  dataStore.fetchData([
-    {
-      am: "07:30",
-      amOut: "12:00",
-      pm: "13:00",
-      pmOut: "15:30",
-      status: true,
-      isDefault: true,
-    },
-    {
-      am: "08:30",
-      amOut: "12:00",
-      pm: "13:00",
-      pmOut: "15:30",
-      status: false,
-      isDefault: false,
-    },
-    {
-      am: "09:30",
-      amOut: "12:00",
-      pm: "13:00",
-      pmOut: "15:30",
-      status: true,
-      isDefault: false,
-    },
-    {
-      am: "10:30",
-      amOut: "12:00",
-      pm: "13:00",
-      pmOut: "15:30",
-      status: true,
-      isDefault: false,
-    },
-  ]);
+
+/**  pagination */
+const pagination = ref({
+  // sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
 });
 </script>
 <template>
@@ -158,7 +175,6 @@ onMounted(() => {
         class="custom-header-table"
         v-bind="attrs"
         :visible-columns="dataStore.visibleColumns"
-        :pagination-label="paginationLabel"
         v-model:pagination="pagination"
       >
         <template v-slot:header="props">
@@ -172,6 +188,7 @@ onMounted(() => {
             >
               <span class="text-weight-medium">{{ col.label }}</span>
             </q-th>
+            <q-th auto-width></q-th>
           </q-tr>
         </template>
         <template v-slot:body="props">
@@ -192,15 +209,15 @@ onMounted(() => {
               :props="props"
               @click.prevent="openModal(props.row, 'edit')"
             >
-              <div v-if="col.name === 'status'" class="text-center">
+              <div v-if="col.name === 'isActive'" class="text-center">
                 <q-icon
-                  v-if="props.row.status === true"
+                  v-if="props.row.isActive === true"
                   name="mdi-check"
                   size="sm"
                   color="positive"
                 />
                 <q-icon
-                  v-if="props.row.status === false"
+                  v-if="props.row.isActive === false"
                   name="mdi-close"
                   size="sm"
                   color="grey"
@@ -210,6 +227,17 @@ onMounted(() => {
                 {{ col.value }}
               </div>
             </q-td>
+            <q-td>
+              <q-btn
+                v-if="props.row.isActive === false"
+                dense
+                flat
+                round
+                color="red"
+                icon="delete"
+                @click="onClickDelete(props.row.id)"
+              />
+            </q-td>
           </q-tr>
         </template>
       </d-table>
@@ -220,6 +248,7 @@ onMounted(() => {
     :closeDialog="closeDialog"
     :editCheck="editCheck"
     :detailData="detailData"
+    :fetchData="fetchListRoind"
   />
 </template>
 <style scoped lang="scss">

From 0e03d4279d3b8988306c0b82c10fdfa83415874b Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Fri, 10 Nov 2023 13:35:26 +0700
Subject: [PATCH 05/10] =?UTF-8?q?=E0=B8=88=E0=B8=B1=E0=B8=94=20=E0=B9=82?=
 =?UTF-8?q?=E0=B8=84=E0=B9=89=E0=B8=94=20=E0=B8=A3=E0=B8=B2=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=AA=E0=B8=B7=E0=B8=9A=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=99=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B9=80=E0=B8=97?=
 =?UTF-8?q?=E0=B9=87=E0=B8=88=E0=B8=88=E0=B8=A3=E0=B8=B4=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/1_Complaint/Form.vue           |  6 +-
 .../components/2_InvestigateFacts/AddPage.vue |  6 +-
 .../2_InvestigateFacts/EditPage.vue           | 21 ++++---
 .../components/2_InvestigateFacts/Form.vue    | 56 +++++++++++++------
 .../2_InvestigateFacts/MainPage.vue           | 21 +++++--
 5 files changed, 79 insertions(+), 31 deletions(-)

diff --git a/src/modules/11_discipline/components/1_Complaint/Form.vue b/src/modules/11_discipline/components/1_Complaint/Form.vue
index e1a2e6915..d12fdcb90 100644
--- a/src/modules/11_discipline/components/1_Complaint/Form.vue
+++ b/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;
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/AddPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/AddPage.vue
index 293549aac..00a3f1378 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/AddPage.vue
+++ b/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`);
 };
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
index 0c1f3d96d..ea6219196 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
+++ b/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>
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
index d91b7190d..54a049566 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
+++ b/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
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
index f5cd3ca97..300144b71 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
+++ b/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"

From 174530e7f9bad0a8b1072ba608e3ecd04294f140 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 10 Nov 2023 13:56:18 +0700
Subject: [PATCH 06/10] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20mi?=
 =?UTF-8?q?xin=20messageError=20=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87=20res?=
 =?UTF-8?q?ult=20=E0=B8=81=E0=B9=88=E0=B8=AD=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/09_leave/components/3_WorkTime/DialogForm.vue | 2 +-
 src/modules/09_leave/views/RoundMain.vue                  | 2 +-
 src/stores/mixin.ts                                       | 3 ++-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/modules/09_leave/components/3_WorkTime/DialogForm.vue b/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
index 56310434a..ad6f3f720 100644
--- a/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
+++ b/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
@@ -16,7 +16,7 @@ import { useQuasar } from "quasar";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { showLoader, dialogConfirm, success, messageError } = mixin;
+const { dialogConfirm, success, messageError } = mixin;
 
 /** propsData จาก RoundMain */
 const props = defineProps({
diff --git a/src/modules/09_leave/views/RoundMain.vue b/src/modules/09_leave/views/RoundMain.vue
index cc98f7782..2fbae0053 100644
--- a/src/modules/09_leave/views/RoundMain.vue
+++ b/src/modules/09_leave/views/RoundMain.vue
@@ -229,7 +229,7 @@ const pagination = ref({
             </q-td>
             <q-td>
               <q-btn
-                v-if="props.row.isActive === false"
+                v-if="props.row.isDefault === false"
                 dense
                 flat
                 round
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index 9909212ec..d5b93d965 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -376,11 +376,12 @@ export const useCounterMixin = defineStore("mixin", () => {
             },
           });
         } else {
+          const message = e.response.data.result ?? e.response.data.message;
           q.dialog({
             component: CustomComponent,
             componentProps: {
               title: `พบข้อผิดพลาด`,
-              message: `${e.response.data.message}`,
+              message: `${message}`,
               icon: "warning",
               color: "red",
               onlycancel: true,

From b311f1482b8e35993018c5abf84e1ee48c82de32 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 10 Nov 2023 13:59:48 +0700
Subject: [PATCH 07/10] no message

---
 src/modules/09_leave/views/RoundMain.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/modules/09_leave/views/RoundMain.vue b/src/modules/09_leave/views/RoundMain.vue
index 2fbae0053..b20b24f33 100644
--- a/src/modules/09_leave/views/RoundMain.vue
+++ b/src/modules/09_leave/views/RoundMain.vue
@@ -229,7 +229,9 @@ const pagination = ref({
             </q-td>
             <q-td>
               <q-btn
-                v-if="props.row.isDefault === false"
+                v-if="
+                  props.row.isDefault === false && props.row.isActive === false
+                "
                 dense
                 flat
                 round

From b202f2ed9d3dcd9478d9048be63c0a4a0c944e20 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 10 Nov 2023 14:49:16 +0700
Subject: [PATCH 08/10] =?UTF-8?q?=E0=B8=84=E0=B8=AD=E0=B8=A1=E0=B9=80?=
 =?UTF-8?q?=E0=B8=A1=E0=B9=89=E0=B8=99=20Code=20=E0=B8=A3=E0=B8=B0?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=9A=20=E0=B8=A5=E0=B8=87=E0=B9=80=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/1_Work/DialogDetail.vue        | 11 ++++++--
 .../09_leave/components/1_Work/TableList.vue  | 28 ++++++++++++-------
 .../09_leave/components/1_Work/ToolBar.vue    |  6 ++--
 .../components/1_Work/ToolBarDate.vue         |  8 +++---
 .../components/2_Leave/DetailLeave.vue        | 14 +++++-----
 .../09_leave/components/2_Leave/TableList.vue | 28 ++++++++-----------
 .../09_leave/components/2_Leave/ToolBar.vue   | 12 ++++++--
 .../components/3_WorkTime/DialogForm.vue      |  1 +
 .../09_leave/views/ChangeRoundMain.vue        |  2 +-
 src/modules/09_leave/views/LeaveListMain.vue  |  6 +---
 src/modules/09_leave/views/WorkingMain.vue    | 27 ++++++++++--------
 11 files changed, 80 insertions(+), 63 deletions(-)

diff --git a/src/modules/09_leave/components/1_Work/DialogDetail.vue b/src/modules/09_leave/components/1_Work/DialogDetail.vue
index a02604db2..d6ca9f1f3 100644
--- a/src/modules/09_leave/components/1_Work/DialogDetail.vue
+++ b/src/modules/09_leave/components/1_Work/DialogDetail.vue
@@ -1,18 +1,24 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
+
+/** props จาก TableList */
 const props = defineProps({
   modal: {
     type: Boolean,
+    require: true,
   },
   detail: {
     type: Object,
+    require: true,
   },
   colse: {
     type: Function,
+    require: true,
   },
 });
 const statusEdit = ref<boolean>(false);
-// รายละเอียดข้อมูล
+
+/** รายละเอียดข้อมูล */
 const titlename = ref<string>("");
 const timeIn = ref<string>("");
 const timeOut = ref<string>("");
@@ -33,7 +39,8 @@ watch(props, () => {
     }
   }
 });
-// ปิด popup
+
+/** Function ปิด popup */
 function colsePopup() {
   props.colse ? props.colse() : false;
 }
diff --git a/src/modules/09_leave/components/1_Work/TableList.vue b/src/modules/09_leave/components/1_Work/TableList.vue
index d69217f23..ec163523e 100644
--- a/src/modules/09_leave/components/1_Work/TableList.vue
+++ b/src/modules/09_leave/components/1_Work/TableList.vue
@@ -1,20 +1,23 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+
+/** importType*/
 import type { QTableProps } from "quasar";
-//import Stores
+
+/** importComponents */
+import DialogDetail from "@/modules/09_leave/components/1_Work/DialogDetail.vue";
+
+/** importStores */
 import { useCounterMixin } from "@/stores/mixin";
 import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
 
-//importComponents
-import DialogDetail from "@/modules/09_leave/components/1_Work/DialogDetail.vue";
-
+/** useStore */
 const mixin = useCounterMixin();
 const workStore = useWorklistDataStore();
-
 const { date2Thai } = mixin;
 const { searchDataFn, filterFn } = workStore;
 
-//ข้อมูล Table
+/** ข้อมูลหัวตาราง*/
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -80,24 +83,29 @@ const visibleColumns = ref<string[]>([
   "coordinatesOut",
 ]);
 
+/** Hook */
 onMounted(() => {
   workStore.columns = columns.value;
   workStore.visibleColumns = visibleColumns.value;
 });
 
-//DialogDetail
+/** ข้อมูล popup */
 const modal = ref<boolean>(false);
 const dataDetail = ref<any>([]);
-// เปิด popup ลายละเอียด
+/**
+ * Function openPopup และแสดงรายละเอียด
+ * @param data ข้อมูลรายละเอียด
+ */
 function clickDetail(data: any) {
   modal.value = true;
   dataDetail.value = data;
-} //ปิด popup ลายละเอียด
+}
+/** Function ปิด popup */
 function colseDeyail() {
   modal.value = false;
 }
 
-//pagination
+/** pagination */
 const pagination = ref({
   descending: true,
   page: 1,
diff --git a/src/modules/09_leave/components/1_Work/ToolBar.vue b/src/modules/09_leave/components/1_Work/ToolBar.vue
index f519ebe0f..ccd80c8df 100644
--- a/src/modules/09_leave/components/1_Work/ToolBar.vue
+++ b/src/modules/09_leave/components/1_Work/ToolBar.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-//import Stores
+/** importStores */
 import { useCounterMixin } from "@/stores/mixin";
 import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
-
+/** useStore */
 const workStore = useWorklistDataStore();
 const mixin = useCounterMixin();
-
 const { date2Thai } = mixin;
 const { filterFn, searchDataFn } = workStore;
 
+/** Functicon หาค่ามากสุดและปิดวันที่ไม่ให้เลือกวันล่วงหน้า*/
 function calculateMaxDate() {
   const today = new Date();
   today.setDate(today.getDate());
diff --git a/src/modules/09_leave/components/1_Work/ToolBarDate.vue b/src/modules/09_leave/components/1_Work/ToolBarDate.vue
index 8ae1cc18b..92ca0c224 100644
--- a/src/modules/09_leave/components/1_Work/ToolBarDate.vue
+++ b/src/modules/09_leave/components/1_Work/ToolBarDate.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-//import Stores
+/** importStores */
 import { useCounterMixin } from "@/stores/mixin";
 import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
-
+/** useStore */
 const workStore = useWorklistDataStore();
 const mixin = useCounterMixin();
-
 const { date2Thai } = mixin;
-const { filterFn, searchDataFn } = workStore;
+const { searchDataFn } = workStore;
 
+/** Functicon หาค่ามากสุดและปิดวันที่ไม่ให้เลือกวันล่วงหน้า*/
 function calculateMaxDate() {
   const today = new Date();
   today.setDate(today.getDate());
diff --git a/src/modules/09_leave/components/2_Leave/DetailLeave.vue b/src/modules/09_leave/components/2_Leave/DetailLeave.vue
index 7a255d482..8a4ae48e6 100644
--- a/src/modules/09_leave/components/2_Leave/DetailLeave.vue
+++ b/src/modules/09_leave/components/2_Leave/DetailLeave.vue
@@ -2,17 +2,17 @@
 import { ref, reactive, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useQuasar } from "quasar";
-//importStore
+/** importStore */
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
 import { useLeavelistDataStoreTest } from "@/modules/09_leave/stores/ListLeave";
 
 const APIDATA = useLeavelistDataStoreTest();
 
-//importType
+/** importType */
 import type { FremData } from "@/modules/09_leave/interface/request/leave";
 
-// importForm
+/** importForm*/
 import FormMain from "@/modules/09_leave/components/2_Leave/formDetail/formMain.vue"; // from ซ้าย
 import FormLeave from "@/modules/09_leave/components/2_Leave/formDetail/formLeave.vue"; // ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว
 import FormChildbirth from "@/modules/09_leave/components/2_Leave/formDetail/formChildbirth.vue"; // ลาไปช่วยเหลือภริยาที่คลอดบุตร
@@ -25,6 +25,8 @@ import FormLeaveToTraining from "@/modules/09_leave/components/2_Leave/formDetai
 import FormLeaveToWorkInternational from "@/modules/09_leave/components/2_Leave/formDetail/formLeaveToWorkInternational.vue"; // ลาไปปฏิบัติงานในองค์การระหว่างประเทศ
 import FormSpouse from "@/modules/09_leave/components/2_Leave/formDetail/formSpouse.vue"; // ลาติดตามคู่สมรส
 import FormVocationalRehabilitation from "@/modules/09_leave/components/2_Leave/formDetail/formVocationalRehabilitation.vue"; //ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ
+
+/** use */
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { dialogConfirm, showLoader, hideLoader, date2Thai } = mixin;
@@ -170,17 +172,15 @@ function fetchDetailLeave(paramsId: string) {
     formData.historyFollow = e.historyFollow;
   });
 
-  // setTimeout(() => {
-
+  /** ส่งประเภทของการลาไป Function เช็คประเภทการลา*/
   checkLeaveType(formData.leaveType ? formData.leaveType : "");
   hideLoader();
-  // }, 1000);
 }
 /**Status Form การลา*/
 const checkForm = ref<string>("");
 /**
  * Function เช็คประเภทการลา
- * @param type รับค่าประเภทของการลา
+ * @param type รับค่า
  */
 function checkLeaveType(type: string) {
   if (type === "leave1" || type === "leave2" || type === "leave3") {
diff --git a/src/modules/09_leave/components/2_Leave/TableList.vue b/src/modules/09_leave/components/2_Leave/TableList.vue
index 4627e2220..b1c513a48 100644
--- a/src/modules/09_leave/components/2_Leave/TableList.vue
+++ b/src/modules/09_leave/components/2_Leave/TableList.vue
@@ -3,7 +3,8 @@ q
 import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import { useRouter } from "vue-router";
-//import Stores
+
+/** importStores*/
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
 const mixin = useCounterMixin();
@@ -11,10 +12,17 @@ const leaveStore = useLeavelistDataStore();
 
 const router = useRouter();
 
-const { date2Thai } = mixin;
-const { optionYear, searchDataFn, filterOption } = leaveStore; // เรียน funtion จาก stores
+/** Hook*/
+onMounted(() => {
+  leaveStore.columns = columns.value;
+  leaveStore.visibleColumns = visibleColumns.value;
+});
 
-// ข้อมูล TABLE
+/** เรียน funtion จาก stores*/
+// const { date2Thai } = mixin;
+// const { optionYear, searchDataFn, filterOption } = leaveStore;
+
+/** ข้อมูลหัวตาราง  */
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -70,22 +78,11 @@ const visibleColumns = ref<string[]>([
   "status",
 ]);
 
-onMounted(() => {
-  leaveStore.columns = columns.value;
-  leaveStore.visibleColumns = visibleColumns.value;
-});
-
 const pagination = ref({
   descending: true,
   page: 1,
   rowsPerPage: 10,
 });
-
-const paging = ref<boolean>(true);
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
 </script>
 
 <template>
@@ -101,7 +98,6 @@ const paginationLabel = (start: string, end: string, total: string) => {
     dense
     class="custom-header-table"
     :visible-columns="leaveStore.visibleColumns"
-    :pagination-label="paginationLabel"
     v-model:pagination="pagination"
     :loading="leaveStore.loadTable"
   >
diff --git a/src/modules/09_leave/components/2_Leave/ToolBar.vue b/src/modules/09_leave/components/2_Leave/ToolBar.vue
index dafe9ad8e..0742441b9 100644
--- a/src/modules/09_leave/components/2_Leave/ToolBar.vue
+++ b/src/modules/09_leave/components/2_Leave/ToolBar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-//import Stores
+/** importStores*/
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
 
 const leaveStore = useLeavelistDataStore();
@@ -70,7 +70,13 @@ const { searchDataFn, filterOption } = leaveStore;
             (inputValue:any, doneFn:Function) =>
             filterOption(inputValue, doneFn, 'status')
           "
-      />
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template></q-select
+      >
     </div>
     <q-space />
     <div class="col-xs-12 col-sm-3 col-md-2">
@@ -99,4 +105,4 @@ const { searchDataFn, filterOption } = leaveStore;
       />
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/modules/09_leave/components/3_WorkTime/DialogForm.vue b/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
index ad6f3f720..83719aafd 100644
--- a/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
+++ b/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
@@ -134,6 +134,7 @@ async function putRoundDuty(id: string) {
     });
 }
 
+//** Function ปิด Popup */
 function close() {
   props.closeDialog?.();
 }
diff --git a/src/modules/09_leave/views/ChangeRoundMain.vue b/src/modules/09_leave/views/ChangeRoundMain.vue
index 512808b32..45274c65a 100644
--- a/src/modules/09_leave/views/ChangeRoundMain.vue
+++ b/src/modules/09_leave/views/ChangeRoundMain.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, useAttrs, onMounted, reactive } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { useQuasar } from "quasar";
 // ค้นหาในตาราง
 import type { dataPost } from "@/modules/09_leave/interface/request/changeRound";
diff --git a/src/modules/09_leave/views/LeaveListMain.vue b/src/modules/09_leave/views/LeaveListMain.vue
index de75d51a4..14e88037b 100644
--- a/src/modules/09_leave/views/LeaveListMain.vue
+++ b/src/modules/09_leave/views/LeaveListMain.vue
@@ -19,12 +19,8 @@ const { fetchList, clearFilter } = leaveStore;
 onMounted(() => {
   fecthLeaveList();
 });
-/**
- * เรียกข้อมูลจาก API
- */
+/** เรียกข้อมูลจาก API*/
 function fecthLeaveList() {
-  console.log(APIDATA.data);
-
   const data = APIDATA.data;
 
   fetchList(data); /** ส่งข้อมูลไป stores*/
diff --git a/src/modules/09_leave/views/WorkingMain.vue b/src/modules/09_leave/views/WorkingMain.vue
index 0580e8be8..370364815 100644
--- a/src/modules/09_leave/views/WorkingMain.vue
+++ b/src/modules/09_leave/views/WorkingMain.vue
@@ -1,29 +1,32 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-//import Stores
+
+/** importStores */
 import { useCounterMixin } from "@/stores/mixin";
 import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
-//import Components
+
+/** import Components */
 import TableList from "@/modules/09_leave/components/1_Work/TableList.vue";
 import ToolBar from "@/modules/09_leave/components/1_Work/ToolBar.vue";
-// import Type
-import type {
-  TableRows,
-  DataRes,
-} from "@/modules/09_leave/interface/response/work";
 import ToolBarDate from "../components/1_Work/ToolBarDate.vue";
-// use Store
+
+/** import Type */
+import type { DataRes } from "@/modules/09_leave/interface/response/work";
+
+/** use Store */
 const mixin = useCounterMixin();
 const workStore = useWorklistDataStore();
 const { date2Thai } = mixin;
 const { fetchList } = workStore;
 
-const tab = ref("1")
+const tab = ref("1");
 
+/** Hook */
 onMounted(() => {
   fecthWorkList();
 });
-//เรียกข้อมูลรายการลงเวลาปฏิบัติงาน
+
+/** เรียกข้อมูลรายการลงเวลาปฏิบัติงาน */
 function fecthWorkList() {
   const listData: DataRes[] = [
     {
@@ -98,10 +101,10 @@ function fecthWorkList() {
         active-bg-color="teal-1"
         active-class="text-primary"
       >
-        <q-tab name="1" label="รายการลงเวลาที่ประมวลผลแล้ว"/>
+        <q-tab name="1" label="รายการลงเวลาที่ประมวลผลแล้ว" />
         <q-tab name="2" label="รายการลงเวลา" />
       </q-tabs>
-        
+
       <q-separator />
 
       <q-tab-panels v-model="tab" animated>

From ef6d41ff56d7d364aa92871b7faefc30104e92cc Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 10 Nov 2023 14:58:49 +0700
Subject: [PATCH 09/10] =?UTF-8?q?=E0=B8=84=E0=B8=AD=E0=B8=A1=E0=B9=80?=
 =?UTF-8?q?=E0=B8=A1=E0=B9=89=E0=B8=99=20code=20=E0=B8=A3=E0=B8=B0?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=9A=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A5=E0=B8=B2?=
 =?UTF-8?q?(=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1=E0=B9=80?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4=E0=B8=A1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/4_ChangeRound/DialogForm.vue   | 15 +++++++++---
 .../09_leave/views/ChangeRoundMain.vue        | 24 ++++++++++++++++---
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/modules/09_leave/components/4_ChangeRound/DialogForm.vue b/src/modules/09_leave/components/4_ChangeRound/DialogForm.vue
index 370c5ec18..1ca7c917b 100644
--- a/src/modules/09_leave/components/4_ChangeRound/DialogForm.vue
+++ b/src/modules/09_leave/components/4_ChangeRound/DialogForm.vue
@@ -1,17 +1,23 @@
 <script setup lang="ts">
-import { ref, reactive, watchEffect, watch } from "vue";
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+
+/** importType */
 import type {
   changeRoundEdit,
   MyObjectRoundChangeRef,
 } from "@/modules/09_leave/interface/request/changeRound";
+
+/** importStore */
 import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
 import { useChangeRoundDataStore } from "@/modules/09_leave/stores/ChangeRoundStore";
+/** useStore */
 const dataStore = useChangeRoundDataStore();
-const $q = useQuasar();
 const mixin = useCounterMixin();
 const { dialogConfirm, date2Thai } = mixin;
 
+const $q = useQuasar();
+
 const roundRef = ref<Object | null>(null);
 const resonRef = ref<Object | null>(null);
 const effectiveDateRef = ref<Object | null>(null);
@@ -38,6 +44,7 @@ const objectRoundChange: MyObjectRoundChangeRef = {
   effectiveDate: effectiveDateRef,
 };
 
+/** Function validateForm */
 function validateForm() {
   const hasError = [];
   for (const key in objectRoundChange) {
@@ -55,6 +62,8 @@ function validateForm() {
     console.log(hasError);
   }
 }
+
+/** Function ยืนยันการบันทึกข้อมูล */
 function onSubmit() {
   dialogConfirm(
     $q,
diff --git a/src/modules/09_leave/views/ChangeRoundMain.vue b/src/modules/09_leave/views/ChangeRoundMain.vue
index 45274c65a..01af6062b 100644
--- a/src/modules/09_leave/views/ChangeRoundMain.vue
+++ b/src/modules/09_leave/views/ChangeRoundMain.vue
@@ -1,16 +1,25 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive } from "vue";
 import { useQuasar } from "quasar";
-// ค้นหาในตาราง
+
+/** importType */
 import type { dataPost } from "@/modules/09_leave/interface/request/changeRound";
-import { useChangeRoundDataStore } from "@/modules/09_leave/stores/ChangeRoundStore";
+
+/** importComponents */
 import Dialogform from "@/modules/09_leave/components/4_ChangeRound/DialogForm.vue";
 import Modal from "@/modules/05_placement/components/AppointEmployee/Modal.vue";
+
+/** importStore */
 import { useCounterMixin } from "@/stores/mixin";
-const $q = useQuasar();
+import { useChangeRoundDataStore } from "@/modules/09_leave/stores/ChangeRoundStore";
+/** useStore */
 const mixin = useCounterMixin();
 const { dialogConfirm, date2Thai, dialogMessageNotify } = mixin;
 const dataStore = useChangeRoundDataStore();
+
+/** use */
+const $q = useQuasar();
+
 const modal = ref<boolean>(false);
 const editCheck = ref<string>("");
 const DataRow = ref<any>();
@@ -20,16 +29,23 @@ const formData = reactive<dataPost>({
   lastName: "",
 });
 
+/**
+ * Function openPopup
+ * @param check action edit,history
+ * @param detail รายละเอียดข้อมูลรอบการปฏิบัติของผู้ใช้งาน
+ */
 function Openmodal(check: string, detail: any) {
   DataRow.value = detail;
   modal.value = true;
   editCheck.value = check;
 }
 
+/** Function closePopup */
 function closeDialog() {
   modal.value = false;
 }
 
+/** Function ค้นหาข้อมูล */
 function searchData() {
   if (formData.cardId || formData.firstName || formData.lastName) {
     dataStore.fetchDataForCardId(formData, "click");
@@ -37,6 +53,8 @@ function searchData() {
     dialogMessageNotify($q, "กรุณากรอกข้อมูลอย่างน้อย 1 ช่อง");
   }
 }
+
+/** Hook */
 onMounted(() => {
   dataStore.fetchDatainHistory([
     {

From c216c29abe06b65f51b830cc1d4ebd6b278a2aa1 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Fri, 10 Nov 2023 15:32:11 +0700
Subject: [PATCH 10/10] =?UTF-8?q?=E0=B8=88=E0=B8=B1=E0=B8=94=E0=B9=82?=
 =?UTF-8?q?=E0=B8=84=E0=B9=89=E0=B8=94=20=E0=B8=A3=E0=B8=B2=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=9A=E0=B8=AA=E0=B8=A7=E0=B8=99=E0=B8=84=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A1=E0=B8=9C=E0=B8=B4=E0=B8=94=E0=B8=97=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=87=E0=B8=A7=E0=B8=B4=E0=B8=99=E0=B8=B1=E0=B8=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../3_InvestigateDisciplinary/AddPage.vue     |   5 +-
 .../3_InvestigateDisciplinary/Dialogbody.vue  |  34 ++---
 .../DirectorTable.vue                         |   8 +-
 .../3_InvestigateDisciplinary/EditPage.vue    |  27 ++--
 .../3_InvestigateDisciplinary/Form.vue        | 139 +++++++++++-------
 .../3_InvestigateDisciplinary/MainPage.vue    |  36 +++--
 .../3_InvestigateDisciplinary/Table.vue       |  50 +++----
 7 files changed, 167 insertions(+), 132 deletions(-)

diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue
index 0e7ecd9ff..eabe1cd9c 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue
+++ b/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`);
 };
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue
index 4e030bfd1..f7ff924ea 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue
+++ b/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 ยืนยันส่งัว
-const saveDirector = () => {
+/** popup ยืนยันส่งัว */
+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>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/DirectorTable.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/DirectorTable.vue
index 854f5f2f6..c3fa91958 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/DirectorTable.vue
+++ b/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);
 };
 
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
index 0efadfd10..c37eb7b45 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
+++ b/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">
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
index 5d0861b98..eab23641e 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
+++ b/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;
-};
+}
 
-// เรียกข้อมูลของรอบการเสนอขอ
-
-const filter = ref<string>(""); //search data table
-
-const fileUploadDoc = async (files: any) => {
+async function fileUploadDoc(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
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
index a3b09e6a6..9e4779c2a 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
+++ b/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();
-const { fecthList } = dataInvestigateDis;
+import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";
+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>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
index 0815d3346..a6d42c273 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
+++ b/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>