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");
|
||||
const historyAdd = () => import('@/modules/15_development/components/history/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 [
|
||||
{
|
||||
path: "/development",
|
||||
|
|
@ -70,6 +74,26 @@ export default [
|
|||
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",
|
||||
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>
|
||||
<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>
|
||||
</template>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue