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

ปรับ responsive

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-05-24 13:52:58 +07:00
parent 650948d68a
commit 542b830a91
8 changed files with 611 additions and 560 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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">

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

@ -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>

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

@ -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) "

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

@ -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">

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

@ -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

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.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

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

@ -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>

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

@ -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