chooseCustomModal.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  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. showDef
  59. disabled
  60. id="chooseCustom-basicInfo-warehouseSn"
  61. placeholder="请选择退货仓库"
  62. />
  63. </a-form-model-item>
  64. </a-col>
  65. </a-row>
  66. <a-row :gutter="15">
  67. <a-col :span="20">
  68. <a-form-model-item label="退货类别" prop="goodFlag">
  69. <v-select
  70. code="GOOD_FLAG"
  71. showType="radio"
  72. id="chooseCustom-goodFlag"
  73. v-model="form.goodFlag"
  74. allowClear
  75. placeholder="请选择退货类别"></v-select>
  76. </a-form-model-item>
  77. </a-col>
  78. </a-row>
  79. <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
  80. <a-button type="primary" :loading="confirmLoading" @click="handleSubmit" id="chooseCustom-btn-submit">保存</a-button>
  81. <a-button @click="cancel" style="margin-left: 15px" id="chooseCustom-btn-back">取消</a-button>
  82. </a-form-model-item>
  83. </a-form-model>
  84. </a-spin>
  85. </a-modal>
  86. </template>
  87. <script>
  88. import { commonMixin } from '@/utils/mixin'
  89. import { VSelect } from '@/components'
  90. import debounce from 'lodash/debounce'
  91. import warehouse from '@/views/common/chooseWarehouse.js'
  92. import { dealerSubareaScopeList, dealerDetailBySn } from '@/api/dealer'
  93. import { getDefaultWarehouse } from '@/api/warehouse'
  94. import { salesReturnInsert } from '@/api/salesReturn'
  95. export default {
  96. name: 'SalesReturnChooseCustomModal',
  97. mixins: [commonMixin],
  98. components: { VSelect, warehouse },
  99. props: {
  100. show: [Boolean]
  101. },
  102. data () {
  103. this.lastFetchId = 0
  104. this.fetchUser = debounce(this.fetchUser, 800)
  105. return {
  106. opened: this.show,
  107. spinning: false,
  108. title: '新增销售退货单——选择客户',
  109. confirmLoading: false,
  110. formItemLayout: {
  111. labelCol: { span: 6 },
  112. wrapperCol: { span: 18 }
  113. },
  114. form: {
  115. salesReturnBillSource: 'SALES',
  116. buyerName: '', // 客户名称
  117. buyerSn: undefined, // 客户sn
  118. contactTel: '', // 联系电话
  119. contactName: '', // 联系人
  120. provinceSn: '', // 省
  121. provinceName: '',
  122. citySn: '', // 市
  123. cityName: '',
  124. countySn: '', // 区
  125. countyName: '',
  126. customerAddr: '', // 详细地址
  127. warehouseSn: undefined, // 退货仓库
  128. syncFlag: undefined, // 是否同步
  129. goodFlag: undefined
  130. },
  131. rules: {
  132. buyerSn: [{ required: true, message: '请选择客户', trigger: ['change', 'blur'] }],
  133. warehouseSn: [{ required: true, message: '请选择退货仓库', trigger: 'change' }],
  134. syncFlag: [{ required: true, message: '请选择是否同步', trigger: ['change', 'blur'] }],
  135. goodFlag: [{ required: true, message: '请选择退货类别', trigger: ['change', 'blur'] }]
  136. },
  137. fetching: false,
  138. dealerData: []
  139. }
  140. },
  141. methods: {
  142. fetchUser (dealerName) {
  143. if (dealerName == '') return
  144. this.lastFetchId += 1
  145. const fetchId = this.lastFetchId
  146. this.dealerData = []
  147. this.fetching = true
  148. dealerSubareaScopeList({ nameLike: dealerName.replace(/\s+/g, ''), pageNo: 1, pageSize: 20 }).then(res => {
  149. if (fetchId !== this.lastFetchId) {
  150. return
  151. }
  152. this.dealerData = res.data && res.data.list ? res.data.list : []
  153. this.fetching = false
  154. })
  155. },
  156. // 客户 change
  157. handleChange (value) {
  158. dealerDetailBySn({ sn: this.form.buyerSn }).then(res => {
  159. if (res.data) {
  160. const data = res.data
  161. this.form = Object.assign(this.form, {
  162. buyerName: data.dealerName, // 客户名称
  163. buyerSn: data.dealerSn, // 客户sn
  164. contactTel: data.contactMobile, // 联系电话
  165. contactName: data.contact, // 联系人
  166. provinceSn: data.provinceSn, // 省
  167. provinceName: data.provinceName,
  168. citySn: data.citySn, // 市
  169. cityName: data.cityName,
  170. countySn: data.districtSn, // 区
  171. countyName: data.districtName,
  172. customerAddr: data.address // 详细地址
  173. })
  174. console.log(this.form)
  175. } else {
  176. this.$message.error('获取客户信息失败')
  177. }
  178. })
  179. },
  180. // 保存
  181. handleSubmit (e) {
  182. e.preventDefault()
  183. const _this = this
  184. this.$refs.ruleForm.validate(valid => {
  185. if (valid) {
  186. // 保存销售单
  187. _this.salesSaveFun()
  188. } else {
  189. console.log('error submit!!')
  190. return false
  191. }
  192. })
  193. },
  194. // 新建销售退货单
  195. salesSaveFun () {
  196. const _this = this
  197. const form = this.form
  198. console.log(form, 'save data')
  199. _this.spinning = true
  200. salesReturnInsert(form).then(res => {
  201. if (res.status == 200) {
  202. _this.$message.success(res.message)
  203. _this.$emit('ok', res.data)
  204. _this.cancel()
  205. _this.spinning = false
  206. } else {
  207. _this.spinning = false
  208. }
  209. })
  210. },
  211. getDefaultWarehouse () {
  212. getDefaultWarehouse().then(res => {
  213. this.form.warehouseSn = res.data ? res.data.warehouseSn : undefined
  214. })
  215. },
  216. cancel () {
  217. this.opened = false
  218. this.form = {
  219. salesReturnBillSource: 'SALES',
  220. buyerName: '', // 客户名称
  221. buyerSn: undefined, // 客户sn
  222. contactTel: '', // 联系电话
  223. contactName: '', // 联系人
  224. provinceSn: '', // 省
  225. provinceName: '',
  226. citySn: '', // 市
  227. cityName: '',
  228. countySn: '', // 区
  229. countyName: '',
  230. customerAddr: '', // 详细地址
  231. warehouseSn: undefined,
  232. syncFlag: undefined, // 是否同步
  233. goodFlag: undefined
  234. }
  235. this.$refs.ruleForm.resetFields()
  236. this.dealerData = []
  237. this.$emit('cancel')
  238. }
  239. },
  240. watch: {
  241. show (newValue, oldValue) {
  242. this.opened = newValue
  243. if (newValue) {
  244. this.getDefaultWarehouse()
  245. }
  246. }
  247. }
  248. }
  249. </script>