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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/weixin_39522272/article/details/101377700

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

/**
 * 服务商管理初始化
 */
var invoice = {
    id: "invoiceTable",	//表格id
    seItem: 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;
	
}

猜你喜欢

转载自blog.csdn.net/weixin_39522272/article/details/101377700