Merge branch 'nice_dev' into develop
# Conflicts: # src/modules/15_development/router.ts
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
commit
a231dda03d
3 changed files with 1080 additions and 3 deletions
750
src/modules/15_development/components/scholarship/DetailView.vue
Normal file
750
src/modules/15_development/components/scholarship/DetailView.vue
Normal file
|
|
@ -0,0 +1,750 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, onMounted } from "vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import { useRouter, useRoute } from "vue-router";
|
||||||
|
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
const { dialogConfirm, showLoader, hideLoader, date2Thai } = useCounterMixin();
|
||||||
|
|
||||||
|
const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
|
||||||
|
|
||||||
|
const budgetSourceOp = ref<any>(["แหล่งงบประมาณกทม", "แหล่งงบประมาณอื่นๆ"]);
|
||||||
|
const scholarshipTypeOp = ref<any>([
|
||||||
|
{ id: "1", label: "การศึกษาในประเทศ" },
|
||||||
|
{
|
||||||
|
id: "2",
|
||||||
|
label:
|
||||||
|
"ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3",
|
||||||
|
label:
|
||||||
|
"ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "4",
|
||||||
|
label:
|
||||||
|
"ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const scholarshipTypeShortOp = ref<any>(["ทุน 1 (ก)(ข)(ค)", "ทุน 2 (ก)(ข)"]);
|
||||||
|
|
||||||
|
const isGov = ref<boolean>(false);
|
||||||
|
const dataPerson = reactive({
|
||||||
|
id: "",
|
||||||
|
citizenId: "123xxxxxxxxxx",
|
||||||
|
name: "นางสาวสาวิตรี ศรีสมัย",
|
||||||
|
position: "นักทรัพยากรบุคคล",
|
||||||
|
type: "ทั่วไป",
|
||||||
|
level: "ปฏิบัติงาน",
|
||||||
|
positionPath: "นักทรัพยากรบุคคล",
|
||||||
|
org: "-",
|
||||||
|
});
|
||||||
|
const formData = reactive({
|
||||||
|
personId: "",
|
||||||
|
year: null,
|
||||||
|
budgetSource: "",
|
||||||
|
approveBudget: "",
|
||||||
|
approveNumber: "",
|
||||||
|
date: null,
|
||||||
|
approveDate: null,
|
||||||
|
isTime: false,
|
||||||
|
detail: "",
|
||||||
|
scholarshipType: "",
|
||||||
|
scholarshipTypeShort: "",
|
||||||
|
contractNumber: "",
|
||||||
|
contractDate: null,
|
||||||
|
reportNumber: "",
|
||||||
|
reportDate: null,
|
||||||
|
reportLetterDate: null,
|
||||||
|
guarantorId: "",
|
||||||
|
trainingCourse: "",
|
||||||
|
institution: "",
|
||||||
|
trainingDateStart: null,
|
||||||
|
trainingDateEnd: null,
|
||||||
|
studyTopic: "",
|
||||||
|
studyPlace: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
function onSubmit() {
|
||||||
|
dialogConfirm($q, () => {
|
||||||
|
console.log(formData);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeTrainingDateStart() {
|
||||||
|
if (
|
||||||
|
formData?.trainingDateStart !== null &&
|
||||||
|
formData?.trainingDateEnd !== null
|
||||||
|
) {
|
||||||
|
const startDate = new Date(formData.trainingDateStart);
|
||||||
|
const endDate = new Date(formData?.trainingDateEnd);
|
||||||
|
if (startDate > endDate) {
|
||||||
|
formData.trainingDateEnd = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
isGov.value = route.params.id ? true : false;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="toptitle text-dark col-12 row items-center">
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
class="q-mr-sm"
|
||||||
|
icon="mdi-arrow-left"
|
||||||
|
color="primary"
|
||||||
|
@click="router.go(-1)"
|
||||||
|
/>
|
||||||
|
{{ `${title}ข้าราชการฯที่ได้รับทุนการศึกษา/ฝึกอบรม` }}
|
||||||
|
</div>
|
||||||
|
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||||
|
<q-card flat bordered class="col-12">
|
||||||
|
<div class="q-pa-md">
|
||||||
|
<q-card bordered tyle="border: 1px solid #d6dee1">
|
||||||
|
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
|
||||||
|
ข้อมูลราชการ
|
||||||
|
<q-btn flat dense icon="add" color="primary" label="เลือกข้าราชการ">
|
||||||
|
<q-tooltip>เพิ่ม</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
<div class="col-12"><q-separator /></div>
|
||||||
|
<div class="row col-12 q-col-gutter-md q-pa-md" v-if="isGov">
|
||||||
|
<div class="col">
|
||||||
|
<div class="row q-col-gutter-md">
|
||||||
|
<div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
|
||||||
|
<div class="col-8 text-weight-medium">
|
||||||
|
{{ dataPerson.citizenId }}
|
||||||
|
</div>
|
||||||
|
<div class="col-4 text-grey">ชื่อ-นามสกุล</div>
|
||||||
|
<div class="col-8 text-weight-medium">
|
||||||
|
{{ dataPerson.name }}
|
||||||
|
</div>
|
||||||
|
<div class="col-4 text-grey">ตำแหน่ง</div>
|
||||||
|
<div class="col-8 text-weight-medium">
|
||||||
|
{{ dataPerson.position }}
|
||||||
|
</div>
|
||||||
|
<div class="col-4 text-grey">ประเภท</div>
|
||||||
|
<div class="col-8 text-weight-medium">
|
||||||
|
{{ dataPerson.type }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="row q-col-gutter-md">
|
||||||
|
<div class="col-4 text-grey">ระดับตำแหน่ง</div>
|
||||||
|
<div class="col-8 text-weight-medium">
|
||||||
|
{{ dataPerson.level }}
|
||||||
|
</div>
|
||||||
|
<div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
|
||||||
|
<div class="col-8 text-weight-medium">
|
||||||
|
{{ dataPerson.positionPath }}
|
||||||
|
</div>
|
||||||
|
<div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
|
||||||
|
<div class="col-8 text-weight-medium">{{ dataPerson.org }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row col-12 q-pa-md" v-else>
|
||||||
|
<q-banner class="bg-grey-3 text-black col-12 text-center">
|
||||||
|
เลือกข้าราชการ
|
||||||
|
</q-banner>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
<div class="row q-col-gutter-md q-pa-md" v-if="isGov">
|
||||||
|
<div class="col-3">
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="formData.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
|
||||||
|
outlined
|
||||||
|
:model-value="
|
||||||
|
formData.year ? Number(formData.year) + 543 : null
|
||||||
|
"
|
||||||
|
:label="`${'ปีงบประมาณที่ได้รับทุน'}`"
|
||||||
|
hide-bottom-space
|
||||||
|
:rules="[
|
||||||
|
(val) => !!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
|
||||||
|
outlined
|
||||||
|
label="แหล่งงบประมาณ"
|
||||||
|
hide-bottom-space
|
||||||
|
v-model="formData.budgetSource"
|
||||||
|
:options="budgetSourceOp"
|
||||||
|
:rules="[
|
||||||
|
(val:string) =>
|
||||||
|
!!val || `${'กรุณาเลือกแหล่งงบประมาณ'}`,
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
hide-bottom-space
|
||||||
|
v-model="formData.approveBudget"
|
||||||
|
label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
|
||||||
|
mask="###,###,###,###,###,###"
|
||||||
|
reverse-fill-mask
|
||||||
|
:rules="[
|
||||||
|
(val:string) =>
|
||||||
|
!!val || `${'กรุณากรอกงบประมาณที่ได้รับอนุมัติตลอดหลักสูตร'}`,
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
v-model="formData.approveNumber"
|
||||||
|
label="เลขที่หนังสิออนุมัติ"
|
||||||
|
mask="#"
|
||||||
|
hide-bottom-space
|
||||||
|
reverse-fill-mask
|
||||||
|
:rules="[
|
||||||
|
(val:string) =>
|
||||||
|
!!val || `${'กรุณากรอกเลขที่หนังสิออนุมัติ'}`,
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="formData.date"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
:enableTimePicker="false"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
|
<template #year-overlay-value="{ value }">{{
|
||||||
|
parseInt(value + 543)
|
||||||
|
}}</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
:model-value="formData.date ? date2Thai(formData.date) : 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="formData.approveDate"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
:enableTimePicker="false"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
|
<template #year-overlay-value="{ value }">{{
|
||||||
|
parseInt(value + 543)
|
||||||
|
}}</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
:model-value="
|
||||||
|
formData.approveDate ? date2Thai(formData.approveDate) : 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
|
||||||
|
color="primary"
|
||||||
|
v-model="formData.isTime"
|
||||||
|
label="ใช้เวลาราชการ"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
v-model="formData.detail"
|
||||||
|
label="เปลี่ยนแปลงรายละเอียด"
|
||||||
|
rows="3"
|
||||||
|
hide-bottom-space
|
||||||
|
type="textarea"
|
||||||
|
:rules="[
|
||||||
|
(val:string) =>
|
||||||
|
!!val || `${'กรุณากรอกเปลี่ยนแปลงรายละเอียด'}`,
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-9">
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
hide-bottom-space
|
||||||
|
lazy-rules
|
||||||
|
v-model="formData.scholarshipType"
|
||||||
|
:options="scholarshipTypeOp"
|
||||||
|
option-label="label"
|
||||||
|
option-value="id"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
input-class="text-red"
|
||||||
|
label="เลือกประเภททุน"
|
||||||
|
:rules="[
|
||||||
|
(val:string) =>
|
||||||
|
!!val || `${'กรุณาเลือกประเภททุน'}`,
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<template v-slot:selected-item="scope">
|
||||||
|
<div class="text-primary">{{ scope.opt.label }}</div>
|
||||||
|
</template>
|
||||||
|
</q-select>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="col-3"
|
||||||
|
v-if="
|
||||||
|
formData.scholarshipType !== '' && formData.scholarshipType !== '4'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
hide-bottom-space
|
||||||
|
lazy-rules
|
||||||
|
v-model="formData.scholarshipTypeShort"
|
||||||
|
:options="scholarshipTypeShortOp"
|
||||||
|
label="ประเภททุน"
|
||||||
|
:rules="[
|
||||||
|
(val:string) =>
|
||||||
|
!!val || `${'กรุณาเลือกประเภททุน'}`,
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<template v-slot:selected>
|
||||||
|
<div class="text-primary">
|
||||||
|
{{ formData.scholarshipTypeShort }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</q-select>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="col-12"
|
||||||
|
v-if="
|
||||||
|
formData.scholarshipType !== '' && formData.scholarshipType !== '4'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="row q-col-gutter-md">
|
||||||
|
<div class="col-3">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
reverse-fill-mask
|
||||||
|
label="เลขที่สัญญา"
|
||||||
|
mask="#"
|
||||||
|
v-model="formData.contractNumber"
|
||||||
|
:rules="[
|
||||||
|
(val:string) =>
|
||||||
|
!!val || `${'กรุณากรอกเลขที่สัญญา'}`,
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-2">
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="formData.contractDate"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
>
|
||||||
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
|
<template #year-overlay-value="{ value }">{{
|
||||||
|
parseInt(value + 543)
|
||||||
|
}}</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
:model-value="
|
||||||
|
formData.contractDate
|
||||||
|
? date2Thai(formData.contractDate)
|
||||||
|
: 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-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
hide-bottom-space
|
||||||
|
reverse-fill-mask
|
||||||
|
lazy-rules
|
||||||
|
v-model="formData.reportNumber"
|
||||||
|
mask="#"
|
||||||
|
label="เลขที่หนังสือรายงานตัวกลับ"
|
||||||
|
:rules="[
|
||||||
|
(val) => !!val || `${'กรุณากรอกเลขที่หนังสือรายงานตัวกลับ'}`,
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-2">
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="formData.reportDate"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
:enableTimePicker="false"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
|
<template #year-overlay-value="{ value }">{{
|
||||||
|
parseInt(value + 543)
|
||||||
|
}}</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
:model-value="
|
||||||
|
formData.reportDate
|
||||||
|
? date2Thai(formData.reportDate)
|
||||||
|
: 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-2">
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="formData.reportLetterDate"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
:enableTimePicker="false"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
|
<template #year-overlay-value="{ value }">{{
|
||||||
|
parseInt(value + 543)
|
||||||
|
}}</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
:model-value="
|
||||||
|
formData.reportLetterDate
|
||||||
|
? date2Thai(formData.reportLetterDate)
|
||||||
|
: 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-12">
|
||||||
|
<q-card bordered tyle="border: 1px solid #d6dee1">
|
||||||
|
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
|
||||||
|
ข้อมูลผู้ค้ำประกัน
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
icon="add"
|
||||||
|
color="primary"
|
||||||
|
label="เลือกผู้ค้ำประกัน"
|
||||||
|
>
|
||||||
|
<q-tooltip>เพิ่ม</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
<div class="col-12"><q-separator /></div>
|
||||||
|
<div class="row col-12 q-col-gutter-md q-pa-md">
|
||||||
|
<div class="col">
|
||||||
|
<div class="row q-col-gutter-md">
|
||||||
|
<div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
|
||||||
|
<div class="col-8 text-weight-medium">123xxxxxxxxxx</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="row q-col-gutter-md">
|
||||||
|
<div class="col-4 text-grey">ระดับตำแหน่ง</div>
|
||||||
|
<div class="col-8 text-weight-medium">123xxxxxxxxxx</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12" v-else-if="formData.scholarshipType === '4'">
|
||||||
|
<div class="row q-col-gutter-md">
|
||||||
|
<div class="col-6">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
label="หลักสูตรการฝึกอบรม"
|
||||||
|
v-model="formData.trainingCourse"
|
||||||
|
:rules="[
|
||||||
|
(val:string) =>
|
||||||
|
!!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
|
||||||
|
v-model="formData.institution"
|
||||||
|
:rules="[
|
||||||
|
(val:string) =>
|
||||||
|
!!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-3">
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="formData.trainingDateStart"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
@update:model-value="changeTrainingDateStart()"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
|
<template #year-overlay-value="{ value }">{{
|
||||||
|
parseInt(value + 543)
|
||||||
|
}}</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
:model-value="
|
||||||
|
formData.trainingDateStart
|
||||||
|
? date2Thai(formData.trainingDateStart)
|
||||||
|
: 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="formData.trainingDateEnd"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
:min-date="formData.trainingDateStart"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
|
<template #year-overlay-value="{ value }">{{
|
||||||
|
parseInt(value + 543)
|
||||||
|
}}</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
:model-value="
|
||||||
|
formData.trainingDateEnd
|
||||||
|
? date2Thai(formData.trainingDateEnd)
|
||||||
|
: 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-6"></div>
|
||||||
|
<div class="col-6">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
label="สถานที่ไปศึกษาดูงาน"
|
||||||
|
v-model="formData.studyPlace"
|
||||||
|
:rules="[
|
||||||
|
(val:string) =>
|
||||||
|
!!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
label="หัวข้อไปศึกษาดูงาน"
|
||||||
|
v-model="formData.studyTopic"
|
||||||
|
:rules="[
|
||||||
|
(val:string) =>
|
||||||
|
!!val || `${'กรุณากรอกหัวข้อไปศึกษาดูงาน'}`,
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<q-separator />
|
||||||
|
<div class="text-right q-pa-sm" v-if="isGov">
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
unelevated
|
||||||
|
label="บันทึก"
|
||||||
|
id="onSubmit"
|
||||||
|
type="submit"
|
||||||
|
color="public"
|
||||||
|
class="q-px-md"
|
||||||
|
>
|
||||||
|
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</q-form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -9,6 +9,10 @@ const Scholarship = () =>
|
||||||
import("@/modules/15_development/views/Scholarship.vue");
|
import("@/modules/15_development/views/Scholarship.vue");
|
||||||
const historyAdd = () => import('@/modules/15_development/components/history/AddPage.vue')
|
const historyAdd = () => import('@/modules/15_development/components/history/AddPage.vue')
|
||||||
const historyEmployeeAdd = () => import('@/modules/15_development/components/historyEmployee/AddPage.vue')
|
const historyEmployeeAdd = () => import('@/modules/15_development/components/historyEmployee/AddPage.vue')
|
||||||
|
const ScholarshipDetail = () =>
|
||||||
|
import("@/modules/15_development/components/scholarship/DetailView.vue");
|
||||||
|
const historyAdd = () =>
|
||||||
|
import("@/modules/15_development/components/history/AddPage.vue");
|
||||||
export default [
|
export default [
|
||||||
{
|
{
|
||||||
path: "/development",
|
path: "/development",
|
||||||
|
|
@ -70,6 +74,26 @@ export default [
|
||||||
Role: "development",
|
Role: "development",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/development/scholarship/add",
|
||||||
|
name: "developmentScholarshipAdd",
|
||||||
|
component: ScholarshipDetail,
|
||||||
|
meta: {
|
||||||
|
Auth: true,
|
||||||
|
Key: [1.6],
|
||||||
|
Role: "development",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/development/scholarship/:id",
|
||||||
|
name: "developmentScholarshipid",
|
||||||
|
component: ScholarshipDetail,
|
||||||
|
meta: {
|
||||||
|
Auth: true,
|
||||||
|
Key: [1.6],
|
||||||
|
Role: "development",
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "/development/history/add",
|
path: "/development/history/add",
|
||||||
name: "developmentHistoryAdd",
|
name: "developmentHistoryAdd",
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,308 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, onMounted } from "vue";
|
||||||
|
import { useQuasar, type QTableProps } from "quasar";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
|
||||||
|
/** importStore*/
|
||||||
|
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
/** use*/
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const router = useRouter();
|
||||||
|
const { showLoader, hideLoader } = useCounterMixin();
|
||||||
|
|
||||||
|
/** หัวตาราง */
|
||||||
|
const rows = ref<any>([]);
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "citizenId",
|
||||||
|
align: "left",
|
||||||
|
label: "เลขประจำตัวประชาชน ",
|
||||||
|
sortable: true,
|
||||||
|
field: "citizenId",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "name",
|
||||||
|
align: "left",
|
||||||
|
label: "ชื่อ-นามสกุล",
|
||||||
|
sortable: true,
|
||||||
|
field: "name",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
name: "position",
|
||||||
|
align: "left",
|
||||||
|
label: "ตำแหน่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "position",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "type",
|
||||||
|
align: "left",
|
||||||
|
label: "ประเภท",
|
||||||
|
sortable: true,
|
||||||
|
field: "type",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "level",
|
||||||
|
align: "left",
|
||||||
|
label: "ระดับ",
|
||||||
|
sortable: true,
|
||||||
|
field: "level",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionPath",
|
||||||
|
align: "left",
|
||||||
|
label: "ตำแหน่งทางการบริหาร",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionPath",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const visibleColumns = ref<string[]>([
|
||||||
|
"citizenId",
|
||||||
|
"name",
|
||||||
|
"position",
|
||||||
|
"type",
|
||||||
|
"level",
|
||||||
|
"positionPath",
|
||||||
|
]);
|
||||||
|
|
||||||
|
const options = ref<any>([
|
||||||
|
"การศึกษาในประเทศ",
|
||||||
|
"ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
|
||||||
|
"ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
|
||||||
|
"ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)",
|
||||||
|
]);
|
||||||
|
const itemDownload = ref<any>([
|
||||||
|
{
|
||||||
|
label: "ดาวน์โหลด 1",
|
||||||
|
value: "",
|
||||||
|
icon: "mdi-file-pdf-box",
|
||||||
|
color: "green",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "ดาวน์โหลด 2",
|
||||||
|
value: "",
|
||||||
|
icon: "mdi-file-table",
|
||||||
|
color: "red",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "ดาวน์โหลด 3",
|
||||||
|
value: "",
|
||||||
|
icon: "mdi-file-word",
|
||||||
|
color: "blue",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const formFilter = reactive({
|
||||||
|
page: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
year: new Date().getFullYear(),
|
||||||
|
type: "การศึกษาในประเทศ",
|
||||||
|
keyword: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
function fetchList() {
|
||||||
|
showLoader();
|
||||||
|
const data = [
|
||||||
|
{
|
||||||
|
id: "1",
|
||||||
|
citizenId: "123XXXXXXXXXXX",
|
||||||
|
name: "นางสาวสาวิตรี ศรีสมัย",
|
||||||
|
position: "นักทรัพยากรบุคคล",
|
||||||
|
type: "ทั่วไป",
|
||||||
|
level: "ปฏิบัติงาน",
|
||||||
|
positionPath: "นักทรัพยากรบุคคล",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "2",
|
||||||
|
citizenId: "1234XXXXXXXXXX",
|
||||||
|
name: "นายณัฐพงศ์ ดิษยบุตร",
|
||||||
|
position: "นักทรัพยากรบุคคล",
|
||||||
|
type: "ทั่วไป",
|
||||||
|
level: "ปฏิบัติงาน",
|
||||||
|
positionPath: "",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
rows.value = data;
|
||||||
|
setTimeout(() => {
|
||||||
|
hideLoader();
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onClickAddOrView(status: boolean = false, id: string = "") {
|
||||||
|
status
|
||||||
|
? router.push(`/development/scholarship/${id}`)
|
||||||
|
: router.push("/development/scholarship/add");
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="toptitle text-dark col-12 row items-center">
|
||||||
ทุนการศึกษา/ฝึกอบรม
|
รายการข้าราชการฯที่ได้รับทุนการศึกษา/ฝึกอบรม
|
||||||
|
</div>
|
||||||
|
<q-card flat bordered class="q-pa-md">
|
||||||
|
<q-toolbar style="padding: 0px">
|
||||||
|
<div class="row q-gutter-sm">
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="formFilter.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
|
||||||
|
:model-value="Number(formFilter.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>
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
v-model="formFilter.type"
|
||||||
|
:options="options"
|
||||||
|
label="เลือกประเภททุน"
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
icon="add"
|
||||||
|
color="primary"
|
||||||
|
@click="onClickAddOrView()"
|
||||||
|
>
|
||||||
|
<q-tooltip>เพิ่ม</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<q-space />
|
||||||
|
<div class="row q-gutter-sm">
|
||||||
|
<q-btn flat round color="primary" icon="mdi-download-outline">
|
||||||
|
<q-menu>
|
||||||
|
<q-list style="min-width: 100px" dense>
|
||||||
|
<q-item clickable v-close-popup v-for="items in itemDownload">
|
||||||
|
<q-item-section avatar>
|
||||||
|
<q-icon :color="items.color" :name="items.icon" />
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section :class="`text-${items.color}`">{{
|
||||||
|
items.label
|
||||||
|
}}</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-menu>
|
||||||
|
</q-btn>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
standout
|
||||||
|
dense
|
||||||
|
v-model="formFilter.keyword"
|
||||||
|
ref="filterRef"
|
||||||
|
outlined
|
||||||
|
debounce="300"
|
||||||
|
placeholder="ค้นหา"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon v-if="formFilter.keyword == ''" name="search" />
|
||||||
|
<q-icon
|
||||||
|
v-if="formFilter.keyword !== ''"
|
||||||
|
name="clear"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="formFilter.keyword = ''"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
|
||||||
|
<q-select
|
||||||
|
v-model="visibleColumns"
|
||||||
|
multiple
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
options-dense
|
||||||
|
:display-value="$q.lang.table.columns"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
:options="columns"
|
||||||
|
option-value="name"
|
||||||
|
options-cover
|
||||||
|
style="min-width: 150px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-toolbar>
|
||||||
|
|
||||||
|
<div class="col-12">
|
||||||
|
<d-table
|
||||||
|
for="table"
|
||||||
|
ref="table"
|
||||||
|
:columns="columns"
|
||||||
|
:rows="rows"
|
||||||
|
row-key="subject"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
dense
|
||||||
|
class="custom-header-table"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
>
|
||||||
|
<template v-slot:header="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
|
</q-th>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
|
<q-td
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
@click="onClickAddOrView(true, props.row.id)"
|
||||||
|
>
|
||||||
|
<div class="table_ellipsis">
|
||||||
|
{{ col.value ? col.value : "-" }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</q-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue