ปรับฟอร์มบันทึกโครงการตาม 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 { onMounted, reactive, ref } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
@ -12,8 +13,17 @@ import { useDevelopmentDataStore } from "@/modules/15_development/store/developm
const $q = useQuasar();
const store = useDevelopmentDataStore();
const { showLoader, hideLoader, diffDay, date2Thai, messageError } =
useCounterMixin();
const {
showLoader,
hideLoader,
diffDay,
date2Thai,
messageError,
dialogConfirm,
} = useCounterMixin();
const route = useRoute();
const projectId = ref<string>(route.params.id.toLocaleString());
const provinceOp = ref<DataOption[]>([]);
const provinceOpMain = ref<DataOption[]>([]);
@ -130,342 +140,367 @@ async function calRiskLevel() {
}
}
function onSubmit() {
dialogConfirm($q, async () => {
showLoader();
// post
console.log("projectId===>", projectId.value);
hideLoader();
});
}
onMounted(() => {
getProvince();
});
</script>
<template>
<div class="row q-pa-md q-col-gutter-sm">
<div class="col-12">
<span class="text-weight-medium text-body1">ระยะเวลาดำเนนการ</span>
</div>
<div class="col-12 col-sm-6 col-md-3">
<datepicker
menu-class-name="modalfix"
v-model="store.formAddProject.dateStart"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
@update:model-value="changeDateStart()"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
class="inputgreen"
dense
outlined
:model-value="
store.formAddProject.dateStart
? date2Thai(store.formAddProject.dateStart)
: null
"
: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-12 col-sm-6 col-md-3">
<datepicker
menu-class-name="modalfix"
v-model="store.formAddProject.dateEnd"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
:min-date="store.formAddProject.dateStart"
@update:model-value="changeDateEnd()"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
class="inputgreen"
:model-value="
store.formAddProject.dateEnd
? date2Thai(store.formAddProject.dateEnd)
: null
"
: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-12 col-sm-6 col-md-3">
<q-input
dense
outlined
class="inputgreen"
label="รวมระยะเวลา (วัน)"
v-model="store.formAddProject.totalDate"
mask="#"
reverse-fill-mask
/>
</div>
<q-form greedy @submit.prevent @validation-success="onSubmit">
<div class="row q-pa-md q-col-gutter-sm">
<div class="col-12">
<span class="text-weight-medium text-body1">ระยะเวลาดำเนนการ</span>
</div>
<div class="col-12 col-sm-6 col-md-3">
<datepicker
menu-class-name="modalfix"
v-model="store.formAddProject.dateStart"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
@update:model-value="changeDateStart()"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
class="inputgreen"
dense
outlined
:model-value="
store.formAddProject.dateStart
? date2Thai(store.formAddProject.dateStart)
: null
"
: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-12 col-sm-6 col-md-3">
<datepicker
menu-class-name="modalfix"
v-model="store.formAddProject.dateEnd"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
:min-date="store.formAddProject.dateStart"
@update:model-value="changeDateEnd()"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
class="inputgreen"
:model-value="
store.formAddProject.dateEnd
? date2Thai(store.formAddProject.dateEnd)
: null
"
: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-12 col-sm-6 col-md-3">
<q-input
dense
outlined
class="inputgreen"
label="รวมระยะเวลา (วัน)"
v-model="store.formAddProject.totalDate"
mask="#"
reverse-fill-mask
/>
</div>
<div class="col-12 q-mt-md">
<span class="text-weight-medium text-body1">สถานทดำเนนการ</span>
</div>
<div class="col-8">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.address"
label="ที่อยู่"
/>
</div>
<div class="col-4">
<q-select
outlined
dense
v-model="store.formAddProject.provinceIds"
label="จังหวัด"
:options="provinceOp"
option-label="name"
option-value="id"
emit-value
map-options
class="inputgreen"
use-input
multiple
@filter="
<div class="col-12 q-mt-md">
<span class="text-weight-medium text-body1">สถานทดำเนนการ</span>
</div>
<div class="col-8">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.address"
label="ที่อยู่"
/>
</div>
<div class="col-4">
<q-select
outlined
dense
v-model="store.formAddProject.provinceIds"
label="จังหวัด"
:options="provinceOp"
option-label="name"
option-value="id"
emit-value
map-options
class="inputgreen"
use-input
multiple
@filter="
(inputValue:string, doneFn:Function) =>
filterSelector(inputValue, doneFn, )
"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey"> ไมพบขอม </q-item-section>
</q-item>
</template>
</q-select>
</div>
<div class="col-12 q-mt-md">
<span class="text-weight-medium text-body1">งบประมาณ</span>
</div>
<div class="col-4">
<q-select
outlined
dense
v-model="store.formAddProject.budget"
label="ประเภทงบประมาณ"
:options="budgetOp"
option-label="name"
option-value="id"
emit-value
map-options
class="inputgreen"
/>
</div>
<div class="col-2">
<q-select
v-if="store.formAddProject.budget === 'OUTSIDEBUDGET'"
outlined
dense
v-model="store.formAddProject.budgetSub"
label="ประเภทย่อย"
:options="budgetSubOp"
option-label="name"
option-value="id"
emit-value
map-options
class="inputgreen"
/>
</div>
<div class="col-12">
<div class="row q-col-gutter-x-sm">
<div class="col-3">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.accept"
label="จํานวนงบประมาณที่ขอรับการจัดสรรฯ"
mask="###,###,###,###,###"
reverse-fill-mask
/>
</div>
<div class="col-3">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.receive"
mask="###,###,###,###,###"
reverse-fill-mask
label="จํานวนงบประมาณที่ได้รับการจัดสรรฯ"
/>
</div>
<div class="col-3">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.approved"
hide-bottom-space
mask="###,###,###,###,###"
label="จํานวนงบประมาณที่ได้รับอนุมัติ"
reverse-fill-mask
/>
</div>
<div class="col-3">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.budgetPay"
mask="###,###,###,###,###"
reverse-fill-mask
label="จํานวนงบประมาณที่จ่ายจริง"
/>
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey"> ไมพบขอม </q-item-section>
</q-item>
</template>
</q-select>
</div>
<div class="col-12 q-mt-md">
<span class="text-weight-medium text-body1">งบประมาณ</span>
</div>
<div class="col-4">
<q-select
outlined
dense
v-model="store.formAddProject.budget"
label="ประเภทงบประมาณ"
:options="budgetOp"
option-label="name"
option-value="id"
emit-value
map-options
class="inputgreen"
/>
</div>
<div class="col-2">
<q-select
v-if="store.formAddProject.budget === 'OUTSIDEBUDGET'"
outlined
dense
v-model="store.formAddProject.budgetSub"
label="ประเภทย่อย"
:options="budgetSubOp"
option-label="name"
option-value="id"
emit-value
map-options
class="inputgreen"
/>
</div>
<div class="col-12">
<div class="row q-col-gutter-x-sm">
<div class="col-3">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.accept"
label="จํานวนงบประมาณที่ขอรับการจัดสรรฯ"
mask="###,###,###,###,###"
reverse-fill-mask
/>
</div>
<div class="col-3">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.receive"
mask="###,###,###,###,###"
reverse-fill-mask
label="จํานวนงบประมาณที่ได้รับการจัดสรรฯ"
/>
</div>
<div class="col-3">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.approved"
hide-bottom-space
mask="###,###,###,###,###"
label="จํานวนงบประมาณที่ได้รับอนุมัติ"
reverse-fill-mask
/>
</div>
<div class="col-3">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.budgetPay"
mask="###,###,###,###,###"
reverse-fill-mask
label="จํานวนงบประมาณที่จ่ายจริง"
/>
</div>
</div>
</div>
</div>
<div class="col-12 q-mt-md">
<span class="text-weight-medium text-body1">ความเสยงของโครงการ</span>
</div>
<div class="col-12 q-mt-md">
<span class="text-weight-medium text-body1">ความเสยงของโครงการ</span>
</div>
<div class="col-12">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.issues"
label="ประเด็นความเสี่ยง"
type="textarea"
/>
</div>
<div class="col-3">
<q-select
outlined
dense
class="inputgreen"
v-model="store.formAddProject.chance"
label="โอกาสที่จะเกิด"
:options="[1, 2, 3, 4]"
@update:model-value="calRiskLevel"
></q-select>
</div>
<div class="col-3">
<q-select
outlined
dense
class="inputgreen"
v-model="store.formAddProject.effects"
label="ผลกระทบจากการเกิด"
:options="[1, 2, 3, 4]"
@update:model-value="calRiskLevel"
>
</q-select>
</div>
<div class="col-6">
<q-input
readonly
outlined
dense
class="inputgreen"
v-model="store.formAddProject.riskLevel"
label="ระดับความเสี่ยง"
/>
</div>
<div class="col-12">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.riskManagement"
label="เเนวทางการบริหารความเสี่ยง"
type="textarea"
/>
</div>
<div class="col-12 q-mt-md">
<span class="text-weight-medium text-body1"
>ประโยชนคาดวาจะได</span
>
</div>
<div class="col-12">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.expect"
label="ประโยชน์ที่คาดว่าจะได้รับ"
type="textarea"
/>
</div>
<div class="col-12 q-mt-md">
<span class="text-weight-medium text-body1">อมลดานวชาการ</span>
</div>
<div class="col-12">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.topicAcademic"
label="หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน"
/>
</div>
<div class="col-9">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.addressAcademic"
label="สถานที่ฝึกอบรม ศึกษาดูงาน"
/>
</div>
<div class="col-3">
<q-select
outlined
dense
v-model="store.formAddProject.provinceActualId"
label="จังหวัด"
:options="provinceOp"
option-label="name"
option-value="id"
emit-value
map-options
class="inputgreen"
use-input
@filter="
<div class="col-12">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.issues"
label="ประเด็นความเสี่ยง"
type="textarea"
/>
</div>
<div class="col-3">
<q-select
outlined
dense
class="inputgreen"
v-model="store.formAddProject.chance"
label="โอกาสที่จะเกิด"
:options="[1, 2, 3, 4]"
@update:model-value="calRiskLevel"
></q-select>
</div>
<div class="col-3">
<q-select
outlined
dense
class="inputgreen"
v-model="store.formAddProject.effects"
label="ผลกระทบจากการเกิด"
:options="[1, 2, 3, 4]"
@update:model-value="calRiskLevel"
>
</q-select>
</div>
<div class="col-6">
<q-input
readonly
outlined
dense
class="inputgreen"
v-model="store.formAddProject.riskLevel"
label="ระดับความเสี่ยง"
/>
</div>
<div class="col-12">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.riskManagement"
label="เเนวทางการบริหารความเสี่ยง"
type="textarea"
/>
</div>
<div class="col-12 q-mt-md">
<span class="text-weight-medium text-body1"
>ประโยชนคาดวาจะได</span
>
</div>
<div class="col-12">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.expect"
label="ประโยชน์ที่คาดว่าจะได้รับ"
type="textarea"
/>
</div>
<div class="col-12 q-mt-md">
<span class="text-weight-medium text-body1">อมลดานวชาการ</span>
</div>
<div class="col-12">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.topicAcademic"
label="หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน"
/>
</div>
<div class="col-9">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.addressAcademic"
label="สถานที่ฝึกอบรม ศึกษาดูงาน"
/>
</div>
<div class="col-3">
<q-select
outlined
dense
v-model="store.formAddProject.provinceActualId"
label="จังหวัด"
:options="provinceOp"
option-label="name"
option-value="id"
emit-value
map-options
class="inputgreen"
use-input
@filter="
(inputValue:string, doneFn:Function) =>
filterSelector(inputValue, doneFn, )
"
><template v-slot:no-option>
<q-item>
<q-item-section class="text-grey"> ไมพบขอม </q-item-section>
</q-item>
</template></q-select
>
><template v-slot:no-option>
<q-item>
<q-item-section class="text-grey"> ไมพบขอม </q-item-section>
</q-item>
</template></q-select
>
</div>
</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>