hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

194
src/modules/15_development/components/BasicInfo.vue
View file

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref } from "vue"; import { reactive, ref } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import type { FormBasicinfo } from "@/modules/15_development/interface/request/Main"; import type { FormBasicinfo } from "@/modules/15_development/interface/request/Main";
@ -13,6 +14,9 @@ const $q = useQuasar();
const store = useDevelopmentDataStore(); const store = useDevelopmentDataStore();
const { showLoader, hideLoader, dialogConfirm } = useCounterMixin(); const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
const route = useRoute();
const projectId = ref<string>(route.params.id.toLocaleString());
const formData = reactive<FormBasicinfo>({ const formData = reactive<FormBasicinfo>({
year: new Date().getFullYear(), year: new Date().getFullYear(),
org: "", org: "",
@ -28,105 +32,115 @@ function selectAgency() {
function updateAgency(name: string) { function updateAgency(name: string) {
formData.org = name; formData.org = name;
} }
function onSubmit() {
dialogConfirm($q, async () => {
showLoader();
// post
console.log("projectId===>", projectId.value);
hideLoader();
});
}
</script> </script>
<template> <template>
<!-- <q-form greedy @submit.prevent @validation-success="onSubmit"> --> <q-form greedy @submit.prevent @validation-success="onSubmit">
<div class="row col-12 q-col-gutter-md q-pa-md"> <div class="row col-12 q-col-gutter-md q-pa-md">
<div class="col-xs-6 col-sm-2 col-md-2"> <div class="col-xs-6 col-sm-2 col-md-2">
<datepicker <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="store.formAddProject.year" v-model="store.formAddProject.year"
:locale="'th'" :locale="'th'"
autoApply autoApply
year-picker year-picker
:enableTimePicker="false" :enableTimePicker="false"
> >
<template #year="{ year }">{{ year + 543 }}</template> <template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{ <template #year-overlay-value="{ value }">{{
parseInt(value + 543) parseInt(value + 543)
}}</template> }}</template>
<template #trigger> <template #trigger>
<q-input <q-input
dense dense
lazy-rules lazy-rules
outlined outlined
class="inputgreen" class="inputgreen"
:model-value="Number(store.formAddProject.year) + 543" :model-value="Number(store.formAddProject.year) + 543"
:label="`${'ปีงบประมาณ'}`" :label="`${'ปีงบประมาณ'}`"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-xs-10 col-sm-10 col-md-10"> <div class="col-xs-10 col-sm-10 col-md-10">
<q-input <q-input
dense dense
outlined outlined
class="inputgreen" class="inputgreen"
v-model="formData.org" v-model="formData.org"
inputgreen inputgreen
label="ชื่อหน่วยงานที่รับผิดชอบ" label="ชื่อหน่วยงานที่รับผิดชอบ"
hide-bottom-space hide-bottom-space
lazy-rules lazy-rules
@click="selectAgency" @click="selectAgency"
/> />
<!-- :rules="[ <!-- :rules="[
(val:string) => (val:string) =>
!!val || `${'กรุณาเลือกหน่วยงานที่รับผิดชอบ'}`, !!val || `${'กรุณาเลือกหน่วยงานที่รับผิดชอบ'}`,
]" --> ]" -->
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-12"> <div class="col-xs-12 col-sm-12 col-md-12">
<q-input <q-input
outlined outlined
class="inputgreen" class="inputgreen"
dense dense
v-model="store.formAddProject.projectName" v-model="store.formAddProject.projectName"
label="ชื่อโครงการ/กิจกรรม/หลักสูตร" label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
rows="6" rows="6"
type="textarea" type="textarea"
hide-bottom-space hide-bottom-space
:rules="[ :rules="[
(val:string) => (val:string) =>
!!val || `${'กรุณากรอกชื่อโครงการ/กิจกรรม/หลักสูตร'}`, !!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>
<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"> <div class="text-right q-pa-sm">
<q-btn <q-btn
dense dense
@ -139,8 +153,8 @@ function updateAgency(name: string) {
> >
<q-tooltip>บันทึกข้อมูล</q-tooltip> <q-tooltip>บันทึกข้อมูล</q-tooltip>
</q-btn> </q-btn>
</div> --> </div>
<!-- </q-form> --> </q-form>
<DialogSelectAgency <DialogSelectAgency
v-model:modal="modalDialogSelect" v-model:modal="modalDialogSelect"

320
src/modules/15_development/components/FollowResult.vue
View file

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

164
src/modules/15_development/components/MainTab.vue
View file

@ -36,19 +36,18 @@ const {
} = useCounterMixin(); } = useCounterMixin();
const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม"); const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
const projectId = ref<string | null>( const projectId = ref<string>(route.params.id.toLocaleString());
route.params.id ? route.params.id.toLocaleString() : null
);
const tab = ref<string>("BasicInfo"); const tab = ref<string>("BasicInfo");
const status = ref<string>("ONGOING");
function fetchDataProject(id: string) { function fetchDataProject(id: string) {
showLoader(); showLoader();
http http
.get(config.API.developmentMainById(id)) .get(config.API.developmentMainById(id))
.then((res) => { .then((res) => {
const data: ResDataProject = res.data.result; const data: ResDataProject = res.data.result;
console.log(data);
/** ข้อมูลเบื้องต้น*/ /** ข้อมูลเบื้องต้น*/
status.value = data.status ? data.status : "ONGOING";
store.formAddProject.year = data.year; store.formAddProject.year = data.year;
store.formAddProject.projectName = data.projectName; store.formAddProject.projectName = data.projectName;
store.formAddProject.reason = data.reason; store.formAddProject.reason = data.reason;
@ -128,8 +127,8 @@ function fetchDataProject(id: string) {
store.formAddProject.approved = data.approved; store.formAddProject.approved = data.approved;
store.formAddProject.budgetPay = data.budgetPay; store.formAddProject.budgetPay = data.budgetPay;
store.formAddProject.issues = data.issues; store.formAddProject.issues = data.issues;
store.formAddProject.chance = data.chance; store.formAddProject.chance = Number(data.chance);
store.formAddProject.effects = data.effects; store.formAddProject.effects = Number(data.effects);
store.formAddProject.riskLevel = data.riskLevel; store.formAddProject.riskLevel = data.riskLevel;
store.formAddProject.riskManagement = data.riskManagement; store.formAddProject.riskManagement = data.riskManagement;
store.formAddProject.expect = data.expect; store.formAddProject.expect = data.expect;
@ -212,6 +211,28 @@ function onSubmit() {
} }
} }
function onFinish(id: string) {
dialogConfirm(
$q,
async () => {
showLoader();
http
.get(config.API.developmentMainById(id)) // change path
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
},
"ยืนยันการเสร็จสิ้นโครงการ",
"ต้องการยืนยันการเสร็จสิ้นโครงการนี้ใช่หรือไม่?"
);
}
onMounted(() => { onMounted(() => {
projectId.value && fetchDataProject(projectId.value); projectId.value && fetchDataProject(projectId.value);
}); });
@ -221,68 +242,77 @@ onUnmounted(() => {
}); });
</script> </script>
<template> <template>
<q-form greedy @submit.prevent @validation-success="onSubmit"> <!-- <q-form greedy @submit.prevent @validation-success="onSubmit"> -->
<div class="toptitle text-dark col-12 row items-center"> <div class="toptitle text-dark col-12 row items-center">
<q-btn <q-btn
flat flat
round round
dense dense
class="q-mr-sm" class="q-mr-sm"
icon="mdi-arrow-left" icon="mdi-arrow-left"
color="primary" color="primary"
@click="router.push('/development')" @click="router.push('/development')"
/> />
{{ `${title}รายการโครงการ/หลักสูตรการฝึกอบรม` }} {{ `${title}โครงการ/หลักสูตรการฝึกอบรม` }}
<q-space /> <q-space />
<q-btn <!-- <q-btn
dense dense
unelevated unelevated
label="บันทึก" label="บันทึก"
id="onSubmit" id="onSubmit"
type="submit" type="submit"
color="public" color="public"
class="q-px-md" class="q-px-md"
> >
<q-tooltip>บันทึกข้อมูล</q-tooltip> <q-tooltip>บันทึกข้อมูล</q-tooltip>
</q-btn> </q-btn> -->
<!-- <q-btn unelevated label="บันทึก" color="public" @click="onSubmit"> <q-btn
<q-tooltip>บันทึกข้อมูล</q-tooltip> v-if="status === 'FINISH'"
</q-btn> --> unelevated
</div> label="เสร็จสิ้นโครงการ"
color="green"
@click="onFinish(projectId)"
>
<q-tooltip>เสร็จสิ้นโครงการ</q-tooltip>
</q-btn>
<q-badge v-else outline color="primary" class="q-px-sm q-py-xs"
>เสร็จสิ้นโครงการ</q-badge
>
</div>
<q-card flat bordered class="col-12"> <q-card flat bordered class="col-12">
<q-tabs <q-tabs
v-model="tab" v-model="tab"
dense dense
align="left" align="left"
inline-label inline-label
class="rounded-borders" class="rounded-borders"
indicator-color="primary" indicator-color="primary"
active-bg-color="teal-1" active-bg-color="teal-1"
active-class="text-primary" active-class="text-primary"
> >
<q-tab name="BasicInfo" label="ข้อมูลเบื้องต้น" /> <q-tab name="BasicInfo" label="ข้อมูลเบื้องต้น" />
<q-tab name="Target" label="เป้าหมาย" /> <q-tab name="Target" label="เป้าหมาย" />
<q-tab name="ProjectDetail" label="ลักษณะโครงการ" /> <q-tab name="ProjectDetail" label="ลักษณะโครงการ" />
<q-tab name="FollowResult" label="การติดตามการประเมินผล" /> <q-tab name="FollowResult" label="การติดตามการประเมินผล" />
<q-tab name="Other" label="อื่นๆ" /> <q-tab name="Other" label="อื่นๆ" />
<q-tab name="Record" label="บันทึกผล" /> <q-tab name="Record" label="บันทึกผล" />
</q-tabs> </q-tabs>
<q-separator /> <q-separator />
<div class="q-pa-sm" style="padding: 0px"> <div class="q-pa-sm" style="padding: 0px">
<q-tab-panels v-model="tab" animated> <q-tab-panels v-model="tab" animated>
<q-tab-panel style="padding: 0px" name="BasicInfo"> <q-tab-panel style="padding: 0px" name="BasicInfo">
<BasicInfo /> <BasicInfo />
</q-tab-panel> </q-tab-panel>
<q-tab-panel name="Target"> <Target /></q-tab-panel> <q-tab-panel name="Target"> <Target /></q-tab-panel>
<q-tab-panel name="ProjectDetail"> <ProjectDetail /> </q-tab-panel> <q-tab-panel name="ProjectDetail"> <ProjectDetail /> </q-tab-panel>
<q-tab-panel name="FollowResult"> <FollowResult /> </q-tab-panel> <q-tab-panel name="FollowResult"> <FollowResult /> </q-tab-panel>
<q-tab-panel name="Other"> <Other /> </q-tab-panel> <q-tab-panel name="Other"> <Other /> </q-tab-panel>
<q-tab-panel name="Record"> <Record /> </q-tab-panel> <q-tab-panel name="Record"> <Record /> </q-tab-panel>
</q-tab-panels> </q-tab-panels>
</div> </div>
</q-card> </q-card>
</q-form> <!-- </q-form> -->
</template> </template>
<style scoped></style> <style scoped></style>

677
src/modules/15_development/components/Other.vue
View file

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

173
src/modules/15_development/components/ProjectDetail.vue
View file

@ -1,12 +1,19 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, reactive, watch } from "vue"; import { ref } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
/**importType*/ /**importType*/
import type { DataOption } 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 { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
const $q = useQuasar();
const store = useDevelopmentDataStore(); const store = useDevelopmentDataStore();
const route = useRoute();
const projectId = ref<string>(route.params.id.toLocaleString());
const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
const projectTypeOp = ref<DataOption[]>([ const projectTypeOp = ref<DataOption[]>([
{ id: "STRATEGIC_PROJECT", name: "โครงการตามยุทธศาสตร์" }, { id: "STRATEGIC_PROJECT", name: "โครงการตามยุทธศาสตร์" },
@ -29,80 +36,106 @@ const projectTechniquesOp = ref<DataOption[]>([
{ id: "SPECIAL_LECTURE", name: "การบรรยายพิเศษ" }, { id: "SPECIAL_LECTURE", name: "การบรรยายพิเศษ" },
{ id: "STUDY_TRAINING", name: "การฝึกศึกษา" }, { id: "STUDY_TRAINING", name: "การฝึกศึกษา" },
]); ]);
function onSubmit() {
dialogConfirm($q, async () => {
showLoader();
// post
console.log("projectId===>", projectId.value);
hideLoader();
});
}
</script> </script>
<template> <template>
<div class="row q-pa-md q-col-gutter-sm"> <q-form greedy @submit.prevent @validation-success="onSubmit">
<div class="col-12 col-sm-12 col-md-4"> <div class="row q-pa-md q-col-gutter-sm">
<q-select <div class="col-12 col-sm-12 col-md-4">
dense <q-select
outlined dense
v-model="store.formAddProject.projectType" outlined
:options="projectTypeOp" v-model="store.formAddProject.projectType"
label="ประเภทโครงการ" :options="projectTypeOp"
option-label="name" label="ประเภทโครงการ"
option-value="id" option-label="name"
emit-value option-value="id"
map-options emit-value
/> map-options
/>
</div>
<div class="col-12 col-sm-6 col-md-4">
<q-select
dense
outlined
v-model="store.formAddProject.projectCharacteristics"
:options="projectCharacteristicsOp"
label="ลักษณะ"
option-label="name"
option-value="id"
emit-value
map-options
/>
</div>
<div class="col-12 col-sm-6 col-md-2">
<q-input
dense
outlined
v-model="store.formAddProject.projectDay"
label="จำนวน (วัน)"
mask="#"
reverse-fill-mask
/>
</div>
<div class="col-12 col-sm-6 col-md-2">
<q-input
v-if="store.formAddProject.projectCharacteristics !== 'GO_BACK'"
dense
outlined
v-model="store.formAddProject.projectNigth"
label="จำนวน (คืน)"
mask="#"
reverse-fill-mask
/>
</div>
<div class="col-12 col-sm-6 col-md-4">
<q-select
dense
outlined
v-model="store.formAddProject.projectTechniques"
:options="projectTechniquesOp"
label="เทคนิควิธีการที่ใช้ในการพัฒนา"
option-label="name"
option-value="id"
emit-value
map-options
/>
</div>
<div class="col-12 col-sm-6 col-md-2">
<q-input
dense
outlined
v-model="store.formAddProject.projectModal"
label="จำนวน (รุ่น)"
mask="#"
reverse-fill-mask
/>
</div>
</div> </div>
<div class="col-12 col-sm-6 col-md-4"> <q-separator />
<q-select <div class="text-right q-pa-sm">
<q-btn
dense dense
outlined unelevated
v-model="store.formAddProject.projectCharacteristics" label="บันทึก"
:options="projectCharacteristicsOp" id="onSubmit"
label="ลักษณะ" type="submit"
option-label="name" color="public"
option-value="id" class="q-px-md"
emit-value >
map-options <q-tooltip>บันทึกข้อมูล</q-tooltip>
/> </q-btn>
</div> </div>
<div class="col-12 col-sm-6 col-md-2"> </q-form>
<q-input
dense
outlined
v-model="store.formAddProject.projectDay"
label="จำนวน (วัน)"
mask="#"
reverse-fill-mask
/>
</div>
<div class="col-12 col-sm-6 col-md-2">
<q-input
v-if="store.formAddProject.projectCharacteristics !== 'GO_BACK'"
dense
outlined
v-model="store.formAddProject.projectNigth"
label="จำนวน (คืน)"
mask="#"
reverse-fill-mask
/>
</div>
<div class="col-12 col-sm-6 col-md-4">
<q-select
dense
outlined
v-model="store.formAddProject.projectTechniques"
:options="projectTechniquesOp"
label="เทคนิควิธีการที่ใช้ในการพัฒนา"
option-label="name"
option-value="id"
emit-value
map-options
/>
</div>
<div class="col-12 col-sm-6 col-md-2">
<q-input
dense
outlined
v-model="store.formAddProject.projectModal"
label="จำนวน (รุ่น)"
mask="#"
reverse-fill-mask
/>
</div>
</div>
</template> </template>
<style scoped></style> <style scoped></style>

29
src/modules/15_development/components/Record.vue
View file

@ -10,7 +10,7 @@ import { useQuasar } from "quasar";
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const route = useRoute(); const route = useRoute();
const $q = useQuasar(); const $q = useQuasar();
const id = ref<string>(route.params.id ? route.params.id.toString() : ""); const id = ref<string>(route.params.id.toString());
const { const {
success, success,
messageError, messageError,
@ -239,6 +239,21 @@ async function uploadFileDoc(uploadUrl: string, file: any) {
}); });
} }
function sendRecordRegistry() {
// ส่งไปบันทึกที่ทะเบียนประวัติ
dialogConfirm(
$q,
async () => {
showLoader();
// post
console.log("projectId===>", id.value);
hideLoader();
},
"ยืนยันการส่งข้อมูลไปบันทึกยังทะเบียนประวัติ",
"ต้องการยืนยันการส่งข้อมูลไปบันทึกยังทะเบียนประวัติหรือไม่"
);
}
onMounted(() => { onMounted(() => {
// getData(); // getData();
}); });
@ -271,6 +286,18 @@ onMounted(() => {
> >
<q-tooltip>อัปโหลดไฟล์</q-tooltip> <q-tooltip>อัปโหลดไฟล์</q-tooltip>
</q-btn> </q-btn>
<q-btn
v-if="row.length > 0"
size="md"
icon="mdi-clipboard-account-outline"
round
flat
color="public"
@click="sendRecordRegistry()"
>
<q-tooltip>ส่งไปบันทึกที่ทะเบียนประวัติ</q-tooltip>
</q-btn>
<q-space /> <q-space />
<q-input dense outlined v-model="keyword" label="ค้นหา" class="q-mr-sm"> <q-input dense outlined v-model="keyword" label="ค้นหา" class="q-mr-sm">
<template v-slot:append> <template v-slot:append>

1
src/modules/15_development/interface/request/Main.ts
View file

@ -4,6 +4,7 @@ interface FormQueryListProject {
pageSize: number; pageSize: number;
org: string; org: string;
keyword: string; keyword: string;
status: string;
} }
interface FormBasicinfo { interface FormBasicinfo {

1
src/modules/15_development/interface/response/Main.ts
View file

@ -68,6 +68,7 @@ interface ResDataProject {
projectNigth: number | null; projectNigth: number | null;
projectTechniques: string; projectTechniques: string;
projectModal: number | null; projectModal: number | null;
status?: string;
} }
interface ResPeople { interface ResPeople {

20
src/modules/15_development/views/MainPage.vue
View file

@ -81,6 +81,10 @@ const itemDownload = ref<ItemsMenu[]>([
}, },
]); ]);
const statusOpt = ref<DataOption[]>([
{ id: "ONGOING", name: "กำลังดำเนินการ" },
{ id: "FINISH", name: "เสร็จสิ้นโครงการ" },
]);
/** formQuery*/ /** formQuery*/
const formQuery = reactive<FormQueryListProject>({ const formQuery = reactive<FormQueryListProject>({
year: new Date().getFullYear(), year: new Date().getFullYear(),
@ -88,6 +92,7 @@ const formQuery = reactive<FormQueryListProject>({
pageSize: 10, pageSize: 10,
org: "1", org: "1",
keyword: "", keyword: "",
status: "ONGOING",
}); });
const orgOp = ref<DataOption[]>([{ id: "1", name: "หน่วยงาน 1" }]); const orgOp = ref<DataOption[]>([{ id: "1", name: "หน่วยงาน 1" }]);
@ -99,7 +104,7 @@ function fetchListProject() {
http http
.get( .get(
config.API.developmentMain + config.API.developmentMain +
`?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&year=${formQuery.year}` `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&year=${formQuery.year}&status=${formQuery.status}`
) )
.then((res) => { .then((res) => {
const data = res.data.result.data; const data = res.data.result.data;
@ -183,6 +188,7 @@ onMounted(() => {
autoApply autoApply
year-picker year-picker
:enableTimePicker="false" :enableTimePicker="false"
style="width: 150px"
@update:model-value="fetchListProjectNew" @update:model-value="fetchListProjectNew"
> >
<template #year="{ year }">{{ year + 543 }}</template> <template #year="{ year }">{{ year + 543 }}</template>
@ -219,6 +225,18 @@ onMounted(() => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-select
dense
outlined
v-model="formQuery.status"
:options="statusOpt"
label="สถานะโครงการ"
option-label="name"
option-value="id"
emit-value
map-options
@update:model-value="fetchListProjectNew"
/>
<q-select <q-select
dense dense
outlined outlined