AddCarWashModal.vue 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788
  1. <template>
  2. <a-modal
  3. class="CarWashModal"
  4. :title="pageType == 'add' ? '新增' : pageType == 'edit' ? '编辑' : ''"
  5. :width="1000"
  6. :footer="null"
  7. :destroyOnClose="true"
  8. @cancel="isShow = false"
  9. v-model="isShow"
  10. >
  11. <!-- 表单 -->
  12. <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
  13. <a-row :gutter="20">
  14. <a-row>
  15. <a-col :span="12">
  16. <a-form-model-item label="网点名称" prop="name"><a-input v-model="form.name" :maxLength="20" placeholder="请输入网店名称,20个字以内" /></a-form-model-item>
  17. <a-form-model-item label="地址" class="default-form-item form-item-required">
  18. <a-row :gutter="20">
  19. <a-col :span="8">
  20. <a-form-model-item prop="addrProvince">
  21. <a-select v-model="form.addrProvince" placeholder="请选择省" @change="getCityList">
  22. <a-select-option v-for="item in addrProvinceList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
  23. </a-select>
  24. </a-form-model-item>
  25. </a-col>
  26. <a-col :span="8">
  27. <a-form-model-item prop="addrCity">
  28. <a-select v-model="form.addrCity" placeholder="请选择市" @change="getAreaList">
  29. <a-select-option v-for="item in addrCityList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
  30. </a-select>
  31. </a-form-model-item>
  32. </a-col>
  33. <a-col :span="8">
  34. <a-form-model-item prop="addrDistrict">
  35. <a-select v-model="form.addrDistrict" placeholder="请选择区" @change="areaCharged">
  36. <a-select-option v-for="item in addrDistrictList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
  37. </a-select>
  38. </a-form-model-item>
  39. </a-col>
  40. </a-row>
  41. </a-form-model-item>
  42. </a-col>
  43. <a-col :span="12">
  44. <a-form-model-item label="网点照片" prop="icon" class="default-form-item">
  45. <a-row>
  46. <a-col :span="8">
  47. <Upload
  48. ref="showPicture"
  49. :fileSize="5"
  50. :maxNums="1"
  51. @change="pictureChange"
  52. listType="picture-card"
  53. upText="上传图片"></Upload>
  54. </a-col>
  55. <a-col :span="16"><p class="pic-remarks">(尺寸为100*100px)</p></a-col>
  56. </a-row>
  57. </a-form-model-item>
  58. </a-col>
  59. </a-row>
  60. <a-col :span="24">
  61. <a-form-model-item label="详细地址" prop="addrDetail" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
  62. <a-input v-model="form.addrDetail" :maxLength="32" placeholder="请输入详细地址,32个字以内" />
  63. </a-form-model-item>
  64. </a-col>
  65. <a-col :span="12">
  66. <a-form-model-item label="设备ID" prop="deviceDTOList" class="default-form-item">
  67. <a-row :gutter="20">
  68. <a-col :span="19">
  69. <a-tag v-if="form.deviceDTOList.length > 0" color="blue">{{ deviceNo }}</a-tag>
  70. </a-col>
  71. <a-col :span="5">
  72. <a-button type="primary" size="small" class="small-btn" v-if="pageType != 'edit'" @click="openEquipmentModal = true">选择</a-button>
  73. </a-col>
  74. </a-row>
  75. </a-form-model-item>
  76. </a-col>
  77. <a-col :span="12">
  78. <a-form-model-item label="网点标签" prop="featuredServiceLabel" :rules="{ required: true, message: '请选择网点标签', trigger: 'change' }">
  79. <v-select
  80. ref="featuredServiceLabel"
  81. v-model="featuredServiceLabel"
  82. @change="featuredServiceLabelChange"
  83. mode="multiple"
  84. placeholder="请选择网点标签"
  85. showArrow
  86. code="STORE_LABEL"
  87. ></v-select>
  88. </a-form-model-item>
  89. </a-col>
  90. <a-col :span="12">
  91. <a-form-model-item label="经度" prop="lng" class="default-form-item">
  92. <a-row :gutter="20">
  93. <a-col :span="17"><a-input-number v-model="form.lng" :min="-180" :max="180" placeholder="请输入经度坐标" class="input-number-all" /></a-col>
  94. <a-col :span="6">
  95. <a href="https://lbs.qq.com/tool/getpoint/" target="_blank">
  96. <a-button type="primary" size="small" icon="search" class="small-btn">查询坐标</a-button>
  97. </a>
  98. </a-col>
  99. </a-row>
  100. </a-form-model-item>
  101. </a-col>
  102. <a-col :span="12">
  103. <a-form-model-item label="纬度" prop="lat">
  104. <a-input-number v-model="form.lat" :min="-90" :max="90" placeholder="请输入纬度坐标" class="input-number-all" />
  105. </a-form-model-item>
  106. </a-col>
  107. <a-col :span="12">
  108. <a-form-model-item label="服务类型" prop="serviceType">
  109. <a-select v-model="form.serviceType" placeholder="请选择服务类型" @change="isResetstoreItemPriceDTOList('serviceType', $event)" showArrow mode="multiple">
  110. <a-select-option v-for="item in itemQueryList" :key="item.id" :value="item.id">{{ item.itemName }}</a-select-option>
  111. </a-select>
  112. </a-form-model-item>
  113. </a-col>
  114. <a-col :span="12">
  115. <a-form-model-item label="营业时间" class="default-form-item form-item-required">
  116. <a-row :gutter="20">
  117. <a-col :span="11">
  118. <a-form-model-item prop="beginTime">
  119. <a-time-picker
  120. v-model="form.beginTime"
  121. @change="isResetstoreItemPriceDTOList('beginTime', $event)"
  122. format="HH:mm"
  123. placeholder="请选择开始时间"
  124. class="time-picker"
  125. />
  126. </a-form-model-item>
  127. </a-col>
  128. <a-col :span="2">至</a-col>
  129. <a-col :span="11">
  130. <a-form-model-item prop="endTime">
  131. <a-time-picker
  132. v-model="form.endTime"
  133. @change="isResetstoreItemPriceDTOList('endTime', $event)"
  134. format="HH:mm"
  135. placeholder="请选择结束时间"
  136. class="time-picker"
  137. />
  138. </a-form-model-item>
  139. </a-col>
  140. </a-row>
  141. </a-form-model-item>
  142. </a-col>
  143. <!-- 时段价格设置 start -->
  144. <a-col :span="24">
  145. <a-form-model-item :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }" prop="storeItemPriceDTOList">
  146. <div slot="label" class="form-item-label">
  147. <a-tooltip
  148. placement="right"
  149. arrow-point-at-center
  150. title="时段价格是指车主在不同时段洗车需要支付不同的价格,主要用于日间服务和夜间服务的差异化管理,达到调节流量、集客引流的效果。不同时段区间采用起始时间包含,结束时间不包含原则。例如:时段区间为06:00(含)-22:00(不含),普通洗车10元;时间区间为22:00(含)-06:00(不含),普通洗车8元。客户在6点00分01秒普通洗车为10元,客户在22点00分01秒普通洗车为8元。"
  151. >
  152. 时段价格
  153. <a-icon :style="{ fontSize: '18px', color: '#1890ff', verticalAlign: 'sub' }" type="question-circle" />
  154. </a-tooltip>
  155. </div>
  156. <a-row :gutter="20" v-for="(item, ind) in form.storeItemPriceDTOList" :key="ind">
  157. <a-col :span="9">
  158. <a-row :gutter="20">
  159. <a-col :span="11">
  160. <a-form-model-item
  161. :prop="'storeItemPriceDTOList.' + ind + '.beginTime'"
  162. :rules="{ required: true, message: '请选择开始时间', trigger: 'change' }"
  163. >
  164. <a-time-picker v-model="item.beginTime" disabled format="HH:mm" placeholder="请选择" class="time-picker" />
  165. </a-form-model-item>
  166. </a-col>
  167. <a-col :span="2">至</a-col>
  168. <a-col :span="11">
  169. <a-form-model-item
  170. :prop="'storeItemPriceDTOList.' + ind + '.endTime'"
  171. :rules="{ required: true, message: '请选择结束时间', trigger: 'change' }"
  172. >
  173. <a-time-picker
  174. v-model="item.endTime"
  175. :default-open-value="item.beginTime"
  176. @change="isResetBelowstoreItemPriceDTOList($event, ind)"
  177. format="HH:mm"
  178. placeholder="请选择"
  179. class="time-picker"
  180. />
  181. </a-form-model-item>
  182. </a-col>
  183. </a-row>
  184. </a-col>
  185. <a-col :span="14">
  186. <a-row :gutter="20">
  187. <a-col :span="8" v-for="(priceItem, subInd) in item.currentPrices" :key="subInd">
  188. <a-form-model-item
  189. :prop="'storeItemPriceDTOList.' + ind + '.currentPrices.' + subInd + '.price'"
  190. :rules="{ required: true, message: `请输入【${priceItem.name}】单价`, trigger: 'blur' }"
  191. >
  192. <a-input-number
  193. v-model="priceItem.price"
  194. :min="0"
  195. :max="999999"
  196. :precision="2"
  197. :placeholder="'【' + priceItem.name + '】单价'"
  198. class="input-number-s"
  199. />
  200. <span class="unit">元</span>
  201. </a-form-model-item>
  202. </a-col>
  203. </a-row>
  204. </a-col>
  205. <a-col :span="1"><a-icon type="delete" title="删除" @click="delstoreItemPriceDTOList(ind)" :style="{ fontSize: '20px', color: 'red' }" /></a-col>
  206. </a-row>
  207. <a-button type="dashed" @click="setTimeInterval" class="setTimeInterval">
  208. <a-icon type="plus" />
  209. 添加时段
  210. </a-button>
  211. </a-form-model-item>
  212. </a-col>
  213. <!-- 时段价格设置 end -->
  214. <a-col :span="24">
  215. <a-form-model-item label="路线指引" prop="guidance" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
  216. <editor ref="editor" @on-change="editorChange" :cache="false" v-model="form.guidance"></editor>
  217. </a-form-model-item>
  218. </a-col>
  219. <a-col :span="24">
  220. <a-form-model-item label="温馨提示" prop="reminder" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
  221. <a-textarea ref="reminder" v-model="form.reminder" :maxLength="128" :auto-size="{ minRows: 3, maxRows: 5 }" placeholder="请输入温馨提示,128个字以内" />
  222. </a-form-model-item>
  223. </a-col>
  224. <a-col :span="24">
  225. <a-form-model-item :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }" class="btn-cont">
  226. <a-button type="primary" @click="onSubmit">保存</a-button>
  227. <a-button class="cancel" @click="cancel">取消</a-button>
  228. </a-form-model-item>
  229. </a-col>
  230. </a-row>
  231. </a-form-model>
  232. <!-- 选择设备 -->
  233. <choose-equipment :openEquipmentModal="openEquipmentModal" @close="closeChooseEquipment" />
  234. </a-modal>
  235. </template>
  236. <script>
  237. import { VSelect, Upload } from '@/components'
  238. import ChooseEquipment from './ChooseEquipment.vue'
  239. import Editor from '@/components/WEeditor'
  240. import moment from 'moment'
  241. import { getProvince, getCityByPro, getDistrictByCity } from '@/api/lookup'
  242. import { itemQuery, storeSave, storeFind, findItem } from '@/api/car-wash'
  243. export default {
  244. name: 'AddCarWashModal',
  245. components: { VSelect, Upload, Editor, ChooseEquipment },
  246. props: {
  247. openModal: {
  248. // 弹框是否展示
  249. type: Boolean,
  250. default: false
  251. },
  252. pageType: {
  253. // 页面类型
  254. type: String,
  255. default: ''
  256. },
  257. carWashId: {
  258. // 网点id
  259. type: String,
  260. default: ''
  261. }
  262. },
  263. data () {
  264. return {
  265. isShow: this.openModal, // 弹框是否展示
  266. form: {
  267. icon: '', // 网点照片
  268. name: '', // 网点名称
  269. addrProvince: undefined, // 省 编码
  270. addrProvinceName: '', // 省
  271. addrCity: undefined, // 市 编码
  272. addrCityName: '', // 市
  273. addrDistrict: undefined, // 区 编码
  274. addrDistrictName: '', // 区
  275. addrDetail: '', // 详细地址
  276. deviceDTOList: [], // 设备序列号
  277. featuredServiceLabel: '', // 网点标签
  278. lng: '', // 经度
  279. lat: '', // 纬度
  280. serviceType: [], // 服务类型
  281. beginTime: null, // 营业时间开始时间
  282. endTime: null, // 营业时间结束时间
  283. storeItemPriceDTOList: [], // 时段价格
  284. guidance: '', // 路线指引
  285. reminder: '' // 温馨提示
  286. },
  287. rules: {
  288. icon: [{ required: true, message: '请选择网店照片', trigger: 'change' }],
  289. name: [{ required: true, message: '请输入网店名称', trigger: 'blur' }],
  290. addrProvince: [{ required: true, message: '请选择所在省份', trigger: 'change' }],
  291. addrCity: [{ required: true, message: '请选择所在市', trigger: 'change' }],
  292. addrDistrict: [{ required: true, message: '请选择所在区县', trigger: 'change' }],
  293. addrDetail: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
  294. deviceDTOList: [{ required: true, message: '请选择设备', trigger: 'change' }],
  295. lng: [
  296. {
  297. required: true,
  298. pattern: /^[\\-\\+]?(0?\d{1,2}\.\d{1,8}|1[0-7]?\d{1}\.\d{1,8}|180\.0{1,8})$/,
  299. message: '请输入正确的经度,整数部分为0~180,必须输入1到8位小数',
  300. trigger: 'blur'
  301. }
  302. ],
  303. lat: [
  304. { required: true, pattern: /^[\\-\\+]?([0-8]?\d{1}\.\d{1,8}|90\.0{1,8})$/, message: '请输入正确的纬度,整数部分为0~90,必须输入1到8位小数', trigger: 'blur' }
  305. ],
  306. serviceType: [{ required: true, message: '请选择服务类型', trigger: 'change' }],
  307. beginTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
  308. endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
  309. storeItemPriceDTOList: [{ required: true, message: '请设置时段价格', trigger: 'change' }]
  310. },
  311. openEquipmentModal: false, // 选择设备 弹框展示状态
  312. serviceType: [], // 服务类型 change前的值
  313. beginTime: null, // 营业时间开始时间 change前的值
  314. endTime: null, // 营业时间结束时间 change前的值
  315. subendTime: [], // 时段价格 时段区间结束时间 change前的值
  316. featuredServiceLabel: [], // 网点标签
  317. addrProvinceList: [], // 省列表数据
  318. addrCityList: [], // 市列表数据
  319. addrDistrictList: [], // 区县列表数据
  320. itemQueryList: [], // 服务类型列表数据
  321. deviceNo: '' // 已选设备序列号
  322. }
  323. },
  324. methods: {
  325. moment,
  326. // 文本编辑器 change
  327. editorChange (html, text) {
  328. this.form.guidance = html
  329. },
  330. // 网点详情
  331. getCarWashInfo (id) {
  332. storeFind({ id: id }).then(res => {
  333. if (res.status == 200) {
  334. // 查询门店的服务时段价格
  335. findItem({ id: id }).then(result => {
  336. if (result.status == 200) {
  337. const carWashInfo = Object.assign(res.data, { storeItemPriceDTOList: result.data })
  338. this.setVal(carWashInfo)
  339. }
  340. })
  341. }
  342. })
  343. },
  344. // 表单赋值
  345. setVal (item) {
  346. const arr = [
  347. 'id',
  348. 'icon',
  349. 'name',
  350. 'addrProvince',
  351. 'addrProvinceName',
  352. 'addrCityName',
  353. 'addrDistrictName',
  354. 'featuredServiceLabel',
  355. 'lng',
  356. 'lat',
  357. 'serviceType',
  358. 'guidance',
  359. 'reminder'
  360. ]
  361. arr.map(k => {
  362. this.form[k] = item[k]
  363. })
  364. this.$refs.showPicture.setFileList(this.form.icon)
  365. this.getCityList(item.addrProvince) // 获取市区下拉数据
  366. this.form.addrCity = item.addrCity // 市区赋值
  367. this.getAreaList(item.addrCity) // 获取区县下拉数据
  368. this.form.addrDistrict = item.addrDistrict // 区县赋值
  369. this.form.addrDetail = item.addrDetail // 详细地址赋值
  370. this.form.deviceDTOList = [{ id: item.deviceVOList[0].id }] // 设备
  371. this.deviceNo = item.deviceVOList[0].deviceNo // 设备序列号
  372. this.featuredServiceLabel = item.featuredServiceLabel.split(',') // 网点标签
  373. this.form.beginTime = moment(item.beginTime, 'HH:mm') // 营业时间 开始时间
  374. this.form.endTime = moment(item.endTime, 'HH:mm') // 营业时间 结束时间
  375. this.setPeriodPrice(item.storeItemPriceDTOList) // 时段价格
  376. if (this.isShow) {
  377. this.$refs.editor.setHtml(item.guidance) // 文本编辑器赋值
  378. }
  379. },
  380. // 时段价格 赋值处理
  381. setPeriodPrice (storeItemPriceDTOList) {
  382. this.form.storeItemPriceDTOList = []
  383. for (let i = 0; i < storeItemPriceDTOList.length; i++) {
  384. this.form.storeItemPriceDTOList.push({
  385. beginTime: moment(storeItemPriceDTOList[i][0].beginTime, 'HH:mm'),
  386. endTime: moment(storeItemPriceDTOList[i][0].endTime, 'HH:mm'),
  387. currentPrices: []
  388. })
  389. this.form.serviceType = []
  390. for (let j = 0; j < storeItemPriceDTOList[i].length; j++) {
  391. const k = storeItemPriceDTOList[i][j]
  392. this.form.storeItemPriceDTOList[i].currentPrices.push({ name: k.itemName, price: k.currentPrice, itemId: k.itemId })
  393. this.form.serviceType.push(k.itemId)
  394. }
  395. }
  396. },
  397. // 保存
  398. onSubmit () {
  399. const _this = this
  400. _this.$refs.ruleForm.validate(valid => {
  401. if (valid) {
  402. const formData = JSON.parse(JSON.stringify(_this.form))
  403. // 校验营业时间结束时间是否与时段价格一致
  404. const endTime = formData.storeItemPriceDTOList[formData.storeItemPriceDTOList.length - 1].endTime
  405. if (_this.timeFormat(formData.endTime) !== _this.timeFormat(endTime)) {
  406. _this.$message.error('时段价格与营业时间不一致,请修改后再保存!')
  407. return
  408. }
  409. formData.beginTime = _this.timeFormat(formData.beginTime)
  410. formData.endTime = _this.timeFormat(formData.endTime)
  411. const arr = []
  412. formData.storeItemPriceDTOList.map(item => {
  413. item.currentPrices.map(k => {
  414. arr.push({
  415. beginTime: _this.timeFormat(item.beginTime),
  416. endTime: _this.timeFormat(item.endTime),
  417. itemId: k.itemId,
  418. name: k.name,
  419. currentPrice: k.price
  420. })
  421. })
  422. })
  423. formData.storeItemPriceDTOList = arr
  424. // 提交前时间格式还需转换
  425. delete formData.serviceType
  426. storeSave(formData).then(res => {
  427. if (res.status == 200) {
  428. _this.$message.success(res.message)
  429. _this.$emit('success')
  430. } else {
  431. _this.$message.error(res.message)
  432. }
  433. })
  434. } else {
  435. return false
  436. }
  437. })
  438. },
  439. // 时间格式转换
  440. timeFormat (time) {
  441. const dateTime = new Date(time)
  442. const hour = dateTime.getHours()
  443. const minute = dateTime.getMinutes()
  444. const timeStr = this.addZero(hour) + ':' + this.addZero(minute)
  445. return timeStr
  446. },
  447. // 时间0补位
  448. addZero (v) {
  449. return v < 10 ? '0' + v : v
  450. },
  451. // 取消
  452. cancel () {
  453. this.resetForm()
  454. this.isShow = false
  455. },
  456. // 重置表单数据
  457. resetForm () {
  458. this.serviceType = [] // 服务类型 change前的值
  459. this.beginTime = null // 营业时间开始时间 change前的值
  460. this.endTime = null // 营业时间结束时间 change前的值
  461. this.subendTime = [] // 时段价格 时段区间结束时间 change前的值
  462. this.featuredServiceLabel = [] // 网点标签
  463. this.deviceNo = '' // 已选设备序列号
  464. // this.$refs.ruleForm.resetFields() // 无效
  465. this.form.id = null
  466. this.form.icon = ''
  467. if (this.$refs.showPicture) {
  468. // 网点照片
  469. this.$refs.showPicture.setFileList('')
  470. }
  471. this.form.name = '' // 网点名称
  472. this.form.addrProvince = undefined // 省 编码
  473. this.form.addrProvinceName = '' // 省
  474. this.form.addrCity = undefined // 市 编码
  475. this.form.addrCityName = '' // 市
  476. this.form.addrDistrict = undefined // 区 编码
  477. this.form.addrDistrictName = '' // 区
  478. this.form.addrDetail = '' // 详细地址
  479. this.form.deviceDTOList = [] // 设备序列号
  480. this.form.featuredServiceLabel = '' // 网点标签
  481. this.form.lng = '' // 经度
  482. this.form.lat = '' // 纬度
  483. this.form.serviceType = [] // 服务类型
  484. this.form.beginTime = null // 营业时间开始时间
  485. this.form.endTime = null // 营业时间结束时间
  486. this.form.storeItemPriceDTOList = [] // 时段价格
  487. this.form.guidance = '' // 路线指引
  488. this.form.reminder = '' // 温馨提示
  489. },
  490. // 是否重置时段价格 (更改服务类型、营业开始结束时间)
  491. isResetstoreItemPriceDTOList (type, val) {
  492. // type: serviceType 服务类型 beginTime 营业时间 开始时间 endTime 营业时间 结束时间
  493. const _this = this
  494. setTimeout(() => {
  495. if (_this.form.storeItemPriceDTOList.length !== 0) {
  496. _this.$confirm({
  497. title: '提示',
  498. content: '更改后已设置的时段价格将会全部清空,确定要更改吗?',
  499. onOk () {
  500. type === 'serviceType' ? (_this.serviceType = val) : type === 'beginTime' ? (_this.beginTime = val) : (_this.endTime = val)
  501. _this.form.storeItemPriceDTOList = []
  502. },
  503. onCancel () {
  504. type === 'serviceType'
  505. ? (_this.form.serviceType = _this.serviceType)
  506. : type === 'beginTime'
  507. ? (_this.form.beginTime = _this.beginTime)
  508. : (_this.form.endTime = _this.endTime)
  509. }
  510. })
  511. } else {
  512. type === 'serviceType' ? (_this.serviceType = val) : type === 'beginTime' ? (_this.beginTime = val) : (_this.endTime = val)
  513. }
  514. }, 0)
  515. },
  516. // 是否重置时段价格 (更改时段价格区间结束时间)
  517. isResetBelowstoreItemPriceDTOList (val, ind) {
  518. const _this = this
  519. // 更改已设置过的时段时间(因为有下一个时段的前提是当前时段结束时间已设置)
  520. if (this.form.storeItemPriceDTOList[ind + 1]) {
  521. _this.$confirm({
  522. title: '提示',
  523. content: '更改已设置过的时段区间,其之后的时段区间将会被清空,确定要更改吗?',
  524. onOk () {
  525. _this.subendTime[ind] = val
  526. _this.form.storeItemPriceDTOList.splice(ind + 1, _this.form.storeItemPriceDTOList.length - Number(ind + 1))
  527. },
  528. onCancel () {
  529. _this.form.storeItemPriceDTOList[ind].endTime = _this.subendTime[ind]
  530. }
  531. })
  532. } else {
  533. _this.subendTime[ind] = val
  534. }
  535. },
  536. // 选择设备
  537. closeChooseEquipment (val, no) {
  538. if (val) {
  539. this.form.deviceDTOList = [{ id: val }]
  540. this.deviceNo = no
  541. }
  542. this.openEquipmentModal = false
  543. },
  544. // 网点照片 change
  545. pictureChange (data) {
  546. this.form.icon = data
  547. },
  548. // 设置时段价格
  549. setTimeInterval () {
  550. if (this.form.serviceType.length === 0) {
  551. this.$message.error('请先选择服务类型')
  552. return
  553. }
  554. if (!this.form.beginTime) {
  555. this.$message.error('请先选择营业时间开始时间')
  556. return
  557. }
  558. if (!this.form.endTime) {
  559. this.$message.error('请先选择营业时间结束时间')
  560. return
  561. }
  562. const arr = {}
  563. // 时段价格开始时间
  564. let timeStr = ''
  565. if (this.form.storeItemPriceDTOList.length === 0) {
  566. timeStr = this.form.beginTime.format('HH:mm')
  567. } else {
  568. timeStr = this.form.storeItemPriceDTOList[this.form.storeItemPriceDTOList.length - 1].endTime
  569. if (!timeStr) {
  570. this.$message.error('请先选择时段价格 - 第' + this.form.storeItemPriceDTOList.length + '个时段的结束时间')
  571. return
  572. }
  573. }
  574. arr.beginTime = moment(timeStr, 'HH:mm')
  575. arr.endTime = null
  576. arr.currentPrices = []
  577. this.form.serviceType.map((item, index) => {
  578. const i = this.itemQueryList.findIndex(k => Number(k.id) === Number(item))
  579. arr.currentPrices.push({ name: this.itemQueryList[i].itemName, price: '', itemId: item })
  580. })
  581. this.form.storeItemPriceDTOList.push(arr)
  582. },
  583. // 删除时段价格
  584. delstoreItemPriceDTOList (ind) {
  585. const _this = this
  586. const msg = Number(ind + 1) === _this.form.storeItemPriceDTOList.length ? '确定要删除该时段吗?' : '确定要删除该时段以及其之后已设置的时段吗?'
  587. _this.$confirm({
  588. title: '提示',
  589. content: msg,
  590. onOk () {
  591. _this.form.storeItemPriceDTOList.splice(ind, _this.form.storeItemPriceDTOList.length - ind)
  592. }
  593. })
  594. },
  595. // 网点标签 change
  596. featuredServiceLabelChange (val) {
  597. this.form.featuredServiceLabel = val.join(',')
  598. },
  599. // 获取服务类型列表
  600. getItemQuery () {
  601. itemQuery({
  602. pageNo: 1,
  603. pageSize: 1000
  604. }).then(res => {
  605. if (res.status == 200) {
  606. this.itemQueryList = res.data.list || []
  607. } else {
  608. this.itemQueryList = []
  609. }
  610. })
  611. },
  612. // 获取省列表
  613. getProvinceList () {
  614. const _this = this
  615. getProvince().then(res => {
  616. if (res.status == 200) {
  617. _this.addrProvinceList = res.data || []
  618. } else {
  619. _this.addrProvinceList = []
  620. }
  621. })
  622. },
  623. // 获取城市列表
  624. getCityList (val) {
  625. this.addrCityList = []
  626. this.addrDistrictList = []
  627. this.form.addrCity = undefined
  628. this.form.addrDistrict = undefined
  629. this.form.addrDetail = ''
  630. if (val == null || val === '') {
  631. this.form.addrProvinceName = ''
  632. } else {
  633. for (let i = 0; i < this.addrProvinceList.length; i++) {
  634. if (Number(this.addrProvinceList[i].id) === Number(val)) {
  635. this.form.addrProvinceName = this.addrProvinceList[i].name
  636. break
  637. }
  638. }
  639. this.getCityListRequest(val)
  640. }
  641. },
  642. getCityListRequest (val) {
  643. const _this = this
  644. getCityByPro({ id: val }).then(res => {
  645. if (res.status == 200) {
  646. _this.addrCityList = res.data || []
  647. } else {
  648. _this.addrCityList = []
  649. }
  650. })
  651. },
  652. // 获取区县列表
  653. getAreaList (val) {
  654. this.addrDistrictList = []
  655. this.form.addrDistrict = undefined
  656. this.form.addrDetail = ''
  657. if (val == null || val === '') {
  658. this.form.addrCityName = ''
  659. } else {
  660. for (let i = 0; i < this.addrCityList.length; i++) {
  661. if (Number(this.addrCityList[i].id) === Number(val)) {
  662. this.form.addrCityName = this.addrCityList[i].name
  663. break
  664. }
  665. }
  666. this.getAreaListRequest(val)
  667. }
  668. },
  669. getAreaListRequest (val) {
  670. const _this = this
  671. getDistrictByCity({ id: val }).then(res => {
  672. if (res.status == 200) {
  673. _this.addrDistrictList = res.data || []
  674. } else {
  675. _this.addrDistrictList = []
  676. }
  677. })
  678. },
  679. // 区县变更
  680. areaCharged (val) {
  681. if (val == null || val === '') {
  682. this.form.addrDistrictName = ''
  683. } else {
  684. for (let i = 0; i < this.addrDistrictList.length; i++) {
  685. if (Number(this.addrDistrictList[i].id) === Number(val)) {
  686. this.form.addrDistrictName = this.addrDistrictList[i].name
  687. break
  688. }
  689. }
  690. }
  691. this.form.addrDetail = ''
  692. }
  693. },
  694. watch: {
  695. // 父页面传过来的弹框状态
  696. openModal (newValue, oldValue) {
  697. this.isShow = newValue
  698. },
  699. // 重定义的弹框状态
  700. isShow (val) {
  701. if (!val) {
  702. this.$emit('close')
  703. } else {
  704. this.resetForm() // 重置表单数据
  705. this.getProvinceList() // 获取省下拉
  706. this.getItemQuery() // 服务类型 列表
  707. }
  708. },
  709. carWashId (newValue, oldValue) {
  710. if (newValue && this.isShow) {
  711. this.getProvinceList() // 获取省下拉
  712. this.getCarWashInfo(newValue)
  713. }
  714. }
  715. }
  716. }
  717. </script>
  718. <style lang="less">
  719. .CarWashModal {
  720. .default-form-item {
  721. margin-bottom: 0;
  722. }
  723. .form-item-label {
  724. display: inline-block;
  725. cursor: pointer;
  726. }
  727. .form-item-required {
  728. .ant-form-item-label {
  729. label:before {
  730. display: inline-block;
  731. margin-right: 4px;
  732. color: #f5222d;
  733. font-size: 14px;
  734. font-family: SimSun, sans-serif;
  735. line-height: 1;
  736. content: '*';
  737. }
  738. }
  739. }
  740. .pic-remarks {
  741. font-size: 12px;
  742. color: #f5222d;
  743. margin: 55px 0 0;
  744. }
  745. .small-btn {
  746. background-color: #19be6b;
  747. font-size: 13px;
  748. }
  749. .small-btn.ant-btn-primary:focus,
  750. .small-btn.ant-btn-primary:hover {
  751. background-color: #19be6b;
  752. }
  753. .time-picker {
  754. width: 100%;
  755. }
  756. .btn-cont {
  757. text-align: center;
  758. .cancel {
  759. margin-left: 10px;
  760. }
  761. }
  762. .setTimeInterval {
  763. width: 40%;
  764. color: #19be6b;
  765. }
  766. .input-number-all {
  767. width: 100%;
  768. }
  769. .input-number-s {
  770. width: 90%;
  771. }
  772. .unit {
  773. display: inline-block;
  774. width: 10%;
  775. text-align: right;
  776. padding-left: 5px;
  777. box-sizing: border-box;
  778. }
  779. .upload-file .ant-upload.ant-upload-select-picture-card,
  780. .upload-file .ant-upload-list-picture-card .ant-upload-list-item {
  781. width: 100px;
  782. height: 100px;
  783. }
  784. }
  785. </style>