hrms-mgt/src/modules/11_discipline/components/DialogAddDate.vue

<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>