基于Ruoyi ，做了个多选项卡页面，对应录入基本信息和文件上传，画面能跨选项卡校验并及时提示

自己写的，有两个选项卡，一个负责上传，一个负责录入基本信息；

有必填项检查，如果有没填的项目，自动跳转到对应的选项卡；

记录下来，以后备查；

 

  1 <!DOCTYPE html>
  2 <html lang="zh" xmlns:th="http://www.thymeleaf.org" >
  3 <head>
  4     <th:block th:include="include :: header('新增attachment')" />
  5 
  6     <th:block th:include="include :: bootstrap-fileinput-css" />
  7 </head>
  8 <body class="gray-bg">
  9 <div class="wrapper wrapper-content animated fadeInRight">
 10     <form class="form-horizontal m" id="form-attachment-add">
 11 
 12         <div class="row">
 13             <div class="col-sm-12">
 14                 <div class="tabs-container">
 15                     <ul class="nav nav-tabs">
 16                         <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"> 基本信息</a></li>
 17                         <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">上传文件</a></li>
 18                     </ul>
 19 
 20                     <div class="tab-content">
 21 
 22                         <div id="tab-1" class="tab-pane active">
 23 
 24                             <h4 th:align="right" class="form-header h4 "></h4>
 25 
 26                             <div class="row">
 27                             <div class="col-sm-4">
 28                                 <div class="form-group">
 29                                     <label class="col-sm-4 control-label is-required">业务类型：</label>
 30                                     <div class="col-sm-8">
 31                                         <input name="business_type" placeholder="请输入用户名称" id="business_type" class="form-control" type="text" minlength="3" maxlength="30" required/>
 32                                     </div>
 33                                 </div>
 34                             </div>
 35 
 36                             <div class="col-sm-4">
 37                                 <div class="form-group">
 38                                     <label class="col-sm-4 control-label is-required">业务ID：</label>
 39                                     <div class="col-sm-8">
 40                                         <input name="business_id" placeholder="请输入用户名称" id ="business_id" class="form-control" type="text" minlength="3" maxlength="30" required/>
 41                                     </div>
 42                                 </div>
 43                             </div>
 44 
 45                             <div class="col-sm-4">
 46                                 <div class="form-group">
 47                                     <label class="col-sm-4 control-label ">测试三：</label>
 48                                     <div class="col-sm-8">
 49                                         <input name="userName2" placeholder="请输入用户名称" class="form-control" type="text" maxlength="30" >
 50                                     </div>
 51                                 </div>
 52                             </div>
 53                         </div>
 54 
 55                             <div class="row">
 56                                 <div class="col-sm-4">
 57                                     <div class="form-group">
 58                                         <label class="col-sm-4 control-label ">测试四：</label>
 59                                         <div class="col-sm-8">
 60                                             <input name="userName2" placeholder="请输入用户名称" class="form-control" type="text" maxlength="30" >
 61                                         </div>
 62                                     </div>
 63                                 </div>
 64 
 65                                 <div class="col-sm-4">
 66                                     <div class="form-group">
 67                                         <label class="col-sm-4 control-label ">测试五：</label>
 68                                         <div class="col-sm-8">
 69                                             <input name="userName2" placeholder="请输入用户名称" class="form-control" type="text" maxlength="30" >
 70                                         </div>
 71                                     </div>
 72                                 </div>
 73 
 74                                 <div class="col-sm-4">
 75                                     <div class="form-group">
 76                                         <label class="col-sm-4 control-label ">测试六：</label>
 77                                         <div class="col-sm-8">
 78                                             <input name="userName2" placeholder="请输入用户名称" class="form-control" type="text" maxlength="30" >
 79                                         </div>
 80                                     </div>
 81                                 </div>
 82                             </div>
 83 
 84                             <div class="row">
 85                                 <div class="col-sm-4">
 86                                     <div class="form-group">
 87                                         <label class="col-sm-4 control-label ">测试七：</label>
 88                                         <div class="col-sm-8">
 89                                             <input name="userName2" placeholder="请输入用户名称" class="form-control" type="text" maxlength="30" >
 90                                         </div>
 91                                     </div>
 92                                 </div>
 93 
 94                                 <div class="col-sm-4">
 95                                     <div class="form-group">
 96                                         <label class="col-sm-4 control-label ">测试八：</label>
 97                                         <div class="col-sm-8">
 98                                             <input name="userName2" placeholder="请输入用户名称" class="form-control" type="text" maxlength="30" >
 99                                         </div>
100                                     </div>
101                                 </div>
102 
103                                 <div class="col-sm-4">
104                                     <div class="form-group">
105                                         <label class="col-sm-4 control-label ">测试九：</label>
106                                         <div class="col-sm-8">
107                                             <input name="userName2" placeholder="请输入用户名称" class="form-control" type="text" maxlength="30" >
108 
109                                         </div>
110                                     </div>
111                                 </div>
112                             </div>
113 
114                         </div>
115 
116 
117                         <div id="tab-2" class="tab-pane">
118 
119                             <div class="ibox-content">
120                                 <div class="form-group">
121                                     <label class="font-noraml">多文件上传</label>
122                                     <div class="file-loading">
123                                         <input id="file_name_real" type="file" name="file_name_real" multiple >
124                                         <input name="img_file" id="img_file" type="hidden" required >
125                                     </div>
126                                 </div>
127                             </div>
128                         </div>
129 
130                     </div>
131 
132                 </div>
133             </div>
134         </div>
135 
136 
137 
138     </form>
139 </div>
140 
141 
142 
143 
144 <div class="row">
145     <div class="col-sm-offset-5 col-sm-10">
146         <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
147         <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
148     </div>
149 </div>
150 
151 <th:block th:include="include :: footer" />
152 <th:block th:include="include :: bootstrap-fileinput-js" />
153 
154 
155 
156 <script type="text/javascript">
157     var prefix = ctx + "system/attachment";
158     var img_value='';
159 
160     $(document).ready(function () {
161         $("#file_name_real").fileinput({
162             'theme': 'explorer-fas',
163             'uploadUrl': prefix + "/upload",
164             overwriteInitial: false,
165             initialPreviewAsData: true
166 
167         });
168 
169         $("#file_name_real").on("fileuploaded", function(event, data,previewId,index){
170 
171             var data = data.response;
172             image = JSON.stringify(data);
173 
174             var jsonObject= jQuery.parseJSON(image);
175             img_value = img_value+','+jsonObject.img_file;
176             //alert(jsonObject.img_file);
177             $("#img_file").val(jsonObject.img_file);
178 
179         })
180        ;
181 
182     });
183 
184 
185 
186 
187     function submitHandler() {
188         var data = $("#img_file").val();
189         var tabx=$("div ul li a");
190 
191         //----所有隐藏的 tab 标签页也参与校验 ---//
192         //$("form").validate({ignore: ":hidden", ignore: ""});
193 
194         alert(img_value);
195 
196         if(img_value.length==0){
197             alert("请先上传文件");
198             tabx.eq(2).click();
199             return;
200         }
201 
202 
203         $("form").validate({ignore: ":hidden",
204             ignore: "",
205             showErrors: function(errorMap,errorList) {
206 
207                 //此方法处理所有不满足校验的元素
208                 var i = 0;
209                 for(var key in errorMap){
210                     //alert("属性：" + key + ",值："+ errorMap[key]);
211                     if(i == 0){
212 
213                         // 所有tab页的内容域
214 
215                         var conents =  $("div.tab-content");
216 
217                         // 所有tab页头
218 
219                         var tabs = $("div.tab-pane");
220                         var index = conents.index(conents.has("[name='"+key+"']"));
221                         //alert(index);
222                         //tabs.eq(index).click();//---这个不成功，但是不报错
223                         //---这个方法是可以一半实现
224                         //tabs.eq(0).show();
225                         //tabs.eq(1).hidden();
226 
227                         tabx.eq(index).click();
228                     }
229                     i++;
230                 }
231                 this.defaultShowErrors();
232             }
233 
234         });
235 
236 
237 
238         if ($.validate.form("form-attachment-add")) {
239 
240             // var business_type = $("#business_type").val();
241             // alert(business_type);
242 
243             $.operate.save(prefix + "/add", $('#form-attachment-add').serialize());
244         }
245 
246 
247    }
248 
249 
250 
251 
252 
253 
254 
255 </script>
256 </body>
257 
258 </html>

 

posted @ 2020-05-09 17:10  苦行者的刀  阅读(2624)  评论(2)  编辑  收藏  举报