二级联动加动态input输入框实现思路

java 同时被 2 个专栏收录
12 篇文章 0 订阅
2 篇文章 0 订阅

二级联动加动态input输入框实现思路

需求:通过配置使数据库存储过程可以通过前台页面调用

1:二级联动下拉选(任务分类—任务代码);

2: 选择不同的任务带出相应存储过程的录入参数(input);


1. 数据结构

  1. 数据库存储过程配置表主要字段:
任务分类代码分类名称任务代码任务名称存储过程存过入参存过出参执行状态有效标志
01基础数据同步0101同步平台机构GPINSERT.INSERTINTO[{‘index’:1,‘name’:‘日期’,‘type’:‘date’,‘value’:’?’}][{index:‘2’,type:‘str’,success:‘0’},{index:’’,type:‘str’,msg:’’}]01
  1. 字段说明
    • 存储过程: 要执行的存储过程名
    • 存过入参: 格式jsonArray [{index:参数位置,type:参数类型,name:‘页面显示名称’,value:’参数值‘}] 注:参数类型(str-字符,date-日期) ,参数值(可为具体值或’?’,?代表需要去页面传入)
    • 存过出参:格式jsonArray [{index:参数位置,type:参数类型,success:成功标志,msg:返回错误信息}]
      参数类型暂只支持str,一个参数位置不能既有success又有msg
    • 执行状态:状态校验,防止存过为执行完毕再次提交任务。

2. 程序设计

  1. Action 层设计思路
  • 查询配置好的是存过过程数据

  • 将分类代码和分类名称已Map的形式存入request作为第一个下拉选资源。

  • 将任务分类代码和任务代码相关数据关联以json字符串格式传入request,作为第二个下拉选资源,如:

    {‘01’:[{‘taskName’:‘准备金挂账(挂本月)’,‘taskCode’:‘0102’}],‘02’:[{‘taskName’:‘手续费挂账’,‘taskCode’:‘0201’},{‘taskName’:‘手续费结转挂账’,‘taskCode’:‘0202’},{‘taskName’:‘手续费认证挂账’,‘taskCode’:‘0203’},{‘taskName’:‘赔款挂账’,‘taskCode’:‘0204’},{‘taskName’:‘不含税保费挂账’,‘taskCode’:‘0205’},{‘taskName’:‘车船税挂账’,‘taskCode’:‘0206’},{‘taskName’:‘保费增值税挂账’,‘taskCode’:‘0207’},{‘taskName’:‘保费结转挂账’,‘taskCode’:‘0208’},{‘taskName’:‘再保挂账’,‘taskCode’:‘0209’}],‘03’:[{‘taskName’:‘保险卡自动保费销数’,‘taskCode’:‘0301’},{‘taskName’:‘手续费自动实付’,‘taskCode’:‘0302’},{‘taskName’:‘见费失败自动实收’,‘taskCode’:‘0303’},{‘taskName’:‘赔款自动实付’,‘taskCode’:‘0304’},{‘taskName’:‘保费自动销数’,‘taskCode’:‘0305’},{‘taskName’:‘保单自动实收’,‘taskCode’:‘0306’}],‘04’:[{‘taskName’:‘手续费资金状态回写’,‘taskCode’:‘0401’},{‘taskName’:‘回写赔款资金支付状态’,‘taskCode’:‘0402’},{‘taskName’:‘见费失败资金回写状态’,‘taskCode’:‘0403’},{‘taskName’:‘保费退款资金状态回写’,‘taskCode’:‘0404’},{‘taskName’:‘赔款支付自动送资金’,‘taskCode’:‘0405’},{‘taskName’:‘保费集中支付送资金’,‘taskCode’:‘0406’},{‘taskName’:‘保费送资金’,‘taskCode’:‘0407’}],‘05’:[{‘taskName’:‘同步资金账户’,‘taskCode’:‘0501’},{‘taskName’:‘险种同步’,‘taskCode’:‘0502’},{‘taskName’:‘同步总账汇率’,‘taskCode’:‘0503’},{‘taskName’:‘同步平台机构’,‘taskCode’:‘0504’}],‘06’:[{‘taskName’:‘调用批改存储过程的定时任务’,‘taskCode’:‘0601’},{‘taskName’:‘调用批改存储过程的定时任务’,‘taskCode’:‘0602’},{‘taskName’:‘调用承保存储过程的定时任务’,‘taskCode’:‘0603’},{‘taskName’:‘调用承保存储过程的定时任务’,‘taskCode’:‘0604’}],‘99’:[{‘taskName’:‘微客手续费自动支付’,‘taskCode’:‘9901’},{‘taskName’:‘关联交易信息提取’,‘taskCode’:‘9902’},{‘taskName’:‘收付凭证自动送财务’,‘taskCode’:‘9903’},{‘taskName’:‘见费出单回写保单信息’,‘taskCode’:‘9904’}]}

  • 将任务代码和参数数据关联以json字符串格式传入request,作为动态input资源,如:

    {‘0102’:[{‘index’:1,‘name’:‘凭证类型’,‘type’:‘str’,‘value’:‘41’},{‘index’:2,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’}],‘0201’:[{‘index’:1,‘name’:‘凭证类型’,‘type’:‘str’,‘value’:‘06’},{‘index’:2,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’}],‘0203’:[{‘index’:1,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’}],‘0204’:[{‘index’:1,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’}],‘0205’:[{‘index’:1,‘name’:‘凭证类型’,‘type’:‘str’,‘value’:‘01’},{‘index’:2,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’}],‘0206’:[{‘index’:1,‘name’:‘凭证类型’,‘type’:‘str’,‘value’:‘01’},{‘index’:2,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’}],‘0207’:[{‘index’:1,‘name’:‘凭证类型’,‘type’:‘str’,‘value’:‘01’},{‘index’:2,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’}],‘0208’:[{‘index’:1,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’}],‘0209’:[{‘index’:1,‘name’:‘凭证类型’,‘type’:‘str’,‘value’:‘04’},{‘index’:2,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’}],‘0301’:[{‘index’:1,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’},{‘index’:2,‘name’:‘工号’,‘type’:‘str’,‘value’:‘0100000001’}],‘0302’:[{‘index’:1,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’},{‘index’:2,‘name’:‘工号’,‘type’:‘str’,‘value’:‘0100000001’}],‘0303’:[{‘index’:1,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’},{‘index’:2,‘name’:‘工号’,‘type’:‘str’,‘value’:‘0100000001’}],‘0304’:[{‘index’:1,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’},{‘index’:2,‘name’:‘工号’,‘type’:‘str’,‘value’:‘0100000001’}],‘0305’:[{‘index’:1,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’},{‘index’:2,‘name’:‘工号’,‘type’:‘str’,‘value’:‘0100000001’}],‘0306’:[{‘index’:1,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’},{‘index’:2,‘name’:‘工号’,‘type’:‘str’,‘value’:‘0100000001’}],‘0503’:[{‘index’:1,‘name’:‘日期’,‘type’:‘date’,‘value’:’?’}],‘9903’:[{‘index’:1,‘name’:‘日期’,‘type’:‘date’,‘value’:’?’}],‘9904’:[{‘index’:1,‘name’:‘日期’,‘type’:‘date’,‘value’:’?’}]}

  1. jsp 页面相关方法设计
    1. 任务分类代码select 增加值改变事件,方法传入分类代码,通过分类代码解析Action层传入的 任务分类代码—任务代码资源json数据,动态生成任务代码下拉选
    2. 任务代码下拉选增加值改变事件,放入传入任务代码,通过分类代码解析Action层传入的任务代码—参数资源json数据,动态生成任务所需传入的input录入框。
    3. 执行方法,单击执行函数将相关参数拼接为 参数json资源和任务代码一块传入后台。

3 程序源码及效果图

  1. 效果图
    程序效果图

  2. 程序

    1. 自动任务处理 action

      public void prepareAutoImplement(HttpServletRequest request,
      			HttpServletResponse response) throws Exception {
      		GpJobTasksDto dto = new GpJobTasksDto();
      		dto.setValidind("1");
      		dto.setObject_OrderBy(" TASKCODE ");
      		List<GpJobTasksDto> gpJobTasksDtoList = ServiceManager.payment.getGpPaymentSystemService().findGpJobTasksDto(dto);
      		Map<String,String> classificationMap = new TreeMap<String,String>();
      		StringBuffer jsonData = new StringBuffer("{");
      		StringBuffer paramentData = new StringBuffer("{");
      		GpJobTasksDto gpJobTasksDto = null;
      		StringBuffer dataStr = null;
      		Map<String, StringBuffer> dataMap =new TreeMap<String,StringBuffer>();
      		for (int i = 0; i < gpJobTasksDtoList.size(); i++) {
      			gpJobTasksDto =  gpJobTasksDtoList.get(i);
      			String key = gpJobTasksDto.getClassificationCode();
      			if(!classificationMap.containsKey(key))
      				classificationMap.put(gpJobTasksDto.getClassificationCode(), gpJobTasksDto.getClassificationName());
      			String parament = gpJobTasksDto.getIn_parameter();
      			
      			try{
      				if(parament!=null&&!"".equals(parament.trim())){
      					JSONArray jsonStr= new JSONArray(parament);
      					if(i>0) paramentData.append(",");
      					paramentData.append("'"+gpJobTasksDto.getTaskCode()+"':"+parament); 
      				} 
      	    	}catch (Exception e) {
      	    		System.out.println(parament+"参数不合法");
      	    		continue; 
      	    	}
      			
      			if(dataMap.containsKey(key)){
      				dataStr = dataMap.get(key);
      				dataStr.append(",{'taskName':'"+gpJobTasksDto.getTaskName()+"',"+"'taskCode':'"+gpJobTasksDto.getTaskCode()+"'}");
      			}else {
      				dataStr = new StringBuffer();
      				dataStr.append("{'taskName':'"+gpJobTasksDto.getTaskName()+"',"+"'taskCode':'"+gpJobTasksDto.getTaskCode()+"'}");
      				dataMap.put(key, dataStr);
      			}  
      		}
      		int i = 0;
      		for (String key : dataMap.keySet()) {
      			if(i++>0) jsonData.append(",");
      			jsonData.append("'"+key+"':["+dataMap.get(key)+"]" ); 
      		}
      		jsonData.append("}");
      		paramentData.append("}");	
      		request.setAttribute("classificationMap", classificationMap);
      		request.setAttribute("jsonData", jsonData); 
      		request.setAttribute("paramentData", paramentData); 
      
      }
      
    2. jsp 页面

      <html>
      <head>
      <jsp:include page="/common/StaticJavascript.jsp" />
       <script type="text/javascript" src="/common/js/json2.js"></script>
       <!-- <script type="text/javascript" src="/common/js/jquery.js"></script> -->
      <link href="/common/css/Standard.css" rel="stylesheet" type="text/css">
      </head>
      <body onLoad="initPage();">
      	<html:form
      		action="/payment/processPaymentSystem.do?actionType=autoImplementDeal">
      		<table class="common" cellpadding="1" cellspacing="1" align="center">
      			<thead>
      			<tr class="top">
      				<td colspan="4"><bean:message key="prompt.title.AutoTaskDeal" /></td>
      			</tr>
      			</thead>
      			<tbody>
      			<tr>
      				<td class="left">
      					<bean:message key="prompt.tasktype" />
      				</td>
      				<td class="right">
      				    <select name="gpJobTasksDtoClassificationCode" class=common style='width:80%' onchange="select1(this)">
      					    <option>---</option>
      					    <logic:iterate id="map1" name="classificationMap"> 
      							<option value="<bean:write name="map1" property="key"/>">
      								<bean:write name="map1" property="key"/>-<bean:write name="map1" property="value"/>
      							</option>
      						</logic:iterate> 
      					</select> 
      				</td>
      				<td class="left"> 任务代码 </td>
      				<td class="right">
      					<input type="hidden" name="paramentData" value=" ">
      					<select id="taskCode" name="gpJobTasksDtoTaskCode" class=common style='width:80%' onchange="paraments(this)">
      						<option>---</option>
      					</select> 
      				</td>
      			</tr>
      			</tbody>
      			<tfoot id='tfoot' ></tfoot>
      		</table>
      		<table border="0" cellpadding="5" cellspacing="0" class="common">
      			<tr align="center">
      				<td class="white"><input name="buttonQuery" id="confirmForm_a" type="button" onClick="confirmForm();"
      					class="button" 
      					value="<bean:message key="button.deal"/>" accesskey="q">
      				</td>
      				<td class="white"><input type="reset" class="button" onClick="resets()"
      					value="<bean:message key="button.reset"/>" accesskey="r"></td>
      			</tr>
      		</table>
      	</html:form>
      	<app:codeInput />
      </body>
      <script language="javascript">
      	var jsonData = <%= request.getAttribute("jsonData")%>;
      	var paramentData = <%= request.getAttribute("paramentData")%>;
      	var inputId = new Array();
      	function select1(val) {
      		var tfoot = document.getElementById("tfoot");
      	    for(var i = tfoot.childNodes.length - 1; i >= 0 ;i--) {
      			tfoot.removeChild(tfoot.childNodes[i]);
      		}
      		var select=document.getElementById("taskCode");
      		select.length=1;
      		if(val.value=="") return false;
      		var classType = jsonData[val.value];
       		
       		for(var i=0;i<classType.length;i++){
      			var codeData = classType[i]; 
      			//console.log(codeData)
                  var option=document.createElement("option");
                  option.setAttribute("value",codeData['taskCode']);
                  option.appendChild(document.createTextNode(codeData['taskCode']+"-"+codeData['taskName']));
                  select.appendChild(option);
      		}
      	}
      	
      	function paraments(val){
      	    inputId.length=0;
      		var paraments = paramentData[val.value];
      		var tfoot = document.getElementById("tfoot");
      	    for(var i = tfoot.childNodes.length - 1; i >= 0 ;i--) {
      			tfoot.removeChild(tfoot.childNodes[i]);
      		}
      		
      		if (typeof paraments === "undefined") return false;
      		var par = 0;
      		var ntr ;
      		for(var i=0;i<paraments.length;i++ ){
      			var parament = paraments[i];
      			var index = parament['index'];
      			var name = parament['name'];
      			var type = parament['type'];
      			var value = parament['value'];
      			if(value=="?"){  par++;
      				 if(par%2==1) ntr =  document.createElement("tr");
      				 var typeDate = "";
      				 if(type=="date"|| name.search("日期")>-1 ) typeDate = "οnchange=checkFullDate(this); οnfοcus=calendar();";
      				 var tdl = document.createElement("td");
      				 tdl.className ='left';
      				 tdl.innerHTML=name;
      				 var tdr = document.createElement("td");
      				 tdr.className ='right';
      				 tdr.innerHTML= "<input type='text' id='"+ index + "' class='common' style='width:80%' " + typeDate + ">" ;
      				 ntr.appendChild(tdl); ntr.appendChild(tdr);
      				 if(par%2==0) tfoot.appendChild(ntr);
      				 //添加id到inputId
      				 inputId[par-1]=index;
      			}
      		}
      		if(par%2==1){
      		   var tdl = document.createElement("td");
      		   tdl.className ='left';
      		   var tdr = document.createElement("td");
      		   tdr.className ='right';
      		   ntr.appendChild(tdl); ntr.appendChild(tdr);
      		}
      		//console.log(html)
      		tfoot.appendChild(ntr);
      	}
      	
      	function resets(){
      	 	inputId.length=0;
      		var tfoot = document.getElementById("tfoot");
      	    for(var i = tfoot.childNodes.length - 1; i >= 0 ;i--) {
      			tfoot.removeChild(tfoot.childNodes[i]);
      		}
      	}
      	
      	function confirmForm() {
      		var gpJobTasksDtoTaskCode = fm.gpJobTasksDtoTaskCode.value;
      		var gpJobTasksDtoClassificationCode = fm.gpJobTasksDtoClassificationCode.value;
      		if(gpJobTasksDtoTaskCode==""||gpJobTasksDtoClassificationCode==""){
      			alert("请选择任务类型和任务代码");return false;
      		}
      	    var paraments = "";
      		for(var i=0;i<inputId.length;i++){
      			var id= inputId[i];
      			paraments = paramentData[gpJobTasksDtoTaskCode];
      			var input = document.getElementById(id);
      			if(input.value==""){ alert("录入信息不全,请检查!"); return false;}
      			for(var j=0;j<paraments.length;j++ ){
      				var parament = paraments[j];
      				var index = parament['index'];
      				if(id==index){
      					parament['value']=input.value;
      				}
      			}
      		}
      		//console.log( JSON.stringify(paraments));
      		if(inputId.length>0){ 
      			fm.paramentData.value = JSON.stringify(paraments);
      		}else {
      			fm.paramentData.value = paraments;
      		}
      		
      		document.getElementById("confirmForm_a").disabled=true;
      		fm.submit();
      	}
      </script>
      </html>
      
    3. 任务执行主要代码

       public void autoImplementDeal(GpJobTasksDto gpJobTasksDto)throws Exception {
         		 
        	String inParamentJsonArray = gpJobTasksDto.getParamentJson();
           String outParamentJsonArray = gpJobTasksDto.getOut_parameter();
           String procedure = gpJobTasksDto.getDetail();
           StringBuffer callTheProcedure = new StringBuffer();
           callTheProcedure.append(procedure); 
       
           Map<String, String[]> parameterMap = null;
           if((inParamentJsonArray!=null&&!"".equals(inParamentJsonArray))||(outParamentJsonArray!=null&&!"".equals(outParamentJsonArray)) ){
               parameterMap = this.parameterMap(inParamentJsonArray,outParamentJsonArray);
           } 
           int parameterMapSize = 0; 
           if(parameterMap != null) parameterMapSize= parameterMap.size();
       
           for (int i = 1; i <= parameterMapSize; i++) {
               if(parameterMapSize==1){
                   callTheProcedure.append("(?)");
               }else if(i==1){ 
                   callTheProcedure.append("(?");
               }else if(i>1&&i<parameterMap.size()){
                   callTheProcedure.append(",?");
               }else if(i==parameterMap.size()){
                   callTheProcedure.append(",?)");
               }
           }
       
           //执行存过
           JdbcTemplate jdbcTemplate = this.getJdbcTemplate();
           CallableStatement proc = null;
           Connection conn = null;
           try {
               String[] out_success = new String[]{"",""};
               String[] out_msg = new String[]{"",""};
               conn = jdbcTemplate.getDataSource().getConnection();	        
               conn.setAutoCommit(false);
               proc = conn.prepareCall("{call "+callTheProcedure.toString()+"}"); // 调用存储过程 
       
               for (int i = 1; i <= parameterMapSize; i++) {
                   String[] value = parameterMap.get(String.valueOf(i));
                   if("in".equals(value[0])){
                       if("str".equals(value[1])){
                           proc.setString(i, value[2]);
                       }else if("date".equals(value[1])) {
                           proc.setDate(i, Date.valueOf(value[2]));
                       }	
                   }
                   if("out".equals(value[0])){
                       proc.registerOutParameter(i,Types.VARCHAR);
                       if("msg".equals(value[1])){
                           out_msg[0] = String.valueOf(i); 
                           out_msg[1] = value[2];
                       }
                       if("success".equals(value[1])){
                           out_success[0] = String.valueOf(i); 
                           out_success[1] = value[2];
                       }
                   }	
               }
               proc.execute(); //执行
               if(!"".equals(out_success[0])){
                   out_success[0] = proc.getString(Integer.parseInt(out_success[0]));
               }
               if(!"".equals(out_msg[0])){
                   out_msg[1] = proc.getString(Integer.parseInt(out_msg[0]));
               }
               if (!out_success[0].equals(out_success[1])){
                   conn.rollback();
                   ServiceManager.payment.getGpPOAFindService().throwException(out_msg[1]);
               }
               else{
                   conn.commit();
               }
           }
           catch (Exception e)
           {
               if (conn != null)
               {
                   conn.rollback();
               }
               throw e;
           }
           finally{
               if (proc != null){
                   try{
                       proc.close();
                   }
                   catch (Exception e){
                       logger.error("GpPaymentMainDaoHibernateImpl.executePaymentVerify Close proc error:" + e);
                   }
                   proc = null;
               }
               if (conn != null){
                   try{
                       conn.close();
                   }
                   catch (Exception e){
                       logger.error("GpPaymentMainDaoHibernateImpl.executePaymentVerify Close conn error:" + e);
                   }
                   conn = null;
               }
           } 
       		
       }
       	
       public Map<String, String[]> parameterMap(String inParameterJsonArray,String outParameterJsonArray ) throws Exception{
           Map<String,String[]> parameterMap = new HashMap<String, String[]>();
           if(inParameterJsonArray!=null&&!"".equals(inParameterJsonArray)){
               JSONArray inParameterJsons = new JSONArray(inParameterJsonArray);
               for(int i=0;i<inParameterJsons.length();i++){
                   JSONObject parameterJson = (JSONObject)inParameterJsons.get(i);
                   String index = parameterJson.getString("index"); 
                   String type = parameterJson.getString("type"); 
                   String value = parameterJson.getString("value"); 
                   if("str".equals(type)||"date".equals(type) ){
                       if(parameterMap.containsKey(index)){
                           throw new Exception("参数配置错误,请联系管理员");
                       }else {
                           parameterMap.put(index, new String[]{"in",type,value});
                       }
                   } else {
                       throw new Exception("仅支持入参为字符和日期格式的存过,请联系管理员");
                   }
       
               }	
           }
           if(outParameterJsonArray!=null&&!"".equals(outParameterJsonArray)){
               JSONArray outParameterJsons = new JSONArray(outParameterJsonArray);
               for(int i=0;i<outParameterJsons.length();i++){
                   JSONObject parameterJson = (JSONObject)outParameterJsons.get(i);
                   String index = parameterJson.getString("index");
                   String type = parameterJson.getString("type");
       
                   String success = null,msg=null,key=null ;
                   for (Iterator iterator = parameterJson.keys(); iterator.hasNext();) {
                       key = (String) iterator.next();
                       if ("success".equals(key)) {
                           success = parameterJson.getString(key);
                       }
                       if ("msg".equals(key)) {
                           msg = parameterJson.getString(key);
                       } 
                       if(success!=null && msg!=null ){
                           throw new Exception("参数配置错误,请联系管理员");
                       }
                   }	
       
                   if("str".equals(type)){
                       if(parameterMap.containsKey(index)){
                           throw new Exception("参数配置错误,请联系管理员");
                       }else {
                           if(success!=null){
                               parameterMap.put(index,new String[]{"out","success",success});
                           }
                           if (msg!=null) {
                               parameterMap.put(index,new String[]{"out","msg","成功"});
                           } 
                       }
                   } else {
                       throw new Exception("出参仅支持字符型,请联系管理员!");
                   }
               }
       
           }
           return parameterMap;
       }
       
       ```
      
        
      
      
      
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

有点犇

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值