LayUI⑹：分步表单

　　在前端的开发中，页面多了让人纠结，也不好组织，在LayUI中有几种解决办法，分步表单就是比较不错的选择，缺点也明显，所有的页面集中在一个页面中，代码量也大。

　　在系统参数维护中，用户提出要一步步选择来维护，这样可以减少操作错误，我使用了LayUI的分步表单来完成。

　　用户的维护操作在一个页面中。

　　代码量有点大了，HTML部分将近180行，JavaScript代码将近500行，为了调试，我还是集中在一个HTML文件中。

　　开始网页界面部分设计得有点复杂，300行，结果因为一个

　　通过分步表单，你可以集成很多的页面在一个页面中，完成比较多的功能。

操作界面：

 网页代码：

    
    分步表单
    
    
    
    
    
    



    


        

            

                

                    

                        

                            

                                
                                    

										
                                    
                                    

										
                                    
                                    

										
                                    
                                    

										
                                    
                                    

										
                                    
                                    

                                        

                                             下一步 
                                        
                                    
                                
                            
							
                            

                                
                                    

										
											

												从列表中选择一个值
											
																				
																				
										
                                    
                                    

                                        

                                            上一步
                                            增加
                                            修改
                                            删除
                                        
                                    
                                
                            
							
                            

									
										

												

													样式类型
													

														
													
												
				
												

													分类名称
													

														
													
												
				
												

													标识名称
													

														
													
												
												

													Word文件
													

														
													
													

														选择Word文件
														
													
		
												
												

													文件后缀
													

														
													
												
																										
												

													排序号
													

														
													
												
												

													说明
													

														
													
												
										
										
										

												

													样式类型
													

														
													
												
				
												

													分类名称
													

														
													
												
												

													标识名称
													

														
													
												
																
												

													具体值
													

													  
													
												
												

													特别字符
													

														
													
												
												
												

													排序号
													

														
													
												
												

													说明
													

														
													
												
										
																																	
										

												上一步
												保存
										
																		
                            
                        
                    
                    

                        
所有用户的输入都基于目前维护的样式数据。
                    
                
            
        
    




	var selectType='Word文件';
	var selectRow;//选择的行
	var OP='';
    layui.use([ 'form', 'step','table'], function () {
        var $ = layui.$;
        var form = layui.form;
        var step = layui.step;
		var table = layui.table;		
		//选择Word文件
		document.getElementById('selectWord').addEventListener('click',function(){
			$("#readFile").trigger("click");			
		});
		document.getElementById('readFile').addEventListener('change',function(){
			if(this.files.length===0){
				console.log('没有选择文件！');
				return;
			}		
			let reader=new FileReader();
			reader.onload=function (){
				// console.log(reader.result);
			}
			// reader.readAsText(this.files[0]);
			// console.log(this.files[0].size);
			// console.log(this.files[0].name);
			// document.getElementById('Dc05').
			sFilename=this.files[0].name.toLowerCase().split('.');
			fileExt=sFilename[1];
			// console.log(fileExt);
			document.getElementById('DcWord4').value=sFilename;
			document.getElementById('DcWord5').value=fileExt;
			// console.log(this.files[0].type);
		})			

		table.render({
			elem: '#currentTableId',
			// url: 'ZTBStyleTableFormStep.php',
			// method:'POST',
			// where:{"OP":"列表","selectType":selectType},	
			toolbar: '#toolbarDemo',
			defaultToolbar: [''],
			height:'523px',
			width:'600px',
			cols: [[
				{type: 'radio', width: 80, title: '选择'},
				{field: 'c01', width: 220, title: '样式类型', hide:true},
				{field: 'c02', width: 200, title: '分类名称'},
				{field: 'c03', width: 140, title: '标识名称'},
				{field: 'c04', width: 160, title: '具体值'},
				{field: 'c05', width: 160, title: '值类型', hide:true},
				{field: 'c06', width: 80, title: '排序号'},
				{field: 'c07', width: 260, title: '说明'}
			]],				
			limits: [10],
			limit: 10,
			page: true,
			even: true,
			skin: 'line',
			done: function (res, curr, count) {
			}
		});			
		
		function generateUpdateSql(strSql,sqlFieldName,sqlFieldType,elementId,srcValue){
				let sTemp;
				sTemp=document.getElementById(elementId).value.trim();
				if(sTemp != srcValue){
						if(strSql==''){
								switch(sqlFieldType){
										case 'STRING':
											strSql=" "+sqlFieldName+"='"+document.getElementById(elementId).value+"'";
											break;
										case 'DATE':
											strSql=" "+sqlFieldName+"='"+document.getElementById(elementId).value+"'";
											break;
										case 'NUMBER':
											strSql=" "+sqlFieldName+"="+document.getElementById(elementId).value;
											break;
										default:
											break;
								}							
						}else{
								switch(sqlFieldType){
										case 'STRING':
											strSql=strSql+", "+sqlFieldName+"='"+document.getElementById(elementId).value+"'";
											break;
										case 'DATE':
											strSql=strSql+", "+sqlFieldName+"='"+document.getElementById(elementId).value+"'";
											break;
										case 'NUMBER':
											strSql=strSql+", "+sqlFieldName+"="+document.getElementById(elementId).value;
											break;
										default:
											break;
								}							
						}
				}
				return strSql;
		}
		
		function checkDuplicateRecord(strTable,strWhere){
				let strFalse='';
				$.ajax({//检查数据库的相同记录是否存在
					url:'ZTBCommon.php',
					data:{
						"OP":"IsExist",
						"strTable":strTable,
						"strWhere":strWhere
						},
					type:'POST',
					datetype:'json',
					async:false,
					success:function (data) {
						if(data=='YES'){ 
							strFalse="该记录在数据库中已经存在！";
						}
					}
				});
				return strFalse;
		}

		function checkElementIsEmptyOrNull(ElementId){
			let sTemp='';
			sTemp=document.getElementById(ElementId).value.trim();						
			if( sTemp.trim()=='' || sTemp==null || sTemp==undefined){
					return '空';
			}else{
				return '';
			}			
		}
		
		function beforeSubmitWord(){
				let strFalse='';
				let sTemp='';
				sTemp=checkElementIsEmptyOrNull('DcWord2');
				if(sTemp=='空'){ strFalse="分类名称不能为空！"; }
				sTemp=checkElementIsEmptyOrNull('DcWord3');
				if(sTemp!=''){ strFalse=strFalse+"标识名称不能为空！"; }
				sTemp=checkElementIsEmptyOrNull('DcWord4');
				if(sTemp!=''){ strFalse=strFalse+"没有上传文件！"; }
				return strFalse;
		}

		function beforeSubmitLongText(){
				let strFalse='';
				let sTemp='';
				sTemp=checkElementIsEmptyOrNull('DcLongText2');
				if(sTemp=='空'){ strFalse="分类名称不能为空！"; }
				sTemp=checkElementIsEmptyOrNull('DcLongText3');
				if(sTemp=='空'){ strFalse="标识名称不能为空！"; }
				if(selectType!='列表'){
						sTemp=checkElementIsEmptyOrNull('DcLongText4');
						if(sTemp=='空'){ strFalse="请输入具体值！"; }
				}
				return strFalse;
		}
	
		function refreshTable(){
			table.render({
				elem: '#currentTableId',
				url: 'ZTBStyleTableFormStep.php',
				method:'POST',
				where:{"OP":"列表","selectType":selectType},	
				toolbar: '#toolbarDemo',
				defaultToolbar: [''],
				height:'523px',
				width:'600px',
				cols: [[
					{type: 'radio', width: 80, title: '选择'},
					{field: 'c01', width: 100, title: '样式类型', hide:true},
					{field: 'c02', width: 200, title: '分类名称'},
					{field: 'c03', width: 160, title: '标识名称'},
					{field: 'c04', width: 160, title: '具体值'},
					{field: 'c05', width: 160, title: '特殊符号', hide:true},
					{field: 'c06', width: 80, title: '排序号'},
					{field: 'c07', width: 120, title: '说明'}
				]],				
				limits: [10],
				limit: 10,
				page: true,
				even: true,
				skin: 'line',
				done: function (res, curr, count) {
						//标识不可操作的行
						for (let i=0;i