chenrui 4 年之前
父節點
當前提交
0acca3dfef
共有 1 個文件被更改,包括 59 次插入16 次删除
  1. 59 16
      src/views/CarWashManagement/AddCarWashModal.vue

+ 59 - 16
src/views/CarWashManagement/AddCarWashModal.vue

@@ -84,7 +84,7 @@
         </a-col>
         </a-col>
         <a-col :span="12">
         <a-col :span="12">
           <a-form-model-item label="服务类型" prop="serviceType">
           <a-form-model-item label="服务类型" prop="serviceType">
-            <v-select ref="serviceType" v-model="form.serviceType" @change="isResetPeriodPrice" showArrow mode="multiple" placeholder="请选择服务类型" code="CHECK_ENABLE_STATE"></v-select>
+            <v-select ref="serviceType" v-model="form.serviceType" @change="isResetPeriodPrice('serviceType', $event)" showArrow mode="multiple" placeholder="请选择服务类型" code="CHECK_ENABLE_STATE"></v-select>
           </a-form-model-item>
           </a-form-model-item>
         </a-col>
         </a-col>
         <a-col :span="12">
         <a-col :span="12">
@@ -92,13 +92,13 @@
             <a-row :gutter="20">
             <a-row :gutter="20">
               <a-col :span="11">
               <a-col :span="11">
                 <a-form-model-item prop="startTime">
                 <a-form-model-item prop="startTime">
-                  <a-time-picker ref="startTime" v-model="form.startTime" @change="isResetPeriodPrice" format="HH:mm" placeholder="请选择开始时间" class="time-picker" />
+                  <a-time-picker ref="startTime" v-model="form.startTime" @change="isResetPeriodPrice('startTime', $event)" format="HH:mm" placeholder="请选择开始时间" class="time-picker" />
                 </a-form-model-item>
                 </a-form-model-item>
               </a-col>
               </a-col>
               <a-col :span="2">至</a-col>
               <a-col :span="2">至</a-col>
               <a-col :span="11">
               <a-col :span="11">
                 <a-form-model-item prop="endTime">
                 <a-form-model-item prop="endTime">
-                  <a-time-picker ref="endTime" v-model="form.endTime" @change="isResetPeriodPrice" format="HH:mm" placeholder="请选择结束时间" class="time-picker" />
+                  <a-time-picker ref="endTime" v-model="form.endTime" @change="isResetPeriodPrice('endTime', $event)" format="HH:mm" placeholder="请选择结束时间" class="time-picker" />
                 </a-form-model-item>
                 </a-form-model-item>
               </a-col>
               </a-col>
             </a-row>
             </a-row>
@@ -108,7 +108,7 @@
         <a-col :span="24">
         <a-col :span="24">
           <a-form-model-item label="时段价格" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }" prop="periodPrice">
           <a-form-model-item label="时段价格" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }" prop="periodPrice">
             <a-row :gutter="20" v-for="(item, ind) in form.periodPrice" :key="ind">
             <a-row :gutter="20" v-for="(item, ind) in form.periodPrice" :key="ind">
-              <a-col :span="10">
+              <a-col :span="9">
                 <a-row :gutter="20">
                 <a-row :gutter="20">
                   <a-col :span="11">
                   <a-col :span="11">
                     <a-form-model-item :prop="'periodPrice.'+ ind + '.startTime'" :rules="{required: true, message: '请选择开始时间', trigger: 'change'}">
                     <a-form-model-item :prop="'periodPrice.'+ ind + '.startTime'" :rules="{required: true, message: '请选择开始时间', trigger: 'change'}">
@@ -123,7 +123,7 @@
                   </a-col>
                   </a-col>
                 </a-row>
                 </a-row>
               </a-col>
               </a-col>
-              <a-col :span="14">
+              <a-col :span="13">
                 <a-row :gutter="20">
                 <a-row :gutter="20">
                   <a-col :span="8" v-for="(priceItem, subInd) in item.price" :key="subInd">
                   <a-col :span="8" v-for="(priceItem, subInd) in item.price" :key="subInd">
                     <a-form-model-item :prop="'periodPrice.'+ ind +'.price.'+ subInd + '.value'" :rules="{required: true, message: `请输入【${priceItem.name}】单价`, trigger: 'blur'}">
                     <a-form-model-item :prop="'periodPrice.'+ ind +'.price.'+ subInd + '.value'" :rules="{required: true, message: `请输入【${priceItem.name}】单价`, trigger: 'blur'}">
@@ -132,6 +132,9 @@
                   </a-col>
                   </a-col>
                 </a-row>
                 </a-row>
               </a-col>
               </a-col>
+              <a-col :span="2">
+                <a-icon type="delete" title="删除" @click="delPeriodPrice(ind)" :style="{ fontSize: '20px', color: 'red', padding: '0 10px' }" />
+              </a-col>
             </a-row>
             </a-row>
             <a-button type="dashed" @click="setTimeInterval" class="setTimeInterval"><a-icon type="plus" />添加时段</a-button>
             <a-button type="dashed" @click="setTimeInterval" class="setTimeInterval"><a-icon type="plus" />添加时段</a-button>
           </a-form-model-item>
           </a-form-model-item>
@@ -242,10 +245,13 @@
           ],
           ],
           periodPrice: [
           periodPrice: [
             { required: true, message: '请设置时段价格', trigger: 'change' }
             { required: true, message: '请设置时段价格', trigger: 'change' }
-          ],
+          ]
         },
         },
         openEquipmentModal: false  ,//  选择设备  弹框展示状态
         openEquipmentModal: false  ,//  选择设备  弹框展示状态
         equipmentName: '',  //  选中的设备  名称
         equipmentName: '',  //  选中的设备  名称
+        serviceType: [],  //  服务类型  change前的值
+        startTime: null,  //  营业时间开始时间  change前的值
+        endTime: null,  //  营业时间结束时间  change前的值
       }
       }
     },
     },
     methods: {
     methods: {
@@ -264,30 +270,55 @@
             let formData = JSON.parse(JSON.stringify(this.form))
             let formData = JSON.parse(JSON.stringify(this.form))
             //  校验营业时间结束时间是否与时段价格一致
             //  校验营业时间结束时间是否与时段价格一致
             let endTime = formData.periodPrice[formData.periodPrice.length - 1].endTime
             let endTime = formData.periodPrice[formData.periodPrice.length - 1].endTime
-            if(formData.endTime != endTime){
+            if(this.timeFormat(formData.endTime) != this.timeFormat(endTime)){
               this.$message.error('时段价格与营业时间不一致,请修改后再保存!')
               this.$message.error('时段价格与营业时间不一致,请修改后再保存!')
               return
               return
             }
             }
+            //  提交前时间格式还需转换
             console.log(formData,'-----提交的表单数据')
             console.log(formData,'-----提交的表单数据')
           } else {
           } else {
             return false
             return false
           }
           }
         })
         })
       },
       },
-      //  取消
+      // 时间格式转换
+      timeFormat (time) {
+        const dateTime = new Date(time)
+        const hour = dateTime.getHours()
+        const minute = dateTime.getMinutes()
+        let timeStr = this.addZero(hour) + ':' + this.addZero(minute)
+        return timeStr
+      },
+      // 时间0补位
+      addZero (v) {
+        return v < 10 ? '0' + v : v
+      },
+      // 取消
       resetForm(){
       resetForm(){
         this.$refs.ruleForm.resetFields()
         this.$refs.ruleForm.resetFields()
         this.isShow = false
         this.isShow = false
       },
       },
       // 是否重置时段价格
       // 是否重置时段价格
-      isResetPeriodPrice(){
-        if(this.form.periodPrice.length != 0){
-          this.$warning({
-            title: '提示',
-            content: '更改后已设置的时段价格将会全部清空,请重新填写',
-          })
-          this.form.periodPrice = []
-        }
+      isResetPeriodPrice(type, val){
+        // type: serviceType  服务类型  startTime  营业时间  开始时间  endTime  营业时间  结束时间
+        const _this = this
+        setTimeout(()=>{
+          if(_this.form.periodPrice.length != 0){
+            _this.$confirm({
+              title: '提示',
+              content: '更改后已设置的时段价格将会全部清空,确定要更改吗?',
+              onOk() {
+                type == 'serviceType' ? _this.serviceType = val : type == 'startTime' ? _this.startTime = val : _this.endTime = val
+                _this.form.periodPrice = []
+              },
+              onCancel() {
+                type == 'serviceType' ? _this.form.serviceType = _this.serviceType : type == 'startTime' ? _this.form.startTime = _this.startTime : _this.form.endTime = _this.endTime
+              },
+            })
+          }else{
+            type == 'serviceType' ? _this.serviceType = val : type == 'startTime' ? _this.startTime = val : _this.endTime = val
+          }
+        },0)
       },
       },
       //  选择设备
       //  选择设备
       closeChooseEquipment(val, name){
       closeChooseEquipment(val, name){
@@ -330,6 +361,18 @@
           arr.price.push({ name: this.$refs.serviceType.getNameByCode(item), value: '' })
           arr.price.push({ name: this.$refs.serviceType.getNameByCode(item), value: '' })
         })
         })
         this.form.periodPrice.push(arr)
         this.form.periodPrice.push(arr)
+      },
+      // 删除时段价格
+      delPeriodPrice(ind){
+        const _this = this
+        _this.$confirm({
+          title: '提示',
+          content: '确定要删除该时段价格吗?',
+          onOk() {
+            _this.form.periodPrice.splice(ind, _this.form.periodPrice.length - ind)
+          }
+        })
+        
       }
       }
     },
     },
     watch: {
     watch: {