추가
This commit is contained in:
@@ -14,7 +14,7 @@
|
||||
<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>사원 정보
|
||||
<i class="bi bi-person me-2"></i>직원 정보
|
||||
</h5>
|
||||
<span :class="employee.isActive ? 'badge bg-success' : 'badge bg-secondary'">
|
||||
{{ employee.isActive ? '재직' : '퇴직' }}
|
||||
@@ -31,19 +31,33 @@
|
||||
<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" />
|
||||
<label class="form-label">소속사</label>
|
||||
<select class="form-select" v-model="form.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="form.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">
|
||||
@@ -114,7 +128,7 @@ const isSubmitting = ref(false)
|
||||
const form = ref({
|
||||
employeeName: '',
|
||||
employeeEmail: '',
|
||||
employeeNumber: '',
|
||||
company: '(주)터보소프트',
|
||||
employeePosition: '',
|
||||
employeePhone: '',
|
||||
joinDate: '',
|
||||
@@ -141,14 +155,14 @@ async function loadEmployee() {
|
||||
form.value = {
|
||||
employeeName: e.employeeName || '',
|
||||
employeeEmail: e.employeeEmail || '',
|
||||
employeeNumber: e.employeeNumber || '',
|
||||
company: e.company || '(주)터보소프트',
|
||||
employeePosition: e.employeePosition || '',
|
||||
employeePhone: e.employeePhone || '',
|
||||
joinDate: e.joinDate ? e.joinDate.split('T')[0] : '',
|
||||
isActive: e.isActive
|
||||
}
|
||||
} catch (e: any) {
|
||||
alert('사원 정보를 불러오는데 실패했습니다.')
|
||||
alert('직원 정보를 불러오는데 실패했습니다.')
|
||||
router.push('/employee')
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
|
||||
@@ -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: ''
|
||||
|
||||
Reference in New Issue
Block a user