chooseCustomModal.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. <template>
  2. <a-modal
  3. v-model="opened"
  4. :title="title"
  5. centered
  6. :maskClosable="false"
  7. :confirmLoading="confirmLoading"
  8. :width="560"
  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. >
  21. <a-row :gutter="15">
  22. <a-col :span="20">
  23. <a-form-model-item label="客户名称" prop="buyerSn">
  24. <a-select
  25. show-search
  26. id="chooseCustom-buyerSn"
  27. v-model="form.buyerSn"
  28. placeholder="请输入名称搜索"
  29. :filter-option="false"
  30. :not-found-content="fetching ? undefined : null"
  31. @search="fetchUser"
  32. @change="handleChange"
  33. >
  34. <a-spin v-if="fetching" slot="notFoundContent" size="small" />
  35. <a-select-option v-for="item in dealerData" :key="item.dealerSn" :value="item.dealerSn">{{ item.dealerName }}</a-select-option>
  36. </a-select>
  37. </a-form-model-item>
  38. </a-col>
  39. </a-row>
  40. <a-row :gutter="15">
  41. <a-col :span="20">
  42. <a-form-model-item label="是否同步" prop="syncFlag">
  43. <v-select
  44. code="FLAG"
  45. showType="radio"
  46. id="chooseCustom-syncFlag"
  47. v-model="form.syncFlag"
  48. allowClear
  49. placeholder="请选择"></v-select>
  50. </a-form-model-item>
  51. </a-col>
  52. </a-row>
  53. <a-row :gutter="15">
  54. <a-col :span="20">
  55. <a-form-model-item label="退货仓库" prop="warehouseSn">
  56. <warehouse
  57. v-model="form.warehouseSn"
  58. id="chooseCustom-basicInfo-warehouseSn"
  59. placeholder="请选择退货仓库"
  60. />
  61. </a-form-model-item>
  62. </a-col>
  63. </a-row>
  64. <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
  65. <a-button type="primary" :loading="confirmLoading" @click="handleSubmit" id="chooseCustom-btn-submit">保存</a-button>
  66. <a-button @click="cancel" style="margin-left: 15px" id="chooseCustom-btn-back">取消</a-button>
  67. </a-form-model-item>
  68. </a-form-model>
  69. </a-spin>
  70. </a-modal>
  71. </template>
  72. <script>
  73. import { commonMixin } from '@/utils/mixin'
  74. import { VSelect } from '@/components'
  75. import warehouse from '@/views/common/chooseWarehouse.js'
  76. import { dealerSubareaScopeList, dealerDetailBySn } from '@/api/dealer'
  77. import { salesReturnInsert } from '@/api/salesReturn'
  78. export default {
  79. name: 'SalesReturnChooseCustomModal',
  80. mixins: [commonMixin],
  81. components: { VSelect, warehouse },
  82. props: {
  83. show: [Boolean]
  84. },
  85. data () {
  86. return {
  87. opened: this.show,
  88. spinning: false,
  89. title: '新增销售退货单——选择客户',
  90. confirmLoading: false,
  91. formItemLayout: {
  92. labelCol: { span: 6 },
  93. wrapperCol: { span: 18 }
  94. },
  95. form: {
  96. salesReturnBillSource: 'SALES',
  97. buyerName: '', // 客户名称
  98. buyerSn: undefined, // 客户sn
  99. contactTel: '', // 联系电话
  100. contactName: '', // 联系人
  101. provinceSn: '', // 省
  102. provinceName: '',
  103. citySn: '', // 市
  104. cityName: '',
  105. countySn: '', // 区
  106. countyName: '',
  107. customerAddr: '', // 详细地址
  108. warehouseSn: undefined, // 退货仓库
  109. syncFlag: undefined // 是否同步
  110. },
  111. rules: {
  112. buyerSn: [{ required: true, message: '请选择客户', trigger: ['change', 'blur'] }],
  113. warehouseSn: [{ required: true, message: '请选择退货仓库', trigger: 'change' }],
  114. syncFlag: [{ required: true, message: '请选择是否同步', trigger: ['change', 'blur'] }]
  115. },
  116. fetching: false,
  117. dealerData: []
  118. }
  119. },
  120. methods: {
  121. // 搜索经销商
  122. fetchUser (value) {
  123. console.log('fetching user', value)
  124. this.fetching = true
  125. dealerSubareaScopeList({ nameLike: value.replace(/\s+/g, ''), pageNo: 1, pageSize: 20 }).then(res => {
  126. if (res.status == 200) {
  127. this.dealerData = res.data && res.data.list ? res.data.list : []
  128. this.fetching = false
  129. } else {
  130. this.dealerData = []
  131. this.fetching = false
  132. }
  133. })
  134. },
  135. // 客户 change
  136. handleChange (value) {
  137. dealerDetailBySn({ sn: this.form.buyerSn }).then(res => {
  138. if (res.data) {
  139. const data = res.data
  140. this.form = Object.assign(this.form, {
  141. buyerName: data.dealerName, // 客户名称
  142. buyerSn: data.dealerSn, // 客户sn
  143. contactTel: data.contactMobile, // 联系电话
  144. contactName: data.contact, // 联系人
  145. provinceSn: data.provinceSn, // 省
  146. provinceName: data.provinceName,
  147. citySn: data.citySn, // 市
  148. cityName: data.cityName,
  149. countySn: data.districtSn, // 区
  150. countyName: data.districtName,
  151. customerAddr: data.address // 详细地址
  152. })
  153. } else {
  154. this.$message.error('获取客户信息失败')
  155. this.$refs.ruleForm.resetFields()
  156. }
  157. })
  158. },
  159. // 保存
  160. handleSubmit (e) {
  161. e.preventDefault()
  162. const _this = this
  163. this.$refs.ruleForm.validate(valid => {
  164. if (valid) {
  165. // 保存销售单
  166. _this.salesSaveFun()
  167. } else {
  168. console.log('error submit!!')
  169. return false
  170. }
  171. })
  172. },
  173. // 新建销售退货单
  174. salesSaveFun () {
  175. const _this = this
  176. const form = this.form
  177. console.log(form, 'save data')
  178. _this.spinning = true
  179. salesReturnInsert(form).then(res => {
  180. if (res.status == 200) {
  181. _this.$message.success(res.message)
  182. _this.$emit('ok', res.data)
  183. _this.cancel()
  184. _this.spinning = false
  185. } else {
  186. _this.spinning = false
  187. }
  188. })
  189. },
  190. cancel () {
  191. this.opened = false
  192. this.form = {
  193. salesReturnBillSource: 'SALES',
  194. buyerName: '', // 客户名称
  195. buyerSn: undefined, // 客户sn
  196. contactTel: '', // 联系电话
  197. contactName: '', // 联系人
  198. provinceSn: '', // 省
  199. provinceName: '',
  200. citySn: '', // 市
  201. cityName: '',
  202. countySn: '', // 区
  203. countyName: '',
  204. customerAddr: '', // 详细地址
  205. warehouseSn: undefined,
  206. syncFlag: undefined // 是否同步
  207. }
  208. this.$refs.ruleForm.resetFields()
  209. this.dealerData = []
  210. this.$emit('cancel')
  211. }
  212. },
  213. watch: {
  214. show (newValue, oldValue) {
  215. this.opened = newValue
  216. if (newValue) {
  217. }
  218. }
  219. }
  220. }
  221. </script>