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

updated ทะเบียนประวัติ

Browse source
This commit is contained in:
Warunee Tamkoo 2024-08-13 18:05:23 +07:00
parent d9b8791706
commit 5166d1c16a
6 changed files with 415 additions and 379 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/modules/04_registryPerson/components/TableView.vue
View file

@ -30,6 +30,7 @@ const router = useRouter();
const formFilter = defineModel<FormFilter>("formFilter", { required: true }); const formFilter = defineModel<FormFilter>("formFilter", { required: true });
const maxPage = defineModel<Number>("maxPage", { required: true }); const maxPage = defineModel<Number>("maxPage", { required: true });
const empType = defineModel<string>("empType", { required: true }); const empType = defineModel<string>("empType", { required: true });
const isFilter = defineModel<boolean>("isFilter", { required: true });
const props = defineProps({ const props = defineProps({
rows: { type: Array }, rows: { type: Array },
fetchData: { type: Function }, fetchData: { type: Function },
@ -226,6 +227,7 @@ watch(
<q-tooltip>รายการคำร้องขอแก้ไข</q-tooltip></q-btn <q-tooltip>รายการคำร้องขอแก้ไข</q-tooltip></q-btn
> >
<q-btn <q-btn
v-if="checkPermission($route)?.attrIsGet"
round round
flat flat
dense dense
@ -343,11 +345,19 @@ watch(
</q-item-section> </q-item-section>
<q-item-section> <q-item-section>
<div <div
v-if="!checkPermission($route)?.attrIsGet"
class="text-weight-medium"
>
{{
`${props.row.prefix ? props.row.prefix : ""}${
props.row.firstName
} ${props.row.lastName}`
}}
</div>
<div
v-else
class="text-weight-medium text-blue-4 cursor-pointer" class="text-weight-medium text-blue-4 cursor-pointer"
@click=" @click="onClickViewDetail(props.row.id)"
checkPermission($route)?.attrIsGet &&
onClickViewDetail(props.row.id)
"
> >
<q-tooltip>รายละเอียด</q-tooltip> <q-tooltip>รายละเอียด</q-tooltip>
{{ {{
@ -474,7 +484,7 @@ watch(
> >
<q-icon name="search" size="4rem" /> <q-icon name="search" size="4rem" />
<span>ไม่พบข้อมูล</span> <span>{{ isFilter ? "ไม่พบข้อมูล" : "ค้นหาข้อมูล" }}</span>
</div> </div>
</span> </span>
</div> </div>

346
src/modules/04_registryPerson/components/detail/GovernmentInformation/01_Info.vue
View file

@ -72,126 +72,126 @@ const workDateRef = ref<object | null>(null);
const reasonSameDateRef = ref<object | null>(null); const reasonSameDateRef = ref<object | null>(null);
const visibleColumnsHistory = ref<String[]>([ const visibleColumnsHistory = ref<String[]>([
"oc", // "oc",
"position", // "position",
"positionPathSide", // "positionPathSide",
"posNo", // "posNo",
"positionLine", // "positionLine",
"positionType", // "positionType",
"positionLevel", // "positionLevel",
"positionExecutive", // "positionExecutive",
"positionExecutiveSide", // "positionExecutiveSide",
"dateAppoint", "dateAppoint",
"dateStart", "dateStart",
"retireDate", // "retireDate",
"govAge", // "govAge",
"govAgeAbsent", // "govAgeAbsent",
"govAgePlus", // "govAgePlus",
"reasonSameDate", "reasonSameDate",
"lastUpdateFullName", "lastUpdateFullName",
"lastUpdatedAt", "lastUpdatedAt",
]); ]);
const columnsHistory = ref<QTableProps["columns"]>([ const columnsHistory = ref<QTableProps["columns"]>([
{ // {
name: "oc", // name: "oc",
align: "left", // align: "left",
label: "สังกัด", // label: "สังกัด",
sortable: true, // sortable: true,
field: "oc", // field: "oc",
headerStyle: "font-size: 14px", // headerStyle: "font-size: 14px",
style: "font-size: 14px", // style: "font-size: 14px",
sort: (a: string, b: string) => // sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), // a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, // },
{ // {
name: "positionPathSide", // name: "positionPathSide",
align: "left", // align: "left",
label: "ตำแหน่ง", // label: "ตำแหน่ง",
sortable: true, // sortable: true,
field: "positionPathSide", // field: "positionPathSide",
headerStyle: "font-size: 14px", // headerStyle: "font-size: 14px",
style: "font-size: 14px", // style: "font-size: 14px",
sort: (a: string, b: string) => // sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), // a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, // },
{ // {
name: "position", // name: "position",
align: "left", // align: "left",
label: "ด้าน/สาขา", // label: "ด้าน/สาขา",
sortable: true, // sortable: true,
field: "position", // field: "position",
headerStyle: "font-size: 14px", // headerStyle: "font-size: 14px",
style: "font-size: 14px", // style: "font-size: 14px",
sort: (a: string, b: string) => // sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), // a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, // },
{ // {
name: "posNo", // name: "posNo",
align: "left", // align: "left",
label: "ตำแหน่งเลขที่", // label: "ตำแหน่งเลขที่",
sortable: true, // sortable: true,
field: "posNo", // field: "posNo",
headerStyle: "font-size: 14px", // headerStyle: "font-size: 14px",
style: "font-size: 14px", // style: "font-size: 14px",
sort: (a: string, b: string) => // sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), // a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, // },
{ // {
name: "positionLine", // name: "positionLine",
align: "left", // align: "left",
label: "สายงาน", // label: "สายงาน",
sortable: true, // sortable: true,
field: "positionLine", // field: "positionLine",
headerStyle: "font-size: 14px", // headerStyle: "font-size: 14px",
style: "font-size: 14px", // style: "font-size: 14px",
sort: (a: string, b: string) => // sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), // a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, // },
{ // {
name: "positionType", // name: "positionType",
align: "left", // align: "left",
label: "ประเภท", // label: "ประเภท",
sortable: true, // sortable: true,
field: "positionType", // field: "positionType",
headerStyle: "font-size: 14px", // headerStyle: "font-size: 14px",
style: "font-size: 14px", // style: "font-size: 14px",
sort: (a: string, b: string) => // sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), // a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, // },
{ // {
name: "positionLevel", // name: "positionLevel",
align: "left", // align: "left",
label: "ระดับ", // label: "ระดับ",
sortable: true, // sortable: true,
field: "positionLevel", // field: "positionLevel",
headerStyle: "font-size: 14px", // headerStyle: "font-size: 14px",
style: "font-size: 14px", // style: "font-size: 14px",
sort: (a: string, b: string) => // sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), // a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, // },
{ // {
name: "positionExecutive", // name: "positionExecutive",
align: "left", // align: "left",
label: "ตำแหน่งทางการบริหาร", // label: "ตำแหน่งทางการบริหาร",
sortable: true, // sortable: true,
field: "positionExecutive", // field: "positionExecutive",
headerStyle: "font-size: 14px", // headerStyle: "font-size: 14px",
style: "font-size: 14px", // style: "font-size: 14px",
sort: (a: string, b: string) => // sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), // a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, // },
{ // {
name: "positionExecutiveSide", // name: "positionExecutiveSide",
align: "left", // align: "left",
label: "ด้านทางการบริหาร", // label: "ด้านทางการบริหาร",
sortable: true, // sortable: true,
field: "positionExecutiveSide", // field: "positionExecutiveSide",
headerStyle: "font-size: 14px", // headerStyle: "font-size: 14px",
style: "font-size: 14px", // style: "font-size: 14px",
sort: (a: string, b: string) => // sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), // a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, // },
{ {
name: "dateAppoint", name: "dateAppoint",
align: "left", align: "left",
@ -216,51 +216,51 @@ const columnsHistory = ref<QTableProps["columns"]>([
sort: (a: string, b: string) => sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ // {
name: "retireDate", // name: "retireDate",
align: "left", // align: "left",
label: "วันเกษียณอายุ", // label: "วันเกษียณอายุ",
sortable: true, // sortable: true,
field: "retireDate", // field: "retireDate",
format: (v) => date2Thai(v), // format: (v) => date2Thai(v),
headerStyle: "font-size: 14px", // headerStyle: "font-size: 14px",
style: "font-size: 14px", // style: "font-size: 14px",
sort: (a: string, b: string) => // sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), // a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, // },
{ // {
name: "govAge", // name: "govAge",
align: "left", // align: "left",
label: "อายุราชการ", // label: "อายุราชการ",
sortable: true, // sortable: true,
field: "govAge", // field: "govAge",
headerStyle: "font-size: 14px", // headerStyle: "font-size: 14px",
style: "font-size: 14px", // style: "font-size: 14px",
sort: (a: string, b: string) => // sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), // a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, // },
{ // {
name: "govAgeAbsent", // name: "govAgeAbsent",
align: "left", // align: "left",
label: "ขาดราชการ", // label: "ขาดราชการ",
sortable: true, // sortable: true,
field: "govAgeAbsent", // field: "govAgeAbsent",
headerStyle: "font-size: 14px", // headerStyle: "font-size: 14px",
style: "font-size: 14px", // style: "font-size: 14px",
sort: (a: string, b: string) => // sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), // a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, // },
{ // {
name: "govAgePlus", // name: "govAgePlus",
align: "left", // align: "left",
label: "อายุราชการเกื้อกูล", // label: "อายุราชการเกื้อกูล",
sortable: true, // sortable: true,
field: "govAgePlus", // field: "govAgePlus",
headerStyle: "font-size: 14px", // headerStyle: "font-size: 14px",
style: "font-size: 14px", // style: "font-size: 14px",
sort: (a: string, b: string) => // sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), // a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, // },
{ {
name: "reasonSameDate", name: "reasonSameDate",
align: "left", align: "left",
@ -596,6 +596,22 @@ onMounted(() => {
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 col-sm-6 col-md-6">
<div class="row">
<div class="col-12 col-sm-12 col-md-5">
<span class="text-grey-6 text-weight-medium"
>วันที่เกษียณอายุราชการตามกฏหมาย</span
>
</div>
<div class="col-12 col-sm-12 col-md-7">
<span>{{
formMain.dateRetireLaw
? date2Thai(formMain.dateRetireLaw as Date)
: "-"
}}</span>
</div>
</div>
</div>
</div> </div>
<div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm"> <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
@ -635,22 +651,6 @@ onMounted(() => {
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 col-sm-6 col-md-6">
<div class="row">
<div class="col-12 col-sm-12 col-md-5">
<span class="text-grey-6 text-weight-medium"
>วันที่เกษียณอายุราชการตามกฏหมาย</span
>
</div>
<div class="col-12 col-sm-12 col-md-7">
<span>{{
formMain.dateRetireLaw
? date2Thai(formMain.dateRetireLaw as Date)
: "-"
}}</span>
</div>
</div>
</div>
</div> </div>
</div> </div>
</q-card> </q-card>

186
src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue
View file

@ -70,6 +70,8 @@ const changeNameData = reactive({
status: "", status: "",
documentId: "", documentId: "",
}); });
const selection = ref<string[]>([]);
const prefixChange = ref<string>(""); const prefixChange = ref<string>("");
const firstNameChange = ref<string>(""); const firstNameChange = ref<string>("");
const lastNameChange = ref<string>(""); const lastNameChange = ref<string>("");
@ -99,7 +101,9 @@ const visibleColumns = ref<string[]>([
"prefix", "prefix",
"firstName", "firstName",
"lastName", "lastName",
"status", "lastUpdateFullName",
"lastUpdatedAt",
// "status",
]); ]);
const historyVisibleColumns = ref<String[]>([ const historyVisibleColumns = ref<String[]>([
"prefix", "prefix",
@ -146,12 +150,35 @@ const columns = ref<QTableProps["columns"]>([
sort: (a: string, b: string) => sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
// {
// name: "status",
// align: "left",
// label: "สถานะการเปลี่ยนชื่อ",
// sortable: true,
// field: "status",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
{ {
name: "status", name: "lastUpdateFullName",
align: "left", align: "left",
label: "สถานะการเปลี่ยนชื่อ", label: "ผู้ดำเนินการ",
sortable: true, sortable: true,
field: "status", field: "lastUpdateFullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "lastUpdatedAt",
align: "left",
label: "วันที่แก้ไข",
sortable: true,
field: "lastUpdatedAt",
format: (v) => date2Thai(v),
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) => sort: (a: string, b: string) =>
@ -241,22 +268,23 @@ const historyPagination = ref({
rowsPerPage: 10, rowsPerPage: 10,
}); });
function editForm(row: any) { // function editForm(row: any) {
submitDisable.value = true; // submitDisable.value = true;
dialogStatus.value = "edit"; // dialogStatus.value = "edit";
editId.value = row.id; // editId.value = row.id;
subId.value = row.id; // subId.value = row.id;
changeNameData.prefix = row.prefix; // changeNameData.prefix = row.prefix;
changeNameData.firstName = row.firstName; // changeNameData.firstName = row.firstName;
changeNameData.lastName = row.lastName; // changeNameData.lastName = row.lastName;
changeNameData.status = row.status; // changeNameData.status = row.status;
prefixChange.value = changeNameData.prefix; // prefixChange.value = changeNameData.prefix;
firstNameChange.value = changeNameData.firstName; // firstNameChange.value = changeNameData.firstName;
lastNameChange.value = changeNameData.lastName; // lastNameChange.value = changeNameData.lastName;
dialog.value = true; // dialog.value = true;
} // }
function closeDialog() { function closeDialog() {
selection.value = [];
alertUpload.value = false; alertUpload.value = false;
dialog.value = false; dialog.value = false;
} }
@ -550,7 +578,16 @@ watch(
> >
<q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn <q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
> >
<!-- <q-btn
flat
dense
round
icon="mdi-history"
color="deep-purple"
@click="() => (fetchHistoryData(props.row.id), (historyDialog = true))"
>
<q-tooltip>ดูประวัติการเปลี่ยนชื่อ-นามสกุล</q-tooltip>
</q-btn> -->
<q-space /> <q-space />
<q-input <q-input
dense dense
@ -617,19 +654,7 @@ watch(
> >
<q-tooltip>ดาวน์โหลด</q-tooltip> <q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn> </q-btn>
<q-btn <!-- <q-btn
flat
dense
round
icon="mdi-history"
color="deep-purple"
@click="
() => (fetchHistoryData(props.row.id), (historyDialog = true))
"
>
<q-tooltip>ดูประวัติการเปลี่ยนชื่อ-นามสกุล</q-tooltip>
</q-btn>
<q-btn
v-if="checkPermission($route)?.attrIsUpdate" v-if="checkPermission($route)?.attrIsUpdate"
flat flat
dense dense
@ -644,7 +669,7 @@ watch(
" "
> >
<q-tooltip>แก้ไขข้อมูล</q-tooltip> <q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn> </q-btn> -->
</q-td> </q-td>
<q-td v-for="(col, index) in props.cols" :key="col.name"> <q-td v-for="(col, index) in props.cols" :key="col.name">
<div class="table_ellipsis"> <div class="table_ellipsis">
@ -658,16 +683,33 @@ watch(
<q-dialog v-model="dialog" persistent> <q-dialog v-model="dialog" persistent>
<q-card> <q-card>
<q-form @submit.prevent greedy @validation-success="onSubmit()"> <q-form @submit.prevent greedy @validation-success="onSubmit()">
<dialog-header <dialog-header tittle="เปลี่ยนชื่อ-นามสกุล" :close="closeDialog" />
:tittle="dialogStatus === 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
:close="closeDialog"
/>
<q-separator /> <q-separator />
<q-card-section> <q-card-section>
<div class="row q-mb-sm"> <div class="row q-mb-sm">
<div class="col-5"> <div class="col-12">
<q-select <div class="row">
<div class="q-gutter-sm">
<q-checkbox
v-model="selection"
val="prefix"
label="เปลี่ยนคำนำหน้าชื่อ"
/>
<q-checkbox
v-model="selection"
val="firstname"
label="เปลี่ยนชื่อ"
/>
<q-checkbox
v-model="selection"
val="lastname"
label="เปลี่ยนนามสกุล"
/>
</div>
</div>
<!-- <q-select
class="inputgreen" class="inputgreen"
outlined outlined
v-model="changeNameData.status" v-model="changeNameData.status"
@ -683,36 +725,18 @@ watch(
doneFn:Function) => filterSelector(inputValue, doneFn,'statusOptions' doneFn:Function) => filterSelector(inputValue, doneFn,'statusOptions'
) " ) "
dense dense
/> /> -->
</div> </div>
</div> </div>
<div class="row q-gutter-sm q-mb-md"> <div class="row q-gutter-sm q-mb-md">
<div class="col"> <div class="col">
<q-select <q-select
:readonly=" :readonly="!selection.includes('prefix')"
!changeNameData.status ||
(changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ' &&
changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และนามสกุล' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
"
v-model="changeNameData.prefix" v-model="changeNameData.prefix"
:options="store.Ops.prefixOps" :options="store.Ops.prefixOps"
label="คำนำหน้าชื่อ" label="คำนำหน้าชื่อ"
dense dense
:class=" :class="!selection.includes('prefix') ? '' : 'inputgreen'"
!changeNameData.status ||
(changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ' &&
changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และนามสกุล' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
? ''
: 'inputgreen'
"
outlined outlined
use-input use-input
lazy-rules lazy-rules
@ -730,60 +754,26 @@ watch(
</div> </div>
<div class="col"> <div class="col">
<q-input <q-input
:readonly=" :readonly="!selection.includes('firstname')"
!changeNameData.status ||
(changeNameData.status !== 'เปลี่ยนชื่อ' &&
changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
changeNameData.status !== 'เปลี่ยนชื่อ-นามสกุล' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
"
outlined outlined
v-model="changeNameData.firstName" v-model="changeNameData.firstName"
label="ชื่อ" label="ชื่อ"
bg-color="white" bg-color="white"
dense dense
:class=" :class="!selection.includes('firstname') ? '' : 'inputgreen'"
!changeNameData.status ||
(changeNameData.status !== 'เปลี่ยนชื่อ' &&
changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
changeNameData.status !== 'เปลี่ยนชื่อ-นามสกุล' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
? ''
: 'inputgreen'
"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อ'}`]" :rules="[(val) => !!val || `${'กรุณากรอกชื่อ'}`]"
hide-bottom-space hide-bottom-space
/> />
</div> </div>
<div class="col"> <div class="col">
<q-input <q-input
:readonly=" :readonly="!selection.includes('lastname')"
!changeNameData.status ||
(changeNameData.status !== 'เปลี่ยนนามสกุล' &&
changeNameData.status !== 'เปลี่ยนชื่อ-นามสกุล' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และนามสกุล' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
"
outlined outlined
v-model="changeNameData.lastName" v-model="changeNameData.lastName"
label="นามสกุล" label="นามสกุล"
bg-color="white" bg-color="white"
dense dense
:class=" :class="!selection.includes('lastname') ? '' : 'inputgreen'"
!changeNameData.status ||
(changeNameData.status !== 'เปลี่ยนนามสกุล' &&
changeNameData.status !== 'เปลี่ยนชื่อ-นามสกุล' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และนามสกุล' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
? ''
: 'inputgreen'
"
:rules="[(val) => !!val || `${'กรุณากรอกนามสกุล'}`]" :rules="[(val) => !!val || `${'กรุณากรอกนามสกุล'}`]"
hide-bottom-space hide-bottom-space
/> />

29
src/modules/04_registryPerson/store.ts
View file

@ -1,18 +1,19 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import { ref } from "vue"; import { ref, reactive } from "vue";
import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main"; import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
import type { import type {
DataType, DataType,
DataLevel, DataLevel,
} from "@/modules/04_registryPerson/interface/response/Main"; } from "@/modules/04_registryPerson/interface/response/Main";
import type { FormFilter } from "@/modules/04_registryPerson/interface/request/Main";
export const useRegistryNewDataStore = defineStore("registryNew", () => { export const useRegistryNewDataStore = defineStore("registryNew", () => {
const searchTypeOption = ref<DataOption[]>([ const searchTypeOption = ref<DataOption[]>([
{ id: "fullName", name: "ชื่อ-นามสกุล" }, { id: "fullName", name: "ชื่อ-นามสกุล" },
{ id: "citizenId", name: "เลขประจำตัวประชาชน" }, { id: "citizenId", name: "เลขประจำตัวประชาชน" },
// { id: "posNo", name: "ตำแหน่งเลขที่" },
{ id: "position", name: "ตำแหน่งในสายงาน" }, { id: "position", name: "ตำแหน่งในสายงาน" },
{ id: "posNo", name: "ตำแหน่งเลขที่" },
]); ]);
const employeeClassOps = ref<DataOption[]>([ const employeeClassOps = ref<DataOption[]>([
{ id: "officer", name: "ข้าราชการ กทม.สามัญ" }, { id: "officer", name: "ข้าราชการ กทม.สามัญ" },
@ -48,6 +49,28 @@ export const useRegistryNewDataStore = defineStore("registryNew", () => {
} }
}); });
} }
const formFilter = reactive<FormFilter>({
page: 1,
pageSize: 12,
keyword: "",
type: "officer",
posType: "",
posLevel: "",
retireYear: "",
rangeYear: { min: 0, max: 60 },
isShowRetire: false,
isProbation: false,
});
const labelOption = reactive({
type: "ข้าราชการ กทม.สามัญ",
posType: "ทั้งหมด",
posLevel: "ทั้งหมด",
retireYear: "",
node: "เลือกหน่วยงาน/ส่วนราชการ",
});
return { return {
fetchType, fetchType,
fetchLevel, fetchLevel,
@ -58,5 +81,7 @@ export const useRegistryNewDataStore = defineStore("registryNew", () => {
posLevelOps, posLevelOps,
yearOps, yearOps,
mode, mode,
formFilter,
labelOption,
}; };
}); });

211
src/modules/04_registryPerson/views/list.vue
View file

@ -10,11 +10,11 @@ import type {
DataPerson, DataPerson,
DataType, DataType,
} from "@/modules/04_registryPerson/interface/response/Main"; } from "@/modules/04_registryPerson/interface/response/Main";
import type { FormFilter } from "@/modules/04_registryPerson/interface/request/Main";
/** importComponents*/ /** importComponents*/
import TableView from "@/modules/04_registryPerson/components/TableView.vue"; import TableView from "@/modules/04_registryPerson/components/TableView.vue";
import avatar from "@/assets/avatar_user.jpg"; import avatar from "@/assets/avatar_user.jpg";
import DialogHeader from "@/components/DialogHeader.vue";
/** importStore*/ /** importStore*/
import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store"; import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
@ -28,39 +28,23 @@ const route = useRoute();
const mode = ref<"table" | "card">("table"); const mode = ref<"table" | "card">("table");
const isShowFilter = ref<boolean>(false); const isShowFilter = ref<boolean>(true);
const isShowBtnFilter = ref<boolean>(true); const isShowBtnFilter = ref<boolean>(false);
const empType = ref<string>("officer"); // ประเภท ขรก./ลูกจ้างประจำ/ลูกจ้างชั่วคราว const empType = ref<string>("officer"); // officer / employee / perm
const labelOption = reactive({
type: "ข้าราชการ กทม.สามัญ",
posType: "ทั้งหมด",
posLevel: "ทั้งหมด",
retireYear: "",
});
const searchType = ref<string>("fullName"); const searchType = ref<string>("fullName");
const formFilter = reactive<FormFilter>({
page: 1,
pageSize: 12,
keyword: "",
type: "",
posType: "",
posLevel: "",
retireYear: "",
rangeYear: { min: 0, max: 60 },
isShowRetire: false,
isProbation: false,
});
const maxPage = ref<number>(1); const maxPage = ref<number>(1);
const total = ref<number>(0); const total = ref<number>(0);
const selectNode = ref<boolean>(false);
const dataPersonMain = ref<DataPerson[]>([]); const dataPersonMain = ref<DataPerson[]>([]);
const conditionTotal = computed(() => { const conditionTotal = computed(() => {
let num: string = ""; let num: string = "";
if (formFilter.isProbation && formFilter.isShowRetire) { if (store.formFilter.isProbation && store.formFilter.isShowRetire) {
num = "(2)"; num = "(2)";
} else if (formFilter.isProbation || formFilter.isShowRetire) { } else if (store.formFilter.isProbation || store.formFilter.isShowRetire) {
num = "(1)"; num = "(1)";
} else ""; } else "";
@ -115,35 +99,35 @@ function fetchYearOption() {
function fetchDataPerson() { function fetchDataPerson() {
showLoader(); showLoader();
let queryParams: any = { let queryParams: any = {
page: formFilter.page, page: store.formFilter.page,
pageSize: formFilter.pageSize, pageSize: store.formFilter.pageSize,
}; };
if (formFilter.keyword) { if (store.formFilter.keyword) {
queryParams = Object.assign({}, queryParams, { queryParams = Object.assign({}, queryParams, {
searchField: searchType.value, searchField: searchType.value,
searchKeyword: formFilter.keyword, searchKeyword: store.formFilter.keyword,
}); });
} }
if (labelOption.posLevel != "ทั้งหมด") { if (store.labelOption.posLevel != "ทั้งหมด") {
queryParams = Object.assign({}, queryParams, { queryParams = Object.assign({}, queryParams, {
posLevel: labelOption.posLevel, posLevel: store.labelOption.posLevel,
}); });
} }
if (labelOption.posType != "ทั้งหมด") { if (store.labelOption.posType != "ทั้งหมด") {
queryParams = Object.assign({}, queryParams, { queryParams = Object.assign({}, queryParams, {
posType: labelOption.posType, posType: store.labelOption.posType,
}); });
} }
if (formFilter.isProbation != null) { if (store.formFilter.isProbation != null) {
queryParams.isProbation = formFilter.isProbation; queryParams.isProbation = store.formFilter.isProbation;
} }
if (formFilter.isShowRetire != null) { if (store.formFilter.isShowRetire != null) {
queryParams.isRetire = formFilter.isShowRetire; queryParams.isRetire = store.formFilter.isShowRetire;
} }
if (empType.value !== "officer") { if (empType.value !== "officer") {
@ -156,9 +140,12 @@ function fetchDataPerson() {
{ params: queryParams } { params: queryParams }
) )
.then((res) => { .then((res) => {
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize); maxPage.value = Math.ceil(
res.data.result.total / store.formFilter.pageSize
);
dataPersonMain.value = res.data.result.data; dataPersonMain.value = res.data.result.data;
total.value = res.data.result.total; total.value = res.data.result.total;
isShowBtnFilter.value = true;
insertAvatar(res.data.result.data); insertAvatar(res.data.result.data);
}) })
.catch((err) => { .catch((err) => {
@ -204,28 +191,29 @@ function insertAvatar(items: DataPerson[]) {
/** /**
* funciotn แสดงตัวเลือกเพิ่มเติม * funciotn แสดงตัวเลือกเพิ่มเติม
*/ */
function onClickShowFilter() { // function onClickShowFilter() {
isShowFilter.value = !isShowFilter.value; // isShowFilter.value = !isShowFilter.value;
isShowBtnFilter.value = false; // isShowBtnFilter.value = false;
if (isShowFilter.value) { // if (isShowFilter.value) {
// fetchLevel(); // // fetchLevel();
fetchYearOption(); // fetchYearOption();
} // }
} // }
/** /**
* funciotn ค้นหาข้อมูล * funciotn ค้นหาข้อมูล
*/ */
function onclickSearch() { function onclickSearch() {
isShowFilter.value = true; isShowFilter.value = true;
isShowBtnFilter.value = false; // isShowBtnFilter.value = false;
formFilter.page = 1; store.formFilter.page = 1;
if (isShowFilter.value) { if (isShowFilter.value) {
fetchType(); fetchType();
// fetchLevel(); // fetchLevel();
fetchYearOption(); fetchYearOption();
} }
formFilter.keyword = formFilter.keyword === null ? "" : formFilter.keyword; store.formFilter.keyword =
store.formFilter.keyword === null ? "" : store.formFilter.keyword;
fetchDataPerson(); fetchDataPerson();
} }
@ -234,21 +222,34 @@ function onclickSearch() {
* @param item ประเภทข้าราชการ * @param item ประเภทข้าราชการ
*/ */
async function selectType() { async function selectType() {
// labelOption.type = item.name;
empType.value = await (route.name == "registryNew" ? "officer" : "perm"); empType.value = await (route.name == "registryNew" ? "officer" : "perm");
formFilter.page = 1;
labelOption.posType = "ทั้งหมด";
labelOption.posLevel = "ทั้งหมด";
if (empType.value !== "officer") { if (empType.value !== "officer") {
formFilter.isShowRetire = null; store.formFilter.isShowRetire = null;
formFilter.isProbation = null; store.formFilter.isProbation = null;
fetchOptionGroup(); fetchOptionGroup();
} else { } else {
fetchType(); fetchType();
} }
fetchDataPerson(); // เช็ค store ถ้าเปลี่ยนประเภททะเบียนประวัติ ให้ล่างค่า filter ใหม่
if (store.formFilter.type != empType.value) {
store.labelOption.posType = "ทั้งหมด";
store.labelOption.posLevel = "ทั้งหมด";
store.formFilter.type = empType.value;
} else {
// แต่ถ้าประเภทเดิมระบบจะใช้ filter เดิมที่เคยค้นหาไว้
if (
store.formFilter.keyword != "" ||
store.labelOption.posType != "ทั้งหมด" ||
store.labelOption.posLevel != "ทั้งหมด" ||
store.formFilter.isShowRetire != null ||
store.formFilter.isProbation != null
) {
store.formFilter.page = 1;
fetchDataPerson();
}
}
} }
/** /**
@ -258,9 +259,9 @@ async function selectType() {
function selectPosType(item: DataOption) { function selectPosType(item: DataOption) {
const dataType = store.posTypeMain.find((e: DataType) => e.id === item.id); const dataType = store.posTypeMain.find((e: DataType) => e.id === item.id);
store.fetchLevel(dataType?.posLevels); store.fetchLevel(dataType?.posLevels);
labelOption.posType = item.name; store.labelOption.posType = item.name;
labelOption.posLevel = "ทั้งหมด"; store.labelOption.posLevel = "ทั้งหมด";
formFilter.page = 1; store.formFilter.page = 1;
fetchDataPerson(); fetchDataPerson();
} }
@ -269,8 +270,8 @@ function selectPosType(item: DataOption) {
* @param item ประเภทระดับ * @param item ประเภทระดับ
*/ */
function selectPosLevel(item: DataOption) { function selectPosLevel(item: DataOption) {
labelOption.posLevel = item.name; store.labelOption.posLevel = item.name;
formFilter.page = 1; store.formFilter.page = 1;
fetchDataPerson(); fetchDataPerson();
} }
@ -280,17 +281,17 @@ function selectPosLevel(item: DataOption) {
*/ */
function clearSelect(t: string) { function clearSelect(t: string) {
if (t === "posType") { if (t === "posType") {
labelOption.posType = "ทั้งหมด"; store.labelOption.posType = "ทั้งหมด";
labelOption.posLevel = "ทั้งหมด"; store.labelOption.posLevel = "ทั้งหมด";
} else if (t === "posLevel") { } else if (t === "posLevel") {
labelOption.posLevel = "ทั้งหมด"; store.labelOption.posLevel = "ทั้งหมด";
} else if (t === "retireYear") { } else if (t === "retireYear") {
labelOption.retireYear = ""; store.labelOption.retireYear = "";
} else if (t === "rangeYear") { } else if (t === "rangeYear") {
formFilter.rangeYear.min = 0; store.formFilter.rangeYear.min = 0;
formFilter.rangeYear.max = 60; store.formFilter.rangeYear.max = 60;
} }
formFilter.page = 1; store.formFilter.page = 1;
fetchDataPerson(); fetchDataPerson();
} }
@ -337,7 +338,7 @@ onMounted(async () => {
borderless borderless
dense dense
bg-color="white" bg-color="white"
v-model="formFilter.keyword" v-model="store.formFilter.keyword"
clearable clearable
placeholder="ค้นหา" placeholder="ค้นหา"
class="col-9 q-pr-md" class="col-9 q-pr-md"
@ -361,47 +362,40 @@ onMounted(async () => {
</q-form> </q-form>
<div v-if="isShowBtnFilter" class="col-12 row q-mt-sm"> <div v-if="isShowBtnFilter" class="col-12 row q-mt-sm">
<q-space /> <q-space />
<q-btn พบข้อมูลทั้งหมด {{ total }} รายการ
<!-- <q-btn
flat flat
label="ตัวเลือกเพิ่มเติม" label="ตัวเลือกเพิ่มเติม"
icon-right="mdi-tune" icon-right="mdi-tune"
@click="onClickShowFilter" @click="onClickShowFilter"
dense dense
class="q-px-sm" class="q-px-sm"
></q-btn> ></q-btn> -->
</div> </div>
<div <div
class="row q-mt-sm q-gutter-sm justify-center" :class="
!isShowBtnFilter
? 'row q-mt-sm q-gutter-sm justify-center'
: 'row q-gutter-sm justify-center'
"
v-if="isShowFilter" v-if="isShowFilter"
> >
<!-- <q-btn-dropdown <q-btn-dropdown
flat flat
rounded rounded
dense dense
label-color="white" label-color="white"
dropdown-icon="mdi-chevron-down" dropdown-icon="mdi-chevron-down"
class="q-px-sm" class="q-px-sm"
@click="() => (selectNode = true)"
> >
<template v-slot:label> <template v-slot:label>
{{ `${labelOption.type}` }} {{ `${store.labelOption.node}` }}
</template> </template>
<q-list>
<q-item
v-for="(item, index) in store.employeeClassOps"
:key="index"
clickable
v-close-popup
@click="selectType(item)"
>
<q-item-section>
<q-item-label>{{ item.name }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown> </q-btn-dropdown>
<q-separator inset vertical class="lineFil" /> --> <q-separator inset vertical class="lineFil" />
<q-btn-dropdown <q-btn-dropdown
rounded rounded
@ -413,19 +407,19 @@ onMounted(async () => {
> >
<template v-slot:label> <template v-slot:label>
{{ {{
labelOption.posType !== "ทั้งหมด" store.labelOption.posType !== "ทั้งหมด"
? labelOption.posType ? store.labelOption.posType
: empType === "officer" : empType === "officer"
? `ตำแหน่งประเภท${labelOption.posType}` ? `ตำแหน่งประเภท${store.labelOption.posType}`
: `กลุ่มงาน${labelOption.posType}` : `กลุ่มงาน${store.labelOption.posType}`
}} }}
<q-btn <q-btn
v-if="store.labelOption.posType !== 'ทั้งหมด'"
size="10px" size="10px"
flat flat
round round
color="white" color="white"
icon="close" icon="close"
v-if="labelOption.posType !== 'ทั้งหมด'"
@click.stop.prevent="clearSelect('posType')" @click.stop.prevent="clearSelect('posType')"
/> />
</template> </template>
@ -452,15 +446,15 @@ onMounted(async () => {
label-color="white" label-color="white"
dropdown-icon="mdi-chevron-down" dropdown-icon="mdi-chevron-down"
class="q-px-sm" class="q-px-sm"
:disable="labelOption.posType === 'ทั้งหมด' ? true : false" :disable="store.labelOption.posType === 'ทั้งหมด' ? true : false"
> >
<template v-slot:label> <template v-slot:label>
{{ {{
labelOption.posLevel !== "ทั้งหมด" store.labelOption.posLevel !== "ทั้งหมด"
? labelOption.posLevel ? store.labelOption.posLevel
: empType === "officer" : empType === "officer"
? `ระดับ${labelOption.posLevel}` ? `ระดับ${store.labelOption.posLevel}`
: `ระดับชั้นงาน${labelOption.posLevel}` : `ระดับชั้นงาน${store.labelOption.posLevel}`
}} }}
<q-btn <q-btn
size="10px" size="10px"
@ -468,7 +462,7 @@ onMounted(async () => {
round round
color="white" color="white"
icon="close" icon="close"
v-if="labelOption.posLevel !== 'ทั้งหมด'" v-if="store.labelOption.posLevel !== 'ทั้งหมด'"
@click.stop.prevent="clearSelect('posLevel')" @click.stop.prevent="clearSelect('posLevel')"
/> />
</template> </template>
@ -510,7 +504,7 @@ onMounted(async () => {
<q-item clickable v-close-popup> <q-item clickable v-close-popup>
<q-item-section> <q-item-section>
<q-toggle <q-toggle
v-model="formFilter.isProbation" v-model="store.formFilter.isProbation"
color="primary" color="primary"
label="ทดลองปฏิบัติหน้าที่ราชการ" label="ทดลองปฏิบัติหน้าที่ราชการ"
@update:model-value="fetchDataPerson" @update:model-value="fetchDataPerson"
@ -520,7 +514,7 @@ onMounted(async () => {
<q-item clickable v-close-popup> <q-item clickable v-close-popup>
<q-item-section> <q-item-section>
<q-toggle <q-toggle
v-model="formFilter.isShowRetire" v-model="store.formFilter.isShowRetire"
color="primary" color="primary"
label="แสดงข้อมูลผู้พ้นจากราชการ" label="แสดงข้อมูลผู้พ้นจากราชการ"
@update:model-value="fetchDataPerson" @update:model-value="fetchDataPerson"
@ -540,15 +534,30 @@ onMounted(async () => {
<TableView <TableView
v-model:mode="mode" v-model:mode="mode"
:rows="dataPersonMain" :rows="dataPersonMain"
v-model:formFilter="formFilter" v-model:formFilter="store.formFilter"
v-model:maxPage="maxPage" v-model:maxPage="maxPage"
:fetchData="fetchDataPerson" :fetchData="fetchDataPerson"
:fetchType="fetchType" :fetchType="fetchType"
:total="total" :total="total"
:empType="empType" :empType="empType"
:is-filter="isShowBtnFilter"
/> />
</q-card-section> </q-card-section>
</q-card> </q-card>
<!-- แสดง dialog เลือกหน่วยงาน/ส่วนราชการ -->
<q-dialog v-model="selectNode" persistent>
<q-card style="width: 850px; max-width: 80vw">
<DialogHeader
tittle="เลือกหน่วยงาน/ส่วนราชการ"
:close="() => (selectNode = false)"
/>
<q-separator />
<q-card-section class="q-pa-sm"> </q-card-section>
</q-card>
</q-dialog>
</template> </template>
<style scoped> <style scoped>

2
src/stores/data.ts
View file

@ -5,6 +5,7 @@ export const useDataStore = defineStore("data", () => {
// ref() คือการประกาศ state เหมือน vuex // ref() คือการประกาศ state เหมือน vuex
const count = ref<number>(0); const count = ref<number>(0);
const loader = ref<boolean>(false); const loader = ref<boolean>(false);
const drawerL = ref<boolean>(false);
const expandedReport2 = ref<string[]>([]); const expandedReport2 = ref<string[]>([]);
const selectedReport2 = ref<string>(""); const selectedReport2 = ref<string>("");
@ -66,6 +67,7 @@ export const useDataStore = defineStore("data", () => {
expandedRegister, expandedRegister,
selectedRegister, selectedRegister,
changeTreeRegister, changeTreeRegister,
drawerL,
}; };
}); });