var app = new Vue({
el: "#tou_bu",
data: {
isEdit: false,
thisBeforeDay: [],
selAllWeekDay: [], //已经选择的所有天数
/**
*数组存放的每一个营业时间key(week--show(true)--当前营业时间选择的天数)
*key(time) 选择的时间
*/
businessHours: []
},
methods: {
//编辑营业时间
editBusHours: function(index) {
this.thisBeforeDay = [];
//如果有一个状态 还是编辑状态 提示
var hasEditItem = this.businessHours.filter(function(v, i, a) {
return v.isEdit == true;
});
if(hasEditItem.length > 0) {
this.$Message.error('请先确定营业时间再编辑!');
return;
}
//根据已经选择的 修改
var thisData = this.businessHours[index].week;
this.businessHours[index].isEdit = true;
for(var i = 0; i < thisData.length; i++) {
thisData[i].show = true;
if(this.selAllWeekDay.indexOf(thisData[i].day) > -1 && !thisData[i].selClass["css-1cIPt"]) {
thisData[i].selClass["css-1cIPt"] = false;
thisData[i].selClass["css-2l0bV"] = false;
thisData[i].selClass["css-2QjyB"] = true;
}
if(thisData[i].selected) {
//保存选中的天数
this.thisBeforeDay.push(thisData[i].day);
}
}
this.isEdit = true;
},
//删除一条营业记录
delBusHours: function(index) {
var thisData = this.businessHours[index].week;
var thisSelDay = thisData.filter(function(value, index, arr) {
return value.show;
}).map(function(value, index, arr) {
return value.day;
});
//
this.selAllWeekDay = this.selAllWeekDay.filter(function(v, i, arr) {
return thisSelDay.indexOf(v) == -1;
});
//改变已添加的营业时间的天的状态
var thisData = this.businessHours;
for(var i = 0; i < thisData.length; i++) {
var thisWeek = thisData[i].week;
for(var j = 0; j < thisWeek; j++) {
if(selAllWeekDay.indexOf(thisWeek[j].day)) {
thisWeek[j].selClass["css-1cIPt"] = false;
thisWeek[j].selClass["css-2l0bV"] = true;
thisWeek[j].selClass["css-2QjyB"] = false;
}
}
}
this.businessHours.splice(index, 1);
},
//取消
cancelBusHours: function(index) {
// thisBeforeDay
this.businessHours[index].isEdit = false;
var thisData = this.businessHours[index].week,
hasSel = false,
thisSelDays=[];
for(var i = 0; i < thisData.length; i++) {
//没有选中的不显示
if(this.thisBeforeDay.indexOf(thisData[i].day) > -1) {
thisData[i].selClass["css-1cIPt"] = true;
thisData[i].selClass["css-2l0bV"] = false;
thisData[i].selClass["css-2QjyB"] = false;
thisData[i].show = true;
hasSel = true;
}
if(!thisData[i].selClass["css-1cIPt"]) {
thisData[i].show = false;
thisData[i].selected = false;
}else{
//保存当前选中的天数
thisSelDays.push(thisData[i].day);
}
}
//修改已经选中的营业时间的天数
for(var i = 0; i < this.businessHours.length; i++) {
if(i == index) continue;
var thisWeek = this.businessHours[i].week;
for(var j = 0; j < thisWeek.length; j++) {
if(this.thisBeforeDay.indexOf(thisWeek[j].day) > -1) {
thisWeek[j].selClass["css-1cIPt"] = false;
thisWeek[j].selClass["css-2l0bV"] = false;
thisWeek[j].selClass["css-2QjyB"] = true;
}
}
}
//如果没有选中就不显示
if(!hasSel) {
this.businessHours.splice(index, 1);
}
this.isEdit = false;
//当前记录之前没有选中过
if(this.thisBeforeDay.length==0){
this.selAllWeekDay=this.selAllWeekDay.filter(function(v,i,arr){
return thisSelDays.indexOf(v)==-1;
});
}
//当前记录之前选中的值清空
this.thisBeforeDay = [];
},
//确定
sureBusHours: function(index) {
this.businessHours[index].isEdit = false;
//修改显示状态
var thisData = this.businessHours[index].week,
hasSel = false;
for(var i = 0; i < thisData.length; i++) {
//没有选中的不显示
if(!thisData[i].selClass["css-1cIPt"]) {
thisData[i].show = false;
} else if(!hasSel) {
hasSel = true;
}
}
this.isEdit = false;
//如果当前没有选中的日期 就不增加这一条
if(!hasSel) {
this.businessHours.splice(index, 1);
}
//修改已经选中的营业时间的天数
for(var i = 0; i < this.businessHours.length; i++) {
var thisWeek = this.businessHours[i].week;
for(var j = 0; j < thisWeek.length; j++) {
if(this.selAllWeekDay.indexOf(thisWeek[j].day) == -1 && !thisWeek[j].selected) {
thisWeek[j].selClass["css-2QjyB"] = false;
thisWeek[j].selClass["css-1cIPt"] = false;
thisWeek[j].selClass["css-2l0bV"] = true;
}
}
}
//当前记录之前选中的值清空
this.thisBeforeDay = [];
},
checkedWeekDay: function(isChecked, index, iIndex, day) { //是否可以选，所在行的索引，所在日期缩索引.选择的日期
if(!isChecked) {
this.businessHours[index].week[iIndex].selClass["css-2l0bV"] = !this.businessHours[index].week[iIndex].selClass["css-2l0bV"];
this.businessHours[index].week[iIndex].selClass["css-1cIPt"] = !this.businessHours[index].week[iIndex].selClass["css-1cIPt"];
}
//如果选中
if(this.businessHours[index].week[iIndex].selClass["css-1cIPt"]) {
this.selAllWeekDay.push(day);
//修改当前条日的状态
this.businessHours[index].week[iIndex].selected = true;
this.businessHours[index].week[iIndex].show = true;
} else {
this.selAllWeekDay.splice(this.selAllWeekDay.indexOf(day), 1);
this.businessHours[index].week[iIndex].selected = false;
this.businessHours[index].week[iIndex].show = false;
}
},
//添加一条营业记录
addBusinessHours: function() {
//
var thisJson = {
week: [{
day: "周一",
selClass: {
"css-1cIPt": false, //选中的样式
"css-2l0bV": false, //未选择
"css-2QjyB": false, //不可选
},
selected: false,
show: false
}, {
day: "周二",
selClass: {
"css-1cIPt": false,
"css-2l0bV": false, //未选择
"css-2QjyB": false,
},
selected: false,
show: false
}, {
day: "周三",
selClass: {
"css-1cIPt": false,
"css-2l0bV": false, //未选择
"css-2QjyB": false,
},
selected: true,
show: false
}, {
day: "周四",
selClass: {
"css-1cIPt": false,
"css-2l0bV": false, //未选择
"css-2QjyB": false,
},
selected: false,
show: false
}, {
day: "周五",
selClass: {
"css-1cIPt": false,
"css-2l0bV": false, //未选择
"css-2QjyB": true,
},
selected: false,
show: false
}, {
day: "周六",
selClass: {
"css-1cIPt": false,
"css-2l0bV": false, //未选择
"css-2QjyB": false,
},
selected: false,
show: false
}, {
day: "周日",
selClass: {
"css-1cIPt": false,
"css-2l0bV": false, //未选择
"css-2QjyB": false,
},
selected: false,
show: false
}],
isEdit: true, //是否编辑状态
time: ['', ''] //选中的时间
};
//修改日期的状态
for(var i = 0; i < thisJson.week.length; i++) {
//已经选择过
if(this.selAllWeekDay.indexOf(thisJson.week[i].day) > -1) {
thisJson.week[i].selClass["css-1cIPt"] = false;
thisJson.week[i].selClass["css-2l0bV"] = false;
thisJson.week[i].selClass["css-2QjyB"] = true;
thisJson.week[i].selected = false;
thisJson.week[i].show = false;
} else {
thisJson.week[i].selClass["css-1cIPt"] = false;
thisJson.week[i].selClass["css-2l0bV"] = true;
thisJson.week[i].selClass["css-2QjyB"] = false;
thisJson.week[i].selected = true;
thisJson.week[i].show = true;
}
}
this.businessHours.push(thisJson);
this.isEdit = true;
},
getBack() {
var that = this;
al.ajax({
url: '/soe/smc/b',
callback: function(result, data, msg) {
var thisData = data,
thisArr = [],
selDays = [];
areas = [];
points = {};
for(var i = 0; i < thisData.length; i++) {
var thisJ = {
week: [{
day: "周一",
selClass: {
"css-1cIPt": false, //选中的样式
"css-2l0bV": true, //未选择
"css-2QjyB": false, //不可选
},
selected: false,
show: false
}, {
day: "周二",
selClass: {
"css-1cIPt": false,
"css-2l0bV": true, //未选择
"css-2QjyB": false,
},
selected: false,
show: false
}, {
day: "周三",
selClass: {
"css-1cIPt": false,
"css-2l0bV": true, //未选择
"css-2QjyB": false,
},
selected: false,
show: false
}, {
day: "周四",
selClass: {
"css-1cIPt": false,
"css-2l0bV": true, //未选择
"css-2QjyB": false,
},
selected: false,
show: false
}, {
day: "周五",
selClass: {
"css-1cIPt": false,
"css-2l0bV": true, //未选择
"css-2QjyB": false,
},
selected: false,
show: false
}, {
day: "周六",
selClass: {
"css-1cIPt": false,
"css-2l0bV": true, //未选择
"css-2QjyB": false,
},
selected: false,
show: false
}, {
day: "周日",
selClass: {
"css-1cIPt": false,
"css-2l0bV": true, //未选择
"css-2QjyB": false,
},
selected: false,
show: false
}],
isEdit: false, //是否编辑状态
time: [] //选中的时间
};
//先设置week
var thisWeek = thisData[i].WEEKDAY.split(",");
for(var j = 0; j < thisJ.week.length; j++) {
if(thisWeek.indexOf(thisJ.week[j].day) > -1) {
thisJ.week[j].selected = true;
thisJ.week[j].show = true;
/* "css-1cIPt": false, //选中的样式
"css-2l0bV": true, //未选择
"css-2QjyB": false, //不可选 */
thisJ.week[j].selClass["css-1cIPt"] = true;
thisJ.week[j].selClass["css-2l0bV"] = false;
}
}
thisJ.time.push(thisData[i]["START_HOUR"] + ":" + thisData[i]["START_MIN"]);
thisJ.time.push(thisData[i]["END_HOUR"] + ":" + thisData[i]["END_MIN"]);
selDays = selDays.concat(thisWeek);
thisArr.push(thisJ);
}
//修改营业时间改为不可用
for(var j = 0; j < thisArr.length; j++) {
var thisWeek = thisArr[j].week;
for(var k = 0; k < thisWeek.length; k++) {
if(!thisWeek[k].selected && selDays.indexOf(thisWeek[k].day) > -1) {
thisArr[j].week[k].selClass["css-2QjyB"] = true;
}
}
}
console.log(JSON.stringify(thisArr));
areas = areas.concat($("#provinceCode").val(), $("#cityCode").val(), $("#townCode").val());
that.businessHours = thisArr;
that.selAllWeekDay = selDays;
that.detail_address = $("#detailAddress").val();
that.value2 = areas;
that.hasPoint = true;
that.detail_point = {
lat: Number($("#lat").val()),
lng: Number($("#lon").val())
};
}
});
}
},
mounted() {
this.getBack();
this.$Message.config({
top: 360
});
}
});
<div class="ant-form-item-control-wrapper ant-col-sm-21 ant-col-md-21 ant-col-lg-21 ant-col-xl-22">
<div class="ant-form-item-control has-success">
<div v-for="(t,index) in businessHours">
<div style="margin-bottom: 6px;">
<div style="display: inline-block;">
<time-picker type="timerange" v-model="t.time" format="HH:mm" placement="bottom-end" placeholder="请选择营业时间" style="width: 168px"></time-picker>
</div>
<div class="css-i2NDe" style="display: inline-block;vertical-align: bottom;">
<!-- 编辑 -->
<div v-if="t.isEdit">
<div style="display: inline-block;vertical-align: bottom;">
<ul class="css-394Q6">
<li v-for="(item,iIndex) in t.week" @click="checkedWeekDay(item.selClass['css-2QjyB'],index,iIndex,item.day)" :class="[item.selClass]" v-bind:title="item.day">{{item.day}}</li>
</ul>
</div>
<div class="css-2NTL7" style="margin-left: 10px;display: inline;">
<a style="margin-right: 4px;" @click="sureBusHours(index)">确定</a><span class="ant-divider"></span>
<a style="margin-right: 4px;" @click="cancelBusHours(index)">取消</a>
</div>
</div>
<!-- 显示 -->
<div v-else style="margin: 0 15px;">
<span v-for="item in t.week" v-if="item.show" style="margin-right: 2px;width: 30px;height: 30px;display: inline-block;text-align:center" v-if="item.selected">{{item.day}}</span>
<div class="css-2NTL7" style="margin-left: 23px;display: inline-block;">
<a style="margin-right: 4px;" @click="editBusHours(index)">编辑</a><span class="ant-divider"></span>
<a style="margin-right: 4px;" @click="delBusHours(index)">删除</a>
</div>
</div>
</div>
</div>
</div>
<div class="css-3gWkK">
<a href="javascript:;" @click="addBusinessHours" v-if="selAllWeekDay.length<7&&!isEdit">新增时间段</a>
</div>
</div>
</div>
