App.namespace("App.common"); $(function($, mod){ var methods = { /** *创建富文本框 *target 节点 *callBackFn 回调,返回当前富文本框的实例 **/ createEditor : function(target, callBackFn){ layui.use("wangEditor",function(){ var E = layui.wangEditor; var _editor = new E(target); _editor.customConfig.uploadImgServer = App.getUrl("/static/file/uploadedit"); _editor.customConfig.uploadFileName = 'image'; _editor.customConfig.pasteFilterStyle = false; _editor.customConfig.uploadImgMaxLength = 5; _editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024 // 2M _editor.customConfig.uploadImgHooks = { // 上传超时 timeout: function (xhr, editor) { layer.msg('上传超时!') }, // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置 customInsert: function (insertImg, result, editor) { if (result.code == 0) { var url = result.resultList; url.forEach(function (e) { insertImg(App.getUrl("/static/file/"+e.id+"/showfile")); }) } else { App.msg.error(result.msg); } } }; _editor.customConfig.pasteTextHandle = function (pasteStr) { // content 即粘贴过来的内容(html 或 纯文本),可进行自定义处理然后返回 if (pasteStr == '' && !pasteStr) return ''; //处理的标签里的多余代码 let reg = /)[\s\S])*/gi; pasteStr = pasteStr.replace(reg,""); pasteStr = pasteStr.replace(/[\s\S]*?<\/xml>/ig, ''); pasteStr= pasteStr.replace('/(\\n|\\r| class=(")?Mso[a-zA-Z]+(")?)/g',''); reg=new RegExp('','g'); pasteStr=pasteStr.replace(reg,''); return pasteStr; }; _editor.customConfig.customAlert = function (info) { App.msg.info(info); }; _editor.create(); if(callBackFn != 'undifined' && typeof callBackFn == 'function'){ callBackFn(_editor); } }) }, /** * 创建图标选择器 * target 节点 * clickFn 点击回调 * successFn 渲染成功后的回调 * iconUrl 图标接口 */ createIconPicker : function(target, clickFn, successFn){ layui.use('iconPickerFa', function () { var iconPickerFa = layui.iconPickerFa; iconPickerFa.render({ // 选择器,推荐使用input elem: target, // fa 图标接口 //url: _iconUrl, // 是否开启搜索:true/false,默认true search: true, // 是否开启分页:true/false,默认true page: true, // 每页显示数量,默认12 limit: 12, // 点击回调 click: function (data) { if(clickFn != undefined && typeof clickFn == 'function'){ clickFn(data); } }, // 渲染成功后的回调 success: function (d) { if(successFn != undefined && typeof successFn == 'function'){ successFn(d); } } }); }) }, /** * 树结构表格 */ treeTable : function(obj, successFn, doneFn){ layui.use('treetable', function () { var _treeTable = layui.treetable; _treeTable.render({ treeColIndex: obj.treeColIndex || 1, treeSpid: obj.treeSpid, treeIdName: obj.treeIdName, treePidName: obj.treePidName, elem: obj.elem, url: obj.url, page: false, cols: obj.cols, done: function () { if(doneFn != undefined && typeof doneFn == 'function'){ doneFn(); } } }); if(successFn != undefined && typeof successFn == 'function'){ successFn(_treeTable); } }); }, /** * 树形下拉框 */ treeSelect : function(_elem, successFn, clickFn){ layui.use('treeSelect', function () { var _treeSelect = layui.treeSelect; var $elem = $(_elem), _url = $elem.attr("url"), _method = $elem.attr("method"), _placeholder = $elem.attr("placeholder"), _search = $elem.attr("search") || false, _enable = $elem.attr("enableParent") || true, _layFilter = $elem.attr("lay-filter"); _treeSelect.render({ // 选择器 elem: _elem, // 数据 data: _url, // 异步加载方式:get/post,默认get type: _method, // 占位符 placeholder: _placeholder, // 是否开启搜索功能:true/false,默认false search: _search, //树相关对应字段 treeParam : { nameKey: $elem.attr("nameFiled") || "name", titleKey: $elem.attr("titleFiled") || "", idKey: $elem.attr("idFiled") || "id", pIdkey: $elem.attr("parentIdFiled"), rootPId: "", enable : JSON.parse(_enable) //开启父级树结构 }, // 点击回调 click: function(d){ _treeSelect.checkNode(_layFilter, d.current.id); if(clickFn != undefined && typeof clickFn == "function"){ clickFn(d.current); } }, // 加载完成后的回调函数 success: function (d) { $elem.bind("input propertychange",function(){ var layFilter = $(this).attr("lay-filter"); var id = $(this).val(); _treeSelect.checkNode(layFilter, id); }); if(successFn != undefined && typeof successFn == "function"){ successFn(_treeSelect); } } }); }); }, /** * 省市县三级联动 */ layarea : function(_elem, areaData, changeFn, successFn){ layui.use('layarea', function () { var _layarea = layui.layarea; if(areaData){ _layarea = _layarea.render({ elem : _elem, data : { province : areaData.province || "", city : areaData.city || "", county : areaData.county || "" }, change : function(res){ if(changeFn != undefined && typeof changeFn == 'function'){ changeFn(res); } }, success : function(res){ if(successFn != undefined && typeof successFn == 'function'){ successFn(res); } } }); }else{ _layarea.render({ elem : _elem, change : function(res){ if(changeFn != undefined && typeof changeFn == 'function'){ changeFn(res); } }, success : function(res){ if(successFn != undefined && typeof successFn == 'function'){ successFn(res); } } }); } }) }, /** * 省市县三级联动加自填详情地址解析为省,市,县,详情地址 * param 地址字符串 * return {province-省, city-市, county-县, area-自填地址} */ getAreaData : function(data){ var areaData = {"province" : "", "city" : "", "county" : "", "area" : ""}; if(data){ var nativePlace = data.split("_"); areaData.province = nativePlace[0]; areaData.city = nativePlace[1]; areaData.county = nativePlace[2]; areaData.area = nativePlace.splice(3,nativePlace.length).join("_"); } return areaData; }, imgShow : function(fileId){ return App.getUrl("/static/file/"+fileId+"/showfile"); }, tableSelect : function(_elem,paramData,fallBack){ layui.use("tableSelect",function(){ var ts = layui.tableSelect; ts.render({ elem: _elem, //定义输入框input对象 必填 checkedKey: 'id', //表格的唯一建值,非常重要,影响到选中状态 必填 searchKey: paramData.searchKey, //搜索输入框的name值 默认keyword searchPlaceholder: paramData.searchPlaceholder, //搜索输入框的提示文字 默认关键词搜索 height:'400', //自定义高度 width:'300', //自定义宽度 table: { //定义表格参数,与LAYUI的TABLE模块一致,只是无需再定义表格elem url:App.getUrl(paramData.url), cols: [ paramData.table ] }, done: function (elem, data) { //选择完后的回调,包含2个返回值 elem:返回之前input对象;data:表格返回的选中的数据 [] //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID... if(fallBack != undefined && typeof fallBack == 'function'){ fallBack(data); } } }) }); }, uploadFile: function(target, url, params, beforeFunction, doneFunction, errorFunction) { layui.upload.render({ elem: target, url: url, // 此处用的是第三方的 http 请求演示,实际使用时改成您自己的上传接口即可。 acceptMime: params.acceptMime || 'image/png,image/jpg,image/jpeg', exts: params.exts || 'png|jpg|jpeg', multiple: params.multiple || false, //允许上传多个文件 before: function (obj) { obj.preview(function(index, file, result) { if(beforeFunction != undefined && typeof beforeFunction == 'function'){ beforeFunction(index, file, result); } }); }, done: function (res,index,upload) { if(res.success) { if(doneFunction != undefined && typeof doneFunction == 'function'){ doneFunction(res); } }else { App.msg.warn("上传失败"); if(errorFunction != undefined && typeof errorFunction == 'function') { errorFunction(); } } } }); }, downFile: function(url,methodType, query,filename, errMsg) { App.showLoading(); if(!methodType) { methodType = "GET"; } if(query && methodType == "GET") { var params = ""; for(var i in query) { params+= "&"+i+"="+query[i]; } url += params.replace("&","?"); } var req = new XMLHttpRequest(); req.open(methodType, url, true); /*req.addEventListener("progress", function (evt) { if(evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; console.log(percentComplete); } }, false);*/ req.responseType = "blob"; req.onreadystatechange = function () { if (req.readyState === 4) { if(req.status === 200) { App.closeLoading(); if (typeof window.chrome !== 'undefined') { // Chrome version var link = top.document.createElement('a'); link.href = window.URL.createObjectURL(req.response); link.download = filename; link.click(); } else if (typeof window.navigator.msSaveBlob !== 'undefined') { // IE version var blob = new Blob([req.response], { type: 'application/force-download' }); window.navigator.msSaveBlob(blob, filename); } else { // Firefox version var file = new File([req.response], filename, { type: 'application/force-download' }); window.open(URL.createObjectURL(file)); } }else { App.closeLoading(); App.msg.warn(errMsg||"下载失败"); } } }; if(methodType == "POST") { req.setRequestHeader("Content-type", "application/json"); req.send(JSON.stringify(query)); } else { req.send(); } }, imageWater: function(url, content, callBackFunction) { const img = new Image(); img.src = url; img.crossOrigin = 'anonymous'; img.onload = function () { // 创建canvas,并将创建的img绘制成canvas const canvas = document.createElement('canvas') canvas.width = img.width canvas.height = img.height const ctx = canvas.getContext('2d') ctx.drawImage(img, 0, 0); ctx.textAlign = 'left'; ctx.textBaseline = 'top'; ctx.font = '80px Microsoft Yahei' ctx.fillStyle = 'rgba(255, 255, 255, 0.5)' //ctx.rotate((Math.PI / 180) * 15) // 循环绘制水印 // ctx.fillText(content, img.width - textX, img.height - textY) /*for (let i = 0; i < img.height / 120; i++) { for (let j = 0; j < img.width / 50; j++) {*/ ctx.fillText(content, 200, 80, img.width) /*} }*/ // 将绘制完成的canvas转换为base64的地址 const base64Url = canvas.toDataURL() callBackFunction && callBackFunction(base64Url) } } }; // ---------------成员方法定义--------------- mod.utils = methods; }(jQuery, App.common))