|
@@ -92,13 +92,13 @@
|
|
|
<a-row :gutter="20">
|
|
|
<a-col :span="11">
|
|
|
<a-form-model-item prop="startTime">
|
|
|
- <a-time-picker ref="startTime" v-model="form.startTime" @change="isResetPeriodPrice('startTime', $event)" format="HH:mm" placeholder="请选择开始时间" class="time-picker" />
|
|
|
+ <a-time-picker v-model="form.startTime" @change="isResetPeriodPrice('startTime', $event)" format="HH:mm" placeholder="请选择开始时间" class="time-picker" />
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col :span="2">至</a-col>
|
|
|
<a-col :span="11">
|
|
|
<a-form-model-item prop="endTime">
|
|
|
- <a-time-picker ref="endTime" v-model="form.endTime" @change="isResetPeriodPrice('endTime', $event)" format="HH:mm" placeholder="请选择结束时间" class="time-picker" />
|
|
|
+ <a-time-picker v-model="form.endTime" @change="isResetPeriodPrice('endTime', $event)" format="HH:mm" placeholder="请选择结束时间" class="time-picker" />
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
@@ -106,7 +106,13 @@
|
|
|
</a-col>
|
|
|
<!-- 时段价格设置 start -->
|
|
|
<a-col :span="24">
|
|
|
- <a-form-model-item label="时段价格" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }" prop="periodPrice">
|
|
|
+ <a-form-model-item :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }" prop="periodPrice">
|
|
|
+ <div slot="label" class="form-item-label">
|
|
|
+ <a-tooltip placement="right" arrow-point-at-center title="时段价格是指车主在不同时段洗车需要支付不同的价格,主要用于日间服务和夜间服务的差异化管理,达到调节流量、集客引流的效果。不同时段区间采用起始时间包含,结束时间不包含原则。例如:时段区间为06:00(含)-22:00(不含),普通洗车10元;时间区间为22:00(含)-06:00(不含),普通洗车8元。客户在6点00分01秒普通洗车为10元,客户在22点00分01秒普通洗车为8元。">
|
|
|
+ 时段价格
|
|
|
+ <a-icon :style="{ fontSize: '18px', color: '#1890ff', verticalAlign: 'sub' }" type="question-circle" />
|
|
|
+ </a-tooltip>
|
|
|
+ </div>
|
|
|
<a-row :gutter="20" v-for="(item, ind) in form.periodPrice" :key="ind">
|
|
|
<a-col :span="9">
|
|
|
<a-row :gutter="20">
|
|
@@ -118,7 +124,7 @@
|
|
|
<a-col :span="2">至</a-col>
|
|
|
<a-col :span="11">
|
|
|
<a-form-model-item :prop="'periodPrice.'+ ind + '.endTime'" :rules="{required: true, message: '请选择结束时间', trigger: 'change'}">
|
|
|
- <a-time-picker v-model="item.endTime" format="HH:mm" placeholder="请选择" class="time-picker" />
|
|
|
+ <a-time-picker v-model="item.endTime" :default-open-value="item.startTime" @change="isResetBelowPeriodPrice($event, ind)" format="HH:mm" placeholder="请选择" class="time-picker" />
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
@@ -132,8 +138,8 @@
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
</a-col>
|
|
|
- <a-col :span="2">
|
|
|
- <a-icon type="delete" title="删除" @click="delPeriodPrice(ind)" :style="{ fontSize: '20px', color: 'red', padding: '0 10px' }" />
|
|
|
+ <a-col :span="1">
|
|
|
+ <a-icon type="delete" title="删除" @click="delPeriodPrice(ind)" :style="{ fontSize: '20px', color: 'red' }" />
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
<a-button type="dashed" @click="setTimeInterval" class="setTimeInterval"><a-icon type="plus" />添加时段</a-button>
|
|
@@ -191,9 +197,9 @@
|
|
|
isShow: this.openModal, // 弹框是否展示
|
|
|
form: {
|
|
|
name: '', // 网点名称
|
|
|
- addrProvince: '', // 省
|
|
|
- addrCity: '', // 市
|
|
|
- addrDistrict: '', // 区
|
|
|
+ addrProvince: undefined, // 省
|
|
|
+ addrCity: undefined, // 市
|
|
|
+ addrDistrict: undefined, // 区
|
|
|
addrDetail: '', // 详细地址
|
|
|
equipment: '', // 设备
|
|
|
sign: [], // 网点标签
|
|
@@ -252,6 +258,7 @@
|
|
|
serviceType: [], // 服务类型 change前的值
|
|
|
startTime: null, // 营业时间开始时间 change前的值
|
|
|
endTime: null, // 营业时间结束时间 change前的值
|
|
|
+ subEndTime: [], // 时段价格 时段区间结束时间 change前的值
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -298,7 +305,7 @@
|
|
|
this.$refs.ruleForm.resetFields()
|
|
|
this.isShow = false
|
|
|
},
|
|
|
- // 是否重置时段价格
|
|
|
+ // 是否重置时段价格 (更改服务类型、营业开始结束时间)
|
|
|
isResetPeriodPrice(type, val){
|
|
|
// type: serviceType 服务类型 startTime 营业时间 开始时间 endTime 营业时间 结束时间
|
|
|
const _this = this
|
|
@@ -320,6 +327,26 @@
|
|
|
}
|
|
|
},0)
|
|
|
},
|
|
|
+ // 是否重置时段价格 (更改时段价格区间结束时间)
|
|
|
+ isResetBelowPeriodPrice(val, ind){
|
|
|
+ const _this = this
|
|
|
+ // 更改已设置过的时段时间(因为有下一个时段的前提是当前时段结束时间已设置)
|
|
|
+ if(this.form.periodPrice[ind + 1]){
|
|
|
+ _this.$confirm({
|
|
|
+ title: '提示',
|
|
|
+ content: '更改已设置过的时段区间,其之后的时段区间将会被清空,确定要更改吗?',
|
|
|
+ onOk() {
|
|
|
+ _this.subEndTime[ind] = val
|
|
|
+ _this.form.periodPrice.splice(ind + 1, _this.form.periodPrice.length - Number(ind + 1))
|
|
|
+ },
|
|
|
+ onCancel() {
|
|
|
+ _this.form.periodPrice[ind].endTime = _this.subEndTime[ind]
|
|
|
+ },
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ _this.subEndTime[ind] = val
|
|
|
+ }
|
|
|
+ },
|
|
|
// 选择设备
|
|
|
closeChooseEquipment(val, name){
|
|
|
if(val){
|
|
@@ -365,9 +392,10 @@
|
|
|
// 删除时段价格
|
|
|
delPeriodPrice(ind){
|
|
|
const _this = this
|
|
|
+ let msg = Number(ind + 1) == _this.form.periodPrice.length ? '确定要删除该时段吗?' : '确定要删除该时段以及其之后已设置的时段吗?'
|
|
|
_this.$confirm({
|
|
|
title: '提示',
|
|
|
- content: '确定要删除该时段价格吗?',
|
|
|
+ content: msg,
|
|
|
onOk() {
|
|
|
_this.form.periodPrice.splice(ind, _this.form.periodPrice.length - ind)
|
|
|
}
|
|
@@ -395,6 +423,10 @@
|
|
|
.default-form-item{
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
+ .form-item-label{
|
|
|
+ display: inline-block;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
.form-item-required{
|
|
|
.ant-form-item-label{
|
|
|
label:before{
|