diff --git a/public/images/em001.jpg b/public/images/em001.jpg
deleted file mode 100644
index 97b5ee9790288e9e95d00b2f41db52520d68cec3..0000000000000000000000000000000000000000
Binary files a/public/images/em001.jpg and /dev/null differ
diff --git a/public/images/em002.jpg b/public/images/em002.jpg
deleted file mode 100644
index d139e96544b44dbdf2aa76e2b5fce6f654ae31e4..0000000000000000000000000000000000000000
Binary files a/public/images/em002.jpg and /dev/null differ
diff --git a/public/images/em003.jpg b/public/images/em003.jpg
deleted file mode 100644
index 79b6b0e59dda751c716d5872b0350fa7657e97b0..0000000000000000000000000000000000000000
Binary files a/public/images/em003.jpg and /dev/null differ
diff --git a/public/images/em004.jpg b/public/images/em004.jpg
deleted file mode 100644
index afa5d5204f46c60b12015c5e07112902c2650d83..0000000000000000000000000000000000000000
Binary files a/public/images/em004.jpg and /dev/null differ
diff --git a/public/images/em005.jpg b/public/images/em005.jpg
deleted file mode 100644
index ff5a5cf16f84f7e799dab2b7f0db969931c0b00b..0000000000000000000000000000000000000000
Binary files a/public/images/em005.jpg and /dev/null differ
diff --git a/public/images/em006.jpg b/public/images/em006.jpg
deleted file mode 100644
index 7b7ecdb673c23dc70fbcecb2c39ee04a3ec7cfab..0000000000000000000000000000000000000000
Binary files a/public/images/em006.jpg and /dev/null differ
diff --git a/public/images/em007.jpg b/public/images/em007.jpg
deleted file mode 100644
index cfc2b2a0172c60ebebaa50e490136d36e2495fe8..0000000000000000000000000000000000000000
Binary files a/public/images/em007.jpg and /dev/null differ
diff --git a/public/images/em008.jpg b/public/images/em008.jpg
deleted file mode 100644
index dfac9897b557c0fad9d8fe4f1e27551b2e716975..0000000000000000000000000000000000000000
Binary files a/public/images/em008.jpg and /dev/null differ
diff --git a/src/components/EmployeeSector.vue b/src/components/EmployeeSector.vue
index 120eec05ee429d22aefec2bc9b6f6b7f2ed5fb17..e4e507d11db895b83ae06af52016fec64152f9eb 100644
--- a/src/components/EmployeeSector.vue
+++ b/src/components/EmployeeSector.vue
@@ -2,7 +2,7 @@
<div class="employee-sector">
<h3 style="color: black;">เลือกพนักงาน</h3>
<div class="employee-list">
- <div v-for="employee in employees" :key="employee.id" class="employee-card" draggable="true"
+ <div v-for="employee in employees" :key="employee.EmployeeID" class="employee-card" draggable="true"
@dragstart="onDragStart($event, employee)">
<!-- ✅ ปิด Drag Default ของรูปภาพ -->
<img :src="employee.image || defaultImage" alt="employee" class="employee-image" @dragstart.prevent />
@@ -14,26 +14,29 @@
<script setup lang="ts">
import type { Employee } from '@/types/Employee'
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
+import { listEmployees } from '@/services/employee'; // ✅ import API
-// ข้อมูลพนักงาน 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 employees = ref<Employee[]>([]);
+const defaultImage = '/images/noimage.jpg'; // เพิ่ม `/` ข้างหน้าให้เป็น path root
const onDragStart = (event: DragEvent, employee: Employee) => {
- event.dataTransfer?.setData('text/plain', JSON.stringify(employee))
- event.dataTransfer!.effectAllowed = 'move'
-}
+ event.dataTransfer?.setData('text/plain', JSON.stringify(employee));
+ event.dataTransfer!.effectAllowed = 'move';
+};
+
+// ✅ โหลดข้อมูลพนักงานตอน mount
+onMounted(async () => {
+ try {
+ const res = await listEmployees();
+ employees.value = res.map((e) => ({
+ ...e,
+ image: e.image ? `http://localhost:4000/images/emp/${e.image}` : defaultImage,
+ }));
+ } catch (error) {
+ console.error('โหลดพนักงานไม่สำเร็จ', error);
+ }
+});
</script>
<style scoped>
diff --git a/src/stores/employee.ts b/src/stores/employee.ts
new file mode 100644
index 0000000000000000000000000000000000000000..74760559e41b30c347d8b93e112156cbb5744269
--- /dev/null
+++ b/src/stores/employee.ts
@@ -0,0 +1,107 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { Employee } from '@/types/Employee'
+import * as employeeService from '@/services/employee'
+
+export const useEmployeeStore = defineStore('employee', () => {
+ const employees = ref<Employee[]>([])
+ const loading = ref<boolean>(false)
+ const error = ref<string | null>(null)
+
+ const IMAGE_BASE_URL = 'http://localhost:4000/images/emp/'
+ const FALLBACK_IMAGE = '/images/noimage.jpg'
+
+ // ✅ ดึงรายการ Employee ทั้งหมดจาก backend และแปะ path รูป
+ async function fetchEmployees() {
+ loading.value = true
+ error.value = null
+ try {
+ const res = await employeeService.listEmployees()
+ employees.value = res.map((e) => ({
+ ...e,
+ image: e.image ? IMAGE_BASE_URL + e.image : FALLBACK_IMAGE
+ }))
+ } catch (err: any) {
+ error.value = err.message || 'Unknown Error'
+ } finally {
+ loading.value = false
+ }
+ }
+
+ // ✅ ดึง Employee รายการเดียว พร้อมแปะ path รูป
+ async function fetchEmployee(id: number): Promise<Employee | null> {
+ loading.value = true
+ error.value = null
+ try {
+ const res = await employeeService.getEmployee(id)
+ return {
+ ...res,
+ image: res.image ? IMAGE_BASE_URL + res.image : FALLBACK_IMAGE
+ }
+ } catch (err: any) {
+ error.value = err.message || 'Unknown Error'
+ return null
+ } finally {
+ loading.value = false
+ }
+ }
+
+ // ✅ สร้าง Employee ใหม่
+ async function addEmployee(payload: Partial<Employee>) {
+ loading.value = true
+ error.value = null
+ try {
+ const newEmployee = await employeeService.createEmployee(payload)
+ newEmployee.image = newEmployee.image ? IMAGE_BASE_URL + newEmployee.image : FALLBACK_IMAGE
+ employees.value.push(newEmployee)
+ } catch (err: any) {
+ error.value = err.message || 'Unknown Error'
+ } finally {
+ loading.value = false
+ }
+ }
+
+ // ✅ อัปเดตข้อมูล Employee
+ async function editEmployee(id: number, payload: Partial<Employee>) {
+ loading.value = true
+ error.value = null
+ try {
+ const updated = await employeeService.updateEmployee(id, payload)
+ updated.image = updated.image ? IMAGE_BASE_URL + updated.image : FALLBACK_IMAGE
+
+ const index = employees.value.findIndex((e) => e.EmployeeID === id)
+ if (index !== -1) {
+ employees.value[index] = updated
+ }
+ } catch (err: any) {
+ error.value = err.message || 'Unknown Error'
+ } finally {
+ loading.value = false
+ }
+ }
+
+ // ✅ ลบ Employee
+ async function removeEmployee(id: number) {
+ loading.value = true
+ error.value = null
+ try {
+ await employeeService.deleteEmployee(id)
+ employees.value = employees.value.filter((e) => e.EmployeeID !== id)
+ } catch (err: any) {
+ error.value = err.message || 'Unknown Error'
+ } finally {
+ loading.value = false
+ }
+ }
+
+ return {
+ employees,
+ loading,
+ error,
+ fetchEmployees,
+ fetchEmployee,
+ addEmployee,
+ editEmployee,
+ removeEmployee
+ }
+})
diff --git a/src/types/Employee.ts b/src/types/Employee.ts
index ff31a442e0134334ce034da20c703493d4d29dda..9c28c49e1c6b608c21a6ef2ca35abf97cd5753b5 100644
--- a/src/types/Employee.ts
+++ b/src/types/Employee.ts
@@ -1,12 +1,16 @@
type Gender = 'male' | 'female' | 'others'
-type Employee = {
- id?: number
+export interface Employee {
+ EmployeeID: number // Primary Key (Auto Increment)
name: string
- gender?: Gender
- image?: string
+ gender: Gender
+ age: number
+ mainRole: string
+ secondRole?: string | null
tel: string
dailyWageRate: number
+ startDate: string // ใช้เป็น string ในรูปแบบ ISO date เช่น "2024-01-01"
+ image?: string | null
}
-export type { Gender, Employee }
+export type { Gender }