91 lines
2.2 KiB
Vue
91 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from "vue";
|
|
import DialogHeader from "@/components/DialogHeader.vue";
|
|
|
|
const reason = ref<string | undefined>("");
|
|
const props = defineProps({
|
|
modal: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
clickClose: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
savaForm: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
textReport: {
|
|
type: String,
|
|
},
|
|
});
|
|
watch(props, () => {
|
|
if (props.modal === true && props.textReport == "") {
|
|
reason.value = "";
|
|
} else {
|
|
reason.value = props.textReport;
|
|
}
|
|
});
|
|
|
|
const myForm = ref<any>();
|
|
const submit = () => {
|
|
myForm.value.validate().then((result: boolean) => {
|
|
if (result) {
|
|
props.savaForm(reason.value);
|
|
}
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<q-dialog v-model="props.modal" persistent>
|
|
<q-card style="width: 40vw; max-width: 40vw">
|
|
<q-form ref="myForm">
|
|
<DialogHeader :tittle="props.title" :close="clickClose" />
|
|
<q-separator />
|
|
<q-card-section class="q-pa-sm bg-grey-1">
|
|
<div class="row col-12 q-col-gutter-sm">
|
|
<div class="col-xs-12">
|
|
<div class="col-12 row q-py-sm items-center q-col-gutter-sm">
|
|
<q-input
|
|
type="textarea"
|
|
class="full-width inputgreen cursor-pointer"
|
|
hide-bottom-space
|
|
outlined
|
|
dense
|
|
lazy-rules
|
|
:rules="[(val) => !!val || `กรุณากรอก${label}`]"
|
|
v-model="reason"
|
|
:label="`${label}`"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-separator />
|
|
<q-card-actions align="right">
|
|
<q-btn
|
|
dense
|
|
unelevated
|
|
label="บันทึก"
|
|
color="public"
|
|
@click="submit"
|
|
class="q-px-md"
|
|
>
|
|
<!-- icon="mdi-content-save-outline" -->
|
|
<q-tooltip>บันทึก</q-tooltip>
|
|
</q-btn>
|
|
</q-card-actions>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|