AddCarWashModal.vue 26 KB

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