96 lines
3.3 KiB
Vue
96 lines
3.3 KiB
Vue
<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>
|