瀏覽代碼

update 洗车管理

chenrui 4 年之前
父節點
當前提交
f42c92fd91
共有 2 個文件被更改,包括 259 次插入57 次删除
  1. 195 35
      src/views/CarWashManagement/AddCarWashModal.vue
  2. 64 22
      src/views/CarWashManagement/ChooseEquipment.vue

+ 195 - 35
src/views/CarWashManagement/AddCarWashModal.vue

@@ -9,7 +9,7 @@
           </a-form-model-item>
         </a-col>
         <a-col :span="12">
-          <a-form-model-item label="地址" class="ant-sub-form-item">
+          <a-form-model-item label="地址" class="default-form-item form-item-required">
             <a-row :gutter="20">
               <a-col :span="8">
                 <a-form-model-item prop="addrProvince">
@@ -42,15 +42,15 @@
           </a-form-model-item>
         </a-col>
         <a-col :span="24">
-          <a-form-model-item label="详细地址" prop="name" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
-            <a-input v-model="form.name" :maxLength="32" placeholder="请输入详细地址,32个字以内" />
+          <a-form-model-item label="详细地址" prop="addrDetail" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
+            <a-input v-model="form.addrDetail" :maxLength="32" placeholder="请输入详细地址,32个字以内" />
           </a-form-model-item>
         </a-col>
         <a-col :span="12">
-          <a-form-model-item label="设备" prop="name">
+          <a-form-model-item label="设备" prop="equipment" class="default-form-item">
             <a-row :gutter="20">
               <a-col :span="19">
-                
+                <a-tag v-if="equipmentName" color="blue">{{equipmentName}}</a-tag>
               </a-col>
               <a-col :span="5">
                 <a-button type="primary" size="small" class="small-btn" @click="openEquipmentModal=true">选择</a-button>
@@ -59,16 +59,15 @@
           </a-form-model-item>
         </a-col>
         <a-col :span="12">
-          <!-- 多选 -->
-          <a-form-model-item label="网点标签" prop="name">
-            <v-select ref="name" allowClear placeholder="请选择网点标签" v-model="form.name" code="CHECK_ENABLE_STATE"></v-select>
+          <a-form-model-item label="网点标签" prop="sign">
+            <v-select ref="sign" mode="multiple" placeholder="请选择网点标签" v-model="form.sign" code="CHECK_ENABLE_STATE"></v-select>
           </a-form-model-item>
         </a-col>
         <a-col :span="12">
-          <a-form-model-item label="经度" prop="name">
+          <a-form-model-item label="经度" prop="longitude" class="default-form-item">
             <a-row :gutter="20">
               <a-col :span="17">
-                <a-input v-model="form.name" :maxLength="20" placeholder="请输入经度坐标" />
+                <a-input v-model="form.longitude" placeholder="请输入经度坐标" />
               </a-col>
               <a-col :span="6">
                 <a href="https://lbs.qq.com/tool/getpoint/" target="_blank">
@@ -79,46 +78,78 @@
           </a-form-model-item>
         </a-col>
         <a-col :span="12">
-          <a-form-model-item label="纬度" prop="name">
-            <a-input v-model="form.name" :maxLength="20" placeholder="请输入纬度坐标" />
+          <a-form-model-item label="纬度" prop="latitude">
+            <a-input v-model="form.latitude" placeholder="请输入纬度坐标" />
           </a-form-model-item>
         </a-col>
         <a-col :span="12">
-          <a-form-model-item label="服务类型" prop="name">
-            <v-select ref="name" allowClear placeholder="请选择服务类型" v-model="form.name" code="CHECK_ENABLE_STATE"></v-select>
+          <a-form-model-item label="服务类型" prop="serviceType">
+            <v-select ref="serviceType" mode="multiple" placeholder="请选择服务类型" v-model="form.serviceType" @change="serviceTypeChange" code="CHECK_ENABLE_STATE"></v-select>
           </a-form-model-item>
         </a-col>
         <a-col :span="12">
-          <a-form-model-item label="营业时间" prop="name">
+          <a-form-model-item label="营业时间" class="default-form-item form-item-required">
             <a-row :gutter="20">
               <a-col :span="11">
-                <a-time-picker :default-open-value="moment('00:00', 'HH:mm')" @change="onStartChange" format="HH:mm" placeholder="请选择开始时间" class="time-picker" />
+                <a-form-model-item prop="startTime">
+                  <a-time-picker v-model="form.startTime" @change="startTimeChange" format="HH:mm" placeholder="请选择开始时间" class="time-picker" />
+                </a-form-model-item>
               </a-col>
               <a-col :span="2">至</a-col>
               <a-col :span="11">
-                <a-time-picker :default-open-value="moment('00:00', 'HH:mm')" @change="onStartChange" format="HH:mm" placeholder="请选择结束时间" class="time-picker" />
+                <a-form-model-item prop="endTime">
+                  <a-time-picker v-model="form.endTime" @change="endTimeChange" format="HH:mm" placeholder="请选择结束时间" class="time-picker" />
+                </a-form-model-item>
               </a-col>
             </a-row>
           </a-form-model-item>
         </a-col>
+        <!-- 时段价格设置  start -->
         <a-col :span="24">
-          <a-form-model-item label="时段价格" prop="name" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
-            <a-button type="primary" size="small" class="small-btn">添加时段</a-button>
+          <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-col :span="10">
+                <a-row :gutter="20">
+                  <a-col :span="11">
+                    <a-form-model-item :prop="'periodPrice.'+ ind + '.startTime'" :rules="{required: true, message: '请选择开始时间', trigger: 'change'}">
+                      <a-time-picker v-model="item.startTime" disabled @change="startTimeChange" 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="'periodPrice.'+ ind + '.endTime'" :rules="{required: true, message: '请选择结束时间', trigger: 'change'}">
+                      <a-time-picker v-model="item.endTime" @change="endTimeChange" format="HH:mm" placeholder="请选择" class="time-picker" />
+                    </a-form-model-item>
+                  </a-col>
+                </a-row>
+              </a-col>
+              <a-col :span="14">
+                <a-row :gutter="20">
+                  <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-input v-model="priceItem.value" :placeholder="'【'+ priceItem.name +'】单价'" suffix="元" />
+                    </a-form-model-item>
+                  </a-col>
+                </a-row>
+              </a-col>
+            </a-row>
+            <a-button type="dashed" @click="setTimeInterval" class="setTimeInterval"><a-icon type="plus" />添加时段</a-button>
           </a-form-model-item>
         </a-col>
+        <!-- 时段价格设置  end -->
         <a-col :span="24">
-          <a-form-model-item label="路线指引" prop="name" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
-            <editor ref="editor" @on-change="editorChange" :cache="false" v-model="form.name"></editor>
+          <a-form-model-item label="路线指引" prop="routeGuidance" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
+            <editor ref="editor" @on-change="editorChange" :cache="false" v-model="form.routeGuidance"></editor>
           </a-form-model-item>
         </a-col>
         <a-col :span="24">
-          <a-form-model-item label="温馨提示" prop="name" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
-            <a-textarea v-model="form.name" :maxLength="128" :auto-size="{ minRows: 3, maxRows: 5 }" placeholder="请输入温馨提示,128个字以内" />
+          <a-form-model-item label="温馨提示" prop="reminder" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
+            <a-textarea v-model="form.reminder" :maxLength="128" :auto-size="{ minRows: 3, maxRows: 5 }" placeholder="请输入温馨提示,128个字以内" />
           </a-form-model-item>
         </a-col>
         <a-col :span="24">
           <a-form-model-item :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }" class="btn-cont">
-            <a-button type="primary" @click="onSubmit">保存</a-button>
+            <a-button type="primary" @click="onSubmit('ruleForm')">保存</a-button>
             <a-button style="margin-left: 10px;" @click="resetForm">取消</a-button>
           </a-form-model-item>
         </a-col>
@@ -128,7 +159,7 @@
     <!-- 选择设备 -->
     <choose-equipment
       :openEquipmentModal="openEquipmentModal"
-      @close="openEquipmentModal=false"
+      @close="closeChooseEquipment"
     />
     
   </a-modal>
@@ -156,22 +187,69 @@
       return{
         isShow: this.openModal,  //  弹框是否展示
         form: {
-          name: ''
+          name: '',  //  网点名称
+          addrProvince: '',  //  省
+          addrCity: '',  //  市
+          addrDistrict: '',  //  区
+          addrDetail: '',  //  详细地址
+          equipment: '',  //  设备
+          sign: [],  //  网点标签
+          longitude: '',  //  经度
+          latitude: '',  //  纬度
+          serviceType: [],  //  服务类型
+          startTime: null,  //  营业时间开始时间
+          endTime: null,  //  营业时间结束时间
+          periodPrice: [],  //  时段价格
+          routeGuidance: '',  //  路线指引
+          reminder: ''  //  温馨提示
         },
         rules: {
           name: [
             { required: true, message: '请输入网店名称', trigger: 'blur' }
-          ]
+          ],
+          addrProvince: [
+            { required: true, message: '请选择所在省份', trigger: 'change' }
+          ],
+          addrCity: [
+            { required: true, message: '请选择所在市', trigger: 'change' }
+          ],
+          addrDistrict: [
+            { required: true, message: '请选择所在区县', trigger: 'change' }
+          ],
+          addrDetail: [
+            { required: true, message: '请输入详细地址', trigger: 'blur' }
+          ],
+          equipment: [
+            { required: true, message: '请选择设备', trigger: 'change' }
+          ],
+          sign: [
+            { required: true, message: '请选择网点标签', trigger: 'change' }
+          ],
+          longitude: [
+            { required: true, message: '请输入经度', trigger: 'blur' }
+          ],
+          latitude: [
+            { required: true, message: '请输入纬度', trigger: 'blur' }
+          ],
+          serviceType: [
+            { required: true, message: '请选择服务类型', trigger: 'change' }
+          ],
+          startTime: [
+            { required: true, message: '请选择开始时间', trigger: 'change' }
+          ],
+          endTime: [
+            { required: true, message: '请选择结束时间', trigger: 'change' }
+          ],
+          periodPrice: [
+            { required: true, message: '请设置时段价格', trigger: 'change' }
+          ],
         },
-        openEquipmentModal: false  //  选择设备  弹框展示状态
+        openEquipmentModal: false  ,//  选择设备  弹框展示状态
+        equipmentName: '',  //  选中的设备  名称
       }
     },
     methods: {
       moment,
-      //  营业时间 开始时间  change
-      onStartChange(time, timeString) {
-        console.log(time, timeString)
-      },
       // 文本编辑器  change
       editorChange (html, text) {
         this.form.name = html
@@ -179,13 +257,78 @@
         // this.$refs.editor.setHtml(this.formData.content)
       },
       //  保存
-      onSubmit(){
-        
+      onSubmit(formName){
+        console.log(this.form, '表单数据')
+        this.$refs[formName].validate(valid => {
+          if (valid) {
+            
+          } else {
+            console.log('error submit!!')
+            return false
+          }
+        })
       },
       //  取消
       resetForm(){
         this.$refs.ruleForm.resetFields()
         this.isShow = false
+      },
+      serviceTypeChange(e){
+        
+        console.log(e)
+      },
+      //  选择设备
+      closeChooseEquipment(val, name){
+        if(val){
+          this.form.equipment = val
+          this.equipmentName = name
+        }
+        this.openEquipmentModal = false
+      },
+      //  营业时间 开始时间  change
+      startTimeChange(time, timeString) {
+        console.log(time, timeString,'---开始时间')
+        // this.form.startTime = timeString
+      },
+      //  营业时间 结束时间  change
+      endTimeChange(time, timeString) {
+        console.log(time, timeString,'---结束时间')
+        // this.form.endTime = timeString
+      },
+      //  设置时段价格
+      setTimeInterval(){
+        if(this.form.serviceType.length == 0){
+          this.$message.error('请先选择服务类型')
+          return
+        }
+        if(!this.form.startTime){
+          this.$message.error('请先选择营业时间开始时间')
+          return
+        }
+        if(!this.form.endTime){
+          this.$message.error('请先选择营业时间结束时间')
+          return
+        }
+        let arr = {}
+        // 时段价格开始时间
+        let timeStr = ''
+        if(this.form.periodPrice.length == 0){
+          timeStr = this.form.startTime.format('HH:mm')
+        }else{
+          timeStr = this.form.periodPrice[this.form.periodPrice.length - 1].endTime
+          if(!timeStr){
+            this.$message.error('请先选择时段价格 - 第'+ this.form.periodPrice.length +'个时段的结束时间')
+            return
+          }
+        }
+        arr.startTime = moment(timeStr, 'HH:mm')
+        arr.endTime = null
+        arr.price = []
+        this.form.serviceType.map((item, index) => {
+          arr.price.push({ name: this.$refs.serviceType.getNameByCode(item), value: '' })
+        })
+        console.log(arr,'----arr')
+        this.form.periodPrice.push(arr)
       }
     },
     watch: {
@@ -205,9 +348,22 @@
 
 <style lang="less">
   .CarWashModal{
-    .ant-sub-form-item{
+    .default-form-item{
       margin-bottom: 0;
     }
+    .form-item-required{
+      .ant-form-item-label{
+        label:before{
+          display: inline-block;
+          margin-right: 4px;
+          color: #f5222d;
+          font-size: 14px;
+          font-family: SimSun, sans-serif;
+          line-height: 1;
+          content: '*';
+        }
+      }
+    }
     .small-btn{
       background-color: #19be6b;
       font-size: 13px;
@@ -221,5 +377,9 @@
     .btn-cont{
       text-align: center;
     }
+    .setTimeInterval{
+      width: 40%;
+      color: #19be6b;
+    }
   }
 </style>

+ 64 - 22
src/views/CarWashManagement/ChooseEquipment.vue

@@ -1,21 +1,15 @@
 <template>
   <a-modal class="CarWashEquipmentModal" title="选择设备" :width="600" :footer="null" :destroyOnClose="true" @cancel="modalIsShow=false" v-model="modalIsShow">
-    <!-- <a-input v-model="searchVal" placeholder="请输入" /> -->
-    <a-input-search placeholder="input search text" enter-button="查询" @search="onSearch" />
-    <a-radio-group v-model="equipment" @change="onChange">
-      <a-radio :style="radioStyle" :value="1">
-        Option A
-      </a-radio>
-      <a-radio :style="radioStyle" :value="2">
-        Option B
-      </a-radio>
-      <a-radio :style="radioStyle" :value="3">
-        Option C
-      </a-radio>
-      <a-radio :style="radioStyle" :value="4">
-        More...
+    <a-input-search placeholder="请输入设备序列号" enter-button="查询" @search="onSearch" class="input-search" />
+    <a-radio-group v-model="equipment" @change="onChange" class="radio-group">
+      <a-radio :style="radioStyle" v-for="(item,index) in equipmentList" :key="index" :value="item.value" :disabled="item.bindStatus==1">
+        <div class="radio-group-item">
+          <p class="item-label">{{item.name}}</p>
+          <p :class="['item-status', item.bindStatus == 1 ? 'ybind' : '']">{{item.bindStatus == 0 ? '绑定' : '已绑定'}}</p>
+        </div>
       </a-radio>
     </a-radio-group>
+    
   </a-modal>
 </template>
 
@@ -33,23 +27,38 @@
         modalIsShow: this.openEquipmentModal,  //  弹框是否展示
         searchVal: '',  // 查询条件
         radioStyle: {  //  设备选项样式
-          display: 'block',
+          display: 'flex',
+          alignItems: 'center',
           width: '100%',
-          border: '1px solid red',
+          border: '1px solid #e4e4e4',
           borderRadius: '6px',
-          padding: '3px 15px',
+          padding: '10px 15px',
+          marginTop: '15px'
         },
-        equipment: '',  //  选中的设备
+        equipment: null,  //  选中的设备
+        equipmentName: '',  //  选中的设备  名称
+        equipmentList: [  //  设备数据列表
+          { name: 'Option A', bindStatus: 0, value: 1 },
+          { name: 'Option B', bindStatus: 0, value: 2 },
+          { name: 'Option C', bindStatus: 0, value: 3 },
+          { name: 'Option D', bindStatus: 1, value: 4 }
+        ]
       }
     },
     methods: {
       //  查询
       onSearch(value) {
-        console.log(value);
+        console.log(value)
       },
       // 设备  change
       onChange(e) {
-        console.log('radio checked', e.target.value)
+        const _this = this
+        _this.equipment = e.target.value
+        let i = _this.equipmentList.findIndex(item => item.value == _this.equipment)
+        _this.equipmentName = _this.equipmentList[i].name
+        setTimeout(()=>{
+          _this.modalIsShow = false
+        },500)
       }
     },
     watch: {
@@ -60,12 +69,45 @@
       //  重定义的弹框状态
       modalIsShow (val){
         if (!val){
-          this.$emit('close')
+          this.$emit('close', this.equipment, this.equipmentName)
         }
       }
     }
   }
 </script>
 
-<style>
+<style lang="less">
+  .CarWashEquipmentModal{
+    .input-search{
+      margin-bottom: 15px;
+    }
+    .radio-group{
+      display: block;
+      width: 100%;
+      .ant-radio-wrapper{
+        .ant-radio{
+          width: 16px;
+        }
+        span:nth-child(2){
+          width: 100%;
+        }
+      }
+      .radio-group-item{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .item-label{
+          margin: 0;
+        }
+        .item-status{
+          margin: 0;
+          font-size: 12px;
+          color: #19be6b;
+        }
+        .item-status.ybind{
+          color: #ff9900;
+        }
+      }
+    }
+  }
 </style>