รายการการประเมินผลการปฏิบัติราชการระดับบุคคล => ปรับ UI
This commit is contained in:
parent
999b637a95
commit
718d5a6421
10 changed files with 162 additions and 97 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue