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="card ">
<div class="card-body ">
<h2 class="card-title">직원 검색</h2>
<div class="flex align-top">
<div class="sch-form-wrap search">
<div class="input-group">
<div class="sch-input">
<input type="text" class="form-control" placeholder="직원명" v-model="searchReqDTO.searchText" @keyup.enter="searchUsers">
<button class="ico-sch" @click="searchUsers">
<SearchOutlined />
</button>
</div>
</div>
<div class="tbl-wrap table-scroll">
<table id="myTable" class="tbl data">
<!-- 동적으로 <th> 생성 -->
<thead>
<tr>
<th>부서 </th>
<th>이름</th>
<th>직급(직책)</th>
</tr>
</thead>
<!-- 동적으로 <td> 생성 -->
<tbody>
<tr v-for="(item, index) in selectedUsers" :key="index" @click="selectUser(item)" :class="{ 'inactive-user': item.useAt === 'N' }">
<td>{{ item.deptNm }}</td>
<td>{{ item.userNm }}</td>
<td>
<template v-if="item.rspofcNm">
{{ item.clsfNm }}({{ item.rspofcNm }})
</template>
<template v-else>
{{ item.clsfNm }}
</template>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<div class="name-box flex sb simple">
<div class="img-area" style="width: 170px;">
<div class="img"><img :src="selectedUser.file.filePath" :alt="selectedUser.file.fileNm">
</div>
</div>
<div class="row g-3 needs-validation " :class="{ 'was-validated': formSubmitted }"
@submit.prevent="handleRegister" novalidate>
<div class="col-12">
<label for="yourName" class="form-label">아이디</label>
<input v-model="name" type="text" name="name" class="form-control" required readonly
placeholder="admin">
</div>
<div class="col-12 ">
<div class="col-12 border-x">
<label for="userNm" class="form-label ">이름<p class="require"><img :src="require" alt=""></p>
</label>
<input v-model="selectedUser.userNm" type="text" name="username" class="form-control" required
readonly>
</div>
<div class="col-12 border-x">
<label for="deptNm" class="form-label">부서</label>
<input v-model="selectedUser.deptNm" type="text" name="password" class="form-control" required
readonly placeholder="주식회사 테이큰 소프트">
</div>
</div>
<div class="col-12 border-x">
<div class="col-12 border-x">
<label for="clsfNm" class="form-label">직급</label>
<input v-model="selectedUser.clsfNm" type="text" name="username" class="form-control" required
readonly>
</div>
<div class="col-12 border-x">
<label for="rspofcNm" class="form-label">직책</label>
<input v-model="selectedUser.rspofcNm" type="password" name="password" class="form-control" required
readonly>
</div>
</div>
</div>
</div>
<div class="row g-3 needs-validation detail" :class="{ 'was-validated': formSubmitted }"
@submit.prevent="handleRegister" novalidate>
<div class="col-12">
<label for="mbtlnum" class="form-label">연락처</label>
<input v-model="selectedUser.mbtlnum" type="text" name="name" class="form-control" required readonly
placeholder="admin">
</div>
<div class="col-12">
<label for="brthdy" class="form-label">생년월일</label>
<input v-model="selectedUser.brthdy" type="text" name="name" class="form-control" required readonly
placeholder="admin">
</div>
<div class="col-12 border-x">
<label for="encpn" class="form-label">입사일</label>
<input v-model="selectedUser.encpn" type="text" name="name" class="form-control" required readonly
placeholder="admin">
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import GoogleCalendar from "../../../component/GoogleCalendar.vue"
import { SearchOutlined } from '@ant-design/icons-vue';
import { findUsersProc } from "../../../../resources/api/user"
export default {
data() {
return {
photoicon: "/client/resources/img/photo_icon.png",
img1: "/client/resources/img/img.png",
icon1: "/client/resources/img/icon.png",
dateicon: "/client/resources/img/date.png",
startbtn: "/client/resources/img/start.png",
stopbtn: "/client/resources/img/stop.png",
moreicon: "/client/resources/img/more.png",
selectedUsers: [],
selectedUser: {
file: {
fileNm: "기본이미지",
filePath: "/client/resources/img/photo_icon.png",
},
loginId: null,
userNm: null,
deptNm: null,
clsfNm: null,
rspofcNm: null,
mbtlnum: null,
brthdy: null,
encpn: null,
},
searchReqDTO: {
searchType: "nm",
searchText: null,
},
}
},
components: {
SearchOutlined, findUsersProc
},
methods: {
//사용자 정보 전체 조회
async searchUsers() {
try {
const response = await findUsersProc(this.searchReqDTO);
if (response.status === 200) {
this.selectedUsers = response.data.data.users; // API 응답에서 카테고리 목록을 가져옴
console.log("user~~~~~!", this.selectedUsers);
}
} catch (error) {
console.error("검색 중 오류 발생:", error);
}
},
selectUser(item) {
this.selectedUser = {
file: { // file 객체도 함께 초기화
fileNm: "기본이미지",
filePath: this.photoicon,
},
loginId: item.loginId,
userNm: item.userNm,
deptNm: item.deptNm,
clsfNm: item.clsfNm,
rspofcNm: item.rspofcNm,
mbtlnum: item.mbtlnum,
brthdy: item.brthdy,
encpn: item.encpn,
};
// 썸네일 정보가 있으면 업데이트
if (item.thumbnail && Object.keys(item.thumbnail).length > 0) {
this.selectedUser.file.fileNm = item.thumbnail.fileNm; // thumbnail -> item.thumbnail
this.selectedUser.file.filePath = item.thumbnail.filePath; // thumbnail -> item.thumbnail
}
}
},
watch: {
},
computed: {
},
mounted() {
this.searchUsers();
}
}
</script>
<style scoped>
tr {
cursor: pointer;
}
.inactive-user {
color: #999999 !important; /* 회색 텍스트 */
}
.inactive-user td {
color: #999999 !important; /* 모든 td 요소를 회색으로 */
}
</style>