|
@@ -3,38 +3,50 @@
|
|
<!-- 表单 -->
|
|
<!-- 表单 -->
|
|
<a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
|
|
<a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
|
|
<a-row :gutter="20">
|
|
<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="default-form-item form-item-required">
|
|
|
|
- <a-row :gutter="20">
|
|
|
|
- <a-col :span="8">
|
|
|
|
- <a-form-model-item prop="addrProvince">
|
|
|
|
- <a-select v-model="form.addrProvince" placeholder="请选择省" @change="getCityList">
|
|
|
|
- <a-select-option v-for="item in addrProvinceList" :key="item.id" :value="item.id">{{item.name}}</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="请选择市" @change="getAreaList">
|
|
|
|
- <a-select-option v-for="item in addrCityList" :key="item.id" :value="item.id">{{item.name}}</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="请选择区" @change="areaCharged">
|
|
|
|
- <a-select-option v-for="item in addrDistrictList" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
|
|
|
|
- </a-select>
|
|
|
|
- </a-form-model-item>
|
|
|
|
- </a-col>
|
|
|
|
- </a-row>
|
|
|
|
- </a-form-model-item>
|
|
|
|
- </a-col>
|
|
|
|
|
|
+ <a-row>
|
|
|
|
+ <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-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">
|
|
|
|
+ <a-select v-model="form.addrProvince" placeholder="请选择省" @change="getCityList">
|
|
|
|
+ <a-select-option v-for="item in addrProvinceList" :key="item.id" :value="item.id">{{item.name}}</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="请选择市" @change="getAreaList">
|
|
|
|
+ <a-select-option v-for="item in addrCityList" :key="item.id" :value="item.id">{{item.name}}</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="请选择区" @change="areaCharged">
|
|
|
|
+ <a-select-option v-for="item in addrDistrictList" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="12">
|
|
|
|
+ <a-form-model-item label="网点照片" prop="icon" class="default-form-item">
|
|
|
|
+ <a-row>
|
|
|
|
+ <a-col :span="8">
|
|
|
|
+ <Upload ref="showPicture" :fileSize="5" :maxNums="1" @change="pictureChange" listType="picture-card" upText="上传图片"></Upload>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="16">
|
|
|
|
+ <p class="pic-remarks">(尺寸为100*100px)</p>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
<a-col :span="24">
|
|
<a-col :span="24">
|
|
<a-form-model-item label="详细地址" prop="addrDetail" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
|
|
<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-input v-model="form.addrDetail" :maxLength="32" placeholder="请输入详细地址,32个字以内" />
|
|
@@ -47,7 +59,7 @@
|
|
<a-tag v-if="form.deviceDTOList.length > 0" color="blue">{{deviceNo}}</a-tag>
|
|
<a-tag v-if="form.deviceDTOList.length > 0" color="blue">{{deviceNo}}</a-tag>
|
|
</a-col>
|
|
</a-col>
|
|
<a-col :span="5">
|
|
<a-col :span="5">
|
|
- <a-button type="primary" size="small" class="small-btn" @click="openEquipmentModal=true">选择</a-button>
|
|
|
|
|
|
+ <a-button type="primary" size="small" class="small-btn" v-if="pageType != 'edit'" @click="openEquipmentModal=true">选择</a-button>
|
|
</a-col>
|
|
</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
</a-form-model-item>
|
|
</a-form-model-item>
|
|
@@ -129,7 +141,7 @@
|
|
<a-row :gutter="20">
|
|
<a-row :gutter="20">
|
|
<a-col :span="8" v-for="(priceItem, subInd) in item.currentPrices" :key="subInd">
|
|
<a-col :span="8" v-for="(priceItem, subInd) in item.currentPrices" :key="subInd">
|
|
<a-form-model-item :prop="'storeItemPriceDTOList.'+ ind +'.currentPrices.'+ subInd + '.price'" :rules="{required: true, message: `请输入【${priceItem.name}】单价`, trigger: 'blur'}">
|
|
<a-form-model-item :prop="'storeItemPriceDTOList.'+ ind +'.currentPrices.'+ subInd + '.price'" :rules="{required: true, message: `请输入【${priceItem.name}】单价`, trigger: 'blur'}">
|
|
- <a-input-number v-model="priceItem.price" :min="0" :max="999999" :placeholder="'【'+ priceItem.name +'】单价'" class="input-number-s" />
|
|
|
|
|
|
+ <a-input-number v-model="priceItem.price" :min="0" :max="999999" :precision="2" :placeholder="'【'+ priceItem.name +'】单价'" class="input-number-s" />
|
|
<span class="unit">元</span>
|
|
<span class="unit">元</span>
|
|
</a-form-model-item>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
</a-col>
|
|
@@ -172,7 +184,7 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
- import { VSelect } from '@/components'
|
|
|
|
|
|
+ import { VSelect, Upload } from '@/components'
|
|
import ChooseEquipment from './ChooseEquipment.vue'
|
|
import ChooseEquipment from './ChooseEquipment.vue'
|
|
import Editor from '@/components/WEeditor'
|
|
import Editor from '@/components/WEeditor'
|
|
import moment from 'moment'
|
|
import moment from 'moment'
|
|
@@ -180,7 +192,7 @@
|
|
import { itemQuery, storeSave, storeFind, findItem } from '@/api/car-wash'
|
|
import { itemQuery, storeSave, storeFind, findItem } from '@/api/car-wash'
|
|
export default{
|
|
export default{
|
|
name: 'AddCarWashModal',
|
|
name: 'AddCarWashModal',
|
|
- components: { VSelect, Editor, ChooseEquipment },
|
|
|
|
|
|
+ components: { VSelect, Upload, Editor, ChooseEquipment },
|
|
props: {
|
|
props: {
|
|
openModal: { // 弹框是否展示
|
|
openModal: { // 弹框是否展示
|
|
type: Boolean,
|
|
type: Boolean,
|
|
@@ -199,6 +211,7 @@
|
|
return{
|
|
return{
|
|
isShow: this.openModal, // 弹框是否展示
|
|
isShow: this.openModal, // 弹框是否展示
|
|
form: {
|
|
form: {
|
|
|
|
+ icon: '', // 网点照片
|
|
name: '', // 网点名称
|
|
name: '', // 网点名称
|
|
addrProvince: undefined, // 省 编码
|
|
addrProvince: undefined, // 省 编码
|
|
addrProvinceName: '', // 省
|
|
addrProvinceName: '', // 省
|
|
@@ -219,6 +232,9 @@
|
|
reminder: '' // 温馨提示
|
|
reminder: '' // 温馨提示
|
|
},
|
|
},
|
|
rules: {
|
|
rules: {
|
|
|
|
+ icon: [
|
|
|
|
+ { required: true, message: '请选择网店照片', trigger: 'change' }
|
|
|
|
+ ],
|
|
name: [
|
|
name: [
|
|
{ required: true, message: '请输入网店名称', trigger: 'blur' }
|
|
{ required: true, message: '请输入网店名称', trigger: 'blur' }
|
|
],
|
|
],
|
|
@@ -293,10 +309,11 @@
|
|
setVal(item){
|
|
setVal(item){
|
|
const _this = this
|
|
const _this = this
|
|
console.log(item)
|
|
console.log(item)
|
|
- let arr = [ 'id', 'name', 'addrProvince', 'addrProvinceName', 'addrCityName', 'addrDistrictName', 'featuredServiceLabel', 'lng', 'lat', 'serviceType', 'guidance', 'reminder' ]
|
|
|
|
|
|
+ let arr = [ 'id', 'icon', 'name', 'addrProvince', 'addrProvinceName', 'addrCityName', 'addrDistrictName', 'featuredServiceLabel', 'lng', 'lat', 'serviceType', 'guidance', 'reminder' ]
|
|
arr.map(k => {
|
|
arr.map(k => {
|
|
this.form[k] = item[k]
|
|
this.form[k] = item[k]
|
|
})
|
|
})
|
|
|
|
+ this.$refs.showPicture.setFileList(this.form.icon)
|
|
this.getCityList(item.addrProvince) // 获取市区下拉数据
|
|
this.getCityList(item.addrProvince) // 获取市区下拉数据
|
|
this.form.addrCity = item.addrCity // 市区赋值
|
|
this.form.addrCity = item.addrCity // 市区赋值
|
|
this.getAreaList(item.addrCity) // 获取区县下拉数据
|
|
this.getAreaList(item.addrCity) // 获取区县下拉数据
|
|
@@ -309,25 +326,22 @@
|
|
this.form.endTime = moment(item.endTime, 'HH:mm') // 营业时间 结束时间
|
|
this.form.endTime = moment(item.endTime, 'HH:mm') // 营业时间 结束时间
|
|
this.setPeriodPrice(item.storeItemPriceDTOList) // 时段价格
|
|
this.setPeriodPrice(item.storeItemPriceDTOList) // 时段价格
|
|
this.isShow ? this.$refs.editor.setHtml(item.guidance) : null // 文本编辑器赋值
|
|
this.isShow ? this.$refs.editor.setHtml(item.guidance) : null // 文本编辑器赋值
|
|
|
|
+ console.log(this.form,'----赋值后的表单')
|
|
},
|
|
},
|
|
// 时段价格 赋值处理
|
|
// 时段价格 赋值处理
|
|
setPeriodPrice(storeItemPriceDTOList){
|
|
setPeriodPrice(storeItemPriceDTOList){
|
|
- let arrInd = 0
|
|
|
|
this.form.storeItemPriceDTOList = []
|
|
this.form.storeItemPriceDTOList = []
|
|
- for (var key in storeItemPriceDTOList) {
|
|
|
|
- if (storeItemPriceDTOList.hasOwnProperty(key)) {
|
|
|
|
- this.form.storeItemPriceDTOList.push({
|
|
|
|
- beginTime: moment(key.split(',')[0], 'HH:mm'),
|
|
|
|
- endTime: moment(key.split(',')[1], 'HH:mm'),
|
|
|
|
- currentPrices: []
|
|
|
|
- })
|
|
|
|
- let idArr = []
|
|
|
|
- storeItemPriceDTOList[key].map((k, ind) => {
|
|
|
|
- this.form.storeItemPriceDTOList[arrInd].currentPrices.push({ name: k.itemName, price: k.currentPrice, itemId: k.itemId })
|
|
|
|
- idArr.push(k.itemId)
|
|
|
|
- })
|
|
|
|
- this.form.serviceType = idArr // 服务类型
|
|
|
|
- arrInd++
|
|
|
|
|
|
+ for(let i = 0; i < storeItemPriceDTOList.length; i++){
|
|
|
|
+ this.form.storeItemPriceDTOList.push({
|
|
|
|
+ beginTime: moment(storeItemPriceDTOList[i][0].beginTime, 'HH:mm'),
|
|
|
|
+ endTime: moment(storeItemPriceDTOList[i][0].endTime, 'HH:mm'),
|
|
|
|
+ currentPrices: []
|
|
|
|
+ })
|
|
|
|
+ this.form.serviceType = []
|
|
|
|
+ for(let j = 0; j < storeItemPriceDTOList[i].length; j++){
|
|
|
|
+ let k = storeItemPriceDTOList[i][j]
|
|
|
|
+ this.form.storeItemPriceDTOList[i].currentPrices.push({ name: k.itemName, price: k.currentPrice, itemId: k.itemId })
|
|
|
|
+ this.form.serviceType.push(k.itemId)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
@@ -398,8 +412,10 @@
|
|
this.subendTime = [] // 时段价格 时段区间结束时间 change前的值
|
|
this.subendTime = [] // 时段价格 时段区间结束时间 change前的值
|
|
this.featuredServiceLabel = [] // 网点标签
|
|
this.featuredServiceLabel = [] // 网点标签
|
|
this.deviceNo = '' // 已选设备序列号
|
|
this.deviceNo = '' // 已选设备序列号
|
|
- // this.$refs.ruleForm.resetFields() 无效
|
|
|
|
|
|
+ // this.$refs.ruleForm.resetFields() // 无效
|
|
this.form.id = null
|
|
this.form.id = null
|
|
|
|
+ this.form.icon = '' // 网点照片
|
|
|
|
+ this.$refs.showPicture ? this.$refs.showPicture.setFileList('') : null
|
|
this.form.name = '' // 网点名称
|
|
this.form.name = '' // 网点名称
|
|
this.form.addrProvince = undefined // 省 编码
|
|
this.form.addrProvince = undefined // 省 编码
|
|
this.form.addrProvinceName = '' // 省
|
|
this.form.addrProvinceName = '' // 省
|
|
@@ -421,7 +437,6 @@
|
|
},
|
|
},
|
|
// 是否重置时段价格 (更改服务类型、营业开始结束时间)
|
|
// 是否重置时段价格 (更改服务类型、营业开始结束时间)
|
|
isResetstoreItemPriceDTOList(type, val){
|
|
isResetstoreItemPriceDTOList(type, val){
|
|
- console.log(type, val)
|
|
|
|
// type: serviceType 服务类型 beginTime 营业时间 开始时间 endTime 营业时间 结束时间
|
|
// type: serviceType 服务类型 beginTime 营业时间 开始时间 endTime 营业时间 结束时间
|
|
const _this = this
|
|
const _this = this
|
|
setTimeout(()=>{
|
|
setTimeout(()=>{
|
|
@@ -470,6 +485,10 @@
|
|
}
|
|
}
|
|
this.openEquipmentModal = false
|
|
this.openEquipmentModal = false
|
|
},
|
|
},
|
|
|
|
+ // 网点照片 change
|
|
|
|
+ pictureChange(data){
|
|
|
|
+ this.form.icon = data
|
|
|
|
+ },
|
|
// 设置时段价格
|
|
// 设置时段价格
|
|
setTimeInterval(){
|
|
setTimeInterval(){
|
|
if(this.form.serviceType.length == 0){
|
|
if(this.form.serviceType.length == 0){
|
|
@@ -632,9 +651,8 @@
|
|
}
|
|
}
|
|
},
|
|
},
|
|
carWashId (newValue, oldValue){
|
|
carWashId (newValue, oldValue){
|
|
- console.log(newValue,'-----新增编辑')
|
|
|
|
if(newValue && this.isShow){
|
|
if(newValue && this.isShow){
|
|
- console.log('进来 编辑')
|
|
|
|
|
|
+ this.getProvinceList() // 获取省下拉
|
|
this.getCarWashInfo(newValue)
|
|
this.getCarWashInfo(newValue)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -664,6 +682,11 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .pic-remarks{
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ color: #f5222d;
|
|
|
|
+ margin: 55px 0 0;
|
|
|
|
+ }
|
|
.small-btn{
|
|
.small-btn{
|
|
background-color: #19be6b;
|
|
background-color: #19be6b;
|
|
font-size: 13px;
|
|
font-size: 13px;
|
|
@@ -697,5 +720,9 @@
|
|
padding-left: 5px;
|
|
padding-left: 5px;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
+ .upload-file .ant-upload.ant-upload-select-picture-card, .upload-file .ant-upload-list-picture-card .ant-upload-list-item{
|
|
|
|
+ width: 100px;
|
|
|
|
+ height: 100px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|