MainGnbContentsPopupForm.html 36 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897
  1. <!DOCTYPE html>
  2. <html lang="ko"
  3. xmlns:th="http://www.thymeleaf.org">
  4. <!--
  5. *******************************************************************************
  6. * @source : MainContentsPopupForm.html
  7. * @desc : 메인전시 GNB 카테고리탭 컨텐츠 수정 팝업 Page
  8. *============================================================================
  9. * STYLE24
  10. * Copyright(C) 2020 TSIT, All rights reserved.
  11. *============================================================================
  12. * VER DATE AUTHOR DESCRIPTION
  13. * === =========== ========== =============================================
  14. * 1.0 2021.2.23 bin2107 최초 작성
  15. *******************************************************************************
  16. -->
  17. <div class="modalPopup" data-width="1400" >
  18. <div class="panelStyle">
  19. <div class="panelTitle">
  20. <h2 id="popTitle" th:text="${contentsLoc}"></h2>
  21. <button type="button" class="close" onclick="fnMainGnbContentsPopupFormClose()"><i class="fa fa-times"></i></button>
  22. </div>
  23. <div class="panelContent">
  24. <ul class="panelBar">
  25. <li class="aL">
  26. <span class="cBlue">* 상단으로 드래그&amp;드랍하여 순서 변경 가능합니다.d</span>
  27. </li>
  28. <li class="aR">
  29. <button type="button" class="btn btn btn-base btn-sm" onclick="fnAddTab(this);">TAB 컨텐츠 추가</button>
  30. <button type="button" class="btn btn btn-dark btn-sm" id="btnGnbTabSave">임시저장</button>
  31. </li>
  32. </ul>
  33. </div>
  34. <form style="height:600px; width:1370px; overflow:auto;" id="gnbTabList">
  35. </form>
  36. </div>
  37. </div>
  38. <script th:inline="javascript">
  39. /*<![CDATA[*/
  40. var cateNo = [[${cateNo}]];
  41. var contentsLoc = [[${contentsLoc}]];
  42. var brandGroupNo = [[${brandGroupNo}]];
  43. var contentsTitle = [[${contentsTitle}]];
  44. var contentsLocArr = gagajf.convertToArray([[${contentsLocList}]]);
  45. var tdWidth = $("#gnbTabList").find("td").width();
  46. var tdDeleteWidth = parseInt(tdWidth/11, 10);
  47. tdWidth = tdWidth - tdDeleteWidth;
  48. var cate1List = [[${cate1List}]];
  49. var tableIdx = 0;
  50. // 컨텐츠 추가 날짜 설정
  51. var fnCreateTimeOption = function(val, sel) {
  52. var html = '';
  53. for(var i=0; i<val; i++){
  54. var time = 0;
  55. if(i<10){
  56. time = '0'+i;
  57. }else {
  58. time = i;
  59. }
  60. var select = false;
  61. if(sel==time){
  62. select = true;
  63. }
  64. if(val==24){
  65. time += '시';
  66. }else if(val==60){
  67. time += '분';
  68. }
  69. html += '<option value="'+time+'"';
  70. if(select){
  71. html += 'selected="selected"';
  72. }
  73. html += '>'+time+'</option>';
  74. }
  75. return html;
  76. }
  77. // 탭추가
  78. var addIdx = 0;
  79. var fnAddTab = function (param){
  80. addIdx = tableIdx;
  81. var html = '';
  82. html += '<table class="frmStyle tabTable" style="margin-bottom:30px" id="tabTable'+addIdx+'">';
  83. html += '<input type="hidden" name="tableIdx" value="'+addIdx+'" data-id="'+addIdx+'" />';
  84. html += ' <colgroup>';
  85. html += ' <col style="width:10%;"/>';
  86. html += ' <col style="width:55%;"/>';
  87. html += ' <col/>';
  88. html += ' </colgroup>';
  89. html += ' <thead>';
  90. if(contentsLoc=='STAB002'){
  91. html += '<tr class="cateTypeTr">';
  92. html += ' <th>유형선택</th>';
  93. html += ' <td colspan="3">';
  94. html += ' <label class="rdoBtn"><input type="radio" name="cateType'+addIdx+'" value="C" onclick="fnChangeCateType(this,'+addIdx+');"/>대카테고리</label>';
  95. html += ' <label class="rdoBtn"><input type="radio" name="cateType'+addIdx+'" value="O" onclick="fnChangeCateType(this,'+addIdx+');"/>아울렛</label>';
  96. html += ' <label class="rdoBtn"><input type="radio" name="cateType'+addIdx+'" value="L" onclick="fnChangeCateType(this,'+addIdx+');"/>이벤트링크</label>';
  97. html += ' </td>';
  98. html += '</tr>';
  99. }else if(contentsLoc=='SBM002' || contentsLoc=='SBMM002'){
  100. html += '<tr class="cateTypeTr">';
  101. html += ' <th>유형선택</th>';
  102. html += ' <td colspan="3">';
  103. html += ' <label class="rdoBtn"><input type="radio" name="cateType'+addIdx+'" value="L" onclick="fnChangeGnbType(this,'+addIdx+');" checked="checked"/>이벤트링크</label>';
  104. html += ' <label class="rdoBtn"><input type="radio" name="cateType'+addIdx+'" value="B" onclick="fnChangeGnbType(this,'+addIdx+');" />룩북</label>';
  105. html += ' <label class="rdoBtn"><input type="radio" name="cateType'+addIdx+'" value="P" onclick="fnChangeGnbType(this,'+addIdx+');" />기획전</label>';
  106. html += ' </td>';
  107. html += '</tr>';
  108. }
  109. html += ' <tr>';
  110. html += ' <th>전시일시</th>';
  111. html += ' <td><input name="dispStdt" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="노출시작일" data-valid-type="calendar"/>';
  112. html += ' <select name="stTimeHour" required="required" data-valid-name="노출기간 시작시간">';
  113. html += fnCreateTimeOption(24);
  114. html += ' </select>';
  115. html += ' <select name="stTimeMin" required="required" data-valid-name="노출기간 시작시간">';
  116. html += fnCreateTimeOption(60);
  117. html += ' </select>';
  118. html += ' <span> ~ </span>';
  119. html += ' <input name="dispEddt" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="노출종료일" data-valid-type="calendar"/>';
  120. html += ' <select name="edTimeHour" required="required" data-valid-name="노출기간 종료시간">';
  121. html += fnCreateTimeOption(24,23);
  122. html += ' </select>';
  123. html += ' <select name="edTimeMin" required="required" data-valid-name="노출기간 종료시간">';
  124. html += fnCreateTimeOption(60,59);
  125. html += ' </select>';
  126. html += ' <input name="dispOrd" type="text" class="w80"placeholder="전시순서" style="margin-left:5px; text-align:center"/>';
  127. html += ' </td>';
  128. html += ' <td class="aL cateTypeBtnArea">';
  129. html += ' <button type="button" class="btn btn-danger btn-lg" onclick="fnDeleteContentsRow(this);">삭제</button></td>';
  130. html += ' </tr>';
  131. html += ' </thead>';
  132. html += ' <tbody>';
  133. if(contentsLoc=='STAB001'){
  134. for(var i=0; i<3; i++){
  135. html += ' <tr class="groupTr">';
  136. html += ' <th>GROUP '+(i+1)+'<br><input type="text" name="brandGroup'+addIdx+'" id="bTitle'+(i+1)+'" class="w100" value=""/><br>';
  137. html += ' <button type="button" class="btn btn-base btn-lg" onclick="fnSearchBrand(\''+addIdx+'\',\''+(i+1)+'\');">브랜드조회</button><br></th>';
  138. html += ' <td colspan="2" name="brandArr'+addIdx+'" id="tabBrand'+(i+1)+'">';
  139. html += ' <div class="sortableWrap" data-unit="7" style="overflow-y:scroll;">';
  140. html += ' <div class="itemWrap ui-sortable" id="brandListTd'+(i+1)+'" data-id="'+(i+1)+'">';
  141. html += ' </div>';
  142. html += ' </div>';
  143. html += ' </td>';
  144. html += ' </tr>';
  145. }
  146. }else if(contentsLoc=='SBM002'||contentsLoc=='SBMM002'){
  147. html += ' <tr name="tabLinkTitleRow">';
  148. html += ' <th>타이틀</th>';
  149. html += ' <td><input name="title" type="text" maxlength="200" data-valid-name="타이틀" value=""/></td>';
  150. html += ' </tr>';
  151. html += ' <tr name="tabLinkRow">';
  152. html += ' <th>링크 (없으면 #)<br>(메인은 /)</th>';
  153. html += ' <td><input name="link" type="text" maxlength="200" placeholder="외부 URL 입력시 https:// 붙여주세요. ex)https://www.levis-kids.co.kr" data-valid-name="링크" value=""/></td>';
  154. html += ' </tr>';
  155. }else{
  156. html += ' <tr name="tabCateRow" style="display:none;">';
  157. html += ' <th>카테고리</th>';
  158. html += ' <td colspan="3">카테고리선택';
  159. html += ' <select name="cate1List">';
  160. html += ' <option value="">[선택]</option>';
  161. for(let i=0; i<cate1List.length; i++){
  162. html += '<option value="'+cate1List[i].cd+'">['+cate1List[i].cd+'] '+cate1List[i].cdNm+'</option>';
  163. }
  164. html += ' </select>';
  165. html += ' </td>';
  166. html += ' </tr>';
  167. html += ' <tr name="tabLinkTitleRow" style="display:none;">';
  168. html += ' <th>타이틀</th>';
  169. html += ' <td><input name="title" type="text" maxlength="200" data-valid-name="타이틀" value=""/></td>';
  170. html += ' </tr>';
  171. html += ' <tr name="tabLinkRow" style="display:none;">';
  172. html += ' <th>링크 (없으면 #)<br>(메인은 /)</th>';
  173. html += ' <td><input name="link" type="text" maxlength="200" placeholder="외부 URL 입력시 https:// 붙여주세요. ex)https://www.levis-kids.co.kr" data-valid-name="링크" value=""/></td>';
  174. html += ' </tr>';
  175. }
  176. html += ' </tbody>';
  177. html += '</table>';
  178. $("#gnbTabList").prepend(html);
  179. $("#gnbTabList").sortable();
  180. $('.schDate').datepicker("destroy");
  181. $('.schDate').datepicker({
  182. changeMonth: true,
  183. changeYear: true,
  184. defaultDate: $('.schDate').val()
  185. });
  186. if(contentsLoc=='STAB001'){
  187. $("#brandListTd1").sortable();
  188. $("#brandListTd2").sortable();
  189. $("#brandListTd3").sortable();
  190. }
  191. fnResetDispOrd();
  192. tableIdx = tableIdx+1;
  193. }
  194. var tabTableRow;
  195. var callbackBrandTr;
  196. var fnSearchBrand = function (idx,brandTr){
  197. tabTableRow = idx;
  198. callbackBrandTr = brandTr;
  199. cfnOpenBrandGroupListPopup("callBackBrandGroup", "S", "S");
  200. }
  201. // 브랜드 코드, 브랜드 명, 브랜드 이미지 3개 불러와야함 -> 로직 수정 필요
  202. var brandCdIdx=0;
  203. var uploadGoodsUrl = [[${@environment.getProperty('domain.image')}]];
  204. var callBackBrandGroup = function (result) {
  205. var html = '';
  206. brandCdIdx = $("#tabTable" + tabTableRow + " #brandListTd" + callbackBrandTr + " >ul").size()
  207. for (let i = 0; i < result.length; i++) {
  208. html += '<ul id="brandUl' + brandCdIdx + '" class="item ui-state-default brandClass" style="min-height:80px;">';
  209. html += ' <input type="hidden" name="brandGroupNo" value="' + result[i].brandGroupNo + '">';
  210. html += ' <input type="hidden" name="imgPath1" value="' + result[i].logoFileNm + '">';
  211. html += ' <li class="img">';
  212. html += ' <img style="height:100%;" src="' + uploadGoodsUrl + "/" + result[i].logoFileNm + '" onerror="this.src=\'/image/no.png\';"/>';
  213. html += ' </li>';
  214. html += ' <li class="cont">';
  215. html += ' <ul>';
  216. html += ' <li class="no" name="brandCdLi"><span>' + result[i].brandGroupNo + '</span>';
  217. html += ' <span style="margin-left:5px;"><a href="javascript:void(0);" onclick="fnRemoveBrand(this,'+tabTableRow+','+callbackBrandTr+',' + brandCdIdx + ');">X</a></span>';
  218. html += ' </li>';
  219. html += ' <li class="title">' + result[i].brandGroupNm + '</li>';
  220. html += ' </ul>';
  221. html += ' </li>';
  222. html += '</ul>';
  223. }
  224. $("#tabTable" + tabTableRow + " #brandListTd" + callbackBrandTr).append(html);
  225. brandCdIdx++;
  226. }
  227. var fnRemoveBrand = function (obj ,tableRow, brandTr, idx){
  228. $("#tabTable" + tableRow + " #brandListTd" + brandTr+ " #brandUl" + idx).remove();
  229. // var divId = $(obj).closest('div').attr('id');
  230. // $("#"+divId+" #brandUl"+idx).remove();
  231. //fnReloadGoodsListIdx(divId);
  232. }
  233. // 카테고리 유형 선택
  234. var fnChangeCateType = function (obj, idx){
  235. let cateType = $("#tabTable"+idx).find("input:radio[name=cateType"+idx+"]:checked").val();
  236. if(cateType=='C'){
  237. $(obj).closest("table").find("[name=tabCateRow]").show();
  238. $(obj).closest("table").find("[name=tabOutletRow]").hide();
  239. $(obj).closest("table").find("[name=tabLinkTitleRow]").hide();
  240. $(obj).closest("table").find("[name=tabLinkRow]").hide();
  241. }else if(cateType=='O'){
  242. $(obj).closest("table").find("[name=tabCateRow]").hide();
  243. $(obj).closest("table").find("[name=tabLinkTitleRow]").hide();
  244. $(obj).closest("table").find("[name=tabLinkRow]").hide();
  245. }else if(cateType=='L'){
  246. $(obj).closest("table").find("[name=tabCateRow]").hide();
  247. $(obj).closest("table").find("[name=tabOutletRow]").hide();
  248. $(obj).closest("table").find("[name=tabLinkTitleRow]").show();
  249. $(obj).closest("table").find("[name=tabLinkRow]").show();
  250. }
  251. }
  252. // 창닫기
  253. var fnMainGnbContentsPopupFormClose = function (){
  254. uifnPopupClose('popupMainGnbContents');
  255. }
  256. // 컨텐츠 행삭제
  257. var fnDeleteContentsRow = function (obj){
  258. mcxDialog.confirm('삭제시 전시순서가 초기화됩니다. 삭제하시겠습니까?', {
  259. cancelBtnText: "취소",
  260. sureBtnText: "확인",
  261. sureBtnClick: function(){
  262. $(obj).closest("table").remove();
  263. fnResetDispOrd();
  264. }
  265. });
  266. }
  267. // 전시 일시 체크
  268. function dateValidation(){
  269. var dateBool = true;
  270. $(".tabTable").each(function(i){
  271. var dispStdt = $(this).find("[name=dispStdt]").val().replace(/[^0-9]/g, '') + "" +$(this).find("[name=stTimeHour]").val().replace('시', '') + "" +$(this).find("[name=stTimeMin]").val().replace('분', '') + "00";
  272. var dispEddt = $(this).find("[name=dispEddt]").val().replace(/[^0-9]/g, '') + "" +$(this).find("[name=edTimeHour]").val().replace('시', '') + "" +$(this).find("[name=edTimeMin]").val().replace('분', '') + "59";
  273. let fromDate = dispStdt.replace(/[^0-9]/g, '');
  274. let toDate = dispEddt.replace(/[^0-9]/g, '');
  275. if(fromDate > toDate){
  276. mcxDialog.alert("시작일자는 종료일자 보다 클 수 없습니다.");
  277. $(this).find('input[name=dispStdt]').focus();
  278. dateBool = false;
  279. }
  280. });
  281. if(!dateBool){
  282. return false;
  283. }else{
  284. return true;
  285. }
  286. }
  287. // 데이터 체크
  288. function groupDataValidation(){
  289. var dataBool = true;
  290. $(".tabTable").each(function (i){
  291. var thisIdx = $(this).find("input[name=tableIdx]").val();
  292. $(this).find("input[name=brandGroup"+thisIdx+"]").each(function (idx2){
  293. if(gagajf.isNull($(this).val())){
  294. mcxDialog.alert((i+1)+"번째 컨텐츠영역의 "+(idx2+1)+"번째 GROUP명을 입력해주세요.");
  295. $(this).focus();
  296. dataBool = false;
  297. }
  298. });
  299. if($("#tabTable"+thisIdx+" #tabBrand1 #brandListTd1").find('ul').find('input[name=brandGroupNo]').length < 1){
  300. mcxDialog.alert((i+1)+"번째 컨텐츠영역의 1번째 브랜드 정보가 없습니다.");
  301. $(this).focus();
  302. dataBool = false;
  303. }
  304. if($("#tabTable"+thisIdx+" #tabBrand2 #brandListTd2").find('ul').find('input[name=brandGroupNo]').length < 1){
  305. mcxDialog.alert((i+1)+"번째 컨텐츠영역의 2번째 브랜드 정보가 없습니다.");
  306. $(this).focus();
  307. dataBool = false;
  308. }
  309. if($("#tabTable"+thisIdx+" #tabBrand3 #brandListTd3").find('ul').find('input[name=brandGroupNo]').length < 1){
  310. mcxDialog.alert((i+1)+"번째 컨텐츠영역의 3번째 브랜드 정보가 없습니다.");
  311. $(this).focus();
  312. dataBool = false;
  313. }
  314. });
  315. if(!dataBool){
  316. return false;
  317. }else{
  318. return true;
  319. }
  320. }
  321. /**
  322. * 임시저장
  323. */
  324. var dataArr = [];
  325. $("#btnGnbTabSave").on('click', function(){
  326. if(!gagajf.checkRequired("#gnbTabList")){
  327. return;
  328. }
  329. // 전시일시 체크
  330. if(!dateValidation()){
  331. return false;
  332. }
  333. // 데이터 체크
  334. if(!groupDataValidation()){
  335. return false;
  336. }
  337. dataArr = [];
  338. $("#gnbTabList .tabTable").each(function (){
  339. var newImgFileArr = [];
  340. var imgPath1 = '';
  341. var imgPath2 = '';
  342. var imgPath3 = '';
  343. var imgPath4 = '';
  344. var strVar1 = '';
  345. var strVar2 = '';
  346. var strVar3 = '';
  347. var strVar4 = '';
  348. var strVar5 = '';
  349. var strVar6 = '';
  350. var strVar7 = '';
  351. var strVar8 = '';
  352. var strTitle1 = '';
  353. var strTitle2 = '';
  354. var strTitle3 = '';
  355. var strTitle4 = '';
  356. var subText1 = '';
  357. var subText2 = '';
  358. var subText3 = '';
  359. var subText4 = '';
  360. var i=1;
  361. var tableidx;
  362. if(contentsLoc=='STAB001'){
  363. tableidx = $(this).find("input[name=tableIdx]").val();
  364. strTitle3 = $(this).find("input[name=dispOrd]").val();
  365. // console.log('strTitle3???'+strTitle3);
  366. strTitle4 = $(this).find("input[name=tableIdx]").val();
  367. var dispStdt = $(this).find("input[name=dispStdt]").val().replace(/[^0-9]/g, '')+$(this).find("[name=stTimeHour]").val().replace('시', '')+$(this).find("[name=stTimeMin]").val().replace('분', '')+'00';
  368. var dispEddt = $(this).find("input[name=dispEddt]").val().replace(/[^0-9]/g, '')+$(this).find("[name=edTimeHour]").val().replace('시', '')+$(this).find("[name=edTimeMin]").val().replace('분', '')+'59';
  369. $(this).find(".brandClass").each(function (){
  370. var idx = $(this).closest('div').attr('data-id');
  371. strTitle1 = $("#tabTable"+tableidx+" .groupTr").find("input[id=bTitle"+idx+"]").val();
  372. var dispOrd = $(this).find("[name=dispOrd]").val();
  373. strVar1 = $(this).find("input[name=brandGroupNo]").val();
  374. imgPath1 = $(this).find("input[name=imgPath1]").val();
  375. strTitle2 = idx;
  376. // console.log('strTitle3>>>>>>>>'+strTitle3);
  377. var data = {
  378. cateNo : cateNo
  379. , contentsLoc : contentsLoc
  380. , dispStdt : dispStdt
  381. , dispEddt : dispEddt
  382. , newImgFileArr : newImgFileArr
  383. , imgPath1 : imgPath1
  384. , imgPath2 : imgPath2
  385. , imgPath3 : imgPath3
  386. , imgPath4 : imgPath4
  387. , strVar1 : strVar1
  388. , strVar2 : strVar2
  389. , strVar3 : strVar3
  390. , strVar4 : strVar4
  391. , strVar5 : strVar5
  392. , strVar6 : strVar6
  393. , strVar7 : strVar7
  394. , strVar8 : strVar8
  395. , strTitle1 : strTitle1
  396. , strTitle2 : strTitle2
  397. , strTitle3 : strTitle3
  398. , strTitle4 : strTitle4
  399. , subText1 : subText1
  400. , subText2 : subText2
  401. , subText3 : subText3
  402. , subText4 : subText4
  403. , useYn : 'Y'
  404. , dispOrd : dispOrd
  405. };
  406. dataArr.push(data);
  407. });
  408. // console.log('======0=====');
  409. // console.log(dataArr);
  410. }else{
  411. var gtabGb = '';
  412. if(contentsLoc=='STAB002'){
  413. gtabGb = 'C';
  414. }else{
  415. gtabGb = 'B';
  416. }
  417. var gtabNm = '';
  418. var cate1No = '';
  419. var linkUrl = '';
  420. var radioNm = $(this).find(".rdoBtn input").attr("name");
  421. var radioValue = $(this).find("input:radio[name="+radioNm+"]:checked").val();
  422. if(radioValue=='C'){
  423. var cateText = $(this).find("tr[name=tabCateRow]").find("select[name=cate1List] option:selected").text();
  424. var cateValue = $(this).find("tr[name=tabCateRow]").find("select[name=cate1List] option:selected").val();
  425. var cateTextArr = cateText.split(" ");
  426. gtabNm = cateTextArr[1];
  427. cate1No = cateValue;
  428. }
  429. if(radioValue=='O'){
  430. gtabNm = "아울렛";
  431. }
  432. if(radioValue=='L' || radioValue=='B' || radioValue=='P'){
  433. gtabNm = $(this).find("input[name=title]").val();
  434. linkUrl = $(this).find("input[name=link]").val();
  435. }
  436. var dispStdt = $(this).find("input[name=dispStdt]").val().replace(/[^0-9]/g, '')+$(this).find("[name=stTimeHour]").val().replace('시', '')+$(this).find("[name=stTimeMin]").val().replace('분', '')+'00';
  437. var dispEddt = $(this).find("input[name=dispEddt]").val().replace(/[^0-9]/g, '')+$(this).find("[name=edTimeHour]").val().replace('시', '')+$(this).find("[name=edTimeMin]").val().replace('분', '')+'59';
  438. var dispOrd = $(this).find("[name=dispOrd]").val();
  439. var data = {
  440. gtabGb : gtabGb
  441. , gtabNm : gtabNm
  442. , contentsType : radioValue
  443. , dispOrd : dispOrd
  444. , dispStdt : dispStdt
  445. , dispEddt : dispEddt
  446. , cate1No : cate1No
  447. , linkUrl : linkUrl
  448. , useYn : 'Y'
  449. , brandGroupNo : brandGroupNo
  450. }
  451. dataArr.push(data);
  452. }
  453. });
  454. // if(contentsLoc=='STAB001'){
  455. // if(dataArr.length>0){
  456. // var dataArrSort = [];
  457. // console.log('=======1======');
  458. // console.log(dataArr);
  459. // dataArr.forEach(function(item, index){
  460. // for(var i=1; i<dataArr.length; i++){
  461. // if(i>index){
  462. // if(dataArr[index].strTitle4!=dataArr[i].strTitle4){
  463. // console.log(dataArr[i].strTitle3);
  464. // dataArr[i].strTitle3 = Number(dataArr[i].strTitle3) + 1;
  465. // }
  466. // }
  467. // }
  468. // dataArrSort.push(item);
  469. // });
  470. // dataArr = dataArrSort;
  471. // }
  472. // }
  473. var jsonData = JSON.stringify(dataArr);
  474. mcxDialog.confirm('저장하시겠습니까?', {
  475. cancelBtnText: "취소",
  476. sureBtnText: "확인",
  477. sureBtnClick: function(){
  478. if(contentsLoc=='STAB001'){
  479. gagajf.ajaxJsonSubmit('/display/contents/preview/save', jsonData, fnGetBrandPreviewList);
  480. }else{
  481. gagajf.ajaxJsonSubmit('/display/contents/gnbtab/preview/save', jsonData, fnGetCategoryPreviewList);
  482. }
  483. }
  484. });
  485. });
  486. // 브랜드 코드에 해당하는 브랜드 명, 브랜드 이미지 join해서 가져와야함 -> 로직 수정 필요
  487. var fnGetBrandPreviewList = function (result){
  488. $("#gnbTabList").html('');
  489. var data = {cateNo : cateNo
  490. ,contentsLoc : contentsLoc
  491. };
  492. var jsonData = JSON.stringify(data);
  493. gagajf.ajaxJsonSubmit('/display/contents/gnbtab/brand/preview/list', jsonData, fnCreateBrandLayout);
  494. }
  495. var fnCreateBrandLayout = function (result){
  496. var html = '';
  497. for(var i=0; i<result.length; i++){
  498. var g1cdArr;
  499. var g2cdArr;
  500. var g3cdArr;
  501. var g1nmArr;
  502. var g2nmArr;
  503. var g3nmArr;
  504. var g1imgArr;
  505. var g2imgArr;
  506. var g3imgArr;
  507. if(!gagajf.isNull(result[i].group1brandCd)){
  508. g1cdArr = result[i].group1brandCd.split(",");
  509. }
  510. if(!gagajf.isNull(result[i].group2brandCd)){
  511. g2cdArr = result[i].group2brandCd.split(",");
  512. }
  513. if(!gagajf.isNull(result[i].group3brandCd)){
  514. g3cdArr = result[i].group3brandCd.split(",");
  515. }
  516. if(!gagajf.isNull(result[i].group1brandNm)){
  517. g1nmArr = result[i].group1brandNm.split(",");
  518. }
  519. if(!gagajf.isNull(result[i].group2brandNm)){
  520. g2nmArr = result[i].group2brandNm.split(",");
  521. }
  522. if(!gagajf.isNull(result[i].group3brandNm)){
  523. g3nmArr = result[i].group3brandNm.split(",");
  524. }
  525. if(!gagajf.isNull(result[i].group1brandImg)){
  526. g1imgArr = result[i].group1brandImg.split(",");
  527. }
  528. if(!gagajf.isNull(result[i].group2brandImg)){
  529. g2imgArr = result[i].group2brandImg.split(",");
  530. }
  531. if(!gagajf.isNull(result[i].group3brandImg)){
  532. g3imgArr = result[i].group3brandImg.split(",");
  533. }
  534. var dispStdt = result[i].dispStdt.split(" ");
  535. var dispEddt = result[i].dispEddt.split(" ");
  536. html += '<table class="frmStyle tabTable" style="margin-bottom:30px" id="tabTable'+i+'">';
  537. html += '<input type="hidden" name="tableIdx" value="'+i+'" data-id="'+i+'" />';
  538. html += ' <colgroup>';
  539. html += ' <col style="width:10%;"/>';
  540. html += ' <col style="width:55%;"/>';
  541. html += ' <col/>';
  542. html += ' </colgroup>';
  543. html += ' <thead>';
  544. html += ' <tr>';
  545. html += ' <th>전시일시</th>';
  546. html += ' <td><input name="dispStdt" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="노출시작일" data-valid-type="calendar" value="'+dispStdt[0]+'"/>';
  547. html += ' <select name="stTimeHour" required="required" data-valid-name="노출기간 시작시간">';
  548. html += fnCreateTimeOption(24, dispStdt[1].split(":")[0]);
  549. html += ' </select>';
  550. html += ' <select name="stTimeMin" required="required" data-valid-name="노출기간 시작시간">';
  551. html += fnCreateTimeOption(60, dispStdt[1].split(":")[1]);
  552. html += ' </select>';
  553. html += ' <span> ~ </span>';
  554. html += ' <input name="dispEddt" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="노출종료일" data-valid-type="calendar" value="'+dispEddt[0]+'"/>';
  555. html += ' <select name="edTimeHour" required="required" data-valid-name="노출기간 종료시간">';
  556. html += fnCreateTimeOption(24, dispEddt[1].split(":")[0]);
  557. html += ' </select>';
  558. html += ' <select name="edTimeMin" required="required" data-valid-name="노출기간 종료시간">';
  559. html += fnCreateTimeOption(60, dispEddt[1].split(":")[1]);
  560. html += ' </select>';
  561. html += ' <input name="dispOrd" type="text" class="w80"placeholder="전시순서" style="margin-left:5px; text-align:center" value="'+result[i].strTitle3+'"/>';
  562. html += ' </td>';
  563. html += ' <td class="aL cateTypeBtnArea">';
  564. html += ' <button type="button" class="btn btn-danger btn-lg" onclick="fnDeleteContentsRow(this);">삭제</button></td>';
  565. html += ' </tr>';
  566. html += ' </thead>';
  567. html += ' <tbody>';
  568. html += ' <tr class="groupTr">';
  569. html += ' <th>GROUP1<br><input type="text" name="brandGroup'+i+'" id="bTitle1" class="w100" value="'+result[i].group1Title+'"/><br>';
  570. html += ' <button type="button" class="btn btn-base btn-lg" onclick="fnSearchBrand(\''+i+'\',1);">브랜드조회</button><br></th>';
  571. html += ' <td colspan="2" name="brandArr'+i+'" id="tabBrand1">';
  572. html += ' <div class="sortableWrap" data-unit="7" style="overflow-y:scroll;">';
  573. html += ' <div class="itemWrap ui-sortable" id="brandListTd1" data-id="1">';
  574. for(let k=0; k<g1cdArr.length; k++){
  575. html += '<ul id="brandUl' + k + '" class="item ui-state-default brandClass" style="min-height:80px;">';
  576. html += ' <input type="hidden" name="brandGroupNo" value="' + g1cdArr[k] + '">';
  577. html += ' <li class="img">';
  578. if(gagajf.isNull(g1imgArr)){
  579. html += ' <img style="height:100%;" src="" onerror="this.src=\'/image/no.png\';"/>';
  580. }else{
  581. html += ' <img style="height:100%;" src="' + uploadGoodsUrl + "/" + g1imgArr[k] + '" onerror="this.src=\'/image/no.png\';"/>';
  582. }
  583. html += ' </li>';
  584. html += ' <li class="cont">';
  585. html += ' <ul>';
  586. html += ' <li class="no" name="brandCdLi"><span>' + g1cdArr[k] + '</span>';
  587. html += ' <span style="margin-left:5px;"><a href="javascript:void(0);" onclick="fnRemoveBrand(this,'+i+',1,' + k + ');">X</a></span>';
  588. html += ' </li>';
  589. html += ' <li class="title">' + g1nmArr[k] + '</li>';
  590. html += ' </ul>';
  591. html += ' </li>';
  592. html += '</ul>';
  593. }
  594. html += ' </div>';
  595. html += ' </div>';
  596. html += ' </td>';
  597. html += ' </tr>';
  598. html += ' <tr class="groupTr">';
  599. html += ' <th>GROUP2<br><input type="text" name="brandGroup'+i+'" id="bTitle2" class="w100" value="'+result[i].group2Title+'"/><br>';
  600. html += ' <button type="button" class="btn btn-base btn-lg" onclick="fnSearchBrand(\''+i+'\',2);">브랜드조회</button><br></th>';
  601. html += ' <td colspan="2" name="brandArr'+i+'" id="tabBrand2">';
  602. html += ' <div class="sortableWrap" data-unit="7" style="overflow-y:scroll;">';
  603. html += ' <div class="itemWrap ui-sortable" id="brandListTd2" data-id="2">';
  604. for(let m=0; m<g2cdArr.length; m++){
  605. html += '<ul id="brandUl' + m + '" class="item ui-state-default brandClass" style="min-height:80px;">';
  606. html += ' <input type="hidden" name="brandGroupNo" value="' + g2cdArr[m] + '">';
  607. html += ' <li class="img">';
  608. if(gagajf.isNull(g2imgArr)){
  609. html += ' <img style="height:100%;" src="" onerror="this.src=\'/image/no.png\';"/>';
  610. }else{
  611. html += ' <img style="height:100%;" src="' + uploadGoodsUrl + "/" + g2imgArr[m] + '" onerror="this.src=\'/image/no.png\';"/>';
  612. }
  613. html += ' </li>';
  614. html += ' <li class="cont">';
  615. html += ' <ul>';
  616. html += ' <li class="no" name="brandCdLi"><span>' + g2cdArr[m] + '</span>';
  617. html += ' <span style="margin-left:5px;"><a href="javascript:void(0);" onclick="fnRemoveBrand(this,' + i + ',2,' + m + ');">X</a></span>';
  618. html += ' </li>';
  619. html += ' <li class="title">' + g2nmArr[m] + '</li>';
  620. html += ' </ul>';
  621. html += ' </li>';
  622. html += '</ul>';
  623. }
  624. html += ' </div>';
  625. html += ' </div>';
  626. html += ' </td>';
  627. html += ' </tr>';
  628. html += ' <tr class="groupTr">';
  629. html += ' <th>GROUP3<br><input type="text" name="brandGroup'+i+'" id="bTitle3" class="w100" value="'+result[i].group3Title+'"/><br>';
  630. html += ' <button type="button" class="btn btn-base btn-lg" onclick="fnSearchBrand(\''+i+'\',3);">브랜드조회</button><br></th>';
  631. html += ' <td colspan="2" name="brandArr'+i+'" id="tabBrand3">';
  632. html += ' <div class="sortableWrap" data-unit="7" style="overflow-y:scroll;">';
  633. html += ' <div class="itemWrap ui-sortable" id="brandListTd3" data-id="3">';
  634. for(let n=0; n<g3cdArr.length; n++){
  635. html += '<ul id="brandUl' + n + '" class="item ui-state-default brandClass" style="min-height:80px;">';
  636. html += ' <input type="hidden" name="brandGroupNo" value="' + g3cdArr[n] + '">';
  637. html += ' <li class="img">';
  638. if(gagajf.isNull(g3imgArr)){
  639. html += ' <img style="height:100%;" src="" onerror="this.src=\'/image/no.png\';"/>';
  640. }else{
  641. html += ' <img style="height:100%;" src="' + uploadGoodsUrl + "/" + g3imgArr[n] + '" onerror="this.src=\'/image/no.png\';"/>';
  642. }
  643. html += ' </li>';
  644. html += ' <li class="cont">';
  645. html += ' <ul>';
  646. html += ' <li class="no" name="brandCdLi"><span>' + g3cdArr[n] + '</span>';
  647. html += ' <span style="margin-left:5px;"><a href="javascript:void(0);" onclick="fnRemoveBrand(this,' + i + ',3,' + n + ');">X</a></span>';
  648. html += ' </li>';
  649. html += ' <li class="title">' + g3nmArr[n] + '</li>';
  650. html += ' </ul>';
  651. html += ' </li>';
  652. html += '</ul>';
  653. }
  654. html += ' </div>';
  655. html += ' </div>';
  656. html += ' </td>';
  657. html += ' </tr>';
  658. html += ' </tbody>';
  659. html += '</table>';
  660. }
  661. $("#gnbTabList").prepend(html);
  662. $("#gnbTabList").sortable();
  663. $('.schDate').datepicker("destroy");
  664. $('.schDate').datepicker({
  665. changeMonth: true,
  666. changeYear: true,
  667. defaultDate: $('.schDate').val()
  668. });
  669. if(contentsLoc=='STAB001'){
  670. $("#brandListTd1").sortable();
  671. $("#brandListTd2").sortable();
  672. $("#brandListTd3").sortable();
  673. }
  674. tableIdx = tableIdx+1;
  675. }
  676. var fnGetCategoryPreviewList = function (result){
  677. var gtabGb = '';
  678. if(contentsLoc=='STAB002'){
  679. gtabGb = 'C';
  680. }else{
  681. gtabGb = 'B';
  682. }
  683. $("#gnbTabList").html('');
  684. var data = {
  685. gtabGb : gtabGb
  686. ,brandGroupNo : brandGroupNo
  687. };
  688. var jsonData = JSON.stringify(data);
  689. gagajf.ajaxJsonSubmit('/display/contents/gnbtab/category/preview/list', jsonData, fnCreateCategoryLayout);
  690. }
  691. var fnCreateCategoryLayout = function (result){
  692. var html = '';
  693. for(var i=0; i<result.length; i++){
  694. var dispStdt = result[i].dispStdt.split(" ");
  695. var dispEddt = result[i].dispEddt.split(" ");
  696. var cateNo = result[i].cate1No;
  697. html += '<table class="frmStyle tabTable" style="margin-bottom:30px" id="tabTable'+i+'">';
  698. html += ' <input type="hidden" name="tableIdx" value="'+i+'" data-id="'+i+'">';
  699. html += ' <colgroup>';
  700. html += ' <col style="width:10%;"/>';
  701. html += ' <col style="width:55%;"/>';
  702. html += ' <col/>';
  703. html += ' </colgroup>';
  704. html += ' <thead>';
  705. html += ' <tr class="cateTypeTr">';
  706. html += ' <th>유형선택</th>';
  707. html += ' <td colspan="3">';
  708. if(result[i].brandGroupNo!='' && result[i].brandGroupNo!=null){
  709. html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="L" onclick="fnChangeGnbType(this,'+i+');"';
  710. if(result[i].contentsType=='L'){
  711. html += ' checked="checked" ';
  712. }
  713. html += '/>이벤트링크</label>';
  714. html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="B" onclick="fnChangeGnbType(this,'+i+');"';
  715. if(result[i].contentsType=='B'){
  716. html += ' checked="checked" ';
  717. }
  718. html += ' />룩북</label>';
  719. html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="P" onclick="fnChangeGnbType(this,'+i+');"';
  720. if(result[i].contentsType=='P'){
  721. html += ' checked="checked" ';
  722. }
  723. html += ' />기획전</label>';
  724. }else{
  725. if(result[i].contentsType=='C'){
  726. html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="C" onclick="fnChangeCateType(this,'+i+');" checked="checked"/>대카테고리</label>';
  727. }else{
  728. html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="C" onclick="fnChangeCateType(this,'+i+');"/>대카테고리</label>';
  729. }
  730. if(result[i].contentsType=='O'){
  731. html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="O" onclick="fnChangeCateType(this,'+i+');" checked="checked"/>아울렛</label>';
  732. }else{
  733. html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="O" onclick="fnChangeCateType(this,'+i+');"/>아울렛</label>';
  734. }
  735. if(result[i].contentsType=='L'){
  736. html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="L" onclick="fnChangeCateType(this,'+i+');" checked="checked"/>이벤트링크</label>';
  737. }else{
  738. html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="L" onclick="fnChangeCateType(this,'+i+');"/>이벤트링크</label>';
  739. }
  740. }
  741. html += ' </td>';
  742. html += ' </tr>';
  743. html += ' <tr>';
  744. html += ' <th>전시일시</th>';
  745. html += ' <td><input name="dispStdt" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="노출시작일" data-valid-type="calendar" value="'+dispStdt[0]+'"/>';
  746. html += ' <select name="stTimeHour" required="required" data-valid-name="노출기간 시작시간">';
  747. html += fnCreateTimeOption(24, dispStdt[1].split(":")[0]);
  748. html += ' </select>';
  749. html += ' <select name="stTimeMin" required="required" data-valid-name="노출기간 시작시간">';
  750. html += fnCreateTimeOption(60, dispStdt[1].split(":")[1]);
  751. html += ' </select>';
  752. html += ' <span> ~ </span>';
  753. html += ' <input name="dispEddt" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="노출종료일" data-valid-type="calendar" value="'+dispEddt[0]+'"/>';
  754. html += ' <select name="edTimeHour" required="required" data-valid-name="노출기간 종료시간">';
  755. html += fnCreateTimeOption(24, dispEddt[1].split(":")[0]);
  756. html += ' </select>';
  757. html += ' <select name="edTimeMin" required="required" data-valid-name="노출기간 종료시간">';
  758. html += fnCreateTimeOption(60, dispEddt[1].split(":")[1]);
  759. html += ' </select>';
  760. html += ' <input name="dispOrd" type="text" class="w80"placeholder="전시순서" style="margin-left:5px; text-align:center" value="'+result[i].dispOrd+'"/>';
  761. html += ' </td>';
  762. html += ' <td class="aL cateTypeBtnArea">';
  763. html += ' <button type="button" class="btn btn-danger btn-lg" onclick="fnDeleteContentsRow(this);">삭제</button></td>';
  764. html += ' </tr>';
  765. html += ' </thead>';
  766. html += '<tbody>';
  767. if(result[i].brandGroupNo!='' && result[i].brandGroupNo!=null){
  768. html += ' <tr name="tabLinkTitleRow">';
  769. html += ' <th>타이틀</th>';
  770. html += ' <td><input name="title" type="text" maxlength="200" data-valid-name="타이틀" value="'+result[i].gtabNm+'"/></td>';
  771. html += ' </tr>';
  772. html += ' <tr name="tabLinkRow">';
  773. html += ' <th>링크 (없으면 #)<br>(메인은 /)</th>';
  774. html += ' <td><input name="link" type="text" maxlength="200" placeholder="외부 URL 입력시 https:// 붙여주세요. ex)https://www.levis-kids.co.kr" data-valid-name="링크" value="'+result[i].linkUrl+'"/></td>';
  775. html += ' </tr>';
  776. }else{
  777. if(result[i].contentsType=='C'){
  778. html += ' <tr name="tabCateRow">';
  779. html += ' <th>카테고리</th>';
  780. html += ' <td colspan="3">카테고리선택';
  781. html += ' <select name="cate1List">';
  782. html += ' <option value="">[선택]</option>';
  783. for(let i=0; i<cate1List.length; i++){
  784. if(cateNo == cate1List[i].cd){
  785. html += '<option value="'+cate1List[i].cd+'" selected="selected">['+cate1List[i].cd+'] '+cate1List[i].cdNm+'</option>';
  786. }else{
  787. html += '<option value="'+cate1List[i].cd+'">['+cate1List[i].cd+'] '+cate1List[i].cdNm+'</option>';
  788. }
  789. }
  790. html += ' </select>';
  791. html += ' </td>';
  792. html += ' </tr>';
  793. }else if(result[i].contentsType=='L'){
  794. html += ' <tr name="tabLinkTitleRow">';
  795. html += ' <th>타이틀</th>';
  796. html += ' <td><input name="title" type="text" maxlength="200" data-valid-name="타이틀" value="'+result[i].gtabNm+'"/></td>';
  797. html += ' </tr>';
  798. html += ' <tr name="tabLinkRow">';
  799. html += ' <th>링크 (없으면 #)<br>(메인은 /)</th>';
  800. html += ' <td><input name="link" type="text" maxlength="200" placeholder="외부 URL 입력시 https:// 붙여주세요. ex)https://www.levis-kids.co.kr" data-valid-name="링크" value="'+result[i].linkUrl+'"/></td>';
  801. html += ' </tr>';
  802. }
  803. }
  804. html += '</tbody>';
  805. html += '</table>';
  806. tableIdx = i;
  807. }
  808. $("#gnbTabList").append(html);
  809. $("#gnbTabList").sortable();
  810. $('.schDate').datepicker("destroy");
  811. $('.schDate').datepicker({
  812. changeMonth: true,
  813. changeYear: true,
  814. defaultDate: $('.schDate').val()
  815. });
  816. tableIdx = tableIdx+1;
  817. }
  818. var fnChangeGnbType = function (obj, idx){
  819. let chkType = $("#tabTable"+idx).find("input:radio[name=cateType"+idx+"]:checked").val();
  820. if(chkType=='L'){
  821. $("#tabTable"+idx).find("input[name=link]").val('');
  822. }else if(chkType=='B'){
  823. $("#tabTable"+idx).find("input[name=link]").val('/display/lookbook/main/form?brandGroupNo='+brandGroupNo);
  824. }else{
  825. $("#tabTable"+idx).find("input[name=link]").val('/planning/main/form?brandGroupNo='+brandGroupNo);
  826. }
  827. }
  828. var fnResetDispOrd = function (){
  829. $('.tabTable').each(function (idx){
  830. $(this).find('input[name=dispOrd]').val(idx+1);
  831. });
  832. }
  833. $(document).ready(function() {
  834. $("#gnbTabList").disableSelection();
  835. $("#gnbTabList").sortable({
  836. stop: function(event, ui) {
  837. //fnResetTabIdx();
  838. fnResetDispOrd();
  839. }
  840. });
  841. if(contentsLoc=='STAB001'){
  842. fnGetBrandPreviewList();
  843. }else{
  844. fnGetCategoryPreviewList();
  845. }
  846. });
  847. /*]]>*/
  848. </script>
  849. </html>