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="wrap">
<div class="tab-wrap">
<ul>
<li>
<button class="tab active">사용자 관리</button>
</li>
<li>
<button @click="accessLogPage()" class="tab">접속기록 조회</button>
</li>
</ul>
</div>
<div class="board-wrap">
<div>
<h2 class="page-title">사용자 관리</h2>
</div>
<hr class="margin">
<div class="search-wrap clear-fix">
<div class="float-left">
<select v-model="userListSearch.authorFilter" @change="userSelectList">
<option value="null" disabled>권한필터</option>
<option value="시청관리자">시청관리자</option>
<option value="지자체관리자">지자체관리자</option>
</select>
</div>
<div class="float-right flex gap">
<label>등록일자</label>
<input type="date" value-format="yyyyMMdd" v-model="userListSearch.startDate"/>
<span> ~ </span>
<input type="date" value-format="yyyyMMdd" v-model="userListSearch.endDate"/>
<select v-model="userListSearch.searchType">
<option value="null" disabled>검색조건</option>
<option value="user_id">ID</option>
<option value="user_nm">이름</option>
<option value="dong_cd">관리구역</option>
</select>
<input type="search" placeholder="검색어를 입력 해주세요." v-model="userListSearch.searchText" @keyup.enter="userSelectList"/>
<button type="button" class="green-btn" @click="userSelectList">검색</button>
</div>
</div>
<div>
<table>
<colgroup>
<col style="width: 5%;">
<col style="width: 15%;">
<col style="width: 15%;">
<col style="width: 15%;">
<col style="width: 15%;">
<col style="width: 10%;">
<col style="width: 15%;">
<col style="width: 10%;">
</colgroup>
<thead>
<tr>
<th>No</th>
<th>ID</th>
<th>이름</th>
<th>권한</th>
<th>전화번호</th>
<th>관리구역</th>
<th>등록일자</th>
<th>비고</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, idx) in userList" :key="idx" @click="userSelectOnePage(item)">
<td data-title="NO">{{ idx + 1 }}</td>
<td data-title="ID">{{ item.user_id }}</td>
<td data-title="이름">{{ item.user_nm }}</td>
<td data-title="권한">{{ item.user_author }}</td>
<td data-title="전화번호">{{ HyphenMinus(item.user_telno) }}</td>
<td data-titel="관리구역">{{ item.dong_korn_nm }}</td>
<td data-titel="등록일자">{{ yyyymmdd(item.reg_dt) }}</td>
<td data-totel="비고">{{ item.rm }}</td>
</tr>
</tbody>
</table>
</div>
<div class="bottom-wrap">
<PaginationButton
v-model:currentPage="userListSearch.currentPage"
:per-page="userListSearch.perPage" :total-count="userListCount" :max-range="5"
:click="userSelectList" />
<div class="btn-wrap">
<button @click="userInsertPage" class="btn-2 green-btn">등록</button>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
import PaginationButton from '../../component/pagination/PaginationButton.vue';
import COMMON_UTIL from '../../../resources/js/commonUtil.ts';
export default {
data: () => {
return {
userListSearch: {
currentPage: 1,
perPage: 10,
authorFilter: null,
searchType: null,
searchText: null,
startDate: null,
endDate: null
},
userListCount: 0,
userList: []
};
},
methods: {
//사용자 목록 조회
userSelectList: function () {
const vm = this;
axios({
url: '/user/userSelectList.json',
method: 'post',
headers:{
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.userListSearch
}).then(function(response) {
console.log("userSelectList - response : ", response.data);
vm.userListCount = response.data.userListCount;
vm.userList = response.data.userList;
}).catch(function (error) {
console.log("userSelectList - error : ", error);
alert('사용자 목록 조회 오류, 관리자에게 문의해주세요.');
})
},
// 전화번호 '-' 추가 후 출력
HyphenMinus: function (telno) {
return COMMON_UTIL.HyphenMinus(telno);
},
//날짜 시,분,초 자르기
yyyymmdd: function (date) {
return COMMON_UTIL.yyyymmdd(date);
},
//접속기록조회 페이지 이동
accessLogPage: function () {
this.$router.push({ path: '/AccessRecord.page'});
},
//사용자 상세조회 페이지 이동
userSelectOnePage: function(user) {
this.$router.push({ path: '/UserModifyForm.page', query: {'user_id':user.user_id}});
},
//사용자 등록 페이지 이동
userInsertPage: function() {
this.$router.push({path: '/UserAddForm.page'});
}
},
watch: {},
computed: {},
components: {
'PaginationButton':PaginationButton,
},
mounted() {
console.log("UserManageMent Join");
this.userSelectList();
},
};
</script>
<style scoped>
.wrap {
width: 155rem;
margin: 100px auto;
}
.tab-wrap {
margin-bottom: 30px;
}
.tab-wrap ul {
display: flex;
gap: 2rem;
}
.tab {
display: inline-block;
width: 20rem;
height: 3rem;
line-height: 3rem;
text-align: center;
border-radius: 5px;
background: #fff;
color: #949292;
border: 1px solid #949292;
}
.tab.active {
background: #13833b;
color: #fff;
border-color: #13833b;
}
.search-wrap {
margin-bottom: 30px;
}
.search-wrap input,
.search-wrap select {
height: 22.5px;
border-radius: 3px;
border: 1px solid #949292;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.clear-fix::after {
content: "";
display: block;
clear: both;
}
.search-wrap .float-right form>*:not(:last-child) {
margin-right: 1rem;
}
h2.page-title {
font-size: 24px;
}
hr.margin {
margin: 30px 0;
}
table {
width: 100%;
text-align: center;
border-collapse: collapse;
}
th,
td {
border-left: none;
border-right: none;
}
table th {
padding: 15px 0;
color: #fff;
background-color: #13833b;
}
table td {
padding: 10px 0;
border-bottom: 1px solid #e5e5dd;
}
table tr:nth-child(odd) {
background-color: #f7f6f6;
}
table tr:nth-child(even) {
background-color: #fdfdf2;
}
.bottom-wrap {
position: relative;
padding: 1rem 0;
}
.pg-wrap {
text-align: center;
}
.pg-item {
display: inline-block;
padding: 10px;
color: #949292;
}
.pg-item.prev,
.pg-item.next,
.pg-item.active {
color: #13833b;
}
.btn-2 {
display: inline-block;
padding: 0.3rem 2rem;
font-size: 13.333px;
}
.btn-wrap {
position: absolute;
right: 0;
top: 1.5em;
z-index: 10;
}
</style>