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

ทะเบียนประวัติ: ปรับCardView

Browse source
This commit is contained in:
oat_dev 2024-03-14 11:49:18 +07:00
parent 31739639d9
commit 9662fbedd8
4 changed files with 139 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
View file

@ -268,10 +268,10 @@ function closeHistoryDialog() {
</template>
<template v-slot:item="props" v-else>
<div
class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-4 grid-style-transition"
class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
>
<q-card bordered>
<q-card-actions align="right">
<q-card-actions align="right" class="bg-grey-3">
<q-btn
flat
round
@ -293,24 +293,26 @@ function closeHistoryDialog() {
</q-card-actions>
<q-separator />
<q-list>
<q-item
v-for="col in props.cols.filter((col) => col.name !== 'desc')"
<div
:class="`row q-pa-sm`"
:style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
v-for="(col, index) in props.cols"
:key="col.name"
>
<q-item-section>
<q-item-label>{{ col.label }}</q-item-label>
</q-item-section>
<q-item-section side>
<q-item-label
caption
<div></div>
<div class="col label-color">
<div>{{ col.label }}</div>
</div>
<div class="col">
<div
v-if="col.name === 'issueDate' || col.name === 'expireDate'"
>
{{ col.value ? date2Thai(col.value) : "-" }}
</q-item-label>
</div>
<q-item-label caption v-else>{{ col.value }}</q-item-label>
</q-item-section>
</q-item>
<div v-else>{{ col.value }}</div>
</div>
</div>
</q-list>
</q-card>
</div>
@ -552,4 +554,12 @@ function closeHistoryDialog() {
</q-dialog>
</template>
<style scoped></style>
<style scoped>
.bg-color {
background-color: #fafafa;
}
.label-color {
color: #747474cc;
}
</style>

51
src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
View file

@ -434,7 +434,7 @@ watch(
class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
>
<q-card bordered>
<q-card-actions align="right">
<q-card-actions align="right" class="bg-grey-3">
<q-btn
flat
round
@ -456,28 +456,29 @@ watch(
</q-card-actions>
<q-separator />
<q-list>
<q-item
v-for="col in props.cols.filter((col) => col.name !== 'desc')"
<div
v-for="(col, index) in props.cols"
:key="col.name"
:style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
>
<q-item-section>
<q-item-label>{{ col.label }}</q-item-label>
</q-item-section>
<q-item-section side>
<q-item-label
caption
v-if="
col.name === 'startDate' ||
col.name === 'endDate' ||
col.name === 'graduateDate'
"
>
{{ col.value ? date2Thai(col.value) : "-" }}
</q-item-label>
<q-item-label caption v-else>{{ col.value }}</q-item-label>
</q-item-section>
</q-item>
<div class="row q-pa-sm">
<div class="col-7 label-color">
<div>{{ col.label }}</div>
</div>
<div class="col">
<div
v-if="
col.name === 'startDate' ||
col.name === 'endDate' ||
col.name === 'dateOrder'
"
>
{{ col.value ? date2Thai(col.value) : "-" }}
</div>
<div v-else>{{ col.value }}</div>
</div>
</div>
</div>
</q-list>
</q-card>
</div>
@ -928,4 +929,12 @@ watch(
.borderCard {
border: 1px solid #d0d0d0;
}
.label-color {
color: #747474cc;
}
.bg-color {
background-color: #fafafa;
}
</style>