New file |
| | |
| | | <!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/systools/MBaseVue.js}"></script> |
| | | <link rel="stylesheet" th:href="@{/plugin/element-ui/index.css}"> |
| | | <link rel="stylesheet" th:href="@{/plugin/bootstrap-3.3.5/css/bootstrap.min.css}"> |
| | | <link th:href="@{/css/styleOne/style.min.css}" rel="stylesheet" type="text/css"/> |
| | | </head> |
| | | <body> |
| | | <div class="ibox-content" id="app" v-cloak> |
| | | <form class="form-horizontal" id="dataform" |
| | | onsubmit="javascripr:return false;"> |
| | | <input autocomplete="off" type="hidden" v-model="projService.id"> |
| | | |
| | | <div class="form-group"> |
| | | <label class="col-md-2 control-label"> </label> |
| | | <div class="col-md-12"> |
| | | <div class="panel panel-primary"> |
| | | <div class="panel-heading"> |
| | | <div class="row"> |
| | | <div class="col-md-6"> |
| | | <h2>客户:{{projService.vipInfo.vipName}}</h2> |
| | | </div> |
| | | <div class="col-md-6 text-right"> |
| | | <sapn style="line-height: 30px;">订单编号:{{projService.serviceNo}}</sapn> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="panel-body"> |
| | | <div class="form-group"> |
| | | <label class="col-md-1 control-label">预约时间:</label> |
| | | <div class="col-md-3"> |
| | | <el-date-picker @change="changeYyTime()" |
| | | v-model="projService.yyTime" |
| | | type="date" |
| | | placeholder="选择日期"> |
| | | </el-date-picker> |
| | | </div> |
| | | <label class="col-md-1 control-label">服务时长</label> |
| | | <div class="col-md-3"> |
| | | <!-- <el-input @change="changeYyTime()" v-model="projService.totalTime"></el-input>--> |
| | | <label class="control-label">{{projService.totalTime}}</label> |
| | | </div> |
| | | </div> |
| | | <div class="form-group"> |
| | | |
| | | <label class="col-md-1 control-label">床位准备时间</label> |
| | | <div class="col-md-3 "> |
| | | <el-time-select |
| | | @change="getFreedBed()" |
| | | v-model="projService.bedState.startTimeForm" |
| | | :picker-options="{ |
| | | start: startTime, |
| | | step: '00:10', |
| | | end: endTime |
| | | }" |
| | | placeholder="选择时间"> |
| | | </el-time-select> |
| | | |
| | | </div> |
| | | <label class="col-md-1 control-label">选择床位</label> |
| | | <div class="col-md-3" style="display: flex;"> |
| | | <el-select style="flex: 5" v-model="projService.bedId" placeholder="请选择床位"> |
| | | <el-option |
| | | v-for="item in beds" |
| | | :key="item.id" |
| | | :label="item.bedName" |
| | | :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | <button style="flex: 1" type="button" class="btn btn-success btn-sm " |
| | | onclick="selectCwqk()" |
| | | title="查看床位情况"> |
| | | <i style="font-size: 18px;" class="el-icon-search"></i> |
| | | </button> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | <div class="form-group"> |
| | | <label class="col-md-1 control-label">配料师</label> |
| | | <div class="col-md-3"> |
| | | <el-select v-model="projService.devisionId" placeholder="请选择"> |
| | | <el-option |
| | | v-for="item in pls" |
| | | :key="item.suId" |
| | | :label="item.suName" |
| | | :value="item.suId"> |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | </div> |
| | | <div class="form-group"> |
| | | <label class="col-md-1 control-label">服务设置</label> |
| | | <div class="col-md-11"> |
| | | <table class="table table-bordered"> |
| | | <tr> |
| | | <th>项目名称</th> |
| | | <th width="100px">服务时长(分钟)</th> |
| | | <th>服务时间</th> |
| | | <th width="300px">美疗师</th> |
| | | <th style="width: 100px;">提成</th> |
| | | </tr> |
| | | |
| | | <tr v-for="(item,index) in projService.serviceItems"> |
| | | <td>{{item.projInfo.name}}</td> |
| | | <td><el-input @change="changeTimeLength" v-model="item.projInfo.timeLength"></el-input></td> |
| | | |
| | | <td> |
| | | <div style="display: flex;"> |
| | | <el-time-select style="flex: 6" @change="getFreedBeautyd(index)" |
| | | v-model="item.beginTimeForm" |
| | | :picker-options="{ |
| | | start: startTime, |
| | | step: '00:10', |
| | | end: endTime, |
| | | }" |
| | | placeholder="选择时间"> |
| | | </el-time-select> |
| | | <span style="flex: 2;text-align: center;line-height: 30px">至</span> |
| | | <el-time-select style="flex: 6" @change="getFreedBeautyd(index)" |
| | | v-model="item.endTimeForm" |
| | | :picker-options="{ |
| | | start: startTime, |
| | | step: '00:10', |
| | | end: endTime, |
| | | minTime: item.beginTimeForm |
| | | }" |
| | | placeholder="选择时间"> |
| | | </el-time-select> |
| | | </div> |
| | | </td> |
| | | <td> |
| | | <el-select v-model="item.staffId" placeholder="请选择美疗师"> |
| | | <el-option |
| | | v-for="item in beauty" |
| | | :key="item.suId" |
| | | :label="item.suName" |
| | | :value="item.suId"> |
| | | </el-option> |
| | | </el-select> |
| | | </td> |
| | | <td> |
| | | <el-input v-model="item.extract"></el-input> |
| | | </td> |
| | | |
| | | </tr> |
| | | |
| | | </table> |
| | | </div> |
| | | </div> |
| | | <div class="form-group"> |
| | | <label class="col-md-1 control-label">备 注:</label> |
| | | <div class="col-md-7"> |
| | | <textarea name="remark" type="text" id="remark" |
| | | class="form-control" rows="4" |
| | | v-model="projService.remark"></textarea> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="form-group "> |
| | | <div class="col-md-12 text-center"> |
| | | <a href="javascript:;" @click="submit()" |
| | | class="btn btn-success radius">保存</a> |
| | | <button @click="closeFram()" class="btn btn-danger radius" type="button">取消</button> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | | </div> |
| | | |
| | | </form> |
| | | </div> |
| | | </div> |
| | | <script type="text/javascript" th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script> |
| | | <script type="text/javascript" th:src="@{/js/plugin/jquery.query.js}"></script> |
| | | <script type="text/javascript" th:src="@{/plugin/bootstrap-3.3.5/js/bootstrap.min.js}"></script> |
| | | <script type="text/javascript" th:src="@{/js/systools/AjaxProxyVue.js}"></script> |
| | | <script type="text/javascript" th:src="@{/js/plugin/vue.js}"></script> |
| | | <script type="text/javascript" th:src="@{/plugin/element-ui/index.js}"></script> |
| | | <script type="text/javascript"> |
| | | |
| | | var id = $.query.get("id"); |
| | | var app = new Vue({ |
| | | el: '#app', |
| | | data: { |
| | | projService: { |
| | | bedState: {startTimeForm: ''} |
| | | }, |
| | | //美疗师分配列表 |
| | | serviceItems: [], |
| | | //美疗师 |
| | | beauty: [], |
| | | pls: [], |
| | | beds: [], |
| | | startTime:'08:00', |
| | | endTime:'23:00', |
| | | }, |
| | | created: function () { |
| | | this.loadWorkTime(); |
| | | this.loadInfo(); |
| | | }, |
| | | |
| | | mounted: function () { |
| | | |
| | | }, |
| | | |
| | | methods: { |
| | | |
| | | |
| | | loadWorkTime:function(){ |
| | | var _this=this; |
| | | AjaxProxy.requst({ |
| | | app: _this, |
| | | url: basePath + '/admin/workTime/getWorkTime', |
| | | callback: function (data) { |
| | | _this.startTime=data.rows[0]; |
| | | _this.endTime=data.rows[1]; |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | loadInfo: function () { |
| | | |
| | | console.log('加载服务器数据'); |
| | | var _this = this; |
| | | |
| | | |
| | | |
| | | |
| | | AjaxProxy.requst({ |
| | | app: _this, |
| | | async: false, |
| | | url: basePath + '/admin/projService/findProjServiceInfo?id=' + id, |
| | | callback: function (data) { |
| | | |
| | | |
| | | //处理空对象和时间 |
| | | let projService = data.mapInfo.projService; |
| | | |
| | | let serviceItems = projService.serviceItems; |
| | | |
| | | //转换床位时间格式 |
| | | if (!projService.bedState) { |
| | | projService.bedState = {} |
| | | projService.bedState.startTimeForm= MTools.formatDate(new Date(), 'hh:mm'); |
| | | } else { |
| | | projService.bedState.startTimeForm = MTools.formatDate(projService.bedState.startTime, 'hh:mm') |
| | | } |
| | | |
| | | _this.projService = projService; |
| | | |
| | | //转换时间格式,服务加载的时间格式要做处理,截取时分展示 |
| | | for (let i = 0; i < serviceItems.length; i++) { |
| | | let beStates = serviceItems[i]; |
| | | if(beStates.beginTime){ |
| | | beStates.beginTimeForm = MTools.formatDate(beStates.beginTime, 'hh:mm'); |
| | | beStates.endTimeForm = MTools.formatDate(beStates.endTime, 'hh:mm'); |
| | | }else{ |
| | | beStates.beginTimeForm = MTools.formatDate(new Date(), 'hh:mm'); |
| | | var today=new Date(); |
| | | today.setMinutes(today.getMinutes()+beStates.projInfo.timeLength) |
| | | beStates.endTimeForm= MTools.formatDate(today, 'hh:mm'); |
| | | } |
| | | _this.getFreedBeautyd(i); |
| | | |
| | | |
| | | } |
| | | |
| | | //加载床位 |
| | | _this.getFreedBed(); |
| | | |
| | | //获取配料师 |
| | | AjaxProxy.requst({ |
| | | app: _this, |
| | | url: basePath + '/admin/getShopStaffByRoleName?roleName=配料师', |
| | | callback: function (data) { |
| | | _this.pls = data.rows; |
| | | } |
| | | }); |
| | | |
| | | |
| | | } |
| | | }); |
| | | |
| | | |
| | | } |
| | | , |
| | | closeFram: function () { |
| | | parent.layer.close(parent.layer.getFrameIndex(window.name)); |
| | | }, |
| | | |
| | | submit: function () { |
| | | console.log("提交"); |
| | | let _this = this; |
| | | let projService = _this.projService; |
| | | |
| | | //床位时间 |
| | | let dateStr = MTools.formatDate(projService.yyTime, 'yyyy/MM/dd') + " " + projService.bedState.startTimeForm + ":00"; |
| | | let startTime = new Date(dateStr); |
| | | |
| | | let serviceItems = []; |
| | | for (let i = 0; i < projService.serviceItems.length; i++) { |
| | | let beStates = projService.serviceItems[i]; |
| | | let beginTimeStr = MTools.formatDate(_this.projService.yyTime, 'yyyy/MM/dd') + " " + beStates.beginTimeForm + ":00"; |
| | | let beginTime = new Date(beginTimeStr); |
| | | let endTimeStr = MTools.formatDate(_this.projService.yyTime, 'yyyy/MM/dd') + " " + beStates.endTimeForm + ":00"; |
| | | let endTime = new Date(endTimeStr); |
| | | |
| | | serviceItems.push({ |
| | | beginTime: beginTime, |
| | | endTime: endTime, |
| | | staffId: beStates.staffId, |
| | | extract: beStates.extract, |
| | | excTime : beStates.projInfo.timeLength, |
| | | id: beStates.id, |
| | | }); |
| | | |
| | | } |
| | | |
| | | |
| | | var params = { |
| | | id: projService.id, |
| | | totalTime: projService.totalTime, |
| | | remark: projService.remark, |
| | | bedId: projService.bedId, |
| | | devisionId: projService.devisionId, |
| | | yyTime: projService.yyTime, |
| | | serviceItems: serviceItems, |
| | | //床位时间 |
| | | bedState: { |
| | | startTime: startTime, |
| | | } |
| | | } |
| | | |
| | | |
| | | if (_this.validate(params)) { |
| | | AjaxProxy.requst({ |
| | | app: _this, |
| | | data: params, |
| | | url: basePath + '/admin/projService/servicePaiBan', |
| | | callback: function (data) { |
| | | _this.$message({ |
| | | message: data.info, |
| | | type: 'success', |
| | | onClose: function () { |
| | | _this.closeFram(); |
| | | } |
| | | }); |
| | | if (parent.myGrid) { |
| | | parent.myGrid.serchData(); |
| | | } |
| | | |
| | | if (parent.app) { |
| | | parent.app.serviceOrderQuery(); |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | } |
| | | , |
| | | validate: function (params) { |
| | | if (!params.bedId) { |
| | | this.$message({ |
| | | message: '床位不能为空', |
| | | type: 'error' |
| | | }); |
| | | return false; |
| | | } |
| | | if (!params.totalTime) { |
| | | this.$message({ |
| | | message: '请填写服务时长', |
| | | type: 'error' |
| | | }); |
| | | return false; |
| | | } |
| | | if (!params.yyTime) { |
| | | this.$message({ |
| | | message: '请填写预约时间', |
| | | type: 'error' |
| | | }); |
| | | return false; |
| | | } |
| | | for (let i = 0; i < params.serviceItems.length; i++) { |
| | | let b = params.serviceItems[i]; |
| | | if (!b.staffId) { |
| | | this.$message({ |
| | | message: '请选择第' + (i + 1) + '位美疗师', |
| | | type: 'error' |
| | | }); |
| | | return false; |
| | | } |
| | | } |
| | | return true; |
| | | } |
| | | , |
| | | |
| | | //触发预约时间修改 |
| | | changeYyTime: function () { |
| | | this.getFreedBed(); |
| | | this.getFreedBeautyd(); |
| | | } |
| | | , |
| | | getFreedBed: function () { |
| | | console.log('获取空闲床位'); |
| | | let _this = this; |
| | | let dateStr = MTools.formatDate(_this.projService.yyTime, 'yyyy/MM/dd') + " " + _this.projService.bedState.startTimeForm + ":00"; |
| | | let startTime = new Date(dateStr); |
| | | if (!_this.projService.bedState.startTimeForm || !_this.projService.totalTime) { |
| | | return; |
| | | } |
| | | AjaxProxy.requst({ |
| | | app: _this, |
| | | data: { |
| | | startTime: startTime, |
| | | totalTime: _this.projService.totalTime, |
| | | id: _this.projService.id |
| | | }, |
| | | url: basePath + '/admin/bedInfo/showFreedBed', |
| | | callback: function (data) { |
| | | _this.beds = data.rows; |
| | | } |
| | | }); |
| | | } |
| | | , |
| | | getFreedBeautyd: function (index) { |
| | | console.log("获取美疗师"); |
| | | let _this = this; |
| | | let projService = _this.projService; |
| | | let beStates = projService.serviceItems[index]; |
| | | |
| | | if (beStates == null || MTools.isBlank(beStates.beginTimeForm) || MTools.isBlank(beStates.endTimeForm ) ){ |
| | | return; |
| | | } |
| | | let beginTimeStr = MTools.formatDate(_this.projService.yyTime, 'yyyy/MM/dd') + " " + beStates.beginTimeForm + ":00"; |
| | | let beginTime = new Date(beginTimeStr); |
| | | let endTimeStr = MTools.formatDate(_this.projService.yyTime, 'yyyy/MM/dd') + " " + beStates.endTimeForm + ":00"; |
| | | let endTime = new Date(endTimeStr); |
| | | |
| | | AjaxProxy.requst({ |
| | | app: _this, |
| | | data: { |
| | | beginTime: beginTime, |
| | | endTime: endTime, |
| | | servicesId: _this.projService.id |
| | | }, |
| | | url: basePath + '/admin/beautiWork/getPaiBanBeauticianList', |
| | | callback: function (data) { |
| | | |
| | | if (data.rows.length > 0) { |
| | | _this.beauty = data.rows; |
| | | } |
| | | |
| | | } |
| | | }); |
| | | |
| | | |
| | | }, |
| | | changeTimeLength:function() { |
| | | let _this = this; |
| | | |
| | | var totalTime = 0; |
| | | _this.projService.serviceItems.forEach(item => { |
| | | totalTime += parseInt(item.projInfo.timeLength); |
| | | }); |
| | | _this.projService.totalTime = totalTime; |
| | | _this.changeYyTime(); |
| | | } |
| | | |
| | | }, |
| | | filters: |
| | | { |
| | | format: function (value, patten) { |
| | | if (!value) return ''; |
| | | return MTools.formatDate(value, patten) |
| | | } |
| | | , |
| | | } |
| | | , |
| | | |
| | | }) |
| | | |
| | | |
| | | </script> |
| | | </body> |
| | | </html> |