MainGnbContentsPopupForm.html 32 KB

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