|
@@ -1,16 +1,147 @@
|
|
|
<template>
|
|
|
- <a-modal class="CarWashModal" :title="mtitle" :width="600" :footer="null" :destroyOnClose="true" @cancel="isShow=false" v-model="isShow">
|
|
|
- <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
|
|
|
- <a-form-model-item ref="name" label="网点名称" prop="name">
|
|
|
- <a-input v-model="form.name" />
|
|
|
- </a-form-model-item>
|
|
|
+ <a-modal class="CarWashModal" :title="mtitle" :width="1000" :footer="null" :destroyOnClose="true" @cancel="isShow=false" v-model="isShow">
|
|
|
+ <!-- 表单 -->
|
|
|
+ <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
|
|
|
+ <a-row :gutter="20">
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-model-item label="网点名称" prop="name">
|
|
|
+ <a-input v-model="form.name" :maxLength="20" placeholder="请输入网店名称,20个字以内" />
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-model-item label="地址" class="ant-sub-form-item">
|
|
|
+ <a-row :gutter="20">
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-form-model-item prop="addrProvince">
|
|
|
+ <a-select v-model="form.addrProvince" placeholder="请选择省">
|
|
|
+ <a-select-option value="shanghai">
|
|
|
+ Zone one
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-form-model-item prop="addrCity">
|
|
|
+ <a-select v-model="form.addrCity" placeholder="请选择市">
|
|
|
+ <a-select-option value="shanghai">
|
|
|
+ Zone one
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-form-model-item prop="addrDistrict">
|
|
|
+ <a-select v-model="form.addrDistrict" placeholder="请选择区">
|
|
|
+ <a-select-option value="shanghai">
|
|
|
+ Zone one
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </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>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-model-item label="设备" prop="name">
|
|
|
+ <a-row :gutter="20">
|
|
|
+ <a-col :span="19">
|
|
|
+
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="5">
|
|
|
+ <a-button type="primary" size="small" class="small-btn" @click="openEquipmentModal=true">选择</a-button>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </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>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-model-item label="经度" prop="name">
|
|
|
+ <a-row :gutter="20">
|
|
|
+ <a-col :span="17">
|
|
|
+ <a-input v-model="form.name" :maxLength="20" placeholder="请输入经度坐标" />
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <a href="https://lbs.qq.com/tool/getpoint/" target="_blank">
|
|
|
+ <a-button type="primary" size="small" icon="search" class="small-btn">查询坐标</a-button>
|
|
|
+ </a>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </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>
|
|
|
+ </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>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-model-item label="营业时间" prop="name">
|
|
|
+ <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-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-col>
|
|
|
+ </a-row>
|
|
|
+ </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-button type="primary" size="small" class="small-btn">添加时段</a-button>
|
|
|
+ </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 }">
|
|
|
+ <editor ref="editor" @on-change="editorChange" :cache="false" v-model="form.name"></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>
|
|
|
+ </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 style="margin-left: 10px;" @click="resetForm">取消</a-button>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
</a-form-model>
|
|
|
+
|
|
|
+ <!-- 选择设备 -->
|
|
|
+ <choose-equipment
|
|
|
+ :openEquipmentModal="openEquipmentModal"
|
|
|
+ @close="openEquipmentModal=false"
|
|
|
+ />
|
|
|
+
|
|
|
</a-modal>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import { VSelect } from '@/components'
|
|
|
+ import ChooseEquipment from './ChooseEquipment.vue'
|
|
|
+ import Editor from '@/components/WEeditor'
|
|
|
+ import moment from 'moment'
|
|
|
export default{
|
|
|
name: 'AddCarWashModal',
|
|
|
+ components: { VSelect, Editor, ChooseEquipment },
|
|
|
props: {
|
|
|
openModal: { // 弹框是否展示
|
|
|
type: Boolean,
|
|
@@ -29,26 +160,66 @@
|
|
|
},
|
|
|
rules: {
|
|
|
name: [
|
|
|
- { required: true, message: '请输入网店名称,20个字以内', trigger: 'blur' }
|
|
|
+ { required: true, message: '请输入网店名称', trigger: 'blur' }
|
|
|
]
|
|
|
- }
|
|
|
+ },
|
|
|
+ openEquipmentModal: false // 选择设备 弹框展示状态
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ moment,
|
|
|
+ // 营业时间 开始时间 change
|
|
|
+ onStartChange(time, timeString) {
|
|
|
+ console.log(time, timeString)
|
|
|
+ },
|
|
|
+ // 文本编辑器 change
|
|
|
+ editorChange (html, text) {
|
|
|
+ this.form.name = html
|
|
|
+ // 点击查看详情时给文本编辑器赋值
|
|
|
+ // this.$refs.editor.setHtml(this.formData.content)
|
|
|
+ },
|
|
|
+ // 保存
|
|
|
+ onSubmit(){
|
|
|
+
|
|
|
+ },
|
|
|
+ // 取消
|
|
|
+ resetForm(){
|
|
|
+ this.$refs.ruleForm.resetFields()
|
|
|
+ this.isShow = false
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
+ // 父页面传过来的弹框状态
|
|
|
openModal (newValue, oldValue) {
|
|
|
this.isShow = newValue
|
|
|
},
|
|
|
+ // 重定义的弹框状态
|
|
|
isShow (val){
|
|
|
if (!val){
|
|
|
this.$emit('close')
|
|
|
}
|
|
|
- },
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
.CarWashModal{
|
|
|
-
|
|
|
+ .ant-sub-form-item{
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ .small-btn{
|
|
|
+ background-color: #19be6b;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ .small-btn.ant-btn-primary:focus, .small-btn.ant-btn-primary:hover{
|
|
|
+ background-color: #19be6b;
|
|
|
+ }
|
|
|
+ .time-picker{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .btn-cont{
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|