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

ทะเบียนประวัติ: เพิ่มอีก2tag

Browse source
This commit is contained in:
Oat 2024-03-06 10:34:43 +07:00
parent 1b2557cb08
commit afed451400
3 changed files with 130 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

129
src/modules/04_registryNew/components/registry/Search.vue
View file

@ -2,7 +2,10 @@
import { ref, reactive } from "vue";
import SearchBanner from "@/assets/registry-banner.png";
import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
import type { FormData } from "@/modules/04_registryNew/interface/index/form";
import type {
FormData,
YearRange,
} from "@/modules/04_registryNew/interface/index/form";
const search = ref<string>("");
const dropdownInput = ref<boolean>(false);
@ -16,6 +19,10 @@ const type = ref<string>("");
const posNo = ref<string>("");
const posOc = ref<string>("");
const rangeYear = ref<YearRange>({
min: 0,
max: 60,
});
const formData = reactive<FormData>({
citizenId: "",
fullName: "",
@ -102,7 +109,7 @@ function onSubmit() {
ค้นหาข้อมูลทะเบียนประวัติ
</span>
<div class="row q-col-gutter-md">
<div class="row q-col-gutter-x-md q-col-gutter-y-lg">
<div class="col-2">
<q-select
outlined
@ -140,7 +147,7 @@ function onSubmit() {
</q-input>
</div>
<div class="col-1">
<q-btn color="blue" unelevated label="ค้นหา" @click="onSubmit" />
<q-btn color="blue" label="ค้นหา" @click="onSubmit" />
</div>
<div class="col">
<q-select
@ -150,15 +157,16 @@ function onSubmit() {
emit-value
clearable
emit-option
class="custom-select"
class="custom-select custom-arrow"
label-color="white"
option-label="name"
option-value="id"
map-options
v-model="type"
:options="TypeOption"
label="ประเภทตำแหน่ง"
/>
label="ประเภท"
>
</q-select>
</div>
<div class="col">
<q-select
@ -196,7 +204,7 @@ function onSubmit() {
label="ระดับตำแหน่ง"
/>
</div>
<div class="col">
<div class="col-2">
<q-select
rounded
outlined
@ -206,6 +214,7 @@ function onSubmit() {
emit-option
class="custom-select"
clearable
input-class="text-white"
option-label="name"
option-value="id"
map-options
@ -216,7 +225,6 @@ function onSubmit() {
</div>
<div class="col">
<datepicker
class="col-2"
menu-class-name="modalfix"
v-model="retireYear"
:locale="'th'"
@ -237,6 +245,7 @@ function onSubmit() {
label-color="white"
outlined
dense
input-style="color:white;"
lazy-rules
borderless
:model-value="retireYear === null ? null : retireYear + 543"
@ -254,7 +263,91 @@ function onSubmit() {
</template>
</datepicker>
</div>
<div>
<q-btn-dropdown
rounded
outline
class="custom-btn"
clearable
:label="`อายุราชการ (${rangeYear.min} - ${rangeYear.max} ปี)`"
label-color="white"
style="height: 40px"
>
<div
class="row no-wrap q-px-md q-pt-xs"
style="border: 1px #ededed solid"
>
<div
class="column q-py-sm q-px-md text-center"
style="width: 250px"
>
<div class="q-mb-sm">
<span>จำนวนปี</span>
<span
class="q-px-sm q-ml-sm"
style="
background-color: #f2f2f2;
border-radius: 5px;
border: 1px #ededed solid;
letter-spacing: 1px;
"
>
{{ `${rangeYear.min}-${rangeYear.max}` }}
</span>
</div>
<q-range
class="q-mt-lg"
v-model="rangeYear"
:min="0"
:max="60"
:step="1"
label-always
color="primary"
selection-color="blue"
label-color="primary"
thumb-color="blue"
/>
</div>
</div>
</q-btn-dropdown>
</div>
<div class="col">
<q-btn-dropdown
rounded
outline
class="custom-btn"
clearable
label="เงื่อนไขอื่นๆ"
label-color="white"
style="height: 40px"
>
<div class="row no-wrap q-px-md">
<div class="column text-center">
<div
class="flex"
style="
align-content: flex-end;
flex-direction: row-reverse;
gap: 0.5rem;
"
>
<q-toggle
v-model="formData.isShowRetire"
color="primary"
label="แสดงข้อมูลผู้พ้นจากราชการ"
/>
<q-toggle
v-model="formData.isProbation"
color="primary"
label="ทดลองปฏิบัติหน้าที่ราชการ"
/>
</div>
</div>
</div>
</q-btn-dropdown>
</div>
</div>
<div class="flex q-mt-lg" style="border-radius: 20px; flex-wrap: nowrap">
<div
class="flex full-width items-center bg-white"
@ -279,7 +372,7 @@ function onSubmit() {
border: 1px solid gainsboro;
"
>
<div class="row q-gutter-md q-mb-md">
<div class="row q-gutter--md q-mb-md">
<div class="col">
<q-select
outlined
@ -440,10 +533,24 @@ function onSubmit() {
<style lang="scss" scoped>
:deep(.custom-select.q-field--outlined .q-field__control::before) {
border: 2px solid #ffffff !important;
border: 2px solid #fff;
}
:deep(.custom-select.q-field--outlined .q-field__control) {
color: white !important;
color: white;
background-color: #36969f;
.q-select__dropdown-icon {
color: white;
}
}
:deep(.custom-btn.q-btn--outline) {
color: white;
}
:deep(.custom-btn.q-btn--outline::before) {
border: 2px solid #ffffff;
background-color: #36969f;
}
</style>

7
src/modules/04_registryNew/interface/index/form.ts
View file

@ -11,4 +11,9 @@ interface FormData {
isProbation: boolean,
}
export type { FormData }
interface YearRange {
min:number,
max:number
}
export type { FormData , YearRange}

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

@ -186,16 +186,20 @@ const visibleColumns = ref<string[]>([
<template v-slot:table>
<q-icon
name="format_list_bulleted"
:color="mode === 'table' ? 'dark' : 'grey-5'"
size="24px"
:style="{
color: mode === 'table' ? '#787B7C' : '#C9D3DB',
}"
/>
</template>
<template v-slot:card>
<q-icon
name="mdi-view-grid-outline"
:color="mode === 'card' ? 'dark' : 'grey-5'"
size="24px"
:style="{
color: mode === 'card' ? '#787B7C' : '#C9D3DB',
}"
/>
</template>
</q-btn-toggle>