Orl 短網址,供三星、福斯使用

UrlManagement.blade.php 9.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. @extends('admin.master')
  2. @section('content')
  3. <div class="row">
  4. <div class="col-lg-12">
  5. <div class="contentpanel">
  6. <form id="listForm" method="post">
  7. <!-- 功能按鈕(新增/批量處理等等) -->
  8. <div class="row" style="margin-bottom: 5px;">
  9. <div class="col-lg-12">
  10. <ol class="headermenu">
  11. <li>
  12. <a class="btn btn-darkblue btn-xs" href="urlManagement/create">
  13. <strong>新增</strong>
  14. </a>
  15. </li>
  16. <li>
  17. <button class="btn btn-darkblue btn-xs" id="export"><strong>匯出</strong></button>
  18. </li>
  19. <li>
  20. <input type="text" id="copy_link" style="display: inline-block;">
  21. </li>
  22. </ol>
  23. </div>
  24. </div>
  25. <!-- 搜尋段 -->
  26. <div class="panel panel-default">
  27. <div class="panel-heading" data-toggle="collapse" data-target="#search_content">
  28. <h3 class="panel-title">網址管理</h3>
  29. </div>
  30. <div id="search_content" class="collapse in">
  31. <div class="panel-body">
  32. <!-- 活動名稱 -->
  33. <div class="form-group col-xs-12 col-sm-6 col-lg-6">
  34. <label for="title">活動名稱</label>
  35. <select class="form-control input-sm" id="title">
  36. @foreach($titles as $data)
  37. <option value="{{ $data['title'] }}">{{ $data['title'] }}</option>
  38. @endforeach
  39. </select>
  40. </div>
  41. <!-- 備註 -->
  42. <div class="form-group col-xs-12 col-sm-6 col-lg-6">
  43. <label for="memo">備註</label>
  44. <input type="text" class="form-control input-sm" id="memo" maxlength="20">
  45. </div>
  46. <!-- 時間範圍 from -->
  47. <div class="form-group col-xs-12 col-sm-6 col-lg-6">
  48. <label for="createDateStart">時間範圍(起)</label>
  49. <input type="text" class="form-control input-sm" id="createDateStart"
  50. maxlength="10">
  51. </div>
  52. <!-- 時間範圍 to -->
  53. <div class="form-group col-xs-12 col-sm-6 col-lg-6">
  54. <label for="createDateFinal">時間範圍(迄)</label>
  55. <input type="text" class="form-control input-sm" id="createDateFinal"
  56. maxlength="10">
  57. </div>
  58. <!-- 有效否 -->
  59. <div class="form-group col-xs-12 col-sm-6 col-lg-6">
  60. <label for="valid">有效否</label>
  61. <select class="form-control input-sm" id="valid">
  62. @foreach($valids as $data)
  63. <option value="{{ $data['id'] }}">{{ $data['text'] }}</option>
  64. @endforeach
  65. </select>
  66. </div>
  67. <!-- Search -->
  68. <div class="form-group col-xs-12 col-sm-12 col-lg-12">
  69. <a class="btn btn-success btn-xs" onclick="javascript: custom_search();">
  70. <div class="glyphicon glyphicon-search"></div>
  71. </a>
  72. </div>
  73. </div>
  74. </div>
  75. </div>
  76. <hr class="search-hr"/>
  77. <!-- 列表段 -->
  78. <div class="row">
  79. <div class="col-lg-12">
  80. <table id="GridView1" class="table table-striped table-bordered" cellspacing="0">
  81. <thead>
  82. <tr>
  83. <th>ID</th>
  84. <th>活動名稱</th>
  85. <th>網址</th>
  86. <th>短代碼</th>
  87. <th>備註</th>
  88. <th>造訪次</th>
  89. <th>有效否</th>
  90. <th>編輯</th>
  91. <th>QRCode</th>
  92. </tr>
  93. </thead>
  94. </table>
  95. </div>
  96. </div>
  97. </form>
  98. <!-- row -->
  99. </div>
  100. </div>
  101. </div>
  102. @endsection
  103. @section('extjs')
  104. <script>
  105. $(document).ready(function () {
  106. var table = $('#GridView1').dataTable({
  107. "scrollX": true,
  108. "processing": true,
  109. "serverSide": true,
  110. "ajax": "urlManagement/grid",
  111. "paging": true,
  112. "ordering": true,
  113. "info": true,
  114. "order": [[0, "desc"]],
  115. "stateSave": true,
  116. "pagingType": "full",
  117. "bFilter": true,
  118. "aoColumnDefs": [{
  119. 'bSortable': false,
  120. 'aTargets': [2, 3, 6, 7, 8] //不想參加排序的欄位,可指定多個,逗號分隔
  121. }]
  122. });
  123. // 從網址參觸發搜尋
  124. custom_search();
  125. $('#GridView1_filter').hide();
  126. });
  127. //客製化搜尋欄位
  128. function custom_search() {
  129. $('#GridView1').DataTable()
  130. .column(1).search($('#title').val())
  131. .column(2).search($('#memo').val())
  132. .column(3).search($('#createDateStart').val() + "\n" + $('#createDateFinal').val())
  133. .column(4).search($('#valid').val())
  134. ;
  135. $('#GridView1').dataTable().fnDraw(true);
  136. }
  137. setInterval(function () {
  138. // 複製網址
  139. $("button[id^='url_copy_']").unbind("click");
  140. $("button[id^='url_copy_']").bind("click", function () {
  141. var copy_link = document.getElementById("copy_link");
  142. copy_link.value = $(this).attr('url');
  143. copy_link.select();
  144. document.execCommand("copy");
  145. return false;
  146. });
  147. }, 500);
  148. // 匯出報告
  149. $("#export").click(function () {
  150. //加個讀取中畫面
  151. $.blockUI({
  152. css: {
  153. border: 'none',
  154. padding: '15px',
  155. backgroundColor: '#000',
  156. '-webkit-border-radius': '10px',
  157. '-moz-border-radius': '10px',
  158. opacity: .5,
  159. color: '#FFF'
  160. }
  161. });
  162. var http = new XMLHttpRequest();
  163. http.responseType = 'blob';
  164. var header;
  165. var blob;
  166. var url = 'urlManagement/export';
  167. var params =
  168. 'title=' + $('#title').val()
  169. + '&memo=' + $('#memo').val()
  170. + '&createDateStart=' + $('#createDateStart').val()
  171. + '&createDateFinal=' + $('#createDateFinal').val()
  172. + '&valid=' + $('#valid').val()
  173. ;
  174. http.open("POST", url, true);
  175. http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  176. http.onreadystatechange = function () {//Call a function when the state changes.
  177. if (http.readyState == 4 && http.status == 200) {
  178. var filename = "";
  179. var disposition = http.getResponseHeader('Content-Disposition');
  180. if (disposition && disposition.indexOf('attachment') !== -1) {
  181. var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
  182. var matches = filenameRegex.exec(disposition);
  183. if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
  184. }
  185. var type = http.getResponseHeader('Content-Type');
  186. blob = new Blob([http.response], {type: type, endings: 'native'});
  187. var URL = window.URL || window.webkitURL;
  188. var downloadUrl = URL.createObjectURL(blob);
  189. var a = document.createElement("a");
  190. a.href = downloadUrl;
  191. a.download = filename;
  192. document.body.appendChild(a);
  193. a.click();
  194. }
  195. //解除鎖定
  196. $.unblockUI();
  197. }
  198. http.send(params);
  199. return false;
  200. });
  201. //日期選擇器
  202. $('#createDateStart').datepicker({
  203. dateFormat: 'yy-mm-dd'
  204. });
  205. $('#createDateFinal').datepicker({
  206. dateFormat: 'yy-mm-dd'
  207. });
  208. </script>
  209. @endsection