Files
sake/src/main/webapp/WEB-INF/views/mngr/goods/banner/BannerDtlU.jsp
2025-10-29 17:08:05 +09:00

1020 lines
56 KiB
Plaintext

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ page import="java.util.Date" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="ui" uri="http://www.winbit.kr/ctl/ui" %>
<%--
Class Name : BannerC.jsp
Description : 공통상품배너 등록
Modification Information
수정일 수정자 수정내용
------- -------- ---------------------------
2024-06-14 전일찬 최초생성
--%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GC ONE 관리자</title>
<%-- 공통 include --%>
<%@include file ="/WEB-INF/views/comm/mngr/Include.jsp" %>
<script src="<c:url value='/js/fileupload_comm.js'/>"></script>
</head>
<script>
$(document).ready(function () {
if(${not empty resultMap.bannerInfo.bannerInfo.sysFilNm}){
$('#divFile-1').hide();
}
$('input[name="goodsApplcDvCd"]:checked').click();
fn_set_date('datepicker_1', 'datepicker_2');
/* 카테고리 조회 이벤트 */
$(document).on('click', '.category-select', function () {
const upperCtgryId = $(this).val(); // 상위카테고리
const currCtgryDepth = $(this).attr('id').replace('ctgryDepth', '');
const targetDepth = (parseInt(currCtgryDepth) + 1);
const targetCtgryId = 'ctgryDepth' + targetDepth;
if (fn_is_empty(upperCtgryId)) {
for (let i = targetDepth; i < 5; i++) {
$('#section01').find('#ctgryDepth' + i).empty();
}
} else {
fn_get_goods_ctgry(upperCtgryId, targetCtgryId);
}
// 1차 카테고리 선택 하위 비우기
if (currCtgryDepth == 1) {
for (let i = 2; i < 5; i++) {
$('#section01').find('#ctgryDepth' + i).empty();
}
}
// 2차 카테고리 선택 하위 비우기
if (currCtgryDepth == 2) {
for (let i = 3; i < 5; i++) {
$('#section01').find('#ctgryDepth' + i).empty();
}
}
// 3차 카테고리 선택 하위 비우기
if (currCtgryDepth == 3) {
for (let i = 4; i < 5; i++) {
$('#section01').find('#ctgryDepth' + i).empty();
}
}
$('#section01').find('#ctgryId').val(upperCtgryId);
});
/* 카테고리 선택 이벤트 */
$('#selectCategoriesBtn').on('click', function (event) {
event.preventDefault();
const target = event.target;
let selectedCategories = [];
const depth1Selected = $('#ctgryDepth1 option:selected');
const depth2Selected = $('#ctgryDepth2 option:selected');
const depth3Selected = $('#ctgryDepth3 option:selected');
const depth4Selected = $('#ctgryDepth4 option:selected');
if (depth4Selected.length > 0) {
depth4Selected.each(function () {
let categoryPath = depth1Selected.text() + ' > ' + depth2Selected.text() + ' > ' + depth3Selected.text() + ' > ' + $(this).text();
let ctgryId = $(this).val();
selectedCategories.push({ path: categoryPath, id: ctgryId });
});
} else if (depth3Selected.length > 0) {
depth3Selected.each(function () {
let categoryPath = depth1Selected.text() + ' > ' + depth2Selected.text() + ' > ' + $(this).text();
let ctgryId = $(this).val();
selectedCategories.push({ path: categoryPath, id: ctgryId });
});
} else if (depth2Selected.length > 0) {
depth2Selected.each(function () {
let categoryPath = depth1Selected.text() + ' > ' + $(this).text();
let ctgryId = $(this).val();
selectedCategories.push({ path: categoryPath, id: ctgryId });
});
} else if (depth1Selected.length > 0) {
depth1Selected.each(function () {
let categoryPath = $(this).text();
let ctgryId = $(this).val();
selectedCategories.push({ path: categoryPath, id: ctgryId });
});
}
// 선택한 카테고리를 테이블에 추가
let $tableBody = $('#selectedCategoriesTable tbody');
// $tableBody.empty(); // 기존 내용을 지움
selectedCategories.forEach((category, index) => {
//선택한 카테고리 중복일 경우 선택한 카테고리 목록에 넣지 않음
let dupliCtgryAt = false;
$('input[name="reprsntCtgryId"]').each(function() {
var value = $(this).closest('tr').find('td[data-value]').data('value');
if(parseInt(value) === parseInt(category.id)){
dupliCtgryAt = true;
}
});
if(!dupliCtgryAt){
let $row = $('<tr></tr>');
let $radioTd = $('<td></td>');
let $radioDiv = $('<div>적용</div>');
let $radioInput = $('<input type="hidden" id="r-' + index + '" name="reprsntCtgryId" value="' + category.id + '">');
$radioDiv.append($radioInput) // .append($radioLabel);
$radioTd.append($radioDiv);
let $categoryTd = $('<td class="left"></td>').text(category.path).attr('data-value', category.id);
let $deleteTd = $('<td></td>');
let $deleteBtn = $('<button class="circle-btn delete"><span class="visually-hidden">삭제</span></button>');
$deleteTd.append($deleteBtn);
$row.append($radioTd).append($categoryTd).append($deleteTd);
$tableBody.append($row);
// 삭제 버튼에 클릭 이벤트 추가
$deleteBtn.on('click', function () {
$(this).closest('tr').remove();
});
}
});
});
});
/* ********************************************************
* 카테고리 조회 AJAX
******************************************************** */
const fn_get_goods_ctgry = function(upperCtgryId, targetCtgryId) {
$.ajax({
type : 'post',
url : '<c:url value="/admin/sys/ctgry/selectGoodsCategoryList"/>',
data : {
'upperCtgryId': upperCtgryId
},
success : function(data) {
if (data.resBody != null) {
const result = JSON.parse(data.resBody.result);
const goodsCategoryList = result.goodsCategoryList;
if (goodsCategoryList.length > 0) {
$('#section01').find('#' + targetCtgryId).empty();
for (let i=0; i < goodsCategoryList.length; i++) {
const goodsCategory = goodsCategoryList[i];
$('#section01').find('#' + targetCtgryId).append('<option value="' + goodsCategory.ctgryId + '">' + goodsCategory.ctgryNm + '</option>');
}
$('#section01').find('#' + targetCtgryId).niceSelect('update');
}
}
}
});
}
// 전역변수
var cnt = 0;
var originFileDel = 0;
/* ********************************************************
* 숫자만 허용
******************************************************** */
function fn_num_validateInput(input) {
var regex = /[^0-9]/g;
input.value = input.value.replace(regex, '');
input.value = input.value.toUpperCase();
}
/* ********************************************************
* 파일업로드_ 파일 이름 가져오기
******************************************************** */
const fn_set_fileName = function(_target, _arg, event) {
let tmpPath = URL.createObjectURL(event.target.files[0]);
let fileName = _target.files[0].name;
let fileSize = '( ' + (_target.files[0].size / 1024).toFixed(2) + ' KB )';
$(_target).closest('tr').find('.filePh').attr('href', tmpPath);
$(_target).closest('tr').find('.fileNm').text(fileName);
$(_target).closest('tr').find('.fileSz').text(fileSize);
$('#orginlFilNm').val(fileName);
$('#divInfor-' + _arg).show();
$('#divFile-' + _arg).hide();
alert('fn_set_fileName');
}
/* ********************************************************
* 수정폼 이동
******************************************************** */
const fn_move_dtl_uptpage = function (Innb) {
const url = '<c:url value="/mngr/goods/banner/selectBannerDtlForm"/>';
$('#listForm').attr('action', url);
$('#listForm').attr('method', 'post');
$('#listForm').submit();
};
/* ********************************************************
* 목록 조회
******************************************************** */
const fn_select_list = function () {
const url = '<c:url value="/mngr/goods/banner/selectBannerListR"/>';
$('#listForm').attr('action', url);
$('#listForm').attr('method', 'post');
$('#listForm').submit();
};
/* ********************************************************
* 수정 AJAX
******************************************************** */
const fn_regist = function () {
const url = '<c:url value="/mngr/goods/banner/updateBannerDtl"/>';
const formData = new FormData();
$('#listForm').serializeArray().forEach(function (item) {
formData.append(item.name, item.value);
});
//카테고리 저장
let ctgryIdList = []
$('[name=reprsntCtgryId]').each(function () {
ctgryIdList.push( $(this).val())
});
formData.append('ctgryIdList', ctgryIdList);
//선정구분
formData.append('goodsApplcDvCd', $('input[name="goodsApplcDvCd"]:checked').val())
if($('#datepicker_1').val() != null){
var combinedValue = $('#datepicker_1').val() + 'T' + $('#expsrBgnTime').val();
formData.append('expsrBgnDt', combinedValue);
}
if($('#datepicker_2').val() != null) {
combinedValue = $('#datepicker_2').val() + 'T' + $('#expsrEndTime').val();
formData.append('expsrEndDt', combinedValue);
}
//파일데이터
$.each(filesTempArr, function(i, file){
if(file.upload != 'disable')
formData.append('files', file);
});
if(originFileDel === 0){
formData.append('fileUse', "origin");
}
else if(filesTempArr.length === 1){
formData.append('fileUse', "new");
}
else {
formData.append('fileUse', "none");
}
if(fn_is_empty($('.file-list li'))){
alert('공통상품배너 이미지를 등록해주세요');
return false;
}
let goodsIdArr = [];
$('input[name=relatedGoodsId]').each(function (i) {
goodsIdArr.push($("input[name='relatedGoodsId']").eq(i).attr("value"));
})
formData.append('goodsIds', goodsIdArr);
if (confirm('공통상품배너를 <spring:message code="confirm.common.update"/>')) {
$.ajax({
type: 'post',
enctype: 'multipart/form-data',
url: url,
data: formData,
contentType: false,
processData: false,
success: function (data) {
let str = JSON.parse(data.resBody.result);
if (str.result === 'success') {
alert('<spring:message code="success.common.update"/>');
fn_move_dtl_uptpage(data.resBody.result.replace(/[^0-9]/g, ""));
} else {
alert('<spring:message code="fail.common.update"/>');
}
}
});
}
};
/* ********************************************************
* file button show / file infor hide
******************************************************** */
const fn_delete_imgFile = (obj, shopCd, menuGb, orderParam) => {
$('#divInfor-1').hide();
$("#imgPreview").empty(); //이미지 삭제
$('#divFile-1').show();
originFileDel++;
}
/* ********************************************************
* file button hide / file infor show
******************************************************** */
const fn_add_imgFile = (event, orderParam) => {
customAddFiles(event, orderParam)
}
/* ********************************************************
* custom file function
******************************************************** */
function customAddFiles(event, mode){
customAddFilesObj(event, mode,"fileList");
}
function customAddFilesObj(event, mode, objId){
if(!($(event.target).is('[multiple]'))) filesTempArr.splice(0, filesTempArr.length);
var files = event.target.files;
var filesArr = Array.prototype.slice.call(files); //file객체 array추가
var filesArrLen = filesArr.length;
var filesTempArrSize = filesTempArr.length*1;
const sopmalCd = $('#sopmalCd').val()
let obj = $('#'+objId);
if (mode === 1 && filesArrLen > 1) {
alert("파일은 한개만 첨부할 수 있습니다.");
return false;
}
var templist = '';
let prviewHtml = '';
for(var i=0; i<filesArrLen; i++){
filesTempArr.push(filesArr[i]); //임시배열에 저장
if($(event.target).is('[multiple]')){
const size = i+filesTempArrSize;
let reader = new FileReader();
let file = filesArr[i];
templist ="<li id='temp"+size+"'>"
+"<a href='#' onclick='downloadFile(this, "+(i+filesTempArrSize)+");'>"
+ "<i class='icon icon_file-list mr-2'></i>"
+ "<span class='file-list__item-title'>"+ filesArr[i].name + "</span>"
+"</a>"
+`<button type='button' class='file-list__delete' onclick="deleteFile(this,'\${sopmalCd}','BANR',\${size}); fn_delete_imgFile();"/>`;
+"</li>";
obj.append(templist);
//추가 되면 이미지 보이게
if ($(".file-list__delete")) {
reader.onload = function (e) {
prviewHtml = `<img src="\${e.target.result}" onerror="this.src='/mngr/images/image_placeholder.png'"/>`;
$("#imgPreview").html(prviewHtml);
}
reader.readAsDataURL(file);
}
}
}
$('#divInfor-1').show();
$('#divFile-1').hide();
originFileDel++;
return true;
}
/* ********************************************************
* 상품 검색 팝업 배열 값 불러오기
******************************************************** */
var selected = [];
function fn_select_goods_search() {
selected = [];
$('#appendList tr').each(function() {
const goodsId = $(this).attr('id').replace('choiseListId', '');
const goodsImg = $(this).find('input[name="goodsImgCours"]').val();
const goodsNm = $(this).find('input[name="goodsNm"]').val();
const goodsPrice = $(this).find('input[name="slepric"]').val();
const goodsSttusNm = $(this).find('input[name="goodsSttusNm"]').val();
const expsrNm = $(this).find('input[name="expsrNm"]').val();
selected.push({
goodsId: goodsId,
goodsImg: goodsImg,
goodsNm: goodsNm,
goodsPrice: goodsPrice,
goodsSttusNm :goodsSttusNm,
expsrNm :expsrNm
});
});
// 각 화면에 맞춰서 HTML 변경 START
var tableBody = $("#parentGoodsContainer");
tableBody.empty();
selected.forEach((good, index) => {
var productHtml = `
<div class="product-group__item">
<input type="hidden" id="relatedGoodsId" name="relatedGoodsId" value="` + good.goodsId+ `">
<input type="hidden" id="goodsSttusNm" name="goodsSttusNm" value="`+ good.goodsSttusNm + `">
<span class="product-group__item-number">` + (index + 1) + `</span>
<div class="product-group__image">
<img src="` + good.goodsImg+ `" onerror="this.src='/mngr/images/image_placeholder.png'" width="140" alt="` + good.goodsNm+ `">
</div>
<div class="product-group__description">
<p>` + good.goodsNm+ `</p>
<p class="product-group__description-price">` + fn_format_comma(good.goodsPrice)+ `원</p>
</div>
</div>
`;
tableBody.append(productHtml);
});
// 각 화면에 맞춰서 HTML 변경 END
fn_close_modal('product-search');
}
/* ********************************************************
* 상품 검색 팝업 > 상품 목록 조회
******************************************************** */
const fn_goods_search_popup_list = function (pageIndex,selected) {
let dataStr;
if (!pageIndex) {
$('#pageIndex').val(1);
} else {
$('#pageIndex').val(pageIndex);
}
$('#popupListForm').find('input[name=pageIndex]').eq(0).val(pageIndex);
const popupListForm = $("#popupListForm").serialize();
$.ajax({
type: "post",
url: "<c:url value="/mngr/goods/goodsmngr/selectGoodsSrchPopupList"/>",
data: popupListForm,
success: function (resultHtml) {
$('#goodsList').empty();
$('#goodsList').html(resultHtml);
}
});
}
/* ********************************************************
* custom open modal function
******************************************************** */
//관련 상품 검색 모달
const fn_open_search_modal = function (modalDivSltr, modalSlrt, url, param, callback) {
let submitType = 'GET';
//파라미터가 있을 경우 POST처리
if (!param) {
submitType = 'POST';
}
$.ajax({
type: submitType,
url: url,
data: param,
success: function (data) {
//callback함수가 없을 경우 default로 지정된 영역에 모달팝업 화면을 교체하고 화면 로딩
if (!callback) {
$(modalSlrt).remove();
$(modalDivSltr).html(data);
//최초오픈시에 관련상품 정보 있을 경우 실행
if(custom_open_modal_cnt === 0){
var tableBody = $("#appendList");
const cdnurl = $('#cdnurl').val()
selectedDtl.forEach((good, index) => {
var row = `
<tr id="choiseListId` +good.goodsId + `" class="draggable" ondblclick="fn_remove_append_goods_list(this)">
<td class="text-left">
<input type="hidden" id="goodsInnb" name="goodsInnb" value="` + good.goodsId + `"/>
<input type="hidden" id="goodsImgCours" name="goodsImgCours" value="`+cdnurl + good.goodsImg + `"/>
<input type="hidden" id="goodsNm" name="goodsNm" value="` + good.goodsNm + `"/>
<input type="hidden" id="slepric" name="slepric" value="` + good.goodsPrice + `"/>
<input type="hidden" id="goodsSttusNm" name="goodsSttusNm" value="` + good.goodsSttusNm + `"/>
<input type="hidden" id="expsrNm" name="expsrNm" value="` + good.expsrNm + `"/>
<div class="product-search-box__product">
<img src="`+cdnurl + good.goodsImg+ `"
onerror="this.src='<c:url value="/mngr/images/image_placeholder.png"/>'"
alt="` +good.goodsNm+ `" width="64">
` +good.goodsNm+ `
</div>
</td>
<td>` +fn_format_comma(good.goodsPrice) +`</td>
<td>` +good.goodsSttusNm + '(' + good.expsrNm + ')' +`</td>
</tr>
`;
tableBody.append(row);
});
custom_open_modal_cnt++;
}
$(modalSlrt).modal();
} else {
callback(data);
}
}
});
}
let custom_open_modal_cnt = 0;
//현재 등록된 관련 상품 정보
let selectedDtl = [];
const fn_custom_open_modal = (modalDivSltr, modalSlrt, url, param, callback) => {
selectedDtl = [];
if(custom_open_modal_cnt === 0){
$('.product-group__item').each(function() {
const goodsId = $(this).find('input[name="relatedGoodsId"]').val();
const goodsImg = $(this).find('input[name="relatedGoodsImg"]').val();
const goodsNm = $(this).find('input[name="relatedGoodsNm"]').val();
const goodsPrice = $(this).find('input[name="relatedGoodsPrice"]').val();
const goodsSttusNm = $(this).find('input[name="goodsSttusNm"]').val();
const expsrNm = $(this).find('input[name="expsrNm"]').val();
selectedDtl.push({
goodsId: goodsId,
goodsImg: goodsImg,
goodsNm: goodsNm,
goodsPrice: goodsPrice,
goodsSttusNm: goodsSttusNm,
expsrNm: expsrNm
});
});
}
fn_open_search_modal(modalDivSltr, modalSlrt, url, param, callback);
}
</script>
<body>
<%@include file ="/WEB-INF/views/comm/mngr/Header.jsp" %>
<%-- <c:import url="/comm/mngr/header"/> --%>
<main class="main">
<%@include file ="/WEB-INF/views/comm/mngr/Left.jsp" %>
<%-- <c:import url="/comm/mngr/left"/> --%>
<div class="content">
<div class="content__inner">
<button class="side-nav__fold"><span class="visually-hidden">좌측메뉴 펼치기/닫기</span></button>
<div class="page-title">
<h2 class="page-title__title">공통상품배너 수정</h2>
<div class="page-title__btn-container">
<button onclick="fn_select_list()" onkeypress="this.onclick" class="btn outline"><spring:message code="button.list"/></button>
<button class="btn primary" onclick="fn_regist();"><spring:message code="button.save"/></button>
</div>
</div>
<section class="content-section">
<form id="listForm" method="post" action="" enctype="multipart/form-data">
<input type="hidden" id="bannerInnb" name="bannerInnb" value="<c:out value="${ resultMap.bannerInfo.bannerInfo.bannerInnb }"/>"/>
<input type="hidden" id="sopmalCd" name="sopmalCd" value="<c:out value="${ resultMap.bannerInfo.bannerInfo.sopmalCd }"/>"/>
<input type="hidden" id="pageIndex" name="pageIndex" value="<c:out value="${ resultMap.BOBannerVO.pageIndex }"/>"/>
<input type="hidden" id="pageUnit" name="pageUnit" value="<c:out value="${ resultMap.BOBannerVO.pageUnit }"/>"/>
<spring:eval expression="@environment.getProperty('mngrfo.common.fileupload.cdnurl')" var="cdnurl"/>
<h3 class="content-section__title">공통상품배너 수정</h3>
<spring:eval expression="@environment.getProperty('spring.servlet.multipart.max-file-size')" var="maxFileSize"/>
<spring:eval expression="@environment.getProperty('mngrfo.common.fileupload.extensions.images')" var="acceptFileExtensions"/>
<input type="hidden" id="orginlFilNm" name="orginlFilNm" value=""/>
<div class="table-wrapper">
<table class="table">
<colgroup>
<col style="width: 12%;">
<col style="width: auto;">
</colgroup>
<tbody>
<tr>
<th>공통상품배너명<span class="red-7">*</span></th>
<td>
<div class="td-inner">
<input class="input-text xl" type="text" name="bannerNm" id="bannerNm"
title="공통상품배너 제목" value="<c:out value="${ resultMap.bannerInfo.bannerInfo.bannerNm }"/>" maxlength="30">
</div>
</td>
</tr>
<tr>
<th>공통상품배너타입<span class="red-7">*</span></th>
<td>
<div class="td-inner">
<div class="custom-radio-container">
<c:forEach items="${ resultMap.expsrlcDvList }" var="edList" varStatus="edListStatus">
<div class="custom-radio">
<input type="radio" id="r-<c:out value="${edListStatus.count}"/>" name="expsrlcDv" value="<c:out value="${edList.cd}"/>" <c:if test="${edList.cd eq resultMap.bannerInfo.bannerInfo.expsrlcDv}">checked</c:if>>
<label for="r-<c:out value="${edListStatus.count}"/>"><c:out value="${edList.cdNm}"/></label>
</div>
</c:forEach>
</div>
</div>
</td>
</tr>
<tr>
<th>노출 관리<span class="red-7">*</span></th>
<td>
<div class="td-inner">
<div class="custom-radio-container">
<c:forEach items="${ resultMap.expsrlcDvCdList }" var="edcList" varStatus="edcListStatus">
<div class="custom-radio">
<input type="radio" id="r-<c:out value="${(edcListStatus.count)+2}"/>" name="expsrlcDvCd" value="<c:out value="${edcList.cd}"/>" <c:if test="${edcList.cd eq resultMap.bannerInfo.bannerInfo.expsrlcDvCd}">checked</c:if>>
<label for="r-<c:out value="${(edcListStatus.count)+2}"/>"><c:out value="${edcList.cdNm}"/></label>
</div>
</c:forEach>
<div class="td-inner">
<input type="text" id="datepicker_1" name="datepicker_1" class="datepicker" title="시작 날짜 선택"
autocomplete="off" value="<c:out value="${ resultMap.bannerInfo.bannerInfo.expsrBgnYmd }"/>">
<div class="timepicker-container">
<input type="text" class="bs-timepicker" title="시작 시간 설정"
id="expsrBgnTime" name="expsrBgnTime" value="<c:out value="${ resultMap.bannerInfo.bannerInfo.expsrBgnTime }"/>">
</div>
<span class="tilde">~</span>
<input type="text" id="datepicker_2" name="datepicker_2" class="datepicker" title="종료 날짜 선택"
autocomplete="off" value="<c:out value="${ resultMap.bannerInfo.bannerInfo.expsrEndYmd }"/>">
<div class="timepicker-container">
<input type="text" class="bs-timepicker" title="종료 시간 설정"
id="expsrEndTime" name="expsrEndTime" value="<c:out value="${ resultMap.bannerInfo.bannerInfo.expsrEndTime }"/>">
</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th>공통상품배너 파일<span class="red-7">*</span></th>
<td>
<div class="td-inner vertical">
<div class="manage-btn-container fileInfor" id="divInfor-1">
<ul class="file-list" id="fileList">
<c:if test="${not empty resultMap.bannerInfo.bannerInfo.sysFilNm}">
<li id="${resultMap.bannerInfo.bannerInfo.bannerInnb}">
<a href="#" id="${resultMap.bannerInfo.bannerInfo.orginlFilNm}" onclick="downloadFile(this,
'<c:out value="${ resultMap.bannerInfo.bannerInfo.sopmalCd }"/>','BANR', 1);">
<i class="icon icon_file-list mr-2"></i>
<span class="file-list__item-title fileNm"><c:out value="${resultMap.bannerInfo.bannerInfo.orginlFilNm}"/></span>
<span class="file-list__item-size fileSz">(<c:out value="${resultMap.bannerInfo.bannerInfo.filMg}"/> KB)</span>
</a>
<button type="button" class="file-list__delete fileDl" onclick="deleteFile(this,
'<c:out value="${ resultMap.bannerInfo.bannerInfo.sopmalCd }"/>','BANR', 1); fn_delete_imgFile();">
<span class="visually-hidden">파일 삭제</span>
</button>
</li>
</c:if>
</ul>
</div>
<div class="manage-btn-container" id="divFile-1">
<div class="input-file">
<spring:eval expression="@environment.getProperty('mngrfo.common.fileupload.extensions.images')" var="acceptFileExtensions"/>
<input type="file" id="fileUpload" name="file" title="아이콘파일" accept="<c:out value="${ acceptFileExtensions }"/>"
multiple="multiple" onchange="fn_add_imgFile(event, 1);">
<label for="fileUpload">파일선택</label>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th>이미지 보기</th>
<td>
<div class="td-inner" id="imgPreview">
<c:if test = "${not empty resultMap.bannerInfo.bannerInfo.filCours}"><img src="${cdnurl}${resultMap.bannerInfo.bannerInfo.filCours}/${resultMap.bannerInfo.bannerInfo.sysFilNm}"/></c:if>
</div>
</td>
</tr>
<tr>
<th>공통상품배너연결URL<span class="red-7">*</span></th>
<td>
<div class="td-inner">
<input class="input-text full" type="text" name="bannerUrl" id="bannerUrl"
title="공통상품배너연결URL" value="<c:out value="${ resultMap.bannerInfo.bannerInfo.bannerUrl }"/>" maxlength="3000">
</div>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</section>
<%-- 이벤트 대상 --%>
<section class="content-section">
<h3 class="content-section__title">공통상품배너 연결 상품</h3>
<div class="table-wrapper">
<table class="table">
<caption>해당 테이블에 대한 설명</caption>
<colgroup>
<col style="width: 12%;">
<col>
</colgroup>
<tbody>
<tr class=".disabledTr">
<th>선정 기준</th>
<td>
<div class="td-inner">
<div class="custom-radio-container radio-tab-trigger" data-radiotab="radio-tab-01" id="radioGoodsCtgryLmttDv">
<c:forEach var="codeList" items="${ resultMap.goodsCtgryLmttDvCdList }" varStatus="">
<div class="custom-radio">
<input type="radio" id="<c:out value="${ codeList.cdNm }"/><c:out value="${ codeList.cd}" />" name="goodsApplcDvCd" value="<c:out value="${ codeList.cd}" />"
<c:if test="${ '01' eq codeList.cd }">checked="checked"</c:if>
<c:choose>
<c:when test="${ codeList.cd eq '01'}">
onclick="fn_ui_showHide('', '.notall', 'Y');"
</c:when>
<c:when test="${ codeList.cd eq '02' || codeList.cd eq '04'}">
onclick="fn_ui_showHide('#catgrySelctDiv', '#goodsSelctDiv', 'Y');"
</c:when>
<c:when test="${ codeList.cd eq '03' || codeList.cd eq '05'}">
onclick="fn_ui_showHide('#goodsSelctDiv', '#catgrySelctDiv', 'Y');"
</c:when>
</c:choose>
<c:if test="${resultMap.bannerInfo.bannerInfo.goodsApplcDvCd eq codeList.cd}">checked="checked"</c:if>
/>
<label for="<c:out value="${ codeList.cdNm }"/><c:out value="${ codeList.cd}" />"><c:out value="${ codeList.cdNm}" /></label>
</div>
</c:forEach>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-wrapper notall" id="catgrySelctDiv">
<div class="table-wrapper" id="section01">
<table class="table">
<caption>해당 테이블에 대한 설명</caption>
<colgroup>
<col style="width: 12%;">
<col>
</colgroup>
<tbody>
<tr>
<th>카테고리 선택</th>
<td>
<div class="td-inner">
<div class="table-wrapper">
<table class="table vertical">
<caption>해당 테이블에 대한 설명</caption>
<!-- 각 열 width 설정 -->
<colgroup>
<col style="width: 25%;">
<col style="width: 25%;">
<col style="width: 25%;">
<col style="width: 25%;">
</colgroup>
<thead>
<tr>
<th>1차 카테고리</th>
<th>2차 카테고리</th>
<th>3차 카테고리</th>
<th>4차 카테고리</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="category-select" multiple
id="ctgryDepth1" title="1차 카테고리">
<c:forEach items="${resultMap.goodsCategoryList}"
var="goodsCategory"
varStatus="status">
<option value="${goodsCategory.ctgryId}">${goodsCategory.ctgryNm}</option>
</c:forEach>
</select>
</td>
<td>
<select class="category-select" multiple id="ctgryDepth2"
title="2차 카테고리">
</select>
</td>
<td>
<select class="category-select" multiple
id="ctgryDepth3" title="3차 카테고리">
</select>
</td>
<td>
<select class="category-select" multiple
id="ctgryDepth4" title="4차 카테고리">
</select>
</td>
</tr>
</tbody>
</table>
<div class="form-control-container mt-10">
<div class="left"></div>
<div class="center">
<button class="btn primary" id="selectCategoriesBtn">선택</button>
</div>
<div class="right">
</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th>선택한 카테고리</th>
<td>
<div class="td-inner">
<div class="table-wrapper">
<table class="table vertical" id="selectedCategoriesTable">
<caption>해당 테이블에 대한 설명</caption>
<colgroup>
<col style="width: 100px;">
<col style="width: auto;">
<col style="width: 200px;">
</colgroup>
<thead>
<tr>
<th>구분</th>
<th>카테고리</th>
<th>삭제</th>
</tr>
</thead>
<tbody>
<!-- 선택한 카테고리들이 여기에 추가됩니다 -->
<c:if test="${not empty resultMap.bannerInfo.ctgryList}">
<c:forEach var="selectCtgry" items="${resultMap.bannerInfo.ctgryList}" varStatus="selectCtgryIndex">
<tr>
<td>
<div>적용</div>
<input type="hidden" name="reprsntCtgryId" value="${selectCtgry.ctgryId}">
</td>
<td data-value="${selectCtgry.ctgryId}" style="text-align: left;" ><c:out value="${selectCtgry.fullPath}" /> </td>
<td>
<button class="circle-btn delete"><span class="visually-hidden">삭제</span></button>
</td>
</tr>
</c:forEach>
</c:if>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="content-fold__content table-wrapper notall" id="goodsSelctDiv">
<div class="table-wrapper">
<table class="table">
<caption>해당 테이블에 대한 설명</caption>
<colgroup>
<col style="width: 12%;">
<col>
</colgroup>
<tbody>
<tr>
<th>
<div>
<span class="ml-10">상품</span>
<br>
<c:if test="${not empty resultMap.bannerInfo.goodsInfo}">
<a type="button" onclick="fn_custom_open_modal('#modalDiv','#product-search','/mngr/goods/goodsmngr/selectGoodsSrchPopupForm',{'goodsKndCd':'01'}); return false;"
class="btn xsm primary mt-5">검색</a>
</c:if>
<c:if test="${empty resultMap.bannerInfo.goodsInfo}">
<a type="button" onclick="fn_open_modal('#modalDiv','#product-search','/mngr/goods/goodsmngr/selectGoodsSrchPopupForm',{'goodsKndCd':'01'}); return false;"
class="btn xsm primary mt-5">검색</a>
</c:if>
</div>
</th>
<td>
<div class="td-inner">
<div id="parentGoodsContainer" class="product-group">
<c:if test="${not empty resultMap.bannerInfo.goodsInfo}">
<c:forEach items="${ resultMap.bannerInfo.goodsInfo }" var="goodsInfo" varStatus="gdsInfoStatus">
<div class="product-group__item">
<input type="hidden" id="relatedGoodsId" name="relatedGoodsId" value="<c:out value="${goodsInfo.goodsInnb}"/>">
<input type="hidden" name="relatedGoodsNm" value="<c:out value="${goodsInfo.goodsNm}"/>">
<input type="hidden" name="relatedGoodsImg" value="<c:out value="${goodsInfo.goodsImgCours}"/>">
<input type="hidden" name="relatedGoodsPrice" value="<fmt:parseNumber value="${goodsInfo.slepric}"/>">
<input type="hidden" name="goodsSttusNm" value="<c:out value="${goodsInfo.goodsSttusNm}"/>">
<input type="hidden" name="expsrNm" value="<c:out value="${goodsInfo.expsrNm}"/>">
<span class="product-group__item-number"><c:out value="${gdsInfoStatus.count}"/></span>
<div class="product-group__image">
<img src="<c:out value="${cdnurl}${goodsInfo.goodsImgCours}"/>" onerror="this.src='/mngr/images/image_placeholder.png'" width="140" alt="<c:out value="${goodsInfo.goodsNm}"/>">
</div>
<div class="product-group__description">
<p><c:out value="${goodsInfo.goodsNm}"/></p>
<p class="product-group__description-price"><fmt:formatNumber value="${goodsInfo.slepric}" pattern="#,###"/>원</p>
</div>
</div>
</c:forEach>
</c:if>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<%-- <section id="section2" class="content-section content-scroll-detect content-fold">--%>
<%-- <div class="content-fold__header">--%>
<%-- <h3 class="content-section__title">공통상품배너 연결 상품</h3>--%>
<%-- </div>--%>
<%-- <div class="content-fold__content">--%>
<%-- <div class="table-wrapper">--%>
<%-- <table class="table">--%>
<%-- <caption>해당 테이블에 대한 설명</caption>--%>
<%-- <colgroup>--%>
<%-- <col style="width: 12%;">--%>
<%-- <col>--%>
<%-- </colgroup>--%>
<%-- <tbody>--%>
<%-- <tr>--%>
<%-- <th>--%>
<%-- <div>--%>
<%-- <span class="ml-10">상품</span>--%>
<%-- <br>--%>
<%-- <c:if test="${not empty resultMap.bannerInfo.goodsInfo}">--%>
<%-- <a href="#" onclick="fn_custom_open_modal('#modalDiv','#product-search','/mngr/goods/goodsmngr/selectGoodsSrchPopupForm',{'goodsKndCd':'01'}); return false;" class="btn xsm primary mt-5">검색</a>--%>
<%-- </c:if>--%>
<%-- <c:if test="${empty resultMap.bannerInfo.goodsInfo}">--%>
<%-- <a href="#" onclick="fn_open_modal('#modalDiv','#product-search','/mngr/goods/goodsmngr/selectGoodsSrchPopupForm',{'goodsKndCd':'01'}); return false;" class="btn xsm primary mt-5">검색</a>--%>
<%-- </c:if>--%>
<%-- </div>--%>
<%-- </th>--%>
<%-- <td>--%>
<%-- <div class="td-inner">--%>
<%-- <div id="parentGoodsContainer" class="product-group">--%>
<%-- <!-- 여기에 선택한 상품 정보가 추가됩니다 -->--%>
<%-- <c:if test="${not empty resultMap.bannerInfo.goodsInfo}">--%>
<%-- <c:forEach items="${ resultMap.bannerInfo.goodsInfo }" var="goodsInfo" varStatus="gdsInfoStatus">--%>
<%-- <div class="product-group__item">--%>
<%-- <input type="hidden" id="relatedGoodsId" name="relatedGoodsId" value="<c:out value="${(goodsInfo.goodsInnb)}"/>">--%>
<%-- <input type="hidden" name="relatedGoodsNm" value="<c:out value="${(goodsInfo.goodsNm)}"/>">--%>
<%-- <input type="hidden" name="relatedGoodsImg" value="<c:out value="${(goodsInfo.goodsImgCours)}"/>">--%>
<%-- <input type="hidden" name="relatedGoodsPrice" value="<c:out value="${(goodsInfo.cnsmrpric)}"/>">--%>
<%-- <span class="product-group__item-number"><c:out value="${(gdsInfoStatus.count)}"/></span>--%>
<%-- <div class="product-group__image">--%>
<%-- <spring:eval expression="@environment.getProperty('mngrfo.common.fileupload.cdnurl')" var="cdnurl"/> <!-- onerror="this.src='/mngr/images/image_placeholder.png'" -->--%>
<%-- <img src="<c:out value='${cdnurl}'/><c:out value="${(goodsInfo.goodsImgCours)}"/>" width="140" alt="<c:out value="${(goodsInfo.goodsNm)}"/>">--%>
<%-- </div>--%>
<%-- <div class="product-group__description">--%>
<%-- <p><c:out value="${(goodsInfo.goodsNm)}"/></p>--%>
<%-- <p class="product-group__description-price"><c:out value="${(goodsInfo.cnsmrpric)}"/>원</p>--%>
<%-- </div>--%>
<%-- </div>--%>
<%-- </c:forEach>--%>
<%-- </c:if>--%>
<%-- </div>--%>
<%-- </div>--%>
<%-- </td>--%>
<%-- </tr>--%>
<%-- </tbody>--%>
<%-- </table>--%>
<%-- </div>--%>
<%-- </div>--%>
<%-- </section>--%>
<button class="scroll-to-top"><span class="visually-hidden">위로가기</span></button>
</div>
</div>
<div id="modalDiv"></div>
</main>
</body>
</html>