File name
Commit message
Commit date
File name
Commit message
Commit date
2023-07-27
File name
Commit message
Commit date
2023-07-26
File name
Commit message
Commit date
2023-07-27
2023-07-27
<template>
<div class="wrap">
<div class="board-wrap">
<h2 style="color: #10833b" class="flex gap"><img src="../../../resources/images/bar.png" alt="">유지보수 담당자 관리</h2>
<div style="margin-left: 2rem;" class="m-b3">시스템 관리 > <em class="green2 lined">유지보수 담당자 관리</em> </div>
<!--
<div class="search-wrap clear-fix">
<div class="float-right flex gap">
<div class="flex gap date">
<label>등록일자</label>
<input
class="date-input"
type="date"
value-format="yyyyMMdd"
v-model="managerListSearch.startDate"
/>
<span> ~ </span>
<input
class="date-input"
type="date"
value-format="yyyyMMdd"
v-model="managerListSearch.endDate"
/>
</div>
<div class="flex gap search">
<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 style="width: 11rem;" class="btn-2 gr-btn" @click="managerSelectList">
검색
</button>
</div>
</div>
</div>
-->
<!-- 검색 -->
<div class="de_Search">
<table class="troubleTable">
<tbody>
<tr>
<th>등록일자</th>
<td colspan="3">
<input type="date" value-format="yyyyMMdd" v-model="managerListSearch.startDate"/>
<span style="margin: 0px 2%;"> ~ </span>
<input type="date" value-format="yyyyMMdd" v-model="managerListSearch.endDate" />
</td>
<th>검색</th>
<td colspan="3">
<select v-model="managerListSearch.searchType">
<option value="null" disabled>검색조건</option>
<option value="mngr_nm">이름</option>
<option value="mngr_ogdp_info">소속정보</option>
</select>
<input type="text" placeholder="검색어를 입력 해주세요." v-model="managerListSearch.searchText" @keyup.enter="managerSelectList" style="min-width: 50%;"/>
<button type="button" class="green-btn" style="margin-left: 5px;padding: 5px;width: 10rem; float: right;" @click="managerSelectList">검색</button>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="pc">
<colgroup>
<col style="width: 15%" />
<col style="width: 15%" />
<col style="width: 25%" />
<col style="width:15%" />
<col style="width: 10%" />
</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">{{ managerIdx - idx }}</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>
<table class="mobile">
<colgroup>
<col style="width: 10%" />
<col style="width: 20%" />
</colgroup>
<tbody
v-for="(item, idx) in managerList"
:key="idx"
@click="managerSelectOnePage(item)"
>
<tr>
<th>No</th>
<td data-title="NO">{{ managerIdx - idx }}</td>
</tr>
<tr>
<th>이름</th>
<td data-title="이름">{{ item.mngr_nm }}</td>
</tr>
<tr>
<th>전화번호</th>
<td data-title="전화번호">{{ HyphenMinus(item.mngr_telno) }}</td>
</tr>
<tr>
<th>이메일</th>
<td data-title="이메일">{{ item.mngr_eml }}</td>
</tr>
<tr>
<th>소속정보</th>
<td data-title="소속정보">
{{ item.mngr_ogdp_info }}
</td>
</tr>
<tr>
<th>등록일자</th>
<td data-titel="등록일자">{{ yyyymmdd(item.reg_dt) }}</td>
</tr>
<hr class="margin2 m-b" />
</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 gr-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: [],
managerIdx: 0
};
},
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;
vm.managerIdx = response.data.managerListCount-(vm.managerListSearch.currentPage-1)*response.data.managerList.length;
})
.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>
@media all and (max-width: 479px) {
.board-wrap {
padding: 0rem;
}
.form-wrap{width: -webkit-fill-available !important;}
.wrap{padding: 0 1rem;}
.date{margin: 0rem 0 1rem 0 !important;}
.search{width: 335px !important;}
.search input{width: 14rem;}
.search select{width: 9rem;}
}
.mobile{display: none;}
.date{margin-right: 3rem;}
.wrap {
width: 80%;
margin: 50px auto;
}
.wrap h2{font-size: 2.5rem;}
.search{width: 350px;}
.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>