208 lines
9.1 KiB
JavaScript
208 lines
9.1 KiB
JavaScript
import { w2grid, w2ui, w2popup, w2alert} from 'https://cdn.jsdelivr.net/gh/vitmalina/w2ui@master/dist/w2ui.es6.min.js'
|
|
// 파일이 실제 존재하는지 확인 필수! 존재하지 않으면 아래 코드가 모두 멈춥니다.
|
|
import { bindProductPopupEvents } from '/kngil/js/adm_common.js'
|
|
|
|
|
|
|
|
export function openuseHistoryPopup(memberId = '',isSuperAdmin='') {
|
|
// 기존 그리드 안전하게 제거
|
|
if (w2ui.UseHistoryGrid) {
|
|
w2ui.UseHistoryGrid.destroy();
|
|
}
|
|
|
|
w2popup.open({
|
|
title: '서비스 사용 이력',
|
|
width: 1100,
|
|
height: 600,
|
|
modal: true,
|
|
body:
|
|
/*
|
|
`
|
|
<div style="padding:8px">
|
|
<div id="UseHistoryGrid" style="height:520px;"></div>
|
|
</div>
|
|
*/
|
|
`
|
|
<div id="popupMainContainer" style="display: flex; flex-direction: column; height: 100%; padding: 10px; gap: 10px; box-sizing: border-box;">
|
|
|
|
<div id="searchFormArea" style="display: flex; align-items: center; gap: 20px; padding: 15px; background: #f9f9f9; border: 1px solid #ddd; border-radius: 4px;">
|
|
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
<span style="font-weight: bold; color: #333; white-space: nowrap;">회원 ID</span>
|
|
<input type="text" id="searchMemberId" value="${memberId}"
|
|
${!isSuperAdmin ? 'disabled' : ''}
|
|
style="width: 120px; padding: 6px; border: 1px solid #ccc; border-radius: 4px;"
|
|
placeholder="아이디">
|
|
</div>
|
|
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
<span style="font-weight: bold; color: #333; white-space: nowrap;">성명</span>
|
|
<input type="text" id="searchUserNm"
|
|
style="width: 120px; padding: 6px; border: 1px solid #ccc; border-radius: 4px;"
|
|
placeholder="성명 입력">
|
|
</div>
|
|
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
<span style="font-weight: bold; color: #333; white-space: nowrap;">부서</span>
|
|
<input type="text" id="searchDeptNm"
|
|
style="width: 150px; padding: 6px; border: 1px solid #ccc; border-radius: 4px;"
|
|
placeholder="부서명 입력">
|
|
</div>
|
|
|
|
<div style="display: flex; align-items: center; gap: 5px;"> <span style="font-weight: bold; color: #333; white-space: nowrap;">구입일</span>
|
|
|
|
<input type="date" id="searchFbuydt"
|
|
style="width: 130px; padding: 4px; border: 1px solid #ccc; border-radius: 4px;">
|
|
|
|
<span style="color: #666;">~</span>
|
|
|
|
<input type="date" id="searchTbuydt"
|
|
style="width: 130px; padding: 4px; border: 1px solid #ccc; border-radius: 4px;">
|
|
</div>
|
|
|
|
|
|
<button id="btnSearchHistory"
|
|
style="padding: 6px 20px; background: #1565c0; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; margin-left: auto;">
|
|
검색
|
|
</button>
|
|
</div>
|
|
|
|
<div id="UseHistoryGrid" style="flex: 1; min-height: 450px; border: 1px solid #ddd;"></div>
|
|
</div>
|
|
|
|
`,
|
|
onOpen(event) {
|
|
event.onComplete = () => {
|
|
|
|
const searchBtn = document.getElementById('btnSearchHistory');
|
|
const inputs = {
|
|
mid: document.getElementById('searchMemberId'),
|
|
unm: document.getElementById('searchUserNm'),
|
|
dnm: document.getElementById('searchDeptNm'),
|
|
fdt: document.getElementById('searchFbuydt'),
|
|
tdt: document.getElementById('searchTbuydt')
|
|
};
|
|
|
|
// 1. 날짜 필드 캘린더 연결 (W2UI 스타일)
|
|
if (inputs.fdt) inputs.fdt.type = 'date';
|
|
if (inputs.tdt) inputs.tdt.type = 'date';
|
|
|
|
// 2. 조회 버튼 클릭
|
|
if (searchBtn) {
|
|
searchBtn.onclick = () => loadUseHistoryData();
|
|
}
|
|
|
|
// 3. 모든 입력창 엔터키 지원
|
|
Object.values(inputs).forEach(el => {
|
|
if (el) el.onkeydown = (e) => { if (e.key === 'Enter') searchBtn.click(); };
|
|
});
|
|
|
|
// 4. 초기 그리드 생성 및 데이터 로드
|
|
createUseHistoryGrid(memberId);
|
|
loadUseHistoryData();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function createUseHistoryGrid(memberId) {
|
|
new w2grid({
|
|
name: 'UseHistoryGrid',
|
|
box: '#UseHistoryGrid',
|
|
show: {
|
|
//toolbar: true,
|
|
footer: true,
|
|
lineNumbers: true // 행 번호를 표시하면 디버깅이 편합니다.
|
|
},
|
|
columns: [
|
|
{ field: 'use_dt', text: '사용일자', size: '100px',
|
|
style: 'text-align: center', attr: 'align=center', sortable: true },
|
|
{ field: 'user_id', text: '사용자ID', size: '100px',
|
|
style: 'text-align: center', attr: 'align=center', sortable: true },
|
|
{ field: 'user_nm', text: '성명', size: '100px',
|
|
style: 'text-align: center', attr: 'align=center', sortable: true },
|
|
{ field: 'dept_nm', text: '부서', size: '120px',
|
|
tyle: 'text-align: center', attr: 'align=center', sortable: true },
|
|
{ field: 'posit_nm', text: '직위', size: '100px',
|
|
style: 'text-align: center', attr: 'align=center', sortable: true },
|
|
{ field: 'use_yn', text: '사용여부', size: '80px',
|
|
style: 'text-align: center', attr: 'align=center', sortable: true },
|
|
// 사용면적: 제목은 가운데(style), 숫자는 오른쪽(attr)이 데이터 가독성에 좋습니다.
|
|
{ field: 'use_area', text: '사용면적', size: '100px', render: 'number:0',
|
|
style: 'text-align: center', attr: 'align=right', sortable: true },
|
|
{ field: 'ser_bc', text: '서비스구분', size: '200px',
|
|
style: 'text-align: center', attr: 'align=center', sortable: true },
|
|
]
|
|
});
|
|
}
|
|
|
|
async function loadUseHistoryData(memberId = ''){
|
|
try {
|
|
const grid = w2ui.UseHistoryGrid;
|
|
if (!grid) return;
|
|
|
|
const sMid = document.getElementById('searchMemberId')?.value || '';
|
|
const sUnm = document.getElementById('searchUserNm')?.value || '';
|
|
const sDnm = document.getElementById('searchDeptNm')?.value || '';
|
|
const sfdt = document.getElementById('searchFbuydt')?.value || '';
|
|
const stdt = document.getElementById('searchTbuydt')?.value || '';
|
|
|
|
grid.lock('조회 중...', true);
|
|
|
|
const searchParams = new URLSearchParams();
|
|
searchParams.append('member_id', sMid);
|
|
searchParams.append('user_nm', sUnm);
|
|
searchParams.append('dept_nm', sDnm);
|
|
searchParams.append('fuse_dt', sfdt);
|
|
searchParams.append('tuse_dt', stdt);
|
|
|
|
const response = await fetch('/kngil/bbs/adm_use_history.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: searchParams
|
|
});
|
|
|
|
if (!response.ok) throw new Error(`서버 응답 오류: ${response.status}`);
|
|
|
|
const data = await response.json();
|
|
|
|
if (!Array.isArray(data)) {
|
|
throw new Error('응답 데이터 형식 오류');
|
|
}
|
|
|
|
grid.clear();
|
|
|
|
// --- 합계 계산 로직 시작 ---
|
|
if (data.length > 0) {
|
|
// 일반 데이터 추가
|
|
grid.add(data);
|
|
|
|
// 합계 변수 초기화
|
|
let totalArea = 0;
|
|
data.forEach(item => {
|
|
// 숫자가 아닌 값이 올 경우를 대비해 Number() 처리
|
|
totalArea += Number(item.use_area || 0);
|
|
});
|
|
|
|
// Summary 행 생성
|
|
grid.summary = [{
|
|
recid: 'summary',
|
|
w2ui: { summary: true, style: 'background-color: #f0f0f0; font-weight: bold;' },
|
|
use_dt: '합 계', // 합계 문구를 노출할 위치 (보통 첫 번째나 두 번째 컬럼)
|
|
use_area: totalArea // 계산된 합계값
|
|
}];
|
|
} else {
|
|
grid.summary = []; // 데이터가 없으면 합계행 비우기
|
|
}
|
|
// --- 합계 계산 로직 끝 ---
|
|
|
|
grid.unlock();
|
|
grid.refresh(); // 변경된 summary 정보를 화면에 반영
|
|
|
|
} catch (e) {
|
|
console.error(e);
|
|
if (w2ui.UseHistoryGrid) w2ui.UseHistoryGrid.unlock();
|
|
w2alert('사용이력 조회 실패: ' + e.message);
|
|
}
|
|
}
|