hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

การลา จำลอง

Browse source
This commit is contained in:
setthawutttty 2024-02-08 15:24:11 +07:00
parent c26efe6c21
commit efcc232fec
5 changed files with 718 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

263
src/modules/04_registry/components/DialogFormLeave.vue Normal file
View file

@ -0,0 +1,263 @@
<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>