263 lines
8 KiB
Vue
263 lines
8 KiB
Vue
<script setup lang="ts">
|
|
import { ref, reactive, watch } from "vue";
|
|
import DialogHeader from "@/components/DialogHeader.vue";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useQuasar } from "quasar";
|
|
|
|
interface DetailData {
|
|
id: string;
|
|
sick: string;
|
|
absence: string;
|
|
late: string;
|
|
government: string;
|
|
study: string;
|
|
year: number;
|
|
}
|
|
const $q = useQuasar();
|
|
const mixin = useCounterMixin();
|
|
const { dialogConfirm, messageError, showLoader, hideLoader } = mixin;
|
|
const myForm = ref<any>(); //form data input
|
|
const checkValidate = ref<boolean>(false);
|
|
const modal = defineModel<boolean>("modal", { required: true });
|
|
const edit = defineModel<boolean>("edit", { required: true });
|
|
const data = defineModel<Array<any>>("data", { required: true });
|
|
|
|
const clear = ref<boolean>(false);
|
|
const editForm = ref<boolean>(false);
|
|
const editForms = ref<boolean>(false);
|
|
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
|
|
|
const formData = reactive<DetailData>({
|
|
id: "",
|
|
sick: "",
|
|
absence: "",
|
|
late: "",
|
|
government: "",
|
|
study: "",
|
|
year: new Date().getFullYear(),
|
|
});
|
|
|
|
function close() {
|
|
modal.value = false;
|
|
}
|
|
|
|
/**
|
|
* ส่งค่า css ออกไปตามเงื่อนไข
|
|
* @param val true/false
|
|
*/
|
|
function inputEdit(val: boolean) {
|
|
return {
|
|
"full-width cursor-pointer inputgreen ": val,
|
|
"full-width cursor-pointer inputgreen": !val,
|
|
};
|
|
}
|
|
|
|
const validateData = async () => {
|
|
checkValidate.value = true;
|
|
await myForm.value.validate().then((result: boolean) => {
|
|
if (result == false) {
|
|
checkValidate.value = false;
|
|
} else saveForm();
|
|
});
|
|
};
|
|
|
|
function saveForm() {
|
|
dialogConfirm($q, () => {
|
|
console.log(formData);
|
|
modal.value = false;
|
|
});
|
|
}
|
|
function clearForm() {
|
|
formData.sick = "";
|
|
formData.absence = "";
|
|
formData.late = "";
|
|
formData.government = "";
|
|
formData.study = "";
|
|
editForm.value = false;
|
|
editForms.value = false;
|
|
clear.value = false;
|
|
}
|
|
|
|
function clickDelete() {}
|
|
watch(
|
|
() => modal.value,
|
|
() => {
|
|
if (modal.value == true) {
|
|
clearForm();
|
|
if (edit.value == false) {
|
|
clear.value = true
|
|
const dataList: any = data.value;
|
|
formData.id = dataList.id;
|
|
formData.sick = dataList.sick == "-" ? "" : dataList.sick;
|
|
formData.absence = dataList.absence == "-" ? "" : dataList.absence;
|
|
formData.late = dataList.late == "-" ? "" : dataList.late;
|
|
formData.government =
|
|
dataList.government == "-" ? "" : dataList.government;
|
|
formData.study = dataList.study == "-" ? "" : dataList.study;
|
|
formData.year =
|
|
dataList.year == "-" ? new Date().getFullYear() : dataList.year;
|
|
editForm.value = true;
|
|
console.log(dataList);
|
|
}
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
<template>
|
|
<q-dialog v-model="modal" persistent>
|
|
<q-card style="min-width: 30vw">
|
|
<q-form ref="myForm">
|
|
<DialogHeader :tittle="`การลา`" :close="close" />
|
|
<q-separator />
|
|
|
|
<q-card-section>
|
|
<div class="row q-col-gutter-sm">
|
|
<div class="col-6">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="formData.year"
|
|
class="col-2"
|
|
:locale="'th'"
|
|
autoApply
|
|
year-picker
|
|
:enableTimePicker="false"
|
|
:readonly="!edit && !editForms"
|
|
>
|
|
<template #year="{ year }">{{ year + 543 }}</template>
|
|
<template #year-overlay-value="{ value }">{{
|
|
parseInt(value + 543)
|
|
}}</template>
|
|
<template #trigger>
|
|
<q-input
|
|
dense
|
|
lazy-rules
|
|
hide-bottom-space
|
|
:rules="[(val:string) => !!val || `${'กรุณาเลือกปี'}`]"
|
|
:class="inputEdit(isReadonly)"
|
|
:outlined="edit || editForms"
|
|
:borderless="!edit"
|
|
:readonly="!edit && !editForms"
|
|
:model-value="
|
|
formData.year === 0 ? null : Number(formData.year) + 543
|
|
"
|
|
:label="`${'ปี'}`"
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon
|
|
name="event"
|
|
class="cursor-pointer"
|
|
style="color: var(--q-primary)"
|
|
>
|
|
</q-icon>
|
|
</template>
|
|
<template v-if="formData.year && clear == false " v-slot:append>
|
|
<q-icon
|
|
name="cancel"
|
|
@click.stop.prevent="formData.year = 0"
|
|
class="cursor-pointer"
|
|
/>
|
|
</template>
|
|
</q-input>
|
|
</template>
|
|
</datepicker>
|
|
</div>
|
|
<div class="col-6">
|
|
<q-input
|
|
:class="inputEdit(isReadonly)"
|
|
v-model="formData.sick"
|
|
label="ลาป่วย"
|
|
dense
|
|
:outlined="edit || editForms"
|
|
:borderless="!edit"
|
|
:readonly="!edit && !editForms"
|
|
/>
|
|
</div>
|
|
<div class="col-6">
|
|
<q-input
|
|
:class="inputEdit(isReadonly)"
|
|
v-model="formData.absence"
|
|
label="ลากิจและพักผ่อน"
|
|
dense
|
|
:outlined="edit || editForms"
|
|
:borderless="!edit"
|
|
:readonly="!edit && !editForms"
|
|
/>
|
|
</div>
|
|
<div class="col-6">
|
|
<q-input
|
|
:class="inputEdit(isReadonly)"
|
|
v-model="formData.late"
|
|
label="มาสาย"
|
|
dense
|
|
:outlined="edit || editForms"
|
|
:borderless="!edit"
|
|
:readonly="!edit && !editForms"
|
|
/>
|
|
</div>
|
|
<div class="col-6">
|
|
<q-input
|
|
:class="inputEdit(isReadonly)"
|
|
v-model="formData.government"
|
|
label="ขาดราชการ"
|
|
dense
|
|
:outlined="edit || editForms"
|
|
:borderless="!edit"
|
|
:readonly="!edit && !editForms"
|
|
/>
|
|
</div>
|
|
<div class="col-6">
|
|
<q-input
|
|
:class="inputEdit(isReadonly)"
|
|
v-model="formData.study"
|
|
label="ลาศึกษาต่อ"
|
|
dense
|
|
:outlined="edit || editForms"
|
|
:borderless="!edit"
|
|
:readonly="!edit && !editForms"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-separator />
|
|
<q-card-actions class="bg-white text-teal">
|
|
<q-space />
|
|
<q-btn
|
|
v-if="editForm == true"
|
|
flat
|
|
round
|
|
color="red"
|
|
@click="clickDelete()"
|
|
icon="mdi-delete"
|
|
>
|
|
<q-tooltip>ลบข้อมูล</q-tooltip>
|
|
</q-btn>
|
|
<q-btn
|
|
v-if="editForms == true"
|
|
icon="mdi-undo"
|
|
color="red"
|
|
flat
|
|
round
|
|
@click="() => {editForms = false; clear = true;}"
|
|
><q-tooltip>ยกเลิก</q-tooltip></q-btn
|
|
>
|
|
<q-btn
|
|
v-if="editForm == true && editForms == false"
|
|
@click="() => {editForms = true ; clear = false;}"
|
|
flat
|
|
round
|
|
icon="mdi-pencil-outline"
|
|
color="primary"
|
|
><q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
|
|
>
|
|
|
|
<q-btn
|
|
v-if="edit || editForms"
|
|
:label="`บันทึก`"
|
|
color="public"
|
|
@click="validateData()"
|
|
/>
|
|
</q-card-actions>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|