추가
This commit is contained in:
184
frontend/employee/[id].vue
Normal file
184
frontend/employee/[id].vue
Normal file
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div>
|
||||
<AppHeader />
|
||||
|
||||
<div class="container-fluid py-4">
|
||||
<div class="mb-4">
|
||||
<NuxtLink to="/employee" class="text-decoration-none">
|
||||
<i class="bi bi-arrow-left me-1"></i> 목록으로
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div class="row" v-if="employee">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-person me-2"></i>사원 정보
|
||||
</h5>
|
||||
<span :class="employee.isActive ? 'badge bg-success' : 'badge bg-secondary'">
|
||||
{{ employee.isActive ? '재직' : '퇴직' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form @submit.prevent="updateEmployee">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">이름 <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" v-model="form.employeeName" required />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">이메일 <span class="text-danger">*</span></label>
|
||||
<input type="email" class="form-control" v-model="form.employeeEmail" required />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">사번</label>
|
||||
<input type="text" class="form-control" v-model="form.employeeNumber" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">직급</label>
|
||||
<select class="form-select" v-model="form.employeePosition">
|
||||
<option value="">선택</option>
|
||||
<option value="사원">사원</option>
|
||||
<option value="대리">대리</option>
|
||||
<option value="과장">과장</option>
|
||||
<option value="차장">차장</option>
|
||||
<option value="부장">부장</option>
|
||||
<option value="이사">이사</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">연락처</label>
|
||||
<input type="text" class="form-control" v-model="form.employeePhone" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">입사일</label>
|
||||
<input type="date" class="form-control" v-model="form.joinDate" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="isActive" v-model="form.isActive" />
|
||||
<label class="form-check-label" for="isActive">재직중</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2">
|
||||
<button type="submit" class="btn btn-primary" :disabled="isSubmitting">
|
||||
<i class="bi bi-save me-1"></i> 저장
|
||||
</button>
|
||||
<NuxtLink to="/employee" class="btn btn-outline-secondary">취소</NuxtLink>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="bi bi-clock-history me-2"></i>활동 이력
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-4">
|
||||
<h6 class="text-muted">최근 로그인</h6>
|
||||
<p class="mb-0">{{ employee.lastLoginAt ? formatDateTime(employee.lastLoginAt) : '-' }}</p>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<h6 class="text-muted">등록일</h6>
|
||||
<p class="mb-0">{{ formatDateTime(employee.createdAt) }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-muted">최종 수정</h6>
|
||||
<p class="mb-0">{{ formatDateTime(employee.updatedAt) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center py-5" v-else-if="isLoading">
|
||||
<div class="spinner-border text-primary"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { fetchCurrentUser } = useAuth()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const employee = ref<any>(null)
|
||||
const isLoading = ref(true)
|
||||
const isSubmitting = ref(false)
|
||||
|
||||
const form = ref({
|
||||
employeeName: '',
|
||||
employeeEmail: '',
|
||||
employeeNumber: '',
|
||||
employeePosition: '',
|
||||
employeePhone: '',
|
||||
joinDate: '',
|
||||
isActive: true
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
const user = await fetchCurrentUser()
|
||||
if (!user) {
|
||||
router.push('/login')
|
||||
return
|
||||
}
|
||||
|
||||
await loadEmployee()
|
||||
})
|
||||
|
||||
async function loadEmployee() {
|
||||
isLoading.value = true
|
||||
try {
|
||||
const res = await $fetch<{ employee: any }>(`/api/employee/${route.params.id}/detail`)
|
||||
employee.value = res.employee
|
||||
|
||||
const e = res.employee
|
||||
form.value = {
|
||||
employeeName: e.employeeName || '',
|
||||
employeeEmail: e.employeeEmail || '',
|
||||
employeeNumber: e.employeeNumber || '',
|
||||
employeePosition: e.employeePosition || '',
|
||||
employeePhone: e.employeePhone || '',
|
||||
joinDate: e.joinDate ? e.joinDate.split('T')[0] : '',
|
||||
isActive: e.isActive
|
||||
}
|
||||
} catch (e: any) {
|
||||
alert('사원 정보를 불러오는데 실패했습니다.')
|
||||
router.push('/employee')
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function updateEmployee() {
|
||||
if (!form.value.employeeName || !form.value.employeeEmail) {
|
||||
alert('이름과 이메일은 필수입니다.')
|
||||
return
|
||||
}
|
||||
|
||||
isSubmitting.value = true
|
||||
try {
|
||||
await $fetch(`/api/employee/${route.params.id}/update`, {
|
||||
method: 'PUT',
|
||||
body: form.value
|
||||
})
|
||||
alert('저장되었습니다.')
|
||||
await loadEmployee()
|
||||
} catch (e: any) {
|
||||
alert(e.data?.message || e.message || '저장에 실패했습니다.')
|
||||
} finally {
|
||||
isSubmitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function formatDateTime(dateStr: string) {
|
||||
if (!dateStr) return '-'
|
||||
const d = new Date(dateStr)
|
||||
return d.toLocaleString('ko-KR')
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user