hrms-mgt/src/modules/11_discipline/components/DialogDuty.vue
2024-01-12 15:05:45 +07:00

111 lines
2.8 KiB
Vue

<script setup lang="ts">
import {
ref,
computed,
watchEffect,
watch,
type PropType,
onMounted,
} from "vue";
import { QForm, useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
const $q = useQuasar();
const mixin = useCounterMixin();
const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
const props = defineProps({
modal: Boolean,
id: String,
closePopup: Function,
duty: {
type: String,
default: "",
},
command: {
type: String,
default: "",
},
resolution: {
type: String,
default: "",
},
save: {
type: Function,
default: () => console.log("not function"),
},
});
const duty = ref<string>("");
const resolution = ref<string>("");
const myForm = ref<QForm | null>(null);
/**
* ฟังก์ชั่น Save
*/
async function submit() {
if (myForm.value !== null) {
myForm.value.validate().then((success) => {
if (success) {
dialogConfirm(
$q,
async () => {
await props.save(props.id, duty.value, resolution.value);
duty.value = "";
resolution.value = "";
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลหรือไม่?"
);
}
});
}
}
watch(props, () => {
console.log(props.command);
duty.value = props?.duty;
resolution.value = props?.command;
});
</script>
<template>
<q-dialog v-model="props.modal" persistent>
<q-card style="width: 30vw">
<q-form ref="myForm">
<DialogHeader title="แก้ไขข้อมูลกรรมการ" :close="props.closePopup" />
<q-separator />
<q-card-section>
<q-input
v-model="duty"
outlined
dense
class="col-12 q-mb-sm"
debounce="300"
placeholder="หน้าที่"
:rules="[(val) => !!val || `กรุณากรอกหน้าที่`]"
hide-bottom-space
/>
<q-input
v-model="resolution"
outlined
dense
class="col-12 q-mb-sm"
debounce="300"
placeholder="มติ/คำสั่ง"
:rules="[(val) => !!val || `กรุณากรอก มติ/คำสั่ง`]"
hide-bottom-space
/>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white text-teal">
<q-btn label="บันทึก" @click="submit()" color="public" />
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>