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

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>