ปรับ toolbar
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
7c10c4a074
commit
954732b49c
4 changed files with 258 additions and 220 deletions
|
|
@ -144,7 +144,7 @@ onMounted(() => {
|
|||
รายการโครงการ/หลักสูตรการฝึกอบรมที่หน่วยงานของกรุงเทพมหานครเป็นผู้จัด
|
||||
</div>
|
||||
<q-card flat bordered class="q-pa-md">
|
||||
<q-toolbar style="padding: 0px">
|
||||
<q-toolbar style="padding: 0">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formQuery.year"
|
||||
|
|
@ -177,75 +177,95 @@ onMounted(() => {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="add"
|
||||
color="primary"
|
||||
@click="onClickAddOrView()"
|
||||
>
|
||||
<q-tooltip>เพิ่ม</q-tooltip>
|
||||
</q-btn>
|
||||
<q-space />
|
||||
<div class="row q-gutter-sm">
|
||||
<q-toolbar-title>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="blue"
|
||||
icon="mdi-arrow-down-bold-circle-outline"
|
||||
dense
|
||||
icon="add"
|
||||
color="primary"
|
||||
@click="onClickAddOrView()"
|
||||
>
|
||||
<q-menu>
|
||||
<q-list style="min-width: 100px" dense>
|
||||
<q-item clickable v-close-popup v-for="items in itemDownload">
|
||||
<q-item-section avatar>
|
||||
<q-icon :color="items.color" :name="items.icon" />
|
||||
</q-item-section>
|
||||
<q-item-section :class="`text-${items.color}`">{{
|
||||
items.label
|
||||
}}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
<q-tooltip>ดาวน์โหลด</q-tooltip>
|
||||
<q-tooltip>เพิ่ม</q-tooltip>
|
||||
</q-btn>
|
||||
</q-toolbar-title>
|
||||
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="formQuery.keyword"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
placeholder="ค้นหา"
|
||||
@keyup.enter="fetchListProject"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="formQuery.keyword == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="formQuery.keyword !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="(formQuery.keyword = ''), fetchListProject()"
|
||||
/>
|
||||
</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"
|
||||
/>
|
||||
<q-space />
|
||||
<div class="row q-gutter-sm">
|
||||
<div>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="blue"
|
||||
icon="mdi-arrow-down-bold-circle-outline"
|
||||
>
|
||||
<q-menu>
|
||||
<q-list style="min-width: 100px" dense>
|
||||
<q-item clickable v-close-popup v-for="items in itemDownload">
|
||||
<q-item-section avatar>
|
||||
<q-icon :color="items.color" :name="items.icon" />
|
||||
</q-item-section>
|
||||
<q-item-section :class="`text-${items.color}`">{{
|
||||
items.label
|
||||
}}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
<q-tooltip>ดาวน์โหลด</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<div>
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="formQuery.keyword"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
placeholder="ค้นหา"
|
||||
@keyup.enter="fetchListProject"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="formQuery.keyword == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="formQuery.keyword !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="(formQuery.keyword = ''), fetchListProject()"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
</q-toolbar>
|
||||
<!-- <q-toolbar class="q-gutter-x-sm" style="padding: 0px">
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
||||
<q-space />
|
||||
|
||||
<div class="row q-gutter-md">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</q-toolbar> -->
|
||||
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
|
|
|
|||
|
|
@ -158,46 +158,52 @@ onMounted(() => {
|
|||
รายการข้าราชการฯที่ได้รับทุนการศึกษา/ฝึกอบรม
|
||||
</div>
|
||||
<q-card flat bordered class="q-pa-md">
|
||||
<q-toolbar style="padding: 0px">
|
||||
<q-toolbar class="q-pa-none">
|
||||
<div class="row q-gutter-sm">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formFilter.year"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
lazy-rules
|
||||
outlined
|
||||
:model-value="Number(formFilter.year) + 543"
|
||||
: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
|
||||
dense
|
||||
outlined
|
||||
v-model="formFilter.type"
|
||||
:options="options"
|
||||
label="เลือกประเภททุน"
|
||||
/>
|
||||
<div>
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formFilter.year"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
lazy-rules
|
||||
outlined
|
||||
:model-value="Number(formFilter.year) + 543"
|
||||
:label="`${'ปีงบประมาณ'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div>
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
v-model="formFilter.type"
|
||||
:options="options"
|
||||
label="เลือกประเภททุน"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-toolbar-title>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
|
|
@ -208,65 +214,68 @@ onMounted(() => {
|
|||
>
|
||||
<q-tooltip>เพิ่ม</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-toolbar-title>
|
||||
|
||||
<q-space />
|
||||
<div class="row q-gutter-sm">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="blue"
|
||||
icon="mdi-arrow-down-bold-circle-outline"
|
||||
>
|
||||
<q-menu>
|
||||
<q-list style="min-width: 100px" dense>
|
||||
<q-item clickable v-close-popup v-for="items in itemDownload">
|
||||
<q-item-section avatar>
|
||||
<q-icon :color="items.color" :name="items.icon" />
|
||||
</q-item-section>
|
||||
<q-item-section :class="`text-${items.color}`">{{
|
||||
items.label
|
||||
}}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
<q-tooltip>ดาวน์โหลด</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="formFilter.keyword"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="formFilter.keyword == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="formFilter.keyword !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="formFilter.keyword = ''"
|
||||
/>
|
||||
</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-btn
|
||||
flat
|
||||
round
|
||||
color="blue"
|
||||
icon="mdi-arrow-down-bold-circle-outline"
|
||||
>
|
||||
<q-menu>
|
||||
<q-list style="min-width: 100px" dense>
|
||||
<q-item clickable v-close-popup v-for="items in itemDownload">
|
||||
<q-item-section avatar>
|
||||
<q-icon :color="items.color" :name="items.icon" />
|
||||
</q-item-section>
|
||||
<q-item-section :class="`text-${items.color}`">{{
|
||||
items.label
|
||||
}}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
<q-tooltip>ดาวน์โหลด</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<div>
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="formFilter.keyword"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
placeholder="ค้นหา"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="formFilter.keyword == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="formFilter.keyword !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="formFilter.keyword = ''"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
</q-toolbar>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue