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:
Oat 2024-03-04 17:54:52 +07:00
parent 6120ff870b
commit f6af2527eb
4 changed files with 449 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

96
src/modules/04_registryNew/components/registry/CardView.vue Normal file
View file

@ -0,0 +1,96 @@
<script setup lang="ts">
import { QTableColumn } from "quasar";
const rows = [
{
no: 1,
citizenId: "1231231231234",
fullName: "นางสาวกัณฐิมา กานสิน",
posNo: "สกก.1",
position: "นักบริหาร",
posPath: "บริหาร",
posType: "บริหาร",
posLevel: "ชำนาญการพิเศษ",
posOc: "ฝ่ายบริหารงานทั่วไป",
year: 2566,
salary: "40,000",
},
{
no: 2,
citizenId: "5555555555555",
fullName: "นายธามไทย คนคูเมือง",
posNo: "สกก.5",
position: "นักจัดการงานทั่วไป",
posPath: "จัดการงานทั่วไป",
posType: "วิชาการ",
posLevel: "ปฏิบัติการ",
posOc: "ฝ่ายบริหารงานทั่วไป",
year: 2566,
salary: "25,000",
},
{
no: 3,
citizenId: "0000000000000",
fullName: "นายชัชชาติ สิทธิพงศ์",
posNo: "สกก.5",
position: "นักจัดการงานทั่วไป",
posPath: "จัดการงานทั่วไป",
posType: "วิชาการ",
posLevel: "ปฏิบัติการ",
posOc: "ฝ่ายบริหารงานทั่วไป",
year: 2566,
salary: "25,000",
},
] satisfies Record<string, any>[];
</script>
<template>
<div class="flex">
<q-card
v-for="row in rows"
:key="row.fullName"
style="max-width: 300px"
class="q-mr-md"
>
<div class="flex justify-center q-py-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">{{ row.fullName }}</div>
<div class="text-weight-light full-width text-center">
{{ row.citizenId }}
</div>
</q-item-section>
<div class="bg-grey-3 q-my-md q-py-md" style="height: 20%; width: 100%">
<div class="row q-pl-md">
<div class="col">
<div class="text-weight-light">ตำแหน่งเลขที่</div>
<div class="text-weight-medium">{{ row.posNo }}</div>
</div>
<div class="col">
<div class="text-weight-light">ตำแหน่ง</div>
<div class="text-weight-medium">{{ 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">{{ row.posType }}</div>
</div>
<div class="col">
<div class="text-weight-light">ระดับชั้นงาน</div>
<div class="text-weight-medium">{{ row.posLevel }}</div>
</div>
</div>
</div>
<div>
<q-separator class="q-mb-sm" color="black" />
<span style="font-size: 16px; font-weight: bold">ดูเพิ่มเติม</span>
</div>
</div>
</q-card>
</div>
</template>

55
src/modules/04_registryNew/components/registry/Search.vue Normal file
View file

@ -0,0 +1,55 @@
<script setup lang="ts">
import { ref } from "vue";
const search = ref<string>("");
</script>
<template>
<div
class="column full-width justify-center items-center inline-block bg-primary q-py-xl q-px-xl"
style="border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem"
>
<span
style="
display: block;
text-align: center;
color: white;
font-size: 20px;
font-weight: bold;
"
>
ค้นหาข้อมูลทะเบียนประวัติ
</span>
<div class="flex q-mt-lg" style="border-radius: 20px; flex-wrap: nowrap">
<div
class="flex full-width items-center bg-white"
style="flex-grow: 1; border-radius: 0.5rem"
>
<q-icon
class="q-mx-md"
round
flat
color="grey"
name="search"
size="20px"
dense
/>
<q-input
placeholder="ค้นหา"
v-model="search"
dense
style="flex-grow: 1"
borderless
/>
<q-btn
class="q-mr-md"
outline
color="blue"
icon="filter_list"
dense
size="12px"
/>
</div>
<q-btn class="q-ml-lg q-px-lg" color="blue" unelevated label="ค้นหา" />
</div>
</div>
</template>

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

@ -0,0 +1,87 @@
<script setup lang="ts">
import { QTableColumn } from "quasar";
const visibleColumns = defineModel<string[]>("visibleColumns");
const props = defineProps<{
columns: QTableColumn[];
}>();
const rows = [
{
no: 1,
fullName: "นางสาวกัณฐิมา กานสิน",
posNo: "สกก.1",
position: "นักบริหาร",
posPath: "บริหาร",
posType: "บริหาร",
posLevel: "ชำนาญการพิเศษ",
posOc: "ฝ่ายบริหารงานทั่วไป",
year: 2566,
salary: "40,000",
},
{
no: 2,
fullName: "นายธามไทย คนคูเมือง",
posNo: "สกก.5",
position: "นักจัดการงานทั่วไป",
posPath: "จัดการงานทั่วไป",
posType: "วิชาการ",
posLevel: "ปฏิบัติการ",
posOc: "ฝ่ายบริหารงานทั่วไป",
year: 2566,
salary: "25,000",
},
];
</script>
<!-- :filter="filterKeyword"
:visible-columns="visibleColumns" -->
<template>
<d-table
ref="table"
:columns="props.columns"
:rows="rows"
row-key="name"
flat
bordered
:paging="true"
dense
class="custom-header-table q-mx-lg"
:visible-columns="visibleColumns"
>
>
<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">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.id">
<template v-if="col.name == 'fullName'">
<q-item v-ripple>
<q-item-section avatar>
<img
src="@/assets/avatar_user.jpg"
class="col-4 img-info"
style="width: 35px; height: 40px; border-radius: 50%"
/>
</q-item-section>
<q-item-section>
<div class="text-weight-medium">{{ props.row.fullName }}</div>
<div class="text-weight-light">123123123123123</div>
</q-item-section>
</q-item>
</template>
<template v-else>
{{ col.value }}
</template>
</q-td>
</q-tr>
</template>
</d-table>
</template>