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-04 20:58:47 +09:00
parent a87c11597a
commit 0660ed3973
37 changed files with 1723 additions and 885 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
frontend/employee/index.vue
View File

@@ -5,11 +5,11 @@
<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">직원 정보 관리</p>
<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> 사원 등록
<i class="bi bi-plus-lg me-1"></i> 직원 등록
</button>
</div>
@@ -23,13 +23,14 @@
class="form-control"
v-model="searchKeyword"
placeholder="이름 또는 이메일 검색"
@keyup.enter="loadEmployees"
/>
</div>
<div class="col-md-2 d-flex align-items-end">
<button class="btn btn-outline-secondary" @click="loadEmployees">
<i class="bi bi-search me-1"></i> 조회
</button>
<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>
@@ -41,23 +42,29 @@
<table class="table table-hover mb-0">
<thead class="table-light">
<tr>
<th style="width: 100px">사번</th>
<th>이름</th>
<th>이메일</th>
<th style="width: 100px">직급</th>
<th style="width: 150px">소속사</th>
<th style="width: 120px">직급</th>
<th style="width: 100px">상태</th>
<th style="width: 80px">상세</th>
</tr>
</thead>
<tbody>
<tr v-for="emp in employees" :key="emp.employeeId">
<td><code>{{ emp.employeeNumber || '-' }}</code></td>
<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.employeeEmail }}</td>
<td>{{ emp.employeePosition || '-' }}</td>
<td>
<span :class="emp.isActive ? 'badge bg-success' : 'badge bg-secondary'">
{{ emp.isActive ? '재직' : '퇴직' }}
<span :class="emp.isActive !== false ? 'badge bg-success' : 'badge bg-secondary'">
{{ emp.isActive !== false ? '재직' : '퇴직' }}
</span>
</td>
<td>
@@ -69,10 +76,10 @@
</NuxtLink>
</td>
</tr>
<tr v-if="employees.length === 0">
<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>
<p class="mt-2 mb-0">직원 정보가 없습니다.</p>
</td>
</tr>
</tbody>
@@ -86,7 +93,7 @@
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">사원 등록</h5>
<h5 class="modal-title">직원 등록</h5>
<button type="button" class="btn-close" @click="showCreateModal = false"></button>
</div>
<div class="modal-body">
@@ -99,19 +106,33 @@
<input type="email" class="form-control" v-model="newEmployee.employeeEmail" required />
</div>
<div class="mb-3">
<label class="form-label">사번</label>
<input type="text" class="form-control" v-model="newEmployee.employeeNumber" />
<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>
<option value="사원">사원</option>
<option value="대리">대리</option>
<option value="과장">과장</option>
<option value="차장">차장</option>
<option value="부장">부장</option>
<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">
@@ -142,17 +163,40 @@ const router = useRouter()
const employees = ref<any[]>([])
const searchKeyword = ref('')
const filterStatus = ref('')
const showCreateModal = ref(false)
const isLoading = ref(true)
const newEmployee = ref({
employeeName: '',
employeeEmail: '',
employeeNumber: '',
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) {
@@ -164,14 +208,14 @@ onMounted(async () => {
})
async function loadEmployees() {
isLoading.value = true
try {
const query: Record<string, any> = {}
if (searchKeyword.value) query.keyword = searchKeyword.value
const res = await $fetch<{ employees: any[] }>('/api/employee/list', { query })
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
}
}
@@ -190,7 +234,7 @@ async function createEmployee() {
newEmployee.value = {
employeeName: '',
employeeEmail: '',
employeeNumber: '',
company: '(주)터보소프트',
employeePosition: '',
employeePhone: '',
joinDate: ''