File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h2 class="card-title">직원관리</h2>
<div class="sch-form-wrap">
<div class="input-group">
<select name="" id="" class="form-select">
<option value="">부서</option>
</select>
<select class="form-select" v-model="selectedClsf">
<option value="">직급</option>
<option v-for="jobRank in clsfCode" :key="jobRank.codeNm" :value="jobRank">
{{ jobRank.codeNm }}
</option>
</select>
<select class="form-select" v-model="selectedRepofc">
<option value="">직책</option>
<option v-for="position in rspofcCode" :key="position.codeNm" :value="position">
{{ position.codeNm }}
</option>
</select>
<div class="sch-input">
<input type="text" class="form-control" v-model="userSearchReqDTO.searchText" @keyup.enter="searchUsers"
placeholder="직원명">
<button class="ico-sch" @click="searchUsers">
<SearchOutlined />
</button>
</div>
</div>
</div>
<!-- Table -->
<div class="tbl-wrap">
<table id="myTable" class="tbl data">
<!-- 동적으로 <th> 생성 -->
<thead>
<tr>
<th>부서 </th>
<th>직급</th>
<th>직책</th>
<th>아이디</th>
<th>이름</th>
<th>입사일</th>
<th>비밀번호 초기화</th>
</tr>
</thead>
<!-- 동적으로 <td> 생성 -->
<tbody>
<tr v-for="(item, index) in selectedUsers" :key="index" @click="goToDetailPage(item)" :class="{ 'inactive-user': item.useAt === 'N' }">
<td>{{ item.deptNm }}</td>
<td>{{ item.clsfNm }}</td>
<td>{{ item.rspofcNm }}</td>
<td>{{ item.loginId }}</td>
<td>{{ item.userNm }}</td>
<td>{{ item.encpn }}</td>
<td>
<button class="btn tertiary xsm" @click.stop="resetPassword(item)">초기화</button>
</td>
</tr>
</tbody>
</table>
</div>
<Pagination :search="userSearchReqDTO" @onChange="fnChangeCurrentPage" />
<div class="buttons">
<button class="btn primary" type="submit" @click="goToPage('등록')">등록</button>
</div>
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
import { findUsersProc, updatePassword } from "../../../../resources/api/user"
import Pagination from '../../../component/Pagination.vue';
import { findCodesProc } from '../../../../resources/api/code';
export default {
data() {
return {
showOptions: false,
currentPage: 1,
totalPages: 3,
photoicon: "/client/resources/img/photo_icon.png",
selectedUsers: [],
// 코드 조회
serachRequest: {
searchType: "upperCd",
searchText: null,
},
// 직급코드
clsfCode: [],
// 직책코드
rspofcCode: [],
selectedClsf: '',
selectedRepofc: '',
userSearchReqDTO: {
searchType: "all", // 'id' 또는 'nm' 등 선택
searchText: null, // 검색어 입력
userSttus: null, // 회원상태 선택 (0,1,2,3)
useAt: null, // 사용여부 선택 (Y, N)
dept: null, // 부서 선택
clsf: null, // 직급 선택
rspofc: null, // 직책 선택
currentPage: 1,
},
updatePasswordDTO: {
oldPassword:"Ts0511@@1",
newPassword:"Ts0511@@1",
resetAt: true,
},
};
},
components: {
SearchOutlined, Pagination, findCodesProc, updatePassword
},
computed: {
},
created() {
this.clsfTypeCodes(); // 직급 종류 조회
this.rspofcTypeCodes(); // 직책 종류 조회
},
methods: {
// 페이지 이동
fnChangeCurrentPage(currentPage) {
this.userSearchReqDTO.currentPage = Number(currentPage);
console.log(this.userSearchReqDTO);
this.$nextTick(() => {
this.searchUsers();
});
},
//사용자 정보 전체 조회
async searchUsers() {
try {
const response = await findUsersProc(this.userSearchReqDTO);
if (response.status === 200) {
this.selectedUsers = response.data.data.users; // API 응답에서 카테고리 목록을 가져옴
console.log("user 정보 ",this.selectedUsers);
}
} catch (error) {
console.error("검색 중 오류 발생:", error);
}
},
// 공통코드 직급
async clsfTypeCodes() {
this.clsfCode = []; // 초기화
this.serachRequest.searchType = "UPPER_CODE"
this.serachRequest.searchText = "clsf_code"; // 공통코드 분류코드 (직급)
try {
const response = await findCodesProc(this.serachRequest);
if (response.status === 200) {
this.clsfCode = response.data.data.codes; // API 응답에서 카테고리 목록을 가져옴
}
} catch (error) {
console.error("검색 중 오류 발생:", error);
}
},
// 공통코드 직책
async rspofcTypeCodes() {
this.clsfCode = []; // 초기화
this.serachRequest.searchType = "UPPER_CODE"
this.serachRequest.searchText = "rspofc_code"; // 공통코드 분류코드 (직급)
try {
const response = await findCodesProc(this.serachRequest);
if (response.status === 200) {
this.rspofcCode = response.data.data.codes; // API 응답에서 카테고리 목록을 가져옴
}
} catch (error) {
console.error("검색 중 오류 발생:", error);
}
},
async resetPassword(user) {
try {
const response = await updatePassword(user.userId, this.updatePasswordDTO);
if (response.status === 200) {
console.log("비밀번호 초기화");
}
} catch (error) {
console.error("검색 중 오류 발생:", error);
}
},
goToDetailPage(item) {
// item.id 또는 다른 식별자를 사용하여 URL을 구성할 수 있습니다.
this.$router.push({ name: 'HrmDetail', query: { id: item.userId } });
},
goToPage(type) {
if (type === '등록') {
this.$router.push({ name: 'HrmInsert' });
}
},
},
watch: {
// 직급 선택 감지 -> requestDTO.clsf 업데이트
selectedClsf(newVal) {
this.userSearchReqDTO.clsf = newVal ? newVal.code : null; // 선택된 직급 객체의 'code'를 requestDTO.clsf에 할당
},
// 직책 선택 감지 -> requestDTO.rspofc 업데이트
selectedRepofc(newVal) {
this.userSearchReqDTO.rspofc = newVal ? newVal.code : null; // 선택된 직책 객체의 'code'를 requestDTO.rspofc에 할당
},
},
mounted() {
this.searchUsers();
this.clsfTypeCodes();
this.rspofcTypeCodes();
},
};
</script>
<style scoped>
tr {
cursor: pointer;
}
.inactive-user {
color: #999999 !important; /* 회색 텍스트 */
}
.inactive-user td {
color: #999999 !important; /* 모든 td 요소를 회색으로 */
}
</style>