<!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>
|
|
<div class="row">
|
<div class="panel panel-primary">
|
<div class="panel-heading">
|
美疗师排班
|
</div>
|
<div class="panel-body">
|
<el-form ref="form">
|
|
<el-form-item label="排班时间">
|
<el-col :span="11">
|
<el-date-picker @change="loadInfo()" type="date" placeholder="选择日期" v-model="dateTime"></el-date-picker>
|
</el-col>
|
</el-form-item>
|
|
<table class="table table-bordered text-center">
|
<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,i) in beaWorkForms">
|
<td style="width:150px;">{{item.date|format('yy年MM月dd日')}}</td>
|
<td v-for="(timeCode,j) in workTimes">
|
<el-select style="width: 100%;" v-model="staffIds[i*workTimes.length+j]"
|
placeholder="请选择" multiple>
|
<el-option
|
v-for="item in mlss"
|
:key="item.suId"
|
:label="item.suName"
|
:value="item.suId">
|
</el-option>
|
</el-select>
|
</td>
|
</tr>
|
|
</tbody>
|
|
</table>
|
<div class="form-group ">
|
<div class="col-sm-12 text-center">
|
<el-button type="primary" :disabled="isBefore" @click="submit()" >保存</el-button>
|
</div>
|
</div>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<script type="text/javascript" th:src="@{/js/plugin/jquery-2.1.4.min.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 app = new Vue({
|
el: '#app',
|
data: {
|
workTimes: {},
|
tableData: [],
|
staffIds: [],
|
dateTime:new Date(),
|
},
|
computed:{
|
isBefore: function(){
|
let time=parseInt(MTools.formatDate(this.dateTime,'yyyyMMdd'));
|
let now=parseInt(MTools.formatDate(new Date(),'yyyyMMdd'));
|
console.log(time,now,time>now);
|
return time<now;
|
}
|
|
},
|
created: function () {
|
this.loadInfo();
|
},
|
|
mounted: function () {
|
// this.initDate();
|
},
|
|
|
methods: {
|
|
loadInfo: function () {
|
var _this = this;
|
AjaxProxy.requst({
|
app: _this,
|
data:{'dateTime':MTools.formatDate(_this.dateTime,'yyyy-MM-dd')},
|
async: false,
|
url: basePath + '/admin/beautiWork/getPaiBanInfo',
|
callback: function (data) {
|
let map = data.mapInfo;
|
_this.dateTime = map.dateTime;
|
//班次
|
_this.workTimes = map.workTimes;
|
//获取最近一周的日期
|
_this.beaWorkForms = map.beaWorkForms;
|
_this.mlss = map.mlss;
|
let staffIds = [];
|
//设置选中的staffIds
|
for (let i = 0; i < _this.beaWorkForms.length; i++) {
|
//获取到已经排班的人
|
let queryListWorks = _this.beaWorkForms[i].queryListWorks;
|
for (let j = 0; j < queryListWorks.length; j++) {
|
console.log(i * queryListWorks.length + j, queryListWorks[j])
|
if (queryListWorks[j].length > 0) {
|
let ids = [];
|
queryListWorks[j].forEach(work => {
|
ids.push(work.staffId);
|
});
|
staffIds[i * queryListWorks.length + j] = ids;
|
} else {
|
staffIds[i * queryListWorks.length + j] = [];
|
}
|
}
|
}
|
console.log('初始化staffIds', staffIds);
|
_this.staffIds = staffIds;
|
|
}
|
})
|
},
|
|
initDate: function () {
|
|
|
},
|
|
submit: function () {
|
console.log(this.staffIds);
|
let _this = this;
|
let param = {
|
dateTime: MTools.formatDate(_this.dateTime,'yyyy-MM-dd'),
|
works: [],
|
};
|
for (let i = 0; i < _this.beaWorkForms.length; i++) {
|
for (let j = 0; j < _this.workTimes.length; j++) {
|
var work = new Object();
|
work.paibanCode = MTools.formatDate(_this.beaWorkForms[i].date, 'yyyyMMdd');
|
work.workId = _this.workTimes[j].id;
|
work.staffIds = _this.staffIds[i * _this.workTimes.length + j].join(',');
|
param.works.push(work);
|
}
|
|
}
|
console.log(param);
|
AjaxProxy.requst(
|
{
|
app: _this,
|
data: param,
|
url: basePath + '/admin/beautiWork/ddOrModifyWork',
|
callback: function (data) {
|
_this.$message({
|
message: data.info,
|
type: 'success'
|
});
|
}
|
});
|
},
|
|
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>
|
