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

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

View file

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

View file

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

View file

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

View file

@ -1,18 +1,19 @@
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 {
DataType,
DataLevel,
} from "@/modules/04_registryPerson/interface/response/Main";
import type { FormFilter } from "@/modules/04_registryPerson/interface/request/Main";
export const useRegistryNewDataStore = defineStore("registryNew", () => {
const searchTypeOption = ref<DataOption[]>([
{ id: "fullName", name: "ชื่อ-นามสกุล" },
{ id: "citizenId", name: "เลขประจำตัวประชาชน" },
// { id: "posNo", name: "ตำแหน่งเลขที่" },
{ id: "position", name: "ตำแหน่งในสายงาน" },
{ id: "posNo", name: "ตำแหน่งเลขที่" },
]);
const employeeClassOps = ref<DataOption[]>([
{ 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 {
fetchType,
fetchLevel,
@ -58,5 +81,7 @@ export const useRegistryNewDataStore = defineStore("registryNew", () => {
posLevelOps,
yearOps,
mode,
formFilter,
labelOption,
};
});

View file

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