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

ทะเบียนประวัติ: แก้ไขUI

Browse source
This commit is contained in:
Oat 2024-03-05 15:53:38 +07:00
parent 24302d01d7
commit da3e6ee370
6 changed files with 464 additions and 234 deletions
Download patch file Download diff file Expand all files Collapse all files

124
src/modules/04_registryNew/components/registry/TableView.vue
View file

@ -3,6 +3,8 @@ import type { QTableColumn } from "quasar";
const visibleColumns = defineModel<string[]>("visibleColumns");
const mode = defineModel<string>("mode");
const props = defineProps<{
columns: QTableColumn[];
}>();
@ -34,6 +36,58 @@ const rows = [
year: 2566,
salary: "25,000",
},
{
no: 2,
fullName: "นายธามไทย คนคูเมือง",
citizenId: "5555555555555",
posNo: "สกก.5",
position: "นักจัดการงานทั่วไป",
posPath: "จัดการงานทั่วไป",
posType: "วิชาการ",
posLevel: "ปฏิบัติการ",
posOc: "ฝ่ายบริหารงานทั่วไป",
year: 2566,
salary: "25,000",
},
{
no: 2,
fullName: "นายธามไทย คนคูเมือง",
citizenId: "5555555555555",
posNo: "สกก.5",
position: "นักจัดการงานทั่วไป",
posPath: "จัดการงานทั่วไป",
posType: "วิชาการ",
posLevel: "ปฏิบัติการ",
posOc: "ฝ่ายบริหารงานทั่วไป",
year: 2566,
salary: "25,000",
},
{
no: 2,
fullName: "นายธามไทย คนคูเมือง",
citizenId: "5555555555555",
posNo: "สกก.5",
position: "นักจัดการงานทั่วไป",
posPath: "จัดการงานทั่วไป",
posType: "วิชาการ",
posLevel: "ปฏิบัติการ",
posOc: "ฝ่ายบริหารงานทั่วไป",
year: 2566,
salary: "25,000",
},
{
no: 2,
fullName: "นายธามไทย คนคูเมือง",
citizenId: "5555555555555",
posNo: "สกก.5",
position: "นักจัดการงานทั่วไป",
posPath: "จัดการงานทั่วไป",
posType: "วิชาการ",
posLevel: "ปฏิบัติการ",
posOc: "ฝ่ายบริหารงานทั่วไป",
year: 2566,
salary: "25,000",
},
];
</script>
<!-- :filter="filterKeyword"
@ -42,11 +96,13 @@ const rows = [
<template>
<d-table
ref="table"
:card-container-class="mode === 'card' ? 'q-col-gutter-md' : ''"
:columns="props.columns"
:rows="rows"
row-key="name"
flat
bordered
:grid="mode === 'card'"
:paging="true"
dense
class="custom-header-table q-mx-lg"
@ -60,8 +116,8 @@ const rows = [
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<template v-slot:body="props" v-if="mode === 'table'">
<q-tr :props="props" class="cursor-pointer" v-if="mode === 'table'">
<q-td v-for="col in props.cols" :key="col.id">
<template v-if="col.name == 'fullName'">
<q-item v-ripple>
@ -85,5 +141,69 @@ const rows = [
</q-td>
</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="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.fullName }}
</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>
</d-table>
</template>
<style scoped>
.see-more:hover {
background-color: #089cfc;
color: white;
}
</style>