118 lines
3.3 KiB
Vue
118 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from "vue";
|
|
import { QForm, useQuasar } from "quasar";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import DialogHeader from "@/components/DialogHeader.vue";
|
|
import { useRouter } from "vue-router";
|
|
|
|
const $q = useQuasar();
|
|
const myForm = ref<QForm | null>(null); //form data input
|
|
const mixin = useCounterMixin();
|
|
const { dialogConfirm, dialogMessageNotify } = mixin;
|
|
const router = useRouter();
|
|
const routeName = router.currentRoute.value.name;
|
|
const amount = ref<number | null>();
|
|
const Org = ref<string | null>("");
|
|
const grandCross = ref<string | null>("");
|
|
const closeModal = () => {
|
|
props.close();
|
|
};
|
|
|
|
const props = defineProps({
|
|
modal: Boolean,
|
|
save: {
|
|
type: Function,
|
|
default: () => console.log("not function"),
|
|
},
|
|
close: {
|
|
type: Function,
|
|
default: () => console.log("not function"),
|
|
},
|
|
insigniaList: {
|
|
type: Array,
|
|
default: [],
|
|
},
|
|
});
|
|
|
|
watch(props, () => {
|
|
if (props.modal === false) {
|
|
grandCross.value = "";
|
|
Org.value = "";
|
|
amount.value = null;
|
|
}
|
|
});
|
|
|
|
const clickSave = () => {
|
|
if (myForm.value !== null) {
|
|
myForm.value.validate().then(async (success) => {
|
|
if (success) {
|
|
dialogConfirm($q, () => props.save(grandCross.value, amount.value));
|
|
} else {
|
|
dialogMessageNotify($q, "กรุณาข้อมูลให้ครบ");
|
|
}
|
|
});
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<q-dialog v-model="props.modal" persistent>
|
|
<q-card style="width: 800px">
|
|
<DialogHeader tittle="จัดสรรเครื่องราชฯ" :close="closeModal" />
|
|
<q-separator />
|
|
|
|
<q-form ref="myForm">
|
|
<div class="q-pa-md bg-grey-1">
|
|
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
|
<div class="col-6">
|
|
<q-select
|
|
hide-bottom-space
|
|
:options="insigniaList"
|
|
dense
|
|
borderless
|
|
option-label="name"
|
|
option-value="id"
|
|
emit-value
|
|
map-options
|
|
outlined
|
|
options-cover
|
|
:rules="[(val) => !!val || `${'กรุณากรอกจำนวน'}`]"
|
|
v-model="grandCross"
|
|
:label="
|
|
routeName == 'insigniaAllocate'
|
|
? `เครื่องราชฯ`
|
|
: `เลือกหน่วยงาน`
|
|
"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-6">
|
|
<q-input
|
|
hide-bottom-space
|
|
outlined
|
|
class="inputgreen"
|
|
v-model="amount"
|
|
dense
|
|
lazy-rules
|
|
type="number"
|
|
label="จำนวน"
|
|
:rules="[(val) => !!val || `${'กรุณากรอกจำนวน'}`]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-form>
|
|
|
|
<q-separator />
|
|
<div class="row justify-end q-py-sm">
|
|
<div class="q-px-md">
|
|
<q-btn
|
|
label="บันทึก"
|
|
@click="clickSave"
|
|
color="public"
|
|
:disable="grandCross == '' || amount == null || amount == 0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|