addShop.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454
  1. <template>
  2. <a-modal
  3. centered
  4. class="addShop-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="modalTit"
  8. v-model="isShow"
  9. @cancle="isShow=false"
  10. :width="1000">
  11. <a-form id="addShop-form" :form="form" ref="form" v-bind="formItemLayout" @submit="handleSubmit">
  12. <a-form-item label="店铺名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  13. <a-input
  14. id="addShop-name"
  15. :maxLength="30"
  16. v-decorator="[
  17. 'formData.name',
  18. { initialValue: formData.name, getValueFromEvent: $filterEmpty, rules: [{ message: '请输入网点名称' }] }
  19. ]"
  20. placeholder="请输入店铺名称(最多30个字符)"
  21. allowClear />
  22. </a-form-item>
  23. <a-form-item label="电话" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  24. <a-input
  25. id="addShop-mobile"
  26. :maxLength="11"
  27. type="number"
  28. :disabled="!isEdit && itemId!=''"
  29. v-decorator="[
  30. 'formData.mobile',
  31. { initialValue: formData.mobile, getValueFromEvent: $filterEmpty, rules: [{ required: true, message: '请输入电话' },{pattern:/^[1][0-9]{10}$/, message: '请输入正确的骑手电话!'}] }
  32. ]"
  33. placeholder="请输入电话"
  34. allowClear />
  35. </a-form-item>
  36. <a-form-item label="所属骑手" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  37. <a-select
  38. id="addShop-riderId"
  39. placeholder="请选择"
  40. allowClear
  41. v-decorator="[
  42. 'formData.riderId',
  43. { initialValue: formData.riderId}
  44. ]"
  45. :showSearch="true"
  46. option-filter-prop="children"
  47. :filter-option="filterOption">
  48. <a-select-option v-for="item in lableData" :key="item.userId" :value="item.userId">{{ item.userName+'-' }}{{ item.userMobile }}
  49. </a-select-option>
  50. </a-select>
  51. </a-form-item>
  52. <a-form-item
  53. label="地址"
  54. :label-col="formItemLayout.labelCol"
  55. :wrapper-col="formItemLayout.wrapperCol"
  56. style="margin: 0;">
  57. <a-row :gutter="20">
  58. <!-- 地址 -->
  59. <a-col span="8">
  60. <a-form-item>
  61. <a-select
  62. id="addShop-provinceCode"
  63. @change="getCityList"
  64. v-decorator="['formData.reverseReceiveAddress.provinceCode', { initialValue: formData.reverseReceiveAddress.provinceCode}]"
  65. placeholder="请选择省">
  66. <a-select-option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}
  67. </a-select-option>
  68. </a-select>
  69. </a-form-item>
  70. </a-col>
  71. <a-col span="8">
  72. <a-form-item prop="cityCode">
  73. <a-select
  74. id="addShop-cityCode"
  75. v-decorator="['formData.reverseReceiveAddress.cityCode', { initialValue: formData.reverseReceiveAddress.cityCode}]"
  76. @change="getAreaList"
  77. placeholder="请选择市">
  78. <a-select-option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}
  79. </a-select-option>
  80. </a-select>
  81. </a-form-item>
  82. </a-col>
  83. <a-col span="8">
  84. <a-form-item prop="districtCode">
  85. <a-select
  86. id="addShop-districtCode"
  87. v-decorator="['formData.reverseReceiveAddress.districtCode', { initialValue: formData.reverseReceiveAddress.districtCode}]"
  88. @change="areaCharged"
  89. placeholder="请选择区/县">
  90. <a-select-option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}
  91. </a-select-option>
  92. </a-select>
  93. </a-form-item>
  94. </a-col>
  95. </a-row>
  96. </a-form-item>
  97. <a-form-item label="详细地址" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  98. <a-input
  99. id="addShop-receiveAddress"
  100. :maxLength="30"
  101. v-decorator="[
  102. 'formData.reverseReceiveAddress.receiveAddress',
  103. { initialValue: formData.reverseReceiveAddress.receiveAddress, getValueFromEvent: $filterEmpty }
  104. ]"
  105. placeholder="请输入详细地址(最多30个字符)"
  106. allowClear />
  107. </a-form-item>
  108. <a-row :gutter="30">
  109. <a-col :span="10">
  110. <a-form-item label="纬度" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
  111. <a-input
  112. id="network-edit-lat"
  113. v-decorator="[
  114. 'formData.reverseReceiveAddress.lat',
  115. { initialValue: formData.reverseReceiveAddress.lat, rules: [
  116. { pattern: /^[\-\+]?([0-8]?\d{1}\.\d{1,8}|90\.0{1,8})$/, message: '请输入正确的纬度,整数部分为0~90,必须输入1到8位小数' }
  117. ] }
  118. ]"
  119. placeholder="请输入纬度"
  120. allowClear />
  121. </a-form-item>
  122. </a-col>
  123. <a-col :span="10">
  124. <a-form-item label="经度" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
  125. <a-input
  126. id="network-edit-lng"
  127. v-decorator="[
  128. 'formData.reverseReceiveAddress.lng',
  129. { initialValue: formData.reverseReceiveAddress.lng, getValueFromEvent: $filterEmpty, rules: [
  130. { 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位小数' }
  131. ] }
  132. ]"
  133. placeholder="请输入经度"
  134. allowClear />
  135. </a-form-item>
  136. </a-col>
  137. <a-col :span="4">
  138. <a href="https://lbs.qq.com/tool/getpoint/" target="_blank">
  139. <a-button type="primary" id="network-edit-search-jwd" style="margin-top: 8px;" size="small">查询坐标</a-button>
  140. </a>
  141. </a-col>
  142. </a-row>
  143. <a-form-item label="门头照" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  144. <Upload
  145. class="upload"
  146. id="storeImage-headerImageList"
  147. v-decorator="[ 'headerImageList', { initialValue: headerImageList } ]"
  148. ref="storeImage"
  149. :fileSize="0.25"
  150. @change="getStoreImage"
  151. listType="picture-card"></Upload>
  152. </a-form-item>
  153. <a-form-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
  154. <a-button type="primary" html-type="submit" id="addShop-submit" style="margin-right: 15px">保存</a-button>
  155. <a-button @click="isShow=false" style="margin-left: 15px" id="addShop-close">取消</a-button>
  156. </a-form-item>
  157. </a-form>
  158. </a-modal>
  159. </template>
  160. <script>
  161. import {
  162. getProvince,
  163. getCityByPro,
  164. getDistrictByCity
  165. } from '@/api/station'
  166. import {
  167. savShop,
  168. riderData,
  169. shopDetails
  170. } from '@/api/recoveryManage.js'
  171. import {
  172. Upload
  173. } from '@/components'
  174. export default {
  175. name: 'AddShop',
  176. props: {
  177. visible: { // 弹框显示状态
  178. type: Boolean,
  179. default: false
  180. },
  181. itemId: {
  182. type: [Number, String],
  183. default: ''
  184. }
  185. },
  186. watch: {
  187. // 父页面传过来的弹框状态
  188. visible (newValue, oldValue) {
  189. this.isShow = newValue
  190. },
  191. // 重定义的弹框状态
  192. isShow (newValue, oldValue) {
  193. if (!newValue) {
  194. this.close()
  195. this.$emit('close')
  196. } else {
  197. console.log(this.isEdit, this.headerImageList, this.formData.reverseReceiveAddress.headerImageList, '===========是否编辑')
  198. this.pageInit()
  199. }
  200. },
  201. itemId (newValue, oldValue) {
  202. if (this.isShow && newValue) {
  203. console.log(this.isShow && newValue)
  204. } else {
  205. this.isEdit = false
  206. }
  207. }
  208. },
  209. components: {
  210. Upload
  211. },
  212. data () {
  213. return {
  214. isShow: this.visible, // 是否打开弹框
  215. form: this.$form.createForm(this),
  216. formItemLayout: {
  217. labelCol: {
  218. span: 4
  219. },
  220. wrapperCol: {
  221. span: 16
  222. }
  223. },
  224. formData: {
  225. name: null, // 网点名称
  226. mobile: '',
  227. riderId: undefined,
  228. reverseReceiveAddress: {
  229. provinceCode: undefined, // 省
  230. provinceName: '',
  231. cityCode: undefined, // 市
  232. cityName: '',
  233. districtCode: undefined, // 区
  234. districtName: '',
  235. receiveAddress: '',
  236. lat: '',
  237. lng: ''
  238. }
  239. },
  240. headerImageList: '',
  241. isEdit: false, // 是否可编辑
  242. goldExRuleNoList: [], // 兑换规则下拉数据
  243. deliveryTimeRuleNoList: [], // 投递时间段下拉数据
  244. addrProvinceList: [], // 省下拉
  245. addrCityList: [], // 市下拉
  246. addrDistrictList: [], // 区下拉
  247. lableData: [] // 骑手数据
  248. }
  249. },
  250. computed: {
  251. modalTit () {
  252. return this.itemId ? '编辑' : '新增'
  253. }
  254. },
  255. mounted () {
  256. this.getRiderData() // 网点标签
  257. },
  258. methods: {
  259. pageInit () {
  260. this.getProvinceList()
  261. this.form.resetFields()
  262. this.getDetails()
  263. },
  264. getStoreImage (data) {
  265. this.headerImageList = data
  266. },
  267. close () {
  268. this.headerImageList = ''
  269. this.formData.reverseReceiveAddress.headerImageList = []
  270. if (this.$refs.storeImage) {
  271. this.$refs.storeImage.setFileList('')
  272. }
  273. },
  274. // 获取详情
  275. getDetails () {
  276. shopDetails({
  277. id: this.itemId
  278. }).then(res => {
  279. if (res.status == 200) {
  280. this.isEdit = res.data.sourceTypeReserve == 'admin'
  281. // 省市区
  282. this.getCityList(res.data.reverseReceiveAddress && res.data.reverseReceiveAddress.provinceCode ? res
  283. .data.reverseReceiveAddress.provinceCode : undefined)
  284. this.getAreaList(res.data.reverseReceiveAddress && res.data.reverseReceiveAddress.cityCode ? res.data
  285. .reverseReceiveAddress.cityCode : undefined)
  286. this.form.setFieldsValue({
  287. 'formData.name': res.data.name
  288. })
  289. this.form.setFieldsValue({
  290. 'formData.mobile': res.data.mobile
  291. })
  292. this.form.setFieldsValue({
  293. 'formData.riderId': res.data.riderId
  294. })
  295. this.form.setFieldsValue({
  296. 'formData.reverseReceiveAddress.provinceCode': res.data.reverseReceiveAddress.provinceCode ? res
  297. .data.reverseReceiveAddress.provinceCode : undefined
  298. })
  299. this.form.setFieldsValue({
  300. 'formData.reverseReceiveAddress.cityCode': res.data.reverseReceiveAddress.cityCode ? res.data.reverseReceiveAddress.cityCode : undefined
  301. })
  302. this.form.setFieldsValue({
  303. 'formData.reverseReceiveAddress.districtCode': res.data.reverseReceiveAddress.districtCode ? res.data.reverseReceiveAddress.districtCode : undefined
  304. })
  305. this.form.setFieldsValue({
  306. 'formData.reverseReceiveAddress.receiveAddress': res.data.reverseReceiveAddress.receiveAddress ? res.data.reverseReceiveAddress.receiveAddress : ''
  307. })
  308. this.form.setFieldsValue({
  309. 'formData.reverseReceiveAddress.lat': res.data.reverseReceiveAddress.lat ? res.data.reverseReceiveAddress.lat : ''
  310. })
  311. this.form.setFieldsValue({
  312. 'formData.reverseReceiveAddress.lng': res.data.reverseReceiveAddress.lng ? res.data.reverseReceiveAddress.lng : ''
  313. })
  314. this.$refs.storeImage.setFileList(res.data.reverseReceiveAddress.headerImageList ? res.data.reverseReceiveAddress.headerImageList.join() : '')
  315. // this.form.setFieldsValue({
  316. // 'formData.reverseReceiveAddress.headerImageList': res.data.reverseReceiveAddress.headerImageList?res.data.reverseReceiveAddress.headerImageList.join(',') :''
  317. // })
  318. }
  319. })
  320. },
  321. // 保存
  322. handleSubmit (e) {
  323. e.preventDefault()
  324. const _this = this
  325. this.form.validateFields((err, values) => {
  326. console.log(values, '------------')
  327. if (!err) {
  328. const formData = Object.assign(values.formData, {
  329. 'sourceTypeReserve': 'admin'
  330. })
  331. console.log(formData, '-----参数')
  332. formData.id = this.itemId || null
  333. if (formData.reverseReceiveAddress.provinceCode) {
  334. formData.reverseReceiveAddress.provinceName = _this.addrProvinceList.find(item => item.id == formData
  335. .reverseReceiveAddress.provinceCode).name
  336. }
  337. if (formData.reverseReceiveAddress.cityCode) {
  338. formData.reverseReceiveAddress.cityName = _this.addrCityList.find(item => item.id == formData
  339. .reverseReceiveAddress.cityCode).name
  340. }
  341. if (formData.reverseReceiveAddress.districtCode) {
  342. formData.reverseReceiveAddress.districtName = _this.addrDistrictList.find(item => item.id == formData
  343. .reverseReceiveAddress.districtCode).name
  344. }
  345. if (this.headerImageList) {
  346. formData.reverseReceiveAddress.headerImageList = this.headerImageList.split(',')
  347. }
  348. if ((formData.reverseReceiveAddress.lat == '' && formData.reverseReceiveAddress.lng == '') && (formData
  349. .riderId == '' || formData.riderId == undefined)) {
  350. this.$message.error('所属骑手或经纬度至少选择一个')
  351. return
  352. }
  353. savShop(formData).then(res => {
  354. if (res.status == 200) {
  355. _this.$message.success(res.message)
  356. setTimeout(() => {
  357. _this.$emit('refresh')
  358. _this.isShow = false
  359. }, 1000)
  360. }
  361. })
  362. }
  363. })
  364. },
  365. filterOption (input, option) {
  366. return (
  367. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  368. )
  369. },
  370. // 获取标签数据
  371. getRiderData () {
  372. riderData().then(res => {
  373. if (res.status == 200) {
  374. this.lableData = res.data || []
  375. }
  376. })
  377. },
  378. // 获取省列表
  379. getProvinceList () {
  380. getProvince().then(res => {
  381. if (res.status == 200) {
  382. this.addrProvinceList = res.data || []
  383. } else {
  384. this.addrProvinceList = []
  385. }
  386. })
  387. },
  388. // 获取城市列表
  389. getCityList (val) {
  390. this.addrCityList = []
  391. this.addrDistrictList = []
  392. this.form.setFieldsValue({
  393. 'formData.cityCode': undefined
  394. })
  395. this.form.setFieldsValue({
  396. 'formData.districtCode': undefined
  397. })
  398. this.form.setFieldsValue({
  399. 'formData.address': ''
  400. })
  401. this.getCityListRequest(val)
  402. },
  403. getCityListRequest (val) {
  404. getCityByPro({
  405. id: val
  406. }).then(res => {
  407. if (res.status == 200) {
  408. this.addrCityList = res.data || []
  409. } else {
  410. this.addrCityList = []
  411. }
  412. })
  413. },
  414. // 获取区县列表
  415. getAreaList (val) {
  416. this.addrDistrictList = []
  417. this.form.setFieldsValue({
  418. 'formData.districtCode': undefined
  419. })
  420. this.form.setFieldsValue({
  421. 'formData.address': ''
  422. })
  423. this.getAreaListRequest(val)
  424. },
  425. getAreaListRequest (val) {
  426. getDistrictByCity({
  427. id: val
  428. }).then(res => {
  429. if (res.status == 200) {
  430. this.addrDistrictList = res.data || []
  431. } else {
  432. this.addrDistrictList = []
  433. }
  434. })
  435. },
  436. // 区县变更
  437. areaCharged (val) {
  438. this.form.setFieldsValue({
  439. 'formData.address': ''
  440. })
  441. }
  442. }
  443. }
  444. </script>
  445. <style lang="less">
  446. .addShop-modal {
  447. .addShop-search-jwd {
  448. margin-top: 8px;
  449. }
  450. }
  451. </style>