140 lines
3.9 KiB
Vue
140 lines
3.9 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { onMounted, reactive, ref } from "vue";
|
||
|
|
import { useQuasar } from "quasar";
|
||
|
|
|
||
|
|
import { useCounterMixin } from "@/stores/mixin";
|
||
|
|
|
||
|
|
const $q = useQuasar();
|
||
|
|
const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
console.log("ข้อมูลเบื้องต้น");
|
||
|
|
});
|
||
|
|
|
||
|
|
const formData = reactive<any>({
|
||
|
|
year: new Date().getFullYear(),
|
||
|
|
org: "",
|
||
|
|
projectName: "",
|
||
|
|
reason: "",
|
||
|
|
objective: "",
|
||
|
|
});
|
||
|
|
|
||
|
|
const options = ref<any>(["Google", "Facebook", "Twitter", "Apple", "Oracle"]);
|
||
|
|
function onSubmit() {
|
||
|
|
dialogConfirm($q, () => {});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||
|
|
<div class="row col-12 q-col-gutter-md q-pa-md">
|
||
|
|
<div class="col-xs-6 col-sm-2 col-md-2">
|
||
|
|
<datepicker
|
||
|
|
menu-class-name="modalfix"
|
||
|
|
v-model="formData.year"
|
||
|
|
:locale="'th'"
|
||
|
|
autoApply
|
||
|
|
year-picker
|
||
|
|
:enableTimePicker="false"
|
||
|
|
>
|
||
|
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||
|
|
<template #year-overlay-value="{ value }">{{
|
||
|
|
parseInt(value + 543)
|
||
|
|
}}</template>
|
||
|
|
<template #trigger>
|
||
|
|
<q-input
|
||
|
|
dense
|
||
|
|
lazy-rules
|
||
|
|
outlined
|
||
|
|
:model-value="Number(formData.year) + 543"
|
||
|
|
:label="`${'ปีงบประมาณ'}`"
|
||
|
|
>
|
||
|
|
<template v-slot:prepend>
|
||
|
|
<q-icon
|
||
|
|
name="event"
|
||
|
|
class="cursor-pointer"
|
||
|
|
style="color: var(--q-primary)"
|
||
|
|
>
|
||
|
|
</q-icon>
|
||
|
|
</template>
|
||
|
|
</q-input>
|
||
|
|
</template>
|
||
|
|
</datepicker>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-10 col-sm-10 col-md-10">
|
||
|
|
<q-select
|
||
|
|
dense
|
||
|
|
outlined
|
||
|
|
v-model="formData.org"
|
||
|
|
:options="options"
|
||
|
|
label="ชื่อหน่วยงานที่รับผิดชอบ"
|
||
|
|
hide-bottom-space
|
||
|
|
lazy-rules
|
||
|
|
:rules="[
|
||
|
|
(val:string) =>
|
||
|
|
!!val || `${'กรุณาเลือกหน่วยงานที่รับผิดชอบ'}`,
|
||
|
|
]"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-12 col-sm-12 col-md-12">
|
||
|
|
<q-input
|
||
|
|
outlined
|
||
|
|
dense
|
||
|
|
v-model="formData.projectName"
|
||
|
|
label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
|
||
|
|
rows="6"
|
||
|
|
type="textarea"
|
||
|
|
:rules="[
|
||
|
|
(val:string) =>
|
||
|
|
!!val || `${'กรุณากรอกชื่อโครงการ/กิจกรรม/หลักสูตร'}`,
|
||
|
|
]"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-12 col-sm-12 col-md-12">
|
||
|
|
<q-input
|
||
|
|
outlined
|
||
|
|
dense
|
||
|
|
v-model="formData.reason"
|
||
|
|
label="หลักการและเหตุผล"
|
||
|
|
rows="6"
|
||
|
|
type="textarea"
|
||
|
|
:rules="[
|
||
|
|
(val:string) =>
|
||
|
|
!!val || `${'กรุณากรอกหลักการและเหตุผล'}`,
|
||
|
|
]"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-12 col-sm-12 col-md-12">
|
||
|
|
<q-input
|
||
|
|
outlined
|
||
|
|
dense
|
||
|
|
v-model="formData.objective"
|
||
|
|
label="วัตถุประสงค์"
|
||
|
|
rows="6"
|
||
|
|
type="textarea"
|
||
|
|
:rules="[
|
||
|
|
(val:string) =>
|
||
|
|
!!val || `${'กรุณากรอกวัตถุประสงค์'}`,
|
||
|
|
]"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<q-separator />
|
||
|
|
<div class="text-right q-pa-sm">
|
||
|
|
<q-btn
|
||
|
|
dense
|
||
|
|
unelevated
|
||
|
|
label="บันทึก"
|
||
|
|
id="onSubmit"
|
||
|
|
type="submit"
|
||
|
|
color="public"
|
||
|
|
class="q-px-md"
|
||
|
|
>
|
||
|
|
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||
|
|
</q-btn>
|
||
|
|
</div>
|
||
|
|
</q-form>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped></style>
|