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-03-08 13:11:20 +07:00
parent 9fda47fb9c
commit b7a71dbb45
10 changed files with 111 additions and 1282 deletions
Download patch file Download diff file Expand all files Collapse all files

507
src/modules/04_registryNew/components/TableView.vue Normal file
View file

@ -0,0 +1,507 @@
<script setup lang="ts">
import { ref, watch, computed, onMounted } from "vue";
/** importType*/
import type { QTableProps } from "quasar";
import type { FormFilter } from "@/modules/04_registryNew/interface/request/Main";
/** importComponent*/
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";
const store = useRegistryNewDataStore();
const formFilter = defineModel<FormFilter>("formFilter", { required: true });
const maxPage = defineModel<Number>("maxPage", { required: true });
const props = defineProps({
rows: { type: Array },
fetchData: { type: Function },
fetchType: { type: Function },
});
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: "fullName",
align: "left",
label: "ชื่อ - นามสกุล",
sortable: true,
field: "fullName",
headerStyle: "font-size: 14px; min-width: 200px",
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: "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: "posPath",
align: "left",
label: "สายงาน",
sortable: true,
field: "posPath",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "posType",
align: "left",
label: "สายงาน",
sortable: true,
field: "posPath",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "posLevel",
align: "left",
label: "ระดับชั้นงาน",
sortable: true,
field: "posLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "posOc",
align: "left",
label: "สังกัด",
sortable: true,
field: "posOc",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "year",
align: "left",
label: "ปีงบประมาณ",
sortable: true,
field: "year",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "salary",
align: "left",
label: "ค่าจ้าง",
sortable: true,
field: "salary",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const visibleColumns = ref<string[]>([
"no",
"fullName",
"posNo",
"position",
"posPath",
"posType",
"posLevel",
"posOc",
"year",
"salary",
]);
function updatePagePagination() {
props.fetchData?.();
}
function updatePageSizePagination(newPagination: any) {
formFilter.value.page = 1;
formFilter.value.pageSize = newPagination.rowsPerPage;
}
const pagination = ref({
page: formFilter.value.page,
rowsPerPage: formFilter.value.pageSize,
});
const modalDialogAdd = ref<boolean>(false);
const modalHistory = ref<boolean>(false);
function onClickAddData() {
modalDialogAdd.value = !modalDialogAdd.value;
}
function onClickHistory() {
modalHistory.value = !modalHistory.value;
}
watch(
() => formFilter.value.pageSize,
() => {
props.fetchData?.();
}
);
</script>
<template>
<q-toolbar style="padding: 0px">
<q-btn
round
flat
color="primary"
icon="add"
size="16px"
@click="onClickAddData"
>
<q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
>
<q-btn
round
flat
color="blue"
icon="mdi-history"
size="16px"
@click="onClickHistory"
>
<q-tooltip>ประวัติถือครองตำแหน่ง</q-tooltip></q-btn
>
<q-space />
<q-select
v-if="store.mode === 'table'"
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"
class="q-mr-sm"
/>
<q-btn-toggle
v-model="store.mode"
dense
class="no-shadow"
toggle-color="grey-4"
:options="[
{ value: 'table', slot: 'table' },
{ value: 'card', slot: 'card' },
]"
>
<template v-slot:table>
<q-icon
name="format_list_bulleted"
size="24px"
:style="{
color: store.mode === 'table' ? '#787B7C' : '#C9D3DB',
}"
/>
</template>
<template v-slot:card>
<q-icon
name="mdi-view-grid-outline"
size="24px"
:style="{
color: store.mode === 'card' ? '#787B7C' : '#C9D3DB',
}"
/>
</template>
</q-btn-toggle>
</q-toolbar>
<d-table
ref="table"
row-key="id"
flat
bordered
dense
:card-container-class="store.mode === 'card' ? 'q-col-gutter-md' : ''"
:columns="columns"
:rows="props.rows"
:grid="store.mode === 'card'"
:paging="true"
v-model:pagination="pagination"
:rows-per-page-options="[20, 50, 100]"
:visible-columns="visibleColumns"
@update:pagination="updatePageSizePagination"
>
>
<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-tr>
</template>
<template v-slot:body="props" v-if="store.mode === 'table'">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.id">
<div v-if="col.name === 'no'">
{{
(formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
}}
</div>
<template v-else-if="col.name == 'fullName'">
<div class="row col-12 wrap items-center">
<q-item>
<q-item-section avatar>
<q-avatar>
<img
v-if="props.row.avatar == null"
src="@/assets/avatar_user.jpg"
class="col-4 img-info"
/>
<img
v-else
:src="props.row.avatar"
class="col-4 img-info"
/>
</q-avatar>
</q-item-section>
<q-item-section>
<div class="text-weight-medium">
{{
`${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
}}
</div>
<div class="text-weight-light">{{ props.row.citizenId }}</div>
</q-item-section>
</q-item>
</div>
</template>
<template v-else>
{{ col.value ? col.value : "-" }}
</template>
</q-td>
</q-tr>
</template>
<template v-slot:item="props" v-else>
<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
src="@/assets/avatar_user.jpg"
class="col-4 img-info q-mt-md"
style="width: 120px; height: 120px; border-radius: 50%"
/>
<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-item-section>
<q-card
bordered
class="q-my-md q-py-md full-width bg-grey-2"
style="border: 0.5px solid #e4e4e4"
>
<div class="row q-pl-md">
<div class="col">
<div class="text-weight-light">ตำแหน่งเลขที่</div>
<div class="text-weight-medium">{{ props.row.posNo }}</div>
</div>
<div class="col">
<div class="text-weight-light">ตำแหน่ง</div>
<div class="text-weight-medium">
{{ props.row.position }}
</div>
</div>
</div>
<div class="row q-pl-md q-pt-md">
<div class="col">
<div class="text-weight-light">ประเภท</div>
<div class="text-weight-medium">
{{ props.row.posType }}
</div>
</div>
<div class="col">
<div class="text-weight-light">ระดับชั้นงาน</div>
<div class="text-weight-medium">
{{ props.row.posLevel }}
</div>
</div>
</div>
</q-card>
</div>
<q-separator class="" color="" />
<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> -->
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="formFilter.page"
active-color="primary"
color="dark"
:max="Number(maxPage)"
:max-pages="5"
size="sm"
boundary-links
direction-links
@update:model-value="updatePagePagination()"
></q-pagination>
</template>
<template v-slot:no-data="{ icon, message, filter }">
<div class="full-width row flex-center text-accent q-gutter-sm">
<span
><div
style="
height: 50vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
"
class="text-grey-5"
>
<q-icon name="search" size="4rem" />
<span>ไม่พบข้อมูล</span>
</div>
</span>
</div>
</template>
</d-table>
<DialogAddData
v-model:modal="modalDialogAdd"
:fetchData="props.fetchData"
:fetchType="props.fetchType"
/>
<DialogHistory v-model:modal="modalHistory" />
</template>
<style scoped>
.hover-button:hover {
background-color: #089cfc;
color: white !important;
}
.my-card {
width: 100%;
height: 100%;
}
</style>