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

Merge branch 'develop' into NiceDev

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-05-24 13:53:09 +07:00
commit 8628be8fcf
18 changed files with 1569 additions and 560 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/api/org/api.org.ts
View file

@ -6,4 +6,5 @@ export default {
profilePosition: () => `${org}/profile/keycloak/position`, profilePosition: () => `${org}/profile/keycloak/position`,
searchCommander: `${org}/profile/search/commander`, searchCommander: `${org}/profile/search/commander`,
dataUserInformation: `${org}/profile/user`,
}; };

2
src/modules/01_dashboard/views/Dashboard.vue
View file

@ -257,7 +257,7 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
<q-card <q-card
flat flat
bordered bordered
:style="$q.screen.gt.xs ? 'max-height: 74vh' : 'height: 100px;'" :style="$q.screen.gt.xs ? 'max-height: 74vh' : 'height: 500px;'"
class="q-pb-sm col-12" class="q-pb-sm col-12"
> >
<div class="col-12 row q-px-md q-pt-md q-pb-sm"> <div class="col-12 row q-px-md q-pt-md q-pb-sm">

50
src/modules/06_evaluate/components/TableListEvaluate.vue
View file

@ -152,7 +152,7 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
</script> </script>
<template> <template>
<q-table <d-table
ref="table" ref="table"
flat flat
bordered bordered
@ -207,6 +207,52 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
</q-td> </q-td>
</q-tr> </q-tr>
</template> </template>
<template #item="props">
<div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
<q-card bordered flat>
<q-list @click="redirectToDetail(props.row)">
<q-item
v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
:key="col.name"
>
<q-item-section>
<q-item-label caption>{{ col.label }}</q-item-label>
<q-item-label v-if="col.name === 'no'">
{{ props.rowIndex + 1 }}
</q-item-label>
<q-item-label v-else>{{ col.value }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
<q-separator
v-if="
props.row.step === 'CHECK_SPEC' ||
props.row.step === 'PREPARE_DOC_V1' ||
props.row.step === 'CHECK_DOC_V1'
"
/>
<q-card-actions align="around">
<q-btn
v-if="
props.row.step === 'CHECK_SPEC' ||
props.row.step === 'PREPARE_DOC_V1' ||
props.row.step === 'CHECK_DOC_V1'
"
flat
dense
round
color="red"
icon="delete"
@click.stop="onCkilckDelete(props.row.id)"
>
<q-tooltip>ลบ</q-tooltip>
</q-btn>
</q-card-actions>
</q-card>
</div>
</template>
<template v-slot:pagination="scope"> <template v-slot:pagination="scope">
ทั้งหมด {{ store.row.length }} รายการ ทั้งหมด {{ store.row.length }} รายการ
<q-pagination <q-pagination
@ -219,7 +265,7 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
:max="Number(props.maxPage)" :max="Number(props.maxPage)"
></q-pagination> ></q-pagination>
</template> </template>
</q-table> </d-table>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>

2
src/modules/06_evaluate/views/EvaluateMain.vue
View file

@ -295,7 +295,7 @@ watch(
:options="options" :options="options"
option-value="val" option-value="val"
label="ค้นหาสถานะ" label="ค้นหาสถานะ"
style="width: 35vw" :style="!$q.screen.gt.xs ? '' : 'width: 35vw'"
@update:model-value="fetchEvaluteList" @update:model-value="fetchEvaluteList"
use-input use-input
@filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) " @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "

451
src/modules/08_KPI/views/form.vue
View file

@ -312,251 +312,260 @@ function requireEdit() {
onMounted(async () => { onMounted(async () => {
showLoader(); showLoader();
await getAll(); await getAll();
console.log(store.dataEvaluation.avartar);
}); });
</script> </script>
<template> <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="
isReadonly ? router.push(`/KPI-evaluator`) : router.push(`/KPI`)
"
/>
{{
isReadonly
? "รายละเอียดการประเมินผลการปฏิบัติราชการระดับบุคคล"
: id
? `แก้ไขแบบประเมิน`
: `เพิ่มแบบประเมิน`
}}
<q-space />
</div>
<div class="col-12">
<q-card bordered flat class="relative-position">
<div
class="absolute-center-left"
style="left: 2%; top: 50%; transform: translateY(-50%)"
>
<q-avatar size="95px">
<q-img :src="store.dataEvaluation.avartar" />
</q-avatar>
</div>
<div class="row col-12">
<div class="row items-center col-12 q-pa-sm">
<div class="col-12" style="padding-left: 12%">
<div class="row col-12 items-center">
<span class="text-h6 text-weight-medium text-primary">{{
`${store.dataEvaluation.prefix}${store.dataEvaluation.firstName} ${store.dataEvaluation.lastName}`
}}</span>
<q-space />
<div class="q-gutter-x-sm">
<span
v-if="
(store.dataEvaluation.posExecutiveName == null &&
store.indicatorWeightTotal != 100) ||
(store.dataEvaluation.posExecutiveName != null &&
(store.indicatorWeight1Total != 100 ||
store.indicatorWeight2Total != 20))
"
class="text-red"
>*น้ำหนัก(ร้อยละ) ผลสัมฤทธิ์ของงานไม่ถูกต้อง</span
>
<q-btn
v-if="
store.rolePerson == 'USER' &&
store.dataEvaluation.evaluationStatus == 'NEW'
"
:disabled="
(store.dataEvaluation.posExecutiveName == null &&
store.indicatorWeightTotal != 100) ||
(store.dataEvaluation.posExecutiveName != null &&
(store.indicatorWeight1Total != 100 ||
store.indicatorWeight2Total != 20))
"
unelevated
round
icon="mdi-send"
color="grey-2"
text-color="blue-6"
size="md"
@click="sendToEvaluatore('NEW_EVALUATOR')"
>
<q-tooltip>ส่งให้ผู้ประเมินอนุมัติ</q-tooltip>
</q-btn>
<q-btn <div class="col-12 row justify-center">
v-if=" <div class="col-xs-12 col-sm-12 col-md-11">
store.rolePerson == 'USER' && <div class="toptitle text-white col-12 row items-center">
store.dataEvaluation.evaluationStatus == 'EVALUATING' <q-btn
" icon="mdi-arrow-left"
unelevated unelevated
round round
icon="mdi-send" dense
color="grey-2" flat
text-color="blue-6" color="primary"
size="md" class="q-mr-sm"
@click="sendToEvaluatore('EVALUATING_EVALUATOR')" @click="
> isReadonly ? router.push(`/KPI-evaluator`) : router.push(`/KPI`)
<q-tooltip>ส่งให้ผู้ประเมินอนุมัติผลการประเมิน</q-tooltip> "
</q-btn> />
{{
isReadonly
? "รายละเอียดการประเมินผลการปฏิบัติราชการระดับบุคคล"
: id
? `แก้ไขแบบประเมิน`
: `เพิ่มแบบประเมิน`
}}
<q-space />
</div>
<div class="col-12">
<q-card bordered flat class="relative-position">
<div
class="absolute-center-left"
style="left: 2%; top: 50%; transform: translateY(-50%)"
>
<q-avatar size="95px">
<q-img
:src="store.dataEvaluation.avartar"
v-if="store.dataEvaluation.avartar !== undefined"
/>
<q-img src="@/assets/avatar_user.jpg" v-else />
</q-avatar>
</div>
<div class="row col-12">
<div class="row items-center col-12 q-pa-sm">
<div class="col-12" style="padding-left: 12%">
<div class="row col-12 items-center">
<span class="text-h6 text-weight-medium text-primary">{{
`${store.dataEvaluation.prefix}${store.dataEvaluation.firstName} ${store.dataEvaluation.lastName}`
}}</span>
<q-space />
<div class="q-gutter-x-sm">
<span
v-if="
(store.dataEvaluation.posExecutiveName == null &&
store.indicatorWeightTotal != 100) ||
(store.dataEvaluation.posExecutiveName != null &&
(store.indicatorWeight1Total != 100 ||
store.indicatorWeight2Total != 20))
"
class="text-red"
>*น้ำหนัก(ร้อยละ) ผลสัมฤทธิ์ของงานไม่ถูกต้อง</span
>
<q-btn
v-if="
store.rolePerson == 'USER' &&
store.dataEvaluation.evaluationStatus == 'NEW'
"
:disabled="
(store.dataEvaluation.posExecutiveName == null &&
store.indicatorWeightTotal != 100) ||
(store.dataEvaluation.posExecutiveName != null &&
(store.indicatorWeight1Total != 100 ||
store.indicatorWeight2Total != 20))
"
unelevated
round
icon="mdi-send"
color="grey-2"
text-color="blue-6"
size="md"
@click="sendToEvaluatore('NEW_EVALUATOR')"
>
<q-tooltip>ส่งให้ผู้ประเมินอนุมัติ</q-tooltip>
</q-btn>
<q-btn <q-btn
v-if=" v-if="
store.rolePerson == 'USER' && store.rolePerson == 'USER' &&
store.tabOpen < 3 && store.dataEvaluation.evaluationStatus == 'EVALUATING'
store.dataEvaluation.evaluationStatus != 'NEW' && "
(store.dataEvaluation.evaluationReqEdit == null || unelevated
store.dataEvaluation.evaluationReqEdit == 'DONE') round
" icon="mdi-send"
:disabled="store.dataEvaluation.evaluatorId == null" color="grey-2"
unelevated text-color="blue-6"
round size="md"
icon="mdi-file-edit" @click="sendToEvaluatore('EVALUATING_EVALUATOR')"
color="grey-2" >
text-color="red-6" <q-tooltip
size="md" >ส่งให้ผู้ประเมินอนุมัติผลการประเมิน</q-tooltip
@click="requireEdit()" >
> </q-btn>
<q-tooltip>ขอแก้ไขข้อตกลง</q-tooltip>
</q-btn>
<!-- <q-btn <q-btn
v-if="!isReadonly" v-if="
unelevated store.rolePerson == 'USER' &&
round store.tabOpen < 3 &&
icon="mdi-format-list-bulleted-square" store.dataEvaluation.evaluationStatus != 'NEW' &&
color="grey-2" (store.dataEvaluation.evaluationReqEdit == null ||
text-color="amber-10" store.dataEvaluation.evaluationReqEdit == 'DONE')
size="md" "
@click="modalScore = true" :disabled="store.dataEvaluation.evaluatorId == null"
> unelevated
<q-tooltip>แก้ไขคะแนนเต็ม</q-tooltip> round
</q-btn> --> icon="mdi-file-edit"
<q-btn color="grey-2"
unelevated text-color="red-6"
round size="md"
icon="mdi-account" @click="requireEdit()"
color="grey-2" >
text-color="edit" <q-tooltip>ขอแก้ไขข้อตกลง</q-tooltip>
size="md" </q-btn>
@click="modalEdit = true"
> <!-- <q-btn
<q-tooltip>{{ v-if="!isReadonly"
store.dataEvaluation.evaluationStatus === "NEW" && unelevated
store.rolePerson === "USER" round
? "แก้ไขผู้ประเมิน" icon="mdi-format-list-bulleted-square"
: "ข้อมูลผู้ประเมิน" color="grey-2"
}}</q-tooltip> text-color="amber-10"
</q-btn> size="md"
<q-btn @click="modalScore = true"
unelevated >
round <q-tooltip>แก้ไขคะแนนเต็ม</q-tooltip>
icon="mdi-file-eye-outline" </q-btn> -->
color="grey-2" <q-btn
text-color="primary" unelevated
size="md" round
> icon="mdi-account"
<q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip> color="grey-2"
</q-btn> text-color="edit"
<q-btn size="md"
unelevated @click="modalEdit = true"
round >
color="grey-2" <q-tooltip>{{
text-color="blue-5" store.dataEvaluation.evaluationStatus === "NEW" &&
icon="mdi-file-eye-outline" store.rolePerson === "USER"
size="md" ? "แก้ไขผู้ประเมิน"
> : "ข้อมูลผู้ประเมิน"
<q-tooltip>ดูข้อมูลการทดลองงาน</q-tooltip> }}</q-tooltip>
</q-btn> </q-btn>
<q-btn
unelevated
round
icon="mdi-file-eye-outline"
color="grey-2"
text-color="primary"
size="md"
>
<q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip>
</q-btn>
<q-btn
unelevated
round
color="grey-2"
text-color="blue-5"
icon="mdi-file-eye-outline"
size="md"
>
<q-tooltip>ดูข้อมูลการทดลองงาน</q-tooltip>
</q-btn>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="row items-center bg-toolbar col-12 q-pa-sm"> <div class="row items-center bg-toolbar col-12 q-pa-sm">
<div class="col-12 q-py-xs" style="padding-left: 12%"> <div class="col-12 q-py-xs" style="padding-left: 12%">
<div class="row no-wrap"> <div class="row no-wrap">
<div class="col-2"> <div class="col-2">
<div class="column"> <div class="column">
<span class="text-grey-6">ตำแหน่งในสายงาน</span> <span class="text-grey-6">ตำแหน่งในสายงาน</span>
<span class="text-weight-medium text-dark">{{ <span class="text-weight-medium text-dark">{{
store.dataEvaluation.position store.dataEvaluation.position
}}</span> }}</span>
</div>
</div> </div>
</div> <div class="col-2">
<div class="col-2"> <div class="column">
<div class="column"> <span class="text-grey-6">ประเภทตำแหน่ง</span>
<span class="text-grey-6">ประเภทตำแหน่ง</span> <span class="text-weight-medium text-dark">{{
<span class="text-weight-medium text-dark">{{ store.dataEvaluation.posTypeName
store.dataEvaluation.posTypeName }}</span>
}}</span> </div>
</div> </div>
</div> <div class="col-2">
<div class="col-2"> <div class="column">
<div class="column"> <span class="text-grey-6">ระดับตำแหน่ง</span>
<span class="text-grey-6">ระดับตำแหน่ง</span> <span class="text-weight-medium text-dark">{{
<span class="text-weight-medium text-dark">{{ store.dataEvaluation.posLevelName
store.dataEvaluation.posLevelName }}</span>
}}</span> </div>
</div> </div>
</div> <div class="col-2">
<div class="col-2"> <div class="column">
<div class="column"> <span class="text-grey-6">สถานะการประเมิน</span>
<span class="text-grey-6">สถานะการประเมิน</span> <span class="text-weight-medium text-dark">{{
<span class="text-weight-medium text-dark">{{ formProfile.status
formProfile.status }}</span>
}}</span> </div>
</div> </div>
</div> <div class="col-2">
<div class="col-2"> <div class="column">
<div class="column"> <span class="text-grey-6">ผลการประเมิน</span>
<span class="text-grey-6">ผลการประเมิน</span> <span class="text-weight-medium text-dark">{{
<span class="text-weight-medium text-dark">{{ formProfile.result
formProfile.result }}</span>
}}</span> </div>
</div> </div>
</div> <div class="col-2">
<div class="col-2"> <div class="column">
<div class="column"> <span class="text-grey-6">คะแนนประเมิน</span>
<span class="text-grey-6">คะแนนประเมิน</span> <span class="text-weight-medium text-primary">
<span class="text-weight-medium text-primary"> {{
{{ store.dataEvaluation.posExecutiveName == null
store.dataEvaluation.posExecutiveName == null ? (
? ( store.indicatorScoreVal +
store.indicatorScoreVal + store.competencyScoreVal +
store.competencyScoreVal + store.devScoreVal
store.devScoreVal ).toFixed(2)
).toFixed(2) : (
: ( store.excusiveIndicator1ScoreVal +
store.excusiveIndicator1ScoreVal + store.excusiveIndicator2ScoreVal +
store.excusiveIndicator2ScoreVal + store.competencyScoreVal
store.competencyScoreVal ).toFixed(2)
).toFixed(2) }}
}} </span>
</span> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </q-card>
</q-card>
<q-card class="q-mt-md rounded"> <q-card class="q-mt-md rounded">
<TabMain /> <TabMain />
</q-card> </q-card>
</div>
</div> </div>
</div> </div>
</div>
<q-dialog v-model="modalEdit" persistent> <q-dialog v-model="modalEdit" persistent>
<q-card bordered style="width: 50vh"> <q-card bordered style="width: 50vh">

171
src/modules/08_KPI/views/mainEvaluator.vue
View file

@ -213,94 +213,93 @@ onMounted(async () => {
</div> </div>
<div class="col-12"> <div class="col-12">
<q-card bordered class="q-pa-md"> <q-card bordered class="q-pa-md">
<q-toolbar style="padding: 0"> <div class="items-center col-12 row q-col-gutter-sm q-mb-sm">
<div class="row q-gutter-sm"> <datepicker
<datepicker class="col-md-1 col-xs-12"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="store.yearRound" v-model="store.yearRound"
:locale="'th'" :locale="'th'"
autoApply autoApply
year-picker year-picker
:enableTimePicker="false" :enableTimePicker="false"
@update:model-value="fetchRoundOption(true)" @update:model-value="fetchRoundOption(true)"
> >
<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
hide-bottom-space hide-bottom-space
:model-value=" :model-value="
!!store.yearRound ? store.yearRound + 543 : null !!store.yearRound ? store.yearRound + 543 : null
" "
: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>
<q-select
<q-select class="col-md-2 col-xs-12"
v-model="store.formQuery.round" v-model="store.formQuery.round"
outlined outlined
label="รอบการประเมิน" label="รอบการประเมิน"
dense dense
option-label="name" option-label="name"
option-value="id" option-value="id"
:options="roundOp" :options="roundOp"
style="min-width: 200px" emit-value
emit-value map-options
map-options @update:model-value="changRound"
@update:model-value="changRound" />
/>
</div>
<q-space /> <q-space />
<div class="row q-gutter-sm">
<q-input <q-input
outlined class="col-md-2 col-xs-12"
dense outlined
v-model="store.formQuery.keyword" dense
label="ค้นหาผู้ขอรับการประเมิน" v-model="store.formQuery.keyword"
@keydown.enter.prevent="changRound" label="ค้นหาผู้ขอรับการประเมิน"
> @keydown.enter.prevent="changRound"
<template v-slot:append> >
<q-icon <template v-slot:append>
v-if="store.formQuery.keyword !== ''" <q-icon
name="clear" v-if="store.formQuery.keyword !== ''"
class="cursor-pointer" name="clear"
@click="(store.formQuery.keyword = ''), changRound()" class="cursor-pointer"
/> @click="(store.formQuery.keyword = ''), changRound()"
<q-icon v-else name="search" color="grey-5" /> />
</template> <q-icon v-else name="search" color="grey-5" />
</q-input> </template>
<q-select </q-input>
v-model="visibleColumns" <q-select
multiple class="col-md-1 col-xs-12"
outlined v-model="visibleColumns"
dense multiple
options-dense outlined
:display-value="$q.lang.table.columns" dense
emit-value options-dense
map-options :display-value="$q.lang.table.columns"
:options="columns" emit-value
option-value="name" map-options
options-cover :options="columns"
style="min-width: 150px" option-value="name"
/> options-cover
</div> />
</q-toolbar> </div>
<div class="col-12"> <div class="col-12">
<q-card bordered class="q-mt-sm"> <q-card bordered class="q-mt-sm">
<q-tabs <q-tabs

250
src/modules/09_scholarship/views/detail.vue
View file

@ -427,10 +427,10 @@ function fetchDataDetail(id: string) {
dataPerson.citizenId = data.citizenId ? data.citizenId : "-"; dataPerson.citizenId = data.citizenId ? data.citizenId : "-";
dataPerson.name = `${data.prefix}${data.firstName} ${data.lastName}`; dataPerson.name = `${data.prefix}${data.firstName} ${data.lastName}`;
dataPerson.prefix = data.prefix, (dataPerson.prefix = data.prefix),
dataPerson.firstName = data.firstName, (dataPerson.firstName = data.firstName),
dataPerson.lastName = data.lastName, (dataPerson.lastName = data.lastName),
dataPerson.position = data.position ? data.position : "-"; (dataPerson.position = data.position ? data.position : "-");
dataPerson.type = data.posTypeName ? data.posTypeName : "-"; dataPerson.type = data.posTypeName ? data.posTypeName : "-";
dataPerson.level = data.posLevelName ? data.posLevelName : "-"; dataPerson.level = data.posLevelName ? data.posLevelName : "-";
dataPerson.positionSide = data.posExecutive ? data.posExecutive : "-"; dataPerson.positionSide = data.posExecutive ? data.posExecutive : "-";
@ -522,7 +522,7 @@ onMounted(async () => {
</div> </div>
<q-space /> <q-space />
<div v-if="fileList == null" class="col-3"> <div v-if="fileList == null" class="col-xs-5 col-3">
<q-file <q-file
for="inputFiles" for="inputFiles"
class="col-12" class="col-12"
@ -573,39 +573,39 @@ onMounted(async () => {
</div> </div>
<div class="col-12"><q-separator /></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="row col-12 q-col-gutter-md q-pa-md" v-if="isGov">
<div class="col"> <div class="col-xs-12 col-md-6">
<div class="row q-col-gutter-md"> <div class="row q-col-gutter-md">
<div class="col-4 text-grey">เลขประจำตัวประชาชน</div> <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
<div class="col-8 text-weight-medium"> <div class="col-8 text-weight-medium">
{{ dataPerson.citizenId ? dataPerson.citizenId:'-' }} {{ dataPerson.citizenId ? dataPerson.citizenId : "-" }}
</div> </div>
<div class="col-4 text-grey">ชื่อ-นามสกุล</div> <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
<div class="col-8 text-weight-medium"> <div class="col-8 text-weight-medium">
{{ dataPerson.firstName ? dataPerson.name:'-' }} {{ dataPerson.firstName ? dataPerson.name : "-" }}
</div> </div>
<div class="col-4 text-grey">ตำแหน่ง</div> <div class="col-4 text-grey">ตำแหน่ง</div>
<div class="col-8 text-weight-medium"> <div class="col-8 text-weight-medium">
{{ dataPerson.position ? dataPerson.position:'-' }} {{ dataPerson.position ? dataPerson.position : "-" }}
</div> </div>
<div class="col-4 text-grey">ประเภทตำแหน่ง</div> <div class="col-4 text-grey">ประเภทตำแหน่ง</div>
<div class="col-8 text-weight-medium"> <div class="col-8 text-weight-medium">
{{ dataPerson.type ? dataPerson.type:'-' }} {{ dataPerson.type ? dataPerson.type : "-" }}
</div> </div>
</div> </div>
</div> </div>
<div class="col"> <div class="col-xs-12 col-md-6">
<div class="row q-col-gutter-md"> <div class="row q-col-gutter-md">
<div class="col-4 text-grey">ระดับตำแหน่ง</div> <div class="col-4 text-grey">ระดับตำแหน่ง</div>
<div class="col-8 text-weight-medium"> <div class="col-8 text-weight-medium">
{{ dataPerson.level ? dataPerson.level:'-' }} {{ dataPerson.level ? dataPerson.level : "-" }}
</div> </div>
<div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div> <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
<div class="col-8 text-weight-medium"> <div class="col-8 text-weight-medium">
{{ dataPerson.positionSide ? dataPerson.positionSide:'-' }} {{ dataPerson.positionSide ? dataPerson.positionSide : "-" }}
</div> </div>
<div class="col-4 text-grey">หน่วยงานที่สังกัด</div> <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
<div class="col-8 text-weight-medium"> <div class="col-8 text-weight-medium">
{{ dataPerson.org ? dataPerson.org:'-' }} {{ dataPerson.org ? dataPerson.org : "-" }}
</div> </div>
</div> </div>
</div> </div>
@ -618,7 +618,7 @@ onMounted(async () => {
</q-card> </q-card>
<div class="row q-col-gutter-md q-mt-sm"> <div class="row q-col-gutter-md q-mt-sm">
<div class="col-9"> <div class="col-md-9 col-xs-12">
<q-select <q-select
dense dense
readonly readonly
@ -634,7 +634,7 @@ onMounted(async () => {
/> />
</div> </div>
<div <div
class="col-3" class="col-md-3 col-xs-12"
v-if=" v-if="
formBody.scholarshipType !== '' && formBody.scholarshipType !== '' &&
formBody.scholarshipType !== 'EXECUTIVE' && formBody.scholarshipType !== 'EXECUTIVE' &&
@ -662,7 +662,7 @@ onMounted(async () => {
checked-icon="task_alt" checked-icon="task_alt"
unchecked-icon="panorama_fish_eye" unchecked-icon="panorama_fish_eye"
val="INPLAN" val="INPLAN"
label="ในแผนฯ" label="ในแผน ฯ"
dense dense
disable disable
/> />
@ -671,7 +671,7 @@ onMounted(async () => {
checked-icon="task_alt" checked-icon="task_alt"
unchecked-icon="panorama_fish_eye" unchecked-icon="panorama_fish_eye"
val="OUTPLAN" val="OUTPLAN"
label="นอกแผนฯ" label="นอกแผน ฯ"
dense dense
disable disable
class="q-pl-sm" class="q-pl-sm"
@ -679,7 +679,7 @@ onMounted(async () => {
</div> </div>
<div class="row col-12 q-col-gutter-md"> <div class="row col-12 q-col-gutter-md">
<div class="col-3"> <div class="col-xs-12 col-md-3">
<datepicker <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formBody.scholarshipYear" v-model="formBody.scholarshipYear"
@ -722,7 +722,10 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3"> <div
v-if="formBody.scholarshipType !== 'RESEARCH'"
class="col-xs-12 col-md-3"
>
<q-select <q-select
dense dense
outlined outlined
@ -737,7 +740,7 @@ onMounted(async () => {
readonly readonly
/> />
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<q-input <q-input
dense dense
outlined outlined
@ -749,7 +752,7 @@ onMounted(async () => {
reverse-fill-mask reverse-fill-mask
/> />
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<q-checkbox <q-checkbox
keep-color keep-color
disable disable
@ -761,7 +764,7 @@ onMounted(async () => {
</div> </div>
<div class="row col-12 q-col-gutter-md"> <div class="row col-12 q-col-gutter-md">
<div class="col-3"> <div class="col-xs-12 col-md-3">
<q-input <q-input
dense dense
readonly readonly
@ -771,7 +774,7 @@ onMounted(async () => {
label="เลขที่หนังสืออนุมัติ" label="เลขที่หนังสืออนุมัติ"
/> />
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<datepicker <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formBody.bookNoDate" v-model="formBody.bookNoDate"
@ -809,7 +812,7 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<datepicker <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formBody.bookApproveDate" v-model="formBody.bookApproveDate"
@ -847,7 +850,10 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3"> <div
v-if="formBody.scholarshipType !== 'RESEARCH'"
class="col-xs-12 col-md-3"
>
<q-checkbox <q-checkbox
keep-color keep-color
disable disable
@ -873,7 +879,7 @@ onMounted(async () => {
<div class="col-12" v-if="formBody.scholarshipType !== 'EXECUTIVE'"> <div class="col-12" v-if="formBody.scholarshipType !== 'EXECUTIVE'">
<div class="row col-12 q-col-gutter-md"> <div class="row col-12 q-col-gutter-md">
<div class="col-3"> <div class="col-xs-12 col-md-3">
<q-input <q-input
dense dense
readonly readonly
@ -883,7 +889,7 @@ onMounted(async () => {
v-model="formBody.contractNo" v-model="formBody.contractNo"
/> />
</div> </div>
<div class="col-2"> <div class="col-xs-12 col-md-2">
<datepicker <datepicker
readonly readonly
menu-class-name="modalfix" menu-class-name="modalfix"
@ -920,7 +926,10 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3"> <div
v-if="formBody.scholarshipType !== 'RESEARCH'"
class="col-xs-12 col-md-3"
>
<q-input <q-input
dense dense
readonly readonly
@ -930,7 +939,10 @@ onMounted(async () => {
label="เลขที่หนังสือรายงานตัวกลับ" label="เลขที่หนังสือรายงานตัวกลับ"
/> />
</div> </div>
<div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-2"> <div
v-if="formBody.scholarshipType !== 'RESEARCH'"
class="col-xs-12 col-md-2"
>
<datepicker <datepicker
readonly readonly
menu-class-name="modalfix" menu-class-name="modalfix"
@ -968,7 +980,10 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-2"> <div
v-if="formBody.scholarshipType !== 'RESEARCH'"
class="col-xs-12 col-md-2"
>
<datepicker <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formBody.reportBackDate" v-model="formBody.reportBackDate"
@ -1006,49 +1021,60 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-12" > <div class="col-12">
<q-card bordered tyle="border: 1px solid #d6dee1"> <q-card bordered tyle="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md"> <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
ข้อมูลผู้ค้ำประกัน ข้อมูลผู้ค้ำประกัน
</div> </div>
<div class="col-12"><q-separator /></div> <div class="col-12"><q-separator /></div>
<div <div class="row col-12 q-col-gutter-md q-pa-md">
class="row col-12 q-col-gutter-md q-pa-md" <div class="col-xs-12 col-md-6">
>
<div class="col">
<div class="row q-col-gutter-md"> <div class="row q-col-gutter-md">
<div class="col-4 text-grey">เลขประจำตัวประชาชน</div> <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
<div class="col-8 text-weight-medium"> <div class="col-8 text-weight-medium">
{{ dataGuarantor.citizenId ? dataGuarantor.citizenId :'-' }} {{
dataGuarantor.citizenId
? dataGuarantor.citizenId
: "-"
}}
</div> </div>
<div class="col-4 text-grey">ชื่อ-นามสกุล</div> <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
<div class="col-8 text-weight-medium"> <div class="col-8 text-weight-medium">
{{ dataGuarantor.firstName ? dataGuarantor.name:'-' }} {{
dataGuarantor.firstName ? dataGuarantor.name : "-"
}}
</div> </div>
<div class="col-4 text-grey">ตำแหน่ง</div> <div class="col-4 text-grey">ตำแหน่ง</div>
<div class="col-8 text-weight-medium"> <div class="col-8 text-weight-medium">
{{ dataGuarantor.position ? dataGuarantor.position:'-' }} {{
dataGuarantor.position
? dataGuarantor.position
: "-"
}}
</div> </div>
<div class="col-4 text-grey">ประเภท</div> <div class="col-4 text-grey">ประเภท</div>
<div class="col-8 text-weight-medium"> <div class="col-8 text-weight-medium">
{{ dataGuarantor.type ? dataGuarantor.type :'-' }} {{ dataGuarantor.type ? dataGuarantor.type : "-" }}
</div> </div>
</div> </div>
</div> </div>
<div class="col"> <div class="col-xs-12 col-md-6">
<div class="row q-col-gutter-md"> <div class="row q-col-gutter-md">
<div class="col-4 text-grey">ระดับตำแหน่ง</div> <div class="col-4 text-grey">ระดับตำแหน่ง</div>
<div class="col-8 text-weight-medium"> <div class="col-8 text-weight-medium">
{{ dataGuarantor.level ? dataGuarantor.level:'-' }} {{ dataGuarantor.level ? dataGuarantor.level : "-" }}
</div> </div>
<div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div> <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
<div class="col-8 text-weight-medium"> <div class="col-8 text-weight-medium">
{{ dataGuarantor.positionSide ? dataGuarantor.positionSide:'-' }} {{
dataGuarantor.positionSide
? dataGuarantor.positionSide
: "-"
}}
</div> </div>
<div class="col-4 text-grey">หน่วยงานที่สังกัด</div> <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
<div class="col-8 text-weight-medium"> <div class="col-8 text-weight-medium">
{{ dataGuarantor.org ? dataGuarantor.org:'-' }} {{ dataGuarantor.org ? dataGuarantor.org : "-" }}
</div> </div>
</div> </div>
</div> </div>
@ -1062,7 +1088,7 @@ onMounted(async () => {
v-if="formBody.scholarshipType === 'DOMESTICE'" v-if="formBody.scholarshipType === 'DOMESTICE'"
> >
<div class="row q-col-gutter-md"> <div class="row q-col-gutter-md">
<div class="col-3"> <div class="col-xs-12 col-md-3">
<q-input <q-input
dense dense
readonly readonly
@ -1072,7 +1098,7 @@ onMounted(async () => {
v-model="formBody.degreeLevel" v-model="formBody.degreeLevel"
/> />
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<q-input <q-input
dense dense
readonly readonly
@ -1082,7 +1108,7 @@ onMounted(async () => {
v-model="formBody.course" v-model="formBody.course"
/> />
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<q-input <q-input
dense dense
outlined outlined
@ -1092,7 +1118,7 @@ onMounted(async () => {
v-model="formBody.field" v-model="formBody.field"
/> />
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<q-input <q-input
dense dense
outlined outlined
@ -1102,7 +1128,7 @@ onMounted(async () => {
v-model="formBody.faculty" v-model="formBody.faculty"
/> />
</div> </div>
<div class="col-6"> <div class="col-xs-12 col-md-6">
<q-input <q-input
dense dense
outlined outlined
@ -1112,7 +1138,7 @@ onMounted(async () => {
v-model="formBody.educationalInstitution" v-model="formBody.educationalInstitution"
/> />
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<datepicker <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formBody.startDate" v-model="formBody.startDate"
@ -1152,7 +1178,7 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<datepicker <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formBody.endDate" v-model="formBody.endDate"
@ -1192,7 +1218,7 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-6"> <div class="col-xs-12 col-md-6">
<q-input <q-input
dense dense
readonly readonly
@ -1202,7 +1228,7 @@ onMounted(async () => {
v-model="formBody.studyPlace" v-model="formBody.studyPlace"
/> />
</div> </div>
<div class="col-6"> <div class="col-xs-12 col-md-6">
<q-input <q-input
dense dense
readonly readonly
@ -1212,7 +1238,7 @@ onMounted(async () => {
v-model="formBody.studyTopic" v-model="formBody.studyTopic"
/> />
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<datepicker <datepicker
readonly readonly
menu-class-name="modalfix" menu-class-name="modalfix"
@ -1252,7 +1278,7 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<datepicker <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
readonly readonly
@ -1292,8 +1318,8 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-6"></div> <div class="col-6" v-if="!$q.screen.gt.xs"></div>
<div class="col-6"> <div class="col-xs-12 col-md-6">
<q-input <q-input
dense dense
readonly readonly
@ -1303,7 +1329,7 @@ onMounted(async () => {
v-model="formBody.studyCountry" v-model="formBody.studyCountry"
/> />
</div> </div>
<div class="col-6"> <div class="col-xs-12 col-md-6">
<q-input <q-input
dense dense
readonly readonly
@ -1313,7 +1339,7 @@ onMounted(async () => {
v-model="formBody.studyAbroadTopic" v-model="formBody.studyAbroadTopic"
/> />
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<datepicker <datepicker
readonly readonly
menu-class-name="modalfix" menu-class-name="modalfix"
@ -1355,7 +1381,7 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<datepicker <datepicker
readonly readonly
menu-class-name="modalfix" menu-class-name="modalfix"
@ -1401,7 +1427,7 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<q-input <q-input
dense dense
readonly readonly
@ -1420,7 +1446,7 @@ onMounted(async () => {
v-else-if="formBody.scholarshipType === 'NOABROAD'" v-else-if="formBody.scholarshipType === 'NOABROAD'"
> >
<div class="row q-col-gutter-md"> <div class="row q-col-gutter-md">
<div class="col-6"> <div class="col-xs-12 col-md-6">
<q-input <q-input
dense dense
outlined outlined
@ -1430,7 +1456,7 @@ onMounted(async () => {
v-model="formBody.course" v-model="formBody.course"
/> />
</div> </div>
<div class="col-6"> <div class="col-xs-12 col-md-6">
<q-input <q-input
dense dense
readonly readonly
@ -1440,7 +1466,7 @@ onMounted(async () => {
v-model="formBody.field" v-model="formBody.field"
/> />
</div> </div>
<div class="col-6"> <div class="col-xs-12 col-md-6">
<q-input <q-input
readonly readonly
dense dense
@ -1450,7 +1476,7 @@ onMounted(async () => {
v-model="formBody.educationalInstitution" v-model="formBody.educationalInstitution"
/> />
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<datepicker <datepicker
readonly readonly
menu-class-name="modalfix" menu-class-name="modalfix"
@ -1490,7 +1516,7 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<datepicker <datepicker
readonly readonly
menu-class-name="modalfix" menu-class-name="modalfix"
@ -1530,7 +1556,7 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-6"> <div class="col-xs-12 col-md-6">
<q-input <q-input
dense dense
readonly readonly
@ -1540,7 +1566,7 @@ onMounted(async () => {
v-model="formBody.studyPlace" v-model="formBody.studyPlace"
/> />
</div> </div>
<div class="col-6"> <div class="col-xs-12 col-md-6">
<q-input <q-input
dense dense
readonly readonly
@ -1550,7 +1576,7 @@ onMounted(async () => {
v-model="formBody.studyTopic" v-model="formBody.studyTopic"
/> />
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<datepicker <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formBody.studyStartDate" v-model="formBody.studyStartDate"
@ -1590,7 +1616,7 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<datepicker <datepicker
readonly readonly
menu-class-name="modalfix" menu-class-name="modalfix"
@ -1636,7 +1662,7 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<q-input <q-input
dense dense
readonly readonly
@ -1655,7 +1681,7 @@ onMounted(async () => {
v-else-if="formBody.scholarshipType === 'ABROAD'" v-else-if="formBody.scholarshipType === 'ABROAD'"
> >
<div class="row q-col-gutter-md"> <div class="row q-col-gutter-md">
<div class="col-6"> <div class="col-xs-12 col-md-6">
<q-input <q-input
dense dense
readonly readonly
@ -1665,7 +1691,7 @@ onMounted(async () => {
v-model="formBody.course" v-model="formBody.course"
/> />
</div> </div>
<div class="col-6"> <div class="col-xs-12 col-md-6">
<q-input <q-input
dense dense
outlined outlined
@ -1675,7 +1701,7 @@ onMounted(async () => {
v-model="formBody.field" v-model="formBody.field"
/> />
</div> </div>
<div class="col-6"> <div class="col-xs-12 col-md-6">
<q-input <q-input
dense dense
readonly readonly
@ -1685,7 +1711,7 @@ onMounted(async () => {
v-model="formBody.educationalInstitution" v-model="formBody.educationalInstitution"
/> />
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<datepicker <datepicker
readonly readonly
menu-class-name="modalfix" menu-class-name="modalfix"
@ -1725,7 +1751,7 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<datepicker <datepicker
readonly readonly
menu-class-name="modalfix" menu-class-name="modalfix"
@ -1765,7 +1791,7 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-6"> <div class="col-xs-12 col-md-6">
<q-input <q-input
dense dense
readonly readonly
@ -1775,7 +1801,7 @@ onMounted(async () => {
v-model="formBody.studyPlace" v-model="formBody.studyPlace"
/> />
</div> </div>
<div class="col-6"> <div class="col-xs-12 col-md-6">
<q-input <q-input
dense dense
readonly readonly
@ -1785,7 +1811,7 @@ onMounted(async () => {
v-model="formBody.studyTopic" v-model="formBody.studyTopic"
/> />
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<datepicker <datepicker
readonly readonly
menu-class-name="modalfix" menu-class-name="modalfix"
@ -1825,7 +1851,7 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<datepicker <datepicker
readonly readonly
menu-class-name="modalfix" menu-class-name="modalfix"
@ -1872,8 +1898,8 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-6"></div> <div class="col-6" v-if="!$q.screen.gt.xs"></div>
<div class="col-6"> <div class="col-xs-12 col-md-6">
<q-input <q-input
dense dense
readonly readonly
@ -1883,7 +1909,7 @@ onMounted(async () => {
v-model="formBody.studyCountry" v-model="formBody.studyCountry"
/> />
</div> </div>
<div class="col-6"> <div class="col-xs-12 col-md-6">
<q-input <q-input
dense dense
readonly readonly
@ -1893,7 +1919,7 @@ onMounted(async () => {
v-model="formBody.studyAbroadTopic" v-model="formBody.studyAbroadTopic"
/> />
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<datepicker <datepicker
readonly readonly
menu-class-name="modalfix" menu-class-name="modalfix"
@ -1935,7 +1961,7 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<datepicker <datepicker
readonly readonly
menu-class-name="modalfix" menu-class-name="modalfix"
@ -1981,7 +2007,7 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<q-input <q-input
readonly readonly
dense dense
@ -2000,7 +2026,7 @@ onMounted(async () => {
v-else-if="formBody.scholarshipType === 'RESEARCH'" v-else-if="formBody.scholarshipType === 'RESEARCH'"
> >
<div class="row q-col-gutter-md"> <div class="row q-col-gutter-md">
<div class="col-3"> <div class="col-xs-12 col-md-3">
<q-select <q-select
dense dense
readonly readonly
@ -2018,7 +2044,7 @@ onMounted(async () => {
/> />
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<q-input <q-input
dense dense
readonly readonly
@ -2029,7 +2055,7 @@ onMounted(async () => {
/> />
</div> </div>
<div class="col-6"> <div class="col-xs-12 col-md-6">
<q-input <q-input
dense dense
readonly readonly
@ -2040,7 +2066,7 @@ onMounted(async () => {
/> />
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<q-input <q-input
dense dense
readonly readonly
@ -2051,7 +2077,7 @@ onMounted(async () => {
/> />
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<q-input <q-input
dense dense
readonly readonly
@ -2062,7 +2088,7 @@ onMounted(async () => {
/> />
</div> </div>
<div class="col-6"> <div class="col-xs-12 col-md-6">
<q-input <q-input
readonly readonly
dense dense
@ -2073,7 +2099,7 @@ onMounted(async () => {
/> />
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<datepicker <datepicker
readonly readonly
menu-class-name="modalfix" menu-class-name="modalfix"
@ -2113,7 +2139,8 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-3">
<div class="col-xs-12 col-md-3">
<datepicker <datepicker
readonly readonly
menu-class-name="modalfix" menu-class-name="modalfix"
@ -2153,7 +2180,8 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-6">
<div class="col-xs-12 col-md-6">
<q-input <q-input
dense dense
readonly readonly
@ -2174,7 +2202,7 @@ onMounted(async () => {
v-else-if="formBody.scholarshipType === 'EXECUTIVE'" v-else-if="formBody.scholarshipType === 'EXECUTIVE'"
> >
<div class="row q-col-gutter-md"> <div class="row q-col-gutter-md">
<div class="col-6"> <div class="col-xs-12 col-md-md-6">
<q-input <q-input
readonly readonly
dense dense
@ -2184,7 +2212,7 @@ onMounted(async () => {
v-model="formBody.course" v-model="formBody.course"
/> />
</div> </div>
<div class="col-6"> <div class="col-xs-12 col-md-md-6">
<q-input <q-input
dense dense
readonly readonly
@ -2194,7 +2222,7 @@ onMounted(async () => {
v-model="formBody.educationalInstitution" v-model="formBody.educationalInstitution"
/> />
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-md-3">
<datepicker <datepicker
readonly readonly
menu-class-name="modalfix" menu-class-name="modalfix"
@ -2235,7 +2263,7 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-md-3">
<datepicker <datepicker
readonly readonly
menu-class-name="modalfix" menu-class-name="modalfix"
@ -2273,8 +2301,8 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-6"></div> <div class="col-6" v-if="!$q.screen.gt.xs"></div>
<div class="col-6"> <div class="col-xs-12 col-md-6">
<q-input <q-input
dense dense
readonly readonly
@ -2284,7 +2312,7 @@ onMounted(async () => {
v-model="formBody.studyPlace" v-model="formBody.studyPlace"
/> />
</div> </div>
<div class="col-6"> <div class="col-xs-12 col-md-6">
<q-input <q-input
dense dense
readonly readonly
@ -2294,7 +2322,7 @@ onMounted(async () => {
v-model="formBody.studyTopic" v-model="formBody.studyTopic"
/> />
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<datepicker <datepicker
readonly readonly
menu-class-name="modalfix" menu-class-name="modalfix"
@ -2334,7 +2362,7 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<datepicker <datepicker
readonly readonly
menu-class-name="modalfix" menu-class-name="modalfix"
@ -2380,8 +2408,8 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-6"></div> <div class="col-6" v-if="!$q.screen.gt.xs"></div>
<div class="col-6"> <div class="col-xs-12 col-md-6">
<q-input <q-input
dense dense
readonly readonly
@ -2391,7 +2419,7 @@ onMounted(async () => {
v-model="formBody.studyCountry" v-model="formBody.studyCountry"
/> />
</div> </div>
<div class="col-6"> <div class="col-xs-12 col-md-6">
<q-input <q-input
dense dense
outlined outlined
@ -2401,7 +2429,7 @@ onMounted(async () => {
v-model="formBody.studyAbroadTopic" v-model="formBody.studyAbroadTopic"
/> />
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<datepicker <datepicker
readonly readonly
menu-class-name="modalfix" menu-class-name="modalfix"
@ -2441,7 +2469,7 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-3"> <div class="ccol-xs-12 ol-md-3">
<datepicker <datepicker
readonly readonly
menu-class-name="modalfix" menu-class-name="modalfix"
@ -2487,7 +2515,7 @@ onMounted(async () => {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<q-input <q-input
readonly readonly
dense dense

239
src/modules/09_scholarship/views/main.vue
View file

@ -168,105 +168,85 @@ onMounted(async () => {
</div> </div>
<div class="col-12"> <div class="col-12">
<q-card bordered class="q-pa-md"> <q-card bordered class="q-pa-md">
<q-toolbar style="padding: 0"> <div class="items-center col-12 row q-col-gutter-sm q-mb-sm">
<div class="row q-gutter-sm"> <datepicker
<datepicker class="col-xs-12 col-md-1"
style="width: 150px" menu-class-name="modalfix"
menu-class-name="modalfix" v-model="year"
v-model="year" :locale="'th'"
:locale="'th'" autoApply
autoApply year-picker
year-picker :enableTimePicker="false"
:enableTimePicker="false" @update:model-value="getData()"
@update:model-value="getData()" >
> <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 :model-value="year === 0 ? 'ทั้งหมด' : Number(year) + 543"
:model-value="year === 0 ? 'ทั้งหมด' : Number(year) + 543" :label="`${'ปีงบประมาณ'}`"
:label="`${'ปีงบประมาณ'}`" >
> <template v-if="year" v-slot:append>
<template v-if="year" v-slot:append> <q-icon
<q-icon name="cancel"
name="cancel" @click.stop.prevent="(year = 0), getData()"
@click.stop.prevent="(year = 0), getData()" class="cursor-pointer"
class="cursor-pointer" />
/> </template>
</template> <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> <q-select
<q-select dense
dense outlined
outlined v-model="type"
v-model="type" :options="scholarshipTypeOp"
:options="scholarshipTypeOp" emit-value
emit-value map-options
map-options option-value="id"
option-value="id" option-label="name"
option-label="name" label="เลือกประเภททุน"
label="เลือกประเภททุน" @update:model-value="getData()"
@update:model-value="getData()" class="select_ellipsis col-xs-12 col-md-2"
style="width: 350px" />
/>
<!-- <q-btn
flat
round
color="primary"
icon="add"
@click="router.push(`/KPI/add`)"
>
<q-tooltip> เพิ่มข้อมูล </q-tooltip>
</q-btn> -->
</div>
<q-space /> <q-space />
<div class="row q-gutter-sm">
<!-- <q-input <q-select
outlined v-model="visibleColumns"
dense multiple
v-model="filterKeyword" outlined
label="ค้นหา" dense
></q-input> --> options-dense
<q-select :display-value="$q.lang.table.columns"
v-model="visibleColumns" emit-value
multiple map-options
outlined :options="columns"
dense option-value="name"
options-dense options-cover
:display-value="$q.lang.table.columns" class="col-xs-12 col-md-1"
emit-value />
map-options </div>
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
/>
</div>
</q-toolbar>
<div> <div>
<q-table <d-table
flat flat
bordered bordered
dense dense
row-key="id" row-key="id"
class="custom-table2"
style="max-height: 80vh"
:rows="rows" :rows="rows"
:columns="columns" :columns="columns"
:visible-columns="visibleColumns" :visible-columns="visibleColumns"
@ -318,56 +298,39 @@ onMounted(async () => {
</q-td> </q-td>
</q-tr> </q-tr>
</template> </template>
</q-table>
<template #item="props">
<div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
<q-card bordered flat>
<q-list @click="onEdit(props.row.id)">
<q-item
v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
:key="col.name"
>
<q-item-section>
<q-item-label caption>{{ col.label }}</q-item-label>
<q-item-label v-if="col.name === 'scholarshipYear'">
{{ col.value ? col.value + 543 : "-" }}
</q-item-label>
<q-item-label
v-else-if="col.name === 'scholarshipType'"
>
{{ col.value ? convertType(col.value) : "-" }}
</q-item-label>
<q-item-label v-else>{{ col.value }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
</d-table>
</div> </div>
</q-card> </q-card>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss"></style>
.icon-color {
color: #4154b3;
}
.custom-table2 {
max-height: 64vh;
.q-table tr:nth-child(odd) td {
background: white;
}
.q-table tr:nth-child(even) td {
background: #f8f8f8;
}
.q-table thead tr {
background: #ecebeb;
}
.q-table thead tr th {
position: sticky;
}
.q-table td:nth-of-type(2) {
z-index: 3 !important;
}
.q-table th:nth-of-type(2),
.q-table td:nth-of-type(2) {
position: sticky;
left: 0;
z-index: 1;
}
/* this will be the loading indicator */
.q-table thead tr:last-child th {
/* height of all previous header rows */
top: 48px;
}
.q-table thead tr:first-child th {
top: 0;
}
}
</style>

66
src/modules/10_registry/router.ts Normal file
View file

@ -0,0 +1,66 @@
// registry
const registryPage = () => import("@/modules/10_registry/views/main.vue");
const registryInformation = () => import("@/modules/10_registry/tabs/01_information.vue");
const registryGovernment = () => import("@/modules/10_registry/tabs/02_government.vue");
const registrySalary = () => import("@/modules/10_registry/tabs/03_salary.vue");
const registryInsignia = () => import("@/modules/10_registry/tabs/04_insignia.vue");
const registryOther = () => import("@/modules/10_registry/tabs/05_other.vue");
export default [
{
path: "/registry",
name: "registryMain",
component: registryPage,
meta: {
Auth: true,
Key: [10],
},
},
{
path: "/registry/information",
name: "registryInformation",
component: registryInformation,
meta: {
Auth: true,
Key: [10],
},
},
{
path: "/registry/government",
name: "registryGovernment",
component: registryGovernment,
meta: {
Auth: true,
Key: [10],
},
},
{
path: "/registry/salary",
name: "registrySalary",
component: registrySalary,
meta: {
Auth: true,
Key: [10],
},
},
{
path: "/registry/insignia",
name: "registryInsignia",
component: registryInsignia,
meta: {
Auth: true,
Key: [10],
},
},
{
path: "/registry/other",
name: "registryOther",
component: registryOther,
meta: {
Auth: true,
Key: [10],
},
},
];

615
src/modules/10_registry/tabs/01_information.vue Normal file
View file

@ -0,0 +1,615 @@
<script setup lang="ts">
import { useQuasar, type QTableProps } from "quasar";
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
const $q = useQuasar();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError } = mixin;
const router = useRouter();
const rowsHistoryName = ref<any[]>([]);
const filter = ref<string>("");
const typeChangeName = (val: string) => {
switch (val) {
case "prefix":
return "เปลี่ยนคำนำหน้าชื่อ";
case "firstName":
return "เปลี่ยนชื่อ";
case "lastName":
return "เปลี่ยนนามสกุล";
case "all":
return "เปลี่ยนคำนำหน้าชื่อ, ชื่อ-นามสกุล";
case "firstNameLastName":
return "เปลี่ยนชื่อ-นามสกุล";
case "prefixAndlastName":
return "เปลี่ยนคำนำหน้าชื่อ และนามสกุล";
default:
return "-";
}
};
const formDataInformation = reactive<any>({
citizenId: "", //เลขบัตรประจำตัวประชาชน
name: "", //ชื่อ
birthDate: "", //วันเกิด
gender: "", //เพศ
relationship: "", //สถานภาพ
nationality: "", //สัญชาติ
ethnicity: "", //เชื้อชาติ
religion: "", //ศาสนา
bloodGroup: "", //หมู่เลือด
phone: "", //เบอร์โทร
});
const formDataAddress = reactive<any>({
registrationAddress: "", //ที่อยู่ตามทะเบียนบ้าน
registrationProvince: "", //จังหวัด
registrationDistrict: "", //เขต / อำเภอ
registrationSubDistrict: "", //แขวง / ตำบล
registrationZipCode: "", //รหัสไปรษณีย์
currentAddress: "", //ที่อยู่ปัจจุบัน
currentProvince: "", //จังหวัด
currentDistrict: "", //เขต / อำเภอ
currentSubDistrict: "", //แขวง / ตำบล
currentZipCode: "", //รหัสไปรษณีย์
});
const visibleColumnsHistoryName = ref<string[]>([
"no",
"prefix",
"firstName",
"lastName",
"status",
]);
const columnsHistoryName = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "prefix",
align: "left",
label: "คำนำหน้าชื่อ",
sortable: true,
field: "prefix",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "firstName",
align: "left",
label: "ชื่อ",
sortable: true,
field: "firstName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "lastName",
align: "left",
label: "นามสกุล",
sortable: true,
field: "lastName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "status",
align: "left",
label: "สถานะการเปลี่ยนชื่อ",
sortable: true,
field: "status",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
function getData() {
showLoader()
http
.get(config.API.dataUserInformation)
.then((res)=>{
console.log(res.data)
}).catch((e)=>{
messageError($q,e)
}).finally(()=>{
hideLoader()
})
}
onMounted(() => {
getData()
formDataInformation.citizenId = "4016500103241";
formDataInformation.name = "นางกัณฐิมา กาฬสินธุ์";
formDataInformation.birthDate = "24 พ.ย. 2511";
formDataInformation.gender = "หญิง";
formDataInformation.relationship = "";
formDataInformation.nationality = "";
formDataInformation.ethnicity = "";
formDataInformation.religion = "";
formDataInformation.bloodGroup = "";
formDataInformation.phone = "";
rowsHistoryName.value = [
{
prefix: "นางสาว",
firstName: "อรัญญาวินัย",
lastName: "พรไชยะสาร",
status: "all",
},
{
prefix: "นางสาว1",
firstName: "อรัญญาวินัย1",
lastName: "พรไชยะสาร1",
status: "prefix",
},
];
});
</script>
<template>
<div v-if="!$q.screen.gt.xs" 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.go(-1)"
/>
<div>ข้อมูลส่วนตัว</div>
</div>
</div>
<div :class="`row q-my-sm ${$q.screen.gt.xs ? '' : 'mobileClass'}`">
<!-- ประวัติส่วนตัว -->
<div class="col-12">
<q-toolbar class="q-px-none">
<span class="text-blue-6 text-weight-bold text-body1"
>ประวัติส่วนตัว</span
>
<q-space />
<q-btn icon="mdi-history" color="info" flat dense round size="14px">
<q-tooltip>ประวัติแก้ไขข้อมูลส่วนตัว</q-tooltip>
</q-btn>
</q-toolbar>
<q-card bordered class="bg-grey-1 q-pa-md">
<div class="row">
<div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">
เลขบัตรประจำตัวประชาชน
</div>
<div class="col-7">
{{
formDataInformation.citizenId
? formDataInformation.citizenId
: "-"
}}
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">
ชื่อ - สกุล
</div>
<div class="col-7">
{{ formDataInformation.name ? formDataInformation.name : "-" }}
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">
วัน/เดือน/ปีเกิด
</div>
<div class="col-7">
{{
formDataInformation.birthDate
? formDataInformation.birthDate
: "-"
}}
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">เพศ</div>
<div class="col-7">
{{
formDataInformation.gender ? formDataInformation.gender : "-"
}}
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">สถานภาพ</div>
<div class="col-7">
{{
formDataInformation.relationship
? formDataInformation.relationship
: "-"
}}
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">สัญชาติ</div>
<div class="col-7">
{{
formDataInformation.nationality
? formDataInformation.nationality
: "-"
}}
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">เชื้อชาติ</div>
<div class="col-7">
{{
formDataInformation.ethnicity
? formDataInformation.ethnicity
: "-"
}}
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">ศาสนา</div>
<div class="col-7">
{{
formDataInformation.religion
? formDataInformation.religion
: "-"
}}
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">หมู่เลือด</div>
<div class="col-7">
{{
formDataInformation.bloodGroup
? formDataInformation.bloodGroup
: "-"
}}
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">เบอร์โทร</div>
<div class="col-7">
{{
formDataInformation.phone ? formDataInformation.phone : "-"
}}
</div>
</div>
</div>
</div>
</q-card>
</div>
<!-- ประวัติการเปลี่ยนชื่อ-นามสกุล -->
<div v-if="$q.screen.gt.xs" class="col-12">
<q-toolbar class="q-px-none q-mt-md">
<span class="text-blue-6 text-weight-bold text-body1"
>ประวัติการเปลี่ยนชื่อ-นามสกุล</span
>
<q-space />
<q-input
v-if="$q.screen.gt.xs"
class="inputgreen"
outlined
dense
v-model="filter"
label="ค้นหา"
style="max-width: 200px"
>
<template v-slot:append>
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="filter = ''"
/>
<q-icon
v-else
name="search"
class="cursor-pointer"
@click="filter = ''"
/>
</template>
</q-input>
<q-select
v-if="$q.screen.gt.xs"
class="q-ml-sm"
dense
multiple
outlined
emit-value
map-options
options-cover
options-dense
option-value="name"
style="min-width: 150px"
v-model="visibleColumnsHistoryName"
:options="columnsHistoryName"
:display-value="$q.lang.table.columns"
/>
</q-toolbar>
<d-table
flat
dense
bordered
virtual-scroll
:rows="rowsHistoryName"
:columns="columnsHistoryName"
:filter="filter"
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumnsHistoryName"
:virtual-scroll-sticky-size-start="48"
>
<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-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="(col, index) in props.cols" :key="col.name">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'status'">
{{ props.row.status ? typeChangeName(props.row.status) : "-" }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
>
<q-tooltip>ดูประวัติการเปลี่ยนชื่อ-นามสกุล</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
</d-table>
</div>
<div v-else class="col-12">
<q-toolbar class="q-px-none q-mt-md">
<span class="text-blue-6 text-weight-bold text-body1"
>ประวัติการเปลี่ยนชื่อ-นามสกุล</span
>
</q-toolbar>
<q-list bordered style="border-radius: 8px">
<div
v-for="(item, index) in rowsHistoryName"
:class="`${index % 2 !== 0 ? 'bg-grey-1' : ''}`"
>
<q-item class="q-pt-md relative-position" dense>
<q-btn
icon="mdi-history"
color="info"
flat
dense
round
size="14px"
class="absolute-top-right"
>
<q-tooltip>ประวัติแก้ไขข้อมูลส่วนตัว</q-tooltip>
</q-btn>
<q-item-section class="text-grey-6 text-weight-medium"
>คำนำหน้า</q-item-section
>
<q-item-section>{{
item.prefix ? item.prefix : "-"
}}</q-item-section>
</q-item>
<q-item class="q-py-none" dense>
<q-item-section class="text-grey-6 text-weight-medium"
>ชื่อ</q-item-section
>
<q-item-section>{{
item.firstName ? item.firstName : "-"
}}</q-item-section>
</q-item>
<q-item class="q-py-none" dense>
<q-item-section class="text-grey-6 text-weight-medium"
>นามสกุล</q-item-section
>
<q-item-section>{{
item.lastName ? item.lastName : "-"
}}</q-item-section>
</q-item>
<q-item class="q-py-none q-pb-sm" dense>
<q-item-section class="text-grey-6 text-weight-medium"
>สถานะ</q-item-section
>
<q-item-section>{{
item.status ? typeChangeName(item.status) : "-"
}}</q-item-section>
</q-item>
<q-separator v-if="index < rowsHistoryName.length - 1" />
</div>
</q-list>
</div>
<!-- ข้อมูลที่อยู่ -->
<div class="col-12">
<q-toolbar class="q-px-none">
<span class="text-blue-6 text-weight-bold text-body1"
>ข้อมูลที่อยู่</span
>
<q-space />
<q-btn icon="mdi-history" color="info" flat dense round size="14px">
<q-tooltip>ประวัติข้อมูลที่อยู่</q-tooltip>
</q-btn>
</q-toolbar>
<q-card bordered class="bg-grey-1 q-pa-md">
<div class="row">
<div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">
เลขบัตรประจำตัวประชาชน
</div>
<div class="col-7">
{{
formDataAddress.registrationAddress
? formDataAddress.registrationAddress
: "-"
}}
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">
ชื่อ - สกุล
</div>
<div class="col-7">
{{
formDataAddress.registrationProvince
? formDataAddress.registrationProvince
: "-"
}}
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">
วัน/เดือน/ปีเกิด
</div>
<div class="col-7">
{{
formDataAddress.registrationDistrict
? formDataAddress.registrationDistrict
: "-"
}}
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">เพศ</div>
<div class="col-7">
{{
formDataAddress.registrationSubDistrict
? formDataAddress.registrationSubDistrict
: "-"
}}
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">สถานภาพ</div>
<div class="col-7">
{{
formDataAddress.registrationZipCode
? formDataAddress.registrationZipCode
: "-"
}}
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">สัญชาติ</div>
<div class="col-7">
{{
formDataAddress.currentAddress
? formDataAddress.currentAddress
: "-"
}}
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">เชื้อชาติ</div>
<div class="col-7">
{{
formDataAddress.currentProvince
? formDataAddress.currentProvince
: "-"
}}
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">ศาสนา</div>
<div class="col-7">
{{
formDataAddress.currentDistrict
? formDataAddress.currentDistrict
: "-"
}}
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">หมู่เลือด</div>
<div class="col-7">
{{
formDataAddress.currentSubDistrict
? formDataAddress.currentSubDistrict
: "-"
}}
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">เบอร์โทร</div>
<div class="col-7">
{{
formDataAddress.currentZipCode
? formDataAddress.currentZipCode
: "-"
}}
</div>
</div>
</div>
</div>
</q-card>
</div>
</div>
</template>
<style>
.mobileClass {
background-color: #fff;
border-radius: 10px;
padding: 10px;
}
</style>

3
src/modules/10_registry/tabs/02_government.vue Normal file
View file

@ -0,0 +1,3 @@
<template>
<div>government</div>
</template>

3
src/modules/10_registry/tabs/03_salary.vue Normal file
View file

@ -0,0 +1,3 @@
<template>
<div>salary</div>
</template>

3
src/modules/10_registry/tabs/04_insignia.vue Normal file
View file

@ -0,0 +1,3 @@
<template>
<div>insignia</div>
</template>

3
src/modules/10_registry/tabs/05_other.vue Normal file
View file

@ -0,0 +1,3 @@
<template>
<div>other</div>
</template>

232
src/modules/10_registry/views/main.vue Normal file
View file

@ -0,0 +1,232 @@
<script setup lang="ts">
import avatar from "@/assets/avatar_user.jpg";
import { ref, reactive } from "vue";
//หน้าเมนู
import InformationPage from "@/modules/10_registry/tabs/01_information.vue";
import GovernmentPage from "@/modules/10_registry/tabs/02_government.vue";
import SalaryPage from "@/modules/10_registry/tabs/03_salary.vue";
import InsigniaPage from "@/modules/10_registry/tabs/04_insignia.vue";
import OtherPage from "@/modules/10_registry/tabs/05_other.vue";
import { useRouter } from "vue-router";
const router = useRouter();
const tab = ref<string>("information");
const formData = reactive<any>({
prefix: "นาง",
firstName: "กัณฐิมา",
lastName: "กาฬสินธุ์",
position: "นักบริหาร",
posName: "หัวหน้าสำนักงาน",
posType: "บริหาร",
posLevel: "ชำนาญการพิเศษ",
});
const sizeImg = ref<string>("");
function onResize(size: any) {
const width = size.width > 100 ? 100 : size.width;
sizeImg.value = `${width}px`;
}
function onMobile(type: string) {
console.log(1111);
router.push(`/registry/${type}`);
}
</script>
<template>
<div class="row justify-center">
<div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle text-white col-12 row items-center">
ข้อมูลทะเบียนประวัติ
</div>
<div v-if="$q.screen.gt.xs" class="row q-col-gutter-md">
<div class="col-3">
<q-card bordered>
<q-resize-observer @resize="onResize" />
<q-card-section>
<div class="text-center">
<q-avatar :size="sizeImg">
<img
:src="avatar"
style="border-radius: 50%; object-fit: cover"
/>
</q-avatar>
</div>
<div class="column text-center q-mt-md q-mb-lg">
<span class="text-teal text-weight-medium">{{
formData.firstName
? `${formData.prefix}${formData.firstName} ${formData.lastName}`
: "-"
}}</span>
<span class="text-grey text-weight-medium">{{
formData.position ? `${formData.position}` : "-"
}}</span>
</div>
</q-card-section>
<q-list separator class="q-mt-md">
<q-separator />
<q-item>
<q-item-section class="text-grey-6"
>ตำแหน่งในสายงาน</q-item-section
>
<q-item-section>{{ formData.posName }}</q-item-section>
</q-item>
<q-item>
<q-item-section class="text-grey-6">ประเภท</q-item-section>
<q-item-section>{{ formData.posType }}</q-item-section>
</q-item>
<q-item>
<q-item-section class="text-grey-6"
>ระดับชั้นงาน</q-item-section
>
<q-item-section>{{ formData.posLevel }}</q-item-section>
</q-item>
</q-list>
<q-card-section class="q-gutter-y-sm">
<q-btn class="full-width" unelevated color="blue-6"
><q-icon left size="2em" name="mdi-file-download-outline" />
<div>ดาวน์โหลดประวัติแบบย่อ</div></q-btn
>
<q-btn class="full-width" unelevated color="primary"
><q-icon left size="2em" name="mdi-folder-download-outline" />
<div>ดาวน์โหลด ก.พ.7/ก.ก. 1</div></q-btn
>
</q-card-section>
</q-card>
</div>
<div class="col-9">
<q-card bordered>
<q-tabs
v-model="tab"
inline-label
active-color="blue-6"
class="bg-grey-1 text-grey-6 shadow-2"
align="left"
>
<q-tab name="information" label="ข้อมูลส่วนตัว" class="bg-active"/>
<q-tab name="government" label="ข้อมูลราชการ" />
<q-tab name="salary" label="ข้อมูลเงินเดือน/ค่าจ้าง" />
<q-tab name="insignia" label="ข้อมูลเครื่องราชฯ" />
<q-tab name="other" label="ข้อมูลอื่นๆ" />
</q-tabs>
<q-separator />
<!-- รายการเเต่ละหน้า -->
<q-tab-panels v-model="tab" animated>
<q-tab-panel name="information">
<InformationPage />
</q-tab-panel>
<q-tab-panel name="government">
<GovernmentPage />
</q-tab-panel>
<q-tab-panel name="salary">
<SalaryPage />
</q-tab-panel>
<q-tab-panel name="insignia">
<InsigniaPage />
</q-tab-panel>
<q-tab-panel name="other">
<OtherPage />
</q-tab-panel>
</q-tab-panels>
</q-card>
</div>
</div>
<div v-else>
<q-card bordered>
<q-resize-observer @resize="onResize" />
<q-card-section>
<div class="text-center">
<q-avatar :size="sizeImg">
<img
:src="avatar"
style="border-radius: 50%; object-fit: cover"
/>
</q-avatar>
</div>
<div class="column text-center q-mt-md q-mb-lg">
<span class="text-teal text-weight-medium">{{
formData.firstName
? `${formData.prefix}${formData.firstName} ${formData.lastName}`
: "-"
}}</span>
<span class="text-grey text-weight-medium">{{
formData.position ? `${formData.position}` : "-"
}}</span>
</div>
<div class="row justify-center q-gutter-x-lg">
<q-btn
color="light-blue-1"
dense
round
unelevated
text-color="light-blue-5"
size="14px"
icon="mdi-file-download-outline"
></q-btn>
<q-btn
color="teal-1"
text-color="primary"
dense
unelevated
round
size="14px"
icon="mdi-folder-download-outline"
></q-btn>
<q-btn
color="red-1"
text-color="red-12"
unelevated
dense
round
size="14px"
icon="mdi-logout"
></q-btn>
</div>
</q-card-section>
<q-list separator class="q-mt-md">
<q-item clickable v-ripple @click="onMobile('information')">
<q-item-section>ข้อมูลส่วนตัว</q-item-section>
<q-item-section avatar>
<q-avatar text-color="info" icon="mdi-chevron-right" />
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="onMobile('government')">
<q-item-section>ข้อมูลราชการ</q-item-section>
<q-item-section avatar>
<q-avatar text-color="info" icon="mdi-chevron-right" />
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="onMobile('salary')">
<q-item-section>ข้อมูลเงินเดือน/ค่าจ้าง</q-item-section>
<q-item-section avatar>
<q-avatar text-color="info" icon="mdi-chevron-right" />
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="onMobile('insignia')">
<q-item-section>ข้อมูลผลงาน</q-item-section>
<q-item-section avatar>
<q-avatar text-color="info" icon="mdi-chevron-right" />
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="onMobile('other')">
<q-item-section>ข้อมูลอื่นๆ</q-item-section>
<q-item-section avatar>
<q-avatar text-color="info" icon="mdi-chevron-right" />
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</div>
</template>

2
src/router/index.ts
View file

@ -13,6 +13,7 @@ import ModuAppealComplain from "@/modules/07_appealComplain/router";
import ModuleSupport from "@/modules/00_support/router"; import ModuleSupport from "@/modules/00_support/router";
import ModuleKPI from "@/modules/08_KPI/router"; import ModuleKPI from "@/modules/08_KPI/router";
import ModuleScholarship from "@/modules/09_scholarship/router"; import ModuleScholarship from "@/modules/09_scholarship/router";
import Moduleregistry from "@/modules/10_registry/router";
// TODO: ใช้หรือไม่? // TODO: ใช้หรือไม่?
import keycloak from "@/plugins/keycloak"; import keycloak from "@/plugins/keycloak";
@ -51,6 +52,7 @@ const router = createRouter({
...ModuleSupport, ...ModuleSupport,
...ModuleKPI, ...ModuleKPI,
...ModuleScholarship, ...ModuleScholarship,
...Moduleregistry
], ],
}, },
], ],

6
src/style/quasar-variables.sass
View file

@ -82,3 +82,9 @@ input.input-alert
.input-alert i.text-primary .input-alert i.text-primary
color: #f00 !important color: #f00 !important
.select_ellipsis .q-field__native > span
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
width: 200px

30
src/views/MainLayout.vue
View file

@ -7,6 +7,7 @@ import { useQuasar } from "quasar";
import keycloak from "@/plugins/keycloak"; import keycloak from "@/plugins/keycloak";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
@ -152,6 +153,10 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
hour: "2-digit", hour: "2-digit",
minute: "2-digit", minute: "2-digit",
}; };
function onInfo(){
router.push(`/registry`)
}
</script> </script>
<!-- โครงเว็บ --> <!-- โครงเว็บ -->
<template> <template>
@ -358,6 +363,15 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
</q-item> </q-item>
</template> </template>
<q-list> <q-list>
<q-item clickable v-close-popup @click="onInfo">
<q-item-section avatar style="min-width: 30px" >
<q-icon color="info" size="18px" name="mdi-clipboard-account-outline" />
</q-item-section>
<q-item-section
><q-item-label>ข้อมูลทะเบียนประวัติ</q-item-label></q-item-section
>
</q-item>
<q-item clickable v-close-popup> <q-item clickable v-close-popup>
<q-item-section avatar style="min-width: 30px"> <q-item-section avatar style="min-width: 30px">
<q-icon color="orange-9" size="18px" name="mdi-lock-outline" /> <q-icon color="orange-9" size="18px" name="mdi-lock-outline" />
@ -377,6 +391,7 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
</q-item> </q-item>
</q-list> </q-list>
</q-btn-dropdown> </q-btn-dropdown>
<div v-else class="q-ml-sm" style="width: 30px"> <div v-else class="q-ml-sm" style="width: 30px">
<q-btn round> <q-btn round>
<q-avatar> <q-avatar>
@ -389,10 +404,25 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
</q-avatar> </q-avatar>
<q-menu> <q-menu>
<q-list dense style="min-width: 200px"> <q-list dense style="min-width: 200px">
<q-item clickable v-close-popup> <q-item clickable v-close-popup>
<q-item-section> <q-item-section>
<div class="row items-center"> <div class="row items-center">
<q-list> <q-list>
<q-item clickable v-close-popup @click="onInfo">
<q-item-section avatar style="min-width: 30px">
<q-icon
color="info"
size="18px"
name="mdi-clipboard-account-outline"
/>
</q-item-section>
<q-item-section
><q-item-label
>ข้อมูลทะเบียนประวัติ</q-item-label
></q-item-section
>
</q-item>
<q-item clickable v-close-popup> <q-item clickable v-close-popup>
<q-item-section avatar style="min-width: 30px"> <q-item-section avatar style="min-width: 30px">
<q-icon <q-icon