과금 페이지, 스타일 추가
This commit is contained in:
현성필
@@ -11910,6 +11910,258 @@ select.form-control {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
background: #FFFFFF;
|
||||
padding: 24px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
}
|
||||
|
||||
.searchInfo {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.searchBox {
|
||||
background: #F8FAFC;
|
||||
padding: 24px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.searchBox.row-two {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.searchBox label {
|
||||
font-weight: 500;
|
||||
color: #64748B;
|
||||
min-width: 80px;
|
||||
}
|
||||
.searchBox .form-control {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #E2E8F0;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btnBox {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.voffset3 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.color_red {
|
||||
color: #FF6B6B;
|
||||
}
|
||||
|
||||
.color_blue {
|
||||
color: #4B9BFF;
|
||||
}
|
||||
|
||||
.color_darkRed {
|
||||
color: #8b0000;
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
.table th {
|
||||
background: #F8FAFC;
|
||||
font-weight: 500;
|
||||
color: #1A1A2E;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
border: 1px solid #E2E8F0;
|
||||
}
|
||||
.table td {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
border: 1px solid #E2E8F0;
|
||||
}
|
||||
|
||||
.table-bordered {
|
||||
border: 1px solid #E2E8F0;
|
||||
}
|
||||
.table-bordered th,
|
||||
.table-bordered td {
|
||||
border: 1px solid #E2E8F0;
|
||||
}
|
||||
|
||||
.border-type {
|
||||
border: 2px solid #E2E8F0;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.bg-warning {
|
||||
background-color: #fff3cd !important;
|
||||
}
|
||||
|
||||
.glyphicon-search::before {
|
||||
content: "🔍";
|
||||
}
|
||||
|
||||
.info-table {
|
||||
border-top: 10px solid #64748B;
|
||||
width: 100%;
|
||||
border-bottom: 2px solid #1A1A2E;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.info-table th {
|
||||
text-align: left;
|
||||
padding: 16px 24px;
|
||||
font-weight: 600;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
.info-table td {
|
||||
padding: 16px 24px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.commission-table {
|
||||
width: 100%;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.commission-table th,
|
||||
.commission-table td {
|
||||
border: 1px solid #999 !important;
|
||||
padding: 16px 24px;
|
||||
}
|
||||
.commission-table td {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.bg_ygreen {
|
||||
background-color: aquamarine;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bg_skyBlue {
|
||||
background-color: skyblue;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bg_yellow {
|
||||
background-color: yellow;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media print {
|
||||
body {
|
||||
padding: 0;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
.searchBox,
|
||||
.searchInfo,
|
||||
#printButton,
|
||||
#backButton,
|
||||
#printBtn {
|
||||
display: none !important;
|
||||
}
|
||||
@page {
|
||||
size: auto;
|
||||
margin: 0 0cm;
|
||||
}
|
||||
html {
|
||||
margin: 0 0cm;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.wrap {
|
||||
padding: 16px;
|
||||
}
|
||||
.searchBox {
|
||||
padding: 16px;
|
||||
}
|
||||
.searchBox.row-two {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
.form-inline {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.form-inline label {
|
||||
min-width: auto;
|
||||
}
|
||||
.form-inline .form-control {
|
||||
width: 100%;
|
||||
}
|
||||
.btnBox {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.btnBox .btn {
|
||||
width: 100%;
|
||||
}
|
||||
.table-responsive {
|
||||
overflow-x: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
.commission-print-page {
|
||||
font-size: 12px;
|
||||
}
|
||||
.commission-print-page body {
|
||||
width: 600px;
|
||||
margin: 90px;
|
||||
}
|
||||
.commission-print-page table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.commission-print-page table th,
|
||||
.commission-print-page table td {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.commission-print-page table tr {
|
||||
font-size: 12px;
|
||||
}
|
||||
.commission-print-page h1 {
|
||||
text-align: center;
|
||||
}
|
||||
.commission-print-page h1 img {
|
||||
width: 300px;
|
||||
}
|
||||
.commission-print-page h2 {
|
||||
margin-top: 40px;
|
||||
}
|
||||
.commission-print-page p {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
|
||||
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -50,6 +50,7 @@
|
||||
@import 'pages/inquiry';
|
||||
@import 'pages/org-register';
|
||||
@import 'pages/user-management';
|
||||
@import 'pages/commission';
|
||||
|
||||
// 6. Themes
|
||||
@import 'themes/dark';
|
||||
|
||||
@@ -0,0 +1,467 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org"
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout/kjbank_base_layout}">
|
||||
<head>
|
||||
<title>수수료 관리</title>
|
||||
</head>
|
||||
<body>
|
||||
<section layout:fragment="contentFragment" class="content">
|
||||
<div class="row wrap" style="max-width: 1400px; margin: 0 auto; padding: 20px;">
|
||||
<div class="col-md-12">
|
||||
<h2><strong>기관 수수료 관리</strong></h2>
|
||||
<p class="searchInfo">
|
||||
<button class="btn btn-default" onclick="downloadExcel()" style="display:none;">다운로드</button>
|
||||
</p>
|
||||
<p class="searchInfo">
|
||||
<button id="printBtn" class="btn btn-default" style="margin-left: 5px; display:none;" onclick="printCommission()">
|
||||
<span>청구서 출력</span>
|
||||
</button>
|
||||
</p>
|
||||
<div class="searchBox row-two" style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 20px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;">
|
||||
<span class="form-inline" style="display: flex; align-items: center; gap: 10px;">
|
||||
<label for="providers" style="font-weight: 500; min-width: 80px;">제공기관</label>
|
||||
<select id="providers" class="form-control">
|
||||
<option value="">- 선택 -</option>
|
||||
<option value="1" selected>광주은행</option>
|
||||
<option value="2">한국은행</option>
|
||||
</select>
|
||||
</span>
|
||||
<span class="form-inline" style="display: flex; align-items: center; gap: 10px;">
|
||||
<label for="organizations" style="font-weight: 500; min-width: 80px;">이용기관</label>
|
||||
<select id="organizations" class="form-control">
|
||||
<option value="">- 선택 -</option>
|
||||
<option value="1" selected th:text="${organization?.orgName ?: 'ABC 핀테크'}"></option>
|
||||
</select>
|
||||
</span>
|
||||
<span class="form-inline" style="display: flex; align-items: center; gap: 10px;">
|
||||
<label for="forYear" style="font-weight: 500; min-width: 80px;">조회기간</label>
|
||||
<select id="forYear" class="form-control">
|
||||
<option value="">- 선택 -</option>
|
||||
<option value="2023">2023</option>
|
||||
<option value="2024" selected>2024</option>
|
||||
</select> <span>년</span>
|
||||
<select id="forMonth" class="form-control">
|
||||
<option value="">- 선택 -</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
<option value="10">10</option>
|
||||
<option value="11">11</option>
|
||||
<option value="12">12</option>
|
||||
</select> <span>월</span>
|
||||
</span>
|
||||
<span class="btnBox" style="margin-left: auto;">
|
||||
<button type="button" class="btn btn-primary" onclick="loadData()">
|
||||
<span class="glyphicon glyphicon-search"></span> <span>조회</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<p class="voffset3" style="color: #dc3545; margin-top: 30px;">
|
||||
이용기관은 매월 1~5일 전월 수수료 조회 가능하며, 10일 확정금액으로 정산됩니다. <br/>
|
||||
금액이상시 담당자 연락 및 조정요청 하시기 바랍니다. (매월 1~5일 수수료 조회, 6~9일 수수료 조정 및 확정, 10일 정산)
|
||||
</p>
|
||||
|
||||
<!-- API 수수료 테이블 -->
|
||||
<div class="table-responsive voffset3" style="overflow-x: auto; margin-top: 30px;">
|
||||
<table class="table table-bordered border-type" style="border: 2px solid #dee2e6;">
|
||||
<colgroup>
|
||||
<col style="width:6%"/>
|
||||
<col style="width:16%"/>
|
||||
<col style="width:8%"/>
|
||||
<col style="width:8%"/>
|
||||
<col style="width:8%"/>
|
||||
<col style="width:8%"/>
|
||||
<col style="width:8%"/>
|
||||
<col style="width:8%"/>
|
||||
<col style="width:8%"/>
|
||||
<col style="width:8%"/>
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">구분</th>
|
||||
<th rowspan="2">API 명</th>
|
||||
<th colspan="4">조정 전</th>
|
||||
<th colspan="4">조정 후</th>
|
||||
<th rowspan="2">조정사유</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>처리<br/>건수</th>
|
||||
<th>적용<br/>수수료(원)</th>
|
||||
<th>최저<br/>수수료</th>
|
||||
<th>출금<br/>예상금액</th>
|
||||
<th>조정<br/>건수</th>
|
||||
<th>조정<br/>수수료(원)</th>
|
||||
<th>최저<br/>수수료</th>
|
||||
<th>출금<br/>예상금액</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="apiTableBody">
|
||||
<!-- 동적 생성 -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- 판매 수수료 테이블 -->
|
||||
<table class="table table-bordered border-type voffset3" style="border: 2px solid #dee2e6; margin-top: 30px;">
|
||||
<colgroup>
|
||||
<col style="width: 6%;">
|
||||
<col style="width: 8%;">
|
||||
<col style="width: 8%;">
|
||||
<col style="width: 5%;">
|
||||
<col style="width: 5%;">
|
||||
<col style="width: 7%;">
|
||||
<col style="width: 6%;">
|
||||
<col style="width: 6%;">
|
||||
<col style="width: 7%;">
|
||||
<col style="width: 7%;">
|
||||
<col style="width: 6%;">
|
||||
<col style="width: 6%;">
|
||||
<col style="width: 7%;">
|
||||
<col style="width: 7%;">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">구분</th>
|
||||
<th rowspan="2">과금대상<br/>업무</th>
|
||||
<th rowspan="2">수수료<br/>유형</th>
|
||||
<th rowspan="2">과금<br/>기준</th>
|
||||
<th rowspan="2">값구분</th>
|
||||
<th rowspan="2">판매액</th>
|
||||
<th colspan="4">조정 전</th>
|
||||
<th colspan="4">조정 후</th>
|
||||
<th rowspan="2">조정사유</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>적용<br/>수수료</th>
|
||||
<th>처리<br/>건수</th>
|
||||
<th>최저<br/>수수료</th>
|
||||
<th>출금<br/>예상수수료</th>
|
||||
<th>적용<br/>수수료</th>
|
||||
<th>처리<br/>건수</th>
|
||||
<th>최저<br/>수수료</th>
|
||||
<th>출금<br/>예상수수료</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="saleTableBody">
|
||||
<!-- 동적 생성 -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- 합계 테이블 -->
|
||||
<table class="table table-bordered border-type voffset3" style="border: 2px solid #dee2e6; margin-top: 30px;">
|
||||
<colgroup>
|
||||
<col />
|
||||
<col style="width: 13%"/>
|
||||
<col style="width: 13%"/>
|
||||
<col style="width: 13%"/>
|
||||
<col style="width: 13%"/>
|
||||
<col style="width: 13%"/>
|
||||
<col style="width: 13%" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">구분</th>
|
||||
<th colspan="3">조정 전</th>
|
||||
<th colspan="3">조정 후</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>판매액</th>
|
||||
<th>처리건수(건)</th>
|
||||
<th>출금예상금액</th>
|
||||
<th>판매액</th>
|
||||
<th>처리건수(건)</th>
|
||||
<th>출금예상금액</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="bg-warning" style="background-color: #fff3cd !important;">
|
||||
<td class="text-center"><strong id="totalTitle">2024년 3월 합계</strong></td>
|
||||
<td class="text-right"><strong id="totalSalesAmount1">0</strong></td>
|
||||
<td class="text-right"><strong id="totalCount1">0</strong></td>
|
||||
<td class="text-right"><strong class="color_blue" style="font-size:16px; color: #007bff;" id="totalAmount1">0</strong></td>
|
||||
<td class="text-right"><strong id="totalSalesAmount2">0</strong></td>
|
||||
<td class="text-right"><strong id="totalCount2">0</strong></td>
|
||||
<td class="text-right"><strong class="color_blue" style="font-size:16px; color: #007bff;" id="totalAmount2">0</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<th:block layout:fragment="contentScript">
|
||||
<script th:inline="javascript">
|
||||
// 샘플 데이터
|
||||
const sampleData = {
|
||||
apiCommissions: [
|
||||
{
|
||||
name: '계좌잔액조회',
|
||||
count1: 20543, fee1: 50, min1: 500000, amount1: 1027150,
|
||||
count2: 20543, fee2: 50, min2: 500000, amount2: 1027150,
|
||||
reason: ''
|
||||
},
|
||||
{
|
||||
name: '거래내역조회',
|
||||
count1: 11876, fee1: 80, min1: 500000, amount1: 950080,
|
||||
count2: 11876, fee2: 80, min2: 500000, amount2: 950080,
|
||||
reason: ''
|
||||
},
|
||||
{
|
||||
name: '송금 API',
|
||||
count1: 4892, fee1: 200, min1: 500000, amount1: 978400,
|
||||
count2: 4892, fee2: 200, min2: 500000, amount2: 978400,
|
||||
reason: ''
|
||||
},
|
||||
{
|
||||
name: '본인인증 API',
|
||||
count1: 2341, fee1: 150, min1: 300000, amount1: 351150,
|
||||
count2: 2100, fee2: 150, min2: 300000, amount2: 315000,
|
||||
reason: '오류건 제외'
|
||||
}
|
||||
],
|
||||
saleCommissions: [
|
||||
{
|
||||
name: '개인대출 상품 A',
|
||||
type: '정률',
|
||||
base: '금액',
|
||||
division: '원',
|
||||
salesAmount: 1050000000,
|
||||
fee1: 0.025, count1: 55, min1: 100000, amount1: 275000,
|
||||
fee2: 0.025, count2: 55, min2: 100000, amount2: 275000,
|
||||
reason: ''
|
||||
},
|
||||
{
|
||||
name: '기업대출 상품 B',
|
||||
type: '정액',
|
||||
base: '건',
|
||||
division: '건',
|
||||
salesAmount: 0,
|
||||
fee1: 8000, count1: 21, min1: 100000, amount1: 168000,
|
||||
fee2: 8000, count2: 21, min2: 100000, amount2: 168000,
|
||||
reason: ''
|
||||
},
|
||||
{
|
||||
name: '소상공인 대출 C',
|
||||
type: '정액',
|
||||
base: '건',
|
||||
division: '건',
|
||||
salesAmount: 0,
|
||||
fee1: 3000, count1: 30, min1: 50000, amount1: 90000,
|
||||
fee2: 3000, count2: 28, min2: 50000, amount2: 84000,
|
||||
reason: '취소건 제외'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
function formatNumber(num) {
|
||||
return new Intl.NumberFormat('ko-KR').format(num);
|
||||
}
|
||||
|
||||
function loadData() {
|
||||
const year = document.getElementById('forYear').value;
|
||||
const month = document.getElementById('forMonth').value;
|
||||
|
||||
if (!year || !month) {
|
||||
customPopups.showAlert('조회 기간을 선택해주세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
// API 수수료 테이블 렌더링
|
||||
const apiTableBody = document.getElementById('apiTableBody');
|
||||
apiTableBody.innerHTML = '';
|
||||
|
||||
let apiTotal1 = 0;
|
||||
let apiTotal2 = 0;
|
||||
let apiCount1 = 0;
|
||||
let apiCount2 = 0;
|
||||
|
||||
sampleData.apiCommissions.forEach((item, index) => {
|
||||
if (index === 0) {
|
||||
apiTableBody.innerHTML += `
|
||||
<tr>
|
||||
<td rowspan="${sampleData.apiCommissions.length}" class="text-center">API<br/>수수료</td>
|
||||
<td class="text-left">${item.name}</td>
|
||||
<td class="text-right">${formatNumber(item.count1)}</td>
|
||||
<td class="text-right">${formatNumber(item.fee1)}</td>
|
||||
<td class="text-right">${formatNumber(item.min1)}</td>
|
||||
<td class="text-right"><span style="color: #8b0000;">${formatNumber(item.amount1)}</span></td>
|
||||
<td class="text-right"><strong style="color: #007bff;">${formatNumber(item.count2)}</strong></td>
|
||||
<td class="text-right">${formatNumber(item.fee2)}</td>
|
||||
<td class="text-right">${formatNumber(item.min2)}</td>
|
||||
<td class="text-right"><span style="color: #8b0000;">${formatNumber(item.amount2)}</span></td>
|
||||
<td>${item.reason}</td>
|
||||
</tr>
|
||||
`;
|
||||
} else {
|
||||
apiTableBody.innerHTML += `
|
||||
<tr>
|
||||
<td class="text-left">${item.name}</td>
|
||||
<td class="text-right">${formatNumber(item.count1)}</td>
|
||||
<td class="text-right">${formatNumber(item.fee1)}</td>
|
||||
<td class="text-right">${formatNumber(item.min1)}</td>
|
||||
<td class="text-right"><span style="color: #8b0000;">${formatNumber(item.amount1)}</span></td>
|
||||
<td class="text-right"><strong style="color: #007bff;">${formatNumber(item.count2)}</strong></td>
|
||||
<td class="text-right">${formatNumber(item.fee2)}</td>
|
||||
<td class="text-right">${formatNumber(item.min2)}</td>
|
||||
<td class="text-right"><span style="color: #8b0000;">${formatNumber(item.amount2)}</span></td>
|
||||
<td>${item.reason}</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
apiTotal1 += item.amount1;
|
||||
apiTotal2 += item.amount2;
|
||||
apiCount1 += item.count1;
|
||||
apiCount2 += item.count2;
|
||||
});
|
||||
|
||||
// API 소계
|
||||
apiTableBody.innerHTML += `
|
||||
<tr>
|
||||
<td colspan="2" class="text-center">${year}년 ${month}월 API 수수료 소계</td>
|
||||
<td class="text-right">${formatNumber(apiCount1)}</td>
|
||||
<td class="text-right"></td>
|
||||
<td class="text-right"></td>
|
||||
<td class="text-right"><strong style="color: #007bff;">${formatNumber(apiTotal1)}</strong></td>
|
||||
<td class="text-right">${formatNumber(apiCount2)}</td>
|
||||
<td class="text-right"></td>
|
||||
<td class="text-right"></td>
|
||||
<td class="text-right"><strong style="color: #007bff;">${formatNumber(apiTotal2)}</strong></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
`;
|
||||
|
||||
// 판매 수수료 테이블 렌더링
|
||||
const saleTableBody = document.getElementById('saleTableBody');
|
||||
saleTableBody.innerHTML = '';
|
||||
|
||||
let saleTotal1 = 0;
|
||||
let saleTotal2 = 0;
|
||||
let saleCount1 = 0;
|
||||
let saleCount2 = 0;
|
||||
let saleSalesAmount = 0;
|
||||
|
||||
sampleData.saleCommissions.forEach((item, index) => {
|
||||
if (index === 0) {
|
||||
saleTableBody.innerHTML += `
|
||||
<tr>
|
||||
<td rowspan="${sampleData.saleCommissions.length}" class="text-center">판매<br/>수수료</td>
|
||||
<td class="text-left">${item.name}</td>
|
||||
<td>${item.type}</td>
|
||||
<td>${item.base}</td>
|
||||
<td>${item.division}</td>
|
||||
<td class="text-right">${item.salesAmount > 0 ? formatNumber(item.salesAmount) : ''}</td>
|
||||
<td class="text-right">${item.base === '금액' ? (item.fee1 * 100) + '%' : formatNumber(item.fee1)}</td>
|
||||
<td class="text-right">${formatNumber(item.count1)}</td>
|
||||
<td class="text-right">${formatNumber(item.min1)}</td>
|
||||
<td class="text-right"><span style="color: #8b0000;">${formatNumber(item.amount1)}</span></td>
|
||||
<td class="text-right">${item.base === '금액' ? (item.fee2 * 100) + '%' : formatNumber(item.fee2)}</td>
|
||||
<td class="text-right">${formatNumber(item.count2)}</td>
|
||||
<td class="text-right">${formatNumber(item.min2)}</td>
|
||||
<td class="text-right"><span style="color: #8b0000;">${formatNumber(item.amount2)}</span></td>
|
||||
<td>${item.reason}</td>
|
||||
</tr>
|
||||
`;
|
||||
} else {
|
||||
saleTableBody.innerHTML += `
|
||||
<tr>
|
||||
<td class="text-left">${item.name}</td>
|
||||
<td>${item.type}</td>
|
||||
<td>${item.base}</td>
|
||||
<td>${item.division}</td>
|
||||
<td class="text-right">${item.salesAmount > 0 ? formatNumber(item.salesAmount) : ''}</td>
|
||||
<td class="text-right">${item.base === '금액' ? (item.fee1 * 100) + '%' : formatNumber(item.fee1)}</td>
|
||||
<td class="text-right">${formatNumber(item.count1)}</td>
|
||||
<td class="text-right">${formatNumber(item.min1)}</td>
|
||||
<td class="text-right"><span style="color: #8b0000;">${formatNumber(item.amount1)}</span></td>
|
||||
<td class="text-right">${item.base === '금액' ? (item.fee2 * 100) + '%' : formatNumber(item.fee2)}</td>
|
||||
<td class="text-right">${formatNumber(item.count2)}</td>
|
||||
<td class="text-right">${formatNumber(item.min2)}</td>
|
||||
<td class="text-right"><span style="color: #8b0000;">${formatNumber(item.amount2)}</span></td>
|
||||
<td>${item.reason}</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
saleTotal1 += item.amount1;
|
||||
saleTotal2 += item.amount2;
|
||||
saleCount1 += item.count1;
|
||||
saleCount2 += item.count2;
|
||||
saleSalesAmount += item.salesAmount;
|
||||
});
|
||||
|
||||
// 판매 소계
|
||||
saleTableBody.innerHTML += `
|
||||
<tr>
|
||||
<td colspan="5" class="text-center">${year}년 ${month}월 판매 수수료 소계</td>
|
||||
<td class="text-right">${formatNumber(saleSalesAmount)}</td>
|
||||
<td class="text-right"></td>
|
||||
<td class="text-right">${formatNumber(saleCount1)}</td>
|
||||
<td></td>
|
||||
<td class="text-right"><strong style="color: #007bff;">${formatNumber(saleTotal1)}</strong></td>
|
||||
<td class="text-right"></td>
|
||||
<td class="text-right">${formatNumber(saleCount2)}</td>
|
||||
<td></td>
|
||||
<td class="text-right"><strong style="color: #007bff;">${formatNumber(saleTotal2)}</strong></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
`;
|
||||
|
||||
// 합계 업데이트
|
||||
document.getElementById('totalTitle').textContent = `${year}년 ${month}월 합계`;
|
||||
document.getElementById('totalSalesAmount1').textContent = formatNumber(saleSalesAmount);
|
||||
document.getElementById('totalCount1').textContent = formatNumber(apiCount1 + saleCount1);
|
||||
document.getElementById('totalAmount1').textContent = formatNumber(apiTotal1 + saleTotal1);
|
||||
document.getElementById('totalSalesAmount2').textContent = formatNumber(saleSalesAmount);
|
||||
document.getElementById('totalCount2').textContent = formatNumber(apiCount2 + saleCount2);
|
||||
document.getElementById('totalAmount2').textContent = formatNumber(apiTotal2 + saleTotal2);
|
||||
|
||||
// 출력 버튼 표시
|
||||
document.getElementById('printBtn').style.display = 'inline-block';
|
||||
}
|
||||
|
||||
function printCommission() {
|
||||
const year = document.getElementById('forYear').value;
|
||||
const month = document.getElementById('forMonth').value;
|
||||
|
||||
if (!year || !month) {
|
||||
customPopups.showAlert('조회 기간을 선택해주세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
// 별도 창으로 청구서 출력 페이지 열기
|
||||
const printUrl = '/commission/print/' + year + '/' + month;
|
||||
window.open(printUrl, '_blank', 'width=800,height=900,scrollbars=yes,resizable=yes');
|
||||
}
|
||||
|
||||
function downloadExcel() {
|
||||
customPopups.showAlert('엑셀 다운로드 기능 (구현 예정)');
|
||||
}
|
||||
|
||||
// 페이지 로드 시 초기 데이터 로드
|
||||
window.onload = function() {
|
||||
loadData();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.glyphicon-search::before {
|
||||
content: "🔍";
|
||||
}
|
||||
@media print {
|
||||
.searchBox,
|
||||
.searchInfo {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</th:block>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,252 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>수수료 청구서</title>
|
||||
<link rel="stylesheet" th:href="@{/content/css/vendor.css}">
|
||||
<style>
|
||||
html,body{font-size:12px;}
|
||||
body{width:600px; margin:90px; font-family: 'Noto Sans KR', -apple-system, sans-serif;}
|
||||
table{border-collapse: collapse;}
|
||||
table th, td{padding:5px 10px;}
|
||||
table tr{font-size:12px;}
|
||||
.info-table{ border-top: 10px solid gray; width: 100%; border-bottom: 2px solid #333;}
|
||||
.info-table th{text-align:left;}
|
||||
.commission-table{width:100%;}
|
||||
.commission-table th,.commission-table td{border:1px solid #999 !important}
|
||||
.commission-table td{text-align:right}
|
||||
.bg_ygreen{background-color:aquamarine; text-align:center}
|
||||
.bg_skyBlue{background-color:skyblue; text-align:center}
|
||||
.bg_yellow{background-color:yellow; text-align:center}
|
||||
|
||||
DIV { position: relative; }
|
||||
|
||||
.btn {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #5a67d8;
|
||||
}
|
||||
|
||||
@media print {
|
||||
@page {
|
||||
size: auto;
|
||||
margin: 0 -0cm;
|
||||
}
|
||||
html {
|
||||
margin:0 0cm;
|
||||
}
|
||||
#printButton, #backButton {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<button id="backButton" class="btn btn-primary" style="margin-right: 10px;" onclick="history.back()">뒤로가기</button>
|
||||
<input id="printButton" type="button" class="btn btn-primary" value="청구서 인쇄" onclick="window.print()"/>
|
||||
|
||||
<div id="PrintDIV">
|
||||
<h1 style="text-align:center">
|
||||
<img style="width:300px;" th:src="@{/img/portal/logo.jpg}" alt="광주은행 오픈뱅킹" />
|
||||
</h1>
|
||||
<p style="text-align:center">우61470 광주광역시 동구 제봉로 225 전화 (062)239-6722 FAX (062)239-6719 오픈뱅크 플랫폼 담당자</p>
|
||||
|
||||
<table class="info-table">
|
||||
<colgroup>
|
||||
<col style="width:15%;" />
|
||||
<col/>
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>문서번호</th>
|
||||
<td><span th:text="|전자금융(OBP) ${year}-${month}-001호|">전자금융(OBP) 2024-03-001호</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>발 급 일</th>
|
||||
<td><span th:text="${toDay}">2024년 3월 15일</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>수 신</th>
|
||||
<td><span th:text="${organization}">ABC 핀테크 주식회사</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>참 조</th>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>제 목</th>
|
||||
<td><span th:text="|${year}년 ${month}월 오픈뱅크플랫폼 API 서비스 이용수수료 청구|">2024년 3월 오픈뱅크플랫폼 API 서비스 이용수수료 청구</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div>
|
||||
<p>1. 귀 사의 무궁한 발전을 기원합니다.</p>
|
||||
<p>2. 귀 사와 체결된 서비스 이용 계약에 따라 동 업무처리와 관련하여 발생된 수수료를 다음과 같이 청구하오니 <br/>협조하여 주시기 바랍니다.</p>
|
||||
</div>
|
||||
|
||||
<h2 style="float:left">1. 청구내역</h2>
|
||||
<p style="float: right;margin-top: 25px;">(단위:건수/원)</p>
|
||||
|
||||
<table class="commission-table">
|
||||
<colgroup>
|
||||
<col style="width:35%"/>
|
||||
<col style="width:20%"/>
|
||||
<col style="width:15%"/>
|
||||
<col style="width:15%"/>
|
||||
<col style="width:15%"/>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="bg_ygreen">청구내용</th>
|
||||
<th class="bg_ygreen">대출금액</th>
|
||||
<th class="bg_ygreen">처리건수</th>
|
||||
<th class="bg_ygreen">수수료</th>
|
||||
<th class="bg_ygreen">수수료합계</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<th:block th:if="${commission != null and commission.list != null}">
|
||||
<!-- API 수수료 -->
|
||||
<tr th:each="item : ${commission.list}" th:if="${item.paymentTargetType == '01'}">
|
||||
<td style="text-align:left" th:text="${item.paymentTargetName}">계좌잔액조회</td>
|
||||
<td></td>
|
||||
<td th:text="${#numbers.formatInteger(item.totalValue2, 0, 'COMMA')}">20,543</td>
|
||||
<td th:text="|₩${#numbers.formatInteger(item.value2, 0, 'COMMA')}|">₩50</td>
|
||||
<td th:text="|₩${#numbers.formatInteger(item.sum2, 0, 'COMMA')}|">₩1,027,150</td>
|
||||
</tr>
|
||||
|
||||
<!-- API 소계 -->
|
||||
<th:block th:if="${commission.apiSum2 != null}">
|
||||
<tr>
|
||||
<th class="bg_skyBlue" colspan="4">소계</th>
|
||||
<td class="bg_skyBlue" th:text="|₩${#numbers.formatInteger(commission.apiSum2, 0, 'COMMA')}|">₩3,306,780</td>
|
||||
</tr>
|
||||
</th:block>
|
||||
|
||||
<!-- 판매 수수료 -->
|
||||
<tr th:each="item : ${commission.list}" th:if="${item.paymentTargetType != '01'}">
|
||||
<td style="text-align:left" th:text="${item.paymentTargetName}">개인대출 상품 A</td>
|
||||
<td th:text="${item.paymentBaseName == '금액' ? '₩' + #numbers.formatInteger(item.totalValue2, 0, 'COMMA') : ''}">₩1,050,000,000</td>
|
||||
<td th:text="${item.paymentBaseName == '건' ? #numbers.formatInteger(item.totalCount2, 0, 'COMMA') : ''}">55</td>
|
||||
<td th:text="|₩${#numbers.formatInteger(item.value2, 0, 'COMMA')}|">₩5,000</td>
|
||||
<td th:text="|₩${#numbers.formatInteger(item.sum2, 0, 'COMMA')}|">₩275,000</td>
|
||||
</tr>
|
||||
|
||||
<!-- 판매 소계 -->
|
||||
<th:block th:if="${commission.productSum2 != null}">
|
||||
<tr>
|
||||
<th class="bg_skyBlue" colspan="4">소계</th>
|
||||
<td class="bg_skyBlue" th:text="|₩${#numbers.formatInteger(commission.productSum2, 0, 'COMMA')}|">₩533,000</td>
|
||||
</tr>
|
||||
</th:block>
|
||||
|
||||
<!-- 합계 -->
|
||||
<th:block th:if="${commission.sum2 != null}">
|
||||
<tr>
|
||||
<th class="bg_yellow" colspan="4">합계</th>
|
||||
<td class="bg_yellow" th:text="|₩${#numbers.formatInteger(commission.sum2, 0, 'COMMA')}|">₩3,839,780</td>
|
||||
</tr>
|
||||
</th:block>
|
||||
</th:block>
|
||||
|
||||
<!-- 샘플 데이터 (commission이 null인 경우) -->
|
||||
<th:block th:if="${commission == null}">
|
||||
<tr>
|
||||
<td style="text-align:left">계좌잔액조회</td>
|
||||
<td></td>
|
||||
<td>20,543</td>
|
||||
<td>₩50</td>
|
||||
<td>₩1,027,150</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align:left">거래내역조회</td>
|
||||
<td></td>
|
||||
<td>11,876</td>
|
||||
<td>₩80</td>
|
||||
<td>₩950,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align:left">송금 API</td>
|
||||
<td></td>
|
||||
<td>4,892</td>
|
||||
<td>₩200</td>
|
||||
<td>₩978,400</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align:left">본인인증 API</td>
|
||||
<td></td>
|
||||
<td>2,341</td>
|
||||
<td>₩150</td>
|
||||
<td>₩351,150</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="bg_skyBlue" colspan="4">소계</th>
|
||||
<td class="bg_skyBlue">₩3,306,780</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align:left">개인대출 상품 A</td>
|
||||
<td>₩1,050,000,000</td>
|
||||
<td>55</td>
|
||||
<td>₩5,000</td>
|
||||
<td>₩275,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align:left">기업대출 상품 B</td>
|
||||
<td>₩1,680,000,000</td>
|
||||
<td>21</td>
|
||||
<td>₩8,000</td>
|
||||
<td>₩168,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align:left">소상공인 대출 C</td>
|
||||
<td>₩450,000,000</td>
|
||||
<td>30</td>
|
||||
<td>₩3,000</td>
|
||||
<td>₩90,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="bg_skyBlue" colspan="4">소계</th>
|
||||
<td class="bg_skyBlue">₩533,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="bg_yellow" colspan="4">합계</th>
|
||||
<td class="bg_yellow">₩3,839,780</td>
|
||||
</tr>
|
||||
</th:block>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>* 수수료는 Max(처리건수*금액, 월최저수수료) 금액으로 출금됩니다</p>
|
||||
<br>
|
||||
<h2>2. 수수료정산</h2>
|
||||
<p>① 정산방법 : 수수료 결제계좌에서 자동출금</p>
|
||||
<p>② 처리일자 : 매월10일 (휴,공휴일인 경우 익영업일). 끝.</p>
|
||||
|
||||
<div style="text-align:center;padding:20px 0">
|
||||
<h1>
|
||||
<span style="letter-spacing:0.8;">주식회사 광주은행</span><br/>
|
||||
<span style="letter-spacing:6.5;">디지털</span> <span style="letter-spacing:6.5;">사업부장</span>
|
||||
<small style="position: absolute; bottom: 39px; margin-left: 12px; font-weight: normal; font-size: 13px;">(직인생략)</small>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script th:if="${error}" th:inline="javascript">
|
||||
$(document).ready(function() {
|
||||
customPopups.showAlert([[${error}]]);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -62,6 +62,7 @@
|
||||
</li>
|
||||
<li sec:authorize="hasRole('ROLE_APP')">
|
||||
<a th:href="@{/myapikey}"><i class="fas fa-key"></i>인증 키 관리</a>
|
||||
<a th:href="@{/commission/manage}"><i class="fas fa-key"></i>과금 관리</a>
|
||||
</li>
|
||||
<li><a th:href="@{/mypage}"><i class="fas fa-user-circle"></i>내 정보 관리</a></li>
|
||||
<li><a th:href="@{/change_password}"><i class="fas fa-lock"></i>비밀번호 변경</a></li>
|
||||
|
||||
Reference in New Issue
Block a user