虞城12345_前端

ApplicationUpdate.html 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375
  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. <span style="color:#FF0000; border: none;">
  116. (文件格式为png,jpg,mp4,mp3,pdf,doc,docx,xls,xlsx)
  117. </span>
  118. </td>
  119. </tr>
  120. </tbody>
  121. </table>
  122. <div style="text-align: center;">
  123. <button class="btns addCun">保存</button>
  124. </div>
  125. </div>
  126. </div>
  127. <input type="hidden" id="Pages" />
  128. </div>
  129. <script>
  130. $(document).ready(function() {
  131. laydate.render({
  132. elem: '#startTime',
  133. range: '~',
  134. theme: '#00a1cb',
  135. });
  136. //搜索
  137. $('.search').click(function() {
  138. initTable1();
  139. })
  140. //添加
  141. $('.addupdate').click(function() {
  142. $(".addModel").show();
  143. $(".addCun").show();
  144. Clean();
  145. });
  146. //关闭
  147. $(".addBtr").click(function() {
  148. $(".addModel").hide();
  149. })
  150. //保存
  151. $('.addCun').click(function() {
  152. AddUpdate();
  153. });
  154. //上传安装包
  155. $("#scwj").click(function() {
  156. $("#upFile").trigger("click");
  157. })
  158. $("#upFile").change(function() {
  159. upload();
  160. })
  161. $("#scfj").click(function() {
  162. $(".fjnr").text("");
  163. $("#scfj").hide();
  164. })
  165. })
  166. var table1 = $('#table1');
  167. initTable1();
  168. function initTable1() {
  169. //先销毁表格
  170. table1.bootstrapTable('destroy');
  171. //初始化表格,动态从服务器加载数据
  172. table1.bootstrapTable({
  173. method: "get", //使用get请求到服务器获取数据
  174. url: huayi.config.callcenter_url + "ApplicationsRefresh/GetAllList", //获取数据的Servlet地址
  175. contentType: "application/x-www-form-urlencoded",
  176. striped: true, //表格显示条纹
  177. pagination: true, //启动分页
  178. pageSize: 10, //每页显示的记录数
  179. pageNumber: 1, //当前第几页
  180. pageList: [10, 20, 50, 100], //记录数可选列表
  181. search: false, //是否启用查询
  182. showColumns: false, //显示下拉框勾选要显示的列
  183. showRefresh: false, //显示刷新按钮
  184. sidePagination: "server", //表示服务端请求
  185. //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
  186. //设置为limit可以获取limit, offset, search, sort, order
  187. queryParamsType: "undefined",
  188. queryParams: function queryParams(params) { //设置查询参数
  189. var param = {
  190. page: params.pageNumber,
  191. pagesize: params.pageSize,
  192. token: $.cookie("token"),
  193. appliName: $('.appName').val(),
  194. strstarttime:$('#startTime').val() && $('#startTime').val().split('~')[0],
  195. strendtime: $('#startTime').val() && $('#startTime').val().split('~')[1]
  196. };
  197. return param;
  198. },
  199. onLoadSuccess: function() { //加载成功时执行
  200. //layer.msg("加载成功");
  201. },
  202. onLoadError: function() { //加载失败时执行
  203. //layer.msg("加载数据失败", { time: 1500, icon: 2 });
  204. }
  205. });
  206. }
  207. function del(val, row) {
  208. return '<a class="xg" onclick="dell(' + row.F_Id + ')" title="点击删除">删除</a>'+
  209. '<a class="xg" href="' + row.F_DownUrl + '" download="filename" title="点击下载">下载</a>';
  210. }
  211. //删除一条
  212. function dell(str) {
  213. layer.confirm('确定删除当前记录?', {
  214. btn: ['是', '否'] //按钮
  215. }, function() {
  216. $.post(huayi.config.callcenter_url + "ApplicationsRefresh/DelInfo", {
  217. ids: str,
  218. token: $.cookie("token")
  219. }, function(data) {
  220. data = JSON.parse(data);
  221. /*验证请求*/
  222. if(data.state == "success") {
  223. layer.msg("删除成功");
  224. //重新加载
  225. initTable1();
  226. }
  227. });
  228. });
  229. }
  230. //编号
  231. function setCode(val, row, index) {
  232. return index + 1;
  233. }
  234. //新增
  235. function AddUpdate() {
  236. if (!$.trim($(".appliName").val())) {
  237. layer.confirm('请输入应用名称', {
  238. btn: ['确定'] //按钮
  239. });
  240. return;
  241. }else{
  242. // var regAppName = /^(?!_)(?!.*?_$)[a-zA-Z0-9_]+$/;//由字母、数字、下划线组成
  243. // if(!regAppName.test($(".appliName").val())){
  244. // layer.msg("应用名称只能含有字母、数字、下划线,且不能以下划线开头和结尾。");
  245. // return;
  246. // }else{
  247. if (!$.trim($(".versionCode").val())) {
  248. layer.confirm('请输入版本号', {
  249. btn: ['确定'] //按钮
  250. });
  251. return;
  252. }else{
  253. var regVersionCode = /^(?!\.)(?!.*?\.$)[a-zA-Z0-9\.]+$/;//由字母、数字、.组成
  254. if(!regVersionCode.test($.trim($(".versionCode").val()))){
  255. layer.msg("版本号只能含有字母、数字、.,且不能以.开头和结尾。");
  256. return;
  257. }else{
  258. if (!$("#file").val()) {
  259. layer.confirm('请上传文件', {
  260. btn: ['确定'] //按钮
  261. });
  262. return;
  263. }
  264. $.post(huayi.config.callcenter_url + "ApplicationsRefresh/SaveInfo", {
  265. appliName: $('.appliName').val(),
  266. versionCode: $('.versionCode').val(),
  267. files: $("#file").val(),
  268. token: $.cookie("token")
  269. }, function(data) {
  270. data = JSON.parse(data);
  271. if(data.state == "success") {
  272. $(".addModel").hide();
  273. layer.msg("增加成功");
  274. initTable1();
  275. }
  276. });
  277. }
  278. }
  279. //}
  280. }
  281. }
  282. //清除
  283. function Clean() {
  284. $('.appliName').val(''),
  285. $('.versionCode').val(''),
  286. $('.fjnr').html('');
  287. $('#scfj').css({'display':'none'});
  288. $("#file").val('')
  289. }
  290. //上传文件
  291. function upload() {
  292. var Files = document.getElementById("upFile").files;
  293. if(Files.length > 0) {
  294. var formData = new FormData();
  295. for(var i = 0; i < Files.length; i++) {
  296. formData.append('file' + i, Files[i]);
  297. }
  298. formData.append("token", $.cookie("token"));
  299. formData.append("appliName", $('.appliName').val());
  300. formData.append("versionCode", $('.versionCode').val());
  301. $.ajax({
  302. url: huayi.config.callcenter_url + "ApplicationsRefresh/UploadFile",
  303. type: "POST",
  304. data: formData,
  305. /**
  306. *必须false才会自动加上正确的Content-Type
  307. */
  308. contentType: false,
  309. /**
  310. * 必须false才会避开jQuery对 formdata 的默认处理
  311. * XMLHttpRequest会对 formdata 进行正确的处理
  312. */
  313. processData: false,
  314. success: function(result) {
  315. document.getElementById("upFile").outerHTML = document.getElementById("upFile").outerHTML;
  316. $("#upFile").change(function() {
  317. upload();
  318. });
  319. var r = $.parseJSON(result);
  320. if(r.state.toLowerCase() == "success") {
  321. $(".fjnr").text(r.data);
  322. var a = huayi.config.callcenter_url + r.data;
  323. $("#file").val(a);
  324. $("#scfj").show();
  325. // var str = '';
  326. // var Str;
  327. //
  328. // $(a).each(function(i, n) {
  329. // console.log(n.F_DownUrl);
  330. // str += n.F_DownUrl + ",";
  331. // Str = (str.substring(str.length - 1) == ',') ? str.substring(0, str.length - 1) : str;
  332. // console.log(Str);
  333. // })
  334. // $("#file").val(Str);
  335. // $("#scfj").show();
  336. }
  337. }
  338. });
  339. } else {
  340. layer.confirm('请上传文件!', {
  341. btn: ['确定']
  342. });
  343. }
  344. }
  345. </script>
  346. </body>
  347. </html>