/** * 用户增加或编辑 * */ var head_img_data; //保存头像的大图 var small_img_data; //保存头像的小图 var Ids = helper.request.queryString("ids"); var imageArr0 = '', imageArr1 = ''; uploaderImg(0); //技能证书 uploaderImg(1); //身份证 $(function() { autosize($('textarea')); //获取项目 helper.getDropList.getProlistDrop($('#projectid')); //获取角色 GetRoleName($('#role_id')); imgEditor(); //头像裁剪 if(Ids) { $('.editPwd').show(); $('.addPwd').hide(); $.when(helper.getDropList.getProlistDrop($('#projectid')), GetRoleName($('#role_id'))).then(function() { // $('#projectid').find('option[value=""]').attr('disabled', true); getUserDetails(Ids); //详情 }); } //添加编辑保存按钮点击 $('#pro_save').on('click', saveUsers); //日期 lay('.layer_times').each(function() { laydate.render({ elem: this, trigger: 'click', }); }); //密码对比 $('#password2').blur(function() { if($(this).val()) { if($(this).val() !== $('#password').val()) { layer.confirm('密码输入不一致,请重新输入!', { icon: 2, btn: ['确定'] }, function(index) { layer.close(index); $('#password2').val(''); $('#password2').trigger('focus'); }); return; } } else { layer.confirm('请确认密码!', { icon: 2, btn: ['确定'] }); return; } }) }); var pwdHtml = '' var pwdTC, userCodes; $('#editPwd').click(function() { pwdTC = layer.open({ type: 1, title: '密码重置', area: ['50%', '50%'], //宽高 content: pwdHtml }); }); //密码重置 function editPwd() { if(!regexs.passwordReg.test($.trim($('#password_cz').val()))) { layer.confirm('请输入有效的密码(6-32个字符只能是字母、下划线、数字)', { icon: 2, btn: ['确定'] }); return; } if(!regexs.passwordReg.test($.trim($('#password2_cz').val()))) { layer.confirm('请输入有效的确认密码(6-32个字符只能是字母、下划线、数字)', { icon: 2, btn: ['确定'] }); return; } $('#password2_cz').blur(function() { if($(this).val()) { if($(this).val() !== $('#password_cz').val()) { layer.confirm('密码输入不一致,请重新输入!', { icon: 2, btn: ['确定'] }, function(index) { layer.close(index); $('#password2_cz').val(''); $('#password2_cz').trigger('focus'); }); return; } } else { layer.confirm('请确认密码!', { icon: 2, btn: ['确定'] }); return; } }) $.post(huayi.config.callcenter_url + "signtokenapi/api/UserAccount/updatepassword", { usercode: userCodes, password: $.md5($('#password_cz').val()), surepassword: $.md5($('#password2_cz').val()), }, function(data) { data = JSON.parse(data); if(data.state == "success") { layer.msg("密码修改成功!"); layer.close(pwdTC); //关闭弹层 } }); } //获取详情 function getUserDetails(ids) { $.getJSON(huayi.config.callcenter_url + "signtokenapi/api/UserAccount/getdetails", { id: ids, }, function(data) { if(data.state == "success") { var res = data.data; $('#usercode').val(res.usercode); userCodes = res.usercode; $('#user_name').val(res.username); $('#type').find('input[name="userType_flag"][value="' + res.type + '"]').prop("checked", "checked"), //用户类型 $('#role_id').selectpicker('val', res.role_id).trigger('change'); //角色id $('input[name="sex"][value="' + res.sex + '"]').prop("checked", "checked"); //性别 $('#mail').val(res.mail); //邮箱 $('#mobile').val(res.mobile); //手机号 $('#remark').val(res.remark); //备注 $('#entrytime').val(res.entrytime); // string 入职时间 $('#transfertime').val(res.transfertime); // string 转岗时间 $('#idcardno').val(res.idcardno), //string 身份证号码(新) getImgVal(res.certificate, 0); // list 技能证书 getImgVal(res.idcard, 1); //list 身份证照片(新) $('#image_list0').find('.thumbnail').on('click', '.image-close', function() { $(this).parent().remove(); file_num(0); }); $('#image_list1').find('.thumbnail').on('click', '.image-close', function() { $(this).parent().remove(); file_num(1); }); $('#projectid').selectpicker('val', res.projectlist).trigger("change"); //项目信息 //头像 var ipUrl = data.data.head_img; if(ipUrl && ipUrl.length > 0) { head_img_data = ipUrl; small_img_data = data.data.head_small_img; $('.crop_left img').attr('src', ipUrl); // $.each(ipUrl, function(i, v) { // $('.crop_left img').attr('src', v.head_img); // $("#file_name").val(v.filename); // }); } else { // $('.crop_left img').attr('src', '../img/p3.jpg'); $('.crop_left img').attr('src', ''); } imgEditor(); //话务相关 // $('input[name="seat_flag"][value="' + res.seat_flag + '"]').prop("checked", "checked"); //话务标志 // $('#extensionnumber').val(res.extensionnumber); //分机号 // $('#group').val(res.group); //坐席组 // $('input[name="seat_right"][value="' + res.seat_right + '"]').prop("checked", "checked"); //坐席权限 // $('#seat_level').val(res.seat_level); //坐席等级 // $('input[name="see_flag"][value="' + res.see_flag + '"]').prop("checked", "checked"); //查看权限 // $('input[name="call_type"][value="' + res.call_type + '"]').prop("checked", "checked"); //呼叫类型 // $('#team_id').val(res.team_id); //团队 } }); } //保存 function saveUsers() { if(!regexs.userReg.test($.trim($('#usercode').val()))) { layer.confirm('请输入有效的用户工号(只能是字母、下划线、数字)', { icon: 2, btn: ['确定'] }); return; } if(!$.trim($('#user_name').val())) { layer.confirm('请输入姓名!', { icon: 2, btn: ['确定'] }); return; } if(!$.trim($('#role_id').val())) { layer.confirm('请选择角色!', { icon: 2, btn: ['确定'] }); return; } if(!regexs.phone.test($.trim($('#mobile').val()))) { layer.confirm('请输入有效的手机号码!', { icon: 2, btn: ['确定'] }); return; } if($.trim($('#idcardno').val())) { if(!regexs.identityCard.test($.trim($('#idcardno').val()))) { layer.confirm('请输入有效的身份证号码!', { icon: 2, btn: ['确定'] }); return; } } if(!$.trim($('#projectid').val())) { layer.confirm('请选择项目信息', { icon: 2, btn: ['确定'] }); return; } if(Ids) { editUsers(Ids); } else { if(!regexs.passwordReg.test($.trim($('#password').val()))) { layer.confirm('请输入有效的密码(6-32个字符只能是字母、下划线、数字)', { icon: 2, btn: ['确定'] }); return; } if(!regexs.passwordReg.test($.trim($('#password2').val()))) { layer.confirm('请输入有效的确认密码(6-32个字符只能是字母、下划线、数字)', { icon: 2, btn: ['确定'] }); return; } addUsers(); } } //添加用户 function addUsers() { $.post(huayi.config.callcenter_url + "signtokenapi/api/UserAccount/add", { usercode: $('#usercode').val(), username: $('#user_name').val(), password: $.md5($('#password').val()), type: $('#type').find('input[name="userType_flag"]:checked').val(), //用户类型 role_id: $('#role_id').val(), sex: $('input[name="sex"]:checked').val(), mail: $('#mail').val(), head_img: head_img_data, //头像大图 head_small_img: small_img_data, //头像缩略图 mobile: $('#mobile').val(), //手机号码 remark: $('#remark').val(), idcardno: $('#idcardno').val(), //string 身份证号码(新) idcard: imageArr1, // list 身份证照片(新) certificate: imageArr0, // list 技能证书 entrytime: $('#entrytime').val(), // string 入职时间 transfertime: $('#transfertime').val(), // string 转岗时间 projectlist: $('#projectid').val() ? $('#projectid').val():[] // list 项目id 如:[“项目id”,”项目id”,”项目id”] //话务相关 // seat_flag: $('input[name="seat_flag"]:checked').val(), //话务标志 // extensionnumber: $('#extensionnumber').val(), //分机号 // seat_right: $('input[name="seat_right"]:checked').val(), //坐席类别 // seat_level: $('#seat_level').val(), //坐席等级 // group: $('#group').val(), //坐席组id // see_flag: $('input[name="see_flag"]:checked').val(),//string 察看权限(1:个人;2:班组;3:所有) // call_type: $('input[name="call_type"]:checked').val(),//int 0:呼入;1:呼出 // team_id: $('#team_id').val(),//团队id }, function(data) { data = JSON.parse(data); if(data.state == "success") { var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); parent.$('#user_table').bootstrapTable('refresh'); parent.layer.msg("保存成功"); } }); } //编辑用户 function editUsers(Ids) { $.post(huayi.config.callcenter_url + "signtokenapi/api/UserAccount/update", { id: Ids, usercode: $('#usercode').val(), username: $('#user_name').val(), type: $('#type').find('input[name="userType_flag"]:checked').val(), //用户类型 role_id: $('#role_id').val(), sex: $('input[name="sex"]:checked').val(), mail: $('#mail').val(), head_img: head_img_data, //头像大图 head_small_img: small_img_data, //头像缩略图 mobile: $('#mobile').val(), remark: $('#remark').val(), idcardno: $('#idcardno').val(), //string 身份证号码(新) idcard: imageArr1, // list 身份证照片(新) certificate: imageArr0, // list 技能证书 entrytime: $('#entrytime').val(), // string 入职时间 transfertime: $('#transfertime').val(), // string 转岗时间 projectlist: $('#projectid').val() ? $('#projectid').val():[] // list 项目id 如:[“项目id”,”项目id”,”项目id”] //话务相关 // seat_flag: $('input[name="seat_flag"]:checked').val(), //话务标志 // extensionnumber: $('#extensionnumber').val(), //分机号 // seat_right: $('input[name="seat_right"]:checked').val(), //坐席类别 // seat_level: $('#seat_level').val(), //坐席等级 // group: $('#group').val(), //坐席组id // see_flag: $('input[name="see_flag"]:checked').val(),//string 察看权限(1:个人;2:班组;3:所有) // call_type: $('input[name="call_type"]:checked').val(),//int 0:呼入;1:呼出 // team_id: $('#team_id').val(),//团队id }, function(data) { data = JSON.parse(data); if(data.state == "success") { //更新头像 if($('#usercode').val() === window.localStorage.getItem('userCode')){ if(head_img_data != window.localStorage.getItem('headImg')){ window.localStorage.setItem('headImg', head_img_data); top.$('#head_img').attr('src', head_img_data); } } var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); parent.$('#user_table').bootstrapTable('refresh'); parent.layer.msg("保存成功"); } }); } //图片剪切 function imgEditor() { var o = $(".image-crop > img"); o.cropper("destroy"); o.cropper({ // aspectRatio: 750 / 1334, aspectRatio: 1 / 1, resizable: true, dragCrop: true, preview: ".img-preview", done: function() { } }); var r = $("#inputImage"); var fileName = $("#file_name").val(); if(window.FileReader) { r.change(function() { $('.progress-bar').css('width', '0%'); $('.progress-bar').text('0%'); var e, i = new FileReader, t = this.files; if(t.length && (e = t[0], /^image\/\w+$/.test(e.type))) { i.readAsDataURL(e); fileName = e.name; i.onload = function() { r.val(""); o.cropper("reset", !0).cropper("replace", this.result); } } else { layer.msg("请选择本地图片文件"); } }); $("#setDrag").click(function() { var self = $(this); o.cropper("setDragMode", "crop"); var imgUrl = o.cropper("getCroppedCanvas").toDataURL('image/png'); //var dataurl = encodeURIComponent(imgUrl); var filesjson; var list = [], listItem = {}; listItem.filename = fileName; listItem.fileurl = imgUrl; list.push(listItem); filesjson = JSON.stringify(list); upLoadFile(filesjson, self); }); $("#zoomIn").click(function() { $('.progress-bar').css('width', '0%'); $('.progress-bar').text('0%'); o.cropper("zoom", .1) }); $("#zoomOut").click(function() { $('.progress-bar').css('width', '0%'); $('.progress-bar').text('0%'); o.cropper("zoom", -.1) }); $("#rotateLeft").click(function() { $('.progress-bar').css('width', '0%'); $('.progress-bar').text('0%'); o.cropper("rotate", 45) }); $("#rotateRight").click(function() { $('.progress-bar').css('width', '0%'); $('.progress-bar').text('0%'); o.cropper("rotate", -45) }); } else { r.addClass("hide"); } } /** * 图片的上传 * fjson 上传图片 的数据 * self 调用者的this */ function upLoadFile(fjson, self) { var formData = new FormData(); formData.append("uploadtype", 'proManagement'); formData.append("filesjson", fjson); $.ajax({ type: "post", url: huayi.config.callcenter_url + "fileserverapi/Api/Upload", data: formData, //这里上传的数据使用了formData 对象   processData: false,   contentType: false, //必须false才会自动加上正确的Content-Type xhr: function() { //这是关键 获取原生的xhr对象 做以前做的所有事情 var xhr = jQuery.ajaxSettings.xhr(); xhr.upload.onload = function() { //alert('finish downloading') } xhr.upload.onprogress = function(ev) { console.log(ev); //if(ev.lengthComputable) { var percent = 100 * ev.loaded / ev.total; console.log(percent, ev); $('.progress-bar').css('width', percent + '%'); $('.progress-bar').text(percent + '%'); //} } return xhr; }, async: true, beforeSend: function() { //触发ajax请求开始时执行 self.attr("disabled", true); self.text('图片上传中...'); $('.anniu').find('.btnn').css('backgroundColor', '#778592'); }, // data: { // uploadtype: 'proManagement', // filesjson: fjson, // }, success: function(result) { result = $.parseJSON(result); self.attr("disabled", false); self.text('上传图片'); $('.anniu').find('.btnn').css('backgroundColor', '#2f4050'); /*验证请求*/ if(result.state.toLowerCase() == "success") { head_img_data = result.data[0].fileurl; small_img_data = result.data[0].filesmallurl;//头像缩略图 layer.msg("图片上传成功"); } else { layer.msg(result.message); } }, error: function(textStatus) { $('.progress-bar').css('width', '0%'); $('.progress-bar').text('0%'); layer.confirm('网络繁忙,请稍后再试...', { btn: ['确定'] //按钮 }); self.text('上传图片'); self.attr("disabled", false); $('.anniu').find('.btnn').css('backgroundColor', '#2f4050'); }, complete: function(XMLHttpRequest, textStatus) { if(textStatus == 'timeout') { var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp"); xmlhttp.abort(); layer.confirm('网络超时,请稍后再试...', { btn: ['确定'] //按钮 });     } self.text('上传图片'); self.attr("disabled", false); $('.anniu').find('.btnn').css('backgroundColor', '#2f4050'); }, }); } //角色下拉 function GetRoleName(obj) { var dtd = $.Deferred(); //在函数内部,新建一个Deferred对象 $.getJSON(huayi.config.callcenter_url + "configurationapi/api/RoleInfo/getlistdrop", function(data) { if(data.state.toLowerCase() == "success") { obj.empty(); obj.append(""); var content = data.data; $(content).each(function(i, n) { $("").appendTo(obj); }); obj.selectpicker('refresh'); dtd.resolve(); // 改变Deferred对象的执行状态 } }) return dtd.promise(); // 返回promise对象 } //添加技能证书和身份证照片 function uploaderImg(cindex) { var imgList = $('#image_list' + cindex), eleId = $('#filePicker' + cindex), uploader; uploader = WebUploader.create({ // 自动上传。 auto: true, // swf文件路径 swf: '../js/Uploader.swf', // 文件接收服务端。 server: huayi.config.callcenter_url + 'fileserverapi/Api/Upload', // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: eleId, // 图片数量限制 // fileNumLimit: 4, //可以重复上传 duplicate: true, formData: { uploadtype: 'equipment' //自定义文件夹用于存放图片 }, // 只允许选择文件,可选。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' }, resize: false, fileSizeLimit: 30 * 1024 * 1024, // 30 M fileSingleSizeLimit: 5 * 1024 * 1024 // 5 M }); //上传图片提示 uploader.on('error', function(code) { switch(code) { case "Q_EXCEED_NUM_LIMIT": layer.msg('只能上传六个文件。'); break; case "Q_TYPE_DENIED": layer.msg('图片类型不正确。'); break; case "F_DUPLICATE": layer.msg('该文件已上传,请选择其它文件。'); break; case "F_EXCEED_SIZE": layer.msg('单文件大小不能超过5M。'); break; case "Q_EXCEED_SIZE_LIMIT": layer.msg('总文件大小不能超过30M。'); break; default: break; } }); // 当有文件添加进来的时候 uploader.on('fileQueued', function(file) { console.log(file); var $li = $( '
' + '
X
' + '' + '
' + file.name + '
' + '
' ), $img = $li.find('img'); imgList.prepend($li); $(".image-close").on('click', function() { event.stopPropagation(); $(this).parent().remove(); helper.methods.delImgs($(this).parent().attr("data-filesmallurl"), $(this).parent().attr("data-fileurl")); file_num(cindex) }); }); // 文件上传成功,给item添加成功class, 用样式标记上传成功。 uploader.on('uploadSuccess', function(file, response) { console.log(file) $.each(response.data, function(i, j) { // obj= var $img = $('#' + cindex + file.id).find('img'); $('#' + cindex + file.id).attr({ 'data-filename': j.filename, 'data-fileext': j.fileext, 'data-filemd5': j.filemd5, 'data-filesize': j.filesize, 'data-fileurl': j.fileurl, 'data-filesmallurl': j.filesmallurl }); uploader.makeThumb(file, function(error, src) { $img.attr('src', j.filesmallurl); $img.addClass('image-item'); // $img.attr('data-preview-group', "1"); }, 50, 50); }); $('#' + cindex + file.id).addClass('upload-state-done'); file_num(cindex) }); // 文件上传失败,现实上传出错。 uploader.on('uploadError', function(file) { var $li = $('#' + cindex + file.id), $error = $li.find('div.error'); // 避免重复创建 if(!$error.length) { $error = $('
').appendTo($li); } $error.text('上传失败'); }); // 完成上传完了,成功或者失败,先删除进度条。 // uploader.on('uploadComplete', function(file) { // }); } //隐藏域值 function file_num(num) { var arr = []; $('#image_list' + num).find('.thumbnail').each(function(j, m) { var obj = { 'filename': $(m).attr("data-filename"), 'fileext': $(m).attr("data-fileext"), 'filemd5': $(m).attr("data-filemd5"), 'filesize': $(m).attr("data-filesize"), 'fileurl': $(m).attr("data-fileurl"), 'filesmallurl': $(m).attr("data-filesmallurl") } arr.push(obj) }) window['imageArr' + num] = arr; } //获取详情时 图片展示 function getImgVal(data, num) { $(data).each(function(i, n) { var $li = $( '
' + '
X
' + '' + '
' + n.filename + '
' + '
' ), $img = $li.find('img'); $('#image_list' + num).prepend($li); }) file_num(num) }