ข้อมูลทะเบียนประวัติ
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
9fda47fb9c
commit
b7a71dbb45
10 changed files with 111 additions and 1282 deletions
|
|
@ -6,8 +6,8 @@ import type { QTableProps } from "quasar";
|
||||||
import type { FormFilter } from "@/modules/04_registryNew/interface/request/Main";
|
import type { FormFilter } from "@/modules/04_registryNew/interface/request/Main";
|
||||||
|
|
||||||
/** importComponent*/
|
/** importComponent*/
|
||||||
import DialogAddData from "@/modules/04_registryNew/components/registry/DialogAddData.vue";
|
import DialogAddData from "@/modules/04_registryNew/components/DialogAddData.vue";
|
||||||
import DialogHistory from "@/modules/04_registryNew/components/registry/DialogHistory.vue";
|
import DialogHistory from "@/modules/04_registryNew/components/DialogHistory.vue";
|
||||||
|
|
||||||
/** importStore*/
|
/** importStore*/
|
||||||
import { useRegistryNewDataStore } from "@/modules/04_registryNew/store";
|
import { useRegistryNewDataStore } from "@/modules/04_registryNew/store";
|
||||||
|
|
@ -319,8 +319,81 @@ 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-6 col-md-3">
|
<div class="col-xs-12 col-sm-4 col-md-3 q-pa-lg">
|
||||||
<q-card style="border: 0.5px solid #e4e4e4">
|
<q-card flat bordered>
|
||||||
|
<q-card-section class="text-center">
|
||||||
|
<q-avatar size="82px">
|
||||||
|
<img src="@/assets/avatar_user.jpg" />
|
||||||
|
</q-avatar>
|
||||||
|
|
||||||
|
<div class="text-weight-medium q-mt-md">
|
||||||
|
{{
|
||||||
|
`${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div class="text-weight-light full-width text-center">
|
||||||
|
{{ props.row.citizenId }}
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
|
||||||
|
<q-card-section class="q-pa-lg">
|
||||||
|
<q-card bordered class="bg-grey-12">
|
||||||
|
<q-list>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label caption>ตำแหน่งเลขที่</q-item-label>
|
||||||
|
<q-item-label>{{
|
||||||
|
props.row.posNo ? props.row.posNo : "-"
|
||||||
|
}}</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
|
||||||
|
<q-item>
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label caption>ตำแหน่ง</q-item-label>
|
||||||
|
<q-item-label>
|
||||||
|
{{
|
||||||
|
props.row.position ? props.row.position : "-"
|
||||||
|
}}</q-item-label
|
||||||
|
>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
|
||||||
|
<q-item>
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label caption>ประเภท</q-item-label>
|
||||||
|
<q-item-label>
|
||||||
|
{{
|
||||||
|
props.row.posType ? props.row.posType : "-"
|
||||||
|
}}</q-item-label
|
||||||
|
>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label caption>ระดับชั้นงาน</q-item-label>
|
||||||
|
<q-item-label>
|
||||||
|
{{
|
||||||
|
props.row.posLevel ? props.row.posLevel : "-"
|
||||||
|
}}</q-item-label
|
||||||
|
>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator inset />
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
color="black"
|
||||||
|
label="ดูเพิ่มเติม"
|
||||||
|
class="hover-button full-width q-pa-md"
|
||||||
|
/>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <div class="col-xs-12 col-sm-6 col-md-3"> -->
|
||||||
|
<!-- <q-card style="border: 0.5px solid #e4e4e4">
|
||||||
<div class="flex justify-center q-pt-md q-px-md">
|
<div class="flex justify-center q-pt-md q-px-md">
|
||||||
<q-item-section avatar class="q-pa-none">
|
<q-item-section avatar class="q-pa-none">
|
||||||
<img
|
<img
|
||||||
|
|
@ -374,8 +447,8 @@ watch(
|
||||||
<div class="see-more text-center q-py-md" style="width: 100%">
|
<div class="see-more text-center q-py-md" style="width: 100%">
|
||||||
<span style="font-size: 14px; font-weight: 500">ดูเพิ่มเติม</span>
|
<span style="font-size: 14px; font-weight: 500">ดูเพิ่มเติม</span>
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
</q-card> -->
|
||||||
</div>
|
<!-- </div> -->
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:pagination="scope">
|
<template v-slot:pagination="scope">
|
||||||
<q-pagination
|
<q-pagination
|
||||||
|
|
@ -422,10 +495,11 @@ watch(
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.see-more:hover {
|
.hover-button:hover {
|
||||||
background-color: #089cfc;
|
background-color: #089cfc;
|
||||||
color: white;
|
color: white !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-card {
|
.my-card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
0
src/modules/04_registryNew/components/detail/TabMain.vue
Normal file
0
src/modules/04_registryNew/components/detail/TabMain.vue
Normal file
|
|
@ -1,556 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
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,
|
|
||||||
YearRange,
|
|
||||||
} from "@/modules/04_registryNew/interface/index/form";
|
|
||||||
|
|
||||||
const search = ref<string>("");
|
|
||||||
const dropdownInput = ref<boolean>(false);
|
|
||||||
const retireYear = ref<number | null>(null);
|
|
||||||
const year = ref<number>();
|
|
||||||
const searchType = ref<string>("fullName");
|
|
||||||
const posLevel = ref<string>("");
|
|
||||||
const posExecutive = ref<string>("");
|
|
||||||
const posType = ref<string>("");
|
|
||||||
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: "",
|
|
||||||
posLevel: "",
|
|
||||||
posOc: "",
|
|
||||||
posPath: "",
|
|
||||||
retireYear: null,
|
|
||||||
type: "",
|
|
||||||
year: null,
|
|
||||||
isShowRetire: false,
|
|
||||||
isProbation: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
const employeeClassOps = ref<DataOption[]>([
|
|
||||||
{ id: "officer", name: "ข้าราชการ กทม.สามัญ" },
|
|
||||||
{ id: "perm", name: "ลูกจ้างประจำ" },
|
|
||||||
{ id: "temp", name: "ลูกจ้างชั่วคราว" },
|
|
||||||
]);
|
|
||||||
|
|
||||||
const posLevelMock = ref<DataOption[]>([
|
|
||||||
{ id: "officer", name: "1" },
|
|
||||||
{ id: "perm", name: "2" },
|
|
||||||
{ id: "temp", name: "3" },
|
|
||||||
]);
|
|
||||||
|
|
||||||
const searchTypeOption = ref<DataOption[]>([
|
|
||||||
{ id: "fullName", name: "ชื่อ-นามสกุล" },
|
|
||||||
{ id: "citizenId", name: "เลขประจำตัวประชาชน" },
|
|
||||||
{ id: "posNo", name: "ตำแหน่งเลขที่" },
|
|
||||||
{ id: "position", name: "ตำแหน่งสายงาน" },
|
|
||||||
]);
|
|
||||||
|
|
||||||
const TypeOption = ref<DataOption[]>([
|
|
||||||
{ id: "1", name: "ข้าราชการ กทม.สามัญ" },
|
|
||||||
{ id: "2", name: "ลูกจ้างประจำ" },
|
|
||||||
{ id: "3", name: "ลููกจ้างชั่วคราว" },
|
|
||||||
]);
|
|
||||||
|
|
||||||
const posTypeOption = ref<DataOption[]>([
|
|
||||||
{ id: "1", name: "ทั่วไป" },
|
|
||||||
{ id: "2", name: "วิชาการ" },
|
|
||||||
{ id: "3", name: "อำนวยการ" },
|
|
||||||
{ id: "4", name: "บริหาร" },
|
|
||||||
]);
|
|
||||||
|
|
||||||
const posLevelOption = ref<DataOption[]>([
|
|
||||||
{ id: "1", name: "ชำนาญงาน" },
|
|
||||||
{ id: "2", name: "ปฏิบัติงาน" },
|
|
||||||
{ id: "3", name: "อาวุโส" },
|
|
||||||
{ id: "4", name: "ทักษะพิเศษ" },
|
|
||||||
]);
|
|
||||||
|
|
||||||
const posExecutiveOption = ref<DataOption[]>([
|
|
||||||
{ id: "1", name: "นักบริหาร" },
|
|
||||||
{ id: "2", name: "ผู้ช่วยหัวหน้าสำนักงาน" },
|
|
||||||
{ id: "3", name: "ผู้ช่วยหัวหน้าสำนักงานก.ก." },
|
|
||||||
{ id: "4", name: "นักการช่าง" },
|
|
||||||
]);
|
|
||||||
|
|
||||||
const isActive1 = ref<boolean>(false);
|
|
||||||
const isActive2 = ref<boolean>(false);
|
|
||||||
|
|
||||||
function onSubmit() {
|
|
||||||
dropdownInput.value = false;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div
|
|
||||||
class="column full-width justify-center items-center inline-block q-py-xl q-px-xl banner"
|
|
||||||
style="border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem"
|
|
||||||
:style="{
|
|
||||||
background: `url('${SearchBanner}') center center no-repeat`,
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
text-align: center;
|
|
||||||
color: white;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: bold;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
ค้นหาข้อมูลทะเบียนประวัติ
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div class="row q-col-gutter-x-md q-col-gutter-y-lg">
|
|
||||||
<div class="col-2">
|
|
||||||
<q-select
|
|
||||||
outlined
|
|
||||||
bg-color="white"
|
|
||||||
v-model="searchType"
|
|
||||||
:options="searchTypeOption"
|
|
||||||
emit-value
|
|
||||||
dense
|
|
||||||
emit-option
|
|
||||||
option-label="name"
|
|
||||||
option-value="id"
|
|
||||||
map-options
|
|
||||||
style="border-radius: 0.4rem; background-color: whitesmoke"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-9">
|
|
||||||
<q-input
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
bg-color="white"
|
|
||||||
v-model="search"
|
|
||||||
clearable
|
|
||||||
placeholder="ค้นหา"
|
|
||||||
>
|
|
||||||
<!-- <template v-slot:append>
|
|
||||||
<q-btn
|
|
||||||
outlined
|
|
||||||
color="blue"
|
|
||||||
icon="filter_list"
|
|
||||||
dense
|
|
||||||
size="12px"
|
|
||||||
@click="() => (dropdownInput = !dropdownInput)"
|
|
||||||
/>
|
|
||||||
</template> -->
|
|
||||||
</q-input>
|
|
||||||
</div>
|
|
||||||
<div class="col-1">
|
|
||||||
<q-btn color="blue" label="ค้นหา" @click="onSubmit" />
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<q-select
|
|
||||||
rounded
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
emit-value
|
|
||||||
clearable
|
|
||||||
emit-option
|
|
||||||
class="custom-select custom-arrow"
|
|
||||||
label-color="white"
|
|
||||||
option-label="name"
|
|
||||||
option-value="id"
|
|
||||||
map-options
|
|
||||||
v-model="type"
|
|
||||||
:options="TypeOption"
|
|
||||||
label="ประเภท"
|
|
||||||
>
|
|
||||||
</q-select>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<q-select
|
|
||||||
rounded
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
emit-value
|
|
||||||
clearable
|
|
||||||
emit-option
|
|
||||||
class="custom-select"
|
|
||||||
label-color="white"
|
|
||||||
option-label="name"
|
|
||||||
option-value="id"
|
|
||||||
map-options
|
|
||||||
v-model="posType"
|
|
||||||
:options="posTypeOption"
|
|
||||||
label="ประเภทตำแหน่ง"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<q-select
|
|
||||||
rounded
|
|
||||||
dense
|
|
||||||
emit-value
|
|
||||||
emit-option
|
|
||||||
label-color="white"
|
|
||||||
option-label="name"
|
|
||||||
option-value="id"
|
|
||||||
map-options
|
|
||||||
outlined
|
|
||||||
class="custom-select"
|
|
||||||
clearable
|
|
||||||
v-model="posLevel"
|
|
||||||
:options="posLevelOption"
|
|
||||||
label="ระดับตำแหน่ง"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-2">
|
|
||||||
<q-select
|
|
||||||
rounded
|
|
||||||
outlined
|
|
||||||
label-color="white"
|
|
||||||
emit-value
|
|
||||||
dense
|
|
||||||
emit-option
|
|
||||||
class="custom-select"
|
|
||||||
clearable
|
|
||||||
input-class="text-white"
|
|
||||||
option-label="name"
|
|
||||||
option-value="id"
|
|
||||||
map-options
|
|
||||||
v-model="posExecutive"
|
|
||||||
:options="posExecutiveOption"
|
|
||||||
label="ตำแหน่งทางการบริหาร"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<datepicker
|
|
||||||
menu-class-name="modalfix"
|
|
||||||
v-model="retireYear"
|
|
||||||
:locale="'th'"
|
|
||||||
autoApply
|
|
||||||
year-picker
|
|
||||||
:enableTimePicker="false"
|
|
||||||
clearable
|
|
||||||
>
|
|
||||||
<template #year="{ year }">{{ year + 543 }}</template>
|
|
||||||
<template #year-overlay-value="{ value }">{{
|
|
||||||
parseInt(value + 543)
|
|
||||||
}}</template>
|
|
||||||
<template #trigger>
|
|
||||||
<q-input
|
|
||||||
class="inputgreen cursor-pointer custom-select"
|
|
||||||
hide-bottom-space
|
|
||||||
rounded
|
|
||||||
label-color="white"
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
input-style="color:white;"
|
|
||||||
lazy-rules
|
|
||||||
borderless
|
|
||||||
:model-value="retireYear === null ? null : retireYear + 543"
|
|
||||||
:label="`${'ปีเกษียณ'}`"
|
|
||||||
>
|
|
||||||
<template v-slot:append>
|
|
||||||
<q-icon
|
|
||||||
v-if="retireYear !== null"
|
|
||||||
name="close"
|
|
||||||
@click="retireYear = null"
|
|
||||||
class="cursor-pointer"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</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"
|
|
||||||
style="flex-grow: 1; border-radius: 0.5rem; position: relative"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-if="dropdownInput"
|
|
||||||
class="full-width bg-white q-px-md q-pt-sm q-pb-md"
|
|
||||||
style="
|
|
||||||
top: 85%;
|
|
||||||
position: absolute;
|
|
||||||
border-bottom-left-radius: 0.5rem;
|
|
||||||
border-bottom-right-radius: 0.5rem;
|
|
||||||
z-index: 10;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="q-pa-md"
|
|
||||||
style="
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
background-color: whitesmoke;
|
|
||||||
border: 1px solid gainsboro;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="row q-gutter--md q-mb-md">
|
|
||||||
<div class="col">
|
|
||||||
<q-select
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
v-model="formData.type"
|
|
||||||
label="ประเภท"
|
|
||||||
class="bg-white"
|
|
||||||
clearable
|
|
||||||
:options="employeeClassOps"
|
|
||||||
emit-value
|
|
||||||
emit-option
|
|
||||||
option-label="name"
|
|
||||||
option-value="id"
|
|
||||||
map-options
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<q-input
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
v-model="formData.citizenId"
|
|
||||||
label="เลขประจำตัวประชาชน"
|
|
||||||
class="bg-white"
|
|
||||||
clearable
|
|
||||||
lazy-rules
|
|
||||||
hide-bottom-space
|
|
||||||
maxlength="13"
|
|
||||||
mask="#############"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<q-input
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
clearable
|
|
||||||
v-model="formData.fullName"
|
|
||||||
label="ชื่อ - นามสกุล"
|
|
||||||
class="bg-white"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row q-gutter-md">
|
|
||||||
<div class="col-2">
|
|
||||||
<datepicker
|
|
||||||
class="col-2 bg-white"
|
|
||||||
menu-class-name="modalfix"
|
|
||||||
v-model="formData.retireYear"
|
|
||||||
:locale="'th'"
|
|
||||||
autoApply
|
|
||||||
year-picker
|
|
||||||
:enableTimePicker="false"
|
|
||||||
clearable
|
|
||||||
>
|
|
||||||
<template #year="{ year }">{{ year + 543 }}</template>
|
|
||||||
<template #year-overlay-value="{ value }">{{
|
|
||||||
parseInt(value + 543)
|
|
||||||
}}</template>
|
|
||||||
<template #trigger>
|
|
||||||
<q-input
|
|
||||||
class="inputgreen cursor-pointer"
|
|
||||||
hide-bottom-space
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
borderless
|
|
||||||
:model-value="
|
|
||||||
formData.retireYear === null
|
|
||||||
? null
|
|
||||||
: formData.retireYear + 543
|
|
||||||
"
|
|
||||||
:label="`${'ปีเกษียณ'}`"
|
|
||||||
>
|
|
||||||
<template v-slot:append>
|
|
||||||
<q-icon
|
|
||||||
v-if="formData.retireYear !== null"
|
|
||||||
name="close"
|
|
||||||
@click="formData.retireYear = null"
|
|
||||||
class="cursor-pointer"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
</div>
|
|
||||||
<div class="col-2">
|
|
||||||
<q-input
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
v-model="year"
|
|
||||||
label="อายุราชการ (ปี)"
|
|
||||||
class="bg-white"
|
|
||||||
clearable
|
|
||||||
mask="###"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-2">
|
|
||||||
<q-select
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
v-model="formData.posLevel"
|
|
||||||
label="ประเภท"
|
|
||||||
class="bg-white"
|
|
||||||
:options="posLevelMock"
|
|
||||||
emit-value
|
|
||||||
emit-option
|
|
||||||
clearable
|
|
||||||
option-label="name"
|
|
||||||
option-value="id"
|
|
||||||
map-options
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-2">
|
|
||||||
<q-input
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
v-model="posNo"
|
|
||||||
label="ตำแหน่งเลขที่"
|
|
||||||
class="bg-white"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<q-input
|
|
||||||
outlined
|
|
||||||
clearable
|
|
||||||
dense
|
|
||||||
v-model="posOc"
|
|
||||||
label="ตำแหน่งทางการบริหาร"
|
|
||||||
class="bg-white"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex q-mt-xs"
|
|
||||||
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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
:deep(.custom-select.q-field--outlined .q-field__control::before) {
|
|
||||||
border: 2px solid #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.custom-select.q-field--outlined .q-field__control) {
|
|
||||||
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>
|
|
||||||
|
|
@ -1,692 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, onMounted, watch, reactive } from "vue";
|
|
||||||
import type { QInput, QTableProps } from "quasar";
|
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
|
||||||
import { useRouter } from "vue-router";
|
|
||||||
import { useRegistryDataStore } from "@/modules/04_registryNew/stores/registry";
|
|
||||||
import dialogHeader from "@/components/DialogHeader.vue";
|
|
||||||
import { useQuasar } from "quasar";
|
|
||||||
import http from "@/plugins/http";
|
|
||||||
import config from "@/app.config";
|
|
||||||
|
|
||||||
const store = useRegistryDataStore();
|
|
||||||
const mixin = useCounterMixin();
|
|
||||||
const {
|
|
||||||
dialogRemove,
|
|
||||||
dialogConfirm,
|
|
||||||
success,
|
|
||||||
messageError,
|
|
||||||
showLoader,
|
|
||||||
hideLoader,
|
|
||||||
dialogMessageNotify,
|
|
||||||
} = mixin;
|
|
||||||
const columns = ref<QTableProps["columns"]>([
|
|
||||||
{
|
|
||||||
name: "no",
|
|
||||||
align: "left",
|
|
||||||
label: "ลำดับ",
|
|
||||||
sortable: true,
|
|
||||||
field: "no",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "citizenId",
|
|
||||||
align: "left",
|
|
||||||
label: "เลขประจำตัวประชาชน",
|
|
||||||
sortable: true,
|
|
||||||
field: "citizenId",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "fullName",
|
|
||||||
align: "left",
|
|
||||||
label: "ชื่อ-นามสกุล",
|
|
||||||
sortable: true,
|
|
||||||
field: "fullName",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "position",
|
|
||||||
align: "left",
|
|
||||||
label: "ตำแหน่ง",
|
|
||||||
sortable: true,
|
|
||||||
field: "position",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const $q = useQuasar();
|
|
||||||
|
|
||||||
const editId = ref<string>("");
|
|
||||||
const filterKeyword = ref<string>("");
|
|
||||||
const dialog = ref<boolean>(false);
|
|
||||||
const dialogStatus = ref<"create" | "edit">("create");
|
|
||||||
|
|
||||||
const prefix = ref<string>("");
|
|
||||||
const firstName = ref<string>("");
|
|
||||||
const lastName = ref<string>("");
|
|
||||||
const citizenId = ref<string>("");
|
|
||||||
const position = ref<string>("");
|
|
||||||
const posTypeId = ref<string>("");
|
|
||||||
const posLevelId = ref<string>("");
|
|
||||||
const dataLevel = ref<any>();
|
|
||||||
|
|
||||||
const prefixRef = ref<QInput | null>(null);
|
|
||||||
const firstNameRef = ref<QInput | null>(null);
|
|
||||||
const lastNameRef = ref<QInput | null>(null);
|
|
||||||
const citizenIdRef = ref<QInput | null>(null);
|
|
||||||
const positionRef = ref<QInput | null>(null);
|
|
||||||
const posTypeIdRef = ref<QInput | null>(null);
|
|
||||||
const posLevelIdRef = ref<QInput | null>(null);
|
|
||||||
|
|
||||||
type SelectOptions = {
|
|
||||||
label: string;
|
|
||||||
value: string;
|
|
||||||
}[];
|
|
||||||
|
|
||||||
const prefixDropdown = ref<SelectOptions>([]);
|
|
||||||
const posTypeIdDropdown = ref<SelectOptions>([]);
|
|
||||||
const posLevelIdDropdown = ref<SelectOptions>([]);
|
|
||||||
const visibleColumns = ref<string[]>([
|
|
||||||
"no",
|
|
||||||
"citizenId",
|
|
||||||
"fullName",
|
|
||||||
"position",
|
|
||||||
]);
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
fetchData();
|
|
||||||
fetchPrefix();
|
|
||||||
fetchType();
|
|
||||||
});
|
|
||||||
|
|
||||||
/** queryString*/
|
|
||||||
const formQuery = reactive({
|
|
||||||
page: 1, //*หน้า
|
|
||||||
pageSize: 10, //*จำนวนแถวต่อหน้า
|
|
||||||
keyword: "", //keyword ค้นหา
|
|
||||||
});
|
|
||||||
const maxPage = ref<number>(1);
|
|
||||||
|
|
||||||
async function fetchData() {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(
|
|
||||||
config.API.registryNew +
|
|
||||||
`?page=${formQuery.page}&pageSise=${formQuery.pageSize}&keyword=${formQuery.keyword}`
|
|
||||||
)
|
|
||||||
.then(async (res) => {
|
|
||||||
maxPage.value = Math.ceil(res.data.result.total / formQuery.pageSize);
|
|
||||||
store.save(res.data.result.data);
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
messageError($q, err);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchType() {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get<{
|
|
||||||
result: {
|
|
||||||
posTypeName: string;
|
|
||||||
id: string;
|
|
||||||
}[];
|
|
||||||
}>(config.API.orgPosType)
|
|
||||||
.then(async (res) => {
|
|
||||||
const data = res.data.result;
|
|
||||||
dataLevel.value = data;
|
|
||||||
posTypeIdDropdown.value = data.map((v) => ({
|
|
||||||
label: v.posTypeName,
|
|
||||||
value: v.id,
|
|
||||||
}));
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
messageError($q, err);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchPrefix() {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.orgPrefix)
|
|
||||||
.then(async (res) => {
|
|
||||||
prefixDropdown.value = res.data.result.map((v: any) => ({
|
|
||||||
label: v.name,
|
|
||||||
value: v.name,
|
|
||||||
}));
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
messageError($q, err);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function addData() {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.post(config.API.registryNew, {
|
|
||||||
prefix: prefix.value,
|
|
||||||
firstName: firstName.value,
|
|
||||||
lastName: lastName.value,
|
|
||||||
citizenId: citizenId.value,
|
|
||||||
position: position.value,
|
|
||||||
posTypeId: posTypeId.value,
|
|
||||||
posLevelId: posLevelId.value,
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
messageError($q, err);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
fetchData();
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function editData(id: string) {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.put(config.API.registryNewId(id), {
|
|
||||||
prefix: prefix.value,
|
|
||||||
firstName: firstName.value,
|
|
||||||
lastName: lastName.value,
|
|
||||||
citizenId: citizenId.value,
|
|
||||||
position: position.value,
|
|
||||||
posTypeId: posTypeId.value,
|
|
||||||
posLevelId: posLevelId.value,
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
messageError($q, err);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
fetchData();
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function deleteData(id: string) {
|
|
||||||
await http
|
|
||||||
.delete(config.API.registryNewId(id))
|
|
||||||
.then(() => {
|
|
||||||
success($q, "ลบข้อมูลสำเร็จ");
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
messageError($q, err);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
fetchData();
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateSelectType(val: string) {
|
|
||||||
const listLevel = dataLevel.value.find((e: any) => e.id === val);
|
|
||||||
posLevelIdDropdown.value = listLevel.posLevels.map((e: any) => ({
|
|
||||||
value: e.id,
|
|
||||||
label: e.posLevelName,
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
function validateForm() {
|
|
||||||
if (
|
|
||||||
[
|
|
||||||
prefixRef.value,
|
|
||||||
firstNameRef.value,
|
|
||||||
lastNameRef.value,
|
|
||||||
citizenIdRef.value,
|
|
||||||
positionRef.value,
|
|
||||||
posTypeIdRef.value,
|
|
||||||
posLevelIdRef.value,
|
|
||||||
].every((v) => v?.validate())
|
|
||||||
) {
|
|
||||||
onSubmit();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function onSubmit() {
|
|
||||||
dialogConfirm(
|
|
||||||
$q,
|
|
||||||
async () => {
|
|
||||||
dialogStatus.value === "create" ? addData() : editData(editId.value);
|
|
||||||
closeDialog();
|
|
||||||
prefix.value = "";
|
|
||||||
firstName.value = "";
|
|
||||||
lastName.value = "";
|
|
||||||
citizenId.value = "";
|
|
||||||
position.value = "";
|
|
||||||
posTypeId.value = "";
|
|
||||||
posLevelId.value = "";
|
|
||||||
},
|
|
||||||
"ยืนยันการบันทึกข้อมูล",
|
|
||||||
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
function closeDialog() {
|
|
||||||
dialog.value = false;
|
|
||||||
}
|
|
||||||
watch(posTypeId, () => {
|
|
||||||
setTimeout(() => {
|
|
||||||
updateSelectType(posTypeId.value);
|
|
||||||
}, 200);
|
|
||||||
});
|
|
||||||
|
|
||||||
watch([() => formQuery.page, () => formQuery.pageSize], async () => {
|
|
||||||
await fetchData();
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* function updatePagination
|
|
||||||
* @param newPagination ข้อมูล Pagination ใหม่
|
|
||||||
*/
|
|
||||||
function updatePagination(newPagination: any) {
|
|
||||||
formQuery.page = 1;
|
|
||||||
formQuery.pageSize = newPagination.rowsPerPage;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function filterFn(page: number) {
|
|
||||||
page !== 1 ? (formQuery.page = 1) : await fetchData();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* function ตรวจสอบเลขประจำตัวประชาชน
|
|
||||||
* @param citizenId เลขประจำตัวประชาชน
|
|
||||||
*/
|
|
||||||
async function changeCardID(citizenId: string | number | null) {
|
|
||||||
if (citizenId != null && typeof citizenId == "string") {
|
|
||||||
if (citizenId.length == 13 && citizenId) {
|
|
||||||
await http
|
|
||||||
.put(config.API.profileNewCitizenId(citizenId), {
|
|
||||||
citizenId: citizenId,
|
|
||||||
})
|
|
||||||
.then(() => {})
|
|
||||||
.catch((err) => {
|
|
||||||
if (err.response.data.status === 500) {
|
|
||||||
dialogMessageNotify($q, err.response.data.message);
|
|
||||||
} else {
|
|
||||||
messageError($q, err);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<q-toolbar style="padding: 0">
|
|
||||||
<q-btn
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
color="primary"
|
|
||||||
icon="add"
|
|
||||||
@click.stop="
|
|
||||||
() => {
|
|
||||||
dialogStatus = 'create';
|
|
||||||
dialog = true;
|
|
||||||
prefix = '';
|
|
||||||
firstName = '';
|
|
||||||
lastName = '';
|
|
||||||
citizenId = '';
|
|
||||||
position = '';
|
|
||||||
posTypeId = '';
|
|
||||||
posLevelId = '';
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<q-tooltip> เพิ่มข้อมูล </q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
<q-space />
|
|
||||||
<div class="row q-gutter-sm">
|
|
||||||
<q-input
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
v-model="formQuery.keyword"
|
|
||||||
label="ค้นหา"
|
|
||||||
@keydown.enter.prevent="filterFn(formQuery.page)"
|
|
||||||
></q-input>
|
|
||||||
<q-select
|
|
||||||
v-model="visibleColumns"
|
|
||||||
multiple
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
options-dense
|
|
||||||
:display-value="$q.lang.table.columns"
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
:options="columns"
|
|
||||||
option-value="name"
|
|
||||||
options-cover
|
|
||||||
style="min-width: 150px"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</q-toolbar>
|
|
||||||
<div class="col-12">
|
|
||||||
<d-table
|
|
||||||
ref="table"
|
|
||||||
:columns="columns"
|
|
||||||
:rows="store.row"
|
|
||||||
row-key="name"
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
:paging="true"
|
|
||||||
dense
|
|
||||||
class="custom-header-table"
|
|
||||||
:visible-columns="visibleColumns"
|
|
||||||
:rows-per-page-options="[10, 25, 50, 100]"
|
|
||||||
@update:pagination="updatePagination"
|
|
||||||
>
|
|
||||||
<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-slot:body="props">
|
|
||||||
<q-tr :props="props" class="cursor-pointer">
|
|
||||||
<q-td v-for="col in props.cols" :key="col.id">
|
|
||||||
<div v-if="col.name == 'no'">
|
|
||||||
{{
|
|
||||||
(formQuery.page - 1) * formQuery.pageSize + props.rowIndex + 1
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
<div v-else-if="col.name == 'fullName'">
|
|
||||||
{{ props.row.prefix }}{{ props.row.firstName }}
|
|
||||||
{{ props.row.lastName }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else>
|
|
||||||
{{ col.value }}
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
<q-td auto-width>
|
|
||||||
<q-btn
|
|
||||||
color="edit"
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
round
|
|
||||||
class="q-mr-xs"
|
|
||||||
size="12px"
|
|
||||||
icon="edit"
|
|
||||||
clickable
|
|
||||||
@click.stop="
|
|
||||||
() => {
|
|
||||||
dialogStatus = 'edit';
|
|
||||||
dialog = true;
|
|
||||||
editId = props.row.id;
|
|
||||||
prefix = props.row.prefix;
|
|
||||||
firstName = props.row.firstName;
|
|
||||||
lastName = props.row.lastName;
|
|
||||||
citizenId = props.row.citizenId;
|
|
||||||
position = props.row.position;
|
|
||||||
posTypeId = props.row.posTypeId;
|
|
||||||
posLevelId = props.row.posLevelId;
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
<q-btn
|
|
||||||
color="red"
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
round
|
|
||||||
size="12px"
|
|
||||||
icon="mdi-delete"
|
|
||||||
clickable
|
|
||||||
@click.stop="
|
|
||||||
dialogRemove($q, async () => await deleteData(props.row.id))
|
|
||||||
"
|
|
||||||
v-close-popup
|
|
||||||
>
|
|
||||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
<template v-slot:pagination="scope">
|
|
||||||
<q-pagination
|
|
||||||
v-model="formQuery.page"
|
|
||||||
active-color="primary"
|
|
||||||
color="dark"
|
|
||||||
:max="maxPage"
|
|
||||||
:max-pages="5"
|
|
||||||
size="sm"
|
|
||||||
boundary-links
|
|
||||||
direction-links
|
|
||||||
></q-pagination>
|
|
||||||
</template>
|
|
||||||
</d-table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-dialog v-model="dialog" class="dialog" persistent>
|
|
||||||
<q-card style="min-width: 350px" class="bg-grey-11">
|
|
||||||
<form @submit.prevent="validateForm">
|
|
||||||
<q-card-section class="flex justify-between" style="padding: 0">
|
|
||||||
<dialog-header
|
|
||||||
:tittle="dialogStatus === 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
|
|
||||||
:close="closeDialog"
|
|
||||||
/>
|
|
||||||
</q-card-section>
|
|
||||||
|
|
||||||
<q-separator color="grey-4" />
|
|
||||||
<q-card-section class="q-pa-none">
|
|
||||||
<q-select
|
|
||||||
ref="prefixRef"
|
|
||||||
v-model="prefix"
|
|
||||||
label="คำนำหน้าชื่อ"
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
:options="prefixDropdown"
|
|
||||||
option-label="label"
|
|
||||||
option-value="value"
|
|
||||||
map-options
|
|
||||||
class="col-12 bg-white q-ma-md"
|
|
||||||
hide-bottom-space
|
|
||||||
:rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
|
|
||||||
emit-value
|
|
||||||
/>
|
|
||||||
<q-input
|
|
||||||
ref="firstNameRef"
|
|
||||||
outlined
|
|
||||||
v-model="firstName"
|
|
||||||
label="ชื่อ"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
borderless
|
|
||||||
class="col-12 bg-white q-ma-md"
|
|
||||||
:rules="[(val) => val.length > 0 || 'กรุณากรอกชื่อ']"
|
|
||||||
hide-bottom-space
|
|
||||||
/>
|
|
||||||
<q-input
|
|
||||||
ref="lastNameRef"
|
|
||||||
outlined
|
|
||||||
v-model="lastName"
|
|
||||||
label="นามสกุล"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
borderless
|
|
||||||
class="col-12 bg-white q-ma-md"
|
|
||||||
:rules="[(val) => val.length > 0 || 'กรุณากรอกนามสกุล']"
|
|
||||||
hide-bottom-space
|
|
||||||
/>
|
|
||||||
<q-input
|
|
||||||
ref="citizenIdRef"
|
|
||||||
outlined
|
|
||||||
v-model="citizenId"
|
|
||||||
label="เลขประจำตัวประชาชน"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
borderless
|
|
||||||
class="col-12 bg-white q-ma-md"
|
|
||||||
:rules="[
|
|
||||||
(val: string) => !!val || `${'กรุณากรอกเลขประจำตัวประชาชน'}`,
|
|
||||||
(val: string) =>
|
|
||||||
val.length >= 13 ||
|
|
||||||
`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
|
|
||||||
]"
|
|
||||||
maxlength="13"
|
|
||||||
hide-bottom-space
|
|
||||||
mask="#############"
|
|
||||||
@update:model-value="changeCardID"
|
|
||||||
/>
|
|
||||||
<q-input
|
|
||||||
ref="positionRef"
|
|
||||||
outlined
|
|
||||||
v-model="position"
|
|
||||||
label="ตำแหน่ง"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
borderless
|
|
||||||
class="col-12 bg-white q-ma-md"
|
|
||||||
:rules="[(val) => val.length > 0 || 'กรุณากรอกตำแหน่ง']"
|
|
||||||
hide-bottom-space
|
|
||||||
/>
|
|
||||||
<q-select
|
|
||||||
ref="posTypeIdRef"
|
|
||||||
v-model="posTypeId"
|
|
||||||
label="ประเภทตำแหน่ง"
|
|
||||||
outlined
|
|
||||||
:options="posTypeIdDropdown"
|
|
||||||
dense
|
|
||||||
class="col-12 bg-white q-ma-md"
|
|
||||||
options-cover
|
|
||||||
map-options
|
|
||||||
emit-value
|
|
||||||
option-label="label"
|
|
||||||
option-value="value"
|
|
||||||
hide-bottom-space
|
|
||||||
:rules="[(val) => !!val || 'กรุณาเลือกประเภทตำแหน่ง']"
|
|
||||||
/>
|
|
||||||
<q-select
|
|
||||||
ref="posLevelIdRef"
|
|
||||||
v-model="posLevelId"
|
|
||||||
label="ระดับตำแหน่ง"
|
|
||||||
:options="posLevelIdDropdown"
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
@update:model-value="updateSelectType"
|
|
||||||
class="col-12 bg-white q-ma-md"
|
|
||||||
map-options
|
|
||||||
emit-value
|
|
||||||
option-label="label"
|
|
||||||
option-value="value"
|
|
||||||
options-cover
|
|
||||||
hide-bottom-space
|
|
||||||
:rules="[(val) => !!val || 'กรุณาเลือกระดับตำแหน่ง']"
|
|
||||||
/>
|
|
||||||
</q-card-section>
|
|
||||||
|
|
||||||
<q-card-actions align="right">
|
|
||||||
<q-btn
|
|
||||||
id="onSubmit"
|
|
||||||
type="submit"
|
|
||||||
dense
|
|
||||||
unelevated
|
|
||||||
label="บันทึก"
|
|
||||||
color="public"
|
|
||||||
class="q-px-md"
|
|
||||||
>
|
|
||||||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
</q-card-actions>
|
|
||||||
</form>
|
|
||||||
</q-card>
|
|
||||||
</q-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.border_custom {
|
|
||||||
border-radius: 6px !important;
|
|
||||||
border: 1px solid #e1e1e1;
|
|
||||||
}
|
|
||||||
$toggle-background-color-on: #06884d;
|
|
||||||
$toggle-background-color-off: darkgray;
|
|
||||||
$toggle-control-color: white;
|
|
||||||
$toggle-width: 40px;
|
|
||||||
$toggle-height: 25px;
|
|
||||||
$toggle-gutter: 3px;
|
|
||||||
$toggle-radius: 50%;
|
|
||||||
$toggle-control-speed: 0.15s;
|
|
||||||
$toggle-control-ease: ease-in;
|
|
||||||
|
|
||||||
// These are our computed variables
|
|
||||||
// change at your own risk.
|
|
||||||
$toggle-radius: $toggle-height / 2;
|
|
||||||
$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
|
|
||||||
|
|
||||||
.toggle-control {
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
padding-left: $toggle-width;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 22px;
|
|
||||||
user-select: none;
|
|
||||||
|
|
||||||
input {
|
|
||||||
position: absolute;
|
|
||||||
opacity: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
height: 0;
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:checked ~ .control {
|
|
||||||
background-color: $toggle-background-color-on;
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
left: $toggle-width - $toggle-control-size - $toggle-gutter;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.control {
|
|
||||||
position: absolute;
|
|
||||||
top: -7px;
|
|
||||||
left: -15px;
|
|
||||||
height: $toggle-height;
|
|
||||||
width: $toggle-width;
|
|
||||||
border-radius: $toggle-radius;
|
|
||||||
background-color: $toggle-background-color-off;
|
|
||||||
transition: background-color $toggle-control-speed $toggle-control-ease;
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: $toggle-gutter;
|
|
||||||
top: $toggle-gutter;
|
|
||||||
width: $toggle-control-size;
|
|
||||||
height: $toggle-control-size;
|
|
||||||
border-radius: $toggle-radius;
|
|
||||||
background: $toggle-control-color;
|
|
||||||
transition: left $toggle-control-speed $toggle-control-ease;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -5,16 +5,6 @@ export default [
|
||||||
{
|
{
|
||||||
path: "/registry-new",
|
path: "/registry-new",
|
||||||
name: "registryNew",
|
name: "registryNew",
|
||||||
component: mainPage,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [7],
|
|
||||||
Role: "organization",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/registry-new/list",
|
|
||||||
name: "registryNewList",
|
|
||||||
component: listPage,
|
component: listPage,
|
||||||
meta: {
|
meta: {
|
||||||
Auth: true,
|
Auth: true,
|
||||||
|
|
@ -22,4 +12,14 @@ export default [
|
||||||
Role: "organization",
|
Role: "organization",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// path: "/registry-new/list",
|
||||||
|
// name: "registryNewList",
|
||||||
|
// component: listPage,
|
||||||
|
// meta: {
|
||||||
|
// Auth: true,
|
||||||
|
// Key: [7],
|
||||||
|
// Role: "organization",
|
||||||
|
// },
|
||||||
|
// },
|
||||||
];
|
];
|
||||||
|
|
|
||||||
6
src/modules/04_registryNew/views/detailView.vue
Normal file
6
src/modules/04_registryNew/views/detailView.vue
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<script setup lang="ts"></script>
|
||||||
|
<template>
|
||||||
|
<div></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -11,8 +11,7 @@ import type { DataPerson } from "@/modules/04_registryNew/interface/response/Mai
|
||||||
import type { FormFilter } from "@/modules/04_registryNew/interface/request/Main";
|
import type { FormFilter } from "@/modules/04_registryNew/interface/request/Main";
|
||||||
|
|
||||||
/** importComponents*/
|
/** importComponents*/
|
||||||
import Search from "@/modules/04_registryNew/components/registry/Search.vue";
|
import TableView from "@/modules/04_registryNew/components/TableView.vue";
|
||||||
import TableView from "@/modules/04_registryNew/components/registry/TableView.vue";
|
|
||||||
|
|
||||||
/** importStore*/
|
/** importStore*/
|
||||||
import { useRegistryNewDataStore } from "@/modules/04_registryNew/store";
|
import { useRegistryNewDataStore } from "@/modules/04_registryNew/store";
|
||||||
|
|
@ -503,16 +502,14 @@ onMounted(async () => {
|
||||||
<q-separator />
|
<q-separator />
|
||||||
|
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
<div class="col-12">
|
<TableView
|
||||||
<TableView
|
v-model:mode="mode"
|
||||||
v-model:mode="mode"
|
:rows="dataPersonMain"
|
||||||
:rows="dataPersonMain"
|
v-model:formFilter="formFilter"
|
||||||
v-model:formFilter="formFilter"
|
v-model:maxPage="maxPage"
|
||||||
v-model:maxPage="maxPage"
|
:fetchData="fetchDataPerson"
|
||||||
:fetchData="fetchDataPerson"
|
:fetchType="fetchType"
|
||||||
:fetchType="fetchType"
|
/>
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
</q-card>
|
</q-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -96,7 +96,7 @@ const formFilter = reactive<DataFilterPerson>({
|
||||||
page: 1,
|
page: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
keyword: "",
|
keyword: "",
|
||||||
rootId: ""
|
rootId: "",
|
||||||
});
|
});
|
||||||
const maxPage = ref<number>(1);
|
const maxPage = ref<number>(1);
|
||||||
|
|
||||||
|
|
@ -109,7 +109,7 @@ function closeModal() {
|
||||||
|
|
||||||
/** function เรียกรายชื่อ คนเลื่อนเงินเดือน*/
|
/** function เรียกรายชื่อ คนเลื่อนเงินเดือน*/
|
||||||
function fetchListPerson() {
|
function fetchListPerson() {
|
||||||
showLoader();
|
showLoader();
|
||||||
formFilter.rootId = store.rootId;
|
formFilter.rootId = store.rootId;
|
||||||
http
|
http
|
||||||
.post(config.API.salaryListPerson, formFilter)
|
.post(config.API.salaryListPerson, formFilter)
|
||||||
|
|
@ -180,9 +180,9 @@ function searchData() {
|
||||||
/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปิด Popup*/
|
/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปิด Popup*/
|
||||||
watch(
|
watch(
|
||||||
() => modal.value,
|
() => modal.value,
|
||||||
async () => {
|
() => {
|
||||||
if (modal.value) {
|
if (modal.value) {
|
||||||
await fetchListPerson();
|
fetchListPerson();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue