Merge branch 'develop' into NiceDev
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
commit
8628be8fcf
18 changed files with 1569 additions and 560 deletions
|
|
@ -6,4 +6,5 @@ export default {
|
|||
profilePosition: () => `${org}/profile/keycloak/position`,
|
||||
|
||||
searchCommander: `${org}/profile/search/commander`,
|
||||
dataUserInformation: `${org}/profile/user`,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -257,7 +257,7 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
|
|||
<q-card
|
||||
flat
|
||||
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"
|
||||
>
|
||||
<div class="col-12 row q-px-md q-pt-md q-pb-sm">
|
||||
|
|
|
|||
|
|
@ -152,7 +152,7 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<q-table
|
||||
<d-table
|
||||
ref="table"
|
||||
flat
|
||||
bordered
|
||||
|
|
@ -207,6 +207,52 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</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">
|
||||
ทั้งหมด {{ store.row.length }} รายการ
|
||||
<q-pagination
|
||||
|
|
@ -219,7 +265,7 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
|
|||
:max="Number(props.maxPage)"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</q-table>
|
||||
</d-table>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -295,7 +295,7 @@ watch(
|
|||
:options="options"
|
||||
option-value="val"
|
||||
label="ค้นหาสถานะ"
|
||||
style="width: 35vw"
|
||||
:style="!$q.screen.gt.xs ? '' : 'width: 35vw'"
|
||||
@update:model-value="fetchEvaluteList"
|
||||
use-input
|
||||
@filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
|
||||
|
|
|
|||
|
|
@ -312,251 +312,260 @@ function requireEdit() {
|
|||
onMounted(async () => {
|
||||
showLoader();
|
||||
await getAll();
|
||||
console.log(store.dataEvaluation.avartar);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="col-12 row justify-center">
|
||||
<div class="col-xs-12 col-sm-12 col-md-11">
|
||||
<div class="toptitle text-white col-12 row items-center">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="
|
||||
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
|
||||
v-if="
|
||||
store.rolePerson == 'USER' &&
|
||||
store.dataEvaluation.evaluationStatus == 'EVALUATING'
|
||||
"
|
||||
unelevated
|
||||
round
|
||||
icon="mdi-send"
|
||||
color="grey-2"
|
||||
text-color="blue-6"
|
||||
size="md"
|
||||
@click="sendToEvaluatore('EVALUATING_EVALUATOR')"
|
||||
>
|
||||
<q-tooltip>ส่งให้ผู้ประเมินอนุมัติผลการประเมิน</q-tooltip>
|
||||
</q-btn>
|
||||
<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"
|
||||
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
|
||||
v-if="
|
||||
store.rolePerson == 'USER' &&
|
||||
store.tabOpen < 3 &&
|
||||
store.dataEvaluation.evaluationStatus != 'NEW' &&
|
||||
(store.dataEvaluation.evaluationReqEdit == null ||
|
||||
store.dataEvaluation.evaluationReqEdit == 'DONE')
|
||||
"
|
||||
:disabled="store.dataEvaluation.evaluatorId == null"
|
||||
unelevated
|
||||
round
|
||||
icon="mdi-file-edit"
|
||||
color="grey-2"
|
||||
text-color="red-6"
|
||||
size="md"
|
||||
@click="requireEdit()"
|
||||
>
|
||||
<q-tooltip>ขอแก้ไขข้อตกลง</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
v-if="
|
||||
store.rolePerson == 'USER' &&
|
||||
store.dataEvaluation.evaluationStatus == 'EVALUATING'
|
||||
"
|
||||
unelevated
|
||||
round
|
||||
icon="mdi-send"
|
||||
color="grey-2"
|
||||
text-color="blue-6"
|
||||
size="md"
|
||||
@click="sendToEvaluatore('EVALUATING_EVALUATOR')"
|
||||
>
|
||||
<q-tooltip
|
||||
>ส่งให้ผู้ประเมินอนุมัติผลการประเมิน</q-tooltip
|
||||
>
|
||||
</q-btn>
|
||||
|
||||
<!-- <q-btn
|
||||
v-if="!isReadonly"
|
||||
unelevated
|
||||
round
|
||||
icon="mdi-format-list-bulleted-square"
|
||||
color="grey-2"
|
||||
text-color="amber-10"
|
||||
size="md"
|
||||
@click="modalScore = true"
|
||||
>
|
||||
<q-tooltip>แก้ไขคะแนนเต็ม</q-tooltip>
|
||||
</q-btn> -->
|
||||
<q-btn
|
||||
unelevated
|
||||
round
|
||||
icon="mdi-account"
|
||||
color="grey-2"
|
||||
text-color="edit"
|
||||
size="md"
|
||||
@click="modalEdit = true"
|
||||
>
|
||||
<q-tooltip>{{
|
||||
store.dataEvaluation.evaluationStatus === "NEW" &&
|
||||
store.rolePerson === "USER"
|
||||
? "แก้ไขผู้ประเมิน"
|
||||
: "ข้อมูลผู้ประเมิน"
|
||||
}}</q-tooltip>
|
||||
</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>
|
||||
<q-btn
|
||||
v-if="
|
||||
store.rolePerson == 'USER' &&
|
||||
store.tabOpen < 3 &&
|
||||
store.dataEvaluation.evaluationStatus != 'NEW' &&
|
||||
(store.dataEvaluation.evaluationReqEdit == null ||
|
||||
store.dataEvaluation.evaluationReqEdit == 'DONE')
|
||||
"
|
||||
:disabled="store.dataEvaluation.evaluatorId == null"
|
||||
unelevated
|
||||
round
|
||||
icon="mdi-file-edit"
|
||||
color="grey-2"
|
||||
text-color="red-6"
|
||||
size="md"
|
||||
@click="requireEdit()"
|
||||
>
|
||||
<q-tooltip>ขอแก้ไขข้อตกลง</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<!-- <q-btn
|
||||
v-if="!isReadonly"
|
||||
unelevated
|
||||
round
|
||||
icon="mdi-format-list-bulleted-square"
|
||||
color="grey-2"
|
||||
text-color="amber-10"
|
||||
size="md"
|
||||
@click="modalScore = true"
|
||||
>
|
||||
<q-tooltip>แก้ไขคะแนนเต็ม</q-tooltip>
|
||||
</q-btn> -->
|
||||
<q-btn
|
||||
unelevated
|
||||
round
|
||||
icon="mdi-account"
|
||||
color="grey-2"
|
||||
text-color="edit"
|
||||
size="md"
|
||||
@click="modalEdit = true"
|
||||
>
|
||||
<q-tooltip>{{
|
||||
store.dataEvaluation.evaluationStatus === "NEW" &&
|
||||
store.rolePerson === "USER"
|
||||
? "แก้ไขผู้ประเมิน"
|
||||
: "ข้อมูลผู้ประเมิน"
|
||||
}}</q-tooltip>
|
||||
</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 class="row items-center bg-toolbar col-12 q-pa-sm">
|
||||
<div class="col-12 q-py-xs" style="padding-left: 12%">
|
||||
<div class="row no-wrap">
|
||||
<div class="col-2">
|
||||
<div class="column">
|
||||
<span class="text-grey-6">ตำแหน่งในสายงาน</span>
|
||||
<span class="text-weight-medium text-dark">{{
|
||||
store.dataEvaluation.position
|
||||
}}</span>
|
||||
<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="row no-wrap">
|
||||
<div class="col-2">
|
||||
<div class="column">
|
||||
<span class="text-grey-6">ตำแหน่งในสายงาน</span>
|
||||
<span class="text-weight-medium text-dark">{{
|
||||
store.dataEvaluation.position
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="column">
|
||||
<span class="text-grey-6">ประเภทตำแหน่ง</span>
|
||||
<span class="text-weight-medium text-dark">{{
|
||||
store.dataEvaluation.posTypeName
|
||||
}}</span>
|
||||
<div class="col-2">
|
||||
<div class="column">
|
||||
<span class="text-grey-6">ประเภทตำแหน่ง</span>
|
||||
<span class="text-weight-medium text-dark">{{
|
||||
store.dataEvaluation.posTypeName
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="column">
|
||||
<span class="text-grey-6">ระดับตำแหน่ง</span>
|
||||
<span class="text-weight-medium text-dark">{{
|
||||
store.dataEvaluation.posLevelName
|
||||
}}</span>
|
||||
<div class="col-2">
|
||||
<div class="column">
|
||||
<span class="text-grey-6">ระดับตำแหน่ง</span>
|
||||
<span class="text-weight-medium text-dark">{{
|
||||
store.dataEvaluation.posLevelName
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="column">
|
||||
<span class="text-grey-6">สถานะการประเมิน</span>
|
||||
<span class="text-weight-medium text-dark">{{
|
||||
formProfile.status
|
||||
}}</span>
|
||||
<div class="col-2">
|
||||
<div class="column">
|
||||
<span class="text-grey-6">สถานะการประเมิน</span>
|
||||
<span class="text-weight-medium text-dark">{{
|
||||
formProfile.status
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="column">
|
||||
<span class="text-grey-6">ผลการประเมิน</span>
|
||||
<span class="text-weight-medium text-dark">{{
|
||||
formProfile.result
|
||||
}}</span>
|
||||
<div class="col-2">
|
||||
<div class="column">
|
||||
<span class="text-grey-6">ผลการประเมิน</span>
|
||||
<span class="text-weight-medium text-dark">{{
|
||||
formProfile.result
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="column">
|
||||
<span class="text-grey-6">คะแนนประเมิน</span>
|
||||
<span class="text-weight-medium text-primary">
|
||||
{{
|
||||
store.dataEvaluation.posExecutiveName == null
|
||||
? (
|
||||
store.indicatorScoreVal +
|
||||
store.competencyScoreVal +
|
||||
store.devScoreVal
|
||||
).toFixed(2)
|
||||
: (
|
||||
store.excusiveIndicator1ScoreVal +
|
||||
store.excusiveIndicator2ScoreVal +
|
||||
store.competencyScoreVal
|
||||
).toFixed(2)
|
||||
}}
|
||||
</span>
|
||||
<div class="col-2">
|
||||
<div class="column">
|
||||
<span class="text-grey-6">คะแนนประเมิน</span>
|
||||
<span class="text-weight-medium text-primary">
|
||||
{{
|
||||
store.dataEvaluation.posExecutiveName == null
|
||||
? (
|
||||
store.indicatorScoreVal +
|
||||
store.competencyScoreVal +
|
||||
store.devScoreVal
|
||||
).toFixed(2)
|
||||
: (
|
||||
store.excusiveIndicator1ScoreVal +
|
||||
store.excusiveIndicator2ScoreVal +
|
||||
store.competencyScoreVal
|
||||
).toFixed(2)
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-card>
|
||||
|
||||
<q-card class="q-mt-md rounded">
|
||||
<TabMain />
|
||||
</q-card>
|
||||
<q-card class="q-mt-md rounded">
|
||||
<TabMain />
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<q-dialog v-model="modalEdit" persistent>
|
||||
<q-card bordered style="width: 50vh">
|
||||
|
|
|
|||
|
|
@ -213,94 +213,93 @@ onMounted(async () => {
|
|||
</div>
|
||||
<div class="col-12">
|
||||
<q-card bordered class="q-pa-md">
|
||||
<q-toolbar style="padding: 0">
|
||||
<div class="row q-gutter-sm">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="store.yearRound"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
@update:model-value="fetchRoundOption(true)"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
lazy-rules
|
||||
outlined
|
||||
hide-bottom-space
|
||||
:model-value="
|
||||
!!store.yearRound ? store.yearRound + 543 : null
|
||||
"
|
||||
: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
|
||||
v-model="store.formQuery.round"
|
||||
outlined
|
||||
label="รอบการประเมิน"
|
||||
dense
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
:options="roundOp"
|
||||
style="min-width: 200px"
|
||||
emit-value
|
||||
map-options
|
||||
@update:model-value="changRound"
|
||||
/>
|
||||
</div>
|
||||
<div class="items-center col-12 row q-col-gutter-sm q-mb-sm">
|
||||
<datepicker
|
||||
class="col-md-1 col-xs-12"
|
||||
menu-class-name="modalfix"
|
||||
v-model="store.yearRound"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
@update:model-value="fetchRoundOption(true)"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
lazy-rules
|
||||
outlined
|
||||
hide-bottom-space
|
||||
:model-value="
|
||||
!!store.yearRound ? store.yearRound + 543 : null
|
||||
"
|
||||
: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
|
||||
class="col-md-2 col-xs-12"
|
||||
v-model="store.formQuery.round"
|
||||
outlined
|
||||
label="รอบการประเมิน"
|
||||
dense
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
:options="roundOp"
|
||||
emit-value
|
||||
map-options
|
||||
@update:model-value="changRound"
|
||||
/>
|
||||
|
||||
<q-space />
|
||||
<div class="row q-gutter-sm">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
v-model="store.formQuery.keyword"
|
||||
label="ค้นหาผู้ขอรับการประเมิน"
|
||||
@keydown.enter.prevent="changRound"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="store.formQuery.keyword !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="(store.formQuery.keyword = ''), changRound()"
|
||||
/>
|
||||
<q-icon v-else name="search" color="grey-5" />
|
||||
</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>
|
||||
|
||||
<q-input
|
||||
class="col-md-2 col-xs-12"
|
||||
outlined
|
||||
dense
|
||||
v-model="store.formQuery.keyword"
|
||||
label="ค้นหาผู้ขอรับการประเมิน"
|
||||
@keydown.enter.prevent="changRound"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="store.formQuery.keyword !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="(store.formQuery.keyword = ''), changRound()"
|
||||
/>
|
||||
<q-icon v-else name="search" color="grey-5" />
|
||||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
class="col-md-1 col-xs-12"
|
||||
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
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-card bordered class="q-mt-sm">
|
||||
<q-tabs
|
||||
|
|
|
|||
|
|
@ -427,10 +427,10 @@ function fetchDataDetail(id: string) {
|
|||
|
||||
dataPerson.citizenId = data.citizenId ? data.citizenId : "-";
|
||||
dataPerson.name = `${data.prefix}${data.firstName} ${data.lastName}`;
|
||||
dataPerson.prefix = data.prefix,
|
||||
dataPerson.firstName = data.firstName,
|
||||
dataPerson.lastName = data.lastName,
|
||||
dataPerson.position = data.position ? data.position : "-";
|
||||
(dataPerson.prefix = data.prefix),
|
||||
(dataPerson.firstName = data.firstName),
|
||||
(dataPerson.lastName = data.lastName),
|
||||
(dataPerson.position = data.position ? data.position : "-");
|
||||
dataPerson.type = data.posTypeName ? data.posTypeName : "-";
|
||||
dataPerson.level = data.posLevelName ? data.posLevelName : "-";
|
||||
dataPerson.positionSide = data.posExecutive ? data.posExecutive : "-";
|
||||
|
|
@ -522,7 +522,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
|
||||
<q-space />
|
||||
<div v-if="fileList == null" class="col-3">
|
||||
<div v-if="fileList == null" class="col-xs-5 col-3">
|
||||
<q-file
|
||||
for="inputFiles"
|
||||
class="col-12"
|
||||
|
|
@ -573,39 +573,39 @@ onMounted(async () => {
|
|||
</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="col-xs-12 col-md-6">
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
|
||||
<div class="col-8 text-weight-medium">
|
||||
{{ dataPerson.citizenId ? dataPerson.citizenId:'-' }}
|
||||
{{ dataPerson.citizenId ? dataPerson.citizenId : "-" }}
|
||||
</div>
|
||||
<div class="col-4 text-grey">ชื่อ-นามสกุล</div>
|
||||
<div class="col-8 text-weight-medium">
|
||||
{{ dataPerson.firstName ? dataPerson.name:'-' }}
|
||||
{{ dataPerson.firstName ? dataPerson.name : "-" }}
|
||||
</div>
|
||||
<div class="col-4 text-grey">ตำแหน่ง</div>
|
||||
<div class="col-8 text-weight-medium">
|
||||
{{ dataPerson.position ? dataPerson.position:'-' }}
|
||||
{{ dataPerson.position ? dataPerson.position : "-" }}
|
||||
</div>
|
||||
<div class="col-4 text-grey">ประเภทตำแหน่ง</div>
|
||||
<div class="col-8 text-weight-medium">
|
||||
{{ dataPerson.type ? dataPerson.type:'-' }}
|
||||
{{ dataPerson.type ? dataPerson.type : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-4 text-grey">ระดับตำแหน่ง</div>
|
||||
<div class="col-8 text-weight-medium">
|
||||
{{ dataPerson.level ? dataPerson.level:'-' }}
|
||||
{{ dataPerson.level ? dataPerson.level : "-" }}
|
||||
</div>
|
||||
<div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
|
||||
<div class="col-8 text-weight-medium">
|
||||
{{ dataPerson.positionSide ? dataPerson.positionSide:'-' }}
|
||||
{{ dataPerson.positionSide ? dataPerson.positionSide : "-" }}
|
||||
</div>
|
||||
<div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
|
||||
<div class="col-8 text-weight-medium">
|
||||
{{ dataPerson.org ? dataPerson.org:'-' }}
|
||||
{{ dataPerson.org ? dataPerson.org : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -618,7 +618,7 @@ onMounted(async () => {
|
|||
</q-card>
|
||||
|
||||
<div class="row q-col-gutter-md q-mt-sm">
|
||||
<div class="col-9">
|
||||
<div class="col-md-9 col-xs-12">
|
||||
<q-select
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -634,7 +634,7 @@ onMounted(async () => {
|
|||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-3"
|
||||
class="col-md-3 col-xs-12"
|
||||
v-if="
|
||||
formBody.scholarshipType !== '' &&
|
||||
formBody.scholarshipType !== 'EXECUTIVE' &&
|
||||
|
|
@ -662,7 +662,7 @@ onMounted(async () => {
|
|||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="INPLAN"
|
||||
label="ในแผนฯ"
|
||||
label="ในแผน ฯ"
|
||||
dense
|
||||
disable
|
||||
/>
|
||||
|
|
@ -671,7 +671,7 @@ onMounted(async () => {
|
|||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="OUTPLAN"
|
||||
label="นอกแผนฯ"
|
||||
label="นอกแผน ฯ"
|
||||
dense
|
||||
disable
|
||||
class="q-pl-sm"
|
||||
|
|
@ -679,7 +679,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
|
||||
<div class="row col-12 q-col-gutter-md">
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formBody.scholarshipYear"
|
||||
|
|
@ -722,7 +722,10 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</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
|
||||
dense
|
||||
outlined
|
||||
|
|
@ -737,7 +740,7 @@ onMounted(async () => {
|
|||
readonly
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
|
|
@ -749,7 +752,7 @@ onMounted(async () => {
|
|||
reverse-fill-mask
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<q-checkbox
|
||||
keep-color
|
||||
disable
|
||||
|
|
@ -761,7 +764,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
|
||||
<div class="row col-12 q-col-gutter-md">
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -771,7 +774,7 @@ onMounted(async () => {
|
|||
label="เลขที่หนังสืออนุมัติ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formBody.bookNoDate"
|
||||
|
|
@ -809,7 +812,7 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formBody.bookApproveDate"
|
||||
|
|
@ -847,7 +850,10 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</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
|
||||
keep-color
|
||||
disable
|
||||
|
|
@ -873,7 +879,7 @@ onMounted(async () => {
|
|||
|
||||
<div class="col-12" v-if="formBody.scholarshipType !== 'EXECUTIVE'">
|
||||
<div class="row col-12 q-col-gutter-md">
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -883,7 +889,7 @@ onMounted(async () => {
|
|||
v-model="formBody.contractNo"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="col-xs-12 col-md-2">
|
||||
<datepicker
|
||||
readonly
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -920,7 +926,10 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</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
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -930,7 +939,10 @@ onMounted(async () => {
|
|||
label="เลขที่หนังสือรายงานตัวกลับ"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-2">
|
||||
<div
|
||||
v-if="formBody.scholarshipType !== 'RESEARCH'"
|
||||
class="col-xs-12 col-md-2"
|
||||
>
|
||||
<datepicker
|
||||
readonly
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -968,7 +980,10 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-2">
|
||||
<div
|
||||
v-if="formBody.scholarshipType !== 'RESEARCH'"
|
||||
class="col-xs-12 col-md-2"
|
||||
>
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formBody.reportBackDate"
|
||||
|
|
@ -1006,49 +1021,60 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-12" >
|
||||
<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">
|
||||
ข้อมูลผู้ค้ำประกัน
|
||||
</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 col-12 q-col-gutter-md q-pa-md">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
|
||||
<div class="col-8 text-weight-medium">
|
||||
{{ dataGuarantor.citizenId ? dataGuarantor.citizenId :'-' }}
|
||||
{{
|
||||
dataGuarantor.citizenId
|
||||
? dataGuarantor.citizenId
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
<div class="col-4 text-grey">ชื่อ-นามสกุล</div>
|
||||
<div class="col-8 text-weight-medium">
|
||||
{{ dataGuarantor.firstName ? dataGuarantor.name:'-' }}
|
||||
{{
|
||||
dataGuarantor.firstName ? dataGuarantor.name : "-"
|
||||
}}
|
||||
</div>
|
||||
<div class="col-4 text-grey">ตำแหน่ง</div>
|
||||
<div class="col-8 text-weight-medium">
|
||||
{{ dataGuarantor.position ? dataGuarantor.position:'-' }}
|
||||
{{
|
||||
dataGuarantor.position
|
||||
? dataGuarantor.position
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
<div class="col-4 text-grey">ประเภท</div>
|
||||
<div class="col-8 text-weight-medium">
|
||||
{{ dataGuarantor.type ? dataGuarantor.type :'-' }}
|
||||
{{ dataGuarantor.type ? dataGuarantor.type : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-4 text-grey">ระดับตำแหน่ง</div>
|
||||
<div class="col-8 text-weight-medium">
|
||||
{{ dataGuarantor.level ? dataGuarantor.level:'-' }}
|
||||
{{ dataGuarantor.level ? dataGuarantor.level : "-" }}
|
||||
</div>
|
||||
<div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
|
||||
<div class="col-8 text-weight-medium">
|
||||
{{ dataGuarantor.positionSide ? dataGuarantor.positionSide:'-' }}
|
||||
{{
|
||||
dataGuarantor.positionSide
|
||||
? dataGuarantor.positionSide
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
<div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
|
||||
<div class="col-8 text-weight-medium">
|
||||
{{ dataGuarantor.org ? dataGuarantor.org:'-' }}
|
||||
{{ dataGuarantor.org ? dataGuarantor.org : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1062,7 +1088,7 @@ onMounted(async () => {
|
|||
v-if="formBody.scholarshipType === 'DOMESTICE'"
|
||||
>
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -1072,7 +1098,7 @@ onMounted(async () => {
|
|||
v-model="formBody.degreeLevel"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -1082,7 +1108,7 @@ onMounted(async () => {
|
|||
v-model="formBody.course"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
|
|
@ -1092,7 +1118,7 @@ onMounted(async () => {
|
|||
v-model="formBody.field"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
|
|
@ -1102,7 +1128,7 @@ onMounted(async () => {
|
|||
v-model="formBody.faculty"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
|
|
@ -1112,7 +1138,7 @@ onMounted(async () => {
|
|||
v-model="formBody.educationalInstitution"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formBody.startDate"
|
||||
|
|
@ -1152,7 +1178,7 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formBody.endDate"
|
||||
|
|
@ -1192,7 +1218,7 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -1202,7 +1228,7 @@ onMounted(async () => {
|
|||
v-model="formBody.studyPlace"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -1212,7 +1238,7 @@ onMounted(async () => {
|
|||
v-model="formBody.studyTopic"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<datepicker
|
||||
readonly
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -1252,7 +1278,7 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
readonly
|
||||
|
|
@ -1292,8 +1318,8 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-6"></div>
|
||||
<div class="col-6">
|
||||
<div class="col-6" v-if="!$q.screen.gt.xs"></div>
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -1303,7 +1329,7 @@ onMounted(async () => {
|
|||
v-model="formBody.studyCountry"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -1313,7 +1339,7 @@ onMounted(async () => {
|
|||
v-model="formBody.studyAbroadTopic"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<datepicker
|
||||
readonly
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -1355,7 +1381,7 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<datepicker
|
||||
readonly
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -1401,7 +1427,7 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -1420,7 +1446,7 @@ onMounted(async () => {
|
|||
v-else-if="formBody.scholarshipType === 'NOABROAD'"
|
||||
>
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-6">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
|
|
@ -1430,7 +1456,7 @@ onMounted(async () => {
|
|||
v-model="formBody.course"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -1440,7 +1466,7 @@ onMounted(async () => {
|
|||
v-model="formBody.field"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-input
|
||||
readonly
|
||||
dense
|
||||
|
|
@ -1450,7 +1476,7 @@ onMounted(async () => {
|
|||
v-model="formBody.educationalInstitution"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<datepicker
|
||||
readonly
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -1490,7 +1516,7 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<datepicker
|
||||
readonly
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -1530,7 +1556,7 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -1540,7 +1566,7 @@ onMounted(async () => {
|
|||
v-model="formBody.studyPlace"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -1550,7 +1576,7 @@ onMounted(async () => {
|
|||
v-model="formBody.studyTopic"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formBody.studyStartDate"
|
||||
|
|
@ -1590,7 +1616,7 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<datepicker
|
||||
readonly
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -1636,7 +1662,7 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -1655,7 +1681,7 @@ onMounted(async () => {
|
|||
v-else-if="formBody.scholarshipType === 'ABROAD'"
|
||||
>
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-6">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -1665,7 +1691,7 @@ onMounted(async () => {
|
|||
v-model="formBody.course"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
|
|
@ -1675,7 +1701,7 @@ onMounted(async () => {
|
|||
v-model="formBody.field"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -1685,7 +1711,7 @@ onMounted(async () => {
|
|||
v-model="formBody.educationalInstitution"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<datepicker
|
||||
readonly
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -1725,7 +1751,7 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<datepicker
|
||||
readonly
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -1765,7 +1791,7 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -1775,7 +1801,7 @@ onMounted(async () => {
|
|||
v-model="formBody.studyPlace"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -1785,7 +1811,7 @@ onMounted(async () => {
|
|||
v-model="formBody.studyTopic"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<datepicker
|
||||
readonly
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -1825,7 +1851,7 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<datepicker
|
||||
readonly
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -1872,8 +1898,8 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-6"></div>
|
||||
<div class="col-6">
|
||||
<div class="col-6" v-if="!$q.screen.gt.xs"></div>
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -1883,7 +1909,7 @@ onMounted(async () => {
|
|||
v-model="formBody.studyCountry"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -1893,7 +1919,7 @@ onMounted(async () => {
|
|||
v-model="formBody.studyAbroadTopic"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<datepicker
|
||||
readonly
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -1935,7 +1961,7 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<datepicker
|
||||
readonly
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -1981,7 +2007,7 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<q-input
|
||||
readonly
|
||||
dense
|
||||
|
|
@ -2000,7 +2026,7 @@ onMounted(async () => {
|
|||
v-else-if="formBody.scholarshipType === 'RESEARCH'"
|
||||
>
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<q-select
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -2018,7 +2044,7 @@ onMounted(async () => {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -2029,7 +2055,7 @@ onMounted(async () => {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -2040,7 +2066,7 @@ onMounted(async () => {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -2051,7 +2077,7 @@ onMounted(async () => {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -2062,7 +2088,7 @@ onMounted(async () => {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-input
|
||||
readonly
|
||||
dense
|
||||
|
|
@ -2073,7 +2099,7 @@ onMounted(async () => {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<datepicker
|
||||
readonly
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -2113,7 +2139,8 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<datepicker
|
||||
readonly
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -2153,7 +2180,8 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -2174,7 +2202,7 @@ onMounted(async () => {
|
|||
v-else-if="formBody.scholarshipType === 'EXECUTIVE'"
|
||||
>
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-6">
|
||||
<div class="col-xs-12 col-md-md-6">
|
||||
<q-input
|
||||
readonly
|
||||
dense
|
||||
|
|
@ -2184,7 +2212,7 @@ onMounted(async () => {
|
|||
v-model="formBody.course"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-xs-12 col-md-md-6">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -2194,7 +2222,7 @@ onMounted(async () => {
|
|||
v-model="formBody.educationalInstitution"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-md-3">
|
||||
<datepicker
|
||||
readonly
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -2235,7 +2263,7 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-md-3">
|
||||
<datepicker
|
||||
readonly
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -2273,8 +2301,8 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-6"></div>
|
||||
<div class="col-6">
|
||||
<div class="col-6" v-if="!$q.screen.gt.xs"></div>
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -2284,7 +2312,7 @@ onMounted(async () => {
|
|||
v-model="formBody.studyPlace"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -2294,7 +2322,7 @@ onMounted(async () => {
|
|||
v-model="formBody.studyTopic"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<datepicker
|
||||
readonly
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -2334,7 +2362,7 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<datepicker
|
||||
readonly
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -2380,8 +2408,8 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-6"></div>
|
||||
<div class="col-6">
|
||||
<div class="col-6" v-if="!$q.screen.gt.xs"></div>
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
|
|
@ -2391,7 +2419,7 @@ onMounted(async () => {
|
|||
v-model="formBody.studyCountry"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
|
|
@ -2401,7 +2429,7 @@ onMounted(async () => {
|
|||
v-model="formBody.studyAbroadTopic"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<datepicker
|
||||
readonly
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -2441,7 +2469,7 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="ccol-xs-12 ol-md-3">
|
||||
<datepicker
|
||||
readonly
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -2487,7 +2515,7 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<q-input
|
||||
readonly
|
||||
dense
|
||||
|
|
|
|||
|
|
@ -168,105 +168,85 @@ onMounted(async () => {
|
|||
</div>
|
||||
<div class="col-12">
|
||||
<q-card bordered class="q-pa-md">
|
||||
<q-toolbar style="padding: 0">
|
||||
<div class="row q-gutter-sm">
|
||||
<datepicker
|
||||
style="width: 150px"
|
||||
menu-class-name="modalfix"
|
||||
v-model="year"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
@update:model-value="getData()"
|
||||
>
|
||||
<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="year === 0 ? 'ทั้งหมด' : Number(year) + 543"
|
||||
:label="`${'ปีงบประมาณ'}`"
|
||||
>
|
||||
<template v-if="year" v-slot:append>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="(year = 0), getData()"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
<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="type"
|
||||
:options="scholarshipTypeOp"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
label="เลือกประเภททุน"
|
||||
@update:model-value="getData()"
|
||||
style="width: 350px"
|
||||
/>
|
||||
<!-- <q-btn
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="add"
|
||||
@click="router.push(`/KPI/add`)"
|
||||
>
|
||||
<q-tooltip> เพิ่มข้อมูล </q-tooltip>
|
||||
</q-btn> -->
|
||||
</div>
|
||||
<div class="items-center col-12 row q-col-gutter-sm q-mb-sm">
|
||||
<datepicker
|
||||
class="col-xs-12 col-md-1"
|
||||
menu-class-name="modalfix"
|
||||
v-model="year"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
@update:model-value="getData()"
|
||||
>
|
||||
<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="year === 0 ? 'ทั้งหมด' : Number(year) + 543"
|
||||
:label="`${'ปีงบประมาณ'}`"
|
||||
>
|
||||
<template v-if="year" v-slot:append>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="(year = 0), getData()"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
<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="type"
|
||||
:options="scholarshipTypeOp"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
label="เลือกประเภททุน"
|
||||
@update:model-value="getData()"
|
||||
class="select_ellipsis col-xs-12 col-md-2"
|
||||
/>
|
||||
|
||||
<q-space />
|
||||
<div class="row q-gutter-sm">
|
||||
<!-- <q-input
|
||||
outlined
|
||||
dense
|
||||
v-model="filterKeyword"
|
||||
label="ค้นหา"
|
||||
></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>
|
||||
|
||||
<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
|
||||
class="col-xs-12 col-md-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<q-table
|
||||
<d-table
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
row-key="id"
|
||||
class="custom-table2"
|
||||
style="max-height: 80vh"
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:visible-columns="visibleColumns"
|
||||
|
|
@ -318,56 +298,39 @@ onMounted(async () => {
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</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>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.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>
|
||||
<style scoped lang="scss"></style>
|
||||
|
|
|
|||
66
src/modules/10_registry/router.ts
Normal file
66
src/modules/10_registry/router.ts
Normal 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
615
src/modules/10_registry/tabs/01_information.vue
Normal 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
3
src/modules/10_registry/tabs/02_government.vue
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<template>
|
||||
<div>government</div>
|
||||
</template>
|
||||
3
src/modules/10_registry/tabs/03_salary.vue
Normal file
3
src/modules/10_registry/tabs/03_salary.vue
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<template>
|
||||
<div>salary</div>
|
||||
</template>
|
||||
3
src/modules/10_registry/tabs/04_insignia.vue
Normal file
3
src/modules/10_registry/tabs/04_insignia.vue
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<template>
|
||||
<div>insignia</div>
|
||||
</template>
|
||||
3
src/modules/10_registry/tabs/05_other.vue
Normal file
3
src/modules/10_registry/tabs/05_other.vue
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<template>
|
||||
<div>other</div>
|
||||
</template>
|
||||
232
src/modules/10_registry/views/main.vue
Normal file
232
src/modules/10_registry/views/main.vue
Normal 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>
|
||||
|
|
@ -13,6 +13,7 @@ import ModuAppealComplain from "@/modules/07_appealComplain/router";
|
|||
import ModuleSupport from "@/modules/00_support/router";
|
||||
import ModuleKPI from "@/modules/08_KPI/router";
|
||||
import ModuleScholarship from "@/modules/09_scholarship/router";
|
||||
import Moduleregistry from "@/modules/10_registry/router";
|
||||
// TODO: ใช้หรือไม่?
|
||||
import keycloak from "@/plugins/keycloak";
|
||||
|
||||
|
|
@ -51,6 +52,7 @@ const router = createRouter({
|
|||
...ModuleSupport,
|
||||
...ModuleKPI,
|
||||
...ModuleScholarship,
|
||||
...Moduleregistry
|
||||
],
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -82,3 +82,9 @@ input.input-alert
|
|||
|
||||
.input-alert i.text-primary
|
||||
color: #f00 !important
|
||||
|
||||
.select_ellipsis .q-field__native > span
|
||||
white-space: nowrap
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
width: 200px
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { useQuasar } from "quasar";
|
|||
import keycloak from "@/plugins/keycloak";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
|
|
@ -152,6 +153,10 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
|
|||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
};
|
||||
|
||||
function onInfo(){
|
||||
router.push(`/registry`)
|
||||
}
|
||||
</script>
|
||||
<!-- โครงเว็บ -->
|
||||
<template>
|
||||
|
|
@ -358,6 +363,15 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
|
|||
</q-item>
|
||||
</template>
|
||||
<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-section avatar style="min-width: 30px">
|
||||
<q-icon color="orange-9" size="18px" name="mdi-lock-outline" />
|
||||
|
|
@ -377,6 +391,7 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
|
|||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
|
||||
<div v-else class="q-ml-sm" style="width: 30px">
|
||||
<q-btn round>
|
||||
<q-avatar>
|
||||
|
|
@ -389,10 +404,25 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
|
|||
</q-avatar>
|
||||
<q-menu>
|
||||
<q-list dense style="min-width: 200px">
|
||||
|
||||
<q-item clickable v-close-popup>
|
||||
<q-item-section>
|
||||
<div class="row items-center">
|
||||
<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-section avatar style="min-width: 30px">
|
||||
<q-icon
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue