ข้อมูลทะเบียนประวัติ
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";
|
||||
|
||||
/** importComponent*/
|
||||
import DialogAddData from "@/modules/04_registryNew/components/registry/DialogAddData.vue";
|
||||
import DialogHistory from "@/modules/04_registryNew/components/registry/DialogHistory.vue";
|
||||
import DialogAddData from "@/modules/04_registryNew/components/DialogAddData.vue";
|
||||
import DialogHistory from "@/modules/04_registryNew/components/DialogHistory.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useRegistryNewDataStore } from "@/modules/04_registryNew/store";
|
||||
|
|
@ -319,8 +319,81 @@ watch(
|
|||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:item="props" v-else>
|
||||
<div class="col-xs-12 col-sm-6 col-md-3">
|
||||
<q-card style="border: 0.5px solid #e4e4e4">
|
||||
<div class="col-xs-12 col-sm-4 col-md-3 q-pa-lg">
|
||||
<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">
|
||||
<q-item-section avatar class="q-pa-none">
|
||||
<img
|
||||
|
|
@ -374,8 +447,8 @@ watch(
|
|||
<div class="see-more text-center q-py-md" style="width: 100%">
|
||||
<span style="font-size: 14px; font-weight: 500">ดูเพิ่มเติม</span>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-card> -->
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
|
|
@ -422,10 +495,11 @@ watch(
|
|||
</template>
|
||||
|
||||
<style scoped>
|
||||
.see-more:hover {
|
||||
.hover-button:hover {
|
||||
background-color: #089cfc;
|
||||
color: white;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.my-card {
|
||||
width: 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",
|
||||
name: "registryNew",
|
||||
component: mainPage,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [7],
|
||||
Role: "organization",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/registry-new/list",
|
||||
name: "registryNewList",
|
||||
component: listPage,
|
||||
meta: {
|
||||
Auth: true,
|
||||
|
|
@ -22,4 +12,14 @@ export default [
|
|||
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";
|
||||
|
||||
/** importComponents*/
|
||||
import Search from "@/modules/04_registryNew/components/registry/Search.vue";
|
||||
import TableView from "@/modules/04_registryNew/components/registry/TableView.vue";
|
||||
import TableView from "@/modules/04_registryNew/components/TableView.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useRegistryNewDataStore } from "@/modules/04_registryNew/store";
|
||||
|
|
@ -503,16 +502,14 @@ onMounted(async () => {
|
|||
<q-separator />
|
||||
|
||||
<q-card-section>
|
||||
<div class="col-12">
|
||||
<TableView
|
||||
v-model:mode="mode"
|
||||
:rows="dataPersonMain"
|
||||
v-model:formFilter="formFilter"
|
||||
v-model:maxPage="maxPage"
|
||||
:fetchData="fetchDataPerson"
|
||||
:fetchType="fetchType"
|
||||
/>
|
||||
</div>
|
||||
<TableView
|
||||
v-model:mode="mode"
|
||||
:rows="dataPersonMain"
|
||||
v-model:formFilter="formFilter"
|
||||
v-model:maxPage="maxPage"
|
||||
:fetchData="fetchDataPerson"
|
||||
:fetchType="fetchType"
|
||||
/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ const formFilter = reactive<DataFilterPerson>({
|
|||
page: 1,
|
||||
pageSize: 10,
|
||||
keyword: "",
|
||||
rootId: ""
|
||||
rootId: "",
|
||||
});
|
||||
const maxPage = ref<number>(1);
|
||||
|
||||
|
|
@ -109,7 +109,7 @@ function closeModal() {
|
|||
|
||||
/** function เรียกรายชื่อ คนเลื่อนเงินเดือน*/
|
||||
function fetchListPerson() {
|
||||
showLoader();
|
||||
showLoader();
|
||||
formFilter.rootId = store.rootId;
|
||||
http
|
||||
.post(config.API.salaryListPerson, formFilter)
|
||||
|
|
@ -180,9 +180,9 @@ function searchData() {
|
|||
/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปิด Popup*/
|
||||
watch(
|
||||
() => modal.value,
|
||||
async () => {
|
||||
() => {
|
||||
if (modal.value) {
|
||||
await fetchListPerson();
|
||||
fetchListPerson();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue