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

ประวัติถือครองตำแหน่ง

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-07-09 10:17:37 +07:00
parent f6ea889258
commit 8ef9c5d7bc
2 changed files with 196 additions and 156 deletions
Download patch file Download diff file Expand all files Collapse all files

329
src/modules/04_registryNew/components/DialogHistory.vue
View file

@ -5,23 +5,43 @@ import { useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
/** importType*/
import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
/**
* importType*
*/
import type { QTableProps } from "quasar";
import type { QForm } from "quasar";
import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
import type {
HistoryPos,
Position,
} from "@/modules/04_registryNew/interface/response/History";
/** importStore*/
/**
* import components
*/
import DialogHeader from "@/components/DialogHeader.vue";
/**
* importStore
*/
import { useCounterMixin } from "@/stores/mixin";
/** use*/
/**
* use
*/
const myForm = ref<QForm>();
const router = useRouter();
const $q = useQuasar();
const { showLoader, hideLoader, messageError, date2Thai, dialogMessageNotify } =
useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
/**props*/
/**
* props
*/
const modal = defineModel<boolean>("modal", { required: true });
/**
* ตัวแปร
*/
const employeeClass = ref<string>("");
const typeKeyword = ref<string>("");
const Keyword = ref<string>("");
@ -35,7 +55,12 @@ const typeKeywordOps = ref<DataOption[]>([
{ id: "position", name: "ตำแหน่ง" },
]);
const positionOps = ref<DataOption[]>([]);
const columns = ref<any["columns"]>([
const options = ref<DataOption[]>([]);
/**
* Table
*/
const columns = ref<QTableProps["columns"]>([
{
name: "no",
label: "ลำดับ",
@ -81,18 +106,26 @@ const columns = ref<any["columns"]>([
align: "left",
label: "วันที่ถือครอง",
field: "date",
format: (val, row) => `${date2Thai(val)}`,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const rows = ref<any>([]);
const rows = ref<HistoryPos[]>([]);
/**
* function fetch ข้อมูลตำแหน่ง ข้าราชการ
*/
function fecthPositionOfficer() {
http
.get(config.API.listPositionPathHistory)
.then((res) => {
let data = res.data.result.items;
positionOps.value = data.map((e: any) => ({ id: e.id, name: e.name }));
positionOps.value = data.map((e: Position) => ({
id: e.id,
name: e.name,
}));
options.value = positionOps.value;
})
.catch((err) => {
@ -100,12 +133,20 @@ function fecthPositionOfficer() {
});
}
/**
* function fetch ข้อมูลตำแหน่ง ลูกจ้างประจำ
*/
function fetchPositionPerm() {
http
.get(config.API.listPositionEmployeePositionHistory)
.then((res) => {
let data = res.data.result.items;
positionOps.value = data.map((e: any) => ({ id: e.id, name: e.name }));
console.log(data);
positionOps.value = data.map((e: Position) => ({
id: e.id,
name: e.name,
}));
options.value = positionOps.value;
})
.catch((err) => {
@ -113,12 +154,20 @@ function fetchPositionPerm() {
});
}
/**
* function เปลี่ยนประเภท
*/
function changeEmployeeClass() {
typeKeyword.value = "";
Keyword.value = "";
positionKeyword.value = "";
rows.value = [];
}
/**
* function เลือกฟิลด์ที่จะค้นหา
* @param typeKeyword ประเภทฟิลด์
*/
function selectTypeKeyword(typeKeyword: string) {
positionOps.value = [];
positionKeyword.value = "";
@ -131,6 +180,10 @@ function selectTypeKeyword(typeKeyword: string) {
}
}
/**
* function ค้นหาประวัติถือครองตำแหน่ง
* @param type ประเภทข่าราชการ
*/
function clickSearch(type: string) {
myForm.value!.validate().then((result: boolean) => {
if (result) {
@ -151,16 +204,15 @@ function clickSearch(type: string) {
.then((res) => {
let data = res.data.result;
if (data.length !== 0) {
rows.value = data.map((e: any) => ({
rows.value = data.map((e: HistoryPos) => ({
id: e.id,
citizenId: e.citizenId,
name: e.fullName,
posNo: e.posNo,
position: e.position,
date: date2Thai(e.date),
date: e.date,
}));
} else {
dialogMessageNotify($q, "ไม่มีข้อมูลที่ต้องการค้นหา");
rows.value = [];
}
})
@ -174,8 +226,13 @@ function clickSearch(type: string) {
}
});
}
const options = ref<any>([]);
function filterFn(val: string, update: any) {
/**
* function ค้นหาข่อมูล Optiion
* @param val คำค้นหา
* @param update function
*/
function filterFn(val: string, update: Function) {
if (val === "") {
update(() => {
options.value = positionOps.value;
@ -189,6 +246,11 @@ function filterFn(val: string, update: any) {
});
}
}
/**
* function redirect ไปทะเบียนประวัติ
* @param id
*/
function clickRedirect(id: string) {
const url =
employeeClass.value === "officer"
@ -197,42 +259,32 @@ function clickRedirect(id: string) {
router.push(`${url}/${id}`);
}
const paging = ref<boolean>(true);
const pagination = ref({
sortBy: "order",
descending: false,
page: 1,
rowsPerPage: 10,
});
const paginationLabel = (start: number, end: number, total: number) => {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
};
/**
* function ปิด popup
*/
function closeDialog() {
modal.value = false;
employeeClass.value = "";
typeKeyword.value = "";
Keyword.value = "";
positionKeyword.value = "";
rows.value = [];
}
</script>
<template>
<q-dialog v-model="modal">
<q-card style="width: 850px; max-width: 80vw">
<q-toolbar>
<q-toolbar-title class="text-subtitle2 text-bold"
>ประวัติถือครองตำแหน่ง</q-toolbar-title
>
<q-btn
icon="close"
unelevated
round
dense
v-close-popup
style="color: #ff8080; background-color: #ffdede"
/>
</q-toolbar>
<DialogHeader :tittle="'ประวัติถือครองตำแหน่ง'" :close="closeDialog" />
<q-separator />
<div class="dialog-card-contain">
<q-card-section class="q-pa-sm">
<q-form ref="myForm">
<div class="col-12 bg-grey-2 q-pa-sm">
<div class="q-col-gutter-xs row no-wrap">
<q-card-section class="q-pa-sm">
<q-form ref="myForm">
<div class="col-12 bg-grey-2 q-pa-sm">
<div class="col-12 row q-pb-sm q-col-gutter-sm items-center"></div>
<div class="q-col-gutter-xs row no-wrap">
<div class="col-4">
<q-select
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภท'}`]"
@ -250,6 +302,8 @@ const paginationLabel = (start: number, end: number, total: number) => {
input-debounce="0"
@update:model-value="changeEmployeeClass"
/>
</div>
<div class="col-3">
<q-select
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณาเลือก ฟิลด์ที่จะค้น'}`]"
@ -267,8 +321,10 @@ const paginationLabel = (start: number, end: number, total: number) => {
input-debounce="0"
@update:model-value="selectTypeKeyword(typeKeyword)"
/>
</div>
<div class="col" v-if="typeKeyword === 'no'">
<q-input
v-if="typeKeyword === 'no'"
borderless
outlined
dense
@ -278,8 +334,10 @@ const paginationLabel = (start: number, end: number, total: number) => {
:rules="[(val:string) => !!val || `${'กรุณากรอก ตำแหน่งเลขที่'}`]"
hide-bottom-space
/>
</div>
<div class="col" v-if="typeKeyword === 'position'">
<q-select
v-if="typeKeyword === 'position'"
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณาเลือก ตำแหน่ง'}`]"
outlined
@ -304,119 +362,78 @@ const paginationLabel = (start: number, end: number, total: number) => {
</q-item>
</template></q-select
>
<q-space />
<div class="col-2 row">
<q-btn
dense
color="primary"
icon="mdi-magnify"
label="ค้นหา"
class="col-12"
@click="clickSearch(employeeClass)"
/>
</div>
</div>
<q-space />
<q-btn
color="primary"
icon="mdi-magnify"
label="ค้นหา"
@click="clickSearch(employeeClass)"
/>
</div>
</q-form>
</q-card-section>
</div>
</div>
<div class="col-12 q-px-sm q-pb-sm">
<q-table
flat
dense
bordered
:rows="rows"
:columns="columns"
row-key="order"
class="custom-header-table"
no-data-label="ไม่มีข้อมูล"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<div class="text-grey-7 text-weight-medium">
<span class="row">{{ col.label }}</span>
</div>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td key="no" :props="props"> {{ props.rowIndex + 1 }}</q-td>
<q-td key="order" :props="props">{{ props.row.order }} </q-td>
<q-td
key="citizenId"
class="text-primary"
@click="clickRedirect(props.row.id)"
:props="props"
>{{ props.row.citizenId }}</q-td
>
<q-td
key="name"
class="text-primary"
@click="clickRedirect(props.row.id)"
:props="props"
>{{ props.row.name }}</q-td
>
<q-td key="posNo" :props="props">{{ props.row.posNo }}</q-td>
<q-td key="position" :props="props">{{
props.row.position
}}</q-td>
<q-td key="date" :props="props">{{ props.row.date }}</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
color="primary"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
<!-- <q-card-actions align="right">
<q-btn flat label="OK" color="primary" v-close-popup />
</q-card-actions> -->
<div class="col-12 q-mt-sm">
<d-table
flat
dense
bordered
:rows="rows"
:columns="columns"
row-key="order"
no-data-label="ไม่มีข้อมูล"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div class="text-grey-7 text-weight-medium">
<span class="row">{{ col.label }}</span>
</div>
</q-th>
</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.name"
:props="props"
>
<div v-if="col.name === 'no'">
{{ props.rowIndex + 1 }}
</div>
<div
v-else-if="col.name === 'citizenId'"
class="text-primary"
@click="clickRedirect(props.row.id)"
>
{{ props.row.citizenId ?? "-" }}
</div>
<div
v-else-if="col.name === 'name'"
class="text-primary"
@click="clickRedirect(props.row.id)"
>
{{ props.row.name ?? "-" }}
</div>
<div v-else class="table_ellipsis2">
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</q-form>
</q-card-section>
</q-card>
</q-dialog>
</template>
<style scoped>
.custom-header-table {
max-height: 64vh;
.q-table tr:nth-child(odd) td {
background: white;
}
.q-table tr:nth-child(even) td {
background: #f8f8f8;
}
.q-table thead tr {
background: #ecebeb;
}
.q-table thead tr th {
position: sticky;
z-index: 1;
}
.q-table thead tr:last-child th {
top: 48px;
}
.q-table thead tr:first-child th {
top: 0;
}
}
</style>
<style scoped></style>

23
src/modules/04_registryNew/interface/response/History.ts Normal file
View file

@ -0,0 +1,23 @@
interface HistoryPos {
citizenId: string;
date: string | Date;
fullName: string;
id: string;
posNo: string;
position: string;
}
interface Position {
createdAt: string;
createdFullName: string;
createdUserId: string;
id: string;
isActive: boolean;
lastUpdateFullName: string;
lastUpdateUserId: "";
lastUpdatedAt: string;
name: string;
note: string;
}
export type { HistoryPos, Position };