ปรับ ui
This commit is contained in:
STW_TTTY\stwtt
parent
cf6aae6bdd
commit
1dfc67566d
2 changed files with 132 additions and 210 deletions
|
|
@ -260,157 +260,130 @@ onMounted(async () => {
|
|||
</div>
|
||||
<div class="col-xs-12 col-sm-9 q-pa-md row">
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm items-center q-mb-sm">
|
||||
<div
|
||||
:class="`${
|
||||
$q.screen.gt.md ? '' : 'col-12'
|
||||
} row q-gutter-sm no-wrap`"
|
||||
<div class="row q-col-gutter-sm items-center q-mb-sm no-wrap">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="year"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
style="width: 150px"
|
||||
@update:model-value="fetchListProjectNew"
|
||||
>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="add"
|
||||
color="primary"
|
||||
@click="onClickAddOrView()"
|
||||
v-if="!$q.screen.gt.md"
|
||||
>
|
||||
<q-tooltip>เพิ่ม</q-tooltip>
|
||||
</q-btn>
|
||||
<q-space v-if="!$q.screen.gt.md" />
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="year"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
style="width: 150px"
|
||||
@update:model-value="fetchListProjectNew"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:model-value="year === null ? 'ทั้งหมด' : Number(year) + 543"
|
||||
:label="`${'ปีงบประมาณ'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
<template v-if="year" v-slot:append>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="
|
||||
(year = null),
|
||||
(nodeData.page = 1),
|
||||
fetchListProjectNew()
|
||||
"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
v-model="nodeData.round"
|
||||
:options="roundOp"
|
||||
label="รอบการประเมิน"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
@update:model-value="fetchListProjectNew"
|
||||
style="min-width: 120px"
|
||||
>
|
||||
<template v-if="nodeData.round" v-slot:append>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="
|
||||
(nodeData.round = ''), fetchListProjectNew()
|
||||
"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:model-value="year === null ? 'ทั้งหมด' : Number(year) + 543"
|
||||
:label="`${'ปีงบประมาณ'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
<template v-if="year" v-slot:append>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="
|
||||
(year = null), (nodeData.page = 1), fetchListProjectNew()
|
||||
"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
v-model="nodeData.round"
|
||||
:options="roundOp"
|
||||
label="รอบการประเมิน"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
@update:model-value="fetchListProjectNew"
|
||||
style="min-width: 120px"
|
||||
>
|
||||
<template v-if="nodeData.round" v-slot:append>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="
|
||||
(nodeData.round = ''), fetchListProjectNew()
|
||||
"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="add"
|
||||
color="primary"
|
||||
@click="onClickAddOrView()"
|
||||
v-if="$q.screen.gt.md"
|
||||
>
|
||||
<q-tooltip>เพิ่ม</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="add"
|
||||
color="primary"
|
||||
@click="onClickAddOrView()"
|
||||
>
|
||||
<q-tooltip>เพิ่ม</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<q-space />
|
||||
<div
|
||||
:class="`${
|
||||
$q.screen.gt.md ? '' : 'col-12'
|
||||
} row q-gutter-sm no-wrap`"
|
||||
|
||||
<q-checkbox
|
||||
keep-color
|
||||
v-model="isAll"
|
||||
label="แสดงทั้งหมด"
|
||||
color="primary"
|
||||
@update:model-value="fetchListProjectNew"
|
||||
>
|
||||
<q-checkbox
|
||||
keep-color
|
||||
v-model="isAll"
|
||||
label="แสดงตำแหน่งทั้งหมด"
|
||||
color="primary"
|
||||
@update:model-value="fetchListProjectNew"
|
||||
<q-tooltip
|
||||
>แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
|
||||
>
|
||||
<q-tooltip
|
||||
>แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
|
||||
>
|
||||
</q-checkbox>
|
||||
<q-space v-if="!$q.screen.gt.md" />
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="nodeData.keyword"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
style="width: 150px"
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.prevent="fetchListProjectNew"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="nodeData.keyword == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="nodeData.keyword !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="clearFilter"
|
||||
/>
|
||||
</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: 120px"
|
||||
/>
|
||||
</div>
|
||||
</q-checkbox>
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="nodeData.keyword"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
style="width: 150px"
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.prevent="fetchListProjectNew"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="nodeData.keyword == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="nodeData.keyword !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="clearFilter"
|
||||
/>
|
||||
</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: 120px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
|
|
|
|||
|
|
@ -245,57 +245,9 @@ onMounted(async () => {
|
|||
รายการตัวชี้วัดตามตำแหน่ง
|
||||
</div>
|
||||
<q-card flat bordered class="q-pa-md">
|
||||
<div class="row q-mb-sm">
|
||||
<div class="col-12 row q-mb-sm" v-if="!$q.screen.gt.md">
|
||||
|
||||
<div class="row q-gutter-sm no-wrap q-mb-sm">
|
||||
<q-select
|
||||
dense
|
||||
:model-value="formFilter.position"
|
||||
label="ตำแหน่ง"
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
fill-input
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
class="inputgreen"
|
||||
:options="positionOp"
|
||||
use-input
|
||||
@input-value="setModel"
|
||||
@filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
|
||||
@update:model-value="fetchList"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
<template v-if="formFilter.position" v-slot:append>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="
|
||||
formFilter.position = '';
|
||||
fetchList();
|
||||
"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="add"
|
||||
color="primary"
|
||||
@click="onClickAddOrView()"
|
||||
>
|
||||
<q-tooltip>เพิ่ม</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="row q-gutter-sm">
|
||||
<q-select
|
||||
v-if="$q.screen.gt.md"
|
||||
dense
|
||||
:model-value="formFilter.position"
|
||||
label="ตำแหน่ง"
|
||||
|
|
@ -397,22 +349,19 @@ onMounted(async () => {
|
|||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
|
||||
<q-btn
|
||||
v-if="$q.screen.gt.md"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="add"
|
||||
color="primary"
|
||||
@click="onClickAddOrView()"
|
||||
>
|
||||
<q-tooltip>เพิ่ม</q-tooltip>
|
||||
</q-btn>
|
||||
<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-space />
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
|
|
@ -449,7 +398,7 @@ onMounted(async () => {
|
|||
style="min-width: 150px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue