ปรับฟอร์มบันทึกโครงการตาม tab
This commit is contained in:
parent
91b1b381d1
commit
c4c8f45d84
9 changed files with 882 additions and 697 deletions
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue