PrintPackingList.html 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>打印包装清单</title>
  5. <link rel="stylesheet" href="../commons/css/font/iconfont.css"/>
  6. <link rel="stylesheet" href="../commons/css/awsui.css"/>
  7. <style>
  8. .listTable {
  9. width: 100%;
  10. border-collapse: collapse;
  11. }
  12. .listTable th, .listTable td {
  13. padding: 5px;
  14. text-align: center;
  15. border: 1px solid #ddd;
  16. }
  17. .listTable th {
  18. background-color: darkgrey;
  19. }
  20. .listTable tr:nth-child(even) {
  21. background-color: #f2f2f2;
  22. }
  23. .ButtonContainer ul {
  24. list-style-type: none;
  25. padding: 0;
  26. }
  27. .ButtonContainer li {
  28. display: inline-block;
  29. margin-right: 10px;
  30. cursor: pointer;
  31. }
  32. .ButtonContainer span.Text {
  33. vertical-align: middle;
  34. }
  35. @media print {
  36. .noprint {
  37. display: none;
  38. }
  39. @page {
  40. size: auto;
  41. margin: 0mm;
  42. }
  43. }
  44. </style>
  45. </head>
  46. <body>
  47. <div>
  48. <div class="TitleBar noprint">
  49. <div class="Title" style=" color: white; background-color: #346a95; font-size: 15pt; margin: 5px;">
  50. <span>打印包装清单</span>
  51. </div>
  52. </div>
  53. <div class="ButtonContainer header-title noprint" style="margin-left: 10px;">
  54. <button id="ViewPdfButton" type="button" class="awsui-btn awsui-btn-blue">打印</button>
  55. <button type="button" class="awsui-btn" onclick="closeDialog()">关闭</button>
  56. </div>
  57. <div class="DivSection" style="padding-left: 20px; width: 700px;">
  58. <div class="noprint" style="margin-top: 10px;">
  59. <select id="accountId" name="accountId" onchange="accountChange()" style="width: 450px;">
  60. </select>
  61. </div>
  62. <div id="quoteTemplateDiv" style="margin-top: 20px;">
  63. <div style="width: 100%; height: 50px;">
  64. <div style="float: right;">
  65. <span id="time_label"></span>
  66. <br/>
  67. <span style="font-weight: bold; font-size: larger;">包装清单</span>
  68. </div>
  69. </div>
  70. <div style="width: 50%; height: 50px; border: 1px solid; padding: 5px;">
  71. <div>销售目标地址:<span id="SALES_ADDRESS"></span></div>
  72. <div>配送地址:<span id="SHIP_TO_ADDRESS"></span></div>
  73. </div>
  74. <div style="width: 100%; height: 150px; border: 1px solid; padding: 5px; margin-top: 20px;">
  75. <div style="width: 48%; float: left; height: 100px;" id="accountInfo">
  76. </div>
  77. <div style="width: 48%; float: left; height: 100px;" id="otherInfo">
  78. </div>
  79. </div>
  80. <div id="dataTable" style="margin-top: 20px; width: 100%;">
  81. <table class="listTable">
  82. <thead>
  83. <tr>
  84. <th>产品</th>
  85. <th>序列号</th>
  86. <th>数量</th>
  87. </tr>
  88. </thead>
  89. <tbody id="dataTbody">
  90. <tr>
  91. </tr>
  92. </tbody>
  93. </table>
  94. </div>
  95. </div>
  96. </div>
  97. </div>
  98. </body>
  99. <script language="JavaScript" src="../commons/js/jquery/scripts/jquery.js"></script>
  100. <script language="JavaScript" src="../commons/js/awsui.js"></script>
  101. <script type="text/javascript">
  102. const uid = "<#uid>";
  103. const sid = "<#sid>";
  104. const costPdtIds = "<#costPdtIds>";
  105. const accountListData = '<#accountList>';
  106. $(function () {
  107. //初始化
  108. $("#accountId").append("<option value='0'>请选择</option>");
  109. let accountList = JSON.parse(accountListData);
  110. for (let i = 0; i < accountList.length; i++) {
  111. $("#accountId").append("<option value='" + accountList[i].ACCOUNT_ID + "'>" + accountList[i].ACCOUNT_NAME + "</option>");
  112. }
  113. $("#accountId").val(accountList[0].ACCOUNT_ID);
  114. accountChange();
  115. // 更新时间函数
  116. function updateTime() {
  117. const date = new Date();
  118. const year = date.getFullYear();
  119. const month = String(date.getMonth() + 1).padStart(2, '0');
  120. const day = String(date.getDate()).padStart(2, '0');
  121. const hour = date.getHours();
  122. const minute = String(date.getMinutes()).padStart(2, '0');
  123. const second = String(date.getSeconds()).padStart(2, '0');
  124. const period = hour < 12 ? '上午' : '下午';
  125. $('#time_label').text(`${year}-${month}-${day} ${period} ${hour}:${minute}:${second}`);
  126. }
  127. // 页面加载时先执行一次
  128. updateTime();
  129. // 每隔 60 秒更新一次时间
  130. setInterval(updateTime, 500); // 60 * 1000 毫秒
  131. });
  132. //切换客户
  133. function accountChange() {
  134. let accountId = $("#accountId").val();
  135. $("#accountInfo").html("");
  136. $("#accountInfo").html($("#accountId").find("option:selected").text());
  137. $("#dataTbody").html("");
  138. $("#otherInfo").html("");
  139. awsui.ajax.request({
  140. type: "POST", async: false, dataType: "json",
  141. url: "./jd?cmd=com.awspaas.user.apps.donenow_ivt.getCostProductPackList",
  142. data: "sid=" + sid + "&accountId=" + accountId + "&costPdtIds=" + costPdtIds,
  143. success: function (res) {
  144. if (res.result == "ok") {
  145. var data = res.data;
  146. if (data.length > 0) {
  147. for (var i = 0; i < data.length; i++) {
  148. var row = data[i];
  149. var packings = row.PACKINGS;
  150. for (var j = 0; j < packings.length; j++) {
  151. var packing = packings[j];
  152. $("#dataTbody").append("<tr><td>" + packing.PRODUCTNAME + "</td><td>" + getValue(packing.SERIALNUMBER) + "</td><td>" + packing.QUANTITY + "</td></tr>")
  153. }
  154. $("#otherInfo").append(getValue(row.CONTRACT_INFO) + "<br/>");
  155. $("#SHIP_TO_ADDRESS").html(getValue(row.SHIP_TO_ADDRESS));
  156. $("#SALES_ADDRESS").html(getValue(row.SALES_ADDRESS));
  157. }
  158. }
  159. }
  160. }
  161. });
  162. }
  163. $("#ViewPdfButton").on("click", function () {
  164. window.print();
  165. });
  166. function closeDialog() {
  167. parent.document.querySelector(".el-overlay>.el-overlay-dialog[aria-label='包装清单']>div.full-center-dialog>.show-close>.el-dialog__headerbtn").click();
  168. }
  169. //undefined null 都转成 空字符
  170. function getValue(value) {
  171. if (value == undefined || value == null || typeof (value) == "undefined") {
  172. return "";
  173. } else {
  174. return value;
  175. }
  176. }
  177. </script>
  178. </html>