vue.mixin({ methods: { //弹出窗口 dialog: function (options) { var vue = this; var defaultparams = { title: "标题", url: "", additionals: "", width: "100%", height: "100%", target: 'self', beforeexecute: "", shadeclose: true }; defaultparams = extend(defaultparams, options); var canexecuting = true; var beforeexecute = defaultparams.beforeexecute; try { if (typeof (beforeexecute) == "string") { if (beforeexecute != "") { canexecuting = eval(beforeexecute); } } else if (typeof (beforeexecute) == "function") { canexecuting = beforeexecute(); } } catch (err) { canexecuting = false; console.log(err) } if (canexecuting == false) { return; } ui.dialog(defaultparams); }, ajax: function (options) { var loadinginstance = this.$loading(); ajax(options, function () { loadinginstance.close(); }); }, submit: function (options) { var defaultparams = { type: "post", contenttype: "application/x-www-form-urlencoded;charset=utf-8", url: "", data: {}, async: true, beforeexecute: "", beforerequest: "", success: "", failcallback: "", showsuccessmsg: true, showfailmsg: true, confirmmsg: "", successmsg: "提交成功!", cancel: false, cancelmsg: "提交被取消" }; defaultparams = extend(defaultparams, options); var confirmmsg = defaultparams.confirmmsg; var successmsg = defaultparams.successmsg; var async = defaultparams.async; var beforeexecute = defaultparams.beforeexecute; var beforerequest = defaultparams.beforerequest; var callback = defaultparams.success; var failcallback = defaultparams.failcallback; var ajaxurl = defaultparams.url; var showsuccessmsg = defaultparams.showsuccessmsg; var showfailmsg = defaultparams.showfailmsg; var canexecuting = true; var data = defaultparams.data; var cancel = defaultparams.cancel; var vue = this; if (cancel) { vue.$notify({ title: '提示', message: defaultparams.cancelmsg, type: 'warning' }); return; } if (ajaxurl == "") { alert("url参数未设置!") } try { if (typeof (beforeexecute) == "string") { if (beforeexecute != "") { canexecuting = eval(beforeexecute); } } else if (typeof (beforeexecute) == "function") { canexecuting = beforeexecute(); } } catch (err) { console.log(err) } if (canexecuting == false) { return; } if (confirmmsg != "") { vue.$confirm(confirmmsg, '提示', { confirmbuttontext: '确定', cancelbuttontext: '取消', type: 'warning', callback: function (action, instance) { switch (action) { case "confirm": request(); break; case "cancel": break; case "close": break; } } }) } else { request(); } function request() { try { if (typeof (beforerequest) == "string") { if (beforerequest != "") { canexecuting = eval(beforerequest); } } else if (typeof (beforerequest) == "function") { canexecuting = beforerequest(); } } catch (err) { console.log(err) } if (canexecuting == false) { return; } var callback = function (data) { try { if (typeof (callback) == "string") { if (callback != "") { eval(callback); } } else if (typeof (callback) == "function") { callback(data); } } catch (err) { console.log(err) } } var notifycallback = function (data) { if (typeof (data) != "object") { data = jsonparse(data); } if (data.state == 1) { var delaycallback = 600; if (showsuccessmsg) { if (successmsg != "") { successmsg = successmsg; } else if (data.msg != "") { successmsg = data.msg; } vue.$notify({ title: '成功', message: successmsg, type: 'success', position: 'top-right' }); settimeout(function () { callback(data); }, delaycallback); } else { callback(data); } } else { if (data.msg != "" && showfailmsg) { vue.$notify({ title: '提示', message: data.msg, type: 'error', position: 'top-left' }); } try { if (typeof (failcallback) == "string") { if (failcallback != "") { eval(failcallback); } } else if (typeof (failcallback) == "function") { failcallback(data); } } catch (err) { console.log(err) } } } var error = function () { vue.$message.error("ajax http请求错误,请联系管理员处理!") } var ajaxoptions = { type: defaultparams.type, contenttype: defaultparams.contenttype, url: ajaxurl, data: data, async: async, error: error, success: function (data) { notifycallback(data); } } vue.ajax(ajaxoptions); } }, } }) //列表页外部的常用全局方法 var datalistexternal = { methods: { //对集合进行排序,支持多级数据集 updatexuhao: function (options) { var defaultparams = { type: 0, url: "", row: {}, datalist: [], keyfield: "id", sortfield: "xuhao", parentidfield: "parentid", childrenfield: "children" }; defaultparams = extend(defaultparams, options); var vue = this; var type = defaultparams.type; var url = defaultparams.url; var row = defaultparams.row; var datalist = defaultparams.datalist; console.log(datalist) var sortfield = defaultparams.sortfield; var childrenfield = defaultparams.childrenfield; var keyfield = defaultparams.keyfield; var parentidfield = defaultparams.parentidfield; var id = row[keyfield]; var parentid = row[parentidfield];//获取当前行的父级id var previndex = 0; var nextindex = 0; var currentindex = 0; var newdatalist = []; //构造一个新的数组,用于传输到后台,默认的数据属性太多没有必要都传递到后台去 //列表序号对调 var startsort = function (datalist) { newdatalist = []; //1、先整理顺序 datalist.foreach(function (item, index) { var i = index + 1; var currentparentid = item[parentidfield]; if (currentparentid == parentid)//同一级的数据才进行处理 { item[sortfield] = i; if (item[keyfield] == id) { previndex = i - 1; currentindex = i; nextindex = i + 1; } } }); //2、再进行顺序对调 datalist.foreach(function (item, index) { var i = index + 1; var currentparentid = item[parentidfield]; if (currentparentid == parentid)//同一级的数据才进行处理 { switch (type) { case "-": case "up": case -1: if (previndex == i) { item[sortfield] = i + 1; } if (currentindex == i && i > 1) { item[sortfield] = i - 1; } break; case "+": case "down": case 1: if (currentindex == i && i < datalist.length) { item[sortfield] = i + 1; } if (nextindex == i) { item[sortfield] = i - 1; } break; } //重构减少http传输 var newrow = {} newrow[keyfield] = item[keyfield]; newrow[sortfield] = item[sortfield] newdatalist.push(newrow); index++; } }); } //对列表进行顺序排序 var resort = function (datalist, sortfield, nodefield) { if (sortfield == undefined) { sortfield = "xuhao"; //默认序号字段 } if (nodefield == undefined) { nodefield = "children"; //默认节点字段 } datalist.sort(function (a, b) { return a[sortfield] - b[sortfield] });//1级排序 //树形数据继续对数据进行递归排序 datalist.some(function (item) { if (parentid == item[parentidfield]) { //第一级或默认只有一级的情况 newdatalist = datalist; //新的数组,提交到服务器进行更新的数据 return true; } else //第一级找不到继续往下找 { var childrenlist = item[nodefield]; if (array.isarray(childrenlist)) { resort(childrenlist, sortfield, nodefield); //递归排序 } } }); }; resort(datalist, sortfield, childrenfield); startsort(newdatalist); resort(datalist, sortfield, childrenfield, 1); console.log(datalist) vue.submit({ url: url, data: { data: json.stringify(newdatalist) }, showsuccessmsg: false }) }, //获取选中列表的属性值,不填写属性默认读取id getselectedpropertys: function (selecteditem, prop) { if (!array.isarray(selecteditem)) { throw "getselectedpropertys的第2个参数必须是数组" } if (prop == undefined) { prop = "id"; } var props = []; selecteditem.map(function (item, index, ary) { if (item[prop] != undefined) { props.push(item[prop]); } }) return props; }, //回调方法,设置列表页选中项目的属性 setselecteditem: function (datalist, selecteditems, setproperty, setvalue) { var vue = this; var selecteditem = []; if (!array.isarray(deleteitems)) { selecteditem.push(deleteitems); } else { selecteditem = deleteitems; } var selectedids = []; selecteditems.foreach(function (item) { selectedids.push(item[key]); }); datalist.foreach(function (item, index) { if (selectedids.contains(item[key])) { item[setproperty] = setvalue; } else { vue.$set(item, setproperty, setvalue); } }); }, //删除列表项目的方法 deleteitem: function (datalist, deleteitems, key) { if (key == undefined) { key = "id"; } var vue = this; var selecteditem = []; if (!array.isarray(deleteitems)) { selecteditem.push(deleteitems); } else { selecteditem = deleteitems; } var selectedids = []; selecteditem.foreach(function (item) { selectedids.push(item[key]); }); datalist.foreach(function (item, index) { if (selectedids.contains(item[key])) { datalist.splice(index, 1); } if (item.children != undefined) { vue.deleteitem(item.children, deleteitems); } }); }, //设置前的检测选中项目 checkselecteditems: function (selecteditem) { if (selecteditem.length == 0) { vue.$message.error("请选择要操作的项!") return false; } return true; } } }; vue.mixin(datalistexternal); //百度编辑器 vue.component("ui-editor", { props: { value: { default: "" }, action: { type: string, default: "/e/editoruploadapi/", required: false }, toolbars: { type: string, default: "normal", required: false }, height: { type: number, default: 300 }, data: { type: object, default: function () { return { guid: '', tablename: '', fieldname: '' } }, required: true }, }, data: function () { return { instanceid: "ueditorobject", content: this.value, ueditor: {}, } }, methods: { reset: function () { //编辑器重置为可视化模式,源码模式下修改无法获取到修改的内容 if (this.ueditor.querycommandstate('source') != 0){ this.ueditor.execcommand('source'); vue.content = ueditor.getcontent(); vue.$emit("input", vue.content); } } }, created: function(){ if(window["ueditorinstancenums"] == undefined) { window["ueditorinstancenums"] = 1; } else { window["ueditorinstancenums"] = window["ueditorinstancenums"]+1; } this.instanceid = "ueditorobject" + window["ueditorinstancenums"]; }, mounted: function () { var vue = this; vue.ueditor = ue.geteditor(vue.instanceid, { serverurl: vue.action, initialframewidth: null, initialframeheight: vue.height, //初始化编辑器高度,默认320 toolbars: _ueditorzdyconfig[vue.toolbars] }); var ueditor = vue.ueditor; ueditor.ready(function () { ueditor.execcommand("serverparam", vue.data); ueditor.addlistener('blur', function () { vue.content = ueditor.getcontent(); vue.$emit("input", vue.content); }); }); }, template: '' }); //id转文本组件 vue.component("el-input-convert", { props: { converturl: { type: string, default: "", required: false }, value: {//v-mode传递进来,内部不需要需用 type: number | undefined, default: 0, required: false }, clearable:{ type: boolean, default: false, required: false }, }, data: function () { return { name: "", } }, methods: { getname: function () { var vue = this; var data = this.serverdata; var defaultoptions = { async: true, type: "get", url: this.converturl, data: data, cache: true }; defaultoptions = extend(defaultoptions, this.config); defaultoptions.success = function (data) { if (data.name != null && data.name != undefined) { vue.name = data.name; } }; if (defaultoptions.url == "") { return; } vue.ajax(defaultoptions); }, clearname: function () { var vue = this; vue.name = ""; vue.$emit('input', 0) } }, watch: { converturl: { handler: function (newname, oldname) { if (newname != oldname) { this.getname(); } }, immediate: true, deep: true }, }, template: '' }); //ui-page-panel vue.component("ui-page-panel", { props: { value: { type: object, default: function () { return {} }, required: false }, }, data: function () { return { pageinfo: this.value } }, watch: { value: function (newvalue, oldvalue) { this.pageinfo = newvalue; } }, methods: { gopage: function (page) { if (page != undefined) { this.pageinfo.currentpage = page; } this.$emit("input", this.pageinfo); this.$emit("change"); }, changepagesize: function () { this.pageinfo.currentpage = 1; this.$emit("input", this.pageinfo); this.$emit("change"); }, }, computed: { pageitem: function () { var pageitem = []; var pageinfo = this.pageinfo; var currentpage = pageinfo.currentpage; var recordcount = pageinfo.recordcount; if (recordcount == 0) { return [{ value: 1, text: "第1页" }]; } var pagesize = pageinfo.pagesize; var pagecount = 1; if (recordcount % pagesize > 0) { pagecount = math.floor(recordcount / pagesize) + 1; } else { pagecount = recordcount / pagesize; } if (currentpage > pagecount) { currentpage = pagecount; } pageinfo.pagecount = pagecount; var startpage = currentpage - 10; if (startpage < 1) { startpage = 1; } var endpage = currentpage + 10; if (endpage >= pagecount) { endpage = pagecount; } for (var i = startpage; i <= endpage; i++) { pageitem.push({ value: i, text: "第" + i + "页" }); } if (startpage > 1) { if (startpage > 2) { pageitem.unshift({ value: startpage - 1, text: "..." }); } pageitem.unshift({ value: 1, text: "首页" }); } if (endpage < pagecount) { if (endpage < pagecount - 1) { pageitem.push({ value: endpage + 1, text: "..." }); } pageitem.push({ value: pagecount, text: "尾页" }); } return pageitem; } , pagesizeitem: function () { var pageitem = [10, 15, 20, 30, 40, 50, 100]; var pagesize = this.pageinfo.pagesize; if (pageitem.indexof(pagesize) < 0) { pageitem.push(pagesize); } return pageitem.sort(function (a, b) { return a - b }); } }, template: "\
\
\ 共{{pageinfo.recordcount}}条\ 上一页=pageinfo.pagecount\" v-on:click=\"gopage(pageinfo.currentpage+1)\">下一页\ \ \ \ \ \ \
\
" }); //ui-verificationcode验证码组件 vue.component("ui-verification-code-image", { props: { src: { default: null }, }, data: function () { return { random: "", } }, methods: { change: function () { var r = math.floor(math.random() * 100000000); var imgsrc = this.src; if (imgsrc.indexof("?") < 0) { r = "?" + r; } r = "&" + r; this.random = r; } }, template: '' }); //上传文件共有属性方法 var _uploadmixinsdata_ = { data: function () { return { dialogimageurl: '', dialogvisible: false, filelists: this.filelist, hideupload: false, acceptext: [".jpg", ".jpeg", ".png", ".gif"], uploadbtnstate: false } }, props: { data: { type: object, default: function () { return { filetype: "image" } }, required: false, loadinginstance: null }, btntxt: { type: string, default: "点击上传" //可选择array或string }, disabled: { type: boolean, default: false, required: false }, returntype: { type: string, default: "array" //可选择array或string }, value: {//v-mode传递进来,内部不需要需用 type: array | string | undefined, default: function () { return [] }, required: false }, action: {//----------接口地址 type: string, default: '#' }, accept: { type: array | string, default: [".jpg", ".jpeg", ".png", ".gif"], required: false }, limit: { //-------限制个数 type: number, default: 5 }, multiple: {//------是否支持多选择文件 type: boolean, default: false }, disabled: { //------是否禁止 type: boolean, default: false }, maxsize: {//------------最大尺寸限制,0则不限制,单位kb type: number, default: 1 }, filelist: { //-------------数据源(数据绑定时实现双向绑定:file-list.sync) type: array, default: [] }, drag: { //-----------是否启动拖拽 type: boolean, default: true } }, methods: { //更新父级v-model updateimgsrc: function (filelists) { var newdata = filelists.map(function (item) { return item.url; }) if (this.returntype == "string") { newdata = newdata.join(","); } this.$emit('input', newdata); }, handlepreview: function (file) { window.open(file.url); }, handleremove: function (file) { //-----------删除 var _this = this _this.filelists.foreach(function (item, index) { if (item.uid == file.uid) { _this.filelists.splice(index, 1) } }) this.showuploadbthhandel(); }, checklimit: function () { }, rightfilelist: function (file) { //-----------右边点击 var _this = this try { this.filelists.foreach(function (item, index) { if (file.uid == item.uid) { if (index + 1 != _this.filelists.length) { var middata = _this.filelists[index + 1].url _this.filelists[index + 1].url = _this.filelists[index].url _this.filelists[index].url = middata } else { var startdata = _this.filelists[index].url for (var i = _this.filelists.length - 1; i > 0; i--) { _this.filelists[i].url = _this.filelists[i - 1].url } _this.filelists[0].url = startdata } throw new error('end'); } }) } catch (e) { if (e.message != 'end') throw e; } this.updateimgsrc(_this.filelists) }, leftfilelist: function (file) { //---------------左边点击 var _this = this try { this.filelists.foreach(function (item, index) { if (file.uid == item.uid) { if (index != 0) { var middata = _this.filelists[index - 1].url _this.filelists[index - 1].url = _this.filelists[index].url _this.filelists[index].url = middata } else { var enddata = _this.filelists[index].url for (var i = 0; i < _this.filelists.length - 1; i++) { _this.filelists[i].url = _this.filelists[i + 1].url } _this.filelists[_this.filelists.length - 1].url = enddata } throw new error('end'); } }) } catch (e) { if (e.message != 'end') throw e; } this.updateimgsrc(_this.filelists) }, handlepicturecardpreview: function (file) {//----------预览 this.dialogimageurl = file.url; this.dialogvisible = true; }, onimageerror: function (err, file, filelists) {//-------上传失败,http服务器错误 this.loadinginstance.close(); this.$message.error("文件上传失败,请稍后再试!"); }, onrequestover: function (response, file, filelist) { //--------http请求结束后的回调 this.loadinginstance.close(); this.filelists = filelist if (!response.state) //response.state==0时表示已被服务器端终止上传并返回提示 { this.handleremove(file); this.$message.error(response.msg); } else { file.url = response.url; } }, onchangeimageupload: function (file, filelist) { //-----------上传成功/失败,正在上传 //console.log("onchangeimageupload") this.showuploadbthhandel(); }, onlimitexceed: function (file, filelist) { //-----------超出上传个数 this.$message.error("最多只能上传" + this.limit + "个文件,请删除后再上传!"); }, beforeupload: function (file) { //--------上传之前校验 var _this = this; console.log(_this.maxsize) if (!_this.validatesize(file) && _this.maxsize > 0) { console.log(_this.maxsize) _this.$message.error("文件大小不能超过" + _this.maxsize / 1024 + "mb!"); return false; } if (!_this.validateext(file)) { _this.$message.error("禁止上传的" + _this.acceptext.join(",") + "格式的文件!"); return false; } _this.loadinginstance = _this.$loading(); return true; }, validatesize: function (file, resolve, reject) { //---验证大小 var issizem = file.size / 1024 < this.maxsize; return issizem ? true : false }, validateext: function (file, resolve, reject) { //---验证格式 var filename = file.name; var indexstart = filename.lastindexof("."); var indexend = filename.length; var fileext = filename.substring(indexstart, indexend);//后缀名 var arrayaccept = this.accept; if (arrayaccept == "*") { return true; } if (!array.isarray(arrayaccept)) { arrayaccept = arrayaccept.split(","); this.acceptext = arrayaccept; } return arrayaccept.indexof(fileext.tolowercase()) >= 0; }, showuploadbthhandel: function () { //上传按钮显示和隐藏控制 this.hideupload = this.filelists.length >= this.limit && this.limit > 0; if (this.data.filetype == "images" || this.data.filetype == "image") { var dom = this.$refs.upload.getelementsbyclassname('el-upload')[0]; if (this.hideupload) { dom.style.display = "none" } else { dom.style.display = "inline-block" } } else { if (this.hideupload) { this.uploadbtnstate = true; } else { this.uploadbtnstate = false; } } } }, mounted: function () { this.showuploadbthhandel(); }, watch: { filelists: { handler: function (newval, oldval) { this.updateimgsrc(newval) }, //deep:true, immediate: true } } } //带缩约图显示 vue.component('ui-picture-upload', { template: "
" + "
" + "" + "" + "" + "" + "" + "" + "" + "" + "" + "" + "" + "
" + "
", mixins: [_uploadmixinsdata_], }) //不带缩约图 vue.component('ui-file-upload', { template: "
" + "{{btntxt}}" + "
", mixins: [_uploadmixinsdata_], }) //tag标签 vue.component('ui-tag', { template: "
{{item}}" + "" + "{{buttontext}}
", data: function () { return { inputvisible: false, inputvalue: '', datalists: [], } }, props: { value: { //-----------数据源 type: array | string, default: [] }, closable: { //-------是否有关闭 type: boolean, default: true }, type: { //------------类型success/info/warning/danger type: string, default: '' }, disabletransitions: { //------是否关闭动画 type: boolean, default: false }, hit: { //-----------是否有边框描边 type: boolean, default: false }, color: {//----------------背景色 type: string, default: '' }, size: { //------------尺寸medium / small / mini type: string, default: '' }, effect: {//-----------主题dark / light / plain type: string, default: 'light' }, buttontext: { //------------按钮文本 type: string, default: '+添加' }, returntype: { type: string | array, default: '' } }, created: function () { //如果数据源不是数组则转换为数组 var midlist; if (this.value == undefined || this.value == null || this.value == "") { midlist = []; } else if (!array.isarray(this.value)) { midlist = this.value.split(',') } this.datalists = midlist }, methods: { handleclose: function (val) { this.datalists.splice(this.datalists.indexof(val), 1); this.returntypeflag(this.datalists) }, handleclick: function (val) { }, returntypeflag: function (datalist) { //如果传递的v-model是数组,则返回数组,反之则返回逗号隔开的字符串 if (array.isarray(this.value)) { this.$emit('input', datalist) } else { this.$emit('input', datalist.join(",")) } }, handleinputconfirm: function () { var inputvalue = this.inputvalue; if (inputvalue) { this.datalists.push(inputvalue); } this.inputvisible = false; this.inputvalue = ''; this.returntypeflag(this.datalists) }, showinput: function () { this.inputvisible = true; //dom节点渲染完毕后执行 this.$nexttick(function () { this.$refs.savetaginput.$refs.input.focus(); }); } } }) //级联共有属性 var _cascaderminix_ = { data: function () { return { selectedoptionsval: [], //-------获取已绑定的数据源 selectedoptionsvallist: [], //---------显示已绑定的数据源 selectedoldlist: [], //---------全部数据源 selectedmidlist: [], //---------判断数据源 selectvalue: '' } }, watch: { value: { handler: function (newval, oldval) { try { this.selectvalue = newval this.createdval() } catch (e) { console.log(e) } }, deep: true }, options: { handler: function (newval, oldval) { try { this.options = newval this.createdval() } catch (e) { console.log(e) } }, deep: true } }, created: function () { this.selectvalue = this.value this.createdval() //-----------初始化 }, props: { options: { //----------数据源 type: array, default: {} }, clearable: { //--------------输入框可清空 type: boolean, default: true }, props: { type: object, default: function () { return { expandtrigger: 'hover', multiple: false } } }, value: { //----------默认选中 type: string | number, default: '' }, placeholder: { //-----提示 type: string, default: '请选择' }, disabled: { //------是否禁用 type: boolean, default: false }, size: { type: string, default: '' }, collapsetags: { //------多选情况下是否折叠 type: boolean, default: false } }, methods: { createdval: function () { //--------------------实例化数据源,根据子级id找到相应的父级数据 try { var _this = this var selectarr = this.selectvalue.tostring().split(',') _this.selectedoldlist = [] this.selectedmidlist = _this.foroptions(_this.options, []) this.getarray(this.selectedmidlist) if (_this.selectedoldlist.length <= 0 || _this.options.length <= 0) { return; } selectarr.foreach(function (selectval, index) { for (var i = 0; i < _this.selectedoldlist.length; i++) { for (var j = 0; j < _this.selectedoldlist[i].length; j++) { if (_this.selectedoldlist[i][j] == selectval) { if (_this.selectedoldlist[i][_this.selectedoldlist[i].length - 1] == selectval) { if (!_this.props.multiple) { _this.selectedoldlist[i] = _this.selectedoldlist[i].map(number) } _this.selectedoptionsval.push(_this.selectedoldlist[i]) } return; } } } }) if (!_this.props.multiple) { if (_this.selectedoptionsval.length <= 0) { return; } _this.selectedoptionsvallist = _this.selectedoptionsval[0] } else { _this.selectedoptionsvallist = _this.selectedoptionsval } _this.selectedoptionsval = [] } catch (e) { throw e; } }, getselectedvalue: function (val) { //---------------获取最后子级的value,组成字符串 console.log(val) var data = val if (this.props.multiple) { var selectedval = '' val.foreach(function (item, inx) { item.foreach(function (itemval, index) { if (inx == val.length - 1) { if (index == item.length - 1) { selectedval += itemval return } } else { if (inx != val.length - 1) { if (index == item.length - 1) { selectedval += itemval + ',' return } } else { if (index == item.length - 1) { selectedval += itemval return } } } }) }) } else { if (val.length == 0) { selectedval = '' } else { selectedval = val[val.length - 1] } } this.$emit('input', selectedval) }, foroptions: function (departmentlist, olddepartment) { //------------------------初始化数据源 var _this = this if (!array.isarray(departmentlist)) { alert("数据源只能为数组!") } var newdepartment = []; departmentlist.foreach(function (item, inx) { newdepartment.push(json.parse(json.stringify(olddepartment))) newdepartment[inx].push(item.value.tostring()); //if (!_this.props.multiple) { // item.value = item.value.tostring() //} if (array.isarray(item.children)) { newdepartment[inx] = _this.foroptions(item.children, newdepartment[inx]); } }) return newdepartment; }, getarray: function (departmentlist) { var _this = this departmentlist.foreach(function (item, inx) { if (array.isarray(item) && array.isarray(item[0])) { _this.getarray(item) } else { _this.selectedoldlist.push(item) } }) } } } // 级联多选单选 vue.component('ui-cascader', { template: "", mixins: [_cascaderminix_] }) // 级联面板多选单选 vue.component('ui-cascader-panel', { template: "", mixins: [_cascaderminix_] }) //下拉菜单 //-----公用属性方法 var _selectcheckbox_ = { props: { multiple: { //-----------true多选false单选 type: boolean, default: false }, clearable: { //--------------选择器清空,仅适用于单选 type: boolean, default: true }, filterable: { //--------------选择器清空,仅适用于单选 type: boolean, default: false }, options: { //-------------数据源 type: array, default: function () { return []; } }, size: { type: string, default: '' }, value: { //------------默认选中 type: string | array | number, default: function () { return '' } }, disabled: { //------------是否禁用 type: boolean, default: false }, multiplelimit: { //------------用户最多选择的个数,默认为0不限制 type: number, default: 0 }, placeholder: { //----------------提示语句 type: string, default: '请选择' } }, methods: { flaginit: function () { this.init() }, flaginitcheck: function () { this.initdata() }, initdata: function () { var _this = this this.selectedmodel = [] if (this.value == '' || this.value == null) { _this.selectedmodel = '' return } var midmodel = [] if (this.multiple) { if (typeof _this.value == 'object' || typeof _this.value == 'array') { midmodel = _this.value } else { midmodel = this.value.tostring().split(',') } midmodel.foreach(function (val) { _this.optionarr.foreach(function (item) { if (item.value.tostring() == val.tostring()) { _this.selectedmodel.push(item.value) } }) }) } else { _this.optionarr.foreach(function (item) { if (item.value.tostring() == _this.value.tostring()) { _this.selectedmodel = item.value } }) } }, getselectedvals: function (selectedtext) { //-----------选中后的调用 var selected = '' if (selectedtext == '' || selectedtext == null) { selected = '' } else { if (this.multiple) { if (!array.isarray(this.value)) { selectedtext.foreach(function (item, inx) { if (selectedtext.length - 1 == inx) { selected += item } else { selected += item + ',' } }) } else { selected = [] selected = selectedtext } } else { if (!array.isarray(this.value)) { selected = selectedtext } else { selected = [] selected[0] = selectedtext } } } this.$emit('input', selected) //----------回调父级的方法 }, } } //单选框 vue.component('ui-radio', { template: "" + "" + "{{item.label}}", mixins: [_selectcheckbox_], data: function () { return { optionarr: [], selectedmodel: '', } }, props: { border: { type: boolean, default: false }, size: { type: string, default: 'mini' } }, created: function () { this.flaginit() }, methods: { getselectedval: function (val) { var selected = '' if (array.isarray(this.value)) { selected = [] selected.push(val) } else { selected = val } console.log(selected) this.$emit('input', selected) }, init: function () { if (array.isarray(this.value)) { this.selectedmodel = this.value[0].tostring() } else { this.selectedmodel = this.value.tostring() } } } }) //下拉表单 vue.component('ui-select', { template: "" + "" + "", mixins: [_selectcheckbox_], props: { width: { type: string, default: '100%' } }, data: function () { return { selectedmodel: '', optionarr: [], } }, created: function () { this.getdatachildren(); }, methods: { getdatachildren: function () { var _this = this; this.optionarr = json.parse(json.stringify(this.options)) if (this.$slots.default != undefined) { this.$slots.default.foreach(function (item) { if (item.data != undefined) { _this.optionarr.push(item.componentoptions.propsdata) } }) } this.flaginitcheck() }, }, watch: { value: { handler: function (newval, oldval) { this.flaginitcheck() }, immediate: true }, options: { handler: function (newval, oldval) { this.getdatachildren() }, immediate: true }, } }); //多选框 vue.component('ui-checkbox', { template: "" + "{{item.label}}", mixins: [_selectcheckbox_], data: function () { return { selectedmodel: '', optionarr: [], } }, created: function () { this.getcheckboxdata() }, methods: { getcheckboxdata: function () { var _this = this this.optionarr = json.parse(json.stringify(this.options)) if (this.$slots.default != undefined) { this.$slots.default.foreach(function (item) { if (item.data != undefined) { _this.optionarr.push({ label: item.componentoptions.children[0].text, value: item.componentoptions.propsdata.label }) } }) } this.flaginit() }, init: function () { var _this = this this.selectedmodel = [] if (this.value == '' || this.value == null) { _this.selectedmodel = [] return } var midmodel = [] if (typeof _this.value == 'object' || typeof _this.value == 'array') { midmodel = _this.value } else { midmodel = this.value.tostring().split(',') } midmodel.foreach(function (val) { _this.optionarr.foreach(function (item) { if (item.value.tostring() == val.tostring()) { _this.selectedmodel.push(item.value) } }) }) }, getselectedval: function (selectedtext) { //-----------选中后的调用 var selected = '' if (array.isarray(this.value)) { selected = [] selected = selectedtext } else { selectedtext.foreach(function (item, inx) { if (selectedtext.length - 1 == inx) { selected += item } else { selected += item + ',' } }) } this.$emit('input', selected) //----------回调父级的方法 } }, watch: { value: { handler: function (newval, oldval) { this.flaginit() }, immediate: true }, options: { handler: function (newval, oldval) { this.flaginit() }, immediate: true, }, } }) //对话框 vue.component('ui-dialog', { template: "" + "
" + "" + "搜索
" + "" + "" + "" + "" + "" + "" + "
" + "确定" + "关闭" + "
", props: { title: { //--------标题 type: string, default: '' }, visible: { type: boolean,//------是否显示 default: false }, width: { type: string,//-------宽度 default: '50%' }, value: { //------------默认选中值 type: array | string | number, default: function () { return []; } }, url: { //-----------api地址 type: string, default: '' }, height: { //-----------高度 type: string, default: 'auto' }, pageinfo: { type: object, default: function () { return {} } }, multiple: { type: boolean, default: true }, thtitle: { type: string, default: '标题' }, }, data: function () { return { tabledata: [], selectlist: [], pageinfos: {}, searchinfo: { keyword: "" }, loading: true, dialogvisible: false, selectionchangeflg: true, newvalue: [], addeventfirstinit: false } }, created: function () { }, methods: { handleselectionchange: function (val) { //-------------监听被选中 var _this = this this.selectlist = val if (val.length <= 0) { _this.newvalue = [] } else { val.foreach(function (item, index) { var addpush = true _this.newvalue.foreach(function (items, indexs) { if (item.value == items) { addpush = false } }) if (addpush) { _this.newvalue.push(item.value) } }) } }, getrowkey: function (row) { return row.value; }, userchoose: function (list, row) { //-----行监听 var _this = this var oldselectlist = this.selectlist this.selectlist = [] if (this.multiple) { this.selectlist = list var addpush = true _this.newvalue.foreach(function (item, index) { if (item == row.value) { addpush = false _this.newvalue.splice(index, 1) } }) if (addpush) { _this.newvalue.push(row.value) } } else { this.$refs.tables.clearselection(); if (oldselectlist.length > 0 && oldselectlist[0] == row) { this.selectlist = [] _this.newvalue = [] } else { this.$refs.tables.togglerowselection(row, true); this.selectlist[0] = row _this.newvalue[0] = row.value //console.log(typeof this.newvalue) } } }, loaddata: function (callbacks) { //---------api var searchinfos = { label: '' } searchinfos.label = this.searchinfo.keyword var serverdata = extend(searchinfos, this.pageinfos); var _this = this ajax({ url: _this.url, data: serverdata, success: function (responsedata) { if (responsedata != '') { _this.tabledata = responsedata.data settimeout(function () { _this.tabledata.foreach(function (item, index) { //--------------重置默认 _this.$refs.tables.togglerowselection(_this.tabledata[index], false); }) }, 0) _this.pageinfos = responsedata.pageinfo _this.addeventfirstinit = true _this.loading = false _this.settogglerow(_this.tabledata) } if (callbacks != undefined && typeof callbacks != 'object') { callbacks() } } }); }, inits: function () { //----------打开回调 var _this = this if (!this.multiple) { _this.newvalue[0] = this.value } else { _this.newvalue = json.parse(json.stringify(this.value)) } _this.pageinfos = _this.pageinfo this.loaddata(function () { settimeout(function () { }, 0) }) }, settogglerow: function (datas) { //---------设置默认选中 var _this = this var valuelist = _this.newvalue if (!this.multiple) { this.$refs.tables.$el.childnodes[1].childnodes[0].childnodes[1].childnodes[0].childnodes[0].childnodes[0].style.display = 'none' } else { this.$refs.tables.$el.childnodes[1].childnodes[0].childnodes[1].childnodes[0].childnodes[0].childnodes[0].style.display = 'block' } if (valuelist != '' || valuelist.length > 0) { _this.selectionchangeflg = true settimeout(function () { valuelist.foreach(function (val) { datas.foreach(function (item, index) { if (val == item.value) { _this.$refs.tables.togglerowselection(datas[index], true); } }) }) if (_this.multiple) { if (_this.addeventfirstinit) { _this.selectlist.foreach(function (item, inx) { var removepush = false valuelist.foreach(function (val) { if (item.value == val) { removepush = true } }) if (!removepush) { _this.selectlist.splice(inx, 1) } }) _this.addeventfirstinit = false } } }, 0) } else { settimeout(function () { datas.foreach(function (item, index) { //--------------重置默认 _this.$refs.tables.togglerowselection(datas[index], false); }) }, 0) } }, postsubmit: function () { //--------确定 if (this.multiplelimit > 0 && this.multiplelimit < this.selectlist.length) { this.$message.error('最多选择' + this.multiplelimit + '条数据,请重新选择!'); return; } this.$emit('chaoptions', this.selectlist) var selected = [] if (this.multiple) { this.selectlist.foreach(function (item, index) { selected.push(item.value) }) } else { selected = '' if (this.selectlist.length == 0) { selected = '' } else { selected = this.selectlist[0].value } } this.$emit('input', selected) this.closeself() }, closeself: function () { //------取消 this.dialogvisible = false } }, watch: { visible: { handler: function (newval, oldval) { this.dialogvisible = this.visible }, immediate: true }, dialogvisible: { //------监听对话框 handler: function (newval, oldval) { if (!newval) { this.$emit('changes') } }, immediate: true }, value: { handler: function (newval, oldval) { }, immediate: true } }, }) //下拉选择框菜单 vue.component('ui-select-popup', { template: "
" + "" + "{{btntitle}}" + "
", mixins: [_selectcheckbox_], props: { selectwidth: { //------下拉宽度 type: string, default: '100%' }, btntitle: { //-------按钮标题 type: string, default: '选择' }, title: { //----------顶部标题 type: string, default: '选择界面' }, url: { //---------api地址 type: string, default: '' }, width: { //-----------对话框宽度 type: string, default: '50%' }, height: { //-----------对话框高度 type: string, default: 'auto' }, pageinfo: { type: object, default: function () { return {} } }, collapsetags: { type: boolean, default: true }, thtitle: { type: string, default: '标题' } }, data: function () { return { dialogvisval: false,//---------显示对话框 selectedmodel: '', optionarr: [], optionnewarr: [], optionscunarr: [], } }, watch: { selectedmodel: { handler: function (newval, oldval) { if (newval.length > 0 || newval != '') { this.getselectedvals(newval) } }, immediate: true }, }, created: function () { var _this = this settimeout(function () { _this.$refs.options.$el.childnodes[1].childnodes[1].style.border = '1px solid #dcdfe6' }, 0) this.optionscunarr = json.parse(json.stringify(this.options)) this.getdatachildren(); }, methods: { opendialog: function () { this.dialogvisval = true }, closedialog: function () { this.dialogvisval = false }, getdatachildren: function () { var _this = this this.optionarr = json.parse(json.stringify(this.options)) this.optionnewarr = json.parse(json.stringify(this.options)) if (this.$slots.default != undefined) { this.$slots.default.foreach(function (item) { if (item.data != undefined) { _this.optionarr.push(item.componentoptions.propsdata) } }) } this.flaginitcheck() }, changeoptions: function (val) { var _this = this this.optionnewarr = json.parse(json.stringify(this.optionscunarr)) if (this.optionnewarr.length <= 0) { this.optionnewarr = val return; } else { this.optionnewarr = this.unique(this.mergearray(this.optionnewarr, val)) } }, unique: function (arr) { //------------删除原数组重复值并生成新的数组 var hashtable = {}; var data = []; for (var i = 0, l = arr.length; i < l; i++) { if (!hashtable[arr[i].value]) { hashtable[arr[i].value] = true; data.push(arr[i]); } } return data }, mergearray: function (arr1, arr2) { //-------合并数组 return arr1.concat(arr2) } } }) //发送验证码 vue.component('ui-input-code', { template: "" + "{{btntitlenews}}" + "", data: function () { return { modeltext: '', parameter: {},//--------api参数 sendcodeflag: true,//-------是否可以发送 btntitlenews: '', delaysize: 60,//-----延迟秒数 btnloading: false, } }, created: function () { this.modeltext = this.value; this.btntitlenews = this.btntitle }, props: { placeholder: { type: string, default: '请输入验证码' }, value: { type: string, default: '' }, focustarget: { type: string, default: '' }, btntitle: { type: string, default: '获取验证码' }, type: { type: string, default: 'email' }, urlapi: { type: string, //---------获取发送api default: '/e/smscode/send' }, urlcode: { //-------获取tokenapi type: string, default: "/e/codebase/send" }, mobileemail: { //---------获取手机号/email type: string, default: '' } }, methods: { sendcode: function () { //-发送验证码 if (this.sendcodeflag) { var _this = this var validationflag = this.validationtext(); if (validationflag) { this.sendcodeflag = false this.btnloading = true this.calltoken(function () { _this.callapi(_this.type) }) } } }, changecode: function (val) {//-------back-value this.$emit('input', val) }, calltoken: function (callbacks) { //----------获取token var _this = this _this.ajax({ url: _this.urlcode, data: {}, async: true, success: function (responsedata) { _this.parameter.token = responsedata.token; callbacks() }, error: function () { settimeout(function () { _this.sendcodeflag = true _this.btnloading = false }, 1000) _this.$message.error('接口调用失败。请联系开发人员'); } }); }, timingdelay: function () { //--------定时60秒 var _this = this var seconds = this.delaysize; var time = setinterval(function () { if (seconds <= 0) { clearinterval(time) _this.btntitlenews = _this.btntitle _this.sendcodeflag = true return; } if (seconds == 60) { _this.btnloading = false } _this.btntitlenews = seconds + 's' --seconds; }, 1000) }, callapi: function (type) { //------调用api var _this = this if (type == 'email') { this.parameter.email = this.mobileemail } else { this.parameter.mobile = this.mobileemail } _this.ajax({ url: _this.urlapi, type: "post", data: _this.parameter, success: function (responsedata) { if (responsedata.state == 1) { _this.timingdelay() } else { settimeout(function () { _this.btnloading = false _this.sendcodeflag = true _this.$message.error(responsedata.msg); }, 1000) } }, error: function () { _this.btnloading = false _this.sendcodeflag = true //_this.$message.error(responsedata.msg); } }); }, focus: function () { //提示后获取焦点 var focustarget = this.focustarget; if (focustarget == "") { return; } var focustarget = document.queryselector(focustarget); if (focustarget != null) { focustarget.focus(); } }, validationtext: function () { //----------验证文本 if (this.type == 'email') { if (this.mobileemail == '' || this.mobileemail == null) { this.focus(); this.$message.error('请填写电子邮箱!') return false } var emailflag = isemail(this.mobileemail); if (!emailflag) { this.focus(); this.$message.error("电子邮箱填写错误,请重新填写!"); return false; } else { return true; } } if (this.type == 'mobile') { if (this.mobileemail == '' || this.mobileemail == null) { this.focus(); this.$message.error('请填写手机号码!') return false } var mobileflag = ismobile(this.mobileemail); if (!mobileflag) { this.focus(); this.$message.error("手机号码填写错误,请重新填写!"); return false; } else { return true; } } } } }) //加载js vue.component('ui-script', { template: "", data: function () { return { istrue: false, } }, props: { value: { //-----------数据源 type: array | string, default: "" }, src: { //js地址 type: array | string, default: "" }, componentname: { //组件名称 type: string, default: "" }, parameter: { //自定义json参数 type: object, default: function () { return {} } }, }, created: function () { var _this = this; var url = _this.src if (url != undefined && url != null && url != "") { var script = document.createelement("script"); script.type = "text/javascript"; script.src = url; document.head.appendchild(script); if (script.readystate) { script.onreadystatechange = function () { if (script.readystate == 'loaded' || script.readystate == 'complete') { script.onreadystatechange = null; _this.istrue = true; } }; } else {//其他浏览器 script.onload = function () { _this.istrue = true; }; } } }, methods: { }, watch: { value: { handler: function (newval, oldval) { this.$emit('input', newval) }, immediate: true, deep: true }, }, })