OrderMemoRegistForm.html 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. <!DOCTYPE html>
  2. <html lang="ko" xmlns:th="http://www.thymeleaf.org">
  3. <!--
  4. *******************************************************************************
  5. * @source : OrderMemoRegistForm.html
  6. * @desc : 주문메모 등록 화면
  7. *============================================================================
  8. * STYLE24
  9. * Copyright(C) 2020 TSIT, All rights reserved.
  10. *============================================================================
  11. * VER DATE AUTHOR DESCRIPTION
  12. * === =========== ========== =============================================
  13. * 1.0 2020.11.16 jsh77b 최초 작성
  14. *******************************************************************************
  15. -->
  16. <div class="modalPopup" data-width="900" data-height="500" >
  17. <div class="panelStyle">
  18. <div class="panelTitle">
  19. <h2>주문메모등록</h2>
  20. <button type="button" class="close" onclick="uifnPopupClose('popupCreateOrderMemo');"><i class="fa fa-times"></i></button>
  21. </div>
  22. <div class="panelContent" style="height:100%; overflow-y:auto;">
  23. <form id="orderMemoRequestFrm">
  24. <input type="hidden" name="ordNo" th:value="${ordNo}" />
  25. <input type="hidden" name="seq" th:value="${seq}" />
  26. <input type="hidden" name="mode" th:value="${mode}" />
  27. <table class="frmStyle">
  28. <colgroup>
  29. <col style="width:30%" />
  30. <col />
  31. </colgroup>
  32. <tbody>
  33. <tr>
  34. <th>등록자ID</th>
  35. <td id="userNm"></td>
  36. </tr>
  37. <tr>
  38. <th>관리자 메모<br/><span id="dpLocAnsContent">0</span>/4,000Byte</th>
  39. <td>
  40. <textarea th:if="${orderMemo != null and orderMemo != ''}" name="memo" style="height:300px;" th:text="${orderMemo.memo}" onkeyup="cfnGetTextLength(this, 4000, $('#dpLocAnsContent'));"></textarea>
  41. <textarea th:unless="${orderMemo != null and orderMemo != ''}" name="memo" style="height:300px;" text="" onkeyup="cfnGetTextLength(this, 4000, $('#dpLocAnsContent'));"></textarea>
  42. </td>
  43. </tr>
  44. <tr id="imageFileTr">
  45. <th>파일</th>
  46. <td><div class="uFile">
  47. <input id="imageFile" name="imageFile" type="file" class="uFileInput"/>
  48. <label for="imageFile" class="uFileLabel" th:text="${mode == 'U' and orderMemo.sysFileNm != null and orderMemo.sysFileNm != '' ? orderMemo.sysFileNm : '파일선택'}">파일선택</label>
  49. <input type="hidden" name="orgFileNm"/>
  50. <input type="hidden" name="sysFileNm"/>
  51. </div>
  52. </td>
  53. </tr>
  54. <tr id="imageTr">
  55. <th:block th:if="${mode == 'U' and orderMemo.sysFileNm != null and orderMemo.sysFileNm != ''}" th:with="uploadImageUrl=${@environment.getProperty('upload.image.view')}">
  56. <!-- <tr>-->
  57. <th>이미지</th>
  58. <td>
  59. <a href="javascript:void(0);" onclick="fnPreImgView()">
  60. <img id="memoImg" th:src="|${uploadImageUrl}/Order/${orderMemo.sysFileNm}|" th:onerror="'this.src=\''+@{${@environment.getProperty('domain.uximage')}+ '/image/no.gif'}+'\';'" width="300px"/>
  61. </a>
  62. </td>
  63. <!-- </tr>-->
  64. </th:block>
  65. </tr>
  66. <!-- <th:block th:text="|${uploadImageUrl}/Order/${orderMemo.sysFileNm}|"></th:block> -->
  67. </tbody>
  68. </table>
  69. <div>
  70. <button type="button" class="btn btn-success btnRight marT10" id="btnOrderMemoRegistOk">저장</button>
  71. </div>
  72. <br>
  73. </form>
  74. </div>
  75. </div>
  76. </div>
  77. <script th:inline="javascript">
  78. /*<![CDATA[*/
  79. // 이벤트 바인딩 관련
  80. var orderMemo = [[${orderMemo}]];
  81. var userNo = [[${userNo}]];
  82. var userNm = [[${userNm}]];
  83. var mode = [[${mode}]];
  84. // 첨부파일 등록
  85. $('#orderMemoRequestFrm input[name=imageFile]').on('change', function() {
  86. var file = this.files[0];
  87. if (typeof(file) == 'undefined'){
  88. return;
  89. }
  90. gagajf.ajaxFileUpload('/common/file/upload?subDir=/Order'
  91. , file
  92. , function(result) {
  93. $('#orderMemoRequestFrm input[name=orgFileNm]').val(result.oldFileName);
  94. $('#orderMemoRequestFrm input[name=sysFileNm]').val(result.newFileName);
  95. let uploadImageUrl = [[${@environment.getProperty('upload.image.view')}]];
  96. let uxImageUrl = [[${@environment.getProperty('domain.uximage')}]];
  97. let html = ' <th>이미지</th>\n';
  98. html += ' <td>\n';
  99. html += ' <a href="javascript:void(0);" onclick="fnPreImgView()">\n';
  100. html += ' <img id="memoImg" src="' + uploadImageUrl + '/Order/' + result.newFileName + '" onerror="' + uxImageUrl + '/image/no.gif" width="300px"/>\n';
  101. html += ' </a>\n';
  102. html += ' </td>\n';
  103. $('#imageTr').html(html);
  104. }
  105. , 'image'
  106. );
  107. });
  108. // 주문메모저장
  109. $('#btnOrderMemoRegistOk').on('click', function() {
  110. var memo = $('#orderMemoRequestFrm textarea[name=memo]').val();
  111. if (gagajf.isNull(memo)) {
  112. mcxDialog.alert('메모 입력해 주세요.');
  113. $('#orderMemoRequestFrm textarea[name=memo]').focus();
  114. return;
  115. }
  116. mcxDialog.confirm('저장하시겠습니까?', {
  117. cancelBtnText : "취소",
  118. sureBtnText : "확인",
  119. sureBtnClick : function(){
  120. var jsonData = JSON.stringify($('#orderMemoRequestFrm').serializeObject());
  121. gagajf.ajaxJsonSubmit(
  122. '/order/memo/save'
  123. , jsonData
  124. , function(){
  125. fnBindOrderMemo();
  126. uifnPopupClose('popupCreateOrderMemo');
  127. }
  128. );
  129. }
  130. });
  131. });
  132. // 이미지 클릭 시 미리보기 팝업 이벤트
  133. var fnPreImgView = function(){
  134. cfnOpenImagePreViewPopup('preImgView', $('#memoImg').attr('src'));
  135. }
  136. $(document).ready(function() {
  137. var userText = '';
  138. if (mode == 'U') {
  139. userText = orderMemo.userNm + ' ('+orderMemo.updNo+')';
  140. $('#orderMemoRequestFrm input[name=orgFileNm]').val(orderMemo.orgFileNm);
  141. $('#orderMemoRequestFrm input[name=sysFileNm]').val(orderMemo.sysFileNm);
  142. } else {
  143. if (!gagajf.isNull(userNm) && !gagajf.isNull(userNo)) {
  144. userText = userNm + ' (' + userNo + ')';
  145. } else {
  146. if (gagajf.isNull(userNm)) userText = userNm;
  147. if (gagajf.isNull(userNo)) userText = userNo;
  148. }
  149. }
  150. $('#userNm').text(userText);
  151. // 등록자만 수정 가능하게 처리
  152. if (mode == 'U' && userNo != orderMemo.updNo) {
  153. $('#btnOrderMemoRegistOk').css('display', 'none');
  154. $('#imageFileTr').css('display', 'none');
  155. $('#orderMemoRequestFrm textarea[name=memo]').attr('readonly', true);
  156. }
  157. // 글자수 제한 byte 표기
  158. cfnGetTextLength($('#orderMemoRequestFrm textarea[name=memo]'), 4000, $('#dpLocAnsContent'));
  159. });
  160. /*]]>*/
  161. </script>
  162. </html>