ui การพัฒนารายบุคคล (Individual Development Plan) / แก้ แสดง ไม่พบข้อมูล
This commit is contained in:
STW_TTTY\stwtt
parent
68a9efee60
commit
890a5214c5
16 changed files with 1500 additions and 1044 deletions
|
|
@ -246,93 +246,98 @@ onMounted(() => {
|
||||||
:display-value="$q.lang.table.columns"
|
:display-value="$q.lang.table.columns"
|
||||||
/>
|
/>
|
||||||
</q-toolbar>
|
</q-toolbar>
|
||||||
<d-table
|
<div v-if="rows.length != 0">
|
||||||
flat
|
<d-table
|
||||||
dense
|
flat
|
||||||
bordered
|
dense
|
||||||
virtual-scroll
|
bordered
|
||||||
:rows="rows"
|
virtual-scroll
|
||||||
:columns="columns"
|
:rows="rows"
|
||||||
:grid="!mode"
|
:columns="columns"
|
||||||
:filter="filter"
|
:grid="!mode"
|
||||||
:rows-per-page-options="[10, 25, 50, 100]"
|
:filter="filter"
|
||||||
:visible-columns="visibleColumns"
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
:virtual-scroll-sticky-size-start="48"
|
:visible-columns="visibleColumns"
|
||||||
>
|
:virtual-scroll-sticky-size-start="48"
|
||||||
<template v-slot:header="props">
|
>
|
||||||
<q-tr :props="props">
|
<template v-slot:header="props">
|
||||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
<q-tr :props="props">
|
||||||
<span class="text-weight-medium">{{ col.label }}</span>
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
</q-th>
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
<q-th auto-width />
|
</q-th>
|
||||||
</q-tr>
|
<q-th auto-width />
|
||||||
</template>
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
|
||||||
<template v-if="mode" v-slot:body="props">
|
<template v-if="mode" v-slot:body="props">
|
||||||
<q-tr :props="props" class="cursor-pointer">
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
||||||
<div v-if="col.name == 'no'">
|
<div v-if="col.name == 'no'">
|
||||||
{{ props.rowIndex + 1 }}
|
{{ props.rowIndex + 1 }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
{{ col.value ? col.value : "-" }}
|
{{ col.value ? col.value : "-" }}
|
||||||
</div>
|
</div>
|
||||||
</q-td>
|
</q-td>
|
||||||
<q-td auto-width>
|
<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">
|
|
||||||
<q-btn
|
<q-btn
|
||||||
icon="mdi-history"
|
|
||||||
color="info"
|
color="info"
|
||||||
flat
|
flat
|
||||||
dense
|
dense
|
||||||
round
|
round
|
||||||
size="14px"
|
size="14px"
|
||||||
class="absolute_button"
|
icon="mdi-history"
|
||||||
@click="onHistory(props.row.id)"
|
@click="onHistory(props.row.id)"
|
||||||
>
|
>
|
||||||
<q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
|
<q-tooltip>ดูประวัติการเปลี่ยนชื่อ-นามสกุล</q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
<q-item v-for="col in props.cols" :key="col.name">
|
</q-td>
|
||||||
<q-item-section>
|
</q-tr>
|
||||||
<q-item-label class="text-grey-6 text-weight-medium">{{
|
</template>
|
||||||
col.label
|
<template v-else v-slot:item="props">
|
||||||
}}</q-item-label>
|
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
|
||||||
</q-item-section>
|
<q-card bordered flat>
|
||||||
<q-item-section>
|
<q-list dense class="q-mt-lg relative-position">
|
||||||
<q-item-label class="text-dark text-weight-medium">{{
|
<q-btn
|
||||||
col.value ? col.value : "-"
|
icon="mdi-history"
|
||||||
}}</q-item-label>
|
color="info"
|
||||||
</q-item-section>
|
flat
|
||||||
</q-item>
|
dense
|
||||||
</q-list>
|
round
|
||||||
</q-card>
|
size="14px"
|
||||||
</div>
|
class="absolute_button"
|
||||||
</template>
|
@click="onHistory(props.row.id)"
|
||||||
<template v-slot:no-data>
|
>
|
||||||
<div
|
<q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-item v-for="col in props.cols" :key="col.name">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label class="text-grey-6 text-weight-medium">{{
|
||||||
|
col.label
|
||||||
|
}}</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<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"
|
class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
|
||||||
|
bordered
|
||||||
>
|
>
|
||||||
<span> ไม่พบข้อมูล </span>
|
ไม่พบข้อมูล
|
||||||
</div>
|
</q-card>
|
||||||
</template>
|
</div>
|
||||||
</d-table>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<DialogHistory
|
<DialogHistory
|
||||||
v-model:modal="modalHistory"
|
v-model:modal="modalHistory"
|
||||||
|
|
|
||||||
|
|
@ -263,7 +263,7 @@ onMounted(() => {
|
||||||
!checkCoupleData &&
|
!checkCoupleData &&
|
||||||
!checkChildData
|
!checkChildData
|
||||||
"
|
"
|
||||||
class="col-12 q-pa-sm"
|
class="col-12"
|
||||||
>
|
>
|
||||||
<q-card
|
<q-card
|
||||||
class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
|
class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
|
||||||
|
|
|
||||||
|
|
@ -522,96 +522,101 @@ onMounted(() => {
|
||||||
:display-value="$q.lang.table.columns"
|
:display-value="$q.lang.table.columns"
|
||||||
/>
|
/>
|
||||||
</q-toolbar>
|
</q-toolbar>
|
||||||
<d-table
|
<div v-if="rows.length != 0">
|
||||||
flat
|
<d-table
|
||||||
dense
|
flat
|
||||||
bordered
|
dense
|
||||||
virtual-scroll
|
bordered
|
||||||
:rows="rows"
|
virtual-scroll
|
||||||
:columns="columns"
|
:rows="rows"
|
||||||
:grid="!mode"
|
:columns="columns"
|
||||||
:filter="filter"
|
:grid="!mode"
|
||||||
:rows-per-page-options="[10, 25, 50, 100]"
|
:filter="filter"
|
||||||
:visible-columns="visibleColumns"
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
:virtual-scroll-sticky-size-start="48"
|
:visible-columns="visibleColumns"
|
||||||
>
|
:virtual-scroll-sticky-size-start="48"
|
||||||
<template v-slot:header="props">
|
>
|
||||||
<q-tr :props="props">
|
<template v-slot:header="props">
|
||||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
<q-tr :props="props">
|
||||||
<span class="text-weight-medium">{{ col.label }}</span>
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
</q-th>
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
<q-th auto-width />
|
</q-th>
|
||||||
</q-tr>
|
<q-th auto-width />
|
||||||
</template>
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
|
||||||
<template v-if="mode" v-slot:body="props">
|
<template v-if="mode" v-slot:body="props">
|
||||||
<q-tr :props="props" class="cursor-pointer">
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
||||||
<div v-if="col.name == 'no'">
|
<div v-if="col.name == 'no'">
|
||||||
{{ props.rowIndex + 1 }}
|
{{ props.rowIndex + 1 }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="col.name == 'status'">
|
<div v-else-if="col.name == 'status'">
|
||||||
{{ props.row.status ? props.row.status : "-" }}
|
{{ props.row.status ? props.row.status : "-" }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
{{ col.value }}
|
{{ col.value }}
|
||||||
</div>
|
</div>
|
||||||
</q-td>
|
</q-td>
|
||||||
<q-td auto-width>
|
<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">
|
|
||||||
<q-btn
|
<q-btn
|
||||||
icon="mdi-history"
|
|
||||||
color="info"
|
color="info"
|
||||||
flat
|
flat
|
||||||
dense
|
dense
|
||||||
round
|
round
|
||||||
size="14px"
|
size="14px"
|
||||||
class="absolute_button"
|
icon="mdi-history"
|
||||||
@click="onHistory(props.row.id)"
|
@click="onHistory(props.row.id)"
|
||||||
>
|
>
|
||||||
<q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
|
<q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
<q-item v-for="col in props.cols" :key="col.name">
|
</q-td>
|
||||||
<q-item-section class="fix_top">
|
</q-tr>
|
||||||
<q-item-label class="text-grey-6 text-weight-medium">{{
|
</template>
|
||||||
col.label
|
<template v-else v-slot:item="props">
|
||||||
}}</q-item-label>
|
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
|
||||||
</q-item-section>
|
<q-card bordered flat>
|
||||||
<q-item-section class="fix_top">
|
<q-list dense class="q-mt-lg relative-position">
|
||||||
<q-item-label class="text-dark text-weight-medium">{{
|
<q-btn
|
||||||
col.value ? col.value : "-"
|
icon="mdi-history"
|
||||||
}}</q-item-label>
|
color="info"
|
||||||
</q-item-section>
|
flat
|
||||||
</q-item>
|
dense
|
||||||
</q-list>
|
round
|
||||||
</q-card>
|
size="14px"
|
||||||
</div>
|
class="absolute_button"
|
||||||
</template>
|
@click="onHistory(props.row.id)"
|
||||||
<template v-slot:no-data>
|
>
|
||||||
<div
|
<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"
|
class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
|
||||||
|
bordered
|
||||||
>
|
>
|
||||||
<span> ไม่พบข้อมูล </span>
|
ไม่พบข้อมูล
|
||||||
</div>
|
</q-card>
|
||||||
</template>
|
</div>
|
||||||
</d-table>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<DialogHistory
|
<DialogHistory
|
||||||
v-model:modal="modalHistory"
|
v-model:modal="modalHistory"
|
||||||
|
|
|
||||||
|
|
@ -247,97 +247,102 @@ onMounted(() => {
|
||||||
:display-value="$q.lang.table.columns"
|
:display-value="$q.lang.table.columns"
|
||||||
/>
|
/>
|
||||||
</q-toolbar>
|
</q-toolbar>
|
||||||
<d-table
|
<div v-if="rows.length != 0">
|
||||||
flat
|
<d-table
|
||||||
dense
|
flat
|
||||||
bordered
|
dense
|
||||||
virtual-scroll
|
bordered
|
||||||
:rows="rows"
|
virtual-scroll
|
||||||
:columns="columns"
|
:rows="rows"
|
||||||
:grid="!mode"
|
:columns="columns"
|
||||||
:filter="filter"
|
:grid="!mode"
|
||||||
:rows-per-page-options="[10, 25, 50, 100]"
|
:filter="filter"
|
||||||
:visible-columns="visibleColumns"
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
:virtual-scroll-sticky-size-start="48"
|
:visible-columns="visibleColumns"
|
||||||
>
|
:virtual-scroll-sticky-size-start="48"
|
||||||
<template v-slot:header="props">
|
>
|
||||||
<q-tr :props="props">
|
<template v-slot:header="props">
|
||||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
<q-tr :props="props">
|
||||||
<span class="text-weight-medium">{{ col.label }}</span>
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
</q-th>
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
<q-th auto-width />
|
</q-th>
|
||||||
</q-tr>
|
<q-th auto-width />
|
||||||
</template>
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
|
||||||
<template v-if="mode" v-slot:body="props">
|
<template v-if="mode" v-slot:body="props">
|
||||||
<q-tr :props="props" class="cursor-pointer">
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
||||||
<div v-if="col.name == 'no'">
|
<div v-if="col.name == 'no'">
|
||||||
{{ props.rowIndex + 1 }}
|
{{ props.rowIndex + 1 }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="col.name == 'status'">
|
<div v-else-if="col.name == 'status'">
|
||||||
{{ props.row.status ? props.row.status : "-" }}
|
{{ props.row.status ? props.row.status : "-" }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
{{ col.value }}
|
{{ col.value }}
|
||||||
</div>
|
</div>
|
||||||
</q-td>
|
</q-td>
|
||||||
<q-td auto-width>
|
<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">
|
|
||||||
<q-btn
|
<q-btn
|
||||||
icon="mdi-history"
|
|
||||||
color="info"
|
color="info"
|
||||||
flat
|
flat
|
||||||
dense
|
dense
|
||||||
round
|
round
|
||||||
size="14px"
|
size="14px"
|
||||||
class="absolute_button"
|
icon="mdi-history"
|
||||||
@click="onHistory(props.row.id)"
|
@click="onHistory(props.row.id)"
|
||||||
>
|
>
|
||||||
<q-tooltip>ประวัติแก้ไขความสามารถพิเศษ</q-tooltip>
|
<q-tooltip>ประวัติแก้ไขความสามารถพิเศษ</q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
<q-item v-for="col in props.cols" :key="col.name">
|
</q-td>
|
||||||
<q-item-section class="fix_top">
|
</q-tr>
|
||||||
<q-item-label class="text-grey-6 text-weight-medium">{{
|
</template>
|
||||||
col.label
|
|
||||||
}}</q-item-label>
|
<template v-else v-slot:item="props">
|
||||||
</q-item-section>
|
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
|
||||||
<q-item-section class="fix_top">
|
<q-card bordered flat>
|
||||||
<q-item-label class="text-dark text-weight-medium">{{
|
<q-list dense class="q-mt-lg relative-position">
|
||||||
col.value ? col.value : "-"
|
<q-btn
|
||||||
}}</q-item-label>
|
icon="mdi-history"
|
||||||
</q-item-section>
|
color="info"
|
||||||
</q-item>
|
flat
|
||||||
</q-list>
|
dense
|
||||||
</q-card>
|
round
|
||||||
</div>
|
size="14px"
|
||||||
</template>
|
class="absolute_button"
|
||||||
<template v-slot:no-data>
|
@click="onHistory(props.row.id)"
|
||||||
<div
|
>
|
||||||
|
<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"
|
class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
|
||||||
|
bordered
|
||||||
>
|
>
|
||||||
<span> ไม่พบข้อมูล </span>
|
ไม่พบข้อมูล
|
||||||
</div>
|
</q-card>
|
||||||
</template>
|
</div>
|
||||||
</d-table>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<DialogHistory
|
<DialogHistory
|
||||||
v-model:modal="modalHistory"
|
v-model:modal="modalHistory"
|
||||||
|
|
|
||||||
|
|
@ -295,96 +295,101 @@ onMounted(() => {
|
||||||
:display-value="$q.lang.table.columns"
|
:display-value="$q.lang.table.columns"
|
||||||
/>
|
/>
|
||||||
</q-toolbar>
|
</q-toolbar>
|
||||||
<d-table
|
<div v-if="rows.length != 0">
|
||||||
flat
|
<d-table
|
||||||
dense
|
flat
|
||||||
bordered
|
dense
|
||||||
virtual-scroll
|
bordered
|
||||||
:rows="rows"
|
virtual-scroll
|
||||||
:columns="columns"
|
:rows="rows"
|
||||||
:grid="!mode"
|
:columns="columns"
|
||||||
:filter="filter"
|
:grid="!mode"
|
||||||
:rows-per-page-options="[10, 25, 50, 100]"
|
:filter="filter"
|
||||||
:visible-columns="visibleColumns"
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
:virtual-scroll-sticky-size-start="48"
|
:visible-columns="visibleColumns"
|
||||||
>
|
:virtual-scroll-sticky-size-start="48"
|
||||||
<template v-slot:header="props">
|
>
|
||||||
<q-tr :props="props">
|
<template v-slot:header="props">
|
||||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
<q-tr :props="props">
|
||||||
<span class="text-weight-medium">{{ col.label }}</span>
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
</q-th>
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
<q-th auto-width />
|
</q-th>
|
||||||
</q-tr>
|
<q-th auto-width />
|
||||||
</template>
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
|
||||||
<template v-if="mode" v-slot:body="props">
|
<template v-if="mode" v-slot:body="props">
|
||||||
<q-tr :props="props" class="cursor-pointer">
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
||||||
<div v-if="col.name == 'no'">
|
<div v-if="col.name == 'no'">
|
||||||
{{ props.rowIndex + 1 }}
|
{{ props.rowIndex + 1 }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="col.name == 'status'">
|
<div v-else-if="col.name == 'status'">
|
||||||
{{ props.row.status ? props.row.status : "-" }}
|
{{ props.row.status ? props.row.status : "-" }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
{{ col.value ? col.value : "-" }}
|
{{ col.value ? col.value : "-" }}
|
||||||
</div>
|
</div>
|
||||||
</q-td>
|
</q-td>
|
||||||
<q-td auto-width>
|
<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">
|
|
||||||
<q-btn
|
<q-btn
|
||||||
icon="mdi-history"
|
|
||||||
color="info"
|
color="info"
|
||||||
flat
|
flat
|
||||||
dense
|
dense
|
||||||
round
|
round
|
||||||
size="14px"
|
size="14px"
|
||||||
class="absolute_button"
|
icon="mdi-history"
|
||||||
@click="onHistory(props.row.id)"
|
@click="onHistory(props.row.id)"
|
||||||
>
|
>
|
||||||
<q-tooltip>ประวัติแก้ไขวินัย</q-tooltip>
|
<q-tooltip>ประวัติแก้ไขวินัย</q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
<q-item v-for="col in props.cols" :key="col.name">
|
</q-td>
|
||||||
<q-item-section class="fix_top">
|
</q-tr>
|
||||||
<q-item-label class="text-grey-6 text-weight-medium">{{
|
</template>
|
||||||
col.label
|
<template v-else v-slot:item="props">
|
||||||
}}</q-item-label>
|
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
|
||||||
</q-item-section>
|
<q-card bordered flat>
|
||||||
<q-item-section class="fix_top">
|
<q-list dense class="q-mt-lg relative-position">
|
||||||
<q-item-label class="text-dark text-weight-medium">{{
|
<q-btn
|
||||||
col.value ? col.value : "-"
|
icon="mdi-history"
|
||||||
}}</q-item-label>
|
color="info"
|
||||||
</q-item-section>
|
flat
|
||||||
</q-item>
|
dense
|
||||||
</q-list>
|
round
|
||||||
</q-card>
|
size="14px"
|
||||||
</div>
|
class="absolute_button"
|
||||||
</template>
|
@click="onHistory(props.row.id)"
|
||||||
<template v-slot:no-data>
|
>
|
||||||
<div
|
<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"
|
class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
|
||||||
|
bordered
|
||||||
>
|
>
|
||||||
<span> ไม่พบข้อมูล </span>
|
ไม่พบข้อมูล
|
||||||
</div>
|
</q-card>
|
||||||
</template>
|
</div>
|
||||||
</d-table>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<DialogHistory
|
<DialogHistory
|
||||||
v-model:modal="modalHistory"
|
v-model:modal="modalHistory"
|
||||||
|
|
|
||||||
|
|
@ -339,124 +339,128 @@ onMounted(() => {
|
||||||
:display-value="$q.lang.table.columns"
|
:display-value="$q.lang.table.columns"
|
||||||
/>
|
/>
|
||||||
</q-toolbar>
|
</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
|
<template v-if="mode" v-slot:body="props">
|
||||||
flat
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
dense
|
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
||||||
bordered
|
<div v-if="col.name == 'no'">
|
||||||
virtual-scroll
|
{{ props.rowIndex + 1 }}
|
||||||
:rows="rows"
|
</div>
|
||||||
:columns="columns"
|
<div v-else-if="col.name == 'dateLeave'">
|
||||||
:grid="!mode"
|
{{
|
||||||
:filter="filter"
|
dateThaiRange([
|
||||||
:rows-per-page-options="[10, 25, 50, 100]"
|
props.row.dateStartLeave,
|
||||||
:visible-columns="visibleColumns"
|
props.row.dateEndLeave,
|
||||||
:virtual-scroll-sticky-size-start="48"
|
])
|
||||||
>
|
}}
|
||||||
<template v-slot:header="props">
|
</div>
|
||||||
<q-tr :props="props">
|
<div v-else-if="col.name == 'status'">
|
||||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
{{ props.row.status ? statusLeave(props.row.status) : "-" }}
|
||||||
<span class="text-weight-medium">{{ col.label }}</span>
|
</div>
|
||||||
</q-th>
|
<div v-else>
|
||||||
<q-th auto-width />
|
{{ col.value ? col.value : "-" }}
|
||||||
</q-tr>
|
</div>
|
||||||
</template>
|
</q-td>
|
||||||
|
<q-td auto-width>
|
||||||
<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">
|
|
||||||
<q-btn
|
<q-btn
|
||||||
icon="mdi-history"
|
|
||||||
color="info"
|
color="info"
|
||||||
flat
|
flat
|
||||||
dense
|
dense
|
||||||
round
|
round
|
||||||
size="14px"
|
size="14px"
|
||||||
class="absolute_button"
|
icon="mdi-history"
|
||||||
@click="onHistory(props.row.id)"
|
@click="onHistory(props.row.id)"
|
||||||
>
|
>
|
||||||
<q-tooltip>ประวัติแก้ไขการลา</q-tooltip>
|
<q-tooltip>ประวัติแก้ไขการลา</q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
<q-item v-for="col in props.cols" :key="col.name">
|
</q-td>
|
||||||
<q-item-section class="fix_top">
|
</q-tr>
|
||||||
<q-item-label class="text-grey-6 text-weight-medium">{{
|
</template>
|
||||||
col.label
|
<template v-else v-slot:item="props">
|
||||||
}}</q-item-label>
|
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
|
||||||
</q-item-section>
|
<q-card bordered flat>
|
||||||
<q-item-section class="fix_top">
|
<q-list dense class="q-mt-lg relative-position">
|
||||||
<q-item-label
|
<q-btn
|
||||||
v-if="col.name == 'dateLeave'"
|
icon="mdi-history"
|
||||||
class="text-dark text-weight-medium"
|
color="info"
|
||||||
>
|
flat
|
||||||
{{
|
dense
|
||||||
dateThaiRange([
|
round
|
||||||
props.row.dateStartLeave,
|
size="14px"
|
||||||
props.row.dateEndLeave,
|
class="absolute_button"
|
||||||
])
|
@click="onHistory(props.row.id)"
|
||||||
}}</q-item-label
|
>
|
||||||
>
|
<q-tooltip>ประวัติแก้ไขการลา</q-tooltip>
|
||||||
<q-item-label
|
</q-btn>
|
||||||
v-else-if="col.name == 'status'"
|
<q-item v-for="col in props.cols" :key="col.name">
|
||||||
class="text-dark text-weight-medium"
|
<q-item-section class="fix_top">
|
||||||
>
|
<q-item-label class="text-grey-6 text-weight-medium">{{
|
||||||
{{
|
col.label
|
||||||
props.row.status ? statusLeave(props.row.status) : "-"
|
}}</q-item-label>
|
||||||
}}</q-item-label
|
</q-item-section>
|
||||||
>
|
<q-item-section class="fix_top">
|
||||||
<q-item-label v-else class="text-dark text-weight-medium">{{
|
<q-item-label
|
||||||
col.value ? col.value : "-"
|
v-if="col.name == 'dateLeave'"
|
||||||
}}</q-item-label>
|
class="text-dark text-weight-medium"
|
||||||
</q-item-section>
|
>
|
||||||
</q-item>
|
{{
|
||||||
</q-list>
|
dateThaiRange([
|
||||||
</q-card>
|
props.row.dateStartLeave,
|
||||||
</div>
|
props.row.dateEndLeave,
|
||||||
</template>
|
])
|
||||||
<template v-slot:no-data>
|
}}</q-item-label
|
||||||
<div
|
>
|
||||||
|
<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"
|
class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
|
||||||
|
bordered
|
||||||
>
|
>
|
||||||
<span> ไม่พบข้อมูล </span>
|
ไม่พบข้อมูล
|
||||||
</div>
|
</q-card>
|
||||||
</template>
|
</div>
|
||||||
</d-table>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<DialogHistory
|
<DialogHistory
|
||||||
v-model:modal="modalHistory"
|
v-model:modal="modalHistory"
|
||||||
|
|
|
||||||
|
|
@ -298,96 +298,101 @@ onMounted(() => {
|
||||||
:display-value="$q.lang.table.columns"
|
:display-value="$q.lang.table.columns"
|
||||||
/>
|
/>
|
||||||
</q-toolbar>
|
</q-toolbar>
|
||||||
<d-table
|
<div v-if="rows.length != 0">
|
||||||
flat
|
<d-table
|
||||||
dense
|
flat
|
||||||
bordered
|
dense
|
||||||
virtual-scroll
|
bordered
|
||||||
:rows="rows"
|
virtual-scroll
|
||||||
:columns="columns"
|
:rows="rows"
|
||||||
:grid="!mode"
|
:columns="columns"
|
||||||
:filter="filter"
|
:grid="!mode"
|
||||||
:rows-per-page-options="[10, 25, 50, 100]"
|
:filter="filter"
|
||||||
:visible-columns="visibleColumns"
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
:virtual-scroll-sticky-size-start="48"
|
:visible-columns="visibleColumns"
|
||||||
>
|
:virtual-scroll-sticky-size-start="48"
|
||||||
<template v-slot:header="props">
|
>
|
||||||
<q-tr :props="props">
|
<template v-slot:header="props">
|
||||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
<q-tr :props="props">
|
||||||
<span class="text-weight-medium">{{ col.label }}</span>
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
</q-th>
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
<q-th auto-width />
|
</q-th>
|
||||||
</q-tr>
|
<q-th auto-width />
|
||||||
</template>
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
|
||||||
<template v-if="mode" v-slot:body="props">
|
<template v-if="mode" v-slot:body="props">
|
||||||
<q-tr :props="props" class="cursor-pointer">
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
||||||
<div v-if="col.name == 'no'">
|
<div v-if="col.name == 'no'">
|
||||||
{{ props.rowIndex + 1 }}
|
{{ props.rowIndex + 1 }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="col.name == 'status'">
|
<div v-else-if="col.name == 'status'">
|
||||||
{{ props.row.status ? props.row.status : "-" }}
|
{{ props.row.status ? props.row.status : "-" }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
{{ col.value ? col.value : "-" }}
|
{{ col.value ? col.value : "-" }}
|
||||||
</div>
|
</div>
|
||||||
</q-td>
|
</q-td>
|
||||||
<q-td auto-width>
|
<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">
|
|
||||||
<q-btn
|
<q-btn
|
||||||
icon="mdi-history"
|
|
||||||
color="info"
|
color="info"
|
||||||
flat
|
flat
|
||||||
dense
|
dense
|
||||||
round
|
round
|
||||||
size="14px"
|
size="14px"
|
||||||
class="absolute_button"
|
icon="mdi-history"
|
||||||
@click="onHistory(props.row.id)"
|
@click="onHistory(props.row.id)"
|
||||||
>
|
>
|
||||||
<q-tooltip>ประวัติแก้ไขปฏิบัติราชการพิเศษ</q-tooltip>
|
<q-tooltip>ประวัติแก้ไขปฏิบัติราชการพิเศษ</q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
<q-item v-for="col in props.cols" :key="col.name">
|
</q-td>
|
||||||
<q-item-section class="fix_top">
|
</q-tr>
|
||||||
<q-item-label class="text-grey-6 text-weight-medium">{{
|
</template>
|
||||||
col.label
|
<template v-else v-slot:item="props">
|
||||||
}}</q-item-label>
|
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
|
||||||
</q-item-section>
|
<q-card bordered flat>
|
||||||
<q-item-section class="fix_top">
|
<q-list dense class="q-mt-lg relative-position">
|
||||||
<q-item-label class="text-dark text-weight-medium">{{
|
<q-btn
|
||||||
col.value ? col.value : "-"
|
icon="mdi-history"
|
||||||
}}</q-item-label>
|
color="info"
|
||||||
</q-item-section>
|
flat
|
||||||
</q-item>
|
dense
|
||||||
</q-list>
|
round
|
||||||
</q-card>
|
size="14px"
|
||||||
</div>
|
class="absolute_button"
|
||||||
</template>
|
@click="onHistory(props.row.id)"
|
||||||
<template v-slot:no-data>
|
>
|
||||||
<div
|
<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"
|
class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
|
||||||
|
bordered
|
||||||
>
|
>
|
||||||
<span> ไม่พบข้อมูล </span>
|
ไม่พบข้อมูล
|
||||||
</div>
|
</q-card>
|
||||||
</template>
|
</div>
|
||||||
</d-table>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<DialogHistory
|
<DialogHistory
|
||||||
v-model:modal="modalHistory"
|
v-model:modal="modalHistory"
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
|
||||||
import http from "@/plugins/http";
|
import http from "@/plugins/http";
|
||||||
import config from "@/app.config";
|
import config from "@/app.config";
|
||||||
|
|
||||||
const idByRow = ref<string>('')
|
const idByRow = ref<string>("");
|
||||||
const rows = ref<any[]>([]);
|
const rows = ref<any[]>([]);
|
||||||
const filter = ref<string>("");
|
const filter = ref<string>("");
|
||||||
const rowsHistory = ref<any[]>([]);
|
const rowsHistory = ref<any[]>([]);
|
||||||
|
|
@ -314,9 +314,9 @@ const columnsHistory = ref<QTableProps["columns"]>([
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
function onHistory(id:string) {
|
function onHistory(id: string) {
|
||||||
modalHistory.value = true;
|
modalHistory.value = true;
|
||||||
idByRow.value = id
|
idByRow.value = id;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** get data */
|
/** get data */
|
||||||
|
|
@ -406,97 +406,101 @@ onMounted(() => {
|
||||||
:display-value="$q.lang.table.columns"
|
:display-value="$q.lang.table.columns"
|
||||||
/>
|
/>
|
||||||
</q-toolbar>
|
</q-toolbar>
|
||||||
<d-table
|
<div v-if="rows.length != 0">
|
||||||
flat
|
<d-table
|
||||||
dense
|
flat
|
||||||
bordered
|
dense
|
||||||
virtual-scroll
|
bordered
|
||||||
:rows="rows"
|
virtual-scroll
|
||||||
:columns="columns"
|
:rows="rows"
|
||||||
:grid="!mode"
|
:columns="columns"
|
||||||
:filter="filter"
|
:grid="!mode"
|
||||||
:rows-per-page-options="[10, 25, 50, 100]"
|
:filter="filter"
|
||||||
:visible-columns="visibleColumns"
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
:virtual-scroll-sticky-size-start="48"
|
:visible-columns="visibleColumns"
|
||||||
>
|
:virtual-scroll-sticky-size-start="48"
|
||||||
<template v-slot:header="props">
|
>
|
||||||
<q-tr :props="props">
|
<template v-slot:header="props">
|
||||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
<q-tr :props="props">
|
||||||
<span class="text-weight-medium">{{ col.label }}</span>
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
</q-th>
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
<q-th auto-width />
|
</q-th>
|
||||||
</q-tr>
|
<q-th auto-width />
|
||||||
</template>
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
|
||||||
<template v-if="mode" v-slot:body="props">
|
<template v-if="mode" v-slot:body="props">
|
||||||
<q-tr :props="props" class="cursor-pointer">
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
||||||
<div v-if="col.name == 'no'">
|
<div v-if="col.name == 'no'">
|
||||||
{{ props.rowIndex + 1 }}
|
{{ props.rowIndex + 1 }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="col.name == 'status'">
|
<div v-else-if="col.name == 'status'">
|
||||||
{{ props.row.status ? props.row.status : "-" }}
|
{{ props.row.status ? props.row.status : "-" }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
{{ col.value?col.value:'-' }}
|
{{ col.value ? col.value : "-" }}
|
||||||
</div>
|
</div>
|
||||||
</q-td>
|
</q-td>
|
||||||
<q-td auto-width>
|
<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">
|
|
||||||
<q-btn
|
<q-btn
|
||||||
icon="mdi-history"
|
|
||||||
color="info"
|
color="info"
|
||||||
flat
|
flat
|
||||||
dense
|
dense
|
||||||
round
|
round
|
||||||
size="14px"
|
size="14px"
|
||||||
class="absolute_button"
|
icon="mdi-history"
|
||||||
@click="onHistory(props.row.id)"
|
@click="onHistory(props.row.id)"
|
||||||
>
|
>
|
||||||
<q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
|
<q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
<q-item v-for="col in props.cols" :key="col.name">
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
<q-item-section class="fix_top">
|
</template>
|
||||||
<q-item-label class="text-grey-6 text-weight-medium">{{
|
<template v-else v-slot:item="props">
|
||||||
col.label
|
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
|
||||||
}}</q-item-label>
|
<q-card bordered flat>
|
||||||
</q-item-section>
|
<q-list dense class="q-mt-lg relative-position">
|
||||||
<q-item-section class="fix_top">
|
<q-btn
|
||||||
<q-item-label class="text-dark text-weight-medium">{{
|
icon="mdi-history"
|
||||||
col.value ? col.value : "-"
|
color="info"
|
||||||
}}</q-item-label>
|
flat
|
||||||
</q-item-section>
|
dense
|
||||||
</q-item>
|
round
|
||||||
</q-list>
|
size="14px"
|
||||||
</q-card>
|
class="absolute_button"
|
||||||
</div>
|
@click="onHistory(props.row.id)"
|
||||||
</template>
|
>
|
||||||
<template v-slot:no-data>
|
<q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
|
||||||
<div class="full-width row flex-center bg-grey-3 q-pa-md rounded-borders text-body2 text-weight-medium">
|
</q-btn>
|
||||||
<span>
|
<q-item v-for="col in props.cols" :key="col.name">
|
||||||
ไม่พบข้อมูลตำแหน่ง/เงินเดือน
|
<q-item-section class="fix_top">
|
||||||
</span>
|
<q-item-label class="text-grey-6 text-weight-medium">{{
|
||||||
</div>
|
col.label
|
||||||
</template>
|
}}</q-item-label>
|
||||||
</d-table>
|
</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
|
||||||
|
>
|
||||||
|
ไม่พบข้อมูล
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<DialogHistory
|
<DialogHistory
|
||||||
v-model:modal="modalHistory"
|
v-model:modal="modalHistory"
|
||||||
|
|
@ -506,7 +510,6 @@ onMounted(() => {
|
||||||
:visibleColumns="visibleColumnsHistory"
|
:visibleColumns="visibleColumnsHistory"
|
||||||
:columns="columnsHistory"
|
:columns="columnsHistory"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.absolute_button {
|
.absolute_button {
|
||||||
|
|
@ -515,7 +518,7 @@ onMounted(() => {
|
||||||
top: -20px;
|
top: -20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fix_top{
|
.fix_top {
|
||||||
justify-content: start!important;
|
justify-content: start !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -275,98 +275,105 @@ onMounted(() => {
|
||||||
:display-value="$q.lang.table.columns"
|
:display-value="$q.lang.table.columns"
|
||||||
/>
|
/>
|
||||||
</q-toolbar>
|
</q-toolbar>
|
||||||
<d-table
|
<div v-if="rows.length != 0">
|
||||||
flat
|
<d-table
|
||||||
dense
|
flat
|
||||||
bordered
|
dense
|
||||||
virtual-scroll
|
bordered
|
||||||
:rows="rows"
|
virtual-scroll
|
||||||
:columns="columns"
|
:rows="rows"
|
||||||
:grid="!mode"
|
:columns="columns"
|
||||||
:filter="filter"
|
:grid="!mode"
|
||||||
:rows-per-page-options="[10, 25, 50, 100]"
|
:filter="filter"
|
||||||
:visible-columns="visibleColumns"
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
:virtual-scroll-sticky-size-start="48"
|
:visible-columns="visibleColumns"
|
||||||
>
|
:virtual-scroll-sticky-size-start="48"
|
||||||
<template v-slot:header="props">
|
>
|
||||||
<q-tr :props="props">
|
<template v-slot:header="props">
|
||||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
<q-tr :props="props">
|
||||||
<span class="text-weight-medium">{{ col.label }}</span>
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
</q-th>
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
<q-th auto-width />
|
</q-th>
|
||||||
</q-tr>
|
<q-th auto-width />
|
||||||
</template>
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
|
||||||
<template v-if="mode" v-slot:body="props">
|
<template v-if="mode" v-slot:body="props">
|
||||||
<q-tr :props="props" class="cursor-pointer">
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
||||||
<div v-if="col.name == 'no'">
|
<div v-if="col.name == 'no'">
|
||||||
{{ props.rowIndex + 1 }}
|
{{ props.rowIndex + 1 }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="col.name == 'status'">
|
<div v-else-if="col.name == 'status'">
|
||||||
{{ props.row.status ? props.row.status : "-" }}
|
{{ props.row.status ? props.row.status : "-" }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
{{ col.value ? col.value : "-" }}
|
{{ col.value ? col.value : "-" }}
|
||||||
</div>
|
</div>
|
||||||
</q-td>
|
</q-td>
|
||||||
<q-td auto-width>
|
<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">
|
|
||||||
<q-btn
|
<q-btn
|
||||||
icon="mdi-history"
|
|
||||||
color="info"
|
color="info"
|
||||||
flat
|
flat
|
||||||
dense
|
dense
|
||||||
round
|
round
|
||||||
size="14px"
|
size="14px"
|
||||||
class="absolute_button"
|
icon="mdi-history"
|
||||||
@click="onHistory(props.row.id)"
|
@click="onHistory(props.row.id)"
|
||||||
>
|
>
|
||||||
<q-tooltip
|
<q-tooltip
|
||||||
>ประวัติแก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip
|
>ประวัติแก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip
|
||||||
>
|
>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
<q-item v-for="col in props.cols" :key="col.name">
|
</q-td>
|
||||||
<q-item-section class="fix_top">
|
</q-tr>
|
||||||
<q-item-label class="text-grey-6 text-weight-medium">{{
|
</template>
|
||||||
col.label
|
<template v-else v-slot:item="props">
|
||||||
}}</q-item-label>
|
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
|
||||||
</q-item-section>
|
<q-card bordered flat>
|
||||||
<q-item-section class="fix_top">
|
<q-list dense class="q-mt-lg relative-position">
|
||||||
<q-item-label class="text-dark text-weight-medium">{{
|
<q-btn
|
||||||
col.value ? col.value : "-"
|
icon="mdi-history"
|
||||||
}}</q-item-label>
|
color="info"
|
||||||
</q-item-section>
|
flat
|
||||||
</q-item>
|
dense
|
||||||
</q-list>
|
round
|
||||||
</q-card>
|
size="14px"
|
||||||
</div>
|
class="absolute_button"
|
||||||
</template>
|
@click="onHistory(props.row.id)"
|
||||||
<template v-slot:no-data>
|
>
|
||||||
<div
|
<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"
|
class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
|
||||||
|
bordered
|
||||||
>
|
>
|
||||||
<span> ไม่พบข้อมูล </span>
|
ไม่พบข้อมูล
|
||||||
</div>
|
</q-card>
|
||||||
</template>
|
</div>
|
||||||
</d-table>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<DialogHistory
|
<DialogHistory
|
||||||
v-model:modal="modalHistory"
|
v-model:modal="modalHistory"
|
||||||
|
|
|
||||||
|
|
@ -273,96 +273,101 @@ onMounted(() => {
|
||||||
:display-value="$q.lang.table.columns"
|
:display-value="$q.lang.table.columns"
|
||||||
/>
|
/>
|
||||||
</q-toolbar>
|
</q-toolbar>
|
||||||
<d-table
|
<div v-if="rows.length != 0">
|
||||||
flat
|
<d-table
|
||||||
dense
|
flat
|
||||||
bordered
|
dense
|
||||||
virtual-scroll
|
bordered
|
||||||
:rows="rows"
|
virtual-scroll
|
||||||
:columns="columns"
|
:rows="rows"
|
||||||
:grid="!mode"
|
:columns="columns"
|
||||||
:filter="filter"
|
:grid="!mode"
|
||||||
:rows-per-page-options="[10, 25, 50, 100]"
|
:filter="filter"
|
||||||
:visible-columns="visibleColumns"
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
:virtual-scroll-sticky-size-start="48"
|
:visible-columns="visibleColumns"
|
||||||
>
|
:virtual-scroll-sticky-size-start="48"
|
||||||
<template v-slot:header="props">
|
>
|
||||||
<q-tr :props="props">
|
<template v-slot:header="props">
|
||||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
<q-tr :props="props">
|
||||||
<span class="text-weight-medium">{{ col.label }}</span>
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
</q-th>
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
<q-th auto-width />
|
</q-th>
|
||||||
</q-tr>
|
<q-th auto-width />
|
||||||
</template>
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
|
||||||
<template v-if="mode" v-slot:body="props">
|
<template v-if="mode" v-slot:body="props">
|
||||||
<q-tr :props="props" class="cursor-pointer">
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
||||||
<div v-if="col.name == 'no'">
|
<div v-if="col.name == 'no'">
|
||||||
{{ props.rowIndex + 1 }}
|
{{ props.rowIndex + 1 }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="col.name == 'status'">
|
<div v-else-if="col.name == 'status'">
|
||||||
{{ props.row.status ? props.row.status : "-" }}
|
{{ props.row.status ? props.row.status : "-" }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
{{ col.value ? col.value : "-" }}
|
{{ col.value ? col.value : "-" }}
|
||||||
</div>
|
</div>
|
||||||
</q-td>
|
</q-td>
|
||||||
<q-td auto-width>
|
<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">
|
|
||||||
<q-btn
|
<q-btn
|
||||||
icon="mdi-history"
|
|
||||||
color="info"
|
color="info"
|
||||||
flat
|
flat
|
||||||
dense
|
dense
|
||||||
round
|
round
|
||||||
size="14px"
|
size="14px"
|
||||||
class="absolute_button"
|
icon="mdi-history"
|
||||||
@click="onHistory(props.row.id)"
|
@click="onHistory(props.row.id)"
|
||||||
>
|
>
|
||||||
<q-tooltip>ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ</q-tooltip>
|
<q-tooltip>ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ</q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
<q-item v-for="col in props.cols" :key="col.name">
|
</q-td>
|
||||||
<q-item-section class="fix_top">
|
</q-tr>
|
||||||
<q-item-label class="text-grey-6 text-weight-medium">{{
|
</template>
|
||||||
col.label
|
<template v-else v-slot:item="props">
|
||||||
}}</q-item-label>
|
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
|
||||||
</q-item-section>
|
<q-card bordered flat>
|
||||||
<q-item-section class="fix_top">
|
<q-list dense class="q-mt-lg relative-position">
|
||||||
<q-item-label class="text-dark text-weight-medium">{{
|
<q-btn
|
||||||
col.value ? col.value : "-"
|
icon="mdi-history"
|
||||||
}}</q-item-label>
|
color="info"
|
||||||
</q-item-section>
|
flat
|
||||||
</q-item>
|
dense
|
||||||
</q-list>
|
round
|
||||||
</q-card>
|
size="14px"
|
||||||
</div>
|
class="absolute_button"
|
||||||
</template>
|
@click="onHistory(props.row.id)"
|
||||||
<template v-slot:no-data>
|
>
|
||||||
<div
|
<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"
|
class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
|
||||||
|
bordered
|
||||||
>
|
>
|
||||||
<span> ไม่พบข้อมูล </span>
|
ไม่พบข้อมูล
|
||||||
</div>
|
</q-card>
|
||||||
</template>
|
</div>
|
||||||
</d-table>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<DialogHistory
|
<DialogHistory
|
||||||
v-model:modal="modalHistory"
|
v-model:modal="modalHistory"
|
||||||
|
|
|
||||||
|
|
@ -401,88 +401,93 @@ onMounted(() => {
|
||||||
:display-value="$q.lang.table.columns"
|
:display-value="$q.lang.table.columns"
|
||||||
/>
|
/>
|
||||||
</q-toolbar>
|
</q-toolbar>
|
||||||
<d-table
|
<div v-if="rows.length != 0">
|
||||||
flat
|
<d-table
|
||||||
dense
|
flat
|
||||||
bordered
|
dense
|
||||||
virtual-scroll
|
bordered
|
||||||
:rows="rows"
|
virtual-scroll
|
||||||
:columns="columns"
|
:rows="rows"
|
||||||
:grid="!mode"
|
:columns="columns"
|
||||||
:filter="filter"
|
:grid="!mode"
|
||||||
:rows-per-page-options="[10, 25, 50, 100]"
|
:filter="filter"
|
||||||
:visible-columns="visibleColumns"
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
:virtual-scroll-sticky-size-start="48"
|
:visible-columns="visibleColumns"
|
||||||
>
|
:virtual-scroll-sticky-size-start="48"
|
||||||
<template v-slot:header="props">
|
>
|
||||||
<q-tr :props="props">
|
<template v-slot:header="props">
|
||||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
<q-tr :props="props">
|
||||||
<span class="text-weight-medium">{{ col.label }}</span>
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
</q-th>
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
<q-th auto-width />
|
</q-th>
|
||||||
</q-tr>
|
<q-th auto-width />
|
||||||
</template>
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
|
||||||
<template v-if="mode" v-slot:body="props">
|
<template v-if="mode" v-slot:body="props">
|
||||||
<q-tr :props="props" class="cursor-pointer">
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
||||||
{{ col.value ? col.value : "-" }}
|
{{ col.value ? col.value : "-" }}
|
||||||
</q-td>
|
</q-td>
|
||||||
<q-td auto-width>
|
<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">
|
|
||||||
<q-btn
|
<q-btn
|
||||||
icon="mdi-history"
|
|
||||||
color="info"
|
color="info"
|
||||||
flat
|
flat
|
||||||
dense
|
dense
|
||||||
round
|
round
|
||||||
size="14px"
|
size="14px"
|
||||||
class="absolute_button"
|
icon="mdi-history"
|
||||||
@click="onHistory(props.row.id)"
|
@click="onHistory(props.row.id)"
|
||||||
>
|
>
|
||||||
<q-tooltip>ประวัติแก้ไขการฝึกอบรม/ดูงาน</q-tooltip>
|
<q-tooltip>ประวัติแก้ไขการฝึกอบรม/ดูงาน</q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
<q-item v-for="col in props.cols" :key="col.name">
|
</q-td>
|
||||||
<q-item-section class="fix_top">
|
</q-tr>
|
||||||
<q-item-label class="text-grey-6 text-weight-medium">{{
|
</template>
|
||||||
col.label
|
<template v-else v-slot:item="props">
|
||||||
}}</q-item-label>
|
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
|
||||||
</q-item-section>
|
<q-card bordered flat>
|
||||||
<q-item-section class="fix_top">
|
<q-list dense class="q-mt-lg relative-position">
|
||||||
<q-item-label class="text-dark text-weight-medium">{{
|
<q-btn
|
||||||
col.value ? col.value : "-"
|
icon="mdi-history"
|
||||||
}}</q-item-label>
|
color="info"
|
||||||
</q-item-section>
|
flat
|
||||||
</q-item>
|
dense
|
||||||
</q-list>
|
round
|
||||||
</q-card>
|
size="14px"
|
||||||
</div>
|
class="absolute_button"
|
||||||
</template>
|
@click="onHistory(props.row.id)"
|
||||||
<template v-slot:no-data>
|
>
|
||||||
<div
|
<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"
|
class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
|
||||||
|
bordered
|
||||||
>
|
>
|
||||||
<span> ไม่พบข้อมูล </span>
|
ไม่พบข้อมูล
|
||||||
</div>
|
</q-card>
|
||||||
</template>
|
</div>
|
||||||
</d-table>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<DialogHistory
|
<DialogHistory
|
||||||
v-model:modal="modalHistory"
|
v-model:modal="modalHistory"
|
||||||
|
|
|
||||||
|
|
@ -480,109 +480,116 @@ onMounted(async () => {
|
||||||
:display-value="$q.lang.table.columns"
|
:display-value="$q.lang.table.columns"
|
||||||
/>
|
/>
|
||||||
</q-toolbar>
|
</q-toolbar>
|
||||||
<d-table
|
<div v-if="rows.length != 0">
|
||||||
flat
|
<d-table
|
||||||
dense
|
flat
|
||||||
bordered
|
dense
|
||||||
virtual-scroll
|
bordered
|
||||||
:rows="rows"
|
virtual-scroll
|
||||||
:columns="columns"
|
:rows="rows"
|
||||||
:grid="!mode"
|
:columns="columns"
|
||||||
:filter="filter"
|
:grid="!mode"
|
||||||
:rows-per-page-options="[10, 25, 50, 100]"
|
:filter="filter"
|
||||||
:visible-columns="visibleColumns"
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
:virtual-scroll-sticky-size-start="48"
|
:visible-columns="visibleColumns"
|
||||||
>
|
:virtual-scroll-sticky-size-start="48"
|
||||||
<template v-slot:header="props">
|
>
|
||||||
<q-tr :props="props">
|
<template v-slot:header="props">
|
||||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
<q-tr :props="props">
|
||||||
<span class="text-weight-medium">{{ col.label }}</span>
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
</q-th>
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
<q-th auto-width />
|
</q-th>
|
||||||
</q-tr>
|
<q-th auto-width />
|
||||||
</template>
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
|
||||||
<template v-if="mode" v-slot:body="props">
|
<template v-if="mode" v-slot:body="props">
|
||||||
<q-tr :props="props" class="cursor-pointer">
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
||||||
<div v-if="col.name == 'insignia'">
|
<div v-if="col.name == 'insignia'">
|
||||||
{{ props.row.insignia ? `${props.row.insignia.name} ` : "-"
|
{{ props.row.insignia ? `${props.row.insignia.name} ` : "-"
|
||||||
}}{{
|
}}{{
|
||||||
props.row.insignia.shortName
|
props.row.insignia.shortName
|
||||||
? `(${props.row.insignia.shortName})`
|
? `(${props.row.insignia.shortName})`
|
||||||
: ""
|
: ""
|
||||||
}}
|
}}
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
{{ col.value ? col.value : "-" }}
|
{{ col.value ? col.value : "-" }}
|
||||||
</div>
|
</div>
|
||||||
</q-td>
|
</q-td>
|
||||||
<q-td auto-width>
|
<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">
|
|
||||||
<q-btn
|
<q-btn
|
||||||
icon="mdi-history"
|
|
||||||
color="info"
|
color="info"
|
||||||
flat
|
flat
|
||||||
dense
|
dense
|
||||||
round
|
round
|
||||||
size="14px"
|
size="14px"
|
||||||
class="absolute_button"
|
icon="mdi-history"
|
||||||
@click="onHistory(props.row.id)"
|
@click="onHistory(props.row.id)"
|
||||||
>
|
>
|
||||||
<q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
|
<q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
<q-item v-for="col in props.cols" :key="col.name">
|
</q-td>
|
||||||
<q-item-section class="fix_top">
|
</q-tr>
|
||||||
<q-item-label class="text-grey-6 text-weight-medium">{{
|
</template>
|
||||||
col.label
|
<template v-else v-slot:item="props">
|
||||||
}}</q-item-label>
|
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
|
||||||
</q-item-section>
|
<q-card bordered flat>
|
||||||
<q-item-section v-if="col.name == 'insignia'" class="fix_top">
|
<q-list dense class="q-mt-lg relative-position">
|
||||||
<q-item-label class="text-dark text-weight-medium"
|
<q-btn
|
||||||
>{{
|
icon="mdi-history"
|
||||||
props.row.insignia ? `${props.row.insignia.name} ` : "-"
|
color="info"
|
||||||
}}{{
|
flat
|
||||||
props.row.insignia.shortName
|
dense
|
||||||
? `(${props.row.insignia.shortName})`
|
round
|
||||||
: ""
|
size="14px"
|
||||||
}}</q-item-label
|
class="absolute_button"
|
||||||
>
|
@click="onHistory(props.row.id)"
|
||||||
</q-item-section>
|
>
|
||||||
<q-item-section v-else class="fix_top">
|
<q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
|
||||||
<q-item-label class="text-dark text-weight-medium">{{
|
</q-btn>
|
||||||
col.value ? col.value : "-"
|
<q-item v-for="col in props.cols" :key="col.name">
|
||||||
}}</q-item-label>
|
<q-item-section class="fix_top">
|
||||||
</q-item-section>
|
<q-item-label class="text-grey-6 text-weight-medium">{{
|
||||||
</q-item>
|
col.label
|
||||||
</q-list>
|
}}</q-item-label>
|
||||||
</q-card>
|
</q-item-section>
|
||||||
</div>
|
<q-item-section v-if="col.name == 'insignia'" class="fix_top">
|
||||||
</template>
|
<q-item-label class="text-dark text-weight-medium"
|
||||||
<template v-slot:no-data>
|
>{{
|
||||||
<div
|
props.row.insignia
|
||||||
|
? `${props.row.insignia.name} `
|
||||||
|
: "-"
|
||||||
|
}}{{
|
||||||
|
props.row.insignia.shortName
|
||||||
|
? `(${props.row.insignia.shortName})`
|
||||||
|
: ""
|
||||||
|
}}</q-item-label
|
||||||
|
>
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section v-else 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"
|
class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
|
||||||
|
bordered
|
||||||
>
|
>
|
||||||
<span> ไม่พบข้อมูล </span>
|
ไม่พบข้อมูล
|
||||||
</div>
|
</q-card>
|
||||||
</template>
|
</div>
|
||||||
</d-table>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<DialogHistory
|
<DialogHistory
|
||||||
v-model:modal="modalHistory"
|
v-model:modal="modalHistory"
|
||||||
|
|
|
||||||
|
|
@ -279,96 +279,101 @@ onMounted(() => {
|
||||||
:display-value="$q.lang.table.columns"
|
:display-value="$q.lang.table.columns"
|
||||||
/>
|
/>
|
||||||
</q-toolbar>
|
</q-toolbar>
|
||||||
<d-table
|
<div v-if="rows.length != 0">
|
||||||
flat
|
<d-table
|
||||||
dense
|
flat
|
||||||
bordered
|
dense
|
||||||
virtual-scroll
|
bordered
|
||||||
:rows="rows"
|
virtual-scroll
|
||||||
:columns="columns"
|
:rows="rows"
|
||||||
:grid="!mode"
|
:columns="columns"
|
||||||
:filter="filter"
|
:grid="!mode"
|
||||||
:rows-per-page-options="[10, 25, 50, 100]"
|
:filter="filter"
|
||||||
:visible-columns="visibleColumns"
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
:virtual-scroll-sticky-size-start="48"
|
:visible-columns="visibleColumns"
|
||||||
>
|
:virtual-scroll-sticky-size-start="48"
|
||||||
<template v-slot:header="props">
|
>
|
||||||
<q-tr :props="props">
|
<template v-slot:header="props">
|
||||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
<q-tr :props="props">
|
||||||
<span class="text-weight-medium">{{ col.label }}</span>
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
</q-th>
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
<q-th auto-width />
|
</q-th>
|
||||||
</q-tr>
|
<q-th auto-width />
|
||||||
</template>
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
|
||||||
<template v-if="mode" v-slot:body="props">
|
<template v-if="mode" v-slot:body="props">
|
||||||
<q-tr :props="props" class="cursor-pointer">
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
||||||
<div v-if="col.name == 'no'">
|
<div v-if="col.name == 'no'">
|
||||||
{{ props.rowIndex + 1 }}
|
{{ props.rowIndex + 1 }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="col.name == 'status'">
|
<div v-else-if="col.name == 'status'">
|
||||||
{{ props.row.status ? props.row.status : "-" }}
|
{{ props.row.status ? props.row.status : "-" }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
{{ col.value ? col.value : "-" }}
|
{{ col.value ? col.value : "-" }}
|
||||||
</div>
|
</div>
|
||||||
</q-td>
|
</q-td>
|
||||||
<q-td auto-width>
|
<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">
|
|
||||||
<q-btn
|
<q-btn
|
||||||
icon="mdi-history"
|
|
||||||
color="info"
|
color="info"
|
||||||
flat
|
flat
|
||||||
dense
|
dense
|
||||||
round
|
round
|
||||||
size="14px"
|
size="14px"
|
||||||
class="absolute_button"
|
icon="mdi-history"
|
||||||
@click="onHistory(props.row.id)"
|
@click="onHistory(props.row.id)"
|
||||||
>
|
>
|
||||||
<q-tooltip>ประวัติแก้ไขประกาศเกียรติคุณ</q-tooltip>
|
<q-tooltip>ประวัติแก้ไขประกาศเกียรติคุณ</q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
<q-item v-for="col in props.cols" :key="col.name">
|
</q-td>
|
||||||
<q-item-section class="fix_top">
|
</q-tr>
|
||||||
<q-item-label class="text-grey-6 text-weight-medium">{{
|
</template>
|
||||||
col.label
|
<template v-else v-slot:item="props">
|
||||||
}}</q-item-label>
|
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
|
||||||
</q-item-section>
|
<q-card bordered flat>
|
||||||
<q-item-section class="fix_top">
|
<q-list dense class="q-mt-lg relative-position">
|
||||||
<q-item-label class="text-dark text-weight-medium">{{
|
<q-btn
|
||||||
col.value ? col.value : "-"
|
icon="mdi-history"
|
||||||
}}</q-item-label>
|
color="info"
|
||||||
</q-item-section>
|
flat
|
||||||
</q-item>
|
dense
|
||||||
</q-list>
|
round
|
||||||
</q-card>
|
size="14px"
|
||||||
</div>
|
class="absolute_button"
|
||||||
</template>
|
@click="onHistory(props.row.id)"
|
||||||
<template v-slot:no-data>
|
>
|
||||||
<div
|
<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"
|
class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
|
||||||
|
bordered
|
||||||
>
|
>
|
||||||
<span> ไม่พบข้อมูล </span>
|
ไม่พบข้อมูล
|
||||||
</div>
|
</q-card>
|
||||||
</template>
|
</div>
|
||||||
</d-table>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<DialogHistory
|
<DialogHistory
|
||||||
v-model:modal="modalHistory"
|
v-model:modal="modalHistory"
|
||||||
|
|
|
||||||
|
|
@ -356,96 +356,103 @@ onMounted(() => {
|
||||||
:display-value="$q.lang.table.columns"
|
:display-value="$q.lang.table.columns"
|
||||||
/>
|
/>
|
||||||
</q-toolbar>
|
</q-toolbar>
|
||||||
<d-table
|
<div v-if="rows.length != 0">
|
||||||
flat
|
<d-table
|
||||||
dense
|
flat
|
||||||
bordered
|
dense
|
||||||
virtual-scroll
|
bordered
|
||||||
:rows="rows"
|
virtual-scroll
|
||||||
:columns="columns"
|
:rows="rows"
|
||||||
:grid="!mode"
|
:columns="columns"
|
||||||
:filter="filter"
|
:grid="!mode"
|
||||||
:rows-per-page-options="[10, 25, 50, 100]"
|
:filter="filter"
|
||||||
:visible-columns="visibleColumns"
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
:virtual-scroll-sticky-size-start="48"
|
:visible-columns="visibleColumns"
|
||||||
>
|
:virtual-scroll-sticky-size-start="48"
|
||||||
<template v-slot:header="props">
|
>
|
||||||
<q-tr :props="props">
|
<template v-slot:header="props">
|
||||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
<q-tr :props="props">
|
||||||
<span class="text-weight-medium">{{ col.label }}</span>
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
</q-th>
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
<q-th auto-width />
|
</q-th>
|
||||||
</q-tr>
|
<q-th auto-width />
|
||||||
</template>
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
|
||||||
<template v-if="mode" v-slot:body="props">
|
<template v-if="mode" v-slot:body="props">
|
||||||
<q-tr :props="props" class="cursor-pointer">
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
||||||
<div v-if="col.name == 'no'">
|
<div v-if="col.name == 'no'">
|
||||||
{{ props.rowIndex + 1 }}
|
{{ props.rowIndex + 1 }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="col.name == 'status'">
|
<div v-else-if="col.name == 'status'">
|
||||||
{{ props.row.status ? props.row.status : "-" }}
|
{{ props.row.status ? props.row.status : "-" }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
{{ col.value ? col.value : "-" }}
|
{{ col.value ? col.value : "-" }}
|
||||||
</div>
|
</div>
|
||||||
</q-td>
|
</q-td>
|
||||||
<q-td auto-width>
|
<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">
|
|
||||||
<q-btn
|
<q-btn
|
||||||
icon="mdi-history"
|
|
||||||
color="info"
|
color="info"
|
||||||
flat
|
flat
|
||||||
dense
|
dense
|
||||||
round
|
round
|
||||||
size="14px"
|
size="14px"
|
||||||
class="absolute_button"
|
icon="mdi-history"
|
||||||
@click="onHistory(props.row.id)"
|
@click="onHistory(props.row.id)"
|
||||||
>
|
>
|
||||||
<q-tooltip>ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ</q-tooltip>
|
<q-tooltip>ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ</q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
<q-item v-for="col in props.cols" :key="col.name">
|
</q-td>
|
||||||
<q-item-section class="fix_top">
|
</q-tr>
|
||||||
<q-item-label class="text-grey-6 text-weight-medium">{{
|
</template>
|
||||||
col.label
|
<template v-else v-slot:item="props">
|
||||||
}}</q-item-label>
|
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
|
||||||
</q-item-section>
|
<q-card bordered flat>
|
||||||
<q-item-section class="fix_top">
|
<q-list dense class="q-mt-lg relative-position">
|
||||||
<q-item-label class="text-dark text-weight-medium">{{
|
<q-btn
|
||||||
col.value ? col.value : "-"
|
icon="mdi-history"
|
||||||
}}</q-item-label>
|
color="info"
|
||||||
</q-item-section>
|
flat
|
||||||
</q-item>
|
dense
|
||||||
</q-list>
|
round
|
||||||
</q-card>
|
size="14px"
|
||||||
</div>
|
class="absolute_button"
|
||||||
</template>
|
@click="onHistory(props.row.id)"
|
||||||
<template v-slot:no-data>
|
>
|
||||||
<div
|
<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"
|
class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
|
||||||
|
bordered
|
||||||
>
|
>
|
||||||
<span> ไม่พบข้อมูล</span>
|
ไม่พบข้อมูล
|
||||||
</div>
|
</q-card>
|
||||||
</template>
|
</div>
|
||||||
</d-table>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<DialogHistory
|
<DialogHistory
|
||||||
v-model:modal="modalHistory"
|
v-model:modal="modalHistory"
|
||||||
|
|
|
||||||
386
src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
Normal file
386
src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
Normal file
|
|
@ -0,0 +1,386 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import { useQuasar, type QTableProps } from "quasar";
|
||||||
|
import { ref, reactive, onMounted } from "vue";
|
||||||
|
|
||||||
|
//history dialog
|
||||||
|
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
|
||||||
|
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
const idByRow = ref<string>("");
|
||||||
|
const rows = ref<any[]>([]);
|
||||||
|
const filter = ref<string>("");
|
||||||
|
const rowsHistory = ref<any[]>([]);
|
||||||
|
const $q = useQuasar();
|
||||||
|
const mode = ref<any>($q.screen.gt.xs);
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
|
||||||
|
|
||||||
|
const modalHistory = ref<boolean>(false);
|
||||||
|
/** ตัวแปรข้อมูล */
|
||||||
|
|
||||||
|
const visibleColumns = ref<string[]>([
|
||||||
|
"no",
|
||||||
|
"Knowledge",
|
||||||
|
"develop",
|
||||||
|
"target",
|
||||||
|
"developmentResults",
|
||||||
|
"developmentReport",
|
||||||
|
]);
|
||||||
|
const visibleColumnsHistory = ref<string[]>([
|
||||||
|
"no",
|
||||||
|
"Knowledge",
|
||||||
|
"develop",
|
||||||
|
"target",
|
||||||
|
"developmentResults",
|
||||||
|
"developmentReport",
|
||||||
|
]);
|
||||||
|
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "no",
|
||||||
|
align: "left",
|
||||||
|
label: "ลำดับ",
|
||||||
|
sortable: true,
|
||||||
|
field: "no",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
format: (v) => date2Thai(v),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Knowledge",
|
||||||
|
align: "left",
|
||||||
|
label: "ความรู้ / ทักษะ / สมรรถนะที่ต้องได้รับการพัฒนา",
|
||||||
|
sortable: true,
|
||||||
|
field: "Knowledge",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "develop",
|
||||||
|
align: "left",
|
||||||
|
label: "วิธีการพัฒนา",
|
||||||
|
sortable: true,
|
||||||
|
field: "develop",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "target",
|
||||||
|
align: "left",
|
||||||
|
label: "เป้าหมายการพัฒนา",
|
||||||
|
sortable: true,
|
||||||
|
field: "target",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "developmentResults",
|
||||||
|
align: "left",
|
||||||
|
label: "วิธีการวัดผลการพัฒนา",
|
||||||
|
sortable: true,
|
||||||
|
field: "developmentResults",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "developmentReport",
|
||||||
|
align: "left",
|
||||||
|
label: "รายงานผลการพัฒนา",
|
||||||
|
sortable: true,
|
||||||
|
field: "developmentReport",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const columnsHistory = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "no",
|
||||||
|
align: "left",
|
||||||
|
label: "ลำดับ",
|
||||||
|
sortable: true,
|
||||||
|
field: "no",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
format: (v) => date2Thai(v),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Knowledge",
|
||||||
|
align: "left",
|
||||||
|
label: "ความรู้ / ทักษะ / สมรรถนะที่ต้องได้รับการพัฒนา",
|
||||||
|
sortable: true,
|
||||||
|
field: "Knowledge",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "develop",
|
||||||
|
align: "left",
|
||||||
|
label: "วิธีการพัฒนา",
|
||||||
|
sortable: true,
|
||||||
|
field: "develop",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "target",
|
||||||
|
align: "left",
|
||||||
|
label: "เป้าหมายการพัฒนา",
|
||||||
|
sortable: true,
|
||||||
|
field: "target",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "developmentResults",
|
||||||
|
align: "left",
|
||||||
|
label: "วิธีการวัดผลการพัฒนา",
|
||||||
|
sortable: true,
|
||||||
|
field: "developmentResults",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "developmentReport",
|
||||||
|
align: "left",
|
||||||
|
label: "รายงานผลการพัฒนา",
|
||||||
|
sortable: true,
|
||||||
|
field: "developmentReport",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
function onHistory(id: string) {
|
||||||
|
modalHistory.value = true;
|
||||||
|
idByRow.value = id;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** get data */
|
||||||
|
function getData() {
|
||||||
|
showLoader();
|
||||||
|
http
|
||||||
|
.get(config.API.dataUserCertificate("assessments"))
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
rows.value = data;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** get history */
|
||||||
|
function getHistory() {
|
||||||
|
showLoader();
|
||||||
|
http
|
||||||
|
.get(config.API.dataUserCertificateHistory("assessments", idByRow.value))
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
rowsHistory.value = data;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getData();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<!-- v-if="mode" -->
|
||||||
|
<div class="col-12">
|
||||||
|
<q-toolbar class="q-px-none q-mt-md">
|
||||||
|
<span class="text-blue-6 text-weight-bold text-body1"
|
||||||
|
>การพัฒนารายบุคคล (Individual Development Plan)</span
|
||||||
|
>
|
||||||
|
<q-space />
|
||||||
|
<q-input
|
||||||
|
v-if="mode"
|
||||||
|
class="inputgreen"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
v-model="filter"
|
||||||
|
label="ค้นหา"
|
||||||
|
style="max-width: 200px"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon
|
||||||
|
v-if="filter !== ''"
|
||||||
|
name="clear"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="filter = ''"
|
||||||
|
/>
|
||||||
|
<q-icon
|
||||||
|
v-else
|
||||||
|
name="search"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="filter = ''"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
<q-select
|
||||||
|
v-if="mode"
|
||||||
|
class="q-ml-sm"
|
||||||
|
dense
|
||||||
|
multiple
|
||||||
|
outlined
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
options-cover
|
||||||
|
options-dense
|
||||||
|
option-value="name"
|
||||||
|
style="min-width: 150px"
|
||||||
|
v-model="visibleColumns"
|
||||||
|
:options="columns"
|
||||||
|
: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>
|
||||||
|
|
||||||
|
<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">
|
||||||
|
<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
|
||||||
|
>
|
||||||
|
ไม่พบข้อมูล
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogHistory
|
||||||
|
v-model:modal="modalHistory"
|
||||||
|
:title="'ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ'"
|
||||||
|
:getData="getHistory"
|
||||||
|
:rows="rowsHistory"
|
||||||
|
:visibleColumns="visibleColumnsHistory"
|
||||||
|
:columns="columnsHistory"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<style scoped>
|
||||||
|
.absolute_button {
|
||||||
|
position: absolute;
|
||||||
|
right: 5px;
|
||||||
|
top: -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fix_top {
|
||||||
|
justify-content: start !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -7,6 +7,7 @@ import Training from "@/modules/10_registry/04_Achievement/02_Training.vue";
|
||||||
import Insignia from "@/modules/10_registry/04_Achievement/03_Insignia.vue";
|
import Insignia from "@/modules/10_registry/04_Achievement/03_Insignia.vue";
|
||||||
import Honor from "@/modules/10_registry/04_Achievement/04_Honor.vue";
|
import Honor from "@/modules/10_registry/04_Achievement/04_Honor.vue";
|
||||||
import Assessments from "@/modules/10_registry/04_Achievement/05_Assessments.vue";
|
import Assessments from "@/modules/10_registry/04_Achievement/05_Assessments.vue";
|
||||||
|
import DevelopmentPlan from "@/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue";
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -33,6 +34,7 @@ const router = useRouter();
|
||||||
<Insignia />
|
<Insignia />
|
||||||
<Honor />
|
<Honor />
|
||||||
<Assessments />
|
<Assessments />
|
||||||
|
<DevelopmentPlan />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue