郑州第一人民医院UI

addOrEditUserManage.js 23KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744
  1. /**
  2. * 用户增加或编辑
  3. * */
  4. var head_img_data; //保存头像的大图
  5. var small_img_data; //保存头像的小图
  6. var Ids = helper.request.queryString("ids");
  7. var imageArr0 = '',
  8. imageArr1 = '';
  9. uploaderImg(0); //技能证书
  10. uploaderImg(1); //身份证
  11. $(function() {
  12. autosize($('textarea'));
  13. //获取项目
  14. helper.getDropList.getProlistDrop($('#projectid'));
  15. //获取角色
  16. getRoleName($('#role_id'));
  17. getSeatGroup($('#seat_group')); //坐席组下拉
  18. imgEditor(); //头像裁剪
  19. if(Ids) {
  20. $('.editPwd').show();
  21. $('.addPwd').hide();
  22. $.when(helper.getDropList.getProlistDrop($('#projectid')), getRoleName($('#role_id')), getSeatGroup($('#seat_group'))).then(function() {
  23. // $('#projectid').find('option[value=""]').attr('disabled', true);
  24. getUserDetails(Ids); //详情
  25. });
  26. }
  27. //添加编辑保存按钮点击
  28. $('#pro_save').on('click', saveUsers);
  29. //日期
  30. lay('.layer_times').each(function() {
  31. laydate.render({
  32. elem: this,
  33. trigger: 'click',
  34. });
  35. });
  36. //是否使用话务标识
  37. $('#seat_flag').on('change', function() {
  38. if($(this).find('input[name="seat_flag_radio"]:checked').val() === "true") {
  39. $('#seat_settings').show();
  40. } else {
  41. $('#seat_settings').hide();
  42. }
  43. });
  44. $('#seat_flag').trigger('change');
  45. //密码对比
  46. $('#password2').blur(function() {
  47. if($(this).val()) {
  48. if($(this).val() !== $('#password').val()) {
  49. layer.confirm('密码输入不一致,请重新输入!', {
  50. icon: 2,
  51. btn: ['确定']
  52. }, function(index) {
  53. layer.close(index);
  54. $('#password2').val('');
  55. $('#password2').trigger('focus');
  56. });
  57. return;
  58. }
  59. } else {
  60. layer.confirm('请确认密码!', {
  61. icon: 2,
  62. btn: ['确定']
  63. });
  64. return;
  65. }
  66. })
  67. });
  68. var pwdHtml = '<ul class="project_items form-horizontal" style="width: 95%">' +
  69. '<li class="form-group addPwd">' +
  70. '<label for="password" class="col-md-2 text-right"><b class="text_require">*</b>密码</label>' +
  71. '<div class="col-md-10">' +
  72. '<input id="password_cz" class="form-control" type="password" autocomplete="off" placeholder="请输入密码" />' +
  73. '</div>' +
  74. '</li>' +
  75. '<li class="form-group addPwd">' +
  76. '<label for="password2" class="col-md-2 text-right"><b class="text_require">*</b>确认密码</label>' +
  77. '<div class="col-md-10">' +
  78. '<input id="password2_cz" class="form-control" type="password" autocomplete="off" placeholder="请再次输入密码" />' +
  79. '</div>' +
  80. '</li>' +
  81. '<li class="form-group addPwd">' +
  82. '<div class="col-md-12" style="text-align: center;">' +
  83. '<button id="submitPwd" class="btn btn-info" onclick="editPwd()">提交</button>' +
  84. '</div>' +
  85. '</li>' +
  86. '</ul>'
  87. var pwdTC, userCodes;
  88. $('#editPwd').click(function() {
  89. pwdTC = layer.open({
  90. type: 1,
  91. title: '密码重置',
  92. area: ['50%', '50%'], //宽高
  93. content: pwdHtml
  94. });
  95. });
  96. //密码重置
  97. function editPwd() {
  98. if(!regexs.passwordReg.test($.trim($('#password_cz').val()))) {
  99. layer.confirm('请输入有效的密码(6-32个字符只能是字母、下划线、数字)', {
  100. icon: 2,
  101. btn: ['确定']
  102. });
  103. return;
  104. }
  105. if(!regexs.passwordReg.test($.trim($('#password2_cz').val()))) {
  106. layer.confirm('请输入有效的确认密码(6-32个字符只能是字母、下划线、数字)', {
  107. icon: 2,
  108. btn: ['确定']
  109. });
  110. return;
  111. }
  112. $('#password2_cz').blur(function() {
  113. if($(this).val()) {
  114. if($(this).val() !== $('#password_cz').val()) {
  115. layer.confirm('密码输入不一致,请重新输入!', {
  116. icon: 2,
  117. btn: ['确定']
  118. }, function(index) {
  119. layer.close(index);
  120. $('#password2_cz').val('');
  121. $('#password2_cz').trigger('focus');
  122. });
  123. return;
  124. }
  125. } else {
  126. layer.confirm('请确认密码!', {
  127. icon: 2,
  128. btn: ['确定']
  129. });
  130. return;
  131. }
  132. })
  133. $.post(huayi.config.callcenter_url + "signtokenapi/api/UserAccount/updatepassword", {
  134. usercode: userCodes,
  135. password: $.md5($('#password_cz').val()),
  136. surepassword: $.md5($('#password2_cz').val()),
  137. }, function(data) {
  138. data = JSON.parse(data);
  139. if(data.state == "success") {
  140. layer.msg("密码修改成功!");
  141. layer.close(pwdTC); //关闭弹层
  142. }
  143. });
  144. }
  145. //获取详情
  146. function getUserDetails(ids) {
  147. $.getJSON(huayi.config.callcenter_url + "signtokenapi/api/UserAccount/getdetails", {
  148. id: ids,
  149. }, function(data) {
  150. if(data.state == "success") {
  151. var res = data.data;
  152. $('#usercode').val(res.usercode);
  153. userCodes = res.usercode;
  154. $('#user_name').val(res.username);
  155. $('#type').find('input[name="userType_flag"][value="' + res.type + '"]').prop("checked", "checked"); //用户类型
  156. $('#role_id').selectpicker('val', res.role_id).trigger('change'); //角色id
  157. $('input[name="sex"][value="' + res.sex + '"]').prop("checked", "checked"); //性别
  158. $('#mail').val(res.mail); //邮箱
  159. $('#mobile').val(res.mobile); //手机号
  160. $('#remark').val(res.remark); //备注
  161. $('#entrytime').val(res.entrytime); // string 入职时间
  162. $('#transfertime').val(res.transfertime); // string 转岗时间
  163. $('#idcardno').val(res.idcardno);//string 身份证号码(新)
  164. getImgVal(res.certificate, 0); // list 技能证书
  165. getImgVal(res.idcard, 1); //list 身份证照片(新)
  166. $('#image_list0').find('.thumbnail').on('click', '.image-close', function() {
  167. $(this).parent().remove();
  168. file_num(0);
  169. });
  170. $('#image_list1').find('.thumbnail').on('click', '.image-close', function() {
  171. $(this).parent().remove();
  172. file_num(1);
  173. });
  174. $('#projectid').selectpicker('val', res.projectlist).trigger("change"); //项目信息
  175. //头像
  176. var ipUrl = data.data.head_img;
  177. if(ipUrl && ipUrl.length > 0) {
  178. head_img_data = ipUrl;
  179. small_img_data = data.data.head_small_img;
  180. $('.crop_left img').attr('src', ipUrl);
  181. // $.each(ipUrl, function(i, v) {
  182. // $('.crop_left img').attr('src', v.head_img);
  183. // $("#file_name").val(v.filename);
  184. // });
  185. } else {
  186. // $('.crop_left img').attr('src', '../img/p3.jpg');
  187. $('.crop_left img').attr('src', '');
  188. }
  189. imgEditor();
  190. //话务相关
  191. $('#seat_flag').find('input[name="seat_flag_radio"][value="' + res.seat_flag + '"]').prop("checked", "checked").trigger('change'); //话务标志
  192. // $('#extensionnumber').val(res.extensionnumber); //分机号
  193. $('#seat_right').find('input[name="seat_right_radio"][value="' + res.seat_right + '"]').prop("checked", "checked"); //坐席类别
  194. $('#seat_group').selectpicker('val', res.group).trigger('change'); //坐席组id
  195. // $('#seat_level').val(res.seat_level); //坐席等级
  196. // $('input[name="see_flag"][value="' + res.see_flag + '"]').prop("checked", "checked"); //查看权限
  197. // $('input[name="call_type"][value="' + res.call_type + '"]').prop("checked", "checked"); //呼叫类型
  198. // $('#team_id').val(res.team_id); //团队
  199. }
  200. });
  201. }
  202. //保存
  203. function saveUsers() {
  204. if(!regexs.userReg.test($.trim($('#usercode').val()))) {
  205. layer.confirm('请输入有效的用户工号(4-20个字符只能是字母、下划线、数字)', {
  206. icon: 2,
  207. btn: ['确定']
  208. });
  209. return;
  210. }
  211. if(!$.trim($('#user_name').val())) {
  212. layer.confirm('请输入姓名!', {
  213. icon: 2,
  214. btn: ['确定']
  215. });
  216. return;
  217. }
  218. if(!$.trim($('#role_id').val())) {
  219. layer.confirm('请选择角色!', {
  220. icon: 2,
  221. btn: ['确定']
  222. });
  223. return;
  224. }
  225. if(!regexs.phone.test($.trim($('#mobile').val()))) {
  226. layer.confirm('请输入有效的手机号码!', {
  227. icon: 2,
  228. btn: ['确定']
  229. });
  230. return;
  231. }
  232. if($.trim($('#idcardno').val())) {
  233. if(!regexs.identityCard.test($.trim($('#idcardno').val()))) {
  234. layer.confirm('请输入有效的身份证号码!', {
  235. icon: 2,
  236. btn: ['确定']
  237. });
  238. return;
  239. }
  240. }
  241. if(!$.trim($('#projectid').val())) {
  242. layer.confirm('请选择项目信息', {
  243. icon: 2,
  244. btn: ['确定']
  245. });
  246. return;
  247. }
  248. if($('#seat_flag').find('input[name="seat_flag_radio"]:checked').val() === "true") {
  249. // if(!regexs.extensionNumber.test($.trim($('#extensionnumber').val()))) {
  250. // layer.confirm('请输入有效的分机号(4-20位的数字)', {
  251. // icon: 2,
  252. // btn: ['确定']
  253. // });
  254. // return;
  255. // }
  256. if(!$.trim($('#seat_group').val())) {
  257. layer.confirm('请选择坐席组', {
  258. icon: 2,
  259. btn: ['确定']
  260. });
  261. return;
  262. }
  263. }
  264. if(Ids) {
  265. editUsers(Ids);
  266. } else {
  267. if(!regexs.passwordReg.test($.trim($('#password').val()))) {
  268. layer.confirm('请输入有效的密码(6-32个字符只能是字母、下划线、数字)', {
  269. icon: 2,
  270. btn: ['确定']
  271. });
  272. return;
  273. }
  274. if(!regexs.passwordReg.test($.trim($('#password2').val()))) {
  275. layer.confirm('请输入有效的确认密码(6-32个字符只能是字母、下划线、数字)', {
  276. icon: 2,
  277. btn: ['确定']
  278. });
  279. return;
  280. }
  281. addUsers();
  282. }
  283. }
  284. //添加用户
  285. function addUsers() {
  286. $.post(huayi.config.callcenter_url + "signtokenapi/api/UserAccount/add", {
  287. usercode: $('#usercode').val(),
  288. username: $('#user_name').val(),
  289. password: $.md5($('#password').val()),
  290. type: $('#type').find('input[name="userType_flag"]:checked').val(), //用户类型
  291. role_id: $('#role_id').val(),
  292. sex: $('input[name="sex"]:checked').val(),
  293. mail: $('#mail').val(),
  294. head_img: head_img_data, //头像大图
  295. head_small_img: small_img_data, //头像缩略图
  296. mobile: $('#mobile').val(), //手机号码
  297. remark: $('#remark').val(),
  298. idcardno: $('#idcardno').val(), //string 身份证号码(新)
  299. idcard: imageArr1, // list 身份证照片(新)
  300. certificate: imageArr0, // list 技能证书
  301. entrytime: $('#entrytime').val(), // string 入职时间
  302. transfertime: $('#transfertime').val(), // string 转岗时间
  303. projectlist: $('#projectid').val() ? $('#projectid').val() : [], // list 项目id 如:[“项目id”,”项目id”,”项目id”]
  304. //话务相关
  305. seat_flag: $('#seat_flag').find('input[name="seat_flag_radio"]:checked').val(), //话务标志
  306. // extensionnumber: $('#extensionnumber').val(), //分机号
  307. seat_right: $('#seat_right').find('input[name="seat_right_radio"]:checked').val(), //坐席类别
  308. group: $('#seat_group').val(), //坐席组id
  309. // seat_level: $('#seat_level').val(), //坐席等级
  310. // see_flag: $('input[name="see_flag"]:checked').val(),//string 察看权限(1:个人;2:班组;3:所有)
  311. // call_type: $('input[name="call_type"]:checked').val(),//int 0:呼入;1:呼出
  312. // team_id: $('#team_id').val(),//团队id
  313. }, function(data) {
  314. data = JSON.parse(data);
  315. if(data.state == "success") {
  316. var index = parent.layer.getFrameIndex(window.name);
  317. parent.layer.close(index);
  318. parent.$('#user_table').bootstrapTable('refresh');
  319. parent.layer.msg("保存成功");
  320. }
  321. });
  322. }
  323. //编辑用户
  324. function editUsers(Ids) {
  325. $.post(huayi.config.callcenter_url + "signtokenapi/api/UserAccount/update", {
  326. id: Ids,
  327. usercode: $('#usercode').val(),
  328. username: $('#user_name').val(),
  329. type: $('#type').find('input[name="userType_flag"]:checked').val(), //用户类型
  330. role_id: $('#role_id').val(),
  331. sex: $('input[name="sex"]:checked').val(),
  332. mail: $('#mail').val(),
  333. head_img: head_img_data, //头像大图
  334. head_small_img: small_img_data, //头像缩略图
  335. mobile: $('#mobile').val(),
  336. remark: $('#remark').val(),
  337. idcardno: $('#idcardno').val(), //string 身份证号码(新)
  338. idcard: imageArr1, // list 身份证照片(新)
  339. certificate: imageArr0, // list 技能证书
  340. entrytime: $('#entrytime').val(), // string 入职时间
  341. transfertime: $('#transfertime').val(), // string 转岗时间
  342. projectlist: $('#projectid').val() ? $('#projectid').val() : [], // list 项目id 如:[“项目id”,”项目id”,”项目id”]
  343. //话务相关
  344. seat_flag: $('#seat_flag').find('input[name="seat_flag_radio"]:checked').val(), //话务标志
  345. // extensionnumber: $('#extensionnumber').val(), //分机号
  346. seat_right: $('#seat_right').find('input[name="seat_right_radio"]:checked').val(), //坐席类别
  347. group: $('#seat_group').val(), //坐席组id
  348. // seat_level: $('#seat_level').val(), //坐席等级
  349. // see_flag: $('input[name="see_flag"]:checked').val(),//string 察看权限(1:个人;2:班组;3:所有)
  350. // call_type: $('input[name="call_type"]:checked').val(),//int 0:呼入;1:呼出
  351. // team_id: $('#team_id').val(),//团队id
  352. }, function(data) {
  353. data = JSON.parse(data);
  354. if(data.state == "success") {
  355. //更新头像
  356. if($('#usercode').val() === window.localStorage.getItem('userCode')){
  357. if(head_img_data != window.localStorage.getItem('headImg')){
  358. window.localStorage.setItem('headImg', head_img_data);
  359. top.$('#head_img').attr('src', head_img_data);
  360. }
  361. }
  362. var index = parent.layer.getFrameIndex(window.name);
  363. parent.layer.close(index);
  364. parent.$('#user_table').bootstrapTable('refresh');
  365. parent.layer.msg("保存成功");
  366. }
  367. });
  368. }
  369. //图片剪切
  370. function imgEditor() {
  371. var o = $(".image-crop > img");
  372. o.cropper("destroy");
  373. o.cropper({
  374. // aspectRatio: 750 / 1334,
  375. aspectRatio: 1 / 1,
  376. resizable: true,
  377. dragCrop: true,
  378. preview: ".img-preview",
  379. done: function() {
  380. }
  381. });
  382. var r = $("#inputImage");
  383. var fileName = $("#file_name").val();
  384. if(window.FileReader) {
  385. r.change(function() {
  386. $('.progress-bar').css('width', '0%');
  387. $('.progress-bar').text('0%');
  388. var e, i = new FileReader,
  389. t = this.files;
  390. if(t.length && (e = t[0], /^image\/\w+$/.test(e.type))) {
  391. i.readAsDataURL(e);
  392. fileName = e.name;
  393. i.onload = function() {
  394. r.val("");
  395. o.cropper("reset", !0).cropper("replace", this.result);
  396. }
  397. } else {
  398. layer.msg("请选择本地图片文件");
  399. }
  400. });
  401. $("#setDrag").click(function() {
  402. var self = $(this);
  403. o.cropper("setDragMode", "crop");
  404. var imgUrl = o.cropper("getCroppedCanvas").toDataURL('image/png');
  405. //var dataurl = encodeURIComponent(imgUrl);
  406. var filesjson;
  407. var list = [],
  408. listItem = {};
  409. listItem.filename = fileName;
  410. listItem.fileurl = imgUrl;
  411. list.push(listItem);
  412. filesjson = JSON.stringify(list);
  413. upLoadFile(filesjson, self);
  414. });
  415. $("#zoomIn").click(function() {
  416. $('.progress-bar').css('width', '0%');
  417. $('.progress-bar').text('0%');
  418. o.cropper("zoom", .1)
  419. });
  420. $("#zoomOut").click(function() {
  421. $('.progress-bar').css('width', '0%');
  422. $('.progress-bar').text('0%');
  423. o.cropper("zoom", -.1)
  424. });
  425. $("#rotateLeft").click(function() {
  426. $('.progress-bar').css('width', '0%');
  427. $('.progress-bar').text('0%');
  428. o.cropper("rotate", 45)
  429. });
  430. $("#rotateRight").click(function() {
  431. $('.progress-bar').css('width', '0%');
  432. $('.progress-bar').text('0%');
  433. o.cropper("rotate", -45)
  434. });
  435. } else {
  436. r.addClass("hide");
  437. }
  438. }
  439. /**
  440. * 图片的上传
  441. * fjson 上传图片 的数据
  442. * self 调用者的this
  443. */
  444. function upLoadFile(fjson, self) {
  445. var formData = new FormData();
  446. formData.append("uploadtype", 'proManagement');
  447. formData.append("filesjson", fjson);
  448. $.ajax({
  449. type: "post",
  450. url: huayi.config.callcenter_url + "fileserverapi/Api/Upload",
  451. data: formData, //这里上传的数据使用了formData 对象
  452.   processData: false,
  453.   contentType: false, //必须false才会自动加上正确的Content-Type
  454. xhr: function() { //这是关键 获取原生的xhr对象 做以前做的所有事情
  455. var xhr = jQuery.ajaxSettings.xhr();
  456. xhr.upload.onload = function() {
  457. //alert('finish downloading')
  458. }
  459. xhr.upload.onprogress = function(ev) {
  460. //console.log(ev);
  461. //if(ev.lengthComputable) {
  462. var percent = 100 * ev.loaded / ev.total;
  463. //console.log(percent, ev);
  464. $('.progress-bar').css('width', percent + '%');
  465. $('.progress-bar').text(percent + '%');
  466. //}
  467. }
  468. return xhr;
  469. },
  470. async: true,
  471. beforeSend: function() { //触发ajax请求开始时执行
  472. self.attr("disabled", true);
  473. self.text('图片上传中...');
  474. $('.anniu').find('.btnn').css('backgroundColor', '#778592');
  475. },
  476. // data: {
  477. // uploadtype: 'proManagement',
  478. // filesjson: fjson,
  479. // },
  480. success: function(result) {
  481. result = $.parseJSON(result);
  482. self.attr("disabled", false);
  483. self.text('上传图片');
  484. $('.anniu').find('.btnn').css('backgroundColor', '#2f4050');
  485. /*验证请求*/
  486. if(result.state.toLowerCase() == "success") {
  487. head_img_data = result.data[0].fileurl;
  488. small_img_data = result.data[0].filesmallurl;//头像缩略图
  489. layer.msg("图片上传成功");
  490. } else {
  491. layer.msg(result.message);
  492. }
  493. },
  494. error: function(textStatus) {
  495. $('.progress-bar').css('width', '0%');
  496. $('.progress-bar').text('0%');
  497. layer.confirm('网络繁忙,请稍后再试...', {
  498. btn: ['确定'] //按钮
  499. });
  500. self.text('上传图片');
  501. self.attr("disabled", false);
  502. $('.anniu').find('.btnn').css('backgroundColor', '#2f4050');
  503. },
  504. complete: function(XMLHttpRequest, textStatus) {
  505. if(textStatus == 'timeout') {
  506. var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
  507. xmlhttp.abort();
  508. layer.confirm('网络超时,请稍后再试...', {
  509. btn: ['确定'] //按钮
  510. });    
  511. }
  512. self.text('上传图片');
  513. self.attr("disabled", false);
  514. $('.anniu').find('.btnn').css('backgroundColor', '#2f4050');
  515. },
  516. });
  517. }
  518. //角色下拉
  519. function getRoleName(obj) {
  520. var dtd = $.Deferred(); //在函数内部,新建一个Deferred对象
  521. $.getJSON(huayi.config.callcenter_url + "configurationapi/api/RoleInfo/getlistdrop", function(data) {
  522. if(data.state.toLowerCase() == "success") {
  523. obj.empty();
  524. obj.append("<option value=''>请选择角色</option>");
  525. var content = data.data;
  526. $(content).each(function(i, n) {
  527. $("<option value='" + n.id + "'>" + n.role_name + "</option>").appendTo(obj);
  528. });
  529. obj.selectpicker('refresh');
  530. dtd.resolve(); // 改变Deferred对象的执行状态
  531. }
  532. })
  533. return dtd.promise(); // 返回promise对象
  534. }
  535. //坐席组下拉
  536. function getSeatGroup(el) {
  537. var dtd = $.Deferred(); //在函数内部,新建一个Deferred对象
  538. $.getJSON(huayi.config.callcenter_url + "callcenterapi/api/sysseatgroup/getlist", function(data) {
  539. if(data.state.toLowerCase() == "success") {
  540. el.empty();
  541. el.append("<option value=''>请选择坐席组</option>");
  542. var content = data.data;
  543. if(content && content.length > 0) {
  544. $(content).each(function(i, n) {
  545. $("<option value='" + n.id + "'>" + n.zxzname + "</option>").appendTo(el);
  546. });
  547. el.selectpicker('refresh');
  548. }
  549. dtd.resolve(); // 改变Deferred对象的执行状态
  550. }
  551. })
  552. return dtd.promise(); // 返回promise对象
  553. }
  554. //添加技能证书和身份证照片
  555. function uploaderImg(cindex) {
  556. var imgList = $('#image_list' + cindex),
  557. eleId = $('#filePicker' + cindex),
  558. uploader;
  559. uploader = WebUploader.create({
  560. // 自动上传。
  561. auto: true,
  562. // swf文件路径
  563. swf: '../js/Uploader.swf',
  564. // 文件接收服务端。
  565. server: huayi.config.callcenter_url + 'fileserverapi/Api/Upload',
  566. // 选择文件的按钮。可选。
  567. // 内部根据当前运行是创建,可能是input元素,也可能是flash.
  568. pick: eleId,
  569. // 图片数量限制
  570. // fileNumLimit: 4,
  571. //可以重复上传
  572. duplicate: true,
  573. formData: {
  574. uploadtype: 'equipment' //自定义文件夹用于存放图片
  575. },
  576. // 只允许选择文件,可选。
  577. accept: {
  578. title: 'Images',
  579. extensions: 'gif,jpg,jpeg,bmp,png',
  580. mimeTypes: 'image/*'
  581. },
  582. resize: false,
  583. fileSizeLimit: 30 * 1024 * 1024, // 30 M
  584. fileSingleSizeLimit: 5 * 1024 * 1024 // 5 M
  585. });
  586. //上传图片提示
  587. uploader.on('error', function(code) {
  588. switch(code) {
  589. case "Q_EXCEED_NUM_LIMIT":
  590. layer.msg('只能上传六个文件。');
  591. break;
  592. case "Q_TYPE_DENIED":
  593. layer.msg('图片类型不正确。');
  594. break;
  595. case "F_DUPLICATE":
  596. layer.msg('该文件已上传,请选择其它文件。');
  597. break;
  598. case "F_EXCEED_SIZE":
  599. layer.msg('单文件大小不能超过5M。');
  600. break;
  601. case "Q_EXCEED_SIZE_LIMIT":
  602. layer.msg('总文件大小不能超过30M。');
  603. break;
  604. default:
  605. break;
  606. }
  607. });
  608. // 当有文件添加进来的时候
  609. uploader.on('fileQueued', function(file) {
  610. //console.log(file);
  611. var $li = $(
  612. '<div id="' + cindex + '' + file.id + '" class="file-item thumbnail">' +
  613. '<div class="image-close">X</div>' +
  614. '<img>' +
  615. '<div class="info">' + file.name + '</div>' +
  616. '</div>'
  617. ),
  618. $img = $li.find('img');
  619. imgList.prepend($li);
  620. $(".image-close").on('click', function() {
  621. event.stopPropagation();
  622. $(this).parent().remove();
  623. helper.methods.delImgs($(this).parent().attr("data-filesmallurl"), $(this).parent().attr("data-fileurl"));
  624. file_num(cindex)
  625. });
  626. });
  627. // 文件上传成功,给item添加成功class, 用样式标记上传成功。
  628. uploader.on('uploadSuccess', function(file, response) {
  629. //console.log(file)
  630. $.each(response.data, function(i, j) {
  631. // obj=
  632. var $img = $('#' + cindex + file.id).find('img');
  633. $('#' + cindex + file.id).attr({
  634. 'data-filename': j.filename,
  635. 'data-fileext': j.fileext,
  636. 'data-filemd5': j.filemd5,
  637. 'data-filesize': j.filesize,
  638. 'data-fileurl': j.fileurl,
  639. 'data-filesmallurl': j.filesmallurl
  640. });
  641. uploader.makeThumb(file, function(error, src) {
  642. $img.attr('src', j.filesmallurl);
  643. $img.addClass('image-item');
  644. // $img.attr('data-preview-group', "1");
  645. }, 50, 50);
  646. });
  647. $('#' + cindex + file.id).addClass('upload-state-done');
  648. file_num(cindex)
  649. });
  650. // 文件上传失败,现实上传出错。
  651. uploader.on('uploadError', function(file) {
  652. var $li = $('#' + cindex + file.id),
  653. $error = $li.find('div.error');
  654. // 避免重复创建
  655. if(!$error.length) {
  656. $error = $('<div class="error"></div>').appendTo($li);
  657. }
  658. $error.text('上传失败');
  659. });
  660. // 完成上传完了,成功或者失败,先删除进度条。
  661. // uploader.on('uploadComplete', function(file) {
  662. // });
  663. }
  664. //隐藏域值
  665. function file_num(num) {
  666. var arr = [];
  667. $('#image_list' + num).find('.thumbnail').each(function(j, m) {
  668. var obj = {
  669. 'filename': $(m).attr("data-filename"),
  670. 'fileext': $(m).attr("data-fileext"),
  671. 'filemd5': $(m).attr("data-filemd5"),
  672. 'filesize': $(m).attr("data-filesize"),
  673. 'fileurl': $(m).attr("data-fileurl"),
  674. 'filesmallurl': $(m).attr("data-filesmallurl")
  675. }
  676. arr.push(obj)
  677. })
  678. window['imageArr' + num] = arr;
  679. }
  680. //获取详情时 图片展示
  681. function getImgVal(data, num) {
  682. $(data).each(function(i, n) {
  683. var $li = $(
  684. '<div class="file-item thumbnail" data-filename="' + n.filename + '" data-fileext="' + n.fileext + '" data-filemd5="' + n.filemd5 + '" data-filesize="' + n.filesize + '" data-fileurl="' + n.fileurl + '" data-filesmallurl="' + n.filesmallurl + '" >' +
  685. '<div class="image-close">X</div>' +
  686. '<img src="' + n.filesmallurl + '">' +
  687. '<div class="info">' + n.filename + '</div>' +
  688. '</div>'
  689. ),
  690. $img = $li.find('img');
  691. $('#image_list' + num).prepend($li);
  692. })
  693. file_num(num)
  694. }