<template> <div class="employee-sector"> <h3>เลือกพนักงาน</h3> <div class="employee-list"> <div v-for="employee in employees" :key="employee.id" class="employee-card" draggable="true" @dragstart="onDragStart($event, employee)"> <img :src="employee.image || defaultImage" alt="employee" class="employee-image" /> <span>{{ employee.name }}</span> </div> </div> </div> </template> <script setup lang="ts"> import type { Employee } from '@/types/Employee' import { ref } from 'vue' // ข้อมูลพนักงาน Mock (ยังไม่เชื่อม API) const employees = ref<Employee[]>([ { id: 1, name: 'นก', gender: 'female', image: 'images/em001.jpg', tel: '0812345678', dailyWageRate: 450 }, { id: 2, name: 'เจน', gender: 'female', image: 'images/em002.jpg', tel: '0823456789', dailyWageRate: 450 }, { id: 3, name: 'เจม', gender: 'male', image: 'images/em003.jpg', tel: '0834567890', dailyWageRate: 450 }, { id: 4, name: 'แอน', gender: 'female', image: 'images/em004.jpg', tel: '0845678901', dailyWageRate: 450 }, { id: 5, name: 'พิมาย', gender: 'others', image: 'images/em005.jpg', tel: '0856789012', dailyWageRate: 450 }, { id: 6, name: 'น้อง', gender: 'male', image: 'images/em006.jpg', tel: '0867890123', dailyWageRate: 450 }, { id: 7, name: 'ปุ๊ก', gender: 'female', image: 'images/em007.jpg', tel: '0878901234', dailyWageRate: 450 }, { id: 8, name: 'เป้', gender: 'male', image: 'images/em008.jpg', tel: '0889012345', dailyWageRate: 450 } ]); const defaultImage = 'images/noimage.jpg' // ใช้รูป default ถ้าไม่มีรูปพนักงาน const onDragStart = (event: DragEvent, employee: Employee) => { event.dataTransfer?.setData('text/plain', JSON.stringify(employee)) event.dataTransfer!.effectAllowed = 'move' } </script> <style scoped> .employee-sector { padding: 1rem; background: white; border-radius: 10px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); text-align: center; } /* ✅ ใช้ Grid ให้มี 5 คอลัมน์ */ .employee-list { display: grid; grid-template-columns: repeat(5, 1fr); /* 5 คนต่อแถว */ gap: 10px; justify-items: center; padding: 10px; } /* ✅ ปรับ Employee Card ให้พอดีกับ Grid */ .employee-card { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100px; height: 120px; border: 2px solid #ccc; border-radius: 10px; cursor: grab; background: white; transition: all 0.3s ease; } .employee-card:hover { background: #f0f0f0; } .employee-card:active { cursor: grabbing; } .employee-image { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; margin-bottom: 5px; } </style>