Nenhuma Descrição

addOrEditAppModule.js 9.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312
  1. /**
  2. * 增加或编辑
  3. * */
  4. var proimglist = []; //保存附件的数组
  5. var uploader; //上传实例
  6. var limitNum = 1; //限制数量
  7. $(function() {
  8. autosize($('textarea'));
  9. var n_id = helper.request.queryString("edit_id");
  10. if(n_id) { //修改
  11. getDetail(n_id);
  12. } else {
  13. uploaderImages(); //初始化附件上传
  14. }
  15. //添加编辑保存按钮点击
  16. $('#module_save').on('click', btn_save);
  17. });
  18. //获取详情
  19. function getDetail(ids) {
  20. $.getJSON(huayi.config.callcenter_url + "configurationapi/api/appmenuInfo/getmodule", {
  21. mid: ids,
  22. }, function(data) {
  23. if(data.state == "success") {
  24. var res = data.data;
  25. $('#type').find('input[name="type_option"][value="'+ res.type +'"]').prop('checked', 'checked');// 否 int 20181228添加,不传的话默认值是1 ,1表示APP,2表示微信
  26. $('#module_code').val(res.code); // 是 string 编码
  27. $('#module_title').val(res.name); // 是 string 名称
  28. $('#flag').find('input[name="flag_option"][value="'+ res.enable +'"]').prop('checked', 'checked');// 是 int 1为启用,0为不启用,2为删除
  29. $('#module_content').val(res.remark); // 是 string 备注信息
  30. $('#module_sort').val(res.sort); // 是 int 排序字段默认为1
  31. //附件
  32. proimglist = res.imgUrl;
  33. proimglist = proimglist == null ? [] : proimglist;
  34. limitNum -= proimglist.length;
  35. uploaderImages(); //附件上传
  36. if(proimglist.length > 0) {
  37. $('#fileNum').text(proimglist.length);
  38. var $list = $("#fileList");
  39. $.each(proimglist, function(i, v) {
  40. if(v.filesmallurl) {
  41. //原来的图片
  42. var $li = $(
  43. '<li><span class="img_mask"><i class="img_del"></i></span>' +
  44. '<img src="' + v.filesmallurl + '" title="原来的图片"/>' +
  45. '<span class="file_name">' + v.filename + '</span>' +
  46. '</li>'
  47. );
  48. $list.append($li);
  49. }
  50. });
  51. $list.find('li').off('click');
  52. $list.find('li').on('click', '.img_del', function() {
  53. $(this).parent().parent().remove();
  54. var itemFileName = $(this).parent().parent().find('.file_name').text();
  55. $.each(proimglist, function(i, v) {
  56. if(v && v.filename == itemFileName) {
  57. proimglist.splice(i, 1);
  58. // helper.methods.delImgs(v.filesmallurl, v.fileurl);
  59. }
  60. });
  61. $('#fileNum').text(proimglist.length);
  62. limitNum = 1 - proimglist.length;
  63. uploaderImages();
  64. });
  65. }
  66. }
  67. });
  68. }
  69. //保存
  70. function btn_save() {
  71. var n_id = helper.request.queryString("edit_id");
  72. var wUrl, loadIndex;
  73. if(!$.trim($('#module_code').val())) {
  74. layer.confirm('编码不能为空!', {
  75. icon: 2,
  76. btn: ['确定'] //按钮
  77. });
  78. return;
  79. }
  80. if(!$.trim($('#module_title').val())) {
  81. layer.confirm('模块名称不能为空!', {
  82. icon: 2,
  83. btn: ['确定'] //按钮
  84. });
  85. return;
  86. }
  87. if(!$.trim($('#module_content').val())) {
  88. layer.confirm('备注信息不能为空!', {
  89. icon: 2,
  90. btn: ['确定'] //按钮
  91. });
  92. return;
  93. }
  94. if(!regexs.integerReg.test($.trim($('#module_sort').val()))) {
  95. layer.confirm('请输入有效的排序编号(正整数、负整数、0)!', {
  96. icon: 2,
  97. btn: ['确定'] //按钮
  98. });
  99. return;
  100. }
  101. if(proimglist && proimglist.length === 0) {
  102. layer.confirm('请上传模块图片!', {
  103. icon: 2,
  104. btn: ['确定'] //按钮
  105. });
  106. return;
  107. }
  108. if(n_id) {
  109. wURL = "configurationapi/api/appmenuInfo/editmodule";
  110. } else {
  111. wURL = "configurationapi/api/appmenuInfo/addmodule";
  112. }
  113. $.ajax({
  114. type: "post",
  115. url: huayi.config.callcenter_url + wURL,
  116. dataType: 'json',
  117. async: true,
  118. beforeSend: function() { //触发ajax请求开始时执行
  119. $('#module_save').attr("disabled", true);
  120. $('#module_save').text('保存中...');
  121. loadIndex = layer.load();
  122. },
  123. data: {
  124. id: n_id, // 是 string 节点ID
  125. type: $('#type').find('input[name="type_option"]:checked').val(),// 否 int 20181228添加,不传的话默认值是1 ,1表示APP,2表示微信
  126. code: $('#module_code').val(), // 是 string 编码
  127. name: $('#module_title').val(), // 是 string 名称
  128. flag: $('#flag').find('input[name="flag_option"]:checked').val(),// 是 int 1为启用,0为不启用,2为删除
  129. remark: helper.filter.delHtmlTag($('#module_content').val()), // 是 string 备注信息
  130. sort: $('#module_sort').val(), // 是 int 排序字段默认为1
  131. imgurl: proimglist // 是 string 图片
  132. },
  133. success: function(data) {
  134. layer.close(loadIndex);
  135. if(data.state == "success") {
  136. var index = parent.layer.getFrameIndex(window.name);
  137. parent.layer.close(index);
  138. parent.$('#table_all').bootstrapTable('refresh');
  139. parent.layer.msg("保存成功");
  140. }
  141. },
  142. error: function(textStatus) {
  143. layer.close(loadIndex);
  144. layer.confirm('网络繁忙,请稍后再试...', {
  145. closeBtn: 0,
  146. btn: ['确定'] //按钮
  147. });
  148. $('#module_save').text('保存');
  149. $('#module_save').attr("disabled", false);
  150. },
  151. complete: function(XMLHttpRequest, textStatus) {
  152. layer.close(loadIndex);
  153. if(textStatus == 'timeout') {
  154. var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
  155. xmlhttp.abort();
  156. layer.confirm('网络超时,请稍后再试...', {
  157. closeBtn: 0,
  158. btn: ['确定'] //按钮
  159. });    
  160. }
  161. $('#module_save').text('保存');
  162. $('#module_save').attr("disabled", false);
  163. },
  164. });
  165. }
  166. //上传附件
  167. function uploaderImages() {
  168. if(uploader) {
  169. uploader.destroy();
  170. }
  171. uploader = WebUploader.create({
  172. auto: true, // 选完文件后,是否自动上传
  173. swf: '../plugins/webuploader/Uploader.swf', // swf文件路径
  174. server: huayi.config.callcenter_url + "fileserverapi/Api/Upload", // 文件接收服务端
  175. pick: '#imgPicker', // 选择文件的按钮。可选
  176. formData: {
  177. uploadtype: 'appModule'
  178. },
  179. // 只允许选择图片文件。
  180. accept: {
  181. title: 'Images',
  182. extensions: 'gif,jpg,jpeg,bmp,png',
  183. mimeTypes: 'image/*'
  184. },
  185. compress: false, //webuploader默认压缩图片,设置compress:false,可以按照原始比例上传图片
  186. //fileVal: "upFile",//设置文件上传域的name。
  187. threads: limitNum, //上传并发数。允许同时最大上传进程数,为了保证文件上传顺序
  188. fileNumLimit: limitNum,
  189. fileSizeLimit: 50 * 1024 * 1024, // 50 M
  190. fileSingleSizeLimit: 20 * 1024 * 1024 // 20 M
  191. });
  192. uploader.on('fileQueued', function(file) {
  193. var $list = $("#fileList"),
  194. $li = $(
  195. '<li id="' + file.id + '"><span class="img_mask"><i class="img_del"></i></span>' +
  196. '<img/>' +
  197. '<span class="img_state"><i></i></span>' +
  198. '<span class="file_name">' + file.name + '</span>' +
  199. '</li>'
  200. ),
  201. $img = $li.find('img');
  202. // $list为容器jQuery实例
  203. $list.append($li);
  204. // 创建缩略图
  205. uploader.makeThumb(file, function(error, src) {
  206. if(error) {
  207. $img.replaceWith('<div class="noThumb"><i class="glyphicon glyphicon-paperclip"></i><p>无法预览</p></div>');
  208. return;
  209. }
  210. $img.attr('src', src);
  211. }, 109, 109); //109*109为缩略图尺寸
  212. //绑定删除
  213. $('#' + file.id).on('click', '.img_del', function() {
  214. uploader.removeFile(file);
  215. var $fileLi = $('#' + file.id);
  216. $fileLi.off().find('.img_del').off().end().remove();
  217. var itemFileName = $(this).parent().parent().find('.file_name').text();
  218. $.each(proimglist, function(i, v) {
  219. if(v && v.filename == itemFileName) {
  220. proimglist.splice(i, 1);
  221. helper.methods.delImgs(v.filesmallurl, v.fileurl);
  222. }
  223. });
  224. $('#fileNum').text(proimglist.length);
  225. });
  226. });
  227. // 文件上传过程中创建进度条实时显示。
  228. uploader.on('uploadProgress', function(file, percentage) {
  229. var $li = $('#' + file.id),
  230. $percent = $li.find('.progress span');
  231. // 避免重复创建
  232. if(!$percent.length) {
  233. $percent = $('<div class="progress" style="">' +
  234. '<span class="text">0%</span>' +
  235. '<span class="percentage"></span>' +
  236. '</div>')
  237. .appendTo($li)
  238. .find('span');
  239. }
  240. $percent.eq(0).text(Math.round(percentage * 100) + '%');
  241. $percent.eq(1).css('width', Math.round(percentage * 100) + '%');
  242. });
  243. // 文件上传成功,给item添加成功class, 用样式标记上传成功。
  244. uploader.on('uploadSuccess', function(file, res) {
  245. proimglist.push(res.data[0]);
  246. $('#fileNum').text(proimglist.length);
  247. $('#' + file.id).addClass('upload-state-done');
  248. });
  249. // 文件上传失败,显示上传出错。
  250. uploader.on('uploadError', function(file) {
  251. var $li = $('#' + file.id),
  252. $error = $li.find('div.error');
  253. // 避免重复创建
  254. if(!$error.length) {
  255. $error = $('<div class="error"></div>').appendTo($li);
  256. }
  257. $error.text('上传失败');
  258. });
  259. // 完成上传完了,成功或者失败,先删除进度条。
  260. uploader.on('uploadComplete', function(file) {
  261. $('#' + file.id).find('.progress').remove();
  262. });
  263. uploader.onError = function(code) {
  264. //console.log('Error:' + code);
  265. switch(code) {
  266. case "Q_EXCEED_NUM_LIMIT":
  267. layer.msg('只能上传一张图片。');
  268. break;
  269. case "Q_TYPE_DENIED":
  270. layer.msg('图片类型不正确。');
  271. break;
  272. case "F_DUPLICATE":
  273. layer.msg('该文件已上传,请选择其它文件。');
  274. break;
  275. case "F_EXCEED_SIZE":
  276. layer.msg('单文件大小不能超过20M。');
  277. break;
  278. case "Q_EXCEED_SIZE_LIMIT":
  279. layer.msg('总文件大小不能超过50M。');
  280. break;
  281. default:
  282. break;
  283. }
  284. };
  285. }