| <!DOCTYPE HTML> | 
| <html xmlns:th="http://www.thymeleaf.org" xmlns:matrix="http://www.w3.org/1999/xhtml"> | 
| <head> | 
|     <meta charset="utf-8"> | 
|     <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> | 
|     <meta name="renderer" content="webkit|ie-comp|ie-stand"> | 
|     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | 
|     <meta name="viewport" | 
|           content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> | 
|     <meta http-equiv="Cache-Control" content="no-siteapp"/> | 
|     <LINK rel="Bookmark" href="../images/favicon.ico"> | 
|     <!-- 本框架基本脚本和样式 --> | 
|     <script type="text/javascript" | 
|             th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script> | 
|     <script type="text/javascript" | 
|             th:src="@{/js/systools/MBase.js}"></script> | 
| </head> | 
| <body> | 
| <div class="ibox-content" id="app" v-cloak> | 
|   | 
|     <div class="row"> | 
|         <div class="panel panel-warning"> | 
|             <div class="panel-heading"> | 
|                 美疗师排班 | 
|             </div> | 
|             <div class="panel-body"> | 
|                 <form class="form-horizontal" id="dataform"> | 
|   | 
|                     <div class="form-group"> | 
|                         <label class="col-sm-2 control-label">请选择日期:</label> | 
|                         <div class="col-sm-3"> | 
|                             <input autocomplete="off"   size="16" | 
|                                    class="form-control form_datetime datetimepicker" | 
|                                    name="dateTime" id="dayTime" | 
|                                    type="text" v-model="dateTime"> | 
|                         </div> | 
|   | 
|                     </div> | 
|                     <table class="table table-bordered"> | 
|                         <thead> | 
|                         <tr> | 
|                             <th data-align="center" | 
|                                 data-width="300px">时间\班次 | 
|                             </th> | 
|                             <th v-for="item in workTimes"> | 
|                                 {{item.name }} | 
|                                 {{item.startTime | format('hh:mm') }}至{{item.endTime | format('hh:mm') }} | 
|                             </th> | 
|                         </tr> | 
|                         </thead> | 
|                         <tbody> | 
|   | 
|                         <tr v-for="item in beaWorkForms"> | 
|                             <td style="width:150px;">{{item.date|format('yy年MM月dd日')}}</td> | 
|                             <td v-for="timeCode in workTimes"> | 
|                                 <select class="select2 form-control"  multiple="multiple"> | 
|                                     <option v-for="mls in mlss" :value="mls.id">{{mls.staffName}}</option> | 
|                                 </select> | 
|                             </td> | 
|                         </tr> | 
|   | 
|                         </tbody> | 
|   | 
|                     </table> | 
|                     <div class="form-group "> | 
|                         <div class="col-sm-12 text-center"> | 
|                             <a id="save" href="javascript:;" @click="submit()" class="btn btn-success radius"> | 
|                                 保存 | 
|                             </a> | 
|                         </div> | 
|                     </div> | 
|                 </form> | 
|             </div> | 
|         </div> | 
|     </div> | 
| </div> | 
|   | 
| <script type="text/javascript" th:src="@{/js/systools/MJsBase.js}"></script> | 
| <script type="text/javascript" th:src="@{/js/plugin/vue.js}"></script> | 
| <script type="text/javascript"> | 
|   | 
|     var app = new Vue({ | 
|         el: '#app', | 
|         data: { | 
|             workTimes: {} | 
|         }, | 
|         created: function () { | 
|             this.loadInfo(); | 
|         }, | 
|   | 
|         mounted: function () { | 
|             //  this.initDate(); | 
|             $(".select2").select2({"width": "100%"}); | 
|         }, | 
|   | 
|   | 
|         methods: { | 
|   | 
|             loadInfo: function () { | 
|                 var _this = this; | 
|                 $.AjaxProxy({a: false}).invoke(basePath + '/admin/beautiWork/getPaiBanInfo', | 
|                     function ($data, data) { | 
|                         let map = data.mapInfo; | 
|                         _this.dateTime = MTools.formatDate(map.dateTime, 'yyyy-MM-dd') | 
|                         _this.workTimes = map.workTimes; | 
|                         _this.beaWorkForms = map.beaWorkForms; | 
|                         _this.len = map.len; | 
|                         _this.mlss = map.mlss; | 
|                     } | 
|                 ); | 
|             }, | 
|   | 
|             initDate: function () { | 
|                 var _this = this; | 
|                 console.log('初始化日期'); | 
|                 $("#dayTime").datetimepicker({ | 
|                     format: 'yyyy-mm-dd', | 
|                     todayBtn: true, | 
|                     autoclose: true, | 
|                     startView: 2, | 
|                     maxView: 3, | 
|                     minView: 2 | 
|                 }).on("change", function (ev) { | 
|                     $(this)[0].dispatchEvent(new Event('input')); | 
|                     _this.changeTime(ev); | 
|                 }); | 
|   | 
|             }, | 
|   | 
|             submit: function () { | 
|                 console.log(this.projService); | 
|                 var _this = this; | 
|                 var param = { | 
|                     dateTime: _this.dateTime, | 
|                     works: [], | 
|                 }; | 
|                 for (let i = 0; i < _this.beaWorkForms.length; i++) { | 
|                     console.log(_this.beaWorkForms[i]); | 
|                 } | 
|   | 
|   | 
|                 $.AjaxProxy({p: param}).invoke(basePath + '/admin/beautiWork/getPaiBanInfo', | 
|                     function ($data, data) { | 
|                         let map = data.mapInfo; | 
|                         _this.dateTime = MTools.formatDate(map.dateTime, 'yyyy-MM-dd') | 
|                         _this.workTimes = map.workTimes; | 
|                         _this.beaWorkForms = map.beaWorkForms; | 
|                         _this.len = map.len; | 
|                         _this.mlss = map.mlss; | 
|   | 
|                         //绑定上班美疗师 | 
|                         for (let i = 0; i < _this.beaWorkForms.length; i++) { | 
|                             let staffIds=[]; | 
|                             for (let i = 0; i < map.todayWorkMls.length; i++) { | 
|                                 if() | 
|                                 staffIds.push(map.todayWorkMls[i].staffId); | 
|                             } | 
|                         } | 
|   | 
|   | 
|                     } | 
|                 ); | 
|   | 
|             }, | 
|   | 
|             changeTime: function (event) { | 
|                 console.log('修改预约时间'); | 
|                 var _this = this; | 
|   | 
|             }, | 
|   | 
|   | 
|         }, | 
|         filters: { | 
|             format: function (value, patten) { | 
|                 if (!value) return ''; | 
|                 return MTools.formatDate(value, patten) | 
|             }, | 
|         }, | 
|   | 
|         updated: function () { | 
|             //兼容微信6.74+ios12的软键盘不回弹bug | 
|             $("input,textarea,select").blur(function () { | 
|                 setTimeout(function () { | 
|                     var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0; | 
|                     window.scrollTo(0, Math.max(scrollHeight - 1, 0)); | 
|                 }, 50) | 
|             }) | 
|         }, | 
|     }) | 
|   | 
|   | 
| </script> | 
| </body> | 
| </html> |