From 7b5ec07d41f584661aecb76e221ff3416d7eecc2 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Thu, 7 Dec 2023 15:48:12 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=9F=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A3=E0=B9=8C=E0=B8=A1=E0=B8=AA=E0=B8=AD=E0=B8=9A=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CalandarDialog.vue                        |   2 +-
 .../3_InvestigateDisciplinary/Form.vue        | 502 +++++++++---------
 2 files changed, 256 insertions(+), 248 deletions(-)

diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/CalandarDialog.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/CalandarDialog.vue
index 181dd0e97..1be91d0ad 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/CalandarDialog.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/CalandarDialog.vue
@@ -222,7 +222,7 @@ function updateDateMonth(date: Date) {
     <q-card style="min-width: 60vw">
       <q-toolbar>
         <q-toolbar-title class="text-subtitle2 text-bold">
-          ปฎิทินแสดงวันที่สืบสวน
+          ปฎิทินแสดงวันที่สอบสวน
         </q-toolbar-title>
         <q-btn
           icon="close"
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
index c28585269..363d89bca 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
@@ -59,6 +59,7 @@ const filter = ref<string>("");
 
 const isSave = ref<boolean>(false); // มีการแก้ไขรอบันทึก
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const extendStatus = ref<boolean>(false);
 
 function toggleModal() {
   modalPerson.value = !modalPerson.value;
@@ -189,8 +190,6 @@ function validateForm() {
   }
   if (hasError.every((result) => result === true)) {
     onSubmit();
-    isSave.value = false;
-    formData.extendStatus = false;
   }
 }
 
@@ -220,6 +219,8 @@ function onSubmit() {
       }
 
       emit("submit:disciplinary", formData);
+      isSave.value = false;
+      extendStatus.value = false;
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
@@ -787,257 +788,260 @@ onMounted(async () => {
                   </datepicker>
                 </div>
                 <div class="row col-12">
-                <q-card
-                  bordered
-                  class="col-12"
-                  style="border: 1px solid #d6dee1"
-                >
-                  <div
-                    class="row col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+                  <q-card
+                    bordered
+                    class="col-12"
+                    style="border: 1px solid #d6dee1"
                   >
-                    <div>
-                      วันที่สืบสวน
-                      <q-checkbox
-                        v-if="
-                          formData.disciplinaryExtendHistory.length > 0 &&
-                          !isReadonly
-                        "
-                        :disable="isReadonly"
-                        for="#extendStatus"
-                        size="md"
-                        v-model="formData.extendStatus"
-                        label="ขยายเวลา"
-                        color="primary"
-                        dense
-                        class="text-weight-medium q-ml-sm"
-                        keep-color
-                        @update:model-value="
-                          changeFormData();
-                          resetExtend();
-                        "
-                      />
+                    <div
+                      class="row col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+                    >
+                      <div>
+                        วันที่สอบสวน
+                        <q-checkbox
+                          v-if="
+                            formData.disciplinaryExtendHistory.length > 0 &&
+                            !isReadonly
+                          "
+                          :disable="isReadonly"
+                          for="#extendStatus"
+                          size="md"
+                          v-model="extendStatus"
+                          label="ขยายเวลา"
+                          color="primary"
+                          dense
+                          class="text-weight-medium q-ml-sm"
+                          keep-color
+                          @update:model-value="
+                            changeFormData();
+                            resetExtend();
+                          "
+                        />
+                      </div>
+                      <q-space style="height: 1px" />
+                      <div>
+                        <q-btn
+                          name="calendar"
+                          round
+                          size="12px"
+                          flat
+                          dense
+                          icon="mdi-calendar-month"
+                          class="self-center items-center"
+                          color="primary"
+                          @click="calendarOpen"
+                        >
+                          <q-tooltip>ปฏิทิน</q-tooltip>
+                        </q-btn>
+                      </div>
                     </div>
-                    <q-space style="height: 1px" />
-                    <div>
-                      <q-btn
-                        name="calendar"
-                        round
-                        size="12px"
-                        flat
-                        dense
-                        icon="mdi-calendar-month"
-                        class="self-center items-center"
-                        color="primary"
-                        @click="calendarOpen"
-                      >
-                        <q-tooltip>ปฏิทิน</q-tooltip>
-                      </q-btn>
-                    </div>
-                  </div>
-                  <div class="col-12"><q-separator /></div>
-                  <div class="q-pa-sm">
-                    <div class="q-col-gutter-sm row col-12">
-                      <div class="col-12">
-                        <div class="row q-col-gutter-sm">
-                          <div v-if="formData.extendStatus" class="col-3">
-                            <q-select
-                            :readonly="isReadonly"
-                            for="#daysExtend"
-                            outlined
-                            dense
-                            lazy-rules
-                            ref="daysExtendRef"
-                            v-model="formData.daysExtend"
-                            :options="investigateDis.daysExtendOps"
-                            label="จำนวนวันที่ต้องการขยาย"
-                            emit-value
-                            hide-bottom-space
-                            map-options
-                            :rules="[
-                              (val) =>
-                                formData.extendStatus
-                                  ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
-                                  : true,
-                            ]"
-                            option-label="name"
-                            option-value="id"
-                            use-input
-                            @update:model-value="calEndDate"
-                            ><template v-slot:no-option>
-                              <q-item>
-                                <q-item-section class="text-grey">
-                                  ไม่มีข้อมูล
-                                </q-item-section>
-                              </q-item>
-                            </template>
-                          </q-select>
-                          </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="q-pa-sm">
+                      <div class="q-col-gutter-sm row col-12">
+                        <div class="col-12">
+                          <div class="row q-col-gutter-sm">
+                            <div v-if="extendStatus" class="col-3">
+                              <q-select
+                                :readonly="isReadonly"
+                                for="#daysExtend"
+                                outlined
+                                dense
+                                lazy-rules
+                                ref="daysExtendRef"
+                                v-model="formData.daysExtend"
+                                :options="investigateDis.daysExtendOps"
+                                label="จำนวนวันที่ต้องการขยาย"
+                                emit-value
+                                hide-bottom-space
+                                map-options
+                                :rules="[
+                                  (val) =>
+                                    formData.extendStatus
+                                      ? !!val ||
+                                        'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
+                                      : true,
+                                ]"
+                                option-label="name"
+                                option-value="id"
+                                use-input
+                                @update:model-value="calEndDate"
+                                ><template v-slot:no-option>
+                                  <q-item>
+                                    <q-item-section class="text-grey">
+                                      ไม่มีข้อมูล
+                                    </q-item-section>
+                                  </q-item>
+                                </template>
+                              </q-select>
+                            </div>
 
-                          <div v-if="!formData.extendStatus" class="col-3">
-                            <datepicker
-                              menu-class-name="modalfix"
-                              :readonly="
-                                isReadonly ||
-                                formData.disciplinaryExtendHistory.length > 0
-                              "
-                              v-model="formData.disciplinaryDateStart"
-                              :locale="'th'"
-                              autoApply
-                              :enableTimePicker="false"
-                              week-start="0"
-                              @update:model-value="changeFormData()"
-                            >
-                              <template #year="{ year }">{{
-                                year + 543
-                              }}</template>
-                              <template #year-overlay-value="{ value }">{{
-                                parseInt(value + 543)
-                              }}</template>
-                              <template #trigger>
-                                <q-input
-                                  for="#date"
-                                  class="full-width cursor-pointer"
-                                  ref="dateRef"
-                                  :input-style="
-                                    isReadonly ||
-                                    formData.disciplinaryExtendHistory.length >
-                                      0
-                                      ? { color: 'black' }
-                                      : { color: 'teal' }
-                                  "
-                                  :readonly="
-                                    isReadonly ||
-                                    formData.disciplinaryExtendHistory.length >
-                                      0
-                                  "
-                                  outlined
-                                  dense
-                                  lazy-rules
-                                  borderless
-                                  hide-bottom-space
-                                  :model-value="
-                                    formData.disciplinaryDateStart
-                                      ? date2Thai(
-                                          formData.disciplinaryDateStart
-                                        )
-                                      : null
-                                  "
-                                  :rules="[
-                                    (val) =>
-                                      !!val ||
-                                      `${'กรุณาเลือกวันที่เริ่มการสืบสวน'}`,
-                                  ]"
-                                  :label="`${'วันที่เริ่มการสืบสวน'}`"
-                                >
-                                  <template v-slot:prepend>
-                                    <q-icon
-                                      name="event"
-                                      class="cursor-pointer"
-                                      color="primary"
-                                    >
-                                    </q-icon>
-                                  </template>
-                                </q-input>
-                              </template>
-                            </datepicker>
-                          </div>
-                          <div class="col-3">
-                            <datepicker
-                              menu-class-name="modalfix"
-                              v-model="formData.disciplinaryDateEnd"
-                              :readonly="
-                                isReadonly ||
-                                formData.disciplinaryExtendHistory.length > 0
-                              "
-                              :locale="'th'"
-                              autoApply
-                              :enableTimePicker="false"
-                              week-start="0"
-                              @update:model-value="changeFormData()"
-                            >
-                              <template #year="{ year }">{{
-                                year + 543
-                              }}</template>
-                              <template #year-overlay-value="{ value }">{{
-                                parseInt(value + 543)
-                              }}</template>
-                              <template #trigger>
-                                <q-input
-                                  for="#dateEnd"
-                                  :input-style="
-                                    isReadonly ||
-                                    formData.disciplinaryExtendHistory.length >
-                                      0
-                                      ? { color: 'black' }
-                                      : { color: 'teal' }
-                                  "
-                                  ref="dateEndRef"
-                                  class="full-width cursor-pointer"
-                                  :readonly="
-                                    isReadonly ||
-                                    formData.disciplinaryExtendHistory.length >
-                                      0
-                                  "
-                                  outlined
-                                  dense
-                                  lazy-rules
-                                  hide-bottom-space
-                                  borderless
-                                  :model-value="
-                                    formData.disciplinaryDateEnd
-                                      ? date2Thai(formData.disciplinaryDateEnd)
-                                      : null
-                                  "
-                                  :rules="[
-                                    (val) =>
-                                      !!val ||
-                                      `${'กรุณาเลือกวันที่สิ้นสุดการสืบสวน'}`,
-                                  ]"
-                                  :label="`${'วันที่สิ้นสุดการสืบสวน'}`"
-                                >
-                                  <template v-slot:prepend>
-                                    <q-icon
-                                      name="event"
-                                      class="cursor-pointer"
-                                      color="primary"
-                                    >
-                                    </q-icon>
-                                  </template>
-                                </q-input>
-                              </template>
-                            </datepicker>
+                            <div v-if="!extendStatus" class="col-3">
+                              <datepicker
+                                menu-class-name="modalfix"
+                                :readonly="
+                                  isReadonly ||
+                                  formData.disciplinaryExtendHistory.length > 0
+                                "
+                                v-model="formData.disciplinaryDateStart"
+                                :locale="'th'"
+                                autoApply
+                                :enableTimePicker="false"
+                                week-start="0"
+                                @update:model-value="changeFormData()"
+                              >
+                                <template #year="{ year }">{{
+                                  year + 543
+                                }}</template>
+                                <template #year-overlay-value="{ value }">{{
+                                  parseInt(value + 543)
+                                }}</template>
+                                <template #trigger>
+                                  <q-input
+                                    for="#date"
+                                    class="full-width cursor-pointer"
+                                    ref="dateRef"
+                                    :input-style="
+                                      isReadonly ||
+                                      formData.disciplinaryExtendHistory
+                                        .length > 0
+                                        ? { color: 'black' }
+                                        : { color: 'teal' }
+                                    "
+                                    :readonly="
+                                      isReadonly ||
+                                      formData.disciplinaryExtendHistory
+                                        .length > 0
+                                    "
+                                    outlined
+                                    dense
+                                    lazy-rules
+                                    borderless
+                                    hide-bottom-space
+                                    :model-value="
+                                      formData.disciplinaryDateStart
+                                        ? date2Thai(
+                                            formData.disciplinaryDateStart
+                                          )
+                                        : null
+                                    "
+                                    :rules="[
+                                      (val) =>
+                                        !!val ||
+                                        `${'กรุณาเลือกวันที่เริ่มการสืบสวน'}`,
+                                    ]"
+                                    :label="`${'วันที่เริ่มการสืบสวน'}`"
+                                  >
+                                    <template v-slot:prepend>
+                                      <q-icon
+                                        name="event"
+                                        class="cursor-pointer"
+                                        color="primary"
+                                      >
+                                      </q-icon>
+                                    </template>
+                                  </q-input>
+                                </template>
+                              </datepicker>
+                            </div>
+                            <div class="col-3">
+                              <datepicker
+                                menu-class-name="modalfix"
+                                v-model="formData.disciplinaryDateEnd"
+                                :readonly="
+                                  isReadonly ||
+                                  formData.disciplinaryExtendHistory.length > 0
+                                "
+                                :locale="'th'"
+                                autoApply
+                                :enableTimePicker="false"
+                                week-start="0"
+                                @update:model-value="changeFormData()"
+                              >
+                                <template #year="{ year }">{{
+                                  year + 543
+                                }}</template>
+                                <template #year-overlay-value="{ value }">{{
+                                  parseInt(value + 543)
+                                }}</template>
+                                <template #trigger>
+                                  <q-input
+                                    for="#dateEnd"
+                                    :input-style="
+                                      isReadonly ||
+                                      formData.disciplinaryExtendHistory
+                                        .length > 0
+                                        ? { color: 'black' }
+                                        : { color: 'teal' }
+                                    "
+                                    ref="dateEndRef"
+                                    class="full-width cursor-pointer"
+                                    :readonly="
+                                      isReadonly ||
+                                      formData.disciplinaryExtendHistory
+                                        .length > 0
+                                    "
+                                    outlined
+                                    dense
+                                    lazy-rules
+                                    hide-bottom-space
+                                    borderless
+                                    :model-value="
+                                      formData.disciplinaryDateEnd
+                                        ? date2Thai(
+                                            formData.disciplinaryDateEnd
+                                          )
+                                        : null
+                                    "
+                                    :rules="[
+                                      (val) =>
+                                        !!val ||
+                                        `${'กรุณาเลือกวันที่สิ้นสุดการสืบสวน'}`,
+                                    ]"
+                                    :label="`${'วันที่สิ้นสุดการสืบสวน'}`"
+                                  >
+                                    <template v-slot:prepend>
+                                      <q-icon
+                                        name="event"
+                                        class="cursor-pointer"
+                                        color="primary"
+                                      >
+                                      </q-icon>
+                                    </template>
+                                  </q-input>
+                                </template>
+                              </datepicker>
+                            </div>
                           </div>
                         </div>
-                      </div>
 
-                      <!-- วันที่สืบสวน (List Log) -->
-                      <div
-                        v-if="
-                          formData.disciplinaryExtendHistory !== null &&
-                          formData.disciplinaryExtendHistory.length > 1
-                        "
-                        class="col-12 fixed-height-history"
-                      >
-                        <q-list bordered separator>
-                          <q-item
-                            v-for="(
-                              e, key
-                            ) in formData.disciplinaryExtendHistory.slice(1)"
-                          >
-                            <q-item-section :key="key">
-                              {{ e.name }} ({{ e.daysExtend }} วัน)
-                              <p class="q-mb-none">
-                                {{ date2Thai(e.dateStart) }} -
-                                {{ date2Thai(e.dateEnd) }}
-                              </p>
-                            </q-item-section>
-                          </q-item>
-                        </q-list>
+                        <!-- วันที่สอบสวน (List Log) -->
+                        <div
+                          v-if="
+                            formData.disciplinaryExtendHistory !== null &&
+                            formData.disciplinaryExtendHistory.length > 1
+                          "
+                          class="col-12 fixed-height-history"
+                        >
+                          <q-list bordered separator>
+                            <q-item
+                              v-for="(
+                                e, key
+                              ) in formData.disciplinaryExtendHistory.slice(1)"
+                            >
+                              <q-item-section :key="key">
+                                {{ e.name }} ({{ e.daysExtend }} วัน)
+                                <p class="q-mb-none">
+                                  {{ date2Thai(e.dateStart) }} -
+                                  {{ date2Thai(e.dateEnd) }}
+                                </p>
+                              </q-item-section>
+                            </q-item>
+                          </q-list>
+                        </div>
                       </div>
                     </div>
-                  </div>
-                </q-card>
-              </div>
+                  </q-card>
+                </div>
 
                 <datepicker
                   :readonly="isReadonly"
@@ -1564,7 +1568,11 @@ onMounted(async () => {
     @returnDirector="returnDirector"
   />
 
-  <CalandarDialog :modal="calendarModal" :close="calendarModalclose" :lists="formData.disciplinaryExtendHistory"/>
+  <CalandarDialog
+    :modal="calendarModal"
+    :close="calendarModalclose"
+    :lists="formData.disciplinaryExtendHistory"
+  />
 </template>
 
 <style scoped>
@@ -1572,4 +1580,4 @@ onMounted(async () => {
   overflow-y: auto;
   max-height: 150px;
 }
-</style>
\ No newline at end of file
+</style>