|
@@ -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>
|