ปรับTab ข้อมูลหลัก
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
ecd6c890ae
commit
e6538a3e4f
3 changed files with 171 additions and 77 deletions
|
|
@ -18,67 +18,137 @@
|
||||||
class="q-py-xs col-6 row"
|
class="q-py-xs col-6 row"
|
||||||
/>
|
/>
|
||||||
</q-tabs>
|
</q-tabs>
|
||||||
<q-table
|
<q-separator />
|
||||||
ref="table"
|
|
||||||
flat
|
<q-tab-panels v-model="currentTab" animated>
|
||||||
bordered
|
<q-tab-panel name="normal">
|
||||||
class="custom-header-table"
|
<q-table
|
||||||
virtual-scroll
|
ref="table"
|
||||||
:rows="calendarData"
|
flat
|
||||||
:columns="columns"
|
bordered
|
||||||
dense
|
class="custom-header-table"
|
||||||
:rows-per-page-options="[0]"
|
virtual-scroll
|
||||||
hide-header
|
:rows="calendarData"
|
||||||
>
|
:columns="columns"
|
||||||
<template v-slot:body="props">
|
dense
|
||||||
<q-tr :props="props">
|
:rows-per-page-options="[0]"
|
||||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
hide-header
|
||||||
<div v-if="col.name == 'week'" class="">
|
>
|
||||||
{{ dayThaiRange(props.row.dateRange) }}
|
<template v-slot:body="props">
|
||||||
</div>
|
<q-tr :props="props">
|
||||||
<div v-else-if="col.name == 'holidayDate'" class="">
|
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
{{ dateThaiRange(props.row.dateRange) }}
|
<div v-if="col.name == 'week'" class="">
|
||||||
</div>
|
{{ dayThaiRange(props.row.dateRange) }}
|
||||||
<div v-else class="my-table-details">
|
</div>
|
||||||
{{ col.value }}
|
<div v-else-if="col.name == 'holidayDate'" class="">
|
||||||
</div>
|
{{ dateThaiRange(props.row.dateRange) }}
|
||||||
</q-td>
|
</div>
|
||||||
<q-td auto-width>
|
<div v-else class="my-table-details">
|
||||||
<q-btn
|
{{ col.value }}
|
||||||
flat
|
</div>
|
||||||
round
|
</q-td>
|
||||||
color="grey"
|
<q-td auto-width>
|
||||||
@click.stop
|
<q-btn
|
||||||
size="10px"
|
flat
|
||||||
icon="more_vert"
|
round
|
||||||
>
|
color="grey"
|
||||||
<q-menu>
|
@click.stop
|
||||||
<q-list>
|
size="10px"
|
||||||
<q-item
|
icon="more_vert"
|
||||||
clickable
|
>
|
||||||
v-close-popup
|
<q-menu>
|
||||||
@click="editCalendar(props.row)"
|
<q-list>
|
||||||
>
|
<q-item
|
||||||
<q-item-section>
|
clickable
|
||||||
<q-item-label>แก้ไขวันหยุด</q-item-label>
|
v-close-popup
|
||||||
</q-item-section>
|
@click="editCalendar(props.row)"
|
||||||
</q-item>
|
>
|
||||||
<q-item
|
<q-item-section>
|
||||||
clickable
|
<q-item-label>แก้ไขวันหยุด</q-item-label>
|
||||||
v-close-popup
|
</q-item-section>
|
||||||
@click="deleteClick(props.row)"
|
</q-item>
|
||||||
>
|
<q-item
|
||||||
<q-item-section>
|
clickable
|
||||||
<q-item-label>ลบวันหยุด</q-item-label>
|
v-close-popup
|
||||||
</q-item-section>
|
@click="deleteClick(props.row)"
|
||||||
</q-item>
|
>
|
||||||
</q-list>
|
<q-item-section>
|
||||||
</q-menu>
|
<q-item-label>ลบวันหยุด</q-item-label>
|
||||||
</q-btn>
|
</q-item-section>
|
||||||
</q-td>
|
</q-item>
|
||||||
</q-tr>
|
</q-list>
|
||||||
</template>
|
</q-menu>
|
||||||
</q-table>
|
</q-btn>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</q-table>
|
||||||
|
</q-tab-panel>
|
||||||
|
|
||||||
|
<q-tab-panel name="6day">
|
||||||
|
<q-table
|
||||||
|
ref="table"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
class="custom-header-table"
|
||||||
|
virtual-scroll
|
||||||
|
:rows="calendarData"
|
||||||
|
:columns="columns"
|
||||||
|
dense
|
||||||
|
:rows-per-page-options="[0]"
|
||||||
|
hide-header
|
||||||
|
>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
|
<div v-if="col.name == 'week'" class="">
|
||||||
|
{{ dayThaiRange(props.row.dateRange) }}
|
||||||
|
</div>
|
||||||
|
<div v-else-if="col.name == 'holidayDate'" class="">
|
||||||
|
{{ dateThaiRange(props.row.dateRange) }}
|
||||||
|
</div>
|
||||||
|
<div v-else class="my-table-details">
|
||||||
|
{{ col.value }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
<q-td auto-width>
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
color="grey"
|
||||||
|
@click.stop
|
||||||
|
size="10px"
|
||||||
|
icon="more_vert"
|
||||||
|
>
|
||||||
|
<q-menu>
|
||||||
|
<q-list>
|
||||||
|
<q-item
|
||||||
|
clickable
|
||||||
|
v-close-popup
|
||||||
|
@click="editCalendar(props.row)"
|
||||||
|
>
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label>แก้ไขวันหยุด</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item
|
||||||
|
clickable
|
||||||
|
v-close-popup
|
||||||
|
@click="deleteClick(props.row)"
|
||||||
|
>
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label>ลบวันหยุด</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-menu>
|
||||||
|
</q-btn>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</q-table>
|
||||||
|
</q-tab-panel>
|
||||||
|
</q-tab-panels>
|
||||||
</q-card>
|
</q-card>
|
||||||
|
|
||||||
<!-- modal เพิ่มวันหยุด -->
|
<!-- modal เพิ่มวันหยุด -->
|
||||||
|
|
|
||||||
|
|
@ -50,17 +50,32 @@ onMounted(() => {
|
||||||
class="q-py-xs"
|
class="q-py-xs"
|
||||||
/>
|
/>
|
||||||
</q-tabs>
|
</q-tabs>
|
||||||
<q-separator size="2px" />
|
<q-separator />
|
||||||
<!-- person -->
|
<!-- person -->
|
||||||
<div class="q-pa-md">
|
|
||||||
<ListPrefix v-if="currentTab == 'list_prefix'" />
|
<q-tab-panels v-model="currentTab" animated>
|
||||||
<ListRank v-if="currentTab == 'list_rank'" />
|
<q-tab-panel name="list_prefix">
|
||||||
<ListBloodGroup v-if="currentTab == 'list_bloodGroup'" />
|
<ListPrefix v-if="currentTab == 'list_prefix'" />
|
||||||
<ListGender v-if="currentTab == 'list_gender'" />
|
</q-tab-panel>
|
||||||
<ListReligion v-if="currentTab == 'list_religion'" />
|
<q-tab-panel name="list_rank">
|
||||||
<ListRelationship v-if="currentTab == 'list_relationship'" />
|
<ListRank v-if="currentTab == 'list_rank'" />
|
||||||
<ListEducation v-if="currentTab == 'list_education'" />
|
</q-tab-panel>
|
||||||
</div>
|
<q-tab-panel name="list_bloodGroup">
|
||||||
|
<ListBloodGroup v-if="currentTab == 'list_bloodGroup'" />
|
||||||
|
</q-tab-panel>
|
||||||
|
<q-tab-panel name="list_gender">
|
||||||
|
<ListGender v-if="currentTab == 'list_gender'" />
|
||||||
|
</q-tab-panel>
|
||||||
|
<q-tab-panel name="list_religion">
|
||||||
|
<ListReligion v-if="currentTab == 'list_religion'" />
|
||||||
|
</q-tab-panel>
|
||||||
|
<q-tab-panel name="list_relationship">
|
||||||
|
<ListRelationship v-if="currentTab == 'list_relationship'" />
|
||||||
|
</q-tab-panel>
|
||||||
|
<q-tab-panel name="list_education">
|
||||||
|
<ListEducation v-if="currentTab == 'list_education'" />
|
||||||
|
</q-tab-panel>
|
||||||
|
</q-tab-panels>
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
</q-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -41,12 +41,21 @@ onMounted(() => {
|
||||||
class="q-py-xs"
|
class="q-py-xs"
|
||||||
/>
|
/>
|
||||||
</q-tabs>
|
</q-tabs>
|
||||||
<q-separator size="2px" />
|
<q-separator />
|
||||||
<div class="q-pa-md">
|
|
||||||
<ListPosition v-if="store.pathLocation == 'list_position'" />
|
<q-tab-panels v-model="store.pathLocation" animated>
|
||||||
<ListType v-if="store.pathLocation == 'list_type'" />
|
<q-tab-panel name="list_position">
|
||||||
<ListExecutive v-if="store.pathLocation == 'list_executive'" />
|
<ListPosition v-if="store.pathLocation == 'list_position'" />
|
||||||
</div>
|
</q-tab-panel>
|
||||||
|
|
||||||
|
<q-tab-panel name="list_type">
|
||||||
|
<ListType v-if="store.pathLocation == 'list_type'" />
|
||||||
|
</q-tab-panel>
|
||||||
|
|
||||||
|
<q-tab-panel name="list_executive">
|
||||||
|
<ListExecutive v-if="store.pathLocation == 'list_executive'" />
|
||||||
|
</q-tab-panel>
|
||||||
|
</q-tab-panels>
|
||||||
</q-card>
|
</q-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue