364 lines
19 KiB
HTML
364 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<!-- 관련 Namespace 선언 및 layout:decorate 추가 -->
|
|
<html lang="en"
|
|
xmlns:th="http://www.thymeleaf.org"
|
|
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
|
layout:decorate="layout">
|
|
<head>
|
|
<!-- layout.html 에 들어간 head 부분을 제외하고 개별 파일에만 적용되는 head 부분 추가 -->
|
|
<title>출장 등록</title>
|
|
|
|
<!-- 필요하다면 개별 파일에 사용될 css/js 선언 -->
|
|
|
|
<link rel="stylesheet" th:href="@{/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css}">
|
|
<link rel="stylesheet" th:href="@{/plugins/datatables-responsive/css/responsive.bootstrap4.min.css}">
|
|
<link rel="stylesheet" th:href="@{/plugins/datatables-buttons/css/buttons.bootstrap4.min.css}">
|
|
|
|
<style>
|
|
.table-form th {
|
|
background-color: #f1f1f1;
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
padding: 10px;
|
|
width: 15%;
|
|
}
|
|
|
|
.table-form td {
|
|
padding: 10px;
|
|
}
|
|
|
|
.card-header {
|
|
background-color: #ffffff;
|
|
font-weight: bold;
|
|
border-top: 2px solid #009fe3;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body layout:fragment="body">
|
|
|
|
<div class="wrapper">
|
|
<div th:replace="~{fragments/top_nav :: topFragment}"/>
|
|
|
|
<!-- Main Sidebar Container -->
|
|
<aside class="main-sidebar sidebar-dark-primary elevation-4"
|
|
th:insert="~{fragments/mainsidebar :: sidebarFragment}">
|
|
</aside>
|
|
|
|
<!-- Content Wrapper. Contains page content -->
|
|
<div class="content-wrapper">
|
|
<!-- Content Header (Page header) -->
|
|
<div class="content-header">
|
|
<div class="container-fluid">
|
|
<div class="row mb-2">
|
|
<div class="col-sm-6">
|
|
<h1 class="m-0">출장등록</h1>
|
|
</div><!-- /.col -->
|
|
<div class="col-sm-6">
|
|
<ol class="breadcrumb float-sm-right">
|
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
<li class="breadcrumb-item active">출장</li>
|
|
</ol>
|
|
</div><!-- /.col -->
|
|
</div><!-- /.row -->
|
|
</div><!-- /.container-fluid -->
|
|
</div>
|
|
<!-- /.content-header -->
|
|
<!-- Main content -->
|
|
<section class="content">
|
|
<div class="container-fluid">
|
|
<!-- <h3>출장 등록</h3>-->
|
|
|
|
<!-- 출장신청 영역 -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
출장정보
|
|
</div>
|
|
<div class="card-body">
|
|
<table class="table table-bordered table-form" style="table-layout: fixed;">
|
|
<tbody>
|
|
<tr>
|
|
<th>출장구분</th>
|
|
<td>
|
|
<select class="form-control" id="tripType" name="tripType">
|
|
<option value="" th:selected>-- 선택 --</option>
|
|
<option th:each="code : ${@TCodeUtils.getCodeList('TRIP_TYPE')}"
|
|
th:value="${code.codeId}"
|
|
th:text="${code.codeName}">
|
|
</option>
|
|
</select>
|
|
</td>
|
|
<th>출장지</th>
|
|
<td>
|
|
<select class="form-control d-inline" style="width: 20%;" id="tripLocation" name="tripLocation">
|
|
<option value="" th:selected>-- 지역 --</option>
|
|
<option th:each="code : ${@TCodeUtils.getCodeList('TRIP_LOCATION')}"
|
|
th:value="${code.codeId}"
|
|
th:text="${code.codeName}">
|
|
</option>
|
|
</select>
|
|
|
|
<input type="text" id="locationTxt" class="form-control d-inline" style="width: 70%;" placeholder="목적지">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>출장목적</th>
|
|
<td><input type="text" id="purpose" class="form-control"></td>
|
|
<th>이동사항</th>
|
|
<td>
|
|
<select class="form-control" id="tripMove" name="tripMove">
|
|
<option value="" th:selected>-- 선택 --</option>
|
|
<option th:each="code : ${@TCodeUtils.getCodeList('TRIP_MOVE')}"
|
|
th:value="${code.codeId}"
|
|
th:text="${code.codeName}">
|
|
</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>출장일자</th>
|
|
<td>
|
|
<input type="date" id="tripDate" class="form-control">
|
|
</td>
|
|
<th>시간</th>
|
|
<td>
|
|
<div class="d-flex">
|
|
<!-- 시작 시간 -->
|
|
<div class="input-group date" id="startTimePicker" data-target-input="nearest" style="margin-right: 5px;">
|
|
<input type="text"
|
|
class="form-control datetimepicker-input"
|
|
data-target="#startTimePicker"
|
|
data-toggle="datetimepicker" />
|
|
<div class="input-group-append" data-target="#startTimePicker" data-toggle="datetimepicker">
|
|
<div class="input-group-text"><i class="far fa-clock"></i></div>
|
|
</div>
|
|
</div>
|
|
<span class="align-self-center mx-2">~</span>
|
|
<!-- 종료 시간 -->
|
|
<div class="input-group date" id="endTimePicker" data-target-input="nearest">
|
|
<input type="text"
|
|
class="form-control datetimepicker-input"
|
|
data-target="#endTimePicker"
|
|
data-toggle="datetimepicker" />
|
|
<div class="input-group-append" data-target="#endTimePicker" data-toggle="datetimepicker">
|
|
<div class="input-group-text"><i class="far fa-clock"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
|
|
<!-- 출장 인원 영역 -->
|
|
<div class="card mt-4">
|
|
<div class="card-header">
|
|
출장 인원
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<table class="table table-bordered table-form mb-0">
|
|
<thead>
|
|
<tr class="text-center bg-light">
|
|
<th style="width: 20%;">이름</th>
|
|
<th style="width: 25%;">부서명</th>
|
|
<th style="width: 25%;">연락처</th>
|
|
<th style="width: 15%;" class="text-center">
|
|
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#userSearchModal">
|
|
<i class="fas fa-user-plus"></i> 인원 추가
|
|
</button>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tripMemberTbody">
|
|
<tr th:data-uniqid="${loginUser.getUniqId()}">
|
|
<td th:text="${loginUser.getUserName()}"/>
|
|
<td th:text="${@TCodeUtils.getCodeName('DEPT', loginUser.getDeptCd())}"/>
|
|
<td th:text="${loginUser.getMobilePhone()}"/>
|
|
<td class="text-center">기안자</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 결제 라인 영역 -->
|
|
<div class="card mt-4">
|
|
<div class="card-header">
|
|
결제라인
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<table class="table table-bordered table-form mb-0">
|
|
<thead>
|
|
<tr class="text-center bg-light">
|
|
<th style="width: 20%;">결재 단계</th>
|
|
<th style="width: 20%;">이름</th>
|
|
<th style="width: 25%;">부서명</th>
|
|
<th style="width: 25%;">연락처</th>
|
|
<th style="width: 10%;" class="text-center">관리</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="approvalLineTbody">
|
|
<tr>
|
|
<td class="text-center align-middle">검토 1</td>
|
|
<td colspan="4">
|
|
<button type="button" class="btn btn-outline-info btn-sm" onclick="openApprovalModal('approval1')">
|
|
<i class="fas fa-user-plus"></i> 사용자 지정
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-center align-middle">검토 2</td>
|
|
<td colspan="4">
|
|
<button type="button" class="btn btn-outline-info btn-sm" onclick="openApprovalModal('approval2')">
|
|
<i class="fas fa-user-plus"></i> 사용자 지정
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-center align-middle">결제</td>
|
|
<td colspan="4">
|
|
<button type="button" class="btn btn-outline-info btn-sm" onclick="openApprovalModal('approval3')">
|
|
<i class="fas fa-user-plus"></i> 사용자 지정
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<input type="hidden" id="approver1" name="approver1">
|
|
<input type="hidden" id="approver2" name="approver2">
|
|
<input type="hidden" id="approver3" name="approver3">
|
|
</div>
|
|
<div class="text-right mt-2">
|
|
<!-- 등록 버튼 -->
|
|
<button type="submit" class="btn btn-primary btn-sm" onclick="collectAndSubmitTripData()">
|
|
<i class="fas fa-save"></i> 등록
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
<!-- /Main content -->
|
|
|
|
</div>
|
|
|
|
<!-- 사용자 검색 모달 -->
|
|
<div class="modal fade" id="approvalSearchModal" tabindex="-1" role="dialog" aria-labelledby="userSearchModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-info">
|
|
<h5 class="modal-title text-white" id="approvalSearchModalLabel">사용자 검색</h5>
|
|
<button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<!-- 검색 영역 -->
|
|
<div class="form-inline mb-3">
|
|
<label class="mr-2">이름 검색</label>
|
|
<input type="text" class="form-control mr-2" auto id="approvalSearchKeyword" placeholder="검색어 입력" autocomplete="off">
|
|
<button type="button" class="btn btn-info btn-sm" onclick="searchUser()">검색</button>
|
|
</div>
|
|
|
|
<!-- 결과 테이블 -->
|
|
<div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
|
|
<table class="table table-hover table-bordered table-sm text-center">
|
|
<thead class="thead-light">
|
|
<tr>
|
|
<th>이름</th>
|
|
<th>부서</th>
|
|
<th>직급</th>
|
|
<th>추가</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="approvalSearchResult">
|
|
<!-- 검색 결과 동적 렌더링 -->
|
|
<!-- 예시 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">닫기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 사용자 검색 모달 -->
|
|
<div class="modal fade" id="userSearchModal" tabindex="-1" role="dialog" aria-labelledby="userSearchModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-info">
|
|
<h5 class="modal-title text-white" id="userSearchModalLabel">사용자 검색</h5>
|
|
<button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<!-- 검색 영역 -->
|
|
<div class="form-inline mb-3">
|
|
<label class="mr-2">이름 검색</label>
|
|
<input type="text" class="form-control mr-2" auto id="userSearchKeyword" placeholder="검색어 입력" autocomplete="off">
|
|
<button type="button" class="btn btn-info btn-sm" onclick="searchUser()">검색</button>
|
|
</div>
|
|
|
|
<!-- 결과 테이블 -->
|
|
<div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
|
|
<table class="table table-hover table-bordered table-sm text-center">
|
|
<thead class="thead-light">
|
|
<tr>
|
|
<th>이름</th>
|
|
<th>부서</th>
|
|
<th>직급</th>
|
|
<th>추가</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="userSearchResult">
|
|
<!-- 검색 결과 동적 렌더링 -->
|
|
<!-- 예시 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">닫기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- /.content-wrapper -->
|
|
<footer class="main-footer"
|
|
th:insert="~{fragments/footer :: footerFragment}">
|
|
</footer>
|
|
|
|
<!-- Control Sidebar -->
|
|
<aside class="control-sidebar control-sidebar-dark">
|
|
<!-- Control sidebar content goes here -->
|
|
</aside>
|
|
<!-- /.control-sidebar -->
|
|
</div>
|
|
<!-- ./wrapper -->
|
|
|
|
<script th:src="@{/cmn/js/bizTrip/init.js}"></script>
|
|
<script th:src="@{/cmn/js/bizTrip/event.js}"></script>
|
|
<script th:src="@{/cmn/js/bizTrip/service.js}"></script>
|
|
<script th:src="@{/cmn/js/bizTrip/validation.js}"></script>
|
|
</body>
|
|
|
|
|
|
|
|
</html>
|