|
@@ -14,129 +14,223 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="modify_option_area" id="modifyOptionArea" style="display:none">
|
|
<div class="modify_option_area" id="modifyOptionArea" style="display:none">
|
|
|
|
|
+ <th:block th:if="${exchangeOptionInfo}" th:each="oneData, status : ${exchangeOptionInfo}">
|
|
|
|
|
+ <th:block th:if="${chgQty > 0}" th:each="num, index : ${#numbers.sequence(1,chgQty)}">
|
|
|
|
|
+ <div class="modify_box" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, num=${num}" style="display:none">
|
|
|
|
|
+ <div class="name_blk" th:text="|${oneData.itemNm} / ${oneData.colorNm}|"></div>
|
|
|
|
|
+ <div class="select_blk">
|
|
|
|
|
+ <!-- 옵션교환 라디오 형태 -->
|
|
|
|
|
+ <div class="sel_radio" th:if="${oneData.selfGoodsYn == 'Y'}">
|
|
|
|
|
+ <input type="hidden" name="chgOptCd2" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, orgOptCd2=${oneData.optCd2}">
|
|
|
|
|
+ <div th:class="|form_field ${oneData.ordDtlItemSq}|">
|
|
|
|
|
+ <div th:if="${oneData.optCd2Arr.length > 0}" th:each="option, idx : ${oneData.optCd2Arr}">
|
|
|
|
|
+ <input type="radio" th:name="|${oneData.ordDtlItemSq}_${num}|" th:id="|${oneData.ordDtlItemSq}_${option}_${num}|" th:value="${option}" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, num=${num}" th:disabled="${#numbers.formatInteger(oneData.currStockQtyArr[idx.index], 0)} <= 0 or ${oneData.soldoutYnArr[idx.index] == 'Y'}" onclick="fnRadioOption(this);">
|
|
|
|
|
+ <label th:for="|${oneData.ordDtlItemSq}_${option}_${num}|"><span th:text="${option}"></span></label>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <!-- //옵션교환 라디오 형태 -->
|
|
|
|
|
+ <!-- 옵션교환 셀렉트박스 형태 -->
|
|
|
|
|
+ <div class="sel_select" th:unless="${oneData.selfGoodsYn == 'Y'}">
|
|
|
|
|
+ <div class="form_field">
|
|
|
|
|
+ <div class="select_custom exchange_option">
|
|
|
|
|
+ <div class="combo">
|
|
|
|
|
+ <input type="hidden" name="chgOptCd2" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, orgOptCd2=${oneData.optCd2}">
|
|
|
|
|
+ <div class="select">옵션 선택</div>
|
|
|
|
|
+ <ul class="list">
|
|
|
|
|
+ <!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" / 품절표기 data-soldout="true" 추가 -->
|
|
|
|
|
+ <li class="selected" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, num=${num}, optCd2=''" onclick="fnSelectOption(this);">옵션 선택</li>
|
|
|
|
|
+ <th:block th:each="option, idx : ${oneData.optCd2Arr}">
|
|
|
|
|
+ <li th:if="${oneData.optCd2Arr.length} > 0 and (${#numbers.formatInteger(oneData.currStockQtyArr[idx.index],0)} <= 0 or ${oneData.soldoutYnArr[idx.index]} == 'Y')" th:text="${option}" aria-disabled="true" data-soldout="true" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, num=${num}, optCd2=''" onclick="fnSelectOption(this);"></li>
|
|
|
|
|
+ <li th:if="${oneData.optCd2Arr.length} > 0 and ${#numbers.formatInteger(oneData.currStockQtyArr[idx.index],0)} > 0 and ${oneData.soldoutYnArr[idx.index]} == 'N'" th:text="${option}" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, num=${num}, optCd2=${option}" onclick="fnSelectOption(this);"></li>
|
|
|
|
|
+ </th:block>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <!-- //옵션교환 셀렉트박스 형태 -->
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="allcheck_blk" th:if="${num} == 1">
|
|
|
|
|
+ <div class="form_field">
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <input th:id="|${oneData.ordDtlItemSq}_checkAll|" name="chk_exchange_all1" type="checkbox" checked="" onclick="fnSelectOptionChange();"><label th:for="|${oneData.ordDtlItemSq}_checkAll|"><span>선택 옵션으로 전체 교환</span></label>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </th:block>
|
|
|
|
|
+ </th:block>
|
|
|
</div>
|
|
</div>
|
|
|
</form>
|
|
</form>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="modal-footer">
|
|
<div class="modal-footer">
|
|
|
- <button type="button" id="" class="btn btn_dark"><span>옵션 저장</span></button>
|
|
|
|
|
|
|
+ <button type="button" id="" class="btn btn_dark" onclick="fnSaveOption();"><span>옵션 저장</span></button>
|
|
|
</div>
|
|
</div>
|
|
|
<script th:inline="javascript">
|
|
<script th:inline="javascript">
|
|
|
let exchangeOptionInfo = [[${exchangeOptionInfo}]];
|
|
let exchangeOptionInfo = [[${exchangeOptionInfo}]];
|
|
|
let chgQty = [[${chgQty}]];
|
|
let chgQty = [[${chgQty}]];
|
|
|
|
|
+ let checkedOrdDtlItemSqArr = [];
|
|
|
|
|
|
|
|
$(document).ready( function() {
|
|
$(document).ready( function() {
|
|
|
- var exchange_option_selecter1 = new sCombo('#exchangePop .select_custom.exchange_option1');
|
|
|
|
|
- var exchange_option_selecter2 = new sCombo('#exchangePop .select_custom.exchange_option2');
|
|
|
|
|
-
|
|
|
|
|
- //$('.form_field input:checkbox').eq(0).click();
|
|
|
|
|
|
|
+ // 셀렉트박스 활성화
|
|
|
|
|
+ $('#exchangePop .select_custom.exchange_option').each(function() {
|
|
|
|
|
+ new sCombo($(this));
|
|
|
|
|
+ });
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
- //
|
|
|
|
|
- var fnSelectOptionChange = function(param) {
|
|
|
|
|
- let ordDtlItemSq = $(param).attr('ordDtlItemSq');
|
|
|
|
|
- let ordDtlItemSqArr = [];
|
|
|
|
|
|
|
+ // 구성상품 선택 및 전체 적용 클릭 이벤트
|
|
|
|
|
+ var fnSelectOptionChange = function() {
|
|
|
|
|
+ checkedOrdDtlItemSqArr = [];
|
|
|
let cnt = 0;
|
|
let cnt = 0;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 체크 수량 조회
|
|
// 체크 수량 조회
|
|
|
$.each($('.select_option_area .form_field input:checkbox'), function(idx, item) {
|
|
$.each($('.select_option_area .form_field input:checkbox'), function(idx, item) {
|
|
|
if ($(item).is(':checked')) {
|
|
if ($(item).is(':checked')) {
|
|
|
- ordDtlItemSqArr.push(Number($(item).attr('ordDtlItemSq')));
|
|
|
|
|
|
|
+ checkedOrdDtlItemSqArr.push($(item).attr('ordDtlItemSq'));
|
|
|
cnt++;
|
|
cnt++;
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 옵션변경영역 처리
|
|
// 옵션변경영역 처리
|
|
|
if (cnt > 0) {
|
|
if (cnt > 0) {
|
|
|
$('#modifyOptionArea').css('display', '');
|
|
$('#modifyOptionArea').css('display', '');
|
|
|
} else {
|
|
} else {
|
|
|
$('#modifyOptionArea').css('display', 'none');
|
|
$('#modifyOptionArea').css('display', 'none');
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ $.each($('.modify_box'), function(idx, item) {
|
|
|
|
|
+ let ordDtlItemSq = $(item).attr('ordDtlItemSq');
|
|
|
|
|
+ let num = $(item).attr('num');
|
|
|
|
|
+ let id = '#' + ordDtlItemSq + '_checkAll';
|
|
|
|
|
+
|
|
|
|
|
+ if (checkedOrdDtlItemSqArr.includes(ordDtlItemSq)) {
|
|
|
|
|
+ if (num == 1) {
|
|
|
|
|
+ $(item).css('display', '');
|
|
|
|
|
+ } else if ($(id).is(':checked')) {
|
|
|
|
|
+ $(item).css('display', 'none');
|
|
|
|
|
+ } else {
|
|
|
|
|
+ $(item).css('display', '');
|
|
|
|
|
+ }
|
|
|
|
|
+ } else {
|
|
|
|
|
+ $(item).css('display', 'none');
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ fnChangeCss();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 라디오 클릭 이벤트
|
|
|
|
|
+ var fnRadioOption = function(param) {
|
|
|
|
|
+ let ordDtlItemSq = $(param).attr('ordDtlItemSq');
|
|
|
|
|
+ let num = $(param).attr('num');
|
|
|
|
|
+ let optCd2 = $(param).val();
|
|
|
|
|
+ let checkAllId = '#' + ordDtlItemSq + '_checkAll';
|
|
|
|
|
+ let radioId = '.' + ordDtlItemSq + ' input:radio';
|
|
|
|
|
+
|
|
|
|
|
+ $(param).parent().parent().parent().find('input[name=chgOptCd2]').val(optCd2);
|
|
|
|
|
|
|
|
- if (ordDtlItemSqArr.length > 0) {
|
|
|
|
|
- // TODO
|
|
|
|
|
- // 옵션변경영역 표기
|
|
|
|
|
- $('#modifyOptionArea').css('display', '');
|
|
|
|
|
|
|
+ if (num == 1 && $(checkAllId).is(':checked')) {
|
|
|
|
|
+ $.each($(radioId), function(idx, item) {
|
|
|
|
|
+ if ($(item).attr('num') != 1 && optCd2 == $(item).val()) {
|
|
|
|
|
+ $(item).click();
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 셀렉트박스 클릭 이벤트
|
|
|
|
|
+ var fnSelectOption = function(param) {
|
|
|
|
|
+ let ordDtlItemSq = $(param).attr('ordDtlItemSq');
|
|
|
|
|
+ let num = $(param).attr('num');
|
|
|
|
|
+ let optCd2 = $(param).attr('optCd2');
|
|
|
|
|
+ let checkAllId = '#' + ordDtlItemSq + '_checkAll';
|
|
|
|
|
|
|
|
- let html = '';
|
|
|
|
|
- $.each(exchangeOptionInfo, function(idx, item) {
|
|
|
|
|
- console.log(ordDtlItemSqArr);
|
|
|
|
|
- console.log(item.ordDtlItemSq);
|
|
|
|
|
- if (ordDtlItemSqArr.includes(item.ordDtlItemSq)) {
|
|
|
|
|
- html += ' <div class="modify_box">';
|
|
|
|
|
- html += ' <div class="name_blk">' + item.itemNm + ' / ' + item.optCd1 + '</div>';
|
|
|
|
|
- html += ' <div class="select_blk">';
|
|
|
|
|
|
|
+ $(param).parent().parent().find('input[name=chgOptCd2]').val(optCd2);
|
|
|
|
|
|
|
|
- if (item.selfGoodsYn == 'Y') {
|
|
|
|
|
- html += ' <div class="sel_radio">';
|
|
|
|
|
- html += ' <div class="form_field">';
|
|
|
|
|
- html += ' <input type="hidden" name="chgOptCd2">';
|
|
|
|
|
- } else {
|
|
|
|
|
- html += ' <div class="sel_select">';
|
|
|
|
|
- html += ' <div class="form_field">';
|
|
|
|
|
- html += ' <div class="select_custom exchange_option1">';
|
|
|
|
|
- html += ' <div class="combo">';
|
|
|
|
|
- html += ' <input type="hidden" name="chgOptCd2">';
|
|
|
|
|
- html += ' <div class="select">옵션 선택</div>';
|
|
|
|
|
- html += ' <ul class="list">';
|
|
|
|
|
- html += ' <!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" / 품절표기 data-soldout="true" 추가 -->';
|
|
|
|
|
- html += ' <li class="selected">옵션 선택</li>';
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ if (num == 1 && $(checkAllId).is(':checked')) {
|
|
|
|
|
+ $.each($('.exchange_option li'), function(idx, item) {
|
|
|
|
|
+ if ($(item).attr('num') != 1 && optCd2 == $(item).attr('optCd2')) {
|
|
|
|
|
+ $(item).click();
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 옵션 저장 버튼 클릭 이벤트
|
|
|
|
|
+ var fnSaveOption = function() {
|
|
|
|
|
+ // 옵션 선택 여부 확인
|
|
|
|
|
+ if (checkedOrdDtlItemSqArr.length <= 0) {
|
|
|
|
|
+ mcxDialog.alert('교환 옵션을 선택해주세요.');
|
|
|
|
|
+ return false;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- $.each(item.optCd2Arr, function(index, option) {
|
|
|
|
|
- let optCd2 = option;
|
|
|
|
|
- let currStockQty = item.currStockQtyArr[index];
|
|
|
|
|
- let soldoutYn = item.soldoutYnArr[index];
|
|
|
|
|
-
|
|
|
|
|
- if (item.selfGoodsYn == 'Y') {
|
|
|
|
|
- html += ' <div>';
|
|
|
|
|
- if (currStockQty <= 0 || soldoutYn == 'Y') {
|
|
|
|
|
- html += ' <input type="radio" name="chgOptCd2" id="' + item.ordDtlItemSq + '_' + optCd2 + '" value="' + optCd2 + '" ordDtlItemSq="' + item.ordDtlItemSq + '" disabled>';
|
|
|
|
|
- } else if (item.optCd2 == option) {
|
|
|
|
|
- html += ' <input type="radio" name="chgOptCd2" id="' + item.ordDtlItemSq + '_' + optCd2 + '" value="' + optCd2 + '" ordDtlItemSq="' + item.ordDtlItemSq + '" checked>';
|
|
|
|
|
- } else {
|
|
|
|
|
- html += ' <input type="radio" name="chgOptCd2" id="' + item.ordDtlItemSq + '_' + optCd2 + '" value="' + optCd2 + '" ordDtlItemSq="' + item.ordDtlItemSq + '">';
|
|
|
|
|
- }
|
|
|
|
|
- html += ' <label for="' + item.ordDtlItemSq + '_' + optCd2 + '"><span>' + optCd2 + '</span></label>';
|
|
|
|
|
- html += ' </div>';
|
|
|
|
|
- } else {
|
|
|
|
|
- if (currStockQty <= 0 || soldoutYn == 'Y') {
|
|
|
|
|
- html += ' <li aria-disabled="true" data-soldout="true">' + option + '</li>';
|
|
|
|
|
- } else {
|
|
|
|
|
- html += ' <li optCd2="' + option + '" onclick="fnSelectOption(this);">' + option + '</li>';
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
-
|
|
|
|
|
- if (item.selfGoodsYn != 'Y') {
|
|
|
|
|
- html += ' </ul>';
|
|
|
|
|
- html += ' </div>';
|
|
|
|
|
- html += ' </div>';
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ // 변경 옵션 처리
|
|
|
|
|
+ let dataArr = [];
|
|
|
|
|
+ let ordDtlItemSq = 0;
|
|
|
|
|
+ let index = 0;
|
|
|
|
|
+ let chgOptCd2Arr = [];
|
|
|
|
|
+ let selectOptionCheck = true;
|
|
|
|
|
|
|
|
- html += ' </div>';
|
|
|
|
|
- html += ' </div>';
|
|
|
|
|
- html += ' </div>';
|
|
|
|
|
- html += ' <div class="allcheck_blk">';
|
|
|
|
|
- html += ' <div class="form_field">';
|
|
|
|
|
- html += ' <div>';
|
|
|
|
|
- html += ' <input id="chk_exchange_all1" name="chk_exchange_all1" type="checkbox" checked=""><label for="chk_exchange_all1"><span>선택 옵션으로 전체 교환</span></label>';
|
|
|
|
|
- html += ' </div>';
|
|
|
|
|
- html += ' </div>';
|
|
|
|
|
- html += ' </div>';
|
|
|
|
|
- html += ' </div>';
|
|
|
|
|
|
|
+ $.each($('input[name=chgOptCd2]'), function(idx, item) {
|
|
|
|
|
+ let chgOrdDtlItemSq = $(item).attr('ordDtlItemSq');
|
|
|
|
|
+ let changeYn = checkedOrdDtlItemSqArr.includes(chgOrdDtlItemSq)
|
|
|
|
|
+ let chgOptCd2 = changeYn ? $(item).val() : $(item).attr('orgOptCd2');
|
|
|
|
|
+ if (ordDtlItemSq != Number(chgOrdDtlItemSq)) {
|
|
|
|
|
+ if (index > 0) {
|
|
|
|
|
+ let data = {};
|
|
|
|
|
+ data.ordDtlItemSq = ordDtlItemSq;
|
|
|
|
|
+ data.changeYn = changeYn ? 'Y' : 'N'
|
|
|
|
|
+ data.chgOptCd2Arr = chgOptCd2Arr;
|
|
|
|
|
+ dataArr.push(data);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- $('#modifyOptionArea').html(html);
|
|
|
|
|
-
|
|
|
|
|
- if (item.selfGoodsYn != 'Y') {
|
|
|
|
|
- var exchange_option_selecter1 = new sCombo('#exchangePop .select_custom.exchange_option1');
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- } else {
|
|
|
|
|
- // TODO
|
|
|
|
|
- // 옵션변경영역 초기화
|
|
|
|
|
- // 옵션변경영역 히든처리
|
|
|
|
|
|
|
+ ordDtlItemSq = chgOrdDtlItemSq;
|
|
|
|
|
+ chgOptCd2Arr = [];
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ chgOptCd2Arr.push(chgOptCd2);
|
|
|
|
|
+
|
|
|
|
|
+ index++;
|
|
|
|
|
+
|
|
|
|
|
+ // 옵션 선택 여부 설정
|
|
|
|
|
+ if (changeYn && gagajf.isNull($(item).val())) {
|
|
|
|
|
+ selectOptionCheck = false;
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 옵션 선택 여부 체크
|
|
|
|
|
+ if (!selectOptionCheck) {
|
|
|
|
|
+ mcxDialog.alert('교환 옵션을 선택해주세요.');
|
|
|
|
|
+ return false;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ let data = {};
|
|
|
|
|
+ data.ordDtlItemSq = ordDtlItemSq;
|
|
|
|
|
+ data.changeYn = checkedOrdDtlItemSqArr.includes(ordDtlItemSq) ? 'Y' : 'N'
|
|
|
|
|
+ data.chgOptCd2Arr = chgOptCd2Arr;
|
|
|
|
|
+ dataArr.push(data);
|
|
|
|
|
+
|
|
|
|
|
+ console.log(dataArr);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 옵션 선택 영역 CSS 수정
|
|
|
|
|
+ var fnChangeCss = function() {
|
|
|
|
|
+ let index = 0;
|
|
|
|
|
+ $.each($('.modify_box'), function(idx, item) {
|
|
|
|
|
+ if ($(item).css('display') == 'block') {
|
|
|
|
|
+ index++;
|
|
|
|
|
+ if (index == 1) {
|
|
|
|
|
+ $(item).css('margin-top', '0');
|
|
|
|
|
+ $(item).css('padding-top', '0');
|
|
|
|
|
+ $(item).css('border-top', 'none');
|
|
|
|
|
+ } else {
|
|
|
|
|
+ $(item).css('margin-top', '30px');
|
|
|
|
|
+ $(item).css('padding-top', '30px');
|
|
|
|
|
+ $(item).css('border-top', '1px dashed #ddd');
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|