chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

feat: Personnel => Person card, hover

Browse source
This commit is contained in:
puriphatt 2024-04-03 18:28:59 +07:00
parent 7d20ff8238
commit 021b1842e0
3 changed files with 206 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

80
src/pages/02_personnel-management/MainPage.vue
View file

@ -1,2 +1,78 @@
<script setup lang="ts"></script>
<template>Personnel Management</template>
<script setup lang="ts">
import PersonCard from 'src/components/home/PersonCard.vue';
import AppBox from 'components/app/AppBox.vue';
const person = [
{
name: 'นายสันติ เมติกาญจ์',
badge: 'CORP000001-01-240002',
detail: [
{ label: 'สัญชาติ', value: 'ไทย' },
{ label: 'ตำแหน่ง', value: 'นักบริหาร' },
{ label: 'โทรศัพท์', value: '0621249602' },
{ label: 'ตำแหน่ง', value: '32 ปี' },
],
male: true,
},
{
name: 'นางสาวสุขใจ แสนดี',
badge: 'CORP000001-01-240001',
detail: [
{ label: 'สัญชาติ', value: 'ไทย' },
{ label: 'ตำแหน่ง', value: 'นักบริหาร' },
{ label: 'โทรศัพท์', value: '0621249602' },
{ label: 'ตำแหน่ง', value: '32 ปี' },
],
female: true,
},
{
name: 'นายสันติ เมติกาญจ์',
badge: 'CORP000001-01-240002',
detail: [
{ label: 'สัญชาติ', value: 'ไทย' },
{ label: 'ตำแหน่ง', value: 'นักบริหาร' },
{ label: 'โทรศัพท์', value: '0621249602' },
{ label: 'ตำแหน่ง', value: '32 ปี' },
],
male: true,
disabled: true,
},
{
name: 'นางสาวสุขใจ แสนดี',
badge: 'CORP000001-01-240001',
detail: [
{ label: 'สัญชาติ', value: 'ไทย' },
{ label: 'ตำแหน่ง', value: 'นักบริหาร' },
{ label: 'โทรศัพท์', value: '0621249602' },
{ label: 'ตำแหน่ง', value: '32 ปี' },
],
female: true,
},
{
name: 'นางสาวสุขใจ แสนดี',
badge: 'CORP000001-01-240001',
detail: [
{ label: 'สัญชาติ', value: 'ไทย' },
{ label: 'ตำแหน่ง', value: 'นักบริหาร' },
{ label: 'โทรศัพท์', value: '0621249602' },
{ label: 'ตำแหน่ง', value: '32 ปี' },
],
female: true,
disabled: true,
},
] satisfies InstanceType<typeof PersonCard>['$props']['list'];
</script>
<template>
<div class="column">
<div class="row text-h6 text-weight-bold q-mb-md">จัดการบุคลากร</div>
<AppBox bordered style="width: 100%; height: 580px">
<q-scroll-area style="height: 100%">
<div class="column" style="height: 100%">
<PersonCard :list="person" class="q-mb-md" />
</div>
</q-scroll-area>
</AppBox>
</div>
</template>

23
src/pages/MainPage.vue
View file

@ -89,32 +89,9 @@ const menu = [
caption: 'แสดงรายงาน',
},
] satisfies InstanceType<typeof MenuItem>['$props']['list'];
// const person = [
// {
// name: 'Person 1',
// badge: 'Badge 1',
// detail: [
// { label: 'Label 1', value: 'Detail 1' },
// { label: 'Label 2', value: 'Detail 2' },
// ],
// male: true,
// },
// {
// name: 'Person 1',
// badge: 'Badge 1',
// detail: [
// { label: 'Label 1', value: 'Detail 1' },
// { label: 'Label 2', value: 'Detail 2' },
// { label: 'Label 3', value: 'Detail 3' },
// ],
// female: true,
// },
// ] satisfies InstanceType<typeof PersonCard>['$props']['list'];
</script>
<template>
<!-- <PersonCard :list="person" class="q-mb-md" /> -->
<MenuItem :list="menu" />
<!-- <div class="row">
<users-detail-card-component class="q-pa-md" v-for="v in [1, 2]" :key="v" />