虞城12345_前端

ApplicationUpdate.html 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>应用更新</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <script src="../Script/Common/huayi.load.js"></script>
  8. <script src="../Script/Common/huayi.config.js"></script>
  9. <!--<link href="../css/WorkOrder/Search.css" rel="stylesheet">-->
  10. <link href="../css/init.css" rel="stylesheet" />
  11. <script src="../js/laydate/laydate.js"></script>
  12. <style>
  13. .input,
  14. .versionCode,
  15. .appliName {
  16. background-color: #FFF;
  17. background-image: none;
  18. border: 1px solid #e5e6e7;
  19. border-radius: 1px;
  20. color: inherit;
  21. padding: 6px 12px;
  22. }
  23. .versionCode,
  24. .appliName {
  25. width: 45%;
  26. height: 34px;
  27. }
  28. .fjnr {
  29. padding: 0!important;
  30. border: none!important;
  31. }
  32. a.search,
  33. a.addupdate {
  34. display: inline-block;
  35. }
  36. </style>
  37. </head>
  38. <body class="gray-bg">
  39. <div class="daoHang clearfix">
  40. <div class="dhLeft">
  41. <sapn>
  42. <i class="syIcon"></i>位置:
  43. <a href="javaScript:;" id="ReIndex">首页</a>&gt;
  44. <a href="javaScript:;">手机客户端管理</a>&gt;
  45. <a href="" class="nowPosition">应用更新</a>
  46. </sapn>
  47. </div>
  48. <div class="dhRight">
  49. <a href="" title="刷新"><i class="fa fa-refresh"></i></a>
  50. </div>
  51. </div>
  52. <div class="wrapper wrapper-content">
  53. <div class="Content_box">
  54. <!--待处理/-->
  55. <div class="complain Shows">
  56. <div class="th-top clearfix">
  57. <div class="form-inline th-bar clearfix">
  58. <div class="time-box form-group" >
  59. <i class="tub fa fa-search"></i>
  60. <input class="form-control appName" type="text" placeholder="请输入应用名称">
  61. </div>
  62. <div class="time-box form-group" >
  63. <i class="tub fa fa-calendar"></i>
  64. <input class="form-control" type="text" id="startTime" placeholder="起始时间">
  65. </div>
  66. <div class="form-group tool_bars pull-right">
  67. <botton class="btns search">搜索</botton>
  68. <botton class="btns addupdate">添加应用更新</botton>
  69. </div>
  70. </div>
  71. </div>
  72. <div style="width: 100%;">
  73. <table id="table1" data-row-style="rowStyle" data-query-params="queryParams">
  74. <thead>
  75. <tr>
  76. <th data-align="center" data-formatter="setCode">编号</th>
  77. <th data-field="F_AppliName" data-align="center">应用名称</th>
  78. <th data-field="F_VersionCode" data-align="center">版本号</th>
  79. <th data-field="F_DownUrl" data-align="center">下载地址</th>
  80. <th data-field="F_CreateTime" data-align="center">上传时间</th>
  81. <th data-align="center" data-formatter="del">操作</th>
  82. </tr>
  83. </thead>
  84. </table>
  85. </div>
  86. </div>
  87. </div>
  88. </div>
  89. <!--添加弹出内容-->
  90. <div class="model addModel">
  91. <div class="box">
  92. <div class="btop clearfix">
  93. <p class="btl">添加应用更新</p>
  94. <p class="btr addBtr" title="关闭">X</p>
  95. </div>
  96. <div class="boxCon" id="boxConInput">
  97. <table>
  98. <tbody>
  99. <tr>
  100. <th>应用名称</th>
  101. <td colspan="3"><input type="text" class="appliName" /></td>
  102. </tr>
  103. <tr>
  104. <th>版本号</th>
  105. <td colspan="3"><input type="text" class="versionCode" /></td>
  106. </tr>
  107. <tr>
  108. <th>应用安装包上传:</th>
  109. <td colspan="7">
  110. <span class="fjnr"></span>
  111. <input class="input" type="file" name="upFile" id="upFile" multiple="multiple" style="display: none;">
  112. <input class="input" type="button" value="上传" id="scwj" />
  113. <input class="input" type="button" value="删除附件" id="scfj" style="display:none;" />
  114. <input type="hidden" id="file" />
  115. </td>
  116. </tr>
  117. </tbody>
  118. </table>
  119. <div style="text-align: center;">
  120. <button class="btns addCun">保存</button>
  121. </div>
  122. </div>
  123. </div>
  124. <input type="hidden" id="Pages" />
  125. </div>
  126. <script>
  127. $(document).ready(function() {
  128. laydate.render({
  129. elem: '#startTime',
  130. range: '~',
  131. theme: '#00a1cb',
  132. });
  133. //搜索
  134. $('.search').click(function() {
  135. initTable1();
  136. })
  137. //添加
  138. $('.addupdate').click(function() {
  139. $(".addModel").show();
  140. $(".addCun").show();
  141. Clean();
  142. });
  143. //关闭
  144. $(".addBtr").click(function() {
  145. $(".addModel").hide();
  146. })
  147. //保存
  148. $('.addCun').click(function() {
  149. AddUpdate();
  150. });
  151. //上传安装包
  152. $("#scwj").click(function() {
  153. $("#upFile").trigger("click");
  154. })
  155. $("#upFile").change(function() {
  156. upload();
  157. })
  158. $("#scfj").click(function() {
  159. $(".fjnr").text("");
  160. $("#scfj").hide();
  161. })
  162. })
  163. var table1 = $('#table1');
  164. initTable1();
  165. function initTable1() {
  166. //先销毁表格
  167. table1.bootstrapTable('destroy');
  168. //初始化表格,动态从服务器加载数据
  169. table1.bootstrapTable({
  170. method: "get", //使用get请求到服务器获取数据
  171. url: huayi.config.callcenter_url + "ApplicationsRefresh/GetAllList", //获取数据的Servlet地址
  172. contentType: "application/x-www-form-urlencoded",
  173. striped: true, //表格显示条纹
  174. pagination: true, //启动分页
  175. pageSize: 10, //每页显示的记录数
  176. pageNumber: 1, //当前第几页
  177. pageList: [10, 20, 50, 100], //记录数可选列表
  178. search: false, //是否启用查询
  179. showColumns: false, //显示下拉框勾选要显示的列
  180. showRefresh: false, //显示刷新按钮
  181. sidePagination: "server", //表示服务端请求
  182. //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
  183. //设置为limit可以获取limit, offset, search, sort, order
  184. queryParamsType: "undefined",
  185. queryParams: function queryParams(params) { //设置查询参数
  186. var param = {
  187. page: params.pageNumber,
  188. pagesize: params.pageSize,
  189. token: $.cookie("token"),
  190. appliName: $('.appName').val(),
  191. strstarttime:$('#startTime').val() && $('#startTime').val().split('~')[0],
  192. strendtime: $('#startTime').val() && $('#startTime').val().split('~')[1]
  193. };
  194. return param;
  195. },
  196. onLoadSuccess: function() { //加载成功时执行
  197. //layer.msg("加载成功");
  198. },
  199. onLoadError: function() { //加载失败时执行
  200. //layer.msg("加载数据失败", { time: 1500, icon: 2 });
  201. }
  202. });
  203. }
  204. function del(val, row) {
  205. return '<a class="xg" onclick="dell(' + row.F_Id + ')" title="点击删除">删除</a>'+
  206. '<a class="xg" href="' + row.F_DownUrl + '" download="filename" title="点击下载">下载</a>';
  207. }
  208. //删除一条
  209. function dell(str) {
  210. layer.confirm('确定删除当前记录?', {
  211. btn: ['是', '否'] //按钮
  212. }, function() {
  213. $.post(huayi.config.callcenter_url + "ApplicationsRefresh/DelInfo", {
  214. ids: str,
  215. token: $.cookie("token")
  216. }, function(data) {
  217. data = JSON.parse(data);
  218. /*验证请求*/
  219. if(data.state == "success") {
  220. layer.msg("删除成功");
  221. //重新加载
  222. initTable1();
  223. }
  224. });
  225. });
  226. }
  227. //编号
  228. function setCode(val, row, index) {
  229. return index + 1;
  230. }
  231. //新增
  232. function AddUpdate() {
  233. if (!$.trim($(".appliName").val())) {
  234. layer.confirm('请输入应用名称', {
  235. btn: ['确定'] //按钮
  236. });
  237. return;
  238. }else{
  239. // var regAppName = /^(?!_)(?!.*?_$)[a-zA-Z0-9_]+$/;//由字母、数字、下划线组成
  240. // if(!regAppName.test($(".appliName").val())){
  241. // layer.msg("应用名称只能含有字母、数字、下划线,且不能以下划线开头和结尾。");
  242. // return;
  243. // }else{
  244. if (!$.trim($(".versionCode").val())) {
  245. layer.confirm('请输入版本号', {
  246. btn: ['确定'] //按钮
  247. });
  248. return;
  249. }else{
  250. var regVersionCode = /^(?!\.)(?!.*?\.$)[a-zA-Z0-9\.]+$/;//由字母、数字、.组成
  251. if(!regVersionCode.test($.trim($(".versionCode").val()))){
  252. layer.msg("版本号只能含有字母、数字、.,且不能以.开头和结尾。");
  253. return;
  254. }else{
  255. if (!$("#file").val()) {
  256. layer.confirm('请上传文件', {
  257. btn: ['确定'] //按钮
  258. });
  259. return;
  260. }
  261. $.post(huayi.config.callcenter_url + "ApplicationsRefresh/SaveInfo", {
  262. appliName: $('.appliName').val(),
  263. versionCode: $('.versionCode').val(),
  264. files: $("#file").val(),
  265. token: $.cookie("token")
  266. }, function(data) {
  267. data = JSON.parse(data);
  268. if(data.state == "success") {
  269. $(".addModel").hide();
  270. layer.msg("增加成功");
  271. initTable1();
  272. }
  273. });
  274. }
  275. }
  276. //}
  277. }
  278. }
  279. //清除
  280. function Clean() {
  281. $('.appliName').val(''),
  282. $('.versionCode').val(''),
  283. $('.fjnr').html('');
  284. $('#scfj').css({'display':'none'});
  285. $("#file").val('')
  286. }
  287. //上传文件
  288. function upload() {
  289. var Files = document.getElementById("upFile").files;
  290. if(Files.length > 0) {
  291. var formData = new FormData();
  292. for(var i = 0; i < Files.length; i++) {
  293. formData.append('file' + i, Files[i]);
  294. }
  295. formData.append("token", $.cookie("token"));
  296. formData.append("appliName", $('.appliName').val());
  297. formData.append("versionCode", $('.versionCode').val());
  298. $.ajax({
  299. url: huayi.config.callcenter_url + "ApplicationsRefresh/UploadFile",
  300. type: "POST",
  301. data: formData,
  302. /**
  303. *必须false才会自动加上正确的Content-Type
  304. */
  305. contentType: false,
  306. /**
  307. * 必须false才会避开jQuery对 formdata 的默认处理
  308. * XMLHttpRequest会对 formdata 进行正确的处理
  309. */
  310. processData: false,
  311. success: function(result) {
  312. document.getElementById("upFile").outerHTML = document.getElementById("upFile").outerHTML;
  313. $("#upFile").change(function() {
  314. upload();
  315. });
  316. var r = $.parseJSON(result);
  317. if(r.state.toLowerCase() == "success") {
  318. $(".fjnr").text(r.data);
  319. var a = huayi.config.callcenter_url + r.data;
  320. $("#file").val(a);
  321. $("#scfj").show();
  322. // var str = '';
  323. // var Str;
  324. //
  325. // $(a).each(function(i, n) {
  326. // console.log(n.F_DownUrl);
  327. // str += n.F_DownUrl + ",";
  328. // Str = (str.substring(str.length - 1) == ',') ? str.substring(0, str.length - 1) : str;
  329. // console.log(Str);
  330. // })
  331. // $("#file").val(Str);
  332. // $("#scfj").show();
  333. }
  334. }
  335. });
  336. } else {
  337. layer.confirm('请上传文件!', {
  338. btn: ['确定']
  339. });
  340. }
  341. }
  342. </script>
  343. </body>
  344. </html>