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

ปรับ css หน้าหลักข้อมูลทะเบียนประวัติ

Browse source
This commit is contained in:
Tanyalak 2024-03-15 16:09:29 +07:00
parent 2c75ca60cc
commit eac8b1a0ac
4 changed files with 300 additions and 242 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
src/assets/registry-banner.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 MiB

After

Width:  |  Height:  |  Size: 5.7 MiB

Before After
Before After

32
src/modules/04_registryNew/components/DialogHistory.vue
View file

@ -207,33 +207,19 @@ const paginationLabel = (start: number, end: number, total: number) => {
<template> <template>
<q-dialog v-model="modal"> <q-dialog v-model="modal">
<q-card style="width: 850px; max-width: 80vw"> <q-card style="width: 850px; max-width: 80vw">
<q-card-section> <q-toolbar>
<div class="my-content"> <q-toolbar-title class="text-subtitle2 text-bold">ประวัติถือครองตำแหน่ง</q-toolbar-title>
<div
class="row q-pa-xs items-center bg-blue-1"
style="border-radius: 4px 4px 0px 0px"
>
<q-icon
size="20px"
color="blue-9"
name="mdi-filter-variant"
class="q-mx-sm"
/>
<div class="text-blue-9 text-subtitle2 text-weight-medium">
<span>ประวัติถือครองตำแหน่ง</span>
</div>
<q-space />
<q-btn <q-btn
color="blue-9" icon="close"
icon="mdi-close" unelevated
size="12px"
flat
round round
dense dense
v-close-popup v-close-popup
style="color: #ff8080; background-color: #ffdede"
/> />
</div> </q-toolbar>
<q-separator color="blue-1" /> <q-separator/>
<div class="dialog-card-contain"> <div class="dialog-card-contain">
<q-card-section class="q-pa-sm"> <q-card-section class="q-pa-sm">
<q-form ref="myForm"> <q-form ref="myForm">
@ -327,8 +313,6 @@ const paginationLabel = (start: number, end: number, total: number) => {
</q-form> </q-form>
</q-card-section> </q-card-section>
</div> </div>
</div>
</q-card-section>
<q-card-section class="q-pt-none"> <q-card-section class="q-pt-none">
<q-table <q-table

59
src/modules/04_registryNew/components/TableView.vue
View file

@ -188,27 +188,33 @@ watch(
</script> </script>
<template> <template>
<q-toolbar style="padding: 0px"> <div class="col-12 row q-pb-sm q-col-gutter-sm items-center">
<div>
<q-btn <q-btn
round round
flat flat
dense
color="primary" color="primary"
icon="add" icon="add"
size="16px" size="15px"
@click="onClickAddData" @click="onClickAddData"
> >
<q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn <q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
> >
</div>
<div>
<q-btn <q-btn
round round
flat flat
dense
color="blue" color="blue"
icon="mdi-history" icon="mdi-history"
size="16px" size="15px"
@click="onClickHistory" @click="onClickHistory"
> >
<q-tooltip>ประวัติถือครองตำแหน่ง</q-tooltip></q-btn <q-tooltip>ประวัติถือครองตำแหน่ง</q-tooltip></q-btn
> >
</div>
<q-space /> <q-space />
<q-select <q-select
v-if="store.mode === 'table'" v-if="store.mode === 'table'"
@ -224,13 +230,14 @@ watch(
option-value="name" option-value="name"
options-cover options-cover
style="min-width: 150px" style="min-width: 150px"
class="q-mr-sm" class="full-height"
hide-bottom-space
/> />
<div>
<q-btn-toggle <q-btn-toggle
v-model="store.mode" v-model="store.mode"
dense dense
class="no-shadow" class="my-custom-toggle no-shadow"
toggle-color="grey-4" toggle-color="grey-4"
:options="[ :options="[
{ value: 'table', slot: 'table' }, { value: 'table', slot: 'table' },
@ -240,7 +247,8 @@ watch(
<template v-slot:table> <template v-slot:table>
<q-icon <q-icon
name="format_list_bulleted" name="format_list_bulleted"
size="24px" class="q-px-sm q-py-xs"
size="22px"
:style="{ :style="{
color: store.mode === 'table' ? '#787B7C' : '#C9D3DB', color: store.mode === 'table' ? '#787B7C' : '#C9D3DB',
}" }"
@ -250,14 +258,16 @@ watch(
<template v-slot:card> <template v-slot:card>
<q-icon <q-icon
name="mdi-view-grid-outline" name="mdi-view-grid-outline"
size="24px" size="22px"
class="q-px-sm q-py-xs"
:style="{ :style="{
color: store.mode === 'card' ? '#787B7C' : '#C9D3DB', color: store.mode === 'card' ? '#787B7C' : '#C9D3DB',
}" }"
/> />
</template> </template>
</q-btn-toggle> </q-btn-toggle>
</q-toolbar> </div>
</div>
<d-table <d-table
ref="table" ref="table"
row-key="id" row-key="id"
@ -329,14 +339,14 @@ watch(
</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-4 col-md-3 q-pa-md"> <div class="col-xs-12 col-sm-4 col-md-3">
<q-card flat bordered> <q-card flat bordered class="cardRO" @click="onClickViewDetail(props.row.id)">
<q-card-section class="text-center"> <q-card-section class="text-center q-pb-none">
<q-avatar size="100px"> <q-avatar size="80px">
<img src="@/assets/avatar_user.jpg" /> <img src="@/assets/avatar_user.jpg" />
</q-avatar> </q-avatar>
<div class="text-weight-medium q-mt-md"> <div class="text-weight-medium q-mt-md textName">
{{ {{
`${props.row.prefix}${props.row.firstName} ${props.row.lastName}` `${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
}} }}
@ -394,14 +404,14 @@ watch(
</q-list> </q-list>
</q-card> </q-card>
</q-card-section> </q-card-section>
<q-separator inset /> <!-- <q-separator inset />
<q-btn <q-btn
flat flat
color="black" color="black"
label="ดูเพิ่มเติม" label="ดูเพิ่มเติม"
class="hover-button full-width q-pa-md" class="hover-button full-width q-pa-md"
@click="onClickViewDetail(props.row.id)" @click="onClickViewDetail(props.row.id)"
/> /> -->
</q-card> </q-card>
</div> </div>
</template> </template>
@ -461,6 +471,21 @@ watch(
} }
.bg-grey-13 { .bg-grey-13 {
background: #f1f2f4 !important; background: #f1f2f496 !important;
}
.my-custom-toggle{
border: 1px solid #d0d0d2;
}
.cardRO{
border-radius: 10px;
}
.cardRO:hover{
cursor: pointer;
background: #dcdcdc33 !important;
}
.cardRO:hover .textName{
color: #02A998;
} }
</style> </style>

135
src/modules/04_registryNew/views/list.vue
View file

@ -188,19 +188,21 @@ onMounted(async () => {
}); });
</script> </script>
<template> <template>
<div class="toptitle text-dark col-12 row items-center"> <!-- <div class="toptitle text-dark col-12 row items-center">
ข้อมูลทะเบียนประวัติ ข้อมูลทะเบียนประวัติ
</div> </div> -->
<q-card> <q-card class="q-mt-md">
<q-card-section class="card-img"> <q-card-section class="card-img q-pb-lg">
<div class="text-h5 text-center q-pa-md">ค้นหาข้อมูลทะเบียนประวัติ</div> <div class="text-h5 text-center q-py-md text-weight-medium">ค้นหาข้อมูลทะเบียนประวัติ</div>
<div class="row justify-center"> <div class="row justify-center">
<div class="col-12 q-pa-md"> <div class="col-xs-12 col-sm-12 col-md-11 q-pa-md bg-Search rounded-borders">
<q-form @submit="onclickSearch"> <q-form @submit="onclickSearch">
<q-toolbar style="padding: 0px"> <div class="bg-white row col-12 q-pa-none rounded-borders">
<div class="row col-11">
<div class="col-3 row wrap">
<q-select <q-select
outlined borderless
bg-color="white" bg-color="white"
v-model="searchType" v-model="searchType"
:options="store.searchTypeOption" :options="store.searchTypeOption"
@ -210,45 +212,55 @@ onMounted(async () => {
option-label="name" option-label="name"
option-value="id" option-value="id"
map-options map-options
class="selectS col-11 q-px-md "
color="deep-orange"
dropdown-icon="mdi-chevron-down"
/> />
<q-toolbar-title> <q-separator vertical />
</div>
<q-input <q-input
outlined borderless
dense dense
bg-color="white" bg-color="white"
v-model="formFilter.keyword" v-model="formFilter.keyword"
clearable clearable
placeholder="ค้นหา" placeholder="ค้นหา"
class="col-9 q-pr-md"
> >
<template v-slot:before>
<q-icon name="search" color="deep-orange" />
</template>
</q-input> </q-input>
</q-toolbar-title> </div>
<q-btn color="blue" label="ค้นหา" type="submit" /> <div class="row col-1">
</q-toolbar> <q-btn class="fit btnSearch" unelevated color="deep-orange" label="ค้นหา" type="submit" />
</div>
</div>
</q-form> </q-form>
<q-toolbar <div v-if="isShowBtnFilter" class="col-12 row q-mt-sm">
inset <q-space/>
align="right"
style="padding: 0px"
v-if="isShowBtnFilter"
>
<q-toolbar-title>
<q-btn <q-btn
flat flat
label="ตัวเลือกเพิ่มเติม" label="ตัวเลือกเพิ่มเติม"
icon-right="tune" icon-right="mdi-tune"
@click="onClickShowFilter" @click="onClickShowFilter"
/></q-toolbar-title> dense
</q-toolbar> class="q-px-sm"
></q-btn>
</div>
<div <div
class="row q-mt-md q-gutter-sm justify-center" class="row q-mt-sm q-gutter-sm justify-center"
v-if="isShowFilter" v-if="isShowFilter"
> >
<q-btn-dropdown <q-btn-dropdown
flat
rounded rounded
outline dense
class="custom-btn"
label-color="white" label-color="white"
dropdown-icon="mdi-chevron-down"
class="q-px-sm"
> >
<template v-slot:label> <template v-slot:label>
{{ `${labelOption.type}` }} {{ `${labelOption.type}` }}
@ -278,12 +290,17 @@ onMounted(async () => {
</q-list> </q-list>
</q-btn-dropdown> </q-btn-dropdown>
<q-separator inset vertical class="lineFil" />
<q-btn-dropdown <q-btn-dropdown
rounded rounded
outline flat
dense
label-color="white" label-color="white"
class="custom-btn" dropdown-icon="mdi-chevron-down"
> class="q-px-sm"
><!-- class="custom-btn" -->
<template v-slot:label> <template v-slot:label>
{{ {{
labelOption.posType !== "ทั้งหมด" labelOption.posType !== "ทั้งหมด"
@ -315,12 +332,16 @@ onMounted(async () => {
</q-list> </q-list>
</q-btn-dropdown> </q-btn-dropdown>
<q-separator inset vertical class="lineFil" />
<q-btn-dropdown <q-btn-dropdown
flat
dense
rounded rounded
outline
class="custom-btn"
label-color="white" label-color="white"
> dropdown-icon="mdi-chevron-down"
class="q-px-sm"
><!-- class="custom-btn" -->
<template v-slot:label> <template v-slot:label>
{{ {{
labelOption.posLevel !== "ทั้งหมด" labelOption.posLevel !== "ทั้งหมด"
@ -352,12 +373,16 @@ onMounted(async () => {
</q-list> </q-list>
</q-btn-dropdown> </q-btn-dropdown>
<q-separator inset vertical class="lineFil" />
<q-btn-dropdown <q-btn-dropdown
flat
dense
rounded rounded
outline
class="custom-btn"
label-color="white" label-color="white"
> dropdown-icon="mdi-chevron-down"
class="q-px-sm"
><!-- class="custom-btn" -->
<template v-slot:label> <template v-slot:label>
{{ `ปีเกษียณ${labelOption.retireYear}` }} {{ `ปีเกษียณ${labelOption.retireYear}` }}
<q-btn <q-btn
@ -385,6 +410,8 @@ onMounted(async () => {
</q-list> </q-list>
</q-btn-dropdown> </q-btn-dropdown>
<q-separator inset vertical class="lineFil" />
<!-- <datepicker <!-- <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formFilter.retireYear" v-model="formFilter.retireYear"
@ -431,11 +458,13 @@ onMounted(async () => {
</datepicker> --> </datepicker> -->
<q-btn-dropdown <q-btn-dropdown
flat
dense
rounded rounded
outline
class="custom-btn"
label-color="white" label-color="white"
> dropdown-icon="mdi-chevron-down"
class="q-px-sm"
><!-- class="custom-btn" -->
<template v-slot:label> <template v-slot:label>
{{ {{
`อายุราชการ (${formFilter.rangeYear.min} - ${formFilter.rangeYear.max} ปี)` `อายุราชการ (${formFilter.rangeYear.min} - ${formFilter.rangeYear.max} ปี)`
@ -481,13 +510,17 @@ onMounted(async () => {
</div> </div>
</q-btn-dropdown> </q-btn-dropdown>
<q-separator inset vertical class="lineFil" />
<q-btn-dropdown <q-btn-dropdown
flat
dense
rounded rounded
outline label-color="white"
class="custom-btn" dropdown-icon="mdi-chevron-down"
color="white"
:label="`เงื่อนไขอื่นๆ ${conditionTotal}`" :label="`เงื่อนไขอื่นๆ ${conditionTotal}`"
> class="q-px-sm"
><!-- class="custom-btn" -->
<q-list> <q-list>
<q-item clickable v-close-popup> <q-item clickable v-close-popup>
<q-item-section> <q-item-section>
@ -529,7 +562,7 @@ onMounted(async () => {
</q-card> </q-card>
</template> </template>
<style scoped> <style >
.card-img { .card-img {
background: url("@/assets/registry-banner.png"); background: url("@/assets/registry-banner.png");
background-size: cover; background-size: cover;
@ -547,4 +580,20 @@ onMounted(async () => {
:deep(.custom-btn.q-btn--outline::before) { :deep(.custom-btn.q-btn--outline::before) {
background-color: #36969f; background-color: #36969f;
} }
.btnSearch{
border-radius: 0px 4px 4px 0px;
}
.bg-Search{
background: #00000015;
}
.lineFil{
transform:rotate(30deg);
height: 20px;
margin-top: 15px;
background: #ffffff7b !important;
}
.selectS .q-field__control .q-field__append .q-icon{
color: #ff5722 !important;
}
</style> </style>