hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

ปรับ TableView ทะเบียนประวัติ

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2025-04-30 10:44:23 +07:00
parent fe6ce363f6
commit aecf75c1e7
12 changed files with 254 additions and 474 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
View file

@ -399,7 +399,6 @@ onMounted(() => {
</template> </template>
</q-input> </q-input>
<q-select <q-select
v-if="mode === 'table'"
v-model="visibleColumns" v-model="visibleColumns"
multiple multiple
outlined outlined
@ -516,10 +515,8 @@ onMounted(() => {
</q-tr> </q-tr>
</template> </template>
<template v-slot:item="props" v-else> <template v-slot:item="props" v-else>
<div <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition" <q-card flat bordered>
>
<q-card bordered>
<q-card-actions align="right" class="bg-grey-3"> <q-card-actions align="right" class="bg-grey-3">
<q-btn <q-btn
v-if="props.row.isUpload" v-if="props.row.isUpload"
@ -560,8 +557,7 @@ onMounted(() => {
v-for="(col, index) in props.cols" v-for="(col, index) in props.cols"
:key="col.name" :key="col.name"
> >
<div></div> <div class="col text-grey-6">
<div class="col label-color">
<div>{{ col.label }}</div> <div>{{ col.label }}</div>
</div> </div>
<div class="col"> <div class="col">
@ -842,8 +838,4 @@ onMounted(() => {
.bg-color { .bg-color {
background-color: #fafafa; background-color: #fafafa;
} }
.label-color {
color: #747474cc;
}
</style> </style>

24
src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue
View file

@ -439,7 +439,6 @@ onMounted(() => {
</template> </template>
</q-input> </q-input>
<q-select <q-select
v-if="mode === 'table'"
v-model="visibleColumns" v-model="visibleColumns"
multiple multiple
outlined outlined
@ -558,9 +557,7 @@ onMounted(() => {
</q-tr> </q-tr>
</template> </template>
<template v-slot:item="props" v-else> <template v-slot:item="props" v-else>
<div <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
>
<q-card bordered> <q-card bordered>
<q-card-actions align="right" class="bg-grey-3"> <q-card-actions align="right" class="bg-grey-3">
<q-btn <q-btn
@ -586,17 +583,16 @@ onMounted(() => {
<q-separator /> <q-separator />
<q-list> <q-list>
<div <div
:class="`row q-pa-sm`"
:style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
v-for="(col, index) in props.cols" v-for="(col, index) in props.cols"
:key="col.name" :key="col.name"
:style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
> >
<div class="row q-pa-sm"> <div class="col text-grey-6">
<div class="col-7 label-color"> <div>{{ col.label }}</div>
<div>{{ col.label }}</div> </div>
</div> <div class="col">
<div class="col"> <div>{{ col.value ? col.value : "-" }}</div>
<div>{{ col.value ? col.value : "-" }}</div>
</div>
</div> </div>
</div> </div>
</q-list> </q-list>
@ -1007,10 +1003,6 @@ onMounted(() => {
border: 1px solid #d0d0d0; border: 1px solid #d0d0d0;
} }
.label-color {
color: #747474cc;
}
.bg-color { .bg-color {
background-color: #fafafa; background-color: #fafafa;
} }

36
src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
View file

@ -684,7 +684,6 @@ onMounted(async () => {
</template> </template>
</q-input> </q-input>
<q-select <q-select
v-if="modeView == 'table'"
v-model="visibleColumns" v-model="visibleColumns"
multiple multiple
outlined outlined
@ -738,7 +737,6 @@ onMounted(async () => {
v-model:pagination="pagination" v-model:pagination="pagination"
:grid="modeView === 'card'" :grid="modeView === 'card'"
:visible-columns="visibleColumns" :visible-columns="visibleColumns"
:card-container-class="modeView === 'card' ? 'q-col-gutter-md' : ''"
> >
<template v-slot:header="props"> <template v-slot:header="props">
<q-tr :props="props"> <q-tr :props="props">
@ -798,8 +796,8 @@ onMounted(async () => {
</template> </template>
<template v-slot:item="props" v-else> <template v-slot:item="props" v-else>
<div class="col-xs-12 col-sm-6 col-md-6"> <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
<q-card bordered> <q-card flat bordered>
<q-card-actions class="bg-grey-3" align="right"> <q-card-actions class="bg-grey-3" align="right">
<q-btn <q-btn
flat flat
@ -822,25 +820,21 @@ onMounted(async () => {
</q-btn> </q-btn>
</q-card-actions> </q-card-actions>
<q-separator /> <q-separator />
<div> <q-list>
<q-item <div
v-for="(col, index) in props.cols.filter( :class="`row q-pa-sm`"
(col:any) => col.name !== 'desc' :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
)" v-for="(col, index) in props.cols"
:key="col.name" :key="col.name"
:class="index % 2 !== 0 ? 'bg-grey-1' : ''"
> >
<q-item-section class="text-grey-6"> <div class="col text-grey-6">
<q-item-label>{{ col.label }}</q-item-label> <div>{{ col.label }}</div>
</q-item-section> </div>
<div class="col">
<q-item-section class="text-dark"> <div>{{ col.value ? col.value : "-" }}</div>
<q-item-label> </div>
{{ col.value ? col.value : "-" }} </div>
</q-item-label> </q-list>
</q-item-section>
</q-item>
</div>
</q-card> </q-card>
</div> </div>
</template> </template>

36
src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
View file

@ -479,7 +479,6 @@ onMounted(() => {
</template> </template>
</q-input> </q-input>
<q-select <q-select
v-if="modeView == 'table'"
v-model="visibleColumns" v-model="visibleColumns"
multiple multiple
outlined outlined
@ -533,7 +532,6 @@ onMounted(() => {
:grid="modeView === 'card'" :grid="modeView === 'card'"
v-model:pagination="pagination" v-model:pagination="pagination"
:visible-columns="visibleColumns" :visible-columns="visibleColumns"
:card-container-class="modeView === 'card' ? 'q-col-gutter-md' : ''"
> >
<template v-slot:header="props"> <template v-slot:header="props">
<q-tr :props="props"> <q-tr :props="props">
@ -592,8 +590,8 @@ onMounted(() => {
</template> </template>
<template v-slot:item="props" v-else> <template v-slot:item="props" v-else>
<div class="col-xs-12 col-sm-6 col-md-6"> <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
<q-card bordered> <q-card flat bordered>
<q-card-actions class="bg-grey-3" align="right"> <q-card-actions class="bg-grey-3" align="right">
<q-btn <q-btn
v-if="props.row.isUpload == true" v-if="props.row.isUpload == true"
@ -627,25 +625,21 @@ onMounted(() => {
</q-btn> </q-btn>
</q-card-actions> </q-card-actions>
<q-separator /> <q-separator />
<div> <q-list>
<q-item <div
v-for="(col, index) in props.cols.filter( :class="`row q-pa-sm`"
(col:any) => col.name !== 'desc' :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
)" v-for="(col, index) in props.cols"
:key="col.name" :key="col.name"
:class="index % 2 !== 0 ? 'bg-grey-1' : ''"
> >
<q-item-section class="col-7 text-grey-6"> <div class="col text-grey-6">
<q-item-label>{{ col.label }}</q-item-label> <div>{{ col.label }}</div>
</q-item-section> </div>
<div class="col">
<q-item-section class="text-dark"> <div>{{ col.value ? col.value : "-" }}</div>
<q-item-label> </div>
{{ col.value ? col.value : "-" }} </div>
</q-item-label> </q-list>
</q-item-section>
</q-item>
</div>
</q-card> </q-card>
</div> </div>
</template> </template>

39
src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
View file

@ -557,6 +557,7 @@ onMounted(async () => {
hideLoader(); hideLoader();
}); });
</script> </script>
<template> <template>
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<div class="col-12"> <div class="col-12">
@ -594,7 +595,6 @@ onMounted(async () => {
</template> </template>
</q-input> </q-input>
<q-select <q-select
v-if="modeView == 'table'"
v-model="visibleColumns" v-model="visibleColumns"
multiple multiple
outlined outlined
@ -650,7 +650,6 @@ onMounted(async () => {
v-model:pagination="pagination" v-model:pagination="pagination"
:grid="modeView === 'card'" :grid="modeView === 'card'"
:visible-columns="visibleColumns" :visible-columns="visibleColumns"
:card-container-class="modeView === 'card' ? 'q-col-gutter-md' : ''"
> >
<template v-slot:header="props"> <template v-slot:header="props">
<q-tr :props="props"> <q-tr :props="props">
@ -699,8 +698,8 @@ onMounted(async () => {
</template> </template>
<template v-slot:item="props" v-else> <template v-slot:item="props" v-else>
<div class="col-xs-12 col-sm-6 col-md-6"> <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
<q-card bordered> <q-card flat bordered>
<q-card-actions class="bg-grey-3" align="right"> <q-card-actions class="bg-grey-3" align="right">
<q-btn <q-btn
flat flat
@ -728,25 +727,23 @@ onMounted(async () => {
</q-btn> </q-btn>
</q-card-actions> </q-card-actions>
<q-separator /> <q-separator />
<div> <q-list>
<q-item <div
v-for="(col, index) in props.cols.filter( :class="`row q-pa-sm`"
(col:any) => col.name !== 'desc' :style="`background-color: ${
)" index % 2 !== 0 ? '#FAFAFA' : ''
}`"
v-for="(col, index) in props.cols"
:key="col.name" :key="col.name"
:class="index % 2 !== 0 ? 'bg-grey-1' : ''"
> >
<q-item-section class="text-grey-6"> <div class="col text-grey-6">
<q-item-label>{{ col.label }}</q-item-label> <div>{{ col.label }}</div>
</q-item-section> </div>
<div class="col">
<q-item-section class="text-dark"> <div>{{ col.value ? col.value : "-" }}</div>
<q-item-label> </div>
{{ col.value ? col.value : "-" }} </div>
</q-item-label> </q-list>
</q-item-section>
</q-item>
</div>
</q-card> </q-card>
</div> </div>
</template> </template>

129
src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue
View file

@ -495,7 +495,6 @@ onMounted(() => {
</template> </template>
</q-input> </q-input>
<q-select <q-select
v-if="mode == 'table'"
v-model="visibleColumns" v-model="visibleColumns"
multiple multiple
outlined outlined
@ -541,7 +540,6 @@ onMounted(() => {
</div> </div>
<d-table <d-table
:card-container-class="mode === 'card' ? 'q-col-gutter-md' : ''"
:grid="mode === 'card'" :grid="mode === 'card'"
ref="table" ref="table"
row-key="id" row-key="id"
@ -611,93 +609,54 @@ onMounted(() => {
</q-tr> </q-tr>
</template> </template>
<template v-slot:item="props" v-else> <template v-slot:item="props" v-else>
<div class="col-xs-12 col-sm-6 col-md-6"> <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
<q-card flat bordered class="q-pa-none"> <q-card flat bordered>
<div class="row bg-grey-3"> <q-card-actions align="right" class="bg-grey-3">
<q-space /> <q-btn
<div> v-if="props.row.isUpload"
<q-btn color="green"
v-if="props.row.isUpload" flat
color="green" dense
flat round
dense icon="mdi-file-document-outline"
round @click="onDownloadFile(props.row.id)"
icon="mdi-file-document-outline" >
@click="onDownloadFile(props.row.id)" <q-tooltip>ดาวน์โหลด</q-tooltip>
> </q-btn>
<q-tooltip>ดาวน์โหลด</q-tooltip> <q-btn
</q-btn> color="deep-purple"
<q-btn icon="mdi-history"
color="deep-purple" flat
icon="mdi-history" round
flat @click="openDialogHistory(props.row.id)"
round ><q-tooltip>ประวิติแก้ไขวินัย</q-tooltip></q-btn
@click="openDialogHistory(props.row.id)" >
><q-tooltip>ประวิติแก้ไขวินัย</q-tooltip></q-btn <q-btn
> v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
<q-btn color="edit"
v-if="isLeave == false && checkPermission($route)?.attrIsUpdate" icon="edit"
color="edit" flat
icon="edit" round
flat @click="openDialogEdit(props.row)"
round ><q-tooltip>แก้ไข</q-tooltip></q-btn
@click="openDialogEdit(props.row)" >
><q-tooltip>แก้ไข</q-tooltip></q-btn </q-card-actions>
>
</div>
</div>
<q-separator /> <q-separator />
<q-card-section class="q-pa-none"> <q-list>
<div class="row q-pa-sm"> <div
<div class="col-3 text-grey-6 text-weight-medium"> :class="`row q-pa-sm`"
ระดับการลงโทษทางวินัย :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
v-for="(col, index) in props.cols"
:key="col.name"
>
<div class="col text-grey-6">
<div>{{ col.label }}</div>
</div> </div>
<div class="col-3"> <div class="col">
{{ props.row.level !== "" ? props.row.level : "-" }} <div>{{ col.value ? col.value : "-" }}</div>
</div>
<div class="col-3 text-grey-6 text-weight-medium">
วัน/เดือน/ปี
</div>
<div class="col-3">
{{ props.row.date ? date2Thai(props.row.date) : "-" }}
</div> </div>
</div> </div>
<q-separator /> </q-list>
<div class="row q-pa-sm bg-grey-2">
<div class="col-3 text-grey-6 text-weight-medium">ล้างมลทิน</div>
<div class="col-3">
{{ props.row.unStigma !== "" ? props.row.unStigma : "-" }}
</div>
<div class="col-3 text-grey-6 text-weight-medium">
เลขที่คำสั่ง
</div>
<div class="col-3">
{{
props.row.refCommandNo !== "" ? props.row.refCommandNo : "-"
}}
</div>
</div>
<q-separator />
<div class="row q-pa-sm">
<div class="col-3 text-grey-6 text-weight-medium">
เอกสารอ้างอิง (ลงวันที่)
</div>
<div class="col-3">
{{
props.row.refCommandDate
? date2Thai(props.row.refCommandDate)
: "-"
}}
</div>
</div>
<q-separator />
<div class="row q-pa-sm bg-grey-2">
<div class="col-3 text-grey-6 text-weight-medium">รายละเอียด</div>
<div class="col-9">
{{ props.row.detail !== "" ? props.row.detail : "-" }}
</div>
</div>
</q-card-section>
</q-card> </q-card>
</div> </div>
</template> </template>

98
src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue
View file

@ -508,7 +508,6 @@ onMounted(() => {
</template> </template>
</q-input> </q-input>
<q-select <q-select
v-if="mode == 'table'"
v-model="visibleColumns" v-model="visibleColumns"
multiple multiple
outlined outlined
@ -558,7 +557,6 @@ onMounted(() => {
flat flat
bordered bordered
dense dense
:card-container-class="mode === 'card' ? 'q-col-gutter-md' : ''"
:columns="columns" :columns="columns"
:rows="rows" :rows="rows"
:grid="mode === 'card'" :grid="mode === 'card'"
@ -612,69 +610,47 @@ onMounted(() => {
</q-tr> </q-tr>
</template> </template>
<template v-slot:item="props" v-else> <template v-slot:item="props" v-else>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6"> <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
<q-card flat bordered class="q-pa-none"> <q-card flat bordered>
<div class="row bg-grey-3"> <q-card-actions align="right" class="bg-grey-3">
<q-space /> <q-btn
<div> color="deep-purple"
<q-btn icon="mdi-history"
color="deep-purple" flat
icon="mdi-history" round
flat @click="openDialogHistory(props.row.id)"
round ><q-tooltip>ประวิติแก้ไขการลา</q-tooltip></q-btn
@click="openDialogHistory(props.row.id)" >
><q-tooltip>ประวิติแก้ไขการลา</q-tooltip></q-btn <q-btn
> v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
<q-btn color="edit"
v-if="isLeave == false && checkPermission($route)?.attrIsUpdate" icon="edit"
color="edit" flat
icon="edit" round
flat @click="openDialogEdit(props.row)"
round ><q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
@click="openDialogEdit(props.row)" >
><q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn </q-card-actions>
>
</div>
</div>
<q-separator /> <q-separator />
<q-card-section class="q-pa-none"> <q-list>
<div class="row q-pa-sm"> <div
<div class="col-3 text-grey-6 text-weight-medium"> :class="`row q-pa-sm`"
ประเภทการลา :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
v-for="(col, index) in props.cols"
:key="col.name"
>
<div class="col text-grey-6">
<div>{{ col.label }}</div>
</div> </div>
<div class="col-9">
{{ props.row.typeLeave !== "" ? props.row.typeLeave : "-" }} <div class="col">
<div v-if="col.name === 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else>{{ col.value ? col.value : "-" }}</div>
</div> </div>
</div> </div>
<q-separator /> </q-list>
<div class="row q-pa-sm bg-grey-2">
<div class="col-3 text-grey-6 text-weight-medium">
วัน/เดือน/ปี ที่ลา
</div>
<div class="col-3">
{{
props.row.dateStartLeave
? date2Thai(props.row.dateStartLeave)
: "-"
}}
</div>
<div class="col-3 text-grey-6 text-weight-medium">จำนวนวันลา</div>
<div class="col-3">
{{ props.row.numLeave ? props.row.numLeave : "-" }}
</div>
</div>
<q-separator />
<div class="row q-pa-sm bg-grey-2">
<div class="col-3 text-grey-6 text-weight-medium">สถานะ</div>
<div class="col-3">
{{ props.row.status ? statusLeave(props.row.status) : "-" }}
</div>
<div class="col-3 text-grey-6 text-weight-medium">เหตุผล</div>
<div class="col-3">
{{ props.row.reason !== "" ? props.row.reason : "-" }}
</div>
</div>
</q-card-section>
</q-card> </q-card>
</div> </div>
</template> </template>

103
src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
View file

@ -452,6 +452,7 @@ onMounted(() => {
fetchData(profileId.value); fetchData(profileId.value);
}); });
</script> </script>
<template> <template>
<div class="row items-center q-gutter-x-sm q-pb-sm"> <div class="row items-center q-gutter-x-sm q-pb-sm">
<q-btn <q-btn
@ -480,7 +481,6 @@ onMounted(() => {
</template> </template>
</q-input> </q-input>
<q-select <q-select
v-if="mode == 'table'"
v-model="visibleColumns" v-model="visibleColumns"
multiple multiple
outlined outlined
@ -530,7 +530,6 @@ onMounted(() => {
flat flat
bordered bordered
dense dense
:card-container-class="mode === 'card' ? 'q-col-gutter-md' : ''"
:columns="columns" :columns="columns"
:rows="rows" :rows="rows"
:grid="mode === 'card'" :grid="mode === 'card'"
@ -594,76 +593,44 @@ onMounted(() => {
</q-tr> </q-tr>
</template> </template>
<template v-slot:item="props" v-else> <template v-slot:item="props" v-else>
<div class="col-xs-12 col-sm-6 col-md-6"> <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
<q-card flat bordered class="q-pa-none"> <q-card flat bordered>
<div class="row bg-grey-3"> <q-card-actions align="right" class="bg-grey-3">
<q-space /> <q-btn
<div> color="deep-purple"
<q-btn icon="mdi-history"
color="deep-purple" flat
icon="mdi-history" round
flat @click="openDialogHistory(props.row.id)"
round ><q-tooltip>ประวัติแก้ไขปฏิบัติราชการพิเศษ</q-tooltip>
@click="openDialogHistory(props.row.id)" </q-btn>
><q-tooltip>ประวัติแก้ไขปฏิบัติราชการพิเศษ</q-tooltip> <q-btn
</q-btn> v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
<q-btn color="edit"
v-if="isLeave == false && checkPermission($route)?.attrIsUpdate" icon="edit"
color="edit" flat
icon="edit" round
flat @click="openDialogEdit(props.row)"
round ><q-tooltip>แก้ไขข้อมูล</q-tooltip>
@click="openDialogEdit(props.row)" </q-btn>
><q-tooltip>แก้ไขข้อมูล</q-tooltip> </q-card-actions>
</q-btn>
</div>
</div>
<q-separator /> <q-separator />
<q-card-section class="q-pa-none"> <q-list>
<div class="row q-pa-sm"> <div
<div class="col text-grey-6 text-weight-medium">เริ่มต้น</div> :class="`row q-pa-sm`"
:style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
v-for="(col, index) in props.cols"
:key="col.name"
>
<div class="col text-grey-6">
<div>{{ col.label }}</div>
</div>
<div class="col"> <div class="col">
{{ props.row.dateStart ? date2Thai(props.row.dateStart) : "-" }} <div>{{ col.value ? col.value : "-" }}</div>
</div>
<div class="col text-grey-6 text-weight-medium">สิ้นสุด</div>
<div class="col">
{{ props.row.dateEnd ? date2Thai(props.row.dateEnd) : "-" }}
</div> </div>
</div> </div>
<q-separator /> </q-list>
<div class="row q-pa-sm bg-grey-2">
<div class="col-3 text-grey-6 text-weight-medium">
เอกสารอ้างอิง
</div>
<div class="col-3">
{{ props.row.reference ? props.row.reference : "-" }}
</div>
<div class="col text-grey-6 text-weight-medium">เลขที่คำสั่ง</div>
<div class="col">
{{ props.row.refCommandNo ? props.row.refCommandNo : "-" }}
</div>
</div>
<q-separator />
<div class="row q-pa-sm">
<div class="col-3 text-grey-6 text-weight-medium">
เอกสารอ้างอิง (ลงวันที่)
</div>
<div class="col-3">
{{
props.row.refCommandDate
? date2Thai(props.row.refCommandDate)
: "-"
}}
</div>
</div>
<q-separator />
<div class="row q-pa-sm bg-grey-2">
<div class="col-3 text-grey-6 text-weight-medium">รายละเอียด</div>
<div class="col-9">
{{ props.row.detail ? props.row.detail : "-" }}
</div>
</div>
</q-card-section>
</q-card> </q-card>
</div> </div>
</template> </template>

79
src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue
View file

@ -246,6 +246,7 @@ onMounted(() => {
getData(); getData();
}); });
</script> </script>
<template> <template>
<div class="row items-center q-gutter-x-sm q-pb-sm"> <div class="row items-center q-gutter-x-sm q-pb-sm">
<q-btn <q-btn
@ -274,7 +275,6 @@ onMounted(() => {
</template> </template>
</q-input> </q-input>
<q-select <q-select
v-if="mode == 'table'"
v-model="visibleColumns" v-model="visibleColumns"
multiple multiple
outlined outlined
@ -326,7 +326,6 @@ onMounted(() => {
bordered bordered
v-model:pagination="pagination" v-model:pagination="pagination"
flat flat
:card-container-class="mode === 'card' ? 'q-col-gutter-md' : ''"
:grid="mode === 'card'" :grid="mode === 'card'"
:visible-columns="visibleColumns" :visible-columns="visibleColumns"
> >
@ -371,50 +370,44 @@ onMounted(() => {
</q-tr> </q-tr>
</template> </template>
<template v-slot:item="props" v-else> <template v-slot:item="props" v-else>
<div class="col-xs-12 col-sm-6 col-md-6"> <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
<q-card flat bordered> <q-card flat bordered>
<div class="row bg-grey-3"> <q-card-actions class="bg-grey-3" align="right">
<q-space /> <q-btn
<div class="q-gutter-x-sm"> color="deep-purple"
<q-btn icon="mdi-history"
color="deep-purple" flat
icon="mdi-history" round
flat @click="openDialogHistory(props.row.id)"
round ><q-tooltip>ประวิติแก้ไขอื่นๆ</q-tooltip></q-btn
@click="openDialogHistory(props.row.id)"
><q-tooltip>ประวิติแก้ไขอื่นๆ</q-tooltip></q-btn
>
<q-btn
v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
color="edit"
icon="edit"
flat
round
@click="openDialogEdit(props.row)"
><q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
>
</div>
</div>
<q-separator />
<q-card-section class="q-pa-none">
<q-item
v-for="(col, index) in props.cols.filter(
(col:any) => col.name !== 'desc'
)"
:key="col.name"
:class="index % 2 !== 0 ? 'bg-grey-1' : ''"
> >
<q-item-section class="text-grey-6"> <q-btn
<q-item-label>{{ col.label }}</q-item-label> v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
</q-item-section> color="edit"
icon="edit"
flat
round
@click="openDialogEdit(props.row)"
><q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
>
</q-card-actions>
<q-item-section class="text-dark"> <q-separator />
<q-item-label> <q-list>
{{ col.value ? col.value : "-" }} <div
</q-item-label> :class="`row q-pa-sm`"
</q-item-section> :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
</q-item> v-for="(col, index) in props.cols"
</q-card-section> :key="col.name"
>
<div class="col text-grey-6">
<div>{{ col.label }}</div>
</div>
<div class="col">
<div>{{ col.value ? col.value : "-" }}</div>
</div>
</div>
</q-list>
</q-card> </q-card>
</div> </div>
</template> </template>

99
src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue
View file

@ -635,7 +635,6 @@ onMounted(async () => {
</template> </template>
</q-input> </q-input>
<q-select <q-select
v-if="mode === 'table'"
v-model="visibleColumns" v-model="visibleColumns"
multiple multiple
outlined outlined
@ -740,10 +739,8 @@ onMounted(async () => {
</q-tr> </q-tr>
</template> </template>
<template v-slot:item="props" v-else> <template v-slot:item="props" v-else>
<div <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition" <q-card flat bordered>
>
<q-card bordered>
<q-card-actions align="right" class="bg-grey-3"> <q-card-actions align="right" class="bg-grey-3">
<q-btn <q-btn
dense dense
@ -768,83 +765,21 @@ onMounted(async () => {
</q-btn> </q-btn>
</q-card-actions> </q-card-actions>
<q-separator /> <q-separator />
<div class="row"> <q-list>
<div class="col-3 q-pa-sm label-color">ระดับการศึกษา</div> <div
<div class="col-4 q-pa-sm">{{ props.cols[0].value }}</div> :class="`row q-pa-sm`"
<div class="col-2 q-pa-sm label-color">สถานศึกษา</div> :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
<div class="col-3 q-pa-sm">{{ props.cols[1].value }}</div> v-for="(col, index) in props.cols"
<div class="col-12"> :key="col.name"
<div :class="`row bg-color`"> >
<div class="col-3 q-pa-sm label-color">ตั้งแต่</div> <div class="col text-grey-6">
<div class="col-4 q-pa-sm"> <div>{{ col.label }}</div>
{{ props.cols[2].value }} </div>
</div> <div class="col">
<div>{{ col.value ? col.value : "-" }}</div>
<div class="col-2 q-pa-sm label-color">ถึง</div>
<div class="col-3 q-pa-sm">
{{ props.cols[3].value }}
</div>
</div> </div>
</div> </div>
<div class="col-3 q-pa-sm label-color">วันที่สำเร็จการศึกษา</div> </q-list>
<div class="col-9 q-pa-sm">
{{ props.cols[4].value }}
</div>
<div class="col-12">
<div :class="`row bg-color`">
<div class="col-4 q-pa-sm label-color">
เป็นวุฒิการศึกษาในตำแหน่ง
</div>
<div class="col-3 q-pa-sm">
{{ props.cols[5].value ? "ใช่" : "ไม่ใช่" }}
</div>
<div class="col-2 q-pa-sm label-color">วุฒิการศึกษา</div>
<div class="col-3 q-pa-sm">
{{ props.cols[6].value ? props.cols[6].value : "-" }}
</div>
</div>
</div>
<div class="col-3 q-pa-sm label-color">สาขาวืชา/ทาง</div>
<div class="col-4 q-pa-sm">
{{ props.cols[7].value ? props.cols[7].value : "-" }}
</div>
<div class="col-2 q-pa-sm label-color">ทุน</div>
<div class="col-3 q-pa-sm">
{{ props.cols[8].value ? props.cols[8].value : "-" }}
</div>
<div class="col-12">
<div :class="`row bg-color`">
<div class="col-3 q-pa-sm label-color">เกรดเฉลี่ย</div>
<div class="col-4 q-pa-sm">
{{ props.cols[9].value ? props.cols[9].value : "-" }}
</div>
<div class="col-2 q-pa-sm label-color">ประเทศ</div>
<div class="col-3 q-pa-sm">
{{ props.cols[10].value ? props.cols[10].value : "-" }}
</div>
</div>
</div>
<div class="col-3 q-pa-sm label-color">ข้อมูลการติดต่อ</div>
<div class="col-4 q-pa-sm">
{{ props.cols[11].value ? props.cols[11].value : "-" }}
</div>
<div class="col-2 q-pa-sm label-color">ระยะเวลา</div>
<div class="col-3 q-pa-sm">
{{ props.cols[12].value ? props.cols[12].value : "-" }}
</div>
</div>
<div class="col-12">
<div :class="`row bg-color`">
<div class="col-3 q-pa-sm label-color">ระยะเวลาหลักสูตร (ปี)</div>
<div class="col-4 q-pa-sm">
{{ props.cols[13].value === 0 ? "-" : props.cols[13].value }}
</div>
<div class="col-2 q-pa-sm label-color">หมายเหตุ</div>
<div class="col-3 q-pa-sm">
{{ props.cols[14].value ? props.cols[14].value : "-" }}
</div>
</div>
</div>
</q-card> </q-card>
</div> </div>
</template> </template>
@ -1316,10 +1251,6 @@ onMounted(async () => {
border: 1px solid #d0d0d0; border: 1px solid #d0d0d0;
} }
.label-color {
color: #747474cc;
}
.bg-color { .bg-color {
background-color: #fafafa; background-color: #fafafa;
} }

42
src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue
View file

@ -439,7 +439,6 @@ onMounted(() => {
v-model="visibleColumns" v-model="visibleColumns"
multiple multiple
outlined outlined
v-if="mode === 'table'"
dense dense
options-dense options-dense
:display-value="$q.lang.table.columns" :display-value="$q.lang.table.columns"
@ -550,9 +549,7 @@ onMounted(() => {
</q-tr> </q-tr>
</template> </template>
<template v-slot:item="props" v-else> <template v-slot:item="props" v-else>
<div <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
>
<q-card bordered> <q-card bordered>
<q-card-actions align="right" class="bg-grey-3"> <q-card-actions align="right" class="bg-grey-3">
<q-btn <q-btn
@ -583,26 +580,21 @@ onMounted(() => {
</q-btn> </q-btn>
</q-card-actions> </q-card-actions>
<q-separator /> <q-separator />
<div class="row"> <q-list>
<div class="col q-pa-sm label-color">ด้าน</div> <div
<div class="col q-pa-sm"> :class="`row q-pa-sm`"
{{ props.cols[0].value ? props.cols[0].value : "-" }} :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
v-for="(col, index) in props.cols"
:key="col.name"
>
<div class="col text-grey-6">
<div>{{ col.label }}</div>
</div>
<div class="col">
<div>{{ col.value ? col.value : "-" }}</div>
</div>
</div> </div>
<div class="col q-pa-sm label-color">รายละเอียด</div> </q-list>
<div class="col q-pa-sm">
{{ props.cols[1].value ? props.cols[1].value : "-" }}
</div>
</div>
<div :class="`row bg-color`">
<div class="col q-pa-sm label-color">หมายเหตุ</div>
<div class="col q-pa-sm">
{{ props.cols[2].value ? props.cols[2].value : "-" }}
</div>
<div class="col q-pa-sm label-color">เอกสารอ้างอิง</div>
<div class="col q-pa-sm">
{{ props.cols[3].value ? props.cols[3].value : "-" }}
</div>
</div>
</q-card> </q-card>
</div> </div>
</template> </template>
@ -795,10 +787,6 @@ onMounted(() => {
</template> </template>
<style scoped> <style scoped>
.label-color {
color: #747474cc;
}
.bg-color { .bg-color {
background-color: #fafafa; background-color: #fafafa;
} }

29
src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue
View file

@ -481,10 +481,8 @@ onMounted(() => {
</q-tr> </q-tr>
</template> </template>
<template v-slot:item="props" v-else> <template v-slot:item="props" v-else>
<div <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-3 grid-style-transition" <q-card flat bordered>
>
<q-card bordered>
<q-card-actions class="bg-grey-3" align="right"> <q-card-actions class="bg-grey-3" align="right">
<q-btn <q-btn
v-if="props.row.isUpload" v-if="props.row.isUpload"
@ -521,20 +519,19 @@ onMounted(() => {
</q-card-actions> </q-card-actions>
<q-separator /> <q-separator />
<q-list> <q-list>
<q-item <div
v-for="(col, index) in props.cols.filter( :class="`row q-pa-sm`"
(col:any) => col.name !== 'desc' :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
)" v-for="(col, index) in props.cols"
:key="col.name" :key="col.name"
:class="index % 2 !== 0 ? 'bg-grey-1' : ''"
> >
<q-item-section class="text-grey-6"> <div class="col text-grey-6">
<q-item-label>{{ col.label }}</q-item-label> <div>{{ col.label }}</div>
</q-item-section> </div>
<q-item-section class="text-dark"> <div class="col">
<q-item-label>{{ col.value ? col.value : "-" }}</q-item-label> <div>{{ col.value ? col.value : "-" }}</div>
</q-item-section> </div>
</q-item> </div>
</q-list> </q-list>
</q-card> </q-card>
</div> </div>