editModal.vue 16 KB

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