chooseCustomModal.vue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. <template>
  2. <a-modal
  3. v-model="opened"
  4. :title="title"
  5. centered
  6. :maskClosable="false"
  7. :confirmLoading="confirmLoading"
  8. :width="800"
  9. :footer="null"
  10. @cancel="cancel"
  11. >
  12. <a-spin :spinning="spinning" tip="Loading...">
  13. <a-form-model
  14. id="chooseCustom-form"
  15. ref="ruleForm"
  16. :model="form"
  17. :rules="rules"
  18. :label-col="formItemLayout.labelCol"
  19. :wrapper-col="formItemLayout.wrapperCol">
  20. <a-form-model-item label="客户名称" prop="buyerSn">
  21. <dealerSubareaScopeList ref="dealerSubareaScopeList" id="chooseCustom-buyerSn" defValKey="buyerSn" @change="custChange" v-model="form.buyerSn" />
  22. </a-form-model-item>
  23. <a-form-model-item label="支付方式" prop="settleStyleSn">
  24. <v-select
  25. code="SETTLE_STYLE"
  26. id="chooseCustom-settleStyleSn"
  27. v-model="form.settleStyleSn"
  28. allowClear
  29. placeholder="请选择支付方式"></v-select>
  30. </a-form-model-item>
  31. <a-form-model-item prop="consigneeTel">
  32. <span slot="label">收货地址</span>
  33. {{ chooseAddr }}
  34. <a-button type="link" :disabled="!form.buyerSn" id="chooseCustom-chooseAddr" @click="handleChoose">{{ addressVal }} >></a-button>
  35. </a-form-model-item>
  36. <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
  37. <a-button @click="cancel" id="chooseCustom-btn-back">取消</a-button>
  38. <a-button type="primary" style="margin-left: 15px" :loading="confirmLoading" @click="handleSubmit" id="chooseCustom-btn-submit">保存</a-button>
  39. </a-form-model-item>
  40. </a-form-model>
  41. </a-spin>
  42. <!-- 选择地址 -->
  43. <choose-address-modal :openModal="openAddrModal" :paramsData="form.buyerSn" @ok="handleOk" @verify="verifyFun" @close="openAddrModal=false" />
  44. </a-modal>
  45. </template>
  46. <script>
  47. import { commonMixin } from '@/utils/mixin'
  48. import { VSelect } from '@/components'
  49. import dealerSubareaScopeList from '@/views/common/dealerSubareaScopeList.vue'
  50. import chooseAddressModal from './receivingAddress/chooseAddressModal.vue'
  51. import { dealerRecevieAddrQuery } from '@/api/dealerRecevieAddr'
  52. import chooseWarehouse from '@/views/common/chooseWarehouse'
  53. import { salesSave } from '@/api/salesNew'
  54. export default {
  55. name: 'SalesChooseCustomModal',
  56. mixins: [commonMixin],
  57. components: { VSelect, dealerSubareaScopeList, chooseAddressModal, chooseWarehouse },
  58. props: {
  59. show: [Boolean]
  60. },
  61. data () {
  62. return {
  63. opened: this.show,
  64. spinning: false,
  65. title: '选择客户', // 弹框标题
  66. confirmLoading: false, // loading
  67. // 表单列
  68. formItemLayout: {
  69. labelCol: { span: 4 },
  70. wrapperCol: { span: 18 }
  71. },
  72. // 表单数据
  73. form: {
  74. buyerSn: undefined, // 客户sn
  75. buyerName: '', // 客户名称
  76. settleStyleSn: undefined, // 支付方式
  77. shippingAddrProvinceSn: '',
  78. shippingAddrProvinceName: '', // 省
  79. shippingAddrCitySn: '',
  80. shippingAddrCityName: '', // 市
  81. shippingAddrCountySn: '',
  82. shippingAddrCountyName: '', // 区
  83. shippingAddr: '', // 详细地址
  84. consigneeTel: '', // 联系电话
  85. consigneeName: '', // 联系人名称
  86. warehouseSn: undefined // 仓库
  87. },
  88. // 表单校验规则
  89. rules: {
  90. buyerSn: [ { required: true, message: '请选择客户', trigger: ['change', 'blur'] } ],
  91. settleStyleSn: [ { required: true, message: '请选择支付方式', trigger: ['change', 'blur'] } ],
  92. consigneeTel: [ { required: true, message: '请选择收货地址', trigger: ['change', 'blur'] } ]
  93. },
  94. addressVal: '选择地址', // 选择地址/更换地址
  95. chooseAddr: '', // 当前已选地址信息
  96. openAddrModal: false // 选择地址弹框是否显示
  97. }
  98. },
  99. methods: {
  100. // 选择客户 change
  101. custChange (val) {
  102. if (val && val.key) {
  103. this.form.buyerSn = val.key || undefined
  104. this.form.buyerName = val.name || ''
  105. this.$refs.ruleForm.clearValidate()
  106. this.getDefaultAddress()
  107. if (val.row) {
  108. // this.form.warehouseSn = val.row.defaultWarehouseSn
  109. }
  110. } else {
  111. this.form.buyerName = ''
  112. this.form.buyerSn = undefined
  113. this.form.warehouseSn = undefined
  114. this.verifyFun(this.addressId)
  115. }
  116. },
  117. // 打开选择地址弹框
  118. handleChoose () {
  119. this.openAddrModal = true
  120. },
  121. // 保存
  122. handleSubmit (e) {
  123. e.preventDefault()
  124. const _this = this
  125. this.$refs.ruleForm.validate(valid => {
  126. if (valid) {
  127. _this.salesSaveFun()
  128. } else {
  129. return false
  130. }
  131. })
  132. },
  133. // 新建或编辑销售单
  134. salesSaveFun () {
  135. const _this = this
  136. const form = this.form
  137. _this.spinning = true
  138. salesSave(form).then(res => {
  139. if (res.status == 200) {
  140. _this.$message.success(res.message)
  141. _this.$emit('ok', res.data)
  142. if (_this.form.id) {
  143. _this.$emit('updateData')
  144. }
  145. _this.cancel()
  146. _this.spinning = false
  147. } else {
  148. _this.spinning = false
  149. }
  150. })
  151. },
  152. // 关闭弹框
  153. cancel () {
  154. this.opened = false
  155. this.$emit('cancel')
  156. this.$refs.ruleForm.resetFields()
  157. },
  158. // 地址保存
  159. handleOk (data) {
  160. this.chooseAddr = (data.consigneeName || '') + '(' + (data.consigneeTel || '-') + ')' + ' ' + (data.address || '')
  161. this.addressVal = '更换地址'
  162. this.form.shippingAddrProvinceSn = data.provinceSn || ''
  163. this.form.shippingAddrProvinceName = data.provinceName || '' // 省
  164. this.form.shippingAddrCitySn = data.citySn || ''
  165. this.form.shippingAddrCityName = data.cityName || '' // 市
  166. this.form.shippingAddrCountySn = data.countySn || ''
  167. this.form.shippingAddrCountyName = data.countyName || '' // 区
  168. this.form.shippingAddr = data.addr || ''// 详细地址
  169. this.form.consigneeTel = data.consigneeTel || '' // 联系电话
  170. this.form.consigneeName = data.consigneeName || ''
  171. this.addressId = data.id || undefined
  172. this.openAddrModal = false
  173. // 移除表单项的校验结果
  174. this.$refs.ruleForm.clearValidate('consigneeTel')
  175. },
  176. // 重置地址
  177. verifyFun (id) {
  178. if (id == this.addressId) {
  179. this.chooseAddr = ''
  180. this.addressVal = '选择地址'
  181. this.form.shippingAddrProvinceSn = ''
  182. this.form.shippingAddrProvinceName = ''// 省
  183. this.form.shippingAddrCitySn = ''
  184. this.form.shippingAddrCityName = '' // 市
  185. this.form.shippingAddrCountySn = ''
  186. this.form.shippingAddrCountyName = '' // 区
  187. this.form.shippingAddr = ''// 详细地址
  188. this.form.consigneeTel = '' // 联系电话
  189. this.form.consigneeName = ''
  190. }
  191. },
  192. // 获取默认地址
  193. getDefaultAddress () {
  194. dealerRecevieAddrQuery({ defaultFlag: 1, dealerSn: this.form.buyerSn }).then(res => {
  195. if (res.status == 200) {
  196. if (res.data.length == 1) {
  197. const ret = res.data[0]
  198. ret.address = (ret.provinceName ? (ret.provinceName + '-') : '') + (ret.cityName ? (ret.cityName + '-') : '') + (ret.countyName ? (ret.countyName + '-') : '') + ret.addr
  199. this.addressId = ret.id || undefined
  200. this.handleOk(ret)
  201. } else {
  202. this.verifyFun(this.addressId)
  203. }
  204. }
  205. })
  206. }
  207. },
  208. watch: {
  209. show (newValue, oldValue) {
  210. this.opened = newValue
  211. if (!newValue) {
  212. this.$refs.dealerSubareaScopeList.resetForm()
  213. this.$refs.ruleForm.resetFields()
  214. this.verifyFun(this.addressId)
  215. }
  216. }
  217. }
  218. }
  219. </script>