รายละเอียดทุนการศึกษา/ฝึกอบรม
This commit is contained in:
STW_TTTY\stwtt
parent
49b53430d2
commit
7666554388
5 changed files with 477 additions and 111 deletions
393
src/modules/09_scholarship/views/detail.vue
Normal file
393
src/modules/09_scholarship/views/detail.vue
Normal file
|
|
@ -0,0 +1,393 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type { DataOptions } from '@/modules/09_scholarship/interface/index/Main'
|
||||
const route = useRoute();
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { showLoader, hideLoader, messageError ,date2Thai} = mixin;
|
||||
const router = useRouter();
|
||||
|
||||
const id = ref<string>(route.params.id.toLocaleString());
|
||||
const budgetSourceOp = ref<DataOptions[]>([
|
||||
{ id: "BKK", name: "งบประมาณ กทม." },
|
||||
{ id: "HOSPITAL", name: "เงินบำรุงโรงพยาบาล" },
|
||||
{ id: "FUND", name: "เงินกองทุน" },
|
||||
{ id: "SUBSIDY", name: "เงินอุดหนุน" },
|
||||
{ id: "OTHER", name: "เงินอื่น ๆ" },
|
||||
]);
|
||||
const dataPerson = reactive({
|
||||
id: "",
|
||||
citizenId: "",
|
||||
name: "",
|
||||
position: "",
|
||||
type: "",
|
||||
level: "",
|
||||
positionSide: "",
|
||||
org: "-",
|
||||
|
||||
planType: "",
|
||||
|
||||
scholarshipYear: null,
|
||||
budgetSource: "",
|
||||
budgetApprove: null,
|
||||
isNoUseBudget: false,
|
||||
bookNo: "",
|
||||
bookNoDate: null,
|
||||
bookApproveDate: null,
|
||||
useOfficialTime: false,
|
||||
changeDetail: "",
|
||||
});
|
||||
|
||||
function getDetail() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.developmentScholarship + `/${id.value}`)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
dataPerson.citizenId = data.citizenId;
|
||||
dataPerson.name = `${data.prefix}${data.firstName} ${data.lastName}`;
|
||||
dataPerson.position = data.position;
|
||||
dataPerson.type = data.posTypeName;
|
||||
dataPerson.level = data.posLevelName;
|
||||
dataPerson.positionSide = data.posExecutive;
|
||||
dataPerson.org = data.org; // รอ API
|
||||
dataPerson.planType = data.planType;
|
||||
|
||||
dataPerson.scholarshipYear = data.scholarshipYear
|
||||
dataPerson.budgetSource = data.budgetSource
|
||||
dataPerson.budgetApprove = data.budgetApprove
|
||||
dataPerson.isNoUseBudget = data.isNoUseBudget
|
||||
dataPerson.bookNo = data.bookNo
|
||||
dataPerson.bookNoDate = data.bookNoDate
|
||||
dataPerson.bookApproveDate = data.bookApproveDate
|
||||
dataPerson.useOfficialTime = data.useOfficialTime
|
||||
dataPerson.changeDetail = data.changeDetail
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getDetail();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-12 row justify-center">
|
||||
<div class="col-xs-12 col-sm-12 col-md-11">
|
||||
<div class="toptitle text-white col-12 row items-center">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="router.push(`/scholarship`)"
|
||||
/>
|
||||
รายละเอียดทุนการศึกษา/ฝึกอบรม
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-card bordered class="q-pa-md">
|
||||
<q-card flat style="border-radius: 5px; border: 1px solid #d6dee1">
|
||||
<div class="bg-grey-2 q-pa-md text-body2 text-weight-bold">
|
||||
ข้อมูลราชการ
|
||||
</div>
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
|
||||
<div class="col-8 text-weight-medium">
|
||||
{{ dataPerson.citizenId ? dataPerson.citizenId : "-" }}
|
||||
</div>
|
||||
<div class="col-4 text-grey">ชื่อ-นามสกุล</div>
|
||||
<div class="col-8 text-weight-medium">
|
||||
{{ dataPerson.name ? dataPerson.name : "-" }}
|
||||
</div>
|
||||
<div class="col-4 text-grey">ตำแหน่ง</div>
|
||||
<div class="col-8 text-weight-medium">
|
||||
{{ dataPerson.position ? dataPerson.position : "-" }}
|
||||
</div>
|
||||
<div class="col-4 text-grey">ประเภท</div>
|
||||
<div class="col-8 text-weight-medium">
|
||||
{{ dataPerson.type ? dataPerson.type : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-4 text-grey">ระดับตำแหน่ง</div>
|
||||
<div class="col-8 text-weight-medium">
|
||||
{{ dataPerson.level ? dataPerson.citizenId : "-" }}
|
||||
</div>
|
||||
<div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
|
||||
<div class="col-8 text-weight-medium">
|
||||
{{ dataPerson.positionSide ? dataPerson.name : "-" }}
|
||||
</div>
|
||||
<div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
|
||||
<div class="col-8 text-weight-medium">
|
||||
{{ dataPerson.org ? dataPerson.org : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
<div class="row q-col-gutter-sm q-mt-md">
|
||||
<div class="col-12">
|
||||
<q-radio
|
||||
v-model="dataPerson.planType"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="INPLAN"
|
||||
label="ในแผนฯ"
|
||||
dense
|
||||
disable
|
||||
/>
|
||||
<q-radio
|
||||
v-model="dataPerson.planType"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="OUTPLAN"
|
||||
label="นอกแผนฯ"
|
||||
dense
|
||||
disable
|
||||
class="q-pl-sm"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="dataPerson.scholarshipYear"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
readonly
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
outlined
|
||||
class="inputgreen"
|
||||
:model-value="
|
||||
dataPerson.scholarshipYear
|
||||
? Number(dataPerson.scholarshipYear) + 543
|
||||
: null
|
||||
"
|
||||
:label="`${'ปีงบประมาณที่ได้รับทุน'}`"
|
||||
hide-bottom-space
|
||||
:rules="[
|
||||
(val: string) => !!val || `${'กรุณาเลือกปีงบประมาณที่ได้รับทุน'}`,
|
||||
]"
|
||||
>
|
||||
<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-3">
|
||||
<q-select
|
||||
dense
|
||||
readonly
|
||||
outlined
|
||||
class="inputgreen"
|
||||
label="แหล่งงบประมาณ"
|
||||
hide-bottom-space
|
||||
v-model="dataPerson.budgetSource"
|
||||
:options="budgetSourceOp"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
!!val || `${'กรุณาเลือกแหล่งงบประมาณ'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-input
|
||||
readonly
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
v-model="dataPerson.budgetApprove"
|
||||
label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
|
||||
mask="###,###,###,###,###,###"
|
||||
reverse-fill-mask
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
!!val || `${'กรุณากรอกงบประมาณที่ได้รับอนุมัติตลอดหลักสูตร'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
disable
|
||||
v-model="dataPerson.isNoUseBudget"
|
||||
label="ไม่ใช้งบประมาณ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
class="inputgreen"
|
||||
v-model="dataPerson.bookNo"
|
||||
label="เลขที่หนังสิออนุมัติ"
|
||||
hide-bottom-space
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
!!val || `${'กรุณากรอกเลขที่หนังสิออนุมัติ'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="dataPerson.bookNoDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
readonly
|
||||
:enableTimePicker="false"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
class="inputgreen"
|
||||
:model-value="
|
||||
dataPerson.bookNoDate
|
||||
? date2Thai(dataPerson.bookNoDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลงวันที่'}`"
|
||||
hide-bottom-space
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
!!val || `${'กรุณาเลือกวันที่'}`,
|
||||
]"
|
||||
>
|
||||
<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-3">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="dataPerson.bookApproveDate"
|
||||
:locale="'th'"
|
||||
readonly
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
class="inputgreen"
|
||||
readonly
|
||||
:model-value="
|
||||
dataPerson.bookApproveDate
|
||||
? date2Thai(dataPerson.bookApproveDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'หนังสืออนุมัติเมื่อวันที่'}`"
|
||||
hide-bottom-space
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
!!val || `${'กรุณาเลือกวันที่หนังสืออนุมัติเมื่อวันที่'}`,
|
||||
]"
|
||||
>
|
||||
<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-3">
|
||||
<q-checkbox
|
||||
keep-color
|
||||
disable
|
||||
color="primary"
|
||||
v-model="dataPerson.useOfficialTime"
|
||||
label="ใช้เวลาราชการ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
class="inputgreen"
|
||||
readonly
|
||||
v-model="dataPerson.changeDetail"
|
||||
label="เปลี่ยนแปลงรายละเอียด"
|
||||
rows="3"
|
||||
hide-bottom-space
|
||||
type="textarea"
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
!!val || `${'กรุณากรอกเปลี่ยนแปลงรายละเอียด'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Add table
Add a link
Reference in a new issue