ปรับฟอร์มบันทึกโครงการตาม tab

This commit is contained in:
Warunee Tamkoo 2024-04-11 08:33:35 +07:00
parent 91b1b381d1
commit c4c8f45d84
9 changed files with 882 additions and 697 deletions

View file

@ -1,6 +1,7 @@
<script setup lang="ts">
import { reactive, ref } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import type { FormBasicinfo } from "@/modules/15_development/interface/request/Main";
@ -13,6 +14,9 @@ const $q = useQuasar();
const store = useDevelopmentDataStore();
const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
const route = useRoute();
const projectId = ref<string>(route.params.id.toLocaleString());
const formData = reactive<FormBasicinfo>({
year: new Date().getFullYear(),
org: "",
@ -28,105 +32,115 @@ function selectAgency() {
function updateAgency(name: string) {
formData.org = name;
}
function onSubmit() {
dialogConfirm($q, async () => {
showLoader();
// post
console.log("projectId===>", projectId.value);
hideLoader();
});
}
</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="store.formAddProject.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
class="inputgreen"
:model-value="Number(store.formAddProject.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-input
dense
outlined
class="inputgreen"
v-model="formData.org"
inputgreen
label="ชื่อหน่วยงานที่รับผิดชอบ"
hide-bottom-space
lazy-rules
@click="selectAgency"
/>
<!-- :rules="[
<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="store.formAddProject.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
class="inputgreen"
:model-value="Number(store.formAddProject.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-input
dense
outlined
class="inputgreen"
v-model="formData.org"
inputgreen
label="ชื่อหน่วยงานที่รับผิดชอบ"
hide-bottom-space
lazy-rules
@click="selectAgency"
/>
<!-- :rules="[
(val:string) =>
!!val || `${'กรุณาเลือกหน่วยงานที่รับผิดชอบ'}`,
]" -->
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input
outlined
class="inputgreen"
dense
v-model="store.formAddProject.projectName"
label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
rows="6"
type="textarea"
hide-bottom-space
:rules="[
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input
outlined
class="inputgreen"
dense
v-model="store.formAddProject.projectName"
label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
rows="6"
type="textarea"
hide-bottom-space
:rules="[
(val:string) =>
!!val || `${'กรุณากรอกชื่อโครงการ/กิจกรรม/หลักสูตร'}`,
]"
/>
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input
outlined
class="inputgreen"
dense
v-model="store.formAddProject.reason"
label="หลักการและเหตุผล"
rows="6"
hide-bottom-space
type="textarea"
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input
outlined
class="inputgreen"
dense
v-model="store.formAddProject.objective"
label="วัตถุประสงค์"
rows="6"
hide-bottom-space
type="textarea"
/>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input
outlined
class="inputgreen"
dense
v-model="store.formAddProject.reason"
label="หลักการและเหตุผล"
rows="6"
hide-bottom-space
type="textarea"
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input
outlined
class="inputgreen"
dense
v-model="store.formAddProject.objective"
label="วัตถุประสงค์"
rows="6"
hide-bottom-space
type="textarea"
/>
</div>
</div>
<!-- <q-separator />
<q-separator />
<div class="text-right q-pa-sm">
<q-btn
dense
@ -139,8 +153,8 @@ function updateAgency(name: string) {
>
<q-tooltip>นทกขอม</q-tooltip>
</q-btn>
</div> -->
<!-- </q-form> -->
</div>
</q-form>
<DialogSelectAgency
v-model:modal="modalDialogSelect"