125 lines
3.5 KiB
Vue
125 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import dialogHeader from "@/components/DialogHeader.vue";
|
|
import { QInput, useQuasar } from "quasar";
|
|
|
|
const $q = useQuasar();
|
|
const mixin = useCounterMixin();
|
|
const { dialogConfirm } = mixin;
|
|
|
|
const dataRef = ref<QInput | null>(null);
|
|
const educationRankRef = ref<QInput | null>(null);
|
|
const data = defineModel<string>("data", {
|
|
required: true,
|
|
});
|
|
const personalName = defineModel<string>("personalName");
|
|
const dialogStatus = defineModel<string>("dialogStatus");
|
|
const editId = defineModel<string>("editId");
|
|
const dialog = defineModel<boolean>("dialog");
|
|
const educationRank = defineModel<number>("rank");
|
|
const props = defineProps({
|
|
fetchData: {
|
|
type: Function,
|
|
},
|
|
addData: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
editData: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
});
|
|
|
|
function closeDialog() {
|
|
dialog.value = false;
|
|
}
|
|
|
|
function validateForm() {
|
|
dataRef.value?.validate();
|
|
educationRankRef.value?.validate();
|
|
onSubmit();
|
|
}
|
|
|
|
async function onSubmit() {
|
|
if (data.value.length > 0) {
|
|
dialogConfirm(
|
|
$q,
|
|
async () => {
|
|
dialogStatus.value === "create"
|
|
? props.addData()
|
|
: props.editData(editId.value);
|
|
closeDialog();
|
|
data.value = "";
|
|
},
|
|
"ยืนยันการบันทึกข้อมูล",
|
|
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
|
);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<q-dialog v-model="dialog" class="dialog" persistent>
|
|
<q-card style="min-width: 350px" class="bg-grey-11">
|
|
<form @submit.prevent="validateForm">
|
|
<q-card-section class="flex justify-between" style="padding: 0">
|
|
<dialog-header
|
|
:tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
|
|
:close="closeDialog"
|
|
/>
|
|
</q-card-section>
|
|
|
|
<q-separator color="grey-4" />
|
|
<q-card-section class="q-pa-none">
|
|
<q-input
|
|
ref="dataRef"
|
|
outlined
|
|
v-model="data"
|
|
:label="personalName"
|
|
dense
|
|
lazy-rules
|
|
borderless
|
|
class="col-12 bg-white q-ma-md"
|
|
:rules="[(val) => val.length > 0 || 'กรุณากรอก' + personalName]"
|
|
hide-bottom-space
|
|
/>
|
|
</q-card-section>
|
|
<q-card-section
|
|
class="q-pa-none"
|
|
v-if="personalName === 'ระดับการศึกษา'"
|
|
>
|
|
<q-input
|
|
ref="educationRankRef"
|
|
outlined
|
|
v-model="educationRank"
|
|
label="ลำดับ"
|
|
dense
|
|
type="number"
|
|
lazy-rules
|
|
borderless
|
|
min="1"
|
|
class="col-12 bg-white q-ma-md"
|
|
:rules="[(val) => val != undefined || 'กรุณากรอกลำดับ']"
|
|
hide-bottom-space
|
|
/>
|
|
</q-card-section>
|
|
|
|
<q-card-actions align="right">
|
|
<q-btn
|
|
id="onSubmit"
|
|
type="submit"
|
|
dense
|
|
unelevated
|
|
label="บันทึก"
|
|
color="public"
|
|
class="q-px-md"
|
|
>
|
|
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
|
</q-btn>
|
|
</q-card-actions>
|
|
</form>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|