MainGnbContentsPopupForm.html 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828
  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>링크 (없으면 #)</th>';
  153. html += ' <td><input name="link" type="text" maxlength="200" 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>링크 (없으면 #)</th>';
  173. html += ' <td><input name="link" type="text" maxlength="200" 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,' + 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 , idx){
  228. var divId = $(obj).closest('div').attr('id');
  229. $("#"+divId+" #brandUl"+idx).remove();
  230. //fnReloadGoodsListIdx(divId);
  231. }
  232. // 카테고리 유형 선택
  233. var fnChangeCateType = function (obj, idx){
  234. let cateType = $("#tabTable"+idx).find("input:radio[name=cateType"+idx+"]:checked").val();
  235. if(cateType=='C'){
  236. $(obj).closest("table").find("[name=tabCateRow]").show();
  237. $(obj).closest("table").find("[name=tabOutletRow]").hide();
  238. $(obj).closest("table").find("[name=tabLinkTitleRow]").hide();
  239. $(obj).closest("table").find("[name=tabLinkRow]").hide();
  240. }else if(cateType=='O'){
  241. $(obj).closest("table").find("[name=tabCateRow]").hide();
  242. $(obj).closest("table").find("[name=tabLinkTitleRow]").hide();
  243. $(obj).closest("table").find("[name=tabLinkRow]").hide();
  244. }else if(cateType=='L'){
  245. $(obj).closest("table").find("[name=tabCateRow]").hide();
  246. $(obj).closest("table").find("[name=tabOutletRow]").hide();
  247. $(obj).closest("table").find("[name=tabLinkTitleRow]").show();
  248. $(obj).closest("table").find("[name=tabLinkRow]").show();
  249. }
  250. }
  251. // 창닫기
  252. var fnMainGnbContentsPopupFormClose = function (){
  253. uifnPopupClose('popupMainGnbContents');
  254. }
  255. // 컨텐츠 행삭제
  256. var fnDeleteContentsRow = function (obj){
  257. mcxDialog.confirm('삭제시 전시순서가 초기화됩니다. 삭제하시겠습니까?', {
  258. cancelBtnText: "취소",
  259. sureBtnText: "확인",
  260. sureBtnClick: function(){
  261. $(obj).closest("table").remove();
  262. fnResetDispOrd();
  263. }
  264. });
  265. }
  266. // 전시 일시 체크
  267. function dateValidation(){
  268. var dateBool = true;
  269. $(".tabTable").each(function(i){
  270. var dispStdt = $(this).find("[name=dispStdt]").val().replace(/[^0-9]/g, '') + "" +$(this).find("[name=stTimeHour]").val().replace('시', '') + "" +$(this).find("[name=stTimeMin]").val().replace('분', '') + "00";
  271. var dispEddt = $(this).find("[name=dispEddt]").val().replace(/[^0-9]/g, '') + "" +$(this).find("[name=edTimeHour]").val().replace('시', '') + "" +$(this).find("[name=edTimeMin]").val().replace('분', '') + "59";
  272. let fromDate = dispStdt.replace(/[^0-9]/g, '');
  273. let toDate = dispEddt.replace(/[^0-9]/g, '');
  274. if(fromDate > toDate){
  275. mcxDialog.alert("시작일자는 종료일자 보다 클 수 없습니다.");
  276. $(this).find('input[name=dispStdt]').focus();
  277. dateBool = false;
  278. }
  279. });
  280. if(!dateBool){
  281. return false;
  282. }else{
  283. return true;
  284. }
  285. }
  286. /**
  287. * 임시저장
  288. */
  289. var dataArr = [];
  290. $("#btnGnbTabSave").on('click', function(){
  291. if(!gagajf.checkRequired("#gnbTabList")){
  292. return;
  293. }
  294. // 전시일시 체크
  295. if(!dateValidation()){
  296. return false;
  297. }
  298. dataArr = [];
  299. $("#gnbTabList .tabTable").each(function (){
  300. var newImgFileArr = [];
  301. var imgPath1 = '';
  302. var imgPath2 = '';
  303. var imgPath3 = '';
  304. var imgPath4 = '';
  305. var strVar1 = '';
  306. var strVar2 = '';
  307. var strVar3 = '';
  308. var strVar4 = '';
  309. var strVar5 = '';
  310. var strVar6 = '';
  311. var strVar7 = '';
  312. var strVar8 = '';
  313. var strTitle1 = '';
  314. var strTitle2 = '';
  315. var strTitle3 = '';
  316. var strTitle4 = '';
  317. var subText1 = '';
  318. var subText2 = '';
  319. var subText3 = '';
  320. var subText4 = '';
  321. var i=1;
  322. if(contentsLoc=='STAB001'){
  323. strTitle3 = $(".tabTable").find("input[name=tableIdx]").val();
  324. console.log('dispStdt::'+$(this).find("input[name=dispStdt]").val());
  325. 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';
  326. 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';
  327. $(this).find(".brandClass").each(function (){
  328. var idx = $(this).closest('div').attr('data-id');
  329. strTitle1 = $(".groupTr").find("input[id=bTitle"+idx+"]").val();
  330. var dispOrd = $(this).find("[name=dispOrd]").val();
  331. strVar1 = $(this).find("input[name=brandGroupNo]").val();
  332. imgPath1 = $(this).find("input[name=imgPath1]").val();
  333. strTitle2 = idx;
  334. var data = {
  335. cateNo : cateNo
  336. , contentsLoc : contentsLoc
  337. , dispStdt : dispStdt
  338. , dispEddt : dispEddt
  339. , newImgFileArr : newImgFileArr
  340. , imgPath1 : imgPath1
  341. , imgPath2 : imgPath2
  342. , imgPath3 : imgPath3
  343. , imgPath4 : imgPath4
  344. , strVar1 : strVar1
  345. , strVar2 : strVar2
  346. , strVar3 : strVar3
  347. , strVar4 : strVar4
  348. , strVar5 : strVar5
  349. , strVar6 : strVar6
  350. , strVar7 : strVar7
  351. , strVar8 : strVar8
  352. , strTitle1 : strTitle1
  353. , strTitle2 : strTitle2
  354. , strTitle3 : strTitle3
  355. , strTitle4 : strTitle4
  356. , subText1 : subText1
  357. , subText2 : subText2
  358. , subText3 : subText3
  359. , subText4 : subText4
  360. , useYn : 'Y'
  361. , dispOrd : dispOrd
  362. };
  363. dataArr.push(data);
  364. });
  365. }else{
  366. var gtabGb = '';
  367. if(contentsLoc=='STAB002'){
  368. gtabGb = 'C';
  369. }else{
  370. gtabGb = 'B';
  371. }
  372. var gtabNm = '';
  373. var cate1No = '';
  374. var linkUrl = '';
  375. var radioNm = $(this).find(".rdoBtn input").attr("name");
  376. var radioValue = $(this).find("input:radio[name="+radioNm+"]:checked").val();
  377. if(radioValue=='C'){
  378. var cateText = $(this).find("tr[name=tabCateRow]").find("select[name=cate1List] option:selected").text();
  379. var cateValue = $(this).find("tr[name=tabCateRow]").find("select[name=cate1List] option:selected").val();
  380. var cateTextArr = cateText.split(" ");
  381. gtabNm = cateTextArr[1];
  382. cate1No = cateValue;
  383. }
  384. if(radioValue=='O'){
  385. gtabNm = "아울렛";
  386. }
  387. if(radioValue=='L' || radioValue=='B' || radioValue=='P'){
  388. gtabNm = $(this).find("input[name=title]").val();
  389. linkUrl = $(this).find("input[name=link]").val();
  390. }
  391. 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';
  392. 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';
  393. var dispOrd = $(this).find("[name=dispOrd]").val();
  394. var data = {
  395. gtabGb : gtabGb
  396. , gtabNm : gtabNm
  397. , contentsType : radioValue
  398. , dispOrd : dispOrd
  399. , dispStdt : dispStdt
  400. , dispEddt : dispEddt
  401. , cate1No : cate1No
  402. , linkUrl : linkUrl
  403. , useYn : 'Y'
  404. , brandGroupNo : brandGroupNo
  405. }
  406. dataArr.push(data);
  407. }
  408. });
  409. var jsonData = JSON.stringify(dataArr);
  410. mcxDialog.confirm('저장하시겠습니까?', {
  411. cancelBtnText: "취소",
  412. sureBtnText: "확인",
  413. sureBtnClick: function(){
  414. if(contentsLoc=='STAB001'){
  415. gagajf.ajaxJsonSubmit('/display/contents/preview/save', jsonData, fnGetBrandPreviewList);
  416. }else{
  417. gagajf.ajaxJsonSubmit('/display/contents/gnbtab/preview/save', jsonData, fnGetCategoryPreviewList);
  418. }
  419. }
  420. });
  421. });
  422. // 브랜드 코드에 해당하는 브랜드 명, 브랜드 이미지 join해서 가져와야함 -> 로직 수정 필요
  423. var fnGetBrandPreviewList = function (result){
  424. $("#gnbTabList").html('');
  425. var data = {cateNo : cateNo
  426. ,contentsLoc : contentsLoc
  427. };
  428. var jsonData = JSON.stringify(data);
  429. gagajf.ajaxJsonSubmit('/display/contents/gnbtab/brand/preview/list', jsonData, fnCreateBrandLayout);
  430. }
  431. var fnCreateBrandLayout = function (result){
  432. var html = '';
  433. for(var i=0; i<result.length; i++){
  434. var g1cdArr;
  435. var g2cdArr;
  436. var g3cdArr;
  437. var g1nmArr;
  438. var g2nmArr;
  439. var g3nmArr;
  440. var g1imgArr;
  441. var g2imgArr;
  442. var g3imgArr;
  443. if(!gagajf.isNull(result[i].group1brandCd)){
  444. g1cdArr = result[i].group1brandCd.split(",");
  445. }
  446. if(!gagajf.isNull(result[i].group2brandCd)){
  447. g2cdArr = result[i].group2brandCd.split(",");
  448. }
  449. if(!gagajf.isNull(result[i].group3brandCd)){
  450. g3cdArr = result[i].group3brandCd.split(",");
  451. }
  452. if(!gagajf.isNull(result[i].group1brandNm)){
  453. g1nmArr = result[i].group1brandNm.split(",");
  454. }
  455. if(!gagajf.isNull(result[i].group2brandNm)){
  456. g2nmArr = result[i].group2brandNm.split(",");
  457. }
  458. if(!gagajf.isNull(result[i].group3brandNm)){
  459. g3nmArr = result[i].group3brandNm.split(",");
  460. }
  461. if(!gagajf.isNull(result[i].group1brandImg)){
  462. g1imgArr = result[i].group1brandImg.split(",");
  463. }
  464. if(!gagajf.isNull(result[i].group2brandImg)){
  465. g2imgArr = result[i].group2brandImg.split(",");
  466. }
  467. if(!gagajf.isNull(result[i].group3brandImg)){
  468. g3imgArr = result[i].group3brandImg.split(",");
  469. }
  470. var dispStdt = result[i].dispStdt.split(" ");
  471. var dispEddt = result[i].dispEddt.split(" ");
  472. html += '<table class="frmStyle tabTable" style="margin-bottom:30px" id="tabTable'+i+'">';
  473. html += '<input type="hidden" name="tableIdx" value="'+i+'" data-id="'+i+'" />';
  474. html += ' <colgroup>';
  475. html += ' <col style="width:10%;"/>';
  476. html += ' <col style="width:55%;"/>';
  477. html += ' <col/>';
  478. html += ' </colgroup>';
  479. html += ' <thead>';
  480. html += ' <tr>';
  481. html += ' <th>전시일시</th>';
  482. html += ' <td><input name="dispStdt" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="노출시작일" data-valid-type="calendar" value="'+dispStdt[0]+'"/>';
  483. html += ' <select name="stTimeHour" required="required" data-valid-name="노출기간 시작시간">';
  484. html += fnCreateTimeOption(24, dispStdt[1].split(":")[0]);
  485. html += ' </select>';
  486. html += ' <select name="stTimeMin" required="required" data-valid-name="노출기간 시작시간">';
  487. html += fnCreateTimeOption(60, dispStdt[1].split(":")[1]);
  488. html += ' </select>';
  489. html += ' <span> ~ </span>';
  490. html += ' <input name="dispEddt" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="노출종료일" data-valid-type="calendar" value="'+dispEddt[0]+'"/>';
  491. html += ' <select name="edTimeHour" required="required" data-valid-name="노출기간 종료시간">';
  492. html += fnCreateTimeOption(24, dispEddt[1].split(":")[0]);
  493. html += ' </select>';
  494. html += ' <select name="edTimeMin" required="required" data-valid-name="노출기간 종료시간">';
  495. html += fnCreateTimeOption(60, dispEddt[1].split(":")[1]);
  496. html += ' </select>';
  497. html += ' <input name="dispOrd" type="text" class="w80"placeholder="전시순서" style="margin-left:5px; text-align:center" value="'+result[i].dispOrd+'"/>';
  498. html += ' </td>';
  499. html += ' <td class="aL cateTypeBtnArea">';
  500. html += ' <button type="button" class="btn btn-danger btn-lg" onclick="fnDeleteContentsRow(this);">삭제</button></td>';
  501. html += ' </tr>';
  502. html += ' </thead>';
  503. html += ' <tbody>';
  504. html += ' <tr class="groupTr">';
  505. html += ' <th>GROUP1<br><input type="text" name="brandGroup'+i+'" id="bTitle1" class="w100" value="'+result[i].group1Title+'"/><br>';
  506. html += ' <button type="button" class="btn btn-base btn-lg" onclick="fnSearchBrand(\''+i+'\',1);">브랜드조회</button><br></th>';
  507. html += ' <td colspan="2" name="brandArr'+i+'" id="tabBrand1">';
  508. html += ' <div class="sortableWrap" data-unit="7" style="overflow-y:scroll;">';
  509. html += ' <div class="itemWrap ui-sortable" id="brandListTd1" data-id="1">';
  510. for(let k=0; k<g1cdArr.length; k++){
  511. html += '<ul id="brandUl' + k + '" class="item ui-state-default brandClass" style="min-height:80px;">';
  512. html += ' <input type="hidden" name="brandGroupNo" value="' + g1cdArr[k] + '">';
  513. html += ' <li class="img">';
  514. if(gagajf.isNull(g1imgArr)){
  515. html += ' <img style="height:100%;" src="" onerror="this.src=\'/image/no.png\';"/>';
  516. }else{
  517. html += ' <img style="height:100%;" src="' + uploadGoodsUrl + "/" + g1imgArr[k] + '" onerror="this.src=\'/image/no.png\';"/>';
  518. }
  519. html += ' </li>';
  520. html += ' <li class="cont">';
  521. html += ' <ul>';
  522. html += ' <li class="no" name="brandCdLi"><span>' + g1cdArr[k] + '</span>';
  523. html += ' <span style="margin-left:5px;"><a href="javascript:void(0);" onclick="fnRemoveBrand(this,' + k + ');">X</a></span>';
  524. html += ' </li>';
  525. html += ' <li class="title">' + g1nmArr[k] + '</li>';
  526. html += ' </ul>';
  527. html += ' </li>';
  528. html += '</ul>';
  529. }
  530. html += ' </div>';
  531. html += ' </div>';
  532. html += ' </td>';
  533. html += ' </tr>';
  534. html += ' <tr class="groupTr">';
  535. html += ' <th>GROUP2<br><input type="text" name="brandGroup'+i+'" id="bTitle2" class="w100" value="'+result[i].group2Title+'"/><br>';
  536. html += ' <button type="button" class="btn btn-base btn-lg" onclick="fnSearchBrand(\''+i+'\',2);">브랜드조회</button><br></th>';
  537. html += ' <td colspan="2" name="brandArr'+i+'" id="tabBrand2">';
  538. html += ' <div class="sortableWrap" data-unit="7" style="overflow-y:scroll;">';
  539. html += ' <div class="itemWrap ui-sortable" id="brandListTd2" data-id="2">';
  540. for(let m=0; m<g2cdArr.length; m++){
  541. html += '<ul id="brandUl' + m + '" class="item ui-state-default brandClass" style="min-height:80px;">';
  542. html += ' <input type="hidden" name="brandGroupNo" value="' + g2cdArr[m] + '">';
  543. html += ' <li class="img">';
  544. if(gagajf.isNull(g2imgArr)){
  545. html += ' <img style="height:100%;" src="" onerror="this.src=\'/image/no.png\';"/>';
  546. }else{
  547. html += ' <img style="height:100%;" src="' + uploadGoodsUrl + "/" + g2imgArr[m] + '" onerror="this.src=\'/image/no.png\';"/>';
  548. }
  549. html += ' </li>';
  550. html += ' <li class="cont">';
  551. html += ' <ul>';
  552. html += ' <li class="no" name="brandCdLi"><span>' + g2cdArr[m] + '</span>';
  553. html += ' <span style="margin-left:5px;"><a href="javascript:void(0);" onclick="fnRemoveBrand(this,' + m + ');">X</a></span>';
  554. html += ' </li>';
  555. html += ' <li class="title">' + g2nmArr[m] + '</li>';
  556. html += ' </ul>';
  557. html += ' </li>';
  558. html += '</ul>';
  559. }
  560. html += ' </div>';
  561. html += ' </div>';
  562. html += ' </td>';
  563. html += ' </tr>';
  564. html += ' <tr class="groupTr">';
  565. html += ' <th>GROUP3<br><input type="text" name="brandGroup'+i+'" id="bTitle3" class="w100" value="'+result[i].group3Title+'"/><br>';
  566. html += ' <button type="button" class="btn btn-base btn-lg" onclick="fnSearchBrand(\''+i+'\',3);">브랜드조회</button><br></th>';
  567. html += ' <td colspan="2" name="brandArr'+i+'" id="tabBrand3">';
  568. html += ' <div class="sortableWrap" data-unit="7" style="overflow-y:scroll;">';
  569. html += ' <div class="itemWrap ui-sortable" id="brandListTd3" data-id="3">';
  570. for(let n=0; n<g3cdArr.length; n++){
  571. html += '<ul id="brandUl' + n + '" class="item ui-state-default brandClass" style="min-height:80px;">';
  572. html += ' <input type="hidden" name="brandGroupNo" value="' + g3cdArr[n] + '">';
  573. html += ' <li class="img">';
  574. if(gagajf.isNull(g3imgArr)){
  575. html += ' <img style="height:100%;" src="" onerror="this.src=\'/image/no.png\';"/>';
  576. }else{
  577. html += ' <img style="height:100%;" src="' + uploadGoodsUrl + "/" + g3imgArr[n] + '" onerror="this.src=\'/image/no.png\';"/>';
  578. }
  579. html += ' </li>';
  580. html += ' <li class="cont">';
  581. html += ' <ul>';
  582. html += ' <li class="no" name="brandCdLi"><span>' + g3cdArr[n] + '</span>';
  583. html += ' <span style="margin-left:5px;"><a href="javascript:void(0);" onclick="fnRemoveBrand(this,' + n + ');">X</a></span>';
  584. html += ' </li>';
  585. html += ' <li class="title">' + g3nmArr[n] + '</li>';
  586. html += ' </ul>';
  587. html += ' </li>';
  588. html += '</ul>';
  589. }
  590. html += ' </div>';
  591. html += ' </div>';
  592. html += ' </td>';
  593. html += ' </tr>';
  594. html += ' </tbody>';
  595. html += '</table>';
  596. }
  597. $("#gnbTabList").prepend(html);
  598. $("#gnbTabList").sortable();
  599. $('.schDate').datepicker("destroy");
  600. $('.schDate').datepicker({
  601. changeMonth: true,
  602. changeYear: true,
  603. defaultDate: $('.schDate').val()
  604. });
  605. if(contentsLoc=='STAB001'){
  606. $("#brandListTd1").sortable();
  607. $("#brandListTd2").sortable();
  608. $("#brandListTd3").sortable();
  609. }
  610. tableIdx = tableIdx+1;
  611. }
  612. var fnGetCategoryPreviewList = function (result){
  613. var gtabGb = '';
  614. if(contentsLoc=='STAB002'){
  615. gtabGb = 'C';
  616. }else{
  617. gtabGb = 'B';
  618. }
  619. $("#gnbTabList").html('');
  620. var data = {
  621. gtabGb : gtabGb
  622. ,brandGroupNo : brandGroupNo
  623. };
  624. var jsonData = JSON.stringify(data);
  625. gagajf.ajaxJsonSubmit('/display/contents/gnbtab/category/preview/list', jsonData, fnCreateCategoryLayout);
  626. }
  627. var fnCreateCategoryLayout = function (result){
  628. var html = '';
  629. for(var i=0; i<result.length; i++){
  630. var dispStdt = result[i].dispStdt.split(" ");
  631. var dispEddt = result[i].dispEddt.split(" ");
  632. var cateNo = result[i].cate1No;
  633. html += '<table class="frmStyle tabTable" style="margin-bottom:30px" id="tabTable'+i+'">';
  634. html += ' <input type="hidden" name="tableIdx" value="'+i+'" data-id="'+i+'">';
  635. html += ' <colgroup>';
  636. html += ' <col style="width:10%;"/>';
  637. html += ' <col style="width:55%;"/>';
  638. html += ' <col/>';
  639. html += ' </colgroup>';
  640. html += ' <thead>';
  641. html += ' <tr class="cateTypeTr">';
  642. html += ' <th>유형선택</th>';
  643. html += ' <td colspan="3">';
  644. if(result[i].brandGroupNo!='' && result[i].brandGroupNo!=null){
  645. html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="L" onclick="fnChangeGnbType(this,'+i+');"';
  646. if(result[i].contentsType=='L'){
  647. html += ' checked="checked" ';
  648. }
  649. html += '/>이벤트링크</label>';
  650. html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="B" onclick="fnChangeGnbType(this,'+i+');"';
  651. if(result[i].contentsType=='B'){
  652. html += ' checked="checked" ';
  653. }
  654. html += ' />룩북</label>';
  655. html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="P" onclick="fnChangeGnbType(this,'+i+');"';
  656. if(result[i].contentsType=='P'){
  657. html += ' checked="checked" ';
  658. }
  659. html += ' />기획전</label>';
  660. }else{
  661. if(result[i].contentsType=='C'){
  662. html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="C" onclick="fnChangeCateType(this,'+i+');" checked="checked"/>대카테고리</label>';
  663. }else{
  664. html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="C" onclick="fnChangeCateType(this,'+i+');"/>대카테고리</label>';
  665. }
  666. if(result[i].contentsType=='O'){
  667. html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="O" onclick="fnChangeCateType(this,'+i+');" checked="checked"/>아울렛</label>';
  668. }else{
  669. html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="O" onclick="fnChangeCateType(this,'+i+');"/>아울렛</label>';
  670. }
  671. if(result[i].contentsType=='L'){
  672. html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="L" onclick="fnChangeCateType(this,'+i+');" checked="checked"/>이벤트링크</label>';
  673. }else{
  674. html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="L" onclick="fnChangeCateType(this,'+i+');"/>이벤트링크</label>';
  675. }
  676. }
  677. html += ' </td>';
  678. html += ' </tr>';
  679. html += ' <tr>';
  680. html += ' <th>전시일시</th>';
  681. html += ' <td><input name="dispStdt" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="노출시작일" data-valid-type="calendar" value="'+dispStdt[0]+'"/>';
  682. html += ' <select name="stTimeHour" required="required" data-valid-name="노출기간 시작시간">';
  683. html += fnCreateTimeOption(24, dispStdt[1].split(":")[0]);
  684. html += ' </select>';
  685. html += ' <select name="stTimeMin" required="required" data-valid-name="노출기간 시작시간">';
  686. html += fnCreateTimeOption(60, dispStdt[1].split(":")[1]);
  687. html += ' </select>';
  688. html += ' <span> ~ </span>';
  689. html += ' <input name="dispEddt" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="노출종료일" data-valid-type="calendar" value="'+dispEddt[0]+'"/>';
  690. html += ' <select name="edTimeHour" required="required" data-valid-name="노출기간 종료시간">';
  691. html += fnCreateTimeOption(24, dispEddt[1].split(":")[0]);
  692. html += ' </select>';
  693. html += ' <select name="edTimeMin" required="required" data-valid-name="노출기간 종료시간">';
  694. html += fnCreateTimeOption(60, dispEddt[1].split(":")[1]);
  695. html += ' </select>';
  696. html += ' <input name="dispOrd" type="text" class="w80"placeholder="전시순서" style="margin-left:5px; text-align:center" value="'+result[i].dispOrd+'"/>';
  697. html += ' </td>';
  698. html += ' <td class="aL cateTypeBtnArea">';
  699. html += ' <button type="button" class="btn btn-danger btn-lg" onclick="fnDeleteContentsRow(this);">삭제</button></td>';
  700. html += ' </tr>';
  701. html += ' </thead>';
  702. html += '<tbody>';
  703. if(result[i].brandGroupNo!='' && result[i].brandGroupNo!=null){
  704. html += ' <tr name="tabLinkTitleRow">';
  705. html += ' <th>타이틀</th>';
  706. html += ' <td><input name="title" type="text" maxlength="200" data-valid-name="타이틀" value="'+result[i].gtabNm+'"/></td>';
  707. html += ' </tr>';
  708. html += ' <tr name="tabLinkRow">';
  709. html += ' <th>링크 (없으면 #)</th>';
  710. html += ' <td><input name="link" type="text" maxlength="200" data-valid-name="링크" value="'+result[i].linkUrl+'"/></td>';
  711. html += ' </tr>';
  712. }else{
  713. if(result[i].contentsType=='C'){
  714. html += ' <tr name="tabCateRow">';
  715. html += ' <th>카테고리</th>';
  716. html += ' <td colspan="3">카테고리선택';
  717. html += ' <select name="cate1List">';
  718. html += ' <option value="">[선택]</option>';
  719. for(let i=0; i<cate1List.length; i++){
  720. if(cateNo == cate1List[i].cd){
  721. html += '<option value="'+cate1List[i].cd+'" selected="selected">['+cate1List[i].cd+'] '+cate1List[i].cdNm+'</option>';
  722. }else{
  723. html += '<option value="'+cate1List[i].cd+'">['+cate1List[i].cd+'] '+cate1List[i].cdNm+'</option>';
  724. }
  725. }
  726. html += ' </select>';
  727. html += ' </td>';
  728. html += ' </tr>';
  729. }else if(result[i].contentsType=='L'){
  730. html += ' <tr name="tabLinkTitleRow">';
  731. html += ' <th>타이틀</th>';
  732. html += ' <td><input name="title" type="text" maxlength="200" data-valid-name="타이틀" value="'+result[i].gtabNm+'"/></td>';
  733. html += ' </tr>';
  734. html += ' <tr name="tabLinkRow">';
  735. html += ' <th>링크 (없으면 #)</th>';
  736. html += ' <td><input name="link" type="text" maxlength="200" data-valid-name="링크" value="'+result[i].linkUrl+'"/></td>';
  737. html += ' </tr>';
  738. }
  739. }
  740. html += '</tbody>';
  741. html += '</table>';
  742. tableIdx = i;
  743. }
  744. $("#gnbTabList").append(html);
  745. $("#gnbTabList").sortable();
  746. $('.schDate').datepicker("destroy");
  747. $('.schDate').datepicker({
  748. changeMonth: true,
  749. changeYear: true,
  750. defaultDate: $('.schDate').val()
  751. });
  752. tableIdx = tableIdx+1;
  753. }
  754. var fnChangeGnbType = function (obj, idx){
  755. let chkType = $("#tabTable"+idx).find("input:radio[name=cateType"+idx+"]:checked").val();
  756. if(chkType=='L'){
  757. $("#tabTable"+idx).find("input[name=link]").val('');
  758. }else if(chkType=='B'){
  759. $("#tabTable"+idx).find("input[name=link]").val('/display/lookbook/main/form?brandGroupNo='+brandGroupNo);
  760. }else{
  761. $("#tabTable"+idx).find("input[name=link]").val('/planning/main/form?brandGroupNo='+brandGroupNo);
  762. }
  763. }
  764. var fnResetDispOrd = function (){
  765. $('.tabTable').each(function (idx){
  766. $(this).find('input[name=dispOrd]').val(idx+1);
  767. });
  768. }
  769. $(document).ready(function() {
  770. $("#gnbTabList").disableSelection();
  771. $("#gnbTabList").sortable({
  772. stop: function(event, ui) {
  773. //fnResetTabIdx();
  774. fnResetDispOrd();
  775. }
  776. });
  777. if(contentsLoc=='STAB001'){
  778. fnGetBrandPreviewList();
  779. }else{
  780. fnGetCategoryPreviewList();
  781. }
  782. });
  783. /*]]>*/
  784. </script>
  785. </html>