รายการการประเมินผลการปฏิบัติราชการระดับบุคคล => ปรับ UI

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-05-23 18:05:18 +07:00
parent 999b637a95
commit 718d5a6421
10 changed files with 162 additions and 97 deletions

View file

@ -77,6 +77,33 @@ const pagination = ref({
</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 @click="redirectViewDetail(props.row.id)">
<q-list>
<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>
<div v-if="col.name === 'name'">
{{
`${props.row.prefix}${props.row.firstname} ${props.row.lastname}`
}}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div></q-item-label
>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
<template v-slot:pagination="scope">
งหมด {{ total }} รายการ
<q-pagination

View file

@ -152,6 +152,54 @@ function onClickApprove(type: string = "") {
</q-td>
</q-tr>
</template>
<template v-slot:item="props">
<div
class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
:style="props.selected ? 'transform: scale(0.95);' : ''"
>
<q-card
bordered
flat
:class="
props.selected
? $q.dark.isActive
? 'bg-grey-9'
: 'bg-grey-2'
: ''
"
>
<q-card-section>
<q-checkbox
dense
v-model="props.selected"
:label="props.row.name"
/>
</q-card-section>
<q-separator />
<q-list>
<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>
<div v-if="col.name === 'name'">
{{
`${props.row.prefix}${props.row.firstname} ${props.row.lastname}`
}}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div></q-item-label
>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
<template v-slot:pagination="scope">
งหมด {{ total }} รายการ
<q-pagination