osolit-research/weeklyreport
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

권한, 사용자, 메뉴 등에 대한 기능 업데이트

Browse Source
This commit is contained in:
Hyoseong Jo
2026-01-10 16:54:06 +09:00
parent 134a68d9db
commit ef7914d5c6
34 changed files with 2678 additions and 650 deletions
Download Patch File Download Diff File Expand all files Collapse all files

320
frontend/employee/index.vue
View File

@@ -1,320 +0,0 @@
<template>
<div>
<AppHeader />
<div class="container-fluid py-4">
<div class="d-flex justify-content-between align-items-center mb-4">
<div>
<h4><i class="bi bi-people me-2"></i>직원 관리</h4>
<p class="text-muted mb-0">총 {{ employees.length }}명</p>
</div>
<button class="btn btn-primary" @click="showCreateModal = true">
<i class="bi bi-plus-lg me-1"></i> 직원 등록
</button>
</div>
<!-- 검색 -->
<div class="card mb-4">
<div class="card-body">
<div class="row g-3">
<div class="col-md-4">
<input
type="text"
class="form-control"
v-model="searchKeyword"
placeholder="이름 또는 이메일 검색"
/>
</div>
<div class="col-md-2">
<select class="form-select" v-model="filterStatus">
<option value="">전체</option>
<option value="active">재직</option>
<option value="inactive">퇴직</option>
</select>
</div>
</div>
</div>
</div>
<!-- 사원 목록 -->
<div class="card">
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead class="table-light">
<tr>
<th>이름</th>
<th>이메일</th>
<th style="width: 150px">소속사</th>
<th style="width: 120px">직급</th>
<th style="width: 100px">상태</th>
<th style="width: 120px">관리</th>
</tr>
</thead>
<tbody>
<tr v-if="isLoading">
<td colspan="6" class="text-center py-4">
<span class="spinner-border spinner-border-sm me-2"></span>로딩 중...
</td>
</tr>
<tr v-else v-for="emp in filteredEmployees" :key="emp.employeeId">
<td><strong>{{ emp.employeeName }}</strong></td>
<td>{{ emp.employeeEmail }}</td>
<td>{{ emp.company || '-' }}</td>
<td>{{ emp.employeePosition || '-' }}</td>
<td>
<span :class="emp.isActive !== false ? 'badge bg-success' : 'badge bg-secondary'">
{{ emp.isActive !== false ? '재직' : '퇴직' }}
</span>
</td>
<td>
<NuxtLink
:to="`/employee/${emp.employeeId}`"
class="btn btn-sm btn-outline-primary me-1"
title="상세보기"
>
<i class="bi bi-eye"></i>
</NuxtLink>
<button
class="btn btn-sm btn-outline-danger"
@click.stop="confirmDelete(emp)"
title="삭제"
>
<i class="bi bi-trash"></i>
</button>
</td>
</tr>
<tr v-if="!isLoading && filteredEmployees.length === 0">
<td colspan="6" class="text-center py-5 text-muted">
<i class="bi bi-inbox display-4"></i>
<p class="mt-2 mb-0">직원 정보가 없습니다.</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 사원 등록 모달 -->
<div class="modal fade" :class="{ show: showCreateModal }" :style="{ display: showCreateModal ? 'block' : 'none' }">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">직원 등록</h5>
<button type="button" class="btn-close" @click="showCreateModal = false"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="form-label">이름 <span class="text-danger">*</span></label>
<input type="text" class="form-control" v-model="newEmployee.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="newEmployee.employeeEmail" required />
</div>
<div class="mb-3">
<label class="form-label">소속사</label>
<select class="form-select" v-model="newEmployee.company">
<option value="(주)터보소프트">(주)터보소프트</option>
<option value="(주)코쿤">(주)코쿤</option>
<option value="(주)오솔정보기술">(주)오솔정보기술</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">직급</label>
<select class="form-select" v-model="newEmployee.employeePosition">
<option value="">선택</option>
<optgroup label="일반">
<option value="사원">사원</option>
<option value="대리">대리</option>
<option value="과장">과장</option>
<option value="차장">차장</option>
<option value="부장">부장</option>
<option value="이사">이사</option>
</optgroup>
<optgroup label="연구소">
<option value="연구원">연구원</option>
<option value="주임연구원">주임연구원</option>
<option value="선임연구원">선임연구원</option>
<option value="책임연구원">책임연구원</option>
<option value="수석연구원">수석연구원</option>
<option value="소장">소장</option>
</optgroup>
</select>
</div>
<div class="mb-3">
<label class="form-label">연락처</label>
<input type="text" class="form-control" v-model="newEmployee.employeePhone" />
</div>
<div class="mb-3">
<label class="form-label">입사일</label>
<input type="date" class="form-control" v-model="newEmployee.joinDate" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" @click="showCreateModal = false">취소</button>
<button type="button" class="btn btn-primary" @click="createEmployee">
<i class="bi bi-check-lg me-1"></i> 등록
</button>
</div>
</div>
</div>
</div>
<div class="modal-backdrop fade show" v-if="showCreateModal"></div>
<!-- 삭제 확인 모달 -->
<div class="modal fade" :class="{ show: showDeleteModal }" :style="{ display: showDeleteModal ? 'block' : 'none' }">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-danger">
<i class="bi bi-exclamation-triangle me-2"></i>직원 삭제
</h5>
<button type="button" class="btn-close" @click="showDeleteModal = false"></button>
</div>
<div class="modal-body">
<p>
<strong>{{ deleteTarget?.employeeName }}</strong> ({{ deleteTarget?.employeeEmail }}) 님을 삭제하시겠습니까?
</p>
<div class="alert alert-warning small">
<i class="bi bi-info-circle me-1"></i>
주간보고가 있는 경우 비활성화 처리됩니다.
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" @click="showDeleteModal = false">취소</button>
<button type="button" class="btn btn-danger" @click="deleteEmployee" :disabled="isDeleting">
<span v-if="isDeleting" class="spinner-border spinner-border-sm me-1"></span>
<i v-else class="bi bi-trash me-1"></i>삭제
</button>
</div>
</div>
</div>
</div>
<div class="modal-backdrop fade show" v-if="showDeleteModal"></div>
</div>
</template>
<script setup lang="ts">
const { fetchCurrentUser } = useAuth()
const router = useRouter()
const employees = ref<any[]>([])
const searchKeyword = ref('')
const filterStatus = ref('')
const showCreateModal = ref(false)
const showDeleteModal = ref(false)
const deleteTarget = ref<any>(null)
const isLoading = ref(true)
const isDeleting = ref(false)
const newEmployee = ref({
employeeName: '',
employeeEmail: '',
company: '(주)터보소프트',
employeePosition: '',
employeePhone: '',
joinDate: ''
})
// 검색어/필터로 자동 필터링
const filteredEmployees = computed(() => {
let list = employees.value
if (searchKeyword.value) {
const keyword = searchKeyword.value.toLowerCase()
list = list.filter(e =>
e.employeeName?.toLowerCase().includes(keyword) ||
e.employeeEmail?.toLowerCase().includes(keyword)
)
}
if (filterStatus.value === 'active') {
list = list.filter(e => e.isActive !== false)
} else if (filterStatus.value === 'inactive') {
list = list.filter(e => e.isActive === false)
}
return list
})
onMounted(async () => {
const user = await fetchCurrentUser()
if (!user) {
router.push('/login')
return
}
await loadEmployees()
})
async function loadEmployees() {
isLoading.value = true
try {
const res = await $fetch<{ employees: any[] }>('/api/employee/list')
employees.value = res.employees || []
} catch (e) {
console.error('Load employees error:', e)
} finally {
isLoading.value = false
}
}
async function createEmployee() {
if (!newEmployee.value.employeeName || !newEmployee.value.employeeEmail) {
alert('이름과 이메일은 필수입니다.')
return
}
try {
await $fetch('/api/employee/create', {
method: 'POST',
body: newEmployee.value
})
showCreateModal.value = false
newEmployee.value = {
employeeName: '',
employeeEmail: '',
company: '(주)터보소프트',
employeePosition: '',
employeePhone: '',
joinDate: ''
}
await loadEmployees()
} catch (e: any) {
alert(e.data?.message || e.message || '등록에 실패했습니다.')
}
}
function confirmDelete(emp: any) {
deleteTarget.value = emp
showDeleteModal.value = true
}
async function deleteEmployee() {
if (!deleteTarget.value) return
isDeleting.value = true
try {
const res = await $fetch<{ success: boolean; action: string; message: string }>(
`/api/employee/${deleteTarget.value.employeeId}/delete`,
{ method: 'DELETE' }
)
alert(res.message)
showDeleteModal.value = false
deleteTarget.value = null
await loadEmployees()
} catch (e: any) {
alert(e.data?.message || e.message || '삭제에 실패했습니다.')
} finally {
isDeleting.value = false
}
}
</script>
<style scoped>
.modal.show {
background: rgba(0, 0, 0, 0.5);
}
</style>