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

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

View file

@ -206,129 +206,113 @@ const paginationLabel = (start: number, end: number, total: number) => {
<template>
<q-dialog v-model="modal">
<q-card style="width: 850px; max-width: 80vw">
<q-card-section>
<div class="my-content">
<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>
<q-card style="width: 850px; max-width: 80vw">
<q-toolbar>
<q-toolbar-title class="text-subtitle2 text-bold">ประวอครองตำแหน</q-toolbar-title>
<q-btn
icon="close"
unelevated
round
dense
v-close-popup
style="color: #ff8080; background-color: #ffdede"
/>
</q-toolbar>
<q-separator/>
<div class="dialog-card-contain">
<q-card-section class="q-pa-sm">
<q-form ref="myForm">
<div class="row col-12 q-col-gutter-xs">
<q-select
class="col-4"
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภท'}`]"
outlined
dense
lazy-rules
v-model="employeeClass"
emit-value
map-options
:options="employeeClassOps"
option-label="name"
option-value="id"
:label="`${'ประเภท'}`"
use-input
input-debounce="0"
@update:model-value="changeEmployeeClass"
/>
<q-select
class="col-4"
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณาเลือก ฟิลด์ที่จะค้น'}`]"
outlined
dense
lazy-rules
v-model="typeKeyword"
emit-value
map-options
:options="typeKeywordOps"
option-label="name"
option-value="id"
:label="`${' เลือกฟิลด์ที่จะค้น'}`"
use-input
input-debounce="0"
@update:model-value="selectTypeKeyword(typeKeyword)"
/>
<q-input
v-if="typeKeyword === 'no'"
class="col-4"
borderless
outlined
dense
debounce="300"
v-model="Keyword"
placeholder="เลขที่ตำแหน่ง"
:rules="[(val:string) => !!val || `${'กรุณากรอก เลขที่ตำแหน่ง'}`]"
/>
<q-select
v-if="typeKeyword === 'position'"
class="col-4"
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณาเลือก ตำแหน่ง'}`]"
outlined
dense
v-model="positionKeyword"
emit-value
map-options
:options="options"
option-label="name"
option-value="id"
:label="`${' เลือกตำแหน่ง'}`"
use-input
input-debounce="0"
@filter="filterFn"
behavior="menu"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template></q-select
>
<q-space />
<div>
<q-btn
dense
color="primary"
icon="mdi-magnify"
label="ค้นหา"
class="q-px-md"
@click="clickSearch(employeeClass)"
/>
</div>
</div>
<q-space />
<q-btn
color="blue-9"
icon="mdi-close"
size="12px"
flat
round
dense
v-close-popup
/>
</div>
<q-separator color="blue-1" />
<div class="dialog-card-contain">
<q-card-section class="q-pa-sm">
<q-form ref="myForm">
<div class="row col-12 q-col-gutter-xs">
<q-select
class="col-4"
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภท'}`]"
outlined
dense
lazy-rules
v-model="employeeClass"
emit-value
map-options
:options="employeeClassOps"
option-label="name"
option-value="id"
:label="`${'ประเภท'}`"
use-input
input-debounce="0"
@update:model-value="changeEmployeeClass"
/>
<q-select
class="col-4"
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณาเลือก ฟิลด์ที่จะค้น'}`]"
outlined
dense
lazy-rules
v-model="typeKeyword"
emit-value
map-options
:options="typeKeywordOps"
option-label="name"
option-value="id"
:label="`${' เลือกฟิลด์ที่จะค้น'}`"
use-input
input-debounce="0"
@update:model-value="selectTypeKeyword(typeKeyword)"
/>
<q-input
v-if="typeKeyword === 'no'"
class="col-4"
borderless
outlined
dense
debounce="300"
v-model="Keyword"
placeholder="เลขที่ตำแหน่ง"
:rules="[(val:string) => !!val || `${'กรุณากรอก เลขที่ตำแหน่ง'}`]"
/>
<q-select
v-if="typeKeyword === 'position'"
class="col-4"
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณาเลือก ตำแหน่ง'}`]"
outlined
dense
v-model="positionKeyword"
emit-value
map-options
:options="options"
option-label="name"
option-value="id"
:label="`${' เลือกตำแหน่ง'}`"
use-input
input-debounce="0"
@filter="filterFn"
behavior="menu"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template></q-select
>
<q-space />
<div>
<q-btn
dense
color="primary"
icon="mdi-magnify"
label="ค้นหา"
class="q-px-md"
@click="clickSearch(employeeClass)"
/>
</div>
</div>
</q-form>
</q-card-section>
</div>
</div>
</q-card-section>
</q-form>
</q-card-section>
</div>
<q-card-section class="q-pt-none">
<q-table

View file

@ -188,27 +188,33 @@ watch(
</script>
<template>
<q-toolbar style="padding: 0px">
<q-btn
round
flat
color="primary"
icon="add"
size="16px"
@click="onClickAddData"
>
<q-tooltip>เพมขอม</q-tooltip></q-btn
>
<q-btn
round
flat
color="blue"
icon="mdi-history"
size="16px"
@click="onClickHistory"
>
<q-tooltip>ประวอครองตำแหน</q-tooltip></q-btn
>
<div class="col-12 row q-pb-sm q-col-gutter-sm items-center">
<div>
<q-btn
round
flat
dense
color="primary"
icon="add"
size="15px"
@click="onClickAddData"
>
<q-tooltip>เพมขอม</q-tooltip></q-btn
>
</div>
<div>
<q-btn
round
flat
dense
color="blue"
icon="mdi-history"
size="15px"
@click="onClickHistory"
>
<q-tooltip>ประวอครองตำแหน</q-tooltip></q-btn
>
</div>
<q-space />
<q-select
v-if="store.mode === 'table'"
@ -224,40 +230,44 @@ watch(
option-value="name"
options-cover
style="min-width: 150px"
class="q-mr-sm"
class="full-height"
hide-bottom-space
/>
<div>
<q-btn-toggle
v-model="store.mode"
dense
class="my-custom-toggle no-shadow"
toggle-color="grey-4"
:options="[
{ value: 'table', slot: 'table' },
{ value: 'card', slot: 'card' },
]"
>
<template v-slot:table>
<q-icon
name="format_list_bulleted"
class="q-px-sm q-py-xs"
size="22px"
:style="{
color: store.mode === 'table' ? '#787B7C' : '#C9D3DB',
}"
/>
</template>
<q-btn-toggle
v-model="store.mode"
dense
class="no-shadow"
toggle-color="grey-4"
:options="[
{ value: 'table', slot: 'table' },
{ value: 'card', slot: 'card' },
]"
>
<template v-slot:table>
<q-icon
name="format_list_bulleted"
size="24px"
:style="{
color: store.mode === 'table' ? '#787B7C' : '#C9D3DB',
}"
/>
</template>
<template v-slot:card>
<q-icon
name="mdi-view-grid-outline"
size="24px"
:style="{
color: store.mode === 'card' ? '#787B7C' : '#C9D3DB',
}"
/>
</template>
</q-btn-toggle>
</q-toolbar>
<template v-slot:card>
<q-icon
name="mdi-view-grid-outline"
size="22px"
class="q-px-sm q-py-xs"
:style="{
color: store.mode === 'card' ? '#787B7C' : '#C9D3DB',
}"
/>
</template>
</q-btn-toggle>
</div>
</div>
<d-table
ref="table"
row-key="id"
@ -270,7 +280,7 @@ watch(
:grid="store.mode === 'card'"
:paging="true"
v-model:pagination="pagination"
:rows-per-page-options="[20, 50, 100]"
:rows-per-page-options="[20, 50, 100] "
:visible-columns="visibleColumns"
@update:pagination="updatePageSizePagination"
>
@ -329,14 +339,14 @@ watch(
</q-tr>
</template>
<template v-slot:item="props" v-else>
<div class="col-xs-12 col-sm-4 col-md-3 q-pa-md">
<q-card flat bordered>
<q-card-section class="text-center">
<q-avatar size="100px">
<div class="col-xs-12 col-sm-4 col-md-3">
<q-card flat bordered class="cardRO" @click="onClickViewDetail(props.row.id)">
<q-card-section class="text-center q-pb-none">
<q-avatar size="80px">
<img src="@/assets/avatar_user.jpg" />
</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}`
}}
@ -394,14 +404,14 @@ watch(
</q-list>
</q-card>
</q-card-section>
<q-separator inset />
<!-- <q-separator inset />
<q-btn
flat
color="black"
label="ดูเพิ่มเติม"
class="hover-button full-width q-pa-md"
@click="onClickViewDetail(props.row.id)"
/>
/> -->
</q-card>
</div>
</template>
@ -461,6 +471,21 @@ watch(
}
.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>

View file

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