<!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="javascript: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">
|
<el-button size="medium" type="primary" @click="addProjForm">新增项目</el-button>
|
</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>次数</th>
|
<th>划扣金额</th>
|
<th width="100px">服务时长(分钟)</th>
|
<th>服务时间</th>
|
<th width="300px">美疗师</th>
|
<th style="width: 100px;">提成</th>
|
<th>操作</th>
|
</tr>
|
|
<tr v-for="(item,index) in projService.serviceItems">
|
<td>{{item.projInfo.name}}【{{item.projUse.source}}】</td>
|
<td>{{item.count}}</td>
|
<td>{{item.projUse.price * item.count}}</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>
|
<td>
|
<el-button size="mini" type="danger"
|
@click="handleDelete(index)">删除</el-button>
|
</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="@{/js/systools/MJsBase.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: [],
|
// 删除的服务单明细
|
deleteItems : [],
|
//美疗师
|
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;
|
console.log(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,
|
state : projService.state,
|
totalTime: projService.totalTime,
|
remark: projService.remark,
|
bedId: projService.bedId,
|
devisionId: projService.devisionId,
|
yyTime: projService.yyTime,
|
serviceItems: serviceItems,
|
deleteItems : _this.deleteItems,
|
//床位时间
|
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 () {
|
console.log("获取美疗师");
|
let _this = this;
|
let projService = _this.projService;
|
let beStates = projService.serviceItems[0];
|
console.log(beStates);
|
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();
|
},
|
handleDelete : function(index) {
|
let _this = this;
|
var items = this.projService.serviceItems;
|
if (items.length > 1) {
|
let delItem = items.splice(index, 1);
|
if (delItem[0].servicesId) {
|
AjaxProxy.requst({
|
app: _this,
|
url: basePath + "/admin/projService/delServiceOrderItems?id="+delItem[0].id,
|
callback: function (data) {
|
_this.$message({
|
message: data.info,
|
type: 'success'
|
});
|
}
|
});
|
}
|
|
} else {
|
this.$message({
|
message: '需保留一个项目',
|
type: 'error'
|
});
|
}
|
},
|
addProjForm() {
|
var vipId = this.projService.vipInfo.id;
|
layer.full(layer.open({
|
type: 2,
|
title: "添加项目",
|
maxmin: true,
|
area: [MUI.SIZE_L, '500px'],
|
content: [basePath + '/admin/redirect/hive/beautySalon/yyServiceAddForm?id='+vipId]
|
}));
|
},
|
addProjItems(rows) {
|
let _this = this;
|
var serviceItems = this.projService.serviceItems;
|
|
for (let i = 0; i < rows.length; i++) {
|
let row = rows[i]
|
|
let flag = false;
|
for (let j = 0; j < serviceItems.length; j++) {
|
let item = serviceItems[j];
|
if (item.puseId == row.projUse.id) {
|
flag = true;
|
break;
|
}
|
}
|
|
if (flag) {
|
continue;
|
}
|
|
let items = [];
|
row.projUse.projInfo.name = row.name + "--" + row.projUse.projName;
|
items.push({
|
puseId : row.projUse.id,
|
count : row.count,
|
projUse : row.projUse,
|
projInfo : row.projUse.projInfo
|
});
|
|
let data = {};
|
data.id = _this.projService.id;
|
data.state = _this.projService.state;
|
data.serviceItems = items;
|
|
AjaxProxy.requst({
|
app: _this,
|
data : data,
|
url: basePath + "/admin/projService/addService",
|
callback: function (data) {
|
_this.$message({
|
message: "添加成功",
|
type: 'success'
|
});
|
|
_this.loadInfo();
|
}
|
});
|
}
|
|
},
|
|
|
},
|
filters:
|
{
|
format: function (value, patten) {
|
if (!value) return '';
|
return MTools.formatDate(value, patten)
|
}
|
,
|
}
|
,
|
|
})
|
|
|
</script>
|
</body>
|
</html>
|
