MVC编辑订单cshtml页面

  1 @model Lixise.HealthCloud.ServiceOrder.Models.ServiceOrderEdit
  2 @{
  3     ViewBag.Title = "Edit";
  4     Layout = "~/Views/Shared/_Layout.cshtml";
  5 }
  6 
  7 <form class="form-horizontal" method="post">
  8     <div class="panel panel-default">
  9         <div class="panel-heading font-bold navbar-collapse panel-fixed clearfix">
 10             <div class="panel-title pull-left">
 11                 <span><i class="icon icon-layers"></i> 编辑订单</span>
 12                 @*<span class="panel-link">订单列表</span>*@
 13             </div>
 14             <div class="pull-right">
 15                 <button type="submit" class="btn btn-primary">保存</button>
 16             </div>
 17         </div>
 18         <div class="panel-body">
 19             <div class="tab-container">
 20                 <ul class="nav nav-tabs" role="tablist">
 21                     <li class="active"><a href="#tab1" data-toggle="tab">客户信息</a></li>
 22                     <li><a href="#tab2" data-toggle="tab">收货信息</a></li>
 23                     <li><a href="#tab3" data-toggle="tab">产品信息</a></li>
 24                     <li><a href="#tab4" data-toggle="tab">付款信息</a></li>
 25                     <li><a href="#tab5" data-toggle="tab">货期信息</a></li>
 26                     <li><a href="#tab6" data-toggle="tab">聊天列表</a></li>
 27                     <li><a href="#tab7" data-toggle="tab">进度信息</a></li>
 28                     <li><a href="#tab8" data-toggle="tab">投诉处理</a></li>
 29                 </ul>
 30                 <div class="tab-content">
 31                     <div class="tab-pane active" id="tab1">
 32                         <div class="form-group">
 33                             <label class="col-sm-2 control-label">公司名称</label>
 34                             <div class="col-sm-3">
 35                                 <input type="text" class="form-control" placeholder="公司名称">
 36                             </div>
 37                         </div>
 38                         <div class="line line-dashed b-b line-lg pull-in"></div>
 39                         <div class="form-group">
 40                             <label class="col-sm-2 control-label">联系人</label>
 41                             <div class="col-sm-3">
 42                                 <input type="text" class="form-control" placeholder="联系人">
 43                             </div>
 44                         </div>
 45                         <div class="line line-dashed b-b line-lg pull-in"></div>
 46                         <div class="form-group">
 47                             <label class="col-sm-2 control-label">联系电话</label>
 48                             <div class="col-sm-3">
 49                                 <input type="text" class="form-control" placeholder="联系电话" onkeyup="this.value=this.value.replace(/\D/g,‘‘)"
 50                                        onafterpaste="this.value=this.value.replace(/\D/g,‘‘)">
 51                             </div>
 52                         </div>
 53                     </div>
 54 
 55                     <div class="tab-pane" id="tab2">
 56                         <div class="form-group">
 57                             <label class="col-sm-2 control-label">收货人姓名</label>
 58                             <div class="col-sm-3">
 59                                 <input type="text" class="form-control" placeholder="收货人姓名">
 60                             </div>
 61                         </div>
 62                         <div class="line line-dashed b-b line-lg pull-in"></div>
 63 
 64                         <div class="form-group">
 65                             <label class="col-sm-2 control-label">收货人地址</label>
 66                             <div class="col-sm-3">
 67                                 <input type="text" class="form-control" placeholder="收货人地址">
 68                             </div>
 69                         </div>
 70                         <div class="line line-dashed b-b line-lg pull-in"></div>
 71 
 72                         <div class="form-group">
 73                             <label class="col-sm-2 control-label">收货人电话</label>
 74                             <div class="col-sm-3">
 75                                 <input type="email" class="form-control" placeholder="收货人电话" onkeyup="this.value=this.value.replace(/\D/g,‘‘)"
 76                                        onafterpaste="this.value=this.value.replace(/\D/g,‘‘)">
 77                             </div>
 78                         </div>
 79                         <div class="line line-dashed b-b line-lg pull-in"></div>
 80 
 81                         <div class="form-group">
 82                             <label class="col-sm-2 control-label">收货人邮箱</label>
 83                             <div class="col-sm-3">
 84                                 <input type="email" class="form-control" placeholder="收货人邮箱">
 85                             </div>
 86                         </div>
 87                         <div class="line line-dashed b-b line-lg pull-in"></div>
 88 
 89                         <div class="form-group">
 90                             <label class="col-sm-2 control-label">收货人邮编</label>
 91                             <div class="col-sm-3">
 92                                 <input type="email" class="form-control" placeholder="收货人邮编">
 93                             </div>
 94                         </div>
 95                     </div>
 96 
 97                     <div class="tab-pane" id="tab3">
 98                         <div class="form-group">
 99                             <label class="col-sm-2 control-label">产品名称</label>
100                             <div class="col-sm-3">
101                                 <input type="email" class="form-control" placeholder="产品名称">
102                             </div>
103                         </div>
104                         <div class="line line-dashed b-b line-lg pull-in"></div>
105 
106                         <div class="form-group">
107                             <label class="col-sm-2 control-label">产品数量</label>
108                             <div class="col-sm-3">
109                                 <input type="number" class="form-control" placeholder="0" style="width:88px;" />
110                             </div>
111                         </div>
112                         <div class="line line-dashed b-b line-lg pull-in"></div>
113 
114                         <div class="form-group">
115                             <label class="col-sm-2 control-label">产品价格</label>
116                             <div class="col-sm-3">
117                                 <input type="number" class="form-control" placeholder="0" style="width:88px;" />
118                             </div>
119                         </div>
120                         <div class="line line-dashed b-b line-lg pull-in"></div>
121 
122                         <div class="form-group">
123                             <label class="col-sm-2 control-label">备注</label>
124                             <div class="col-sm-3">
125                                 <textarea name="a" style="width:391.5px;height:88px;" class="form-control"></textarea>
126                             </div>
127                         </div>
128                     </div>
129 
130                     <div class="tab-pane" id="tab4">
131                         <div class="form-group">
132                             <label class="col-sm-2 control-label">付款时间</label>
133                             <div class="col-sm-3">
134                                 <input type="datetime" class="form-control" placeholder="请输入付款时间">
135                             </div>
136                         </div>
137                         <div class="line line-dashed b-b line-lg pull-in"></div>
138 
139                         <div class="form-group">
140                             <label class="col-sm-2 control-label">付款金额</label>
141                             <div class="col-sm-3">
142                                 <input type="number" class="form-control" placeholder="请输入付款金额" />
143                             </div>
144                         </div>
145                         <div class="line line-dashed b-b line-lg pull-in"></div>
146                     </div>
147 
148                     <div class="tab-pane" id="tab5">
149                         <div class="form-group">
150                             <label class="col-sm-2 control-label">下单时间</label>
151                             <div class="col-sm-3">
152                                 <input type="datetime" class="form-control" placeholder="请输入下单时间">
153                             </div>
154                         </div>
155                         <div class="line line-dashed b-b line-lg pull-in"></div>
156 
157                         <div class="form-group">
158                             <label class="col-sm-2 control-label">生产时间</label>
159                             <div class="col-sm-3">
160                                 <input type="datetime" class="form-control" placeholder="请输入生产时间" />
161                             </div>
162                         </div>
163                         <div class="line line-dashed b-b line-lg pull-in"></div>
164 
165                         <div class="form-group">
166                             <label class="col-sm-2 control-label">验收时间</label>
167                             <div class="col-sm-3">
168                                 <input type="datetime" class="form-control" placeholder="请输入验收时间" />
169                             </div>
170                         </div>
171                         <div class="line line-dashed b-b line-lg pull-in"></div>
172 
173                         <div class="form-group">
174                             <label class="col-sm-2 control-label">发货时间</label>
175                             <div class="col-sm-3">
176                                 <input type="datetime" class="form-control" placeholder="请输入发货时间" />
177                             </div>
178                         </div>
179                         <div class="line line-dashed b-b line-lg pull-in"></div>
180 
181                         <div class="form-group">
182                             <label class="col-sm-2 control-label">成交时间</label>
183                             <div class="col-sm-3">
184                                 <input type="datetime" class="form-control" placeholder="请输入成交时间" />
185                             </div>
186                         </div>
187                         <div class="line line-dashed b-b line-lg pull-in"></div>
188                     </div>
189 
190                     <div class="tab-pane" id="tab6">
191                         <ul class="chat-thread">
192                             <li>骚年，可以交个朋友吗？</li>
193                             <li>我有女朋友了</li>
194                             <li>那你介意再多交一个女朋友吗？</li>
195                             <li>介意</li>
196                             <li>那你介意我喜欢你吗？</li>
197                             <li>介意</li>
198                             <li>那你介意介意你介意我吗？</li>
199                             <li>
200                                 <p>介意</p>
201                                 <p>不介……</p>
202                                 <p>额</p>
203                                 <p>艹</p>
204                             </li>
205                         </ul>
206                     </div>
207 
208                     <div class="tab-pane" id="tab7">
209                         进度信息
210                     </div>
211 
212                     <div class="tab-pane" id="tab8">
213                         <div class="form-group">
214                             <label class="col-sm-2 control-label">投诉内容</label>
215                             <div class="col-sm-3">
216                                 <input type="text" class="form-control" placeholder="投诉内容">
217                             </div>
218                         </div>
219                         <div class="line line-dashed b-b line-lg pull-in"></div>
220 
221                         <div class="form-group">
222                             <label class="col-sm-2 control-label">联系方式(手机或邮箱)</label>
223                             <div class="col-sm-3">
224                                 <input type="text" class="form-control" placeholder="联系方式">
225                             </div>
226                         </div>
227                         <div class="line line-dashed b-b line-lg pull-in"></div>
228 
229                         <div class="form-group">
230                             <label class="col-sm-2 control-label">上传附件</label>
231                             <div class="col-sm-3">
232                                 <input type="file" id="filedImage" name="filedImage" multiple="multiple" />
233 
234                             </div>
235                         </div>
236                         <div class="line line-dashed b-b line-lg pull-in"></div>
237                     </div>
238 
239                 </div>
240             </div>
241         </div>
242     </div>
243 </form>
244 @section HeadLibs{
245     <link href="/Content/css/chat.css" rel="stylesheet" />
246     <style type="text/css">
247         .toUploadImg{
248             max-width:300px;max-height:250px;
249         }
250     </style>
251 }
252 
253 @section FootScripts{
254     <script type="text/javascript">
255         $(function () {
256             //var img = ‘<img src="" class="toUploadImg" style="max-width:300px;max-height:250px;" />‘;
257             $("#filedImage").on("change", function () {
258                 if (checkImages(this)) {
259                     alert("aa");
260                     //显示图片
261                     showImg(this);
262                     clearValidation($("form"));//清除验证信息
263                 }
264                 else {
265                     //清除图片
266                     $(".toUploadImg").attr("src", "");
267                 }
268             })
269         })
270         //清除验证信息
271         function clearValidation(target) {
272             var v = $(target).validate();
273             $(‘[name]‘, target).each(function () {
274                 v.successList.push(this);
275                 v.showErrors();
276             }); v.resetForm(); v.reset();
277         };
278 
279 
280         //上传图片后立即预览 file对象,图片容器id
281         var fileLength =0;
282         var fileLoader;
283         var index=0;
284         function showImg(fileObj) {
285             if(fileObj.files.length>0)
286             {
287                 fileLoader=fileObj;
288                 fileLength = fileObj.files.length;
289                 loadImg(fileObj.files[0])
290             }
291         }
292 
293         function loadImg()
294         {
295             var img = document.createElement("img");
296             img.id = "toUploadImg" + index;
297             img.className = "toUploadImg";
298             var reader = new FileReader();
299             reader.readAsDataURL(fileLoader.files[index]);
300             $(reader).load(function () {
301                 img.src = this.result;
302                 $("#filedImage").after(img);
303                 index++;
304                 if(index<fileLength)
305                 {
306                     loadImg();
307                 }
308                 else
309                 {
310                     //reset
311                     fileLength =0;
312                     fileLoader=null;
313                     index=0;
314                 }
315             })
316         }
317 
318 //        var xhr = new XMLHttpRequest();
319 //        xhr.open(‘post‘, "/media", true);//请求地址
320 //        xhr.onreadystatechange = function () {
321 //            if (xhr.readyState == 1) {
322 //                /tLoadToast(‘上传图片中...‘);
323 //            } else if (xhr.readyState == 2) {
324 //                /tLoadToast(‘服务器处理中...‘);
325 //                } else if (xhr.readyState == 4) {
326 //                    if (xhr.status == 200) {
327 //                        var data = JSON.parse(xhr.responseText);
328 //                        if (data.success) {
329 
330 //                                setLoadToast(‘上传图片中‘ + (i) + ‘/‘ + files.length);
331 //                                if (data.data && data.data.length > 0) {
332 //                                    imgs.push(data.data);
333 
334 //                                    setLoadToast(‘上传图片成功‘, 1000);
335 //                                    //$(‘#avator‘).val(data.data[0]);
336 //                                }
337 //} else {
338 //                                hideLoadToast();
339 //                                loadDiaglog(data.error_message, ‘确认‘);
340 //                                return false;
341 //}
342 //                    } else {
343 //                        hideLoadToast();
344 //                        return false;
345 //                    }
346 //                }
347 //                };
348 //        xhr.send(fd);//发送
349 
350 
351         //检查图片
352         function checkImages(target) {
353             var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
354             var fileSize = 0;
355             var filetypes = [".jpg", ".png", ".bmp", ".jpeg"];
356             var filepath = target.value;
357             var filemaxsize = 1024 * 0.5;//0.5M
358             if (filepath) {
359                 var isnext = false;
360                 var fileend = filepath.substring(filepath.indexOf("."));
361                 if (filetypes && filetypes.length > 0) {
362                     for (var i = 0; i < filetypes.length; i++) {
363                         if (filetypes[i] == fileend) {
364                             isnext = true;
365                             break;
366                         }
367                     }
368                 }
369                 if (!isnext) {
370                     alert("不接受此文件类型！");
371                     target.value = "";
372                     return false;
373                 }
374             } else {
375                 return false;
376             }
377             if (isIE && !target.files) {
378                 var filePath = target.value;
379                 var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
380                 if (!fileSystem.FileExists(filePath)) {
381                     alert("附件不存在，请重新输入！");
382                     return false;
383                 }
384                 var file = fileSystem.GetFile(filePath);
385                 fileSize = file.Size;
386             } else {
387                 fileSize = target.files[0].size;
388             }
389 
390             var size = fileSize / 1024;
391             if (size > filemaxsize) {
392                 alert("附件大小不能大于" + filemaxsize / 1024 + "M！");
393                 target.value = "";
394                 return false;
395             }
396             if (size <= 0) {
397                 alert("附件大小不能为0M！");
398                 target.value = "";
399                 return false;
400             }
401             return true;
402         }
403     </script>
404 }