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="board-wrap">
<div>
<h2 class="page-title">횡단보도 유지보수 담당자 관리</h2>
</div>
<hr class="margin">
<div class="search-wrap clear-fix">
<div class="float-right flex gap">
<label>등록일자</label>
<input type="date" value-format="yyyyMMdd" v-model="managerListSearch.startDate"/>
<span> ~ </span>
<input type="date" value-format="yyyyMMdd" v-model="managerListSearch.endDate"/>
<select v-model="managerListSearch.searchType">
<option value="null" disabled>검색조건</option>
<option value="mngr_nm">이름</option>
<option value="mngr_ogdp_info">소속정보</option>
</select>
<input type="search" placeholder="검색어를 입력 해주세요." v-model="managerListSearch.searchText" @keyup.enter="managerSelectList"/>
<button class="btn-2 green-btn" @click="managerSelectList">검색</button>
</div>
</div>
<div>
<table>
<colgroup>
<col style="width: 10%;">
<col style="width: 20%;">
<col style="width: 20%;">
<col style="width: 30%;">
<col style="width: 20%;">
</colgroup>
<thead>
<tr>
<th>No</th>
<th>이름</th>
<th>전화번호</th>
<th>이메일</th>
<th>소속정보</th>
<th>등록일자</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, idx) in managerList" :key="idx" @click="managerSelectOnePage(item)">
<td data-title="NO">{{ item.mntnce_mngr_id }}</td>
<td data-title="이름">{{ item.mngr_nm }}</td>
<td data-title="전화번호">{{ HyphenMinus(item.mngr_telno) }}</td>
<td data-title="이메일">{{ item.mngr_eml }}</td>
<td data-title="소속정보">{{ item.mngr_ogdp_info }}</td>
<td data-title="등록일자">{{ yyyymmdd(item.reg_dt) }}</td>
</tr>
</tbody>
</table>
</div>
<div class="bottom-wrap">
<PaginationButton
v-model:currentPage="managerListSearch.currentPage"
:per-page="managerListSearch.perPage" :total-count="managerListCount" :max-range="5"
:click="managerSelectList" />
<div class="btn-wrap">
<button @click="managerInsertPage" 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: function () {
return {
managerListSearch: {
currentPage: 1,
perPage: 10,
searchType: null,
searchText: null,
startDate: null,
endDate: null
},
managerListCount: 0,
managerList: [],
};
},
methods: {
//횡단보도 유지보수 관리자 목록 조회
managerSelectList: function () {
const vm = this;
axios({
url: '/managerSelectList.json',
method: 'post',
headers: {
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.managerListSearch
}).then(function (response) {
console.log("managerSelectList - response : ", response.data);
vm.managerListCount = response.data.managerListCount;
vm.managerList = response.data.managerList;
}).catch(function (error) {
console.log("managerSelectList - error : ", error);
alert('횡단보도 유지보수 관리자 목록 조회 오류, 관리자에게 문의해주세요.');
});
},
// 전화번호 '-' 추가 후 출력
HyphenMinus: function (telno) {
return COMMON_UTIL.HyphenMinus(telno);
},
//날짜 시,분,초 자르기
yyyymmdd: function (date) {
return COMMON_UTIL.yyyymmdd(date);
},
//횡단보도 유지보수 관리자 상세조회 페이지 이동
managerSelectOnePage: function (manager) {
this.$router.push({ path: '/ManagerModifyForm.page', query: {'mntnce_mngr_id':manager.mntnce_mngr_id}});
},
//횡단보도 유지보수 관리자 등록 페이지 이동
managerInsertPage: function() {
this.$router.push({ path: '/ManagerAddForm.page'});
},
},
watch: {},
computed: {},
components: {
'PaginationButton':PaginationButton,
},
mounted() {
console.log("Main4 mounted");
this.managerSelectList();
},
};
</script>
<style scoped>
.wrap {
width: 155rem;
margin: 100px auto;
}
.search-wrap {
margin-bottom: 30px;
}
.search-wrap input,
.search-wrap select {
height: 22.5px;
border-radius: 3px;
border: 1px solid #949292;
}
.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;
}
.btn-2 {
display: inline-block;
padding: 0.3rem 2rem;
font-size: 13.333px;
}
.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-wrap {
position: absolute;
right: 0;
top: 1.5em;
z-index: 10;
}
.btn-wrap button {
cursor: pointer;
}
</style>