chooseCustomModal.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459
  1. <template>
  2. <a-modal
  3. v-model="opened"
  4. :title="title"
  5. centered
  6. :maskClosable="false"
  7. :confirmLoading="confirmLoading"
  8. :width="960"
  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="16">
  23. <a-form-model-item label="客户名称" prop="buyerSn" :labelCol="{ span: 3 }" :wrapperCol="{ span: 20 }">
  24. <selectCust v-if="!isEdit" ref="custList" :isValidateEnabled="true" @change="custChange" v-model="form.buyerSn"></selectCust>
  25. <span v-else>
  26. {{ form&&form.buyerNameCurrent?form.buyerName?form.buyerName==form.buyerNameCurrent?form.buyerNameCurrent:form.buyerNameCurrent+'('+form.buyerName+')':form.buyerNameCurrent:'--' }}
  27. </span>
  28. </a-form-model-item>
  29. </a-col>
  30. <!-- <a-col :span="16">
  31. <a-form-model-item>
  32. <a-button type="primary" class="button-primary" @click="openNewCust" icon="plus">新增</a-button>
  33. (点击新增按钮新增客户)
  34. </a-form-model-item>
  35. </a-col> -->
  36. </a-row>
  37. <a-row :gutter="15">
  38. <a-col :span="24">
  39. <a-form-model-item label="客户地址" required style="margin: 0;" :labelCol="{ span: 2 }" :wrapperCol="{ span: 22 }">
  40. <a-row :gutter="15">
  41. <!-- 客户地址 -->
  42. <a-col span="8">
  43. <a-form-model-item prop="provinceSn">
  44. <a-select id="chooseCustom-provinceSn" allowClear @change="getCityList" v-model="form.provinceSn" placeholder="请选择省">
  45. <a-select-option v-for="item in addrProvinceList" :value="item.areaSn" :key="item.areaSn + 'a'">{{ item.name }}</a-select-option>
  46. </a-select>
  47. </a-form-model-item>
  48. </a-col>
  49. <a-col span="8">
  50. <a-form-model-item prop="citySn">
  51. <a-select id="chooseCustom-citySn" allowClear @change="getAreaList" v-model="form.citySn" placeholder="请选择市">
  52. <a-select-option v-for="item in addrCityList" :value="item.areaSn" :key="item.areaSn + 'b'">{{ item.name }}</a-select-option>
  53. </a-select>
  54. </a-form-model-item>
  55. </a-col>
  56. <a-col span="8">
  57. <a-form-model-item prop="countySn">
  58. <a-select id="chooseCustom-countySn" allowClear @change="areaCharged" v-model="form.countySn" placeholder="请选择区/县">
  59. <a-select-option v-for="item in addrDistrictList" :value="item.areaSn" :key="item.areaSn + 'c'">{{ item.name }}</a-select-option>
  60. </a-select>
  61. </a-form-model-item>
  62. </a-col>
  63. </a-row>
  64. </a-form-model-item>
  65. </a-col>
  66. <a-col :span="24">
  67. <a-form-model-item label="详细地址" prop="customerAddr" :labelCol="{ span: 2 }" :wrapperCol="{ span: 22 }">
  68. <a-input
  69. id="chooseCustom-customerAddr"
  70. :maxLength="60"
  71. v-model.trim="form.customerAddr"
  72. placeholder="请输入详细地址(最多60个字符)"
  73. allowClear />
  74. </a-form-model-item>
  75. </a-col>
  76. </a-row>
  77. <a-row :gutter="15">
  78. <a-col :span="8">
  79. <a-form-model-item label="联系人" prop="consigneeName">
  80. <a-input
  81. id="chooseCustom-consigneeName"
  82. :maxLength="30"
  83. v-model.trim="form.consigneeName"
  84. placeholder="请输入联系人(最多30个字符)"
  85. allowClear />
  86. </a-form-model-item>
  87. </a-col>
  88. <a-col :span="8">
  89. <a-form-model-item label="联系电话" prop="contactTel">
  90. <a-input
  91. id="chooseCustom-contactTel"
  92. :maxLength="15"
  93. v-model.trim="form.contactTel"
  94. placeholder="请输入联系电话(最多15个字符)"
  95. allowClear />
  96. </a-form-model-item>
  97. </a-col>
  98. <a-col :span="8">
  99. <a-form-model-item label="联系手机" prop="contactMobile">
  100. <a-input
  101. id="chooseCustom-contactMobile"
  102. :maxLength="11"
  103. v-model.trim="form.contactMobile"
  104. placeholder="请输入联系手机(最多11个字符)"
  105. allowClear />
  106. </a-form-model-item>
  107. </a-col>
  108. </a-row>
  109. <a-row :gutter="15">
  110. <a-col :span="8">
  111. <a-form-model-item label="是否抓单" prop="grabFlag">
  112. <v-select code="FLAG" :disabled="isEdit" id="chooseCustom-grabFlag" v-model="form.grabFlag" allowClear placeholder="请选择"></v-select>
  113. </a-form-model-item>
  114. </a-col>
  115. <a-col :span="8">
  116. <a-form-model-item label="开单人">{{ $store.state.user.info.userNameCN }}</a-form-model-item>
  117. </a-col>
  118. </a-row>
  119. <a-row :gutter="15">
  120. <a-col :span="24">
  121. <a-form-model-item label="备注" :labelCol="{ span: 2 }" :wrapper-col="{ span: 14 }">
  122. <a-textarea
  123. v-model="form.remarks"
  124. :maxLength="100"
  125. placeholder="请输入备注(最多100个字符)"
  126. :auto-size="{ minRows: 2, maxRows: 6 }"
  127. />
  128. </a-form-model-item>
  129. </a-col>
  130. </a-row>
  131. <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
  132. <a-button type="primary" :loading="confirmLoading" @click="handleSubmit" id="chooseCustom-btn-submit">保存</a-button>
  133. <a-button @click="cancel" style="margin-left: 15px" id="chooseCustom-btn-back">取消</a-button>
  134. </a-form-model-item>
  135. </a-form-model>
  136. <!-- 新增客户 -->
  137. <a-modal
  138. v-model="isNewCust"
  139. title="新增客户"
  140. centered
  141. width="60%"
  142. :maskClosable="false"
  143. @cancel="cancelNewCust"
  144. :footer="null"
  145. >
  146. <CustomerManagementEdit ref="newCust" model="modal" @ok="newCustFun"></CustomerManagementEdit>
  147. </a-modal>
  148. </a-spin>
  149. </a-modal>
  150. </template>
  151. <script>
  152. import { getArea } from '@/api/data'
  153. import { custFindById, updateByCustomerSn } from '@/api/customer'
  154. import { salesReturnSave } from '@/api/salesReturn'
  155. import { VSelect } from '@/components'
  156. import selectCust from '@/views/common/selectCust.vue'
  157. import CustomerManagementEdit from '@/views/customerManagement/customerInfo/edit.vue'
  158. export default {
  159. name: 'ChooseCustomModal',
  160. components: { VSelect, CustomerManagementEdit, selectCust },
  161. props: {
  162. show: [Boolean]
  163. },
  164. data () {
  165. return {
  166. spinning: false,
  167. opened: this.show,
  168. title: '选择客户',
  169. confirmLoading: false,
  170. formItemLayout: {
  171. labelCol: { span: 6 },
  172. wrapperCol: { span: 18 }
  173. },
  174. buyerSnBak: '', // 更改前客户sn备份
  175. form: {
  176. buyerName: '', // 客户名称
  177. buyerSn: undefined, // 客户sn
  178. contactTel: '', // 联系电话
  179. contactMobile: '',
  180. consigneeName: '', // 联系人
  181. priceType: '', // 价格类型
  182. provinceSn: undefined, // 省
  183. provinceName: '',
  184. citySn: undefined, // 市
  185. cityName: '',
  186. countySn: undefined, // 区
  187. countyName: '',
  188. customerAddr: '', // 详细地址
  189. grabFlag: '1' // 是否抓单
  190. },
  191. rules: {
  192. buyerSn: [
  193. { required: true, message: '请选择客户', trigger: ['change', 'blur'] }
  194. ],
  195. contactMobile: [{ required: false, pattern: /^\d{11}$/, message: '请输入正确的手机号', trigger: 'blur' }],
  196. provinceSn: [
  197. { required: true, message: '请选择省', trigger: 'change' }
  198. ],
  199. citySn: [
  200. { required: true, message: '请选择市', trigger: 'change' }
  201. ],
  202. countySn: [
  203. { required: true, message: '请选择区/县', trigger: 'change' }
  204. ],
  205. grabFlag: [
  206. { required: true, message: '请选择是否铺货出库', trigger: 'change' }
  207. ]
  208. },
  209. addrProvinceList: [], // 省下拉
  210. addrCityList: [], // 市下拉
  211. addrDistrictList: [], // 区下拉
  212. custId: undefined, // 客户id
  213. isEdit: false, // 是否编辑状态
  214. isChangeCust: false, // 是否更换客户
  215. interId: null,
  216. isNewCust: false // 是否新增客户
  217. }
  218. },
  219. methods: {
  220. openNewCust () {
  221. this.isNewCust = true
  222. setTimeout(() => {
  223. this.$refs.newCust.getBaseData()
  224. }, 500)
  225. },
  226. // 新建客户
  227. newCustFun (data) {
  228. console.log(data, this.isEdit)
  229. this.isNewCust = false
  230. // 更新客户信息
  231. this.$refs.custList.setData({ key: data.customerSn, label: data.customerName, row: data })
  232. this.custChange({ key: data.customerSn, label: data.customerName, row: data })
  233. },
  234. cancelNewCust () {
  235. this.isNewCust = false
  236. this.$refs.newCust.getBaseData()
  237. },
  238. // 客户 change
  239. custChange (obj) {
  240. const _this = this
  241. if (obj && obj.key) {
  242. const cust = obj.row
  243. this.form.buyerSn = cust.customerSn
  244. // 编辑
  245. if (this.isEdit) {
  246. this.$confirm({
  247. title: '提示',
  248. content: '更换客户后信息需要重新完善,确认要更换吗?',
  249. centered: true,
  250. onOk () {
  251. _this.custId = cust.id
  252. _this.form.buyerName = cust.customerName
  253. _this.getDetail()
  254. },
  255. onCancel () {
  256. _this.form.buyerSn = _this.buyerSnBak
  257. }
  258. })
  259. } else {
  260. _this.custId = cust.id
  261. _this.form.buyerName = cust.customerName
  262. _this.getDetail()
  263. }
  264. } else {
  265. this.$refs.ruleForm.resetFields()
  266. if(!this.isEdit){
  267. this.$refs.custList.resetForm()
  268. }
  269. }
  270. },
  271. // 编辑客户信息
  272. editCust (data) {
  273. console.log(data)
  274. this.title = '编辑客户信息'
  275. this.isEdit = true
  276. this.form = Object.assign(this.form, data)
  277. this.form.buyerName = data.buyerNameCurrent || data.buyerName
  278. this.buyerSnBak = this.form.buyerSn
  279. if(data.buyerInfo){
  280. this.form.contactTel = data.buyerInfo.contactTel
  281. this.form.contactMobile = data.buyerInfo.contactMobile
  282. this.form.consigneeName = data.buyerInfo.contactName
  283. this.form.provinceSn = data.buyerInfo.provinceSn
  284. this.form.citySn = data.buyerInfo.citySn
  285. this.form.countySn = data.buyerInfo.countySn
  286. if (data.buyerInfo.provinceSn) { this.getArea('city', data.buyerInfo.provinceSn) }
  287. if (data.buyerInfo.citySn) { this.getArea('district', data.buyerInfo.citySn) }
  288. }
  289. },
  290. // 获取详情
  291. getDetail () {
  292. custFindById({ id: this.custId }).then(res => {
  293. const data = res.data
  294. if (res.status == 200 && data) {
  295. if (data.provinceSn) { this.getArea('city', data.provinceSn) }
  296. if (data.citySn) { this.getArea('district', data.citySn) }
  297. this.form = Object.assign(this.form, {
  298. buyerName: data.customerName, // 客户名称
  299. buyerSn: data.customerSn, // 客户sn
  300. contactTel: data.contactTel, // 联系电话
  301. contactMobile: data.contactMobile,
  302. consigneeName: data.contactName, // 联系人
  303. provinceSn: data.provinceSn, // 省
  304. provinceName: data.provinceName,
  305. priceType: data.priceType,
  306. citySn: data.citySn, // 市
  307. cityName: data.cityName,
  308. countySn: data.countySn, // 区
  309. countyName: data.countyName,
  310. customerAddr: data.customerAddr, // 详细地址
  311. fax: data.fax // 客户传真
  312. })
  313. } else {
  314. this.$message.error('获取客户信息失败')
  315. this.$refs.ruleForm.resetFields()
  316. }
  317. this.$refs.ruleForm.clearValidate()
  318. })
  319. },
  320. // 保存客户信息
  321. handleSaveCust () {
  322. const params = {
  323. customerName: this.form.buyerName,
  324. customerSn: this.form.buyerSn,
  325. contactTel: this.form.contactTel, // 联系电话
  326. contactMobile: this.form.contactMobile,
  327. contactName: this.form.consigneeName, // 联系人
  328. provinceSn: this.form.provinceSn, // 省
  329. provinceName: this.form.provinceName,
  330. priceType: this.form.priceType,
  331. citySn: this.form.citySn, // 市
  332. cityName: this.form.cityName,
  333. countySn: this.form.countySn, // 区
  334. countyName: this.form.countyName,
  335. customerAddr: this.form.customerAddr // 详细地址
  336. }
  337. this.spinning = true
  338. updateByCustomerSn(params).then(res => {
  339. this.spinning = false
  340. if (res.status == 200) {
  341. // 保存销售单
  342. this.salesSaveFun()
  343. this.spinning = false
  344. } else {
  345. this.spinning = false
  346. }
  347. })
  348. },
  349. // 保存
  350. handleSubmit (e) {
  351. e.preventDefault()
  352. const _this = this
  353. this.$refs.ruleForm.validate(valid => {
  354. if (valid) {
  355. // 保存客户信息
  356. _this.handleSaveCust()
  357. } else {
  358. console.log('error submit!!')
  359. return false
  360. }
  361. })
  362. },
  363. // 新建或编辑销售单
  364. salesSaveFun () {
  365. const _this = this
  366. const form = this.form
  367. _this.spinning = true
  368. salesReturnSave(form).then(res => {
  369. if (res.status == 200) {
  370. _this.$message.success(res.message)
  371. _this.$emit('ok', res.data)
  372. _this.cancel()
  373. _this.spinning = false
  374. } else {
  375. _this.spinning = false
  376. }
  377. })
  378. },
  379. cancel () {
  380. this.opened = false
  381. this.$refs.ruleForm.resetFields()
  382. this.$refs.custList && this.$refs.custList.resetForm()
  383. this.$emit('cancel')
  384. },
  385. // 获取城市列表
  386. getCityList (val) {
  387. this.addrCityList = []
  388. this.addrDistrictList = []
  389. this.form.citySn = undefined
  390. this.form.cityName = ''
  391. this.form.countySn = undefined
  392. this.form.countyName = ''
  393. if (val) {
  394. this.getArea('city', val)
  395. this.form.provinceName = this.addrProvinceList.find(item => item.areaSn == val).name
  396. } else {
  397. this.form.provinceName = ''
  398. }
  399. },
  400. // 获取区县列表
  401. getAreaList (val) {
  402. this.addrDistrictList = []
  403. this.form.countySn = undefined
  404. this.form.countyName = ''
  405. if (val) {
  406. this.getArea('district', val)
  407. this.form.cityName = this.addrCityList.find(item => item.areaSn == val).name
  408. } else {
  409. this.form.cityName = ''
  410. }
  411. },
  412. // 区县变更
  413. areaCharged (val) {
  414. if (val) {
  415. this.form.countyName = this.addrDistrictList.find(item => item.areaSn == val).name
  416. } else {
  417. this.form.countyName = ''
  418. }
  419. },
  420. // 省/市/区
  421. getArea (leve, sn) {
  422. let params
  423. if (leve == 'province') {
  424. params = { type: '2' }
  425. } else {
  426. params = { parentId: sn, type: leve == 'city' ? '3' : '4' }
  427. }
  428. getArea(params).then(res => {
  429. if (res.status == 200) {
  430. if (leve == 'province') {
  431. this.addrProvinceList = res.data || []
  432. } else if (leve == 'city') {
  433. this.addrCityList = res.data || []
  434. } else if (leve == 'district') {
  435. this.addrDistrictList = res.data || []
  436. }
  437. } else {
  438. if (leve == 'province') {
  439. this.addrProvinceList = []
  440. } else if (leve == 'city') {
  441. this.addrCityList = []
  442. } else if (leve == 'district') {
  443. this.addrDistrictList = []
  444. }
  445. }
  446. })
  447. }
  448. },
  449. watch: {
  450. show (newValue, oldValue) {
  451. this.opened = newValue
  452. if (newValue) {
  453. this.getArea('province')
  454. }
  455. }
  456. }
  457. }
  458. </script>