三元财务UI

importCustomers.html 8.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <link href="../js/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" />
  6. <script src="../Script/Common/huayi.load.js"></script>
  7. <script src="../Script/Common/huayi.config.js"></script>
  8. <title>导入客户信息</title>
  9. <style>
  10. .btn-success {
  11. color: #fff;
  12. background-color: #1ab394;
  13. border-color: #4cae4c;
  14. border-radius: 4px;
  15. cursor: pointer;
  16. }
  17. .btn-success.active,
  18. .btn-success:active,
  19. .btn-success:focus,
  20. .btn-success:hover {
  21. border-color: #4cae4c;
  22. background-color: #1ab394;
  23. }
  24. .btn-success[disabled],
  25. .btn-success[disabled]:active,
  26. .btn-success[disabled]:focus,
  27. .btn-success[disabled]:hover {
  28. background-color: #1ab394;
  29. }
  30. #importNum {
  31. width: 130px;
  32. margin: 60px auto 0 auto;
  33. }
  34. .progress {
  35. width: 80%;
  36. margin: 20px auto 0 auto;
  37. display: none;
  38. }
  39. div.drop_down {
  40. position: relative;
  41. line-height: 34px;
  42. }
  43. .drop_down .caret {
  44. position: absolute;
  45. right: 10px;
  46. top: 15px;
  47. }
  48. .form-group {
  49. margin-bottom: 10px!important;
  50. }
  51. @media (min-width: 768px) {
  52. .drop_down .form-control {
  53. width: 818px;
  54. }
  55. }
  56. </style>
  57. </head>
  58. <body>
  59. <div style="padding: 10px; margin-bottom: 20px;">
  60. <div class="alert alert-info" role="alert">
  61. <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  62. <span class="sr-only">tips:</span> 上传文件需要严格按照下载的EXCEL模板进行填写!上传后点击导入即可!
  63. </div>
  64. <div class="form-inline clearfix">
  65. <!--<div class="form-group">
  66. <select class="form-control selectpicker" id="head_form_rengin" data-live-search="true">
  67. <option value="0">请选择区域</option>
  68. </select>
  69. </div>
  70. <div class="form-group">
  71. <select class="form-control selectpicker" id="head_form_pro" data-live-search="true">
  72. <option value="0">请选择项目</option>
  73. </select>
  74. </div>
  75. <div class="form-group">
  76. <select class="form-control selectpicker" id="head_form_floor" data-live-search="true">
  77. <option value="0">请选择期号</option>
  78. </select>
  79. </div>-->
  80. <div class="form-group">
  81. <a id="excelMod" class="btn btn-success form-control" title="点击下载EXCEL模板" href="javascript:void(0)" onclick="ExcelMod()" rel="nofollow">下载EXCEL模板</a>
  82. </div>
  83. <div class="form-group">
  84. <input class="hidden" type="file" id="upFile" name="upFile" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel,application/x-xls,application/x-xlsx" />
  85. <input class="form-control btn btn-success" title="点击上传Excel文件" type="button" value="上传Excel文件" id="upFileExcel" />
  86. <span class="excelName"></span>
  87. </div>
  88. </div>
  89. <div class="progress">
  90. <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  91. </div>
  92. </div>
  93. <div class="form-group text-center">
  94. <input type="button" id="importNum" class="form-control btn btn-success" value="导入" />
  95. </div>
  96. </div>
  97. <script src="../js/bootstrap-select/js/bootstrap-select.js"></script>
  98. <script src="../js/bootstrap-select/js/i18n/defaults-zh_CN.js"></script>
  99. <script>
  100. var percents = 0; //长传文件进度值
  101. $(document).ready(function() {
  102. //获取 区域 项目 期号下拉
  103. // helper.getDropList.getProLocations($('#head_form_rengin'), $('#head_form_pro'), $('#head_form_floor'));
  104. //上传EXCEL文件
  105. $("#upFileExcel").click(function() {
  106. $("#upFile").trigger("click");
  107. });
  108. $("#upFile").change(function() {
  109. var Files = document.getElementById("upFile").files;
  110. $('.excelName').html(Files[0].name); //文件名称
  111. });
  112. $("#importNum").click(function() {
  113. uploads();
  114. });
  115. });
  116. //下载模板
  117. function ExcelMod() {
  118. window.location.href = huayi.config.callcenter_url + "ExcelMod/CustomerList_Excel.xls";
  119. }
  120. //上传Excel文件 模拟实时进度
  121. function uploads() {
  122. var txtName = $('.excelName').text();
  123. // if($('#head_form_rengin').val() === "0" || $('#head_form_rengin').val() === undefined) {
  124. // layer.confirm('请选择区域', {
  125. // icon: 2,
  126. // btn: ['确定']
  127. // });
  128. // return;
  129. // }
  130. // if($('#head_form_pro').val() === "0" || $('#head_form_pro').val() === undefined) {
  131. // layer.confirm('请选择项目', {
  132. // icon: 2,
  133. // btn: ['确定']
  134. // });
  135. // return;
  136. // }
  137. // if($('#head_form_floor').val() === "0" || $('#head_form_floor').val() === undefined) {
  138. // layer.confirm('请选择期号', {
  139. // icon: 2,
  140. // btn: ['确定']
  141. // });
  142. // return;
  143. // }
  144. if(txtName == '') {
  145. layer.confirm('你还没有上传文件', {
  146. icon: 2,
  147. btn: ['确定']
  148. });
  149. return;
  150. }
  151. //一般情况下,excel后缀是".xls",在2007以及以后的版本中又增加了".xlsx"。excel的模板文件后缀名是".xlt",启动宏的工作簿后缀名是".xlsm"。
  152. if(txtName.indexOf('.xls') != -1 ||
  153. txtName.indexOf('.xlsx') != -1 ||
  154. txtName.indexOf('.xlt') != -1 ||
  155. txtName.indexOf('.xlsm') != -1
  156. ) {
  157. var formData = new FormData();
  158. var Files = document.getElementById("upFile").files;
  159. formData.append("upFile", Files[0]); //是 HttpPostedFile Excel文件
  160. // formData.append("areaid", $('#head_form_rengin').val()); //是 int 区域id (下拉)
  161. // formData.append("regionid", $('#head_form_pro').val()); //是 int 项目id (下拉)
  162. // formData.append("buldingid", $('#head_form_floor').val()); //是 int 期号 (下拉)
  163. formData.append("token", $.cookie("token"));
  164. $.ajax({
  165. url: huayi.config.callcenter_url + "Customer/ImportExcel",
  166. type: "POST",
  167. data: formData,
  168. /**
  169. *必须false才会自动加上正确的Content-Type
  170. */
  171. contentType: false,
  172. /**
  173. * 必须false才会避开jQuery对 formdata 的默认处理
  174. * XMLHttpRequest会对 formdata 进行正确的处理
  175. */
  176. processData: false,
  177. xhr: function() {
  178. var xhr = jQuery.ajaxSettings.xhr();
  179. xhr.upload.onload = function() {
  180. updateProgress(88);
  181. }
  182. xhr.upload.onprogress = function(ev) {
  183. updateProgress(70);
  184. }
  185. return xhr;
  186. },
  187. beforeSend: function(request) {
  188. $('.progress').show();
  189. $("#importNum").attr("disabled", true);
  190. $("#importNum").val('导入中...');
  191. updateProgress(50);
  192. },
  193. success: function(result) {
  194. updateProgress(100);
  195. var r = $.parseJSON(result);
  196. $("#importNum").attr("disabled", false);
  197. $("#importNum").val('导入');
  198. if(r.state.toLowerCase() == "success") {
  199. var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  200. parent.layer.close(index); //再执行关闭
  201. parent.getTableDataList();
  202. parent.layer.alert(r.message, {
  203. icon: 1,
  204. btn: ['确定']
  205. });
  206. }
  207. },
  208. error: function(textStatus) {
  209. percents = 0;
  210. $('.progress').hide();
  211. layer.confirm('网络繁忙,请稍后再试...', {
  212. btn: ['确定'] //按钮
  213. });
  214. $("#importNum").attr("disabled", false);
  215. $("#importNum").val('导入');
  216. },
  217. complete: function(XMLHttpRequest, textStatus) {
  218. percents = 0;
  219. $('.progress').hide();
  220. if(textStatus == 'timeout') {
  221. var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
  222. xmlhttp.abort();
  223. layer.confirm('网络超时,请稍后再试...', {
  224. btn: ['确定'] //按钮
  225. });    
  226. }
  227. $("#importNum").attr("disabled", false);
  228. $("#importNum").val('导入');
  229. },
  230. });
  231. } else {
  232. layer.confirm('请上传EXCEL文件', {
  233. icon: 2,
  234. btn: ['确定']
  235. });
  236. return;
  237. }
  238. }
  239. //更新进度条
  240. function updateProgress(p) {
  241. while(percents < p) {
  242. percents++;
  243. $('.progress-bar').css('width', percents + '%');
  244. $('.progress-bar').text(percents + '%');
  245. }
  246. }
  247. </script>
  248. </body>
  249. </html>