116 lines
3.7 KiB
Vue
116 lines
3.7 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref } from "vue";
|
||
|
|
import { useQuasar } from "quasar";
|
||
|
|
import { useCounterMixin } from "@/stores/mixin";
|
||
|
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||
|
|
import type { FormDateTimeRef } from "@/modules/02_organizationalNew/interface/index/Main";
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
modal: Boolean,
|
||
|
|
close: Function,
|
||
|
|
});
|
||
|
|
|
||
|
|
const $q = useQuasar();
|
||
|
|
const mixin = useCounterMixin();
|
||
|
|
const { dialogConfirm, date2Thai } = mixin;
|
||
|
|
|
||
|
|
const dateTimeRef = ref<Object | null>(null);
|
||
|
|
|
||
|
|
const dateTime = ref<Date>();
|
||
|
|
|
||
|
|
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||
|
|
const objectRef: FormDateTimeRef = {
|
||
|
|
dateTime: dateTimeRef,
|
||
|
|
};
|
||
|
|
|
||
|
|
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||
|
|
function validateForm() {
|
||
|
|
const hasError = [];
|
||
|
|
for (const key in objectRef) {
|
||
|
|
if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
|
||
|
|
const property = objectRef[key];
|
||
|
|
if (property.value && typeof property.value.validate === "function") {
|
||
|
|
const isValid = property.value.validate();
|
||
|
|
hasError.push(isValid);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (hasError.every((result) => result === true)) {
|
||
|
|
onSubmit();
|
||
|
|
} else {
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/** ฟังชั่น บันทึก */
|
||
|
|
function onSubmit() {
|
||
|
|
dialogConfirm($q, () => {
|
||
|
|
console.log(dateTime.value);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<template>
|
||
|
|
<q-dialog v-model="props.modal" persistent>
|
||
|
|
<q-card style="min-width: 10vw">
|
||
|
|
<form @submit.prevent="validateForm">
|
||
|
|
<DialogHeader :tittle="`ตั้งเวลาเผยแพร่`" :close="props.close" />
|
||
|
|
<q-separator />
|
||
|
|
|
||
|
|
<q-card-section>
|
||
|
|
<div class="row q-col-gutter-sm">
|
||
|
|
<div class="col-12">
|
||
|
|
<datepicker
|
||
|
|
menu-class-name="modalfix"
|
||
|
|
v-model="dateTime"
|
||
|
|
: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
|
||
|
|
for="#dateTime"
|
||
|
|
ref="dateTimeRef"
|
||
|
|
outlined
|
||
|
|
dense
|
||
|
|
hide-bottom-space
|
||
|
|
:model-value="
|
||
|
|
dateTime != null ? date2Thai(dateTime) : null
|
||
|
|
"
|
||
|
|
label="วันเวลาเผยแพร่"
|
||
|
|
:rules="[
|
||
|
|
(val) => !!val || `${'กรุณาเลือกวันเวลาเผยแพร่'}`,
|
||
|
|
]"
|
||
|
|
lazy-rules
|
||
|
|
>
|
||
|
|
<template v-slot:prepend>
|
||
|
|
<q-icon
|
||
|
|
name="event"
|
||
|
|
class="cursor-pointer"
|
||
|
|
style="color: var(--q-primary)"
|
||
|
|
>
|
||
|
|
</q-icon>
|
||
|
|
</template>
|
||
|
|
</q-input>
|
||
|
|
</template>
|
||
|
|
</datepicker>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</q-card-section>
|
||
|
|
<q-separator />
|
||
|
|
<q-card-actions align="right" class="bg-white text-teal">
|
||
|
|
<q-btn type="submit" :label="`บันทึก`" color="public" />
|
||
|
|
</q-card-actions>
|
||
|
|
</form>
|
||
|
|
</q-card>
|
||
|
|
</q-dialog>
|
||
|
|
</template>
|
||
|
|
</template>
|