ปรับฟอร์มบันทึกโครงการตาม 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,12 +1,10 @@
<script setup lang="ts">
import { reactive, ref } from "vue";
import { ref } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import type { FormFollowResult } from "@/modules/15_development/interface/request/Main";
import type {
DataOption,
DataOptionCheckBox,
} from "@/modules/15_development/interface/index/Main";
import type { DataOption } from "@/modules/15_development/interface/index/Main";
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
import { useCounterMixin } from "@/stores/mixin";
@ -14,6 +12,8 @@ import { useCounterMixin } from "@/stores/mixin";
const $q = useQuasar();
const store = useDevelopmentDataStore();
const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
const route = useRoute();
const projectId = ref<string>(route.params.id.toLocaleString());
const projectOp = ref<DataOption[]>([
{
@ -25,14 +25,25 @@ const projectOp = ref<DataOption[]>([
name: "โครงการที่ไม่เสนอขอ TN",
},
]);
function onSubmit() {
dialogConfirm($q, async () => {
showLoader();
// post
console.log("projectId===>", projectId.value);
hideLoader();
});
}
</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-4">
<!-- <q-select
<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-4">
<!-- <q-select
dense
outlined
label="ประเภทตัวชี้วัด"
@ -42,147 +53,162 @@ const projectOp = ref<DataOption[]>([
option-value="id"
hide-bottom-space
/> -->
<q-input
dense
outlined
class="inputgreen"
label="ประเภทตัวชี้วัด"
v-model="store.formAddProject.metricType"
hide-bottom-space
/>
</div>
<div class="col-12 col-sm-6 col-md-4">
<q-input
dense
outlined
class="inputgreen"
label="ตัวชี้วัด"
v-model="store.formAddProject.indicators"
hide-bottom-space
/>
</div>
<div class="col-12 col-sm-6 col-md-4">
<q-input
dense
outlined
class="inputgreen"
label="เป้าหมาย"
v-model="store.formAddProject.target"
hide-bottom-space
/>
</div>
<div class="col-12">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.calculation"
hide-bottom-space
label="วิธีการคำนวณ/เครื่องมือ"
type="textarea"
/>
</div>
<div class="col-12">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.measuRement"
hide-bottom-space
label="ระยะเวลาวัดผล"
/>
</div>
<div class="col-12">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.results"
hide-bottom-space
label="ผลการดำเนินการ"
type="textarea"
/>
</div>
<div class="col-12">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.obstacles"
hide-bottom-space
label="ปัญหาอุปสรรค"
type="textarea"
/>
</div>
<div class="col-12">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.suggestions"
hide-bottom-space
label="ข้อเสนอเเนะ"
type="textarea"
/>
</div>
<div class="col-12">
<span class="text-weight-medium text-body1"
>ประเภทของผลการพจารณาความเหมาะสมโครงการ</span
>
</div>
<div class="col-12 col-sm-6 col-md-4">
<q-select
dense
outlined
label="ประเภทโครงการ"
v-model="store.formAddProject.project"
:options="projectOp"
option-label="name"
option-value="id"
hide-bottom-space
map-options
emit-value
class="inputgreen"
/>
</div>
<div v-if="store.formAddProject.project !== ''" class="col-12">
<div class="row" v-if="store.formAddProject.project == 'OFFER'">
<div class="col-12">
<q-checkbox
v-model="store.formAddProject.isPassAllocate"
label="ผ่านการพิจาณา ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ"
/>
</div>
<div class="col-12">
<q-checkbox
v-model="store.formAddProject.isPassNoAllocate"
label="ผ่านการพิจารณา ไม่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
/>
</div>
<q-input
dense
outlined
class="inputgreen"
label="ประเภทตัวชี้วัด"
v-model="store.formAddProject.metricType"
hide-bottom-space
/>
</div>
<div class="col-12 col-sm-6 col-md-4">
<q-input
dense
outlined
class="inputgreen"
label="ตัวชี้วัด"
v-model="store.formAddProject.indicators"
hide-bottom-space
/>
</div>
<div class="col-12 col-sm-6 col-md-4">
<q-input
dense
outlined
class="inputgreen"
label="เป้าหมาย"
v-model="store.formAddProject.target"
hide-bottom-space
/>
</div>
<div class="col-12">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.calculation"
hide-bottom-space
label="วิธีการคำนวณ/เครื่องมือ"
type="textarea"
/>
</div>
<div class="col-12">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.measuRement"
hide-bottom-space
label="ระยะเวลาวัดผล"
/>
</div>
<div class="col-12">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.results"
hide-bottom-space
label="ผลการดำเนินการ"
type="textarea"
/>
</div>
<div class="col-12">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.obstacles"
hide-bottom-space
label="ปัญหาอุปสรรค"
type="textarea"
/>
</div>
<div class="col-12">
<q-input
outlined
dense
class="inputgreen"
v-model="store.formAddProject.suggestions"
hide-bottom-space
label="ข้อเสนอเเนะ"
type="textarea"
/>
</div>
<div class="col-12">
<span class="text-weight-medium text-body1"
>ประเภทของผลการพจารณาความเหมาะสมโครงการ</span
>
</div>
<div class="col-12 col-sm-6 col-md-4">
<q-select
dense
outlined
label="ประเภทโครงการ"
v-model="store.formAddProject.project"
:options="projectOp"
option-label="name"
option-value="id"
hide-bottom-space
map-options
emit-value
class="inputgreen"
/>
</div>
<div v-if="store.formAddProject.project !== ''" class="col-12">
<div class="row" v-if="store.formAddProject.project == 'OFFER'">
<div class="col-12">
<q-checkbox
v-model="store.formAddProject.isPassAllocate"
label="ผ่านการพิจาณา ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ"
/>
</div>
<div class="col-12">
<q-checkbox
v-model="store.formAddProject.isPassNoAllocate"
label="ผ่านการพิจารณา ไม่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
/>
</div>
<div class="col-12">
<q-checkbox
v-model="store.formAddProject.isNoPass"
label="ไม่ผ่านการพิจารณา แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
/>
<div class="col-12">
<q-checkbox
v-model="store.formAddProject.isNoPass"
label="ไม่ผ่านการพิจารณา แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
/>
</div>
</div>
</div>
<div class="row" v-else>
<div class="col-12">
<q-checkbox
v-model="store.formAddProject.isBudget"
label="แต่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ"
/>
</div>
<div class="col-12">
<q-checkbox
v-model="store.formAddProject.isOutBudget"
label="แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
/>
<div class="row" v-else>
<div class="col-12">
<q-checkbox
v-model="store.formAddProject.isBudget"
label="แต่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ"
/>
</div>
<div class="col-12">
<q-checkbox
v-model="store.formAddProject.isOutBudget"
label="แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
/>
</div>
</div>
</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>