Gitlab@Informatics

Skip to content
Snippets Groups Projects
Commit 5f71f8eb authored by 65160206's avatar 65160206
Browse files

employee fix

parent f4da665c
No related branches found
No related tags found
No related merge requests found
Pipeline #660 canceled
...@@ -15,28 +15,31 @@ ...@@ -15,28 +15,31 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Employee } from '@/types/Employee' import type { Employee } from '@/types/Employee'
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import { listEmployees } from '@/services/employee'; // ✅ import API import { listEmployees } from '@/services/employee'
const employees = ref<Employee[]>([]); // ✅ ดึง BASE URL จาก ENV
const defaultImage = '/images/noimage.jpg'; // เพิ่ม `/` ข้างหน้าให้เป็น path root const IMAGE_BASE_URL = import.meta.env.VITE_EMP_IMAGE_BASE || ''
const defaultImage = '/images/noimage.jpg'
const employees = ref<Employee[]>([])
const onDragStart = (event: DragEvent, employee: Employee) => { const onDragStart = (event: DragEvent, employee: Employee) => {
event.dataTransfer?.setData('text/plain', JSON.stringify(employee)); event.dataTransfer?.setData('text/plain', JSON.stringify(employee))
event.dataTransfer!.effectAllowed = 'move'; event.dataTransfer!.effectAllowed = 'move'
}; }
// ✅ โหลดข้อมูลพนักงานตอน mount // ✅ โหลดข้อมูลพนักงานตอน mount
onMounted(async () => { onMounted(async () => {
try { try {
const res = await listEmployees(); const res = await listEmployees()
employees.value = res.map((e) => ({ employees.value = res.map((e) => ({
...e, ...e,
image: e.image ? `http://localhost:4000/images/emp/${e.image}` : defaultImage, image: e.image ? IMAGE_BASE_URL + e.image : defaultImage,
})); }))
} catch (error) { } catch (error) {
console.error('โหลดพนักงานไม่สำเร็จ', error); console.error('โหลดพนักงานไม่สำเร็จ', error)
} }
}); })
</script> </script>
<style scoped> <style scoped>
...@@ -46,17 +49,14 @@ onMounted(async () => { ...@@ -46,17 +49,14 @@ onMounted(async () => {
text-align: center; text-align: center;
} }
/* ✅ ปรับ Employee Card ให้เป็น Responsive */
.employee-list { .employee-list {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* ปรับจำนวนคอลัมน์อัตโนมัติ */
gap: 15px; gap: 15px;
justify-items: center; justify-items: center;
padding: 10px; padding: 10px;
} }
/* ✅ ปรับขนาด Employee Card ตามหน้าจอ */
.employee-card { .employee-card {
margin: 5px; margin: 5px;
display: flex; display: flex;
...@@ -72,11 +72,9 @@ onMounted(async () => { ...@@ -72,11 +72,9 @@ onMounted(async () => {
transition: all 0.3s ease; transition: all 0.3s ease;
} }
/* ✅ Responsive: ถ้าหน้าจอเล็กกว่า 600px */
@media (max-width: 600px) { @media (max-width: 600px) {
.employee-list { .employee-list {
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
/* ลดขนาด */
} }
.employee-card { .employee-card {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment