ปรับ TableView ทะเบียนประวัติ
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
fe6ce363f6
commit
aecf75c1e7
12 changed files with 254 additions and 474 deletions
|
|
@ -399,7 +399,6 @@ onMounted(() => {
|
|||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
v-if="mode === 'table'"
|
||||
v-model="visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
|
|
@ -516,10 +515,8 @@ onMounted(() => {
|
|||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:item="props" v-else>
|
||||
<div
|
||||
class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
|
||||
>
|
||||
<q-card bordered>
|
||||
<div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
|
||||
<q-card flat bordered>
|
||||
<q-card-actions align="right" class="bg-grey-3">
|
||||
<q-btn
|
||||
v-if="props.row.isUpload"
|
||||
|
|
@ -560,8 +557,7 @@ onMounted(() => {
|
|||
v-for="(col, index) in props.cols"
|
||||
:key="col.name"
|
||||
>
|
||||
<div></div>
|
||||
<div class="col label-color">
|
||||
<div class="col text-grey-6">
|
||||
<div>{{ col.label }}</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
|
|
@ -842,8 +838,4 @@ onMounted(() => {
|
|||
.bg-color {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.label-color {
|
||||
color: #747474cc;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -439,7 +439,6 @@ onMounted(() => {
|
|||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
v-if="mode === 'table'"
|
||||
v-model="visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
|
|
@ -558,9 +557,7 @@ onMounted(() => {
|
|||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:item="props" v-else>
|
||||
<div
|
||||
class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
|
||||
>
|
||||
<div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
|
||||
<q-card bordered>
|
||||
<q-card-actions align="right" class="bg-grey-3">
|
||||
<q-btn
|
||||
|
|
@ -586,17 +583,16 @@ onMounted(() => {
|
|||
<q-separator />
|
||||
<q-list>
|
||||
<div
|
||||
:class="`row q-pa-sm`"
|
||||
:style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
|
||||
v-for="(col, index) in props.cols"
|
||||
:key="col.name"
|
||||
:style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
|
||||
>
|
||||
<div class="row q-pa-sm">
|
||||
<div class="col-7 label-color">
|
||||
<div>{{ col.label }}</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>{{ col.value ? col.value : "-" }}</div>
|
||||
</div>
|
||||
<div class="col text-grey-6">
|
||||
<div>{{ col.label }}</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>{{ col.value ? col.value : "-" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-list>
|
||||
|
|
@ -1007,10 +1003,6 @@ onMounted(() => {
|
|||
border: 1px solid #d0d0d0;
|
||||
}
|
||||
|
||||
.label-color {
|
||||
color: #747474cc;
|
||||
}
|
||||
|
||||
.bg-color {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -684,7 +684,6 @@ onMounted(async () => {
|
|||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
v-if="modeView == 'table'"
|
||||
v-model="visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
|
|
@ -738,7 +737,6 @@ onMounted(async () => {
|
|||
v-model:pagination="pagination"
|
||||
:grid="modeView === 'card'"
|
||||
:visible-columns="visibleColumns"
|
||||
:card-container-class="modeView === 'card' ? 'q-col-gutter-md' : ''"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -798,8 +796,8 @@ onMounted(async () => {
|
|||
</template>
|
||||
|
||||
<template v-slot:item="props" v-else>
|
||||
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||
<q-card bordered>
|
||||
<div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
|
||||
<q-card flat bordered>
|
||||
<q-card-actions class="bg-grey-3" align="right">
|
||||
<q-btn
|
||||
flat
|
||||
|
|
@ -822,25 +820,21 @@ onMounted(async () => {
|
|||
</q-btn>
|
||||
</q-card-actions>
|
||||
<q-separator />
|
||||
<div>
|
||||
<q-item
|
||||
v-for="(col, index) in props.cols.filter(
|
||||
(col:any) => col.name !== 'desc'
|
||||
)"
|
||||
<q-list>
|
||||
<div
|
||||
:class="`row q-pa-sm`"
|
||||
:style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
|
||||
v-for="(col, index) in props.cols"
|
||||
:key="col.name"
|
||||
:class="index % 2 !== 0 ? 'bg-grey-1' : ''"
|
||||
>
|
||||
<q-item-section class="text-grey-6">
|
||||
<q-item-label>{{ col.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section class="text-dark">
|
||||
<q-item-label>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
<div class="col text-grey-6">
|
||||
<div>{{ col.label }}</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>{{ col.value ? col.value : "-" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -479,7 +479,6 @@ onMounted(() => {
|
|||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
v-if="modeView == 'table'"
|
||||
v-model="visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
|
|
@ -533,7 +532,6 @@ onMounted(() => {
|
|||
:grid="modeView === 'card'"
|
||||
v-model:pagination="pagination"
|
||||
:visible-columns="visibleColumns"
|
||||
:card-container-class="modeView === 'card' ? 'q-col-gutter-md' : ''"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -592,8 +590,8 @@ onMounted(() => {
|
|||
</template>
|
||||
|
||||
<template v-slot:item="props" v-else>
|
||||
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||
<q-card bordered>
|
||||
<div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
|
||||
<q-card flat bordered>
|
||||
<q-card-actions class="bg-grey-3" align="right">
|
||||
<q-btn
|
||||
v-if="props.row.isUpload == true"
|
||||
|
|
@ -627,25 +625,21 @@ onMounted(() => {
|
|||
</q-btn>
|
||||
</q-card-actions>
|
||||
<q-separator />
|
||||
<div>
|
||||
<q-item
|
||||
v-for="(col, index) in props.cols.filter(
|
||||
(col:any) => col.name !== 'desc'
|
||||
)"
|
||||
<q-list>
|
||||
<div
|
||||
:class="`row q-pa-sm`"
|
||||
:style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
|
||||
v-for="(col, index) in props.cols"
|
||||
:key="col.name"
|
||||
:class="index % 2 !== 0 ? 'bg-grey-1' : ''"
|
||||
>
|
||||
<q-item-section class="col-7 text-grey-6">
|
||||
<q-item-label>{{ col.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section class="text-dark">
|
||||
<q-item-label>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
<div class="col text-grey-6">
|
||||
<div>{{ col.label }}</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>{{ col.value ? col.value : "-" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -557,6 +557,7 @@ onMounted(async () => {
|
|||
hideLoader();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
|
|
@ -594,7 +595,6 @@ onMounted(async () => {
|
|||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
v-if="modeView == 'table'"
|
||||
v-model="visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
|
|
@ -650,7 +650,6 @@ onMounted(async () => {
|
|||
v-model:pagination="pagination"
|
||||
:grid="modeView === 'card'"
|
||||
:visible-columns="visibleColumns"
|
||||
:card-container-class="modeView === 'card' ? 'q-col-gutter-md' : ''"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -699,8 +698,8 @@ onMounted(async () => {
|
|||
</template>
|
||||
|
||||
<template v-slot:item="props" v-else>
|
||||
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||
<q-card bordered>
|
||||
<div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
|
||||
<q-card flat bordered>
|
||||
<q-card-actions class="bg-grey-3" align="right">
|
||||
<q-btn
|
||||
flat
|
||||
|
|
@ -728,25 +727,23 @@ onMounted(async () => {
|
|||
</q-btn>
|
||||
</q-card-actions>
|
||||
<q-separator />
|
||||
<div>
|
||||
<q-item
|
||||
v-for="(col, index) in props.cols.filter(
|
||||
(col:any) => col.name !== 'desc'
|
||||
)"
|
||||
<q-list>
|
||||
<div
|
||||
:class="`row q-pa-sm`"
|
||||
:style="`background-color: ${
|
||||
index % 2 !== 0 ? '#FAFAFA' : ''
|
||||
}`"
|
||||
v-for="(col, index) in props.cols"
|
||||
:key="col.name"
|
||||
:class="index % 2 !== 0 ? 'bg-grey-1' : ''"
|
||||
>
|
||||
<q-item-section class="text-grey-6">
|
||||
<q-item-label>{{ col.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section class="text-dark">
|
||||
<q-item-label>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
<div class="col text-grey-6">
|
||||
<div>{{ col.label }}</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>{{ col.value ? col.value : "-" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue