ui การพัฒนารายบุคคล (Individual Development Plan) / แก้ แสดง ไม่พบข้อมูล

This commit is contained in:
STW_TTTY\stwtt 2024-08-26 10:11:55 +07:00
parent 68a9efee60
commit 890a5214c5
16 changed files with 1500 additions and 1044 deletions

View file

@ -295,96 +295,101 @@ onMounted(() => {
:display-value="$q.lang.table.columns"
/>
</q-toolbar>
<d-table
flat
dense
bordered
virtual-scroll
:rows="rows"
:columns="columns"
:grid="!mode"
:filter="filter"
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<div v-if="rows.length != 0">
<d-table
flat
dense
bordered
virtual-scroll
:rows="rows"
:columns="columns"
:grid="!mode"
:filter="filter"
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-if="mode" v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="(col, index) in props.cols" :key="col.name">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'status'">
{{ props.row.status ? props.row.status : "-" }}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="onHistory(props.row.id)"
>
<q-tooltip>ประวแกไขว</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-else v-slot:item="props">
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
<q-card bordered flat>
<q-list dense class="q-mt-lg relative-position">
<template v-if="mode" v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="(col, index) in props.cols" :key="col.name">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'status'">
{{ props.row.status ? props.row.status : "-" }}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
<q-td auto-width>
<q-btn
icon="mdi-history"
color="info"
flat
dense
round
size="14px"
class="absolute_button"
icon="mdi-history"
@click="onHistory(props.row.id)"
>
<q-tooltip>ประวแกไขว</q-tooltip>
</q-btn>
<q-item v-for="col in props.cols" :key="col.name">
<q-item-section class="fix_top">
<q-item-label class="text-grey-6 text-weight-medium">{{
col.label
}}</q-item-label>
</q-item-section>
<q-item-section class="fix_top">
<q-item-label class="text-dark text-weight-medium">{{
col.value ? col.value : "-"
}}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
<template v-slot:no-data>
<div
</q-td>
</q-tr>
</template>
<template v-else v-slot:item="props">
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
<q-card bordered flat>
<q-list dense class="q-mt-lg relative-position">
<q-btn
icon="mdi-history"
color="info"
flat
dense
round
size="14px"
class="absolute_button"
@click="onHistory(props.row.id)"
>
<q-tooltip>ประวแกไขว</q-tooltip>
</q-btn>
<q-item v-for="col in props.cols" :key="col.name">
<q-item-section class="fix_top">
<q-item-label class="text-grey-6 text-weight-medium">{{
col.label
}}</q-item-label>
</q-item-section>
<q-item-section class="fix_top">
<q-item-label class="text-dark text-weight-medium">{{
col.value ? col.value : "-"
}}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
</d-table>
</div>
<div v-else>
<div class="col-12">
<q-card
class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
bordered
>
<span> ไมพบขอม </span>
</div>
</template>
</d-table>
ไมพบขอม
</q-card>
</div>
</div>
</div>
<DialogHistory
v-model:modal="modalHistory"

View file

@ -339,124 +339,128 @@ onMounted(() => {
:display-value="$q.lang.table.columns"
/>
</q-toolbar>
<div v-if="rows.length != 0">
<d-table
flat
dense
bordered
virtual-scroll
:rows="rows"
:columns="columns"
:grid="!mode"
:filter="filter"
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<d-table
flat
dense
bordered
virtual-scroll
:rows="rows"
:columns="columns"
:grid="!mode"
:filter="filter"
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-if="mode" v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="(col, index) in props.cols" :key="col.name">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'dateLeave'">
{{
dateThaiRange([
props.row.dateStartLeave,
props.row.dateEndLeave,
])
}}
</div>
<div v-else-if="col.name == 'status'">
{{ props.row.status ? statusLeave(props.row.status) : "-" }}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="onHistory(props.row.id)"
>
<q-tooltip>ประวแกไขการลา</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-else v-slot:item="props">
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
<q-card bordered flat>
<q-list dense class="q-mt-lg relative-position">
<template v-if="mode" v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="(col, index) in props.cols" :key="col.name">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'dateLeave'">
{{
dateThaiRange([
props.row.dateStartLeave,
props.row.dateEndLeave,
])
}}
</div>
<div v-else-if="col.name == 'status'">
{{ props.row.status ? statusLeave(props.row.status) : "-" }}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
<q-td auto-width>
<q-btn
icon="mdi-history"
color="info"
flat
dense
round
size="14px"
class="absolute_button"
icon="mdi-history"
@click="onHistory(props.row.id)"
>
<q-tooltip>ประวแกไขการลา</q-tooltip>
</q-btn>
<q-item v-for="col in props.cols" :key="col.name">
<q-item-section class="fix_top">
<q-item-label class="text-grey-6 text-weight-medium">{{
col.label
}}</q-item-label>
</q-item-section>
<q-item-section class="fix_top">
<q-item-label
v-if="col.name == 'dateLeave'"
class="text-dark text-weight-medium"
>
{{
dateThaiRange([
props.row.dateStartLeave,
props.row.dateEndLeave,
])
}}</q-item-label
>
<q-item-label
v-else-if="col.name == 'status'"
class="text-dark text-weight-medium"
>
{{
props.row.status ? statusLeave(props.row.status) : "-"
}}</q-item-label
>
<q-item-label v-else class="text-dark text-weight-medium">{{
col.value ? col.value : "-"
}}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
<template v-slot:no-data>
<div
</q-td>
</q-tr>
</template>
<template v-else v-slot:item="props">
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
<q-card bordered flat>
<q-list dense class="q-mt-lg relative-position">
<q-btn
icon="mdi-history"
color="info"
flat
dense
round
size="14px"
class="absolute_button"
@click="onHistory(props.row.id)"
>
<q-tooltip>ประวแกไขการลา</q-tooltip>
</q-btn>
<q-item v-for="col in props.cols" :key="col.name">
<q-item-section class="fix_top">
<q-item-label class="text-grey-6 text-weight-medium">{{
col.label
}}</q-item-label>
</q-item-section>
<q-item-section class="fix_top">
<q-item-label
v-if="col.name == 'dateLeave'"
class="text-dark text-weight-medium"
>
{{
dateThaiRange([
props.row.dateStartLeave,
props.row.dateEndLeave,
])
}}</q-item-label
>
<q-item-label
v-else-if="col.name == 'status'"
class="text-dark text-weight-medium"
>
{{
props.row.status ? statusLeave(props.row.status) : "-"
}}</q-item-label
>
<q-item-label v-else class="text-dark text-weight-medium">{{
col.value ? col.value : "-"
}}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
</d-table>
</div>
<div v-else>
<div class="col-12">
<q-card
class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
bordered
>
<span> ไมพบขอม </span>
</div>
</template>
</d-table>
ไมพบขอม
</q-card>
</div>
</div>
</div>
<DialogHistory
v-model:modal="modalHistory"

View file

@ -298,96 +298,101 @@ onMounted(() => {
:display-value="$q.lang.table.columns"
/>
</q-toolbar>
<d-table
flat
dense
bordered
virtual-scroll
:rows="rows"
:columns="columns"
:grid="!mode"
:filter="filter"
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<div v-if="rows.length != 0">
<d-table
flat
dense
bordered
virtual-scroll
:rows="rows"
:columns="columns"
:grid="!mode"
:filter="filter"
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-if="mode" v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="(col, index) in props.cols" :key="col.name">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'status'">
{{ props.row.status ? props.row.status : "-" }}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="onHistory(props.row.id)"
>
<q-tooltip>ประวแกไขปฏราชการพเศษ</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-else v-slot:item="props">
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
<q-card bordered flat>
<q-list dense class="q-mt-lg relative-position">
<template v-if="mode" v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="(col, index) in props.cols" :key="col.name">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'status'">
{{ props.row.status ? props.row.status : "-" }}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
<q-td auto-width>
<q-btn
icon="mdi-history"
color="info"
flat
dense
round
size="14px"
class="absolute_button"
icon="mdi-history"
@click="onHistory(props.row.id)"
>
<q-tooltip>ประวแกไขปฏราชการพเศษ</q-tooltip>
</q-btn>
<q-item v-for="col in props.cols" :key="col.name">
<q-item-section class="fix_top">
<q-item-label class="text-grey-6 text-weight-medium">{{
col.label
}}</q-item-label>
</q-item-section>
<q-item-section class="fix_top">
<q-item-label class="text-dark text-weight-medium">{{
col.value ? col.value : "-"
}}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
<template v-slot:no-data>
<div
</q-td>
</q-tr>
</template>
<template v-else v-slot:item="props">
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
<q-card bordered flat>
<q-list dense class="q-mt-lg relative-position">
<q-btn
icon="mdi-history"
color="info"
flat
dense
round
size="14px"
class="absolute_button"
@click="onHistory(props.row.id)"
>
<q-tooltip>ประวแกไขปฏราชการพเศษ</q-tooltip>
</q-btn>
<q-item v-for="col in props.cols" :key="col.name">
<q-item-section class="fix_top">
<q-item-label class="text-grey-6 text-weight-medium">{{
col.label
}}</q-item-label>
</q-item-section>
<q-item-section class="fix_top">
<q-item-label class="text-dark text-weight-medium">{{
col.value ? col.value : "-"
}}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
</d-table>
</div>
<div v-else>
<div class="col-12">
<q-card
class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
bordered
>
<span> ไมพบขอม </span>
</div>
</template>
</d-table>
ไมพบขอม
</q-card>
</div>
</div>
</div>
<DialogHistory
v-model:modal="modalHistory"