济源12345的前端

ApplicationUpdate.html 11KB

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