ปรับ responsive

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

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