layui本页面弹框、表格写法

待我称王封你为后i 2022-05-15 02:06 413阅读 0赞

var src_,departmentDate=[],groupDate=[],terminalStateDate=[],devTypeDate=[],form,laydate,layer,upload,judge=true;
    $(function(){
    	layui.use(["element","form","laydate","layer","upload"],function(){//用了layui表单，必须引用表单插件form，时间选择器同理
    		element=layui.element,form = layui.form,laydate=layui.laydate,layer=layui.layer,upload=layui.upload;
    		//右边内容容器添加
    		ajax({
    			url:path+"/energyMonitor/Equipment/getInfo",
    			func:function(data){
    				departmentDate=data.department;
    				groupDate=data.Group;
    				devTypeDate=data.dev_type;  
    				terminalStateDate=data.TerminalState;
    			}
    		})
    		form.render();
    		//右边内容容器添加
    		getData();
    	});
    });
    function getData(){
    	var form_=form,laydate_=laydate,layer_=layer,upload_=upload;
    	var elem={
    		"equipmentName":$("#sbmc").val()
    	};
    	fillTable(form_,laydate_,layer_,upload_,elem);
    }
    function fillTable(form,laydate,layer,upload,data){
    	$("#table1").datagrid({
    		url:path+"/energyMonitor/getAllEquipment",
    	    columns:[[ 
    			{field : "id",align : "center",align : "center",title : "id",checkbox:true},
    		    {field : "terminal_ormeterid",align : "center",width:10,title : "资产编码"},
    			{field : "equipment_name",align:"center",width:20,title : "资产名称"}, 
    			{field : "terminal_no",align : "center",title : "资产标识"},
    			{field:"department_id",align : "center",title:"所属部门",width:10,
    	    		formatter:function(value,rowData,index){
    	    			for(var i=0;i<departmentDate.length;i++){
    	    				if(value == departmentDate[i].id){
    	    					return departmentDate[i].text;
    	    				}
    	    			}
    	    		} 
    	    	},
    	    	{field:"group_id",title:"所属组",align : "center",width:10,
    	    		formatter:function(value,rowData,index){
    	    			for(var i=0;i<groupDate.length;i++){
    	    				if(value == groupDate[i].field_id){
    	    					return groupDate[i].field_name;
    	    				}
    	    			}
    	    		}	
    	    	},
    	    	{hidden:true,field:"mp_id",title:"计量点",width:10,},
    	    	{field:"terminal_state",align : "center",title:"资产状态",width:10,
    	    		formatter:function(value,rowData,index){
    	    			for(var i=0;i<terminalStateDate.length;i++){
    	    				if(value == terminalStateDate[i].id){
    	    					return terminalStateDate[i].text;
    	    				}
    	    			}
    	    		}	
    	    	},
    	    	{field:"dev_type",align : "center",title:"资产类型",width:10,
    	    		formatter:function(value,rowData,index){
    	    			for(var i=0;i<devTypeDate.length;i++){
    	    				if(value == devTypeDate[i].id){
    	    					return devTypeDate[i].text;
    	    				}
    	    			}
    	    		}
    	    	},
    			{field : "operation_date",align : "center",width:20,title : "投运日期"}, 
    			{field : "fade_date",align : "center",width:20,title : "报停日期"}, 
    			{field : "create_time",align : "center",width:20,title : "归档时间"}, 
    			{field : "working_hours",align : "center",title : "预计使用时长"},
    			{field : "asset_no",align : "center",width:20,title : "资产编号"},
    			{field : "specif_type",align : "center",width:10,title : "型号规格"}, 
    			{field : "ter_manufacturer",switchable : false,width:10,title : "生产厂商"},
    			{field : "product_date",align : "center",title : "生产时间"}, 
    			{field : "purch_price",align : "center",title : "购买价",widht:10}, 
    			{field : "acc_terminal",align : "center",title : "附属资产",width:10}, 
    			{field : "ter_addr",align : "center",title : "安装地址",width:10},
    			{field : "install_time",align : "center",title : "安装时间"},
    			{hidden:true,field : "power_level",align : "center",title : "权重",width:10}, 
    			{hidden:true,field : "warn_level_big",align : "center",width:10,title : "预警等级（强）"}, 
    			{hidden:true,field : "warn_level_medium",align : "center",title : "预警等级（中）",width:10}, 
    			{hidden:true,field : "warn_level_small",align : "center",width:10,title : "预警等级（弱）"}, 
    		]],
    	    fitColumns:true,
    	    autoRowHeight:false,
    	    striped:true,
    	    singleSelect:true,//是否只能选一行
    	    pagination:true,//是否需要分页
    	    pageSize:20,//每页最大数
    	    pageList:[20,50,100,200],//数据量选择
    	    checkOnSelect:false,
    	    selectOnCheck:false,
    	    queryParams:data,//请求参数，结合url使用，与data无效
    	    rownumbers:true,
    	    scrollbarSize:12,//竖直滚动条宽度统一为12，水平高度为12
    	    onLoadSuccess:function(data){//数据加载成功时触发
    	    	scroll({id:".datagrid-view2 .datagrid-body"});
    	    	resizeScroll({id:".datagrid-view2 .datagrid-body"});
    	    	btn_(form,laydate,layer,upload,data)
    	    }
    	});
    }
    
    function btn_(form,laydate,layer,upload,elem){
    	var day2 = new Date(),min;
        day2.setTime(day2.getTime());
        var s2 = day2.getFullYear()+"-" + (day2.getMonth()+1) + "-" + day2.getDate();
        $("#add").unbind("click");
    	$("#add").on("click",function(){
    		layerr({
    			title:"新增资产信息",
                content:$('#addwindow'),
                area:["700px","690px"],
                /*btn:["保存","取消"],*/
                offset:($(window).height()*1-690)*0.5-$("#topLuck",parent.document).height()/2+$("#bottomLuck",parent.document).height()/2+"px",//50是等于顶部菜单栏的高度/2
                success:function(){
                	$("#terminal_ormeterid").removeAttr("disabled");
                	$("#terminal_ormeterid").css("background","#fff");
                	var start=laydate.render({
                		elem:"#operation_date",
                		max:s2,
                		done:function(value,dates,endDate){
                			end.config.min={
            					year:dates.year,
            		            month:dates.month-1,
            		            date:dates.date
                			}
                		}
                	});
                	var end=laydate.render({
                		elem:"#fade_date",
                		max:s2,
                		done:function(value,dates,endDate){
                			start.config.max={
            					year:dates.year,
            		            month:dates.month-1,
            		            date:dates.date
                			}
                		}
                	});
                	laydate.render({elem:"#product_date",max:s2});
                	laydate.render({elem:"#install_time",max:s2});
                	$("#terminal_state").empty();
                	for(var i=0;i<terminalStateDate.length;i++){
                        var option=$("<option value='"+terminalStateDate[i].id+"'>"+terminalStateDate[i].text+"</option>");
                        $("#terminal_state").append(option);
                        form.render("select");
                    }
                	$("#dev_type").empty();
                	for(var i=0;i<devTypeDate.length;i++){
                        var option=$("<option value='"+devTypeDate[i].id+"'>"+devTypeDate[i].text+"</option>");
                        $("#dev_type").append(option);
                        form.render("select");
                    }
                	$("#group_id").empty();
                	for(var i=0;i<groupDate.length;i++){
                        var option=$("<option value='"+groupDate[i].field_id+"'>"+groupDate[i].field_name+"</option>");
                        $("#group_id").append(option);
                        form.render("select");
                    }
                	/*for(var i=0;i<terminalStateDate.length;i++){
                        var option=$("<option value='"+terminalStateDate[i].id+"'>"+terminalStateDate[i].text+"</option>");
                        $("#mp_id").append(option);
                        form.render("select");
                    }*/
                	$("#department_id").empty();
                	for(var i=0;i<departmentDate.length;i++){
                        var option=$("<option value='"+departmentDate[i].id+"'>"+departmentDate[i].text+"</option>");
                        $("#department_id").append(option);
                        form.render("select");
                    }
                	if(judge){
                		judge=false;
                	}else{
                		uploadoption.config.auto=false;
                    	upload.render(uploadoption);
                	}
                	var uploadoption=upload.render({//图片选择
                	    elem: '#file',
                	    auto:false,
                	    choose: function(obj){//预读本地文件示例，不支持ie8
                	    	obj.preview(function(index, file, result){
                	    		$('#uploadimg').attr('src', result); //图片链接（base64）
                	    		src_=result;
                	    	});
                	    }
                	});
                	$("#submit").unbind("click");
    				$("#submit").on("click",function(){
                    	var elem=$("#addwindow").serializeObject();
                    	elem["url"]=src_;
                    	if(elem.terminal_ormeterid == "" || elem.equipment_name == "" || elem.working_hours == ""){
                    		return;
                    	}
                    	ajax({
                    		url:path+"/energyMonitor/Equipment/save",
                    		data:elem,
                    		func:function(data){
                    			msg({
                    				layer:layer,
                    				title:data.msg
                    			});
                    			if(data.success){
                    				$("#table1").datagrid("reload");//重新加载数据但留在当前页
                    			}
                    		}
                    	})
                    	$('#uploadimg').removeAttr('src');
                        layer.closeAll();//关闭弹窗
                    	$("#topLuck",parent.document).hide();
                    	$("#bottomLuck",parent.document).hide();
                    	return false;
                    });
    				$('#cancel').unbind();
                	$('#cancel').click(function(){//取消
                		$('#uploadimg').removeAttr('src'); 
                		$("#reset").click();
                		$("#topLuck",parent.document).hide();
                		$("#bottomLuck",parent.document).hide();
                		layer.closeAll();//关闭弹窗
                	});
                }
    		})
    	});
    	$("#edit").unbind("click");
    	$("#edit").on("click",function(){
    		if(!$("#table1").datagrid("getSelected")){
    			msg({
    				layer:layer,
    				title:"请选择要编辑的信息"
    			});
    			return;
    		}else{
    			var tbSelect=$("#table1").datagrid("getSelected");
    			layerr({
    				title:"编辑资产信息",
    				content:$('#addwindow'),
                    area:["700px","690px"],
    //                btn:["保存","取消"],
                    offset:($(window).height()*1-690)*0.5-$("#topLuck",parent.document).height()/2+$("#bottomLuck",parent.document).height()/2+"px",
                    success:function(){
                    	$("#terminal_ormeterid").attr("disabled","");
                    	$("#terminal_ormeterid").css("background","#ccc");
                    	$("#terminal_state").empty();
                    	for(var i=0;i<terminalStateDate.length;i++){
                            var option=$("<option value='"+terminalStateDate[i].id+"'>"+terminalStateDate[i].text+"</option>");
                            $("#terminal_state").append(option);
                            form.render("select");
                        }
                    	$("#dev_type").empty();
                    	for(var i=0;i<devTypeDate.length;i++){
                            var option=$("<option value='"+devTypeDate[i].id+"'>"+devTypeDate[i].text+"</option>");
                            $("#dev_type").append(option);
                            form.render("select");
                        }
                    	$("#group_id").empty();
                    	for(var i=0;i<groupDate.length;i++){
                            var option=$("<option value='"+groupDate[i].field_id+"'>"+groupDate[i].field_name+"</option>");
                            $("#group_id").append(option);
                            form.render("select");
                        }
                    	/*for(var i=0;i<terminalStateDate.length;i++){
                            var option=$("<option value='"+terminalStateDate[i].id+"'>"+terminalStateDate[i].text+"</option>");
                            $("#mp_id").append(option);
                            form.render("select");
                        }*/
                    	$("#department_id").empty();
                    	for(var i=0;i<departmentDate.length;i++){
                            var option=$("<option value='"+departmentDate[i].id+"'>"+departmentDate[i].text+"</option>");
                            $("#department_id").append(option);
                            form.render("select");
                        }
                    	var start=laydate.render({
                    		elem:"#operation_date",
                    		max:s2,
                    		done:function(value,dates,endDate){
                    			end.config.min={
                					year:dates.year,
                		            month:dates.month-1,
                		            date:dates.date
                    			}
                    		}
                    	});
                    	var end=laydate.render({
                    		elem:"#fade_date",
                    		max:s2,
                    		done:function(value,dates,endDate){
                    			start.config.max={
                					year:dates.year,
                		            month:dates.month-1,
                		            date:dates.date
                    			}
                    		}
                    	});
                    	laydate.render({elem:"#product_date",max:s2});
                    	laydate.render({elem:"#install_time",max:s2});
                    	$("input[name='terminal_ormeterid']").val(tbSelect.terminal_ormeterid);
        				$("#equipment_name").val(tbSelect.equipment_name);
        				$("#terminal_state").val(tbSelect.terminal_state);
        				$("#dev_type").val(tbSelect.dev_type);
        				$("input[name='operation_date']").val(tbSelect.operation_date);
        				$("input[name='fade_date']").val(tbSelect.fade_date);
        				$("input[name='asset_no']").val(tbSelect.asset_no);
        				$("input[name='specif_type']").val(tbSelect.specif_type);
        				$("#group_id").val(tbSelect.group_id);
        				$("#mp_id").val(tbSelect.mp_id);
        				$("input[name='terminal_no']").val(tbSelect.terminal_no);
        				$("#department_id").val(tbSelect.department_id);
        				$("#working_hours").val(tbSelect.working_hours);
        				$("input[name='product_date']").val(tbSelect.product_date);
        				$("#purch_price").val(tbSelect.purch_price);
        				$("input[name='acc_terminal']").val(tbSelect.acc_terminal);
        				$("input[name='install_time']").val(tbSelect.install_time);
        				$("input[name='ter_addr']").val(tbSelect.ter_addr);
        				$("input[name='ter_manufacturer']").val(tbSelect.ter_manufacturer);
        				$('#uploadimg').attr('src',tbSelect.url); //图片链接（base64）
        				$("#submit").unbind("click");
        				$("#submit").on("click",function(){//保存
                        	var edit1=$("#addwindow").serializeObject();
                        	edit1["id"]=tbSelect.id;
                        	edit1["url"]=tbSelect.url;
                        	if(edit1.terminal_ormeterid == "" && edit1.equipment_name == "" && edit1.working_hours == ""){
                        		return;
                        	}
                        	ajax({
                        		url:path+"/energyMonitor/Equipment/edit",
                        		data:edit1,
                        		func:function(data){
                        			msg({
                        				layer:layer,
                        				title:data.msg
                        			});
                        			if(data.success){
                        				$("#table1").datagrid("reload");//重新加载数据但留在当前页
                        			}
                        		}
                        	})
                            layer.closeAll();//关闭弹窗
                        	$("#topLuck",parent.document).hide();
                        	$("#bottomLuck",parent.document).hide();
                        	$('#uploadimg').removeAttr('src'); 
                        	return false;
                        });
        				$('#cancel').unbind();
        				$('#cancel').click(function(){//取消
                    		$("#reset").click();
                    		$("#topLuck",parent.document).hide();
                    		$("#bottomLuck",parent.document).hide();
                    		$('#uploadimg').removeAttr('src'); 
                    		layer.closeAll();//关闭弹窗
                    	});
                    }
    			})
    		}
    	});
    	$("#remove").unbind("click");
    	$("#remove").on("click",function(){
    		if($("#table1").datagrid("getChecked").length==0){
    			msg({
    				layer:layer,
    				title:"请选择要删除的信息"
    			});
    			return;
    		}else{
    			var remove1={"ids[]":[]}
    			var len=$("#table1").datagrid("getChecked").length;
    			for(var i=0;i<len;i++){
    				remove1["ids[]"].push($("#table1").datagrid("getChecked")[i].id);
    			}
    			$("#snum").text(len);
    			layerr({
    				title:"删除",
                    content:$("#removewindow"),
                    area:["370px","200px"],
                    offset:($(window).height()*1-200)*0.5-$("#topLuck",parent.document).height()/2+$("#bottomLuck",parent.document).height()/2+"px",
                    success:function(){
                    	$("#submit1").unbind();
        				$("#submit1").on("click",function(){//保存
        					ajax({
                        		url:path+"/energyMonitor/Equipment/delete",
                        		data:remove1,
                        		func:function(data){
                        			msg({
                        				layer:layer,
                        				title:data.msg
                        			});
                        			if(data.success){
                        				$("#table1").datagrid("reload",data.grid);//重新加载数据但留在当前页
                        			}
                        		}
                        	})
                            layer.closeAll();//关闭弹窗
                        	$("#topLuck",parent.document).hide();
                        	$("#bottomLuck",parent.document).hide();
                        	return false;
                        });
        				$('#cancel1').unbind();
                    	$('#cancel1').click(function(){//取消
                    		$("#topLuck",parent.document).hide();
                    		$("#bottomLuck",parent.document).hide();
                    		layer.closeAll();//关闭弹窗
                    	});
                    }
    			})
    		}
    	});
    }
    function layerr(obj){//弹出框
        layer.open({
            type:1,
            title:obj.title,
            content:obj.content,
            area:obj.area,
            shade:0.6,
            yes:obj.yes,
            offset:obj.offset,
            success:function(){
            	$("#reset").click();
            	obj.success();
            	$("#topLuck",parent.document).show();
            	$("#bottomLuck",parent.document).show();
            },
            cancel:function(){
    			$("#topLuck",parent.document).hide();//遮罩层要的
    			$("#bottomLuck",parent.document).hide();//遮罩层要的
    			$('#uploadimg').removeAttr('src'); 
    			$("#reset").click();
    		},
        })
    }