เปลี่ยนจาก ติ้ก เป็น ไอคอนบวก

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

@@ -21,10 +21,11 @@ import Table from "@/modules/11_discipline/components/DirectorTable.vue";
 import DialogDirector from "@/modules/11_discipline/components/DialogDirector.vue";
 import PopupSendToNext from "@/modules/11_discipline/components/PopupSendToNext.vue";
 import DialogAddPersonal from "@/components/Dialogs/AddPersonal.vue";
+import DialogAddDate from "@/modules/11_discipline/components/DialogAddDate.vue";
 
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
-
+const modalAddDate = ref<boolean>(false);
 const $q = useQuasar();
 const route = useRoute();
 const checkRoutePermisson = ref<boolean>(
@@ -189,8 +190,9 @@ function onSubmit() {
  * ฟังชั้นคำนวณเวลาวันที่สิ้นสุดจาก วันที่สิ้นสุดการสืบสวน
  * @param val จำนวนวันที่ต้องการขยาย
  */
-async function calEndDate(val: string) {
+async function calEndDate(val: any) {
   changeFormData();
+  formData.investigationDaysExtend = val;
   const date = await new Date(props.data.investigationDateEnd);
   formData.investigationDateEnd = await new Date(
     date.setDate(date.getDate() + Number(val))
@@ -993,7 +995,11 @@ onMounted(async () => {
                               {{ props.row.organization }}
                             </div>
                             <div v-else-if="col.name === 'salary'">
-                              {{ props.row.salary?props.row.salary.toLocaleString():'0' }}
+                              {{
+                                props.row.salary
+                                  ? props.row.salary.toLocaleString()
+                                  : "0"
+                              }}
                             </div>
                             <div v-else-if="col.name === 'profileType'">
                               {{
@@ -1043,26 +1049,24 @@ onMounted(async () => {
                   >
                     <div>
                       วันที่สืบสวน
-                      <q-checkbox
+
+                      <q-btn
                         v-if="
                           props.data.investigationExtendHistory.length > 0 &&
                           !isReadonly &&
                           !checkRoutePermisson
                         "
-                        :disable="isReadonly"
+                        size="12px"
-                        for="#extendStatus"
+                        flat
-                        size="md"
+                        round
-                        v-model="investigationExtendStatus"
-                        label="ขยายเวลา"
-                        color="primary"
                         dense
-                        class="text-weight-medium q-ml-sm"
+                        color="primary"
-                        keep-color
+                        class="q-ml-sm"
-                        @update:model-value="
+                        @click="modalAddDate = true"
-                          changeFormData();
+                        icon="mdi-plus"
-                          resetExtend();
+                      >
-                        "
+                        <q-tooltip>ขยายเวลา</q-tooltip>
-                      />
+                      </q-btn>
                     </div>
                     <q-space style="height: 1px" />
                     <div>
@@ -1086,35 +1090,7 @@ onMounted(async () => {
                     <div class="q-col-gutter-sm row col-12">
                       <div class="col-12">
                         <div class="row q-col-gutter-sm">
-                          <div v-if="investigationExtendStatus" class="col-3">
+                          <div class="col-3">
-                            <q-select
-                              :class="inputEdit(isReadonly)"
-                              :readonly="isReadonly || checkRoutePermisson"
-                              for="#daysExtend"
-                              outlined
-                              dense
-                              ref="daysExtendRef"
-                              v-model="formData.investigationDaysExtend"
-                              :options="investigateFactStore.daysExtendOp"
-                              label="จำนวนวันที่ต้องการขยาย"
-                              emit-value
-                              hide-bottom-space
-                              map-options
-                              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="!investigationExtendStatus" class="col-3">
                             <datepicker
                               menu-class-name="modalfix"
                               :readonly="
@@ -1151,12 +1127,12 @@ onMounted(async () => {
                                   borderless
                                   hide-bottom-space
                                   :model-value="
-                                    formData.investigationDateStart
+                                      formData.investigationDateStart
-                                      ? date2Thai(
+                                        ? date2Thai(
-                                          formData.investigationDateStart as Date
+                                            formData.investigationDateStart as Date
-                                        )
+                                          )
-                                      : null
+                                        : null
-                                  "
+                                    "
                                   :label="`${'วันที่เริ่มการสืบสวน'}`"
                                 >
                                   <template v-slot:prepend>
@@ -1190,6 +1166,7 @@ onMounted(async () => {
                               </template>
                             </datepicker>
                           </div>
+
                           <div class="col-3">
                             <datepicker
                               :class="
@@ -1805,6 +1782,14 @@ onMounted(async () => {
     @update:modal="updatemodalPersonal"
     :type="isEmpType"
   />
+
+  <DialogAddDate
+    v-model:modal="modalAddDate"
+    :calEndDate="calEndDate"
+    :reset="resetExtend"
+    :data="props.data"
+    :type="'investigation'"
+  />
 </template>
 
 <style scope>

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

@@ -245,7 +245,6 @@ async function fetchDetailComplaints() {
  * @param data ข้อมูล ใน form
  */
 async function onSubmitDisciplinary(data: any) {
-  console.log("🚀 ~ onSubmitDisciplinary ~ data:", data);
   showLoader();
   await http
     .put(config.API.disciplineDisciplinaryById(id.value), data)

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

@@ -32,6 +32,7 @@ import DialogAddPersonal from "@/components/Dialogs/AddPersonal.vue";
 import DialogDirector from "@/modules/11_discipline/components/DialogDirector.vue";
 import Table from "@/modules/11_discipline/components/DirectorTable.vue";
 import UploadFile from "@/modules/11_discipline/components/UploadFile.vue";
+import DialogAddDate from "@/modules/11_discipline/components/DialogAddDate.vue";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -51,6 +52,7 @@ const {
 } = mixin;
 
 const modalPersonal = ref<boolean>(false);
+const modalAddDate = ref<boolean>(false);
 const personId = ref<string>("");
 const isSaveInfo = defineModel<boolean>("isSaveInfo");
 const calendarModal = ref<boolean>(false);
@@ -135,7 +137,7 @@ const initialPagination = ref<any>({
 const props = defineProps({
   data: {
     type: Object,
-    default: null,
+    default: () => ({}),
   },
   onSubmit: {
     type: Function,
@@ -186,8 +188,9 @@ function toggleModal() {
  * ฟังชั้นคำนวณเวลาวันที่สิ้นสุดจาก วันที่สิ้นสุดการสอบสวน
  * @param val จำนวนวันที่ต้องการขยาย
  */
-async function calEndDate(val: string) {
+async function calEndDate(val: any) {
   changeFormData();
+  formData.daysExtend = val;
   const date = await new Date(props.data.disciplinaryDateEnd);
   formData.disciplinaryDateEnd = await new Date(
     date.setDate(date.getDate() + Number(val))
@@ -1148,26 +1151,24 @@ onMounted(async () => {
                   >
                     <div>
                       วันที่สอบสวน
-                      <q-checkbox
+
+                      <q-btn
                         v-if="
                           formData.disciplinaryExtendHistory.length > 0 &&
                           !isReadonly &&
                           !checkRoutePermisson
                         "
-                        :disable="isReadonly"
+                        size="12px"
-                        for="#extendStatus"
+                        flat
-                        size="md"
+                        round
-                        v-model="extendStatus"
-                        label="ขยายเวลา"
-                        color="primary"
                         dense
-                        class="text-weight-medium q-ml-sm"
+                        color="primary"
-                        keep-color
+                        class="q-ml-sm"
-                        @update:model-value="
+                        @click="modalAddDate = true"
-                          changeFormData();
+                        icon="mdi-plus"
-                          resetExtend();
+                      >
-                        "
+                        <q-tooltip>ขยายเวลา</q-tooltip>
-                      />
+                      </q-btn>
                     </div>
                     <q-space style="height: 1px" />
                     <div>
@@ -1190,45 +1191,7 @@ onMounted(async () => {
                     <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">
+                          <div class="col-3">
-                            <q-select
-                              :class="inputEdit(isReadonly)"
-                              :readonly="isReadonly || checkRoutePermisson"
-                              for="#daysExtend"
-                              outlined
-                              dense
-                              ref="daysExtendRef"
-                              v-model="formData.daysExtend"
-                              :options="investigateDis.daysExtendOps"
-                              label="จำนวนวันที่ต้องการขยาย"
-                              emit-value
-                              hide-bottom-space
-                              map-options
-                              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>
-                              <template
-                                v-if="formData.daysExtend === 0"
-                                v-slot:append
-                              >
-                                <q-icon
-                                  name="cancel"
-                                  @click.stop.prevent="formData.daysExtend = 0"
-                                  class="cursor-pointer"
-                                />
-                              </template>
-                            </q-select>
-                          </div>
-
-                          <div v-if="!extendStatus" class="col-3">
                             <datepicker
                               :readonly="
                                 checkRoutePermisson ||
@@ -2028,6 +1991,14 @@ onMounted(async () => {
     @update:modal="updatemodalPersonal"
     :type="isEmpType"
   />
+
+  <DialogAddDate
+    v-model:modal="modalAddDate"
+    :calEndDate="calEndDate"
+    :reset="resetExtend"
+    :data="props.data"
+    :type="'disciplinary'"
+  />
 </template>
 
 <style scoped>

src/modules/11_discipline/components/DialogAddDate.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
+import { useCounterMixin } from "@/stores/mixin";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+const investigateFactStore = useInvestigateFactStore();
+
+const dateAdd = ref<number | null>(null);
+const dateDetail = ref<Date | null | string>(null);
+const dateShow = ref<Date | null | string>(null);
+const props = defineProps({
+  calEndDate: Function,
+  reset: Function,
+  data: Object,
+  type: String,
+});
+function closeDialog() {
+  modal.value = false;
+  dateAdd.value = null;
+}
+
+function onSubmit() {
+  props.calEndDate?.(dateAdd.value);
+  closeDialog();
+}
+
+async function calEndDateDetail(val: string) {
+  const date = await new Date(dateDetail.value as Date);
+  dateShow.value = await new Date(date.setDate(date.getDate() + Number(val)));
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value == true) {
+      const date =
+        props.type == "investigation"
+          ? props.data?.investigationDateEnd
+          : props.data?.disciplinaryDateEnd;
+
+      dateShow.value = date;
+      dateDetail.value = date;
+    }
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 30vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader tittle="ขยายเวลา" :close="closeDialog" />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-sm-12 col-md-6">
+              <q-select
+                for="#daysExtend"
+                outlined
+                dense
+                ref="daysExtendRef"
+                :model-value="dateAdd ? dateAdd : 0"
+                :options="investigateFactStore.daysExtendOp"
+                label="จำนวนวันที่ต้องการขยาย"
+                emit-value
+                hide-bottom-space
+                map-options
+                option-label="name"
+                option-value="id"
+                use-input
+                @update:model-value="(value:any)=>{dateAdd = value, calEndDateDetail(value)}"
+                ><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-sm-12 col-md-6">
+              <datepicker
+                v-model="dateShow"
+                readonly
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    for="#dateEnd"
+                    ref="dateEndRef"
+                    readonly
+                    outlined
+                    dense
+                    hide-bottom-space
+                    borderless
+                    :model-value="dateShow ? date2Thai( dateShow as Date): null"
+                    :label="`${'วันที่สิ้นสุดการสอบสวน'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>