使用layer.tips实现鼠标悬浮时触发事件提示消息实现

https://www.cnblogs.com/Big-Boss/p/9531235.html

/*** 服务商管理初始化*/
var invoice = {id: "invoiceTable",	//表格idseItem: null,		//选中的条目table: null,layerIndex: -1
};
/*** 初始化表格的列*/
invoice.initColumn = function () {return [{field: 'getSelections', radio: true,visible: true},{title: '工单编号', field: 'workOrderNo', visible: true, align: 'center', valign: 'middle',formatter:function(value,row,index){return "<a href='javascript:void(0)' id=\"order"+value+"\" data=\""+value+"\" onmouseover='showOrderInfo(this)' onmouseout='hideOrderInfo(this)'>"+value+"</a>";}},{title: '工单总价(元)', field: 'workOrderPrice', visible: true, align: 'center', valign: 'middle'},{title: '工单完成日期', field: 'workOrderComDate', visible: true, align: 'center', valign: 'middle'},{title: '服务人员编号', field: 'userSn', visible: true, align: 'center', valign: 'middle',formatter:function(value,row,index){return "<a href='javascript:void(0)' id=\"user"+row.workOrderNo+"\" data=\""+value+"\" data-workOrderNo=\""+row.workOrderNo+"\" onmouseover='showUserInfo(this)' onmouseout='hideUserInfo(this)'>"+value+"</a>";}},{title: '安装数量', field: 'num', visible: true, align: 'center', valign: 'middle'},{title: '服务人员应结款(元)', field: 'userPrice', visible: true, align: 'center', valign: 'middle'},{title: '合计金额(元)', field: 'userTotalPrice', visible: true, align: 'center', valign: 'middle'},{title: '工单创建时间', field: 'workOrderCreated', visible: true, align: 'center', valign: 'middle'},{title: '创建人', field: 'workOrderCreater', visible: true, align: 'center', valign: 'middle'},{title: '工单核对时间', field: 'workOrderCheckDate', visible: true, align: 'center', valign: 'middle'},{title: '核对人', field: 'workOrderChecker', visible: true, align: 'center', valign: 'middle'},{title: '备注', field: 'remark', visible: true, align: 'center', valign: 'middle',formatter:function(value,row,index){return '<a href="javascript:void(0);" onclick="invoice.agree('+row['id']+')" style="color:blue">查看备注记录</a>';}},{title: '状态', field: 'status', visible: true, align: 'center', valign: 'middle',formatter:function(value,row,index){if (value == 0) {return "待对账";}else if (value == 1) {return "待设置";}else if (value == 2) {return "待上传凭证";}else if (value == 3) {return "已完成";}}},{title: '操作', field: '', visible: true, align: 'center', valign: 'middle',formatter:function(value,row,index){if (row.status == 0) {return '<a href="javascript:void(0);" onclick="invoice.setDz('+row['id']+')" style="color:blue">对账完成</a><br><a href="javascript:void(0);" onclick="invoice.refuse('+row['id']+')" style="color:red">添加备注</a>';}else if (row.status == 1) {return '<a href="javascript:void(0);" onclick="invoice.go_setKpf('+row['id']+')" style="color:blue">设置开票方</a><br><a href="javascript:void(0);" onclick="invoice.refuse('+row['id']+')" style="color:red">添加备注</a>'}else if (row.status == 2) {return '<a href="javascript:void(0);" onclick="invoice.go_setPz('+row['id']+')" style="color:blue">上传发票凭证</a><br><a href="javascript:void(0);" onclick="invoice.refuse('+row['id']+')" style="color:red">添加备注</a>'}else if (row.status == 3) {return '<a href="javascript:void(0);" onclick="invoice.refuse('+row['id']+')" style="color:red">添加备注</a>'}}}];
};var differentindex = 999;
function showOrderInfo(e) {var workOrderNo = $(e).attr('data');openOrderMsg(workOrderNo);
}function hideOrderInfo(e) {layer.close(differentindex);
}function openOrderMsg(workOrderNo) {var html = "";var ajax = new $ax(Feng.ctxPath + "/invoice/getWorkOrderInfo", function(data){if (data == "" || data == null || data == undefined) {html += "工单信息不存在!";}else{var value = data.workOrderStatus;var isBack = data.isBack;var status;if(value==8){if (isBack == null || isBack == 0 || isBack == 1 || isBack == 5) {status = "待指派";}else if (isBack == 3 || isBack == 4) {status = "待服务商接单";}}else if(value==9){status = '待安装师傅接单';}else if(value==10){status = '待签到';}else if(value==101){status = '待核销';}else if(value==102){status = '待回访';}else if(value==5){status = '已完成';}html += '<table width="500" border="0" cellspacing="0" cellpadding="0">'html += '<tr> 'html += '<td width="auto">客户信息</td> 'html += '<td width="auto">客户电话</td> 'html += '<td width="auto">服务地区</td> 'html += '<td width="auto">服务地址</td> 'html += '<td width="auto">产品信息</td> 'html += '<td width="auto">工单状态</td> 'html += '</tr> 'html += '<tr> 'html += '<td>'+data.buyerName+'</td> 'html += '<td>'+data.phone+'</td> 'html += '<td>'+data.buyerAddress+'</td> 'html += '<td>'+data.buyerDetailAddress+'</td> 'html += '<td>'+data.remark+'</td> 'html += '<td>'+status+'</td> 'html += '</tr> 'html += '</table>'}},function(data){html += "获取工单信息失败,请联系管理员!";});ajax.set("workOrderNo",workOrderNo);ajax.start();differentindex = layer.tips(html, '#order'+workOrderNo, {tips: [3, '#3595CC'],time: 0,area: 'width:auto;height:auto'});
}var differentindex1 = 999;
function showUserInfo(e) {var userSn = $(e).attr('data');var workOrderNo = $(e).attr('data-workOrderNo');openUserMsg(workOrderNo,userSn);
}function hideUserInfo(e) {layer.close(differentindex1);
}function openUserMsg(workOrderNo,userSn) {var html = "";var ajax = new $ax(Feng.ctxPath + "/invoice/getUserInfo", function(data){if (data == "" || data == null || data == undefined) {html += "服务人员信息不存在!";}else{var nameType;if (data.identity == 1 || data.identity == 2) {nameType = "服务商";}else if (data.identity == 3){nameType = "个人技师";}html += '<table width="250" border="0" cellspacing="0" cellpadding="0">'html += '<tr> 'html += '<td width="auto">服务人员类型</td> 'html += '<td width="auto">服务人员</td> 'html += '<td width="auto">服务人员电话</td> 'html += '</tr> 'html += '<tr> 'html += '<td>'+nameType+'</td> 'html += '<td>'+data.name+'</td> 'html += '<td>'+data.mobile+'</td> 'html += '</tr> 'html += '</table>'}},function(data){html += "获取服务人员信息失败,请联系管理员!";});ajax.set("userSn",userSn);ajax.start();differentindex1 = layer.tips(html, '#user'+workOrderNo, {tips: [3, '#3595CC'],time: 0,area: 'width:auto;height:auto'});
}/*** 设置对账成功*/
invoice.setDz = function (id) {if (id == "" || id == undefined) {Feng.info("请先选中表格中的某一记录!");return false;}var ajax = new $ax(Feng.ctxPath + "/invoice/setDz", function (data) {Feng.success("对账成功!");invoice.table.refresh();}, function (data) {Feng.error("对账失败!" + data.responseJSON.message + "!");});ajax.set("id",id);ajax.start();
};/*** 设置开票方*/
invoice.go_setKpf = function (id) {if (id == "" || id == undefined) {Feng.info("请先选中表格中的某一记录!");return false;}var index = layer.open({type: 2,title: '设置开票方',area: ['80%', '80%'], //宽高fix: false, //不固定maxmin: true,content: Feng.ctxPath + '/invoice/go_setKpf/' + id});this.layerIndex = index;	
};/*** 上传凭证*/
invoice.go_setPz = function (id) {if (id == "" || id == undefined) {Feng.info("请先选中表格中的某一记录!");return false;}var index = layer.open({type: 2,title: '上传凭证',area: ['80%', '80%'], //宽高fix: false, //不固定maxmin: true,content: Feng.ctxPath + '/invoice/go_setPz/' + id});this.layerIndex = index;
};copyUrl = function(text){text=text.replace("http","https");var oInput = document.createElement('input');oInput.value = text;document.body.appendChild(oInput);oInput.select(); // 选择对象document.execCommand("Copy"); // 执行浏览器复制命令oInput.className = 'oInput';oInput.style.display='none';Feng.info("复制成功!");
}/*** 检查是否选中*/
invoice.check = function () {var selected = $('#' + this.id).bootstrapTable('getSelections');if(selected.length == 0){Feng.info("请先选中表格中的某一记录!");return false;}else{invoice.seItem = selected[0];return true;}
};/*** 跳转到装修风格添加页面*/
invoice.go_addInfo = function () {var index = layer.open({type: 2,title: '添加服务商',area: ['100%', '100%'], //宽高fix: false, //不固定maxmin: true,content: Feng.ctxPath + '/service/go_add'});this.layerIndex = index;
//	window.location.href = Feng.ctxPath + '/service/go_add';
};/*** 工单日志详情页*/
invoice.detailLog = function (id) {var index = layer.open({type: 2,title: '提现订单详情',area: ['100%', '100%'], //宽高fix: false, //不固定maxmin: true,content: Feng.ctxPath + '/invoice/detailLog/' + id});this.layerIndex = index;
//	        window.location.href = Feng.ctxPath + '/service/go_update/' + id;return true;};/*** 查询服务商管理列表*/
invoice.search = function () {var queryData = {};queryData['workOrderNo'] = $("#workOrderNo").val()==undefined ? "":$("#workOrderNo").val();queryData['userInfo'] = $("#userInfo").val()==undefined ? "":$("#userInfo").val();queryData['invoiceInfo'] = $("#invoiceInfo").val()==undefined ? "":$("#invoiceInfo").val();queryData['timeType'] = $("#timeType").val()==undefined ? "":$("#timeType").val();queryData['startTime'] = $("#startTime").val()==undefined ? "":$("#startTime").val();queryData['endTime'] = $("#endTime").val()==undefined ? "":$("#endTime").val();invoice.table.refresh({query: queryData});
};$(function () {var defaultColunms = invoice.initColumn();var table = new BSTable(invoice.id, "/invoice/listPage", defaultColunms);table.setPaginationType("server");invoice.table = table.init();
});/*** 提现审核通过*/
invoice.agree = function(id) {Feng.confirm("是否确认通过?",function(){var ajax = new $ax(Feng.ctxPath + "/invoice/agree/" + id, function (data) {Feng.success("通过成功!");invoice.table.refresh();}, function (data) {Feng.error("通过失败!" + data.responseJSON.message + "!");});ajax.set("id",id);ajax.start();});return true;}/*** 提现审核拒绝*/
invoice.refuse = function(id) {Feng.confirm("是否确认拒绝?",function(){var ajax = new $ax(Feng.ctxPath + "/invoice/refuse/" + id, function (data) {Feng.success("拒绝成功!");invoice.table.refresh();}, function (data) {Feng.error("拒绝失败!" + data.responseJSON.message + "!");});ajax.set("id",id);ajax.start();});return true;}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/418690.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端学习(1864)vue之电商管理系统电商系统之绘制登录表单区域带icon的输入框

修改头像位置 3目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) login.vue <templat…

mysql(2)—— 由笛卡尔积现象分析数据库表的连接

https://www.cnblogs.com/cdf-opensource-007/p/6507678.html

前端学习(1865)vue之电商管理系统电商系统之实现表单的数据绑定

修改头像位置 3目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) login.vue <templat…

Solr数据不同步

Solr配置了集群&#xff0c;本地有253和254&#xff0c;2个独立的Solr服务。同一个页面的图片&#xff0c;刷新2次&#xff0c;图片地址不一样&#xff0c;最后查明&#xff0c;后台数据源Solr1和Solr2的数据不一致。第1步推测&#xff1a;本地缓存&#xff0c;删除浏览器缓存&…

Java中BigDecimal的8种舍入模式

http://www.blogjava.net/wangzc2001/archive/2010/12/17/340988.html

前端学习(1866)vue之电商管理系统电商系统之登录退出实现表单的数据验证

修改头像位置 3目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) login.vue <templat…

HDU 1402 A * B Problem Plus FFT

A * B Problem Plus题目连接&#xff1a; http://acm.hdu.edu.cn/showproblem.php?pid1402 Description Calculate A * B. Input Each line will contain two integers A and B. Process to end of file. Note: the length of each integer will not exceed 50000. Output For…

前端学习(1867)vue之电商管理系统电商系统之登录退出实现表单的重置

修改头像位置 3目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) login.vue <templat…

五种js判断是否为整数类型方式

https://www.cnblogs.com/yueguanguanyun/p/7255962.html

【原】搬家了,请移步

鉴于博客园缺乏教学管理能力&#xff0c;故移步到 www.t2code.com 博客主页&#xff1a;http://www.t2code.com/blog/index.shtml 我的博客&#xff1a; http://www.t2code.com/blog/home.shtml?createUserId3转载于:https://www.cnblogs.com/jerry1979/p/5379859.html

前端学习(1868)vue之电商管理系统电商系统之登录退出实现表单的预先认证

修改头像位置 3目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) login.vue <templat…

Android为TV端助力 post带数据请求方式,传递的数据格式包括json和map

如下&#xff1a; public static String httpPost(String url, String json) { try { URL u new URL(url); HttpURLConnection httpURLConnection (HttpURLConnection) u.openConnection(); httpURLConnection.setConnectTimeout(TIMEOUT); httpURLConnection.setDoInput(tru…

前端学习(1869)vue之电商管理系统电商系统之配置axios发出登录请求

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) login.vue <template><div c…

linux nginx安装

https://blog.csdn.net/qq_42815754/article/details/82980326

前端学习(1870)vue之电商管理系统电商系统之配置message全局弹框组件

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) login.vue <template><div c…

使用贝赛尔路径(UIBezierPath)创建画板

在iOS开发中&#xff0c;创建图形&#xff0c;经常会使用贝塞尔路径&#xff0c;用于描绘一些比较复杂的图形。 使用贝塞尔路径&#xff0c;需要在view中的方法- (void)drawRect:(CGRect)rect中进行描绘。 1 - (void)drawRect:(CGRect)rect{2 UIBezierPath *path [UIBezie…

Java 8 中 Map 骚操作之 merge() 的用法

https://juejin.im/post/5d9b455ae51d45782b0c1bfb

前端学习(1871)vue之电商管理系统电商系统之路由导航守卫控制页面访问权限

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vue Vue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{…

cd命令

当我们看到一个文件夹&#xff0c;想进去瞧一瞧是什么时&#xff0c;cd命令就能满足你的好奇心。 想进去gg里面瞧一瞧&#xff0c;ok。 eg&#xff1a;cd gg 结果如下 好了&#xff0c;进入到了gg里面&#xff0c;我们要看里面的dx我用到了ll命令&#xff0c;这个命令可以显示里…