123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788 |
- <template>
- <a-modal
- class="CarWashModal"
- :title="pageType == 'add' ? '新增' : pageType == 'edit' ? '编辑' : ''"
- :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-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-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="设备ID" prop="deviceDTOList" class="default-form-item">
- <a-row :gutter="20">
- <a-col :span="19">
- <a-tag v-if="form.deviceDTOList.length > 0" color="blue">{{ deviceNo }}</a-tag>
- </a-col>
- <a-col :span="5">
- <a-button type="primary" size="small" class="small-btn" v-if="pageType != 'edit'" @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="featuredServiceLabel" :rules="{ required: true, message: '请选择网点标签', trigger: 'change' }">
- <v-select
- ref="featuredServiceLabel"
- v-model="featuredServiceLabel"
- @change="featuredServiceLabelChange"
- mode="multiple"
- placeholder="请选择网点标签"
- showArrow
- code="STORE_LABEL"
- ></v-select>
- </a-form-model-item>
- </a-col>
- <a-col :span="12">
- <a-form-model-item label="经度" prop="lng" class="default-form-item">
- <a-row :gutter="20">
- <a-col :span="17"><a-input-number v-model="form.lng" :min="-180" :max="180" placeholder="请输入经度坐标" class="input-number-all" /></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="lat">
- <a-input-number v-model="form.lat" :min="-90" :max="90" placeholder="请输入纬度坐标" class="input-number-all" />
- </a-form-model-item>
- </a-col>
- <a-col :span="12">
- <a-form-model-item label="服务类型" prop="serviceType">
- <a-select v-model="form.serviceType" placeholder="请选择服务类型" @change="isResetstoreItemPriceDTOList('serviceType', $event)" showArrow mode="multiple">
- <a-select-option v-for="item in itemQueryList" :key="item.id" :value="item.id">{{ item.itemName }}</a-select-option>
- </a-select>
- </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="11">
- <a-form-model-item prop="beginTime">
- <a-time-picker
- v-model="form.beginTime"
- @change="isResetstoreItemPriceDTOList('beginTime', $event)"
- 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="endTime">
- <a-time-picker
- v-model="form.endTime"
- @change="isResetstoreItemPriceDTOList('endTime', $event)"
- 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-col="{ span: 3 }" :wrapper-col="{ span: 21 }" prop="storeItemPriceDTOList">
- <div slot="label" class="form-item-label">
- <a-tooltip
- placement="right"
- arrow-point-at-center
- title="时段价格是指车主在不同时段洗车需要支付不同的价格,主要用于日间服务和夜间服务的差异化管理,达到调节流量、集客引流的效果。不同时段区间采用起始时间包含,结束时间不包含原则。例如:时段区间为06:00(含)-22:00(不含),普通洗车10元;时间区间为22:00(含)-06:00(不含),普通洗车8元。客户在6点00分01秒普通洗车为10元,客户在22点00分01秒普通洗车为8元。"
- >
- 时段价格
- <a-icon :style="{ fontSize: '18px', color: '#1890ff', verticalAlign: 'sub' }" type="question-circle" />
- </a-tooltip>
- </div>
- <a-row :gutter="20" v-for="(item, ind) in form.storeItemPriceDTOList" :key="ind">
- <a-col :span="9">
- <a-row :gutter="20">
- <a-col :span="11">
- <a-form-model-item
- :prop="'storeItemPriceDTOList.' + ind + '.beginTime'"
- :rules="{ required: true, message: '请选择开始时间', trigger: 'change' }"
- >
- <a-time-picker v-model="item.beginTime" disabled 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="'storeItemPriceDTOList.' + ind + '.endTime'"
- :rules="{ required: true, message: '请选择结束时间', trigger: 'change' }"
- >
- <a-time-picker
- v-model="item.endTime"
- :default-open-value="item.beginTime"
- @change="isResetBelowstoreItemPriceDTOList($event, ind)"
- 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.currentPrices" :key="subInd">
- <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"
- :precision="2"
- :placeholder="'【' + priceItem.name + '】单价'"
- class="input-number-s"
- />
- <span class="unit">元</span>
- </a-form-model-item>
- </a-col>
- </a-row>
- </a-col>
- <a-col :span="1"><a-icon type="delete" title="删除" @click="delstoreItemPriceDTOList(ind)" :style="{ fontSize: '20px', color: 'red' }" /></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="guidance" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
- <editor ref="editor" @on-change="editorChange" :cache="false" v-model="form.guidance"></editor>
- </a-form-model-item>
- </a-col>
- <a-col :span="24">
- <a-form-model-item label="温馨提示" prop="reminder" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
- <a-textarea ref="reminder" 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 class="cancel" @click="cancel">取消</a-button>
- </a-form-model-item>
- </a-col>
- </a-row>
- </a-form-model>
- <!-- 选择设备 -->
- <choose-equipment :openEquipmentModal="openEquipmentModal" @close="closeChooseEquipment" />
- </a-modal>
- </template>
- <script>
- import { VSelect, Upload } from '@/components'
- import ChooseEquipment from './ChooseEquipment.vue'
- import Editor from '@/components/WEeditor'
- import moment from 'moment'
- import { getProvince, getCityByPro, getDistrictByCity } from '@/api/lookup'
- import { itemQuery, storeSave, storeFind, findItem } from '@/api/car-wash'
- export default {
- name: 'AddCarWashModal',
- components: { VSelect, Upload, Editor, ChooseEquipment },
- props: {
- openModal: {
- // 弹框是否展示
- type: Boolean,
- default: false
- },
- pageType: {
- // 页面类型
- type: String,
- default: ''
- },
- carWashId: {
- // 网点id
- type: String,
- default: ''
- }
- },
- data () {
- return {
- isShow: this.openModal, // 弹框是否展示
- form: {
- icon: '', // 网点照片
- name: '', // 网点名称
- addrProvince: undefined, // 省 编码
- addrProvinceName: '', // 省
- addrCity: undefined, // 市 编码
- addrCityName: '', // 市
- addrDistrict: undefined, // 区 编码
- addrDistrictName: '', // 区
- addrDetail: '', // 详细地址
- deviceDTOList: [], // 设备序列号
- featuredServiceLabel: '', // 网点标签
- lng: '', // 经度
- lat: '', // 纬度
- serviceType: [], // 服务类型
- beginTime: null, // 营业时间开始时间
- endTime: null, // 营业时间结束时间
- storeItemPriceDTOList: [], // 时段价格
- guidance: '', // 路线指引
- reminder: '' // 温馨提示
- },
- rules: {
- icon: [{ required: true, message: '请选择网店照片', trigger: 'change' }],
- 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' }],
- deviceDTOList: [{ required: true, message: '请选择设备', trigger: 'change' }],
- lng: [
- {
- required: true,
- pattern: /^[\\-\\+]?(0?\d{1,2}\.\d{1,8}|1[0-7]?\d{1}\.\d{1,8}|180\.0{1,8})$/,
- message: '请输入正确的经度,整数部分为0~180,必须输入1到8位小数',
- trigger: 'blur'
- }
- ],
- lat: [
- { required: true, pattern: /^[\\-\\+]?([0-8]?\d{1}\.\d{1,8}|90\.0{1,8})$/, message: '请输入正确的纬度,整数部分为0~90,必须输入1到8位小数', trigger: 'blur' }
- ],
- serviceType: [{ required: true, message: '请选择服务类型', trigger: 'change' }],
- beginTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
- endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
- storeItemPriceDTOList: [{ required: true, message: '请设置时段价格', trigger: 'change' }]
- },
- openEquipmentModal: false, // 选择设备 弹框展示状态
- serviceType: [], // 服务类型 change前的值
- beginTime: null, // 营业时间开始时间 change前的值
- endTime: null, // 营业时间结束时间 change前的值
- subendTime: [], // 时段价格 时段区间结束时间 change前的值
- featuredServiceLabel: [], // 网点标签
- addrProvinceList: [], // 省列表数据
- addrCityList: [], // 市列表数据
- addrDistrictList: [], // 区县列表数据
- itemQueryList: [], // 服务类型列表数据
- deviceNo: '' // 已选设备序列号
- }
- },
- methods: {
- moment,
- // 文本编辑器 change
- editorChange (html, text) {
- this.form.guidance = html
- },
- // 网点详情
- getCarWashInfo (id) {
- storeFind({ id: id }).then(res => {
- if (res.status == 200) {
- // 查询门店的服务时段价格
- findItem({ id: id }).then(result => {
- if (result.status == 200) {
- const carWashInfo = Object.assign(res.data, { storeItemPriceDTOList: result.data })
- this.setVal(carWashInfo)
- }
- })
- }
- })
- },
- // 表单赋值
- setVal (item) {
- const arr = [
- 'id',
- 'icon',
- 'name',
- 'addrProvince',
- 'addrProvinceName',
- 'addrCityName',
- 'addrDistrictName',
- 'featuredServiceLabel',
- 'lng',
- 'lat',
- 'serviceType',
- 'guidance',
- 'reminder'
- ]
- arr.map(k => {
- this.form[k] = item[k]
- })
- this.$refs.showPicture.setFileList(this.form.icon)
- this.getCityList(item.addrProvince) // 获取市区下拉数据
- this.form.addrCity = item.addrCity // 市区赋值
- this.getAreaList(item.addrCity) // 获取区县下拉数据
- this.form.addrDistrict = item.addrDistrict // 区县赋值
- this.form.addrDetail = item.addrDetail // 详细地址赋值
- this.form.deviceDTOList = [{ id: item.deviceVOList[0].id }] // 设备
- this.deviceNo = item.deviceVOList[0].deviceNo // 设备序列号
- this.featuredServiceLabel = item.featuredServiceLabel.split(',') // 网点标签
- this.form.beginTime = moment(item.beginTime, 'HH:mm') // 营业时间 开始时间
- this.form.endTime = moment(item.endTime, 'HH:mm') // 营业时间 结束时间
- this.setPeriodPrice(item.storeItemPriceDTOList) // 时段价格
- if (this.isShow) {
- this.$refs.editor.setHtml(item.guidance) // 文本编辑器赋值
- }
- },
- // 时段价格 赋值处理
- setPeriodPrice (storeItemPriceDTOList) {
- this.form.storeItemPriceDTOList = []
- 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++) {
- const 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)
- }
- }
- },
- // 保存
- onSubmit () {
- const _this = this
- _this.$refs.ruleForm.validate(valid => {
- if (valid) {
- const formData = JSON.parse(JSON.stringify(_this.form))
- // 校验营业时间结束时间是否与时段价格一致
- const endTime = formData.storeItemPriceDTOList[formData.storeItemPriceDTOList.length - 1].endTime
- if (_this.timeFormat(formData.endTime) !== _this.timeFormat(endTime)) {
- _this.$message.error('时段价格与营业时间不一致,请修改后再保存!')
- return
- }
- formData.beginTime = _this.timeFormat(formData.beginTime)
- formData.endTime = _this.timeFormat(formData.endTime)
- const arr = []
- formData.storeItemPriceDTOList.map(item => {
- item.currentPrices.map(k => {
- arr.push({
- beginTime: _this.timeFormat(item.beginTime),
- endTime: _this.timeFormat(item.endTime),
- itemId: k.itemId,
- name: k.name,
- currentPrice: k.price
- })
- })
- })
- formData.storeItemPriceDTOList = arr
- // 提交前时间格式还需转换
- delete formData.serviceType
- storeSave(formData).then(res => {
- if (res.status == 200) {
- _this.$message.success(res.message)
- _this.$emit('success')
- } else {
- _this.$message.error(res.message)
- }
- })
- } else {
- return false
- }
- })
- },
- // 时间格式转换
- timeFormat (time) {
- const dateTime = new Date(time)
- const hour = dateTime.getHours()
- const minute = dateTime.getMinutes()
- const timeStr = this.addZero(hour) + ':' + this.addZero(minute)
- return timeStr
- },
- // 时间0补位
- addZero (v) {
- return v < 10 ? '0' + v : v
- },
- // 取消
- cancel () {
- this.resetForm()
- this.isShow = false
- },
- // 重置表单数据
- resetForm () {
- this.serviceType = [] // 服务类型 change前的值
- this.beginTime = null // 营业时间开始时间 change前的值
- this.endTime = null // 营业时间结束时间 change前的值
- this.subendTime = [] // 时段价格 时段区间结束时间 change前的值
- this.featuredServiceLabel = [] // 网点标签
- this.deviceNo = '' // 已选设备序列号
- // this.$refs.ruleForm.resetFields() // 无效
- this.form.id = null
- this.form.icon = ''
- if (this.$refs.showPicture) {
- // 网点照片
- this.$refs.showPicture.setFileList('')
- }
- this.form.name = '' // 网点名称
- this.form.addrProvince = undefined // 省 编码
- this.form.addrProvinceName = '' // 省
- this.form.addrCity = undefined // 市 编码
- this.form.addrCityName = '' // 市
- this.form.addrDistrict = undefined // 区 编码
- this.form.addrDistrictName = '' // 区
- this.form.addrDetail = '' // 详细地址
- this.form.deviceDTOList = [] // 设备序列号
- this.form.featuredServiceLabel = '' // 网点标签
- this.form.lng = '' // 经度
- this.form.lat = '' // 纬度
- this.form.serviceType = [] // 服务类型
- this.form.beginTime = null // 营业时间开始时间
- this.form.endTime = null // 营业时间结束时间
- this.form.storeItemPriceDTOList = [] // 时段价格
- this.form.guidance = '' // 路线指引
- this.form.reminder = '' // 温馨提示
- },
- // 是否重置时段价格 (更改服务类型、营业开始结束时间)
- isResetstoreItemPriceDTOList (type, val) {
- // type: serviceType 服务类型 beginTime 营业时间 开始时间 endTime 营业时间 结束时间
- const _this = this
- setTimeout(() => {
- if (_this.form.storeItemPriceDTOList.length !== 0) {
- _this.$confirm({
- title: '提示',
- content: '更改后已设置的时段价格将会全部清空,确定要更改吗?',
- onOk () {
- type === 'serviceType' ? (_this.serviceType = val) : type === 'beginTime' ? (_this.beginTime = val) : (_this.endTime = val)
- _this.form.storeItemPriceDTOList = []
- },
- onCancel () {
- type === 'serviceType'
- ? (_this.form.serviceType = _this.serviceType)
- : type === 'beginTime'
- ? (_this.form.beginTime = _this.beginTime)
- : (_this.form.endTime = _this.endTime)
- }
- })
- } else {
- type === 'serviceType' ? (_this.serviceType = val) : type === 'beginTime' ? (_this.beginTime = val) : (_this.endTime = val)
- }
- }, 0)
- },
- // 是否重置时段价格 (更改时段价格区间结束时间)
- isResetBelowstoreItemPriceDTOList (val, ind) {
- const _this = this
- // 更改已设置过的时段时间(因为有下一个时段的前提是当前时段结束时间已设置)
- if (this.form.storeItemPriceDTOList[ind + 1]) {
- _this.$confirm({
- title: '提示',
- content: '更改已设置过的时段区间,其之后的时段区间将会被清空,确定要更改吗?',
- onOk () {
- _this.subendTime[ind] = val
- _this.form.storeItemPriceDTOList.splice(ind + 1, _this.form.storeItemPriceDTOList.length - Number(ind + 1))
- },
- onCancel () {
- _this.form.storeItemPriceDTOList[ind].endTime = _this.subendTime[ind]
- }
- })
- } else {
- _this.subendTime[ind] = val
- }
- },
- // 选择设备
- closeChooseEquipment (val, no) {
- if (val) {
- this.form.deviceDTOList = [{ id: val }]
- this.deviceNo = no
- }
- this.openEquipmentModal = false
- },
- // 网点照片 change
- pictureChange (data) {
- this.form.icon = data
- },
- // 设置时段价格
- setTimeInterval () {
- if (this.form.serviceType.length === 0) {
- this.$message.error('请先选择服务类型')
- return
- }
- if (!this.form.beginTime) {
- this.$message.error('请先选择营业时间开始时间')
- return
- }
- if (!this.form.endTime) {
- this.$message.error('请先选择营业时间结束时间')
- return
- }
- const arr = {}
- // 时段价格开始时间
- let timeStr = ''
- if (this.form.storeItemPriceDTOList.length === 0) {
- timeStr = this.form.beginTime.format('HH:mm')
- } else {
- timeStr = this.form.storeItemPriceDTOList[this.form.storeItemPriceDTOList.length - 1].endTime
- if (!timeStr) {
- this.$message.error('请先选择时段价格 - 第' + this.form.storeItemPriceDTOList.length + '个时段的结束时间')
- return
- }
- }
- arr.beginTime = moment(timeStr, 'HH:mm')
- arr.endTime = null
- arr.currentPrices = []
- this.form.serviceType.map((item, index) => {
- const i = this.itemQueryList.findIndex(k => Number(k.id) === Number(item))
- arr.currentPrices.push({ name: this.itemQueryList[i].itemName, price: '', itemId: item })
- })
- this.form.storeItemPriceDTOList.push(arr)
- },
- // 删除时段价格
- delstoreItemPriceDTOList (ind) {
- const _this = this
- const msg = Number(ind + 1) === _this.form.storeItemPriceDTOList.length ? '确定要删除该时段吗?' : '确定要删除该时段以及其之后已设置的时段吗?'
- _this.$confirm({
- title: '提示',
- content: msg,
- onOk () {
- _this.form.storeItemPriceDTOList.splice(ind, _this.form.storeItemPriceDTOList.length - ind)
- }
- })
- },
- // 网点标签 change
- featuredServiceLabelChange (val) {
- this.form.featuredServiceLabel = val.join(',')
- },
- // 获取服务类型列表
- getItemQuery () {
- itemQuery({
- pageNo: 1,
- pageSize: 1000
- }).then(res => {
- if (res.status == 200) {
- this.itemQueryList = res.data.list || []
- } else {
- this.itemQueryList = []
- }
- })
- },
- // 获取省列表
- getProvinceList () {
- const _this = this
- getProvince().then(res => {
- if (res.status == 200) {
- _this.addrProvinceList = res.data || []
- } else {
- _this.addrProvinceList = []
- }
- })
- },
- // 获取城市列表
- getCityList (val) {
- this.addrCityList = []
- this.addrDistrictList = []
- this.form.addrCity = undefined
- this.form.addrDistrict = undefined
- this.form.addrDetail = ''
- if (val == null || val === '') {
- this.form.addrProvinceName = ''
- } else {
- for (let i = 0; i < this.addrProvinceList.length; i++) {
- if (Number(this.addrProvinceList[i].id) === Number(val)) {
- this.form.addrProvinceName = this.addrProvinceList[i].name
- break
- }
- }
- this.getCityListRequest(val)
- }
- },
- getCityListRequest (val) {
- const _this = this
- getCityByPro({ id: val }).then(res => {
- if (res.status == 200) {
- _this.addrCityList = res.data || []
- } else {
- _this.addrCityList = []
- }
- })
- },
- // 获取区县列表
- getAreaList (val) {
- this.addrDistrictList = []
- this.form.addrDistrict = undefined
- this.form.addrDetail = ''
- if (val == null || val === '') {
- this.form.addrCityName = ''
- } else {
- for (let i = 0; i < this.addrCityList.length; i++) {
- if (Number(this.addrCityList[i].id) === Number(val)) {
- this.form.addrCityName = this.addrCityList[i].name
- break
- }
- }
- this.getAreaListRequest(val)
- }
- },
- getAreaListRequest (val) {
- const _this = this
- getDistrictByCity({ id: val }).then(res => {
- if (res.status == 200) {
- _this.addrDistrictList = res.data || []
- } else {
- _this.addrDistrictList = []
- }
- })
- },
- // 区县变更
- areaCharged (val) {
- if (val == null || val === '') {
- this.form.addrDistrictName = ''
- } else {
- for (let i = 0; i < this.addrDistrictList.length; i++) {
- if (Number(this.addrDistrictList[i].id) === Number(val)) {
- this.form.addrDistrictName = this.addrDistrictList[i].name
- break
- }
- }
- }
- this.form.addrDetail = ''
- }
- },
- watch: {
- // 父页面传过来的弹框状态
- openModal (newValue, oldValue) {
- this.isShow = newValue
- },
- // 重定义的弹框状态
- isShow (val) {
- if (!val) {
- this.$emit('close')
- } else {
- this.resetForm() // 重置表单数据
- this.getProvinceList() // 获取省下拉
- this.getItemQuery() // 服务类型 列表
- }
- },
- carWashId (newValue, oldValue) {
- if (newValue && this.isShow) {
- this.getProvinceList() // 获取省下拉
- this.getCarWashInfo(newValue)
- }
- }
- }
- }
- </script>
- <style lang="less">
- .CarWashModal {
- .default-form-item {
- margin-bottom: 0;
- }
- .form-item-label {
- display: inline-block;
- cursor: pointer;
- }
- .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: '*';
- }
- }
- }
- .pic-remarks {
- font-size: 12px;
- color: #f5222d;
- margin: 55px 0 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;
- .cancel {
- margin-left: 10px;
- }
- }
- .setTimeInterval {
- width: 40%;
- color: #19be6b;
- }
- .input-number-all {
- width: 100%;
- }
- .input-number-s {
- width: 90%;
- }
- .unit {
- display: inline-block;
- width: 10%;
- text-align: right;
- padding-left: 5px;
- 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>
|